veryfront 0.1.47 → 0.1.49

package/esm/src/react/components/ai/chat/components/tool-ui.js

@@ -32,7 +32,7 @@ const TOOL_STATUS_CONFIG = {
 };
 export function ToolStatusBadge({ state }) {
     const config = TOOL_STATUS_CONFIG[state];
-    return (React.createElement("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground border border-border" },
+    return (React.createElement("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)] px-2.5 py-0.5 text-xs font-medium text-[var(--foreground)] border border-[var(--border)]" },
         config?.icon ?? React.createElement(CircleIcon, { className: "size-3.5" }),
         config?.label ?? state));
 }
@@ -47,10 +47,10 @@ function formatJsonWithHighlight(obj) {
     // SECURITY: Escape HTML first to prevent XSS attacks
     const escaped = escapeHtml(jsonStr);
     const highlighted = escaped
-        .replace(/&quot;([^&]*)&quot;:/g, '<span class="text-green-600 dark:text-green-400">&quot;$1&quot;</span>:')
-        .replace(/: &quot;([^&]*)&quot;/g, ': <span class="text-amber-600 dark:text-amber-400">&quot;$1&quot;</span>')
-        .replace(/: (\d+)/g, ': <span class="text-blue-600 dark:text-blue-400">$1</span>')
-        .replace(/: (true|false)/g, ': <span class="text-purple-600 dark:text-purple-400">$1</span>');
+        .replace(/&quot;([^&]*)&quot;:/g, '<span class="text-green-600">&quot;$1&quot;</span>:')
+        .replace(/: &quot;([^&]*)&quot;/g, ': <span class="text-amber-600">&quot;$1&quot;</span>')
+        .replace(/: (\d+)/g, ': <span class="text-blue-600">$1</span>')
+        .replace(/: (true|false)/g, ': <span class="text-purple-600">$1</span>');
     return (React.createElement("pre", { className: "text-sm font-mono whitespace-pre-wrap", dangerouslySetInnerHTML: { __html: highlighted } }));
 }
 function renderOutputAsTable(output) {
@@ -65,10 +65,10 @@ function renderOutputAsTable(output) {
     return (React.createElement("div", { className: "overflow-x-auto" },
         React.createElement("table", { className: "min-w-full text-sm" },
             React.createElement("thead", null,
-                React.createElement("tr", { className: "border-b border-neutral-200 dark:border-neutral-700" }, keys.map((key) => (React.createElement("th", { key: key, className: "px-4 py-2 text-left font-semibold text-neutral-900 dark:text-neutral-100" }, key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())))))),
+                React.createElement("tr", { className: "border-b border-[var(--border)]" }, keys.map((key) => (React.createElement("th", { key: key, className: "px-4 py-2 text-left font-semibold text-[var(--foreground)]" }, key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())))))),
             React.createElement("tbody", null, output.map((row, i) => {
                 const record = row;
-                return (React.createElement("tr", { key: i, className: "border-b border-neutral-100 dark:border-neutral-800" }, keys.map((key) => (React.createElement("td", { key: key, className: "px-4 py-2 text-neutral-700 dark:text-neutral-300" }, String(record?.[key] ?? ""))))));
+                return (React.createElement("tr", { key: i, className: "border-b border-[var(--border)]" }, keys.map((key) => (React.createElement("td", { key: key, className: "px-4 py-2 text-[var(--card-foreground)]" }, String(record?.[key] ?? ""))))));
             })))));
 }
 /**
@@ -78,21 +78,23 @@ function renderOutputAsTable(output) {
 export function ToolCallCard({ tool, }) {
     const [isExpanded, setIsExpanded] = React.useState(true);
     const tableOutput = tool.output === undefined ? null : renderOutputAsTable(tool.output);
-    return (React.createElement("div", { className: "not-prose w-full rounded-md border border-border bg-card" },
-        React.createElement("button", { type: "button", onClick: () => setIsExpanded((v) => !v), className: "group flex w-full items-center justify-between gap-4 p-3 hover:bg-muted/50 transition-colors" },
+    return (React.createElement("div", { className: "not-prose w-full rounded-xl border border-[var(--border)] bg-[var(--card)]" },
+        React.createElement("button", { type: "button", onClick: () => setIsExpanded((v) => !v), className: "group flex w-full items-center justify-between gap-4 p-3 hover:bg-[var(--accent)] transition-all rounded-t-xl" },
             React.createElement("div", { className: "flex items-center gap-2" },
-                React.createElement(WrenchIcon, { className: "size-4 text-muted-foreground" }),
-                React.createElement("span", { className: "font-medium text-sm text-foreground" }, tool.toolName),
+                React.createElement(WrenchIcon, { className: "size-4 text-[var(--muted-foreground)]" }),
+                React.createElement("span", { className: "font-medium text-sm text-[var(--foreground)]" }, tool.toolName),
                 React.createElement(ToolStatusBadge, { state: tool.state })),
-            React.createElement(ChevronDownIcon, { className: cn("size-4 text-muted-foreground transition-transform", isExpanded && "rotate-180") })),
-        !isExpanded ? null : (React.createElement("div", { className: "border-t border-border" },
+            React.createElement(ChevronDownIcon, { className: cn("size-4 text-[var(--muted-foreground)] transition-transform", isExpanded && "rotate-180") })),
+        !isExpanded ? null : (React.createElement("div", { className: "border-t border-[var(--border)]" },
             tool.input === undefined ? null : (React.createElement("div", { className: "space-y-2 overflow-hidden p-4" },
-                React.createElement("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide" }, "Parameters"),
-                React.createElement("div", { className: "rounded-md bg-muted/50 p-3" }, formatJsonWithHighlight(tool.input)))),
-            tool.output === undefined ? null : (React.createElement("div", { className: "space-y-2 p-4 border-t border-border" },
-                React.createElement("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide" }, "Result"),
-                React.createElement("div", { className: "overflow-x-auto rounded-md bg-muted/50 text-foreground" }, tableOutput ?? React.createElement("div", { className: "p-3" }, formatJsonWithHighlight(tool.output))))),
-            !tool.errorText ? null : (React.createElement("div", { className: "space-y-2 p-4 border-t border-border" },
-                React.createElement("h4", { className: "font-medium text-destructive text-xs uppercase tracking-wide" }, "Error"),
-                React.createElement("div", { className: "rounded-md bg-destructive/10 text-destructive p-3 text-sm" }, tool.errorText)))))));
+                React.createElement("h4", { className: "font-medium text-[var(--muted-foreground)] text-xs uppercase tracking-wide" }, "Parameters"),
+                React.createElement("div", { className: "rounded-lg bg-[var(--accent)] p-3" }, formatJsonWithHighlight(tool.input)))),
+            tool.output === undefined
+                ? null
+                : (React.createElement("div", { className: "space-y-2 p-4 border-t border-[var(--border)]" },
+                    React.createElement("h4", { className: "font-medium text-[var(--muted-foreground)] text-xs uppercase tracking-wide" }, "Result"),
+                    React.createElement("div", { className: "overflow-x-auto rounded-lg bg-[var(--accent)] text-[var(--foreground)]" }, tableOutput ?? React.createElement("div", { className: "p-3" }, formatJsonWithHighlight(tool.output))))),
+            !tool.errorText ? null : (React.createElement("div", { className: "space-y-2 p-4 border-t border-[var(--border)]" },
+                React.createElement("h4", { className: "font-medium text-[var(--destructive)] text-xs uppercase tracking-wide" }, "Error"),
+                React.createElement("div", { className: "rounded-lg bg-[var(--destructive)]/10 text-[var(--destructive)] p-3 text-sm" }, tool.errorText)))))));
 }

package/esm/src/react/components/ai/chat/components/upgrade-cta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"upgrade-cta.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/components/upgrade-cta.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAIzE,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,wBAAgB,UAAU,CAAC,EAAE,aAAa,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA8CxF"}
+{"version":3,"file":"upgrade-cta.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/components/upgrade-cta.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAIzE,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,wBAAgB,UAAU,CAAC,EAAE,aAAa,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA6CxF"}

package/esm/src/react/components/ai/chat/components/upgrade-cta.js

@@ -20,14 +20,14 @@ export function UpgradeCTA({ inferenceMode }) {
             // localStorage may be unavailable
         }
     };
-    return (React.createElement("div", { className: "w-full max-w-2xl mx-auto mt-4 px-4 py-3 bg-blue-50 dark:bg-blue-900/20 rounded-xl text-sm text-blue-700 dark:text-blue-300 flex items-start gap-3" },
+    return (React.createElement("div", { className: "w-full max-w-2xl mx-auto mt-4 px-4 py-3 bg-[var(--accent)] rounded-xl text-sm text-[var(--foreground)] flex items-start gap-3" },
         React.createElement("span", { className: "flex-1" },
             "Using a lightweight local model. Add an API key to your",
             " ",
-            React.createElement("code", { className: "px-1 py-0.5 bg-blue-100 dark:bg-blue-900/40 rounded text-xs" }, ".env"),
+            React.createElement("code", { className: "px-1 py-0.5 bg-[var(--border)] rounded text-xs" }, ".env"),
             " ",
             "for GPT-4o or Claude."),
-        React.createElement("button", { type: "button", onClick: handleDismiss, className: "text-blue-400 hover:text-blue-600 dark:hover:text-blue-200 transition-colors flex-shrink-0", "aria-label": "Dismiss" },
+        React.createElement("button", { type: "button", onClick: handleDismiss, className: "text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-all flex-shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2", "aria-label": "Dismiss" },
             React.createElement("svg", { className: "size-4", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2" },
                 React.createElement("path", { d: "M4 4l8 8M12 4l-8 8" })))));
 }

package/esm/src/react/components/ai/chat/components/uploads-panel.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface UploadedFile {
+    id: string;
+    name: string;
+    size?: number;
+    type?: string;
+}
+export interface UploadsPanelProps {
+    uploads?: UploadedFile[];
+    onRemoveUpload?: (id: string) => void;
+    onAttach?: (files: FileList) => void;
+    attachAccept?: string;
+    className?: string;
+}
+export declare function UploadsPanel({ uploads, onRemoveUpload, onAttach, attachAccept, className, }: UploadsPanelProps): React.ReactElement;
+//# sourceMappingURL=uploads-panel.d.ts.map

package/esm/src/react/components/ai/chat/components/uploads-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uploads-panel.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/components/uploads-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,YAAY,CAAC,EAC3B,OAAY,EACZ,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,SAAS,GACV,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAiGxC"}

package/esm/src/react/components/ai/chat/components/uploads-panel.js

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { FileTextIcon, TrashIcon } from "../../icons/index.js";
+function formatFileSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+export function UploadsPanel({ uploads = [], onRemoveUpload, onAttach, attachAccept, className, }) {
+    const fileInputRef = React.useRef(null);
+    return (React.createElement("div", { className: cn("flex flex-col h-full", className) },
+        React.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-4" }, uploads.length === 0
+            ? (React.createElement("div", { className: "flex flex-col items-center justify-center h-full text-center" },
+                React.createElement("h1", { className: "text-2xl font-medium text-[var(--foreground)] tracking-tight" }, "No files uploaded"),
+                React.createElement("p", { className: "mt-2 max-w-sm text-sm text-[var(--muted-foreground)] leading-relaxed" }, "Upload files to start asking questions"),
+                onAttach && (React.createElement("button", { type: "button", onClick: () => fileInputRef.current?.click(), className: "mt-4 px-4 py-2 text-sm font-medium rounded-full bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2" }, "Upload Files"))))
+            : (React.createElement("div", { className: "max-w-2xl mx-auto space-y-1.5" },
+                uploads.map((doc) => (React.createElement("div", { key: doc.id, className: "flex items-center gap-3 rounded-lg px-3 py-2.5 group hover:bg-[var(--accent)] transition-colors" },
+                    React.createElement("div", { className: "shrink-0 size-8 rounded-lg bg-[var(--accent)] flex items-center justify-center text-[var(--muted-foreground)]" },
+                        React.createElement(FileTextIcon, { className: "size-4" })),
+                    React.createElement("div", { className: "flex-1 min-w-0" },
+                        React.createElement("p", { className: "text-sm text-[var(--card-foreground)] truncate" }, doc.name),
+                        doc.size != null && (React.createElement("p", { className: "text-xs text-[var(--muted-foreground)]" }, formatFileSize(doc.size)))),
+                    onRemoveUpload && (React.createElement("button", { type: "button", onClick: () => onRemoveUpload(doc.id), className: "shrink-0 p-1.5 rounded-md text-[var(--muted-foreground)] hover:text-[var(--destructive)] hover:bg-[var(--destructive)]/10 transition-colors opacity-0 group-hover:opacity-100", "aria-label": `Remove ${doc.name}` },
+                        React.createElement(TrashIcon, { className: "size-4" })))))),
+                onAttach && (React.createElement("button", { type: "button", onClick: () => fileInputRef.current?.click(), className: "w-full flex items-center justify-center gap-2 rounded-lg px-3 py-2.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--accent)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2" },
+                    React.createElement("span", { className: "text-xs" }, "+"),
+                    "Upload more files"))))),
+        onAttach && (React.createElement("input", { ref: fileInputRef, type: "file", accept: attachAccept, multiple: true, "aria-label": "Upload file", onChange: (e) => {
+                if (e.target.files?.length)
+                    onAttach(e.target.files);
+                e.target.value = "";
+            }, style: {
+                position: "absolute",
+                width: 1,
+                height: 1,
+                padding: 0,
+                margin: -1,
+                overflow: "hidden",
+                clip: "rect(0,0,0,0)",
+                whiteSpace: "nowrap",
+                border: 0,
+            } }))));
+}

package/esm/src/react/components/ai/chat/composition/api.d.ts

@@ -1,9 +1,14 @@
 /**
- * Chat Composition API
+ * Chat Composition API — All composable building blocks for chat UIs.
+ *
  * @module ai/react/components/chat/composition/api
  */
