@datalayer/agent-runtimes 0.0.2

package/lib/examples/AgentRuntimeLexical2Example.js

@@ -0,0 +1,236 @@
+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.
+ */
+/**
+ * Chat Lexical Example - Floating popup chat with Lexical editor.
+ *
+ * This example demonstrates using the chat popup component with:
+ * - Floating popup window that appears in a corner
+ * - Lexical editor integration
+ * - Frontend tool execution
+ * - Escape to close, click outside to close
+ * - Keyboard shortcuts
+ *
+ * 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, 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 { Text } from '@primer/react';
+import { JupyterReactTheme, useJupyter } from '@datalayer/jupyter-react';
+import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, AutoLinkPlugin, AutoEmbedPlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, } from '@datalayer/jupyter-lexical';
+// Import Chat components
+import { ChatFloating, useChatStore, useFrontendTool, DatalayerInferenceProvider, } from '../components/chat';
+import { useLexicalToolActions, ActionRegistrar, } from '../tools/adapters/copilotkit/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-popup-lexical-example';
+/**
+ * Lexical plugin for code highlighting
+ */
+function CodeHighlightingPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return registerCodeHighlighting(editor);
+    }, [editor]);
+    return null;
+}
+/**
+ * Tool registration component - registers Lexical tools with Chat
+ */
+function LexicalToolRegistrar() {
+    // Get Lexical tool actions (compatible with ActionRegistrar pattern)
+    const lexicalTools = useLexicalToolActions(LEXICAL_ID);
+    // Register each tool with Chat
+    return (_jsx(_Fragment, { children: lexicalTools.map((action, i) => (_jsx(ActionRegistrar, { action: action, useFrontendTool: useFrontendTool }, action.name || i))) }));
+}
+/**
+ * Custom tools for demonstration
+ */
+function CustomToolsRegistrar() {
+    // Simple greeting tool
+    useFrontendTool({
+        name: 'greet_user',
+        description: 'Greet a user by name',
+        parameters: [
+            {
+                name: 'name',
+                type: 'string',
+                description: 'Name of the user',
+                required: true,
+            },
+        ],
+        handler: async ({ name }) => {
+            return {
+                greeting: `Hello, ${name}! Welcome to Agent Runtime Lexical Example.`,
+            };
+        },
+    });
+    // Get current date/time tool
+    useFrontendTool({
+        name: 'get_current_time',
+        description: 'Get the current date and time',
+        parameters: [],
+        handler: async () => {
+            return {
+                datetime: new Date().toISOString(),
+                formatted: new Date().toLocaleString(),
+            };
+        },
+    });
+    // Document info tool
+    useFrontendTool({
+        name: 'get_document_info',
+        description: 'Get information about the current document',
+        parameters: [],
+        handler: async () => {
+            return {
+                documentId: LEXICAL_ID,
+                timestamp: new Date().toISOString(),
+                message: 'This is a Lexical document with Simple integration',
+            };
+        },
+    });
+    return null;
+}
+function LexicalEditor({ serviceManager: _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(LexicalComposer, { initialConfig: editorConfig, children: _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 click the chat button to open the AI assistant..." }), 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, }) {
+    // Chat configuration - set up the inference provider in the store
+    useEffect(() => {
+        const config = {
+            defaultProvider: 'datalayer',
+            apiBaseUrl: import.meta.env.VITE_DATALAYER_API_URL ||
+                'https://oss.datalayer.run/api',
+            apiKey: import.meta.env.VITE_DATALAYER_API_TOKEN,
+            defaultModel: 'claude-sonnet-4-20250514',
+            enableStreaming: true,
+            requireToolApproval: false,
+            debug: import.meta.env.DEV,
+        };
+        // Set config in store
+        useChatStore.getState().setConfig(config);
+        // Create and set inference provider
+        const provider = new DatalayerInferenceProvider({
+            apiKey: config.apiKey ?? '',
+            baseUrl: config.apiBaseUrl,
+            model: config.defaultModel,
+        });
+        useChatStore.getState().setInferenceProvider(provider);
+        // Cleanup on unmount
+        return () => {
+            useChatStore.getState().setInferenceProvider(null);
+        };
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(LexicalToolRegistrar, {}), _jsx(CustomToolsRegistrar, {}), _jsxs(Box, { sx: {
+                    height: '100vh',
+                    width: '100vw',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    overflow: 'hidden',
+                }, children: [_jsxs(Box, { sx: {
+                            p: 3,
+                            borderBottom: '1px solid',
+                            borderColor: 'border.default',
+                            bg: 'canvas.subtle',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                        }, children: [_jsxs("div", { children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Chat Lexical Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Sidebar popup chat with Lexical editor integration." })] }), _jsx(Box, { sx: {
+                                    display: 'flex',
+                                    gap: 2,
+                                    alignItems: 'center',
+                                }, children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Press", ' ', _jsx("kbd", { style: {
+                                                padding: '2px 6px',
+                                                borderRadius: '4px',
+                                                backgroundColor: 'var(--bgColor-neutral-muted)',
+                                                border: '1px solid var(--borderColor-default)',
+                                                fontFamily: 'monospace',
+                                                fontSize: '12px',
+                                            }, children: "\u2318/" }), ' ', "or click the button to open chat"] }) })] }), _jsx(Box, { sx: {
+                            flex: 1,
+                            display: 'flex',
+                            overflow: 'hidden',
+                            bg: 'canvas.default',
+                        }, children: _jsx(LexicalEditor, { serviceManager: serviceManager }) })] }), _jsx(ChatFloating, { useStore: true, title: "AI Assistant", position: "bottom-right", width: 400, height: 550, defaultOpen: false, showNewChatButton: true, showClearButton: true, showSettingsButton: false, clickOutsideToClose: true, escapeToClose: true, enableKeyboardShortcuts: true, toggleShortcut: "/", buttonTooltip: "Open AI Assistant", showPoweredBy: true, poweredByProps: {
+                    brandName: 'Datalayer',
+                    brandUrl: 'https://datalayer.ai',
+                }, onOpen: () => {
+                    // opened
+                }, onClose: () => {
+                    // closed
+                }, onNewChat: () => {
+                    // New chat started
+                } })] }));
+}
+/**
+ * Main example component with Simple wrapper
+ */
+export function AgentRuntimePopupLexicalExample() {
+    return (_jsx(JupyterReactTheme, { children: _jsx(JupyterWrapper, {}) }));
+}
+function JupyterWrapper() {
+    const { serviceManager } = useJupyter();
+    return _jsx(ChatLexicalExampleInner, { serviceManager: serviceManager });
+}
+export default AgentRuntimePopupLexicalExample;

