@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/LexicalAgentSidebarExample.js

@@ -0,0 +1,261 @@
+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_KEY: Get from https://datalayer.app/settings/iam/tokens
+ *
+ * @module examples/LexicalAgentSidebarExample
+ */
+import '@datalayer/jupyter-react/lib/css/PrismCss';
+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 { useJupyter } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './utils/themedProvider';
+import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, LexicalConfigProvider, LexicalStatePlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
+import { ChatSidebar } from '../chat';
+import { ChatInlinePlugin } from '../lexical/ChatInlinePlugin';
+import { useChatInlineToolbarItems } from '../lexical/useChatInlineToolbarItems';
+import { useLexicalTools } from '../tools/adapters/agent-runtimes/lexicalHooks';
+import { editorConfig } from './lexical/editorConfig';
+import { DEFAULT_MODEL } from '../specs';
+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 || 'lexical-sidebar-agent-runtime-example';
+const VERCEL_AI_ENDPOINT = `${DEFAULT_BASE_URL}/api/v1/vercel-ai/${DEFAULT_AGENT_ID}`;
+function getJupyterSandboxUrl(serviceManager) {
+    const envUrl = import.meta.env.VITE_JUPYTER_SANDBOX_URL;
+    if (envUrl) {
+        return envUrl;
+    }
+    const baseUrl = serviceManager?.serverSettings?.baseUrl?.replace(/\/$/, '');
+    if (!baseUrl) {
+        return undefined;
+    }
+    if (baseUrl.includes('token=')) {
+        return baseUrl;
+    }
+    const token = serviceManager?.serverSettings?.token;
+    if (!token) {
+        return baseUrl;
+    }
+    const separator = baseUrl.includes('?') ? '&' : '?';
+    return `${baseUrl}${separator}token=${encodeURIComponent(token)}`;
+}
+function useEnsureAgent(agentId, baseUrl, jupyterSandboxUrl) {
+    const [isReady, setIsReady] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let mounted = true;
+        async function ensureAgent() {
+            try {
+                if (!jupyterSandboxUrl) {
+                    if (mounted) {
+                        setError('Could not detect Jupyter server URL from Lexical service manager.');
+                        setIsReady(false);
+                    }
+                    return;
+                }
+                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 sidebar example',
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        model: DEFAULT_MODEL,
+                        system_prompt: 'You are a helpful AI assistant that helps users work with lexical documents. For document operations, always use the lexical frontend tools so actions happen in the live document UI. Use executeCode only for temporary inspection code that should not modify persisted document content.',
+                        enable_codemode: false,
+                        sandbox_variant: 'jupyter',
+                        jupyter_sandbox: jupyterSandboxUrl,
+                    }),
+                });
+                if (mounted) {
+                    if (response.ok) {
+                        console.warn(`[LexicalAgentSidebarExample] Created agent: ${agentId}`);
+                        setError(null);
+                        setIsReady(true);
+                    }
+                    else if (response.status === 409 || response.status === 400) {
+                        console.warn(`[LexicalAgentSidebarExample] Reusing existing agent: ${agentId}`);
+                        setError(null);
+                        setIsReady(true);
+                    }
+                    else {
+                        const errorData = await response.json().catch(() => ({}));
+                        setError(errorData.detail || `Failed to create agent: ${response.status}`);
+                        setIsReady(false);
+                    }
+                }
+            }
+            catch (err) {
+                if (mounted) {
+                    console.error('[LexicalAgentSidebarExample] Error creating agent:', err);
+                    setError(err instanceof Error ? err.message : 'Failed to connect to server');
+                    setIsReady(false);
+                }
+            }
+        }
+        void ensureAgent();
+        return () => {
+            mounted = false;
+        };
+    }, [agentId, baseUrl, jupyterSandboxUrl]);
+    return { isReady, error };
+}
+/**
+ * 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 [_isLinkEditMode, setIsLinkEditMode] = useState(false);
+    // AI actions registered as toolbar items
+    const { toolbarItems, isAiOpen, pendingPrompt, clearPendingPrompt, closeAi } = useChatInlineToolbarItems();
+    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(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterInputOutputPlugin, {}), _jsx(ImagesPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(ComponentPickerMenuPlugin, {}), _jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
+                                type: 'vercel-ai',
+                                endpoint: VERCEL_AI_ENDPOINT,
+                            }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] })] }) }));
+}
+export function ChatLexicalAgentExampleInner({ serviceManager, }) {
+    const jupyterSandboxUrl = useMemo(() => getJupyterSandboxUrl(serviceManager), [serviceManager]);
+    const { isReady, error } = useEnsureAgent(DEFAULT_AGENT_ID, DEFAULT_BASE_URL, jupyterSandboxUrl);
+    // Get lexical tools for ChatSidebar
+    const tools = useLexicalTools(LEXICAL_ID);
+    // Build Vercel AI protocol config
+    const protocolConfig = useMemo(() => {
+        return {
+            type: 'vercel-ai',
+            endpoint: VERCEL_AI_ENDPOINT,
+            agentId: DEFAULT_AGENT_ID,
+            enableConfigQuery: true,
+            configEndpoint: `${DEFAULT_BASE_URL}/api/v1/configure`,
+        };
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                    height: 'calc(100vh - 70px)',
+                    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 }) })] }), isReady && (_jsx(ChatSidebar, { title: "AI Assistant", protocol: protocolConfig, 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?',
+                                },
+                            ],
+                        } }))] }), 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] }))] }));
+}
+/**
+ * Main example component with Simple wrapper
+ */
+export function AgentRuntimeLexicalAgentSidebarExample() {
+    return (_jsx(ThemedJupyterProvider, { children: _jsx(SimpleWrapper, {}) }));
+}
+function SimpleWrapper() {
+    const { serviceManager } = useJupyter();
+    return _jsx(ChatLexicalAgentExampleInner, { serviceManager: serviceManager });
+}
+export default AgentRuntimeLexicalAgentSidebarExample;

