From 50d28ca725f0347018c8d795de058c5696488bfc Mon Sep 17 00:00:00 2001
From: thinkter <ashmangamer0406@gmail.com>
Date: Tue, 19 May 2026 22:10:47 +0530
Subject: [PATCH 1/2] shift enter

---
 apps/web/src/app/components/ChatPanel.tsx     | 17 +++++++-----
 .../app/components/mobile/MobileChatPanel.tsx | 26 +++++++++++++------
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/app/components/ChatPanel.tsx b/apps/web/src/app/components/ChatPanel.tsx
index 9194bcb7..24b1b942 100644
--- a/apps/web/src/app/components/ChatPanel.tsx
+++ b/apps/web/src/app/components/ChatPanel.tsx
@@ -312,7 +312,7 @@ function ChatPanel({
         );
         return;
       }
-      if (e.key === "Tab" || e.key === "Enter") {
+      if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) {
         e.preventDefault();
         applyMentionSuggestion(activeMentionIndex);
         return;
@@ -334,12 +334,17 @@ function ChatPanel({
         );
         return;
       }
-      if (isPickingCommand && (e.key === "Tab" || e.key === "Enter")) {
+      if (
+        isPickingCommand &&
+        (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey))
+      ) {
         const command = commandSuggestions[activeCommandIndex];
         const isExactMatch =
           command &&
           chatInput.trim().toLowerCase() === `/${command.label}`;
         if (e.key === "Enter" && isExactMatch) {
+          e.preventDefault();
+          handleSubmit(e);
           return;
         }
         e.preventDefault();
@@ -514,7 +519,7 @@ function ChatPanel({
                         {directMessageLabel}
                       </p>
                     ) : null}
-                    <p className="text-xs break-words leading-relaxed">
+                    <p className="text-xs break-words whitespace-pre-wrap leading-relaxed">
                       {renderMessageContent(msg.content)}
                     </p>
                   </div>
@@ -605,8 +610,8 @@ function ChatPanel({
             </div>
           )}
           <div className="flex gap-1.5">
-            <input
-              type="text"
+            <textarea
+              rows={1}
               value={chatInput}
               onChange={(e) => onInputChange(e.target.value)}
               onKeyDown={handleKeyDown}
@@ -619,7 +624,7 @@ function ChatPanel({
               }
               maxLength={1000}
               disabled={isChatDisabled}
-              className="flex-1 px-2.5 py-1.5 bg-black/30 border border-[#FEFCD9]/10 rounded-md text-xs text-[#FEFCD9] placeholder:text-[#FEFCD9]/30 focus:outline-none focus:border-[#FEFCD9]/20 disabled:opacity-50"
+              className="max-h-24 min-h-8 flex-1 resize-none px-2.5 py-1.5 bg-black/30 border border-[#FEFCD9]/10 rounded-md text-xs text-[#FEFCD9] placeholder:text-[#FEFCD9]/30 focus:outline-none focus:border-[#FEFCD9]/20 disabled:opacity-50"
             />
             <button
               type="submit"
diff --git a/apps/web/src/app/components/mobile/MobileChatPanel.tsx b/apps/web/src/app/components/mobile/MobileChatPanel.tsx
index 3fd8322a..6e917586 100644
--- a/apps/web/src/app/components/mobile/MobileChatPanel.tsx
+++ b/apps/web/src/app/components/mobile/MobileChatPanel.tsx
@@ -46,7 +46,7 @@ function MobileChatPanel({
   mentionableParticipants = [],
 }: MobileChatPanelProps) {
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const [activeCommandIndex, setActiveCommandIndex] = useState(0);
   const [activeMentionIndex, setActiveMentionIndex] = useState(0);
   const [localValue, setLocalValue] = useState(chatInput);
@@ -156,7 +156,7 @@ function MobileChatPanel({
     onInputChange(nextValue);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (showMentionSuggestions) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -170,7 +170,7 @@ function MobileChatPanel({
         );
         return;
       }
-      if (e.key === "Tab" || e.key === "Enter") {
+      if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) {
         e.preventDefault();
         applyMentionSuggestion(activeMentionIndex);
         return;
@@ -192,12 +192,17 @@ function MobileChatPanel({
         );
         return;
       }
-      if (isPickingCommand && (e.key === "Tab" || e.key === "Enter")) {
+      if (
+        isPickingCommand &&
+        (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey))
+      ) {
         const command = commandSuggestions[activeCommandIndex];
         const isExactMatch =
           command &&
           localValue.trim().toLowerCase() === `/${command.label}`;
         if (e.key === "Enter" && isExactMatch) {
+          e.preventDefault();
+          handleSubmit(e);
           return;
         }
         e.preventDefault();
@@ -208,6 +213,11 @@ function MobileChatPanel({
         return;
       }
     }
+
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
   };
 
   const resolveDisplayName = (userId: string) => {
@@ -348,7 +358,7 @@ function MobileChatPanel({
                           : "bg-[#2a2a2a]/90 text-[#FEFCD9] rounded-bl-md selection:bg-[#F95F4A]/40 selection:text-white"
                       } ${message.isDirect ? "ring-1 ring-amber-300/30" : ""}`}
                     >
-                      <p className="text-sm break-words">
+                      <p className="text-sm break-words whitespace-pre-wrap">
                         {directMessageLabel ? (
                           <span className="mb-1 block text-[9px] uppercase tracking-[0.14em] text-amber-300/80">
                             {directMessageLabel}
@@ -426,9 +436,9 @@ function MobileChatPanel({
                 })}
               </div>
             )}
-            <input
+            <textarea
               ref={inputRef}
-              type="text"
+              rows={1}
               value={localValue}
               onChange={(e) => {
                 setLocalValue(e.target.value);
@@ -443,7 +453,7 @@ function MobileChatPanel({
                     : "Type a message or /..."
               }
               disabled={isChatDisabled}
-              className="flex-1 mobile-glass mobile-pill px-4 py-2.5 text-sm text-[#FEFCD9] placeholder:text-[#FEFCD9]/30 focus:outline-none focus:border-[#F95F4A]/50 disabled:opacity-50"
+              className="max-h-28 min-h-10 flex-1 resize-none mobile-glass mobile-pill px-4 py-2.5 text-sm text-[#FEFCD9] placeholder:text-[#FEFCD9]/30 focus:outline-none focus:border-[#F95F4A]/50 disabled:opacity-50"
             />
             <button
               type="submit"

From 59ffb71773cfc57dde8bdc1a3a101048a733a677 Mon Sep 17 00:00:00 2001
From: thinkter <ashmangamer0406@gmail.com>
Date: Tue, 19 May 2026 22:17:29 +0530
Subject: [PATCH 2/2] increase height of text box

---
 apps/web/src/app/components/ChatPanel.tsx          | 14 +++++++++++++-
 .../src/app/components/mobile/MobileChatPanel.tsx  | 12 +++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/components/ChatPanel.tsx b/apps/web/src/app/components/ChatPanel.tsx
index 24b1b942..a99647b3 100644
--- a/apps/web/src/app/components/ChatPanel.tsx
+++ b/apps/web/src/app/components/ChatPanel.tsx
@@ -135,6 +135,7 @@ function ChatPanel({
 }: ChatPanelProps) {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const shouldAutoScrollRef = useRef(true);
   const sendAnimationTimeoutRef = useRef<number | null>(null);
   const prevMessageIdsRef = useRef<Set<string>>(new Set());
@@ -211,6 +212,16 @@ function ChatPanel({
     setActiveMentionIndex(0);
   }, [chatInput]);
 
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    input.style.height = "auto";
+    input.style.height = `${input.scrollHeight}px`;
+    input.style.overflowY =
+      input.scrollHeight > input.clientHeight ? "auto" : "hidden";
+  }, [chatInput]);
+
   useEffect(() => {
     const previousCount = previousMessageCountRef.current;
     const addedMessages = messages.length - previousCount;
@@ -609,8 +620,9 @@ function ChatPanel({
               })}
             </div>
           )}
-          <div className="flex gap-1.5">
+          <div className="flex items-end gap-1.5">
             <textarea
+              ref={inputRef}
               rows={1}
               value={chatInput}
               onChange={(e) => onInputChange(e.target.value)}
diff --git a/apps/web/src/app/components/mobile/MobileChatPanel.tsx b/apps/web/src/app/components/mobile/MobileChatPanel.tsx
index 6e917586..ba373963 100644
--- a/apps/web/src/app/components/mobile/MobileChatPanel.tsx
+++ b/apps/web/src/app/components/mobile/MobileChatPanel.tsx
@@ -127,6 +127,16 @@ function MobileChatPanel({
     }
   }, [chatInput, localValue]);
 
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    input.style.height = "auto";
+    input.style.height = `${input.scrollHeight}px`;
+    input.style.overflowY =
+      input.scrollHeight > input.clientHeight ? "auto" : "hidden";
+  }, [localValue]);
+
   useEffect(() => {
     setActiveCommandIndex(0);
     setActiveMentionIndex(0);
@@ -379,7 +389,7 @@ function MobileChatPanel({
 
           <form
             onSubmit={handleSubmit}
-            className="relative flex items-center gap-2 px-4 py-3 border-t border-[#FEFCD9]/10 bg-[#0b0b0b]/95"
+            className="relative flex items-end gap-2 px-4 py-3 border-t border-[#FEFCD9]/10 bg-[#0b0b0b]/95"
           >
             {showMentionSuggestions && (
               <div className="absolute bottom-full mb-2 left-0 right-0 max-h-40 overflow-y-auto mobile-sheet-card shadow-xl overflow-hidden">