@burtson-labs/ui 0.5.1 → 0.7.0

package/README.md

@@ -58,7 +58,7 @@ npx shadcn@latest add https://ui.burtson.ai/r/button.json
 
 ## <picture><source media="(prefers-color-scheme: dark)" srcset="https://icons.burtson.ai/svg-white/panel-grid.svg"/><img src="https://icons.burtson.ai/svg-black/panel-grid.svg" align="center" alt=""/></picture> Components
 
-Accordion · Alert · Alert Dialog · App Shell · Avatar · Badge · Breadcrumb · Button · Card · Checkbox · Collapsible · Combobox · Command · Dialog · Dropdown Menu · Empty State · Field · Icon Button · Input · Kbd · Label · Navigation Menu · Page Header · Pagination · Popover · Progress · Radio Group · Scroll Area · Select · Separator · Sheet · Skeleton · Spinner · Stat Card · Status · Steps · Switch · Table · Tabs · Textarea · Toast · Toolbar · Tooltip
+Accordion · Alert · Alert Dialog · App Shell · Avatar · Badge · Breadcrumb · Button · Card · Checkbox · Collapsible · Combobox · Command · Copy Button · Dialog · Dropdown Menu · Empty State · Field · Icon Button · Input · Kbd · Label · Navigation Menu · Page Header · Pagination · Popover · Progress · Radio Group · Reasoning · Scroll Area · Secret Input · Select · Separator · Sheet · Skeleton · Slider · Spinner · Stat Card · Status · Steps · Switch · Table · Tabs · Textarea · Toast · Toaster · Toolbar · Tooltip
 
 Live previews and code for each one are at [ui.burtson.ai](https://ui.burtson.ai/docs/components/button).
 

package/dist/components/composer.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSubmit' | 'onChange'> {
+    /** Called with the trimmed text; the composer clears itself afterwards. */
+    onSubmit: (text: string) => void;
+    /** Controlled value; leave out to let the composer keep its own. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** While a reply streams, the send button becomes Stop. */
+    streaming?: boolean;
+    onStop?: () => void;
+    disabled?: boolean;
+    placeholder?: string;
+    /** Attachment chips or a file button, shown under the text. */
+    attachments?: React.ReactNode;
+    /** Extra controls left of the send button (model picker, tools). */
+    actions?: React.ReactNode;
+    label?: string;
+}
+/**
+ * The message box: grows with its text, Enter sends, Shift+Enter adds a
+ * line, and it never sends mid-composition (IME input).
+ */
+declare function Composer({ onSubmit, value: controlled, onValueChange, streaming, onStop, disabled, placeholder, attachments, actions, label, className, ...props }: ComposerProps): React.JSX.Element;
+export interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {
+    items: string[];
+    onSelect: (item: string) => void;
+}
+/** Starter prompts as chips. */
+declare function Suggestions({ items, onSelect, className, ...props }: SuggestionsProps): React.JSX.Element;
+export { Composer, Suggestions };

package/dist/components/composer.js

@@ -0,0 +1,95 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ArrowUp from "@burtson-labs/icons/react/arrow-up";
+import Square from "@burtson-labs/icons/react/square";
+//#region src/components/composer.tsx
+/**
+* The message box: grows with its text, Enter sends, Shift+Enter adds a
+* line, and it never sends mid-composition (IME input).
+*/
+function Composer({ onSubmit, value: controlled, onValueChange, streaming = false, onStop, disabled = false, placeholder = "Ask anything…", attachments, actions, label = "Message", className, ...props }) {
+	const [own, setOwn] = React.useState("");
+	const value = controlled ?? own;
+	const setValue = (v) => {
+		if (controlled === void 0) setOwn(v);
+		onValueChange?.(v);
+	};
+	const canSend = !disabled && !streaming && value.trim().length > 0;
+	const send = () => {
+		if (!canSend) return;
+		onSubmit(value.trim());
+		setValue("");
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		"data-slot": "composer",
+		onSubmit: (e) => {
+			e.preventDefault();
+			send();
+		},
+		className: cn("grid gap-2 rounded-lg border border-input bg-surface p-2 shadow-xs transition-[border-color,box-shadow] focus-within:border-brand focus-within:ring-[3px] focus-within:ring-ring/15 dark:bg-surface-raised", disabled && "opacity-60", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("textarea", {
+				"aria-label": label,
+				rows: 1,
+				value,
+				disabled,
+				placeholder,
+				onChange: (e) => setValue(e.target.value),
+				onKeyDown: (e) => {
+					if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+						e.preventDefault();
+						send();
+					}
+				},
+				className: "field-sizing-content max-h-48 min-h-9 w-full resize-none bg-transparent px-2 py-1.5 text-sm leading-6 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+			}),
+			attachments && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-1.5 px-1",
+				children: attachments
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [actions, /* @__PURE__ */ jsx("div", {
+					className: "ml-auto",
+					children: streaming ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "icon-sm",
+						variant: "secondary",
+						"aria-label": "Stop",
+						onClick: onStop,
+						children: /* @__PURE__ */ jsx(Square, { className: "fill-current" })
+					}) : /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						size: "icon-sm",
+						"aria-label": "Send",
+						disabled: !canSend,
+						children: /* @__PURE__ */ jsx(ArrowUp, {})
+					})
+				})]
+			})
+		]
+	});
+}
+/** Starter prompts as chips. */
+function Suggestions({ items, onSelect, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "suggestions",
+		role: "group",
+		"aria-label": "Suggestions",
+		className: cn("flex flex-wrap gap-2", className),
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => onSelect(item),
+			className: "animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground outline-none transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20",
+			children: item
+		}, item))
+	});
+}
+//#endregion
+export { Composer, Suggestions };
+
+//# sourceMappingURL=composer.js.map