-export declare const ChatHeader: any;
-export declare const ChatMessages: any;
-export declare const ChatInput: any;
-export declare const ChatFooter: any;
+export { ChatRoot, type ChatRootProps } from "./chat-root.js";
+export { ChatMessageList, type ChatMessageListProps } from "./chat-message-list.js";
+export { ChatComposer, type ChatComposerProps } from "./chat-composer.js";
+export { ChatEmpty, type ChatEmptyProps } from "./chat-empty.js";
+export { ChatIf, type ChatIfProps } from "./chat-if.js";
+export { ModelAvatar, type ModelAvatarProps } from "./model-avatar.js";
+export { ErrorBanner, type ErrorBannerProps } from "./error-banner.js";
+export { Message, type MessageRootProps } from "./message.js";
 //# sourceMappingURL=api.d.ts.map

package/esm/src/react/components/ai/chat/composition/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/composition/api.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,eAAO,MAAM,UAAU,KAgBrB,CAAC;AAGH,eAAO,MAAM,YAAY,KAAc,CAAC;AAGxC,eAAO,MAAM,SAAS,KAepB,CAAC;AAGH,eAAO,MAAM,UAAU,KAgBrB,CAAC"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/composition/api.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGvE,OAAO,EAAE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

package/esm/src/react/components/ai/chat/composition/api.js

