@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/chat/Chat.js

@@ -63,22 +63,25 @@ const queryClient = new QueryClient();
  * Get transport endpoint path
  */
 function getEndpointPath(protocol, agentId) {
+    const resolvedAgentId = typeof agentId === 'string' && agentId.trim().length > 0
+        ? agentId.trim()
+        : 'default';
     switch (protocol) {
         case 'vercel-ai':
-            return `/api/v1/vercel-ai/${agentId}`;
+            return `/api/v1/vercel-ai/${resolvedAgentId}`;
         case 'vercel-ai-jupyter':
             // Jupyter server endpoint - same protocol as vercel-ai
             // Note: no leading slash - will be joined with baseUrl that may have trailing slash
             return 'agent_runtimes/chat';
         case 'ag-ui':
-            return `/api/v1/ag-ui/${agentId}/`;
+            return `/api/v1/ag-ui/${resolvedAgentId}/`;
         case 'a2a':
             // A2A requires trailing slash for FastA2A compatibility
-            return `/api/v1/a2a/agents/${agentId}/`;
+            return `/api/v1/a2a/agents/${resolvedAgentId}/`;
         case 'acp':
-            return `/api/v1/acp/ws/${agentId}`;
+            return `/api/v1/acp/ws/${resolvedAgentId}`;
         default:
-            return `/api/v1/agents/${agentId}/chat`;
+            return `/api/v1/agents/${resolvedAgentId}/chat`;
     }
 }
 /**
@@ -133,7 +136,10 @@ function getProtocolType(protocol) {
  * />
  * ```
  */
-export function Chat({ protocol: transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, authToken: authTokenProp, placeholder = 'Type your message...', title, brandIcon, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showNewChatButton = true, showClearButton = true, showModelSelector = true, showToolsMenu = true, showInput = true, showSkillsMenu = false, codemodeEnabled = false, showTokenUsage = true, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, headerContent, headerActions, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation = true, chatViewMode, onChatViewModeChange, frontendTools, renderToolResult, hideMessagesAfterToolUI = false, }) {
+export function Chat({ protocol: transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, authToken: authTokenProp, placeholder = 'Type your message...', title, subtitle, brandIcon, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showNewChatButton = true, showClearButton = true, showModelSelector = true, showToolsMenu = true, showInput = true, disableInputPrompt = false, showSkillsMenu = true, codemodeEnabled = false, onToggleCodemode, showTokenUsage = true, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, headerContent, headerActions, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation = true, chatViewMode, onChatViewModeChange, frontendTools, onToolCallStart, onToolCallComplete, renderToolResult, hideMessagesAfterToolUI = false, contextSnapshot, mcpStatusData, codemodeStatusData, sandboxStatusData, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, }) {
+    const resolvedAgentId = typeof agentId === 'string' && agentId.trim().length > 0
+        ? agentId.trim()
+        : 'default';
     const [error, setError] = useState(null);
     const [isInitializing, setIsInitializing] = useState(true);
     const [showDetails, setShowDetails] = useState(false);
@@ -201,21 +207,21 @@ export function Chat({ protocol: transport, extensions: _extensions, baseUrl = '
                     break;
                 }
                 case 'acp': {
-                    endpoint = `${baseUrl}${getEndpointPath(transport, agentId)}`;
+                    endpoint = `${baseUrl}${getEndpointPath(transport, resolvedAgentId)}`;
                     const acpWsUrl = wsUrl ||
-                        `${baseUrl.replace('http', 'ws')}/api/v1/acp/ws/${agentId}`;
+                        `${baseUrl.replace('http', 'ws')}/api/v1/acp/ws/${resolvedAgentId}`;
                     options = { wsUrl: acpWsUrl };
                     break;
                 }
                 default: {
-                    endpoint = `${baseUrl}${getEndpointPath(transport, agentId)}`;
+                    endpoint = `${baseUrl}${getEndpointPath(transport, resolvedAgentId)}`;
                     break;
                 }
             }
             return {
                 type: getProtocolType(transport),
                 endpoint,
-                agentId,
+                agentId: resolvedAgentId,
                 authToken,
                 options,
                 // Enable config query for all protocols to fetch models and tools
@@ -232,7 +238,7 @@ export function Chat({ protocol: transport, extensions: _extensions, baseUrl = '
             setError(err instanceof Error ? err.message : 'Failed to configure');
             return undefined;
         }
-    }, [transport, baseUrl, wsUrl, agentId, authTokenProp]);
+    }, [transport, baseUrl, wsUrl, resolvedAgentId, authTokenProp]);
     // Set initialized once protocol config is built
     useEffect(() => {
         if (protocolConfig) {
@@ -285,7 +291,7 @@ export function Chat({ protocol: transport, extensions: _extensions, baseUrl = '
                         display: showDetails ? 'flex' : 'none',
                         flexDirection: 'column',
                         height: '100%',
-                    }, children: _jsx(AgentDetails, { name: title || 'AI Agent', icon: brandIcon, protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, apiBase: baseUrl, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: () => setShowDetails(false) }) }), _jsxs(Box, { sx: {
+                    }, children: _jsx(AgentDetails, { name: title || 'AI Agent', icon: brandIcon, protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, apiBase: baseUrl, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: () => setShowDetails(false), mcpStatusData: mcpStatusData, codemodeStatusData: codemodeStatusData }) }), _jsxs(Box, { sx: {
                         display: showDetails ? 'none' : 'flex',
                         flexDirection: 'column',
                         height: '100%',
@@ -310,12 +316,12 @@ export function Chat({ protocol: transport, extensions: _extensions, baseUrl = '
                                             ? 'attention.fg'
                                             : 'danger.fg',
                                         flex: 1,
-                                    }, children: errorBanner.message })] })), _jsx(ChatBase, { title: title, brandIcon: brandIcon, 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), headerContent: headerContent, headerActions: headerActions, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showInput: showInput, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, codemodeEnabled: codemodeEnabled, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
+                                    }, children: errorBanner.message })] })), _jsx(ChatBase, { title: title, subtitle: subtitle, brandIcon: brandIcon, 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), headerContent: headerContent, headerActions: headerActions, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showInput: showInput, disableInputPrompt: disableInputPrompt, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
                                 showNewChat: showNewChatButton,
                                 showClear: showClearButton,
                                 onNewChat: handleNewChat,
                             }, avatarConfig: {
                                 showAvatars: true,
-                            }, backgroundColor: "canvas.default", focusTrigger: focusTrigger, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, frontendTools: frontendTools, renderToolResult: renderToolResult, hideMessagesAfterToolUI: hideMessagesAfterToolUI })] })] }) }));
+                            }, backgroundColor: "canvas.default", focusTrigger: focusTrigger, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, frontendTools: frontendTools, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, renderToolResult: renderToolResult, hideMessagesAfterToolUI: hideMessagesAfterToolUI, contextSnapshot: contextSnapshot, mcpStatusData: mcpStatusData, sandboxStatusData: sandboxStatusData, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval })] })] }) }));
 }
 export default Chat;