package/dist/components/composer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer.js","names":[],"sources":["../../src/components/composer.tsx"],"sourcesContent":["import ArrowUp from '@burtson-labs/icons/react/arrow-up';\nimport Square from '@burtson-labs/icons/react/square';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\n\nexport interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSubmit' | 'onChange'> {\n  /** Called with the trimmed text; the composer clears itself afterwards. */\n  onSubmit: (text: string) => void;\n  /** Controlled value; leave out to let the composer keep its own. */\n  value?: string;\n  onValueChange?: (value: string) => void;\n  /** While a reply streams, the send button becomes Stop. */\n  streaming?: boolean;\n  onStop?: () => void;\n  disabled?: boolean;\n  placeholder?: string;\n  /** Attachment chips or a file button, shown under the text. */\n  attachments?: React.ReactNode;\n  /** Extra controls left of the send button (model picker, tools). */\n  actions?: React.ReactNode;\n  label?: string;\n}\n\n/**\n * The message box: grows with its text, Enter sends, Shift+Enter adds a\n * line, and it never sends mid-composition (IME input).\n */\nfunction Composer({\n  onSubmit,\n  value: controlled,\n  onValueChange,\n  streaming = false,\n  onStop,\n  disabled = false,\n  placeholder = 'Ask anything…',\n  attachments,\n  actions,\n  label = 'Message',\n  className,\n  ...props\n}: ComposerProps) {\n  const [own, setOwn] = React.useState('');\n  const value = controlled ?? own;\n  const setValue = (v: string) => {\n    if (controlled === undefined) setOwn(v);\n    onValueChange?.(v);\n  };\n  const canSend = !disabled && !streaming && value.trim().length > 0;\n  const send = () => {\n    if (!canSend) return;\n    onSubmit(value.trim());\n    setValue('');\n  };\n\n  return (\n    <form\n      data-slot=\"composer\"\n      onSubmit={(e) => {\n        e.preventDefault();\n        send();\n      }}\n      className={cn(\n        'grid gap-2 rounded-lg border border-input bg-surface p-2 shadow-xs transition-[border-color,box-shadow] focus-within:border-brand focus-within:ring-[3px] focus-within:ring-ring/15 dark:bg-surface-raised',\n        disabled && 'opacity-60',\n        className,\n      )}\n      {...props}\n    >\n      <textarea\n        aria-label={label}\n        rows={1}\n        value={value}\n        disabled={disabled}\n        placeholder={placeholder}\n        onChange={(e) => setValue(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {\n            e.preventDefault();\n            send();\n          }\n        }}\n        className=\"field-sizing-content max-h-48 min-h-9 w-full resize-none bg-transparent px-2 py-1.5 text-sm leading-6 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed\"\n      />\n      {attachments && <div className=\"flex flex-wrap gap-1.5 px-1\">{attachments}</div>}\n      <div className=\"flex items-center gap-1\">\n        {actions}\n        <div className=\"ml-auto\">\n          {streaming ? (\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"secondary\"\n              aria-label=\"Stop\"\n              onClick={onStop}\n            >\n              <Square className=\"fill-current\" />\n            </Button>\n          ) : (\n            <Button type=\"submit\" size=\"icon-sm\" aria-label=\"Send\" disabled={!canSend}>\n              <ArrowUp />\n            </Button>\n          )}\n        </div>\n      </div>\n    </form>\n  );\n}\n\nexport interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {\n  items: string[];\n  onSelect: (item: string) => void;\n}\n\n/** Starter prompts as chips. */\nfunction Suggestions({ items, onSelect, className, ...props }: SuggestionsProps) {\n  return (\n    <div\n      data-slot=\"suggestions\"\n      role=\"group\"\n      aria-label=\"Suggestions\"\n      className={cn('flex flex-wrap gap-2', className)}\n      {...props}\n    >\n      {items.map((item) => (\n        <button\n          key={item}\n          type=\"button\"\n          onClick={() => onSelect(item)}\n          className=\"animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground outline-none transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n        >\n          {item}\n        </button>\n      ))}\n    </div>\n  );\n}\n\nexport { Composer, Suggestions };\n"],"mappings":";;;;;;;;;;;AA8BA,SAAS,SAAS,EAChB,UACA,OAAO,YACP,eACA,YAAY,OACZ,QACA,WAAW,OACX,cAAc,iBACd,aACA,SACA,QAAQ,WACR,WACA,GAAG,SACa;CAChB,MAAM,CAAC,KAAK,UAAU,MAAM,SAAS,EAAE;CACvC,MAAM,QAAQ,cAAc;CAC5B,MAAM,YAAY,MAAc;EAC9B,IAAI,eAAe,KAAA,GAAW,OAAO,CAAC;EACtC,gBAAgB,CAAC;CACnB;CACA,MAAM,UAAU,CAAC,YAAY,CAAC,aAAa,MAAM,KAAK,CAAC,CAAC,SAAS;CACjE,MAAM,aAAa;EACjB,IAAI,CAAC,SAAS;EACd,SAAS,MAAM,KAAK,CAAC;EACrB,SAAS,EAAE;CACb;CAEA,OACE,qBAAC,QAAD;EACE,aAAU;EACV,WAAW,MAAM;GACf,EAAE,eAAe;GACjB,KAAK;EACP;EACA,WAAW,GACT,8MACA,YAAY,cACZ,SACF;EACA,GAAI;EAXN,UAAA;GAaE,oBAAC,YAAD;IACE,cAAY;IACZ,MAAM;IACC;IACG;IACG;IACb,WAAW,MAAM,SAAS,EAAE,OAAO,KAAK;IACxC,YAAY,MAAM;KAChB,IAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,YAAY,CAAC,EAAE,YAAY,aAAa;MAClE,EAAE,eAAe;MACjB,KAAK;KACP;IACF;IACA,WAAU;GACX,CAAA;GACA,eAAe,oBAAC,OAAD;IAAK,WAAU;IAA+B,UAAA;GAAiB,CAAA;GAC/E,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SACD,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,YACC,oBAAC,QAAD;MACE,MAAK;MACL,MAAK;MACL,SAAQ;MACR,cAAW;MACX,SAAS;MAET,UAAA,oBAAC,QAAD,EAAQ,WAAU,eAAgB,CAAA;KAC5B,CAAA,IAER,oBAAC,QAAD;MAAQ,MAAK;MAAS,MAAK;MAAU,cAAW;MAAO,UAAU,CAAC;MAChE,UAAA,oBAAC,SAAD,CAAU,CAAA;KACJ,CAAA;IAEP,CAAA,CACF;;EACD;;AAEV;;AAQA,SAAS,YAAY,EAAE,OAAO,UAAU,WAAW,GAAG,SAA2B;CAC/E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAW;EACX,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;EAEH,UAAA,MAAM,KAAK,SACV,oBAAC,UAAD;GAEE,MAAK;GACL,eAAe,SAAS,IAAI;GAC5B,WAAU;GAET,UAAA;EACK,GAND,IAMC,CACT;CACE,CAAA;AAET"}