package/lib/examples/NotebookAgentExample.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/NotebookAgentExample.js

@@ -0,0 +1,192 @@
+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/NotebookAgentExample
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { Notebook } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './utils/themedProvider';
+// Agent-runtimes imports
+import { ChatFloating } from '../chat';
+import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
+// Import Matplotlib notebook
+import MatplotlibNotebook from './utils/notebooks/Matplotlib.ipynb.json';
+import { DEFAULT_MODEL } from '../specs';
+// 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';
+// Vercel AI endpoint
+const VERCEL_AI_ENDPOINT = `${BASE_URL}/api/v1/vercel-ai/${AGENT_ID}`;
+function getJupyterSandboxUrl(serviceManager) {
+    const envUrl = import.meta.env.VITE_JUPYTER_SANDBOX_URL;
+    if (envUrl) {
+        return envUrl;
+    }
+    const baseUrl = serviceManager?.serverSettings?.baseUrl?.replace(/\/$/, '');
+    if (!baseUrl) {
+        return undefined;
+    }
+    if (baseUrl.includes('token=')) {
+        return baseUrl;
+    }
+    const token = serviceManager?.serverSettings?.token;
+    if (!token) {
+        return baseUrl;
+    }
+    const separator = baseUrl.includes('?') ? '&' : '?';
+    return `${baseUrl}${separator}token=${encodeURIComponent(token)}`;
+}
+/**
+ * Hook to ensure the example-agent is aligned with the active notebook runtime.
+ * Recreates the agent with jupyter sandbox settings from the Notebook UI.
+ */
+function useEnsureAgent(agentId, baseUrl, jupyterSandboxUrl) {
+    const [isReady, setIsReady] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let mounted = true;
+        async function ensureAgent() {
+            try {
+                if (!jupyterSandboxUrl) {
+                    if (mounted) {
+                        setError('Could not detect Jupyter server URL from Notebook service manager.');
+                        setIsReady(false);
+                    }
+                    return;
+                }
+                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: 'vercel-ai',
+                        model: DEFAULT_MODEL,
+                        system_prompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. For notebook operations, always use the notebook frontend tools (runCell, readAllCells, readCell, insertCell, updateCell, deleteCells) so actions happen in the live notebook UI. Use executeCode only for temporary inspection code that should not modify notebook cells.',
+                        enable_codemode: false,
+                        sandbox_variant: 'jupyter',
+                        jupyter_sandbox: jupyterSandboxUrl,
+                    }),
+                });
+                if (mounted) {
+                    if (response.ok) {
+                        console.warn(`[AgentRuntimeExample] Created agent: ${agentId}`);
+                        setError(null);
+                        setIsReady(true);
+                    }
+                    else if (response.status === 409 || response.status === 400) {
+                        // Agent already exists; reuse it and continue.
+                        console.warn(`[AgentRuntimeExample] Reusing existing agent: ${agentId}`);
+                        setError(null);
+                        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, jupyterSandboxUrl]);
+    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", sx: { margin: 0 }, 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(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "calc(100vh - 300px)", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
+});
+function NotebookWithChat({ serviceManager, }) {
+    const jupyterSandboxUrl = useMemo(() => getJupyterSandboxUrl(serviceManager), [serviceManager]);
+    // Ensure the agent exists before rendering chat
+    const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL, jupyterSandboxUrl);
+    const protocolConfig = useMemo(() => ({
+        type: 'vercel-ai',
+        endpoint: VERCEL_AI_ENDPOINT,
+        agentId: AGENT_ID,
+        enableConfigQuery: true,
+        configEndpoint: `${BASE_URL}/api/v1/configure`,
+    }), []);
+    // Get notebook tools for ChatFloating
+    const frontendTools = useNotebookTools(NOTEBOOK_ID);
+    return (_jsxs(Box, { sx: {
+            height: '100%',
+            width: '100%',
+            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, { protocol: protocolConfig, 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", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, 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',
+                    },
+                    {
+                        title: 'Analyze Titanic',
+                        message: 'Analyze the Titanic dataset and provide insights about the passengers and survival rates',
+                    },
+                ] }))] }));
+}
+function AgentRuntimeNotebookExample({ serviceManager, }) {
+    return _jsx(NotebookWithChat, { serviceManager: serviceManager });
+}
+export default AgentRuntimeNotebookExample;

package/lib/examples/{NotebookSidebarExample.d.ts → NotebookAgentSidebarExample.d.ts}

@@ -9,5 +9,5 @@ export declare function AgentRuntimeNotebookExampleInner({ serviceManager, }: Ch
 /**
  * Main example component with Simple wrapper
  */
-export declare function AgentRuntimeNotebookSidebarExample(): import("react/jsx-runtime").JSX.Element;
-export default AgentRuntimeNotebookSidebarExample;
+export declare function AgentRuntimeNotebookAgentSidebarExample(): import("react/jsx-runtime").JSX.Element;
+export default AgentRuntimeNotebookAgentSidebarExample;