try fetch and post

src/app/search/web/page.jsx

@@ -1,31 +1,55 @@
-"use client"
 import { useEffect, useState } from "react";
 
 export default function WebSearchPage({ searchParams }) {
-  console.log(searchParams);
-  const [aiResponse, setAiResponse] = useState(null);
-  const startIndex = searchParams.start || "1";
+  const [aiResponse, setAiResponse] = useState("");
 
   useEffect(() => {
+    if (!searchParams || !searchParams.searchTerm) return;
+
+    const { searchTerm, start = "1" } = searchParams;
     const url = new URL('/api/llm', window.location.origin);
-    url.searchParams.append('question', searchParams.searchTerm);
-    url.searchParams.append('startIndex', startIndex);
-  
-    const openaiRes = new EventSource(url);
 
-    // Listen for AI responses and append to state
-    openaiRes.onmessage = function(event) {
-        setAiResponse(aiResponse => aiResponse + event.data);
-    };
-  
-    // Close connection when component unmounts
-    return () => {
-      openaiRes.close();
-    };
-  }, [searchParams, startIndex, aiResponse]);
+    fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        question: searchTerm,
+        startIndex: start
+      })
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error("HTTP error " + response.status);
+      }
+      // Create a reader to stream the response body
+      const reader = response.body.getReader();
+
+      // Read and process the response body chunks
+      return new ReadableStream({
+        start(controller) {
+          function push() {
+            reader.read().then(({ done, value }) => {
+              if (done) {
+                // Close the stream when done
+                controller.close();
+                return;
+              }
+              // Decode the response chunk and append it to the existing response
+              setAiResponse(prev => prev + new TextDecoder().decode(value));
+              // Get the next chunk
+              push();
+            });
+          }
+          push();
+        }
+      });
+    })
+    .catch(console.error);
+  }, [searchParams]);
 
   console.log(aiResponse);
 
-  
   return <>{aiResponse ? JSON.stringify(aiResponse) : 'Loading...'}</>;
 }

src/pages/api/llm.js

@@ -20,13 +20,17 @@ export default function handler(req, res) {
   const openai = new OpenAIApi(configuration);
 
   const messages = [
+    {
+      role: "system",
+      content: "You are a helpful assistant.",
+    },
     {
       role: "user",
       content: QUESTION,
     },
   ];
 
-  const { googleCustomSearch, googleCustomSearchSchema } = new GoogleCustomSearch({
+  const googleCustomSearch = new GoogleCustomSearch({
     apiKey: process.env.API_KEY,
     googleCSEId: process.env.CONTEXT_KEY,
   });
@@ -39,7 +43,7 @@ export default function handler(req, res) {
     const response = await openai.createChatCompletion({
       model: "gpt-3.5-turbo-0613",
       messages,
-      functions: [googleCustomSearchSchema],
+      functions: [googleCustomSearch.schema],
       temperature: 0,
     });
 
@@ -64,7 +68,7 @@ export default function handler(req, res) {
         const args = response.data.choices[0].message.function_call.arguments;
 
         const fn = functions[fnName];
-        const result = await fn(...Object.values(JSON.parse(args)));
+        const result = await fn.call(args);
 
         messages.push({
           role: "assistant",