@vertesia/ui 0.72.0 → 0.74.0

package/src/features/facets/RunsFacetsNav.tsx

@@ -13,6 +13,7 @@ interface RunsFacetsNavProps {
         environments?: any[];
         models?: any[];
         statuses?: any[];
+        tags?: any[];
         finish_reason?: any[];
         created_by?: any[];
     };
@@ -35,16 +36,25 @@ export function useRunsFilterGroups(facets: RunsFacetsNavProps['facets']): Filte
     if (facets.environments) {
         const environmentFilterGroup = VEnvironmentFacet({
             buckets: facets.environments || [],
-            name: 'Environments'
+            name: 'environments',
         });
         customFilterGroups.push(environmentFilterGroup);
     }
 
+    // Add tags filter as stringList type (allows custom input)
+    const tagsFilterGroup = {
+        name: 'tags',
+        placeholder: 'Tags',
+        type: 'stringList' as const,
+        multiple: true
+    };
+    customFilterGroups.push(tagsFilterGroup);
+
     if (facets.models) {
         const modelFilterGroup = VStringFacet({
             search: null as any, // This will be provided by the search context
             buckets: facets.models || [],
-            name: 'Model'
+            name: 'model'
         });
         customFilterGroups.push(modelFilterGroup);
     }
@@ -53,7 +63,7 @@ export function useRunsFilterGroups(facets: RunsFacetsNavProps['facets']): Filte
         const statusFilterGroup = VStringFacet({
             search: null as any, // This will be provided by the search context
             buckets: facets.statuses || [],
-            name: 'Status'
+            name: 'status'
         });
         customFilterGroups.push(statusFilterGroup);
     }
