src/app/search/web/page.jsx

"use-client"
import { useEffect, useState } from "react";

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

  useEffect(() => {
    if (!searchParams || !searchParams.searchTerm) return;

    const { searchTerm, start = "1" } = searchParams;
    const url = new URL('/api/llm', window.location.origin);

    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);
  }, [searchParams]);

  console.log(aiResponse);

  return <>{aiResponse ? JSON.stringify(aiResponse) : 'Loading...'}</>;
}