@@ -1,23 +1,15 @@
 /**
- * Chat Composition API
+ * Chat Composition API — All composable building blocks for chat UIs.
+ *
  * @module ai/react/components/chat/composition/api
  */
-import * as React from "react";
-import { InputBox, MessageList } from "../../../../primitives/index.js";
-import { cn, defaultChatTheme } from "../../theme.js";
-export const ChatHeader = React.forwardRef(function ChatHeader({ className, children, ...props }, ref) {
-    return (React.createElement("div", { ref: ref, className: cn("border-b border-gray-200 dark:border-gray-800 p-4 bg-gray-50 dark:bg-gray-900", className), ...props }, children));
-});
-ChatHeader.displayName = "ChatHeader";
-export const ChatMessages = MessageList;
-ChatMessages.displayName = "ChatMessages";
-export const ChatInput = React.forwardRef(function ChatInput({ className, ...props }, ref) {
-    return (React.createElement("div", { className: "border-t border-gray-200 dark:border-gray-800 p-4" },
-        React.createElement("div", { className: "flex gap-2" },
-            React.createElement(InputBox, { ref: ref, className: cn(defaultChatTheme.input, className), ...props }))));
-});
-ChatInput.displayName = "ChatInput";
-export const ChatFooter = React.forwardRef(function ChatFooter({ className, children, ...props }, ref) {
-    return (React.createElement("div", { ref: ref, className: cn("border-t border-gray-200 dark:border-gray-800 p-4 text-sm text-gray-500", className), ...props }, children));
-});
-ChatFooter.displayName = "ChatFooter";
+// Root / Layout
+export { ChatRoot } from "./chat-root.js";
+export { ChatMessageList } from "./chat-message-list.js";
+export { ChatComposer } from "./chat-composer.js";
+export { ChatEmpty } from "./chat-empty.js";
+export { ChatIf } from "./chat-if.js";
+export { ModelAvatar } from "./model-avatar.js";
+export { ErrorBanner } from "./error-banner.js";
+// Message compound
+export { Message } from "./message.js";

