@datalayer/agent-runtimes 0.0.11 → 0.0.12

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;

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

@@ -19,7 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { IconButton, Text, Tooltip } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { XIcon, CommentDiscussionIcon, SidebarExpandIcon, SidebarCollapseIcon, } from '@primer/octicons-react';
+import { XIcon, CommentDiscussionIcon } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { ChatBase, } from './base/ChatBase';
 import { useChatOpen, useChatMessages, useChatStore } from '../store/chatStore';
@@ -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, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, runtimeId, historyEndpoint, historyAuthToken, 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 = 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, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();
@@ -61,6 +61,22 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     const [isHovered, setIsHovered] = useState(false);
     const [viewMode, setViewMode] = useState(defaultViewMode);
     const [focusTrigger, setFocusTrigger] = useState(0);
+    // Map internal viewMode to ChatViewMode for the header toggle
+    const chatViewMode = viewMode === 'panel' ? 'sidebar' : viewMode;
+    // Handle view mode changes from the header segmented toggle
+    const handleChatViewModeChange = useCallback((mode) => {
+        if (mode === 'sidebar') {
+            // 'sidebar' means the parent should switch to a ChatSidebar layout.
+            // Notify parent and let it handle the transition.
+            onViewModeChange?.(mode);
+        }
+        else {
+            // 'floating' or 'floating-small' stays within ChatFloating
+            setViewMode(mode);
+            setFocusTrigger(prev => prev + 1);
+            onViewModeChange?.(mode);
+        }
+    }, [onViewModeChange]);
     // Build protocol config from endpoint if not provided directly
     // Memoize to avoid creating new object on every render (which would trigger useEffect re-runs)
     const protocol = useMemo(() => {
@@ -258,13 +274,6 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
             borderRadius: 0,
         }
         : {};
-    // Toggle view mode handler
-    const handleToggleViewMode = useCallback(() => {
-        setViewMode(prev => (prev === 'floating' ? 'panel' : 'floating'));
-        setFocusTrigger(prev => prev + 1);
-    }, []);
-    // View mode toggle button
-    const viewModeToggle = !isMobile && (_jsx(Tooltip, { text: viewMode === 'floating' ? 'Expand to panel' : 'Collapse to popup', direction: "s", children: _jsx(IconButton, { icon: viewMode === 'floating' ? SidebarExpandIcon : SidebarCollapseIcon, "aria-label": viewMode === 'floating' ? 'Expand to panel' : 'Collapse to popup', onClick: handleToggleViewMode, variant: "invisible", size: "small" }) }));
     // Close button for header
     const closeButton = (_jsx(Tooltip, { text: `Close${escapeToClose ? ' (Esc)' : ''}`, direction: "s", children: _jsx(IconButton, { icon: XIcon, "aria-label": "Close", onClick: handleToggle, variant: "invisible", size: "small" }) }));
     return (_jsxs(_Fragment, { children: [showButton && !isOpen && (_jsx(Box, { sx: {
@@ -344,7 +353,19 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     zIndex: 1000,
                 }, onClick: handleToggle })), _jsx(Box, { ref: popupRef, className: className, sx: {
                     position: 'fixed',
-                    ...(viewMode === 'floating' && !isMobile ? getPositionStyles() : {}),
+                    // floating (normal) — full-height column pinned to the right edge
+                    ...(viewMode === 'floating' && !isMobile
+                        ? {
+                            top: 0,
+                            right: 0,
+                            bottom: 0,
+                            left: 'auto',
+                        }
+                        : {}),
+                    // floating-small — standard popup positioned via getPositionStyles()
+                    ...(viewMode === 'floating-small' && !isMobile
+                        ? getPositionStyles()
+                        : {}),
                     ...(viewMode === 'panel' && !isMobile
                         ? {
                             top: 0,
@@ -355,18 +376,30 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                         : {}),
                     width: viewMode === 'panel' && !isMobile
                         ? '420px'
-                        : isMobile
-                            ? '100%'
-                            : typeof popupWidth === 'number'
+                        : viewMode === 'floating' && !isMobile
+                            ? typeof popupWidth === 'number'
                                 ? `${popupWidth}px`
-                                : popupWidth,
-                    height: viewMode === 'panel' && !isMobile
+                                : popupWidth
+                            : viewMode === 'floating-small' && !isMobile
+                                ? typeof popupWidth === 'number'
+                                    ? `${popupWidth}px`
+                                    : popupWidth
+                                : isMobile
+                                    ? '100%'
+                                    : typeof popupWidth === 'number'
+                                        ? `${popupWidth}px`
+                                        : popupWidth,
+                    height: (viewMode === 'panel' || viewMode === 'floating') && !isMobile
                         ? 'auto'
-                        : isMobile
-                            ? '100%'
-                            : typeof popupHeight === 'number'
+                        : viewMode === 'floating-small' && !isMobile
+                            ? typeof popupHeight === 'number'
                                 ? `${popupHeight}px`
-                                : popupHeight,
+                                : popupHeight
+                            : isMobile
+                                ? '100%'
+                                : typeof popupHeight === 'number'
+                                    ? `${popupHeight}px`
+                                    : popupHeight,
                     display: 'flex',
                     flexDirection: 'column',
                     bg: 'canvas.default',
@@ -394,12 +427,12 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                         onNewChat: handleNewChat,
                         onClear: handleClear,
                         onSettings: onSettingsClick,
-                    }, headerActions: _jsxs(_Fragment, { children: [viewModeToggle, closeButton] }), showPoweredBy: showPoweredBy, poweredByProps: {
+                    }, headerActions: _jsx(_Fragment, { children: closeButton }), chatViewMode: chatViewMode, onChatViewModeChange: handleChatViewModeChange, showPoweredBy: showPoweredBy, poweredByProps: {
                         brandName: 'Datalayer',
                         brandUrl: 'https://datalayer.ai',
                         ...poweredByProps,
                     }, renderToolResult: renderToolResult, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: {
                         showAvatars: true,
-                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: _tools, showModelSelector: showModelSelector, availableModels: availableModels, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, ...panelProps, children: children }) })] }));
+                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: frontendTools, showModelSelector: showModelSelector, availableModels: availableModels, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: onInformationClick, ...panelProps, children: children }) })] }));
 }
 export default ChatFloating;

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

