veryfront 0.1.47 → 0.1.49

package/esm/src/react/components/ai/chat/index.js

@@ -1,32 +1,143 @@
+/**
+ * Chat UI Component System
+ *
+ * Provides a full-featured chat interface via the `Chat` preset component,
+ * along with composable building blocks for custom layouts.
+ *
+ * @example Quick start (preset)
+ * ```tsx
+ * import { Chat, useChat } from "veryfront/chat";
+ *
+ * export default function Page() {
+ *   const chat = useChat({ api: "/api/chat" });
+ *   return (
+ *     <Chat
+ *       messages={chat.messages}
+ *       input={chat.input}
+ *       onChange={chat.handleInputChange}
+ *       onSubmit={chat.handleSubmit}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example Custom layout (composition)
+ * ```tsx
+ * <Chat.Root messages={messages} input={input}>
+ *   <Chat.Empty title="Ask anything" />
+ *   <Chat.MessageList messages={messages} />
+ *   <Chat.Composer input={input} onChange={onChange} />
+ * </Chat.Root>
+ * ```
+ *
+ * @example Per-message control (compound)
+ * ```tsx
+ * import { Message } from "veryfront/chat";
+ *
+ * <Message.Root message={msg}>
+ *   <Message.Avatar />
+ *   <Message.Content />
+ *   <Message.Actions />
+ * </Message.Root>
+ * ```
+ *
+ * @module ai/react/components/chat
+ */
 import * as React from "react";
-import { ChatContainer, InputBox, MessageItem, MessageList, SubmitButton, } from "../../../primitives/index.js";
 import { useVoiceInput } from "../../../../agent/react/index.js";
-import { cn, defaultChatTheme, mergeThemes } from "../theme.js";
-import { Markdown } from "../markdown.js";
-import { MessageSquareIcon, RefreshCwIcon } from "../icons/index.js";
-import { ModelSelector } from "../model-selector.js";
-export { Loader, Shimmer } from "./components/animations.js";
+import { defaultChatTheme, mergeThemes } from "../theme.js";
+// Composition imports (used in the Chat preset)
+import { ChatRoot } from "./composition/chat-root.js";
+import { ChatComposer } from "./composition/chat-composer.js";
+import { ChatMessageList } from "./composition/chat-message-list.js";
+import { ChatEmpty } from "./composition/chat-empty.js";
+import { ChatIf } from "./composition/chat-if.js";
+import { ErrorBanner } from "./composition/error-banner.js";
+import { Message } from "./composition/message.js";
+import { DropZoneOverlay } from "./components/drop-zone.js";
+import { TabSwitcher } from "./components/tab-switcher.js";
+import { UploadsPanel } from "./components/uploads-panel.js";
+import { InferenceBadge } from "./components/inference-badge.js";
+import { UpgradeCTA } from "./components/upgrade-cta.js";
+import { QuickActions as QuickActionsComponent } from "./components/quick-actions.js";
+// ---------------------------------------------------------------------------
+// Re-exports — sub-components
+// ---------------------------------------------------------------------------
+export { FadeIn, Loader, Shimmer } from "./components/animations.js";
 export { ReasoningCard } from "./components/reasoning.js";
 export { ConversationEmptyState, ConversationScrollButton, Suggestion, Suggestions, } from "./components/empty-state.js";
 export { MessageActions } from "./components/message-actions.js";
+export { MessageEditForm } from "./components/message-edit-form.js";
+export { BranchPicker } from "./components/branch-picker.js";
+export { DropZoneOverlay } from "./components/drop-zone.js";
+export { SkillBadge } from "./components/skill-badge.js";
 export { ToolCallCard, ToolStatusBadge } from "./components/tool-ui.js";
 export { InferenceBadge } from "./components/inference-badge.js";
 export { UpgradeCTA } from "./components/upgrade-cta.js";
