@cognite/aura 0.3.4 → 1.46104.0

package/dist/components/ui/core/message/message.js

@@ -1,318 +1,455 @@
-import { cn as e, getInitials as t } from "../../../../lib/utils.js";
-import { Button as n } from "../button/button.js";
-import { Tooltip as r, TooltipContent as i, TooltipTrigger as a } from "../tooltip/tooltip.js";
-import { ButtonGroup as o, ButtonGroupText as s } from "../button-group/button-group.js";
-import { Avatar as c, AvatarFallback as l, AvatarIcon as u, AvatarImage as d } from "../avatar/avatar.js";
-import { MESSAGE_RESPONSE_DEFAULT_STREAMDOWN_CONTROLS as f } from "./message-response-default-streamdown-controls.js";
-import { createContext as p, useCallback as m, useContext as h, useEffect as g, useMemo as _, useState as v } from "react";
-import { IconChevronLeft as y, IconChevronRight as b, IconPaperclip as x, IconX as S } from "@tabler/icons-react";
-import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
-import { mermaid as E } from "@streamdown/mermaid";
-import { Streamdown as D } from "streamdown";
-//#region libs/aura/src/components/ui/core/message/message.tsx
-var O = ({ className: t, isResponse: n = !1, ...r }) => /* @__PURE__ */ w("div", {
-	"data-slot": "message",
-	className: e("group flex w-full items-start justify-start gap-3 mb-0 py-3", n ? "is-assistant items-start" : "is-user flex-row-reverse", t),
-	...r
-}), k = ({ children: t, className: n, ...r }) => /* @__PURE__ */ w("div", {
-	"data-slot": "message-content",
-	className: e("is-user:dark flex flex-col gap-4 rounded-md text-base leading-tight tracking-tightest", "max-w-4/5", "group-[.is-user]:overflow-hidden group-[.is-user]:bg-accent-background group-[.is-user]:p-2 group-[.is-user]:text-foreground", "group-[.is-assistant]:text-foreground group-[.is-assistant]:pt-1", n),
-	...r,
-	children: t
-}), A = ({ avatarUrl: n, name: r, className: i, children: a, variant: o, sizes: s, ...u }) => {
-	let f = r ? t(r) : "ME";
-	return /* @__PURE__ */ w(c, {
-		"data-slot": "message-avatar",
-		className: e("size-7 group-[.is-user]:mt-1", i),
-		variant: o,
-		sizes: s,
-		...u,
-		children: a || /* @__PURE__ */ T(C, { children: [n && /* @__PURE__ */ w(d, {
-			alt: r || "",
-			className: "mt-0 mb-0",
-			src: n
-		}), /* @__PURE__ */ w(l, { children: f })] })
-	});
-}, j = (e) => /* @__PURE__ */ w(u, {
-	"data-slot": "message-avatar-icon",
-	...e
-}), M = ({ className: t, children: n, ...r }) => /* @__PURE__ */ w("div", {
-	"data-slot": "message-actions",
-	className: e("flex items-center gap-2 pt-2", t),
-	...r,
-	children: n
-}), N = ({ tooltip: t, children: o, label: s, className: c, variant: l = "ghost", size: u = "sm", ...d }) => {
-	let f = /* @__PURE__ */ T(n, {
-		"data-slot": "message-action",
-		className: e("relative icon-sm text-muted-foreground hover:text-foreground", c),
-		size: u,
-		type: "button",
-		variant: l,
-		...d,
-		children: [o, /* @__PURE__ */ w("span", {
-			className: "sr-only",
-			children: s || t
-		})]
-	});
-	return t ? /* @__PURE__ */ T(r, { children: [/* @__PURE__ */ w(a, { render: f }), /* @__PURE__ */ w(i, { children: /* @__PURE__ */ w("p", { children: t }) })] }) : f;
-}, P = p(null), F = () => {
-	let e = h(P);
-	if (!e) throw Error("MessageBranch components must be used within MessageBranch");
-	return e;
-}, I = ({ defaultBranch: t = 0, onBranchChange: n, className: r, ...i }) => {
-	let [a, o] = v(t), [s, c] = v([]), l = m(() => {
-		o((e) => {
-			let t = e > 0 ? e - 1 : s.length - 1;
-			return n?.(t), t;
-		});
-	}, [s.length, n]), u = m(() => {
-		o((e) => {
-			let t = e < s.length - 1 ? e + 1 : 0;
-			return n?.(t), t;
-		});
-	}, [s.length, n]), d = _(() => ({
-		currentBranch: a,
-		totalBranches: s.length,
-		goToPrevious: l,
-		goToNext: u,
-		branches: s,
-		setBranches: c
-	}), [
-		a,
-		s,
-		l,
-		u,
-		c
-	]);
-	return /* @__PURE__ */ w(P.Provider, {
-		value: d,
-		children: /* @__PURE__ */ w("div", {
-			"data-slot": "message-branch",
-			className: e("grid w-full gap-2 [&>div]:pb-0", r),
-			...i
-		})
-	});
-}, L = ({ children: t, ...n }) => {
-	let { currentBranch: r, setBranches: i, branches: a } = F(), o = _(() => Array.isArray(t) ? t : [t], [t]);
-	return g(() => {
-		a.length !== o.length && i(o);
-	}, [
-		o,
-		a,
-		i
-	]), o.map((t, i) => /* @__PURE__ */ w("div", {
-		"data-slot": "message-branch-content",
-		className: e("grid gap-2 overflow-hidden [&>div]:pb-0", i === r ? "block" : "hidden"),
-		...n,
-		children: t
-	}, t.key));
-}, R = ({ ...e }) => {
-	let { totalBranches: t } = F();
-	return t <= 1 ? null : /* @__PURE__ */ w(o, {
-		"data-slot": "message-branch-selector",
-		className: "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
-		orientation: "horizontal",
-		...e
-	});
-}, z = ({ children: e, ...t }) => {
-	let { goToPrevious: r, totalBranches: i } = F();
-	return /* @__PURE__ */ w(n, {
-		"data-slot": "message-branch-previous",
-		"aria-label": "Previous branch",
-		disabled: i <= 1,
-		onClick: r,
-		size: "icon-sm",
-		type: "button",
-		variant: "ghost",
-		...t,
-		children: e ?? /* @__PURE__ */ w(y, { size: 14 })
-	});
-}, B = ({ children: e, ...t }) => {
-	let { goToNext: r, totalBranches: i } = F();
-	return /* @__PURE__ */ w(n, {
-		"data-slot": "message-branch-next",
-		"aria-label": "Next branch",
-		disabled: i <= 1,
-		onClick: r,
-		size: "icon-sm",
-		type: "button",
-		variant: "ghost",
-		...t,
-		children: e ?? /* @__PURE__ */ w(b, { size: 14 })
-	});
-}, V = ({ className: t, ...n }) => {
-	let { currentBranch: r, totalBranches: i } = F();
-	return /* @__PURE__ */ T(s, {
-		"data-slot": "message-branch-page",
-		className: e("border-none bg-transparent text-muted-foreground shadow-none px-2", t),
-		...n,
-		children: [
-			r + 1,
-			"/",
-			i
-		]
-	});
-}, H = {
-	h1: ({ children: e }) => /* @__PURE__ */ w("h1", {
-		className: "mt-0 mb-2 scroll-m-20 text-xl font-medium tracking-tightest",
-		children: e
-	}),
-	h2: ({ children: e }) => /* @__PURE__ */ w("h2", {
-		className: "mt-4 mb-1 scroll-m-20 text-lg font-medium tracking-tightest",
-		children: e
-	}),
-	h3: ({ children: e }) => /* @__PURE__ */ w("h3", {
-		className: "mt-4 mb-1 scroll-m-20 text-base font-medium tracking-tighter",
-		children: e
-	}),
-	h4: ({ children: e }) => /* @__PURE__ */ w("h4", {
-		className: "mt-2 mb-0 scroll-m-20 text-sm font-medium tracking-normal",
-		children: e
-	}),
-	h5: ({ children: e }) => /* @__PURE__ */ w("h5", {
-		className: "mt-0 mb-0 scroll-m-20 text-xs font-medium tracking-tighter",
-		children: e
-	}),
-	h6: ({ children: e }) => /* @__PURE__ */ w("h6", {
-		className: "mt-0 mb-0 scroll-m-20 text-2xs font-medium tracking-tighter",
-		children: e
-	}),
-	p: ({ children: e }) => /* @__PURE__ */ w("p", {
-		className: "mt-2 mb-3 text-base font-normal leading-5 tracking-tightest",
-		children: e
-	}),
-	strong: ({ children: e }) => /* @__PURE__ */ w("strong", {
-		className: "font-medium",
-		children: e
-	}),
-	em: ({ children: e }) => /* @__PURE__ */ w("em", {
-		className: "italic",
-		children: e
-	}),
-	b: ({ children: e }) => /* @__PURE__ */ w("b", {
-		className: "font-medium",
-		children: e
-	}),
-	i: ({ children: e }) => /* @__PURE__ */ w("i", {
-		className: "italic",
-		children: e
-	}),
-	ul: ({ children: e }) => /* @__PURE__ */ w("ul", {
-		className: "ml-8.25 mb-3 pt-2 pl-0 pb-0 list-disc text-base font-normal tracking-tightest",
-		children: e
-	}),
-	ol: ({ children: e }) => /* @__PURE__ */ w("ol", {
-		className: "ml-8.25 mb-3 pt-2 pl-0 pb-0 list-decimal text-base font-normal tracking-tightest",
-		children: e
-	}),
-	li: ({ children: e }) => /* @__PURE__ */ w("li", {
-		className: "py-0",
-		children: e
-	}),
-	blockquote: ({ children: e }) => /* @__PURE__ */ w("blockquote", {
-		className: "my-3 pr-2 pl-2 border-l border-l-border text-sm text-muted-foreground font-normal tracking-tight not-italic",
-		children: e
-	}),
-	hr: () => /* @__PURE__ */ w("hr", { className: "my-4 border-border" }),
-	a: ({ children: e, href: t, ...n }) => /* @__PURE__ */ w("a", {
-		className: "text-link-foreground no-underline hover:underline underline-offset-4",
-		href: t,
-		...n,
-		children: e
-	}),
-	table: ({ children: e }) => /* @__PURE__ */ w("div", {
-		className: "my-6 overflow-x-auto",
-		tabIndex: 0,
-		role: "group",
-		"aria-label": "Atlas AI Chat Table",
-		children: /* @__PURE__ */ w("table", {
-			className: "w-full",
-			children: e
-		})
-	}),
-	thead: ({ children: e }) => /* @__PURE__ */ w("thead", { children: e }),
-	tbody: ({ children: e }) => /* @__PURE__ */ w("tbody", { children: e }),
-	tr: ({ children: e }) => /* @__PURE__ */ w("tr", {
-		className: "m-0 border-t p-0 even:bg-muted-background",
-		children: e
-	}),
-	th: ({ children: e }) => /* @__PURE__ */ w("th", {
-		className: "border px-4 py-2 text-left font-bold",
-		children: e
-	}),
-	td: ({ children: e }) => /* @__PURE__ */ w("td", {
-		className: "border px-4 py-2 text-left",
-		children: e
-	})
-}, U = ({ className: t, components: n, plugins: r, controls: i, ...a }) => /* @__PURE__ */ w(D, {
-	"data-slot": "message-response",
-	className: e("size-full", "[&_blockquote_p]:text-sm", "[&_blockquote_p]:tracking-tight", "[&_code]:relative", "[&_code]:rounded", "[&_code]:bg-muted-background", "[&_code]:px-[0.3rem]", "[&_code]:py-[0.2rem]", "[&_code]:font-mono", "[&_code]:text-sm", "[&_code]:font-semibold", "[&_div[data-streamdown=\"code-block\"]]:my-4", "[&_div[data-streamdown=\"code-block\"]]:w-full", "[&_div[data-streamdown=\"code-block\"]]:overflow-hidden", "[&_div[data-streamdown=\"code-block\"]]:rounded-xl", "[&_div[data-streamdown=\"code-block\"]]:border", "[&_div[data-streamdown=\"code-block\"]]:border-border", "[&_div[data-streamdown=\"code-block-header\"]]:flex", "[&_div[data-streamdown=\"code-block-header\"]]:items-center", "[&_div[data-streamdown=\"code-block-header\"]]:justify-between", "[&_div[data-streamdown=\"code-block-header\"]]:bg-muted-background/80", "[&_div[data-streamdown=\"code-block-header\"]]:px-4", "[&_div[data-streamdown=\"code-block-header\"]]:py-3", "[&_div[data-streamdown=\"code-block-header\"]]:text-xs", "[&_div[data-streamdown=\"code-block-header\"]]:text-muted-foreground", "[&_div[data-streamdown=\"code-block\"]_pre]:m-0", "[&_div[data-streamdown=\"code-block\"]_pre]:overflow-x-auto", "[&_div[data-streamdown=\"code-block\"]_pre]:border-t", "[&_div[data-streamdown=\"code-block\"]_pre]:border-border", "[&_div[data-streamdown=\"code-block\"]_pre]:bg-background!", "[&_div[data-streamdown=\"code-block\"]_pre]:p-4", "[&_div[data-streamdown=\"code-block\"]_pre]:text-sm", "[&_div[data-streamdown=\"code-block\"]_pre]:text-foreground!", "[&_div[data-streamdown=\"code-block\"]_pre_code]:static", "[&_div[data-streamdown=\"code-block\"]_pre_code]:rounded-none", "[&_div[data-streamdown=\"code-block\"]_pre_code]:bg-transparent", "[&_div[data-streamdown=\"code-block\"]_pre_code]:p-0", "[&_div[data-streamdown=\"code-block\"]_pre_code]:font-mono", "[&_div[data-streamdown=\"code-block\"]_pre_code]:text-sm", "[&_div[data-streamdown=\"code-block\"]_pre_code]:font-normal", "[&_button[data-streamdown=\"code-block-copy-button\"]]:cursor-pointer", "[&_button[data-streamdown=\"code-block-copy-button\"]]:p-1", "[&_button[data-streamdown=\"code-block-copy-button\"]]:text-muted-foreground", "[&_button[data-streamdown=\"code-block-copy-button\"]]:transition-all", "[&_button[data-streamdown=\"code-block-copy-button\"]]:hover:text-foreground", "[&_button[data-streamdown=\"code-block-download-button\"]]:cursor-pointer", "[&_button[data-streamdown=\"code-block-download-button\"]]:p-1", "[&_button[data-streamdown=\"code-block-download-button\"]]:text-muted-foreground", "[&_button[data-streamdown=\"code-block-download-button\"]]:transition-all", "[&_button[data-streamdown=\"code-block-download-button\"]]:hover:text-foreground", "[&_pre:not([data-streamdown])]:my-3", "[&_pre:not([data-streamdown])]:mx-0", "[&_pre:not([data-streamdown])]:overflow-x-auto", "[&_pre:not([data-streamdown])]:rounded-md", "[&_pre:not([data-streamdown])]:border", "[&_pre:not([data-streamdown])]:bg-card-background", "[&_pre:not([data-streamdown])]:p-4", "[&_pre:not([data-streamdown])]:text-foreground", "[&_pre:not([data-streamdown])]:text-sm", "[&_pre:not([data-streamdown])_code]:static", "[&_pre:not([data-streamdown])_code]:rounded-none", "[&_pre:not([data-streamdown])_code]:bg-transparent", "[&_pre:not([data-streamdown])_code]:px-0", "[&_pre:not([data-streamdown])_code]:py-0", "[&_pre:not([data-streamdown])_code]:font-mono", "[&_pre:not([data-streamdown])_code]:text-sm", "[&_pre:not([data-streamdown])_code]:font-normal", "[&_div[data-streamdown=\"mermaid-block\"]]:bg-card-background", "[&_div[data-streamdown=\"mermaid-block\"]]:text-foreground", "[&_div[data-streamdown=\"mermaid-block\"]]:flex", "[&_div[data-streamdown=\"mermaid-block\"]]:flex-col", "[&_div[data-streamdown=\"mermaid-block\"]]:rounded-lg", "[&_div[data-streamdown=\"mermaid-block\"]]:hover:bg-accent-background", "[&_div[data-streamdown=\"mermaid-block\"]]:border-0", "[&_div[data-streamdown=\"mermaid-block\"]]:relative", "[&_div[data-streamdown=\"mermaid-block\"]>div:has([data-streamdown=\"mermaid-block-actions\"])]:!absolute", "[&_div[data-streamdown=\"mermaid-block\"]>div:has([data-streamdown=\"mermaid-block-actions\"])]:!top-2", "[&_div[data-streamdown=\"mermaid-block\"]>div:has([data-streamdown=\"mermaid-block-actions\"])]:!right-2", "[&_div[data-streamdown=\"mermaid-block\"]>div:has([data-streamdown=\"mermaid-block-actions\"])]:!z-10", "[&_div[data-streamdown=\"mermaid-block\"]>div:has([data-streamdown=\"mermaid-block-actions\"])]:!mt-0", "[&_div[data-streamdown=\"mermaid-block\"]>div:has([data-streamdown=\"mermaid-block-actions\"])]:!pointer-events-auto", "[&_div[data-streamdown=\"mermaid-block\"]_.relative.w-full]:!min-h-28", "[&>*:first-child]:mt-0", "[&>*:last-child]:mb-0", t),
-	components: {
-		...H,
-		...n
-	},
-	controls: i ?? f,
-	plugins: {
-		...r,
-		mermaid: E
-	},
-	...a
-});
-function W({ data: t, className: o, onRemove: s, ...c }) {
-	let l = t.filename || "", u = (t.mediaType?.startsWith("image/") && t.url ? "image" : "file") == "image", d = l || (u ? "Image" : "Attachment");
-	return /* @__PURE__ */ w("div", {
-		"data-slot": "message-attachment",
-		className: e("group relative size-24 overflow-hidden rounded-lg", o),
-		...c,
-		children: u ? /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w("img", {
-			alt: l || "attachment",
-			className: "size-full object-cover",
-			height: 100,
-			src: t.url,
-			width: 100
-		}), s && /* @__PURE__ */ T(n, {
-			"aria-label": "Remove attachment",
-			className: "absolute top-2 right-2 size-6 rounded-full bg-background/80 p-0 opacity-0 backdrop-blur-sm transition-opacity hover:bg-background group-hover:opacity-100 [&>svg]:size-3",
-			onClick: (e) => {
-				e.stopPropagation(), s();
-			},
-			type: "button",
-			variant: "ghost",
-			children: [/* @__PURE__ */ w(S, {}), /* @__PURE__ */ w("span", {
-				className: "sr-only",
-				children: "Remove"
-			})]
-		})] }) : /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ T(r, { children: [/* @__PURE__ */ w(a, { render: /* @__PURE__ */ w("div", {
-			className: "flex size-full shrink-0 items-center justify-center rounded-lg bg-muted-background text-muted-foreground",
-			children: /* @__PURE__ */ w(x, { className: "size-4" })
-		}) }), /* @__PURE__ */ w(i, { children: /* @__PURE__ */ w("p", { children: d }) })] }), s && /* @__PURE__ */ T(n, {
-			"aria-label": "Remove attachment",
-			className: "size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity hover:bg-accent-background group-hover:opacity-100 [&>svg]:size-3",
-			onClick: (e) => {
-				e.stopPropagation(), s();
-			},
-			type: "button",
-			variant: "ghost",
-			children: [/* @__PURE__ */ w(S, {}), /* @__PURE__ */ w("span", {
-				className: "sr-only",
-				children: "Remove"
-			})]
-		})] })
-	});
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { mermaid as mermaidPlugin } from "@streamdown/mermaid";
+import { IconChevronLeft, IconChevronRight, IconPaperclip, IconX } from "@tabler/icons-react";
+import { Streamdown } from "streamdown";
+import { cn, getInitials } from "../../../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarIcon, AvatarImage } from "../avatar/avatar.js";
+import { Button } from "../button/button.js";
+import { ButtonGroup, ButtonGroupText } from "../button-group/button-group.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { MESSAGE_RESPONSE_DEFAULT_STREAMDOWN_CONTROLS } from "./message-response-default-streamdown-controls.js";
+const Message = ({ className, isResponse = false, ...props })=>/*#__PURE__*/ _jsx("div", {
+        "data-slot": "message",
+        className: cn('group flex w-full items-start justify-start gap-3 mb-0 py-3', isResponse ? 'is-assistant items-start' : 'is-user flex-row-reverse', className),
+        ...props
+    });
+const MessageContent = ({ children, className, ...props })=>/*#__PURE__*/ _jsx("div", {
+        "data-slot": "message-content",
+        className: cn('is-user:dark flex flex-col gap-4 rounded-md text-base leading-tight tracking-tightest', 'max-w-4/5', 'group-[.is-user]:overflow-hidden group-[.is-user]:bg-medium-background group-[.is-user]:p-2 group-[.is-user]:text-base-foreground', 'group-[.is-assistant]:text-base-foreground group-[.is-assistant]:pt-1', className),
+        ...props,
+        children: children
+    });
+const MessageAvatar = ({ avatarUrl, name, className, children, variant, sizes, ...props })=>{
+    const fallbackText = name ? getInitials(name) : 'ME';
+    return /*#__PURE__*/ _jsx(Avatar, {
+        "data-slot": "message-avatar",
+        className: cn('size-7 group-[.is-user]:mt-1', className),
+        variant: variant,
+        sizes: sizes,
+        ...props,
+        children: children || /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                avatarUrl && /*#__PURE__*/ _jsx(AvatarImage, {
+                    alt: name || '',
+                    className: "mt-0 mb-0",
+                    src: avatarUrl
+                }),
+                /*#__PURE__*/ _jsx(AvatarFallback, {
+                    children: fallbackText
+                })
+            ]
+        })
+    });
+};
+const MessageAvatarIcon = (props)=>/*#__PURE__*/ _jsx(AvatarIcon, {
+        "data-slot": "message-avatar-icon",
+        ...props
+    });
+const MessageActions = ({ className, children, ...props })=>/*#__PURE__*/ _jsx("div", {
+        "data-slot": "message-actions",
+        className: cn('flex items-center gap-2 pt-2', className),
+        ...props,
+        children: children
+    });
+const MessageAction = ({ tooltip, children, label, className, variant = 'ghost', size = 'sm', ...props })=>{
+    const button = /*#__PURE__*/ _jsxs(Button, {
+        "data-slot": "message-action",
+        className: cn('relative icon-sm text-muted-foreground hover:text-base-foreground', className),
+        size: size,
+        type: "button",
+        variant: variant,
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ _jsx("span", {
+                className: "sr-only",
+                children: label || tooltip
+            })
+        ]
+    });
+    if (tooltip) {
+        return /*#__PURE__*/ _jsxs(Tooltip, {
+            children: [
+                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                    render: button
+                }),
+                /*#__PURE__*/ _jsx(TooltipContent, {
+                    children: /*#__PURE__*/ _jsx("p", {
+                        children: tooltip
+                    })
+                })
+            ]
+        });
+    }
+    return button;
+};
+const MessageBranchContext = /*#__PURE__*/ createContext(null);
+const useMessageBranch = ()=>{
+    const context = useContext(MessageBranchContext);
+    if (!context) {
+        throw new Error('MessageBranch components must be used within MessageBranch');
+    }
+    return context;
+};
+const MessageBranch = ({ defaultBranch = 0, onBranchChange, className, ...props })=>{
+    const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+    const [branches, setBranches] = useState([]);
+    const goToPrevious = useCallback(()=>{
+        setCurrentBranch((prev)=>{
+            const newBranch = prev > 0 ? prev - 1 : branches.length - 1;
+            onBranchChange?.(newBranch);
+            return newBranch;
+        });
+    }, [
+        branches.length,
+        onBranchChange
+    ]);
+    const goToNext = useCallback(()=>{
+        setCurrentBranch((prev)=>{
+            const newBranch = prev < branches.length - 1 ? prev + 1 : 0;
+            onBranchChange?.(newBranch);
+            return newBranch;
+        });
+    }, [
+        branches.length,
+        onBranchChange
+    ]);
+    const contextValue = useMemo(()=>({
+            currentBranch,
+            totalBranches: branches.length,
+            goToPrevious,
+            goToNext,
+            branches,
+            setBranches
+        }), [
+        currentBranch,
+        branches,
+        goToPrevious,
+        goToNext,
+        setBranches
+    ]);
+    return /*#__PURE__*/ _jsx(MessageBranchContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsx("div", {
+            "data-slot": "message-branch",
+            className: cn('grid w-full gap-2 [&>div]:pb-0', className),
+            ...props
+        })
+    });
+};
+const MessageBranchContent = ({ children, ...props })=>{
+    const { currentBranch, setBranches, branches } = useMessageBranch();
+    const childrenArray = useMemo(()=>Array.isArray(children) ? children : [
+            children
+        ], [
+        children
+    ]);
+    useEffect(()=>{
+        if (branches.length !== childrenArray.length) {
+            setBranches(childrenArray);
+        }
+    }, [
+        childrenArray,
+        branches,
+        setBranches
+    ]);
+    return childrenArray.map((branch, index)=>/*#__PURE__*/ _jsx("div", {
+            "data-slot": "message-branch-content",
+            className: cn('grid gap-2 overflow-hidden [&>div]:pb-0', index === currentBranch ? 'block' : 'hidden'),
+            ...props,
+            children: branch
+        }, branch.key));
+};
+const MessageBranchSelector = ({ ...props })=>{
+    const { totalBranches } = useMessageBranch();
+    if (totalBranches <= 1) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(ButtonGroup, {
+        "data-slot": "message-branch-selector",
+        className: "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
+        orientation: "horizontal",
+        ...props
+    });
+};
+const MessageBranchPrevious = ({ children, ...props })=>{
+    const { goToPrevious, totalBranches } = useMessageBranch();
+    return /*#__PURE__*/ _jsx(Button, {
+        "data-slot": "message-branch-previous",
+        "aria-label": "Previous branch",
+        disabled: totalBranches <= 1,
+        onClick: goToPrevious,
+        size: "icon-sm",
+        type: "button",
+        variant: "ghost",
+        ...props,
+        children: children ?? /*#__PURE__*/ _jsx(IconChevronLeft, {
+            size: 14
+        })
+    });
+};
+const MessageBranchNext = ({ children, ...props })=>{
+    const { goToNext, totalBranches } = useMessageBranch();
+    return /*#__PURE__*/ _jsx(Button, {
+        "data-slot": "message-branch-next",
+        "aria-label": "Next branch",
+        disabled: totalBranches <= 1,
+        onClick: goToNext,
+        size: "icon-sm",
+        type: "button",
+        variant: "ghost",
+        ...props,
+        children: children ?? /*#__PURE__*/ _jsx(IconChevronRight, {
+            size: 14
+        })
+    });
+};
+const MessageBranchPage = ({ className, ...props })=>{
+    const { currentBranch, totalBranches } = useMessageBranch();
+    return /*#__PURE__*/ _jsxs(ButtonGroupText, {
+        "data-slot": "message-branch-page",
+        className: cn('border-none bg-transparent text-muted-foreground shadow-none px-2', className),
+        ...props,
+        children: [
+            currentBranch + 1,
+            "/",
+            totalBranches
+        ]
+    });
+};
+const messageResponseComponents = {
+    h1: ({ children })=>/*#__PURE__*/ _jsx("h1", {
+            className: "mt-0 mb-2 scroll-m-20 text-xl font-medium tracking-tightest",
+            children: children
+        }),
+    h2: ({ children })=>/*#__PURE__*/ _jsx("h2", {
+            className: "mt-4 mb-1 scroll-m-20 text-lg font-medium tracking-tightest",
+            children: children
+        }),
+    h3: ({ children })=>/*#__PURE__*/ _jsx("h3", {
+            className: "mt-4 mb-1 scroll-m-20 text-base font-medium tracking-tighter",
+            children: children
+        }),
+    h4: ({ children })=>/*#__PURE__*/ _jsx("h4", {
+            className: "mt-2 mb-0 scroll-m-20 text-sm font-medium tracking-normal",
+            children: children
+        }),
+    h5: ({ children })=>/*#__PURE__*/ _jsx("h5", {
+            className: "mt-0 mb-0 scroll-m-20 text-xs font-medium tracking-tighter",
+            children: children
+        }),
+    h6: ({ children })=>/*#__PURE__*/ _jsx("h6", {
+            className: "mt-0 mb-0 scroll-m-20 text-2xs font-medium tracking-tighter",
+            children: children
+        }),
+    p: ({ children })=>/*#__PURE__*/ _jsx("p", {
+            className: "mt-2 mb-3 text-base font-normal leading-5 tracking-tightest",
+            children: children
+        }),
+    strong: ({ children })=>/*#__PURE__*/ _jsx("strong", {
+            className: "font-medium",
+            children: children
+        }),
+    em: ({ children })=>/*#__PURE__*/ _jsx("em", {
+            className: "italic",
+            children: children
+        }),
+    b: ({ children })=>/*#__PURE__*/ _jsx("b", {
+            className: "font-medium",
+            children: children
+        }),
+    i: ({ children })=>/*#__PURE__*/ _jsx("i", {
+            className: "italic",
+            children: children
+        }),
+    ul: ({ children })=>/*#__PURE__*/ _jsx("ul", {
+            className: "ml-8.25 mb-3 pt-2 pl-0 pb-0 list-disc text-base font-normal tracking-tightest",
+            children: children
+        }),
+    ol: ({ children })=>/*#__PURE__*/ _jsx("ol", {
+            className: "ml-8.25 mb-3 pt-2 pl-0 pb-0 list-decimal text-base font-normal tracking-tightest",
+            children: children
+        }),
+    li: ({ children })=>/*#__PURE__*/ _jsx("li", {
+            className: "py-0",
+            children: children
+        }),
+    blockquote: ({ children })=>/*#__PURE__*/ _jsx("blockquote", {
+            className: "my-3 pr-2 pl-2 border-l border-l-default text-sm text-muted-foreground font-normal tracking-tight not-italic",
+            children: children
+        }),
+    hr: ()=>/*#__PURE__*/ _jsx("hr", {
+            className: "my-4 border-default"
+        }),
+    a: ({ children, href, ...props })=>/*#__PURE__*/ _jsx("a", {
+            className: "text-link-foreground no-underline hover:underline underline-offset-4",
+            href: href,
+            ...props,
+            children: children
+        }),
+    table: ({ children })=>/*#__PURE__*/ _jsx("div", {
+            className: "my-6 overflow-x-auto",
+            tabIndex: 0,
+            role: "group",
+            "aria-label": "Atlas AI Chat Table",
+            children: /*#__PURE__*/ _jsx("table", {
+                className: "w-full",
+                children: children
+            })
+        }),
+    thead: ({ children })=>/*#__PURE__*/ _jsx("thead", {
+            children: children
+        }),
+    tbody: ({ children })=>/*#__PURE__*/ _jsx("tbody", {
+            children: children
+        }),
+    tr: ({ children })=>/*#__PURE__*/ _jsx("tr", {
+            className: "m-0 border-t p-0 even:bg-muted-background",
+            children: children
+        }),
+    th: ({ children })=>/*#__PURE__*/ _jsx("th", {
+            className: "border px-4 py-2 text-left font-bold",
+            children: children
+        }),
+    td: ({ children })=>/*#__PURE__*/ _jsx("td", {
+            className: "border px-4 py-2 text-left",
+            children: children
+        })
+};
+const MessageResponseMarkdown = ({ className, components, plugins, controls, ...props })=>/*#__PURE__*/ _jsx(Streamdown, {
+        className: cn('size-full', // Blockquote paragraph overrides
+        '[&_blockquote_p]:text-sm', '[&_blockquote_p]:tracking-tight', // Inline code
+        '[&_code]:relative', '[&_code]:rounded', '[&_code]:bg-muted-background', '[&_code]:px-[0.3rem]', '[&_code]:py-[0.2rem]', '[&_code]:font-mono', '[&_code]:text-sm', '[&_code]:font-semibold', // Code blocks (Streamdown container)
+        '[&_div[data-streamdown="code-block"]]:my-4', '[&_div[data-streamdown="code-block"]]:w-full', '[&_div[data-streamdown="code-block"]]:overflow-hidden', '[&_div[data-streamdown="code-block"]]:rounded-xl', '[&_div[data-streamdown="code-block"]]:border', '[&_div[data-streamdown="code-block"]]:border-default', // Code block header
+        '[&_div[data-streamdown="code-block-header"]]:flex', '[&_div[data-streamdown="code-block-header"]]:items-center', '[&_div[data-streamdown="code-block-header"]]:justify-between', '[&_div[data-streamdown="code-block-header"]]:bg-muted-background/80', '[&_div[data-streamdown="code-block-header"]]:px-4', '[&_div[data-streamdown="code-block-header"]]:py-3', '[&_div[data-streamdown="code-block-header"]]:text-xs', '[&_div[data-streamdown="code-block-header"]]:text-muted-foreground', // Pre element inside code block
+        '[&_div[data-streamdown="code-block"]_pre]:m-0', '[&_div[data-streamdown="code-block"]_pre]:overflow-x-auto', '[&_div[data-streamdown="code-block"]_pre]:border-t', '[&_div[data-streamdown="code-block"]_pre]:border-default', '[&_div[data-streamdown="code-block"]_pre]:bg-card-background!', '[&_div[data-streamdown="code-block"]_pre]:p-4', '[&_div[data-streamdown="code-block"]_pre]:text-sm', '[&_div[data-streamdown="code-block"]_pre]:text-medium-foreground!', // Code element inside pre
+        '[&_div[data-streamdown="code-block"]_pre_code]:static', '[&_div[data-streamdown="code-block"]_pre_code]:rounded-none', '[&_div[data-streamdown="code-block"]_pre_code]:bg-transparent', '[&_div[data-streamdown="code-block"]_pre_code]:p-0', '[&_div[data-streamdown="code-block"]_pre_code]:font-mono', '[&_div[data-streamdown="code-block"]_pre_code]:text-sm', '[&_div[data-streamdown="code-block"]_pre_code]:font-normal', // Code block buttons
+        '[&_button[data-streamdown="code-block-copy-button"]]:cursor-pointer', '[&_button[data-streamdown="code-block-copy-button"]]:p-1', '[&_button[data-streamdown="code-block-copy-button"]]:text-muted-foreground', '[&_button[data-streamdown="code-block-copy-button"]]:transition-all', '[&_button[data-streamdown="code-block-copy-button"]]:hover:text-base-foreground', '[&_button[data-streamdown="code-block-download-button"]]:cursor-pointer', '[&_button[data-streamdown="code-block-download-button"]]:p-1', '[&_button[data-streamdown="code-block-download-button"]]:text-muted-foreground', '[&_button[data-streamdown="code-block-download-button"]]:transition-all', '[&_button[data-streamdown="code-block-download-button"]]:hover:text-base-foreground', // Regular pre blocks (not in Streamdown code blocks)
+        '[&_pre:not([data-streamdown])]:my-3', '[&_pre:not([data-streamdown])]:mx-0', '[&_pre:not([data-streamdown])]:overflow-x-auto', '[&_pre:not([data-streamdown])]:rounded-md', '[&_pre:not([data-streamdown])]:border', '[&_pre:not([data-streamdown])]:bg-card-background', '[&_pre:not([data-streamdown])]:p-4', '[&_pre:not([data-streamdown])]:text-medium-foreground', '[&_pre:not([data-streamdown])]:text-sm', '[&_pre:not([data-streamdown])_code]:static', '[&_pre:not([data-streamdown])_code]:rounded-none', '[&_pre:not([data-streamdown])_code]:bg-transparent', '[&_pre:not([data-streamdown])_code]:px-0', '[&_pre:not([data-streamdown])_code]:py-0', '[&_pre:not([data-streamdown])_code]:font-mono', '[&_pre:not([data-streamdown])_code]:text-sm', '[&_pre:not([data-streamdown])_code]:font-normal', // Mermaid diagram blocks
+        '[&_div[data-streamdown="mermaid-block"]]:bg-card-background', '[&_div[data-streamdown="mermaid-block"]]:text-base-foreground', '[&_div[data-streamdown="mermaid-block"]]:flex', '[&_div[data-streamdown="mermaid-block"]]:flex-col', '[&_div[data-streamdown="mermaid-block"]]:rounded-lg', '[&_div[data-streamdown="mermaid-block"]]:hover:bg-base-background-hover', '[&_div[data-streamdown="mermaid-block"]]:border-0', // Positioning context for the action strip (see below)
+        '[&_div[data-streamdown="mermaid-block"]]:relative', // Nested scroll + sticky + pointer-events breaks hit-testing on Mermaid Copy/Download
+        // (same class of issue as github.com/vercel/streamdown/issues/494). Force absolute strip.
+        '[&_div[data-streamdown="mermaid-block"]>div:has([data-streamdown="mermaid-block-actions"])]:!absolute', '[&_div[data-streamdown="mermaid-block"]>div:has([data-streamdown="mermaid-block-actions"])]:!top-2', '[&_div[data-streamdown="mermaid-block"]>div:has([data-streamdown="mermaid-block-actions"])]:!right-2', '[&_div[data-streamdown="mermaid-block"]>div:has([data-streamdown="mermaid-block-actions"])]:!z-10', '[&_div[data-streamdown="mermaid-block"]>div:has([data-streamdown="mermaid-block-actions"])]:!mt-0', '[&_div[data-streamdown="mermaid-block"]>div:has([data-streamdown="mermaid-block-actions"])]:!pointer-events-auto', // Ensure mermaid container is tall enough for the toolbar (pan/zoom + actions)
+        '[&_div[data-streamdown="mermaid-block"]_.relative.w-full]:!min-h-28', // KaTeX sizing (overflow rules live in styles.source.css)
+        '[&_.katex-display]:my-3', '[&_.katex]:text-[1em]', // First and last child margin resets
+        '[&>*:first-child]:mt-0', '[&>*:last-child]:mb-0', className),
+        components: {
+            ...messageResponseComponents,
+            ...components
+        },
+        controls: controls ?? MESSAGE_RESPONSE_DEFAULT_STREAMDOWN_CONTROLS,
+        plugins: {
+            ...plugins,
+            mermaid: mermaidPlugin
+        },
+        ...props
+    });
+const MessageResponse = ({ id, role, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'data-testid': dataTestId, ...props })=>/*#__PURE__*/ _jsx("div", {
+        "data-slot": "message-response",
+        id: id,
+        role: role,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "data-testid": dataTestId,
+        children: /*#__PURE__*/ _jsx(MessageResponseMarkdown, {
+            ...props
+        })
+    });
+function MessageAttachment({ data, className, onRemove, ...props }) {
+    const filename = data.filename || '';
+    const mediaType = data.mediaType?.startsWith('image/') && data.url ? 'image' : 'file';
+    const isImage = mediaType === 'image';
+    const attachmentLabel = filename || (isImage ? 'Image' : 'Attachment');
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "message-attachment",
+        className: cn('group relative size-24 overflow-hidden rounded-lg', className),
+        ...props,
+        children: isImage ? /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx("img", {
+                    alt: filename || 'attachment',
+                    className: "size-full object-cover",
+                    height: 100,
+                    src: data.url,
+                    width: 100
+                }),
+                onRemove && /*#__PURE__*/ _jsxs(Button, {
+                    "aria-label": "Remove attachment",
+                    className: "absolute top-2 right-2 size-6 rounded-full bg-card-background/80 p-0 opacity-0 backdrop-blur-sm transition-opacity hover:bg-card-background group-hover:opacity-100 [&>svg]:size-3",
+                    onClick: (e)=>{
+                        e.stopPropagation();
+                        onRemove();
+                    },
+                    type: "button",
+                    variant: "ghost",
+                    children: [
+                        /*#__PURE__*/ _jsx(IconX, {}),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "sr-only",
+                            children: "Remove"
+                        })
+                    ]
+                })
+            ]
+        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(Tooltip, {
+                    children: [
+                        /*#__PURE__*/ _jsx(TooltipTrigger, {
+                            render: /*#__PURE__*/ _jsx("div", {
+                                className: "flex size-full shrink-0 items-center justify-center rounded-lg bg-muted-background text-muted-foreground",
+                                children: /*#__PURE__*/ _jsx(IconPaperclip, {
+                                    className: "size-4"
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(TooltipContent, {
+                            children: /*#__PURE__*/ _jsx("p", {
+                                children: attachmentLabel
+                            })
+                        })
+                    ]
+                }),
+                onRemove && /*#__PURE__*/ _jsxs(Button, {
+                    "aria-label": "Remove attachment",
+                    className: "size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity hover:bg-base-background-hover group-hover:opacity-100 [&>svg]:size-3",
+                    onClick: (e)=>{
+                        e.stopPropagation();
+                        onRemove();
+                    },
+                    type: "button",
+                    variant: "ghost",
+                    children: [
+                        /*#__PURE__*/ _jsx(IconX, {}),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "sr-only",
+                            children: "Remove"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
 }
-function G({ children: t, className: n, ...r }) {
-	return t ? /* @__PURE__ */ w("div", {
-		"data-slot": "message-attachments",
-		className: e("ml-auto flex w-fit flex-wrap items-start gap-2", n),
-		...r,
-		children: t
-	}) : null;
+function MessageAttachments({ children, className, ...props }) {
+    if (!children) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "message-attachments",
+        className: cn('ml-auto flex w-fit flex-wrap items-start gap-2', className),
+        ...props,
+        children: children
+    });
 }
-var K = ({ className: t, children: n, ...r }) => /* @__PURE__ */ w("div", {
-	"data-slot": "message-toolbar",
-	className: e("mt-4 flex w-full items-center justify-between gap-4", t),
-	...r,
-	children: n
-});
-//#endregion
-export { O as Message, N as MessageAction, M as MessageActions, W as MessageAttachment, G as MessageAttachments, A as MessageAvatar, j as MessageAvatarIcon, I as MessageBranch, L as MessageBranchContent, B as MessageBranchNext, V as MessageBranchPage, z as MessageBranchPrevious, R as MessageBranchSelector, k as MessageContent, U as MessageResponse, K as MessageToolbar };
+const MessageToolbar = ({ className, children, ...props })=>/*#__PURE__*/ _jsx("div", {
+        "data-slot": "message-toolbar",
+        className: cn('mt-4 flex w-full items-center justify-between gap-4', className),
+        ...props,
+        children: children
+    });
+export { Message, MessageAction, MessageActions, MessageAttachment, MessageAttachments, MessageAvatar, MessageAvatarIcon, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };
+
+//# sourceMappingURL=message.js.map