From 18d9ae51ad07aa5c68089a0c6f0af7a1f110819a Mon Sep 17 00:00:00 2001
From: 35C4n0r <work.jaykumar@gmail.com>
Date: Thu, 13 Nov 2025 12:41:31 +0530
Subject: [PATCH] feat: autofocus message box on user's turn

---
 chat/src/components/message-input.tsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/chat/src/components/message-input.tsx b/chat/src/components/message-input.tsx
index 0748dee..0193f40 100644
--- a/chat/src/components/message-input.tsx
+++ b/chat/src/components/message-input.tsx
@@ -112,6 +112,18 @@ export default function MessageInput({
     return () => clearInterval(interval);
   }, [sentChars]);
 
+  // Autofocus on the message input box on user's turn
+  useEffect(() => {
+    if (
+      serverStatus === "stable" &&
+      !disabled &&
+      inputMode === "text" &&
+      textareaRef.current
+    ) {
+      textareaRef.current.focus();
+    }
+  }, [serverStatus, disabled, inputMode]);
+
   const addSentChar = (char: string) => {
     const newChar: SentChar = {
       char,
@@ -332,20 +344,20 @@ export default function MessageInput({
   );
 }
 
-function Char({ char }: { char: string }) {
+function Char({char}: { char: string }) {
   switch (char) {
     case "ArrowUp":
-      return <ArrowUpIcon className="h-4 w-4" />;
+      return <ArrowUpIcon className="h-4 w-4"/>;
     case "ArrowDown":
-      return <ArrowDownIcon className="h-4 w-4" />;
+      return <ArrowDownIcon className="h-4 w-4"/>;
     case "ArrowRight":
-      return <ArrowRightIcon className="h-4 w-4" />;
+      return <ArrowRightIcon className="h-4 w-4"/>;
     case "ArrowLeft":
-      return <ArrowLeftIcon className="h-4 w-4" />;
+      return <ArrowLeftIcon className="h-4 w-4"/>;
     case "⏎":
-      return <CornerDownLeftIcon className="h-4 w-4" />;
+      return <CornerDownLeftIcon className="h-4 w-4"/>;
     case "Backspace":
-      return <DeleteIcon className="h-4 w-4" />;
+      return <DeleteIcon className="h-4 w-4"/>;
     default:
       return char;
   }