@datalayer/agent-runtimes 1.0.2 → 1.0.4

package/lib/examples/A2UiComponentGalleryExample.js

@@ -0,0 +1,568 @@
+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.
+ */
+/**
+ * A2UiComponentGalleryExample
+ *
+ * Showcases the full catalog of A2UI components rendered via @a2ui/react.
+ * Uses static A2UI JSON messages (no backend required) to demonstrate:
+ * - Text, Button, CheckBox, Slider, TextField, DateTimeInput
+ * - MultipleChoice (default, chips, filterable)
+ * - Row, Column, Card, List, Tabs, Divider, Modal
+ * - Icon, Image, Video, AudioPlayer
+ *
+ * All messages follow the A2UI three-step pattern:
+ *   beginRendering → surfaceUpdate → dataModelUpdate
+ */
+import { useState, useCallback } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { ThemedProvider } from './utils/themedProvider';
+import { Text, Button as PrimerButton } from '@primer/react';
+import { A2UIProvider, A2UIRenderer, useA2UIActions, initializeDefaultCatalog, } from '@a2ui/react';
+initializeDefaultCatalog();
+// ---------------------------------------------------------------------------
+// Static A2UI messages for each gallery section
+// ---------------------------------------------------------------------------
+/** Helper: single-component surface (begin + update + data) */
+function singleComponentSurface(surfaceId, rootId, componentDef, data) {
+    const msgs = [
+        {
+            beginRendering: { surfaceId, root: rootId },
+        },
+        {
+            surfaceUpdate: {
+                surfaceId,
+                components: [{ id: rootId, component: componentDef }],
+            },
+        },
+    ];
+    if (data)
+        msgs.push(data);
+    return msgs;
+}
+/** Helper: multi-component surface */
+function multiComponentSurface(surfaceId, rootId, components, data) {
+    const msgs = [
+        {
+            beginRendering: { surfaceId, root: rootId },
+        },
+        {
+            surfaceUpdate: { surfaceId, components },
+        },
+    ];
+    if (data)
+        msgs.push(data);
+    return msgs;
+}
+function dataModelMsg(surfaceId, contents) {
+    return {
+        dataModelUpdate: { surfaceId, path: '/', contents },
+    };
+}
+// --- Gallery sections ---
+function textFieldMessages() {
+    return singleComponentSurface('gallery-text', 'gallery-text-root', {
+        TextField: {
+            label: { literalString: 'Enter some text' },
+            text: { path: 'galleryData/textField' },
+        },
+    }, dataModelMsg('gallery-text', [
+        {
+            key: 'galleryData',
+            valueMap: [{ key: 'textField', valueString: 'Hello World' }],
+        },
+    ]));
+}
+function textMessages() {
+    return singleComponentSurface('gallery-text-block', 'gallery-text-block-root', {
+        Text: {
+            usageHint: 'h3',
+            text: { literalString: 'Hello from A2UI Text component' },
+        },
+    });
+}
+function imageMessages() {
+    return singleComponentSurface('gallery-image', 'gallery-image-root', {
+        Image: {
+            url: { path: 'galleryData/imageUrl' },
+            altText: { literalString: 'A2UI demo landscape' },
+            fit: 'cover',
+        },
+    }, dataModelMsg('gallery-image', [
+        {
+            key: 'galleryData',
+            valueMap: [
+                {
+                    key: 'imageUrl',
+                    valueString: 'https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=900&h=450&fit=crop',
+                },
+            ],
+        },
+    ]));
+}
+function videoMessages() {
+    return singleComponentSurface('gallery-video', 'gallery-video-root', {
+        Video: {
+            sourceUrl: {
+                literalString: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+            },
+        },
+    });
+}
+function audioMessages() {
+    return singleComponentSurface('gallery-audio', 'gallery-audio-root', {
+        AudioPlayer: {
+            sourceUrl: {
+                literalString: 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3',
+            },
+        },
+    });
+}
+function layoutMessages() {
+    return multiComponentSurface('gallery-layout', 'gallery-layout-root', [
+        {
+            id: 'gallery-layout-root',
+            component: {
+                Column: {
+                    children: { explicitList: ['layout-title', 'layout-row'] },
+                    gap: 'small',
+                },
+            },
+        },
+        {
+            id: 'layout-title',
+            component: {
+                Text: {
+                    usageHint: 'caption',
+                    text: {
+                        literalString: 'Row and Column layout composition',
+                    },
+                },
+            },
+        },
+        {
+            id: 'layout-row',
+            component: {
+                Row: {
+                    children: { explicitList: ['layout-card-1', 'layout-card-2'] },
+                    gap: 'small',
+                },
+            },
+        },
+        {
+            id: 'layout-card-1',
+            component: {
+                Card: { child: 'layout-card-1-text' },
+            },
+        },
+        {
+            id: 'layout-card-1-text',
+            component: {
+                Text: { text: { literalString: 'Column -> Row -> Card #1' } },
+            },
+        },
+        {
+            id: 'layout-card-2',
+            component: {
+                Card: { child: 'layout-card-2-text' },
+            },
+        },
+        {
+            id: 'layout-card-2-text',
+            component: {
+                Text: { text: { literalString: 'Column -> Row -> Card #2' } },
+            },
+        },
+    ]);
+}
+function checkboxMessages() {
+    return singleComponentSurface('gallery-checkbox', 'gallery-checkbox-root', {
+        CheckBox: {
+            label: { literalString: 'Toggle me' },
+            value: { path: 'galleryData/checkbox' },
+        },
+    }, dataModelMsg('gallery-checkbox', [
+        {
+            key: 'galleryData',
+            valueMap: [{ key: 'checkbox', valueBoolean: false }],
+        },
+    ]));
+}
+function sliderMessages() {
+    return singleComponentSurface('gallery-slider', 'gallery-slider-root', {
+        Slider: {
+            value: { path: 'galleryData/slider' },
+            minValue: 0,
+            maxValue: 100,
+        },
+    }, dataModelMsg('gallery-slider', [
+        { key: 'galleryData', valueMap: [{ key: 'slider', valueNumber: 30 }] },
+    ]));
+}
+function dateTimeMessages() {
+    return singleComponentSurface('gallery-date', 'gallery-date-root', {
+        DateTimeInput: {
+            value: { path: 'galleryData/date' },
+            enableDate: true,
+        },
+    }, dataModelMsg('gallery-date', [
+        {
+            key: 'galleryData',
+            valueMap: [{ key: 'date', valueString: '2025-10-26' }],
+        },
+    ]));
+}
+function multipleChoiceMessages() {
+    return singleComponentSurface('gallery-mc', 'gallery-mc-root', {
+        MultipleChoice: {
+            selections: { path: 'galleryData/favorites' },
+            options: [
+                { label: { literalString: 'Apple' }, value: 'A' },
+                { label: { literalString: 'Banana' }, value: 'B' },
+                { label: { literalString: 'Cherry' }, value: 'C' },
+            ],
+        },
+    }, dataModelMsg('gallery-mc', [
+        {
+            key: 'galleryData',
+            valueMap: [
+                { key: 'favorites', valueMap: [{ key: '0', valueString: 'A' }] },
+            ],
+        },
+    ]));
+}
+function buttonMessages() {
+    return multiComponentSurface('gallery-button', 'gallery-button-root', [
+        {
+            id: 'gallery-button-text',
+            component: { Text: { text: { literalString: 'Trigger Action' } } },
+        },
+        {
+            id: 'gallery-button-root',
+            component: {
+                Button: {
+                    child: 'gallery-button-text',
+                    primary: true,
+                    action: {
+                        name: 'custom_action',
+                        context: [
+                            { key: 'info', value: { literalString: 'Button Clicked!' } },
+                        ],
+                    },
+                },
+            },
+        },
+    ]);
+}
+function tabsMessages() {
+    return multiComponentSurface('gallery-tabs', 'gallery-tabs-root', [
+        {
+            id: 'tab-1-content',
+            component: {
+                Text: {
+                    text: {
+                        literalString: 'First Tab Content — TextField, CheckBox, and Slider are in other sections.',
+                    },
+                },
+            },
+        },
+        {
+            id: 'tab-2-content',
+            component: {
+                Text: {
+                    text: {
+                        literalString: 'Second Tab Content — Cards, Lists, and Modals too!',
+                    },
+                },
+            },
+        },
+        {
+            id: 'gallery-tabs-root',
+            component: {
+                Tabs: {
+                    tabItems: [
+                        { title: { literalString: 'View One' }, child: 'tab-1-content' },
+                        { title: { literalString: 'View Two' }, child: 'tab-2-content' },
+                    ],
+                },
+            },
+        },
+    ]);
+}
+function iconRowMessages() {
+    return multiComponentSurface('gallery-icons', 'gallery-icons-root', [
+        {
+            id: 'gallery-icons-root',
+            component: {
+                Row: {
+                    children: { explicitList: ['icon-1', 'icon-2', 'icon-3', 'icon-4'] },
+                    distribution: 'spaceEvenly',
+                    alignment: 'center',
+                },
+            },
+        },
+        { id: 'icon-1', component: { Icon: { name: { literalString: 'star' } } } },
+        { id: 'icon-2', component: { Icon: { name: { literalString: 'home' } } } },
+        {
+            id: 'icon-3',
+            component: { Icon: { name: { literalString: 'settings' } } },
+        },
+        {
+            id: 'icon-4',
+            component: { Icon: { name: { literalString: 'search' } } },
+        },
+    ]);
+}
+function cardMessages() {
+    return multiComponentSurface('gallery-card', 'gallery-card-root', [
+        { id: 'gallery-card-root', component: { Card: { child: 'card-inner' } } },
+        {
+            id: 'card-inner',
+            component: {
+                Column: {
+                    children: {
+                        explicitList: ['card-title', 'card-divider', 'card-body'],
+                    },
+                    alignment: 'stretch',
+                },
+            },
+        },
+        {
+            id: 'card-title',
+            component: {
+                Text: { text: { literalString: 'Card Title' }, usageHint: 'h3' },
+            },
+        },
+        { id: 'card-divider', component: { Divider: { axis: 'horizontal' } } },
+        {
+            id: 'card-body',
+            component: {
+                Text: {
+                    text: {
+                        literalString: 'This is the card body content. Cards wrap any child component.',
+                    },
+                },
+            },
+        },
+    ]);
+}
+function listMessages() {
+    return multiComponentSurface('gallery-list', 'gallery-list-root', [
+        {
+            id: 'gallery-list-root',
+            component: {
+                List: {
+                    children: {
+                        explicitList: ['list-item-1', 'list-item-2', 'list-item-3'],
+                    },
+                    direction: 'vertical',
+                    alignment: 'stretch',
+                },
+            },
+        },
+        {
+            id: 'list-item-1',
+            component: { Text: { text: { literalString: '📄 Item 1 — Documents' } } },
+        },
+        {
+            id: 'list-item-2',
+            component: { Text: { text: { literalString: '📊 Item 2 — Analytics' } } },
+        },
+        {
+            id: 'list-item-3',
+            component: { Text: { text: { literalString: '⚙️ Item 3 — Settings' } } },
+        },
+    ]);
+}
+function modalMessages() {
+    return multiComponentSurface('gallery-modal', 'gallery-modal-root', [
+        {
+            id: 'gallery-modal-root',
+            component: {
+                Modal: {
+                    entryPointChild: 'modal-trigger-btn',
+                    contentChild: 'modal-body',
+                },
+            },
+        },
+        {
+            id: 'modal-trigger-btn',
+            component: {
+                Button: {
+                    child: 'modal-btn-text',
+                    primary: false,
+                    action: { name: 'noop' },
+                },
+            },
+        },
+        {
+            id: 'modal-btn-text',
+            component: { Text: { text: { literalString: 'Open Modal' } } },
+        },
+        {
+            id: 'modal-body',
+            component: {
+                Text: {
+                    text: {
+                        literalString: 'This is modal content! Click outside to close.',
+                    },
+                },
+            },
+        },
+    ]);
+}
+/** Collect all gallery messages */
+function getAllGalleryMessages() {
+    return [
+        ...textMessages(),
+        ...imageMessages(),
+        ...videoMessages(),
+        ...audioMessages(),
+        ...layoutMessages(),
+        ...textFieldMessages(),
+        ...checkboxMessages(),
+        ...sliderMessages(),
+        ...dateTimeMessages(),
+        ...multipleChoiceMessages(),
+        ...buttonMessages(),
+        ...tabsMessages(),
+        ...iconRowMessages(),
+        ...cardMessages(),
+        ...listMessages(),
+        ...modalMessages(),
+    ];
+}
+const SECTIONS = [
+    {
+        label: 'Text',
+        surfaceId: 'gallery-text-block',
+        messages: textMessages,
+    },
+    { label: 'Image', surfaceId: 'gallery-image', messages: imageMessages },
+    { label: 'Video', surfaceId: 'gallery-video', messages: videoMessages },
+    {
+        label: 'AudioPlayer',
+        surfaceId: 'gallery-audio',
+        messages: audioMessages,
+    },
+    {
+        label: 'Row + Column',
+        surfaceId: 'gallery-layout',
+        messages: layoutMessages,
+    },
+    {
+        label: 'TextField',
+        surfaceId: 'gallery-text',
+        messages: textFieldMessages,
+    },
+    {
+        label: 'CheckBox',
+        surfaceId: 'gallery-checkbox',
+        messages: checkboxMessages,
+    },
+    { label: 'Slider', surfaceId: 'gallery-slider', messages: sliderMessages },
+    {
+        label: 'DateTimeInput',
+        surfaceId: 'gallery-date',
+        messages: dateTimeMessages,
+    },
+    {
+        label: 'MultipleChoice',
+        surfaceId: 'gallery-mc',
+        messages: multipleChoiceMessages,
+    },
+    { label: 'Button', surfaceId: 'gallery-button', messages: buttonMessages },
+    { label: 'Tabs', surfaceId: 'gallery-tabs', messages: tabsMessages },
+    { label: 'Icons', surfaceId: 'gallery-icons', messages: iconRowMessages },
+    {
+        label: 'Card + Divider',
+        surfaceId: 'gallery-card',
+        messages: cardMessages,
+    },
+    { label: 'List', surfaceId: 'gallery-list', messages: listMessages },
+    { label: 'Modal', surfaceId: 'gallery-modal', messages: modalMessages },
+];
+// ---------------------------------------------------------------------------
+// Components
+// ---------------------------------------------------------------------------
+function GalleryContent() {
+    const { processMessages, clearSurfaces, getSurfaces } = useA2UIActions();
+    const [loaded, setLoaded] = useState(false);
+    const [selectedSection, setSelectedSection] = useState(null);
+    const loadAll = useCallback(() => {
+        clearSurfaces();
+        processMessages(getAllGalleryMessages());
+        setLoaded(true);
+        setSelectedSection(null);
+    }, [processMessages, clearSurfaces]);
+    const loadSection = useCallback((section) => {
+        clearSurfaces();
+        processMessages(section.messages());
+        setLoaded(true);
+        setSelectedSection(section.surfaceId);
+    }, [processMessages, clearSurfaces]);
+    const surfaces = getSurfaces();
+    const surfaceEntries = Array.from(surfaces.entries());
+    return (_jsxs(Box, { sx: { display: 'flex', minHeight: '100vh' }, children: [_jsxs(Box, { sx: {
+                    width: '240px',
+                    borderRight: '1px solid',
+                    borderColor: 'border.default',
+                    backgroundColor: 'canvas.subtle',
+                    padding: 3,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 1,
+                    overflowY: 'auto',
+                }, children: [_jsx(Text, { as: "h3", sx: { fontSize: '1rem', fontWeight: 'bold', marginBottom: 2 }, children: "Components" }), _jsx(PrimerButton, { variant: selectedSection === null && loaded ? 'primary' : 'default', onClick: loadAll, sx: { width: '100%', justifyContent: 'flex-start', marginBottom: 2 }, children: "Show All" }), SECTIONS.map(section => (_jsx(PrimerButton, { variant: selectedSection === section.surfaceId ? 'primary' : 'invisible', onClick: () => loadSection(section), sx: { width: '100%', justifyContent: 'flex-start' }, children: section.label }, section.surfaceId)))] }), _jsx(Box, { sx: { flex: 1, padding: 4, overflowY: 'auto' }, children: !loaded ? (_jsxs(Box, { sx: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height: '100%',
+                        gap: 3,
+                    }, children: [_jsx(Text, { sx: { fontSize: '3rem' }, children: "\uD83C\uDFA8" }), _jsx(Text, { as: "h2", sx: { fontSize: '1.5rem', fontWeight: 'bold' }, children: "A2UI Component Gallery" }), _jsx(Text, { sx: { color: 'fg.muted', textAlign: 'center', maxWidth: '400px' }, children: "Browse the full catalog of A2UI components rendered via @a2ui/react. Click \"Show All\" or pick a component from the sidebar." }), _jsx(PrimerButton, { variant: "primary", onClick: loadAll, children: "Show All Components" })] })) : (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 4 }, children: surfaceEntries.map(([surfaceId]) => (_jsxs(Box, { children: [_jsx(Text, { as: "h4", sx: {
+                                    fontSize: '0.75rem',
+                                    fontWeight: 'bold',
+                                    color: 'fg.muted',
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.05em',
+                                    marginBottom: 2,
+                                }, children: surfaceId }), _jsx(Box, { sx: {
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                    borderRadius: 2,
+                                    padding: 3,
+                                    backgroundColor: 'canvas.default',
+                                }, children: _jsx(A2UIRenderer, { surfaceId: surfaceId }) })] }, surfaceId))) })) })] }));
+}
+/**
+ * A2UiComponentGalleryExample — Kitchen sink of all A2UI components.
+ * No backend required — uses static A2UI JSON messages rendered client-side.
+ */
+const A2UiComponentGalleryExample = () => {
+    const handleAction = useCallback((actionMessage) => {
+        console.log('Gallery action:', actionMessage);
+        // In a real app this would be sent back to the agent
+        alert(`Action: ${JSON.stringify(actionMessage, null, 2)}`);
+    }, []);
+    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,
+                            borderBottom: '1px solid',
+                            borderColor: 'border.default',
+                            backgroundColor: 'canvas.subtle',
+                        }, children: [_jsx(Text, { as: "h1", sx: {
+                                    fontSize: '1.25rem',
+                                    fontWeight: 'bold',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 2,
+                                }, children: "\uD83C\uDFA8 A2UI Component Gallery" }), _jsx(Text, { sx: { fontSize: '0.875rem', color: 'fg.muted' }, children: "Static A2UI messages rendered via @a2ui/react \u2014 no backend needed" })] }), _jsx(GalleryContent, {})] }) }) }));
+};
+export default A2UiComponentGalleryExample;

package/lib/examples/A2UiContactCardExample.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A2UiContactCardExample
+ *
+ * Demonstrates a rich contact card UI rendered via A2UI protocol.
+ * Uses static A2UI JSON messages (no backend required) featuring:
+ * - Data-bound contact information (name, title, email, phone, etc.)
+ * - Avatar image with cover fit
+ * - Icon + text info rows (calendar, location, email, phone)
+ * - Interactive buttons with actions (Follow, Message)
+ * - Card and Column layout composition
+ * - Divider for visual separation
+ *
+ * Based on the contact_lookup sample from the A2UI repository.
+ */
+import React from 'react';
+/**
+ * A2UiContactCardExample — Rich contact card with data binding & actions.
+ * No backend required — uses static A2UI JSON messages rendered client-side.
+ */
+declare const A2UiContactCardExample: React.FC;
+export default A2UiContactCardExample;