@vertesia/ui 1.0.0-dev.20260128.144200 → 1.0.0-dev.20260225.024852Z

package/src/features/agent/chat/hooks/useAgentStream.ts

@@ -0,0 +1,239 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { AsyncExecutionResult, VertesiaClient } from '@vertesia/client';
+import {
+    AgentMessage,
+    AgentMessageType,
+    ConversationFile,
+    FileProcessingDetails,
+    StreamingChunkDetails,
+} from '@vertesia/common';
+import { insertMessageInTimeline, isInProgress } from '../ModernAgentOutput/utils';
+
+/** Streaming data for a single active stream, keyed by streaming/activity ID */
+export interface StreamingData {
+    text: string;
+    workstreamId?: string;
+    isComplete?: boolean;
+    startTimestamp: number;
+    activityId?: string;
+}
+
+export interface UseAgentStreamResult {
+    messages: AgentMessage[];
+    streamingMessages: Map<string, StreamingData>;
+    isCompleted: boolean;
+    /** Whether we are receiving chunks right now (for visual indicators) */
+    debugChunkFlash: boolean;
+    /** Add an optimistic message (for user input) */
+    addOptimisticMessage: (msg: AgentMessage) => void;
+    /** Remove optimistic messages matching a predicate */
+    removeOptimisticMessages: (predicate: (msg: AgentMessage) => boolean) => void;
+    /** Workflow status fetched from API (RUNNING, COMPLETED, FAILED, etc.) */
+    workflowStatus: string | null;
+    /** Server-side file processing status updates (from SYSTEM messages) */
+    serverFileUpdates: Map<string, ConversationFile>;
+}
+
+/**
+ * Hook that manages the SSE message stream for an agent conversation.
+ *
+ * Encapsulates:
+ * - `client.store.workflows.streamMessages()` call and cleanup
+ * - STREAMING_CHUNK accumulation with RAF-batched flushing
+ * - Streaming→persisted message dedup (activity_id matching on THOUGHT/ANSWER arrival)
+ * - COMPLETE/IDLE streaming flush
+ * - Timestamp-based message dedup and optimistic QUESTION replacement
+ * - `isCompleted` derived state
+ * - State reset when `run.runId` changes
+ *
+ * File-processing SYSTEM messages are passed through to the messages array
+ * (Option A from the plan) so downstream hooks can react to them.
+ */
+export function useAgentStream(
+    client: VertesiaClient,
+    run: AsyncExecutionResult,
+): UseAgentStreamResult {
+    const [messages, setMessages] = useState<AgentMessage[]>([]);
+    const [isCompleted, setIsCompleted] = useState(false);
+    const [workflowStatus, setWorkflowStatus] = useState<string | null>(null);
+
+    // Server-side file processing status updates
+    const [serverFileUpdates, setServerFileUpdates] = useState<Map<string, ConversationFile>>(new Map());
+
+    // Streaming messages by streaming_id for real-time chunk aggregation
+    const [streamingMessages, setStreamingMessages] = useState<Map<string, StreamingData>>(new Map());
+
+    // RAF-batched streaming updates
+    const pendingStreamingChunks = useRef<Map<string, StreamingData>>(new Map());
+    const streamingFlushScheduled = useRef<number | null>(null);
+
+    // Debug: visual flash indicator for incoming chunks
+    const [debugChunkFlash, setDebugChunkFlash] = useState(false);
+    const debugFlashTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const flushStreamingChunks = useCallback(() => {
+        if (pendingStreamingChunks.current.size > 0) {
+            setStreamingMessages(new Map(pendingStreamingChunks.current));
+            setDebugChunkFlash(true);
+            if (debugFlashTimeout.current) clearTimeout(debugFlashTimeout.current);
+            debugFlashTimeout.current = setTimeout(() => setDebugChunkFlash(false), 50);
+        }
+        streamingFlushScheduled.current = null;
+    }, []);
+
+    // Update isCompleted when messages change
+    useEffect(() => {
+        setIsCompleted(!isInProgress(messages));
+    }, [messages]);
+
+    // Stream messages from the agent
+    useEffect(() => {
+        // Reset all state when runId changes (new agent)
+        setMessages([]);
+        setWorkflowStatus(null);
+        setStreamingMessages(new Map());
+        setServerFileUpdates(new Map());
+
+        // Check workflow status
+        client.store.workflows.getRunDetails(run.runId, run.workflowId)
+            .then((statusResult) => {
+                setWorkflowStatus(statusResult.status as string);
+            })
+            .catch((error) => {
+                console.error('Failed to check workflow status:', error);
+            });
+
+        client.store.workflows.streamMessages(run.workflowId, run.runId, (message) => {
+            // Handle streaming chunks separately for real-time aggregation
+            // PERFORMANCE: Batch updates using RAF instead of immediate state updates
+            if (message.type === AgentMessageType.STREAMING_CHUNK) {
+                const details = message.details as StreamingChunkDetails;
+                const streamKey = details?.activity_id || details?.streaming_id;
+                if (!streamKey) return;
+
+                // Accumulate chunks in the ref (no state update yet)
+                const current = pendingStreamingChunks.current.get(streamKey) || {
+                    text: '',
+                    workstreamId: message.workstream_id,
+                    startTimestamp: Date.now(),
+                    activityId: details?.activity_id,
+                };
+                const newText = current.text + (message.message || '');
+
+                pendingStreamingChunks.current.set(streamKey, {
+                    text: newText,
+                    workstreamId: message.workstream_id,
+                    isComplete: details.is_final,
+                    startTimestamp: current.startTimestamp,
+                    activityId: details?.activity_id,
+                });
+
+                // Schedule a flush if not already scheduled (~60 updates/sec max)
+                if (streamingFlushScheduled.current === null) {
+                    streamingFlushScheduled.current = requestAnimationFrame(flushStreamingChunks);
+                }
+                return;
+            }
+
+            // Handle file processing SYSTEM messages — update serverFileUpdates
+            // for downstream useFileProcessing hook, don't add to messages array
+            if (message.type === AgentMessageType.SYSTEM) {
+                const details = message.details as FileProcessingDetails | undefined;
+                if (details?.system_type === 'file_processing' && details.files) {
+                    setServerFileUpdates(prev => {
+                        const newMap = new Map(prev);
+                        for (const file of details.files) {
+                            newMap.set(file.id, file);
+                        }
+                        return newMap;
+                    });
+                    return;
+                }
+                // Other SYSTEM messages fall through to normal handling
+            }
+
+            // When THOUGHT or ANSWER arrives with activity_id, remove matching streaming message
+            if (
+                (message.type === AgentMessageType.THOUGHT || message.type === AgentMessageType.ANSWER) &&
+                message.details?.activity_id
+            ) {
+                const activityId = message.details.activity_id as string;
+                pendingStreamingChunks.current.delete(activityId);
+                setStreamingMessages(prev => {
+                    if (prev.has(activityId)) {
+                        const next = new Map(prev);
+                        next.delete(activityId);
+                        return next;
+                    }
+                    return prev;
+                });
+            }
+
+            // On COMPLETE or IDLE, flush any pending chunks
+            if (message.type === AgentMessageType.COMPLETE || message.type === AgentMessageType.IDLE) {
+                if (pendingStreamingChunks.current.size > 0) {
+                    flushStreamingChunks();
+                }
+            }
+
+            if (message.message) {
+                setMessages((prev) => {
+                    // Check for duplicate by timestamp
+                    if (prev.find((m) => m.timestamp === message.timestamp)) {
+                        return prev;
+                    }
+
+                    // For QUESTION messages from server, replace any optimistic version
+                    if (message.type === AgentMessageType.QUESTION && !message.details?._optimistic) {
+                        const withoutOptimistic = prev.filter(
+                            (m) => !(m.type === AgentMessageType.QUESTION && m.details?._optimistic),
+                        );
+                        insertMessageInTimeline(withoutOptimistic, message);
+                        return [...withoutOptimistic];
+                    }
+
+                    insertMessageInTimeline(prev, message);
+                    return [...prev];
+                });
+            }
+        });
+
+        return () => {
+            setMessages([]);
+            if (streamingFlushScheduled.current !== null) {
+                cancelAnimationFrame(streamingFlushScheduled.current);
+                streamingFlushScheduled.current = null;
+            }
+            pendingStreamingChunks.current.clear();
+        };
+    }, [run.runId, client.store.workflows, flushStreamingChunks]);
+
+    // Add an optimistic message to the timeline
+    const addOptimisticMessage = useCallback((msg: AgentMessage) => {
+        setMessages((prev) => {
+            const newMessages = [...prev, msg];
+            newMessages.sort((a, b) => {
+                const timeA = typeof a.timestamp === 'number' ? a.timestamp : new Date(a.timestamp).getTime();
+                const timeB = typeof b.timestamp === 'number' ? b.timestamp : new Date(b.timestamp).getTime();
+                return timeA - timeB;
+            });
+            return newMessages;
+        });
+    }, []);
+
+    // Remove optimistic messages matching a predicate
+    const removeOptimisticMessages = useCallback((predicate: (msg: AgentMessage) => boolean) => {
+        setMessages((prev) => prev.filter((m) => !predicate(m)));
+    }, []);
+
+    return {
+        messages,
+        streamingMessages,
+        isCompleted,
+        debugChunkFlash,
+        addOptimisticMessage,
+        removeOptimisticMessages,
+        workflowStatus,
+        serverFileUpdates,
+    };
+}

