sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Focus on chat input area to enter text after file uploads on web app

Browse source
This commit is contained in:
Debanjum Singh Solanky 2024-10-22 21:19:17 -07:00
parent c81e708833
commit a134cd835c
3 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/interface/web/app/chat/page.tsx
View file

@ -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<string[]>([]);
const [processingMessage, setProcessingMessage] = useState(false);
const [agentMetadata, setAgentMetadata] = useState<AgentData | null>(null);
const chatInputRef = useRef<HTMLTextAreaElement>(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}
/>
</div>
</>

7
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View file

@ -72,6 +72,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
const [progressValue, setProgressValue] = useState(0);
const [isDragAndDropping, setIsDragAndDropping] = useState(false);
const chatInputRef = ref as React.MutableRefObject<HTMLTextAreaElement>;
useEffect(() => {
if (!uploading) {
setProgressValue(0);
@ -175,6 +176,8 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((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<HTMLTextAreaElement, ChatInputProps>((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<HTMLTextAreaElement, ChatInputProps>((pr
}
}, [recording, mediaRecorder]);
const chatInputRef = ref as React.MutableRefObject<HTMLTextAreaElement>;
useEffect(() => {
if (!chatInputRef?.current) return;
chatInputRef.current.style.height = "auto";

3
src/interface/web/app/share/chat/page.tsx
View file

@ -36,6 +36,8 @@ function ChatBodyData(props: ChatBodyDataProps) {
const [images, setImages] = useState<string[]>([]);
const [processingMessage, setProcessingMessage] = useState(false);
const [agentMetadata, setAgentMetadata] = useState<AgentData | null>(null);
const chatInputRef = useRef<HTMLTextAreaElement>(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}
/>
</div>
</>