package/dist/components/conversation.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface ConversationProps extends React.ComponentProps<'div'> {
+    /** Shown instead of the messages when there are none. */
+    empty?: React.ReactNode;
+    /** Accessible name for the message log. */
+    label?: string;
+}
+/**
+ * A scrolling message log that stays pinned to the newest message while it
+ * streams, unless the reader has scrolled up; then a "Jump to latest" button
+ * appears instead of yanking them back down.
+ */
+declare function Conversation({ children, empty, label, className, ...props }: ConversationProps): React.JSX.Element;
+export { Conversation };

package/dist/components/conversation.js

@@ -0,0 +1,78 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ArrowDown from "@burtson-labs/icons/react/arrow-down";
+//#region src/components/conversation.tsx
+/**
+* A scrolling message log that stays pinned to the newest message while it
+* streams, unless the reader has scrolled up; then a "Jump to latest" button
+* appears instead of yanking them back down.
+*/
+function Conversation({ children, empty, label = "Conversation", className, ...props }) {
+	const scroller = React.useRef(null);
+	const content = React.useRef(null);
+	const pinned = React.useRef(true);
+	const [atBottom, setAtBottom] = React.useState(true);
+	const hasMessages = React.Children.toArray(children).length > 0;
+	const scrollToBottom = React.useCallback((behavior = "auto") => {
+		const el = scroller.current;
+		if (!el) return;
+		if (typeof el.scrollTo === "function") el.scrollTo({
+			top: el.scrollHeight,
+			behavior
+		});
+		else el.scrollTop = el.scrollHeight;
+	}, []);
+	React.useEffect(() => {
+		const el = content.current;
+		if (!el) return;
+		const ro = new ResizeObserver(() => {
+			if (pinned.current) scrollToBottom();
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [scrollToBottom]);
+	React.useEffect(() => {
+		if (pinned.current) scrollToBottom();
+	}, [children, scrollToBottom]);
+	const onScroll = () => {
+		const el = scroller.current;
+		if (!el) return;
+		const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < 32;
+		pinned.current = bottom;
+		setAtBottom(bottom);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "conversation",
+		className: cn("relative min-h-0", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: scroller,
+			role: "log",
+			"aria-label": label,
+			"aria-live": "polite",
+			"aria-relevant": "additions text",
+			tabIndex: 0,
+			onScroll,
+			className: "size-full overflow-y-auto outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20",
+			children: /* @__PURE__ */ jsx("div", {
+				ref: content,
+				className: "grid gap-5 p-4",
+				children: hasMessages ? children : empty
+			})
+		}), !atBottom && /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => {
+				pinned.current = true;
+				setAtBottom(true);
+				scrollToBottom("smooth");
+			},
+			className: "absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 animate-in items-center gap-1.5 rounded-full border border-border-strong bg-surface-raised px-3 py-1.5 text-xs font-semibold shadow-md outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-3.5",
+			children: [/* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": true }), " Jump to latest"]
+		})]
+	});
+}
+//#endregion
+export { Conversation };
+
+//# sourceMappingURL=conversation.js.map

package/dist/components/conversation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation.js","names":[],"sources":["../../src/components/conversation.tsx"],"sourcesContent":["import ArrowDown from '@burtson-labs/icons/react/arrow-down';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface ConversationProps extends React.ComponentProps<'div'> {\n  /** Shown instead of the messages when there are none. */\n  empty?: React.ReactNode;\n  /** Accessible name for the message log. */\n  label?: string;\n}\n\n/**\n * A scrolling message log that stays pinned to the newest message while it\n * streams, unless the reader has scrolled up; then a \"Jump to latest\" button\n * appears instead of yanking them back down.\n */\nfunction Conversation({\n  children,\n  empty,\n  label = 'Conversation',\n  className,\n  ...props\n}: ConversationProps) {\n  const scroller = React.useRef<HTMLDivElement>(null);\n  const content = React.useRef<HTMLDivElement>(null);\n  const pinned = React.useRef(true);\n  const [atBottom, setAtBottom] = React.useState(true);\n  const hasMessages = React.Children.toArray(children).length > 0;\n\n  const scrollToBottom = React.useCallback((behavior: ScrollBehavior = 'auto') => {\n    const el = scroller.current;\n    if (!el) return;\n    if (typeof el.scrollTo === 'function') el.scrollTo({ top: el.scrollHeight, behavior });\n    else el.scrollTop = el.scrollHeight;\n  }, []);\n\n  React.useEffect(() => {\n    const el = content.current;\n    if (!el) return;\n    // Content grows while a reply streams; follow it only if pinned.\n    const ro = new ResizeObserver(() => {\n      if (pinned.current) scrollToBottom();\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [scrollToBottom]);\n\n  React.useEffect(() => {\n    if (pinned.current) scrollToBottom();\n  }, [children, scrollToBottom]);\n\n  const onScroll = () => {\n    const el = scroller.current;\n    if (!el) return;\n    const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < 32;\n    pinned.current = bottom;\n    setAtBottom(bottom);\n  };\n\n  return (\n    <div data-slot=\"conversation\" className={cn('relative min-h-0', className)} {...props}>\n      <div\n        ref={scroller}\n        role=\"log\"\n        aria-label={label}\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        // A scrollable region must be reachable by keyboard (WCAG 2.1.1).\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        onScroll={onScroll}\n        className=\"size-full overflow-y-auto outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n      >\n        <div ref={content} className=\"grid gap-5 p-4\">\n          {hasMessages ? children : empty}\n        </div>\n      </div>\n      {!atBottom && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            pinned.current = true;\n            setAtBottom(true);\n            scrollToBottom('smooth');\n          }}\n          className=\"absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 animate-in items-center gap-1.5 rounded-full border border-border-strong bg-surface-raised px-3 py-1.5 text-xs font-semibold shadow-md outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-3.5\"\n        >\n          <ArrowDown aria-hidden /> Jump to latest\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { Conversation };\n"],"mappings":";;;;;;;;;;AAiBA,SAAS,aAAa,EACpB,UACA,OACA,QAAQ,gBACR,WACA,GAAG,SACiB;CACpB,MAAM,WAAW,MAAM,OAAuB,IAAI;CAClD,MAAM,UAAU,MAAM,OAAuB,IAAI;CACjD,MAAM,SAAS,MAAM,OAAO,IAAI;CAChC,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,IAAI;CACnD,MAAM,cAAc,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS;CAE9D,MAAM,iBAAiB,MAAM,aAAa,WAA2B,WAAW;EAC9E,MAAM,KAAK,SAAS;EACpB,IAAI,CAAC,IAAI;EACT,IAAI,OAAO,GAAG,aAAa,YAAY,GAAG,SAAS;GAAE,KAAK,GAAG;GAAc;EAAS,CAAC;OAChF,GAAG,YAAY,GAAG;CACzB,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB;EACpB,MAAM,KAAK,QAAQ;EACnB,IAAI,CAAC,IAAI;EAET,MAAM,KAAK,IAAI,qBAAqB;GAClC,IAAI,OAAO,SAAS,eAAe;EACrC,CAAC;EACD,GAAG,QAAQ,EAAE;EACb,aAAa,GAAG,WAAW;CAC7B,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,gBAAgB;EACpB,IAAI,OAAO,SAAS,eAAe;CACrC,GAAG,CAAC,UAAU,cAAc,CAAC;CAE7B,MAAM,iBAAiB;EACrB,MAAM,KAAK,SAAS;EACpB,IAAI,CAAC,IAAI;EACT,MAAM,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,eAAe;EAClE,OAAO,UAAU;EACjB,YAAY,MAAM;CACpB;CAEA,OACE,qBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;EAAhF,UAAA,CACE,oBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,aAAU;GACV,iBAAc;GAGd,UAAU;GACA;GACV,WAAU;GAEV,UAAA,oBAAC,OAAD;IAAK,KAAK;IAAS,WAAU;IAC1B,UAAA,cAAc,WAAW;GACvB,CAAA;EACF,CAAA,GACJ,CAAC,YACA,qBAAC,UAAD;GACE,MAAK;GACL,eAAe;IACb,OAAO,UAAU;IACjB,YAAY,IAAI;IAChB,eAAe,QAAQ;GACzB;GACA,WAAU;GAPZ,UAAA,CASE,oBAAC,WAAD,EAAW,eAAA,KAAa,CAAA,GAAC,iBACnB;EAEP,CAAA,CAAA;;AAET"}

package/dist/components/copy-button.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type IconButtonProps } from './icon-button';
+export interface CopyButtonProps extends Omit<IconButtonProps, 'label' | 'children' | 'onClick'> {
+    /** The text to put on the clipboard. */
+    value: string;
+    /** Accessible name, e.g. "Copy API key". */
+    label?: string;
+}
+/**
+ * Icon button that copies `value` and shows a check for a moment. When the
+ * browser blocks the clipboard it raises a toast (needs a mounted Toaster)
+ * asking the person to copy by hand.
+ */
+declare function CopyButton({ value, label, variant, size, ...props }: CopyButtonProps): React.JSX.Element;
+export { CopyButton };

package/dist/components/copy-button.js

@@ -0,0 +1,47 @@
+import { IconButton } from "./icon-button.js";
+import { toast } from "./toaster.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import Check from "@burtson-labs/icons/react/check";
+import Copy from "@burtson-labs/icons/react/copy";
+//#region src/components/copy-button.tsx
+/**
+* Icon button that copies `value` and shows a check for a moment. When the
+* browser blocks the clipboard it raises a toast (needs a mounted Toaster)
+* asking the person to copy by hand.
+*/
+function CopyButton({ value, label = "Copy", variant = "ghost", size = "icon-sm", ...props }) {
+	const [copied, setCopied] = React.useState(false);
+	const timer = React.useRef(void 0);
+	React.useEffect(() => () => clearTimeout(timer.current), []);
+	const copy = async () => {
+		try {
+			await navigator.clipboard.writeText(value);
+			setCopied(true);
+			clearTimeout(timer.current);
+			timer.current = setTimeout(() => setCopied(false), 1600);
+		} catch {
+			toast({
+				title: "Copy blocked by the browser",
+				description: "Select the text and copy it by hand.",
+				variant: "destructive"
+			});
+		}
+	};
+	return /* @__PURE__ */ jsx(IconButton, {
+		"data-slot": "copy-button",
+		label: copied ? "Copied" : label,
+		variant,
+		size,
+		onClick: () => void copy(),
+		...props,
+		children: copied ? /* @__PURE__ */ jsx(Check, {
+			"aria-hidden": true,
+			className: "text-success"
+		}) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true })
+	});
+}
+//#endregion
+export { CopyButton };
+
+//# sourceMappingURL=copy-button.js.map

package/dist/components/copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.js","names":[],"sources":["../../src/components/copy-button.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport Copy from '@burtson-labs/icons/react/copy';\nimport * as React from 'react';\n\nimport { IconButton, type IconButtonProps } from './icon-button';\nimport { toast } from './toaster';\n\nexport interface CopyButtonProps extends Omit<IconButtonProps, 'label' | 'children' | 'onClick'> {\n  /** The text to put on the clipboard. */\n  value: string;\n  /** Accessible name, e.g. \"Copy API key\". */\n  label?: string;\n}\n\n/**\n * Icon button that copies `value` and shows a check for a moment. When the\n * browser blocks the clipboard it raises a toast (needs a mounted Toaster)\n * asking the person to copy by hand.\n */\nfunction CopyButton({\n  value,\n  label = 'Copy',\n  variant = 'ghost',\n  size = 'icon-sm',\n  ...props\n}: CopyButtonProps) {\n  const [copied, setCopied] = React.useState(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  React.useEffect(() => () => clearTimeout(timer.current), []);\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      clearTimeout(timer.current);\n      timer.current = setTimeout(() => setCopied(false), 1600);\n    } catch {\n      toast({\n        title: 'Copy blocked by the browser',\n        description: 'Select the text and copy it by hand.',\n        variant: 'destructive',\n      });\n    }\n  };\n\n  return (\n    <IconButton\n      data-slot=\"copy-button\"\n      label={copied ? 'Copied' : label}\n      variant={variant}\n      size={size}\n      onClick={() => void copy()}\n      {...props}\n    >\n      {copied ? <Check aria-hidden className=\"text-success\" /> : <Copy aria-hidden />}\n    </IconButton>\n  );\n}\n\nexport { CopyButton };\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAS,WAAW,EAClB,OACA,QAAQ,QACR,UAAU,SACV,OAAO,WACP,GAAG,SACe;CAClB,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,KAAK;CAChD,MAAM,QAAQ,MAAM,OAAkD,KAAA,CAAS;CAC/E,MAAM,sBAAsB,aAAa,MAAM,OAAO,GAAG,CAAC,CAAC;CAE3D,MAAM,OAAO,YAAY;EACvB,IAAI;GACF,MAAM,UAAU,UAAU,UAAU,KAAK;GACzC,UAAU,IAAI;GACd,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,iBAAiB,UAAU,KAAK,GAAG,IAAI;EACzD,QAAQ;GACN,MAAM;IACJ,OAAO;IACP,aAAa;IACb,SAAS;GACX,CAAC;EACH;CACF;CAEA,OACE,oBAAC,YAAD;EACE,aAAU;EACV,OAAO,SAAS,WAAW;EAClB;EACH;EACN,eAAe,KAAK,KAAK;EACzB,GAAI;EAEH,UAAA,SAAS,oBAAC,OAAD;GAAO,eAAA;GAAY,WAAU;EAAgB,CAAA,IAAI,oBAAC,MAAD,EAAM,eAAA,KAAa,CAAA;CACpE,CAAA;AAEhB"}

package/dist/components/markdown.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+/** A fenced code block with a language label and a copy button. */
+declare function CodeBlock({ code, lang, className }: {
+    code: string;
+    lang?: string;
+    className?: string;
+}): React.JSX.Element;
+type Block = {
+    type: 'p';
+    text: string;
+} | {
+    type: 'h';
+    level: 1 | 2 | 3;
+    text: string;
+} | {
+    type: 'ul' | 'ol';
+    items: string[];
+} | {
+    type: 'quote';
+    text: string;
+} | {
+    type: 'code';
+    lang: string;
+    code: string;
+};
+/** Split Markdown into blocks. Exported for tests. */
+export declare function parseMarkdown(source: string): Block[];
+export interface MarkdownProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    children: string;
+}
+/** Renders a Markdown string safely, for assistant messages. */
+declare function Markdown({ children, className, ...props }: MarkdownProps): React.JSX.Element;
+export { CodeBlock, Markdown };

package/dist/components/markdown.js

@@ -0,0 +1,177 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Check from "@burtson-labs/icons/react/check";
+import Copy from "@burtson-labs/icons/react/copy";
+//#region src/components/markdown.tsx
+var SAFE_HREF = /^(https?:\/\/|mailto:)/i;
+function inline(text, key) {
+	const out = [];
+	const pattern = /(`[^`]+`)|(\*\*[^*]+\*\*|__[^_]+__)|(\*[^*\s][^*]*\*|_[^_\s][^_]*_)|(\[[^\]]+\]\([^)\s]+\))/g;
+	let last = 0;
+	let n = 0;
+	for (const m of text.matchAll(pattern)) {
+		const i = m.index;
+		if (i > last) out.push(text.slice(last, i));
+		const token = m[0];
+		const k = `${key}-${n++}`;
+		if (m[1]) out.push(/* @__PURE__ */ jsx("code", {
+			className: "rounded-xs bg-muted px-1 py-0.5 font-mono text-[0.85em]",
+			children: token.slice(1, -1)
+		}, k));
+		else if (m[2]) out.push(/* @__PURE__ */ jsx("strong", { children: inline(token.slice(2, -2), k) }, k));
+		else if (m[3]) out.push(/* @__PURE__ */ jsx("em", { children: inline(token.slice(1, -1), k) }, k));
+		else {
+			const [, label = "", href = ""] = /^\[([^\]]+)\]\(([^)\s]+)\)$/.exec(token) ?? [];
+			out.push(SAFE_HREF.test(href) ? /* @__PURE__ */ jsx("a", {
+				href,
+				target: "_blank",
+				rel: "noreferrer noopener",
+				className: "text-brand underline underline-offset-2 hover:text-brand-hover",
+				children: label
+			}, k) : label);
+		}
+		last = i + token.length;
+	}
+	if (last < text.length) out.push(text.slice(last));
+	return out;
+}
+/** A fenced code block with a language label and a copy button. */
+function CodeBlock({ code, lang, className }) {
+	const [copied, setCopied] = React.useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "code-block",
+		className: cn("overflow-hidden rounded-md border bg-code text-code-foreground", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex h-8 items-center justify-between border-b border-white/10 px-3 text-[11px] text-code-foreground/60",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-mono",
+				children: lang || "text"
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": copied ? "Copied" : "Copy code",
+				className: "grid size-6 place-items-center rounded-xs outline-none hover:bg-white/10 focus-visible:ring-[3px] focus-visible:ring-ring/30 [&_svg]:size-3.5",
+				onClick: () => {
+					navigator.clipboard?.writeText(code).then(() => {
+						setCopied(true);
+						setTimeout(() => setCopied(false), 1400);
+					});
+				},
+				children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true })
+			})]
+		}), /* @__PURE__ */ jsx("pre", {
+			className: "overflow-x-auto p-3 font-mono text-[12.5px] leading-5",
+			children: /* @__PURE__ */ jsx("code", { children: code })
+		})]
+	});
+}
+/** Split Markdown into blocks. Exported for tests. */
+function parseMarkdown(source) {
+	const lines = source.replace(/\r\n?/g, "\n").split("\n");
+	const blocks = [];
+	let para = [];
+	const flush = () => {
+		if (para.length) blocks.push({
+			type: "p",
+			text: para.join(" ")
+		});
+		para = [];
+	};
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i] ?? "";
+		const fence = /^```\s*([\w+-]*)\s*$/.exec(line);
+		if (fence) {
+			flush();
+			const code = [];
+			i++;
+			while (i < lines.length && !/^```\s*$/.test(lines[i] ?? "")) code.push(lines[i++] ?? "");
+			blocks.push({
+				type: "code",
+				lang: fence[1] ?? "",
+				code: code.join("\n")
+			});
+			continue;
+		}
+		const heading = /^(#{1,3})\s+(.*)$/.exec(line);
+		if (heading) {
+			flush();
+			blocks.push({
+				type: "h",
+				level: heading[1]?.length ?? 1,
+				text: heading[2] ?? ""
+			});
+			continue;
+		}
+		const list = /^\s*([-*]|\d+[.)])\s+(.*)$/.exec(line);
+		if (list) {
+			flush();
+			const type = /\d/.test(list[1] ?? "") ? "ol" : "ul";
+			const prev = blocks.at(-1);
+			if (prev && prev.type === type) prev.items.push(list[2] ?? "");
+			else blocks.push({
+				type,
+				items: [list[2] ?? ""]
+			});
+			continue;
+		}
+		const quote = /^>\s?(.*)$/.exec(line);
+		if (quote) {
+			flush();
+			blocks.push({
+				type: "quote",
+				text: quote[1] ?? ""
+			});
+			continue;
+		}
+		if (!line.trim()) flush();
+		else para.push(line.trim());
+	}
+	flush();
+	return blocks;
+}
+/** Renders a Markdown string safely, for assistant messages. */
+function Markdown({ children, className, ...props }) {
+	const blocks = React.useMemo(() => parseMarkdown(children), [children]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "markdown",
+		className: cn("grid gap-3 text-sm leading-6 [&_li]:leading-6", className),
+		...props,
+		children: blocks.map((b, i) => {
+			const k = `b${i}`;
+			switch (b.type) {
+				case "h": {
+					const Tag = [
+						"h3",
+						"h4",
+						"h5"
+					][b.level - 1] ?? "h5";
+					return /* @__PURE__ */ jsx(Tag, {
+						className: "font-semibold tracking-[-0.01em]",
+						children: inline(b.text, k)
+					}, k);
+				}
+				case "ul":
+				case "ol": {
+					const Tag = b.type;
+					return /* @__PURE__ */ jsx(Tag, {
+						className: cn("grid gap-1 pl-5", b.type === "ul" ? "list-disc" : "list-decimal"),
+						children: b.items.map((item, j) => /* @__PURE__ */ jsx("li", { children: inline(item, `${k}-${j}`) }, `${k}-${j}`))
+					}, k);
+				}
+				case "quote": return /* @__PURE__ */ jsx("blockquote", {
+					className: "border-l-2 border-border-strong pl-3 text-muted-foreground",
+					children: inline(b.text, k)
+				}, k);
+				case "code": return /* @__PURE__ */ jsx(CodeBlock, {
+					code: b.code,
+					lang: b.lang
+				}, k);
+				default: return /* @__PURE__ */ jsx("p", { children: inline(b.text, k) }, k);
+			}
+		})
+	});
+}
+//#endregion
+export { CodeBlock, Markdown, parseMarkdown };
+
+//# sourceMappingURL=markdown.js.map

package/dist/components/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.js","names":[],"sources":["../../src/components/markdown.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport Copy from '@burtson-labs/icons/react/copy';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\n/*\n * A small, safe Markdown renderer for chat: paragraphs, headings, bullet and\n * numbered lists, block quotes, fenced code, inline code, bold, italic and\n * links. Everything becomes React elements (never HTML strings), and links\n * only keep http(s) and mailto targets, so model output cannot inject markup\n * or script.\n */\n\nconst SAFE_HREF = /^(https?:\\/\\/|mailto:)/i;\n\nfunction inline(text: string, key: string): React.ReactNode[] {\n  const out: React.ReactNode[] = [];\n  const pattern =\n    /(`[^`]+`)|(\\*\\*[^*]+\\*\\*|__[^_]+__)|(\\*[^*\\s][^*]*\\*|_[^_\\s][^_]*_)|(\\[[^\\]]+\\]\\([^)\\s]+\\))/g;\n  let last = 0;\n  let n = 0;\n  for (const m of text.matchAll(pattern)) {\n    const i = m.index;\n    if (i > last) out.push(text.slice(last, i));\n    const token = m[0];\n    const k = `${key}-${n++}`;\n    if (m[1]) {\n      out.push(\n        <code key={k} className=\"rounded-xs bg-muted px-1 py-0.5 font-mono text-[0.85em]\">\n          {token.slice(1, -1)}\n        </code>,\n      );\n    } else if (m[2]) {\n      out.push(<strong key={k}>{inline(token.slice(2, -2), k)}</strong>);\n    } else if (m[3]) {\n      out.push(<em key={k}>{inline(token.slice(1, -1), k)}</em>);\n    } else {\n      const [, label = '', href = ''] = /^\\[([^\\]]+)\\]\\(([^)\\s]+)\\)$/.exec(token) ?? [];\n      out.push(\n        SAFE_HREF.test(href) ? (\n          <a\n            key={k}\n            href={href}\n            target=\"_blank\"\n            rel=\"noreferrer noopener\"\n            className=\"text-brand underline underline-offset-2 hover:text-brand-hover\"\n          >\n            {label}\n          </a>\n        ) : (\n          label\n        ),\n      );\n    }\n    last = i + token.length;\n  }\n  if (last < text.length) out.push(text.slice(last));\n  return out;\n}\n\n/** A fenced code block with a language label and a copy button. */\nfunction CodeBlock({ code, lang, className }: { code: string; lang?: string; className?: string }) {\n  const [copied, setCopied] = React.useState(false);\n  return (\n    <div\n      data-slot=\"code-block\"\n      className={cn('overflow-hidden rounded-md border bg-code text-code-foreground', className)}\n    >\n      <div className=\"flex h-8 items-center justify-between border-b border-white/10 px-3 text-[11px] text-code-foreground/60\">\n        <span className=\"font-mono\">{lang || 'text'}</span>\n        <button\n          type=\"button\"\n          aria-label={copied ? 'Copied' : 'Copy code'}\n          className=\"grid size-6 place-items-center rounded-xs outline-none hover:bg-white/10 focus-visible:ring-[3px] focus-visible:ring-ring/30 [&_svg]:size-3.5\"\n          onClick={() => {\n            void navigator.clipboard?.writeText(code).then(() => {\n              setCopied(true);\n              setTimeout(() => setCopied(false), 1400);\n            });\n          }}\n        >\n          {copied ? <Check aria-hidden /> : <Copy aria-hidden />}\n        </button>\n      </div>\n      <pre className=\"overflow-x-auto p-3 font-mono text-[12.5px] leading-5\">\n        <code>{code}</code>\n      </pre>\n    </div>\n  );\n}\n\ntype Block =\n  | { type: 'p'; text: string }\n  | { type: 'h'; level: 1 | 2 | 3; text: string }\n  | { type: 'ul' | 'ol'; items: string[] }\n  | { type: 'quote'; text: string }\n  | { type: 'code'; lang: string; code: string };\n\n/** Split Markdown into blocks. Exported for tests. */\nexport function parseMarkdown(source: string): Block[] {\n  const lines = source.replace(/\\r\\n?/g, '\\n').split('\\n');\n  const blocks: Block[] = [];\n  let para: string[] = [];\n  const flush = () => {\n    if (para.length) blocks.push({ type: 'p', text: para.join(' ') });\n    para = [];\n  };\n  for (let i = 0; i < lines.length; i++) {\n    const line = lines[i] ?? '';\n    const fence = /^```\\s*([\\w+-]*)\\s*$/.exec(line);\n    if (fence) {\n      flush();\n      const code: string[] = [];\n      i++;\n      while (i < lines.length && !/^```\\s*$/.test(lines[i] ?? '')) code.push(lines[i++] ?? '');\n      blocks.push({ type: 'code', lang: fence[1] ?? '', code: code.join('\\n') });\n      continue;\n    }\n    const heading = /^(#{1,3})\\s+(.*)$/.exec(line);\n    if (heading) {\n      flush();\n      blocks.push({\n        type: 'h',\n        level: (heading[1]?.length ?? 1) as 1 | 2 | 3,\n        text: heading[2] ?? '',\n      });\n      continue;\n    }\n    const list = /^\\s*([-*]|\\d+[.)])\\s+(.*)$/.exec(line);\n    if (list) {\n      flush();\n      const type = /\\d/.test(list[1] ?? '') ? 'ol' : 'ul';\n      const prev = blocks.at(-1);\n      if (prev && prev.type === type) prev.items.push(list[2] ?? '');\n      else blocks.push({ type, items: [list[2] ?? ''] });\n      continue;\n    }\n    const quote = /^>\\s?(.*)$/.exec(line);\n    if (quote) {\n      flush();\n      blocks.push({ type: 'quote', text: quote[1] ?? '' });\n      continue;\n    }\n    if (!line.trim()) flush();\n    else para.push(line.trim());\n  }\n  flush();\n  return blocks;\n}\n\nexport interface MarkdownProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  children: string;\n}\n\n/** Renders a Markdown string safely, for assistant messages. */\nfunction Markdown({ children, className, ...props }: MarkdownProps) {\n  const blocks = React.useMemo(() => parseMarkdown(children), [children]);\n  return (\n    <div\n      data-slot=\"markdown\"\n      className={cn('grid gap-3 text-sm leading-6 [&_li]:leading-6', className)}\n      {...props}\n    >\n      {blocks.map((b, i) => {\n        const k = `b${i}`;\n        switch (b.type) {\n          case 'h': {\n            const Tag = (['h3', 'h4', 'h5'] as const)[b.level - 1] ?? 'h5';\n            return (\n              <Tag key={k} className=\"font-semibold tracking-[-0.01em]\">\n                {inline(b.text, k)}\n              </Tag>\n            );\n          }\n          case 'ul':\n          case 'ol': {\n            const Tag = b.type;\n            return (\n              <Tag\n                key={k}\n                className={cn('grid gap-1 pl-5', b.type === 'ul' ? 'list-disc' : 'list-decimal')}\n              >\n                {b.items.map((item, j) => (\n                  <li key={`${k}-${j}`}>{inline(item, `${k}-${j}`)}</li>\n                ))}\n              </Tag>\n            );\n          }\n          case 'quote':\n            return (\n              <blockquote\n                key={k}\n                className=\"border-l-2 border-border-strong pl-3 text-muted-foreground\"\n              >\n                {inline(b.text, k)}\n              </blockquote>\n            );\n          case 'code':\n            return <CodeBlock key={k} code={b.code} lang={b.lang} />;\n          default:\n            return <p key={k}>{inline(b.text, k)}</p>;\n        }\n      })}\n    </div>\n  );\n}\n\nexport { CodeBlock, Markdown };\n"],"mappings":"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"}

package/dist/components/message.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export type MessageRole = 'user' | 'assistant' | 'system';
+export interface MessageProps extends React.ComponentProps<'div'> {
+    /** Who wrote it. (Not `role`, which is the ARIA attribute.) */
+    from: MessageRole;
+    /** Avatar or agent mark beside assistant messages. */
+    avatar?: React.ReactNode;
+    /** Sender name shown above the message, e.g. the agent's name. */
+    name?: React.ReactNode;
+    /** Timestamp or status text. */
+    meta?: React.ReactNode;
+    /** Actions such as copy and retry, shown on hover and focus. */
+    actions?: React.ReactNode;
+}
+/**
+ * One turn in a conversation. User turns sit on the right in a quiet bubble,
+ * assistant turns read full width with an optional avatar, and system notes
+ * are centred and small.
+ */
+declare function Message({ from, avatar, name, meta, actions, children, className, ...props }: MessageProps): React.JSX.Element;
+export { Message };

package/dist/components/message.js

@@ -0,0 +1,56 @@
+import { cn } from "../lib/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/message.tsx
+/**
+* One turn in a conversation. User turns sit on the right in a quiet bubble,
+* assistant turns read full width with an optional avatar, and system notes
+* are centred and small.
+*/
+function Message({ from, avatar, name, meta, actions, children, className, ...props }) {
+	if (from === "system") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message",
+		"data-role": "system",
+		className: cn("mx-auto max-w-prose text-center text-xs text-muted-foreground", className),
+		...props,
+		children
+	});
+	const user = from === "user";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message",
+		"data-role": from,
+		className: cn("group/message flex animate-in gap-3", user ? "justify-end" : "justify-start", className),
+		...props,
+		children: [!user && avatar && /* @__PURE__ */ jsx("div", {
+			className: "mt-0.5 grid size-7 shrink-0 place-items-center overflow-hidden rounded-md border border-brand/15 bg-brand-soft text-brand [&_svg]:size-4",
+			children: avatar
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("grid min-w-0 gap-1.5", user ? "max-w-[85%] justify-items-end" : "flex-1"),
+			children: [
+				(name || meta) && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline gap-2 text-xs",
+					children: [name && /* @__PURE__ */ jsx("span", {
+						className: "font-semibold text-foreground",
+						children: name
+					}), meta && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: meta
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "message-body",
+					className: cn("min-w-0 text-sm leading-6", user && "rounded-lg rounded-tr-xs bg-secondary px-3.5 py-2 text-secondary-foreground"),
+					children
+				}),
+				actions && /* @__PURE__ */ jsx("div", {
+					className: "flex gap-1 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100 max-md:opacity-100",
+					children: actions
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { Message };
+
+//# sourceMappingURL=message.js.map