@datalayer/agent-runtimes 1.0.28 → 1.3.10

package/lib/examples/scenes/A2UiContactCardScene.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const A2UiContactCardScene: React.FC;
+export default A2UiContactCardScene;

package/lib/examples/scenes/A2UiContactCardScene.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Scene extracted from the A2UiContactCardExample page: the same canned A2UI
+ * messages, rendered as a Loop workspace view. The page itself now mounts
+ * a reactor application with this scene as a plugin.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { Button, Text } from '@primer/react';
+import { A2UI_RENDER_SCOPE_SX, A2uiSurfaceComposed, } from '../../components/a2ui';
+import { A2uiMarkdownProvider } from '../utils/a2uiMarkdownProvider';
+import { createSceneMessages, useA2uiProcessor } from '../utils/a2ui';
+const CONTACT_SURFACE_ID = 'contact-card-v09';
+const CONTACT_CARD_MESSAGES = createSceneMessages({
+    surfaceId: CONTACT_SURFACE_ID,
+    components: [
+        { id: 'root', component: 'Card', child: 'main-column' },
+        {
+            id: 'main-column',
+            component: 'Column',
+            align: 'center',
+            children: [
+                'avatar-image',
+                'name',
+                'title',
+                'divider',
+                'contact-info',
+                'actions',
+            ],
+        },
+        {
+            id: 'avatar-image',
+            component: 'Image',
+            url: { path: '/avatar' },
+            fit: 'cover',
+            variant: 'avatar',
+        },
+        { id: 'name', component: 'Text', text: { path: '/name' }, variant: 'h2' },
+        {
+            id: 'title',
+            component: 'Text',
+            text: { path: '/title' },
+            variant: 'body',
+        },
+        { id: 'divider', component: 'Divider' },
+        {
+            id: 'contact-info',
+            component: 'Column',
+            children: ['phone-row', 'email-row', 'location-row'],
+        },
+        {
+            id: 'phone-row',
+            component: 'Row',
+            align: 'center',
+            children: ['phone-icon', 'phone-text'],
+        },
+        { id: 'phone-icon', component: 'Icon', name: 'phone' },
+        { id: 'phone-text', component: 'Text', text: { path: '/phone' } },
+        {
+            id: 'email-row',
+            component: 'Row',
+            align: 'center',
+            children: ['email-icon', 'email-text'],
+        },
+        { id: 'email-icon', component: 'Icon', name: 'mail' },
+        { id: 'email-text', component: 'Text', text: { path: '/email' } },
+        {
+            id: 'location-row',
+            component: 'Row',
+            align: 'center',
+            children: ['location-icon', 'location-text'],
+        },
+        { id: 'location-icon', component: 'Icon', name: 'locationOn' },
+        { id: 'location-text', component: 'Text', text: { path: '/location' } },
+        {
+            id: 'actions',
+            component: 'Row',
+            justify: 'center',
+            children: ['follow-button', 'message-button'],
+        },
+        { id: 'follow-button-label', component: 'Text', text: 'Follow' },
+        {
+            id: 'follow-button',
+            component: 'Button',
+            variant: 'primary',
+            child: 'follow-button-label',
+            action: {
+                event: {
+                    name: 'follow_contact',
+                    context: {
+                        contactId: { path: '/contactId' },
+                        name: { path: '/name' },
+                    },
+                },
+            },
+        },
+        { id: 'message-button-label', component: 'Text', text: 'Message' },
+        {
+            id: 'message-button',
+            component: 'Button',
+            child: 'message-button-label',
+            action: {
+                event: {
+                    name: 'message_contact',
+                    context: {
+                        email: { path: '/email' },
+                        name: { path: '/name' },
+                    },
+                },
+            },
+        },
+    ],
+    value: {
+        contactId: 'contact_001',
+        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop',
+        name: 'David Park',
+        title: 'Engineering Manager',
+        phone: '+1 (555) 234-5678',
+        email: 'david.park@company.com',
+        location: 'San Francisco, CA',
+    },
+});
+function ContactCardContent({ onAction, }) {
+    const { surfaces, processMessages, resetSurfaces, themeStyle } = useA2uiProcessor(onAction);
+    const loadCard = useCallback(() => {
+        resetSurfaces();
+        processMessages(CONTACT_CARD_MESSAGES);
+    }, [processMessages, resetSurfaces]);
+    useEffect(() => {
+        loadCard();
+    }, [loadCard]);
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3, px: 3, pb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", onClick: loadCard, children: "Reload Card" }), _jsx(Button, { size: "small", variant: "invisible", onClick: resetSurfaces, children: "Clear" })] }), _jsx(Box, { style: themeStyle, sx: {
+                    ...A2UI_RENDER_SCOPE_SX,
+                    display: 'grid',
+                    gap: 3,
+                }, children: surfaces.map(surface => (_jsx(Box, { sx: {
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                        p: 3,
+                        backgroundColor: 'canvas.default',
+                    }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
+}
+const A2UiContactCardScene = () => {
+    const [lastAction, setLastAction] = useState(null);
+    const handleAction = useCallback((action) => {
+        console.warn('A2UI Contact Card Action:', action);
+        setLastAction(action);
+    }, []);
+    const actionPreview = useMemo(() => {
+        if (!lastAction) {
+            return 'Trigger an action from the card to inspect the event payload.';
+        }
+        return JSON.stringify(lastAction, null, 2);
+    }, [lastAction]);
+    return (_jsx(_Fragment, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { sx: {
+                    height: '100%',
+                    overflow: 'auto',
+                    display: 'flex',
+                    flexDirection: 'column',
+                }, children: [_jsxs(Box, { sx: {
+                            px: 3,
+                            py: 3,
+                            borderBottom: '1px solid',
+                            borderColor: 'border.default',
+                            backgroundColor: 'canvas.default',
+                        }, children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83D\uDC64 A2UI Contact Card" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Uses MessageProcessor + A2uiSurface with native A2UI protocol messages." })] }), _jsxs(Box, { sx: {
+                            display: 'grid',
+                            gridTemplateColumns: ['1fr', '2fr 1fr'],
+                            gap: 3,
+                            p: 3,
+                        }, children: [_jsx(ContactCardContent, { onAction: handleAction }), _jsx(Box, { sx: {
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                    borderRadius: 2,
+                                    p: 3,
+                                    backgroundColor: 'canvas.default',
+                                    fontFamily: 'mono',
+                                    fontSize: 0,
+                                    whiteSpace: 'pre-wrap',
+                                    overflow: 'auto',
+                                }, children: actionPreview })] })] }) }) }));
+};
+export default A2UiContactCardScene;

