Merge pull request #586 from Biki-dev/fix-inputFocus

Set focus to input area after clicking Start Fresh Chat

components/chat-input.tsx

@@ -160,6 +160,9 @@ interface ChatInputProps {
     onModelSelect?: (modelId: string | undefined) => void
     showUnvalidatedModels?: boolean
     onConfigureModels?: () => void
+    // Focus control props
+    shouldFocus?: boolean
+    onFocused?: () => void
 }
 
 export function ChatInput({
@@ -179,6 +182,8 @@ export function ChatInput({
     onModelSelect = () => {},
     showUnvalidatedModels = false,
     onConfigureModels = () => {},
+    shouldFocus = false,
+    onFocused,
 }: ChatInputProps) {
     const dict = useDictionary()
     const {
@@ -192,6 +197,19 @@ export function ChatInput({
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const fileInputRef = useRef<HTMLInputElement>(null)
     const [isDragging, setIsDragging] = useState(false)
+
+    // Focus the textarea when shouldFocus becomes true
+    // Use setTimeout to ensure focus happens after drawio iframe settles
+    useEffect(() => {
+        if (shouldFocus) {
+            const timer = setTimeout(() => {
+                textareaRef.current?.focus()
+                onFocused?.()
+            }, 150)
+            return () => clearTimeout(timer)
+        }
+    }, [shouldFocus, onFocused])
+
     const [showHistory, setShowHistory] = useState(false)
     const [showUrlDialog, setShowUrlDialog] = useState(false)
     const [isExtractingUrl, setIsExtractingUrl] = useState(false)

components/chat-panel.tsx

@@ -173,6 +173,7 @@ export default function ChatPanel({
     const [dailyTokenLimit, setDailyTokenLimit] = useState(0)
     const [tpmLimit, setTpmLimit] = useState(0)
     const [minimalStyle, setMinimalStyle] = useState(false)
+    const [shouldFocusInput, setShouldFocusInput] = useState(false)
 
     // Restore input from sessionStorage on mount (when ChatPanel remounts due to key change)
     useEffect(() => {
@@ -856,6 +857,7 @@ export default function ChatPanel({
 
         // Clear UI state (can't use syncUIWithSession here because we also need to clear files)
         setMessages([])
+        setInput("")
         clearDiagram()
         setDiagramHistory([])
         handleFileChange([]) // Use handleFileChange to also clear pdfData
@@ -870,6 +872,9 @@ export default function ChatPanel({
 
         // Clear URL param to show blank state
         router.replace(window.location.pathname, { scroll: false })
+
+        // After starting a fresh chat, move focus back to the chat input
+        setShouldFocusInput(true)
     }, [
         clearDiagram,
         handleFileChange,
@@ -1296,6 +1301,8 @@ export default function ChatPanel({
                     onModelSelect={modelConfig.setSelectedModelId}
                     showUnvalidatedModels={modelConfig.showUnvalidatedModels}
                     onConfigureModels={() => setShowModelConfigDialog(true)}
+                    shouldFocus={shouldFocusInput}
+                    onFocused={() => setShouldFocusInput(false)}
                 />
             </footer>