veryfront 0.1.996 → 0.1.998

package/esm/src/react/components/chat/chat/components/sidebar.js

@@ -1,6 +1,91 @@
+/**
+ * ChatSidebar — a conversation rail, available as a one-shot preset or as a
+ * composable compound (mirroring `Chat` / `Message`).
+ *
+ * Conversation-native: it lists {@link ConversationSummary} rows and, inside a
+ * {@link ConversationsProvider}, needs **no props at all** — it reads the list,
+ * the active id, and select/new/delete/rename straight from context. Pass props
+ * to override any of them (controlled), or drop to the compound parts for a
+ * custom layout.
+ *
+ * @example Zero-config inside a provider
+ * ```tsx
+ * <ConversationsProvider store={store}>
+ *   <ChatSidebar />          // conversations + actions come from context
+ * </ConversationsProvider>
+ * ```
+ *
+ * @example Preset — the whole rail from props
+ * ```tsx
+ * <ChatSidebar
+ *   conversations={conversations}
+ *   activeId={activeId}
+ *   onSelect={select}
+ *   onDelete={remove}
+ *   onRename={rename}
+ *   onNew={create}
+ * />
+ * ```
+ *
+ * @example Composition — drive the layout yourself
+ * ```tsx
+ * <ChatSidebar.Root>
+ *   <ChatSidebar.NewButton>New chat</ChatSidebar.NewButton>
+ *   <ChatSidebar.List />
+ * </ChatSidebar.Root>
+ * ```
+ *
+ * `<ChatSidebar.List />` with no children auto-groups the conversations by recency.
+ *
+ * @module react/components/chat/chat/components/sidebar
+ */
 import * as React from "../../../../../../react/react.js";
+import { COMPONENT_ERROR } from "../../../../../errors/error-registry.js";
 import { cn } from "../../theme.js";
