add auto focus to message input

Author: st0ffregen

service/frontend/src/components/MessageInput.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { uploadEmbeddingText, createAccessToken, searchMemories } from '../services/api';
 
 function MessageInput({ input, setInput, handleSubmit, isLoading, isStreaming, onCancel, onEmbedUpload, chatSessionId, onAuthError }) {
@@ -16,6 +16,20 @@ function MessageInput({ input, setInput, handleSubmit, isLoading, isStreaming, o
   const [isTokenLoading, setIsTokenLoading] = useState(false);
   const [createdToken, setCreatedToken] = useState('');
 
+  // Ref for the message input field
+  const inputRef = useRef(null);
+
+  // Auto-focus the input when component mounts and when loading completes
+  useEffect(() => {
+    // Focus the input when not loading and not streaming
+    if (!isLoading && !isStreaming && inputRef.current && chatSessionId) {
+      // Small delay to ensure the component is fully rendered
+      setTimeout(() => {
+        inputRef.current.focus();
+      }, 100);
+    }
+  }, [isLoading, isStreaming, chatSessionId]);
+
   const handleEmbedSubmit = async (e) => {
     e.preventDefault();
     if (!embedText.trim()) return;
@@ -100,6 +114,7 @@ function MessageInput({ input, setInput, handleSubmit, isLoading, isStreaming, o
     <div className="border-t border-gray-700 p-4">
       <form onSubmit={handleSubmit} className="flex gap-2">
         <input
+          ref={inputRef}
           type="text"
           value={input}
           onChange={(e) => setInput(e.target.value)}