@datalayer/agent-runtimes 0.0.10 → 0.0.12

package/lib/components/chat/components/AgentDetails.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * AgentDetails component - Shows detailed information about the agent
  * including name, protocol, URL, message count, and context details.
  */
-import { ArrowLeftIcon, CheckCircleIcon, XCircleIcon, CodeIcon, ZapIcon, DownloadIcon, } from '@primer/octicons-react';
+import { ArrowLeftIcon, CheckCircleIcon, XCircleIcon, CodeIcon, BriefcaseIcon, DownloadIcon, NoteIcon, ServerIcon, } from '@primer/octicons-react';
 import { Button, Heading, IconButton, Text, Label, Spinner, ToggleSwitch, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AiAgentIcon } from '@datalayer/icons-react';
@@ -171,7 +171,7 @@ async function downloadContextSnapshotAsCSV(agentId, apiBase) {
 /**
  * AgentDetails component displays comprehensive information about the agent.
  */
-export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, }) {
+export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, showBackHeader = true, }) {
     const queryClient = useQueryClient();
     // Fetch MCP toolsets status
     const { data: mcpStatus, isLoading: mcpLoading } = useQuery({
@@ -220,20 +220,33 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
             queryClient.invalidateQueries({ queryKey: ['codemode-status'] });
         },
     });
