@vertesia/ui 0.74.0 → 0.77.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "0.74.0",
+  "version": "0.77.0",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -43,6 +43,7 @@
     "debounce": "^2.2.0",
     "fast-xml-parser": "^5.2.3",
     "firebase": "^10.12.2",
+    "framer-motion": "^12.23.12",
     "json-schema": "^0.4.0",
     "jwt-decode": "^4.0.0",
     "lodash-es": "^4.17.21",
@@ -58,9 +59,10 @@
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.0",
     "ts-md5": "^1.3.1",
-    "@vertesia/common": "0.74.0",
-    "@vertesia/client": "0.74.0",
-    "@vertesia/json": "0.74.0"
+    "unist-util-visit": "^5.0.0",
+    "@vertesia/client": "0.77.0",
+    "@vertesia/common": "0.77.0",
+    "@vertesia/json": "0.77.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",

package/src/core/components/Center.tsx

@@ -7,6 +7,6 @@ interface CenterProps {
 }
 export function Center({ className, children }: CenterProps) {
     return (
-        <div className={clsx('flex items-ceter justify-center', className)}>{children}</div>
+        <div className={clsx('flex items-center justify-center', className)}>{children}</div>
     )
 }

package/src/core/components/Overlay.tsx

@@ -0,0 +1,129 @@
+import { motion } from "framer-motion"
+import { X } from "lucide-react"
+import { useState, ReactNode } from "react"
+
+import { Button } from "./Button"
+
+interface OverlayProps {
+    children: ReactNode
+    overlayContent: ReactNode
+    className?: string
+    overlayClassName?: string
+    position?: 'left' | 'right' | 'top' | 'bottom' | 'center'
+    width?: string
+    height?: string
+    showCloseButton?: boolean
+    closeButtonTooltip?: string
+    onOpen?: () => void
+    onClose?: () => void
+    triggerClassName?: string
+    backdropClassName?: string
+    animationConfig?: {
+        type?: "spring" | "tween"
+        stiffness?: number
+        damping?: number
+        duration?: number
+    }
+}
+export function Overlay({
+    children,
+    overlayContent,
+    className = "",
+    overlayClassName = "",
+    position = 'right',
+    width,
+    height,
+    showCloseButton = true,
+    onOpen,
+    onClose,
+    triggerClassName = "",
+    backdropClassName = "",
+    animationConfig = { type: "spring", stiffness: 300, damping: 30 }
+}: Readonly<OverlayProps>) {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const handleOpen = () => {
+        setIsOpen(true)
+        onOpen?.()
+    }
+
+    const handleClose = () => {
+        setIsOpen(false)
+        onClose?.()
+    }
+
+    const animationProps = getAnimationProps(position)
+    const positionClasses = getPositionClasses(position, width, height)
+
+    return (
+        <div className={`flex items-center justify-center w-full ${className}`}>
+            <div onClick={handleOpen} className={`w-full align-left cursor-pointer ${triggerClassName}`}>
+                {children}
+            </div>
+            {
+                isOpen && (
+                    <div className={`z-45 fixed inset-0 bg-black bg-opacity-50 ${backdropClassName}`}>
+                        <motion.div
+                            {...animationProps}
+                            transition={animationConfig}
+                            className={`${positionClasses} ${overlayClassName}`}
+                        >
+                            {
+                                showCloseButton && (
+                                    <div className="absolute top-2 right-2 z-10">
+                                        <Button onClick={handleClose} variant="primary">
+                                            <X />
+                                        </Button>
+                                    </div>
+                                )
+                            }
+                            <div className={showCloseButton ? "mt-8" : ""}>
+                                {overlayContent}
+                            </div>
+                        </motion.div>
+                    </div>
+                )
+            }
+        </div>
+    )
+}
+
+function getAnimationProps(position: string) {
+    switch (position) {
+        case 'left':
+            return { initial: { x: "-100%" }, animate: { x: 0 }, exit: { x: "-100%" } }
+        case 'right':
+            return { initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" } }
+        case 'top':
+            return { initial: { y: "-100%" }, animate: { y: 0 }, exit: { y: "-100%" } }
+        case 'bottom':
+            return { initial: { y: "100%" }, animate: { y: 0 }, exit: { y: "100%" } }
+        case 'center':
+            return {
+                initial: { opacity: 0, scale: 0.8 },
+                animate: { opacity: 1, scale: 1 },
+                exit: { opacity: 0, scale: 0.8 }
+            }
+        default:
+            return { initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" } }
+    }
+}
+
+function getPositionClasses(position: string, width?: string, height?: string) {
+    const baseClasses = "fixed bg-white shadow-lg p-4 relative"
+
+    switch (position) {
+        case 'left':
+            return `${baseClasses} left-0 top-[var(--header-height)] h-full ${width || 'w-80'}`
+        case 'right':
+            return `${baseClasses} right-0 top-[var(--header-height)] h-full ${width || 'w-80'}`
+        case 'top':
+            return `${baseClasses} top-[var(--header-height)] left-0 right-0 ${height || 'h-80'}`
+        case 'bottom':
+            return `${baseClasses} bottom-0 left-0 right-0 ${height || 'h-80'}`
+        case 'center':
+            return `${baseClasses} top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 ${width || 'w-96'} ${height || 'max-h-96'}`
+        default:
+            return `${baseClasses} right-0 top-[var(--header-height)] h-full ${width || 'w-80'}`
+    }
+}

package/src/core/components/SidePanel.tsx

@@ -1,7 +1,5 @@
-
-
-import { useState, Fragment } from 'react';
-import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { X } from 'lucide-react';
 import { Button } from './shadcn/button';
 
@@ -10,16 +8,18 @@ interface SidePanelProps {
     onClose: () => void;
     children: React.ReactNode;
     title?: string;
+    panelWidth?: number;
+    backdrop?: boolean;
 }
-export function SidePanel({ isOpen, title, onClose, children }: SidePanelProps) {
-    const [panelWidth, setPanelWidth] = useState(768);
+export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false }: SidePanelProps) {
+    const [_panelWidth, setPanelWidth] = useState(panelWidth);
 
     const handleDragStart = (e: React.MouseEvent) => {
         e.preventDefault();
 
         let isDragging = true;
         const startX = e.pageX;
-        const startWidth = panelWidth;
+        const startWidth = _panelWidth;
 
         const handleMouseMove = (e: MouseEvent) => {
             if (isDragging) {
@@ -40,25 +40,30 @@ export function SidePanel({ isOpen, title, onClose, children }: SidePanelProps)
     };
 
     return (
-        <Transition show={isOpen} as={Fragment}>
-            <Dialog as="div" className="relative z-10" onClose={onClose}>
-                <div className="fixed inset-y-0 right-0" />
-                <div className="fixed inset-y-0 right-0 overflow-hidden">
-                    <div className="absolute inset-0 overflow-hidden">
-                        <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
-                            <TransitionChild
-                                as={Fragment}
-                                enter="transform transition ease-in-out duration-500 sm:duration-700"
-                                enterFrom="translate-x-full"
-                                enterTo="translate-x-0"
-                                leave="transform transition ease-in-out duration-500 sm:duration-700"
-                                leaveFrom="translate-x-0"
-                                leaveTo="translate-x-full"
-                                unmount={true}
-                            >
-                                <DialogPanel
+        <AnimatePresence>
+            {isOpen && (
+                <div className="relative z-20">
+                    {/* Backdrop */}
+                    {backdrop && (
+                        <motion.div
+                            className="fixed inset-0 bg-black/70"
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            onClick={onClose}
+                        />
+                    )}
+                    
+                    <div className="fixed inset-y-0 right-0 overflow-hidden">
+                        <div className="absolute inset-0 overflow-hidden">
+                            <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
+                                <motion.div
                                     className="pointer-events-auto border-l"
-                                    style={{ width: `${panelWidth}px` }}
+                                    style={{ width: `${_panelWidth}px` }}
+                                    initial={{ x: "100%" }}
+                                    animate={{ x: 0 }}
+                                    exit={{ x: "100%" }}
+                                    transition={{ type: "spring", stiffness: 300, damping: 30 }}
                                 >
                                     <div className="relative flex h-full">
                                         {/* Drag Handle */}
@@ -67,28 +72,28 @@ export function SidePanel({ isOpen, title, onClose, children }: SidePanelProps)
                                             onMouseDown={handleDragStart}
                                         />
                                         <div className="flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-6 shadow-xl">
-                                            <div className="px-4 sm:px-6">
+                                            <div className="px-2 sm:px-4">
                                                 <div className="flex items-start justify-between">
-                                                    <DialogTitle className="w-full text-base font-semibold leading-6">
+                                                    <h2 className="w-full text-base font-semibold leading-6">
                                                         <div className="text-2xl">{title ?? ""}</div>
-                                                    </DialogTitle>
+                                                    </h2>
                                                     <div className="ml-3 flex h-7 items-center">
                                                         <CloseButton onClose={onClose} />
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div className="px-4 sm:px-6">
+                                            <div className="px-2 sm:px-4">
                                                 {children}
                                             </div>
                                         </div>
                                     </div>
-                                </DialogPanel>
-                            </TransitionChild>
+                                </motion.div>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </Dialog>
-        </Transition>
+            )}
+        </AnimatePresence>
     );
 }
 

package/src/core/components/index.ts

@@ -17,6 +17,7 @@ export * from "./MenuList.js";
 export * from "./MessageBox.js";
 export * from "./Modal.js";
 export * from "./NumberInput.js";
+export * from "./Overlay.js";
 export * from "./popup/index.js";
 export * from "./Portal.js";
 export * from "./RadioGroup.js";

package/src/core/components/shadcn/tabs.tsx

@@ -44,15 +44,58 @@ const VTabs = ({
   responsive = false,
   variant = "tabs"
 }: TabsProps) => {
-  const currentValue = typeof current === 'function' ? current() : current || defaultValue;
+  // Initialize value
+  const [value, setValue] = React.useState(() => {
+    // First check if current is provided
+    const currentValue = typeof current === 'function' ? current() : current;
+    if (currentValue) {
+      return currentValue;
+    }
 
-  const [value, setValue] = React.useState(currentValue);
+    // Then check hash
+    const hash = window.location.hash;
+    const currentTab = hash ? hash.substring(1) : undefined;
+    
+    // Check if the tab from hash exists in tabs
+    if (currentTab && tabs.some(tab => tab.name === currentTab)) {
+      return currentTab;
+    }
+    
+    // Fall back to default or first tab
+    return defaultValue || tabs[0]?.name;
+  });
 
+  // Update when current prop changes (but don't create a loop)
   React.useEffect(() => {
-    if (currentValue) {
+    const currentValue = typeof current === 'function' ? current() : current;
+    if (currentValue && currentValue !== value) {
       setValue(currentValue);
     }
-  }, [currentValue]);
+  }, [current]);
+
+  // Listen to hash changes only when there's no current prop being controlled externally
+  React.useEffect(() => {
+    if (current) return; // Skip hash handling if controlled by parent
+
+    const handleHashChange = () => {
+      const hash = window.location.hash;
+      const currentTab = hash ? hash.substring(1) : undefined;
+      
+      // Only update if the tab exists in tabs
+      if (currentTab && tabs.some(tab => tab.name === currentTab)) {
+        setValue(currentTab);
+      } else if (!hash && defaultValue) {
+        // If no hash, fall back to default
+        setValue(defaultValue);
+      }
+    };
+
+    // Check initial hash
+    handleHashChange();
+
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, [current, tabs, defaultValue]);
 
   const handleValueChange = (newValue: string) => {
     setValue(newValue);
@@ -68,7 +111,7 @@ const VTabs = ({
   return (
     <TabsContext.Provider value={{ tabs, size: fullWidth ? tabs.length : 0, current: value, setTab, responsive: responsive, variant }}>
       <TabsPrimitive.Root
-        defaultValue={tabs[0]?.name}
+        defaultValue={value || tabs[0]?.name}
         value={value}
         onValueChange={handleValueChange}
         className={className}

package/src/env/index.ts

@@ -13,7 +13,7 @@ export interface EnvProps {
         zeno: string,
         studio: string,
     },
-    firebase: {
+    firebase?: {
         apiKey: string,
         authDomain: string,
         projectId: string,

package/src/features/agent/PayloadBuilder.tsx

@@ -129,8 +129,14 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
         if (environment?.id !== this.payload.config.environment?.id) {
             this.payload.config.environment = environment;
             if (!this._preserveRunValues) {
-                this.payload.config.model = environment?.default_model && supportsToolUse(environment.default_model, environment.provider)
-                    ? environment.default_model : undefined;
+                // First try to use the interaction model, then the environment default model
+                const interactionModel = this.payload.interaction?.model;
+                if (interactionModel && environment && supportsToolUse(interactionModel, environment.provider)) {
+                    this.payload.config.model = interactionModel;
+                } else {
+                    this.payload.config.model = environment?.default_model && supportsToolUse(environment.default_model, environment.provider)
+                        ? environment.default_model : undefined;
+                }
             }
 
             this.onStateChanged();

package/src/features/facets/DocumentsFacetsNav.tsx

@@ -42,7 +42,8 @@ export function useDocumentFilterGroups(facets: DocumentsFacetsNavProps['facets'
         const statusFilterGroup = VStringFacet({
             search: null as any, // This will be provided by the search context
             buckets: facets.status || [],
-            name: 'Status',
+            name: 'status',
+            placeholder: 'Status',
             type: 'select',
             multiple: true
         });
@@ -51,7 +52,8 @@ export function useDocumentFilterGroups(facets: DocumentsFacetsNavProps['facets'
 
     if (facets.tags) {
         customFilterGroups.push({
-            name: 'Tags',
+            name: 'tags',
+            placeholder: 'Tags',
             type: 'stringList',
             options: facets.tags.map((tag: string) => ({
                 label: tag,

package/src/features/facets/VTypeFacet.tsx

@@ -41,7 +41,8 @@ export function VTypeFacet({ buckets, typeRegistry, type = 'select', multiple =
     });
 
     const customFilterGroups: FilterGroup = {
-        name: 'Types',
+        name: 'types',
+        placeholder: 'Types',
         type: type,
         multiple: multiple,
         options: options,

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

@@ -1,7 +1,5 @@
-import { JSONCode, Theme, XMLViewer } from '@vertesia/ui/widgets';
+import { JSONCode, Theme, XMLViewer, MarkdownRenderer } 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";
 
@@ -16,6 +14,7 @@ const darkTheme: Theme = {
     cdataColor: "#33CC66",
 }
 
+
 interface TextPageViewProps {
     pageNumber: number;
     viewType: ViewType;
@@ -86,7 +85,7 @@ function MarkdownPageView({ pageNumber }: MarkdownPageViewProps) {
     }, [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>}
+            {content ? <MarkdownRenderer>{content}</MarkdownRenderer> : <div>No markdown content available</div>}
         </div>
     )
 }

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

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

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

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

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

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

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

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