From a179efc0ea62ed7598d7bec03e312001b3a68667 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 13 Aug 2024 13:12:16 -0230
Subject: [PATCH 1/3] Use ExpandableTextArea component

---
 .../components/ExpandableTextArea.tsx         | 51 +++++++++++++++++++
 apps/postgres-new/components/chat.tsx         | 31 +++++++++--
 apps/postgres-new/components/ui/textarea.tsx  | 27 ++++++++++
 3 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 apps/postgres-new/components/ExpandableTextArea.tsx
 create mode 100644 apps/postgres-new/components/ui/textarea.tsx

diff --git a/apps/postgres-new/components/ExpandableTextArea.tsx b/apps/postgres-new/components/ExpandableTextArea.tsx
new file mode 100644
index 0000000..f2c6406
--- /dev/null
+++ b/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 }
diff --git a/apps/postgres-new/components/chat.tsx b/apps/postgres-new/components/chat.tsx
index 65b40f7..10c5ac1 100644
--- a/apps/postgres-new/components/chat.tsx
+++ b/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"
diff --git a/apps/postgres-new/components/ui/textarea.tsx b/apps/postgres-new/components/ui/textarea.tsx
new file mode 100644
index 0000000..90300e8
--- /dev/null
+++ b/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 }

From 8aaabb3a2b08adb998a9d57b60f67f427ac1c11e Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 13 Aug 2024 15:21:51 -0230
Subject: [PATCH 2/3] Back to original input

---
 .../components/ExpandableTextArea.tsx         | 51 -------------------
 apps/postgres-new/components/chat.tsx         | 44 +++++++---------
 2 files changed, 17 insertions(+), 78 deletions(-)
 delete mode 100644 apps/postgres-new/components/ExpandableTextArea.tsx

diff --git a/apps/postgres-new/components/ExpandableTextArea.tsx b/apps/postgres-new/components/ExpandableTextArea.tsx
deleted file mode 100644
index f2c6406..0000000
--- a/apps/postgres-new/components/ExpandableTextArea.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'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 }
diff --git a/apps/postgres-new/components/chat.tsx b/apps/postgres-new/components/chat.tsx
index 10c5ac1..ea40755 100644
--- a/apps/postgres-new/components/chat.tsx
+++ b/apps/postgres-new/components/chat.tsx
@@ -25,7 +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'
+import { TextArea } from './ui/textarea'
 
 export function getInitialMessages(tables: TablesData): Message[] {
   return [
@@ -208,6 +208,19 @@ export default function Chat() {
     },
   }))
 
+  // dynamically resize the input textarea
+  useEffect(() => {
+    if (inputRef) {
+      if (inputRef.current && !input) {
+        inputRef.current.style.height = '40px'
+      } 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 && (
@@ -459,35 +472,12 @@ export default function Chat() {
             <Paperclip size={16} strokeWidth={1.3} />
           </Button>
 
-          <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
+          <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 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"
             value={input}
             onChange={handleInputChange}
             placeholder="Message AI or write SQL"
@@ -512,7 +502,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"

From 2dedb44ab3c8162c6537640a4aa327d1a3134e0f Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 13 Aug 2024 15:32:59 -0230
Subject: [PATCH 3/3] Set a max height

---
 apps/postgres-new/components/chat.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/postgres-new/components/chat.tsx b/apps/postgres-new/components/chat.tsx
index ea40755..bbe5cbd 100644
--- a/apps/postgres-new/components/chat.tsx
+++ b/apps/postgres-new/components/chat.tsx
@@ -212,7 +212,7 @@ export default function Chat() {
   useEffect(() => {
     if (inputRef) {
       if (inputRef.current && !input) {
-        inputRef.current.style.height = '40px'
+        inputRef.current.style.height = '26px'
       } else if (inputRef && inputRef.current) {
         inputRef.current.style.height = 'auto'
         const newHeight = inputRef.current.scrollHeight + 'px'
@@ -472,12 +472,12 @@ export default function Chat() {
             <Paperclip size={16} strokeWidth={1.3} />
           </Button>
 
-          <TextArea
+          <textarea
             ref={inputRef}
             id="input"
             name="prompt"
             autoComplete="off"
-            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"
+            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"
@@ -488,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)) {