diff --git a/src/interface/web/app/automations/page.tsx b/src/interface/web/app/automations/page.tsx index fda33138..4188a91f 100644 --- a/src/interface/web/app/automations/page.tsx +++ b/src/interface/web/app/automations/page.tsx @@ -260,7 +260,7 @@ function AutomationsCard(props: AutomationsCardProps) { const dayOfMonth = getDayOfMonthFromCron(automationData.crontime); setIntervalString(`Monthly on the ${dayOfMonth}`); } - }, [updatedAutomationData, props.automation]); + }, [updatedAutomationData, automation]); useEffect(() => { @@ -275,7 +275,7 @@ function AutomationsCard(props: AutomationsCardProps) { }) setToastMessage(''); } - }, [toastMessage]); + }, [toastMessage, updatedAutomationData, automation, toast]); if (isDeleted) { return null; @@ -955,7 +955,7 @@ export default function Automations() { setAllNewAutomations([...allNewAutomations, newAutomationData]); setNewAutomationData(null); } - }, [newAutomationData]); + }, [newAutomationData, allNewAutomations]); useEffect(() => { diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx index 54487f45..d35f5c1b 100644 --- a/src/interface/web/app/chat/page.tsx +++ b/src/interface/web/app/chat/page.tsx @@ -37,26 +37,29 @@ function ChatBodyData(props: ChatBodyDataProps) { const [processingMessage, setProcessingMessage] = useState(false); const [agentMetadata, setAgentMetadata] = useState(null); + const setQueryToProcess = props.setQueryToProcess; + const onConversationIdChange = props.onConversationIdChange; + useEffect(() => { const storedMessage = localStorage.getItem("message"); if (storedMessage) { setProcessingMessage(true); - props.setQueryToProcess(storedMessage); + setQueryToProcess(storedMessage); } - }, []); + }, [setQueryToProcess]); useEffect(() => { if (message) { setProcessingMessage(true); - props.setQueryToProcess(message); + setQueryToProcess(message); } - }, [message]); + }, [message, setQueryToProcess]); useEffect(() => { if (conversationId) { - props.onConversationIdChange?.(conversationId); + onConversationIdChange?.(conversationId); } - }, [conversationId]); + }, [conversationId, onConversationIdChange]); useEffect(() => { if (props.streamedMessages && diff --git a/src/interface/web/app/common/chatFunctions.ts b/src/interface/web/app/common/chatFunctions.ts index 25742eec..006cfbf3 100644 --- a/src/interface/web/app/common/chatFunctions.ts +++ b/src/interface/web/app/common/chatFunctions.ts @@ -184,6 +184,20 @@ export function modifyFileFilterForConversation( }); } +export async function createNewConversation(slug: string) { + try { + const response = await fetch(`/api/chat/sessions?client=web&agent_slug=${slug}`, { method: "POST" }); + if (!response.ok) throw new Error(`Failed to fetch chat sessions with status: ${response.status}`); + const data = await response.json(); + const conversationID = data.conversation_id; + if (!conversationID) throw new Error("Conversation ID not found in response"); + return conversationID; + } catch (error) { + console.error("Error creating new conversation:", error); + throw error; + } +} + export function uploadDataForIndexing( files: FileList, setWarning: (warning: string) => void, diff --git a/src/interface/web/app/components/chatHistory/chatHistory.tsx b/src/interface/web/app/components/chatHistory/chatHistory.tsx index 2505dbf7..53dcb701 100644 --- a/src/interface/web/app/components/chatHistory/chatHistory.tsx +++ b/src/interface/web/app/components/chatHistory/chatHistory.tsx @@ -92,7 +92,7 @@ export default function ChatHistory(props: ChatHistoryProps) { scrollToBottomAfterDataLoad(); } - }, [chatHistoryRef.current, data]); + }, [data, currentPage]); useEffect(() => { if (!hasMoreMessages || fetchingData) return; @@ -111,7 +111,7 @@ export default function ChatHistory(props: ChatHistoryProps) { } return () => observer.disconnect(); - }, [sentinelRef.current, hasMoreMessages, currentPage, fetchingData]); + }, [hasMoreMessages, currentPage, fetchingData]); useEffect(() => { setHasMoreMessages(true); @@ -160,7 +160,7 @@ export default function ChatHistory(props: ChatHistoryProps) { return () => observer.disconnect(); }, []); - const fetchMoreMessages = (currentPage: number) => { + function fetchMoreMessages(currentPage: number) { if (!hasMoreMessages || fetchingData) return; const nextPage = currentPage + 1; diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx index d7461686..e9bb9218 100644 --- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx +++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx @@ -252,7 +252,7 @@ export default function ChatInputArea(props: ChatInputProps) { startRecordingAndTranscribe(); } - }, [recording]); + }, [recording, mediaRecorder]); const chatInputRef = useRef(null); useEffect(() => { diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx index 71a5b29e..b99a5868 100644 --- a/src/interface/web/app/components/chatMessage/chatMessage.tsx +++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx @@ -246,7 +246,7 @@ export default function ChatMessage(props: ChatMessageProps) { // Sanitize and set the rendered markdown setMarkdownRendered(DOMPurify.sanitize(markdownRendered)); - }, [props.chatMessage.message]); + }, [props.chatMessage.message, props.chatMessage.intent]); useEffect(() => { if (copySuccess) { diff --git a/src/interface/web/app/components/modelPicker/modelPicker.tsx b/src/interface/web/app/components/modelPicker/modelPicker.tsx index 17244707..212bd40c 100644 --- a/src/interface/web/app/components/modelPicker/modelPicker.tsx +++ b/src/interface/web/app/components/modelPicker/modelPicker.tsx @@ -74,11 +74,13 @@ export const ModelPicker: React.FC = (props: ModelPickerProps) => { let userData = useAuthenticatedData(); + const setModelUsed = props.setModelUsed; + useEffect(() => { - if (props.setModelUsed && selectedModel) { - props.setModelUsed(selectedModel); + if (setModelUsed && selectedModel) { + setModelUsed(selectedModel); } - }, [selectedModel]); + }, [selectedModel, setModelUsed]); if (!models) { return
Loading...
; diff --git a/src/interface/web/app/components/navMenu/navMenu.tsx b/src/interface/web/app/components/navMenu/navMenu.tsx index 9f259a2f..904f796e 100644 --- a/src/interface/web/app/components/navMenu/navMenu.tsx +++ b/src/interface/web/app/components/navMenu/navMenu.tsx @@ -62,7 +62,7 @@ export default function NavMenu() { useEffect(() => { if (!initialLoadDone) return; toggleDarkMode(darkMode); - }, [darkMode]); + }, [darkMode, initialLoadDone]); function toggleDarkMode(darkMode: boolean) { if (darkMode) { diff --git a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx index f9618494..2505e99a 100644 --- a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx +++ b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx @@ -387,7 +387,7 @@ function ChatSessionActionMenu(props: ChatSessionActionMenuProps) { setShowShareUrl(true); setIsSharing(false); } - }, [isSharing]); + }, [isSharing, props.conversationId]); if (isRenaming) { return ( diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx index e465725b..77179b49 100644 --- a/src/interface/web/app/page.tsx +++ b/src/interface/web/app/page.tsx @@ -20,6 +20,7 @@ import { useAuthenticatedData, UserConfig, useUserConfig } from '@/app/common/au import { convertColorToBorderClass } from '@/app/common/colorUtils'; import { getIconFromIconName } from '@/app/common/iconUtils'; import { AgentData } from '@/app/agents/page'; +import { createNewConversation } from './common/chatFunctions'; interface ChatBodyDataProps { @@ -32,20 +33,6 @@ interface ChatBodyDataProps { isLoadingUserConfig: boolean; } -async function createNewConvo(slug: string) { - try { - const response = await fetch(`/api/chat/sessions?client=web&agent_slug=${slug}`, { method: "POST" }); - if (!response.ok) throw new Error(`Failed to fetch chat sessions with status: ${response.status}`); - const data = await response.json(); - const conversationID = data.conversation_id; - if (!conversationID) throw new Error("Conversation ID not found in response"); - return conversationID; - } catch (error) { - console.error("Error creating new conversation:", error); - throw error; - } -} - function ChatBodyData(props: ChatBodyDataProps) { const [message, setMessage] = useState(''); const [processingMessage, setProcessingMessage] = useState(false); @@ -56,6 +43,8 @@ function ChatBodyData(props: ChatBodyDataProps) { const [agents, setAgents] = useState([]); const [showLoginPrompt, setShowLoginPrompt] = useState(false); + const onConversationIdChange = props.onConversationIdChange; + const agentsFetcher = () => window.fetch('/api/agents').then(res => res.json()).catch(err => console.log(err)); const { data: agentsData, error } = useSWR('agents', agentsFetcher, { revalidateOnFocus: false }); @@ -107,7 +96,7 @@ function ChatBodyData(props: ChatBodyDataProps) { agent => getIconFromIconName(agent.icon, agent.color) || {agent.name} ); setAgentIcons(agentIcons); - }, [agentsData]); + }, [agentsData, props.isMobileWidth]); function shuffleSuggestionsCards() { shuffleAndSetOptions(); @@ -118,8 +107,8 @@ function ChatBodyData(props: ChatBodyDataProps) { if (message && !processingMessage) { setProcessingMessage(true); try { - const newConversationId = await createNewConvo(selectedAgent || "khoj"); - props.onConversationIdChange?.(newConversationId); + const newConversationId = await createNewConversation(selectedAgent || "khoj"); + onConversationIdChange?.(newConversationId); window.location.href = `/chat?conversationId=${newConversationId}`; localStorage.setItem('message', message); } @@ -134,7 +123,7 @@ function ChatBodyData(props: ChatBodyDataProps) { if (message) { setProcessingMessage(true); }; - }, [selectedAgent, message]); + }, [selectedAgent, message, processingMessage, onConversationIdChange]); function fillArea(link: string, type: string, prompt: string) { if (!link) { diff --git a/src/interface/web/app/search/page.tsx b/src/interface/web/app/search/page.tsx index ca9dcb01..87074dad 100644 --- a/src/interface/web/app/search/page.tsx +++ b/src/interface/web/app/search/page.tsx @@ -201,8 +201,6 @@ export default function Search() { }, [searchQuery]); - console.log('searchResults', searchResults); - return (
diff --git a/src/interface/web/app/share/chat/page.tsx b/src/interface/web/app/share/chat/page.tsx index cd3c4eb7..0e07b706 100644 --- a/src/interface/web/app/share/chat/page.tsx +++ b/src/interface/web/app/share/chat/page.tsx @@ -37,24 +37,26 @@ function ChatBodyData(props: ChatBodyDataProps) { const [processingMessage, setProcessingMessage] = useState(false); const [agentMetadata, setAgentMetadata] = useState(null); + const setQueryToProcess = props.setQueryToProcess + const streamedMessages = props.streamedMessages; + useEffect(() => { if (message) { setProcessingMessage(true); - props.setQueryToProcess(message); + setQueryToProcess(message); } - }, [message]); + }, [message, setQueryToProcess]); useEffect(() => { - console.log("Streamed messages", props.streamedMessages); - if (props.streamedMessages && - props.streamedMessages.length > 0 && - props.streamedMessages[props.streamedMessages.length - 1].completed) { + if (streamedMessages && + streamedMessages.length > 0 && + streamedMessages[streamedMessages.length - 1].completed) { setProcessingMessage(false); } else { setMessage(''); } - }, [props.streamedMessages]); + }, [streamedMessages]); if (!props.publicConversationSlug && !props.conversationId) { return ( @@ -167,7 +169,7 @@ export default function SharedChat() { setMessages(prevMessages => [...prevMessages, newStreamMessage]); setProcessQuerySignal(true); } - }, [queryToProcess]); + }, [queryToProcess, conversationId, paramSlug]); useEffect(() => { if (processQuerySignal) { @@ -251,7 +253,7 @@ export default function SharedChat() { setMessages(prevMessages => [...prevMessages, newStreamMessage]); } })(); - }, [conversationId]); + }, [conversationId, queryToProcess]); if (isLoading) { return ;