@agent-native/core 0.117.2 → 0.118.1

package/dist/client/AgentPanel.js

@@ -21,11 +21,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  *   // Full page chat surface
  *   <AgentChatSurface mode="page" className="h-screen" />
  */
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as DesignSystemTooltip } from "@agent-native/toolkit/design-system";
 import { IconMessageCircle, IconMessageDots, IconTerminal2, IconSettings, IconLayoutSidebarRightCollapse, IconLayoutGrid, IconCheck, IconPlus, IconX, IconDotsVertical, IconHistory, IconArrowsMaximize, IconArrowsMinimize, IconExternalLink, } from "@tabler/icons-react";
 import React, { useState, useEffect, useRef, useCallback, useMemo, lazy, Suspense, startTransition, } from "react";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "./components/ui/dropdown-menu.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, normalizeTooltipText, } from "./components/ui/tooltip.js";
+import { normalizeTooltipText } from "./components/ui/tooltip.js";
 import { ErrorReportActions } from "./ErrorReportActions.js";
 import { FeedbackButton, resolveFeedbackUrl } from "./FeedbackButton.js";
 import { RunsTrayMenuItem } from "./progress/RunsTray.js";
@@ -167,7 +167,7 @@ function useCliSelection(keyPrefix) {
 }
 // ─── Settings panel components moved to ./settings/ ────────────────────────
 function IconTooltip({ content, children, }) {
-    return (_jsx(TooltipPrimitive.Provider, { delayDuration: 250, children: _jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { side: "bottom", sideOffset: 8, className: "z-[300] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md", children: [normalizeTooltipText(content), _jsx(TooltipPrimitive.Arrow, { className: "fill-popover" })] }) })] }) }));
+    return (_jsx(DesignSystemTooltip, { trigger: children, content: normalizeTooltipText(content), placement: "bottom", delayMs: 250, className: "z-[300] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md" }));
 }
 function ChatLoadingSkeleton({ renderHeader, centerComposerWhenEmpty = false, composerSlot, composerAreaClassName, composerLayoutVariant = "default", }) {
     // Provide empty no-op implementations so renderHeader can render the real
@@ -607,15 +607,15 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
             window.location.hostname === "127.0.0.1" ||
             window.location.hostname === "::1");
     const showDevToggle = canToggle && isLocalhost && isCodeEditingChatSurface;
