SSE get request

src/app/search/web/page.jsx

@@ -1,55 +1,44 @@
-"use client"
 import { useEffect, useState } from "react";
 
 export default function WebSearchPage({ searchParams }) {
   const [aiResponse, setAiResponse] = useState("");
+  const [eventSource, setEventSource] = useState(null);
 
   useEffect(() => {
     if (!searchParams || !searchParams.searchTerm) return;
 
     const { searchTerm, start = "1" } = searchParams;
     const url = new URL('/api/llm', window.location.origin);
+    url.search = new URLSearchParams({ question: searchTerm, startIndex: start });
 
-    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);
+    // No need to make a fetch request. Directly open the EventSource connection.
+    const es = new EventSource(url);
+    setEventSource(es);
+
+    return () => {
+      if (es) es.close();  // Close the EventSource when the component is unmounted.
+    };
   }, [searchParams]);
 
+  // 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);
+      };
+    }
+
+    return () => {
+      if (eventSource) {
+        eventSource.close();
+      }
+    };
+  }, [eventSource]);
+
   console.log(aiResponse);
 
   return <>{aiResponse}</>;

src/pages/api/llm.js

@@ -2,10 +2,15 @@ import { Configuration, OpenAIApi } from "openai";
 import { GoogleCustomSearch } from "openai-function-calling-tools";
 
 export default function handler(req, res) {
+  if (req.method !== 'POST') {
+    res.status(405).send({ error: 'Method Not Allowed', method: req.method });
+    return;
+  }
+
   const QUESTION = req.body.question;
 
   if (!QUESTION) {
-    res.status(400).send({ error: 'Question is missing in request' });
+    res.status(400).send({ error: 'Question is missing in request body' });
     return;
   }
 
@@ -15,10 +20,6 @@ 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,
@@ -38,8 +39,9 @@ export default function handler(req, res) {
     const response = await openai.createChatCompletion({
       model: "gpt-3.5-turbo-0613",
       messages,
-      functions: [googleCustomSearch.schema],
+      functions: [googleCustomSearchSchema],
       temperature: 0,
+      stream: true
     });
 
     return response;
@@ -63,7 +65,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.call(args);
+        const result = await fn(...Object.values(JSON.parse(args)));
 
         messages.push({
           role: "assistant",
@@ -87,4 +89,4 @@ export default function handler(req, res) {
     console.error(err);
     res.status(500).send({ error: 'Internal Server Error' });
   });
-}
+}