+    // Fetch agent spec (original creation request with separated system prompts)
+    const { data: agentSpec, isLoading: specLoading } = useQuery({
+        queryKey: ['agent-spec', agentId, apiBase],
+        queryFn: async () => {
+            const base = getApiBase(apiBase);
+            const response = await fetch(`${base}/api/v1/configure/agents/${encodeURIComponent(agentId)}/spec`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch agent spec');
+            }
+            return response.json();
+        },
+        enabled: !!agentId,
+    });
     return (_jsxs(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
             height: '100%',
             bg: 'canvas.default',
             overflow: 'auto',
-        }, children: [_jsxs(Box, { sx: {
+        }, children: [showBackHeader && (_jsxs(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 2,
                     p: 3,
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
-                }, children: [_jsx(IconButton, { icon: ArrowLeftIcon, "aria-label": "Back to chat", variant: "invisible", onClick: onBack }), _jsx(Heading, { as: "h2", sx: { fontSize: 3, fontWeight: 'semibold' }, children: "Agent Details" })] }), _jsxs(Box, { sx: { p: 3, display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs(Box, { sx: {
+                }, children: [_jsx(IconButton, { icon: ArrowLeftIcon, "aria-label": "Back to chat", variant: "invisible", onClick: onBack }), _jsx(Heading, { as: "h2", sx: { fontSize: 3, fontWeight: 'semibold' }, children: "Agent Details" })] })), _jsxs(Box, { sx: { p: 3, display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: 3,
@@ -266,6 +279,151 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                     fontWeight: 'semibold',
                                     mb: 2,
                                     color: 'fg.muted',
+                                }, children: "Agent Spec" }), _jsx(Box, { sx: {
+                                    p: 3,
+                                    bg: 'canvas.subtle',
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: specLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading agent spec..." })] })) : agentSpec ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Model:" }), _jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                fontFamily: 'mono',
+                                                                color: 'fg.default',
+                                                            }, children: agentSpec.model })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Library:" }), _jsx(Label, { variant: "secondary", size: "small", children: agentSpec.agent_library })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Codemode:" }), _jsx(Label, { variant: agentSpec.enable_codemode ? 'accent' : 'secondary', size: "small", children: agentSpec.enable_codemode ? 'Enabled' : 'Disabled' })] }), agentSpec.enable_skills && agentSpec.skills.length > 0 && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Skills:" }), _jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: agentSpec.skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill }, skill))) })] }))] }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(NoteIcon, { size: 16 }), _jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                fontWeight: 'semibold',
+                                                                color: 'fg.muted',
+                                                            }, children: "System Prompt" })] }), _jsx(Box, { sx: {
+                                                        p: 2,
+                                                        bg: 'canvas.default',
+                                                        borderRadius: 2,
+                                                        border: '1px solid',
+                                                        borderColor: 'border.default',
+                                                        maxHeight: 200,
+                                                        overflow: 'auto',
+                                                    }, children: _jsx(Text, { sx: {
+                                                            fontSize: 0,
+                                                            fontFamily: 'mono',
+                                                            whiteSpace: 'pre-wrap',
+                                                            wordBreak: 'break-word',
+                                                            color: 'fg.default',
+                                                        }, children: agentSpec.system_prompt }) })] }), agentSpec.system_prompt_codemode_addons && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                fontWeight: 'semibold',
+                                                                color: 'fg.muted',
+                                                            }, children: "Codemode Addon Prompt" }), agentSpec.enable_codemode ? (_jsx(Label, { variant: "accent", size: "small", children: "Active" })) : (_jsx(Label, { variant: "secondary", size: "small", children: "Inactive" }))] }), _jsx(Box, { sx: {
+                                                        p: 2,
+                                                        bg: 'canvas.default',
+                                                        borderRadius: 2,
+                                                        border: '1px solid',
+                                                        borderColor: 'border.default',
+                                                        maxHeight: 200,
+                                                        overflow: 'auto',
+                                                    }, children: _jsx(Text, { sx: {
+                                                            fontSize: 0,
+                                                            fontFamily: 'mono',
+                                                            whiteSpace: 'pre-wrap',
+                                                            wordBreak: 'break-word',
+                                                            color: 'fg.default',
+                                                        }, children: agentSpec.system_prompt_codemode_addons }) })] }))] })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No agent spec available" })) })] }), agentSpec?.sandbox && (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                                    fontSize: 1,
+                                    fontWeight: 'semibold',
+                                    mb: 2,
+                                    color: 'fg.muted',
+                                }, children: "Code Sandbox" }), _jsx(Box, { sx: {
+                                    p: 3,
+                                    bg: 'canvas.subtle',
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ServerIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Variant:" }), _jsx(Label, { variant: agentSpec.sandbox.variant === 'local-jupyter'
+                                                        ? 'accent'
+                                                        : 'secondary', size: "small", children: agentSpec.sandbox.variant })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100, pl: 4 }, children: "Running:" }), agentSpec.sandbox.sandbox_running ? (_jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: 1,
+                                                    }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Yes" })] })) : (_jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: 1,
+                                                    }, children: [_jsx(XCircleIcon, { size: 12, fill: "fg.muted" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No" })] }))] }), agentSpec.sandbox.variant === 'local-jupyter' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                color: 'fg.muted',
+                                                                width: 100,
+                                                                pl: 4,
+                                                            }, children: "Jupyter URL:" }), _jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                fontFamily: 'mono',
+                                                                color: 'fg.default',
+                                                                overflow: 'hidden',
+                                                                textOverflow: 'ellipsis',
+                                                                whiteSpace: 'nowrap',
+                                                            }, children: agentSpec.jupyter_sandbox ||
+                                                                agentSpec.sandbox.jupyter_url ||
+                                                                'Not configured' })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                color: 'fg.muted',
+                                                                width: 100,
+                                                                pl: 4,
+                                                            }, children: "Connection:" }), agentSpec.sandbox.jupyter_connected ? (_jsxs(Box, { sx: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                gap: 1,
+                                                            }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Connected" })] })) : (_jsxs(Box, { sx: {
+                                                                display: 'flex',
+                                                                flexDirection: 'column',
+                                                                gap: 1,
+                                                            }, children: [_jsxs(Box, { sx: {
+                                                                        display: 'flex',
+                                                                        alignItems: 'center',
+                                                                        gap: 1,
+                                                                    }, children: [_jsx(XCircleIcon, { size: 12, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: "Not Connected" })] }), agentSpec.sandbox.jupyter_error && (_jsx(Text, { sx: {
+                                                                        fontSize: 0,
+                                                                        color: 'danger.fg',
+                                                                        fontFamily: 'mono',
+                                                                        whiteSpace: 'pre-wrap',
+                                                                        wordBreak: 'break-word',
+                                                                    }, children: agentSpec.sandbox.jupyter_error }))] }))] })] })), agentSpec.sandbox.generated_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        width: 100,
+                                                        pl: 4,
+                                                    }, children: "Generated:" }), _jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontFamily: 'mono',
+                                                        color: 'fg.default',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                    }, title: agentSpec.sandbox.generated_path, children: agentSpec.sandbox.generated_path })] })), agentSpec.sandbox.skills_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        width: 100,
+                                                        pl: 4,
+                                                    }, children: "Skills:" }), _jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontFamily: 'mono',
+                                                        color: 'fg.default',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                    }, title: agentSpec.sandbox.skills_path, children: agentSpec.sandbox.skills_path })] })), agentSpec.sandbox.python_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        width: 100,
+                                                        pl: 4,
+                                                    }, children: "Python:" }), _jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontFamily: 'mono',
+                                                        color: 'fg.default',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                    }, title: agentSpec.sandbox.python_path, children: agentSpec.sandbox.python_path })] }))] }) })] })), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                                    fontSize: 1,
+                                    fontWeight: 'semibold',
+                                    mb: 2,
+                                    color: 'fg.muted',
                                 }, children: "Config MCP Servers" }), _jsx(Box, { sx: {
                                     p: 3,
                                     bg: 'canvas.subtle',
@@ -399,7 +557,7 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                                                         overflow: 'hidden',
                                                                         textOverflow: 'ellipsis',
                                                                         whiteSpace: 'nowrap',
-                                                                    }, title: codemodeStatus.sandbox.python_path, children: codemodeStatus.sandbox.python_path })] }))] })] })), codemodeStatus.skills.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ZapIcon, { size: 16 }), _jsxs(Text, { sx: {
+                                                                    }, title: codemodeStatus.sandbox.python_path, children: codemodeStatus.sandbox.python_path })] }))] })] })), codemodeStatus.skills.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(BriefcaseIcon, { size: 16 }), _jsxs(Text, { sx: {
                                                                 fontSize: 0,
                                                                 fontWeight: 'semibold',
                                                                 color: 'fg.muted',
@@ -436,6 +594,6 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                     borderRadius: 2,
                                     border: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: _jsx(ContextInspector, { agentId: agentId, apiBase: apiBase }) })] })), _jsx(AgentIdentity, { providers: identityProviders, title: "Connected Accounts", showHeader: true, showDescription: true, description: "OAuth identities connected to this agent. Agents can use these to access external services like GitHub repositories on your behalf.", showExpirationDetails: true, allowReconnect: Boolean(identityProviders), onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { variant: "primary", onClick: onBack, sx: { width: '100%' }, children: "Back to Chat" }) })] })] }));
