Add pages

client/components/SearchForm.tsx

@@ -36,7 +36,7 @@ const startSearching = useCallback((queryToEncode: string) => {
     } else if (!userQueryIsBlank && !suggestedQueryIsBlank) {
       setSuggestedQuery("");
     }
-  
+
     // Start searching immediately when user types
     if (!userQueryIsBlank) {
       debouncedStartSearching(userQuery);

client/pages/search/SearchPage.tsx

@@ -0,0 +1,80 @@
+import { usePubSub } from "create-pubsub/react";
+import {
+  promptPubSub,
+  responsePubSub,
+  searchResultsPubSub,
+  urlsDescriptionsPubSub,
+} from "../../modules/pubSub";
+import { SearchForm } from "../../components/SearchForm";
+import { Toaster } from "react-hot-toast";
+import { SettingsButton } from "../../components/SettingsButton";
+import Markdown from "markdown-to-jsx";
+import { getDisableAiResponseSetting } from "../../modules/pubSub";
+import { SearchResultsList } from "../../components/SearchResultsList";
+import { useEffect } from "react";
+import { prepareTextGeneration } from "../../modules/textGeneration";
+import { useLocation } from 'react-router-dom';
+
+export const SearchPage = () => {
+    const [query, setQuery] = usePubSub(promptPubSub);
+    const [response] = usePubSub(responsePubSub);
+    const [searchResults] = usePubSub(searchResultsPubSub);
+    const [urlsDescriptions] = usePubSub(urlsDescriptionsPubSub);
+
+    useEffect(() => {
+      prepareTextGeneration();
+    }, []);
+
+    const location = useLocation();
+
+    useEffect(() => {
+      const params = new URLSearchParams(location.search);
+      const newQuery = params.get('q');
+      if (newQuery !== null) {
+        setQuery(newQuery);
+      }
+    }, [location.search, setQuery]);
+
+
+  return (
+    <>
+      <SearchForm query={query} updateQuery={setQuery} />
+      {!getDisableAiResponseSetting() && response.length > 0 && (
+        <div className="mt-4">
+          <h2 className="text-lg font-semibold">AI's thoughts:</h2>
+          <div className="bg-gray-100 p-4 rounded-md mt-2">
+            <Markdown>{response}</Markdown>
+          </div>
+        </div>
+      )}
+      {searchResults.length > 0 && (
+        <div>
+          <SearchResultsList
+            searchResults={searchResults}
+            urlsDescriptions={urlsDescriptions}
+          />
+        </div>
+      )}
+      <div
+        style={
+          searchResults.length === 0
+            ? {
+                position: "fixed",
+                bottom: 0,
+                left: 0,
+                right: 0,
+                display: "flex",
+                justifyContent: "center",
+              }
+            : {
+                display: "flex",
+                justifyContent: "center",
+              }
+        }
+      >
+        <SettingsButton />
+      </div>
+      <Toaster />
+    </>
+  );
+};

client/pages/static/ComparisonPage.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const ComparisonPage = () => {
+  return (
+    <div>
+      <h1>Comparison Page</h1>
+      {/* Add your comparison logic here */}
+    </div>
+  );
+};

client/utils/debounce.ts

@@ -0,0 +1,16 @@
+export const debounce = <T extends (...args: any[]) => void>(
+  func: T,
+  wait: number,
+): ((...args: Parameters<T>) => void) => {
+  let timeout: NodeJS.Timeout;
+
+  return (...args: Parameters<T>): void => {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};