src/app/search/web/page.jsx

"use client"
import { useEffect, useState } from "react";
import { MemoizedReactMarkdown } from '../../../components/MemoizedReactMarkdown'

export default function WebSearchPage({ searchParams }) {
  const [aiResponse, setAiResponse] = useState("");
  const [searchTerm, setSearchTerm] = useState()

  useEffect(() => {
    setSearchTerm(searchParams.searchTerm)
  }, [searchParams])

  useEffect(() => {
    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,
      });
  
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      } else {
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        let text = '';
  
        while (true) {
          const { value, done } = await reader.read();
  
          if (value) {
            text += decoder.decode(value, {stream: true});
            let boundary = text.indexOf('\n');

            while (boundary !== -1) {
              const jsonStr = text.slice(0, boundary);
              text = text.slice(boundary + 1);
              try {
                const json = JSON.parse(jsonStr);
                console.log(json);
                setAiResponse(prevResponse => [...prevResponse, json]);
              } catch (error) {
                console.error("Failed to parse JSON", error);
              }

              boundary = text.indexOf('\n');
            }
          }
  
          if (done) {
            console.log("Stream complete");
            break;
          }
        }
      }
    }
  
    fetchData().catch(error => {
      console.error('Fetch failed: ', error);
    });
  
    return () => controller.abort();
  }, [searchParams, searchTerm]); 


  console.log(aiResponse);

  return (
      <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>
              );
            },
          }}
        >
          {JSON.stringify(aiResponse)}
        </MemoizedReactMarkdown>
      </div>
    );
}