@vertesia/ui 0.81.1 → 1.0.0-dev.20260203.130115Z

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

@@ -1,9 +1,9 @@
 import { useEffect, useState, memo, useRef, type RefObject } from "react";
 
 import { useUserSession } from "@vertesia/ui/session";
-import { Button, Portal, ResizableHandle, ResizablePanel, ResizablePanelGroup, Spinner, useToast, VModal, VModalBody, VModalFooter, VModalTitle } from "@vertesia/ui/core";
+import { Button, Portal, ResizableHandle, ResizablePanel, ResizablePanelGroup, Spinner, useToast, Modal, ModalBody, ModalFooter, ModalTitle } from "@vertesia/ui/core";
 import { JSONDisplay, MarkdownRenderer, Progress, XMLViewer } from "@vertesia/ui/widgets";
-import { ContentNature, ContentObject, ContentObjectStatus, DocAnalyzerProgress, DocProcessorOutputFormat, DocumentMetadata, ImageRenditionFormat, VideoMetadata, POSTER_RENDITION_NAME, WorkflowExecutionStatus, PDF_RENDITION_NAME } from "@vertesia/common";
+import { ContentNature, ContentObject, ContentObjectStatus, DocAnalyzerProgress, DocProcessorOutputFormat, DocumentMetadata, ImageRenditionFormat, VideoMetadata, AudioMetadata, POSTER_RENDITION_NAME, AUDIO_RENDITION_NAME, WorkflowExecutionStatus, PDF_RENDITION_NAME } from "@vertesia/common";
 import { Copy, Download, SquarePen, AlertTriangle, FileSearch } from "lucide-react";
 import { isPreviewableAsPdf, printElementToPdf, getWorkflowStatusColor, getWorkflowStatusName } from "../../../utils/index.js";
 import { PropertiesEditorModal } from "./PropertiesEditorModal";
@@ -18,6 +18,17 @@ const WEB_SUPPORTED_IMAGE_FORMATS = ['image/jpeg', 'image/jpg', 'image/png', 'im
 // Web-supported video formats for browser display
 const WEB_SUPPORTED_VIDEO_FORMATS = ['video/mp4', 'video/webm'];
 
+// Web-supported audio formats for browser display
+const WEB_SUPPORTED_AUDIO_FORMATS = [
+    'audio/mp4',    // M4A/AAC (official MIME type)
+    'audio/m4a',    // M4A (alternative MIME type)
+    'audio/x-m4a',  // M4A (legacy MIME type)
+    'audio/mpeg',   // MP3
+    'audio/ogg',    // Ogg Vorbis
+    'audio/wav',    // WAV
+    'audio/webm',   // WebM audio
+];
+
 // Panel height constants for consistent layout
 const PANEL_HEIGHTS = {
     /** Main resizable panel group */
@@ -146,11 +157,21 @@ function looksLikeMarkdown(text: string | undefined): boolean {
     );
 }
 
+/**
+ * Helper function to get panel visibility className.
+ * Returns empty string if visible, 'hidden' if not visible.
+ */
+function getPanelVisibility(isVisible: boolean): string {
+    return isVisible ? '' : 'hidden';
+}
+
 enum PanelView {
     Text = "text",
     Image = "image",
     Video = "video",
-    Pdf = "pdf"
+    Audio = "audio",
+    Pdf = "pdf",
+    Transcript = "transcript"
 }
 
 interface ContentOverviewProps {
@@ -299,9 +320,11 @@ function PropertiesPanel({ object, refetch, handleCopyContent }: { object: Conte
 function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: ContentObject, loadText: boolean, handleCopyContent: (content: string, type: "text" | "properties") => Promise<void>, refetch?: () => Promise<unknown> }) {
     const isImage = object?.metadata?.type === ContentNature.Image;
     const isVideo = object?.metadata?.type === ContentNature.Video;
+    const isAudio = object?.metadata?.type === ContentNature.Audio;
     const isPdf = object?.content?.type === 'application/pdf';
     const isPreviewableAsPdfDoc = object?.content?.type ? isPreviewableAsPdf(object.content.type) : false;
     const isCreatedOrProcessing = isCreatedOrProcessingStatus(object?.status);
+    const hasTranscript = !!(object.transcript && (isVideo || isAudio));
 
     // Check if PDF rendition exists for Office documents
     const metadata = object.metadata as DocumentMetadata;
@@ -310,6 +333,7 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
     // Determine initial panel view
     const getInitialView = (): PanelView => {
         if (isVideo) return PanelView.Video;
+        if (isAudio) return PanelView.Audio;
         if (isImage) return PanelView.Image;
         return PanelView.Text;
     };
@@ -378,6 +402,26 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                                 Video
                             </Button>
                         }
+                        {isAudio &&
+                            <Button
+                                variant={currentPanel === PanelView.Audio ? "primary" : "ghost"}
+                                size="sm"
+                                alt="View Audio"
+                                onClick={() => setCurrentPanel(PanelView.Audio)}
+                            >
+                                Audio
+                            </Button>
+                        }
+                        {hasTranscript &&
+                            <Button
+                                variant={currentPanel === PanelView.Transcript ? "primary" : "ghost"}
+                                size="sm"
+                                alt="View Transcript"
+                                onClick={() => setCurrentPanel(PanelView.Transcript)}
+                            >
+                                Transcript
+                            </Button>
+                        }
                         <Button
                             variant={currentPanel === PanelView.Text ? "primary" : "ghost"}
                             size="sm"
@@ -432,40 +476,54 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                     />
                 )}
             </div>
