@datalayer/agent-runtimes 1.0.0 → 1.0.2

package/lib/Agent.js

@@ -25,8 +25,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Text, Spinner } from '@primer/react';
 import { AlertIcon } from '@primer/octicons-react';
-import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { Box, DatalayerThemeProvider, setupPrimerPortals, } from '@datalayer/primer-addons';
 import { Chat } from './components/chat';
 import { DEFAULT_MODEL } from './specs';
 import '../style/primer-primitives.css';

package/lib/AgentLexical.js

@@ -48,8 +48,7 @@ import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { Text, Spinner } from '@primer/react';
 import { AlertIcon } from '@primer/octicons-react';
-import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { Box, DatalayerThemeProvider, setupPrimerPortals, } from '@datalayer/primer-addons';
 import { JupyterReactTheme, loadJupyterConfig, createServerSettings, getJupyterServerUrl, getJupyterServerToken, setJupyterServerUrl, setJupyterServerToken, useJupyter, } from '@datalayer/jupyter-react';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 import { ServiceManager } from '@jupyterlab/services';

package/lib/AgentNotebook.js

@@ -21,8 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Text, Spinner } from '@primer/react';
 import { AlertIcon } from '@primer/octicons-react';
-import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { Box, DatalayerThemeProvider, setupPrimerPortals, } from '@datalayer/primer-addons';
 import { Notebook, JupyterReactTheme, loadJupyterConfig, createServerSettings, getJupyterServerUrl, getJupyterServerToken, setJupyterServerUrl, setJupyterServerToken, } from '@datalayer/jupyter-react';
 import { ServiceManager } from '@jupyterlab/services';
 import { Chat } from './components/chat';

package/lib/components/McpServerManager.d.ts

@@ -17,7 +17,7 @@ export interface McpServerManagerProps {
     disabled?: boolean;
 }
 /**
- * McpServerManager - Manage MCP servers for agent spaces
+ * McpServerManager - Manage MCP servers for agent runtimes
  *
  * Features:
  * - View MCP Catalog servers (predefined, can be enabled on-demand)

package/lib/components/McpServerManager.js

@@ -9,7 +9,7 @@ import { ToolsIcon, PlusIcon, TrashIcon, SyncIcon, ServerIcon, CheckIcon, Search
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
 /**
- * McpServerManager - Manage MCP servers for agent spaces
+ * McpServerManager - Manage MCP servers for agent runtimes
  *
  * Features:
  * - View MCP Catalog servers (predefined, can be enabled on-demand)

package/lib/components/chat/components/Chat.d.ts

@@ -99,7 +99,7 @@ export interface ChatProps {
     /**
      * Runtime ID for conversation persistence.
      * When provided, messages are fetched from the server API on page reload
-     * and prevents message mixing between different agent spaces.
+     * and prevents message mixing between different agent runtimes.
      */
     runtimeId?: string;
     /**

package/lib/components/chat/components/ChatFloating.d.ts

@@ -65,7 +65,9 @@ export interface ChatFloatingProps {
     showPoweredBy?: boolean;
     /** Powered by tag props */
     poweredByProps?: Partial<PoweredByTagProps>;
-    /** Enable click outside to close */
+    /** Enable click outside to close
+     * @default false
+     */
     clickOutsideToClose?: boolean;
     /** Enable escape key to close */
     escapeToClose?: boolean;
