@datalayer/agent-runtimes 0.0.2

package/lib/examples/AgentRuntimeLexicalSidebarExample.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Agent Runtime Lexical Example - Next generation chat with Lexical editor.
+ *
+ * This example demonstrates using the chat component with:
+ * - Lexical editor integration
+ * - Frontend tool execution
+ * - Multiple protocol support (AG-UI, A2A)
+ * - Middleware and extensions
+ *
+ * To run this example, create a .env file with:
+ * - VITE_DATALAYER_API_TOKEN: Get from https://datalayer.app/settings/iam/tokens
+ *
+ * @module examples/ChatLexicalExample
+ */
+import 'prismjs';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-objectivec';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-swift';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { TRANSFORMERS } from '@lexical/markdown';
+import { registerCodeHighlighting } from '@lexical/code';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { Box } from '@datalayer/primer-addons';
+import { JupyterReactTheme, useJupyter } from '@datalayer/jupyter-react';
+import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, AutoLinkPlugin, AutoEmbedPlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, LexicalConfigProvider, LexicalStatePlugin, } from '@datalayer/jupyter-lexical';
+// Import Chat components
+import { ChatSidebar, } from '../components/chat';
+import { useLexicalTools } from '../tools/adapters/agent-runtimes/lexicalHooks';
+import { editorConfig } from './lexical/editorConfig';
+import '@datalayer/jupyter-lexical/style/index.css';
+import './lexical/lexical-theme.css';
+// Fixed lexical document ID
+const LEXICAL_ID = 'chat-lexical-example';
+// Default configuration
+const DEFAULT_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const DEFAULT_AGENT_ID = import.meta.env.VITE_AGENT_ID || 'agentic_chat';
+/**
+ * Lexical plugin for code highlighting
+ */
+function CodeHighlightingPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return registerCodeHighlighting(editor);
+    }, [editor]);
+    return null;
+}
+function LexicalEditor({ serviceManager }) {
+    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+    const onRef = (_floatingAnchorElem) => {
+        if (_floatingAnchorElem !== null) {
+            setFloatingAnchorElem(_floatingAnchorElem);
+        }
+    };
+    // Handle editor changes
+    const onChange = useCallback((_editorState) => {
+        // Could persist state here
+    }, []);
+    return (_jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsxs(LexicalComposer, { initialConfig: editorConfig, children: [_jsx(LexicalStatePlugin, {}), _jsxs(Box, { sx: {
+                        position: 'relative',
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        overflow: 'hidden',
+                    }, children: [_jsx(RichTextPlugin, { contentEditable: _jsx("div", { ref: onRef, style: { flex: 1, display: 'flex', flexDirection: 'column' }, children: _jsx(ContentEditable, { className: "lexical-editor-content", style: {
+                                        flex: 1,
+                                        padding: '24px',
+                                        outline: 'none',
+                                        overflow: 'auto',
+                                    } }) }), placeholder: _jsx("div", { style: {
+                                    position: 'absolute',
+                                    top: '24px',
+                                    left: '24px',
+                                    color: 'var(--fgColor-muted)',
+                                    pointerEvents: 'none',
+                                }, children: "Start typing or use the chat to create content..." }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(OnChangePlugin, { onChange: onChange }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(CodeHighlightingPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterInputOutputPlugin, {}), _jsx(ImagesPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(ComponentPickerMenuPlugin, {}), _jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] })] }) }));
+}
+export function ChatLexicalExampleInner({ serviceManager, }) {
+    // Get lexical tools for ChatSidebar
+    const tools = useLexicalTools(LEXICAL_ID);
+    // Build AG-UI protocol config
+    const protocolConfig = useMemo(() => {
+        return {
+            type: 'ag-ui',
+            endpoint: `${DEFAULT_BASE_URL}/api/v1/examples/${DEFAULT_AGENT_ID}/`,
+            agentId: DEFAULT_AGENT_ID,
+        };
+    }, []);
+    return (_jsx(_Fragment, { children: _jsxs(Box, { sx: {
+                height: '100vh',
+                width: '100vw',
+                display: 'flex',
+                overflow: 'hidden',
+            }, children: [_jsxs(Box, { sx: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        overflow: 'hidden',
+                    }, children: [_jsxs(Box, { sx: {
+                                p: 3,
+                                borderBottom: '1px solid',
+                                borderColor: 'border.default',
+                                bg: 'canvas.subtle',
+                            }, children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Agent Runtime Lexical Sidebar Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Next generation chat with Lexical editor integration (NO Provider!)" })] }), _jsx(Box, { sx: {
+                                flex: 1,
+                                display: 'flex',
+                                overflow: 'hidden',
+                                bg: 'canvas.default',
+                            }, children: _jsx(LexicalEditor, { serviceManager: serviceManager }) })] }), _jsx(ChatSidebar, { title: "AI Assistant", position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
+                        protocol: protocolConfig,
+                        frontendTools: tools,
+                        useStore: true,
+                        suggestions: [
+                            {
+                                title: '✍️ Help me write',
+                                message: 'Can you help me write a document?',
+                            },
+                            {
+                                title: '📝 Summarize text',
+                                message: 'Can you summarize the content in the editor?',
+                            },
+                            {
+                                title: '🔍 Proofread',
+                                message: 'Can you proofread and improve my text?',
+                            },
+                            {
+                                title: '💡 Generate ideas',
+                                message: 'Can you suggest some ideas for content?',
+                            },
+                        ],
+                    } })] }) }));
+}
+/**
+ * Main example component with Simple wrapper
+ */
+export function AgentRuntimeLexicalSidebarExample() {
+    return (_jsx(JupyterReactTheme, { children: _jsx(SimpleWrapper, {}) }));
+}
+function SimpleWrapper() {
+    const { serviceManager } = useJupyter();
+    return _jsx(ChatLexicalExampleInner, { serviceManager: serviceManager });
+}
+export default AgentRuntimeLexicalSidebarExample;

