@vertesia/ui 0.66.0 → 0.68.0

package/src/features/facets/VStringFacet.tsx

@@ -6,9 +6,11 @@ interface StringFacetProps {
     buckets: FacetBucket[];
     name: string;
     placeholder?: string;
+    type?: 'select';
+    multiple?: boolean;
 }
 
-export function createStringFilterGroup({ buckets, name, placeholder }: StringFacetProps): FilterGroup {
+export function createStringFilterGroup({ buckets, name, placeholder, type = 'select', multiple = false }: StringFacetProps): FilterGroup {
     const options = buckets.map((bucket) => ({
         label: facetOptionLabel(bucket),
         value: bucket._id
@@ -17,19 +19,23 @@ export function createStringFilterGroup({ buckets, name, placeholder }: StringFa
     const filterGroup: FilterGroup = {
         name: name,
         options: options,
-        type: "select",
+        type: type,
+        multiple: multiple,
         placeholder: `${placeholder ?? `${name.charAt(0).toUpperCase() + name.slice(1)}`}`,
+        ...({ allowCreate: false })
     };
 
     return filterGroup;
 }
 
-export function VStringFacet({ buckets, name, placeholder}: {
+export function VStringFacet({ buckets, name, placeholder, type, multiple }: {
     search: any;
     buckets: FacetBucket[];
     name: string;
     placeholder?: string;
     className?: string;
+    type?: 'select';
+    multiple?: boolean;
 }) {
-    return createStringFilterGroup({ buckets, name, placeholder });
+    return createStringFilterGroup({ buckets, name, placeholder, type, multiple });
 }

package/src/features/facets/VTypeFacet.tsx

@@ -4,9 +4,11 @@ import { FilterGroup } from "@vertesia/ui/core";
 interface VTypeFacetProps {
     buckets: FacetBucket[];
     typeRegistry: any;
+    type?: 'select';
+    multiple?: boolean;
 }
 
-export function VTypeFacet({ buckets, typeRegistry }: VTypeFacetProps) {
+export function VTypeFacet({ buckets, typeRegistry, type = 'select', multiple = false }: VTypeFacetProps) {
     // Create a map for quick lookups of type names and counts
     const typeDataMap = new Map();
     buckets.forEach((bucket) => {
@@ -30,19 +32,18 @@ export function VTypeFacet({ buckets, typeRegistry }: VTypeFacetProps) {
         });
     });
 
-    // Create options with just raw values
     const options = buckets.map((bucket) => {
         const typeId = bucket._id || "Document";
         return {
             value: typeId,
-            // Store count as simple fallback label
             label: `(${bucket.count})`
         };
     });
 
     const customFilterGroups: FilterGroup = {
-        name: 'Type',
-        type: 'select',
+        name: 'Types',
+        type: type,
+        multiple: multiple,
         options: options,
         labelRenderer: (typeId: string) => {
             const typeData = typeDataMap.get(typeId);

package/src/features/facets/VUserFacet.tsx

@@ -32,9 +32,11 @@ export function createUserFilterGroup({ buckets, name, placeholder }: UserFacetP
             // For known users, render UserInfo with count
             const bucket = buckets.find(b => b._id === userRef);
             return (
-                <div className="flex items-center justify-between w-full">
-                    <UserInfo userRef={userRef} showTitle={true} size="sm" />
-                    <span className="text-muted-foreground ml-2">({bucket?.count || 0})</span>
+                <div className="flex items-center w-full gap-2">
+                    <div className="flex-1 min-w-0 flex items-center truncate">
+                        <UserInfo userRef={userRef} showTitle={true} size="sm" />
+                    </div>
+                    <span className="text-muted-foreground flex-shrink-0">({bucket?.count || 0})</span>
                 </div>
             );
         },

package/src/features/facets/WorkflowExecutionsFacetsNav.tsx

@@ -0,0 +1,132 @@
+import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import { useState } from 'react';
+import { VStringFacet } from './VStringFacet';
+import { VUserFacet } from './VUserFacet';
+import { SearchInterface } from './VFacetsNav';
+
+interface WorkflowExecutionsFacetsNavProps {
+    facets: {
+        status?: any[];
+        initiated_by?: any[];
+    };
+    search: SearchInterface;
+}
+
+// Hook to create filter groups for workflow executions
+export function useWorkflowExecutionsFilterGroups(facets: WorkflowExecutionsFacetsNavProps['facets']): FilterGroup[] {
+    const customFilterGroups: FilterGroup[] = [];
+
+    customFilterGroups.push({
+        placeholder: 'Search by Workflow or Run ID',
+        name: 'name',
+        type: 'text',
+        options: [],
+    });
+
+    if (facets.status) {
+        const statusFilterGroup = VStringFacet({
+            search: null as any, // This will be provided by the search context
+            buckets: facets.status || [],
+            name: 'Status'
+        });
+        customFilterGroups.push(statusFilterGroup);
+    }
+
+    if (facets.initiated_by) {
+        const initiatedByFilterGroup = VUserFacet({
+            buckets: facets.initiated_by || [],
+            name: 'User'
+        });
+        customFilterGroups.push(initiatedByFilterGroup);
+    }
+
+    const dateAfterFilterGroup = {
+        name: 'start',
+        placeholder: 'Date After',
+        type: 'date' as const,
+        multiple: false
+    };
+    customFilterGroups.push(dateAfterFilterGroup);
+
+    const dateBeforeFilterGroup = {
+        name: 'end',
+        placeholder: 'Date Before',
+        type: 'date' as const,
+        multiple: false
+    };
+    customFilterGroups.push(dateBeforeFilterGroup);
+
+    return customFilterGroups;
+}
+
+// Hook to create filter change handler for workflow executions
+export function useWorkflowExecutionsFilterHandler(search: SearchInterface) {
+    return (newFilters: BaseFilter[]) => {
+        if (newFilters.length === 0) {
+            search.clearFilters();
+            return;
+        }
+
+        search.clearFilters(false);
+
+        newFilters.forEach(filter => {
+            if (filter.value && filter.value.length > 0) {
+                const filterName = filter.name;
+                let filterValue;
+                if (filter.type === 'stringList') {
+                    filterValue = filter.value.map(v => typeof v === 'string' ? v : v.value);
+                } else if (filter.multiple) {
+                    filterValue = Array.isArray(filter.value) 
+                        ? filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v)
+                        : [typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value];
+                } else {
+                    // Single value - don't wrap in array
+                    filterValue = Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object'
+                        ? (filter.value[0] as any).value
+                        : Array.isArray(filter.value) && filter.value[0] 
+                            ? filter.value[0]
+                            : filter.value;
+                }
+
+                if (filterName === 'name') {
+                    search.query.search_term = filterValue;
+                    search.query.name = filterValue;
+                } else {
+                    search.query[filterName] = filterValue;
+                }
+            }
+        });
+
+        search.search();
+    };
+}
+
+// Legacy component for backward compatibility
+export function WorkflowExecutionsFacetsNav({
+    facets,
+    search,
+}: WorkflowExecutionsFacetsNavProps) {
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const filterGroups = useWorkflowExecutionsFilterGroups(facets);
+    const handleFilterLogic = useWorkflowExecutionsFilterHandler(search);
+
+    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
+        const newFilters = typeof value === 'function' ? value(filters) : value;
+        setFilters(newFilters);
+        handleFilterLogic(newFilters);
+    };
+
+    return (
+        <FilterProvider
+            filterGroups={filterGroups}
+            filters={filters}
+            setFilters={handleFilterChange}
+        >
+            <div className="flex gap-2 items-center">
+                <FilterBtn />
+                <FilterBar />
+                <FilterClear />
+            </div>
+        </FilterProvider>
+    );
+}

package/src/features/facets/index.ts

@@ -1,11 +1,14 @@
 export { EnvironmentFacet } from "./EnvironmentFacet";
 export * from "./FacetsNav";
-export { InteractionFacet } from "./InteractionFacet";
 export { StringFacet } from "./StringFacet";
 export { StringListFacet } from "./StringListFacet";
 export { TypeFacet } from "./TypeFacet";
-export { UserFacet } from "./UserFacet";
+
 export * from "./VFacetsNav";
 export { VStringFacet } from "./VStringFacet";
 export { VTypeFacet } from "./VTypeFacet";
 export { VUserFacet } from "./VUserFacet";
+
+export { RunsFacetsNav, useRunsFilterGroups, useRunsFilterHandler } from "./RunsFacetsNav";
+export { WorkflowExecutionsFacetsNav, useWorkflowExecutionsFilterGroups, useWorkflowExecutionsFilterHandler } from "./WorkflowExecutionsFacetsNav";
+export { DocumentsFacetsNav, useDocumentFilterGroups, useDocumentFilterHandler } from "./DocumentsFacetsNav";

package/src/features/store/collections/CollectionsTable.tsx

@@ -18,7 +18,7 @@ export function CollectionsTable({ }: CollectionsTableProps) {
     const [isLoading, setIsLoading] = useState(true);
     const [isOpen, setOpen] = useState(false);
 
-    const { data: collections, error, refetch } = useFetch(() => client.store.collections.list(), []);
+    const { data: collections, error, refetch } = useFetch(() => client.store.collections.search({}), []);
 
     // Update loading state when data is fetched
     useEffect(() => {
@@ -57,7 +57,8 @@ export function CollectionsTable({ }: CollectionsTableProps) {
 
     return (
         <>
-            {collections &&
+            {
+                collections &&
                 (collections.length > 0 ?
                     (<Table className="w-full">
                         <thead>

package/src/features/store/collections/CreateCollection.tsx

@@ -86,10 +86,25 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
                         onChange={(ev) => setPayloadProp("description", ev.target.value)}
                     />
                 </FormItem>
-                <FormItem label="Dynamic Collection" className="mt-2" direction="row" description="Dynamic Collection is based on a query vs. users manully adding content.">
+                <FormItem label="Dynamic Collection" className="mt-2" direction="row" description="Dynamically fetch content for the collection based on a query. If not enabled, then content must be added by users or agents.">
                     <Switch value={payload.dynamic || false} onChange={(value) => setPayloadProp("dynamic", value)} />
                 </FormItem>
-                <FormItem label="Type" className="mt-2" description="This is optional and drives what properties are used to describe a collection">
+                { !payload.dynamic &&
+                    <FormItem label="Allowed Content Types" className="mt-4" description="Optionally select which content types can be added to the collection. If not set, then all content types are allowed.">
+                        <SelectContentType
+                            defaultValue={payload.allowed_types || null}
+                            onChange={(v) => {
+                                if (Array.isArray(v)) {
+                                    setPayloadProp("allowed_types", v.map(type => type.id));
+                                } else {
+                                    setPayloadProp("allowed_types", v ? [v.id] : []);
+                                }
+                            }}
+                            isClearable multiple
+                        />
+                    </FormItem>
+                }
+                <FormItem label="Type" className="mt-2" description="Optionally select a content type to assign custom properties and data to the collection.">
                     <SelectContentType
                         defaultValue={payload.type || null}
                         onChange={(v) => {
@@ -102,19 +117,6 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
                         isClearable
                     />
                 </FormItem>
-                <FormItem label="Allowed Content Types" className="mt-4">
-                    <SelectContentType
-                        defaultValue={payload.allowed_types || null}
-                        onChange={(v) => {
-                            if (Array.isArray(v)) {
-                                setPayloadProp("allowed_types", v.map(type => type.id));
-                            } else {
-                                setPayloadProp("allowed_types", v ? [v.id] : []);
-                            }
-                        }}
-                        isClearable multiple
-                    />
-                </FormItem>
             </VModalBody>
             <VModalFooter>
                 <Button isDisabled={isProcessing} onClick={onCreate}>

package/src/features/store/collections/EditCollectionView.tsx

@@ -128,8 +128,24 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                     onChange={(e) => setField("description", e.target.value)}
                 />
             </FormItem>
+            {
+                !collection.dynamic &&
+                <FormItem label="Allowed Content Types" description="Select which content types can be added to the collection. If not set, then all content types are allowed.">
+                    <SelectContentType
+                        defaultValue={metadata.allowed_types || null}
+                        onChange={(v) => {
+                            if (Array.isArray(v)) {
+                                setField("allowed_types", v.map(type => type.id));
+                            } else {
+                                setField("allowed_types", v ? [v.id] : []);
+                            }
+                        }}
+                        isClearable multiple
+                    />
+                </FormItem>
+            }
             {collection.dynamic && (
-                <FormItem label="Query" description="Define the query to fetch dynamic content for this collection.">
+                <FormItem label="Query" description="Define the query to dynamically fetch content for the collection.">
                     <textarea
                         className={Styles.INPUT}
                         value={metadata.query}
@@ -137,11 +153,11 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                     />
                 </FormItem>
             )}
-            <FormItem label="Table Layout" description="Define how the collection should be displayed in tables.">
+            <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables.">
                 <CodeMirrorEditor className="border-1 rounded-md border-border"
                     value={tableLayoutValue} extensions={extensions} editorRef={tableLayoutRef} />
             </FormItem>
-            <FormItem label="Type">
+            <FormItem label="Type" description="Select a content type to assign custom properties and data to the collection.">
                 <SelectContentType
                     defaultValue={metadata.type || null}
                     onChange={(v) => {
@@ -154,19 +170,6 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                     isClearable
                 />
             </FormItem>
-            <FormItem label="Allowed Content Types">
-                <SelectContentType
-                    defaultValue={metadata.allowed_types || null}
-                    onChange={(v) => {
-                        if (Array.isArray(v)) {
-                            setField("allowed_types", v.map(type => type.id));
-                        } else {
-                            setField("allowed_types", v ? [v.id] : []);
-                        }
-                    }}
-                    isClearable multiple
-                />
-            </FormItem>
             <Button size="lg" className="w-min my-4" isDisabled={isUpdating} onClick={onSubmit}>
                 Save Metadata
             </Button>

package/src/features/store/collections/SelectCollection.tsx

@@ -16,7 +16,7 @@ interface SelectCollectionProps {
  */
 export function SelectCollection({ onChange, value, disabled = false, className }: SelectCollectionProps) {
     const { client } = useUserSession();
-    const { data: collections, error } = useFetch(() => client.store.collections.list({ dynamic: false }), []);
+    const { data: collections, error } = useFetch(() => client.store.collections.search({ dynamic: false }), []);
 
     if (error) {
         return <ErrorBox title='Collection fetch failed'>{error.message}</ErrorBox>

package/src/features/store/objects/DocumentPreviewPanel.tsx

@@ -102,7 +102,6 @@ export function DocumentPreviewPanel({
     try {
       // Try to get a rendition first
       const rendition = await client.objects.getRendition(obj.id, {
-        max_hw: 1024,
         format: ImageRenditionFormat.jpeg,
         generate_if_missing: false,
       });

package/src/features/store/objects/DocumentSearchResults.tsx

@@ -5,7 +5,8 @@ import { Button, Divider, ErrorBox, SidePanel, Spinner, useDebounce, useIntersec
 import { useNavigate } from "@vertesia/ui/router";
 import { TypeRegistry, useUserSession } from '@vertesia/ui/session';
 import { Download, RefreshCw, Eye } from 'lucide-react';
-import { VFacetsNav } from "../../facets";
+import { FilterProvider, FilterBtn, FilterBar, FilterClear, Filter as BaseFilter } from '@vertesia/ui/core';
+import { useDocumentFilterGroups, useDocumentFilterHandler } from "../../facets/DocumentsFacetsNav";
 import { VectorSearchWidget } from './components/VectorSearchWidget';
 
 import { ContentDispositionButton } from './components/ContentDispositionButton';
@@ -97,6 +98,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     const [refreshTrigger, _setRefreshTrigger] = useState(0);
     const [loaded, setLoaded] = useState(0);
     const [isGridView, setIsGridView] = useState(localStorage.getItem(ContentDispositionButton.LAST_DISPLAYED_VIEW) === "grid");
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
 
     const loadMoreRef = useRef<HTMLDivElement>(null);
     useIntersectionObserver(loadMoreRef, () => {
@@ -148,22 +150,89 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
         search.search().then(() => setIsReady(true));
     };
 
+    // Use DocumentsFacetsNav hooks for cleaner organization
+    const filterGroups = useDocumentFilterGroups(facets);
+    const handleFilterLogic = useDocumentFilterHandler(facetSearch);
+
+    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
+        const newFilters = typeof value === 'function' ? value(filters) : value;
+        setFilters(newFilters);
+        handleFilterLogic(newFilters);
+    };
+
+    const url = new URL(window.location.href);
+    const filtersParam = url.searchParams.get('filters');
+
+    if (filtersParam) {
+        try {
+            const filterPairs = filtersParam.split(';');
+            const validFilterPairs = filterPairs.filter(pair => {
+                const [encodedName] = pair.split(':');
+                const name = decodeURIComponent(encodedName);
+                return name !== 'start' && name !== 'end';
+            });
+
+            if (validFilterPairs.length !== filterPairs.length) {
+                const newFiltersParam = validFilterPairs.length > 0 ? validFilterPairs.join(';') : '';
+                if (newFiltersParam) {
+                    url.searchParams.set('filters', newFiltersParam);
+                } else {
+                    url.searchParams.delete('filters');
+                }
+                window.history.replaceState({}, '', url.toString());
+            }
+        } catch (error) {
+            console.error("Failed to clean start/end filters from URL:", error);
+        }
+    }
+
     return (
         <div className="flex flex-col gap-y-2">
             <OverviewDrawer object={selectedObject} onClose={() => setSelectedObject(null)} />
             {
                 error && <ErrorBox title="Error">{error.message}</ErrorBox>
             }
-            <div className="flex flex-row gap-4 items-center justify-between w-full">
-                {
-                    allowSearch && <VectorSearchWidget onChange={setVQuery} isLoading={isLoading} refresh={refreshTrigger} />
-                }
-                <div className="flex gap-1 items-center">
-                    <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
-                    <ContentDispositionButton onUpdate={setIsGridView} />
-                </div>
-            </div>
-            {allowFilter && <VFacetsNav facets={facets} search={facetSearch} textSearch={"Name or ID"} />}
+            {
+                allowFilter && (
+                    <FilterProvider
+                        filterGroups={filterGroups}
+                        filters={filters}
+                        setFilters={handleFilterChange}
+                    >
+                        <div className="flex flex-row gap-4 items-center justify-between w-full">
+                            <div className="flex gap-2 items-center w-2/3">
+                                {
+                                    allowSearch && <VectorSearchWidget onChange={setVQuery} isLoading={isLoading} refresh={refreshTrigger} className="w-wull" />
+                                }
+                                <FilterBtn />
+                            </div>
+                            <div className="flex gap-1 items-center">
+                                <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
+                                <ContentDispositionButton onUpdate={setIsGridView} />
+                            </div>
+                        </div>
+                        <div className="flex gap-2 items-center">
+                            <FilterBar />
+                            <FilterClear />
+                        </div>
+                    </FilterProvider>
+                )
+            }
+            {
+                !allowFilter && (
+                    <div className="flex flex-row gap-4 items-center justify-between w-full">
+                        <div className="flex gap-2 items-center w-2/3">
+                            {
+                                allowSearch && <VectorSearchWidget onChange={setVQuery} isLoading={isLoading} refresh={refreshTrigger} />
+                            }
+                        </div>
+                        <div className="flex gap-1 items-center">
+                            <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
+                            <ContentDispositionButton onUpdate={setIsGridView} />
+                        </div>
+                    </div>
+                )
+            }
             <DocumentTable
                 objects={objects}
                 isLoading={!objects.length && isLoading}

package/src/features/store/objects/components/ContentOverview.tsx

@@ -3,11 +3,12 @@ import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 import { useUserSession } from "@vertesia/ui/session";
-import { Button, Link, Spinner, useToast } from "@vertesia/ui/core";
+import { Button, Spinner, useToast } from "@vertesia/ui/core";
 import { JSONDisplay } from "@vertesia/ui/widgets";
 import { ContentObject, ImageRenditionFormat } from "@vertesia/common";
 import { Copy, Download, SquarePen } from "lucide-react";
 import { PropertiesEditorModal } from "./PropertiesEditorModal";
+import { NavLink } from "@vertesia/ui/router";
 
 interface ContentOverviewProps {
     object: ContentObject;
@@ -82,7 +83,6 @@ export function ContentOverview({
             // Request document rendition from the server
             const response = await client.objects.getRendition(object.id, {
                 format: format as any, // We're extending the format type
-                max_hw: 1024, // Not used for document exports but required by API
                 generate_if_missing: true,
                 sign_url: true,
             });
@@ -171,7 +171,6 @@ export function ContentOverview({
         if (isImage) {
             client.objects
                 .getRendition(object.id, {
-                    max_hw: 1024,
                     format: ImageRenditionFormat.jpeg,
                     generate_if_missing: false,
                     sign_url: true,
@@ -320,17 +319,18 @@ export function ContentOverview({
                                         components={{
                                             a: ({ node, ...props }: { node?: any; href?: string; children?: React.ReactNode }) => {
                                                 const href = props.href || "";
-                                                if (href.startsWith("/store/objects/")) {
+                                                if (href.includes("/store/objects/")) {
                                                     return (
-                                                        <Link
+                                                        <NavLink
+                                                            topLevelNav
                                                             href={href}
                                                             className="text-info"
                                                         >
                                                             {props.children}
-                                                        </Link>
+                                                        </NavLink>
                                                     );
                                                 }
-                                                return <a {...props} target="_blank" rel="noopener noreferrer" />;
+                                                return <a {...props} data-debug="test" target="_blank" rel="noopener noreferrer" />;
                                             },
                                             p: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
                                                 <p {...props} className={`my-0`} />

package/src/features/store/objects/components/SelectDocument.tsx

@@ -1,7 +1,7 @@
 import { ColumnLayout, ContentObjectItem } from "@vertesia/common";
 import { Button, ErrorBox, Spinner, useIntersectionObserver } from "@vertesia/ui/core";
 import { useEffect, useRef, useState } from "react";
-import { VFacetsNav } from "../../../facets";
+import { DocumentsFacetsNav } from "../../../facets";
 import { DocumentTable } from "../DocumentTable";
 import { useDocumentSearch, useWatchDocumentSearchFacets, useWatchDocumentSearchResult } from "../search/DocumentSearchContext";
 import { DocumentSearchProvider } from "../search/DocumentSearchProvider";
@@ -66,7 +66,7 @@ function SelectDocumentImpl({ onRowClick }: SelectDocumentImplProps) {
     return (
         <div>
             <div className="flex justify-between items-center mb-4">
-                <VFacetsNav facets={facets} search={facetSearch} textSearch="Filter content" />
+                <DocumentsFacetsNav facets={facets} search={facetSearch} />
                 <div className="flex items-center gap-2">
                     <Button variant="outline" onClick={handleRefetch} alt="Refresh">
                         <RefreshCw size={16} />

package/src/features/store/objects/components/VectorSearchWidget.tsx

@@ -107,8 +107,8 @@ export function VectorSearchWidget({ onChange, isLoading, refresh }: VectorSearc
     };
 
     return (
-        <div className="flex gap-1 items-center w-full">
-            <Input placeholder="Type what you are looking for" value={searchText} onChange={setSearchText} onKeyDown={handleKeyPress} />
+        <div className="flex gap-1 items-center w-1/2">
+            <Input placeholder="Type what you are looking for, or select a filter" value={searchText} onChange={setSearchText} onKeyDown={handleKeyPress} />
             <Button variant="secondary" isLoading={isLoading} onClick={() => fireSearch("text")} isDisabled={!isReady} alt="semantic search">Search</Button>
         </div>
     );