@vertesia/ui 1.0.0-dev.20260227.112605Z → 1.0.0-dev.20260331.091034Z

package/src/shell/login/TerminalLogin.tsx

@@ -1,10 +1,10 @@
-import { useState } from 'react'
-
 import { AccountRef, ProjectRef } from '@vertesia/common'
 import { Button, Center, ErrorBox, Input, SelectBox, Spinner, useFetch, useToast } from '@vertesia/ui/core'
 import { Env } from "@vertesia/ui/env"
 import { useLocation } from "@vertesia/ui/router"
 import { fetchComposableTokenFromFirebaseToken, useUserSession } from '@vertesia/ui/session'
+import { useState } from 'react'
+import { useUITranslation } from '../../i18n/index.js'
 
 interface ProfileData {
     profile?: string
@@ -82,13 +82,14 @@ export function TerminalLogin() {
     const location = useLocation()
     const clientInfo = getClientInfo(location)
     const toast = useToast()
+    const { t } = useUITranslation()
 
     const onAccept = async (data: ProfileData) => {
         if (!clientInfo) return
         if (!data.profile) {
             toast({
-                title: 'Profile is required',
-                description: 'Please enter a profile name to save the client authorization',
+                title: t('login.terminal.profileRequired'),
+                description: t('login.terminal.profileRequiredDesc'),
                 status: 'error',
                 duration: 2000
             })
@@ -96,8 +97,8 @@ export function TerminalLogin() {
         }
         if (!data.account) {
             toast({
-                title: 'Account is required',
-                description: 'Please select an account to authorize the client to access the ComposablePrompts servers',
+                title: t('login.terminal.accountRequired'),
+                description: t('login.terminal.accountRequiredDesc'),
                 status: 'error',
                 duration: 2000
             })
@@ -105,8 +106,8 @@ export function TerminalLogin() {
         }
         if (!data.project) {
             toast({
-                title: 'Project is required',
-                description: 'Please select a project to authorize the client to access the ComposablePrompts servers',
+                title: t('login.terminal.projectRequired'),
+                description: t('login.terminal.projectRequiredDesc'),
                 status: 'error',
                 duration: 2000
             })
@@ -134,7 +135,7 @@ export function TerminalLogin() {
                 setPayload(payload)
             } else {
                 toast({
-                    title: 'Failed to get composable token',
+                    title: t('login.terminal.failedToGetToken'),
                     status: 'error',
                     duration: 5000
                 })
@@ -145,7 +146,7 @@ export function TerminalLogin() {
                 setPayload(payload)
             } else {
                 toast({
-                    title: 'Error authorizing client',
+                    title: t('login.terminal.errorAuthorizingClient'),
                     description: err.message,
                     status: 'error',
                     duration: 5000
@@ -156,7 +157,7 @@ export function TerminalLogin() {
 
     const getPageContent = () => {
         if (!clientInfo) {
-            return <ErrorBox title='Invalid request'>This page should be called by a terminal client to authenticate against the ComposablePrompts servers</ErrorBox>
+            return <ErrorBox title={t('login.terminal.invalidRequest')}>{t('login.terminal.invalidRequestDesc')}</ErrorBox>
         }
 
         return payload
@@ -178,19 +179,19 @@ interface AuthAcceptScreenProps {
 function AuthAcceptScreen({ onAccept, clientInfo }: Readonly<AuthAcceptScreenProps>) {
     const { client, user } = useUserSession()
     const { data: allProjects, error } = useFetch(() => user ? client.projects.list() : Promise.resolve([]), [user])
-
+    const { t } = useUITranslation()
 
     if (error) {
-        return <ErrorBox title='Error loading projects'>{error.message}</ErrorBox>
+        return <ErrorBox title={t('login.terminal.errorLoadingProjects')}>{error.message}</ErrorBox>
     }
 
     const getEnvironmentName = () => {
         if (Env.isLocalDev) {
-            return "Local Dev"
+            return t('login.terminal.envLocalDev')
         } else if (Env.isDev) {
-            return "Staging"
+            return t('login.terminal.envStaging')
         }
-        return "Production"
+        return t('login.terminal.envProduction')
     }
 
     const envName = getEnvironmentName()
@@ -202,12 +203,12 @@ function AuthAcceptScreen({ onAccept, clientInfo }: Readonly<AuthAcceptScreenPro
                     Authorizing client on {envName} environment.
                 </div>
                 <div className='mb-2 text-md text-muted-foreground'>
-                    <div>A client app wants authorization to access the composable prompt servers in your name.</div>
+                    <div>{t('login.terminal.clientWantsAuth')}</div>
                     <div>The client app code is <b className="text-foreground">{clientInfo.code}</b>. You can check if the code is correct in the terminal.</div>
                 </div>
                 <div className='mb-2 text-sm text-muted-foreground'>
-                    <div>You must choose the target account and project for the client to access.</div>
-                    <div>Also, enter a profile name that will be used to save the authorization in your client configuration.</div>
+                    <div>{t('login.terminal.chooseAccountProject')}</div>
+                    <div>{t('login.terminal.profileNameNote')}</div>
                 </div>
             </div>
             <ProfileForm onAccept={onAccept} allProjects={allProjects} data={clientInfo} />
@@ -217,12 +218,13 @@ function AuthAcceptScreen({ onAccept, clientInfo }: Readonly<AuthAcceptScreenPro
 
 function AuthDoneScreen({ payload, error }: Readonly<{ payload: LoginResult, error?: Error }>) {
     const toast = useToast()
+    const { t } = useUITranslation()
     const onCopy = () => {
         if (payload) {
             navigator.clipboard.writeText(JSON.stringify(payload))
             toast({
-                title: 'Authentication Payload copied',
-                description: error ? 'You can paste the authentication payload in the terminal to authenticate the client.' : 'You can close the page now.',
+                title: t('login.terminal.authPayloadCopied'),
+                description: error ? t('login.terminal.authPayloadCopiedWithError', { error: error.message }) : t('login.terminal.authPayloadCopiedSuccess'),
                 status: 'success',
                 duration: 5000
             })
@@ -234,14 +236,12 @@ function AuthDoneScreen({ payload, error }: Readonly<{ payload: LoginResult, err
             {
                 error ?
                     <div>
-                        <ErrorBox title='Failed to send the authorization token to the cli tool'>This can happen due to security checks on Safari. The error is &quot;{error.message}&quot;</ErrorBox>
-                        <div>Don&apos;t worry, you can still authenticate the cli tool by pasting the authentication token in the terminal.
-                            You can close this page.</div>
+                        <ErrorBox title={t('login.terminal.failedToSendToken')}>{t('login.terminal.failedToSendTokenDesc', { error: error.message })}</ErrorBox>
                     </div>
-                    : <div>The client is authenticated. You can close this page.</div>
+                    : <div>{t('login.terminal.clientAuthenticated')}</div>
             }
             <Center className="mt-4">
-                <Button variant='secondary' onClick={onCopy}>Copy the Authentication Payload</Button>
+                <Button variant='secondary' onClick={onCopy}>{t('login.terminal.copyAuthPayload')}</Button>
             </Center>
         </div>
     )
@@ -254,6 +254,7 @@ interface ProfileFormProps {
 }
 function ProfileForm({ allProjects, data, onAccept }: Readonly<ProfileFormProps>) {
     const { accounts, account, project } = useUserSession()
+    const { t } = useUITranslation()
     const [currentData, setCurrentData] = useState<ProfileData>(() => ({
         profile: data.profile,
         account: data.account ?? account?.id,
@@ -277,22 +278,22 @@ function ProfileForm({ allProjects, data, onAccept }: Readonly<ProfileFormProps>
     return (
         <div className='w-1/3'>
             <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-muted-foreground">Profile Name</span>
+                <span className="font-semibold text-muted-foreground">{t('login.terminal.profileName')}</span>
                 <Input type='text' value={currentData.profile} onChange={onChangeProfile} />
             </div>
             <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-muted-foreground">Account</span>
+                <span className="font-semibold text-muted-foreground">{t('login.terminal.account')}</span>
                 <SelectAccount value={currentData.account} onChange={onChangeAccount} accounts={accounts || []} />
             </div>
             <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-muted-foreground">Project</span>
+                <span className="font-semibold text-muted-foreground">{t('login.terminal.project')}</span>
                 <SelectProject value={currentData.project} onChange={onChangeProject} projects={projects} />
             </div>
             <div className='mb-4 text-sm text-attention'>
-                <b>Note:</b> If your browser asks for permission to access your local network, please allow it. This is required to send the authorization token back to the CLI tool. If not, you will need to copy/paste the token manually in your terminal.
+                {t('login.terminal.browserPermissionNote')}
             </div>
             <div>
-                <Button size='xl' onClick={() => onAccept(currentData)}>Authorize Client</Button>
+                <Button size='xl' onClick={() => onAccept(currentData)}>{t('login.terminal.authorizeClient')}</Button>
             </div>
         </div>
     )
@@ -304,6 +305,7 @@ interface SelectAccountProps {
     onChange: (value: AccountRef) => void
 }
 function SelectAccount({ value, accounts, onChange }: Readonly<SelectAccountProps>) {
+    const { t } = useUITranslation()
     const _onChange = (value: AccountRef) => {
         onChange(value)
     }
@@ -313,7 +315,7 @@ function SelectAccount({ value, accounts, onChange }: Readonly<SelectAccountProp
         onChange={_onChange}
         by="id"
         optionLabel={(option) => option.name}
-        placeholder='Select Account'
+        placeholder={t('login.terminal.selectAccount')}
     />
 }
 
@@ -323,6 +325,7 @@ interface SelectProjectProps {
     onChange: (value: ProjectRef) => void
 }
 function SelectProject({ value, projects, onChange }: Readonly<SelectProjectProps>) {
+    const { t } = useUITranslation()
     const _onChange = (value: ProjectRef) => {
         onChange(value)
     }
@@ -332,7 +335,7 @@ function SelectProject({ value, projects, onChange }: Readonly<SelectProjectProp
             value={projects.find(p => p.id === value)}
             options={projects}
             optionLabel={(option) => option.name}
-            placeholder='Select Project'
+            placeholder={t('login.terminal.selectProject')}
             onChange={_onChange} />
     )
 }

package/src/shell/login/UserInfo.tsx

@@ -5,6 +5,7 @@ import { useUserSession } from "@vertesia/ui/session";
 // Package version is now passed as prop from the consuming application
 import { Check, CopyIcon } from "lucide-react";
 import { useState } from "react";
+import { useUITranslation } from '../../i18n/index.js';
 
 export function InfoItems({ title, value }: { title: string, value: string }) {
     function copyToClipboard(value: string) {
@@ -32,6 +33,7 @@ export function InfoItems({ title, value }: { title: string, value: string }) {
 }
 
 export default function InfoList() {
+    const { t } = useUITranslation();
 
     const session = useUserSession();
     const { account, project, client, authToken } = session;
@@ -42,27 +44,27 @@ export default function InfoList() {
     const tabs = [
         {
             name: 'user',
-            label: 'User',
+            label: t('user.user'),
             content:
                 <div className="space-y-1 p-2">
-                    <InfoItems title="Organization ID" value={account?.id ?? 'Unknown'} />
-                    <InfoItems title="Project ID" value={project?.id ?? 'Unknown'} />
-                    <InfoItems title="User ID" value={authToken?.sub ?? 'Unknown'} />
-                    <InfoItems title="Organization Roles" value={authToken?.account_roles?.join(',') ?? 'Unknown'} />
-                    <InfoItems title="Project Roles" value={authToken?.project_roles?.join(',') ?? 'Unknown'} />
+                    <InfoItems title={t('user.organizationId')} value={account?.id ?? t('user.unknown')} />
+                    <InfoItems title={t('user.projectId')} value={project?.id ?? t('user.unknown')} />
+                    <InfoItems title={t('user.userId')} value={authToken?.sub ?? t('user.unknown')} />
+                    <InfoItems title={t('user.organizationRoles')} value={authToken?.account_roles?.join(',') ?? t('user.unknown')} />
+                    <InfoItems title={t('user.projectRoles')} value={authToken?.project_roles?.join(',') ?? t('user.unknown')} />
                 </div>
         },
         {
             name: 'environment',
-            label: 'Environment',
+            label: t('user.environment'),
             content:
                 <div className="space-y-1 p-2">
-                    <InfoItems title="Tenant ID" value={tenantId} />
-                    <InfoItems title="Environment" value={Env.type} />
-                    <InfoItems title="Server" value={server} />
-                    <InfoItems title="Store" value={store} />
-                    <InfoItems title="App Version" value={Env.version} />
-                    <InfoItems title="SDK Version" value={Env.sdkVersion || 'unknown'} />
+                    <InfoItems title={t('user.tenantId')} value={tenantId} />
+                    <InfoItems title={t('user.environment')} value={Env.type} />
+                    <InfoItems title={t('user.server')} value={server} />
+                    <InfoItems title={t('user.store')} value={store} />
+                    <InfoItems title={t('user.appVersion')} value={Env.version} />
+                    <InfoItems title={t('user.sdkVersion')} value={Env.sdkVersion || t('user.unknown')} />
                 </div>
         }
     ];

package/src/shell/login/UserSessionMenu.tsx

@@ -1,7 +1,6 @@
 import { AuthTokenPayload, Permission } from "@vertesia/common";
-import { Avatar, Button, MenuList, ModeToggle, Spinner } from "@vertesia/ui/core";
+import { Avatar, Button, MenuList, ModeToggle, Popover, PopoverContent, PopoverTrigger, Spinner } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
-import { Popover } from "@vertesia/ui/widgets";
 import clsx from "clsx";
 import { useState } from "react";
 import SignInModal from "./SignInModal";
@@ -48,8 +47,8 @@ function UserSessionPopup({ className, asMenuTrigger = false }: UserSessionPopup
     const isProjectManager = perms.hasPermission(Permission.project_admin);
 
     return (
-        <Popover strategy='fixed' placement='bottom-start' zIndex={100}>
-            <Popover.Trigger click>
+        <Popover click>
+            <PopoverTrigger>
                 <div className={clsx(className, "flex items-center justify-start", asMenuTrigger && "cursor-pointer")}>
                     <Avatar
                         size='sm'
@@ -58,35 +57,33 @@ function UserSessionPopup({ className, asMenuTrigger = false }: UserSessionPopup
                         /*src={picture} */
                         name={user?.name} />
                 </div>
-            </Popover.Trigger>
-            <Popover.Content className="w-[280px] mx-2 my-1">
-                <div className="bg-white dark:bg-slate-900 shadow-lg rounded-md ring-1 ring-gray-200 dark:ring-slate-700">
-                    <div className='divide-y divide-gray-200 dark:divide-slate-700'>
-                        <div className='py-2 pl-2'>
-                            <p className="px-4 dark:text-white mb-1">{user?.name ?? 'Unknown'}</p>
-                            <p className="px-4 text-xs text-gray-500">{user?.email ?? ''}</p>
-                        </div>
-                        <div className="w-full p-1" >
-                            <InfoList />
-                        </div>
-                        <div className='py-2 pl-2'>
-                            <ModeToggle />
-                        </div>
-                        <div className='py-2'>
-                            <MenuList>
-                                {isProjectManager && (
-                                    <MenuList.Item className='px-2' onClick={() => navigate('/settings', { replace: true })}>
-                                        Settings
-                                    </MenuList.Item>
-                                )}
-                                <MenuList.Item className='px-2' onClick={() => session.logout()}>
-                                    Sign out
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-[280px] mx-2 my-1 p-0">
+                <div className='divide-y divide-gray-200 dark:divide-slate-700'>
+                    <div className='py-2 pl-2'>
+                        <p className="px-4 dark:text-white mb-1">{user?.name ?? 'Unknown'}</p>
+                        <p className="px-4 text-xs text-gray-500">{user?.email ?? ''}</p>
+                    </div>
+                    <div className="w-full p-1" >
+                        <InfoList />
+                    </div>
+                    <div className='py-2 pl-2'>
+                        <ModeToggle />
+                    </div>
+                    <div className='py-2'>
+                        <MenuList>
+                            {isProjectManager && (
+                                <MenuList.Item className='px-2' onClick={() => navigate('/settings', { replace: true })}>
+                                    Settings
                                 </MenuList.Item>
-                            </MenuList>
-                        </div>
-                    </div >
+                            )}
+                            <MenuList.Item className='px-2' onClick={() => session.logout()}>
+                                Sign out
+                            </MenuList.Item>
+                        </MenuList>
+                    </div>
                 </div >
-            </Popover.Content>
+            </PopoverContent>
         </Popover>
     )
 }

package/src/widgets/index.ts

@@ -2,7 +2,6 @@ export * from "./monacoEditor/index.js";
 export * from "./form/index.js";
 export * from "./json-view/index.js";
 export * from "./markdown/index.js";
-export * from "./popover/index.js";
 export * from "./Progress.js";
 export * from "./properties/index.js";
 export * from "./schema-editor/index.js";

package/src/widgets/json-view/JSONCode.tsx

@@ -17,7 +17,7 @@ export function JSONCode({ data, className }: { data: any; className?: string })
     }, [data]);
 
     return (
-        <div className={`h-full ${className || ''}`}>
+        <div className={`h-full pb-2 mb-2 ${className || ''}`}>
             <MonacoEditor
                 value={jsonString}
                 language="json"

package/src/widgets/json-view/JSONDisplay.tsx

@@ -1,4 +1,5 @@
 import type { JSONObject } from "@vertesia/json";
+import { useUITranslation } from "@vertesia/ui/i18n";
 
 import { JSONCode } from './JSONCode.js';
 import { JSONView } from './JSONView.js';
@@ -9,16 +10,20 @@ interface JSONDisplayProps {
     viewCode?: boolean;
 }
 export function JSONDisplay({ value, viewCode = false }: JSONDisplayProps) {
+    const { t } = useUITranslation();
 
     if (!value) {
         return (
-            <pre className="whitespace-pre-wrap">No Data to display</pre>
+            <pre className="whitespace-pre-wrap">{t('misc.noData')}</pre>
         );
     }
 
     return (
-        <div className='relative w-full h-full'>
-            {viewCode ? <JSONCode data={value} /> : <JSONView value={value} />}
+        <div className='relative w-full h-full flex flex-col'>
+            {viewCode
+                ? <JSONCode data={value} />
+                : <div className="flex-1 min-h-0 overflow-auto"><JSONView value={value} /></div>
+            }
         </div>
     )
 }

package/src/widgets/json-view/JSONSwitcher.tsx

@@ -0,0 +1,24 @@
+import { Button } from "@vertesia/ui/core";
+
+export function JSONSwitcher({ title, viewCode, setViewCode }: { title: string, viewCode: boolean, setViewCode: (value: boolean) => void }) {
+    return (
+        <div className="flex items-center gap-1 bg-muted mb-2 p-1 rounded">
+            <Button
+                variant={viewCode ? "ghost" : "primary"}
+                size="sm"
+                alt="Preview properties"
+                onClick={() => setViewCode(false)}
+            >
+                {title}
+            </Button>
+            <Button
+                variant={viewCode ? "primary" : "ghost"}
+                size="sm"
+                alt="View in JSON format"
+                onClick={() => setViewCode(true)}
+            >
+                JSON
+            </Button>
+        </div>
+    );
+}

package/src/widgets/json-view/JSONView.tsx

@@ -9,7 +9,7 @@ interface JSONViewProps {
     value: JSONObject;
 }
 export function JSONView({ value }: JSONViewProps) {
-    return <div className="flex flex-col gap-4">
+    return <div className="flex flex-col gap-4 px-2 h-full overflow-auto">
         {
             Object.entries(value).map(([key, value]) =>
                 <PropertyElement key={key} name={key} value={value as JSONValue} />

package/src/widgets/json-view/index.ts

@@ -2,3 +2,4 @@ export type * from "./types.js";
 export * from "./JSONCode.js";
 export * from "./JSONDisplay.js";
 export * from "./JSONView.js";
+export * from "./JSONSwitcher.js";

package/src/widgets/markdown/ArtifactContentRenderer.tsx

@@ -4,13 +4,13 @@
  * Supports rendering charts, tables, markdown, fusion fragments, and more.
  */
 
-import { useMemo, type ReactElement } from 'react';
+import { FusionFragmentHandler, FusionFragmentProvider } from '@vertesia/fusion-ux';
 import DOMPurify from 'dompurify';
-import { CodeBlockPlaceholder, CodeBlockErrorBoundary } from './CodeBlockPlaceholder';
+import { useMemo, type ReactElement } from 'react';
 import { type VegaLiteChartSpec } from '../../features/agent/chat/AgentChart';
 import { VegaLiteChart } from '../../features/agent/chat/VegaLiteChart';
-import { FusionFragmentHandler, FusionFragmentProvider } from '@vertesia/fusion-ux';
-import { MarkdownRenderer } from './MarkdownRenderer';
+import { useCodeBlockContext } from './CodeBlockContext';
+import { CodeBlockErrorBoundary, CodeBlockPlaceholder } from './CodeBlockPlaceholder';
 
 // Render type mapping
 export type ExpandRenderType =
@@ -285,6 +285,8 @@ export function ArtifactContentRenderer({
     runId,
     contentType,
 }: ArtifactContentRendererProps): ReactElement {
+    const { MarkdownRenderer } = useCodeBlockContext();
+
     // Determine actual render type
     const actualType = useMemo(() => {
         if (renderType !== 'auto') {
@@ -374,9 +376,15 @@ export function ArtifactContentRenderer({
             const markdownContent = typeof content === 'string' ? content : String(content);
             return (
                 <CodeBlockErrorBoundary type="markdown" fallbackCode={markdownContent}>
-                    <MarkdownRenderer artifactRunId={runId}>
-                        {markdownContent}
-                    </MarkdownRenderer>
+                    {MarkdownRenderer ? (
+                        <MarkdownRenderer artifactRunId={runId}>
+                            {markdownContent}
+                        </MarkdownRenderer>
+                    ) : (
+                        <pre className="overflow-x-auto p-3 bg-muted/10 rounded text-sm">
+                            <code>{markdownContent}</code>
+                        </pre>
+                    )}
                 </CodeBlockErrorBoundary>
             );
         }

package/src/widgets/markdown/CodeBlockContext.tsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+
+/**
+ * Context for passing artifact run ID, callbacks, and the MarkdownRenderer component
+ * to code block handlers. MarkdownRenderer is injected here (rather than imported
+ * directly in ArtifactContentRenderer) to break the circular dependency:
+ *   MarkdownRenderer → codeBlockHandlers → ArtifactContentRenderer → MarkdownRenderer
+ */
+export interface CodeBlockHandlerContext {
+    artifactRunId?: string;
+    onProposalSelect?: (optionId: string) => void;
+    onProposalSubmit?: (response: string) => void;
+    MarkdownRenderer?: React.ComponentType<{ children: string; artifactRunId?: string }>;
+}
+
+const CodeBlockContext = React.createContext<CodeBlockHandlerContext>({});
+
+export function CodeBlockHandlerProvider({
+    children,
+    artifactRunId,
+    onProposalSelect,
+    onProposalSubmit,
+    MarkdownRenderer,
+}: CodeBlockHandlerContext & { children: React.ReactNode }) {
+    const value = useMemo(
+        () => ({ artifactRunId, onProposalSelect, onProposalSubmit, MarkdownRenderer }),
+        [artifactRunId, onProposalSelect, onProposalSubmit, MarkdownRenderer]
+    );
+    return <CodeBlockContext.Provider value={value}>{children}</CodeBlockContext.Provider>;
+}
+
+export function useCodeBlockContext() {
+    return React.useContext(CodeBlockContext);
+}

package/src/widgets/markdown/MarkdownRenderer.tsx

@@ -1,27 +1,27 @@
-import { useCodeBlockRendererRegistry } from './CodeBlockRendering';
 import type { Element } from 'hast';
 import React from 'react';
 import Markdown, { defaultUrlTransform } from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import { defListHastHandlers, remarkDefinitionList } from 'remark-definition-list';
 import remarkDirective from 'remark-directive';
+import remarkGfm from 'remark-gfm';
 import remarkAlert from 'remark-github-blockquote-alert';
-import { remarkDefinitionList, defListHastHandlers } from 'remark-definition-list';
+import remarkMath from 'remark-math';
 import remarkSupersub from 'remark-supersub';
-import rehypeKatex from 'rehype-katex';
 import { SKIP, visit } from 'unist-util-visit';
-import { MarkdownLink } from './MarkdownLink';
-import { MarkdownImage } from './MarkdownImage';
-import { MarkdownFigure } from './MarkdownFigure';
-import { remarkDirectiveHandler } from './remarkDirectiveHandler';
-import { normalizeCustomSchemeLinks } from './normalizeCustomSchemeLinks';
-import { normalizeDirectives } from './normalizeDirectives';
+import { CodeBlockHandlerProvider } from './CodeBlockContext';
 import {
-    CodeBlockHandlerProvider,
     createDefaultCodeBlockHandlers,
-    isExpandLanguage,
     ExpandCodeBlockHandler,
+    isExpandLanguage,
 } from './codeBlockHandlers';
+import { useCodeBlockRendererRegistry } from './CodeBlockRendering';
+import { MarkdownFigure } from './MarkdownFigure';
+import { MarkdownImage } from './MarkdownImage';
+import { MarkdownLink } from './MarkdownLink';
+import { normalizeCustomSchemeLinks } from './normalizeCustomSchemeLinks';
+import { normalizeDirectives } from './normalizeDirectives';
+import { remarkDirectiveHandler } from './remarkDirectiveHandler';
 
 // Custom URL schemes that we handle in our components
 const ALLOWED_CUSTOM_SCHEMES = [
@@ -280,6 +280,7 @@ export function MarkdownRenderer({
             artifactRunId={artifactRunId}
             onProposalSelect={onProposalSelect}
             onProposalSubmit={onProposalSubmit}
+            MarkdownRenderer={MarkdownRenderer}
         >
             <Markdown
                 remarkPlugins={remarkPluginsArray}