-    const renderModeButtons = useCallback((activeMode) => (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("chat"), "aria-label": t("agentPanel.chatMode"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "chat"
-                                    ? "bg-accent text-foreground"
-                                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconMessageCircle, { size: 14 }), t("agentPanel.chat")] }) }), _jsx(TooltipContent, { children: t("agentPanel.chatMode") })] }), showCliMode && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("cli"), "aria-label": t("agentPanel.cliTerminalMode"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "cli"
-                                    ? "bg-accent text-foreground"
-                                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconTerminal2, { size: 14 }), t("agentPanel.cli")] }) }), _jsx(TooltipContent, { className: "max-w-[260px]", children: codeAccessEnabled
-                                ? t("agentPanel.cliTerminalMode")
-                                : codeUnavailableDescription })] })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("resources"), "aria-label": t("agentPanel.workspaceMode"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "resources"
-                                    ? "bg-accent text-foreground"
-                                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconLayoutGrid, { size: 14 }), t("agentPanel.workspace")] }) }), _jsx(TooltipContent, { children: t("agentPanel.workspaceMode") })] })] }) })), [codeAccessEnabled, codeUnavailableDescription, showCliMode, t]);
+    const renderModeButtons = useCallback((activeMode) => (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx(DesignSystemTooltip, { trigger: _jsxs("button", { onClick: () => switchMode("chat"), "aria-label": t("agentPanel.chatMode"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "chat"
+                        ? "bg-accent text-foreground"
+                        : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconMessageCircle, { size: 14 }), t("agentPanel.chat")] }), content: t("agentPanel.chatMode"), delayMs: 200 }), showCliMode && (_jsx(DesignSystemTooltip, { trigger: _jsxs("button", { onClick: () => switchMode("cli"), "aria-label": t("agentPanel.cliTerminalMode"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "cli"
+                        ? "bg-accent text-foreground"
+                        : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconTerminal2, { size: 14 }), t("agentPanel.cli")] }), content: codeAccessEnabled
+                    ? t("agentPanel.cliTerminalMode")
+                    : codeUnavailableDescription, className: "max-w-[260px]", delayMs: 200 })), _jsx(DesignSystemTooltip, { trigger: _jsxs("button", { onClick: () => switchMode("resources"), "aria-label": t("agentPanel.workspaceMode"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "resources"
+                        ? "bg-accent text-foreground"
+                        : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconLayoutGrid, { size: 14 }), t("agentPanel.workspace")] }), content: t("agentPanel.workspaceMode"), delayMs: 200 })] })), [codeAccessEnabled, codeUnavailableDescription, showCliMode, t]);
     const [headerMenuOpen, setHeaderMenuOpen] = useState(false);
     const [feedbackOpen, setFeedbackOpen] = useState(false);
     const getChatThreadShareUrl = useCallback((threadId) => {
@@ -1260,7 +1260,7 @@ export function AgentPanel(props) {
         catch { }
         setResetKey((key) => key + 1);
     }, [props.storageKey]);
-    return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(AgentPanelErrorBoundary, { onReset: resetPanel, children: _jsx(AgentPanelInner, { ...props }, resetKey) }) }));
+    return (_jsx(AgentPanelErrorBoundary, { onReset: resetPanel, children: _jsx(AgentPanelInner, { ...props }, resetKey) }));
 }
 export function shouldDefaultAgentChatSurfacePageNewChatButton(mode, _showTabBar) {
     return mode === "page";
@@ -1278,7 +1278,10 @@ export function shouldAllowAgentChatSurfaceSettingsMode(mode, allowSettingsMode)
 export function AgentChatSurface({ mode = "panel", className, defaultMode = "chat", showHeader = false, showTabBar = false, isFullscreen, style, chatViewTransition = false, showPageNewChatButton, ...props }) {
     const pageMode = mode === "page";
     const defaultShowPageNewChatButton = shouldDefaultAgentChatSurfacePageNewChatButton(mode, showTabBar);
-    return (_jsx(AgentPanel, { ...props, defaultMode: defaultMode, showHeader: showHeader, showTabBar: showTabBar, isFullscreen: isFullscreen ?? pageMode, allowSettingsMode: shouldAllowAgentChatSurfaceSettingsMode(mode, props.allowSettingsMode), showPageNewChatButton: showPageNewChatButton ?? defaultShowPageNewChatButton, className: cn(pageMode && "h-full min-h-0 w-full overflow-hidden bg-background", chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS, className), style: chatViewTransition ? getAgentChatViewTransitionStyle(style) : style }));
+    const panel = (_jsx(AgentPanel, { ...props, defaultMode: defaultMode, showHeader: showHeader, showTabBar: showTabBar, isFullscreen: isFullscreen ?? pageMode, allowSettingsMode: shouldAllowAgentChatSurfaceSettingsMode(mode, props.allowSettingsMode), showPageNewChatButton: showPageNewChatButton ?? defaultShowPageNewChatButton, className: cn(pageMode && "h-full min-h-0 w-full overflow-hidden bg-background", chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS, className), style: chatViewTransition ? getAgentChatViewTransitionStyle(style) : style }));
+    if (!pageMode)
+        return panel;
+    return (_jsxs(_Fragment, { children: [_jsx(URLSync, { browserTabId: props.browserTabId }), panel] }));
 }
 /**
  * Wraps app content with a toggleable agent sidebar.
@@ -1760,6 +1763,6 @@ export function AgentToggleButton({ className }) {
     // own close button.
     if (open)
         return null;
-    return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Toggle agent", onClick: () => window.dispatchEvent(new Event("agent-panel:toggle")), className: cn("inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className), children: _jsx(IconMessageDots, { size: 20, "aria-hidden": true }) }) }), _jsx(TooltipContent, { children: "Toggle agent" })] }) }));
+    return (_jsx(DesignSystemTooltip, { trigger: _jsx("button", { type: "button", "aria-label": "Toggle agent", onClick: () => window.dispatchEvent(new Event("agent-panel:toggle")), className: cn("inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className), children: _jsx(IconMessageDots, { size: 20, "aria-hidden": true }) }), content: "Toggle agent", delayMs: 200 }));
 }
 //# sourceMappingURL=AgentPanel.js.map