@datalayer/agent-runtimes 1.0.4 → 1.0.5

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();
@@ -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;

package/lib/chat/ChatSidebar.js

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

package/lib/chat/ChatStandalone.d.ts

@@ -9,25 +9,17 @@
  * @module chat/ChatStandalone
  */
 import React from 'react';
-import { type PoweredByTagProps } from './display/PoweredByTag';
-import { type ChatBaseProps, type RenderToolResult, type MessageHandler } from '../types';
+import type { ChatCommonProps, MessageHandler } from '../types';
 /**
- * ChatStandalone props
+ * ChatStandalone props — extends ChatCommonProps with standalone popup configuration.
  */
-export interface ChatStandaloneProps {
+export interface ChatStandaloneProps extends ChatCommonProps {
     /**
      * Handler for sending messages - REQUIRED.
      * This function will be called when the user sends a message.
      * Signature: `(message, messages, options?) => Promise<string | void>`
-     * - message: The user's message text
-     * - messages: All messages in the conversation (including the new user message)
-     * - options: Streaming callbacks (onChunk, onComplete, onError, signal)
      */
     onSendMessage: MessageHandler;
-    /** 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 */
@@ -36,44 +28,16 @@ export interface ChatStandaloneProps {
     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 */
     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 */
@@ -84,26 +48,12 @@ export interface ChatStandaloneProps {
     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;
-    /**
-     * 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>;
 }
 /**
  * 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, pendingPrompt, 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, onToolCallStart, onToolCallComplete, pendingPrompt, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, }: ChatStandaloneProps): import("react/jsx-runtime").JSX.Element;
 export default ChatStandalone;

package/lib/chat/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, pendingPrompt, 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, onToolCallStart, onToolCallComplete, pendingPrompt, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, }) {
     // Use Zustand store for state management
     const isOpen = useChatOpen();
     const messages = useChatMessages();
@@ -306,11 +306,11 @@ export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'S
                             onNewChat: handleNewChat,
                             onClear: handleClear,
                             onSettings: onSettingsClick,
-                        }, headerActions: closeButton, renderToolResult: renderToolResult, description: description, placeholder: placeholder, emptyState: {
+                        }, headerActions: closeButton, renderToolResult: renderToolResult, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, description: description, placeholder: placeholder, emptyState: {
                             title: emptyStateMessage,
                         }, avatarConfig: {
                             showAvatars: true,
-                        }, backgroundColor: "canvas.subtle", focusTrigger: focusTrigger, pendingPrompt: pendingPrompt, ...panelProps, children: children }), showPoweredBy && (_jsx(Box, { sx: {
+                        }, backgroundColor: "canvas.subtle", focusTrigger: focusTrigger, pendingPrompt: pendingPrompt, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, ...panelProps, children: children }), showPoweredBy && (_jsx(Box, { sx: {
                             p: 2,
                             borderTop: '1px solid',
                             borderColor: 'border.default',