@@ -34,9 +34,13 @@ export interface ChatInlineProps {
     onSaveSelection?: () => void;
     /** Callback to restore selection after input blur */
     onRestoreSelection?: () => void;
+    /** A pending prompt to submit automatically (from toolbar dropdown action) */
+    pendingPrompt?: string | null;
+    /** Callback after the pending prompt has been consumed */
+    onPendingPromptConsumed?: () => void;
 }
 /**
  * ChatInline - Inline AI chat component for text selection assistance.
  */
-export declare function ChatInline({ selectedText, protocol, onReplaceSelection, onInsertInline, onInsertBelow, onClose, onSaveSelection, onRestoreSelection, }: ChatInlineProps): JSX.Element;
+export declare function ChatInline({ selectedText, protocol, onReplaceSelection, onInsertInline, onInsertBelow, onClose, onSaveSelection, onRestoreSelection, pendingPrompt, onPendingPromptConsumed, }: ChatInlineProps): JSX.Element;
 export default ChatInline;

package/lib/components/chat/components/ChatInline.js

@@ -91,7 +91,7 @@ const AI_OPTIONS_GROUPS = [
 /**
  * ChatInline - Inline AI chat component for text selection assistance.
  */
-export function ChatInline({ selectedText, protocol, onReplaceSelection, onInsertInline, onInsertBelow, onClose, onSaveSelection, onRestoreSelection, }) {
+export function ChatInline({ selectedText, protocol, onReplaceSelection, onInsertInline, onInsertBelow, onClose, onSaveSelection, onRestoreSelection, pendingPrompt, onPendingPromptConsumed, }) {
     // Input state
     const [input, setInput] = useState('');
     // AI state
@@ -195,6 +195,13 @@ ${selectedText || ''}
             setAiState('initial');
         }
     }, [selectedText]);
