@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/features/agent/chat/ModernAgentOutput/with-types.d.ts

@@ -2,14 +2,14 @@ import { AgentMessage, Plan } from '@vertesia/common';
 
 // Define a compatible interface to help with type issues
 export interface WorkstreamFlowPanelProps {
-  messages: AgentMessage[];
-  plan?: Plan;
-  workstreamStatus: Map<string, 'pending' | 'in_progress' | 'completed'>;
-  isOpen?: boolean; // Make isOpen optional
-  onClose: () => void;
+    messages: AgentMessage[];
+    plan?: Plan;
+    workstreamStatus: Map<string, 'pending' | 'in_progress' | 'completed'>;
+    isOpen?: boolean; // Make isOpen optional
+    onClose: () => void;
 }
 
 // Declare module for the WorkstreamFlowPanel
 declare module '../WorkstreamFlow' {
-  export const WorkstreamFlowPanel: React.FC<WorkstreamFlowPanelProps>;
-}
+    export const WorkstreamFlowPanel: React.FC<WorkstreamFlowPanelProps>;
+}

package/src/features/agent/chat/ProposalCodeBlockHandler.tsx

@@ -0,0 +1,89 @@
+import {
+    CodeBlockErrorBoundary,
+    CodeBlockPlaceholder,
+    type CodeBlockRendererProps,
+    isIncompleteJson,
+    useCodeBlockContext,
+} from '@vertesia/ui/widgets';
+import { useMemo } from 'react';
+import { AskUserWidget, type AskUserWidgetProps } from './AskUserWidget';
+
+interface ProposalOption {
+    id?: string;
+    value?: string;
+    label?: string;
+    description?: string;
+}
+
+interface ProposalSpec {
+    question?: string;
+    title?: string;
+    description?: string;
+    options?: ProposalOption[];
+    allowFreeResponse?: boolean;
+    multiple?: boolean;
+    variant?: AskUserWidgetProps['variant'];
+}
+
+/**
+ * Proposal/AskUser code block handler.
+ * Lives in features/agent/chat (not widgets/markdown) because it renders the
+ * agent-specific AskUserWidget; placing it here breaks the
+ * widgets/markdown ↔ features/agent/chat module cycle.
+ */
+export function ProposalCodeBlockHandler({ code }: CodeBlockRendererProps) {
+    const { onProposalSelect, onProposalSubmit } = useCodeBlockContext();
+
+    const incomplete = useMemo(() => isIncompleteJson(code), [code]);
+
+    const widgetProps = useMemo((): AskUserWidgetProps | null => {
+        if (incomplete) return null;
+
+        try {
+            const raw = code.trim();
+            const spec = JSON.parse(raw) as ProposalSpec;
+
+            if (!spec.options || (!spec.question && !spec.title)) {
+                return null;
+            }
+
+            const props: AskUserWidgetProps = {
+                question: spec.question || spec.title || '',
+                description: spec.description,
+                options: Array.isArray(spec.options)
+                    ? spec.options.map((opt) => ({
+                          id: opt.id || opt.value || '',
+                          label: opt.label || '',
+                          description: opt.description,
+                      }))
+                    : undefined,
+                allowFreeResponse: spec.allowFreeResponse ?? spec.multiple,
+                variant: spec.variant,
+                onSelect: onProposalSelect,
+                onSubmit: onProposalSubmit,
+            };
+
+            if (!props.question || !props.options?.length) {
+                return null;
+            }
+
+            return props;
+        } catch {
+            return null;
+        }
+    }, [code, onProposalSelect, onProposalSubmit, incomplete]);
+
+    if (incomplete) {
+        return <CodeBlockPlaceholder type="proposal" message="Loading options..." />;
+    }
+
+    if (!widgetProps) {
+        return <CodeBlockPlaceholder type="proposal" error="Invalid proposal specification" />;
+    }
+
+    return (
+        <CodeBlockErrorBoundary type="proposal" fallbackCode={code}>
+            <AskUserWidget {...widgetProps} />
+        </CodeBlockErrorBoundary>
+    );
+}

