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,14 +60,22 @@ const PromptInput = () => {
   }
 
   return (
-    <div className="flex gap-4 items-center">
-      <Input
+    <div className="flex gap-4 relative w-full justify-center h-full">
+      <div className="absolute flex gap-4">
+        <Textarea
           ref={ref}
-        className="min-w-[500px]"
+          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}
-        placeholder="I want to repaint of..."
+          onTransitionEnd={toggleShowScroll}
         />
         <Button
           size="sm"
@@ -75,6 +87,7 @@ const PromptInput = () => {
           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}