package/src/features/agent/chat/hooks/useDocumentPanel.ts

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { AgentMessage, AgentMessageType } from '@vertesia/common';
+import type { OpenDocument } from '../types/document.js';
+
+export interface UseDocumentPanelResult {
+    openDocuments: OpenDocument[];
+    activeDocumentId: string | null;
+    isDocPanelOpen: boolean;
+    docRefreshKey: number;
+    closeDocPanel: () => void;
+    closeDocument: (docId: string) => void;
+    selectDocument: (docId: string) => void;
+    openDocInPanel: (docId: string) => void;
+}
+
+/**
+ * Hook that manages the document side panel.
+ *
+ * Listens for UPDATE messages with `event_class: 'document_created' | 'document_updated'`
+ * and manages panel open/close, tab selection, and refresh state.
+ *
+ * Uses incremental processing — only scans new messages.
+ */
+export function useDocumentPanel(messages: AgentMessage[]): UseDocumentPanelResult {
+    const [openDocuments, setOpenDocuments] = useState<OpenDocument[]>([]);
+    const [activeDocumentId, setActiveDocumentId] = useState<string | null>(null);
+    const [isDocPanelOpen, setIsDocPanelOpen] = useState(false);
+    const [docRefreshKey, setDocRefreshKey] = useState(0);
+
+    // Incremental processing
+    const lastProcessedIndex = useRef<number>(-1);
+
+    // Reset when messages are cleared
+    useEffect(() => {
+        if (messages.length === 0) {
+            setOpenDocuments([]);
+            setActiveDocumentId(null);
+            setIsDocPanelOpen(false);
+            setDocRefreshKey(0);
+            lastProcessedIndex.current = -1;
+        }
+    }, [messages.length === 0]);
+
+    // Process new messages incrementally for document events
+    useEffect(() => {
+        const startIdx = lastProcessedIndex.current + 1;
+        if (startIdx >= messages.length) return;
+
+        for (let i = startIdx; i < messages.length; i++) {
+            const message = messages[i];
+
+            if (message.type === AgentMessageType.UPDATE && message.details) {
+                const details = message.details as Record<string, unknown>;
+                if (details.event_class === 'document_created' || details.event_class === 'document_updated') {
+                    const docId = details.document_id as string;
+                    const docTitle = details.title as string;
+                    if (docId) {
+                        setOpenDocuments(prev => {
+                            if (prev.some(d => d.id === docId)) return prev;
+                            return [...prev, { id: docId, title: docTitle || 'Document' }];
+                        });
+                        setActiveDocumentId(docId);
+                        setIsDocPanelOpen(true);
+                        if (details.event_class === 'document_updated') {
+                            setDocRefreshKey(k => k + 1);
+                        }
+                    }
+                }
+            }
+        }
+
+        lastProcessedIndex.current = messages.length - 1;
+    }, [messages]);
+
+    const closeDocPanel = useCallback(() => {
+        setIsDocPanelOpen(false);
+    }, []);
+
+    const closeDocument = useCallback((docId: string) => {
+        setOpenDocuments(prev => {
+            const next = prev.filter(d => d.id !== docId);
+            if (next.length === 0) {
+                setIsDocPanelOpen(false);
+                setActiveDocumentId(null);
+            } else {
+                setActiveDocumentId(current => {
+                    if (current === docId) return next[0].id;
+                    return current;
+                });
+            }
+            return next;
+        });
+    }, []);
+
+    const selectDocument = useCallback((docId: string) => {
+        setActiveDocumentId(docId);
+    }, []);
+
+    const openDocInPanel = useCallback((docId: string) => {
+        setOpenDocuments(prev => {
+            if (prev.some(d => d.id === docId)) return prev;
+            return [...prev, { id: docId, title: 'Document' }];
+        });
+        setActiveDocumentId(docId);
+        setIsDocPanelOpen(true);
+    }, []);
+
+    return {
+        openDocuments,
+        activeDocumentId,
+        isDocPanelOpen,
+        docRefreshKey,
+        closeDocPanel,
+        closeDocument,
+        selectDocument,
+        openDocInPanel,
+    };
+}

