@datalayer/agent-runtimes 1.3.89 → 1.3.90

package/lib/chat/Chat.js

@@ -320,56 +320,17 @@ export function Chat({ protocol: transport, extensions: _extensions, baseUrl = '
     const avatarConfig = useMemo(() => ({ showAvatars: true }), []);
     // Render error state
     if (error) {
-        return (_jsx(ThemeProvider, { children: _jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, sx: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        height,
-                        p: 4,
-                        bg: 'canvas.default',
-                    }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { mt: 3, color: 'danger.fg', fontSize: 2 }, children: "Connection Error" }), _jsx(Text, { sx: { mt: 1, color: 'fg.muted', fontSize: 1 }, children: error }), _jsx(Button, { variant: "primary", sx: { mt: 3 }, leadingVisual: SyncIcon, onClick: handleReconnect, children: "Retry" })] }) }) }));
+        return (_jsx(ThemeProvider, { children: _jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: height, p: 4, bg: "canvas.default", children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { mt: 3, color: 'danger.fg', fontSize: 2 }, children: "Connection Error" }), _jsx(Text, { sx: { mt: 1, color: 'fg.muted', fontSize: 1 }, children: error }), _jsx(Button, { variant: "primary", sx: { mt: 3 }, leadingVisual: SyncIcon, onClick: handleReconnect, children: "Retry" })] }) }) }));
     }
     // Render loading state
     if (isInitializing || !protocolConfig) {
-        return (_jsx(ThemeProvider, { children: _jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, sx: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        height,
-                        p: 4,
-                        bg: 'canvas.default',
-                    }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { mt: 3, color: 'fg.muted' }, children: ["Connecting to ", transportName.toUpperCase().replace('-', ' '), ' ', "agent..."] })] }) }) }));
+        return (_jsx(ThemeProvider, { children: _jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: height, p: 4, bg: "canvas.default", children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { mt: 3, color: 'fg.muted' }, children: ["Connecting to ", transportName.toUpperCase().replace('-', ' '), ' ', "agent..."] })] }) }) }));
     }