package/esm/src/react/components/ai/chat/composition/chat-composer.d.ts

@@ -0,0 +1,35 @@
+/**
+ * ChatComposer — Input area with attachments, model selector, voice, and submit.
+ *
+ * @module ai/react/components/chat/composition/chat-composer
+ */
+import * as React from "react";
+import { type ModelOption } from "../../model-selector.js";
+import type { ChatTheme } from "../../theme.js";
+import type { AttachmentInfo } from "../components/attachment-pill.js";
+import type { UIMessage } from "../../../../../agent/react/index.js";
+export interface ChatComposerProps {
+    input: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onSubmit?: (e: React.FormEvent) => void;
+    isLoading?: boolean;
+    placeholder?: string;
+    theme?: ChatTheme;
+    stop?: () => void;
+    onVoice?: () => void;
+    isListening?: boolean;
+    transcript?: string;
+    models?: ModelOption[];
+    model?: string;
+    onModelChange?: (model: string) => void;
+    onAttach?: (files: FileList) => void;
+    attachAccept?: string;
+    attachments?: AttachmentInfo[];
+    onRemoveAttachment?: (id: string) => void;
+    showExport?: boolean;
+    messages?: UIMessage[];
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const ChatComposer: any;
+//# sourceMappingURL=chat-composer.d.ts.map

package/esm/src/react/components/ai/chat/composition/chat-composer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-composer.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/composition/chat-composer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAErE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IACjF,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAGlB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAGxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAG1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,KAyJxB,CAAC"}

package/esm/src/react/components/ai/chat/composition/chat-composer.js

@@ -0,0 +1,53 @@
+/**
+ * ChatComposer — Input area with attachments, model selector, voice, and submit.
+ *
+ * @module ai/react/components/chat/composition/chat-composer
+ */
+import * as React from "react";
+import { InputBox, SubmitButton } from "../../../../primitives/index.js";
+import { cn } from "../../theme.js";
+import { PaperclipIcon } from "../../icons/index.js";
+import { ModelSelector } from "../../model-selector.js";
+import { AttachmentPill } from "../components/attachment-pill.js";
+import { downloadMarkdown } from "../utils/export.js";
+export const ChatComposer = React.forwardRef(function ChatComposer({ input, onChange, onSubmit, isLoading, placeholder = "Type a message...", theme, stop, onVoice, isListening = false, transcript, models, model, onModelChange, onAttach, attachAccept, attachments, onRemoveAttachment, showExport = false, messages, className, children, }, ref) {
+    const fileInputRef = React.useRef(null);
+    return (React.createElement("div", { ref: ref, className: cn("flex-shrink-0 pb-6 pt-2", className) },
+        React.createElement("div", { className: "max-w-2xl mx-auto px-4" },
+            children && (React.createElement("div", { className: "flex flex-wrap items-center gap-1.5 pb-3" }, children)),
+            React.createElement("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    onSubmit?.(e);
+                } },
+                React.createElement("div", { className: "relative overflow-hidden rounded-[20px] shadow-md bg-[var(--card)] px-3 py-3 md:px-4 md:py-4 transition-all" },
+                    attachments && attachments.length > 0 && (React.createElement("div", { className: "flex flex-wrap gap-1.5 pb-3" }, attachments.map((file) => (React.createElement(AttachmentPill, { key: file.id, attachment: file, onRemove: onRemoveAttachment }))))),
+                    React.createElement(InputBox, { value: isListening ? transcript || input : input, onChange: onChange, placeholder: isListening ? "Listening..." : placeholder, disabled: isLoading || isListening, multiline: true, className: cn(theme?.input) }),
+                    React.createElement("div", { className: "flex items-center justify-between gap-2 mt-2 min-h-[38px]" },
+                        React.createElement("div", { className: "flex items-center gap-2" }, onAttach && (React.createElement(React.Fragment, null,
+                            React.createElement("input", { ref: fileInputRef, type: "file", accept: attachAccept, multiple: true, "aria-label": "Upload file", onChange: (e) => {
+                                    if (e.target.files?.length)
+                                        onAttach(e.target.files);
+                                    e.target.value = "";
+                                }, style: {
+                                    position: "absolute",
+                                    width: 1,
+                                    height: 1,
+                                    padding: 0,
+                                    margin: -1,
+                                    overflow: "hidden",
+                                    clip: "rect(0,0,0,0)",
+                                    whiteSpace: "nowrap",
+                                    border: 0,
+                                } }),
+                            React.createElement("button", { type: "button", onClick: () => fileInputRef.current?.click(), className: "size-9 flex items-center justify-center rounded-full text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/5 transition-colors shrink-0", "aria-label": "Attach file" },
+                                React.createElement(PaperclipIcon, { className: "size-5" }))))),
+                        React.createElement("div", { className: "flex items-center gap-2" },
+                            models && models.length > 0 && onModelChange && (React.createElement(ModelSelector, { models: models, value: model, onChange: onModelChange, disabled: isLoading })),
+                            showExport && messages && messages.length > 0 && (React.createElement("button", { type: "button", onClick: () => downloadMarkdown(messages), className: "size-9 flex items-center justify-center rounded-full text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/5 transition-colors shrink-0", "aria-label": "Export conversation", title: "Export as Markdown" },
+                                React.createElement("svg", { className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+                                    React.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                                    React.createElement("polyline", { points: "7 10 12 15 17 10" }),
+                                    React.createElement("line", { x1: "12", y1: "15", x2: "12", y2: "3" })))),
+                            React.createElement(SubmitButton, { isLoading: isLoading || isListening, hasInput: !!input.trim(), onStop: isListening ? undefined : stop, onVoice: onVoice, disabled: !input.trim(), className: theme?.button }))))))));
+});
+ChatComposer.displayName = "ChatComposer";

