Vector Search UI & Skeletal Code to send request to backend

frontend/app/components/search-section.tsx

@@ -0,0 +1,34 @@
+// SearchSection.tsx
+
+import React, { useState, ChangeEvent, FormEvent } from "react";
+import useSearch from "@/app/components/ui/search/useSearch";
+import SearchResults from "@/app/components/ui/search/search-results";
+import SearchInput from "@/app/components/ui/search/search-input";
+
+const SearchSection: React.FC = () => {
+  const [query, setQuery] = useState("");
+  const { searchResults, isLoading, handleSearch } = useSearch();
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setQuery(e.target.value);
+  };
+
+  const handleSearchSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    handleSearch(query);
+  };
+
+  return (
+    <div className="space-y-4 max-w-5xl w-full">
+      <SearchInput
+        query={query}
+        isLoading={isLoading}
+        onInputChange={handleInputChange}
+        onSearchSubmit={handleSearchSubmit}
+      />
+      <SearchResults results={searchResults} isLoading={isLoading} />
+    </div>
+  );
+};
+
+export default SearchSection;

frontend/app/components/ui/search/search-input.tsx

@@ -0,0 +1,44 @@
+// SearchInput.tsx
+
+import React, { ChangeEvent, FormEvent } from "react";
+import { Button } from "../button";
+import { Input } from "../input";
+import { Search } from "lucide-react";
+
+interface SearchInputProps {
+    query: string;
+    isLoading: boolean;
+    onInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onSearchSubmit: (e: FormEvent) => void;
+}
+
+const SearchInput: React.FC<SearchInputProps> = ({
+    query,
+    isLoading,
+    onInputChange,
+    onSearchSubmit,
+}) => {
+    return (
+        <form
+            onSubmit={onSearchSubmit}
+            className="flex w-full items-start justify-between gap-4 rounded-xl bg-white dark:bg-zinc-700/30 p-4 shadow-xl"
+        >
+            <Input
+                autoFocus
+                name="query"
+                placeholder="Enter a text to search..."
+                value={query}
+                onChange={onInputChange}
+                className="flex-1 bg-white dark:bg-zinc-500/30"
+            />
+            <Button type="submit" disabled={isLoading} className="hidden md:flex items-center transition duration-300 ease-in-out transform hover:scale-110">
+                Search
+            </Button>
+            <Button type="submit" disabled={isLoading} className="md:hidden"> {/* Hide on larger screens */}
+                <Search className="h-5 w-5" />
+            </Button>
+        </form>
+    );
+};
+
+export default SearchInput;

frontend/app/components/ui/search/search-results.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { SearchResult } from "./search-types";
+import { IconSpinner } from "../icons";
+
+interface SearchResultsProps {
+    results: SearchResult[];
+    isLoading: boolean;
+}
+
+const SearchResults: React.FC<SearchResultsProps> = ({ results, isLoading }) => {
+    return (
+        <div className="flex w-full items-start justify-between gap-4 rounded-xl bg-white dark:bg-zinc-700/30 p-4 shadow-xl">
+            {isLoading ? (
+                <div className="flex items-center">
+                    <IconSpinner className="mr-2 animate-spin" />
+                    <p>Loading...</p>
+                </div>
+            ) : null}
+            {!isLoading && results.length === 0 && <p>No results found.</p>}
+            {!isLoading && results.length > 0 && (
+                <ul>
+                    {results.map((result) => (
+                        <li key={result.id}>{result.title}</li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+};
+
+export default SearchResults;

frontend/app/components/ui/search/search-types.tsx

@@ -0,0 +1,6 @@
+// SearchTypes.tsx
+export interface SearchResult {
+    id: number;
+    title: string;
+    // Add more properties as needed
+}

frontend/app/components/ui/search/useSearch.tsx

@@ -0,0 +1,53 @@
+import { useState, useEffect } from "react";
+
+interface SearchResult {
+    id: number;
+    title: string;
+    // Add more properties as needed
+}
+
+interface UseSearchResult {
+    searchResults: SearchResult[];
+    isLoading: boolean;
+    handleSearch: (query: string) => Promise<void>;
+}
+
+const useSearch = (): UseSearchResult => {
+    const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleSearch = async (query: string): Promise<void> => {
+        setIsLoading(true);
+
+        // Perform your search logic here
+        // Replace the following with your actual search API or function
+        try {
+            const response = await fetch(`/api/search?query=${query}`);
+            const data = await response.json();
+            setSearchResults(data);
+        } catch (error) {
+            console.error("Error during search:", error);
+            setSearchResults([]);
+        }
+
+        setIsLoading(false);
+    };
+
+    useEffect(() => {
+        // Initial load logic if needed
+        // ...
+
+        // Cleanup logic if needed
+        return () => {
+            // ...
+        };
+    }, []); // Dependency array depends on your use case
+
+    return {
+        searchResults,
+        isLoading,
+        handleSearch,
+    };
+};
+
+export default useSearch;

frontend/app/search/page.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import Header from "@/app/components/header";
-import ChatSection from "@/app/components/chat-section";
+import SearchSection from "@/app/components/search-section";
 
 export default function Search() {
 
   return (
     <main id='main-container' className="flex min-h-screen flex-col items-center gap-10 background-gradient dark:background-gradient-dark md:pt-10 pt-24 px-10">
       <Header />
-      <ChatSection />
+      <SearchSection />
     </main>
   );
 }