From afd14a5dcdea26b98463dc8d643dabc9a4a16255 Mon Sep 17 00:00:00 2001 From: Dhravya Date: Mon, 8 Apr 2024 18:39:32 -0700 Subject: [PATCH 1/3] messages streaminug --- apps/web/src/app/api/chat/route.ts | 5 ++- apps/web/src/components/Main.tsx | 57 ++++++++++++++++++++++--- apps/web/src/contexts/MemoryContext.tsx | 2 - 3 files changed, 54 insertions(+), 10 deletions(-) diff --git a/apps/web/src/app/api/chat/route.ts b/apps/web/src/app/api/chat/route.ts index 2cb03186..ef59fd43 100644 --- a/apps/web/src/app/api/chat/route.ts +++ b/apps/web/src/app/api/chat/route.ts @@ -31,22 +31,25 @@ export async function POST(req: NextRequest) { chatHistory: ChatHistory[] }; + console.log("CHathistory", chatHistory) if (!query) { return new Response(JSON.stringify({ message: "Invalid query" }), { status: 400 }); } + const resp = await fetch(`https://cf-ai-backend.dhravya.workers.dev/chat?q=${query}&user=${session.user.email ?? session.user.name}&sourcesOnly=${sourcesOnly}`, { headers: { "X-Custom-Auth-Key": env.BACKEND_SECURITY_KEY, }, method: "POST", body: JSON.stringify({ - chatHistory + chatHistory: chatHistory.chatHistory ?? [] }) }) console.log(resp.status) + console.log(resp.statusText) if (resp.status !== 200 || !resp.ok) { const errorData = await resp.json(); diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx index a9111494..bbd3bb0c 100644 --- a/apps/web/src/components/Main.tsx +++ b/apps/web/src/components/Main.tsx @@ -54,7 +54,7 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { // This is the streamed AI response we get from the server. const [aiResponse, setAIResponse] = useState(''); - + const [toBeParsed, setToBeParsed] = useState(''); const textArea = useRef(null); @@ -105,7 +105,36 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { remainingData = part; } else if (parsedPart && parsedPart.response) { // If the part is parsable and has the "response" field, update the AI response state - setAIResponse((prev) => prev + parsedPart.response); + // setAIResponse((prev) => prev + parsedPart.response); + // appendToChatHistory('model', parsedPart.response); + + // Append to chat history in this way: + // If the last message was from the model, append to that message + // Otherwise, Start a new message from the model and append to that + if ( + chatHistory.length > 0 && + chatHistory[chatHistory.length - 1].role === 'model' + ) { + setChatHistory((prev: any) => { + const lastMessage = prev[prev.length - 1]; + const newParts = [ + ...lastMessage.parts, + { text: parsedPart.response }, + ]; + return [ + ...prev.slice(0, prev.length - 1), + { ...lastMessage, parts: newParts }, + ]; + }); + } else { + setChatHistory((prev) => [ + ...prev, + { + role: 'model', + parts: [{ text: parsedPart.response }], + }, + ]); + } } } catch (error) { // If parsing fails and it's not the last part, it's a malformed JSON @@ -137,8 +166,16 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { e.preventDefault(); setIsAiLoading(true); + appendToChatHistory('user', value); + const sourcesResponse = await fetch( - `/api/query?sourcesOnly=true&q=${value}`, + `/api/chat?sourcesOnly=true&q=${value}`, + { + method: 'POST', + body: JSON.stringify({ + chatHistory, + }), + }, ); const sourcesInJson = (await sourcesResponse.json()) as { @@ -147,7 +184,13 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { setSearchResults(sourcesInJson.ids); - const response = await fetch(`/api/query?q=${value}`); + // TODO: PASS THE `SPACE` TO THE API + const response = await fetch(`/api/chat?q=${value}`, { + method: 'POST', + body: JSON.stringify({ + chatHistory, + }), + }); if (response.status !== 200) { setIsAiLoading(false); @@ -162,8 +205,8 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { // @ts-ignore reader.read().then(function processText({ done, value }) { if (done) { - // setSearchResults(JSON.parse(result.replace('data: ', ''))); - // setIsAiLoading(false); + setIsAiLoading(false); + setToBeParsed(''); return; } @@ -187,7 +230,7 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { {chatHistory.map((chat, index) => ( part.text).join('')} user={chat.role === 'model' ? 'ai' : session?.user!} /> ))} diff --git a/apps/web/src/contexts/MemoryContext.tsx b/apps/web/src/contexts/MemoryContext.tsx index 820736ff..3727c464 100644 --- a/apps/web/src/contexts/MemoryContext.tsx +++ b/apps/web/src/contexts/MemoryContext.tsx @@ -31,8 +31,6 @@ export const MemoryProvider: React.FC< [spaces], ); - console.log(spaces); - return ( {children} From 3c57f6b395171820d7297a7b9abe4d393103ce44 Mon Sep 17 00:00:00 2001 From: Dhravya Date: Mon, 8 Apr 2024 20:52:44 -0700 Subject: [PATCH 2/3] sources in search --- apps/web/src/components/ChatMessage.tsx | 2 + apps/web/src/components/Main.tsx | 120 ++++++++++-------------- 2 files changed, 52 insertions(+), 70 deletions(-) diff --git a/apps/web/src/components/ChatMessage.tsx b/apps/web/src/components/ChatMessage.tsx index a8199758..114d0a48 100644 --- a/apps/web/src/components/ChatMessage.tsx +++ b/apps/web/src/components/ChatMessage.tsx @@ -7,9 +7,11 @@ import Image from 'next/image'; function ChatMessage({ message, user, + sources, }: { message: string; user: User | 'ai'; + sources?: string[]; }) { return (
diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx index 958706c8..5db99030 100644 --- a/apps/web/src/components/Main.tsx +++ b/apps/web/src/components/Main.tsx @@ -11,6 +11,7 @@ import SearchResults from './SearchResults'; import { ChatHistory } from '../../types/memory'; import { ChatMessage } from './ChatMessage'; import { useSession } from 'next-auth/react'; +import { Card, CardContent } from './ui/card'; function supportsDVH() { try { @@ -21,8 +22,6 @@ function supportsDVH() { } export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { - // return ; - const [hide, setHide] = useState(false); const [value, setValue] = useState(''); const { width } = useViewport(); @@ -37,7 +36,7 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { // TEMPORARY solution: Basically this is to just keep track of the sources used for each chat message // Not a great solution const [chatTextSourceDict, setChatTextSourceDict] = useState< - Record + Record >({}); // helper function to append a new msg @@ -168,6 +167,8 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { e.preventDefault(); setIsAiLoading(true); + console.log(value); + appendToChatHistory('user', value); const sourcesResponse = await fetch( @@ -184,7 +185,9 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { ids: string[]; }; - setSearchResults(sourcesInJson.ids); + setSearchResults((prev) => + Array.from(new Set([...prev, ...sourcesInJson.ids])), + ); // TODO: PASS THE `SPACE` TO THE API const response = await fetch(`/api/chat?q=${value}`, { @@ -209,6 +212,8 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { if (done) { setIsAiLoading(false); setToBeParsed(''); + setValue(''); + return; } @@ -220,7 +225,7 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { }; return ( -
-
+
{chatHistory.map((chat, index) => ( ))} + {searchResults.length > 0 && ( +
+

Related memories

+
+ {searchResults.map((value, index) => ( + + {value} + + ))} +
+
+ )}

Ask your Second brain

- - setValue(e.target.value), - }} +
await getSearchResults(e)} > -
- - -
- - {/* {searchResults && ( - - )} */} + setValue(e.target.value), + }} + > +
+ + +
+ + {width <= 768 && } -
- ); -} - -export function Chat({ sidebarOpen }: { sidebarOpen: boolean }) { - const [value, setValue] = useState(''); - - return ( -
- setValue(e.target.value), - }} - > -
- - -
- -
+ ); } From f72018fd5ca0314a01c3c5192691c4cce706b71d Mon Sep 17 00:00:00 2001 From: Dhravya Date: Mon, 8 Apr 2024 20:57:54 -0700 Subject: [PATCH 3/3] removed unnecessary files --- apps/web/src/components/Main.tsx | 1 - apps/web/src/components/QueryAI.tsx | 139 ---------------------- apps/web/src/components/SearchResults.tsx | 38 ------ 3 files changed, 178 deletions(-) delete mode 100644 apps/web/src/components/QueryAI.tsx delete mode 100644 apps/web/src/components/SearchResults.tsx diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx index 5db99030..6d615e1e 100644 --- a/apps/web/src/components/Main.tsx +++ b/apps/web/src/components/Main.tsx @@ -7,7 +7,6 @@ import { MemoryDrawer } from './MemoryDrawer'; import useViewport from '@/hooks/useViewport'; import { motion } from 'framer-motion'; import { cn } from '@/lib/utils'; -import SearchResults from './SearchResults'; import { ChatHistory } from '../../types/memory'; import { ChatMessage } from './ChatMessage'; import { useSession } from 'next-auth/react'; diff --git a/apps/web/src/components/QueryAI.tsx b/apps/web/src/components/QueryAI.tsx deleted file mode 100644 index 3cb14178..00000000 --- a/apps/web/src/components/QueryAI.tsx +++ /dev/null @@ -1,139 +0,0 @@ -'use client'; - -import { Label } from './ui/label'; -import React, { useEffect, useState } from 'react'; -import { Input } from './ui/input'; -import { Button } from './ui/button'; -import SearchResults from './SearchResults'; - -function QueryAI() { - const [searchResults, setSearchResults] = useState([]); - const [isAiLoading, setIsAiLoading] = useState(false); - - const [aiResponse, setAIResponse] = useState(''); - const [input, setInput] = useState(''); - const [toBeParsed, setToBeParsed] = useState(''); - - const handleStreamData = (newChunk: string) => { - // Append the new chunk to the existing data to be parsed - setToBeParsed((prev) => prev + newChunk); - }; - - useEffect(() => { - // Define a function to try parsing the accumulated data - const tryParseAccumulatedData = () => { - // Attempt to parse the "toBeParsed" state as JSON - try { - // Split the accumulated data by the known delimiter "\n\n" - const parts = toBeParsed.split('\n\n'); - let remainingData = ''; - - // Process each part to extract JSON objects - parts.forEach((part, index) => { - try { - const parsedPart = JSON.parse(part.replace('data: ', '')); // Try to parse the part as JSON - - // If the part is the last one and couldn't be parsed, keep it to accumulate more data - if (index === parts.length - 1 && !parsedPart) { - remainingData = part; - } else if (parsedPart && parsedPart.response) { - // If the part is parsable and has the "response" field, update the AI response state - setAIResponse((prev) => prev + parsedPart.response); - } - } catch (error) { - // If parsing fails and it's not the last part, it's a malformed JSON - if (index !== parts.length - 1) { - console.error('Malformed JSON part: ', part); - } else { - // If it's the last part, it may be incomplete, so keep it - remainingData = part; - } - } - }); - - // Update the toBeParsed state to only contain the unparsed remainder - if (remainingData !== toBeParsed) { - setToBeParsed(remainingData); - } - } catch (error) { - console.error('Error parsing accumulated data: ', error); - } - }; - - // Call the parsing function if there's data to be parsed - if (toBeParsed) { - tryParseAccumulatedData(); - } - }, [toBeParsed]); - - const getSearchResults = async (e: React.FormEvent) => { - e.preventDefault(); - setIsAiLoading(true); - - const sourcesResponse = await fetch( - `/api/query?sourcesOnly=true&q=${input}`, - ); - - const sourcesInJson = (await sourcesResponse.json()) as { - ids: string[]; - }; - - setSearchResults(sourcesInJson.ids); - - const response = await fetch(`/api/query?q=${input}`); - - if (response.status !== 200) { - setIsAiLoading(false); - return; - } - - if (response.body) { - let reader = response.body.getReader(); - let decoder = new TextDecoder('utf-8'); - let result = ''; - - // @ts-ignore - reader.read().then(function processText({ done, value }) { - if (done) { - // setSearchResults(JSON.parse(result.replace('data: ', ''))); - // setIsAiLoading(false); - return; - } - - handleStreamData(decoder.decode(value)); - - return reader.read().then(processText); - }); - } - }; - - return ( -
-
await getSearchResults(e)} className="mt-8"> - -
- setInput(e.target.value)} - placeholder="Search using AI... ✨" - id="searchInput" - /> - -
-
- - {searchResults && ( - - )} -
- ); -} - -export default QueryAI; diff --git a/apps/web/src/components/SearchResults.tsx b/apps/web/src/components/SearchResults.tsx deleted file mode 100644 index 0445d0b4..00000000 --- a/apps/web/src/components/SearchResults.tsx +++ /dev/null @@ -1,38 +0,0 @@ -'use client' - -import React from 'react'; -import { Card, CardContent } from './ui/card'; -import Markdown from 'react-markdown'; -import remarkGfm from 'remark-gfm' - -function SearchResults({ - aiResponse, - sources, -}: { - aiResponse: string; - sources: string[]; -}) { - return ( -
-
-
- {aiResponse.replace('', '')} -
-
-
- {sources.map((value, index) => ( - - {value} - - ))} -
-
- ); -} - -export default SearchResults;