+                                }, children: _jsx(ContextInspector, { agentId: agentId, apiBase: apiBase }) })] })), _jsx(AgentIdentity, { providers: identityProviders, title: "Connected Accounts", showHeader: true, showDescription: true, description: "OAuth identities connected to this agent. Agents can use these to access external services like GitHub repositories on your behalf.", showExpirationDetails: true, allowReconnect: Boolean(identityProviders), onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect }), showBackHeader && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { variant: "primary", onClick: onBack, sx: { width: '100%' }, children: "Back to Chat" }) }))] })] }));
 }
 export default AgentDetails;

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

@@ -1,5 +1,6 @@
 import { type Suggestion } from './base/ChatBase';
-import type { ModelConfig } from './base/ChatBase';
+import type { ModelConfig, ChatViewMode } from './base/ChatBase';
+import type { FrontendToolDefinition } from '../types/tool';
 import type { McpServerSelection } from '../types';
 import type { OAuthProvider, OAuthProviderConfig, Identity } from '../../../identity';
 /**
@@ -105,9 +106,14 @@ export interface ChatProps {
      * Endpoint URL for fetching conversation history.
      * When runtimeId is provided, this endpoint is called to fetch
      * the conversation history on mount.
-     * If not provided, defaults to `{protocol.endpoint}/history`.
+     * If not provided, defaults to `{protocol.endpoint}/api/v1/history`.
      */
     historyEndpoint?: string;
