@vertesia/ui 0.73.0 → 0.76.0

package/src/features/magic-pdf/PageSlider.tsx

@@ -1,3 +1,4 @@
+import { DocumentMetadata } from "@vertesia/common";
 import { Center } from "@vertesia/ui/core";
 import clsx from "clsx";
 import { AtSignIcon, ChevronsDown, ChevronsUp, ImageIcon, InfoIcon } from "lucide-react";
@@ -6,7 +7,8 @@ import { usePdfPagesInfo } from "./PdfPageProvider";
 
 enum ImageType {
     default,
-    instrumented,
+    original,
+    instrumented, 
     annotated,
 }
 
@@ -14,11 +16,25 @@ interface PageSliderProps {
     currentPage: number;
     onChange: (pageNumber: number) => void;
     className?: string;
+    object: any; // ContentObject type
 }
-export function PageSlider({ className, currentPage, onChange }: PageSliderProps) {
-    const [imageType, setImageType] = useState<ImageType>(ImageType.default);
+export function PageSlider({ className, currentPage, onChange, object }: PageSliderProps) {
+    const getProcessorType = (): string => {
+        if (object.metadata?.type === "document") {
+            const docMetadata = object.metadata as DocumentMetadata;
+            return docMetadata.content_processor?.type || "xml";
+        }
+        return "xml"; // default
+    };
+    
+    const getDefaultImageType = (): ImageType => {
+        const processorType = getProcessorType();
+        return processorType === "markdown" ? ImageType.original : ImageType.default;
+    };
+    
+    const [imageType, setImageType] = useState<ImageType>(getDefaultImageType());
     const ref = useRef<HTMLDivElement>(null);
-    const { urls, annotatedUrls, instrumentedUrls } = usePdfPagesInfo();
+    const { urls, originalUrls, annotatedUrls, instrumentedUrls } = usePdfPagesInfo();
     const goPrev = () => {
         if (currentPage > 1) {
             onChange(currentPage - 1);
@@ -46,7 +62,8 @@ export function PageSlider({ className, currentPage, onChange }: PageSliderProps
     }
 
     const actualUrls = imageType === ImageType.instrumented ? instrumentedUrls :
-        (imageType === ImageType.annotated ? annotatedUrls : urls);
+        (imageType === ImageType.annotated ? annotatedUrls : 
+        (imageType === ImageType.original ? originalUrls : urls));
 
     return (
         <div ref={ref} className={clsx('flex flex-col items-stretch gap-y-2', className)}>
@@ -56,15 +73,28 @@ export function PageSlider({ className, currentPage, onChange }: PageSliderProps
                     <ChevronsUp className='w-5 h-5' />
                 </button>
                 <div className="absolute right-3 flex gap-x-1">
-                    <button className={getRadioButtonClass(ImageType.default, imageType)}
-                        onClick={() => setImageType(ImageType.default)}
-                    ><ImageIcon className="w-5 h-5 mt-1" /></button>
-                    <button className={getRadioButtonClass(ImageType.instrumented, imageType)}
-                        onClick={() => setImageType(ImageType.instrumented)}
-                    ><InfoIcon className="w-5 h-5 mt-1" /></button>
-                    <button className={getRadioButtonClass(ImageType.annotated, imageType)}
-                        onClick={() => setImageType(ImageType.annotated)}
-                    ><AtSignIcon className="w-5 h-5 mt-1" /></button>
+                    {getProcessorType() === "markdown" ? (
+                        <>
+                            <button className={getRadioButtonClass(ImageType.original, imageType)}
+                                onClick={() => setImageType(ImageType.original)}
+                            ><ImageIcon className="w-5 h-5 mt-1" /></button>
+                            <button className={getRadioButtonClass(ImageType.instrumented, imageType)}
+                                onClick={() => setImageType(ImageType.instrumented)}
+                            ><InfoIcon className="w-5 h-5 mt-1" /></button>
+                        </>
+                    ) : (
+                        <>
+                            <button className={getRadioButtonClass(ImageType.default, imageType)}
+                                onClick={() => setImageType(ImageType.default)}
+                            ><ImageIcon className="w-5 h-5 mt-1" /></button>
+                            <button className={getRadioButtonClass(ImageType.instrumented, imageType)}
+                                onClick={() => setImageType(ImageType.instrumented)}
+                            ><InfoIcon className="w-5 h-5 mt-1" /></button>
+                            <button className={getRadioButtonClass(ImageType.annotated, imageType)}
+                                onClick={() => setImageType(ImageType.annotated)}
+                            ><AtSignIcon className="w-5 h-5 mt-1" /></button>
+                        </>
+                    )}
                 </div>
             </div>
             <div className='flex flex-col items-center gap-2 flex-1 overflow-y-auto px-2'>

package/src/features/magic-pdf/PdfPageProvider.tsx

@@ -13,9 +13,11 @@ const ADVANCED_PROCESSING_PREFIX = "magic-pdf";
 interface PdfPagesInfo {
     count: number;
     urls: string[];
+    originalUrls: string[];
     annotatedUrls: string[];
     instrumentedUrls: string[];
     layoutProvider: PageLayoutProvider;
+    markdownProvider: PageMarkdownProvider;
     xml: string;
     xmlPages: string[];
 }
@@ -54,6 +56,40 @@ class PageLayoutProvider {
     }
 }
 
+class PageMarkdownProvider {
+    markdownUrls: string[] = [];
+    cache: string[];
+    constructor(public totalPages: number) {
+        this.cache = new Array<string>(totalPages);
+    }
+    async loadUrls(vertesia: VertesiaClient, objectId: string) {
+        const markdownPromises: Promise<GetFileUrlResponse>[] = [];
+        for (let i = 0; i < this.totalPages; i++) {
+            markdownPromises.push(getMarkdownUrlForPage(vertesia, objectId, i + 1));
+        }
+        const markdownUrls = await Promise.all(markdownPromises);
+        this.markdownUrls = markdownUrls.map((r) => r.url);
+    }
+    async getPageMarkdown(page: number) {
+        const index = page - 1;
+        let content = this.cache[index];
+        if (content === undefined) {
+            const url = this.markdownUrls[index];
+            content = await fetch(url, { method: "GET" }).then((r) => {
+                if (r.ok) {
+                    return r.text();
+                } else {
+                    throw new Error(
+                        "Failed to fetch markdown: " + r.statusText,
+                    );
+                }
+            });
+            this.cache[index] = content;
+        }
+        return content;
+    }
+}
+
 const PdfPageContext = createContext<PdfPagesInfo | undefined>(undefined);
 
 interface PdfPageProviderProps {
@@ -103,10 +139,22 @@ function getPageInstrumentedImagePath(
     return `${getBasePath(objectId)}/pages/page-${pageNumber}.instrumented${ext}`;
 }
 
+function getPageOriginalImagePath(
+    objectId: string,
+    pageNumber: number,
+    ext = ".jpg",
+) {
+    return `${getBasePath(objectId)}/pages/page-${pageNumber}.original${ext}`;
+}
+
 function getLayoutJsonPath(objectId: string, pageNumber: number) {
     return `${getBasePath(objectId)}/pages/page-${pageNumber}.layout.json`;
 }
 
+function getMarkdownPath(objectId: string, pageNumber: number) {
+    return `${getBasePath(objectId)}/pages/page-${pageNumber}.md`;
+}
+
 export function getResourceUrl(
     vertesia: VertesiaClient,
     objectId: string,
@@ -147,6 +195,16 @@ function getInstrumentedImageUrlForPage(
     );
 }
 
+function getOriginalImageUrlForPage(
+    vertesia: VertesiaClient,
+    objectId: string,
+    pageNumber: number,
+): Promise<GetFileUrlResponse> {
+    return vertesia.files.getDownloadUrl(
+        getPageOriginalImagePath(objectId, pageNumber),
+    );
+}
+
 function getLayoutUrlForPage(
     vertesia: VertesiaClient,
     objectId: string,
@@ -157,6 +215,16 @@ function getLayoutUrlForPage(
     );
 }
 
+function getMarkdownUrlForPage(
+    vertesia: VertesiaClient,
+    objectId: string,
+    pageNumber: number,
+): Promise<GetFileUrlResponse> {
+    return vertesia.files.getDownloadUrl(
+        getMarkdownPath(objectId, pageNumber),
+    );
+}
+
 async function getPdfPagesInfo(
     vertesia: VertesiaClient,
     object: ContentObject,
@@ -186,17 +254,30 @@ async function getPdfPagesInfo(
         instrumentedImageUrlPromises,
     );
 
+    const originalImageUrlPromises: Promise<GetFileUrlResponse>[] = [];
+    for (let i = 0; i < page_count; i++) {
+        originalImageUrlPromises.push(
+            getOriginalImageUrlForPage(vertesia, object.id, i + 1),
+        );
+    }
+    const originalImageUrls = await Promise.all(originalImageUrlPromises);
+
     const layoutProvider = new PageLayoutProvider(page_count);
     await layoutProvider.loadUrls(vertesia, object.id);
 
+    const markdownProvider = new PageMarkdownProvider(page_count);
+    await markdownProvider.loadUrls(vertesia, object.id);
+
     const xml = object.text ? cleanXml(object.text) : "";
 
     return {
         count: page_count,
         urls: imageUrls.map((r) => r.url),
+        originalUrls: originalImageUrls.map((r) => r.url),
         annotatedUrls: annotatedImageUrls.map((r) => r.url),
         instrumentedUrls: instrumentedImageUrls.map((r) => r.url),
         layoutProvider,
+        markdownProvider,
         xml,
         xmlPages: object.text ? extractXmlPages(xml) : [],
     };

package/src/features/magic-pdf/TextPageView.tsx

@@ -1,4 +1,4 @@
-import { JSONCode, Theme, XMLViewer } from '@vertesia/ui/widgets';
+import { JSONCode, Theme, XMLViewer, MarkdownRenderer } from '@vertesia/ui/widgets';
 import { useEffect, useLayoutEffect, useState } from "react";
 import { usePdfPagesInfo } from "./PdfPageProvider";
 import { ViewType } from "./types";
@@ -14,12 +14,20 @@ const darkTheme: Theme = {
     cdataColor: "#33CC66",
 }
 
+
 interface TextPageViewProps {
     pageNumber: number;
     viewType: ViewType;
 }
 export function TextPageView({ viewType, pageNumber }: TextPageViewProps) {
-    return viewType === "json" ? <JsonPageLayoutView pageNumber={pageNumber} /> : <XmlPageView pageNumber={pageNumber} />
+    switch (viewType) {
+        case "json":
+            return <JsonPageLayoutView pageNumber={pageNumber} />;
+        case "markdown":
+            return <MarkdownPageView pageNumber={pageNumber} />;
+        default:
+            return <XmlPageView pageNumber={pageNumber} />;
+    }
 }
 
 interface XmlPageViewProps {
@@ -62,3 +70,22 @@ function JsonPageLayoutView({ pageNumber }: JsonPageLayoutViewProps) {
         content && <JSONCode className="w-full" data={content} />
     )
 }
+
+interface MarkdownPageViewProps {
+    pageNumber: number;
+}
+function MarkdownPageView({ pageNumber }: MarkdownPageViewProps) {
+    const [content, setContent] = useState<string>();
+    const { markdownProvider } = usePdfPagesInfo();
+    useEffect(() => {
+        markdownProvider.getPageMarkdown(pageNumber).then(setContent).catch((err: any) => {
+            console.error(err);
+            setContent(undefined);
+        });
+    }, [pageNumber]);
+    return (
+        <div className="px-4 py-2 prose prose-sm max-w-none dark:prose-invert">
+            {content ? <MarkdownRenderer>{content}</MarkdownRenderer> : <div>No markdown content available</div>}
+        </div>
+    )
+}

package/src/features/magic-pdf/types.ts

@@ -1 +1 @@
-export type ViewType = "xml" | "json";
+export type ViewType = "xml" | "json" | "markdown";

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

@@ -74,7 +74,7 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
     };
 
     return (
-        <form>
+        <form onSubmit={(e) => e.preventDefault()}>
             <VModalBody>
                 <FormItem label="Name" required>
                     <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />

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

@@ -5,7 +5,7 @@ import {
 import { Button, Spinner, useToast } from "@vertesia/ui/core";
 import { useNavigate } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
-import { JSONDisplay } from "@vertesia/ui/widgets";
+import { JSONDisplay, MarkdownRenderer } from "@vertesia/ui/widgets";
 import {
   ChevronRight,
   Download,
@@ -16,8 +16,6 @@ import {
   X,
 } from "lucide-react";
 import { useEffect, useState } from "react";
-import Markdown from "react-markdown";
-import remarkGfm from "remark-gfm";
 
 interface DocumentPreviewPanelProps {
   objectId: string | null;
@@ -233,7 +231,7 @@ export function DocumentPreviewPanel({
                   <div className="shadow rounded-md p-4 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
                     {seemsMarkdown ? (
                       <div className="prose prose-sm max-w-none prose-p:my-2 prose-pre:bg-gray-800 prose-pre:my-2 prose-headings:text-indigo-700 dark:prose-invert dark:prose-headings:text-indigo-300">
-                        <Markdown remarkPlugins={[remarkGfm]}>{text}</Markdown>
+                        <MarkdownRenderer>{text}</MarkdownRenderer>
                       </div>
                     ) : (
                       <pre className="text-wrap whitespace-pre-wrap dark:text-gray-200">

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

@@ -1,14 +1,15 @@
-import { useEffect, useRef, useState } from "react";
-
-import { ColumnLayout, ContentObject, ContentObjectItem, VectorSearchQuery } from '@vertesia/common';
-import { Button, Divider, ErrorBox, SidePanel, Spinner, useDebounce, useIntersectionObserver, useToast } from '@vertesia/ui/core';
+import { useRef, useState } from "react";
+import { ColumnLayout, ContentObject, ContentObjectItem, ComplexSearchQuery } from '@vertesia/common';
+import {
+   
+    Button, Divider, ErrorBox, SidePanel, Spinner, useIntersectionObserver, useToast,
+    FilterProvider, FilterBtn, FilterBar, FilterClear, Filter as BaseFilter
+} from '@vertesia/ui/core';
 import { useNavigate } from "@vertesia/ui/router";
 import { TypeRegistry, useUserSession } from '@vertesia/ui/session';
 import { Download, RefreshCw, Eye } from 'lucide-react';
-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';
 import { DocumentTable } from './DocumentTable';
 import { useDocumentSearch, useWatchDocumentSearchFacets, useWatchDocumentSearchResult } from './search/DocumentSearchContext';
@@ -90,7 +91,6 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     const [selectedObject, setSelectedObject] = useState<ContentObjectItem | null>(null);
     const { typeRegistry } = useUserSession();
     const { search, isLoading, error, objects } = useWatchDocumentSearchResult();
-    const [vQuery, setVQuery] = useState<VectorSearchQuery | undefined>(undefined);
     const [actualLayout, setActualLayout] = useState<ColumnLayout[]>(
         typeRegistry ? layout || getTableLayout(typeRegistry, search.query.type) : defaultLayout,
     );
@@ -111,37 +111,35 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
         }
     }, { deps: [isReady, objects.length] });
 
-    useEffect(() => {
-        search.search().then(() => setIsReady(true));
-    }, []);
 
-    //TODO _setSearchTerm state not used
-    const [searchTerm, _setSearchTerm] = useState("");
-    const debounceValue = useDebounce(searchTerm, 500);
-    useEffect(() => {
-        search.query.name = searchTerm;
-        search.search().then(() => setIsReady(true));
-    }, [debounceValue]);
-
-    useEffect(() => {
-        if (vQuery) {
-            search.query.vector = vQuery;
-            if (!actualLayout.find((c) => c.name === "Vector Similarity")) {
+    // Handler for vector search widget
+    const handleVectorSearch = (query?: ComplexSearchQuery) => {
+        if (query && query.vector) {
+            search.query.vector = query.vector;
+            search.query.full_text = query.full_text;
+            search.query.weights = query.weights;
+            search.query.score_aggregation = query.score_aggregation;
+            search.query.dynamic_scaling = query.dynamic_scaling;
+            if (!actualLayout.find((c) => c.name === "Search Score")) {
                 const layout = [
                     ...actualLayout,
                     {
-                        name: "Vector Similarity",
+                        name: "Search Score",
                         field: "score",
                     } satisfies ColumnLayout,
                 ];
                 setActualLayout(layout);
             }
             search.search().then(() => setIsReady(true));
+        } else if (query && query.full_text) {
+            search.query.full_text = query.full_text;
+            search.search().then(() => setIsReady(true));
         } else {
             delete search.query.vector;
+            delete search.query.full_text;
             search.search().then(() => setIsReady(true));
         }
-    }, [vQuery?.values]);
+    };
 
     const facets = useWatchDocumentSearchFacets();
     const facetSearch = useDocumentSearch();
@@ -202,7 +200,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
                         <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" />
+                                    allowSearch && <VectorSearchWidget onChange={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} className="w-full" />
                                 }
                                 <FilterBtn />
                             </div>
@@ -223,7 +221,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
                     <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} />
+                                allowSearch && <VectorSearchWidget onChange={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} />
                             }
                         </div>
                         <div className="flex gap-1 items-center">

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

@@ -1,10 +1,8 @@
 import { useEffect, useState } from "react";
-import Markdown from "react-markdown";
-import remarkGfm from "remark-gfm";
 
 import { useUserSession } from "@vertesia/ui/session";
 import { Button, Spinner, useToast } from "@vertesia/ui/core";
-import { JSONDisplay } from "@vertesia/ui/widgets";
+import { JSONDisplay, MarkdownRenderer } from "@vertesia/ui/widgets";
 import { ContentObject, ImageRenditionFormat } from "@vertesia/common";
 import { Copy, Download, SquarePen } from "lucide-react";
 import { PropertiesEditorModal } from "./PropertiesEditorModal";
@@ -314,8 +312,7 @@ export function ContentOverview({
                         <div className="border shadow-xs rounded-xs max-w-7xl">
                             {seemsMarkdown ? (
                                 <div className="vprose prose-sm p-1">
-                                    <Markdown
-                                        remarkPlugins={[remarkGfm]}
+                                    <MarkdownRenderer
                                         components={{
                                             a: ({ node, ...props }: { node?: any; href?: string; children?: React.ReactNode }) => {
                                                 const href = props.href || "";
@@ -378,7 +375,7 @@ export function ContentOverview({
                                         }}
                                     >
                                         {text}
-                                    </Markdown>
+                                    </MarkdownRenderer>
                                 </div>
                             ) : (
                                 <pre className="text-wrap bg-muted text-muted p-2">

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

@@ -1,37 +1,61 @@
 import { useEffect, useState } from 'react';
 
-import { ProjectConfiguration, SupportedEmbeddingTypes, VectorSearchQuery } from '@vertesia/common';
-import { Button, Input, useToast } from '@vertesia/ui/core';
+import { ProjectConfiguration, ComplexSearchQuery, SupportedEmbeddingTypes, SearchTypes } from '@vertesia/common';
+import { Button, Input, useToast, Modal, ModalTitle, ModalBody, ModalFooter, Checkbox, NumberInput } from '@vertesia/ui/core';
 import { useUserSession } from '@vertesia/ui/session';
+import { Settings } from 'lucide-react';
 
 interface VectorSearchWidgetProps {
-    onChange: (query?: VectorSearchQuery) => void;
+    onChange: (query?: ComplexSearchQuery) => void;
     className?: string;
     status?: boolean;
     isLoading?: boolean;
-    refresh: number
+    refresh: number;
+    searchTypes?: (keyof typeof SearchTypes)[];
 }
-export function VectorSearchWidget({ onChange, isLoading, refresh }: VectorSearchWidgetProps) {
+
+const allTypes = Object.values(SearchTypes);
+const embeddingTypes = Object.values(SupportedEmbeddingTypes);
+
+export function VectorSearchWidget({ onChange, isLoading, refresh, searchTypes }: VectorSearchWidgetProps) {
     const { client, project } = useUserSession();
     const toast = useToast();
 
     const [searchText, setSearchText] = useState<string | undefined>(undefined);
-    const [searchSketch, setSearchSketch] = useState<string | undefined>(undefined);
     const [config, setConfig] = useState<ProjectConfiguration | undefined>(undefined);
     const isReady = !!project && (!!config?.embeddings.text || !!config?.embeddings.image);
     const [status, setStatus] = useState<string | undefined>(undefined);
 
+    const [showSettings, setShowSettings] = useState(false);
+    // Default to all types, or use prop if provided
+    const [selectedTypes, setSelectedTypes] = useState<(keyof typeof SearchTypes)[]>(searchTypes || allTypes);
+    const [limit, setLimit] = useState<number>(100);
+    useEffect(() => {
+        if (searchTypes) setSelectedTypes(searchTypes);
+    }, [searchTypes]);
+
+    // Always derive embeddingSearchTypes and full_text from selectedTypes
+    const embeddingSearchTypes: Record<string, boolean> = {};
+    let fullTextEnabled = false;
+    let vectorSearchEnabled = false;
+    selectedTypes.forEach(type => {
+        if (type === SearchTypes.full_text) {
+            fullTextEnabled = true;
+        } else {
+            vectorSearchEnabled = true;
+        }
+        if (embeddingTypes.includes(type as SupportedEmbeddingTypes)) {
+            embeddingSearchTypes[type] = true;
+        }
+    });
+
     useEffect(() => {
         setSearchText(undefined);
-        setSearchSketch(undefined);
         setStatus(undefined);
     }, [refresh]);
 
     useEffect(() => {
-        if (!project) {
-            return;
-        }
-
+        if (!project) return;
         client.projects.retrieve(project.id).then((project) => {
             setConfig(project.configuration);
         })
@@ -49,67 +73,71 @@ export function VectorSearchWidget({ onChange, isLoading, refresh }: VectorSearc
         }
     }, [searchText]);
 
-    const generateTextEmbeddings = async () => {
-        if (!isReady || !searchText || !config?.embeddings.text) {
-            return;
-        }
-
-        setStatus('Generating text embeddings...');
-        const response = await client.environments.embeddings(config.embeddings.text?.environment, {
-            model: config.embeddings.text?.model,
-            text: searchText,
-        });
-
-        const query: VectorSearchQuery = {
-            values: response.values,
-            type: SupportedEmbeddingTypes.text
+    const fireSearch = () => {
+        if (!isReady || !searchText) return;
+        const query: ComplexSearchQuery = {
+            vector: vectorSearchEnabled ? {
+                text: searchText,
+                config: embeddingSearchTypes,
+            } : undefined,
+            full_text: fullTextEnabled ? searchText : undefined,
+            limit: limit
         };
-
-        return query;
+        onChange(query);
+        setStatus("Searching...");
     };
 
-    const generateImageEmbeddings = async () => {
-        if (!isReady || !searchText || !config?.embeddings.image) {
-            return;
+    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            fireSearch();
         }
-
-        setStatus('Generating image embeddings...');
-        const response = await client.environments.embeddings(config.embeddings.image?.environment, {
-            model: config.embeddings.image?.model,
-            image: searchSketch,
-        });
-
-        const query: VectorSearchQuery = {
-            values: response.values,
-            type: SupportedEmbeddingTypes.image
-        };
-
-        return query;
     };
 
-    const fireSearch = (type: "text" | "image" = "text") => {
-        const generateEmbedding = type === "text" ? generateTextEmbeddings : generateImageEmbeddings;
-
-        generateEmbedding().then((query) => {
-            setStatus("Embeddings generated");
-            if (!query) {
-                return;
-            }
-            onChange(query);
-            setStatus("Searching...");
-        });
-    };
-
-    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === "Enter") {
-            fireSearch("text");
+    // Modal state for search type selection
+    const handleCheckboxChange = (type: keyof typeof SearchTypes) => (checked: boolean) => {
+        if (checked) {
+            setSelectedTypes(prev => Array.from(new Set([...prev, type])));
+        } else {
+            setSelectedTypes(prev => prev.filter(t => t !== type));
         }
     };
 
     return (
         <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>
+            <Button variant="ghost" onClick={() => setShowSettings(true)} alt="Semantic search settings" className="ml-1"><Settings size={18} /></Button>
+            <Modal isOpen={showSettings} onClose={() => setShowSettings(false)}>
+                <ModalTitle>Search Types</ModalTitle>
+                <ModalBody>
+                    <div className="flex flex-col gap-2">
+                        <label className="flex items-center gap-2">
+                            <Checkbox
+                                checked={selectedTypes.includes(SearchTypes.full_text)}
+                                onCheckedChange={handleCheckboxChange(SearchTypes.full_text)}
+                            />
+                            <span>Full Text</span>
+                        </label>
+                        <div className="font-semibold mt-2 mb-1">Embeddings</div>
+                        {embeddingTypes.map(type => (
+                            <label key={type} className="flex items-center gap-2">
+                                <Checkbox
+                                    checked={selectedTypes.includes(type)}
+                                    onCheckedChange={handleCheckboxChange(type)}
+                                />
+                                <span>{type.charAt(0).toUpperCase() + type.slice(1)}</span>
+                            </label>
+                        ))}
+                        <div className="mt-3">
+                            <span className="mr-2">Limit</span>
+                            <NumberInput type="number" min={1} value={limit} onChange={v => setLimit(Number(v) || 1)} style={{ width: 80 }} />
+                        </div>
+                    </div>
+                </ModalBody>
+                <ModalFooter>
+                    <Button variant="outline" onClick={() => setShowSettings(false)}>Close</Button>
+                </ModalFooter>
+            </Modal>
+            <Button variant="secondary" isLoading={isLoading} onClick={fireSearch} isDisabled={!isReady} alt="Semantic search">Search</Button>
         </div>
     );
 }

package/src/features/store/objects/layout/documentLayout.tsx

@@ -28,7 +28,7 @@ export function DocumentTableView({ objects, selection, isLoading, onRowClick, c
                     ))}
                 </tr>
             </thead>
-            <TBody isLoading={isLoading} columns={columns.length}>
+            <TBody isLoading={isLoading} columns={columns.length + 1}>
                 {
                     objects?.map((obj: ContentObjectItem) => {
                         return (