package/src/features/agent/chat/hooks/useFileProcessing.ts

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { AsyncExecutionResult, VertesiaClient } from '@vertesia/client';
+import {
+    ConversationFile,
+    ConversationFileRef,
+    FileProcessingStatus,
+} from '@vertesia/common';
+
+export interface UseFileProcessingResult {
+    processingFiles: Map<string, ConversationFile>;
+    hasProcessingFiles: boolean;
+    handleFileUpload: (files: File[]) => Promise<void>;
+}
+
+type ToastFn = (opts: { status: 'success' | 'error' | 'warning' | 'info'; title: string; description?: string; duration?: number }) => void;
+
+/**
+ * Hook that manages file upload and processing state.
+ *
+ * Combines local optimistic upload state with server-side processing
+ * status updates (from `useAgentStream.serverFileUpdates`).
+ *
+ * @param client - Vertesia client for artifact uploads and workflow signals
+ * @param run - Current workflow execution
+ * @param serverFileUpdates - Server-side file processing updates from useAgentStream
+ * @param toast - Toast notification function for error display
+ */
+export function useFileProcessing(
+    client: VertesiaClient,
+    run: AsyncExecutionResult,
+    serverFileUpdates: Map<string, ConversationFile>,
+    toast: ToastFn,
+): UseFileProcessingResult {
+    // Local optimistic file state (uploads initiated from the UI)
+    const [localFiles, setLocalFiles] = useState<Map<string, ConversationFile>>(new Map());
+
+    // Reset when run changes
+    useEffect(() => {
+        setLocalFiles(new Map());
+    }, [run.runId]);
+
+    // Merge local + server state (server takes precedence for same IDs)
+    const processingFiles = useMemo(() => {
+        const merged = new Map(localFiles);
+        serverFileUpdates.forEach((file, id) => {
+            merged.set(id, file);
+        });
+        return merged;
+    }, [localFiles, serverFileUpdates]);
+
+    const hasProcessingFiles = useMemo(() =>
+        Array.from(processingFiles.values()).some(
+            f => f.status === FileProcessingStatus.UPLOADING || f.status === FileProcessingStatus.PROCESSING
+        ), [processingFiles]);
+
+    const handleFileUpload = useCallback(async (files: File[]) => {
+        for (const file of files) {
+            const fileId = `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+            const artifactPath = `files/${file.name}`;
+
+            // Add to local state immediately (optimistic - uploading status)
+            const fileState: ConversationFile = {
+                id: fileId,
+                name: file.name,
+                content_type: file.type || 'application/octet-stream',
+                size: file.size,
+                status: FileProcessingStatus.UPLOADING,
+                started_at: Date.now(),
+            };
+
+            setLocalFiles(prev => new Map(prev).set(fileId, fileState));
+
+            try {
+                // Upload to artifact storage
+                await client.files.uploadArtifact(run.runId, artifactPath, file);
+
+                // Update local state to processing
+                setLocalFiles(prev => {
+                    const newMap = new Map(prev);
+                    const f = newMap.get(fileId);
+                    if (f) {
+                        f.status = FileProcessingStatus.PROCESSING;
+                        f.artifact_path = artifactPath;
+                        f.reference = `artifact:${artifactPath}`;
+                    }
+                    return newMap;
+                });
+
+                // Signal workflow that file was uploaded
+                await client.store.workflows.sendSignal(
+                    run.workflowId,
+                    run.runId,
+                    'FileUploaded',
+                    {
+                        id: fileId,
+                        name: file.name,
+                        content_type: file.type || 'application/octet-stream',
+                        reference: `artifact:${artifactPath}`,
+                        artifact_path: artifactPath,
+                    } as ConversationFileRef
+                );
+            } catch (error) {
+                // Update local state to error
+                setLocalFiles(prev => {
+                    const newMap = new Map(prev);
+                    const f = newMap.get(fileId);
+                    if (f) {
+                        f.status = FileProcessingStatus.ERROR;
+                        f.error = error instanceof Error ? error.message : 'Upload failed';
+                        f.completed_at = Date.now();
+                    }
+                    return newMap;
+                });
+
+                toast({
+                    status: 'error',
+                    title: 'Upload Failed',
+                    description: error instanceof Error ? error.message : 'Failed to upload file',
+                    duration: 3000,
+                });
+            }
+        }
+    }, [client, run, toast]);
+
+    return { processingFiles, hasProcessingFiles, handleFileUpload };
+}

package/src/features/agent/chat/index.ts

@@ -1,29 +1,23 @@
-export * from "./JumpingDots";
-export { ModernAgentConversation } from "./ModernAgentConversation";
-export * from "./WaitingMessages";
-export * from "./AnimatedThinkingDots";
 export {
-    AgentChart,
-    type AgentChartSpec,
+    AgentChart, isRechartsSpec, isVegaLiteSpec, type AgentChartSpec,
     type RechartsChartSpec,
-    type VegaLiteChartSpec,
-    isVegaLiteSpec,
-    isRechartsSpec,
+    type VegaLiteChartSpec
 } from "./AgentChart";
+export * from "./AnimatedThinkingDots";
+export * from "./JumpingDots";
+export { ModernAgentConversation } from "./ModernAgentConversation";
 export { VegaLiteChart } from "./VegaLiteChart";
+export * from "./WaitingMessages";
 // MessageInput types for external use
-export type { UploadedFile, SelectedDocument } from "./ModernAgentOutput/MessageInput";
+export type { SelectedDocument, UploadedFile } from "./ModernAgentOutput/MessageInput";
 // AskUser widget for displaying agent prompts/questions
 export {
     AskUserWidget,
-    ConfirmationWidget,
-    type AskUserWidgetProps,
-    type AskUserOption,
-    type ConfirmationWidgetProps,
+    ConfirmationWidget, type AskUserOption, type AskUserWidgetProps, type ConfirmationWidgetProps
 } from "./AskUserWidget";
 // MessageItem widget and types for external use
-export { default as MessageItem } from "./ModernAgentOutput/MessageItem";
-export type { MessageItemProps } from "./ModernAgentOutput/MessageItem";
+export { default as MessageItem, MESSAGE_STYLES } from "./ModernAgentOutput/MessageItem";
+export type { MessageItemProps, MessageItemClassNames, MessageStyleConfig } from "./ModernAgentOutput/MessageItem";
 // MessagesContainer widget and types for external use
 export { default as MessagesContainer } from "./ModernAgentOutput/MessagesContainer";
 export type { MessagesContainerProps } from "./ModernAgentOutput/MessagesContainer";
@@ -32,4 +26,11 @@ export { default as Header } from "./ModernAgentOutput/Header";
 export type { HeaderProps } from "./ModernAgentOutput/Header";
 // StreamingMessage widget and types for external use
 export { default as StreamingMessage } from "./ModernAgentOutput/StreamingMessage";
-export type { StreamingMessageProps } from "./ModernAgentOutput/StreamingMessage";
+export type { StreamingMessageProps, StreamingMessageClassNames } from "./ModernAgentOutput/StreamingMessage";
+// ToolCallGroup types for external use
+export type { ToolCallGroupClassNames } from "./ModernAgentOutput/ToolCallGroup";
+// BatchProgressPanel types for external use
+export type { BatchProgressPanelClassNames } from "./ModernAgentOutput/BatchProgressPanel";
+export * from "./SkillWidgetProvider";
+// AgentConversationViewMode type for external use
+export type { AgentConversationViewMode } from "./ModernAgentOutput/AllMessagesMixed";

package/src/features/agent/chat/types/document.ts

@@ -0,0 +1,4 @@
+export interface OpenDocument {
+    id: string;
+    title: string;
+}

package/src/features/agent/index.ts

@@ -1,4 +1,2 @@
 export * from "./chat";
 export * from "./PayloadBuilder";
-export * from "./visualization";
-export * from "./createChartTool";

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

@@ -1,8 +1,7 @@
-import { useUserSession, TypeRegistry } from "@vertesia/ui/session";
-import { Collection } from "@vertesia/common";
-import { DocumentSearchResultsWithDropZone, DocumentSearchResults } from "../objects/DocumentSearchResults";
+import { Collection, getContentTypeRefId } from "@vertesia/common";
 import { useToast } from "@vertesia/ui/core";
-import { useDocumentSearch } from "../objects/search/DocumentSearchContext";
+import { TypeRegistry, useUserSession } from "@vertesia/ui/session";
+import { DocumentSearchResults, DocumentSearchResultsWithDropZone } from "../objects/DocumentSearchResults";
 
 
 interface BrowseCollectionViewProps {
@@ -11,9 +10,7 @@ interface BrowseCollectionViewProps {
 export function BrowseCollectionView({ collection }: BrowseCollectionViewProps) {
     const toast = useToast();
     const { client, typeRegistry } = useUserSession();
-    const search = useDocumentSearch();
-    search.query.all_revisions = true;
-    
+
     const onUploadDone = async (objectIds: string[]) => {
         if (objectIds.length > 0) {
             await client.store.collections.addMembers(collection.id, objectIds).catch(err => {
@@ -39,7 +36,7 @@ function getTableLayout(collection: Collection, typeRegistry?: TypeRegistry | un
         return table_layout;
     }
     if (collection.type && typeRegistry) {
-        table_layout = typeRegistry?.getTypeLayout(collection.type.id);
+        table_layout = typeRegistry?.getTypeLayout(getContentTypeRefId(collection.type));
     }
     if (table_layout && table_layout.length > 0) {
         return table_layout;

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

@@ -1,5 +1,5 @@
 import { CreateCollectionPayload } from "@vertesia/common";
-import { useToast, VModalBody, FormItem, VModalFooter, Input, Switch, Button, VModal, VModalTitle, Textarea } from "@vertesia/ui/core";
+import { useToast, ModalBody, FormItem, ModalFooter, Input, Switch, Button, Modal, ModalTitle, Textarea } from "@vertesia/ui/core";
 import { SelectContentType } from "../types/SelectContentType";
 import { useNavigate } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
@@ -75,7 +75,7 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
 
     return (
         <form onSubmit={(e) => e.preventDefault()}>
-            <VModalBody>
+            <ModalBody>
                 <FormItem label="Name" required>
                     <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />
                 </FormItem>
@@ -116,12 +116,12 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
                         isClearable
                     />
                 </FormItem>
-            </VModalBody>
-            <VModalFooter>
+            </ModalBody>
+            <ModalFooter>
                 <Button isDisabled={isProcessing} onClick={onCreate}>
                     Create Collection
                 </Button>
-            </VModalFooter>
+            </ModalFooter>
         </form >
     );
 }
@@ -132,9 +132,9 @@ interface CreateCollectionModalProps {
 }
 export function CreateCollectionModal({ isOpen, onClose }: CreateCollectionModalProps) {
     return (
-        <VModal onClose={onClose} isOpen={isOpen}>
-            <VModalTitle>Create a Collection</VModalTitle>
+        <Modal onClose={onClose} isOpen={isOpen}>
+            <ModalTitle>Create a Collection</ModalTitle>
             <CreateCollectionForm onClose={onClose} />
-        </VModal>
+        </Modal>
     );
 }

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

@@ -188,7 +188,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                         </FormItem>
                     )
                 }
-                <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables.">
+                <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables." className="h-[200px]">
                     <MonacoEditor
                         className="border-1 rounded-md border-border"
                         value={tableLayoutValue}