improvements

src/app/search/web/page.jsx

@@ -1,14 +1,25 @@
 "use client"
+import { useSearchParams } from 'next/navigation'
 import { useEffect, useState } from "react";
 import { MemoizedReactMarkdown } from '../../../components/MemoizedReactMarkdown'
 import { CodeBlock } from '../../../components/CodeBlock';
-import { useSearchParams } from 'next/navigation'
+import WebSearchResults from '../../../components/WebSearchResults';
 
 export default function WebSearchPage() {
   const searchParams = useSearchParams()
 
   const [aiResponse, setAiResponse] = useState("");
   const [searchTerm, setSearchTerm] = useState()
+  const [searchResults, setSearchResults] = useState([]);
+
+  useEffect(() => {
+    try {
+      const streamArray = JSON.parse(aiResponse);
+      setSearchResults(streamArray);
+    } catch (err) {
+      return;
+    }
+  }, [aiResponse])
 
   useEffect(() => {
     setSearchTerm(searchParams.get('searchTerm'))
@@ -53,7 +64,8 @@ export default function WebSearchPage() {
   }, [searchParams, searchTerm]);
 
   return (
-      <div style={{ padding: "20px" }} className="flex flex-row">
+    <>
+      {!searchResults.length ? <div style={{ padding: "20px" }} className="flex flex-row">
         <MemoizedReactMarkdown
           className="prose dark:prose-invert flex-1"
           components={{
@@ -101,8 +113,9 @@ export default function WebSearchPage() {
             },
           }}
         >
-          {aiResponse}
-        </MemoizedReactMarkdown>
-      </div>
+          {aiResponse}         
+        </MemoizedReactMarkdown> 
+      </div> : <WebSearchResults results={searchResults} />}
+      </>
     );
 }

src/components/WebSearchResults.jsx

@@ -1,72 +1,30 @@
-import { MemoizedReactMarkdown } from './MemoizedReactMarkdown';
+import Link from "next/link";
+import Parser from "html-react-parser";
+import PaginationButtons from "./PaginationButtons";
 
-export default function WebSearchResults({ aiResponse, results }) {
+export default function WebSearchResults({ results }) {
   return (
     <div className="w-full mx-auto px-3 pb-40 sm:pb-24 sm:pl-[5%] md:pl-[14%] lg:pl-52">
-      <div className="w-1/4">
-        <div className="flex flex-row">
-          <MemoizedReactMarkdown
-            className="prose dark:prose-invert flex-1"
-            components={{
-              code({ node, inline, className, children, ...props }) {
-                if (children.length) {
-                  if (children[0] == '▍') {
-                    return <span className="animate-pulse cursor-default mt-1">▍</span>
-                  }
-                  children[0] = (children[0]).replace("`▍`", "▍")
-                }
-                const match = /language-(\w+)/.exec(className || '');
-                return !inline ? (
-                  <CodeBlock
-                    key={Math.random()}
-                    language={(match && match[1]) || ''}
-                    value={String(children).replace(/\n$/, '')}
-                    {...props}
-                  />
-                ) : (
-                  <code className={className} {...props}>
-                    {children}
-                  </code>
-                );
-              },
-              table({ children }) {
-                return (
-                  <table className="border-collapse border border-black px-3 py-1 dark:border-white">
-                    {children}
-                  </table>
-                );
-              },
-              th({ children }) {
-                return (
-                  <th className="break-words border border-black bg-gray-500 px-3 py-1 text-white dark:border-white">
-                    {children}
-                  </th>
-                );
-              },
-              td({ children }) {
-                return (
-                  <td className="break-words border border-black px-3 py-1 dark:border-white">
-                    {children}
-                  </td>
-                );
-              },
-            }}
-          >
-            {`${aiResponse}`}
-          </MemoizedReactMarkdown>
+      <p className="text-gray-600 text-sm mb-5 mt-3">
+        About {results.length} results
+      </p>
+      {results.map((result) => (
+        <div className="mb-8 max-w-xl" key={result.link}>
+          <div className="group flex flex-col">
+            <Link className="text-sm truncate" href={result.link}>
+              {result.link}
+            </Link>
+            <Link
+              className="group-hover:underline decoration-blue-800 text-xl truncate font-medium text-blue-800"
+              href={result.link}
+            >
+              {result.title}
+            </Link>
+          </div>
+          <p className="text-gray-600">{Parser(result.snippet)}</p>
         </div>
-      </div>
+      ))}
+      <PaginationButtons />
     </div>
   );
 }
-
-
-export async function getStaticProps(context) {
-  // You can access the query parameters of the request with context.query
-  const searchParams = context.query;
-
-  // TODO: Perform any necessary operations with searchParams
-
-  // Return searchParams as a prop to your page
-  return { props: { searchParams } };
-}

src/pages/api/llm.js

@@ -23,11 +23,15 @@ const handler = async (req, res) => {
     const promptToSend = "You are a helpful assistant, a search term is provided and you are given search results to help provide a useful response.";
     const stream = await LLMStream({ id: "gpt-3.5-turbo-0613" }, promptToSend, 0.8, messages, functions);
 
-    let data = '';
+    let data = "";
     const decoder = new TextDecoder();
     for await (const chunk of stream) {
-        data += decoder.decode(chunk);
-        res.write(data);
+        let text = decoder.decode(chunk);
+ 
+        if (text !== 'null') {
+            data += text;
+            res.write(text === 'null' ? 'lol' : data);
+        }
     }
 
     return res.end();

src/pages/api/stream.js

@@ -107,7 +107,7 @@ export const LLMStream = async (
                 // function call here using func_call
                 const fn = functions[func_call.name][func_call.name];
                 const funcResult = await fn(func_call.arguments);
-                const serpQueue = encoder.encode(JSON.stringify(funcResult));
+                const serpQueue = encoder.encode(funcResult);
                 controller.enqueue(serpQueue);
               }