Fix multiline support (updated)

src/renderer/src/assets/runner.css

@@ -21,26 +21,67 @@ body {
   width: 100%;
   height: 100%;
   display: grid;
-  grid-template-columns: auto;
+  /* grid-template-columns: 100px; */
   grid-template-rows: auto;
   justify-items: center;
   align-items: center;
 }
 
 .runner-input {
-  width: 100%
+  height: 100%;
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 100%;
+  align-content: stretch;
+  justify-content: space-around;
+  flex-direction: column;
+}
+
+.multiline-input-container {
+  display:flex;
+  align-items:flex-end;
+  height: 50%;
+}
+
+.runner-input-field,
+.runner-textarea-field {
+  font-size: 20px;
+  background: transparent;
+  border: 0;
+  font-family: "Roboto Mono", monospace;
+  flex-grow: 1;
 }
 
 .runner-input-field {
   height: 50px;
   text-align: center;
   width: 100%;
-  font-size: 20px;
-  background: transparent;
-  border: 0;
+  overflow-x: auto;
+  white-space: nowrap;
   font-family: "Roboto Mono", monospace
 }
 
+.runner-textarea-field {
+  max-width:100%;
+  text-align: left;
+  padding-left: 20px;
+  flex: 1 1 auto;
+  overflow: auto;
+  resize: none;
+}
+
+.runner-textarea-field:focus {
+  border: 0;
+  font-family: "Roboto Mono", monospace;
+  outline: none;
+  color: white;
+}
+
+.multi-line {
+  text-align: left !important;
+}
+
 .runner-input-field {
   color: #cac7c7
 }
@@ -269,13 +310,13 @@ body {
   grid-template-columns: 15px auto;
 }
 
-.runner-result::-webkit-scrollbar {
+.multi-line::-webkit-scrollbar, .runner-result::-webkit-scrollbar {
   width: 15px;
 }
-.runner-result::-webkit-scrollbar-corner {
+.multi-line::-webkit-scrollbar-corner, .runner-result::-webkit-scrollbar-corner {
   background: rgba(0,0,0,0);
 }
-.runner-result::-webkit-scrollbar-thumb {
+.multi-line::-webkit-scrollbar-thumb, .runner-result::-webkit-scrollbar-thumb {
   background-color: #294794;
   border-radius: 6px;
   border: 4px solid rgba(0,0,0,0);

src/renderer/src/runner/runner.tsx

@@ -13,6 +13,11 @@ export default function Runner(): ReactElement {
   const [commanderMode, setCommanderMode] = useState<boolean>(false)
   const [editMode, setEditMode] = useState<boolean>(false)
   const inputRef = useRef<HTMLInputElement>(null)
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+
+  const [isMultiLine, setIsMultiLine] = useState<boolean>(false)
+  const [multiLineArgs, setMultiLineArgs] = useState<string>('')
+
   const reloadRuntimesFromBackend = async (): Promise<void> => {
     const isCommanderMode = await window.electron.ipcRenderer.invoke('runner.isCommanderMode')
     const runtimesFetch: Runtime[] = await window.electron.ipcRenderer.invoke('runtimes')
@@ -68,7 +73,9 @@ export default function Runner(): ReactElement {
 
     await reloadRuntimesFromBackend()
   }
-  const handlePromptChange = (event: ChangeEvent<HTMLInputElement>): void => {
+  const handlePromptChange = (
+    event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>
+  ): void => {
     const value = event.target.value
     if (historyIndex !== -1) {
       applyHistoryIndex(-1)
@@ -116,9 +123,34 @@ export default function Runner(): ReactElement {
     applyHistoryIndex(historyIndex)
   }
 
+  const normalizeMultilineArgs = (): string => {
+    return multiLineArgs
+      ? ' ' +
+          multiLineArgs
+            .split('\n')
+            .map((line) => line.trim())
+            .join(' ')
+      : ''
+  }
+
   const handleKeyDown = (e): void => {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' && e.shiftKey && !isMultiLine) {
+      e.preventDefault()
+      setIsMultiLine(true)
+    }
+    if (e.code === 'Backslash' || e.code === 'Backquote') {
+      e.preventDefault()
+      isMultiLine ? setIsMultiLine(false) : setIsMultiLine(true)
+    }
+    if (e.code === 'Backspace' && isMultiLine && !multiLineArgs) {
+      e.preventDefault()
+      setIsMultiLine(false)
+    }
+    if (e.key === 'Enter' && !e.shiftKey) {
+      runtime ? (runtime.prompt += normalizeMultilineArgs()) : ''
       execute(runtime).catch((error) => console.error(error))
+      setMultiLineArgs('')
+      setIsMultiLine(false)
     }
     if (e.code === 'ArrowDown') {
       if (runtime && historyIndex > -1) {
@@ -201,6 +233,20 @@ export default function Runner(): ReactElement {
     }
   }
 
+  useEffect(() => {
+    if (!isMultiLine) {
+      historicalExecution
+        ? (historicalExecution.prompt += normalizeMultilineArgs())
+        : runtime
+          ? (runtime.prompt += normalizeMultilineArgs())
+          : ''
+      setMultiLineArgs('')
+      inputRef.current?.focus()
+      return
+    }
+    textAreaRef.current?.focus()
+  }, [isMultiLine])
+
   useEffect(() => {
     const runtime = runtimeList.find((r) => r.target)
     if (!runtime) {
@@ -366,15 +412,29 @@ export default function Runner(): ReactElement {
         <div className="runner-main">
           <div className="runner-input-container">
             <div className="runner-input">
-              <input
-                ref={inputRef}
-                autoFocus
-                className="runner-input-field"
-                placeholder=">"
-                onChange={handlePromptChange}
-                onKeyDown={handleKeyDown}
-                value={historicalExecution ? historicalExecution.prompt : runtime.prompt}
-              />
+              <div className={isMultiLine ? 'multiline-input-container' : ''}>
+                <input
+                  ref={inputRef}
+                  placeholder=">"
+                  className={`runner-input-field ${isMultiLine ? 'multi-line' : ''}`}
+                  onChange={handlePromptChange}
+                  onKeyDown={handleKeyDown}
+                  value={historicalExecution ? historicalExecution.prompt : runtime.prompt}
+                />
+              </div>
+
+              {isMultiLine ? (
+                <textarea
+                  ref={textAreaRef}
+                  placeholder=">>"
+                  className={`runner-textarea-field ${isMultiLine ? 'multi-line' : ''}`}
+                  onChange={(e) => setMultiLineArgs(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  value={multiLineArgs}
+                />
+              ) : (
+                ''
+              )}
             </div>
           </div>
           <div className={`runner-result ${result.code !== 0 ? '' : ''}`}>{output}</div>