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()
  const [text, setText] = useState('');

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



// Define the state for text


  useEffect(() => {
    const handleSend = async () => {
      const body = JSON.stringify({ question: searchTerm });
      const controller = new AbortController();
      const response = await fetch('/api/llm', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        signal: controller.signal,
        body
      });

      if (!response.ok) {
        return;
      }

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let resultText = '';

      while (true) {
        const { value, done } = await reader.read();

        if (done) {
          break;
        }

        const chunkValue = decoder.decode(value);
        resultText += chunkValue;
      }

      setText(resultText);
    };

    handleSend();
  }, []);



  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>
    );
}