-export { getTextContent, groupPartsInOrder, isReasoningPart, isToolPart, } from "./utils/message-parts.js";
-export { ChatFooter, ChatHeader, ChatInput, ChatMessages } from "./composition/api.js";
-import { ChatFooter, ChatHeader, ChatInput, ChatMessages } from "./composition/api.js";
-import { ConversationEmptyState, ConversationScrollButton, Suggestion, Suggestions, } from "./components/empty-state.js";
-import { MessageActions } from "./components/message-actions.js";
-import { ReasoningCard } from "./components/reasoning.js";
-import { ToolCallCard } from "./components/tool-ui.js";
-import { InferenceBadge } from "./components/inference-badge.js";
-import { UpgradeCTA } from "./components/upgrade-cta.js";
-import { getTextContent, groupPartsInOrder } from "./utils/message-parts.js";
-export const Chat = React.forwardRef(function Chat({ messages, input, onChange, handleInputChange, onSubmit, handleSubmit, stop, reload, enableVoice = false, onVoice, setInput, isLoading, error, placeholder = "Type a message...", maxHeight = "100%", className, theme: userTheme, renderMessage, renderTool, multiline = false, suggestions, onSuggestionClick, emptyState, showScrollButton = false, showMessageActions = true, models, model, onModelChange, inferenceMode, browserStatus, }, ref) {
-    const theme = mergeThemes(defaultChatTheme, userTheme);
-    const messagesEndRef = React.useRef(null);
-    const inputChangeHandler = onChange ?? handleInputChange ?? (() => { });
-    const submitHandler = onSubmit ?? handleSubmit;
+export { Sources } from "./components/sources.js";
+export { InlineCitation } from "./components/inline-citation.js";
+export { MessageFeedback, } from "./components/message-feedback.js";
+export { AttachmentPill, } from "./components/attachment-pill.js";
+export { RichCodeBlock } from "./components/code-block.js";
+export { StepIndicator } from "./components/step-indicator.js";
+export { ChatSidebar } from "./components/sidebar.js";
+export { TabSwitcher } from "./components/tab-switcher.js";
+export { QuickActions, } from "./components/quick-actions.js";
+export { UploadsPanel, } from "./components/uploads-panel.js";
+// Re-exports — hooks
+export { useThreads, } from "./hooks/use-threads.js";
+// Re-exports — utils
+export { extractSourcesFromParts, getTextContent, groupPartsInOrder, isReasoningPart, isSkillToolPart, isToolPart, } from "./utils/message-parts.js";
+export { downloadMarkdown, exportAsMarkdown } from "./utils/export.js";
+// Re-exports — composition
+export { ChatComposer, ChatEmpty, ChatIf, ChatMessageList, ChatRoot, ErrorBanner, Message, ModelAvatar, } from "./composition/api.js";
+// Re-exports — contexts
+export { ChatContextProvider, ComposerContextProvider, MessageContextProvider, ThreadListContextProvider, useChatContext, useChatContextOptional, useComposerContext, useComposerContextOptional, useMessageContext, useMessageContextOptional, useThreadListContext, useThreadListContextOptional, } from "./contexts/index.js";
+// ---------------------------------------------------------------------------
+// Chat — Preset component
+//
+// Composes ChatRoot, ChatMessageList, ChatComposer, ChatEmpty, etc. into a
+// full-featured chat UI with sensible defaults. For custom layouts, use the
+// building blocks directly.
+// ---------------------------------------------------------------------------
+export const Chat = React.forwardRef(function Chat({ messages, input, onChange, onSubmit, stop, reload, enableVoice = false, onVoice, setInput, isLoading, error, placeholder = "Type a message...", maxHeight = "100%", className, theme: userTheme, renderMessage, renderTool, suggestions, onSuggestionClick, emptyState, showScrollButton = false, showMessageActions = true, models, model, activeModel, onModelChange, inferenceMode, browserStatus, showSources = false, onSourceClick, onAttach, onDrop, attachAccept, attachments, onRemoveAttachment, showExport = false, onFeedback, editMessage, getBranches, switchBranch, showSteps = false, showTabs = false, activeTab: controlledTab, onTabChange: controlledTabChange, uploads, onRemoveUpload, quickActions, onQuickAction, hideTabSwitcher = false, children, }, ref) {
+    const theme = React.useMemo(() => mergeThemes(defaultChatTheme, userTheme), [userTheme]);
+    // --- Drag-and-drop ---
+    const dropHandler = onDrop ?? onAttach;
+    const [dragOver, setDragOver] = React.useState(false);
+    const dragCounter = React.useRef(0);
+    const handleDragEnter = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounter.current++;
+        if (e.dataTransfer.types.includes("Files"))
+            setDragOver(true);
+    }, []);
+    const handleDragLeave = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounter.current--;
+        if (dragCounter.current === 0)
+            setDragOver(false);
+    }, []);
+    const handleDragOver = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleFileDrop = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounter.current = 0;
+        setDragOver(false);
+        if (e.dataTransfer.files.length > 0 && dropHandler) {
+            dropHandler(e.dataTransfer.files);
+        }
+    }, [dropHandler]);
+    // --- Tab state ---
+    const [internalTab, setInternalTab] = React.useState("chat");
+    const currentTab = controlledTab ?? internalTab;
+    const handleTabChange = controlledTabChange ?? setInternalTab;
+    // --- Voice ---
     const voice = useVoiceInput({
         onTranscript: (transcript, isFinal) => {
             if (!isFinal || !setInput)
@@ -41,82 +152,40 @@ export const Chat = React.forwardRef(function Chat({ messages, input, onChange,
             return voice.toggle;
         return undefined;
     }, [onVoice, enableVoice, voice.isSupported, voice.toggle, setInput]);
-    React.useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-    }, [messages]);
     const isEmpty = messages.length === 0;
-    const showSuggestions = (suggestions?.length ?? 0) > 0;
-    return (React.createElement(ChatContainer, { ref: ref, className: cn(theme.container, className), style: { maxHeight } },
-        React.createElement(MessageList, { className: "flex-1 min-h-0 overflow-y-auto relative" },
-            isEmpty
-                ? (React.createElement("div", { className: "flex flex-col items-center justify-center h-full px-4" },
-                    React.createElement("div", { className: "flex-1" }),
-                    React.createElement(ConversationEmptyState, { icon: emptyState?.icon ?? React.createElement(MessageSquareIcon, { className: "size-10" }), title: emptyState?.title ?? "What can I help with?", description: emptyState?.description }),
-                    showSuggestions && (React.createElement("div", { className: "w-full max-w-2xl mt-6 mb-8" },
-                        React.createElement(Suggestions, { layout: "grid" }, suggestions?.map((suggestion) => (React.createElement(Suggestion, { key: suggestion, suggestion: suggestion, onClick: onSuggestionClick })))))),
-                    inferenceMode && inferenceMode !== "cloud" && (React.createElement(UpgradeCTA, { inferenceMode: inferenceMode })),
-                    React.createElement("div", { className: "flex-1" })))
-                : (React.createElement("div", { className: "max-w-2xl mx-auto px-4 py-4 space-y-2" },
-                    messages.map((msg) => {
-                        if (renderMessage) {
-                            return React.createElement(React.Fragment, { key: msg.id }, renderMessage(msg));
-                        }
-                        if (msg.role === "user") {
-                            const content = getTextContent(msg);
-                            return (React.createElement(MessageItem, { key: msg.id, role: msg.role, className: cn("flex", "justify-end") },
-                                React.createElement("div", { className: theme.message?.[msg.role] ?? theme.message?.user },
-                                    React.createElement("p", { className: "whitespace-pre-wrap text-[15px] leading-relaxed" }, content))));
-                        }
-                        const partGroups = groupPartsInOrder(msg.parts);
-                        const textContent = getTextContent(msg);
-                        return (React.createElement(MessageItem, { key: msg.id, role: msg.role, className: cn("flex", "justify-start") },
-                            React.createElement("div", { className: theme.message?.[msg.role] ?? theme.message?.assistant },
-                                partGroups.map((group, index) => {
-                                    if (group.type === "text") {
-                                        return (React.createElement(Markdown, { key: `text-${index}`, className: "text-[15px] leading-relaxed" }, group.content));
-                                    }
-                                    if (group.type === "reasoning") {
-                                        return (React.createElement(ReasoningCard, { key: `reasoning-${index}`, text: group.text, isStreaming: group.isStreaming }));
-                                    }
-                                    return (React.createElement("div", { key: group.tool.toolCallId, className: "my-3" }, renderTool
-                                        ? renderTool(group.tool)
-                                        : React.createElement(ToolCallCard, { tool: group.tool })));
-                                }),
-                                showMessageActions && textContent && (React.createElement(MessageActions, { content: textContent })))));
-                    }),
-                    isLoading && (React.createElement("div", { className: "flex justify-start" },
-                        React.createElement("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-[20px] rounded-bl-[4px] px-4 py-3" }, browserStatus === "downloading-model" || browserStatus === "loading-runtime"
-                            ? (React.createElement("div", { className: "flex items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400" },
-                                React.createElement("span", { className: "size-1.5 rounded-full bg-amber-500 animate-pulse" }),
-                                React.createElement("span", null, browserStatus === "downloading-model"
-                                    ? "Downloading model..."
-                                    : "Loading AI...")))
-                            : (React.createElement("div", { className: "flex gap-1.5 items-center" },
-                                React.createElement("span", { className: cn(theme.loading) }),
-                                React.createElement("span", { className: cn(theme.loading), style: { animationDelay: "0.15s" } }),
-                                React.createElement("span", { className: cn(theme.loading), style: { animationDelay: "0.3s" } })))))),
-                    React.createElement("div", { ref: messagesEndRef }))),
-            showScrollButton && (React.createElement(ConversationScrollButton, { onClick: () => messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }))),
-        error && (React.createElement("div", { className: "max-w-2xl mx-auto px-4 pb-2" },
-            React.createElement("div", { className: "px-4 py-3 bg-red-50 dark:bg-red-900/20 rounded-[20px] text-red-600 dark:text-red-400 text-sm flex items-center justify-between gap-3" },
-                React.createElement("span", null, error.message),
-                reload && (React.createElement("button", { type: "button", onClick: reload, className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/40 hover:bg-red-200 dark:hover:bg-red-900/60 rounded-full transition-colors" },
-                    React.createElement(RefreshCwIcon, { className: "size-3" }),
-                    "Retry"))))),
-        React.createElement("div", { className: "flex-shrink-0 bg-white dark:bg-neutral-900 border-t border-neutral-200 dark:border-neutral-800" },
-            inferenceMode && inferenceMode !== "cloud" && (React.createElement("div", { className: "max-w-2xl mx-auto" },
-                React.createElement(InferenceBadge, { inferenceMode: inferenceMode, browserStatus: browserStatus }))),
-            React.createElement("form", { onSubmit: submitHandler, className: "max-w-2xl mx-auto px-4 py-3" },
-                models && models.length > 0 && onModelChange && (React.createElement("div", { className: "mb-2" },
-                    React.createElement(ModelSelector, { models: models, value: model, onChange: onModelChange, disabled: isLoading }))),
-                React.createElement("div", { className: "flex gap-2 items-center" },
-                    React.createElement(InputBox, { value: voice.isListening ? voice.transcript || input : input, onChange: inputChangeHandler, placeholder: voice.isListening ? "Listening..." : placeholder, disabled: isLoading || voice.isListening, multiline: multiline, className: theme.input }),
-                    React.createElement(SubmitButton, { isLoading: isLoading || voice.isListening, hasInput: !!input.trim(), onStop: voice.isListening ? voice.stop : stop, onVoice: voiceHandler, disabled: !input.trim(), className: theme.button }))))));
+    const isDocsTab = showTabs && currentTab === "uploads";
+    const dragProps = dropHandler
+        ? {
+            onDragEnter: handleDragEnter,
+            onDragLeave: handleDragLeave,
+            onDragOver: handleDragOver,
+            onDrop: handleFileDrop,
+        }
+        : {};
+    return (React.createElement(ChatRoot, { ref: ref, messages: messages, input: input, isLoading: isLoading, error: error, setInput: setInput, onSubmit: onSubmit, onStop: stop, onReload: reload, model: model, models: models, onModelChange: onModelChange, attachments: attachments, onAttach: onAttach, onRemoveAttachment: onRemoveAttachment, editMessage: editMessage, getBranches: getBranches, switchBranch: switchBranch, onFeedback: onFeedback, showSources: showSources, onSourceClick: onSourceClick, theme: userTheme, maxHeight: maxHeight, className: className, ...dragProps },
+        dropHandler && React.createElement(DropZoneOverlay, { visible: dragOver, accept: attachAccept }),
+        showTabs && !hideTabSwitcher && (React.createElement(TabSwitcher, { activeTab: currentTab, onTabChange: handleTabChange })),
+        isDocsTab
+            ? (React.createElement(UploadsPanel, { uploads: uploads, onRemoveUpload: onRemoveUpload, onAttach: onAttach, attachAccept: attachAccept, className: "flex-1 min-h-0" }))
+            : isEmpty
+                ? (React.createElement(ChatEmpty, { icon: emptyState?.icon, title: emptyState?.title, description: emptyState?.description, suggestions: suggestions, onSuggestionClick: onSuggestionClick }, inferenceMode && inferenceMode !== "cloud" && (React.createElement(UpgradeCTA, { inferenceMode: inferenceMode }))))
+                : (React.createElement(ChatMessageList, { messages: messages, isLoading: isLoading, theme: theme, renderMessage: renderMessage, renderTool: renderTool, model: activeModel || model, showMessageActions: showMessageActions, showSources: showSources, showSteps: showSteps, showScrollButton: showScrollButton, onSourceClick: onSourceClick, inferenceMode: inferenceMode, browserStatus: browserStatus, editMessage: editMessage, getBranches: getBranches, switchBranch: switchBranch, onFeedback: onFeedback })),
+        error && React.createElement(ErrorBanner, { error: error, onRetry: reload }),
+        !isDocsTab && (React.createElement(ChatComposer, { input: voice.isListening ? voice.transcript || input : input, onChange: onChange, onSubmit: onSubmit, isLoading: isLoading, placeholder: voice.isListening ? "Listening..." : placeholder, theme: theme, stop: voice.isListening ? undefined : stop, onVoice: voiceHandler, isListening: voice.isListening, transcript: voice.transcript, models: models, model: model, onModelChange: onModelChange, onAttach: onAttach, attachAccept: attachAccept, attachments: attachments, onRemoveAttachment: onRemoveAttachment, showExport: showExport, messages: messages },
+            inferenceMode && inferenceMode !== "cloud" && (React.createElement(InferenceBadge, { inferenceMode: inferenceMode, browserStatus: browserStatus })),
+            isEmpty && quickActions && quickActions.length > 0 && (React.createElement(QuickActionsComponent, { actions: quickActions, onActionClick: onQuickAction })))),
+        children));
 });
 Chat.displayName = "Chat";