package/src/features/agent/chat/SkillWidgetProvider.tsx

@@ -1,11 +1,12 @@
-import { VertesiaClient } from "@vertesia/client";
-import { normalizeToolCollection } from "@vertesia/common";
-import { FusionFragmentHandler } from "@vertesia/fusion-ux";
-import { useUserSession } from "@vertesia/ui/session";
-import { CodeBlockRendererProps, CodeBlockRendererProvider } from "@vertesia/ui/widgets";
-import { memo, useEffect, useMemo, useState } from "react";
-import { VegaLiteChartSpec } from "./AgentChart";
-import { VegaLiteChart } from "./VegaLiteChart";
+import type { VertesiaClient } from '@vertesia/client';
+import { normalizeToolCollection } from '@vertesia/common';
+import { FusionFragmentHandler } from '@vertesia/fusion-ux';
+import { useUserSession } from '@vertesia/ui/session';
+import { type CodeBlockRendererProps, CodeBlockRendererProvider } from '@vertesia/ui/widgets';
+import { memo, useEffect, useMemo, useState } from 'react';
+import type { VegaLiteChartSpec } from './AgentChart';
+import { ProposalCodeBlockHandler } from './ProposalCodeBlockHandler';
+import { VegaLiteChart } from './VegaLiteChart';
 
 interface SkillWidgetProviderProperties {
     children: React.ReactNode;
@@ -42,7 +43,7 @@ const ChartWidget = memo(function ChartWidget({ code }: { code: string }) {
         return null;
     }
 
-    return <VegaLiteChart spec={spec} />
+    return <VegaLiteChart spec={spec} />;
 });
 
 /**
@@ -67,70 +68,86 @@ const VegaLiteChartWidget = memo(function VegaLiteChartWidget({ code }: { code:
     }
 
     // Render VegaLiteChart directly - bypass AgentChart routing
-    return <VegaLiteChart spec={spec} />
+    return <VegaLiteChart spec={spec} />;
 });
 
 const defaultComponents: Record<string, React.FunctionComponent<CodeBlockRendererProps>> = {
-    "chart": ChartWidget,
-    "vega-lite": VegaLiteChartWidget,
-    "vegalite": VegaLiteChartWidget,
-    "fusion-fragment": FusionFragmentHandler,
-}
-
-function RemoteWidgetComponent({ url, code }: { url: string, code: string }) {
+    chart: ChartWidget,
+    'vega-lite': VegaLiteChartWidget,
+    vegalite: VegaLiteChartWidget,
+    'fusion-fragment': FusionFragmentHandler,
+    proposal: ProposalCodeBlockHandler,
+    askuser: ProposalCodeBlockHandler,
+};
+
+function RemoteWidgetComponent({ url, code }: { url: string; code: string }) {
     const [Component, setComponent] = useState<React.FunctionComponent<{ code: string }> | null>(null);
     useEffect(() => {
-        import(/* @vite-ignore */url).then(module => {
-            // register the component
-            // Wrap in arrow function to prevent React from calling it as a state updater
-            setComponent(() => module.default)
-        }).catch(err => {
-            console.error("Failed to load remote widget component from ", url, err);
-        })
+        import(/* @vite-ignore */ url)
+            .then((module) => {
+                // register the component
+                // Wrap in arrow function to prevent React from calling it as a state updater
+                setComponent(() => module.default);
+            })
+            .catch((err) => {
+                console.error('Failed to load remote widget component from ', url, err);
+            });
     }, [url]);
     return Component ? <Component code={code} /> : null;
 }
 