+    /**
+     * A prompt to append and send after the conversation history is loaded.
+     * The message is shown in the chat and sent to the agent exactly once.
+     */
+    pendingPrompt?: string;
     /**
      * Error banner to display at the top of the chat.
      * Use this to show sandbox connection errors or other warnings.
@@ -116,6 +122,26 @@ export interface ChatProps {
         message: string;
         variant?: 'danger' | 'warning';
     };
+    /**
+     * Show the information icon in the header.
+     * When clicked, it opens the agent details panel.
+     * @default false
+     */
+    showInformation?: boolean;
+    /**
+     * Current chat view mode for the header segmented toggle.
+     * When provided, a view-mode toggle is rendered in the header.
+     */
+    chatViewMode?: ChatViewMode;
+    /**
+     * Callback when the user switches chat view mode via the header toggle.
+     */
+    onChatViewModeChange?: (mode: ChatViewMode) => void;
+    /**
+     * Frontend tool definitions to register with the chat.
+     * Pass an empty array to explicitly disable all frontend tools.
+     */
+    frontendTools?: FrontendToolDefinition[];
 }
 /**
  * Chat Component
@@ -158,5 +184,5 @@ export interface ChatProps {
  * />
  * ```
  */
-export declare function Chat({ transport, extensions: _extensions, baseUrl, wsUrl, agentId, placeholder, title, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, showTokenUsage, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, errorBanner, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ transport, extensions: _extensions, baseUrl, wsUrl, agentId, placeholder, title, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, showTokenUsage, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation, chatViewMode, onChatViewModeChange, frontendTools, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 export default Chat;

package/lib/components/chat/components/Chat.js

@@ -19,8 +19,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module components/chat/components/Chat
  */
 import { useEffect, useMemo, useState } from 'react';
-import { Text, Button, Spinner, IconButton } from '@primer/react';
-import { AlertIcon, SyncIcon, InfoIcon } from '@primer/octicons-react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Text, Button, Spinner } from '@primer/react';
+import { AlertIcon, SyncIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { ChatBase } from './base/ChatBase';
 import { AgentDetails } from './AgentDetails';
@@ -56,6 +57,8 @@ catch {
         // No Jupyter config available
     }
 }
+// Shared QueryClient for AgentDetails and ChatBase
+const queryClient = new QueryClient();
 /**
  * Get transport endpoint path
  */
@@ -130,7 +133,7 @@ function getProtocolType(transport) {
  * />
  * ```
  */
-export function Chat({ transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, placeholder = 'Type your message...', title, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = false, codemodeEnabled = false, showTokenUsage = true, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, errorBanner, }) {
+export function Chat({ transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, placeholder = 'Type your message...', title, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = false, codemodeEnabled = false, showTokenUsage = true, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation = true, chatViewMode, onChatViewModeChange, frontendTools, }) {
     const [error, setError] = useState(null);
     const [isInitializing, setIsInitializing] = useState(true);
     const [showDetails, setShowDetails] = useState(false);
@@ -250,67 +253,69 @@ export function Chat({ transport, extensions: _extensions, baseUrl = 'http://loc
     };
     // Render error state
     if (error) {
-        return (_jsxs(Box, { className: className, sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height,
-                p: 4,
-                bg: 'canvas.default',
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { mt: 3, color: 'danger.fg', fontSize: 2 }, children: "Connection Error" }), _jsx(Text, { sx: { mt: 1, color: 'fg.muted', fontSize: 1 }, children: error }), _jsx(Button, { variant: "primary", sx: { mt: 3 }, leadingVisual: SyncIcon, onClick: handleReconnect, children: "Retry" })] }));
+        return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height,
+                    p: 4,
+                    bg: 'canvas.default',
+                }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { mt: 3, color: 'danger.fg', fontSize: 2 }, children: "Connection Error" }), _jsx(Text, { sx: { mt: 1, color: 'fg.muted', fontSize: 1 }, children: error }), _jsx(Button, { variant: "primary", sx: { mt: 3 }, leadingVisual: SyncIcon, onClick: handleReconnect, children: "Retry" })] }) }));
     }
     // Render loading state
     if (isInitializing || !protocolConfig) {
-        return (_jsxs(Box, { className: className, sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
+        return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height,
+                    p: 4,
+                    bg: 'canvas.default',
+                }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { mt: 3, color: 'fg.muted' }, children: ["Connecting to ", transport.toUpperCase().replace('-', ' '), " agent..."] })] }) }));
+    }
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, sx: {
+                position: 'relative',
                 height,
-                p: 4,
                 bg: 'canvas.default',
-            }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { mt: 3, color: 'fg.muted' }, children: ["Connecting to ", transport.toUpperCase().replace('-', ' '), " agent..."] })] }));
-    }
-    return (_jsxs(Box, { className: className, sx: {
-            position: 'relative',
-            height,
-            bg: 'canvas.default',
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: [_jsx(Box, { sx: {
-                    display: showDetails ? 'flex' : 'none',
-                    flexDirection: 'column',
-                    height: '100%',
-                }, children: _jsx(AgentDetails, { name: title || 'AI Agent', protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, apiBase: baseUrl, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: () => setShowDetails(false) }) }), _jsxs(Box, { sx: {
-                    display: showDetails ? 'none' : 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                }, children: [errorBanner && (_jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 2,
-                            px: 3,
-                            py: 2,
-                            bg: errorBanner.variant === 'warning'
-                                ? 'attention.subtle'
-                                : 'danger.subtle',
-                            borderBottom: '1px solid',
-                            borderColor: errorBanner.variant === 'warning'
-                                ? 'attention.muted'
-                                : 'danger.muted',
-                        }, children: [_jsx(AlertIcon, { size: 16, fill: errorBanner.variant === 'warning' ? 'attention.fg' : 'danger.fg' }), _jsx(Text, { sx: {
-                                    fontSize: 1,
-                                    color: errorBanner.variant === 'warning'
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: [_jsx(Box, { sx: {
+                        display: showDetails ? 'flex' : 'none',
+                        flexDirection: 'column',
+                        height: '100%',
+                    }, children: _jsx(AgentDetails, { name: title || 'AI Agent', protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, apiBase: baseUrl, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: () => setShowDetails(false) }) }), _jsxs(Box, { sx: {
+                        display: showDetails ? 'none' : 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                    }, children: [errorBanner && (_jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 2,
+                                px: 3,
+                                py: 2,
+                                bg: errorBanner.variant === 'warning'
+                                    ? 'attention.subtle'
+                                    : 'danger.subtle',
+                                borderBottom: '1px solid',
+                                borderColor: errorBanner.variant === 'warning'
+                                    ? 'attention.muted'
+                                    : 'danger.muted',
+                            }, children: [_jsx(AlertIcon, { size: 16, fill: errorBanner.variant === 'warning'
                                         ? 'attention.fg'
-                                        : 'danger.fg',
-                                    flex: 1,
-                                }, children: errorBanner.message })] })), _jsx(ChatBase, { title: title, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, runtimeId: runtimeId, historyEndpoint: historyEndpoint, headerContent: _jsx(IconButton, { icon: InfoIcon, "aria-label": "Agent details", variant: "invisible", size: "small", onClick: () => setShowDetails(true) }), showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, codemodeEnabled: codemodeEnabled, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
-                            showNewChat: true,
-                            showClear: true,
-                            onNewChat: handleNewChat,
-                        }, avatarConfig: {
-                            showAvatars: true,
-                        }, backgroundColor: "canvas.default", focusTrigger: focusTrigger })] })] }));
+                                        : 'danger.fg' }), _jsx(Text, { sx: {
+                                        fontSize: 1,
+                                        color: errorBanner.variant === 'warning'
+                                            ? 'attention.fg'
+                                            : 'danger.fg',
+                                        flex: 1,
+                                    }, children: errorBanner.message })] })), _jsx(ChatBase, { title: title, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, runtimeId: runtimeId, historyEndpoint: historyEndpoint, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: () => setShowDetails(true), showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, codemodeEnabled: codemodeEnabled, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
+                                showNewChat: true,
+                                showClear: true,
+                                onNewChat: handleNewChat,
+                            }, avatarConfig: {
+                                showAvatars: true,
+                            }, backgroundColor: "canvas.default", focusTrigger: focusTrigger, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, frontendTools: frontendTools })] })] }) }));
 }
 export default Chat;

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

@@ -12,9 +12,10 @@
  * @module components/chat/components/ChatFloating
  */
 import React from 'react';
-import { type ChatBaseProps, type RenderToolResult, type ToolCallRenderContext, type ToolCallStatus, type ProtocolConfig, type RespondCallback, type Suggestion, type RemoteConfig, type ModelConfig, type BuiltinTool, type MCPServerConfig, type MCPServerTool } from './base/ChatBase';
+import { type ChatBaseProps, type RenderToolResult, type ToolCallRenderContext, type ToolCallStatus, type ProtocolConfig, type RespondCallback, type Suggestion, type RemoteConfig, type ModelConfig, type BuiltinTool, type MCPServerConfig, type MCPServerTool, type ChatViewMode } from './base/ChatBase';
 import type { PoweredByTagProps } from './elements/PoweredByTag';
-export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult, RespondCallback, Suggestion, RemoteConfig, ModelConfig, BuiltinTool, MCPServerConfig, MCPServerTool, };
+import type { FrontendToolDefinition } from '../types/tool';
+export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult, RespondCallback, Suggestion, RemoteConfig, ModelConfig, BuiltinTool, MCPServerConfig, MCPServerTool, ChatViewMode, };
 /**
  * ChatFloating props
  */
@@ -100,13 +101,11 @@ export interface ChatFloatingProps {
      * using this function instead of being hidden.
      */
     renderToolResult?: RenderToolResult;
-    /** Custom tools to register (for tool-based examples) */
-    tools?: Array<{
-        name: string;
-        description: string;
-        parameters?: Record<string, unknown>;
-        handler: (args: unknown) => Promise<unknown>;
-    }>;
+    /**
+     * Frontend tool definitions to register with the chat.
+     * Consistent with Chat and ChatBase.
+     */
+    frontendTools?: FrontendToolDefinition[];
     /** Initial state (for shared state example) */
     initialState?: Record<string, unknown>;
     /**
@@ -126,9 +125,19 @@ export interface ChatFloatingProps {
     hideMessagesAfterToolUI?: boolean;
     /**
      * Default view mode.
+     * - 'floating': Full-height floating panel (pinned to right edge with offset)
+     * - 'floating-small': Standard floating popup
+     * - 'panel': Full-height side panel (right edge, no floating offset)
      * @default 'floating'
      */
-    defaultViewMode?: 'floating' | 'panel';
+    defaultViewMode?: 'floating' | 'floating-small' | 'panel';
+    /**
+     * Callback when the user switches view mode via the header toggle.
+     * The parent component receives the new ChatViewMode value.
+     * When the user selects 'sidebar', the parent should switch to rendering
+     * a ChatSidebar instead.
+     */
+    onViewModeChange?: (mode: ChatViewMode) => void;
     /**
      * Show backdrop overlay in panel mode.
      * When true, a semi-transparent overlay covers the page behind the panel.
@@ -168,13 +177,26 @@ export interface ChatFloatingProps {
     runtimeId?: string;
     /**
      * Endpoint URL for fetching conversation history.
-     * Defaults to `{protocol.endpoint}/history` when runtimeId is set.
+     * Defaults to `{protocol.endpoint}/api/v1/history` when runtimeId is set.
      */
     historyEndpoint?: string;
     /**
      * Auth token for the history endpoint.
      */
     historyAuthToken?: string;
+    /**
+     * A prompt to append and send after the conversation history is loaded.
+     * The message is shown in the chat and sent to the agent exactly once.
+     */
+    pendingPrompt?: string;
+    /**
+     * Show the information icon in the header.
+     * When clicked, fires onInformationClick.
+     * @default false
+     */
+    showInformation?: boolean;
+    /** Callback when the information icon is clicked */
+    onInformationClick?: () => void;
     /** Additional ChatBase props */
     panelProps?: Partial<ChatBaseProps>;
 }
@@ -182,5 +204,5 @@ export interface ChatFloatingProps {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, runtimeId, historyEndpoint, historyAuthToken, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, onViewModeChange, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, runtimeId, historyEndpoint, historyAuthToken, pendingPrompt, showInformation, onInformationClick, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
 export default ChatFloating;