@datalayer/agent-runtimes 1.0.2 → 1.0.4

package/lib/{components/chat/components → chat}/Chat.d.ts

@@ -1,22 +1,12 @@
-import { type Suggestion } from './base/ChatBase';
-import type { ModelConfig, ChatViewMode } from './base/ChatBase';
-import type { FrontendToolDefinition } from '../types/tool';
-import type { McpServerSelection } from '../types';
-import type { OAuthProvider, OAuthProviderConfig, Identity } from '../../../identity';
-/**
- * Supported transports (communication transports)
- */
-export type Transport = 'ag-ui' | 'a2a' | 'acp' | 'vercel-ai' | 'vercel-ai-jupyter';
-/**
- * Extension type for chat features
- */
-export type Extension = 'mcp-ui' | 'a2ui';
+import type { ReactNode } from 'react';
+import type { OAuthProvider, OAuthProviderConfig, Identity } from '../identity';
+import type { Extension, FrontendToolDefinition, McpServerSelection, Protocol, ChatViewMode, ModelConfig, RenderToolResult, Suggestion } from '../types';
 /**
  * Chat props
  */
 export interface ChatProps {
     /** Transport to use */
-    transport: Transport;
+    protocol: Protocol;
     /** Extensions for chat features */
     extensions?: Extension[];
     /** Base URL of the server (for HTTP-based protocols) */
@@ -25,10 +15,14 @@ export interface ChatProps {
     wsUrl?: string;
     /** Agent ID */
     agentId?: string;
+    /** Authentication token (JWT) to send as Authorization Bearer header */
+    authToken?: string;
     /** Custom placeholder text */
     placeholder?: string;
     /** Custom title */
     title?: string;
+    /** Brand icon shown in chat header/empty state and details title */
+    brandIcon?: ReactNode;
     /** Whether to auto-connect on mount */
     autoConnect?: boolean;
     /** Whether to use streaming (for protocols that support it) */
@@ -49,10 +43,16 @@ export interface ChatProps {
     height?: string | number;
     /** Show header with connection status */
     showHeader?: boolean;
+    /** Show the new chat (+) button in the header */
+    showNewChatButton?: boolean;
+    /** Show the clear chat button in the header */
+    showClearButton?: boolean;
     /** Show model selector (fetched from /configure endpoint) */
     showModelSelector?: boolean;
     /** Show tools menu (fetched from /configure endpoint) */
     showToolsMenu?: boolean;
+    /** Show input area */
+    showInput?: boolean;
     /** Show skills menu (fetched from /skills endpoint) */
     showSkillsMenu?: boolean;
     /** Indicate tools are accessed via Codemode meta-tools */
@@ -82,6 +82,10 @@ export interface ChatProps {
     submitOnSuggestionClick?: boolean;
     /** Description shown in empty state */
     description?: string;
+    /** Custom content to render in the chat header title row (left side). */
+    headerContent?: ReactNode;
+    /** Custom actions to render in the chat header title row (right side). */
+    headerActions?: ReactNode;
     /** Auto-focus the input on mount */
     autoFocus?: boolean;
     /** Identity providers configuration for OAuth */
@@ -142,6 +146,13 @@ export interface ChatProps {
      * Pass an empty array to explicitly disable all frontend tools.
      */
     frontendTools?: FrontendToolDefinition[];
+    /** Optional custom renderer for tool-call message cards. */
+    renderToolResult?: RenderToolResult;
+    /**
+     * Hide assistant messages that follow a rendered tool call UI.
+     * Useful to suppress raw tool-call/continuation text and show only tool cards.
+     */
+    hideMessagesAfterToolUI?: boolean;
 }
 /**
  * Chat Component
@@ -184,5 +195,5 @@ export interface ChatProps {
  * />
  * ```
  */
-export declare function Chat({ transport, extensions: _extensions, baseUrl, wsUrl, agentId, placeholder, title, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, showTokenUsage, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation, chatViewMode, onChatViewModeChange, frontendTools, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ protocol: transport, extensions: _extensions, baseUrl, wsUrl, agentId, authToken: authTokenProp, placeholder, title, brandIcon, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showNewChatButton, showClearButton, showModelSelector, showToolsMenu, showInput, showSkillsMenu, codemodeEnabled, showTokenUsage, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, headerContent, headerActions, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation, chatViewMode, onChatViewModeChange, frontendTools, renderToolResult, hideMessagesAfterToolUI, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 export default Chat;

package/lib/{components/chat/components → chat}/Chat.js

@@ -16,16 +16,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Vercel AI - HTTP/SSE streaming (via SelfHostedInferenceProvider)
  * - Vercel AI Jupyter - Same as Vercel AI but served by Jupyter server
  *
- * @module components/chat/components/Chat
+ * @module chat/Chat
  */
 import { useEffect, useMemo, useState } from '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 { useConnectedIdentities } from '../identity';
 import { ChatBase } from './base/ChatBase';
-import { AgentDetails } from './AgentDetails';
-import { useConnectedIdentities } from '../../../identity';
+import { AgentDetails } from '../agents/AgentDetails';
 // Try to get Jupyter settings if available
 let getJupyterSettings;
 try {
@@ -62,8 +62,8 @@ const queryClient = new QueryClient();
 /**
  * Get transport endpoint path
  */
-function getEndpointPath(transport, agentId) {
-    switch (transport) {
+function getEndpointPath(protocol, agentId) {
+    switch (protocol) {
         case 'vercel-ai':
             return `/api/v1/vercel-ai/${agentId}`;
         case 'vercel-ai-jupyter':
@@ -84,12 +84,12 @@ function getEndpointPath(transport, agentId) {
 /**
  * Map transport type to protocol type
  */
-function getProtocolType(transport) {
-    switch (transport) {
+function getProtocolType(protocol) {
+    switch (protocol) {
         case 'vercel-ai-jupyter':
             return 'vercel-ai';
         default:
-            return transport;
+            return protocol;
     }
 }
 /**
@@ -133,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, pendingPrompt, errorBanner, showInformation = true, chatViewMode, onChatViewModeChange, frontendTools, }) {
+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, }) {
     const [error, setError] = useState(null);
     const [isInitializing, setIsInitializing] = useState(true);
     const [showDetails, setShowDetails] = useState(false);
@@ -165,7 +165,7 @@ export function Chat({ transport, extensions: _extensions, baseUrl = 'http://loc
     const protocolConfig = useMemo(() => {
         try {
             let endpoint;
-            let authToken;
+            let authToken = authTokenProp;
             let options;
             switch (transport) {
                 case 'vercel-ai-jupyter': {
@@ -232,7 +232,7 @@ export function Chat({ transport, extensions: _extensions, baseUrl = 'http://loc
             setError(err instanceof Error ? err.message : 'Failed to configure');
             return undefined;
         }
-    }, [transport, baseUrl, wsUrl, agentId]);
+    }, [transport, baseUrl, wsUrl, agentId, authTokenProp]);
     // Set initialized once protocol config is built
     useEffect(() => {
         if (protocolConfig) {
@@ -285,7 +285,7 @@ export function Chat({ transport, extensions: _extensions, baseUrl = 'http://loc
                         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: {
+                    }, 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: {
                         display: showDetails ? 'none' : 'flex',
                         flexDirection: 'column',
                         height: '100%',
@@ -310,12 +310,12 @@ export function Chat({ transport, extensions: _extensions, baseUrl = 'http://loc
                                             ? '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,
+                                    }, 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: {
+                                showNewChat: showNewChatButton,
+                                showClear: showClearButton,
                                 onNewChat: handleNewChat,
                             }, avatarConfig: {
                                 showAvatars: true,
-                            }, backgroundColor: "canvas.default", focusTrigger: focusTrigger, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, frontendTools: frontendTools })] })] }) }));
+                            }, backgroundColor: "canvas.default", focusTrigger: focusTrigger, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, frontendTools: frontendTools, renderToolResult: renderToolResult, hideMessagesAfterToolUI: hideMessagesAfterToolUI })] })] }) }));
 }
 export default Chat;

package/lib/{components/chat/components → chat}/ChatFloating.d.ts

@@ -9,13 +9,11 @@
  * 2. Store mode: When `useStore` is true
  * 3. Any protocol supported by ChatBase (AG-UI, A2A, ACP, Vercel AI)
  *
- * @module components/chat/components/ChatFloating
+ * @module chat/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, type ChatViewMode } from './base/ChatBase';
-import type { PoweredByTagProps } from './elements/PoweredByTag';
-import type { FrontendToolDefinition } from '../types/tool';
-export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult, RespondCallback, Suggestion, RemoteConfig, ModelConfig, BuiltinTool, MCPServerConfig, MCPServerTool, ChatViewMode, };
+import type { PoweredByTagProps } from './display/PoweredByTag';
+import type { ChatBaseProps, ChatViewMode, FrontendToolDefinition, ModelConfig, Protocol, ProtocolConfig, RenderToolResult, Suggestion } from '../types';
 /**
  * ChatFloating props
  */
@@ -26,10 +24,15 @@ export interface ChatFloatingProps {
      */
     endpoint?: string;
     /**
-     * Protocol configuration for other protocols (A2A, ACP, Vercel AI).
-     * Takes precedence over endpoint when provided.
+     * 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?: ProtocolConfig;
+    protocol?: Protocol | ProtocolConfig;
     /**
      * Use Zustand store for state management instead of protocol endpoint.
      * @default false
@@ -182,6 +185,11 @@ export interface ChatFloatingProps {
      * 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.
      */
@@ -206,5 +214,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, 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 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 default ChatFloating;

package/lib/{components/chat/components → chat}/ChatFloating.js

@@ -14,16 +14,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * 2. Store mode: When `useStore` is true
  * 3. Any protocol supported by ChatBase (AG-UI, A2A, ACP, Vercel AI)
  *
- * @module components/chat/components/ChatFloating
+ * @module chat/ChatFloating
  */
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { IconButton, Text, Tooltip } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 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';
-import { useChatKeyboardShortcuts, getShortcutDisplay, } from '../../../hooks/useKeyboardShortcuts';
+import { ChatBase } from './base/ChatBase';
+import { useChatOpen, useChatMessages, useChatStore, } from '../stores/chatStore';
+import { useChatKeyboardShortcuts, getShortcutDisplay, } from '@datalayer/core/lib/hooks';
 /**
  * Hook to detect mobile viewport
  */
@@ -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, 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, panelProps, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();
@@ -80,23 +80,30 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     // 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(() => {
-        if (protocolProp)
+        // Full ProtocolConfig object takes precedence
+        if (protocolProp && typeof protocolProp === 'object')
             return protocolProp;
         if (!endpoint)
             return undefined;
+        // If protocolProp is a Protocol string, use it as explicit type override
+        const explicitType = typeof protocolProp === 'string' ? protocolProp : undefined;
         // Extract base URL from endpoint - everything before /api/v1/
         // e.g., https://prod1.datalayer.run/agent-runtimes/pool1/rt123/api/v1/ag-ui/default/
         //     -> https://prod1.datalayer.run/agent-runtimes/pool1/rt123
         const baseUrl = endpoint.match(/^(.*?)\/api\/v1\//)?.[1] ||
             endpoint.match(/^(https?:\/\/[^/]+)/)?.[1] ||
             '';
-        // Extract agentId from endpoint path (e.g., .../ag-ui/default/ -> default)
-        const agentIdMatch = endpoint.match(/\/ag-ui\/([^/]+)/);
+        // Detect protocol type from endpoint path (fallback when no explicit type)
+        const protocolMatch = endpoint.match(/\/api\/v1\/(ag-ui|vercel-ai|a2a|acp)\//);
+        const detectedType = (explicitType ?? protocolMatch?.[1] ?? 'vercel-ai');
+        // Extract agentId from endpoint path
+        const agentIdMatch = endpoint.match(/\/api\/v1\/(?:ag-ui|vercel-ai|a2a\/agents|acp\/ws)\/([^/]+)/);
         const extractedAgentId = agentIdMatch ? agentIdMatch[1] : undefined;
         return {
-            type: 'ag-ui',
+            type: detectedType,
             endpoint,
             agentId: extractedAgentId,
+            authToken,
             // Enable config query for model/tools/skills selector or token usage
             enableConfigQuery: showModelSelector || showToolsMenu || showSkillsMenu || showTokenUsage,
             // Config endpoint is at /api/v1/configure (global, not per-agent)
@@ -107,6 +114,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     }, [
         protocolProp,
         endpoint,
+        authToken,
         showModelSelector,
         showToolsMenu,
         showSkillsMenu,

package/lib/{components/chat/components → chat}/ChatInline.d.ts

@@ -1,10 +1,10 @@
-import type { TransportType } from '../types/protocol';
+import type { Protocol } from '../types/protocol';
 /**
  * Protocol configuration for ChatInline
  */
 export interface ChatInlineProtocolConfig {
     /** Protocol type (ag-ui, vercel-ai, etc.) */
-    type: TransportType;
+    type: Protocol;
     /** Endpoint URL */
     endpoint: string;
     /** Authentication token */

package/lib/{components/chat/components → chat}/ChatInline.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * Uses Primer UI components instead of Tailwind CSS.
  *
- * @module components/chat/components/ChatInline
+ * @module chat/ChatInline
  */
 import { useState, useCallback, useMemo, useRef, useEffect, Fragment, } from 'react';
 import { Text, TextInput, IconButton, ActionList, Spinner, } from '@primer/react';
@@ -23,7 +23,8 @@ import { Box } from '@datalayer/primer-addons';
 import { CopyIcon, ArrowLeftIcon, SyncIcon, TrashIcon, CheckIcon, PlusIcon, PencilIcon, XIcon, } from '@primer/octicons-react';
 import { SparklesIcon } from '@datalayer/icons-react';
 import { AGUIAdapter } from '../protocols';
-import { generateMessageId } from '../types/message';
+import { generateMessageId } from '../types/messages';
+import { sanitizeAssistantContent } from '../utils';
 /**
  * Pre-defined AI action groups
  */
@@ -120,7 +121,7 @@ export function ChatInline({ selectedText, protocol, onReplaceSelection, onInser
         if (!protocol)
             return;
         const adapter = new AGUIAdapter({
-            type: protocol.type,
+            protocol: protocol.type,
             baseUrl: protocol.endpoint,
             authToken: protocol.authToken,
             agentId: protocol.agentId,
@@ -132,9 +133,10 @@ export function ChatInline({ selectedText, protocol, onReplaceSelection, onInser
             switch (event.type) {
                 case 'message':
                     if (event.message?.content) {
-                        setAiResponse(typeof event.message.content === 'string'
-                            ? event.message.content
-                            : '');
+                        const content = typeof event.message.content === 'string'
+                            ? sanitizeAssistantContent(event.message.content)
+                            : '';
+                        setAiResponse(content);
                     }
                     break;
                 case 'error':

package/lib/{components/chat/components → chat}/ChatPopupStandalone.d.ts

@@ -6,12 +6,11 @@
  * This component uses ChatBase for all chat functionality and provides
  * a floating popup wrapper with animation, positioning, and FAB button.
  *
- * @module components/chat/components/ChatPopupStandalone
+ * @module chat/ChatPopupStandalone
  */
 import React from 'react';
-import { type ChatBaseProps, type RenderToolResult, type ToolCallRenderContext, type ToolCallStatus } from './base/ChatBase';
-import { type PoweredByTagProps } from './elements/PoweredByTag';
-export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult };
+import { type PoweredByTagProps } from './display/PoweredByTag';
+import { ChatBaseProps, RenderToolResult } from '../types';
 /**
  * Simple message handler type for standalone usage
  */

package/lib/{components/chat/components → chat}/ChatPopupStandalone.js

@@ -11,18 +11,18 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * This component uses ChatBase for all chat functionality and provides
  * a floating popup wrapper with animation, positioning, and FAB button.
  *
- * @module components/chat/components/ChatPopupStandalone
+ * @module chat/ChatPopupStandalone
  */
 import { useCallback, useEffect, useRef, useState, } from 'react';
 import { IconButton, Text, Tooltip, Textarea, Button } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { XIcon, CommentDiscussionIcon, PaperAirplaneIcon, SquareCircleIcon, } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
-import { ChatBase, } from './base/ChatBase';
-import { PoweredByTag } from './elements/PoweredByTag';
-import { useChatOpen, useChatMessages, useChatStore, useChatLoading, useChatStreaming, } from '../store/chatStore';
-import { generateMessageId, createUserMessage, createAssistantMessage, } from '../types/message';
-import { useChatKeyboardShortcuts, getShortcutDisplay, } from '../../../hooks/useKeyboardShortcuts';
+import { useChatKeyboardShortcuts, getShortcutDisplay, } from '@datalayer/core/lib/hooks';
+import { ChatBase } from './base/ChatBase';
+import { PoweredByTag } from './display/PoweredByTag';
+import { useChatOpen, useChatMessages, useChatStore, useChatLoading, useChatStreaming, } from '../stores/chatStore';
+import { generateMessageId, createUserMessage, createAssistantMessage, } from '../types/messages';
 /**
  * Hook to detect mobile viewport
  */

package/lib/{components/chat/components → chat}/ChatSidebar.d.ts

@@ -4,18 +4,27 @@
  * Features: keyboard shortcuts, mobile responsive, powered by tag.
  * Built on top of ChatBase for core chat functionality.
  *
- * @module components/chat/components/ChatSidebar
+ * @module chat/ChatSidebar
  */
 import React from 'react';
-import { type ChatBaseProps, type MessageHandler } from './base/ChatBase';
-import type { PoweredByTagProps } from './elements/PoweredByTag';
-export type { MessageHandler };
+import type { PoweredByTagProps } from './display/PoweredByTag';
+import type { ChatBaseProps, MessageHandler, Protocol, ProtocolConfig } from '../types';
 /**
  * ChatSidebar props
  */
 export interface ChatSidebarProps {
     /** 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 */
@@ -79,5 +88,5 @@ export interface ChatSidebarProps {
 /**
  * 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, 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, placeholder, description, pendingPrompt, panelProps, }: ChatSidebarProps): import("react/jsx-runtime").JSX.Element;
 export default ChatSidebar;

package/lib/{components/chat/components → chat}/ChatSidebar.js

@@ -9,16 +9,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Features: keyboard shortcuts, mobile responsive, powered by tag.
  * Built on top of ChatBase for core chat functionality.
  *
- * @module components/chat/components/ChatSidebar
+ * @module chat/ChatSidebar
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { IconButton, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { SidebarCollapseIcon, SidebarExpandIcon, XIcon, } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
-import { ChatBase, } from './base/ChatBase';
-import { useChatStore, useChatOpen, useChatMessages } from '../store/chatStore';
-import { useChatKeyboardShortcuts, getShortcutDisplay, } from '../../../hooks/useKeyboardShortcuts';
+import { useChatKeyboardShortcuts, getShortcutDisplay, } from '@datalayer/core/lib/hooks';
+import { ChatBase } from './base/ChatBase';
+import { useChatStore, useChatOpen, useChatMessages, } from '../stores/chatStore';
 /**
  * Hook to detect mobile viewport
  */
@@ -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, 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, placeholder = 'Ask a question...', description, pendingPrompt, panelProps, }) {
     const isOpen = useChatOpen();
     const messages = useChatMessages();
     const setOpen = useChatStore(state => state.setOpen);
@@ -138,34 +138,56 @@ export function ChatSidebar({ title = 'Chat', defaultOpen = true, position = 'ri
     // Collapsed state
     if (!isOpen) {
         return (_jsxs(Box, { ref: sidebarRef, className: className, sx: {
-                position: 'relative',
+                position: 'fixed',
+                top: 12,
+                ...(position === 'right' ? { right: 12 } : { left: 12 }),
+                zIndex: 1001,
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
-                p: 2,
-                bg: 'canvas.subtle',
-                borderLeft: position === 'right' ? '1px solid' : 'none',
-                borderRight: position === 'left' ? '1px solid' : 'none',
-                borderColor: 'border.default',
-                width: 48,
-            }, children: [_jsx(IconButton, { icon: position === 'right' ? SidebarExpandIcon : SidebarCollapseIcon, "aria-label": `Open chat${shortcutHint ? ` (${shortcutHint})` : ''}`, onClick: handleToggle, variant: "invisible" }), _jsx(Box, { sx: { mt: 2 }, children: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 24 }) }), messages.length > 0 && (_jsx(Box, { sx: {
-                        mt: 2,
-                        px: 2,
-                        py: 1,
-                        bg: 'accent.emphasis',
-                        color: 'fg.onEmphasis',
-                        borderRadius: '50%',
-                        fontSize: 0,
-                        fontWeight: 'bold',
-                    }, children: messages.length })), shortcutHint && (_jsx(Box, { sx: {
-                        mt: 'auto',
-                        mb: 1,
+                gap: 2,
+            }, children: [_jsxs(Box, { sx: { position: 'relative' }, children: [_jsx(IconButton, { icon: position === 'right' ? SidebarExpandIcon : SidebarCollapseIcon, "aria-label": `Open chat${shortcutHint ? ` (${shortcutHint})` : ''}`, onClick: handleToggle, variant: "default", size: "small", sx: {
+                                bg: 'canvas.default',
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                boxShadow: 'shadow.small',
+                            } }), messages.length > 0 && (_jsx(Box, { sx: {
+                                position: 'absolute',
+                                top: -6,
+                                right: -6,
+                                minWidth: 16,
+                                height: 16,
+                                px: 1,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                bg: 'accent.emphasis',
+                                color: 'fg.onEmphasis',
+                                borderRadius: '50%',
+                                fontSize: '10px',
+                                fontWeight: 'bold',
+                                boxShadow: 'shadow.small',
+                            }, children: messages.length > 99 ? '99+' : messages.length }))] }), _jsx(Box, { sx: {
+                        width: 32,
+                        height: 32,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        bg: 'canvas.default',
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                        boxShadow: 'shadow.small',
+                    }, children: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }) }), shortcutHint && (_jsx(Box, { sx: {
                         px: 1,
                         py: '2px',
-                        bg: 'neutral.muted',
+                        bg: 'canvas.default',
+                        border: '1px solid',
+                        borderColor: 'border.default',
                         color: 'fg.muted',
                         borderRadius: 1,
                         fontSize: 0,
+                        boxShadow: 'shadow.small',
                     }, children: _jsx(Text, { sx: { fontSize: '10px', fontFamily: 'mono' }, children: shortcutHint }) }))] }));
     }
     // Mobile full-screen overlay
@@ -206,7 +228,7 @@ export function ChatSidebar({ title = 'Chat', defaultOpen = true, position = 'ri
                     borderRight: !isMobile && position === 'left' ? '1px solid' : 'none',
                     borderColor: 'border.default',
                     ...mobileStyles,
-                }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, brandIcon: brandIcon, headerButtons: {
+                }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, brandIcon: brandIcon, protocol: protocolProp, headerButtons: {
                         showNewChat: showNewChatButton,
                         showClear: showClearButton && messages.length > 0,
                         showSettings: showSettingsButton,

package/lib/{components/chat/components → chat}/ChatStandalone.d.ts

@@ -6,12 +6,11 @@
  * This component uses ChatBase for all chat functionality and provides
  * a floating popup wrapper with animation, positioning, and FAB button.
  *
- * @module components/chat/components/ChatStandalone
+ * @module chat/ChatStandalone
  */
 import React from 'react';
-import { type ChatBaseProps, type RenderToolResult, type ToolCallRenderContext, type ToolCallStatus, type StreamingMessageOptions, type MessageHandler } from './base/ChatBase';
-import { type PoweredByTagProps } from './elements/PoweredByTag';
-export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult, StreamingMessageOptions, MessageHandler, };
+import { type PoweredByTagProps } from './display/PoweredByTag';
+import { type ChatBaseProps, type RenderToolResult, type MessageHandler } from '../types';
 /**
  * ChatStandalone props
  */

package/lib/{components/chat/components → chat}/ChatStandalone.js

@@ -11,17 +11,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * This component uses ChatBase for all chat functionality and provides
  * a floating popup wrapper with animation, positioning, and FAB button.
  *
- * @module components/chat/components/ChatStandalone
+ * @module chat/ChatStandalone
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { IconButton, Text, Tooltip } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { XIcon, CommentDiscussionIcon } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
-import { ChatBase, } from './base/ChatBase';
-import { PoweredByTag } from './elements/PoweredByTag';
-import { useChatOpen, useChatMessages, useChatStore } from '../store/chatStore';
-import { useChatKeyboardShortcuts, getShortcutDisplay, } from '../../../hooks/useKeyboardShortcuts';
+import { useChatKeyboardShortcuts, getShortcutDisplay, } from '@datalayer/core/lib/hooks';
+import { ChatBase } from './base/ChatBase';
+import { PoweredByTag } from './display/PoweredByTag';
+import { useChatOpen, useChatMessages, useChatStore, } from '../stores/chatStore';
 /**
  * Hook to detect mobile viewport
  */