+// ---------------------------------------------------------------------------
+// ChatComponents — Compound API via Object.assign
+// ---------------------------------------------------------------------------
 export const ChatComponents = Object.assign(Chat, {
-    Header: ChatHeader,
-    Messages: ChatMessages,
-    Input: ChatInput,
-    Footer: ChatFooter,
+    Root: ChatRoot,
+    MessageList: ChatMessageList,
+    Composer: ChatComposer,
+    Empty: ChatEmpty,
+    If: ChatIf,
+    Message: Message,
+    ErrorBanner: ErrorBanner,
 });

package/esm/src/react/components/ai/chat/utils/export.d.ts

@@ -0,0 +1,10 @@
+import type { UIMessage } from "../../../../../agent/react/index.js";
+/**
+ * Convert chat messages to a markdown string.
+ */
+export declare function exportAsMarkdown(messages: UIMessage[]): string;
+/**
+ * Download messages as a .md file.
+ */
+export declare function downloadMarkdown(messages: UIMessage[], filename?: string): void;
+//# sourceMappingURL=export.d.ts.map

package/esm/src/react/components/ai/chat/utils/export.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/utils/export.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAGrE;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,MAAM,CA+C9D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAW/E"}

package/esm/src/react/components/ai/chat/utils/export.js

@@ -0,0 +1,64 @@
+/**
+ * Conversation Export Utilities
+ * @module ai/react/components/chat/utils/export
+ */
+import * as dntShim from "../../../../../../_dnt.shims.js";
+import { extractSourcesFromParts, getTextContent } from "./message-parts.js";
+/**
+ * Convert chat messages to a markdown string.
+ */
+export function exportAsMarkdown(messages) {
+    const lines = [];
+    for (const msg of messages) {
+        if (msg.role === "system")
+            continue;
+        if (msg.role === "user") {
+            lines.push(`**User:**\n${getTextContent(msg)}`);
+            lines.push("");
+            continue;
+        }
+        // Assistant message
+        const textParts = [];
+        const toolSummaries = [];
+        for (const part of msg.parts) {
+            if (part.type === "text") {
+                textParts.push(part.text);
+            }
+            else if (part.type === "reasoning") {
+                textParts.push(`> *Thinking:* ${part.text}`);
+            }
+            else if (part.type.startsWith("tool-") && part.type !== "tool-result" && "toolName" in part) {
+                const name = part.toolName;
+                const state = part.state ?? "";
+                toolSummaries.push(`> Tool: **${name}** (${state})`);
+            }
+        }
+        lines.push("**Assistant:**");
+        if (toolSummaries.length > 0) {
+            lines.push(toolSummaries.join("\n"));
+        }
+        lines.push(textParts.join(""));
+        const sources = extractSourcesFromParts(msg.parts);
+        if (sources.length > 0) {
+            lines.push("\nSources: " +
+                sources.map((s, i) => `[${i + 1}] ${s.title}${s.url ? ` (${s.url})` : ""}`).join(", "));
+        }
+        lines.push("");
+    }
+    return lines.join("\n").trim() + "\n";
+}
+/**
+ * Download messages as a .md file.
+ */
+export function downloadMarkdown(messages, filename) {
+    const md = exportAsMarkdown(messages);
+    const blob = new dntShim.Blob([md], { type: "text/markdown;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename ?? `chat-${new Date().toISOString().slice(0, 10)}.md`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}

package/esm/src/react/components/ai/chat/utils/message-parts.d.ts

@@ -3,10 +3,13 @@
  * @module ai/react/components/chat/utils/message-parts
  */
 import type { DynamicToolUIPart, ToolUIPart, UIMessage, UIMessagePart } from "../../../../../agent/react/index.js";
+import type { Source } from "../components/sources.js";
 /** Get text content from UIMessage parts */
 export declare function getTextContent(message: UIMessage): string;
 /** Check if a part is a tool part */
 export declare function isToolPart(part: UIMessagePart): part is ToolUIPart | DynamicToolUIPart;
+/** Check if a tool part is a skill-related tool (load-skill, load-skill-reference, execute-skill-script) */
+export declare function isSkillToolPart(tool: ToolUIPart | DynamicToolUIPart): boolean;
 /** Check if a part is a reasoning part */
 export declare function isReasoningPart(part: UIMessagePart): part is {
     type: "reasoning";
@@ -26,10 +29,19 @@ export type PartGroup = {
     type: "reasoning";
     text: string;
     isStreaming: boolean;
+} | {
+    type: "step";
+    stepIndex: number;
+    isComplete: boolean;
 };
 /**
  * Group consecutive parts for ordered rendering
  * Returns an array of groups, each containing either consecutive text parts, a tool part, or a reasoning part
  */
 export declare function groupPartsInOrder(parts: UIMessagePart[]): PartGroup[];
+/**
+ * Extract sources from tool result parts.
+ * Looks for `documents` arrays in tool outputs and maps them to Source[].
+ */
+export declare function extractSourcesFromParts(parts: UIMessagePart[]): Source[];
 //# sourceMappingURL=message-parts.d.ts.map

package/esm/src/react/components/ai/chat/utils/message-parts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-parts.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/utils/message-parts.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,aAAa,EACd,MAAM,qCAAqC,CAAC;AAE7C,4CAA4C;AAC5C,wBAAgB,cAAc,CAAC,OAAO,EAAE,SAAS,GAAG,MAAM,CAQzD;AAED,qCAAqC;AACrC,wBAAgB,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,IAAI,UAAU,GAAG,iBAAiB,CAGtF;AAED,0CAA0C;AAC1C,wBAAgB,eAAe,CAC7B,IAAI,EAAE,aAAa,GAClB,IAAI,IAAI;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;CAAE,CAE3E;AAED;;GAEG;AACH,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,GAAG,iBAAiB,CAAA;CAAE,GACtD;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAAE,CAAC;AAE9D;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,CAwCrE"}
+{"version":3,"file":"message-parts.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/utils/message-parts.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,aAAa,EACd,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAEvD,4CAA4C;AAC5C,wBAAgB,cAAc,CAAC,OAAO,EAAE,SAAS,GAAG,MAAM,CAQzD;AAED,qCAAqC;AACrC,wBAAgB,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,IAAI,UAAU,GAAG,iBAAiB,CAGtF;AAQD,4GAA4G;AAC5G,wBAAgB,eAAe,CAAC,IAAI,EAAE,UAAU,GAAG,iBAAiB,GAAG,OAAO,CAE7E;AAED,0CAA0C;AAC1C,wBAAgB,eAAe,CAC7B,IAAI,EAAE,aAAa,GAClB,IAAI,IAAI;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;CAAE,CAE3E;AAED;;GAEG;AACH,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,GAAG,iBAAiB,CAAA;CAAE,GACtD;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAAE,GACzD;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC;AAE7D;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,CAkDrE;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,MAAM,EAAE,CAiCxE"}

package/esm/src/react/components/ai/chat/utils/message-parts.js

@@ -17,6 +17,15 @@ export function isToolPart(part) {
         return true;
     return part.type.startsWith("tool-") && part.type !== "tool-result";
 }
+const SKILL_TOOL_NAMES = new Set([
+    "load-skill",
+    "load-skill-reference",
+    "execute-skill-script",
+]);
+/** Check if a tool part is a skill-related tool (load-skill, load-skill-reference, execute-skill-script) */
+export function isSkillToolPart(tool) {
+    return SKILL_TOOL_NAMES.has(tool.toolName);
+}
 /** Check if a part is a reasoning part */
 export function isReasoningPart(part) {
     return part.type === "reasoning";
@@ -54,9 +63,55 @@ export function groupPartsInOrder(parts) {
                 text: part.text,
                 isStreaming: part.state === "streaming",
             });
+            continue;
+        }
+        if (part.type === "step-start" || part.type === "step-end") {
+            groups.push({
+                type: "step",
+                stepIndex: part.stepIndex,
+                isComplete: part.type === "step-end",
+            });
+            continue;
         }
         // Skip other non-renderable parts
     }
     flushText();
     return groups;
 }
+/**
+ * Extract sources from tool result parts.
+ * Looks for `documents` arrays in tool outputs and maps them to Source[].
+ */
+export function extractSourcesFromParts(parts) {
+    const sources = [];
+    for (const part of parts) {
+        if (part.type !== "tool-result")
+            continue;
+        const result = part.result;
+        if (!result || typeof result !== "object")
+            continue;
+        const docs = result.documents;
+        if (!Array.isArray(docs))
+            continue;
+        for (const doc of docs) {
+            if (!doc || typeof doc !== "object")
+                continue;
+            const d = doc;
+            sources.push({
+                title: typeof d.title === "string"
+                    ? d.title
+                    : typeof d.name === "string"
+                        ? d.name
+                        : "Source",
+                url: typeof d.url === "string" ? d.url : undefined,
+                score: typeof d.score === "number" ? d.score : undefined,
+                snippet: typeof d.snippet === "string"
+                    ? d.snippet
+                    : typeof d.content === "string"
+                        ? d.content.slice(0, 200)
+                        : undefined,
+            });
+        }
+    }
+    return sources;
+}

package/esm/src/react/components/ai/chat-with-sidebar.d.ts

@@ -0,0 +1,98 @@
+import { type ChatProps } from "./chat/index.js";
+type ChatMessageSetter = (messages: ChatProps["messages"]) => void;
+type TabChangeHandler = NonNullable<ChatProps["onTabChange"]>;
+export interface ChatWithSidebarChatController {
+    messages: ChatProps["messages"];
+    input: ChatProps["input"];
+    onChange: ChatProps["onChange"];
+    onSubmit?: ChatProps["onSubmit"];
+    stop?: ChatProps["stop"];
+    reload?: ChatProps["reload"];
+    setInput?: ChatProps["setInput"];
+    isLoading?: ChatProps["isLoading"];
+    error?: ChatProps["error"];
+    model?: ChatProps["model"];
+    activeModel?: ChatProps["activeModel"];
+    onModelChange?: ChatProps["onModelChange"];
+    inferenceMode?: ChatProps["inferenceMode"];
+    browserStatus?: ChatProps["browserStatus"];
+    editMessage?: ChatProps["editMessage"];
+    getBranches?: ChatProps["getBranches"];
+    switchBranch?: ChatProps["switchBranch"];
+    setMessages: ChatMessageSetter;
+}
+interface ChatWithSidebarSidebarBaseConfig {
+    storageKey?: string;
+    visible?: boolean;
+}
+export type ChatWithSidebarSidebarConfig = (ChatWithSidebarSidebarBaseConfig & {
+    open: boolean;
+    onToggle: () => void;
+}) | (ChatWithSidebarSidebarBaseConfig & {
+    open?: undefined;
+    onToggle?: () => void;
+});
+export interface ChatWithSidebarModelConfig {
+    options?: ChatProps["models"];
+}
+export interface ChatWithSidebarAttachmentConfig {
+    accept?: ChatProps["attachAccept"];
+    items?: ChatProps["attachments"];
+    uploads?: ChatProps["uploads"];
+    onAttach?: ChatProps["onAttach"];
+    onDrop?: ChatProps["onDrop"];
+    onRemoveItem?: ChatProps["onRemoveAttachment"];
+    onRemoveUpload?: ChatProps["onRemoveUpload"];
+}
+export interface ChatWithSidebarQuickActionsConfig {
+    suggestions?: ChatProps["suggestions"];
+    onSuggestionClick?: ChatProps["onSuggestionClick"];
+    actions?: ChatProps["quickActions"];
+    onAction?: ChatProps["onQuickAction"];
+}
+export interface ChatWithSidebarMessageConfig {
+    render?: ChatProps["renderMessage"];
+    renderTool?: ChatProps["renderTool"];
+    onFeedback?: ChatProps["onFeedback"];
+    onSourceClick?: ChatProps["onSourceClick"];
+}
+export interface ChatWithSidebarFeatureConfig {
+    steps?: ChatProps["showSteps"];
+    tabs?: ChatProps["showTabs"];
+    sources?: ChatProps["showSources"];
+    export?: ChatProps["showExport"];
+    scrollButton?: ChatProps["showScrollButton"];
+    messageActions?: ChatProps["showMessageActions"];
+}
+export type ChatWithSidebarTabsConfig = {
+    active: ChatProps["activeTab"];
+    onChange: TabChangeHandler;
+} | {
+    active?: undefined;
+    onChange?: TabChangeHandler;
+};
+export interface ChatWithSidebarVoiceConfig {
+    enabled?: ChatProps["enableVoice"];
+    onVoice?: ChatProps["onVoice"];
+}
+export interface ChatWithSidebarGroupedProps {
+    chat: ChatWithSidebarChatController;
+    sidebar?: ChatWithSidebarSidebarConfig;
+    models?: ChatWithSidebarModelConfig;
+    attachments?: ChatWithSidebarAttachmentConfig;
+    quickActions?: ChatWithSidebarQuickActionsConfig;
+    message?: ChatWithSidebarMessageConfig;
+    features?: ChatWithSidebarFeatureConfig;
+    tabs?: ChatWithSidebarTabsConfig;
+    voice?: ChatWithSidebarVoiceConfig;
+    className?: string;
+    maxHeight?: ChatProps["maxHeight"];
+    theme?: ChatProps["theme"];
+    placeholder?: ChatProps["placeholder"];
+    emptyState?: ChatProps["emptyState"];
+    children?: ChatProps["children"];
+}
+export type ChatWithSidebarProps = ChatWithSidebarGroupedProps;
+export declare const ChatWithSidebar: any;
+export {};
+//# sourceMappingURL=chat-with-sidebar.d.ts.map

package/esm/src/react/components/ai/chat-with-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-with-sidebar.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ai/chat-with-sidebar.tsx"],"names":[],"mappings":"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"}