Chore/use expandable textarea

apps/postgres-new/components/ExpandableTextArea.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import { cn } from '~/lib/utils'
+import { TextArea } from './ui/textarea'
+
+export interface ExpandingTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /* The value of the textarea. Required to calculate the height of the textarea. */
+  value: string
+}
+
+/**
+ * This is a custom TextArea component that expands based on the content.
+ */
+const ExpandingTextArea = forwardRef<HTMLTextAreaElement, ExpandingTextAreaProps>(
+  ({ className, value, ...props }, ref) => {
+    const textAreaRef = useRef<HTMLTextAreaElement>(null)
+
+    // Expose the ref to the parent component
+    useImperativeHandle(ref, () => textAreaRef.current!)
+    /**
+     * This effect is used to resize the textarea based on the content
+     */
+    useEffect(() => {
+      if (textAreaRef) {
+        if (textAreaRef.current && !value) {
+          textAreaRef.current.style.height = '40px'
+        } else if (textAreaRef && textAreaRef.current) {
+          textAreaRef.current.style.height = 'auto'
+          const newHeight = textAreaRef.current.scrollHeight + 'px'
+          textAreaRef.current.style.height = newHeight
+        }
+      }
+    }, [value, textAreaRef])
+
+    return (
+      <TextArea
+        ref={textAreaRef}
+        rows={1}
+        aria-expanded={false}
+        className={cn('transition-all resize-none leading-6 box-border', className)}
+        value={value}
+        {...props}
+      />
+    )
+  }
+)
+
+ExpandingTextArea.displayName = 'ExpandingTextArea'
+
+export { ExpandingTextArea }

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 { ExpandingTextArea } from './ExpandableTextArea'
 
 export function getInitialMessages(tables: TablesData): Message[] {
   return [
@@ -457,12 +458,36 @@ export default function Chat() {
           >
             <Paperclip size={16} strokeWidth={1.3} />
           </Button>
-          <textarea
+
+          <ExpandingTextArea
+            ref={inputRef}
+            autoFocus
+            autoComplete="off"
+            disabled={!user}
+            className="bg-muted/50 border-none"
+            placeholder="Message AI or write SQL"
+            spellCheck={false}
+            value={input}
+            onChange={handleInputChange}
+            onKeyDown={(e) => {
+              if (!(e.target instanceof HTMLTextAreaElement)) {
+                return
+              }
+
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault()
+                if (!isLoading && isSubmitEnabled) {
+                  handleFormSubmit(e)
+                }
+              }
+            }}
+          />
+          {/* <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 text-base placeholder:text-muted-foreground/50 bg-transparent outline-none"
             value={input}
             onChange={handleInputChange}
             placeholder="Message AI or write SQL"
@@ -487,7 +512,7 @@ export default function Chat() {
                 }
               }
             }}
-          />
+          /> */}
           {isLoading ? (
             <Button
               className="rounded-full w-8 h-8 p-1.5 my-1 text-neutral-50 bg-neutral-800"

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 }