fix

src/app/search/web/page.jsx

@@ -5,53 +5,57 @@ import { MemoizedReactMarkdown } from '../../../components/MemoizedReactMarkdown
 export default function WebSearchPage({ searchParams }) {
   const [aiResponse, setAiResponse] = useState("");
   const [searchTerm, setSearchTerm] = useState()
-  const [text, setText] = useState('');
 
   useEffect(() => {
     setSearchTerm(searchParams.searchTerm)
   }, [searchParams])
 
-
-
-// Define the state for text
-
-
   useEffect(() => {
-    const handleSend = async () => {
-      const body = JSON.stringify({ question: searchTerm });
-      const controller = new AbortController();
+    const controller = new AbortController();
+    const signal = controller.signal;
+  
+    async function fetchData() {
       const response = await fetch('/api/llm', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        signal: controller.signal,
-        body
+        body: JSON.stringify({ question: searchTerm || "Seattle activities this weekend" }),
+        signal,
       });
-
+  
       if (!response.ok) {
-        return;
-      }
-
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder();
-      let resultText = '';
-
-      while (true) {
-        const { value, done } = await reader.read();
-
-        if (done) {
-          break;
+        throw new Error(`HTTP error! status: ${response.status}`);
+      } else {
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let text = '';
+  
+        try {
+          while (true) {
+            const { value, done } = await reader.read();
+    
+            if (done) {
+              // When the stream ends, we can parse the complete text
+              const json = JSON.parse(text);
+              console.log(json);
+              setAiResponse(json);
+              console.log("Stream complete");
+              break;
+            }
+    
+            text += decoder.decode(value, {stream: true});
+          }
+        } catch (error) {
+          console.error("Failed to parse JSON", error);
         }
-
-        const chunkValue = decoder.decode(value);
-        resultText += chunkValue;
       }
-
-      setText(resultText);
-    };
-
-    handleSend();
-  }, []);
-
+    }
+  
+    fetchData().catch(error => {
+      console.error('Fetch failed: ', error);
+    });
+  
+    return () => controller.abort();
+  }, [searchParams, searchTerm]);    
 
 
   console.log(aiResponse);
@@ -105,7 +109,7 @@ export default function WebSearchPage({ searchParams }) {
             },
           }}
         >
-          {JSON.stringify(aiResponse)}
+          {aiResponse}
         </MemoizedReactMarkdown>
       </div>
     );

src/pages/api/llm.js

@@ -1,21 +1,24 @@
 import { GoogleCustomSearch } from "openai-function-calling-tools";
 import { LLMError, LLMStream } from './stream';
 
-const handler = async (req, res) => {
+const handler = async (req) => {
   try {
+    const { question } = (await req.body);
+
     const googleCustomSearch = new GoogleCustomSearch({
         apiKey: process.env.API_KEY,
-        googleCSEId: process.env.CONTEXT_KEY
+        googleCSEId: process.env.CONTEXT_KEY,
     });
+
     const messages = [
         {
           role: "user",
-          content: "What are some fun things to do in Seattle, WA this weekend?"
+          content: question,
         },
       ];
     
     const functions = {
-        googleCustomSearch
+        googleCustomSearch,
     };
 
     let promptToSend = "You are a helpful assistant";
@@ -24,11 +27,11 @@ const handler = async (req, res) => {
   } catch (error) {
     console.error(error);
     if (error instanceof LLMError) {
-      res.status(500).send({ error: error.message });
+      return new Response('Error', { status: 500, statusText: error.message });
     } else {
-      res.status(500).send({ error: 'An error occurred' });
+      return new Response('Error', { status: 500 });
     }
   }
 };
 
-export default handler;
+export default handler;

src/pages/api/stream.js

@@ -17,7 +17,8 @@ export const LLMStream = async (
   model,
   systemPrompt,
   temperature,
-  messages
+  messages,
+  functions
 ) => {
   let url = `${OPENAI_API_HOST}/v1/chat/completions`;
   const res = await fetch(url, {