-async function fetchSkillWidgets(client: VertesiaClient): Promise<Record<string, React.FunctionComponent<CodeBlockRendererProps>>> {
-    const installedApps = await client.apps.getInstalledApps("tools");
+async function fetchSkillWidgets(
+    client: VertesiaClient,
+): Promise<Record<string, React.FunctionComponent<CodeBlockRendererProps>>> {
+    const installedApps = await client.apps.getInstalledApps('tools');
     const urls = new Set<string>();
     for (const app of installedApps) {
         if (app.manifest.tool_collections && app.manifest.tool_collections.length > 0) {
             for (const item of app.manifest.tool_collections || []) {
                 const collection = normalizeToolCollection(item);
                 const collUrl = collection.url;
-                if (collUrl.startsWith("http://") || collUrl.startsWith("https://")) {
-                    const i = collUrl.indexOf("/api/");
+                if (collUrl.startsWith('http://') || collUrl.startsWith('https://')) {
+                    const i = collUrl.indexOf('/api/');
                     if (i > 0) {
                         const url = collUrl.substring(0, i);
-                        urls.add(url + '/api/widgets');
+                        urls.add(`${url}/api/widgets`);
                     }
                 }
             }
         }
-        if (app.manifest.endpoint && app.manifest.capabilities?.includes("tools")) {
+        if (app.manifest.endpoint && app.manifest.capabilities?.includes('tools')) {
             urls.add(new URL('/api/widgets', app.manifest.endpoint).toString());
         }
     }
 
-    const allWidgets = await Promise.all(Array.from(urls).map(url => {
-        return fetch(url).then(r => {
-            if (!r.ok) {
-                throw new Error(`Failed to fetch widgets: ${r.status} ${r.statusText}`);
-            }
-            return r.json();
-        }).then(data => {
-            const widgets: { name: string, component: React.FunctionComponent<CodeBlockRendererProps> }[] = [];
-            const widgetsMap = data.widgets as Record<string, { url: string }>;
-            for (const [name, value] of Object.entries(widgetsMap)) {
-                widgets.push({ name, component: (props: CodeBlockRendererProps) => <RemoteWidgetComponent url={value.url} code={props.code} /> });
-            }
-            return widgets;
-        }).catch(() => {
-            console.error("Failed to fetch skill widgets from ", url);
-            return null
-        });
-    }));
+    const allWidgets = await Promise.all(
+        Array.from(urls).map((url) => {
+            return fetch(url)
+                .then((r) => {
+                    if (!r.ok) {
+                        throw new Error(`Failed to fetch widgets: ${r.status} ${r.statusText}`);
+                    }
+                    return r.json();
+                })
+                .then((data) => {
+                    const widgets: { name: string; component: React.FunctionComponent<CodeBlockRendererProps> }[] = [];
+                    const widgetsMap = data.widgets as Record<string, { url: string }>;
+                    for (const [name, value] of Object.entries(widgetsMap)) {
+                        widgets.push({
+                            name,
+                            component: (props: CodeBlockRendererProps) => (
+                                <RemoteWidgetComponent url={value.url} code={props.code} />
+                            ),
+                        });
+                    }
+                    return widgets;
+                })
+                .catch(() => {
+                    console.error('Failed to fetch skill widgets from ', url);
+                    return null;
+                });
+        }),
+    );
 
     const widgets: Record<string, React.FunctionComponent<CodeBlockRendererProps>> = {};
 
@@ -149,20 +166,17 @@ async function fetchSkillWidgets(client: VertesiaClient): Promise<Record<string,
  */
 export function SkillWidgetProvider({ children }: SkillWidgetProviderProperties) {
     const { client } = useUserSession();
-    const [components, setComponents] = useState<Record<string, React.FunctionComponent<CodeBlockRendererProps>>>(defaultComponents);
+    const [components, setComponents] =
+        useState<Record<string, React.FunctionComponent<CodeBlockRendererProps>>>(defaultComponents);
     useEffect(() => {
         // fetch all skill components
-        fetchSkillWidgets(client).then(widgets => {
+        void fetchSkillWidgets(client).then((widgets) => {
             setComponents({
                 ...defaultComponents,
                 ...widgets,
-            })
-        })
-    }, []);
-
-
-    return (
-        <CodeBlockRendererProvider components={components}>{children}</CodeBlockRendererProvider>
-    )
+            });
+        });
+    }, [client]);
 
+    return <CodeBlockRendererProvider components={components}>{children}</CodeBlockRendererProvider>;
 }