try again

src/app/search/web/page.jsx

@@ -4,7 +4,6 @@ import { MemoizedReactMarkdown } from '../../../components/MemoizedReactMarkdown
 
 export default function WebSearchPage({ searchParams }) {
   const [aiResponse, setAiResponse] = useState("");
-  const [eventSource, setEventSource] = useState(null);
   const [searchTerm, setSearchTerm] = useState()
 
   useEffect(() => {
@@ -12,35 +11,35 @@ export default function WebSearchPage({ searchParams }) {
   }, [searchParams])
 
   useEffect(() => {
-
-    // No need to make a fetch request. Directly open the EventSource connection.
-    const es = new EventSource(`/api/llm?question=${searchTerm || "Seattle activities this weekend"}`);
-    console.log(es);
-    setEventSource(es);
-
-    return () => {
-      if (es) es.close();  // Close the EventSource when the component is unmounted.
-    };
-  }, [searchParams, searchTerm]);
-
-  // Add event listener for the EventSource
-  useEffect(() => {
-    if (eventSource) {
-      eventSource.onmessage = (event) => {
-        setAiResponse(prev => prev + event.data);
-      };
-
-      eventSource.onerror = (event) => {
-        console.error("EventSource failed:", event);
-      };
+    const decoder = new TextDecoder();
+    let responseText = '';
+    const controller = new AbortController();
+    const signal = controller.signal;
+  
+    async function fetchData() {
+      const response = await fetch(`/api/llm`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ question: searchTerm || "Seattle activities this weekend" }),
+        signal,
+      });
+      const reader = response.body.getReader();
+  
+      reader.read().then(function processText({ done, value }) {
+        if (done) {
+          console.log("Stream complete");
+          return;
+        }
+        responseText += decoder.decode(value);
+        setAiResponse(responseText);
+        return reader.read().then(processText);
+      });
     }
-
-    return () => {
-      if (eventSource) {
-        eventSource.close();
-      }
-    };
-  }, [eventSource]);
+  
+    fetchData();
+  
+    return () => controller.abort();
+  }, [searchParams, searchTerm]);  
 
   console.log(aiResponse);
 

src/pages/api/llm.js

@@ -1,17 +1,18 @@
 import { GoogleCustomSearch } from "openai-function-calling-tools";
 import { LLMError, LLMStream } from './stream';
 
-const handler = async (req) => {
+const handler = async (req, res) => {
   try {
     const googleCustomSearch = new GoogleCustomSearch({
         apiKey: process.env.API_KEY,
         googleCSEId: process.env.CONTEXT_KEY
     });
 
+    const requestBody = JSON.parse(req.body);
     const messages = [
         {
           role: "user",
-          content: req.query.question
+          content: requestBody.question
         },
       ];
     
@@ -25,15 +26,15 @@ const handler = async (req) => {
     const stream = await LLMStream({ id: "gpt-3.5-turbo-0613" }, promptToSend, 0.8, messages, functions);
     console.log(stream);
 
-    return new Response(stream);
+    res.status(200).send(stream);
   } catch (error) {
     console.error(error);
     if (error instanceof LLMError) {
-      return new Response('Error', { status: 500, statusText: error.message });
+      res.status(500).send({ error: error.message });
     } else {
-      return new Response('Error', { status: 500 });
+      res.status(500).send({ error: 'An error occurred' });
     }
   }
 };
 
-export default handler;
+export default handler;