From c0ebd9aab8d77bd9e3d0ba07fd102b29718fead1 Mon Sep 17 00:00:00 2001
From: Cam Johnson <cameron.n.johnson15@gmail.com>
Date: Tue, 28 Oct 2025 14:27:05 -0600
Subject: [PATCH 1/3] Refactor message input

---
 src/components/Chat.tsx | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index 3c4830d..adb996c 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -2,7 +2,6 @@ import { useState, useRef, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import type { Message } from '@/types/message';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Card, CardContent } from '@/components/ui/card';
 
@@ -13,6 +12,7 @@ interface ChatProps {
 
 export const Chat = ({ messages, setMessages }: ChatProps) => {
   const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [input, setInput] = useState('');
   const [loading, setLoading] = useState(false);
 
@@ -33,6 +33,12 @@ export const Chat = ({ messages, setMessages }: ChatProps) => {
     const userMessage: Message = { id: crypto.randomUUID(), role: 'user', content: input };
     setMessages((prev) => [...prev, userMessage]);
     setInput('');
+
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = '48px';
+    }
+
     setLoading(true);
 
     try {
@@ -116,15 +122,31 @@ export const Chat = ({ messages, setMessages }: ChatProps) => {
               }}
               className='flex gap-2 p-4 border-t border-border'
             >
-              <Input
+              <textarea
+                ref={textareaRef}
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                  }
+                }}
                 placeholder='Type your message...'
-                className='border border-border focus-visible:ring-0 focus-visible:ring-offset-0 !py-3'
+                className='flex-1 resize-none border border-border focus:outline-none focus:ring-0 focus:ring-offset-0 py-3 px-3 rounded-md min-h-[48px] max-h-32 overflow-y-auto'
+                rows={1}
+                style={{
+                  height: 'auto',
+                }}
+                onInput={(e) => {
+                  const target = e.target as HTMLTextAreaElement;
+                  target.style.height = 'auto';
+                  target.style.height = `${Math.min(target.scrollHeight, 128)}px`;
+                }}
               />
               <Button
                 type='submit'
-                disabled={loading}
+                disabled={loading || !input.trim()}
                 className='bg-accent1 text-bg cursor-pointer hover:shadow-mint transition-all duration-300'
               >
                 Send

From fb45da23053269252545d14f2a46cdced9f307e2 Mon Sep 17 00:00:00 2001
From: Cam Johnson <59898256+camjohnson-code@users.noreply.github.com>
Date: Tue, 28 Oct 2025 14:36:11 -0600
Subject: [PATCH 2/3] Update src/components/Chat.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/Chat.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index adb996c..93ef2e9 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -135,9 +135,6 @@ export const Chat = ({ messages, setMessages }: ChatProps) => {
                 placeholder='Type your message...'
                 className='flex-1 resize-none border border-border focus:outline-none focus:ring-0 focus:ring-offset-0 py-3 px-3 rounded-md min-h-[48px] max-h-32 overflow-y-auto'
                 rows={1}
-                style={{
-                  height: 'auto',
-                }}
                 onInput={(e) => {
                   const target = e.target as HTMLTextAreaElement;
                   target.style.height = 'auto';

From ee978bfa2cb446ceab4615fb1b5d87b3d0f55add Mon Sep 17 00:00:00 2001
From: Cam Johnson <cameron.n.johnson15@gmail.com>
Date: Tue, 28 Oct 2025 14:40:55 -0600
Subject: [PATCH 3/3] Add height constants

---
 src/components/Chat.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index adb996c..53d2bdf 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -16,6 +16,9 @@ export const Chat = ({ messages, setMessages }: ChatProps) => {
   const [input, setInput] = useState('');
   const [loading, setLoading] = useState(false);
 
+  const MIN_TEXTAREA_HEIGHT = 48;
+  const MAX_TEXTAREA_HEIGHT = 128;
+
   useEffect(() => {
     if (scrollAreaRef.current) {
       const scrollElement = scrollAreaRef.current.querySelector(
@@ -36,7 +39,7 @@ export const Chat = ({ messages, setMessages }: ChatProps) => {
 
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto';
-      textareaRef.current.style.height = '48px';
+      textareaRef.current.style.height = `${MIN_TEXTAREA_HEIGHT}px`;
     }
 
     setLoading(true);
@@ -133,7 +136,7 @@ export const Chat = ({ messages, setMessages }: ChatProps) => {
                   }
                 }}
                 placeholder='Type your message...'
-                className='flex-1 resize-none border border-border focus:outline-none focus:ring-0 focus:ring-offset-0 py-3 px-3 rounded-md min-h-[48px] max-h-32 overflow-y-auto'
+                className={`flex-1 resize-none border border-border focus:outline-none focus:ring-0 focus:ring-offset-0 py-3 px-3 rounded-md min-h-[${MIN_TEXTAREA_HEIGHT}px] max-h-[${MAX_TEXTAREA_HEIGHT}px] overflow-y-auto`}
                 rows={1}
                 style={{
                   height: 'auto',
@@ -141,7 +144,7 @@ export const Chat = ({ messages, setMessages }: ChatProps) => {
                 onInput={(e) => {
                   const target = e.target as HTMLTextAreaElement;
                   target.style.height = 'auto';
-                  target.style.height = `${Math.min(target.scrollHeight, 128)}px`;
+                  target.style.height = `${Math.min(target.scrollHeight, MAX_TEXTAREA_HEIGHT)}px`;
                 }}
               />
               <Button