-    return (_jsx(ThemeProvider, { children: _jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, sx: {
-                    position: 'relative',
-                    height,
-                    bg: 'canvas.default',
-                    display: 'flex',
-                    flexDirection: 'column',
-                }, children: [_jsx(Box, { sx: {
-                            display: showDetails ? 'flex' : 'none',
-                            flexDirection: 'column',
-                            height: '100%',
-                        }, children: _jsx(AgentDetails, { name: title || 'AI Agent', icon: brandIcon, protocol: transportName, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, apiBase: baseUrl, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: handleBackFromDetails, mcpStatusData: mcpStatusData, codemodeStatusData: codemodeStatusData }) }), _jsxs(Box, { sx: {
-                            display: showDetails ? 'none' : 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                        }, children: [errorBanner && (_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: 2,
-                                    px: 3,
-                                    py: 2,
-                                    bg: errorBanner.variant === 'warning'
-                                        ? 'attention.subtle'
-                                        : 'danger.subtle',
-                                    borderBottom: '1px solid',
-                                    borderColor: errorBanner.variant === 'warning'
-                                        ? 'attention.muted'
-                                        : 'danger.muted',
-                                }, children: [_jsx(AlertIcon, { size: 16, fill: errorBanner.variant === 'warning'
+    return (_jsx(ThemeProvider, { children: _jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, position: "relative", height: height, bg: "canvas.default", display: "flex", flexDirection: "column", children: [_jsx(Box, { display: showDetails ? 'flex' : 'none', flexDirection: "column", height: "100%", children: _jsx(AgentDetails, { name: title || 'AI Agent', icon: brandIcon, protocol: transportName, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, apiBase: baseUrl, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: handleBackFromDetails, mcpStatusData: mcpStatusData, codemodeStatusData: codemodeStatusData }) }), _jsxs(Box, { display: showDetails ? 'none' : 'flex', flexDirection: "column", height: "100%", children: [errorBanner && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, bg: errorBanner.variant === 'warning'
+                                    ? 'attention.subtle'
+                                    : 'danger.subtle', borderBottom: "1px solid", borderColor: errorBanner.variant === 'warning'
+                                    ? 'attention.muted'
+                                    : 'danger.muted', children: [_jsx(AlertIcon, { size: 16, fill: errorBanner.variant === 'warning'
                                             ? 'attention.fg'
                                             : 'danger.fg' }), _jsx(Text, { sx: {
                                             fontSize: 1,

package/lib/chat/ChatFloating.js

@@ -894,13 +894,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
             backgroundColor: 'canvas.default',
             borderRadius: 'var(--theme-radius-bubble, 16px)',
             trailingContent: balloonApproval ? (_jsx(BalloonApprovalMessage, { approval: balloonApproval })) : undefined,
-            footerContent: assistantDecide ? (_jsx(Box, { "data-balloon-decisions": "", sx: {
-                    px: 3,
-                    pb: 1,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'flex-end',
-                    fontSize: 0,
+            footerContent: assistantDecide ? (_jsx(Box, { "data-balloon-decisions": "", px: 3, pb: 1, display: "flex", flexDirection: "column", alignItems: "flex-end", fontSize: 0, sx: {
                     '& form': { alignSelf: 'stretch' },
                     '& [data-balloon-decision="answered"]': { alignSelf: 'stretch' },
                 }, children: _jsx(DecisionAsk, { ask: assistantDecide }) })) : undefined,
@@ -1040,46 +1034,14 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     ? 'canvas.subtle'
                     : 'canvas.default')
                 : {}),
-        }, "data-conversation-balloon": conversationBalloon ? '' : undefined, "data-balloon-display": conversationBalloon ? balloonDisplay : undefined, children: [conversationBalloon ? (_jsx(ConversationBalloonClose, { onClose: handleToggle })) : null, conversationBalloon && !currentOpen ? (_jsx(ConversationBalloonHeader, { count: messageCount })) : null, viewMode === 'floating-draggable' && !isMobile && (_jsx(Box, { onPointerDown: drag.onHandlePointerDown, "aria-label": "Move the chat", sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    flexShrink: 0,
-                    height: 18,
-                    cursor: 'grab',
-                    color: 'fg.subtle',
-                    bg: 'canvas.subtle',
-                    borderBottom: '1px solid',
-                    borderColor: 'border.muted',
-                    touchAction: 'none',
-                    '&:active': { cursor: 'grabbing' },
-                }, children: _jsx(GrabberIcon, { size: 16 }) })), conversation ? (_jsxs(_Fragment, { children: [showHeader && !conversationBalloon ? (_jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 2,
-                            flexShrink: 0,
-                            px: 3,
-                            py: 2,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                        }, children: [brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), _jsx(Text, { sx: {
+        }, "data-conversation-balloon": conversationBalloon ? '' : undefined, "data-balloon-display": conversationBalloon ? balloonDisplay : undefined, children: [conversationBalloon ? (_jsx(ConversationBalloonClose, { onClose: handleToggle })) : null, conversationBalloon && !currentOpen ? (_jsx(ConversationBalloonHeader, { count: messageCount })) : null, viewMode === 'floating-draggable' && !isMobile && (_jsx(Box, { onPointerDown: drag.onHandlePointerDown, "aria-label": "Move the chat", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, height: 18, cursor: "grab", color: "fg.subtle", bg: "canvas.subtle", borderBottom: "1px solid", borderColor: "border.muted", active: { cursor: 'grabbing' }, touchAction: "none", children: _jsx(GrabberIcon, { size: 16 }) })), conversation ? (_jsxs(_Fragment, { children: [showHeader && !conversationBalloon ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexShrink: 0, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", children: [brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), _jsx(Text, { sx: {
                                     flex: 1,
                                     minWidth: 0,
                                     fontWeight: 'semibold',
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
-                                }, children: title }), closeButton] })) : null, _jsx(Box, { "data-floating-conversation": true, sx: {
-                            flex: '1 1 auto',
-                            minHeight: 0,
-                            display: 'flex',
-                            ...(conversationBalloon
-                                ? {
-                                    borderRadius: 'var(--theme-radius-bubble, 16px)',
-                                    overflow: 'hidden',
-                                }
-                                : {}),
-                        }, children: conversation.body })] })) : (_jsx(ChatBase, { title: title, showHeader: showHeader, useStore: useStoreMode, protocol: protocol, themeVariant: themeVariant, themeOverrides: themeOverrides, colorMode: colorMode, autoFocus: isOpen, focusTrigger: focusTrigger, launching: launching, launchingMessage: launchingMessage, brandIcon: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), headerButtons: {
+                                }, children: title }), closeButton] })) : null, _jsx(Box, { "data-floating-conversation": true, flex: "1 1 auto", minHeight: 0, display: "flex", borderRadius: conversationBalloon ? 'bubble' : undefined, overflow: conversationBalloon ? 'hidden' : undefined, children: conversation.body })] })) : (_jsx(ChatBase, { title: title, showHeader: showHeader, useStore: useStoreMode, protocol: protocol, themeVariant: themeVariant, themeOverrides: themeOverrides, colorMode: colorMode, autoFocus: isOpen, focusTrigger: focusTrigger, launching: launching, launchingMessage: launchingMessage, brandIcon: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), headerButtons: {
                     showNewChat: showNewChatButton,
                     showClear: showClearButton && messages.length > 0,
                     showSettings: showSettingsButton && !!onSettingsClick,
@@ -1097,7 +1059,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     showAvatars: true,
                 }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: frontendTools, showModelSelector: showModelSelector, availableModels: availableModels, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, showContextRing: showContextRing, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, pendingPrompt: pendingPrompt ?? suggestionPrompt, inspector: inspector, showInformation: showInformation, onInformationClick: onInformationClick, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, voice: voice, voiceSpeaking: speakerState.speaking, onStopSpeaking: speaker ? stopSpeaking : undefined, ...panelProps, ...assistantChat, onLoadingChange: handleLoadingChange, onDisplayItemsChange: handleDisplayItemsChange, onSendReady: handleSendReady, children: conversationBalloon && currentOpen ? (
                 // Current: the one thing said or done now, over the composer.
-                _jsx(Box, { sx: { px: 3, pt: 3, pb: 2, overflow: 'hidden' }, children: _jsx(CurrentBalloonBody, { text: toolSaid ? undefined : (currentWords ?? description), fullText: toolSaid ? undefined : currentWhole, tool: toolSaid, busy: atWork, speaking: answering && atWork, waiting: atWork && !answering }) })) : (children) }))] }));
+                _jsx(Box, { px: 3, pt: 3, pb: 2, overflow: "hidden", children: _jsx(CurrentBalloonBody, { text: toolSaid ? undefined : (currentWords ?? description), fullText: toolSaid ? undefined : currentWhole, tool: toolSaid, busy: atWork, speaking: answering && atWork, waiting: atWork && !answering }) })) : (children) }))] }));
     /*
      * The floating popup's button. Words not yet heard make it blink for the
      * person's attention, until the chat is opened; hovered, they show in a
@@ -1159,38 +1121,16 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     }
                     : undefined, onResetPosition: stageDrag.position ? stageDrag.reset : undefined, about: agentAbout, sandbox: agentSandbox, contextMenu: contextMenu })), showButton && !isOpen && !assistantShown && (_jsx(Box, { sx: {
                     ...getPositionStyles(),
-                }, children: _jsxs(Box, { sx: {
-                        position: 'relative',
-                        display: 'inline-flex',
-                        // The glow's halos go behind the button, not behind the page.
-                        isolation: 'isolate',
-                    }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [buttonGlow && _jsx(ButtonGlow, { color: brandColor }), isHovered && saying ? (_jsx(SpeechBalloon, { text: saying.text, more: saying.more, onOpen: handleToggle, above: 64, side: position.startsWith('bottom') ? 'above' : 'below', align: position.includes('right') ? 'right' : 'left', tailAt: 28 })) : null, saying ? (chatButton) : (_jsx(Tooltip, { text: `${buttonTooltip}${shortcutHint ? ` (${shortcutHint})` : ''}`, direction: position.includes('right') ? 'w' : 'e', children: chatButton })), messages.length > 0 && (_jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: 0,
-                                right: 0,
-                                minWidth: 18,
-                                height: 18,
-                                px: 1,
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                bg: 'danger.emphasis',
-                                color: 'fg.onEmphasis',
-                                borderRadius: '50%',
-                                fontSize: 0,
-                                fontWeight: 'bold',
-                                pointerEvents: 'none',
-                            }, children: _jsx(Text, { sx: { fontSize: 0 }, children: messages.length > 99 ? '99+' : messages.length }) })), unheard && (_jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: 0,
-                                left: 0,
-                                right: 0,
-                                bottom: 0,
-                                borderRadius: '50%',
-                                border: '2px solid',
-                                borderColor: brandColor || 'accent.emphasis',
-                                animation: 'pulse 2s infinite',
-                                pointerEvents: 'none',
+                }, children: _jsxs(Box, { position: "relative", display: "inline-flex", 
+                    // The glow's halos go behind the button, not behind the page.
+                    isolation: "isolate", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [buttonGlow && _jsx(ButtonGlow, { color: brandColor }), isHovered && saying ? (_jsx(SpeechBalloon, { text: saying.text, more: saying.more, onOpen: handleToggle, above: 64, side: position.startsWith('bottom') ? 'above' : 'below', align: position.includes('right') ? 'right' : 'left', tailAt: 28 })) : null, saying ? (chatButton) : (_jsx(Tooltip, { text: `${buttonTooltip}${shortcutHint ? ` (${shortcutHint})` : ''}`, direction: position.includes('right') ? 'w' : 'e', children: chatButton })), messages.length > 0 && (_jsx(Box, { position: "absolute", top: 0, right: 0, minWidth: 18, height: 18, px: 1, display: "flex", alignItems: "center", justifyContent: "center", bg: "danger.emphasis", color: "fg.onEmphasis", borderRadius: "50%", fontSize: 0, fontWeight: "bold", pointerEvents: "none", children: _jsx(Text, { sx: { fontSize: 0 }, children: messages.length > 99 ? '99+' : messages.length }) })), unheard && (_jsx(Box, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, borderRadius: "50%", border: "2px solid", borderColor: brandColor || 'accent.emphasis', animation: "pulse 2s infinite", pointerEvents: "none", 
+                            // Still, as a ring held around the button, for a reader
+                            // who asks the system for reduced motion (T-28).
+                            reducedMotion: {
+                                animation: 'none',
+                                transform: 'scale(1.15)',
+                                opacity: 0.6,
+                            }, sx: {
                                 '@keyframes pulse': {
                                     '0%': {
                                         transform: 'scale(1)',
@@ -1201,32 +1141,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                                         opacity: 0,
                                     },
                                 },
-                                // Still, as a ring held around the button, for a reader
-                                // who asks the system for reduced motion (T-28).
-                                '@media (prefers-reduced-motion: reduce)': {
-                                    animation: 'none',
-                                    transform: 'scale(1.15)',
-                                    opacity: 0.6,
-                                },
-                            } }))] }) })), isMobile && isOpen && (_jsx(Box, { sx: {
-                    position: 'fixed',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    bg: 'neutral.muted',
-                    opacity: 0.5,
-                    zIndex: 999,
-                }, onClick: handleToggle })), showPanelBackdrop && viewMode === 'panel' && isOpen && !isMobile && (_jsx(Box, { sx: {
-                    position: 'fixed',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    bg: 'neutral.muted',
-                    opacity: 0.3,
-                    zIndex: 1000,
-                }, onClick: handleToggle })), dockedInMount && sidebarMount
+                            } }))] }) })), isMobile && isOpen && (_jsx(Box, { position: "fixed", top: 0, left: 0, right: 0, bottom: 0, bg: "neutral.muted", opacity: 0.5, zIndex: 999, onClick: handleToggle })), showPanelBackdrop && viewMode === 'panel' && isOpen && !isMobile && (_jsx(Box, { position: "fixed", top: 0, left: 0, right: 0, bottom: 0, bg: "neutral.muted", opacity: 0.3, zIndex: 1000, onClick: handleToggle })), dockedInMount && sidebarMount
                 ? createPortal(chatWindow, sidebarMount)
                 : chatWindow] }));
 }

package/lib/chat/ChatInline.js

@@ -241,56 +241,19 @@ ${selectedText || ''}
     const handleDiscard = useCallback(() => {
         onClose?.();
     }, [onClose]);
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 1,
-            width: '100%',
-        }, children: [_jsxs(Box, { sx: {
-                    borderRadius: '12px',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    boxShadow: 'shadow.large',
-                    bg: 'canvas.default',
-                    overflow: 'hidden',
-                }, onMouseDown: e => {
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, width: "100%", children: [_jsxs(Box, { borderRadius: "12px", border: "1px solid", borderColor: "border.default", boxShadow: "shadow.large", bg: "canvas.default", overflow: "hidden", onMouseDown: e => {
                     e.preventDefault();
                     onSaveSelection?.();
                 }, onMouseUp: () => {
                     onRestoreSelection?.();
-                }, children: [aiResponse && (_jsxs(Box, { sx: {
-                            p: 2,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            maxHeight: '130px',
-                            overflow: 'auto',
-                            position: 'relative',
-                        }, children: [_jsx(Box, { sx: {
-                                    position: 'absolute',
-                                    top: 1,
-                                    right: 1,
-                                }, children: _jsx(IconButton, { icon: CopyIcon, "aria-label": "Copy", variant: "invisible", size: "small", onClick: handleCopy, sx: { opacity: 0.5, '&:hover': { opacity: 1 } } }) }), _jsx(Text, { sx: {
+                }, children: [aiResponse && (_jsxs(Box, { p: 2, borderBottom: "1px solid", borderColor: "border.default", maxHeight: "130px", overflow: "auto", position: "relative", children: [_jsx(Box, { position: "absolute", top: 1, right: 1, children: _jsx(IconButton, { icon: CopyIcon, "aria-label": "Copy", variant: "invisible", size: "small", onClick: handleCopy, sx: { opacity: 0.5, '&:hover': { opacity: 1 } } }) }), _jsx(Text, { sx: {
                                     whiteSpace: 'pre-wrap',
                                     fontSize: 1,
                                     pr: 4,
-                                }, children: aiResponse })] })), _jsxs(Box, { as: "form", onSubmit: handleSubmit, sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 1,
-                            p: 1,
-                        }, children: [_jsx(TextInput, { value: input, onChange: e => setInput(e.target.value), placeholder: aiState === 'loading' ? 'Writing…' : 'Custom prompt…', disabled: aiState === 'loading', sx: { flex: 1 }, onMouseDown: e => {
+                                }, children: aiResponse })] })), _jsxs(Box, { as: "form", onSubmit: handleSubmit, display: "flex", alignItems: "center", gap: 1, p: 1, children: [_jsx(TextInput, { value: input, onChange: e => setInput(e.target.value), placeholder: aiState === 'loading' ? 'Writing…' : 'Custom prompt…', disabled: aiState === 'loading', sx: { flex: 1 }, onMouseDown: e => {
                                     e.stopPropagation();
                                     onSaveSelection?.();
-                                }, onMouseUp: e => e.stopPropagation() }), _jsx(IconButton, { type: "submit", icon: () => (_jsx(SparklesIcon, { style: aiState === 'loading' ? { opacity: 0.6 } : {} })), "aria-label": "Send", disabled: aiState === 'loading' || !input.trim(), variant: "invisible" })] }), error && (_jsx(Box, { sx: { px: 2, pb: 2 }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: error }) }))] }), aiState !== 'loading' && (_jsx(Box, { sx: {
-                    borderRadius: '12px',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    boxShadow: 'shadow.large',
-                    bg: 'canvas.default',
-                    maxWidth: '220px',
-                    maxHeight: '360px',
-                    overflow: 'auto',
-                }, onMouseDown: e => e.preventDefault(), children: _jsxs(ActionList, { children: [aiResponse && !page && aiState === 'complete' && (_jsxs(_Fragment, { children: [_jsxs(ActionList.Item, { onSelect: handleReplace, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(SyncIcon, { size: 14 }) }), "Replace selection"] }), _jsxs(ActionList.Item, { onSelect: handleInsertInline, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, { size: 14 }) }), "Add text inline"] }), _jsxs(ActionList.Item, { onSelect: handleInsertBelow, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, { size: 14 }) }), "Add below paragraph"] }), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Group, { title: "Modify further", children: [_jsxs(ActionList.Item, { onSelect: handleRegenerate, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(SyncIcon, { size: 14 }) }), "Regenerate"] }), _jsxs(ActionList.Item, { onSelect: handleBackToOptions, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArrowLeftIcon, { size: 14 }) }), "Other options"] })] }), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Item, { onSelect: handleDiscard, variant: "danger", children: [_jsx(ActionList.LeadingVisual, { children: _jsx(TrashIcon, { size: 14 }) }), "Discard"] })] })), aiState === 'initial' && (_jsxs(_Fragment, { children: [page ? (
+                                }, onMouseUp: e => e.stopPropagation() }), _jsx(IconButton, { type: "submit", icon: () => (_jsx(SparklesIcon, { style: aiState === 'loading' ? { opacity: 0.6 } : {} })), "aria-label": "Send", disabled: aiState === 'loading' || !input.trim(), variant: "invisible" })] }), error && (_jsx(Box, { px: 2, pb: 2, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: error }) }))] }), aiState !== 'loading' && (_jsx(Box, { borderRadius: "12px", border: "1px solid", borderColor: "border.default", boxShadow: "shadow.large", bg: "canvas.default", maxWidth: "220px", maxHeight: "360px", overflow: "auto", onMouseDown: e => e.preventDefault(), children: _jsxs(ActionList, { children: [aiResponse && !page && aiState === 'complete' && (_jsxs(_Fragment, { children: [_jsxs(ActionList.Item, { onSelect: handleReplace, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(SyncIcon, { size: 14 }) }), "Replace selection"] }), _jsxs(ActionList.Item, { onSelect: handleInsertInline, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, { size: 14 }) }), "Add text inline"] }), _jsxs(ActionList.Item, { onSelect: handleInsertBelow, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, { size: 14 }) }), "Add below paragraph"] }), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Group, { title: "Modify further", children: [_jsxs(ActionList.Item, { onSelect: handleRegenerate, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(SyncIcon, { size: 14 }) }), "Regenerate"] }), _jsxs(ActionList.Item, { onSelect: handleBackToOptions, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArrowLeftIcon, { size: 14 }) }), "Other options"] })] }), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Item, { onSelect: handleDiscard, variant: "danger", children: [_jsx(ActionList.LeadingVisual, { children: _jsx(TrashIcon, { size: 14 }) }), "Discard"] })] })), aiState === 'initial' && (_jsxs(_Fragment, { children: [page ? (
                                 // Back button when on sub-page
                                 _jsxs(ActionList.Item, { onSelect: () => setPages([]), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArrowLeftIcon, { size: 14 }) }), "Back"] })) : (
                                 // Main options
@@ -308,11 +271,6 @@ ${selectedText || ''}
                                             submitPrompt(option.prompt);
                                         }
                                         setPages([]);
-                                    }, children: [option.icon && (_jsx(ActionList.LeadingVisual, { children: option.icon })), option.text] }, option.text)))] }))] }) })), aiState === 'loading' && (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    py: 2,
-                }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { ml: 2, color: 'fg.muted', fontSize: 1 }, children: "Generating..." })] }))] }));
+                                    }, children: [option.icon && (_jsx(ActionList.LeadingVisual, { children: option.icon })), option.text] }, option.text)))] }))] }) })), aiState === 'loading' && (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", py: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { ml: 2, color: 'fg.muted', fontSize: 1 }, children: "Generating..." })] }))] }));
 }
 export default ChatInline;

package/lib/chat/ChatPopupStandalone.js

@@ -302,10 +302,7 @@ export function ChatPopupStandalone({ onSendMessage, title = 'Chat', description
     const closeButton = (_jsx(Tooltip, { text: `Close${escapeToClose ? ' (Esc)' : ''}`, direction: "s", children: _jsx(IconButton, { icon: XIcon, "aria-label": "Close", onClick: handleToggle, variant: "invisible", size: "small" }) }));
     return (_jsxs(_Fragment, { children: [showButton && !isOpen && (_jsx(Box, { sx: {
                     ...getPositionStyles(),
-                }, children: _jsxs(Box, { sx: {
-                        position: 'relative',
-                        display: 'inline-flex',
-                    }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx(Tooltip, { text: `${buttonTooltip}${shortcutHint ? ` (${shortcutHint})` : ''}`, direction: position.includes('right') ? 'w' : 'e', children: _jsx(IconButton, { icon: buttonIcon
+                }, children: _jsxs(Box, { position: "relative", display: "inline-flex", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx(Tooltip, { text: `${buttonTooltip}${shortcutHint ? ` (${shortcutHint})` : ''}`, direction: position.includes('right') ? 'w' : 'e', children: _jsx(IconButton, { icon: buttonIcon
                                     ? buttonIcon
                                     : CommentDiscussionIcon, "aria-label": buttonTooltip, onClick: handleToggle, size: "large", sx: {
                                     width: 56,
@@ -320,31 +317,7 @@ export function ChatPopupStandalone({ onSendMessage, title = 'Chat', description
                                         bg: brandColor || 'accent.emphasis',
                                         boxShadow: 'shadow.extra-large',
                                     },
-                                } }) }), messages.length > 0 && (_jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: -4,
-                                right: -4,
-                                minWidth: 20,
-                                height: 20,
-                                px: 1,
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                bg: 'danger.emphasis',
-                                color: 'fg.onEmphasis',
-                                borderRadius: '50%',
-                                fontSize: 0,
-                                fontWeight: 'bold',
-                            }, children: _jsx(Text, { sx: { fontSize: 0 }, children: messages.length > 99 ? '99+' : messages.length }) })), messages.length > 0 && (_jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: 0,
-                                left: 0,
-                                right: 0,
-                                bottom: 0,
-                                borderRadius: '50%',
-                                border: '2px solid',
-                                borderColor: brandColor || 'accent.emphasis',
-                                animation: 'pulse 2s infinite',
+                                } }) }), messages.length > 0 && (_jsx(Box, { position: "absolute", top: -4, right: -4, minWidth: 20, height: 20, px: 1, display: "flex", alignItems: "center", justifyContent: "center", bg: "danger.emphasis", color: "fg.onEmphasis", borderRadius: "50%", fontSize: 0, fontWeight: "bold", children: _jsx(Text, { sx: { fontSize: 0 }, children: messages.length > 99 ? '99+' : messages.length }) })), messages.length > 0 && (_jsx(Box, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, borderRadius: "50%", border: "2px solid", borderColor: brandColor || 'accent.emphasis', animation: "pulse 2s infinite", sx: {
                                 '@keyframes pulse': {
                                     '0%': {
                                         transform: 'scale(1)',
@@ -355,16 +328,7 @@ export function ChatPopupStandalone({ onSendMessage, title = 'Chat', description
                                         opacity: 0,
                                     },
                                 },
-                            } }))] }) })), isMobile && isOpen && (_jsx(Box, { sx: {
-                    position: 'fixed',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    bg: 'neutral.muted',
-                    opacity: 0.5,
-                    zIndex: 999,
-                }, onClick: handleToggle })), (isOpen || isAnimating) && (_jsxs(Box, { ref: popupRef, className: className, sx: {
+                            } }))] }) })), isMobile && isOpen && (_jsx(Box, { position: "fixed", top: 0, left: 0, right: 0, bottom: 0, bg: "neutral.muted", opacity: 0.5, zIndex: 999, onClick: handleToggle })), (isOpen || isAnimating) && (_jsxs(Box, { ref: popupRef, className: className, sx: {
                     ...getPositionStyles(),
                     width: isMobile
                         ? '100%'
@@ -400,23 +364,11 @@ export function ChatPopupStandalone({ onSendMessage, title = 'Chat', description
                             title: emptyStateMessage,
                         }, avatarConfig: {
                             showAvatars: true,
-                        }, backgroundColor: "canvas.subtle", showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, ...panelProps, children: children }), _jsxs(Box, { sx: {
-                            display: 'flex',
-                            gap: 2,
-                            p: 3,
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            bg: 'canvas.default',
-                        }, children: [_jsx(Textarea, { ref: textareaRef, value: inputValue, onChange: e => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, sx: {
+                        }, backgroundColor: "canvas.subtle", showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, ...panelProps, children: children }), _jsxs(Box, { display: "flex", gap: 2, p: 3, borderTop: "1px solid", borderColor: "border.default", bg: "canvas.default", children: [_jsx(Textarea, { ref: textareaRef, value: inputValue, onChange: e => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, sx: {
                                     flex: 1,
                                     resize: 'none',
                                     minHeight: '40px',
                                     maxHeight: '120px',
-                                }, rows: 1 }), isLoading || isStreaming ? (_jsx(Button, { onClick: handleStop, variant: "danger", children: _jsx(SquareCircleIcon, {}) })) : (_jsx(Button, { onClick: handleSend, variant: "primary", disabled: !inputValue.trim(), children: _jsx(PaperAirplaneIcon, {}) }))] }), showPoweredBy && (_jsx(Box, { sx: {
-                            p: 2,
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            bg: 'canvas.subtle',
-                        }, children: _jsx(PoweredByTag, { show: true, brandName: "Datalayer", brandUrl: "https://datalayer.ai", ...poweredByProps }) }))] }))] }));
+                                }, rows: 1 }), isLoading || isStreaming ? (_jsx(Button, { onClick: handleStop, variant: "danger", children: _jsx(SquareCircleIcon, {}) })) : (_jsx(Button, { onClick: handleSend, variant: "primary", disabled: !inputValue.trim(), children: _jsx(PaperAirplaneIcon, {}) }))] }), showPoweredBy && (_jsx(Box, { p: 2, borderTop: "1px solid", borderColor: "border.default", bg: "canvas.subtle", children: _jsx(PoweredByTag, { show: true, brandName: "Datalayer", brandUrl: "https://datalayer.ai", ...poweredByProps }) }))] }))] }));
 }
 export default ChatPopupStandalone;

package/lib/chat/ChatSidebar.js

@@ -164,39 +164,12 @@ export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpe
     const collapseButton = (_jsx(IconButton, { icon: XIcon, "aria-label": `Close sidebar${shortcutHint ? ` (${shortcutHint})` : ''}`, onClick: handleToggle, variant: "invisible", size: "small" }));
     // Collapsed state
     if (!isOpen) {
-        const collapsedLauncher = (_jsx(Box, { ref: sidebarRef, className: className, sx: {
-                position: 'fixed',
-                top: 12,
-                ...(position === 'right'
-                    ? { right: 'env(safe-area-inset-right)' }
-                    : { left: 'env(safe-area-inset-left)' }),
-                zIndex: 1001,
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                gap: 2,
-            }, children: _jsxs(Box, { sx: { position: 'relative' }, children: [_jsx(IconButton, { icon: position === 'right' ? SidebarExpandIcon : SidebarCollapseIcon, "aria-label": "Open chat", description: shortcutHint ? `Open chat (${shortcutHint})` : 'Open chat', onClick: handleToggle, variant: "default", size: "small", sx: {
+        const collapsedLauncher = (_jsx(Box, { ref: sidebarRef, className: className, position: "fixed", top: 12, zIndex: 1001, display: "flex", flexDirection: "column", alignItems: "center", gap: 2, right: position === 'right' ? 'env(safe-area-inset-right)' : undefined, left: position === 'right' ? undefined : 'env(safe-area-inset-left)', children: _jsxs(Box, { position: "relative", children: [_jsx(IconButton, { icon: position === 'right' ? SidebarExpandIcon : SidebarCollapseIcon, "aria-label": "Open chat", description: shortcutHint ? `Open chat (${shortcutHint})` : 'Open chat', 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 }))] }) }));
+                        } }), messages.length > 0 && (_jsx(Box, { 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 }))] }) }));
         // Render the collapsed launcher in a body portal so it stays pinned to the
         // viewport edge even when ancestors use transforms/positioning contexts.
         if (typeof document !== 'undefined' && document.body) {
@@ -218,16 +191,7 @@ export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpe
         }
         : {};
     // Expanded state using ChatBase
-    return (_jsxs(_Fragment, { children: [isMobile && isOpen && (_jsx(Box, { sx: {
-                    position: 'fixed',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    bg: 'neutral.muted',
-                    opacity: 0.5,
-                    zIndex: 999,
-                }, onClick: handleToggle })), _jsx(Box, { ref: sidebarRef, className: className, 
+    return (_jsxs(_Fragment, { children: [isMobile && isOpen && (_jsx(Box, { position: "fixed", top: 0, left: 0, right: 0, bottom: 0, bg: "neutral.muted", opacity: 0.5, zIndex: 999, onClick: handleToggle })), _jsx(Box, { ref: sidebarRef, className: className, 
                 // Frequently-changing pixel dimensions (resizable width and the
                 // viewport-derived height that updates on scroll/resize) are applied
                 // via the inline `style` prop instead of `sx`. Passing them through
@@ -244,19 +208,8 @@ export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpe
                         maxHeight: desktopViewportHeight
                             ? `${desktopViewportHeight}px`
                             : 'calc(100dvh - 8px)',
-                    }, sx: {
-                    position: 'relative',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignSelf: 'stretch',
-                    minHeight: 0,
+                    }, position: "relative", display: "flex", flexDirection: "column", alignSelf: "stretch", minHeight: 0, flex: isMobile ? '1 1 auto' : '0 0 auto', bg: "canvas.default", borderLeft: !isMobile && position === 'right' ? '1px solid' : 'none', borderRight: !isMobile && position === 'left' ? '1px solid' : 'none', borderColor: "border.default", overflow: "hidden", sx: {
                     marginBlock: isMobile ? 0 : '4px',
-                    flex: isMobile ? '1 1 auto' : '0 0 auto',
-                    bg: 'canvas.default',
-                    borderLeft: !isMobile && position === 'right' ? '1px solid' : 'none',
-                    borderRight: !isMobile && position === 'left' ? '1px solid' : 'none',
-                    borderColor: 'border.default',
-                    overflow: 'hidden',
                     ...mobileStyles,
                 }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, brandIcon: brandIcon, protocol: protocolProp, headerButtons: {
                         showNewChat: showNewChatButton,

package/lib/chat/ChatStandalone.js

@@ -212,10 +212,7 @@ export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'S
     const closeButton = (_jsx(Tooltip, { text: `Close${escapeToClose ? ' (Esc)' : ''}`, direction: "s", children: _jsx(IconButton, { icon: XIcon, "aria-label": "Close", onClick: handleToggle, variant: "invisible", size: "small" }) }));
     return (_jsxs(_Fragment, { children: [showButton && !isOpen && (_jsx(Box, { sx: {
                     ...getPositionStyles(),
-                }, children: _jsxs(Box, { sx: {
-                        position: 'relative',
-                        display: 'inline-flex',
-                    }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx(Tooltip, { text: `${buttonTooltip}${shortcutHint ? ` (${shortcutHint})` : ''}`, direction: position.includes('right') ? 'w' : 'e', children: _jsx(IconButton, { icon: buttonIcon
+                }, children: _jsxs(Box, { position: "relative", display: "inline-flex", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx(Tooltip, { text: `${buttonTooltip}${shortcutHint ? ` (${shortcutHint})` : ''}`, direction: position.includes('right') ? 'w' : 'e', children: _jsx(IconButton, { icon: buttonIcon
                                     ? buttonIcon
                                     : CommentDiscussionIcon, "aria-label": buttonTooltip, onClick: handleToggle, size: "large", sx: {
                                     width: 56,
@@ -230,31 +227,7 @@ export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'S
                                         bg: brandColor || 'accent.emphasis',
                                         boxShadow: 'shadow.extra-large',
                                     },
-                                } }) }), messages.length > 0 && (_jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: -4,
-                                right: -4,
-                                minWidth: 20,
-                                height: 20,
-                                px: 1,
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                bg: 'danger.emphasis',
-                                color: 'fg.onEmphasis',
-                                borderRadius: '50%',
-                                fontSize: 0,
-                                fontWeight: 'bold',
-                            }, children: _jsx(Text, { sx: { fontSize: 0 }, children: messages.length > 99 ? '99+' : messages.length }) })), messages.length > 0 && (_jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: 0,
-                                left: 0,
-                                right: 0,
-                                bottom: 0,
-                                borderRadius: '50%',
-                                border: '2px solid',
-                                borderColor: brandColor || 'accent.emphasis',
-                                animation: 'pulse 2s infinite',
+                                } }) }), messages.length > 0 && (_jsx(Box, { position: "absolute", top: -4, right: -4, minWidth: 20, height: 20, px: 1, display: "flex", alignItems: "center", justifyContent: "center", bg: "danger.emphasis", color: "fg.onEmphasis", borderRadius: "50%", fontSize: 0, fontWeight: "bold", children: _jsx(Text, { sx: { fontSize: 0 }, children: messages.length > 99 ? '99+' : messages.length }) })), messages.length > 0 && (_jsx(Box, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, borderRadius: "50%", border: "2px solid", borderColor: brandColor || 'accent.emphasis', animation: "pulse 2s infinite", sx: {
                                 '@keyframes pulse': {
                                     '0%': {
                                         transform: 'scale(1)',
@@ -265,16 +238,7 @@ export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'S
                                         opacity: 0,
                                     },
                                 },
-                            } }))] }) })), isMobile && isOpen && (_jsx(Box, { sx: {
-                    position: 'fixed',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    bg: 'neutral.muted',
-                    opacity: 0.5,
-                    zIndex: 999,
-                }, onClick: handleToggle })), (isOpen || isAnimating) && (_jsxs(Box, { ref: popupRef, className: className, sx: {
+                            } }))] }) })), isMobile && isOpen && (_jsx(Box, { position: "fixed", top: 0, left: 0, right: 0, bottom: 0, bg: "neutral.muted", opacity: 0.5, zIndex: 999, onClick: handleToggle })), (isOpen || isAnimating) && (_jsxs(Box, { ref: popupRef, className: className, sx: {
                     ...getPositionStyles(),
                     width: isMobile
                         ? '100%'
@@ -310,11 +274,6 @@ export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'S
                             title: emptyStateMessage,
                         }, avatarConfig: {
                             showAvatars: true,
-                        }, 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',
-                            bg: 'canvas.subtle',
-                        }, children: _jsx(PoweredByTag, { show: true, brandName: "Datalayer", brandUrl: "https://datalayer.ai", ...poweredByProps }) }))] }))] }));
+                        }, backgroundColor: "canvas.subtle", focusTrigger: focusTrigger, pendingPrompt: pendingPrompt, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, ...panelProps, children: children }), showPoweredBy && (_jsx(Box, { p: 2, borderTop: "1px solid", borderColor: "border.default", bg: "canvas.subtle", children: _jsx(PoweredByTag, { show: true, brandName: "Datalayer", brandUrl: "https://datalayer.ai", ...poweredByProps }) }))] }))] }));
 }
 export default ChatStandalone;

package/lib/chat/EphemeralSurfaceControl.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Tooltip } from '@primer/react';
 import { CircleSlashIcon, FileIcon, RowsIcon } from '@primer/octicons-react';
 export function EphemeralSurfaceControl({ mode, onChange, enableNotebook = false, enableDocument = false, enableChatOnly = true, }) {
     const choices = [
@@ -26,30 +27,9 @@ export function EphemeralSurfaceControl({ mode, onChange, enableNotebook = false
     if (choices.length < 2) {
         return null;
     }
-    return (_jsx(Box, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            bg: 'neutral.muted',
-            borderRadius: '6px',
-            p: '2px',
-            gap: '1px',
-        }, children: choices.map(({ mode: choice, icon: ModeIcon, label }) => (_jsx(Tooltip, { text: label, direction: "n", children: _jsx(Box, { as: "button", "aria-label": label, onClick: () => onChange?.(choice), sx: {
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    width: 26,
-                    height: 24,
-                    borderRadius: '4px',
-                    border: 'none',
-                    cursor: 'pointer',
-                    bg: mode === choice ? 'canvas.default' : 'transparent',
-                    boxShadow: mode === choice ? 'shadow.small' : 'none',
-                    color: mode === choice ? 'fg.default' : 'fg.muted',
-                    transition: 'all 0.15s ease',
-                    '&:hover': {
-                        color: 'fg.default',
-                        bg: mode === choice ? 'canvas.default' : 'neutral.subtle',
-                    },
+    return (_jsx(Box, { display: "inline-flex", alignItems: "center", bg: "neutral.muted", borderRadius: "6px", p: "2px", gap: "1px", children: choices.map(({ mode: choice, icon: ModeIcon, label }) => (_jsx(Tooltip, { text: label, direction: "n", children: _jsx(Box, { as: "button", "aria-label": label, onClick: () => onChange?.(choice), display: "inline-flex", alignItems: "center", justifyContent: "center", width: 26, height: 24, borderRadius: "4px", border: "none", cursor: "pointer", bg: mode === choice ? 'canvas.default' : 'transparent', boxShadow: mode === choice ? 'shadow.small' : 'none', color: mode === choice ? 'fg.default' : 'fg.muted', transition: "all 0.15s ease", hover: {
+                    color: 'fg.default',
+                    bg: mode === choice ? 'canvas.default' : 'neutral.subtle',
                 }, children: _jsx(ModeIcon, { size: 14 }) }) }, choice))) }));
 }
 export default EphemeralSurfaceControl;