@vertesia/ui 0.78.0 → 0.79.1

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

@@ -4,7 +4,6 @@ import { retrieveRendition } from '../../../utils'
 
 import { ContentObjectItem } from '@vertesia/common'
 import { Button, Card, CardContent, Separator, VTooltip } from "@vertesia/ui/core"
-import { NavLink } from "@vertesia/ui/router"
 import { useUserSession } from "@vertesia/ui/session"
 import { DocumentSelection } from '../DocumentSelectionProvider'
 import { Eye } from 'lucide-react'
@@ -14,8 +13,40 @@ interface DocumentIconProps {
     onSelectionChange: ((object: ContentObjectItem, ev: ChangeEvent<HTMLInputElement>) => void);
     selection: DocumentSelection;
     onRowClick?: (object: ContentObjectItem) => void;
+    previewObject?: (objectId: string) => void;
+    selectedObject?: ContentObjectItem | null;
 }
-export function DocumentIcon({ selection, document, onSelectionChange, onRowClick }: Readonly<DocumentIconProps>) {
+
+export function DocumentIconSkeleton({ isLoading = false, counts = 6 }: { isLoading?: boolean, counts?: number }) {
+    if (!isLoading) {
+        return null
+    }
+    return (
+        <div className='flex flex-wrap gap-2 justify-between'>
+            {Array(counts).fill(0).map((_, index) =>
+                <div key={index} className="w-[15vw] animate-pulse">
+                    <Card className="relative flex flex-col border h-fit">
+                        <div className="h-48 bg-muted rounded-t-xl flex items-center justify-center text-muted">
+                            &nbsp;
+                        </div>
+                        <Separator className='bg-muted h-[2px]' />
+                        <CardContent className="p-2 flex flex-col">
+                            <div className="flex flex-col overflow-hidden">
+                                <div className="h-5 bg-muted rounded w-3/4 mb-2"></div>
+                                <div className="h-4 bg-muted rounded w-1/2"></div>
+                            </div>
+                            <div className="text-xs text-muted w-full flex justify-end mt-2">
+                                <div className="h-3 bg-muted rounded w-1/4"></div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export function DocumentIcon({ selection, document, onSelectionChange, onRowClick, previewObject, selectedObject }: Readonly<DocumentIconProps>) {
     const { client } = useUserSession()
 
     const [renditionUrl, setRenditionUrl] = useState<string | undefined>(undefined)
@@ -37,7 +68,7 @@ export function DocumentIcon({ selection, document, onSelectionChange, onRowClic
     }, [document])
 
     return (
-        <Card className="relative flex flex-col border h-fit" onClick={() => (onRowClick && onRowClick(document))}>
+        <Card className={`relative flex flex-col border h-fit ${selectedObject?.id === document.id ? 'border-attention border-4' : ''}`} onClick={() => (onRowClick && onRowClick(document))}>
             {
                 selection && (
                     <div
@@ -55,16 +86,14 @@ export function DocumentIcon({ selection, document, onSelectionChange, onRowClic
             <div
                 className="absolute top-1 right-1 z-10 flex flex-col items-center"
             >
-                <NavLink
-                    topLevelNav
-                    href={`/store/objects/${document.id}`}
+                <Button
+                    variant="ghost" size="sm" title="Preivew Object" onClick={(e) => {
+                        e.stopPropagation();
+                        previewObject?.(document.id);
+                    }}
                 >
-                    <Button
-                        variant="ghost" size="sm" title="Open Object"
-                    >
-                        <Eye className={`size-4 ${renditionStatus === 'ready' ? 'text-muted' : 'text-white'}`} />
-                    </Button>
-                </NavLink>
+                    <Eye className={`size-4 ${renditionStatus === 'ready' ? 'text-muted' : 'text-white'}`} />
+                </Button>
             </div>
 
             {
@@ -95,7 +124,7 @@ export function DocumentIcon({ selection, document, onSelectionChange, onRowClic
                     }
                 </div>
                 {document.score && (
-                    <div className="text-xs text-muted w-full flex justify-end">    
+                    <div className="text-xs text-muted w-full flex justify-end">
                         Score: {(document.score).toFixed(4) ?? "-"}
                     </div>
                 )}

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
     Button,
     Modal,
@@ -65,10 +65,20 @@ export function SaveVersionConfirmModal({ isOpen, onClose, onConfirm, isLoading,
         }
     ];
 
-    const [selectedOption, setSelectedOption] = useState<SaveOptionType | undefined>(saveOptions[0]);
+    // Default to "create new version" when replacing a file, "update current version" when editing properties
+    const defaultOption = uploadedFileName ? saveOptions[1] : saveOptions[0];
+    const [selectedOption, setSelectedOption] = useState<SaveOptionType | undefined>(defaultOption);
     const [versionLabel, setVersionLabel] = useState('');
     const optionAdapter = new SaveOptionAdapter();
 
+    // Reset to default when modal opens or uploadedFileName changes
+    useEffect(() => {
+        if (isOpen) {
+            setSelectedOption(defaultOption);
+            setVersionLabel('');
+        }
+    }, [isOpen, uploadedFileName]);
+
     const createVersion = selectedOption?.id === "new-version";
 
     const handleOptionChange = (option: SaveOptionType) => {

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

@@ -37,9 +37,11 @@ export class DocumentTableColumn {
     renderer: (value: any, index: number) => React.ReactNode = defaultRenderer;
     path: string[];
     fallbackPath?: string[];
-    constructor(public layout: ExtendedColumnLayout) {
+    previewObject?: (objectId: string) => void;
+    constructor(public layout: ExtendedColumnLayout, previewObject?: (objectId: string) => void) {
         this.path = splitPath(layout.field || '');
         this.fallbackPath = layout.fallback ? splitPath(layout.fallback) : undefined;
+        this.previewObject = previewObject;
 
         // If there's a custom render function, use it
         if (layout.render) {
@@ -78,6 +80,19 @@ export class DocumentTableColumn {
         if (this.layout.render) {
             return <td key={index} className="whitespace-nowrap px-3 py-4 text-sm">{this.layout.render(object)}</td>;
         }
+        
+        const type = this.layout.type || 'string';
+        const baseType = type.indexOf('?') > 0 ? type.substring(0, type.indexOf('?')) : type;
+        
+        if (baseType === 'objectId' && this.previewObject) {
+            const i = type.indexOf('?');
+            const params = i > 0 ? new URLSearchParams(type.substring(i + 1)) : undefined;
+            const objectIdRenderer = renderers.objectId(params, (_id: string) => {
+                this.previewObject!(object.id);
+            });
+            return objectIdRenderer(object, index);
+        }
+        
         // Otherwise use the type-based renderer with the resolved value
         return this.renderer(this.resolveValue(object), index);
     }

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

@@ -1,8 +1,7 @@
-import { Table, TBody, Spinner } from "@vertesia/ui/core";
+import { Table, TBody } from "@vertesia/ui/core";
 import { ContentObjectItem, ColumnLayout } from "@vertesia/common";
-import clsx from "clsx";
 import { ChangeEvent } from "react";
-import { DocumentIcon } from "../components/DocumentIcon";
+import { DocumentIcon, DocumentIconSkeleton } from "../components/DocumentIcon";
 import { DocumentSelection } from "../DocumentSelectionProvider";
 import { DocumentTableColumn } from "./DocumentTableColumn";
 
@@ -11,13 +10,15 @@ interface ViewProps {
     isLoading: boolean;
     layout?: ColumnLayout[];
     onRowClick?: (object: ContentObjectItem) => void;
+    previewObject?: (objectId: string) => void;
+    selectedObject?: ContentObjectItem | null;
     onSelectionChange: ((object: ContentObjectItem, ev: ChangeEvent<HTMLInputElement>) => void);
     selection: DocumentSelection;
     toggleAll?: (ev: ChangeEvent<HTMLInputElement>) => void;
     columns: DocumentTableColumn[];
 }
 
-export function DocumentTableView({ objects, selection, isLoading, onRowClick, columns, toggleAll, onSelectionChange }: ViewProps) {
+export function DocumentTableView({ objects, selection, isLoading, columns, onRowClick, selectedObject, toggleAll, onSelectionChange }: ViewProps) {
     return (
         <Table className="w-full border-t">
             <thead>
@@ -32,12 +33,12 @@ export function DocumentTableView({ objects, selection, isLoading, onRowClick, c
                 {
                     objects?.map((obj: ContentObjectItem) => {
                         return (
-                            <tr key={obj.id} className='cursor-pointer hover:bg-muted' onClick={() => {
+                            <tr key={obj.id} className={`cursor-pointer hover:bg-muted group ${selectedObject?.id === obj.id ? 'bg-muted' : ''}`} onClick={() => {
                                 onRowClick && onRowClick(obj)
                             }}>
                                 {selection &&
                                     <td onClick={ev => ev.stopPropagation()}>
-                                        <input checked={selection.isSelected(obj.id)} type="checkbox"
+                                        <input checked={selection.isSelected(obj.id)} type="checkbox" className={`${!selection.isSelected(obj.id) ? 'hidden group-hover:block' : ''}`}
                                             onChange={(ev: ChangeEvent<HTMLInputElement>) => onSelectionChange(obj, ev)} />
                                     </td>
                                 }
@@ -52,16 +53,13 @@ export function DocumentTableView({ objects, selection, isLoading, onRowClick, c
     )
 }
 
-export function DocumentGridView({ objects, selection, isLoading, onSelectionChange, onRowClick }: ViewProps) {
-
+export function DocumentGridView({ objects, selection, isLoading, onSelectionChange, onRowClick, previewObject, selectedObject }: ViewProps) {
     return (
         <>
-            <div className={clsx("bg-white opacity-40 absolute inset-0 z-50 flex justify-center items-center", isLoading ? "block" : "hidden")}>
-                <Spinner size='xl' />
-            </div>
+            <DocumentIconSkeleton isLoading={isLoading} />
             <div className="w-full gap-2 grid lg:grid-cols-6">
                 {objects.map((document) => (
-                    <DocumentIcon key={document.id} document={document} selection={selection} onSelectionChange={onSelectionChange} onRowClick={onRowClick} />
+                    <DocumentIcon key={document.id} document={document} selection={selection} onSelectionChange={onSelectionChange} onRowClick={onRowClick} previewObject={previewObject} selectedObject={selectedObject} />
                 ))}
             </div>
         </>

package/src/features/store/objects/layout/knowledge.md

@@ -30,8 +30,8 @@ Complete list of supported types:
 1. **string** - Text display
 2. **number** - Numeric display
 3. **date** - Date/time display
-4. **objectLink** - Clickable object reference
-5. **typeLink** - Type reference display
+4. **objectId** - object id with preview button
+5. **objectName** - object name display
 
 ### Column Types and Renderers
 Built-in renderers with parameters:
@@ -48,14 +48,14 @@ Built-in renderers with parameters:
    - `currency`: Format as currency (e.g., USD)
    - `decimals`: Number of decimal places (default: 2)
 
-3. **objectLink**
-   - `title`: Property to use as title (default: "title")
-   - `underline`: Link underline style (default: "hover")
-
-4. **date**
+3. **date**
    - `localized`: Use localized format (e.g., "LLL")
    - `relative`: Use relative time ("fromNow"/"toNow")
 
+4. **objectId**
+   - `slice`: Take substring from index
+
+
 ### Parameter Syntax
 Parameters are added using URL query string syntax:
 ```typescript
@@ -92,12 +92,12 @@ Parameters are added using URL query string syntax:
     {
       "name": "ID",
       "field": "id",
-      "type": "string?slice=-7"
+      "type": "objectId?slice=-7"
     },
     {
       "name": "Name",
       "field": ".",
-      "type": "objectLink?title=name&underline=always"
+      "type": "objectName"
     },
     {
       "name": "Price",
@@ -126,7 +126,7 @@ Parameters are added using URL query string syntax:
     {
       "name": "Document",
       "field": ".",
-      "type": "objectLink"
+      "type": "objectName"
     },
     {
       "name": "Score",

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

@@ -1,13 +1,14 @@
-import { NavLink } from "@vertesia/ui/router";
 import dayjs from "dayjs";
 import LocalizedFormat from "dayjs/plugin/localizedFormat";
 import RelativeTime from "dayjs/plugin/relativeTime";
 import { shortId } from "../../../utils";
+import { Eye } from "lucide-react";
+import { Button } from "@vertesia/ui/core";
 dayjs.extend(RelativeTime);
 dayjs.extend(LocalizedFormat);
 
-const renderers: Record<string, (params?: URLSearchParams) => (value: any, index: number) => React.ReactNode> = {
-    string(params?: URLSearchParams) {
+const renderers: Record<string, (params?: URLSearchParams, onClick?: (id: string) => void) => (value: any, index: number) => React.ReactNode> = {
+    string(params?: URLSearchParams, _onClick?: (id: string) => void) {
         let transforms: ((value: string) => string)[] = [];
         if (params) {
             const slice = params.get("slice");
@@ -48,7 +49,7 @@ const renderers: Record<string, (params?: URLSearchParams) => (value: any, index
         };
     },
 
-    fileSize(_params?: URLSearchParams) {
+    fileSize(_params?: URLSearchParams, _onClick?: (id: string) => void) {
         return (value: any, index: number) => {
             let fileSize = "";
             if (value) {
@@ -69,7 +70,7 @@ const renderers: Record<string, (params?: URLSearchParams) => (value: any, index
         };
     },
 
-    number(params?: URLSearchParams) {
+    number(params?: URLSearchParams, _onClick?: (id: string) => void) {
         let currency: string | undefined;
         let decimals: string | undefined;
         if (params) {
@@ -88,34 +89,54 @@ const renderers: Record<string, (params?: URLSearchParams) => (value: any, index
             return <td key={index}>{v}</td>;
         };
     },
-    // value must be the object itself
-    objectLink(params?: URLSearchParams) {
+    objectId(params?: URLSearchParams, onClick?: (id: string) => void) {
+        let transforms: ((value: string) => string)[] = [];
+        let hasSlice = false;
+        if (params) {
+            const slice = params.get("slice");
+            if (slice) {
+                hasSlice = true;
+                transforms.push((value) => value.slice(parseInt(slice)));
+            }
+        }
+        return (value: any, index: number) => {
+            const displayValue = transforms.reduce((v, t) => t(v), value.id);
+            return (
+                <td key={index} className="flex justify-between items-center gap-2">
+                    {hasSlice ? '~' : ''}{displayValue}
+                    <Button
+                        variant="ghost"
+                        alt="Preview Object"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onClick?.(value.id);
+                        }}
+                    >
+                        <Eye className="size-4" />
+                    </Button>
+                </td>
+            );
+        };
+    },
+    objectName(params?: URLSearchParams, _onClick?: (id: string) => void) {
         let title = "title";
-        //let underline = "hover";
         if (params) {
             title = params.get("title") || "title";
-            //underline = params.get("underline") || "hover";
         }
         return (value: any, index: number) => {
             return (
                 <td key={index}>
-                    <NavLink
-                        topLevelNav
-                        className="underline text-indigo-800 dark:text-indigo-300"
-                        href={`/store/objects/${value.id}`}
-                    >
-                        {value.properties?.[title] || value.name || shortId(value.id)}
-                    </NavLink>
+                    {value.properties?.[title] || value.name || shortId(value.id)}
                 </td>
             );
         };
     },
-    typeLink(_params?: URLSearchParams) {
+    typeLink(_params?: URLSearchParams, _onClick?: (id: string) => void) {
         return (value: any, index: number) => {
             return <td key={index}>{value?.name || "n/a"}</td>;
         };
     },
-    date(params?: URLSearchParams) {
+    date(params?: URLSearchParams, _onClick?: (id: string) => void) {
         let method = "format";
         let arg: string | undefined = "LLL";
         if (params) {

package/src/features/store/objects/search/DocumentSearchContext.ts

@@ -55,9 +55,13 @@ export class DocumentSearch implements SearchInterface {
         this.search();
     }
 
+    setDefaultKeys(keys: any[]) {
+        void keys;
+    }
+
     clearFilters(autoSearch: boolean = true) {
         // Preserve search-related fields when clearing filters
-        const { parent, full_text, vector, weights, score_aggregation, dynamic_scaling, limit } = this.query;
+        const { parent, full_text, vector, weights, score_aggregation, dynamic_scaling, limit, all_revisions } = this.query;
         this.query = {
             parent,
             ...(full_text !== undefined && { full_text }),
@@ -65,6 +69,7 @@ export class DocumentSearch implements SearchInterface {
             ...(weights !== undefined && { weights }),
             ...(score_aggregation !== undefined && { score_aggregation }),
             ...(dynamic_scaling !== undefined && { dynamic_scaling }),
+            ...(all_revisions !== undefined && { all_revisions }),
             ...(limit !== undefined && { limit })
         };
 

package/src/features/store/objects/search/DocumentSearchProvider.tsx

@@ -42,7 +42,7 @@ export function DocumentSearchProvider({ children, limit, parent, typeId, facets
         search.query.parent = parent;
         search.query.name = name;
         return search;
-    }, [typeId, limit]);
+    }, [typeId, limit, collectionId]);
 
     return (
         <SearchContext.Provider value={search}>{children}</SearchContext.Provider>

package/src/features/store/objects/selection/ObjectsActionContext.tsx

@@ -6,7 +6,7 @@ import { useUserSession } from '@vertesia/ui/session';
 import { useDocumentSearch, useDocumentSelection } from '../../../store';
 import { AddToCollectionAction } from './actions/AddToCollectionAction';
 import { ChangeTypeAction } from './actions/ChangeTypeAction';
-import { DeleteObjectsAction } from './actions/DeleteObjectsAction';
+import { DeleteObjectsAction, DeleteObjectsFromCollectionsAction } from './actions/DeleteObjectsAction';
 import { ExportPropertiesAction } from './actions/ExportPropertiesAction';
 import { RemoveFromCollectionAction } from './actions/RemoveFromCollectionAction';
 import { StartWorkflowAction, StartWorkflowComponent } from './actions/StartWorkflowComponent';
@@ -22,6 +22,7 @@ export class ObjectsActionContext {
         AddToCollectionAction,
         DeleteObjectsAction,
         RemoveFromCollectionAction,
+        DeleteObjectsFromCollectionsAction
     ];
     wfRules: ObjectsActionSpec[] = [];
     callbacks: Record<string, ObjectsActionCallback> = {};
@@ -38,7 +39,7 @@ export class ObjectsActionContext {
             );
         } else {
             return this.allActions.filter(action =>
-                action.id !== 'removeFromCollection'
+                action.id !== 'removeFromCollection' && action.id !== 'deleteFromCollections'
             );
         }
     }

package/src/features/store/objects/selection/SelectionActions.tsx

@@ -62,6 +62,8 @@ export function UploadObjectsButton({ collectionId }: { collectionId?: string })
     const selectFile = () => {
         const fileInput = document.createElement("input");
         fileInput.type = "file";
+        fileInput.multiple = true;
+        fileInput.accept = "*";
         fileInput?.click();
         fileInput.onchange = (event) => {
             const files = (event.target as HTMLInputElement).files;

package/src/features/store/objects/selection/actions/AddToCollectionAction.tsx

@@ -41,14 +41,16 @@ interface SelectCollectionModalProps {
 }
 function SelectCollectionModal({ isOpen, onClose, objectIds }: SelectCollectionModalProps) {
     return (
-        <VModal isOpen={isOpen} onClose={onClose}>
-            <VModalTitle className="flex flex-col">
+        <VModal isOpen={isOpen} onClose={onClose} className="max-w-lg w-full min-w-0 overflow-hidden">
+            <VModalTitle className="flex flex-col min-w-0 overflow-hidden">
                 Add to a Collection
             </VModalTitle>
-            <DialogDescription>
+            <DialogDescription className="min-w-0 overflow-hidden">
                 Add the selected objects to an existing collection or create a new one.
             </DialogDescription>
-            <AddToCollectionForm onClose={onClose} objectIds={objectIds} />
+            <div className="min-w-0 max-w-full overflow-hidden">
+                <AddToCollectionForm onClose={onClose} objectIds={objectIds} />
+            </div>
         </VModal>
     )
 }
@@ -83,8 +85,14 @@ function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
         });
     }
 
-    const onCollectionChange = (collectionId: string | undefined) => {
-        setSelectedCollectionId(collectionId);
+    const onCollectionChange = (collectionId: string | string[] | undefined, _collection?: any) => {
+        if (typeof collectionId === "string" || typeof collectionId === "undefined") {
+            setSelectedCollectionId(collectionId);
+        } else if (Array.isArray(collectionId) && collectionId.length > 0) {
+            setSelectedCollectionId(collectionId[0]);
+        } else {
+            setSelectedCollectionId(undefined);
+        }
     };
 
     const tabs = [
@@ -92,13 +100,18 @@ function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
             name: 'select',
             label: 'Select Collection',
             content: (
-                <div className="p-4">
+                <div className="p-4 min-w-0 max-w-full overflow-hidden">
                     <Heading level={5}>Choose from existing collections</Heading>
-                    <VModalBody>
-                        <SelectCollection onChange={onCollectionChange} value={selectedCollectionId} className="mb-4" />
+                    <VModalBody className="min-w-0 max-w-full overflow-hidden">
+                        <div className="mb-4 min-w-0 max-w-full overflow-hidden">
+                            <SelectCollection onChange={onCollectionChange} value={selectedCollectionId} />
+                        </div>
                     </VModalBody>
                     <VModalFooter>
-                        <Button isDisabled={!selectedCollectionId} onClick={() => selectedCollectionId && onAddToCollection({ collectionId: selectedCollectionId })}>
+                        <Button
+                            isDisabled={!selectedCollectionId}
+                            onClick={() => selectedCollectionId && onAddToCollection({ collectionId: selectedCollectionId })}
+                        >
                             Add to Collection
                         </Button>
                     </VModalFooter>

package/src/features/store/objects/selection/actions/DeleteObjectsAction.tsx

@@ -28,12 +28,21 @@ export function DeleteObjectsActionComponent({ action, objectIds, children }: Ac
             return Promise.resolve(false);
         }
 
+        function limitFilesName(names: string, maxLength: number) {
+            if (names.length <= maxLength) return names;
+            const extIndex = names.lastIndexOf('.');
+            const ext = extIndex !== -1 ? names.substring(extIndex) : '';
+            const baseName = extIndex !== -1 ? names.substring(0, extIndex) : names;
+            const limitedBaseName = baseName.substring(0, maxLength - ext.length - 3);
+            return `${limitedBaseName}...${ext}`;
+        }
+
         return Promise.all(objectIds.map(id => client.store.objects.delete(id))).then((res) => {
             const plural = res.length > 1 ? 's' : '';
             toast({
                 status: 'success',
                 title: `${res.length} object${plural} deleted`,
-                description: `Objects ${res.map(d => d.id).join(", ")} have been deleted`,
+                description: `Objects ${(limitFilesName(res.map(d => d.id).join(", "), 100))} have been deleted`,
                 duration: 2000
             });
 
@@ -71,7 +80,18 @@ export const DeleteObjectsAction: ObjectsActionSpec = {
     name: 'Delete',
     description: 'Delete the selected objects',
     confirm: true,
-    confirmationText: 'Are you sure you want to delete the selected objects?',
+    confirmationText: 'Are you sure you want to delete all the selected objects? This action cannot be undone.',
+    component: DeleteObjectsActionComponent,
+    destructive: true
+}
+
+
+export const DeleteObjectsFromCollectionsAction: ObjectsActionSpec = {
+    id: 'deleteFromCollections',
+    name: 'Delete Objects',
+    description: 'Delete the selected objects',
+    confirm: true,
+    confirmationText: 'Are you sure you want to delete the selected objects?\nThis is not removable from collections.',
     component: DeleteObjectsActionComponent,
     destructive: true
 }

package/src/features/store/objects/upload/DocumentUploadModal.tsx

@@ -114,12 +114,11 @@ export function DocumentUploadModal({
         if (!collectionData && !selectedFolder) return null;
 
         return (
-            <div className="mb-4 p-3 bg-primary rounded-md border border-primary">
-                <div className="flex items-center text-primary">
-                    <FolderIcon className="size-5 mr-2" />
+            <MessageBox className="mb-4" status="default" icon={<FolderIcon className="size-5" />}>
+                <div className="flex items-center">
                     <span className="font-medium">Upload Location:</span>
                 </div>
-                <div className="ml-7 text-sm text-primary mt-1">
+                <div className="text-sm mt-1">
                     {collectionData && (
                         <div className="flex items-center">
                             <span className="mr-1">Collection:</span>
@@ -133,7 +132,7 @@ export function DocumentUploadModal({
                         </div>
                     )}
                 </div>
-            </div>
+            </MessageBox>
         );
     };
 
@@ -167,7 +166,7 @@ export function DocumentUploadModal({
             setResult(null);
             setTitle(title);
             setDescription("");
-            
+
             // Set initial files if provided
             if (initialFiles && initialFiles.length > 0) {
                 setFiles(initialFiles);
@@ -315,6 +314,7 @@ export function DocumentUploadModal({
 
         // Process files in batches of 50
         const BATCH_SIZE = 50;
+        const PROGRESS_UPDATE_INTERVAL = 5; // Update progress every 5 files
 
         // Helper function to process a batch of files
         const processBatch = async (files: FileWithMetadata[], action: "create" | "update") => {
@@ -338,7 +338,8 @@ export function DocumentUploadModal({
                     });
                 }
 
-                // Process the batch
+                // Process the batch with progress tracking
+                let filesProcessedInBatch = 0;
                 await Promise.all(
                     batch.map(async (fileInfo) => {
                         try {
@@ -447,16 +448,23 @@ export function DocumentUploadModal({
                             // Mark the overall success as false if any file fails
                             result.success = false;
                         }
+                        
+                        // Update progress every PROGRESS_UPDATE_INTERVAL files
+                        filesProcessedInBatch++;
+                        if (filesProcessedInBatch % PROGRESS_UPDATE_INTERVAL === 0 || filesProcessedInBatch === batch.length) {
+                            setFileStatuses((currentStatuses) => {
+                                const completedFiles = currentStatuses.filter(
+                                    (f) => f.status === "success" || f.status === "error",
+                                ).length;
+                                const totalFiles = currentStatuses.length;
+                                const progress = totalFiles > 0 ? Math.round((completedFiles / totalFiles) * 100) : 0;
+                                setOverallProgress(progress);
+                                return currentStatuses;
+                            });
+                        }
                     }),
                 );
 
-                // Calculate overall progress after each batch completion
-                const completedFiles = fileStatuses.filter(
-                    (f) => f.status === "success" || f.status === "error",
-                ).length;
-                const totalFiles = fileStatuses.length;
-                const progress = Math.round((completedFiles / totalFiles) * 100);
-                setOverallProgress(progress);
             }
         };
 
@@ -907,7 +915,7 @@ export function DocumentUploadModal({
     };
 
     return (
-        <VModal key={modalKey} isOpen={isOpen} onClose={handleClose} className="mx-auto">
+        <VModal key={modalKey} isOpen={isOpen} onClose={handleClose} className="mx-auto" disableCloseOnClickOutside>
             <VModalTitle description={_description}>{_title}</VModalTitle>
             {renderModalContent()}
             {renderModalFooter()}