diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx index 7a391407..34d2ccc7 100644 --- a/src/interface/web/app/chat/page.tsx +++ b/src/interface/web/app/chat/page.tsx @@ -1,7 +1,7 @@ "use client"; import styles from "./chat.module.css"; -import React, { Suspense, useEffect, useState } from "react"; +import React, { Suspense, useEffect, useRef, useState } from "react"; import SidePanel, { ChatSessionActionMenu } from "../components/sidePanel/chatHistorySidePanel"; import ChatHistory from "../components/chatHistory/chatHistory"; @@ -37,6 +37,7 @@ function ChatBodyData(props: ChatBodyDataProps) { const [images, setImages] = useState([]); const [processingMessage, setProcessingMessage] = useState(false); const [agentMetadata, setAgentMetadata] = useState(null); + const chatInputRef = useRef(null); const setQueryToProcess = props.setQueryToProcess; const onConversationIdChange = props.onConversationIdChange; @@ -123,6 +124,7 @@ function ChatBodyData(props: ChatBodyDataProps) { conversationId={conversationId} isMobileWidth={props.isMobileWidth} setUploadedFiles={props.setUploadedFiles} + ref={chatInputRef} /> diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx index 3c77d5f1..195abe1e 100644 --- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx +++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx @@ -72,6 +72,7 @@ export const ChatInputArea = forwardRef((pr const [progressValue, setProgressValue] = useState(0); const [isDragAndDropping, setIsDragAndDropping] = useState(false); + const chatInputRef = ref as React.MutableRefObject; useEffect(() => { if (!uploading) { setProgressValue(0); @@ -175,6 +176,8 @@ export const ChatInputArea = forwardRef((pr if (newImagePaths.length > 0) { setImageUploaded(true); setImagePaths((prevPaths) => [...prevPaths, ...newImagePaths]); + // Set focus to the input for user message after uploading files + chatInputRef?.current?.focus(); return; } @@ -186,6 +189,9 @@ export const ChatInputArea = forwardRef((pr props.setUploadedFiles, props.conversationId, ); + + // Set focus to the input for user message after uploading files + chatInputRef?.current?.focus(); } // Assuming this function is added within the same context as the provided excerpt @@ -264,7 +270,6 @@ export const ChatInputArea = forwardRef((pr } }, [recording, mediaRecorder]); - const chatInputRef = ref as React.MutableRefObject; useEffect(() => { if (!chatInputRef?.current) return; chatInputRef.current.style.height = "auto"; diff --git a/src/interface/web/app/share/chat/page.tsx b/src/interface/web/app/share/chat/page.tsx index bdc8f34e..687eb540 100644 --- a/src/interface/web/app/share/chat/page.tsx +++ b/src/interface/web/app/share/chat/page.tsx @@ -36,6 +36,8 @@ function ChatBodyData(props: ChatBodyDataProps) { const [images, setImages] = useState([]); const [processingMessage, setProcessingMessage] = useState(false); const [agentMetadata, setAgentMetadata] = useState(null); + const chatInputRef = useRef(null); + const setQueryToProcess = props.setQueryToProcess; const streamedMessages = props.streamedMessages; @@ -114,6 +116,7 @@ function ChatBodyData(props: ChatBodyDataProps) { agentColor={agentMetadata?.color} isMobileWidth={props.isMobileWidth} setUploadedFiles={props.setUploadedFiles} + ref={chatInputRef} />