@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/A2UiRestaurantExample.js

@@ -3,34 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/**
- * A2UiRestaurantExample
- *
- * Demonstrates A2UI (Agent-to-UI) protocol integration with a pydantic-ai
- * restaurant finder agent using the official @a2ui/react renderer.
- *
- * The agent generates A2UI JSON messages that are rendered into
- * interactive React components via A2UIProvider + A2UIRenderer.
- *
- * Features:
- * - A2UI protocol message processing via @a2ui/react
- * - Dynamic UI generation from agent responses
- * - Restaurant search and booking interface
- * - Action handling for interactive components (buttons, forms)
- * - Dark/light theme support
- *
- * Backend: /api/v1/a2ui/restaurant/
- */
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, getCardGradient } from '@datalayer/primer-addons';
+import { Text, Spinner, TextInput, Button } from '@primer/react';
+import { A2uiSurface } from '@a2ui/react/v0_9';
 import { ThemedProvider } from './utils/themedProvider';
+import { A2uiMarkdownProvider } from './utils/a2uiMarkdownProvider';
 import { useExampleThemeStore } from './utils/themeStore';
-import { Text, Spinner, TextInput, Button } from '@primer/react';
-import { A2UIProvider, A2UIRenderer, useA2UIActions, initializeDefaultCatalog, } from '@a2ui/react';
-// Initialize the A2UI default component catalog (buttons, cards, text, etc.)
-// This must be called once before any A2UI rendering occurs.
-initializeDefaultCatalog();
-// A2UI endpoint for pydantic-ai restaurant agent
+import { useA2uiProcessor } from './utils/a2ui';
 const A2UI_RESTAURANT_ENDPOINT = 'http://localhost:8765/api/v1/a2ui/restaurant/';
 const LOADING_TEXT_LINES = [
     'Finding the best spots for you...',
@@ -38,229 +18,151 @@ const LOADING_TEXT_LINES = [
     'Looking for open tables...',
     'Almost there...',
 ];
-/**
- * Extract ServerToClientMessage[] from A2A server payload,
- * handling both Python SDK (root wrapper) and JS SDK (direct) formats.
- */
-function extractMessages(data) {
+const extractV09Messages = (data) => {
     const messages = [];
-    for (const item of data) {
-        const part = item.root || item;
-        if (part.kind === 'text')
-            continue;
-        if (part.data) {
-            messages.push(part.data);
+    data.forEach(item => {
+        const part = item.root ?? item;
+        if (part.kind !== 'data' || !part.data) {
+            return;
         }
-    }
-    return messages;
-}
-/**
- * Custom hook for A2UI restaurant client communication.
- * Uses useA2UIActions() from @a2ui/react for message processing.
- */
-function useA2UIRestaurantClient() {
-    const { processMessages, clearSurfaces, getSurfaces } = useA2UIActions();
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const makeRequest = useCallback(async (message) => {
-        try {
-            setIsLoading(true);
-            setError(null);
-            const response = await fetch(A2UI_RESTAURANT_ENDPOINT, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ query: message }),
-            });
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.error || 'Request failed');
-            }
-            const data = (await response.json());
-            if ('error' in data)
-                throw new Error(data.error);
-            const messages = extractMessages(data);
-            clearSurfaces();
-            processMessages(messages);
-            return messages;
+        const message = part.data;
+        if (message.version === 'v0.9') {
+            messages.push(message);
         }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-            setError(errorMessage);
-            console.error('A2UI request error:', err);
-            throw err;
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [processMessages, clearSurfaces]);
-    return {
-        getSurfaces,
-        isLoading,
-        error,
-        makeRequest,
-    };
-}
-/**
- * Restaurant search interface component
- */
-function RestaurantSearch({ onSearch, isLoading, defaultValue = 'Top 5 Chinese restaurants in New York', }) {
-    const [inputValue, setInputValue] = useState(defaultValue);
+    });
+    return messages;
+};
+function RestaurantSearch({ onSearch, isLoading, }) {
+    const [inputValue, setInputValue] = useState('Top 5 Chinese restaurants in New York');
     const { theme, colorMode } = useExampleThemeStore();
     const gradient = getCardGradient(theme, colorMode);
     const handleSubmit = useCallback((event) => {
         event.preventDefault();
-        if (inputValue.trim() && !isLoading) {
-            onSearch(inputValue.trim());
+        if (!inputValue.trim() || isLoading) {
+            return;
         }
+        onSearch(inputValue.trim());
     }, [inputValue, isLoading, onSearch]);
     return (_jsxs(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             gap: 4,
-            padding: 4,
-            maxWidth: '600px',
-            margin: '0 auto',
+            p: 4,
+            maxWidth: 640,
+            mx: 'auto',
         }, children: [_jsx(Box, { sx: {
                     width: '100%',
-                    height: '200px',
-                    borderRadius: '12px',
+                    height: 200,
+                    borderRadius: 2,
                     background: `linear-gradient(135deg, ${gradient.from} 0%, ${gradient.to} 100%)`,
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                    marginBottom: 2,
-                }, children: _jsx(Text, { sx: { fontSize: '4rem' }, children: "\uD83C\uDF7D\uFE0F" }) }), _jsx(Text, { as: "h1", sx: {
-                    fontSize: '2rem',
-                    fontWeight: 'bold',
-                    textAlign: 'center',
-                    marginBottom: 2,
-                }, children: "Restaurant Finder" }), _jsx(Text, { sx: { color: 'fg.muted', textAlign: 'center', marginBottom: 3 }, children: "Powered by A2UI protocol and pydantic-ai" }), _jsx("form", { onSubmit: handleSubmit, style: { width: '100%' }, children: _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(TextInput, { value: inputValue, onChange: e => setInputValue(e.target.value), placeholder: "Search for restaurants...", disabled: isLoading, sx: { flex: 1 }, block: true }), _jsx(Button, { type: "submit", disabled: isLoading || !inputValue.trim(), children: isLoading ? _jsx(Spinner, { size: "small" }) : 'Search' })] }) })] }));
+                }, children: _jsx(Text, { sx: { fontSize: '4rem' }, children: "\uD83C\uDF7D\uFE0F" }) }), _jsx(Text, { as: "h1", sx: { fontSize: '2rem', fontWeight: 'bold', textAlign: 'center' }, children: "Restaurant Finder" }), _jsx(Text, { sx: { color: 'fg.muted', textAlign: 'center' }, children: "A2UI renderer connected to a live agent backend." }), _jsx("form", { onSubmit: handleSubmit, style: { width: '100%' }, children: _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(TextInput, { value: inputValue, onChange: e => setInputValue(e.target.value), placeholder: "Search for restaurants...", disabled: isLoading, sx: { flex: 1 }, block: true }), _jsx(Button, { type: "submit", disabled: isLoading || !inputValue.trim(), children: isLoading ? _jsx(Spinner, { size: "small" }) : 'Search' })] }) })] }));
 }