package/lib/examples/AgentRuntimeNotebookExample.d.ts

@@ -0,0 +1,9 @@
+import { ServiceManager } from '@jupyterlab/services';
+/**
+ * Main Agent Runtime notebook example component
+ */
+interface AgentRuntimeNotebookExampleProps {
+    serviceManager?: ServiceManager.IManager;
+}
+declare function AgentRuntimeNotebookExample({ serviceManager, }: AgentRuntimeNotebookExampleProps): JSX.Element;
+export default AgentRuntimeNotebookExample;

package/lib/examples/AgentRuntimeNotebookExample.js

@@ -0,0 +1,148 @@
+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.
+ */
+/**
+ * Agent Runtime Notebook Example with Agent-Runtimes Integration
+ *
+ * This example demonstrates using the agent-runtimes ChatFloating component
+ * with notebook tools for AI-assisted notebook editing.
+ *
+ * To run this example:
+ * 1. Start the agent-runtimes server: `npm run start:server`
+ * 2. Start the frontend: `npm run dev`
+ *
+ * @module examples/AgentRuntimeNotebookExample
+ */
+import React, { useEffect, useState } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { Notebook } from '@datalayer/jupyter-react';
+// Agent-runtimes imports
+import { ChatFloating } from '../components/chat';
+import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
+// Import Matplotlib notebook
+import MatplotlibNotebook from './stores/notebooks/Matplotlib.ipynb.json';
+// Fixed notebook ID
+const NOTEBOOK_ID = 'agui-notebook-example';
+// Use the imported Matplotlib notebook
+const NOTEBOOK_CONTENT = MatplotlibNotebook;
+// Base URL for agent-runtimes server
+const BASE_URL = 'http://localhost:8765';
+const AGENT_ID = 'notebook-agent-runtime-example';
+// AG-UI endpoint for notebook operations
+const AG_UI_ENDPOINT = `${BASE_URL}/api/v1/ag-ui/${AGENT_ID}/`;
+/**
+ * Hook to ensure the demo-agent exists on the server.
+ * Creates it if it doesn't exist.
+ */
+function useEnsureAgent(agentId, baseUrl) {
+    const [isReady, setIsReady] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let mounted = true;
+        async function ensureAgent() {
+            try {
+                // Try to create the agent (will fail if already exists, which is fine)
+                const response = await fetch(`${baseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        name: agentId,
+                        description: 'Demo agent for notebook example',
+                        agent_library: 'pydantic-ai',
+                        transport: 'ag-ui',
+                        model: 'openai:gpt-4o-mini',
+                        system_prompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. You can help with code, explanations, and data analysis.',
+                    }),
+                });
+                if (mounted) {
+                    if (response.ok) {
+                        console.log(`[AgentRuntimeExample] Created agent: ${agentId}`);
+                        setIsReady(true);
+                    }
+                    else if (response.status === 400) {
+                        // Agent already exists, which is fine
+                        console.log(`[AgentRuntimeExample] Agent already exists: ${agentId}`);
+                        setIsReady(true);
+                    }
+                    else {
+                        const errorData = await response.json().catch(() => ({}));
+                        setError(errorData.detail || `Failed to create agent: ${response.status}`);
+                    }
+                }
+            }
+            catch (err) {
+                if (mounted) {
+                    console.error('[AgentRuntimeExample] Error creating agent:', err);
+                    setError(err instanceof Error ? err.message : 'Failed to connect to server');
+                }
+            }
+        }
+        ensureAgent();
+        return () => {
+            mounted = false;
+        };
+    }, [agentId, baseUrl]);
+    return { isReady, error };
+}
+const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
+    return (_jsxs(Box, { sx: {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'auto',
+            padding: 3,
+        }, children: [_jsxs(Box, { sx: {
+                    marginBottom: 3,
+                    paddingBottom: 3,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                }, children: [_jsx(Box, { as: "h1", children: "Agent Runtime Notebook Example" }), _jsx("p", { children: "Platform-agnostic tool usage with agent-runtimes integration. Use the AI copilot to manipulate the notebook." })] }), _jsx(Box, { sx: {
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    padding: 3,
+                    backgroundColor: 'canvas.default',
+                }, children: serviceManager ? (_jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
+});
+function NotebookWithChat({ serviceManager, }) {
+    // Ensure the agent exists before rendering chat
+    const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL);
+    // Get notebook tools for ChatFloating
+    const tools = useNotebookTools(NOTEBOOK_ID);
+    return (_jsxs(Box, { sx: {
+            height: '100vh',
+            width: '100vw',
+            display: 'flex',
+            overflow: 'hidden',
+        }, children: [_jsx(NotebookUI, { serviceManager: serviceManager }), error && (_jsxs(Box, { sx: {
+                    position: 'fixed',
+                    bottom: 20,
+                    right: 20,
+                    padding: 3,
+                    backgroundColor: 'danger.subtle',
+                    color: 'danger.fg',
+                    borderRadius: 2,
+                    maxWidth: 300,
+                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", brandColor: "#7c3aed", tools: tools, useStore: false, suggestions: [
+                    {
+                        title: 'Add a cell',
+                        message: 'Insert a random cell to the notebook',
+                    },
+                    {
+                        title: 'Run the first cell',
+                        message: 'Run the first cell in the notebook',
+                    },
+                    {
+                        title: 'Show cells',
+                        message: 'Show the notebook cells content and compute the number of cells',
+                    },
+                ] }))] }));
+}
+function AgentRuntimeNotebookExample({ serviceManager, }) {
+    return _jsx(NotebookWithChat, { serviceManager: serviceManager });
+}
+export default AgentRuntimeNotebookExample;

package/lib/examples/AgentRuntimeNotebookSidebarExample.d.ts

@@ -0,0 +1,13 @@
+import { ServiceManager } from '@jupyterlab/services';
+/**
+ * Agent Runtime Notebook Sidebar Example with Simple integration
+ */
+interface ChatJupyterNotebookExampleProps {
+    serviceManager?: ServiceManager.IManager;
+}
+export declare function AgentRuntimeNotebookExampleInner({ serviceManager, }: ChatJupyterNotebookExampleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Main example component with Simple wrapper
+ */
+export declare function AgentRuntimeNotebookSidebarExample(): import("react/jsx-runtime").JSX.Element;
+export default AgentRuntimeNotebookSidebarExample;

package/lib/examples/AgentRuntimeNotebookSidebarExample.js

@@ -0,0 +1,121 @@
+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.
+ */
+/**
+ * Agent Runtime Notebook Example - Next generation chat with Jupyter Notebook.
+ *
+ * This example demonstrates using the chat component with:
+ * - Jupyter Notebook integration
+ * - Frontend tool execution for notebook operations
+ * - AG-UI protocol support
+ * - HITL (Human-in-the-loop) tool approval
+ *
+ * To run this example:
+ * 1. Start the agent-runtimes server: `npm run start:ag-ui`
+ * 2. Create a .env file with VITE_BASE_URL if not using defaults
+ *
+ * @module examples/ChatJupyterNotebookExample
+ */
+import { useMemo } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { Notebook, JupyterReactTheme, useJupyter, } from '@datalayer/jupyter-react';
+// Import Chat components
+import { ChatSidebar, } from '../components/chat';
+// Import agent-runtimes notebook tools
+import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
+// Import sample notebook
+import MatplotlibNotebook from './stores/notebooks/Matplotlib.ipynb.json';
+// Fixed notebook ID
+const NOTEBOOK_ID = 'chat-notebook-example';
+// Use the imported Matplotlib notebook
+const NOTEBOOK_CONTENT = MatplotlibNotebook;
+// Default configuration
+const DEFAULT_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const DEFAULT_AGENT_ID = import.meta.env.VITE_AGENT_ID || 'agentic_chat';
+function NotebookUI({ serviceManager }) {
+    if (!serviceManager) {
+        return (_jsx(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                color: 'fg.muted',
+            }, children: "Loading Simple services..." }));
+    }
+    return (_jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "100%", cellSidebarMargin: 120, startDefaultKernel: true }));
+}
+export function AgentRuntimeNotebookExampleInner({ serviceManager, }) {
+    // Get notebook tools for ChatSidebar
+    const tools = useNotebookTools(NOTEBOOK_ID);
+    // Build AG-UI protocol config
+    const protocolConfig = useMemo(() => {
+        return {
+            type: 'ag-ui',
+            endpoint: `${DEFAULT_BASE_URL}/api/v1/examples/${DEFAULT_AGENT_ID}/`,
+            agentId: DEFAULT_AGENT_ID,
+        };
+    }, []);
+    return (_jsx(_Fragment, { children: _jsxs(Box, { sx: {
+                height: '100vh',
+                width: '100vw',
+                display: 'flex',
+                overflow: 'hidden',
+            }, children: [_jsxs(Box, { sx: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        overflow: 'hidden',
+                    }, children: [_jsxs(Box, { sx: {
+                                p: 3,
+                                borderBottom: '1px solid',
+                                borderColor: 'border.default',
+                                bg: 'canvas.subtle',
+                            }, children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Agent Runtime Notebook Sidebar Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Next generation chat with Jupyter Notebook integration" })] }), _jsx(Box, { sx: {
+                                flex: 1,
+                                display: 'flex',
+                                overflow: 'hidden',
+                                bg: 'canvas.default',
+                                p: 3,
+                            }, children: _jsx(Box, { sx: {
+                                    flex: 1,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                    borderRadius: 2,
+                                    overflow: 'hidden',
+                                }, children: _jsx(NotebookUI, { serviceManager: serviceManager }) }) })] }), _jsx(ChatSidebar, { title: "AI Assistant", position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
+                        protocol: protocolConfig,
+                        frontendTools: tools,
+                        useStore: true,
+                        suggestions: [
+                            {
+                                title: '📓 Explain notebook',
+                                message: 'Can you explain what this notebook does?',
+                            },
+                            {
+                                title: '🔧 Fix errors',
+                                message: 'Can you help me fix any errors in the notebook?',
+                            },
+                            {
+                                title: '📊 Add visualization',
+                                message: 'Can you add a visualization to the notebook?',
+                            },
+                            {
+                                title: '✨ Improve code',
+                                message: 'Can you suggest improvements for the code?',
+                            },
+                        ],
+                    } })] }) }));
+}
+/**
+ * Main example component with Simple wrapper
+ */
+export function AgentRuntimeNotebookSidebarExample() {
+    return (_jsx(JupyterReactTheme, { children: _jsx(SimpleWrapper, {}) }));
+}
+function SimpleWrapper() {
+    const { serviceManager } = useJupyter();
+    return _jsx(AgentRuntimeNotebookExampleInner, { serviceManager: serviceManager });
+}
+export default AgentRuntimeNotebookSidebarExample;

package/lib/examples/AgentRuntimeStandaloneExample.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ChatStandaloneExample
+ *
+ * Demonstrates the ChatStandalone component which provides a floating
+ * chat popup with props-based message handling. This is perfect for custom
+ * integrations where you want full control over the inference logic.
+ *
+ * Unlike ChatFloating (which uses protocol adapters like AG-UI), this component
+ * lets you provide your own message handler function.
+ *
+ * This example simulates an AI assistant that can respond to various queries.
+ */
+import React from 'react';
+/**
+ * AgentRuntimePopupStandaloneExample Component
+ *
+ * Demonstrates a standalone floating chat popup with custom message handling.
+ * Perfect for integrations where you want full control over the AI logic.
+ */
+declare const AgentRuntimePopupStandaloneExample: React.FC;
+export default AgentRuntimePopupStandaloneExample;

package/lib/examples/AgentRuntimeStandaloneExample.js

@@ -0,0 +1,158 @@
+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.
+ */
+/**
+ * ChatStandaloneExample
+ *
+ * Demonstrates the ChatStandalone component which provides a floating
+ * chat popup with props-based message handling. This is perfect for custom
+ * integrations where you want full control over the inference logic.
+ *
+ * Unlike ChatFloating (which uses protocol adapters like AG-UI), this component
+ * lets you provide your own message handler function.
+ *
+ * This example simulates an AI assistant that can respond to various queries.
+ */
+import { useCallback } from 'react';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
+import { ChatStandalone } from '../components/chat';
+/**
+ * Simulated AI responses for demo purposes.
+ * In a real application, this would call your AI backend.
+ */
+const simulateAIResponse = async (message, onChunk) => {
+    const lowerMessage = message.toLowerCase();
+    // Determine response based on message content
+    let response;
+    if (lowerMessage.includes('hello') || lowerMessage.includes('hi')) {
+        response =
+            "Hello! I'm a demo assistant powered by ChatStandalone. I can help you with various questions. Try asking me about the weather, time, or just chat!";
+    }
+    else if (lowerMessage.includes('weather')) {
+        response =
+            "I'm a demo assistant, so I can't fetch real weather data. But in a real implementation, you could connect me to a weather API! The ChatStandalone component lets you implement any custom logic you need.";
+    }
+    else if (lowerMessage.includes('time')) {
+        const now = new Date();
+        response = `The current time is ${now.toLocaleTimeString()} on ${now.toLocaleDateString()}. This is a real response from your browser!`;
+    }
+    else if (lowerMessage.includes('help') ||
+        lowerMessage.includes('what can you do')) {
+        response = `I'm a demo assistant showcasing ChatStandalone. Here's what makes this component special:
+
+• **Props-based**: You provide your own message handler
+• **Full control**: Implement any AI backend or logic
+• **Streaming support**: I'm simulating streaming right now!
+• **Customizable**: Brand colors, icons, positions, and more
+
+Try asking me about the time, weather, or just say hello!`;
+    }
+    else if (lowerMessage.includes('joke')) {
+        response =
+            'Why do programmers prefer dark mode? Because light attracts bugs! 🐛';
+    }
+    else {
+        response = `You said: "${message}"
+
+I'm a demo assistant, so I have limited responses. In a real implementation, you would connect ChatStandalone to your preferred AI service (OpenAI, Anthropic, local LLM, etc.) by implementing the \`onSendMessage\` handler.
+
+Try asking me for the time, a joke, or what I can do!`;
+    }
+    // Simulate streaming by sending chunks
+    if (onChunk) {
+        const words = response.split(' ');
+        for (let i = 0; i < words.length; i++) {
+            await new Promise(resolve => setTimeout(resolve, 30 + Math.random() * 20));
+            onChunk(words.slice(0, i + 1).join(' '));
+        }
+    }
+    else {
+        // Simulate processing delay
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+    return response;
+};
+/**
+ * AgentRuntimePopupStandaloneExample Component
+ *
+ * Demonstrates a standalone floating chat popup with custom message handling.
+ * Perfect for integrations where you want full control over the AI logic.
+ */
+const AgentRuntimePopupStandaloneExample = () => {
+    // Message handler - this is where you implement your AI logic
+    // The handler receives: message, messages (conversation history), and streaming options
+    const handleSendMessage = useCallback(async (message, _messages, options) => {
+        try {
+            const response = await simulateAIResponse(message, options?.onChunk);
+            options?.onComplete?.(response);
+            return response;
+        }
+        catch (error) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            options?.onError?.(err);
+            throw err;
+        }
+    }, []);
+    return (_jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(Box, { sx: {
+                minHeight: '100vh',
+                backgroundColor: 'canvas.default',
+                padding: 4,
+            }, children: [_jsxs(Box, { sx: {
+                        maxWidth: '800px',
+                        margin: '0 auto',
+                    }, children: [_jsx(Text, { as: "h1", sx: {
+                                fontSize: 4,
+                                fontWeight: 'bold',
+                                marginBottom: 2,
+                            }, children: "Agent Runtime Standalone Example" }), _jsx(Text, { as: "p", sx: {
+                                fontSize: 2,
+                                color: 'fg.muted',
+                                marginBottom: 4,
+                            }, children: "A standalone floating chat popup with props-based message handling. Click the chat button in the bottom-right corner to start!" }), _jsxs(Box, { sx: {
+                                padding: 4,
+                                backgroundColor: 'canvas.subtle',
+                                borderRadius: 2,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                marginBottom: 4,
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Key Features" }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3 }, children: [_jsxs(Box, { as: "li", sx: { marginBottom: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "Props-based Handler" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: ["Implement your own ", _jsx("code", { children: "onSendMessage" }), " function to connect to any AI backend"] })] }), _jsxs(Box, { as: "li", sx: { marginBottom: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "Streaming Support" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: ["Use the ", _jsx("code", { children: "onChunk" }), " callback for real-time streaming responses"] })] }), _jsxs(Box, { as: "li", sx: { marginBottom: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "Full Customization" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: "Brand colors, icons, position, keyboard shortcuts, and more" })] }), _jsxs(Box, { as: "li", sx: { marginBottom: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: "No Backend Required" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted', display: 'block' }, children: "Unlike AG-UI examples, this works without a server (demo mode)" })] })] })] }), _jsxs(Box, { sx: {
+                                padding: 4,
+                                backgroundColor: 'canvas.subtle',
+                                borderRadius: 2,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                marginBottom: 4,
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Usage Example" }), _jsx(Box, { as: "pre", sx: {
+                                        backgroundColor: 'neutral.emphasisPlus',
+                                        color: 'fg.onEmphasis',
+                                        padding: 3,
+                                        borderRadius: 2,
+                                        overflow: 'auto',
+                                        fontSize: 0,
+                                    }, children: _jsx("code", { children: `<ChatStandalone
+  title="My Assistant"
+  onSendMessage={async (message, options) => {
+    // Your custom AI logic here
+    const response = await myAI.chat(message);
+    
+    // Support streaming with onChunk
+    options?.onChunk?.(response);
+    options?.onComplete?.(response);
+    
+    return response;
+  }}
+  brandColor="#7c3aed"
+  position="bottom-right"
+/>` }) })] }), _jsxs(Box, { sx: {
+                                padding: 4,
+                                backgroundColor: 'attention.subtle',
+                                borderRadius: 2,
+                                border: '1px solid',
+                                borderColor: 'attention.muted',
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "When to Use" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginBottom: 2 }, children: ["Use ", _jsx("strong", { children: "ChatStandalone" }), " when:"] }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3, fontSize: 1 }, children: [_jsx("li", { children: "You have a custom AI backend that does not use AG-UI/ACP" }), _jsx("li", { children: "You want full control over the message handling logic" }), _jsx("li", { children: "You need to integrate with a specific API (OpenAI, etc.)" }), _jsx("li", { children: "You want a quick demo without setting up a backend server" })] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginTop: 2 }, children: ["Use ", _jsx("strong", { children: "ChatFloating" }), " instead when:"] }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3, fontSize: 1 }, children: [_jsx("li", { children: "You have an AG-UI compatible backend" }), _jsx("li", { children: "You need built-in tool rendering support" }), _jsx("li", { children: "You want automatic protocol handling" })] })] })] }), _jsx(ChatStandalone, { title: "Demo Assistant", onSendMessage: handleSendMessage, position: "bottom-right", brandColor: "#7c3aed", enableStreaming: true, emptyStateMessage: "Hi! I'm a demo assistant. Try asking me for the time, a joke, or what I can do!", buttonTooltip: "Chat with Demo Assistant", showPoweredBy: true })] }) }));
+};
+export default AgentRuntimePopupStandaloneExample;