@@ -89,7 +91,7 @@ export interface ChatFloatingProps {
     buttonIcon?: React.ReactNode;
     /** Button tooltip text */
     buttonTooltip?: string;
-    /** Brand color */
+    /** Brand color override. Defaults to the theme's `accent.emphasis` token. */
     brandColor?: string;
     /** Offset from edge (in pixels) */
     offset?: number;

package/lib/components/chat/components/ChatFloating.js

@@ -43,7 +43,7 @@ function useIsMobile(breakpoint = 640) {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', onViewModeChange, showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, runtimeId, historyEndpoint, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, panelProps, }) {
+export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = false, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor, offset = 20, animationDuration = 200, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', onViewModeChange, showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, runtimeId, historyEndpoint, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, panelProps, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();

package/lib/components/chat/components/base/ChatBase.d.ts

@@ -427,7 +427,7 @@ export interface ChatBaseProps {
     /**
      * Runtime ID for conversation persistence.
      * When provided, messages are fetched from the server API on page reload
-     * and prevents message mixing between different agent spaces.
+     * and prevents message mixing between different agent runtimes.
      */
     runtimeId?: string;
     /**

package/lib/components/chat/components/base/ChatBase.js

@@ -714,7 +714,7 @@ pendingPrompt, }) {
     // Track previous runtimeId to detect changes
     const prevRuntimeIdRef = useRef(undefined);
     // Clear displayItems and load messages when runtimeId changes
-    // This ensures each agent space has isolated conversation history
+    // This ensures each agent runtime has isolated conversation history
     useEffect(() => {
         // If runtimeId changed, clear displayItems first
         if (runtimeId !== prevRuntimeIdRef.current) {
@@ -1795,7 +1795,9 @@ pendingPrompt, }) {
             }, children: [emptyState?.icon || brandIcon || _jsx(AiAgentIcon, { colored: true, size: 48 }), _jsx(Text, { sx: { fontSize: 2 }, children: emptyState?.title || 'Start a conversation' }), (emptyState?.subtitle || description) && (_jsx(Text, { sx: { fontSize: 1 }, children: emptyState?.subtitle || description })), suggestions && suggestions.length > 0 && (_jsx(LabelGroup, { sx: { mt: 2, justifyContent: 'center' }, children: suggestions.map((suggestion, index) => (_jsx(Label, { variant: "accent", sx: {
                             cursor: 'pointer',
                             '&:hover': {
-                                bg: 'accent.muted',
+                                bg: 'accent.emphasis',
+                                color: 'var(--button-primary-fgColor-rest)',
+                                borderColor: 'accent.emphasis',
                             },
                         }, onClick: () => handleSuggestionClick(suggestion), children: suggestion.title }, index))) }))] }));
     };

package/lib/components/chat/store/conversationStore.d.ts

@@ -3,7 +3,7 @@ import type { ChatMessage } from '../types/message';
  * Conversation data for a single runtime
  */
 export interface ConversationData {
-    /** Runtime/agent space ID */
+    /** Agent runtime ID */
     runtimeId: string;
     /** Messages in this conversation */
     messages: ChatMessage[];

package/lib/components/chat/store/conversationStore.js

@@ -3,11 +3,11 @@
  * Distributed under the terms of the Modified BSD License.
  */
 /**
- * Zustand store for conversation history per runtime/agent space.
+ * Zustand store for conversation history per agent runtime.
  * Stores messages per runtime ID in memory during the session.
  *
  * Key features:
- * - Messages are stored per runtime ID (agent space) in memory
+ * - Messages are stored per runtime ID in memory
  * - On page reload, messages are fetched from the server API
  * - No browser storage persistence - server is the source of truth
  *

package/lib/examples/A2UiRestaurantExample.js

@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider } from './stores/themedProvider';
 import { Text, Spinner, TextInput, Button } from '@primer/react';
 import { A2UIProvider, A2UIRenderer, useA2UI } from '../renderers/a2ui';
 // A2UI endpoint for pydantic-ai restaurant agent
@@ -278,7 +278,7 @@ const A2UiRestaurantExample = () => {
         console.log('A2UI Action:', action);
         // Actions are handled in the content component
     }, []);
-    return (_jsx(DatalayerThemeProvider, { children: _jsx(A2UIProvider, { onAction: handleAction, children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsx(A2UIProvider, { onAction: handleAction, children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     minHeight: '100vh',

package/lib/examples/AgUiAgenticExample.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider } from './stores/themedProvider';
 import { ChatFloating } from '../components/chat';
 // AG-UI endpoint for agentic chat example
 const AGENTIC_CHAT_ENDPOINT = 'http://localhost:8765/api/v1/examples/agentic_chat/';
@@ -17,7 +17,7 @@ const AGENTIC_CHAT_ENDPOINT = 'http://localhost:8765/api/v1/examples/agentic_cha
  * - Floating popup interface
  */
 const AgUiAgenticExample = () => {
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -49,7 +49,7 @@ const AgUiAgenticExample = () => {
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This example demonstrates the AG-UI (Agent User Interface) protocol for streaming AI interactions. The agent uses SSE (Server-Sent Events) to stream responses and tool calls in real-time." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Protocol Events:" }), " TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT, TEXT_MESSAGE_END, TOOL_CALL_START, TOOL_CALL_END"] })] })] }), _jsx(ChatFloating, { endpoint: AGENTIC_CHAT_ENDPOINT, title: "Agentic Chat", description: "Chat with an AI agent that can use tools like getting the current time.", position: "bottom-right", brandColor: "#7c3aed", defaultOpen: true, suggestions: [
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This example demonstrates the AG-UI (Agent User Interface) protocol for streaming AI interactions. The agent uses SSE (Server-Sent Events) to stream responses and tool calls in real-time." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Protocol Events:" }), " TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT, TEXT_MESSAGE_END, TOOL_CALL_START, TOOL_CALL_END"] })] })] }), _jsx(ChatFloating, { endpoint: AGENTIC_CHAT_ENDPOINT, title: "Agentic Chat", description: "Chat with an AI agent that can use tools like getting the current time.", position: "bottom-right", defaultOpen: true, suggestions: [
                         {
                             title: 'What time is it?',
                             message: 'What is the current time?',

package/lib/examples/AgUiBackendToolRenderingExample.js

@@ -18,7 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
 import { ChatFloating } from '../components/chat';
 import { InlineWeatherCard } from './ag-ui/weather';
 // AG-UI endpoint for backend tool rendering example
@@ -53,12 +53,13 @@ const renderWeatherToolResult = (context) => {
  * - Loading states while fetching data
  */
 const AgUiBackendToolRenderingExample = () => {
+    const brandColor = useThemeBrandColor();
     // Optional: still track weather for sidebar display if needed
     const handleStateUpdate = useCallback((_state) => {
         // State updates are still available if needed for other purposes
         // Uncomment to debug: console.log('[WeatherExample] State update:', _state);
     }, []);
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -89,7 +90,7 @@ const AgUiBackendToolRenderingExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"What's the weather in New York?\"" }), _jsx("li", { children: "\"Weather in London and Paris\"" }), _jsx("li", { children: "\"Is it sunny in Sydney?\"" }), _jsx("li", { children: "\"How's the weather in Tokyo today?\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: BACKEND_TOOL_RENDERING_ENDPOINT, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: "#667eea", onStateUpdate: handleStateUpdate, renderToolResult: renderWeatherToolResult, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"What's the weather in New York?\"" }), _jsx("li", { children: "\"Weather in London and Paris\"" }), _jsx("li", { children: "\"Is it sunny in Sydney?\"" }), _jsx("li", { children: "\"How's the weather in Tokyo today?\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: BACKEND_TOOL_RENDERING_ENDPOINT, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, renderToolResult: renderWeatherToolResult, suggestions: [
                         {
                             title: 'Paris weather',
                             message: "What's the weather like in Paris?",

package/lib/examples/AgUiHaikuGenUIExample.js

@@ -19,7 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useRef, useImperativeHandle, forwardRef, } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
 import { ChatFloating } from '../components/chat';
 import { InlineHaikuCard, HaikuDisplay } from './ag-ui/haiku';
 // AG-UI endpoint for haiku generative UI example
@@ -60,6 +60,7 @@ HaikuDisplayWithRef.displayName = 'HaikuDisplayWithRef';
  * - Japanese/English text rendering
  */
 const AgUiHaikuGenUIExample = () => {
+    const brandColor = useThemeBrandColor();
     // Ref to the main display for adding haikus
     const displayRef = useRef(null);
     // Track processed tool call IDs to avoid duplicates
@@ -95,7 +96,7 @@ const AgUiHaikuGenUIExample = () => {
         }
         return (_jsx(InlineHaikuCard, { haiku: haiku, status: context.status, error: context.error }));
     }, []);
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -133,7 +134,7 @@ const AgUiHaikuGenUIExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"Write me a haiku about cherry blossoms\"" }), _jsx("li", { children: "\"Create a haiku about coding late at night\"" }), _jsx("li", { children: "\"Generate a haiku about the ocean\"" }), _jsx("li", { children: "\"Write a haiku about autumn leaves\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: HAIKU_ENDPOINT, title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: "#667eea", defaultOpen: true, renderToolResult: renderHaikuToolResult, hideMessagesAfterToolUI: true, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"Write me a haiku about cherry blossoms\"" }), _jsx("li", { children: "\"Create a haiku about coding late at night\"" }), _jsx("li", { children: "\"Generate a haiku about the ocean\"" }), _jsx("li", { children: "\"Write a haiku about autumn leaves\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: HAIKU_ENDPOINT, title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, renderToolResult: renderHaikuToolResult, hideMessagesAfterToolUI: true, suggestions: [
                         {
                             title: 'Cherry blossoms',
                             message: 'Write me a haiku about cherry blossoms in spring.',

package/lib/examples/AgUiHumanInTheLoopExample.js

@@ -18,7 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect } from 'react';
 import { Text, Checkbox, FormControl, Label, ProgressBar, Button, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
 import { ChatFloating } from '../components/chat';
 import { TasklistIcon, CheckCircleFillIcon, XCircleFillIcon, } from '@primer/octicons-react';
 // AG-UI endpoint for human in the loop example
@@ -178,7 +178,8 @@ const renderTaskStepsTool = (context) => {
  * - UI state changes based on user actions
  */
 const AgUiHumanInTheLoopExample = () => {
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    const brandColor = useThemeBrandColor();
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -206,7 +207,7 @@ const AgUiHumanInTheLoopExample = () => {
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'accent.muted',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Key Concept: respond() Callback" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.default' }, children: ["The ", _jsx("code", { children: "renderToolResult" }), " function receives a", ' ', _jsx("code", { children: "respond" }), " callback when the tool status is \"executing\". Calling ", _jsxs("code", { children: ["respond(", '{ accepted: true, steps: [...] }', ")"] }), ' ', "sends the user's decision back to the agent, completing the human-in-the-loop interaction."] })] })] }), _jsx(ChatFloating, { endpoint: HUMAN_IN_THE_LOOP_ENDPOINT, title: "Task Planner", description: "I can help you plan tasks. I'll generate steps for your review.", position: "bottom-right", brandColor: "#059669", renderToolResult: renderTaskStepsTool, hideMessagesAfterToolUI: true, suggestions: [
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Key Concept: respond() Callback" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.default' }, children: ["The ", _jsx("code", { children: "renderToolResult" }), " function receives a", ' ', _jsx("code", { children: "respond" }), " callback when the tool status is \"executing\". Calling ", _jsxs("code", { children: ["respond(", '{ accepted: true, steps: [...] }', ")"] }), ' ', "sends the user's decision back to the agent, completing the human-in-the-loop interaction."] })] })] }), _jsx(ChatFloating, { endpoint: HUMAN_IN_THE_LOOP_ENDPOINT, title: "Task Planner", description: "I can help you plan tasks. I'll generate steps for your review.", position: "bottom-right", brandColor: brandColor, renderToolResult: renderTaskStepsTool, hideMessagesAfterToolUI: true, suggestions: [
                         {
                             title: 'Plan a trip',
                             message: 'Plan a weekend trip to Paris.',

package/lib/examples/AgUiSharedStateExample.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { Text, Button, TextInput, Label } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
 import { ChatFloating } from '../components/chat';
 import { PlusIcon, XIcon, BeakerIcon, ClockIcon, PersonIcon, } from '@primer/octicons-react';
 // AG-UI endpoint for shared state example
@@ -104,6 +104,7 @@ const RecipeDisplay = ({ recipe, onUpdate }) => {
  * - Editable UI that updates shared state
  */
 const AgUiSharedStateExample = () => {
+    const brandColor = useThemeBrandColor();
     const [recipe, setRecipe] = useState(DEFAULT_RECIPE);
     // Handle state updates from AG-UI
     const handleStateUpdate = useCallback((state) => {
@@ -125,7 +126,7 @@ const AgUiSharedStateExample = () => {
     const handleClear = useCallback(() => {
         setRecipe(DEFAULT_RECIPE);
     }, []);
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -167,7 +168,7 @@ const AgUiSharedStateExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"Create a recipe for chocolate chip cookies\"" }), _jsx("li", { children: "\"Add butter and sugar to the ingredients\"" }), _jsx("li", { children: "\"Update the prep time to 20 minutes\"" }), _jsx("li", { children: "\"Suggest 3 more ingredients for my recipe\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: SHARED_STATE_ENDPOINT, title: "Recipe Assistant", description: "Let's build a recipe together! I can add ingredients, instructions, and more.", position: "bottom-right", brandColor: "#be185d", onStateUpdate: handleStateUpdate, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"Create a recipe for chocolate chip cookies\"" }), _jsx("li", { children: "\"Add butter and sugar to the ingredients\"" }), _jsx("li", { children: "\"Update the prep time to 20 minutes\"" }), _jsx("li", { children: "\"Suggest 3 more ingredients for my recipe\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: SHARED_STATE_ENDPOINT, title: "Recipe Assistant", description: "Let's build a recipe together! I can add ingredients, instructions, and more.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
                         {
                             title: 'Pasta recipe',
                             message: 'Help me create a simple pasta recipe.',

package/lib/examples/AgUiToolsBasedGenUIExample.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { Text, ProgressBar, Button } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
 import { ChatFloating } from '../components/chat';
 import { CheckCircleIcon, CircleIcon, DotFillIcon, CheckIcon, XIcon, } from '@primer/octicons-react';
 // AG-UI endpoint for agentic generative UI example
@@ -169,6 +169,7 @@ const PlanDisplay = ({ plan, isInteractive = true, onStepToggle, onConfirm, onRe
  * - Interactive step selection with Confirm/Reject buttons
  */
 const AgUiToolsBasedGenUIExample = () => {
+    const brandColor = useThemeBrandColor();
     const [plan, setPlan] = useState(null);
     const [decision, setDecision] = useState(null);
     // Handle state updates from AG-UI events
@@ -209,7 +210,7 @@ const AgUiToolsBasedGenUIExample = () => {
         setDecision('rejected');
         console.log('Plan rejected');
     }, []);
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -243,7 +244,7 @@ const AgUiToolsBasedGenUIExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "STATE_SNAPSHOT - Full state replacement" }), _jsx("li", { children: "STATE_DELTA - Incremental JSON Patch updates (RFC 6902)" }), _jsx("li", { children: "TOOL_CALL_START / TOOL_CALL_END - Tool execution tracking" })] })] })] })] }), _jsx(ChatFloating, { endpoint: AGENTIC_GENERATIVE_UI_ENDPOINT, title: "Plan Generator", description: "I can create detailed plans and update them in real-time.", position: "bottom-right", brandColor: "#0969da", onStateUpdate: handleStateUpdate, suggestions: [
+                                            }, children: [_jsx("li", { children: "STATE_SNAPSHOT - Full state replacement" }), _jsx("li", { children: "STATE_DELTA - Incremental JSON Patch updates (RFC 6902)" }), _jsx("li", { children: "TOOL_CALL_START / TOOL_CALL_END - Tool execution tracking" })] })] })] })] }), _jsx(ChatFloating, { endpoint: AGENTIC_GENERATIVE_UI_ENDPOINT, title: "Plan Generator", description: "I can create detailed plans and update them in real-time.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
                         {
                             title: 'Project plan',
                             message: 'Create a project plan for building a mobile app.',

package/lib/examples/AgentRuntimeChatExample.js

@@ -19,7 +19,7 @@ import { useEffect, useState } from 'react';
 import { Text, Spinner } from '@primer/react';
 import { AlertIcon } from '@primer/octicons-react';
 import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider } from './stores/themedProvider';
 import { Chat } from '../components/chat';
 setupPrimerPortals();
 const BASE_URL = 'http://localhost:8765';
@@ -89,7 +89,7 @@ const AgentRuntimeChatExample = () => {
     }, []);
     // Loading state while agent is being created
     if (isCreating) {
-        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+        return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'center',
@@ -101,7 +101,7 @@ const AgentRuntimeChatExample = () => {
     }
     // Error state
     if (error || !agentId) {
-        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+        return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'center',

package/lib/examples/AgentRuntimeCustomExample.js

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { Spinner, Text } from '@primer/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider } from './stores/themedProvider';
 import { Chat } from '../components/chat';
 // Create a query client for React Query
 const queryClient = new QueryClient({
@@ -121,7 +121,7 @@ Be concise, helpful, and provide working code examples when appropriate.`,
  */
 const AgentRuntimeCustomExample = () => {
     const { agentId, isLoading, error, retry } = useEnsureAgent();
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     height: '100vh',

package/lib/examples/AgentRuntimeFormExample.js

@@ -11,7 +11,7 @@ import { AiAgentIcon } from '@datalayer/icons-react';
 import { Blankslate } from '@primer/react/experimental';
 import { QueryClient, QueryClientProvider, useQuery, } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider } from './stores/themedProvider';
 import { Chat, useChatStore } from '../components/chat';
 import { DEFAULT_MODEL } from '../specs';
 import { useAgentsStore } from './stores/examplesStore';
@@ -528,7 +528,7 @@ githubClientId, kaggleToken, }) => {
         }
         setIsConfigured(false);
     };
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { children: _jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: isNewMode ? undefined : currentAgent?.name, agentDescription: isNewMode ? undefined : currentAgent?.description, agentStatus: currentAgent?.status, showContextTree: showContextTree, isNewAgent: isNewMode, isConfigured: isConfigured, onSessionChange: setActiveSession, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: isNewMode ? undefined : currentAgent?.name, agentDescription: isNewMode ? undefined : currentAgent?.description, agentStatus: currentAgent?.status, showContextTree: showContextTree, isNewAgent: isNewMode, isConfigured: isConfigured, onSessionChange: setActiveSession, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
                             ? () => toggleAgentStatus(currentAgent.id)
                             : undefined }), leftPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
                                     position: 'fixed',

package/lib/examples/AgentRuntimeLexical2Example.js

@@ -47,7 +47,8 @@ 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 { useJupyter } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 // Import Chat components
 import { ChatFloating, useChatStore, useFrontendTool, DatalayerInferenceProvider, } from '../components/chat';
@@ -228,7 +229,7 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
  * Main example component with Simple wrapper
  */
 export function AgentRuntimePopupLexicalExample() {
-    return (_jsx(JupyterReactTheme, { children: _jsx(JupyterWrapper, {}) }));
+    return (_jsx(ThemedJupyterProvider, { children: _jsx(JupyterWrapper, {}) }));
 }
 function JupyterWrapper() {
     const { serviceManager } = useJupyter();

package/lib/examples/AgentRuntimeLexicalExample.js

@@ -44,7 +44,8 @@ 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 { useJupyter } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 // Agent-runtimes imports
 import { ChatFloating } from '../components/chat';
@@ -215,7 +216,7 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
                     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(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
+                }, 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(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(ThemedJupyterProvider, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
                                             type: 'ag-ui',
                                             endpoint: AG_UI_ENDPOINT,
                                         }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] }) })] }) })] }));
@@ -246,7 +247,7 @@ function LexicalWithChat({ content, serviceManager, }) {
                     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", frontendTools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+                }, 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", frontendTools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
                     {
                         title: 'Insert heading',
                         message: 'Insert a heading that says "Welcome"',

package/lib/examples/AgentRuntimeLexicalSidebarExample.js

@@ -45,7 +45,8 @@ 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 { useJupyter } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/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 Chat components
 import { ChatSidebar, } from '../components/chat';
@@ -165,7 +166,7 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
  * Main example component with Simple wrapper
  */
 export function AgentRuntimeLexicalSidebarExample() {
-    return (_jsx(JupyterReactTheme, { children: _jsx(SimpleWrapper, {}) }));
+    return (_jsx(ThemedJupyterProvider, { children: _jsx(SimpleWrapper, {}) }));
 }
 function SimpleWrapper() {
     const { serviceManager } = useJupyter();

package/lib/examples/AgentRuntimeNotebookExample.js

@@ -17,7 +17,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import React, { useEffect, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { JupyterReactTheme, Notebook } from '@datalayer/jupyter-react';
+import { Notebook } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 // Agent-runtimes imports
 import { ChatFloating } from '../components/chat';
 import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
@@ -107,7 +108,7 @@ const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
                     borderRadius: 2,
                     padding: 3,
                     backgroundColor: 'canvas.default',
-                }, children: serviceManager ? (_jsx(JupyterReactTheme, { children: _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..." }) })) })] }));
+                }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _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
@@ -128,7 +129,7 @@ function NotebookWithChat({ serviceManager, }) {
                     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", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+                }, 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", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
                     {
                         title: 'Add a cell',
                         message: 'Insert a random cell to the notebook',

package/lib/examples/AgentRuntimeNotebookSidebarExample.js

@@ -20,7 +20,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useMemo } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { Notebook, JupyterReactTheme, useJupyter, } from '@datalayer/jupyter-react';
+import { Notebook, useJupyter } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 // Import Chat components
 import { ChatSidebar, } from '../components/chat';
 // Import agent-runtimes notebook tools
@@ -112,7 +113,7 @@ export function AgentRuntimeNotebookExampleInner({ serviceManager, }) {
  * Main example component with Simple wrapper
  */
 export function AgentRuntimeNotebookSidebarExample() {
-    return (_jsx(JupyterReactTheme, { children: _jsx(SimpleWrapper, {}) }));
+    return (_jsx(ThemedJupyterProvider, { children: _jsx(SimpleWrapper, {}) }));
 }
 function SimpleWrapper() {
     const { serviceManager } = useJupyter();