Merge pull request #112 from miurla/fix-textarea

Update chat input styling and behavior

components/chat-panel.tsx

@@ -8,6 +8,7 @@ import { Input } from './ui/input'
 import { Button } from './ui/button'
 import { ArrowRight, Plus } from 'lucide-react'
 import { EmptyScreen } from './empty-screen'
+import Textarea from 'react-textarea-autosize'
 import { nanoid } from 'ai'
 
 interface ChatPanelProps {
@@ -19,7 +20,7 @@ export function ChatPanel({ messages }: ChatPanelProps) {
   const [, setMessages] = useUIState<typeof AI>()
   const { submit } = useActions()
   const [isButtonPressed, setIsButtonPressed] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLTextAreaElement>(null)
   const [showEmptyScreen, setShowEmptyScreen] = useState(false)
   const router = useRouter()
   // Focus on input when button is pressed
@@ -91,17 +92,50 @@ export function ChatPanel({ messages }: ChatPanelProps) {
     >
       <form onSubmit={handleSubmit} className="max-w-2xl w-full px-6">
         <div className="relative flex items-center w-full">
-          <Input
+          <Textarea
             ref={inputRef}
-            type="text"
             name="input"
+            rows={1}
+            maxRows={5}
+            tabIndex={0}
             placeholder="Ask a question..."
+            spellCheck={false}
             value={input}
-            className="pl-4 pr-10 h-12 rounded-full bg-muted"
+            className="resize-none w-full min-h-12 rounded-fill bg-muted border border-input pl-4 pr-10 pt-3 pb-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'"
             onChange={e => {
               setInput(e.target.value)
               setShowEmptyScreen(e.target.value.length === 0)
             }}
+            onKeyDown={e => {
+              // Enter should submit the form
+              if (
+                e.key === 'Enter' &&
+                !e.shiftKey &&
+                !e.nativeEvent.isComposing
+              ) {
+                // Prevent the default action to avoid adding a new line
+                e.preventDefault()
+                const textarea = e.target as HTMLTextAreaElement
+                textarea.form?.requestSubmit()
+              }
+            }}
+            onHeightChange={height => {
+              // Ensure inputRef.current is defined
+              if (!inputRef.current) return
+
+              // The initial height and left padding is 70px and 2rem
+              const initialHeight = 70
+              // The initial border radius is 32px
+              const initialBorder = 32
+              // The height is incremented by multiples of 20px
+              const multiple = (height - initialHeight) / 20
+
+              // Decrease the border radius by 4px for each 20px height increase
+              const newBorder = initialBorder - 4 * multiple
+              // The lowest border radius will be 8px
+              inputRef.current.style.borderRadius =
+                Math.max(8, newBorder) + 'px'
+            }}
             onFocus={() => setShowEmptyScreen(true)}
             onBlur={() => setShowEmptyScreen(false)}
           />

package.json

@@ -37,6 +37,7 @@
     "react-dom": "^18",
     "react-icons": "^5.0.1",
     "react-markdown": "^9.0.1",
+    "react-textarea-autosize": "^8.5.3",
     "rehype-external-links": "^3.0.0",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.2.2",