client/components/App.tsx

import { usePubSub } from "create-pubsub/react";
import {
  promptPubSub,
  responsePubSub,
  searchResultsPubSub,
  urlsDescriptionsPubSub,
} from "../modules/pubSub";
import { SearchForm } from "./SearchForm";
import { Toaster } from "react-hot-toast";
import Markdown from "markdown-to-jsx";
import { getDisableAiResponseSetting } from "../modules/pubSub";
import { SearchResultsList } from "./SearchResultsList";
import { useEffect } from "react";
import { prepareTextGeneration } from "../modules/textGeneration";

export function App() {
  const [query, updateQuery] = usePubSub(promptPubSub);
  const [response] = usePubSub(responsePubSub);
  const [searchResults] = usePubSub(searchResultsPubSub);
  const [urlsDescriptions] = usePubSub(urlsDescriptionsPubSub);

  useEffect(() => {
    prepareTextGeneration();
  }, []);

  return (
    <>
      <SearchForm query={query} updateQuery={updateQuery} />
      {!getDisableAiResponseSetting() && response.length > 0 && (
        <div
          style={{
            backgroundColor: "var(--background)",
            borderRadius: "6px",
            padding: "10px 25px",
          }}
        >
          <Markdown>{response}</Markdown>
        </div>
      )}
      {searchResults.length > 0 && (
        <div>
          <SearchResultsList
            searchResults={searchResults}
            urlsDescriptions={urlsDescriptions}
          />
        </div>
      )}
      <Toaster />
    </>
  );
}