package/lib/examples/scenes/A2UiRestaurantScene.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const A2UiRestaurantScene: React.FC;
+export default A2UiRestaurantScene;

package/lib/examples/scenes/A2UiRestaurantScene.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Scene extracted from the A2UiRestaurantExample page: the same canned A2UI
+ * messages, rendered as a Loop workspace view. The page itself now mounts
+ * a reactor application with this scene as a plugin.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, getCardGradient } from '@datalayer/primer-addons';
+import { Text, Spinner, TextInput, Button } from '@primer/react';
+import { A2UI_RENDER_SCOPE_SX, A2uiSurfaceComposed, } from '../../components/a2ui';
+import { basicCatalog } from '@a2ui/react/v0_9';
+import { A2uiMarkdownProvider } from '../utils/a2uiMarkdownProvider';
+import { useExampleThemeStore } from '../utils/themeStore';
+import { useA2uiProcessor } from '../utils/a2ui';
+import { useExampleAgentRuntimesUrl } from '../utils/useExampleAgentRuntimesUrl';
+const LOADING_TEXT_LINES = [
+    'Finding the best spots for you...',
+    'Checking reviews...',
+    'Looking for open tables...',
+    'Almost there...',
+];
+const extractV09Messages = (data) => {
+    const messages = [];
+    data.forEach(item => {
+        const part = item.root ?? item;
+        if (part.kind !== 'data' || !part.data) {
+            return;
+        }
+        const message = part.data;
+        if (message.version === 'v0.9') {
+            // Normalize the catalog id so surfaces render regardless of which
+            // catalog URL variant the backend/LLM emits (the frontend only has the
+            // registered basicCatalog).
+            const createSurface = message.createSurface;
+            if (createSurface && createSurface.catalogId !== basicCatalog.id) {
+                createSurface.catalogId = basicCatalog.id;
+            }
+            messages.push(message);
+        }
+    });
+    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) {
+            return;
+        }
+        onSearch(inputValue.trim());
+    }, [inputValue, isLoading, onSearch]);
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 4,
+            p: 4,
+            maxWidth: 640,
+            mx: 'auto',
+        }, children: [_jsx(Box, { sx: {
+                    width: '100%',
+                    height: 200,
+                    borderRadius: 2,
+                    background: `linear-gradient(135deg, ${gradient.from} 0%, ${gradient.to} 100%)`,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, 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' })] }) })] }));
+}
+const A2UiRestaurantScene = () => {
+    const baseUrl = useExampleAgentRuntimesUrl();
+    const a2uiRestaurantEndpoint = `${baseUrl}/api/v1/a2ui/restaurant/`;
+    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 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, themeStyle } = useA2uiProcessor(handleAction);
+    useEffect(() => {
+        if (!isLoading) {
+            return;
+        }
+        const interval = window.setInterval(() => {
+            setLoadingTextIndex(prev => (prev + 1) % LOADING_TEXT_LINES.length);
+        }, 1800);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [isLoading]);
+    const sendPayload = useCallback(async (payload) => {
+        try {
+            setIsLoading(true);
+            setError(null);
+            setLoadingTextIndex(0);
+            const response = await fetch(a2uiRestaurantEndpoint, {
+                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 (requestError) {
+            const message = requestError instanceof Error
+                ? requestError.message
+                : 'Unknown error';
+            setError(message);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [processMessages, resetSurfaces, a2uiRestaurantEndpoint]);
+    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(_Fragment, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { sx: {
+                    height: '100%',
+                    overflow: 'auto',
+                    display: 'flex',
+                    flexDirection: 'column',
+                }, children: [_jsxs(Box, { sx: {
+                            p: 3,
+                            borderBottom: '1px solid',
+                            borderColor: 'border.default',
+                            backgroundColor: 'canvas.default',
+                        }, 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: 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, { style: themeStyle, sx: {
+                                    ...A2UI_RENDER_SCOPE_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(A2uiSurfaceComposed, { surface: surface }) }, surface.id)))] }))] }), _jsx(Box, { sx: {
+                            p: 2,
+                            borderTop: '1px solid',
+                            borderColor: 'border.default',
+                            backgroundColor: 'canvas.default',
+                            textAlign: 'center',
+                        }, children: _jsxs(Text, { sx: { fontSize: '0.75rem', color: 'fg.muted' }, children: ["Backend: ", a2uiRestaurantEndpoint] }) })] }) }) }));
+};
+export default A2UiRestaurantScene;

package/lib/examples/scenes/A2UiViewerScene.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const A2UiViewerScene: React.FC;
+export default A2UiViewerScene;