package/lib/examples/AgentRuntimeLexicalExample.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Agent Runtime Lexical Example with Agent-Runtimes Integration.
+ *
+ * This example demonstrates using the agent-runtimes ChatFloating component
+ * with lexical tools for AI-assisted document editing.
+ *
+ * To run this example:
+ * 1. Start the agent-runtimes server: `npm run start:server`
+ * 2. Start the frontend: `npm run dev`
+ *
+ * @module examples/AgentRuntimeLexicalExample
+ */
+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 type { ServiceManager } from '@jupyterlab/services';
+import '@datalayer/jupyter-lexical/style/index.css';
+import './lexical/lexical-theme.css';
+/**
+ * Main Agent Runtime lexical example component
+ */
+interface AgentRuntimeLexicalExampleProps {
+    content?: string;
+    serviceManager?: ServiceManager.IManager;
+}
+declare function AgentRuntimeLexicalExample({ content, serviceManager, }: AgentRuntimeLexicalExampleProps): JSX.Element;
+export default AgentRuntimeLexicalExample;

package/lib/examples/AgentRuntimeLexicalExample.js

@@ -0,0 +1,260 @@
+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 with Agent-Runtimes Integration.
+ *
+ * This example demonstrates using the agent-runtimes ChatFloating component
+ * with lexical tools for AI-assisted document editing.
+ *
+ * To run this example:
+ * 1. Start the agent-runtimes server: `npm run start:server`
+ * 2. Start the frontend: `npm run dev`
+ *
+ * @module examples/AgentRuntimeLexicalExample
+ */
+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 React, { useCallback, useEffect, useRef, useState } from 'react';
+import { $getRoot, $createParagraphNode } from 'lexical';
+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, LexicalConfigProvider, LexicalStatePlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, } from '@datalayer/jupyter-lexical';
+// Agent-runtimes imports
+import { ChatFloating } from '../components/chat';
+import { ChatInlinePlugin } from '../lexical/ChatInlinePlugin';
+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 = 'agui-lexical-example';
+// Base URL for agent-runtimes server
+const BASE_URL = 'http://localhost:8765';
+const AGENT_ID = 'lexical-agent-runtime-example';
+// AG-UI endpoint for lexical 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 lexical 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 documents. You can help with writing, editing, and formatting content.',
+                    }),
+                });
+                if (mounted) {
+                    if (response.ok) {
+                        console.log(`[AgentRuntimeLexicalExample] Created agent: ${agentId}`);
+                        setIsReady(true);
+                    }
+                    else if (response.status === 400) {
+                        // Agent already exists, which is fine
+                        console.log(`[AgentRuntimeLexicalExample] 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('[AgentRuntimeLexicalExample] Error creating agent:', err);
+                    setError(err instanceof Error ? err.message : 'Failed to connect to server');
+                }
+            }
+        }
+        ensureAgent();
+        return () => {
+            mounted = false;
+        };
+    }, [agentId, baseUrl]);
+    return { isReady, error };
+}
+// import contentLexical from './lexicals/vscode.lexical';
+// const INITIAL_CONTENT = JSON.stringify(contentLexical);
+const INITIAL_CONTENT = undefined; // Use default empty document
+/**
+ * Lexical plugin for loading initial content into the editor.
+ */
+function LoadContentPlugin({ content }) {
+    const [editor] = useLexicalComposerContext();
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+        if (!content || !isFirstRender.current) {
+            return;
+        }
+        isFirstRender.current = false;
+        try {
+            const parsed = JSON.parse(content);
+            if (parsed && typeof parsed === 'object' && parsed.root) {
+                const editorState = editor.parseEditorState(content);
+                editor.setEditorState(editorState, {
+                    tag: 'history-merge',
+                });
+            }
+            else {
+                throw new Error('Invalid Lexical editor state format');
+            }
+        }
+        catch {
+            editor.update(() => {
+                const root = $getRoot();
+                root.clear();
+                const paragraph = $createParagraphNode();
+                root.append(paragraph);
+            }, {
+                tag: 'history-merge',
+            });
+        }
+    }, [content, editor]);
+    return null;
+}
+/**
+ * Lexical plugin for Simple code syntax highlighting.
+ */
+function CodeHighlightPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return registerCodeHighlighting(editor);
+    }, [editor]);
+    return null;
+}
+/**
+ * Wrapper component for kernel-dependent Simple plugins.
+ */
+function SimpleKernelPluginsInner() {
+    const { defaultKernel } = useJupyter();
+    return (_jsxs(_Fragment, { children: [_jsx(ComponentPickerMenuPlugin, { kernel: defaultKernel }), _jsx(JupyterInputOutputPlugin, { kernel: defaultKernel })] }));
+}
+/**
+ * Plugin component that captures lexical tools and passes them to parent.
+ * Must be rendered inside LexicalConfigProvider context.
+ */
+function LexicalToolsPlugin({ onToolsReady, }) {
+    const tools = useLexicalTools(LEXICAL_ID);
+    useEffect(() => {
+        onToolsReady(tools);
+    }, [tools, onToolsReady]);
+    return null;
+}
+const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, serviceManager, onToolsReady, }) {
+    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+    const onRef = (_floatingAnchorElem) => {
+        if (_floatingAnchorElem !== null) {
+            setFloatingAnchorElem(_floatingAnchorElem);
+        }
+    };
+    const handleChange = useCallback((_editorState) => {
+        // onChange handler - can be used for tracking changes
+    }, []);
+    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("h1", { children: "Agent Runtime Lexical Example" }), _jsx("p", { children: "Platform-agnostic tool usage with agent-runtimes integration. Use the AI copilot to manipulate the document." })] }), _jsx(Box, { sx: {
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    padding: 3,
+                    backgroundColor: 'canvas.default',
+                    minHeight: '600px',
+                }, children: _jsxs(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: [_jsx(LexicalToolsPlugin, { onToolsReady: onToolsReady }), _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
+                                            type: 'ag-ui',
+                                            endpoint: AG_UI_ENDPOINT,
+                                        } })] }) })] }) })] }));
+});
+function LexicalWithChat({ content, serviceManager, }) {
+    // Ensure the agent exists before rendering chat
+    const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL);
+    // State to hold tools - populated by LexicalToolsPlugin inside the context
+    const [tools, setTools] = useState([]);
+    // Stable callback for receiving tools from LexicalToolsPlugin
+    const handleToolsReady = useCallback((newTools) => {
+        setTools(newTools);
+    }, []);
+    return (_jsxs(Box, { sx: {
+            height: '100vh',
+            width: '100vw',
+            display: 'flex',
+            overflow: 'hidden',
+        }, children: [_jsx(LexicalUI, { content: content, serviceManager: serviceManager, onToolsReady: handleToolsReady }), 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: "Lexical AI Agent Runtime", description: "Hi! I can help you edit documents. Try: 'Insert a heading', 'Add a code block', or 'Create a list'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", brandColor: "#7c3aed", tools: tools, useStore: false, suggestions: [
+                    {
+                        title: 'Insert heading',
+                        message: 'Insert a heading that says "Welcome"',
+                    },
+                    {
+                        title: 'Add code block',
+                        message: 'Add a Python code block with a hello world example',
+                    },
+                    {
+                        title: 'Create list',
+                        message: 'Create a bullet list with three items about Jupyter',
+                    },
+                ] }))] }));
+}
+function AgentRuntimeLexicalExample({ content, serviceManager, }) {
+    return _jsx(LexicalWithChat, { content: content, serviceManager: serviceManager });
+}
+export default AgentRuntimeLexicalExample;

package/lib/examples/AgentRuntimeLexicalSidebarExample.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 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 type { ServiceManager } from '@jupyterlab/services';
+import '@datalayer/jupyter-lexical/style/index.css';
+import './lexical/lexical-theme.css';
+/**
+ * Agent Runtime Lexical Sidebar Example with Simple integration
+ */
+interface ChatLexicalExampleProps {
+    serviceManager?: ServiceManager.IManager;
+}
+export declare function ChatLexicalExampleInner({ serviceManager, }: ChatLexicalExampleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Main example component with Simple wrapper
+ */
+export declare function AgentRuntimeLexicalSidebarExample(): import("react/jsx-runtime").JSX.Element;
+export default AgentRuntimeLexicalSidebarExample;