fix: focus

frontend/src/components/ChatInterface.tsx

@@ -2,7 +2,7 @@
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { disconnectSocket, getSocket, initializeSocket } from "@/lib/socket";
 import { ChatData, ChatState, Conversation, Message, ResearchOptions, ResearchResults, StatusUpdate } from "@/lib/types";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import ChatHistory from "./ChatHistory";
 import MessageInput from "./MessageInput";
@@ -249,10 +249,12 @@ const ChatInterface = () => {
         active: conv.id === id,
       }))
     );
+    userInputRef.current?.focus();
   };
 
   const sidebar = <ConversationList conversations={conversations} onNewConversation={handleNewConversation} onSelectConversation={handleSelectConversation} />;
 
+  const userInputRef = useRef<HTMLTextAreaElement>();
   const mainContent = (
     <div className="flex flex-col w-full h-full relative" tabIndex={-1}>
       <ChatHistory messages={chatState.messages} isLoading={chatState.isLoading} />
@@ -264,7 +266,7 @@ const ChatInterface = () => {
         </Alert>
       )}
 
-      <MessageInput onSendMessage={handleSendMessage} isLoading={chatState.isLoading} />
+      <MessageInput onSendMessage={handleSendMessage} isLoading={chatState.isLoading} userInputRef={userInputRef} />
     </div>
   );
 

frontend/src/components/MessageInput.tsx

@@ -8,9 +8,10 @@ import React, { useState } from "react";
 interface MessageInputProps {
   onSendMessage: (content: string) => void;
   isLoading: boolean;
+  userInputRef: React.LegacyRef<any>;
 }
 
-const MessageInput: React.FC<MessageInputProps> = ({ onSendMessage, isLoading }) => {
+const MessageInput: React.FC<MessageInputProps> = ({ onSendMessage, isLoading, userInputRef }) => {
   const [message, setMessage] = useState("");
 
   const handleMessageChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -36,7 +37,7 @@ const MessageInput: React.FC<MessageInputProps> = ({ onSendMessage, isLoading })
     <div className="p-4 absolute bottom-0 left-0 right-0 bg-transparent mb-4">
       <form onSubmit={handleSubmit} className="max-w-4xl mx-auto">
         <div className="relative flex items-center bg-background shadow-lg rounded-[2rem] border overflow-hidden h-full">
-          <AutosizeTextarea placeholder="Ask a research question..." maxHeight={500} minHeight={52} className="pr-36 pl-6 py-4 font-medium border-none h-auto resize-none" value={message} onChange={handleMessageChange} onKeyDown={handleKeyDown} disabled={isLoading} rows={1} autoFocus />
+          <AutosizeTextarea placeholder="Ask a research question..." maxHeight={500} minHeight={52} className="pr-36 pl-6 py-4 font-medium border-none h-auto resize-none" value={message} onChange={handleMessageChange} onKeyDown={handleKeyDown} disabled={isLoading} rows={1} autoFocus ref={userInputRef}/>
 
           <div className="absolute right-3 flex items-center gap-2 h-full">
             <TooltipProvider>