Chore/use expandable textarea

apps/postgres-new/components/chat.tsx

@@ -25,6 +25,7 @@ import { useApp } from './app-provider'
 import ChatMessage from './chat-message'
 import SignInButton from './sign-in-button'
 import { useWorkspace } from './workspace'
+import { TextArea } from './ui/textarea'
 
 export function getInitialMessages(tables: TablesData): Message[] {
   return [
@@ -207,6 +208,19 @@ export default function Chat() {
     },
   }))
 
+  // dynamically resize the input textarea
+  useEffect(() => {
+    if (inputRef) {
+      if (inputRef.current && !input) {
+        inputRef.current.style.height = '26px'
+      } else if (inputRef && inputRef.current) {
+        inputRef.current.style.height = 'auto'
+        const newHeight = inputRef.current.scrollHeight + 'px'
+        inputRef.current.style.height = newHeight
+      }
+    }
+  }, [input, inputRef])
+
   return (
     <div ref={dropZoneRef} className="h-full flex flex-col items-stretch relative">
       {isDraggingOver && (
@@ -457,12 +471,13 @@ export default function Chat() {
           >
             <Paperclip size={16} strokeWidth={1.3} />
           </Button>
+
           <textarea
             ref={inputRef}
             id="input"
             name="prompt"
             autoComplete="off"
-            className="flex-grow border-none focus-visible:ring-0 text-base placeholder:text-muted-foreground/50 bg-transparent resize-none outline-none"
+            className="flex-grow border-none focus-visible:ring-0 focus-visible:ring-offset-0 text-base placeholder:text-muted-foreground/50 bg-transparent outline-none max-h-48"
             value={input}
             onChange={handleInputChange}
             placeholder="Message AI or write SQL"
@@ -473,7 +488,7 @@ export default function Chat() {
               setInputFocusState(false)
             }}
             autoFocus
-            disabled={!user}
+            // disabled={!user}
             rows={Math.min(input.split('\n').length, 10)}
             onKeyDown={(e) => {
               if (!(e.target instanceof HTMLTextAreaElement)) {

apps/postgres-new/components/ui/textarea.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { cn } from '~/lib/utils'
+
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const customClasses = ['bg-control']
+
+const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-10 w-full rounded-md border border-control bg-control px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-muted',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-background-control focus-visible:ring-offset-2 focus-visible:ring-offset-foreground-muted disabled:cursor-not-allowed disabled:opacity-50',
+          ...customClasses,
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+
+TextArea.displayName = 'TextArea'
+
+export { TextArea }