-/**
- * Loading state component with animated text
- */
-function LoadingState() {
+const A2UiRestaurantExample = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [hasData, setHasData] = useState(false);
+    const [lastQuery, setLastQuery] = useState('');
     const [loadingTextIndex, setLoadingTextIndex] = useState(0);
-    const loadingIntervalRef = useRef(null);
+    const sendPayloadRef = useRef(null);
+    const handleAction = useCallback(async (action) => {
+        if (!sendPayloadRef.current) {
+            return;
+        }
+        await sendPayloadRef.current({
+            action: action.name,
+            context: action.context,
+        });
+    }, []);
+    const { surfaces, processMessages, resetSurfaces } = useA2uiProcessor(handleAction);
     useEffect(() => {
-        loadingIntervalRef.current = window.setInterval(() => {
+        if (!isLoading) {
+            return;
+        }
+        const interval = window.setInterval(() => {
             setLoadingTextIndex(prev => (prev + 1) % LOADING_TEXT_LINES.length);
-        }, 2000);
+        }, 1800);
         return () => {
-            if (loadingIntervalRef.current) {
-                clearInterval(loadingIntervalRef.current);
-            }
+            clearInterval(interval);
         };
-    }, []);
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: '300px',
-            gap: 3,
-        }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: '1.1rem' }, children: LOADING_TEXT_LINES[loadingTextIndex] })] }));
-}
-/**
- * Results display component with A2UI renderer
- */
-function ResultsDisplay({ surfaceEntries, onBack, }) {
-    return (_jsxs(Box, { sx: { padding: 3 }, children: [_jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-start', marginBottom: 3 }, children: _jsx(Button, { variant: "invisible", onClick: onBack, children: "\u2190 New Search" }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: surfaceEntries.map(([surfaceId]) => (_jsx(A2UIRenderer, { surfaceId: surfaceId }, surfaceId))) })] }));
-}
-/**
- * Error display component
- */
-function ErrorDisplay({ error, onRetry, }) {
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: 4,
-            gap: 3,
-        }, children: [_jsxs(Text, { sx: { color: 'danger.fg', fontSize: '1.2rem' }, children: ["\u26A0\uFE0F ", error] }), _jsx(Button, { onClick: onRetry, children: "Try Again" })] }));
-}
-/**
- * Main A2UI Restaurant content component.
- * Must be rendered inside A2UIProvider to access hooks.
- */
-function A2UIRestaurantContent() {
-    const { getSurfaces, isLoading, error, makeRequest } = useA2UIRestaurantClient();
-    const [hasData, setHasData] = useState(false);
-    const [lastQuery, setLastQuery] = useState('');
-    const handleSearch = useCallback(async (query) => {
-        setLastQuery(query);
+    }, [isLoading]);
+    const sendPayload = useCallback(async (payload) => {
         try {
-            await makeRequest(query);
+            setIsLoading(true);
+            setError(null);
+            setLoadingTextIndex(0);
+            const response = await fetch(A2UI_RESTAURANT_ENDPOINT, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload),
+            });
+            if (!response.ok) {
+                const errorData = (await response.json());
+                throw new Error(errorData.detail || 'Request failed');
+            }
+            const data = (await response.json());
+            if (!Array.isArray(data)) {
+                throw new Error(data.error || 'Invalid server payload');
+            }
+            const v09Messages = extractV09Messages(data);
+            if (v09Messages.length === 0) {
+                throw new Error('No A2UI messages returned by backend');
+            }
+            resetSurfaces();
+            processMessages(v09Messages);
             setHasData(true);
         }
-        catch {
-            // Error is already set in the hook
+        catch (requestError) {
+            const message = requestError instanceof Error
+                ? requestError.message
+                : 'Unknown error';
+            setError(message);
         }
-    }, [makeRequest]);
-    const handleBack = useCallback(() => {
-        setHasData(false);
-    }, []);
-    const handleRetry = useCallback(() => {
-        if (lastQuery) {
-            handleSearch(lastQuery);
+        finally {
+            setIsLoading(false);
         }
-    }, [lastQuery, handleSearch]);
-    if (error && !isLoading) {
-        return _jsx(ErrorDisplay, { error: error, onRetry: handleRetry });
-    }
-    if (isLoading) {
-        return _jsx(LoadingState, {});
-    }
-    if (!hasData) {
-        return _jsx(RestaurantSearch, { onSearch: handleSearch, isLoading: isLoading });
-    }
-    const surfaces = getSurfaces();
-    const surfaceEntries = Array.from(surfaces.entries());
-    return _jsx(ResultsDisplay, { surfaceEntries: surfaceEntries, onBack: handleBack });
-}
-/**
- * A2UiRestaurantExample - Main example component
- *
- * Demonstrates A2UI protocol integration with pydantic-ai.
- * The agent generates A2UI JSON messages for restaurant search,
- * display, and booking functionality.
- *
- * Uses @a2ui/react's two-context architecture:
- * - A2UIProvider wraps the app, receives an onAction callback
- * - useA2UIActions() provides processMessages/clearSurfaces/getSurfaces
- * - A2UIRenderer renders surfaces by ID
- */
-const A2UiRestaurantExample = () => {
-    // Handle A2UI actions (button clicks, form submissions, etc.)
-    const handleAction = useCallback((actionMessage) => {
-        console.log('A2UI Action:', actionMessage);
-        // Send action back to the agent for processing
-        fetch(A2UI_RESTAURANT_ENDPOINT, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(actionMessage),
-        }).catch(err => console.error('Action send error:', err));
-    }, []);
-    return (_jsx(ThemedProvider, { children: _jsx(A2UIProvider, { onAction: handleAction, children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    minHeight: '100vh',
-                    backgroundColor: 'canvas.default',
-                }, children: [_jsxs(Box, { sx: {
-                            padding: 3,
+    }, [processMessages, resetSurfaces]);
+    useEffect(() => {
+        sendPayloadRef.current = sendPayload;
+    }, [sendPayload]);
+    const handleSearch = useCallback(async (query) => {
+        setLastQuery(query);
+        await sendPayload({ query });
+    }, [sendPayload]);
+    const handleRetry = useCallback(async () => {
+        if (!lastQuery) {
+            return;
+        }
+        await sendPayload({ query: lastQuery });
+    }, [lastQuery, sendPayload]);
+    return (_jsx(ThemedProvider, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { sx: { minHeight: '100vh', display: 'flex', flexDirection: 'column' }, children: [_jsxs(Box, { sx: {
+                            p: 3,
                             borderBottom: '1px solid',
                             borderColor: 'border.default',
                             backgroundColor: 'canvas.subtle',
-                        }, children: [_jsx(Text, { as: "h1", sx: {
-                                    fontSize: '1.25rem',
-                                    fontWeight: 'bold',
+                        }, children: [_jsx(Text, { as: "h1", sx: { fontSize: '1.25rem', fontWeight: 'bold' }, children: "\uD83E\uDD16 A2UI Restaurant Example" }), _jsx(Text, { sx: { fontSize: '0.875rem', color: 'fg.muted' }, children: "Uses MessageProcessor and A2uiSurface with native A2UI backend messages." })] }), _jsxs(Box, { sx: { flex: 1, p: 3 }, children: [!hasData && !isLoading && !error && (_jsx(RestaurantSearch, { onSearch: handleSearch, isLoading: isLoading })), isLoading && (_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    height: 280,
+                                    gap: 3,
+                                }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: LOADING_TEXT_LINES[loadingTextIndex] })] })), error && !isLoading && (_jsxs(Box, { sx: {
                                     display: 'flex',
+                                    flexDirection: 'column',
                                     alignItems: 'center',
-                                    gap: 2,
-                                }, children: "\uD83E\uDD16 A2UI Restaurant Example" }), _jsx(Text, { sx: { fontSize: '0.875rem', color: 'fg.muted' }, children: "pydantic-ai agent with A2UI protocol rendering (@a2ui/react)" })] }), _jsx(Box, { sx: { flex: 1, padding: 3 }, children: _jsx(A2UIRestaurantContent, {}) }), _jsx(Box, { sx: {
-                            padding: 2,
+                                    gap: 3,
+                                    p: 4,
+                                }, children: [_jsxs(Text, { sx: { color: 'danger.fg' }, children: ["\u26A0\uFE0F ", error] }), _jsx(Button, { onClick: handleRetry, disabled: !lastQuery, children: "Retry" })] })), !isLoading && hasData && !error && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsx(Button, { variant: "invisible", sx: { alignSelf: 'flex-start' }, onClick: () => setHasData(false), children: "\u2190 New Search" }), surfaces.map(surface => (_jsx(Box, { sx: {
+                                            border: '1px solid',
+                                            borderColor: 'border.default',
+                                            borderRadius: 1,
+                                            p: 3,
+                                        }, children: _jsx(A2uiSurface, { surface: surface }) }, surface.id)))] }))] }), _jsx(Box, { sx: {
+                            p: 2,
                             borderTop: '1px solid',
                             borderColor: 'border.default',
                             backgroundColor: 'canvas.subtle',

package/lib/examples/A2UiViewerExample.d.ts

@@ -1,21 +1,3 @@
-/**
- * A2UiViewerExample
- *
- * Demonstrates the standalone A2UIViewer component from @a2ui/react.
- * Unlike A2UIProvider + A2UIRenderer (which require context), A2UIViewer
- * is a self-contained component that takes component definitions directly.
- *
- * Features:
- * - Standalone rendering — no A2UIProvider needed
- * - Multiple pre-built A2UI scenes (recipe card, booking form, dashboard)
- * - Shows how to use A2UIViewer for embedding A2UI in any React context
- *
- * No backend required — uses static ComponentInstance[] arrays.
- */
 import React from 'react';
-/**
- * A2UiViewerExample — Standalone A2UIViewer with multiple scenes.
- * Demonstrates embedding A2UI components without a Provider context.
- */
 declare const A2UiViewerExample: React.FC;
 export default A2UiViewerExample;