package/esm/src/react/components/ai/chat/composition/chat-empty.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ChatEmpty — Empty state for the chat conversation.
+ *
+ * @module ai/react/components/chat/composition/chat-empty
+ */
+import * as React from "react";
+import { type QuickAction } from "../components/quick-actions.js";
+export interface ChatEmptyProps {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    suggestions?: string[];
+    onSuggestionClick?: (suggestion: string) => void;
+    quickActions?: QuickAction[];
+    onQuickAction?: (action: QuickAction) => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const ChatEmpty: any;
+//# sourceMappingURL=chat-empty.d.ts.map

package/esm/src/react/components/ai/chat/composition/chat-empty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-empty.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/composition/chat-empty.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,WAAW,EAAgB,MAAM,gCAAgC,CAAC;AAEhF,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,KAoDrB,CAAC"}

package/esm/src/react/components/ai/chat/composition/chat-empty.js

@@ -0,0 +1,23 @@
+/**
+ * ChatEmpty — Empty state for the chat conversation.
+ *
+ * @module ai/react/components/chat/composition/chat-empty
+ */
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { ConversationEmptyState, Suggestion, Suggestions } from "../components/empty-state.js";
+import { QuickActions } from "../components/quick-actions.js";
+export const ChatEmpty = React.forwardRef(function ChatEmpty({ icon, title = "What can I help with?", description, suggestions, onSuggestionClick, quickActions, onQuickAction, className, children, }, ref) {
+    const showSuggestions = (suggestions?.length ?? 0) > 0;
+    const showQuickActions = (quickActions?.length ?? 0) > 0;
+    return (React.createElement("div", { ref: ref, className: cn("flex flex-col items-center justify-center h-full px-4", className) },
+        React.createElement("div", { className: "flex-1" }),
+        React.createElement(ConversationEmptyState, { icon: icon, title: title, description: description }),
+        showSuggestions && (React.createElement("div", { className: "w-full max-w-2xl mt-6" },
+            React.createElement(Suggestions, { layout: "grid" }, suggestions?.map((suggestion) => (React.createElement(Suggestion, { key: suggestion, suggestion: suggestion, onClick: onSuggestionClick })))))),
+        showQuickActions && (React.createElement("div", { className: "mt-4" },
+            React.createElement(QuickActions, { actions: quickActions, onActionClick: onQuickAction }))),
+        children,
+        React.createElement("div", { className: "flex-1" })));
+});
+ChatEmpty.displayName = "ChatEmpty";

package/esm/src/react/components/ai/chat/composition/chat-if.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ChatIf — Conditional rendering helper for chat components.
+ *
+ * @module ai/react/components/chat/composition/chat-if
+ */
+import type * as React from "react";
+import type { ChatContextValue } from "../contexts/chat-context.js";
+export interface ChatIfProps {
+    children: React.ReactNode;
+    condition: boolean | ((ctx: ChatContextValue) => boolean);
+    fallback?: React.ReactNode;
+}
+export declare function ChatIf({ children, condition, fallback }: ChatIfProps): React.ReactNode;
+//# sourceMappingURL=chat-if.d.ts.map

package/esm/src/react/components/ai/chat/composition/chat-if.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-if.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/composition/chat-if.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,gBAAgB,KAAK,OAAO,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,MAAM,CACpB,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAe,EAAE,EAAE,WAAW,GACpD,KAAK,CAAC,SAAS,CAMjB"}

package/esm/src/react/components/ai/chat/composition/chat-if.js

@@ -0,0 +1,11 @@
+/**
+ * ChatIf — Conditional rendering helper for chat components.
+ *
+ * @module ai/react/components/chat/composition/chat-if
+ */
+import { useChatContextOptional } from "../contexts/chat-context.js";
+export function ChatIf({ children, condition, fallback = null }) {
+    const ctx = useChatContextOptional();
+    const shouldRender = typeof condition === "function" ? (ctx ? condition(ctx) : false) : condition;
+    return shouldRender ? children : fallback;
+}

package/esm/src/react/components/ai/chat/composition/chat-message-list.d.ts

@@ -0,0 +1,36 @@
+/**
+ * ChatMessageList — Message rendering loop with component injection.
+ *
+ * Renders user and assistant messages with support for branching, editing,
+ * feedback, sources, reasoning, tool calls, and step indicators.
+ *
+ * @module ai/react/components/chat/composition/chat-message-list
+ */
+import * as React from "react";
+import type { BranchInfo, BrowserInferenceStatus, DynamicToolUIPart, InferenceMode, ToolUIPart, UIMessage } from "../../../../../agent/react/index.js";
+import type { ChatTheme } from "../../theme.js";
+import type { Source } from "../components/sources.js";
+import type { FeedbackValue } from "../components/message-feedback.js";
+export interface ChatMessageListProps {
+    messages: UIMessage[];
+    isLoading?: boolean;
+    theme?: ChatTheme;
+    renderMessage?: (message: UIMessage) => React.ReactNode;
+    renderTool?: (tool: ToolUIPart | DynamicToolUIPart) => React.ReactNode;
+    model?: string;
+    showMessageActions?: boolean;
+    showSources?: boolean;
+    showSteps?: boolean;
+    showScrollButton?: boolean;
+    onSourceClick?: (source: Source, index: number) => void;
+    inferenceMode?: InferenceMode;
+    browserStatus?: BrowserInferenceStatus | null;
+    editMessage?: (messageId: string, newText: string) => Promise<void>;
+    getBranches?: (messageId: string) => BranchInfo;
+    switchBranch?: (messageId: string, branchIndex: number) => void;
+    onFeedback?: (messageId: string, feedback: FeedbackValue) => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const ChatMessageList: any;
+//# sourceMappingURL=chat-message-list.d.ts.map

package/esm/src/react/components/ai/chat/composition/chat-message-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message-list.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/composition/chat-message-list.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,SAAS,EACV,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAgBhD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAIvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAIvE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAGlB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,iBAAiB,KAAK,KAAK,CAAC,SAAS,CAAC;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAG9C,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,UAAU,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAGhE,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAElE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,KAwH3B,CAAC"}

package/esm/src/react/components/ai/chat/composition/chat-message-list.js

@@ -0,0 +1,113 @@
+/**
+ * ChatMessageList — Message rendering loop with component injection.
+ *
+ * Renders user and assistant messages with support for branching, editing,
+ * feedback, sources, reasoning, tool calls, and step indicators.
+ *
+ * @module ai/react/components/chat/composition/chat-message-list
+ */
+import * as React from "react";
+import { MessageItem, MessageList } from "../../../../primitives/index.js";
+import { cn } from "../../theme.js";
+import { Markdown } from "../../markdown.js";
+import { extractSourcesFromParts, getTextContent, groupPartsInOrder, isSkillToolPart, } from "../utils/message-parts.js";
+import { ConversationScrollButton } from "../components/empty-state.js";
+import { MessageActions } from "../components/message-actions.js";
+import { ReasoningCard } from "../components/reasoning.js";
+import { SkillBadge } from "../components/skill-badge.js";
+import { ToolCallCard } from "../components/tool-ui.js";
+import { Sources } from "../components/sources.js";
+import { MessageEditForm } from "../components/message-edit-form.js";
+import { BranchPicker } from "../components/branch-picker.js";
+import { MessageFeedback } from "../components/message-feedback.js";
+import { StepIndicator } from "../components/step-indicator.js";
+import { ModelAvatar } from "./model-avatar.js";
+export const ChatMessageList = React.forwardRef(function ChatMessageList({ messages, isLoading, theme, renderMessage, renderTool, model, showMessageActions = true, showSources = false, showSteps = false, showScrollButton = false, onSourceClick, inferenceMode: _inferenceMode, browserStatus, editMessage, getBranches, switchBranch, onFeedback, className, children, }, ref) {
+    const messagesEndRef = React.useRef(null);
+    const [editingMessageId, setEditingMessageId] = React.useState(null);
+    const [feedbackMap, setFeedbackMap] = React.useState({});
+    const handleFeedback = React.useCallback((msgId, value) => {
+        setFeedbackMap((prev) => ({ ...prev, [msgId]: value }));
+        onFeedback?.(msgId, value);
+    }, [onFeedback]);
+    const messageCount = messages.length;
+    React.useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, [messageCount]);
+    return (React.createElement(MessageList, { ref: ref, className: cn("flex-1 min-h-0 overflow-y-auto relative", className) },
+        React.createElement("div", { className: "max-w-2xl mx-auto px-4 py-6 space-y-6" },
+            messages.map((msg) => {
+                if (renderMessage) {
+                    return React.createElement(React.Fragment, { key: msg.id }, renderMessage(msg));
+                }
+                if (msg.role === "user") {
+                    return (React.createElement(UserMessage, { key: msg.id, message: msg, theme: theme, isEditing: editingMessageId === msg.id, onStartEdit: () => setEditingMessageId(msg.id), onCancelEdit: () => setEditingMessageId(null), editMessage: editMessage, getBranches: getBranches, switchBranch: switchBranch }));
+                }
+                return (React.createElement(AssistantMessage, { key: msg.id, message: msg, theme: theme, renderTool: renderTool, showMessageActions: showMessageActions, showSources: showSources, showSteps: showSteps, onSourceClick: onSourceClick, onFeedback: onFeedback ? handleFeedback : undefined, feedbackMap: feedbackMap }));
+            }),
+            isLoading && messages[messages.length - 1]?.role !== "assistant" && (React.createElement("div", { className: "flex items-start gap-3" },
+                React.createElement(ModelAvatar, { model: model }),
+                browserStatus === "downloading-model" || browserStatus === "loading-runtime"
+                    ? (React.createElement("div", { className: "flex items-center gap-2 text-xs text-[var(--muted-foreground)] py-2.5" },
+                        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 py-3" },
+                        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 })),
+        children,
+        showScrollButton && (React.createElement(ConversationScrollButton, { onClick: () => messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }))));
+});
+ChatMessageList.displayName = "ChatMessageList";
+function UserMessage({ message: msg, theme, isEditing, onStartEdit, onCancelEdit, editMessage, getBranches, switchBranch, }) {
+    const content = getTextContent(msg);
+    const branches = getBranches?.(msg.id);
+    const hasBranches = branches && branches.total > 1;
+    return (React.createElement(MessageItem, { role: msg.role, className: cn("flex flex-col items-end", "group/msg") },
+        isEditing
+            ? (React.createElement("div", { className: "w-full max-w-md" },
+                React.createElement(MessageEditForm, { initialContent: content, onSave: (text) => {
+                        onCancelEdit();
+                        editMessage?.(msg.id, text);
+                    }, onCancel: onCancelEdit })))
+            : (React.createElement("div", { className: theme?.message?.user },
+                React.createElement("p", { className: "whitespace-pre-wrap text-[15px] leading-relaxed" }, content))),
+        !isEditing && (React.createElement("div", { className: "flex items-center gap-2 mt-1" },
+            hasBranches && (React.createElement(BranchPicker, { current: branches.current, total: branches.total, onPrev: () => switchBranch?.(msg.id, branches.current - 2), onNext: () => switchBranch?.(msg.id, branches.current) })),
+            editMessage && React.createElement(MessageActions, { content: content, onEdit: onStartEdit })))));
+}
+function AssistantMessage({ message: msg, theme, renderTool, showMessageActions = true, showSources = false, showSteps = false, onSourceClick, onFeedback, feedbackMap, }) {
+    const partGroups = groupPartsInOrder(msg.parts);
+    const stepCount = partGroups.filter((g) => g.type === "step").length;
+    const textContent = getTextContent(msg);
+    const messageSources = showSources ? extractSourcesFromParts(msg.parts) : [];
+    return (React.createElement(MessageItem, { role: msg.role, className: cn("flex items-start gap-3", "justify-start", "group/msg") },
+        React.createElement(ModelAvatar, { model: msg.metadata?.model || undefined }),
+        React.createElement("div", { className: cn(theme?.message?.assistant, "flex-1 min-w-0") },
+            partGroups.map((group, index) => {
+                if (group.type === "text") {
+                    return (React.createElement(Markdown, { key: `text-${index}`, className: "text-[15px] leading-7" }, group.content));
+                }
+                if (group.type === "reasoning") {
+                    return (React.createElement(ReasoningCard, { key: `reasoning-${index}`, text: group.text, isStreaming: group.isStreaming }));
+                }
+                if (group.type === "step") {
+                    return showSteps && stepCount > 1
+                        ? (React.createElement(StepIndicator, { key: `step-${group.stepIndex}`, stepIndex: group.stepIndex, isComplete: group.isComplete }))
+                        : null;
+                }
+                const isSkill = isSkillToolPart(group.tool);
+                return (React.createElement("div", { key: group.tool.toolCallId, className: isSkill ? "my-2" : "my-3" }, renderTool
+                    ? renderTool(group.tool)
+                    : isSkill
+                        ? React.createElement(SkillBadge, { tool: group.tool })
+                        : React.createElement(ToolCallCard, { tool: group.tool })));
+            }),
+            (showMessageActions || onFeedback) && textContent && (React.createElement("div", { className: "flex items-center gap-1 mt-1" },
+                showMessageActions && React.createElement(MessageActions, { content: textContent }),
+                onFeedback && (React.createElement(MessageFeedback, { messageId: msg.id, feedback: feedbackMap[msg.id], onFeedback: onFeedback })))),
+            messageSources.length > 0 && (React.createElement(Sources, { sources: messageSources, onSourceClick: onSourceClick })))));
+}