package/lib/chat/ChatFloating.d.ts

@@ -12,36 +12,16 @@
  * @module chat/ChatFloating
  */
 import React from 'react';
-import type { PoweredByTagProps } from './display/PoweredByTag';
-import type { ChatBaseProps, ChatViewMode, FrontendToolDefinition, ModelConfig, Protocol, ProtocolConfig, RenderToolResult, Suggestion } from '../types';
+import type { ChatCommonProps, ChatViewMode } from '../types';
 /**
- * ChatFloating props
+ * ChatFloating props — extends ChatCommonProps with floating/popup-specific configuration.
  */
-export interface ChatFloatingProps {
+export interface ChatFloatingProps extends ChatCommonProps {
     /**
-     * AG-UI endpoint URL (e.g., http://localhost:8000/api/v1/examples/agentic_chat).
+     * AG-UI endpoint URL (e.g., `http://localhost:8000/api/v1/examples/agentic_chat`).
      * When provided with useStore=false, enables AG-UI protocol mode.
      */
     endpoint?: string;
-    /**
-     * Protocol type or full configuration.
-     *
-     * When a `Protocol` string is provided (e.g. `'vercel-ai'`), it overrides the
-     * auto-detected protocol from the endpoint URL. When a full `ProtocolConfig`
-     * object is provided, it is used directly and takes precedence over endpoint.
-     *
-     * @default 'vercel-ai'
-     */
-    protocol?: Protocol | ProtocolConfig;
-    /**
-     * Use Zustand store for state management instead of protocol endpoint.
-     * @default false
-     */
-    useStore?: boolean;
-    /** title */
-    title?: string;
-    /** Description shown in empty state */
-    description?: string;
     /** Position of the popup */
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
     /** Default open state */
@@ -50,46 +30,19 @@ export interface ChatFloatingProps {
     width?: number | string;
     /** height */
     height?: number | string;
-    /** Show header */
-    showHeader?: boolean;
     /** Show the floating button when closed */
     showButton?: boolean;
-    /** Show new chat button */
-    showNewChatButton?: boolean;
-    /** Show clear button */
-    showClearButton?: boolean;
-    /** Show settings button */
-    showSettingsButton?: boolean;
     /** Enable keyboard shortcuts */
     enableKeyboardShortcuts?: boolean;
     /** Toggle shortcut key */
     toggleShortcut?: string;
-    /** Show powered by tag */
-    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;
-    /** Custom class name */
-    className?: string;
-    /** Callback when settings clicked */
-    onSettingsClick?: () => void;
-    /** Callback when new chat clicked */
-    onNewChat?: () => void;
-    /** Callback when popup opens */
-    onOpen?: () => void;
-    /** Callback when popup closes */
-    onClose?: () => void;
-    /** Callback for state updates (for shared state example) */
-    onStateUpdate?: (state: unknown) => void;
-    /** Children to render in popup body (custom content) */
-    children?: React.ReactNode;
-    /** Custom brand icon */
-    brandIcon?: React.ReactNode;
     /** Custom button icon when closed */
     buttonIcon?: React.ReactNode;
     /** Button tooltip text */
@@ -100,34 +53,8 @@ export interface ChatFloatingProps {
     offset?: number;
     /** Animation duration (in ms) */
     animationDuration?: number;
-    /**
-     * Custom render function for tool results.
-     * When provided, tool calls will be rendered inline in the chat
-     * using this function instead of being hidden.
-     */
-    renderToolResult?: RenderToolResult;
-    /**
-     * 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>;
-    /**
-     * Suggestions to show in empty state.
-     * When clicked, the suggestion message is populated in the input.
-     */
-    suggestions?: Suggestion[];
-    /**
-     * Whether to automatically submit the message when a suggestion is clicked.
-     * @default true
-     */
-    submitOnSuggestionClick?: boolean;
-    /**
-     * Whether to hide assistant messages that follow a rendered tool call UI.
-     * @default false
-     */
-    hideMessagesAfterToolUI?: boolean;
     /**
      * Default view mode.
      * - 'floating': Full-height floating panel (pinned to right edge with offset)
@@ -149,70 +76,10 @@ export interface ChatFloatingProps {
      * @default false
      */
     showPanelBackdrop?: boolean;
-    /**
-     * Override the list of available models.
-     * When provided, this list replaces the models returned by the config endpoint.
-     * Use this to restrict the model selector to a specific subset of models.
-     */
-    availableModels?: ModelConfig[];
-    /**
-     * Show model selector in footer.
-     * @default false
-     */
-    showModelSelector?: boolean;
-    /**
-     * Show tools menu in footer.
-     * @default false
-     */
-    showToolsMenu?: boolean;
-    /**
-     * Show skills menu in footer.
-     * @default false
-     */
-    showSkillsMenu?: boolean;
-    /**
-     * Show token usage bar between input and selectors.
-     * @default true
-     */
-    showTokenUsage?: boolean;
-    /**
-     * Runtime ID used to scope and persist conversation history.
-     * When provided, history is fetched on mount from the historyEndpoint.
-     */
-    runtimeId?: string;
-    /**
-     * Endpoint URL for fetching conversation history.
-     * Defaults to `{protocol.endpoint}/api/v1/history` when runtimeId is set.
-     */
-    historyEndpoint?: string;
-    /**
-     * Auth token for authenticating with the agent runtime.
-     * Used for indicator API calls (MCP status, sandbox status) and history.
-     */
-    authToken?: 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>;
 }
 /**
  * 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, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, onViewModeChange, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation, onInformationClick, 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, authToken, historyAuthToken, pendingPrompt, showInformation, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
 export default ChatFloating;

package/lib/chat/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 = 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, authToken, 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, authToken, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();
@@ -431,7 +431,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                 }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, useStore: useStoreMode, protocol: protocol, autoFocus: isOpen, focusTrigger: focusTrigger, brandIcon: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), headerButtons: {
                         showNewChat: showNewChatButton,
                         showClear: showClearButton && messages.length > 0,
-                        showSettings: showSettingsButton,
+                        showSettings: showSettingsButton && !!onSettingsClick,
                         onNewChat: handleNewChat,
                         onClear: handleClear,
                         onSettings: onSettingsClick,
@@ -441,6 +441,6 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                         ...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: 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 }) })] }));
+                    }, 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, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, ...panelProps, children: children }) })] }));
 }
 export default ChatFloating;

package/lib/chat/ChatPopupStandalone.d.ts

@@ -9,10 +9,11 @@
  * @module chat/ChatPopupStandalone
  */
 import React from 'react';
-import { type PoweredByTagProps } from './display/PoweredByTag';
-import { ChatBaseProps, RenderToolResult } from '../types';
+import type { ChatCommonProps } from '../types';
 /**
- * Simple message handler type for standalone usage
+ * Simple message handler type for standalone usage.
+ * Note: This differs from the shared MessageHandler — it does not receive
+ * the full message history.
  */
 export type MessageHandler = (message: string, options?: {
     onChunk?: (chunk: string) => void;
@@ -21,18 +22,15 @@ export type MessageHandler = (message: string, options?: {
     signal?: AbortSignal;
 }) => Promise<string>;
 /**
- * ChatPopupStandalone props
+ * ChatPopupStandalone props — extends ChatCommonProps with popup-specific configuration.
+ * Uses its own `onSendMessage` signature (no message history array).
  */
-export interface ChatPopupStandaloneProps {
+export interface ChatPopupStandaloneProps extends Omit<ChatCommonProps, 'onSendMessage'> {
     /**
      * Handler for sending messages - REQUIRED.
      * This function will be called when the user sends a message.
      */
     onSendMessage: MessageHandler;
-    /** Popup title */
-    title?: string;
-    /** Description shown in empty state */
-    description?: string;
     /** Position of the popup */
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
     /** Default open state */
@@ -41,44 +39,16 @@ export interface ChatPopupStandaloneProps {
     width?: number | string;
     /** Popup height */
     height?: number | string;
-    /** Show header */
-    showHeader?: boolean;
     /** Show the floating button when closed */
     showButton?: boolean;
-    /** Show new chat button */
-    showNewChatButton?: boolean;
-    /** Show clear button */
-    showClearButton?: boolean;
-    /** Show settings button */
-    showSettingsButton?: boolean;
     /** Enable keyboard shortcuts */
     enableKeyboardShortcuts?: boolean;
     /** Toggle shortcut key */
     toggleShortcut?: string;
-    /** Show powered by tag */
-    showPoweredBy?: boolean;
-    /** Powered by tag props */
-    poweredByProps?: Partial<PoweredByTagProps>;
     /** Enable click outside to close */
     clickOutsideToClose?: boolean;
     /** Enable escape key to close */
     escapeToClose?: boolean;
-    /** Custom class name */
-    className?: string;
-    /** Input placeholder */
-    placeholder?: string;
-    /** Callback when settings clicked */
-    onSettingsClick?: () => void;
-    /** Callback when new chat clicked */
-    onNewChat?: () => void;
-    /** Callback when popup opens */
-    onOpen?: () => void;
-    /** Callback when popup closes */
-    onClose?: () => void;
-    /** Children to render in popup body (custom content) */
-    children?: React.ReactNode;
-    /** Custom brand icon */
-    brandIcon?: React.ReactNode;
     /** Custom button icon when closed */
     buttonIcon?: React.ReactNode;
     /** Button tooltip text */
@@ -89,21 +59,12 @@ export interface ChatPopupStandaloneProps {
     offset?: number;
     /** Animation duration (in ms) */
     animationDuration?: number;
-    /** Enable streaming mode */
-    enableStreaming?: boolean;
     /** Empty state message */
     emptyStateMessage?: string;
-    /**
-     * Custom render function for tool results.
-     * When provided, tool calls will be rendered inline in the chat.
-     */
-    renderToolResult?: RenderToolResult;
-    /** Additional ChatBase props */
-    panelProps?: Partial<ChatBaseProps>;
 }
 /**
  * ChatPopupStandalone component
  * A floating popup chat that uses ChatBase with custom onSendMessage handler
  */
-export declare function ChatPopupStandalone({ 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, }: ChatPopupStandaloneProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPopupStandalone({ 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, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, }: ChatPopupStandaloneProps): import("react/jsx-runtime").JSX.Element;
 export default ChatPopupStandalone;

package/lib/chat/ChatPopupStandalone.js

@@ -42,7 +42,7 @@ function useIsMobile(breakpoint = 640) {
  * ChatPopupStandalone component
  * A floating popup chat that uses ChatBase with custom onSendMessage handler
  */
-export function ChatPopupStandalone({ 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 ChatPopupStandalone({ 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, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, }) {
     // Use Zustand store for state management
     const isOpen = useChatOpen();
     const messages = useChatMessages();
@@ -396,11 +396,11 @@ export function ChatPopupStandalone({ onSendMessage, title = 'Chat', description
                             onNewChat: handleNewChat,
                             onClear: handleClear,
                             onSettings: onSettingsClick,
-                        }, headerActions: closeButton, renderToolResult: renderToolResult, description: description, emptyState: {
+                        }, headerActions: closeButton, renderToolResult: renderToolResult, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, description: description, emptyState: {
                             title: emptyStateMessage,
                         }, avatarConfig: {
                             showAvatars: true,
-                        }, backgroundColor: "canvas.subtle", ...panelProps, children: children }), _jsxs(Box, { sx: {
+                        }, backgroundColor: "canvas.subtle", showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, ...panelProps, children: children }), _jsxs(Box, { sx: {
                             display: 'flex',
                             gap: 2,
                             p: 3,

package/lib/chat/ChatSidebar.d.ts

@@ -1,92 +1,27 @@
+import type { ChatCommonProps } from '../types';
 /**
- * Chat sidebar component.
- * Provides a collapsible sidebar with chat interface.
- * Features: keyboard shortcuts, mobile responsive, powered by tag.
- * Built on top of ChatBase for core chat functionality.
- *
- * @module chat/ChatSidebar
+ * ChatSidebar props — extends ChatCommonProps with sidebar-specific configuration.
  */
-import React from 'react';
-import type { PoweredByTagProps } from './display/PoweredByTag';
-import type { ChatBaseProps, MessageHandler, Protocol, ProtocolConfig } from '../types';
-/**
- * ChatSidebar props
- */
-export interface ChatSidebarProps {
+export interface ChatSidebarProps extends ChatCommonProps {
     /** Sidebar title */
     title?: string;
-    /**
-     * Protocol type or full configuration.
-     *
-     * When a `Protocol` string is provided (e.g. `'vercel-ai'`), it is forwarded
-     * to ChatBase. When a full `ProtocolConfig` object is provided, it is passed
-     * directly via `panelProps`.
-     *
-     * @default 'vercel-ai'
-     */
-    protocol?: Protocol | ProtocolConfig;
     /** Initial open state */
     defaultOpen?: boolean;
     /** Sidebar position */
     position?: 'left' | 'right';
     /** Sidebar width when open */
     width?: number | string;
-    /** Show header */
-    showHeader?: boolean;
-    /** Show new chat button */
-    showNewChatButton?: boolean;
-    /** Show clear button */
-    showClearButton?: boolean;
-    /** Show settings button */
-    showSettingsButton?: boolean;
     /** Enable keyboard shortcuts */
     enableKeyboardShortcuts?: boolean;
     /** Keyboard shortcut to toggle (default: 'k') */
     toggleShortcut?: string;
-    /** Show powered by tag */
-    showPoweredBy?: boolean;
-    /** Powered by tag props */
-    poweredByProps?: Partial<PoweredByTagProps>;
     /** Enable click outside to close */
     clickOutsideToClose?: boolean;
     /** Enable escape key to close */
     escapeToClose?: boolean;
-    /** Custom class name */
-    className?: string;
-    /** Callback when settings clicked */
-    onSettingsClick?: () => void;
-    /** Callback when new chat clicked */
-    onNewChat?: () => void;
-    /** Callback when sidebar opens */
-    onOpen?: () => void;
-    /** Callback when sidebar closes */
-    onClose?: () => void;
-    /** Children to render in sidebar body (custom content) */
-    children?: React.ReactNode;
-    /** Custom brand icon */
-    brandIcon?: React.ReactNode;
-    /**
-     * Handler for sending messages.
-     * When provided, this is used instead of protocol mode.
-     * Signature: `(message, messages, options?) => Promise<string | void>`
-     */
-    onSendMessage?: MessageHandler;
-    /** Enable streaming mode (default: true) */
-    enableStreaming?: boolean;
-    /** Input placeholder */
-    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, protocol: protocolProp, defaultOpen, position, width, showHeader, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming, placeholder, description, pendingPrompt, panelProps, }: ChatSidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatSidebar({ title, protocol: protocolProp, defaultOpen, position, width, showHeader, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming, onToolCallStart, onToolCallComplete, placeholder, description, pendingPrompt, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, }: ChatSidebarProps): import("react/jsx-runtime").JSX.Element;
 export default ChatSidebar;