-import { MessageSquareIcon, PlusIcon, TrashIcon } from "../../icons/index.js";
+import { PencilIcon, TrashIcon } from "../../icons/index.js";
+import { Button } from "../../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../../ui/dropdown-menu.js";
+import { List, ListItem, ListLabel } from "../../ui/list.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { ChatTokens } from "../../chat-tokens-style.js";
+import { useConversationsContextOptional } from "../contexts/conversations-context.js";
+/** Three-dots "more actions" glyph (not in the shared icons barrel). */
+function MoreGlyph({ className }) {
+    return (React.createElement("svg", { className: cn("size-3.5", className), viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" },
+        React.createElement("circle", { cx: "5", cy: "12", r: "1.6" }),
+        React.createElement("circle", { cx: "12", cy: "12", r: "1.6" }),
+        React.createElement("circle", { cx: "19", cy: "12", r: "1.6" })));
+}
+const ChatSidebarContext = React.createContext(null);
+function useChatSidebarContext() {
+    const context = React.useContext(ChatSidebarContext);
+    if (!context) {
+        throw COMPONENT_ERROR.create({
+            detail: "ChatSidebar sub-components must be used within <ChatSidebar.Root>",
+        });
+    }
+    return context;
+}
+const noop = () => { };
+/**
+ * Resolve the sidebar's data + actions from the explicit conversation props,
+ * falling back to the surrounding {@link ConversationsProvider}. Inside a
+ * provider the sidebar needs no props.
+ */
+function useResolvedSidebar(props) {
+    const ctx = useConversationsContextOptional();
+    const conversations = props.conversations ?? ctx?.conversations ?? [];
+    const activeId = props.activeId !== undefined ? props.activeId : ctx?.activeId ?? null;
+    const onSelect = props.onSelect ?? ctx?.select ?? noop;
+    const onDelete = props.onDelete ?? ctx?.remove ?? noop;
+    const onRename = props.onRename ?? ctx?.rename;
+    const onNew = props.onNew ?? (ctx ? () => void ctx.create() : undefined);
+    const renderItem = props.renderItem;
+    return { conversations, activeId, onSelect, onDelete, onRename, onNew, renderItem };
+}
+// ---------------------------------------------------------------------------
+// Recency grouping
+// ---------------------------------------------------------------------------
 function getRelativeGroup(timestamp) {
     const day = 86_400_000;
     const diff = Date.now() - timestamp;
@@ -15,15 +100,15 @@ function getRelativeGroup(timestamp) {
         return "Previous 7 days";
     return "Older";
 }
-function groupThreads(threads) {
+function groupConversations(conversations) {
     const groups = new Map();
     const order = ["Today", "Yesterday", "Previous 7 days", "Older"];
     for (const label of order) {
         groups.set(label, []);
     }
-    for (const thread of threads) {
-        const label = getRelativeGroup(thread.updatedAt);
-        groups.get(label).push(thread);
+    for (const conversation of conversations) {
+        const label = getRelativeGroup(conversation.updatedAt);
+        groups.get(label).push(conversation);
     }
     for (const [key, value] of groups) {
         if (value.length === 0)
@@ -31,63 +116,161 @@ function groupThreads(threads) {
     }
     return groups;
 }
-function ThreadItem({ thread, isActive, onSelect, onDelete, onRename, }) {
+/** Context provider + outer rail container for the compound sidebar. */
+export function ChatSidebarRoot(props) {
+    const { icons, loading, isOpen = true, fill = false, className, children } = props;
+    const resolved = useResolvedSidebar(props);
+    const value = React.useMemo(() => ({ ...resolved, icons, loading }), [
+        resolved.conversations,
+        resolved.activeId,
+        resolved.onSelect,
+        resolved.onDelete,
+        resolved.onRename,
+        resolved.onNew,
+        resolved.renderItem,
+        icons,
+        loading,
+    ]);
+    if (!isOpen)
+        return null;
+    return (React.createElement(ChatSidebarContext.Provider, { value: value },
+        React.createElement(ChatTokens, null),
+        React.createElement("div", { "data-vf-chat": "", className: cn("flex flex-col h-full", fill
+                ? "w-full"
+                : "shrink-0 max-sm:absolute max-sm:z-20 max-sm:shadow-xl max-sm:bg-[var(--background)]", className), style: fill ? undefined : { width: 240 } }, children)));
+}
+ChatSidebarRoot.displayName = "ChatSidebar.Root";
+/** The primary "new conversation" action. Wires `onNew` from context. */
+export function ChatSidebarNewButton({ children, className, }) {
+    const { onNew, icons } = useChatSidebarContext();
+    return (React.createElement("div", { className: "px-3 pt-4 pb-1" },
+        React.createElement(Button, { type: "button", variant: "primary", onClick: onNew, className: cn("w-full", className) },
+            icons?.newConversation,
+            children ?? "New chat")));
+}
+ChatSidebarNewButton.displayName = "ChatSidebar.NewButton";
+/** A single conversation row — select on click, rename/delete via a "…" menu. */
+export function ChatSidebarItem({ conversation, className, }) {
+    const { activeId, onSelect, onDelete, onRename, icons, } = useChatSidebarContext();
+    const isActive = conversation.id === activeId;
     const [editing, setEditing] = React.useState(false);
-    const [editValue, setEditValue] = React.useState(thread.title);
+    const [editValue, setEditValue] = React.useState(conversation.title);
+    const [menuOpen, setMenuOpen] = React.useState(false);
     const inputRef = React.useRef(null);
     React.useEffect(() => {
         if (editing)
-            inputRef.current?.focus();
+            inputRef.current?.select();
     }, [editing]);
-    function handleDoubleClick() {
+    function startRename() {
         if (!onRename)
             return;
-        setEditValue(thread.title);
+        setEditValue(conversation.title);
         setEditing(true);
     }
     function commitRename() {
         setEditing(false);
         const trimmed = editValue.trim();
-        if (trimmed && trimmed !== thread.title) {
-            onRename?.(trimmed);
+        if (trimmed && trimmed !== conversation.title) {
+            onRename?.(conversation.id, trimmed);
         }
     }
-    return (React.createElement("div", { className: cn("group/thread flex items-center gap-2.5 px-3 py-2.5 rounded-xl cursor-pointer transition-all", isActive
-            ? "bg-[var(--foreground)]/[0.05] text-[var(--foreground)]"
-            : "text-[var(--muted-foreground)] hover:bg-[var(--foreground)]/[0.03] hover:text-[var(--foreground)]"), onClick: !editing ? onSelect : undefined, onDoubleClick: handleDoubleClick },
-        React.createElement(MessageSquareIcon, { className: "size-4 shrink-0 opacity-50" }),
-        editing
-            ? (React.createElement("input", { ref: inputRef, value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: commitRename, onKeyDown: (e) => {
+    if (editing) {
+        // Fixed `h-8` = the display row's height (py-1.5 + a size-5 action button),
+        // so entering rename mode never resizes the row.
+        return (React.createElement("div", { className: "flex h-8 items-center gap-1 rounded-[var(--radius-sm)] bg-[var(--accent)] px-2.5" },
+            React.createElement("input", { ref: inputRef, value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: commitRename, onKeyDown: (e) => {
                     if (e.key === "Enter")
                         commitRename();
                     if (e.key === "Escape")
                         setEditing(false);
-                }, className: "flex-1 min-w-0 bg-transparent text-sm outline-none border-b border-[var(--input-border)]" }))
-            : (React.createElement("span", { className: "flex-1 min-w-0 truncate text-[13px] leading-snug" }, thread.title)),
-        !editing && (React.createElement("button", { type: "button", onClick: (e) => {
-                e.stopPropagation();
-                onDelete();
-            }, className: "shrink-0 opacity-0 group-hover/thread:opacity-100 p-0.5 text-[var(--muted-foreground)] hover:text-[var(--destructive)] transition-all rounded", "aria-label": "Delete thread" },
-            React.createElement(TrashIcon, { className: "size-3.5" })))));
+                }, className: "min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 text-[13px] leading-snug outline-none" })));
+    }
+    return (React.createElement(ListItem, { title: conversation.title, active: isActive || menuOpen, className: className, onClick: () => onSelect(conversation.id), action: React.createElement(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen },
+            React.createElement(DropdownMenuTrigger, { asChild: true },
+                React.createElement(Button, { type: "button", variant: "icon-ghost", size: "icon-xs", on: "card", "aria-label": `More actions for ${conversation.title}` }, icons?.more ?? React.createElement(MoreGlyph, null))),
+            React.createElement(DropdownMenuContent, { align: "end", className: "min-w-[160px]" },
+                onRename && (React.createElement(DropdownMenuItem, { onSelect: startRename },
+                    icons?.rename ?? React.createElement(PencilIcon, null),
+                    "Rename")),
+                React.createElement(DropdownMenuItem, { onSelect: () => onDelete(conversation.id), className: "text-[var(--destructive)] hover:bg-[color-mix(in_oklch,var(--destructive),transparent_92%)]" },
+                    icons?.delete ?? React.createElement(TrashIcon, null),
+                    "Delete"))) }));
 }
-/** Render chat sidebar. */
-export function ChatSidebar({ threads, activeThreadId, onSelectThread, onDeleteThread, onRenameThread, onNewThread, className, isOpen = true, }) {
-    const visibleThreads = React.useMemo(() => threads.filter((t) => t.messages.length > 0 || t.id === activeThreadId), [threads, activeThreadId]);
-    const grouped = React.useMemo(() => groupThreads(visibleThreads), [visibleThreads]);
-    const hasThreads = visibleThreads.length > 0;
-    if (!isOpen)
-        return null;
-    return (React.createElement("div", { className: cn("flex flex-col h-full shrink-0 max-sm:absolute max-sm:z-20 max-sm:shadow-xl max-sm:bg-[var(--background)]", className), style: { width: 240 } },
-        onNewThread && (React.createElement("div", { className: "px-3 pt-4 pb-1" },
-            React.createElement("button", { type: "button", onClick: onNewThread, className: "w-full inline-flex items-center justify-center gap-1.5 h-9 px-4 rounded-full text-sm font-medium text-[var(--foreground)] bg-[var(--card)] hover:opacity-80 transition-all" },
-                React.createElement(PlusIcon, { className: "size-4" }),
-                React.createElement("span", null, "New Chat")))),
-        React.createElement("div", { className: "flex-1 overflow-y-auto px-2 pt-2 pb-3 space-y-4" }, hasThreads
-            ? Array.from(grouped.entries()).map(([label, items]) => (React.createElement("div", { key: label },
-                React.createElement("div", { className: "px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-[var(--input-placeholder)]" }, label),
-                React.createElement("div", { className: "space-y-1" }, items.map((thread) => (React.createElement(ThreadItem, { key: thread.id, thread: thread, isActive: thread.id === activeThreadId, onSelect: () => onSelectThread(thread.id), onDelete: () => onDeleteThread(thread.id), onRename: onRenameThread
-                        ? (title) => onRenameThread(thread.id, title)
-                        : undefined })))))))
-            : (React.createElement("div", { className: "flex flex-col items-center justify-center h-full px-4 text-center text-[var(--muted-foreground)]" },
-                React.createElement("p", { className: "text-sm" }, "No chats yet"))))));
+ChatSidebarItem.displayName = "ChatSidebar.Item";
+/** A labeled cluster of conversation rows. */
+export function ChatSidebarGroup({ label, children, className, }) {
+    return (React.createElement(List, { className: className },
+        label !== undefined && React.createElement(ListLabel, null, label),
+        children));
+}
+ChatSidebarGroup.displayName = "ChatSidebar.Group";
+/** Placeholder shown when there are no conversations to list. */
+export function ChatSidebarEmpty({ children, className, }) {
+    return (React.createElement("div", { className: cn("flex h-full flex-col items-center justify-center px-4 text-center text-[var(--faint)]", className) }, children ?? React.createElement("p", { className: "text-sm" }, "No chats yet")));
+}
+ChatSidebarEmpty.displayName = "ChatSidebar.Empty";
+/**
+ * Loading placeholder for the list — shown until the client mounts (or while
+ * `loading`). Mirrors a real recency group (`List` + `ListLabel` + rows) so it
+ * sits at exactly the same position as the loaded list.
+ */
+function ChatSidebarSkeleton() {
+    return (React.createElement("output", { "aria-label": "Loading conversations", className: "block pt-1.5" },
+        React.createElement("span", { className: "sr-only" }, "Loading conversations"),
+        React.createElement(List, { "aria-hidden": "true" },
+            React.createElement(ListLabel, null,
+                React.createElement(Skeleton, { className: "h-2! w-10! bg-[var(--edge)]!" })),
+            ["w-3/4", "w-1/2", "w-2/3", "w-3/5", "w-1/2"].map((width, index) => (React.createElement("div", { key: `${index}-${width}`, className: "px-2.5 py-1.5" },
+                React.createElement(Skeleton, { className: cn("h-3! bg-[var(--edge)]!", width) })))))));
+}
+/** Scrollable region. Auto-groups by recency unless given `children`. */
+export function ChatSidebarList({ children, className, }) {
+    const { conversations, activeId, onSelect, onDelete, onRename, loading, renderItem, } = useChatSidebarContext();
+    // Conversations may load from localStorage (client-only), so the very first
+    // paint has none. Show a skeleton until mounted rather than flashing the
+    // "no chats yet" state — or whenever the caller explicitly signals `loading`.
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => setMounted(true), []);
+    const visible = React.useMemo(
+    // Newest activity first. (spread first — never sort the source array.)
+    () => [...conversations].sort((a, b) => b.updatedAt - a.updatedAt), [conversations]);
+    const grouped = React.useMemo(() => groupConversations(visible), [visible]);
+    const body = children ?? (!mounted || loading
+        ? React.createElement(ChatSidebarSkeleton, null)
+        : visible.length > 0
+            ? Array.from(grouped.entries()).map(([label, items]) => (React.createElement(ChatSidebarGroup, { key: label, label: label }, items.map((conversation) => {
+                if (renderItem) {
+                    return (React.createElement(React.Fragment, { key: conversation.id }, renderItem(conversation, {
+                        isActive: conversation.id === activeId,
+                        onSelect: () => onSelect(conversation.id),
+                        onDelete: () => onDelete(conversation.id),
+                        onRename: onRename
+                            ? (title) => onRename(conversation.id, title)
+                            : undefined,
+                    })));
+                }
+                return React.createElement(ChatSidebarItem, { key: conversation.id, conversation: conversation });
+            }))))
+            : React.createElement(ChatSidebarEmpty, null));
+    return (React.createElement("div", { className: cn("flex-1 overflow-y-auto px-2 pt-2 pb-3 space-y-3", className) }, body));
+}
+ChatSidebarList.displayName = "ChatSidebar.List";
+/** The one-shot preset — composes Root + NewButton + auto List. */
+function ChatSidebarBase(props) {
+    // Show the "new" button whenever an action is available (explicit or context).
+    const ctx = useConversationsContextOptional();
+    const hasNew = props.onNew !== undefined || ctx !== null;
+    return (React.createElement(ChatSidebarRoot, { ...props },
+        hasNew && React.createElement(ChatSidebarNewButton, null),
+        React.createElement(ChatSidebarList, null)));
 }
+ChatSidebarBase.displayName = "ChatSidebar";
+/** Render a chat sidebar — usable as `<ChatSidebar />` or `<ChatSidebar.Root>…`. */
+export const ChatSidebar = Object.assign(ChatSidebarBase, {
+    Root: ChatSidebarRoot,
+    NewButton: ChatSidebarNewButton,
+    List: ChatSidebarList,
+    Group: ChatSidebarGroup,
+    Item: ChatSidebarItem,
+    Empty: ChatSidebarEmpty,
+});

package/esm/src/react/components/chat/chat/components/skill-badge.d.ts

@@ -8,7 +8,12 @@ import type { ChatDynamicToolPart, ChatToolPart } from "../../../../../agent/rea
 export interface SkillBadgeProps {
     tool: ChatToolPart | ChatDynamicToolPart;
     className?: string;
+    /**
+     * Override the state icon. When provided, it replaces the built-in
+     * loading/complete/error glyphs for all states.
+     */
+    icon?: React.ReactNode;
 }
 /** Render skill badge. */
-export declare function SkillBadge({ tool, className }: SkillBadgeProps): React.JSX.Element;
+export declare function SkillBadge({ tool, className, icon }: SkillBadgeProps): React.JSX.Element;
 //# sourceMappingURL=skill-badge.d.ts.map

package/esm/src/react/components/chat/chat/components/skill-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skill-badge.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/skill-badge.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAE7F,qCAAqC;AACrC,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,YAAY,GAAG,mBAAmB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,0BAA0B;AAC1B,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmClF"}
+{"version":3,"file":"skill-badge.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/skill-badge.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAE7F,qCAAqC;AACrC,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,YAAY,GAAG,mBAAmB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,0BAA0B;AAC1B,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2CxF"}

package/esm/src/react/components/chat/chat/components/skill-badge.js

@@ -6,7 +6,7 @@ import * as React from "../../../../../../react/react.js";
 import { cn } from "../../theme.js";
 import { CheckCircleIcon, SparklesIcon, XCircleIcon } from "../../icons/index.js";
 /** Render skill badge. */
-export function SkillBadge({ tool, className }) {
+export function SkillBadge({ tool, className, icon }) {
     const input = tool.input;
     const skillId = input?.skillId;
     const isComplete = tool.state === "output-available";
@@ -27,9 +27,10 @@ export function SkillBadge({ tool, className }) {
             ? `Script: ${script ?? "complete"}`
             : `Running${script ? `: ${script}` : ""}...`;
     }
-    return (React.createElement("span", { className: cn("inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium", "bg-[var(--accent)] text-[var(--muted-foreground)] border border-[var(--border)]", className) },
-        React.createElement(SparklesIcon, { className: cn("size-3", !isComplete && !isError && "animate-pulse") }),
+    return (React.createElement("span", { className: cn("inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium", "border border-[var(--outline-border)] bg-transparent text-[var(--faint)]", className) },
+        icon ?? (React.createElement(SparklesIcon, { className: cn("size-3", !isComplete && !isError && "animate-pulse") })),
         React.createElement("span", null, label),
-        isComplete && React.createElement(CheckCircleIcon, { className: "size-3 text-[var(--success)]" }),
-        isError && React.createElement(XCircleIcon, { className: "size-3 text-[var(--destructive)]" })));
+        icon ? null : (React.createElement(React.Fragment, null,
+            isComplete && React.createElement(CheckCircleIcon, { className: "size-3 text-[var(--success)]" }),
+            isError && React.createElement(XCircleIcon, { className: "size-3 text-[var(--destructive)]" })))));
 }

package/esm/src/react/components/chat/chat/components/skill-tool.d.ts

@@ -0,0 +1,37 @@
+/**
+ * SkillTool — tool-call row for the `load_skill` skill tool.
+ *
+ * Rebuilt from the old `SkillBadge` pill into a tool-call ROW that reads as a
+ * sibling of the other tool rows (see `tool-ui.tsx`). Forked dependency-light
+ * from Studio's `LoadSkillTool` → `ChatTool` (no radix / cva-from-Studio / `@/`
+ * imports, no licensed fonts). Variants are built with our private `ui/cva.ts`.
+ *
+ * Studio labels (from `toolConfigs` `load_skill`):
+ *   loading → "Loading skill: X"  ·  loaded → "Loaded skill: X"
+ *
+ * @module react/components/chat/components/skill-tool
+ */
+import * as React from "../../../../../../react/react.js";
+import type { ChatDynamicToolPart, ChatToolPart } from "../../../../../agent/react/index.js";
+/** Props accepted by {@link SkillTool}. */
+export interface SkillToolProps {
+    /** The skill being loaded (id or filename). Renders in the row label. */
+    skill: string;
+    /**
+     * Tool-call state.
+     * - `loading` — Sparkles pulses, label shimmers.
+     * - `loaded` — Check appears, label is solid.
+     * @default "loaded"
+     */
+    state?: "loading" | "loaded";
+    className?: string;
+}
+/** Render a skill-load tool-call row. */
+export declare function SkillTool({ skill, state, className, }: SkillToolProps): React.JSX.Element;
+/**
+ * Derive `SkillTool` props from a skill tool-call part (`load_skill`,
+ * `load_skill_reference`, `execute_skill_script`). Lets the message list route
+ * skill parts to the `SkillTool` row rather than the old `SkillBadge` pill.
+ */
+export declare function getSkillToolProps(tool: ChatToolPart | ChatDynamicToolPart): SkillToolProps;
+//# sourceMappingURL=skill-tool.d.ts.map

package/esm/src/react/components/chat/chat/components/skill-tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-tool.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/skill-tool.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAC1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAW7F,2CAA2C;AAC3C,MAAM,WAAW,cAAc;IAC7B,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yCAAyC;AACzC,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAgB,EAChB,SAAS,GACV,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkBpC;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,YAAY,GAAG,mBAAmB,GACvC,cAAc,CAQhB"}

package/esm/src/react/components/chat/chat/components/skill-tool.js

@@ -0,0 +1,46 @@
+/**
+ * SkillTool — tool-call row for the `load_skill` skill tool.
+ *
+ * Rebuilt from the old `SkillBadge` pill into a tool-call ROW that reads as a
+ * sibling of the other tool rows (see `tool-ui.tsx`). Forked dependency-light
+ * from Studio's `LoadSkillTool` → `ChatTool` (no radix / cva-from-Studio / `@/`
+ * imports, no licensed fonts). Variants are built with our private `ui/cva.ts`.
+ *
+ * Studio labels (from `toolConfigs` `load_skill`):
+ *   loading → "Loading skill: X"  ·  loaded → "Loaded skill: X"
+ *
+ * @module react/components/chat/components/skill-tool
+ */
+import * as React from "../../../../../../react/react.js";
+import { cn } from "../../theme.js";
+import { cva } from "../../ui/cva.js";
+import { Shimmer } from "../../ui/shimmer.js";
+import { CheckIcon, SparklesIcon } from "../../icons/index.js";
+/** Row chrome — mirrors `ChatTool`: 14px text, soft, single-line. */
+const skillToolRow = cva("flex min-w-0 items-center gap-2 truncate text-sm text-[var(--foreground)]");
+/** Render a skill-load tool-call row. */
+export function SkillTool({ skill, state = "loaded", className, }) {
+    const isLoading = state === "loading";
+    const label = isLoading ? `Loading skill: ${skill}` : `Loaded skill: ${skill}`;
+    return (React.createElement("p", { className: cn(skillToolRow(), className) },
+        isLoading
+            ? React.createElement(SparklesIcon, { className: "size-3.5! shrink-0 animate-pulse" })
+            : React.createElement(CheckIcon, { className: "size-3.5! shrink-0" }),
+        isLoading
+            ? (React.createElement(Shimmer, { as: "span", duration: 1, className: "min-w-0 truncate" }, label))
+            : React.createElement("span", { className: "min-w-0 truncate" }, label)));
+}
+/**
+ * Derive `SkillTool` props from a skill tool-call part (`load_skill`,
+ * `load_skill_reference`, `execute_skill_script`). Lets the message list route
+ * skill parts to the `SkillTool` row rather than the old `SkillBadge` pill.
+ */
+export function getSkillToolProps(tool) {
+    const input = tool.input;
+    const skill = (input?.skillId ?? input?.reference ?? input?.script ??
+        "unknown");
+    return {
+        skill,
+        state: tool.state === "output-available" ? "loaded" : "loading",
+    };
+}

package/esm/src/react/components/chat/chat/components/sources.d.ts

@@ -6,12 +6,64 @@ export interface Source {
     score?: number;
     snippet?: string;
 }
-/** Props accepted by sources. */
+/** Per-list state shared with `Sources.*` sub-parts. */
+export interface SourcesContextValue {
+    sources: Source[];
+    onSourceClick?: (source: Source, index: number) => void;
+}
+/** Read the enclosing `Sources` state. Throws when used outside a `Sources`. */
+export declare function useSources(): SourcesContextValue;
+/** Props accepted by `Sources` / `Sources.Root`. */
 export interface SourcesProps {
     sources: Source[];
     className?: string;
     onSourceClick?: (source: Source, index: number) => void;
+    /**
+     * @deprecated Compose `Sources.Pill` children instead. Optional render-prop
+     * for each source pill; when provided, the default anatomy maps items through
+     * it rather than rendering `Sources.Pill` directly.
+     */
+    renderPill?: (source: Source, index: number) => React.ReactNode;
+    /** Compose your own row; when omitted, the default anatomy is rendered. */
+    children?: React.ReactNode;
+}
+/** Props for `Sources.List` — the flex-wrap row of pills. */
+export interface SourcesListProps {
+    className?: string;
+    /**
+     * @deprecated Compose `Sources.Pill` children instead. Optional render-prop
+     * for each source pill.
+     */
+    renderPill?: (source: Source, index: number) => React.ReactNode;
+    /** Compose your own pills; when omitted, one `Sources.Pill` per source. */
+    children?: React.ReactNode;
+}
+/** The flex-wrap row. Renders one `Sources.Pill` per source by default. */
+declare function SourcesList({ className, renderPill, children }: SourcesListProps): React.JSX.Element;
+declare namespace SourcesList {
+    var displayName: string;
+}
+/** Props accepted by an individual source pill. */
+export interface SourcePillProps {
+    source: Source;
+    index: number;
+    onClick?: () => void;
+    className?: string;
+}
+/** Render a single source pill with hover preview and score-color behaviour. */
+export declare function SourcePill({ source, index, onClick, className }: SourcePillProps): React.ReactElement;
+export declare namespace SourcePill {
+    var displayName: string;
 }
-/** Render sources. */
-export declare const Sources: React.ForwardRefExoticComponent<SourcesProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Sources — render `<Sources sources={…} />` for the default row, or compose
+ * `Sources.Root` + `Sources.List` + `Sources.Pill` for a custom layout.
+ * Mirrors the `ToolCall` / `Reasoning` compounds: render it, or compose it.
+ */
+export declare const Sources: React.ForwardRefExoticComponent<SourcesProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<SourcesProps & React.RefAttributes<HTMLDivElement>>;
+    List: typeof SourcesList;
+    Pill: typeof SourcePill;
+};
+export {};
 //# sourceMappingURL=sources.d.ts.map

package/esm/src/react/components/chat/chat/components/sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sources.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/sources.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAG1D,sCAAsC;AACtC,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,iCAAiC;AACjC,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AAED,sBAAsB;AACtB,eAAO,MAAM,OAAO,qFAuBnB,CAAC"}
+{"version":3,"file":"sources.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/chat/chat/components/sources.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAI1D,sCAAsC;AACtC,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAWD,wDAAwD;AACxD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AAID,gFAAgF;AAChF,wBAAgB,UAAU,IAAI,mBAAmB,CAQhD;AAED,oDAAoD;AACpD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA8BD,6DAA6D;AAC7D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,2EAA2E;AAC3E,iBAAS,WAAW,CAClB,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,gBAAgB,GACpD,KAAK,CAAC,GAAG,CAAC,OAAO,CAsBnB;kBAxBQ,WAAW;;;AA2BpB,mDAAmD;AACnD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,gFAAgF;AAChF,wBAAgB,UAAU,CACxB,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,eAAe,GACrD,KAAK,CAAC,YAAY,CAkDpB;yBApDe,UAAU;;;AAuD1B;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;CAIlB,CAAC"}

package/esm/src/react/components/chat/chat/components/sources.js

@@ -1,29 +1,63 @@
 import * as React from "../../../../../../react/react.js";
 import { cn } from "../../theme.js";
-/** Render sources. */
-export const Sources = React.forwardRef(function Sources({ sources, className, onSourceClick }, ref) {
+import { COMPONENT_ERROR } from "../../../../../errors/error-registry.js";
+const SourcesContext = React.createContext(null);
+/** Read the enclosing `Sources` state. Throws when used outside a `Sources`. */
+export function useSources() {
+    const ctx = React.useContext(SourcesContext);
+    if (!ctx) {
+        throw COMPONENT_ERROR.create({
+            detail: "useSources must be used within a Sources",
+        });
+    }
+    return ctx;
+}
+/**
+ * `Sources.Root` — context provider + the row wrapper. No children renders the
+ * default anatomy (`List` of `Pill`s); pass children to recompose. Renders
+ * nothing when the source list is empty.
+ */
+const SourcesRoot = React.forwardRef(function Sources({ sources, className, onSourceClick, renderPill, children }, ref) {
     if (sources.length === 0)
         return null;
-    return (React.createElement("div", { ref: ref, className: cn("mt-3 pt-3 border-t border-[var(--border)]", className) },
-        React.createElement("p", { className: "text-xs font-medium text-[var(--muted-foreground)] mb-2" }, "Sources"),
-        React.createElement("div", { className: "flex flex-wrap gap-1.5" }, sources.map((source, index) => (React.createElement(SourcePill, { key: `${source.title}-${index}`, source: source, index: index, onClick: onSourceClick ? () => onSourceClick(source, index) : undefined }))))));
+    const context = { sources, onSourceClick };
+    return (React.createElement(SourcesContext.Provider, { value: context },
+        React.createElement("div", { ref: ref, className: cn("mt-1", className) }, children ?? React.createElement(SourcesList, { renderPill: renderPill }))));
 });
-Sources.displayName = "Sources";
-function SourcePill({ source, index, onClick }) {
+SourcesRoot.displayName = "Sources.Root";
+/** The flex-wrap row. Renders one `Sources.Pill` per source by default. */
+function SourcesList({ className, renderPill, children }) {
+    const { sources, onSourceClick } = useSources();
+    return (React.createElement("div", { className: cn("flex flex-wrap gap-2", className) }, children ?? sources.map((source, index) => renderPill
+        ? (React.createElement(React.Fragment, { key: `${source.title}-${index}` }, renderPill(source, index)))
+        : (React.createElement(SourcePill, { key: `${source.title}-${index}`, source: source, index: index, onClick: onSourceClick ? () => onSourceClick(source, index) : undefined })))));
+}
+SourcesList.displayName = "Sources.List";
+/** Render a single source pill with hover preview and score-color behaviour. */
+export function SourcePill({ source, index, onClick, className }) {
     const [showPreview, setShowPreview] = React.useState(false);
     return (React.createElement("span", { className: "relative" },
-        React.createElement("button", { type: "button", onClick: onClick, onMouseEnter: () => setShowPreview(true), onMouseLeave: () => setShowPreview(false), className: cn("inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-full text-xs", "bg-[var(--accent)] text-[var(--card-foreground)]", "hover:bg-[var(--accent)] transition-colors", onClick ? "cursor-pointer" : "cursor-default") },
-            React.createElement("span", { className: "flex items-center justify-center size-4 rounded bg-[var(--border)] text-[10px] font-medium text-[var(--card-foreground)]" }, index + 1),
-            React.createElement("span", { className: "truncate max-w-[160px]" }, source.title),
-            source.score != null && (React.createElement("span", { className: "flex items-center gap-1 shrink-0 ml-0.5" },
+        React.createElement("button", { type: "button", onClick: onClick, onMouseEnter: () => setShowPreview(true), onMouseLeave: () => setShowPreview(false), className: cn("inline-flex max-w-full items-center gap-1 rounded-full border border-[var(--outline-border)] py-1 pl-1 pr-2 text-xs no-underline", "bg-transparent text-[var(--foreground)]", "transition-colors hover:bg-[var(--tertiary)]", onClick ? "cursor-pointer" : "cursor-default", className) },
+            React.createElement("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full border border-[var(--outline-border)] text-xs font-medium" }, index + 1),
+            React.createElement("span", { className: "ml-0.5 max-w-[150px] truncate" }, source.title),
+            source.score != null && (React.createElement("span", { className: "ml-0.5 flex shrink-0 items-center gap-1" },
                 React.createElement("span", { className: cn("size-1.5 rounded-full", source.score >= 0.7
                         ? "bg-emerald-500"
                         : source.score >= 0.4
                             ? "bg-amber-500"
                             : "bg-neutral-400") })))),
-        showPreview && source.snippet && (React.createElement("div", { className: "absolute bottom-full left-0 mb-2 z-50 w-60 pointer-events-none" },
-            React.createElement("div", { className: "bg-[var(--card)] border border-[var(--border)] rounded-xl shadow-lg p-2.5 text-left" },
-                React.createElement("p", { className: "text-xs text-[var(--card-foreground)] line-clamp-3 leading-relaxed" },
-                    source.snippet.slice(0, 150),
-                    source.snippet.length > 150 ? "..." : ""))))));
+        showPreview && source.snippet && (React.createElement("div", { className: "absolute bottom-full left-0 mb-2 z-50 w-64 pointer-events-none animate-in fade-in duration-150" },
+            React.createElement("div", { className: "rounded-lg border border-[var(--outline-border)] bg-[var(--popover)] px-3 py-2 text-left shadow-md" },
+                React.createElement("p", { className: "text-xs text-[var(--foreground)] line-clamp-3 leading-relaxed" }, source.snippet))))));
 }
+SourcePill.displayName = "Sources.Pill";
+/**
+ * Sources — render `<Sources sources={…} />` for the default row, or compose
+ * `Sources.Root` + `Sources.List` + `Sources.Pill` for a custom layout.
+ * Mirrors the `ToolCall` / `Reasoning` compounds: render it, or compose it.
+ */
+export const Sources = Object.assign(SourcesRoot, {
+    Root: SourcesRoot,
+    List: SourcesList,
+    Pill: SourcePill,
+});