frontend: add prompt auto expand

web_app/src/components/PromptInput.tsx

@@ -1,8 +1,9 @@
 import React, { FormEvent, useRef } from "react"
 import { Button } from "./ui/button"
-import { Input } from "./ui/input"
 import { useStore } from "@/lib/states"
-import { useClickAway } from "react-use"
+import { useClickAway, useToggle } from "react-use"
+import { Textarea } from "./ui/textarea"
+import { cn } from "@/lib/utils"
 
 const PromptInput = () => {
   const [
@@ -20,18 +21,21 @@ const PromptInput = () => {
     state.showPrevMask,
     state.hidePrevMask,
   ])
+
+  const [showScroll, toggleShowScroll] = useToggle(false)
+
   const ref = useRef(null)
   useClickAway<MouseEvent>(ref, () => {
     if (ref?.current) {
-      const input = ref.current as HTMLInputElement
+      const input = ref.current as HTMLTextAreaElement
       input.blur()
     }
   })
 
-  const handleOnInput = (evt: FormEvent<HTMLInputElement>) => {
+  const handleOnInput = (evt: FormEvent<HTMLTextAreaElement>) => {
     evt.preventDefault()
     evt.stopPropagation()
-    const target = evt.target as HTMLInputElement
+    const target = evt.target as HTMLTextAreaElement
     updateSettings({ prompt: target.value })
   }
 
@@ -56,24 +60,33 @@ const PromptInput = () => {
   }
 
   return (
-    <div className="flex gap-4 items-center">
-      <Input
-        ref={ref}
-        className="min-w-[500px]"
-        value={prompt}
-        onInput={handleOnInput}
-        onKeyUp={onKeyUp}
-        placeholder="I want to repaint of..."
-      />
-      <Button
-        size="sm"
-        onClick={handleRepaintClick}
-        disabled={isProcessing}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
-        Paint
-      </Button>
+    <div className="flex gap-4 relative w-full justify-center h-full">
+      <div className="absolute flex gap-4">
+        <Textarea
+          ref={ref}
+          placeholder="I want to repaint of..."
+          className={cn(
+            showScroll ? "focus:overflow-y-auto" : "overflow-y-hidden",
+            "min-h-[32px] h-[32px] overflow-x-hidden focus:h-[120px] overflow-y-hidden transition-[height] w-[500px] py-1 px-3 bg-background resize-none"
+          )}
+          style={{
+            scrollbarGutter: "stable",
+          }}
+          value={prompt}
+          onInput={handleOnInput}
+          onKeyUp={onKeyUp}
+          onTransitionEnd={toggleShowScroll}
+        />
+        <Button
+          size="sm"
+          onClick={handleRepaintClick}
+          disabled={isProcessing}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
+          Paint
+        </Button>
+      </div>
     </div>
   )
 }

web_app/src/components/ui/textarea.tsx

@@ -11,8 +11,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-          "overflow-auto"
+          "overflow-auto",
+          className
         )}
         tabIndex={-1}
         ref={ref}