-            {currentPanel === PanelView.Image && (
+            <div className={getPanelVisibility(currentPanel === PanelView.Image)}>
                 <ImagePanel object={object} />
-            )}
-            {currentPanel === PanelView.Video && (
+            </div>
+            <div className={getPanelVisibility(currentPanel === PanelView.Video)}>
                 <VideoPanel object={object} />
+            </div>
+            <div className={getPanelVisibility(currentPanel === PanelView.Audio)}>
+                <AudioPanel object={object} />
+            </div>
+            {hasTranscript && (
+                <div className={getPanelVisibility(currentPanel === PanelView.Transcript)}>
+                    <TranscriptPanel object={object} handleCopyContent={handleCopyContent} />
+                </div>
             )}
-            {currentPanel === PanelView.Pdf && isPdf && (
-                <PdfPreviewPanel object={object} />
+            {isPdf && (
+                <div className={getPanelVisibility(currentPanel === PanelView.Pdf)}>
+                    <PdfPreviewPanel object={object} />
+                </div>
             )}
-            {currentPanel === PanelView.Pdf && isPreviewableAsPdfDoc && (
-                <OfficePdfPreviewPanel
-                    pdfRendition={pdfRendition}
-                    officePdfUrl={officePdfUrl}
-                    officePdfConverting={officePdfConverting}
-                    officePdfError={officePdfError}
-                    onConvert={triggerOfficePdfConversion}
-                />
+            {isPreviewableAsPdfDoc && (
+                <div className={getPanelVisibility(currentPanel === PanelView.Pdf)}>
+                    <OfficePdfPreviewPanel
+                        pdfRendition={pdfRendition}
+                        officePdfUrl={officePdfUrl}
+                        officePdfConverting={officePdfConverting}
+                        officePdfError={officePdfError}
+                        onConvert={triggerOfficePdfConversion}
+                    />
+                </div>
             )}
-            {currentPanel === PanelView.Text && showProcessingPanel && (
-                <PdfProcessingPanel progress={pdfProgress} status={pdfStatus} outputFormat={pdfOutputFormat} />
+            {showProcessingPanel && (
+                <div className={getPanelVisibility(currentPanel === PanelView.Text)}>
+                    <PdfProcessingPanel progress={pdfProgress} status={pdfStatus} outputFormat={pdfOutputFormat} />
+                </div>
             )}
-            {currentPanel === PanelView.Text && !showProcessingPanel && isLoadingText && (
+            <div className={getPanelVisibility(currentPanel === PanelView.Text && !showProcessingPanel && isLoadingText)}>
                 <div className="flex justify-center items-center flex-1">
                     <Spinner size="lg" />
                 </div>
-            )}
-            {currentPanel === PanelView.Text && !showProcessingPanel && !isLoadingText && (
+            </div>
+            <div className={getPanelVisibility(currentPanel === PanelView.Text && !showProcessingPanel && !isLoadingText)}>
                 <TextPanel
                     object={object}
                     text={displayText}
                     isTextCropped={isTextCropped}
                     textContainerRef={textContainerRef}
                 />
-            )}
+            </div>
         </div>
     );
 }
@@ -696,25 +754,25 @@ function TextActions({
                     )}
                 </div>
             </div>
-            <VModal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
-                <VModalTitle>Export document as PDF</VModalTitle>
-                <VModalBody>
+            <Modal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
+                <ModalTitle>Export document as PDF</ModalTitle>
+                <ModalBody>
                     <p className="mb-2">
                         This will open your browser&apos;s print dialog with the current document content.
                     </p>
                     <p className="text-sm text-muted">
                         To save a PDF, choose &quot;Save as PDF&quot; or a similar option in the print dialog.
                     </p>
-                </VModalBody>
-                <VModalFooter align="right">
+                </ModalBody>
+                <ModalFooter align="right">
                     <Button variant="ghost" size="sm" onClick={() => setIsPdfModalOpen(false)}>
                         Cancel
                     </Button>
                     <Button size="sm" onClick={handleConfirmClientPdfExport}>
                         Open print dialog
                     </Button>
-                </VModalFooter>
-            </VModal>
+                </ModalFooter>
+            </Modal>
         </>
     );
 }
@@ -789,6 +847,9 @@ function ImagePanel({ object }: { object: ContentObject }) {
 
     useEffect(() => {
         if (isImage) {
+            // Reset image URL when object changes
+            setImageUrl(undefined);
+
             const loadImage = async () => {
                 const isOriginalWebSupported = content?.type && WEB_SUPPORTED_IMAGE_FORMATS.includes(content.type);
 
@@ -818,7 +879,7 @@ function ImagePanel({ object }: { object: ContentObject }) {
 
             loadImage();
         }
-    }, []);
+    }, [object.id, isImage, content?.type, content?.source, client]);
 
     return (
         <div className="mb-4 px-2">
@@ -858,6 +919,13 @@ function VideoPanel({ object }: { object: ContentObject }) {
     // Get poster
     const poster = renditions.find(r => r.name === POSTER_RENDITION_NAME);
 
+    // Reset state when object changes
+    useEffect(() => {
+        setVideoUrl(undefined);
+        setPosterUrl(undefined);
+        setIsLoading(true);
+    }, [object.id]);
+
     useEffect(() => {
         const loadPoster = async () => {
             if (poster?.content?.source) {
@@ -930,6 +998,163 @@ function VideoPanel({ object }: { object: ContentObject }) {
     );
 }
 
+function AudioPanel({ object }: { object: ContentObject }) {
+    const { client } = useUserSession();
+    const [audioUrl, setAudioUrl] = useState<string>();
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+
+    const content = object.content;
+    const isAudio = object.metadata?.type === ContentNature.Audio;
+
+    // Check if there are audio renditions available in metadata
+    const metadata = object.metadata as AudioMetadata;
+    const renditions = metadata?.renditions || [];
+
+    // Find audio rendition by name (AUDIO_RENDITION_NAME = "Audio")
+    const audioRendition = renditions.find(r => r.name === AUDIO_RENDITION_NAME);
+
+    // Check if original file is web-compatible
+    const isOriginalWebSupported = content?.type && WEB_SUPPORTED_AUDIO_FORMATS.includes(content.type);
+
+    // Reset state when object changes
+    useEffect(() => {
+        setAudioUrl(undefined);
+        setIsLoading(true);
+    }, [object.id]);
+
+    useEffect(() => {
+        if (isAudio && (audioRendition?.content?.source || isOriginalWebSupported)) {
+            const loadAudioUrl = async () => {
+                try {
+                    let downloadUrl;
+                    if (audioRendition?.content?.source) {
+                        // Use rendition if available
+                        downloadUrl = await client.files.getDownloadUrl(audioRendition.content.source);
+                    } else if (isOriginalWebSupported && content?.source) {
+                        // Fall back to original file if web-supported
+                        downloadUrl = await client.files.getDownloadUrl(content.source);
+                    }
+                    if (downloadUrl) {
+                        setAudioUrl(downloadUrl.url);
+                    }
+                } catch (error) {
+                    console.error("Failed to get audio URL", error);
+                } finally {
+                    setIsLoading(false);
+                }
+            };
+            loadAudioUrl();
+        } else {
+            setIsLoading(false);
+        }
+    }, [isAudio, audioRendition, isOriginalWebSupported, content?.source, client]);
+
+    return (
+        <div className="mb-4 px-2">
+            {!audioRendition && !isOriginalWebSupported ? (
+                <div className="flex justify-center items-center h-[200px] text-muted">
+                    <div className="text-center">
+                        <p>No web-compatible audio rendition available</p>
+                        <p className="text-sm mt-2">MP3, M4A, OGG, WAV, or WebM format required</p>
+                    </div>
+                </div>
+            ) : isLoading ? (
+                <div className="flex justify-center items-center h-[200px]">
+                    <Spinner size="md" />
+                </div>
+            ) : audioUrl ? (
+                <div className="flex flex-col items-center gap-4">
+                    <audio
+                        src={audioUrl}
+                        controls
+                        className="w-full max-w-2xl"
+                    >
+                        Your browser does not support the audio tag.
+                    </audio>
+                    {metadata?.duration && (
+                        <div className="text-sm text-muted">
+                            Duration: {formatDuration(metadata.duration)}
+                        </div>
+                    )}
+                </div>
+            ) : (
+                <div className="flex justify-center items-center h-[200px] text-muted">
+                    Failed to load audio
+                </div>
+            )}
+        </div>
+    );
+}
+
+function formatDuration(seconds: number): string {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+
+    if (hours > 0) {
+        return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    }
+    return `${minutes}:${secs.toString().padStart(2, '0')}`;
+}
+
+function TranscriptPanel({ object, handleCopyContent }: { object: ContentObject, handleCopyContent: (content: string, type: "text" | "properties") => Promise<void> }) {
+    const transcript = object.transcript;
+    const transcriptText = transcript?.text;
+    const segments = transcript?.segments;
+
+    // Build full text from segments if text is not available
+    const fullText = transcriptText || (segments ? segments.map(s => s.text).join(' ') : '');
+
+    const formatTimestamp = (seconds: number): string => {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = Math.floor(seconds % 60);
+
+        if (hours > 0) {
+            return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+        return `${minutes}:${secs.toString().padStart(2, '0')}`;
+    };
+
+    return (
+        <div className="flex flex-col h-full">
+            <div className="flex justify-end items-center px-2 mb-2">
+                {fullText && (
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        title="Copy transcript"
+                        onClick={() => handleCopyContent(fullText, "text")}
+                    >
+                        <Copy className="size-4" />
+                    </Button>
+                )}
+            </div>
+            <div className={`${PANEL_HEIGHTS.content} overflow-auto px-2`}>
+                {segments && segments.length > 0 ? (
+                    <div className="space-y-2">
+                        {segments.map((segment, idx) => (
+                            <div key={idx} className="flex gap-3 text-sm">
+                                <span className="text-muted font-mono text-xs shrink-0 pt-0.5">
+                                    {formatTimestamp(segment.start)}
+                                    {segment.end && ` - ${formatTimestamp(segment.end)}`}
+                                </span>
+                                <span className="flex-1">{segment.text}</span>
+                            </div>
+                        ))}
+                    </div>
+                ) : transcriptText ? (
+                    <pre className="text-wrap bg-muted text-muted p-2 whitespace-pre-wrap">
+                        {transcriptText}
+                    </pre>
+                ) : (
+                    <div className="text-muted">No transcript available</div>
+                )}
+            </div>
+        </div>
+    );
+}
+
 function PdfActions({ object }: { object: ContentObject }) {
     const [isPdfPreviewOpen, setPdfPreviewOpen] = useState(false);
 

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

@@ -213,7 +213,6 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
                             onChange={(update) => handleEditorChange(update.state.doc.toString())}
                             beforeMount={beforeMount}
                             theme={theme === 'dark' ? 'vs-dark' : 'vs'}
-                            minLines={40}
                         />
                     </div>
                 </ModalBody>

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

@@ -1,5 +1,5 @@
 import { ContentObjectItem } from "@vertesia/common";
-import { VModal, VModalBody, VModalTitle } from "@vertesia/ui/core";
+import { Modal, ModalBody, ModalTitle } from "@vertesia/ui/core";
 import { SelectDocument } from "./SelectDocument";
 
 interface SelectDocumentModalProps {
@@ -10,11 +10,11 @@ interface SelectDocumentModalProps {
 }
 export function SelectDocumentModal({ isOpen, onClose }: SelectDocumentModalProps) {
     return (
-        <VModal onClose={() => onClose()} isOpen={!!isOpen} className='min-w-[60vw]'>
-            <VModalTitle>Select Content</VModalTitle>
-            <VModalBody className='pt-0 overflow-y-auto max-h-[80vh] min-h-[80vh]'>
+        <Modal onClose={() => onClose()} isOpen={!!isOpen} className='min-w-[60vw]'>
+            <ModalTitle>Select Content</ModalTitle>
+            <ModalBody className='pt-0 overflow-y-auto max-h-[80vh] min-h-[80vh]'>
                 {isOpen && <SelectDocument onChange={onClose} />}
-            </VModalBody>
-        </VModal>
+            </ModalBody>
+        </Modal>
     )
 }

package/src/features/store/objects/components/useContentPanelHooks.ts

@@ -39,17 +39,33 @@ export function useObjectText(objectId: string, initialText?: string, loadOnMoun
             })
             .catch((err) => {
                 console.error("Failed to load text", err);
+                setFullText(undefined);
+                setDisplayText(undefined);
+                setIsCropped(false);
             })
             .finally(() => {
                 setIsLoading(false);
             });
     }, [objectId, store]);
 
+    // Reset state when objectId changes
     useEffect(() => {
-        if (loadOnMount && !displayText) {
+        // Reset to initial text for new object
+        if (initialText && initialText.length > MAX_TEXT_DISPLAY_SIZE) {
+            setFullText(initialText);
+            setDisplayText(initialText.substring(0, MAX_TEXT_DISPLAY_SIZE));
+            setIsCropped(true);
+        } else {
+            setFullText(initialText);
+            setDisplayText(initialText);
+            setIsCropped(false);
+        }
+
+        // Load text if requested
+        if (loadOnMount && !initialText) {
             loadText();
         }
-    }, [loadOnMount, displayText, loadText]);
+    }, [objectId, initialText, loadOnMount, loadText]);
 
     return {
         fullText,

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

@@ -1,4 +1,4 @@
-import { Button, DialogDescription, Heading, Portal, useToast, VModal, VModalBody, VModalFooter, VModalTitle, VTabs, VTabsBar, VTabsPanel } from "@vertesia/ui/core";
+import { Button, DialogDescription, Heading, Portal, useToast, Modal, ModalBody, ModalFooter, ModalTitle, Tabs, TabsBar, TabsPanel } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { useCallback, useState } from "react";
 import { CreateCollectionForm, SelectCollection } from "../../../collections";
@@ -41,17 +41,17 @@ interface SelectCollectionModalProps {
 }
 function SelectCollectionModal({ isOpen, onClose, objectIds }: SelectCollectionModalProps) {
     return (
-        <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">
+        <Modal isOpen={isOpen} onClose={onClose} className="max-w-lg w-full min-w-0 overflow-hidden">
+            <ModalTitle className="flex flex-col min-w-0 overflow-hidden">
                 Add to a Collection
-            </VModalTitle>
+            </ModalTitle>
             <DialogDescription className="min-w-0 overflow-hidden">
                 Add the selected objects to an existing collection or create a new one.
             </DialogDescription>
             <div className="min-w-0 max-w-full overflow-hidden">
                 <AddToCollectionForm onClose={onClose} objectIds={objectIds} />
             </div>
-        </VModal>
+        </Modal>
     )
 }
 
@@ -102,19 +102,19 @@ function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
             content: (
                 <div className="p-4 min-w-0 max-w-full overflow-hidden">
                     <Heading level={5}>Choose from existing collections</Heading>
-                    <VModalBody className="min-w-0 max-w-full overflow-hidden">
+                    <ModalBody 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>
+                    </ModalBody>
+                    <ModalFooter>
                         <Button
                             isDisabled={!selectedCollectionId}
                             onClick={() => selectedCollectionId && onAddToCollection({ collectionId: selectedCollectionId })}
                         >
                             Add to Collection
                         </Button>
-                    </VModalFooter>
+                    </ModalFooter>
                 </div>
             )
         },
@@ -129,9 +129,9 @@ function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
     ];
 
     return (
-        <VTabs defaultValue="select" tabs={tabs} fullWidth>
-            <VTabsBar />
-            <VTabsPanel />
-        </VTabs>
+        <Tabs defaultValue="select" tabs={tabs} fullWidth>
+            <TabsBar />
+            <TabsPanel />
+        </Tabs>
     )
 }

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

@@ -1,5 +1,5 @@
 import { useUserSession } from "@vertesia/ui/session";
-import { Button, VModal, VModalBody, VModalFooter, VModalTitle, SelectList, useToast } from "@vertesia/ui/core";
+import { Button, Modal, ModalBody, ModalFooter, ModalTitle, SelectList, useToast } from "@vertesia/ui/core";
 import { useCallback, useState } from "react";
 import { useObjectsActionCallback, useObjectsActionContext } from "../ObjectsActionContext";
 import { ActionComponentTypeProps, ObjectsActionSpec } from "../ObjectsActionSpec";
@@ -60,10 +60,10 @@ interface StartWorkflowModalProps {
 }
 function StartWorkflowModal({ isOpen, onClose }: StartWorkflowModalProps) {
     return (
-        <VModal onClose={() => onClose(undefined)} isOpen={isOpen} className="">
-            <VModalTitle>Start a Workflow by Rule</VModalTitle>
+        <Modal onClose={() => onClose(undefined)} isOpen={isOpen} className="">
+            <ModalTitle>Start a Workflow by Rule</ModalTitle>
             <StartWorkflowBody onClose={onClose} />
-        </VModal>
+        </Modal>
     );
 }
 
@@ -98,7 +98,7 @@ function StartWorkflowBody({ onClose }: StartWorkflowBodyProps) {
 
     return (
         <div>
-            <VModalBody>
+            <ModalBody>
                 <div className="pb-2">Choose a workflow rule to start:</div>
                 <div className="max-h-[420px] overflow-y-scroll border-border border rounded-md">
                     <SelectList
@@ -108,15 +108,15 @@ function StartWorkflowBody({ onClose }: StartWorkflowBodyProps) {
                         value={selected}
                     />
                 </div>
-            </VModalBody>
-            <VModalFooter>
+            </ModalBody>
+            <ModalFooter>
                 <Button variant="secondary" onClick={() => onClose()}>
                     Cancel
                 </Button>
                 <Button onClick={onStart} isDisabled={!selected}>
                     Start
                 </Button>
-            </VModalFooter>
+            </ModalFooter>
         </div>
     );
 }