@@ -105,11 +115,13 @@ export function useRunsFilterGroups(facets: RunsFacetsNavProps['facets']): Filte
 export function useRunsFilterHandler(search: SearchInterface) {
     return (newFilters: BaseFilter[]) => {
         if (newFilters.length === 0) {
-            search.clearFilters();
+            // Clear filters without applying defaults - user wants to remove all filters
+            search.clearFilters(true, false);
             return;
         }
 
-        search.clearFilters(false);
+        // Clear all filters first without defaults, then apply new ones
+        search.clearFilters(false, false);
 
         newFilters.forEach(filter => {
             if (filter.value && filter.value.length > 0) {

package/src/features/facets/VFacetsNav.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 export interface SearchInterface {
     getFilterValue(name: string): any;
     setFilterValue(name: string, value: any): void;
-    clearFilters(autoSearch?: boolean): void;
+    clearFilters(autoSearch?: boolean, applyDefaults?: boolean): void;
     search(): Promise<boolean | undefined>;
     readonly isRunning: boolean;
     query: Record<string, any>;

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

@@ -1,4 +1,4 @@
-import { ContentObject } from "@vertesia/common";
+import { ContentObject, DocumentMetadata } from "@vertesia/common";
 import { useUserSession } from "@vertesia/ui/session";
 import { Popover } from "@vertesia/ui/widgets";
 import { CloudDownload } from "lucide-react";
@@ -12,18 +12,51 @@ export function DownloadPopover({ object }: DownloadPopoverProps) {
     const onDownload = (name: string) => {
         getResourceUrl(client, object.id, name).then(url => window.open(url, '_blank'));
     }
+    
+    const getProcessorType = (): string => {
+        if (object.metadata?.type === "document") {
+            const docMetadata = object.metadata as DocumentMetadata;
+            return docMetadata.content_processor?.type || "xml";
+        }
+        return "xml"; // default
+    };
+    
+    const processorType = getProcessorType();
+    
+    const renderDownloadOptions = () => {
+        if (processorType === "markdown") {
+            return (
+                <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("document.md")}>
+                    document.md
+                </button>
+            );
+        }
+        
+        // Default XML processor options
+        return (
+            <>
+                <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("annotated.pdf")}>
+                    annotated.pdf
+                </button>
+                <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("document.xml")}>
+                    document.xml
+                </button>
+                <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("analyzed-pages.json")}>
+                    analyzed-pages.json
+                </button>
+            </>
+        );
+    };
+    
     return (
         <div className="absolute bottom-[58px] right-[20px] w-[36px] h-[36px] cursor-pointer text-indigo-400 border-indigo-400 hover:border-indigo-500 hover:text-indigo-500 border-2 rounded-full shadow-xs flex items-center justify-center">
             <Popover strategy='absolute' placement='top-end' zIndex={100} offset={20}>
                 <Popover.Trigger click>
                     <CloudDownload className='size-6' />
-
                 </Popover.Trigger>
                 <Popover.Content>
                     <div className="rounded-md shadow-md border border-gray-100 bg-white dark:bg-slate-50 dark:border-slate-100 min-w-[200px] flex flex-col divide-y">
-                        <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("annotated.pdf")}>annotated.pdf</button>
-                        <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("document.xml")}>document.xml</button>
-                        <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("analyzed-pages.json")}>analyzed-pages.json</button>
+                        {renderDownloadOptions()}
                     </div>
                 </Popover.Content>
             </Popover>

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

@@ -1,4 +1,4 @@
-import { ContentObject } from "@vertesia/common";
+import { ContentObject, DocumentMetadata } from "@vertesia/common";
 import { ErrorBox, useFetch } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { X } from "lucide-react";
@@ -39,8 +39,27 @@ interface _MagicPdfViewProps {
     onClose?: () => void;
 }
 function MagicPdfViewImpl({ object, onClose }: _MagicPdfViewProps) {
-    const [viewType, setViewType] = useState<ViewType>("xml");
+    const getInitialViewType = (): ViewType => {
+        if (object.metadata?.type === "document") {
+            const docMetadata = object.metadata as DocumentMetadata;
+            const processorType = docMetadata.content_processor?.type;
+            if (processorType === "markdown") return "markdown";
+            if (processorType === "xml") return "xml";
+        }
+        return "xml"; // default
+    };
+    
+    const getProcessorType = (): string => {
+        if (object.metadata?.type === "document") {
+            const docMetadata = object.metadata as DocumentMetadata;
+            return docMetadata.content_processor?.type || "xml";
+        }
+        return "xml"; // default
+    };
+    
+    const [viewType, setViewType] = useState<ViewType>(getInitialViewType());
     const [pageNumber, setPageNumber] = useState(1);
+    const processorType = getProcessorType();
     const handler = useRef<HTMLDivElement>(null);
     const left = useRef<HTMLDivElement>(null);
     const right = useRef<HTMLDivElement>(null);
@@ -51,14 +70,14 @@ function MagicPdfViewImpl({ object, onClose }: _MagicPdfViewProps) {
     return (
         <>
             <div ref={left} className={`absolute top-0 left-0 bottom-0 w-[50%] bg-gray-100 dark:bg-slate-800 flex items-stretch justify-stretch py-2`}>
-                <PageSlider className="flex-1" currentPage={pageNumber} onChange={setPageNumber} />
+                <PageSlider className="flex-1" currentPage={pageNumber} onChange={setPageNumber} object={object} />
                 <div ref={handler} className='w-[2px] p-[2px] m-0 bg-slate-300 cursor-ew-resize'></div>
             </div>
             <div ref={right} className={`absolute top-0 left-[50%] right-0 bottom-0 flex items-stretch justify-stretch overflow-auto p-2`}>
                 <TextPageView pageNumber={pageNumber} viewType={viewType} />
             </div>
             <DownloadPopover object={object} />
-            <ContentSwitcher type={viewType} onSwitch={setViewType} />
+            {processorType === "xml" && <ContentSwitcher type={viewType} onSwitch={setViewType} />}
             {!!onClose &&
                 <div className="absolute top-6 right-7 w-9 h-9 cursor-pointer text-red-400 border-red-400 hover:border-red-500 hover:text-red-500 border-2 rounded-full shadow-xs flex items-center justify-center"
                     onClick={onClose}>
@@ -80,6 +99,8 @@ function ContentSwitcher({ type = "xml", onSwitch }: ContentSwitcherProps) {
         if (type === "xml") {
             onSwitch("json");
         } else if (type === "json") {
+            onSwitch("markdown");
+        } else if (type === "markdown") {
             onSwitch("xml");
         }
     }
@@ -87,7 +108,8 @@ function ContentSwitcher({ type = "xml", onSwitch }: ContentSwitcherProps) {
         <div className="absolute bottom-[16px] right-[20px] w-[36px] h-[36px] cursor-pointer text-indigo-400 border-indigo-400 hover:border-indigo-500 hover:text-indigo-500 border-2 rounded-full shadow-xs flex items-center justify-center"
             onClick={_onSwitch}>
             {type === "xml" && JSON}
-            {type === "json" && XML}
+            {type === "json" && MARKDOWN}
+            {type === "markdown" && XML}
         </div>
     )
 
@@ -100,3 +122,7 @@ const JSON = <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://w
 const XML = <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
     <path d="M4.708 5.578L2.061 8.224l2.647 2.646-.708.708-3-3V7.87l3-3 .708.708zm7-.708L11 5.578l2.647 2.646L11 10.87l.708.708 3-3V7.87l-3-3zM4.908 13l.894.448 5-10L9.908 3l-5 10z" />
 </svg>
+
+const MARKDOWN = <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7.5L5.5 9l-1 1.5H3V5h1.5l1 2 2-2H9v6zm2.99.5L9.5 8H11V5h1v3h1.5l-2.51 3.5z"/>
+</svg>

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,5 +1,7 @@
 import { JSONCode, Theme, XMLViewer } from '@vertesia/ui/widgets';
 import { useEffect, useLayoutEffect, useState } from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { usePdfPagesInfo } from "./PdfPageProvider";
 import { ViewType } from "./types";
 
@@ -19,7 +21,14 @@ interface TextPageViewProps {
     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 +71,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 ? <Markdown remarkPlugins={[remarkGfm]}>{content}</Markdown> : <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/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 (

package/src/shell/apps/AppInstallationProvider.tsx

@@ -0,0 +1,22 @@
+import { AppInstallationWithManifest } from "@vertesia/common";
+import { createContext, ReactNode, useContext } from "react";
+
+
+export const AppInstallationContext = createContext<AppInstallationWithManifest | null>(null);
+
+export function AppInstallationProvider({ installation, children }: { installation: AppInstallationWithManifest, children: ReactNode }) {
+    return (
+        <AppInstallationContext.Provider value={installation}>
+            {children}
+        </AppInstallationContext.Provider>
+    )
+}
+
+/**
+ * Get the current app installation obejct when called in an app context otheriwse returns null
+ */
+export function useAppInstallation() {
+    return useContext(AppInstallationContext);
+}
+
+

package/src/shell/apps/AppProjectSelector.tsx

@@ -0,0 +1,47 @@
+import { ProjectRef, RequireAtLeastOne } from "@vertesia/common";
+import { SelectBox, useFetch } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { useState } from "react";
+
+interface AppProjectSelectorProps {
+    app: RequireAtLeastOne<{ id?: string, name?: string }, 'id' | 'name'>;
+    onChange: (value: ProjectRef) => void;
+    placeholder?: string;
+}
+export function AppProjectSelector({ app, onChange, placeholder }: AppProjectSelectorProps) {
+    const { client, project } = useUserSession();
+    const { data: projects, error } = useFetch(() => {
+        return client.apps.getAppInstallationProjects(app);
+    }, [app.id, app.name])
+
+    if (error) {
+        return <span className='text-red-600'>Error: failed to fetch projects: {error.message}</span>
+    }
+
+    return <SelectProject placeholder={placeholder} initialValue={project?.id} projects={projects || []} onChange={onChange} />
+}
+
+interface SelectProjectProps {
+    initialValue?: string
+    projects: ProjectRef[]
+    onChange: (value: ProjectRef) => void
+    placeholder?: string;
+}
+function SelectProject({ initialValue, projects, onChange, placeholder = "Select Project" }: Readonly<SelectProjectProps>) {
+    const [value, setValue] = useState<ProjectRef | undefined>(() => {
+        return initialValue ? projects.find(p => p.id === initialValue) : undefined
+    });
+    const _onChange = (value: ProjectRef) => {
+        setValue(value)
+        onChange(value)
+    }
+    return (
+        <SelectBox
+            by="id"
+            value={value}
+            options={projects}
+            optionLabel={(option) => option.name}
+            placeholder={placeholder}
+            onChange={_onChange} />
+    )
+}