+    // Handle pending prompt from toolbar dropdown
+    useEffect(() => {
+        if (pendingPrompt && aiState === 'initial') {
+            submitPrompt(pendingPrompt);
+            onPendingPromptConsumed?.();
+        }
+    }, [pendingPrompt, aiState, submitPrompt, onPendingPromptConsumed]);
     // Handle form submission
     const handleSubmit = useCallback((e) => {
         e.preventDefault();

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

@@ -68,11 +68,16 @@ export interface ChatSidebarProps {
     placeholder?: string;
     /** Description shown in empty state */
     description?: 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;
     /** Additional ChatBase props */
     panelProps?: Partial<ChatBaseProps>;
 }
 /**
  * Chat Sidebar component
  */
-export declare function ChatSidebar({ title, defaultOpen, position, width, showHeader, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming, placeholder, description, panelProps, }: ChatSidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatSidebar({ title, defaultOpen, position, width, showHeader, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming, placeholder, description, pendingPrompt, panelProps, }: ChatSidebarProps): import("react/jsx-runtime").JSX.Element;
 export default ChatSidebar;

package/lib/components/chat/components/ChatSidebar.js

@@ -37,7 +37,7 @@ function useIsMobile(breakpoint = 640) {
 /**
  * Chat Sidebar component
  */
-export function ChatSidebar({ title = 'Chat', defaultOpen = true, position = 'right', width = 400, showHeader = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = 'k', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming = true, placeholder = 'Ask a question...', description, panelProps, }) {
+export function ChatSidebar({ title = 'Chat', defaultOpen = true, position = 'right', width = 400, showHeader = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = 'k', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming = true, placeholder = 'Ask a question...', description, pendingPrompt, panelProps, }) {
     const isOpen = useChatOpen();
     const messages = useChatMessages();
     const setOpen = useChatStore(state => state.setOpen);
@@ -219,6 +219,6 @@ export function ChatSidebar({ title = 'Chat', defaultOpen = true, position = 'ri
                         ...poweredByProps,
                     }, avatarConfig: {
                         showAvatars: true,
-                    }, placeholder: placeholder, description: description, onSendMessage: onSendMessage, enableStreaming: enableStreaming, ...panelProps, children: children }) })] }));
+                    }, placeholder: placeholder, description: description, onSendMessage: onSendMessage, enableStreaming: enableStreaming, pendingPrompt: pendingPrompt, ...panelProps, children: children }) })] }));
 }
 export default ChatSidebar;

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

@@ -94,6 +94,11 @@ export interface ChatStandaloneProps {
      * When provided, tool calls will be rendered inline in the chat.
      */
     renderToolResult?: RenderToolResult;
+    /**
+     * 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;
     /** Additional ChatBase props */
     panelProps?: Partial<ChatBaseProps>;
 }
