refactor to get request

src/app/search/web/page.jsx

@@ -9,39 +9,21 @@ export default function WebSearchPage({ searchParams }) {
   const startIndex = searchParams.start || "1";
 
   useEffect(() => {
-    async function fetchData() {
-      // Fetch Google search results via server-side route
-      /*
-      const response = await fetch(`/api/search?searchTerm=${searchParams.searchTerm}&start=${startIndex}`);
-      if (!response.ok) {
-        console.log(response);
-        throw new Error("Something went wrong");
-      }
-      const data = await response.json();
-      setResults(data.items);
-      */
+    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);
 
-      // Prepare AI prompt
-      // const aiPrompt = `You're creating a search engine experience. You got the following search results for the term "${searchParams.searchTerm}": ${JSON.stringify(data.items)}. How can you present these results in a helpful way?`;
-
-      // Fetch AI response via server-side route
-      const openaiRes = new EventSource('/api/llm', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          'question': searchParams.searchTerm
-        })
-      });
-
-      // Listen for AI responses and append to state
-      openaiRes.onmessage = function(event) {
+    // Listen for AI responses and append to state
+    openaiRes.onmessage = function(event) {
         setAiResponse(aiResponse => aiResponse + event.data);
-      };
-    }
-
-    fetchData();
+    };
+  
+    // Close connection when component unmounts
+    return () => {
+      openaiRes.close();
+    };
   }, [searchParams, startIndex]);
 
   if (!results) {

src/pages/api/llm.js

@@ -2,15 +2,15 @@ import { Configuration, OpenAIApi } from "openai";
 import { GoogleCustomSearch } from "openai-function-calling-tools";
 
 export default function handler(req, res) {
-  if (req.method !== 'POST') {
+  if (req.method !== 'GET') {
     res.status(405).send({ error: 'Method Not Allowed', method: req.method });
     return;
   }
 
-  const QUESTION = req.body.question;
+  const QUESTION = req.query.question;
 
   if (!QUESTION) {
-    res.status(400).send({ error: 'Question is missing in request body' });
+    res.status(400).send({ error: 'Question is missing in request' });
     return;
   }