@@ -101,5 +106,5 @@ export interface ChatStandaloneProps {
  * ChatStandalone component
  * A floating popup chat that uses ChatBase with custom onSendMessage handler
  */
-export declare function ChatStandalone({ onSendMessage, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, placeholder, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, enableStreaming, emptyStateMessage, renderToolResult, panelProps, }: ChatStandaloneProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatStandalone({ onSendMessage, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, placeholder, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, enableStreaming, emptyStateMessage, renderToolResult, pendingPrompt, panelProps, }: ChatStandaloneProps): import("react/jsx-runtime").JSX.Element;
 export default ChatStandalone;

package/lib/components/chat/components/ChatStandalone.js

@@ -41,7 +41,7 @@ function useIsMobile(breakpoint = 640) {
  * ChatStandalone component
  * A floating popup chat that uses ChatBase with custom onSendMessage handler
  */
-export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'Start a conversation.', position = 'bottom-right', defaultOpen = false, width = 380, height = 520, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, placeholder = 'Type a message...', onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, enableStreaming = true, emptyStateMessage = 'Start a conversation', renderToolResult, panelProps, }) {
+export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'Start a conversation.', position = 'bottom-right', defaultOpen = false, width = 380, height = 520, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, placeholder = 'Type a message...', onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, enableStreaming = true, emptyStateMessage = 'Start a conversation', renderToolResult, pendingPrompt, panelProps, }) {
     // Use Zustand store for state management
     const isOpen = useChatOpen();
     const messages = useChatMessages();
@@ -310,7 +310,7 @@ export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'S
                             title: emptyStateMessage,
                         }, avatarConfig: {
                             showAvatars: true,
-                        }, backgroundColor: "canvas.subtle", focusTrigger: focusTrigger, ...panelProps, children: children }), showPoweredBy && (_jsx(Box, { sx: {
+                        }, backgroundColor: "canvas.subtle", focusTrigger: focusTrigger, pendingPrompt: pendingPrompt, ...panelProps, children: children }), showPoweredBy && (_jsx(Box, { sx: {
                             p: 2,
                             borderTop: '1px solid',
                             borderColor: 'border.default',

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

@@ -4,8 +4,14 @@ import type { ChatMessage } from '../../types/message';
 import type { TransportType } from '../../types/protocol';
 import type { McpServerSelection } from '../../types/inference';
 import type { FrontendToolDefinition } from '../../types/tool';
-import type { BuiltinTool as BuiltinToolType } from '../../../../types';
-import type { MCPServerConfig as MCPServerConfigType } from '../../../AgentConfiguration';
+import type { BuiltinTool as BuiltinToolType } from '../../../../types/Types';
+/**
+ * View mode for the chat component.
+ * - 'floating': Full-height floating panel (pinned to the right edge with offset)
+ * - 'floating-small': Standard floating popup
+ * - 'sidebar': Docked sidebar panel
+ */
+export type ChatViewMode = 'floating' | 'floating-small' | 'sidebar';
 /**
  * Tool call status for tool rendering
  */
@@ -145,15 +151,27 @@ export interface MCPServerTool {
 /**
  * MCP Server configuration from backend
  */
-/**
- * MCP Server configuration (re-exported from AgentConfiguration)
- */
-export type MCPServerConfig = MCPServerConfigType;
+export interface MCPServerConfig {
+    id: string;
+    name: string;
+    description?: string;
+    url?: string;
+    enabled: boolean;
+    tools: MCPServerTool[];
+    command?: string;
+    args?: string[];
+    requiredEnvVars?: string[];
+    isAvailable?: boolean;
+    transport?: string;
+    isConfig?: boolean;
+    isRunning?: boolean;
+}
 /**
  * Remote configuration from server
  */
 export interface RemoteConfig {
     models: ModelConfig[];
+    defaultModel?: string;
     builtinTools: BuiltinTool[];
     mcpServers?: MCPServerConfig[];
 }
@@ -237,6 +255,16 @@ export interface ChatBaseProps {
     loadingState?: React.ReactNode;
     /** Header actions */
     headerActions?: React.ReactNode;
+    /**
+     * Current chat view mode.
+     * When provided, a segmented view-mode toggle is rendered in the header
+     * with icons for each mode: floating (popup), floating-small (compact), sidebar (docked).
+     */
+    chatViewMode?: ChatViewMode;
+    /**
+     * Callback when the user clicks a different view mode in the header toggle.
+     */
+    onChatViewModeChange?: (mode: ChatViewMode) => void;
     /**
      * Use Zustand store for state management.
      * When true, uses the shared store. When false with protocol, uses protocol mode.
@@ -293,6 +321,14 @@ export interface ChatBaseProps {
     renderToolResult?: RenderToolResult;
     /** Custom footer content (rendered above input) */
     footerContent?: ReactNode;
+    /**
+     * Show the information icon in the header.
+     * When clicked, fires onInformationClick.
+     * @default false
+     */
+    showInformation?: boolean;
+    /** Callback when the information icon is clicked */
+    onInformationClick?: () => void;
     /** Custom header content (rendered below title row) */
     headerContent?: ReactNode;
     /** Children to render in the messages area (for custom content) */
@@ -398,7 +434,7 @@ export interface ChatBaseProps {
      * 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;
     /**
@@ -406,10 +442,15 @@ export interface ChatBaseProps {
      * If not provided, uses the protocol's authToken.
      */
     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;
 }
 /**
  * ChatBase component - Universal chat panel supporting store, protocol, and custom modes
  */
-export declare function ChatBase({ title, showHeader, showTokenUsage, showLoadingIndicator, showErrors, showInput, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, initialModel, availableModels, mcpServers, initialSkills, className, loadingState, headerActions, useStore: useStoreMode, protocol: protocolProp, agentRuntimeConfig, onSendMessage, enableStreaming, brandIcon, avatarConfig, headerButtons, showPoweredBy, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact, placeholder, description, onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, focusTrigger, frontendTools, onAuthorizationRequired, connectedIdentities, runtimeId, historyEndpoint, historyAuthToken, }: ChatBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatBase({ title, showHeader, showTokenUsage, showLoadingIndicator, showErrors, showInput, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, initialModel, availableModels, mcpServers, initialSkills, className, loadingState, headerActions, chatViewMode, onChatViewModeChange, useStore: useStoreMode, protocol: protocolProp, agentRuntimeConfig, onSendMessage, enableStreaming, brandIcon, avatarConfig, headerButtons, showPoweredBy, poweredByProps, emptyState, renderToolResult, footerContent, showInformation, onInformationClick, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact, placeholder, description, onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, focusTrigger, frontendTools, onAuthorizationRequired, connectedIdentities, runtimeId, historyEndpoint, historyAuthToken, pendingPrompt, }: ChatBaseProps): import("react/jsx-runtime").JSX.Element;
 export type { PoweredByTagProps };
 export default ChatBase;