@vjdesigns/vjdesigns-ui 1.5.0 → 2.1.0

package/dist/components/data-display/Chat/Chat.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../hooks/useClipboard.cjs.js"),r=require("../../../hooks/useEnvironment.cjs.js"),i=require("../../../utils/cx.cjs.js"),a=require("../../../utils/announce.cjs.js"),o=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),s=require("../../primitives/Button/Button.cjs.js"),c=require("../../primitives/Icon/Icon.cjs.js"),l=require("../../layout/ScrollArea/ScrollArea.cjs.js"),ee=require("../../forms/Textarea/Textarea.cjs.js"),u=require("./Chat.module.css.cjs.js");let d=require("react"),f=require("react/jsx-runtime");var te=48,ne=typeof window<`u`?d.useLayoutEffect:d.useEffect;function re(e){return e!=null&&typeof e[Symbol.asyncIterator]==`function`}var ie=()=>(0,f.jsx)(c.Icon,{children:(0,f.jsx)(`rect`,{x:`7`,y:`7`,width:`10`,height:`10`,rx:`2`,fill:`currentColor`,stroke:`none`})}),p=({messages:p,defaultMessages:ae,onMessagesChange:oe,onSend:m,onStop:se,onError:h,draft:ce,defaultDraft:le,onDraftChange:ue,suggestions:g,emptyState:de,renderContent:_,assistantName:fe,assistantAvatar:pe,userAvatar:v,copyable:y=!0,disclaimer:b,placeholder:me,maxLength:x,disabled:S=!1,labels:he,className:ge,"aria-label":_e,...C})=>{let w={...t.useMessages().chat,...he},T=fe??w.assistant,ve=r.useReducedMotion(),E=(0,d.useId)(),D=`${E}-hint`,[O,k]=e.useControllableState({value:p,defaultValue:ae??[],onChange:oe}),A=(0,d.useRef)(O),j=(0,d.useRef)(O);O!==j.current&&(j.current=O,A.current=O);let M=(0,d.useCallback)(e=>{let t=e(A.current);A.current=t,k(t)},[k]),N=(0,d.useCallback)((e,t)=>M(n=>n.map(n=>n.id===e?{...n,...t}:n)),[M]),P=(0,d.useRef)(0),F=()=>`${E}-${++P.current}`,[I,L]=e.useControllableState({value:ce,defaultValue:le??``,onChange:ue}),[R,z]=(0,d.useState)(!1),B=(0,d.useRef)(null),V=(0,d.useRef)(null),H=(0,d.useRef)(m);H.current=m;let U=(0,d.useRef)(h);U.current=h,(0,d.useEffect)(()=>()=>B.current?.abort(),[]);let W=(0,d.useRef)(null),G=(0,d.useRef)(!0),[ye,K]=(0,d.useState)(!0),be=()=>{let e=W.current;if(!e)return;let t=e.scrollHeight-e.scrollTop-e.clientHeight<=te;G.current=t,K(t)};ne(()=>{let e=W.current;e&&G.current&&(e.scrollTop=e.scrollHeight)},[O]);let xe=()=>{let e=W.current;e&&(G.current=!0,K(!0),e.scrollTo({top:e.scrollHeight,behavior:ve?`auto`:`smooth`}),V.current?.focus())},q=async(e,t)=>{let n=F();M(()=>[...e,{id:n,role:`assistant`,content:``,status:`streaming`}]),G.current=!0,K(!0),z(!0),a.announce(w.typing(T));let r=new AbortController;B.current=r;let i=``;try{let o=await H.current?.(t,{messages:e,signal:r.signal});if(typeof o==`string`)i=o;else if(re(o))for await(let e of o){if(r.signal.aborted)break;i+=e,N(n,{content:i})}else if(!r.signal.aborted){M(e=>e.filter(e=>e.id!==n));return}if(r.signal.aborted)throw r.signal.reason;N(n,{content:i,status:`done`}),a.announce(`${w.assistantSaid(T)} ${i}`)}catch(e){r.signal.aborted?(N(n,{content:i,status:`stopped`}),a.announce(w.stopped)):(U.current?.(e),N(n,{content:i,status:`error`}),a.announce(w.error))}finally{B.current===r&&(B.current=null),z(!1)}},J=e=>{let t=e.trim();!t||R||S||(L(``),q([...A.current,{id:F(),role:`user`,content:t,status:`done`}],t))},Y=()=>{B.current&&(B.current.abort(),se?.(),V.current?.focus())},Se=e=>{let t=A.current,n=t.findIndex(t=>t.id===e)-1;for(;n>=0&&t[n].role!==`user`;)n--;n<0||R||(q(t.slice(0,n+1),t[n].content),V.current?.focus())},X=e=>{e.preventDefault(),R?Y():J(I)},Ce=e=>{if(e.key===`Escape`&&R){e.preventDefault(),Y();return}e.key===`Enter`&&!e.shiftKey&&!e.nativeEvent.isComposing&&(e.preventDefault(),J(e.currentTarget.value))},{copy:we}=n.useClipboard(),[Z,Q]=(0,d.useState)(null);(0,d.useEffect)(()=>{if(Z===null)return;let e=window.setTimeout(()=>Q(null),2e3);return()=>window.clearTimeout(e)},[Z]);let Te=async e=>{await we(e.content)&&(Q(e.id),a.announce(w.copied))},$=O.filter(e=>e.role!==`system`).length===0,Ee=O[O.length-1],De=e=>{if(e.role===`system`)return(0,f.jsx)(`p`,{className:u.default.system,children:e.content},e.id);let t=e.role===`user`,n=e.status??`done`,r=n===`streaming`&&e.content===``,a=t?v:pe,l=!t&&!R&&e===Ee&&(n===`error`||n===`stopped`);return(0,f.jsxs)(`article`,{className:i.cx(u.default.message,t?u.default.user:u.default.assistant),"data-role":e.role,"data-status":n,"aria-busy":n===`streaming`||void 0,children:[a!=null&&(0,f.jsx)(`div`,{className:u.default.avatar,"aria-hidden":`true`,children:a}),(0,f.jsxs)(`div`,{className:u.default.body,children:[r?(0,f.jsxs)(`div`,{className:u.default.bubble,children:[(0,f.jsxs)(`span`,{className:u.default.dots,"aria-hidden":`true`,children:[(0,f.jsx)(`span`,{}),(0,f.jsx)(`span`,{}),(0,f.jsx)(`span`,{})]}),(0,f.jsx)(o.VisuallyHidden,{children:w.typing(T)})]}):e.content!==``&&(0,f.jsxs)(`div`,{className:u.default.bubble,children:[(0,f.jsxs)(o.VisuallyHidden,{children:[t?w.youSaid:w.assistantSaid(T),` `]}),_?_(e):(0,f.jsx)(`p`,{className:u.default.text,children:e.content})]}),n===`error`&&(0,f.jsxs)(`p`,{className:u.default.error,children:[(0,f.jsx)(c.Icon,{name:`error`,size:`sm`}),(0,f.jsx)(`span`,{children:e.error??w.error})]}),n===`stopped`&&(0,f.jsx)(`p`,{className:u.default.note,children:w.stopped}),!t&&(l||y&&n===`done`&&e.content!==``)&&(0,f.jsxs)(`div`,{className:u.default.actions,children:[y&&n===`done`&&e.content!==``&&(0,f.jsx)(s.IconButton,{variant:`ghost`,tone:`neutral`,size:`sm`,"aria-label":Z===e.id?w.copied:w.copy,onClick:()=>void Te(e),children:(0,f.jsx)(c.Icon,{name:Z===e.id?`check`:`copy`})}),l&&(0,f.jsx)(s.Button,{variant:`ghost`,tone:`neutral`,size:`sm`,startIcon:(0,f.jsx)(c.Icon,{name:`refresh`}),onClick:()=>Se(e.id),children:w.retry})]})]})]},e.id)};return(0,f.jsxs)(`section`,{...C,"aria-label":_e??(C[`aria-labelledby`]?void 0:w.region),className:i.cx(u.default.root,ge),children:[(0,f.jsxs)(`div`,{className:u.default.logWrap,children:[(0,f.jsx)(l.ScrollArea,{className:u.default.log,viewportRef:W,onViewportScroll:be,"aria-label":w.log,"aria-busy":R||void 0,tabIndex:0,children:(0,f.jsxs)(`div`,{className:u.default.messages,children:[$&&(0,f.jsxs)(`div`,{className:u.default.empty,children:[de??(0,f.jsx)(`p`,{className:u.default.emptyTitle,children:w.emptyTitle}),g&&g.length>0&&(0,f.jsx)(`div`,{role:`group`,"aria-label":w.suggestions,className:u.default.suggestions,children:g.map(e=>(0,f.jsx)(s.Button,{variant:`outline`,tone:`neutral`,size:`sm`,disabled:S,className:u.default.suggestion,onClick:()=>J(e),children:e},e))})]}),O.map(De)]})}),!ye&&!$&&(0,f.jsx)(s.IconButton,{variant:`soft`,tone:`neutral`,size:`sm`,className:u.default.jump,"aria-label":w.scrollToLatest,onClick:xe,children:(0,f.jsx)(c.Icon,{name:`arrow-down`})})]}),(0,f.jsxs)(`form`,{className:u.default.composer,onSubmit:X,children:[(0,f.jsxs)(`div`,{className:u.default.inputRow,children:[(0,f.jsx)(ee.Textarea,{ref:V,className:u.default.input,"aria-label":w.input,"aria-describedby":D,placeholder:me??w.placeholder,value:I,onValueChange:L,onKeyDown:Ce,autoResize:!0,rows:1,maxRows:6,maxLength:x,showCount:x!==void 0,disabled:S,enterKeyHint:`send`}),R?(0,f.jsx)(s.IconButton,{type:`submit`,variant:`soft`,tone:`neutral`,"aria-label":w.stop,children:(0,f.jsx)(ie,{})}):(0,f.jsx)(s.IconButton,{type:`submit`,"aria-label":w.send,disabled:S||I.trim()===``,children:(0,f.jsx)(c.Icon,{name:`arrow-up`})})]}),(0,f.jsx)(o.VisuallyHidden,{id:D,children:w.hint}),b!=null&&(0,f.jsx)(`p`,{className:u.default.disclaimer,children:b})]})]})};exports.Chat=p;

package/dist/components/data-display/Chat/Chat.d.ts

@@ -0,0 +1,114 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Messages } from '../../../i18n/types';
+/** Who wrote a message. `system` messages are shown as centered notes. */
+export type ChatRole = "user" | "assistant" | "system";
+/**
+ * Where a message is in its life. `streaming` shows a typing indicator while
+ * the content is empty; `error` shows the error and a Retry button;
+ * `stopped` marks a reply the user interrupted.
+ */
+export type ChatMessageStatus = "streaming" | "done" | "stopped" | "error";
+/** One message in the conversation. Plain data, so it can be stored or sent to a backend as is. */
+export interface ChatMessage {
+    /** Unique, stable id. */
+    id: string;
+    /** Who wrote it. */
+    role: ChatRole;
+    /** The text. Shown with line breaks kept, or through `renderContent`. */
+    content: string;
+    /** Message state. Treated as `done` when omitted. */
+    status?: ChatMessageStatus;
+    /** Error text for an `error` message. Defaults to the built-in error message. */
+    error?: string;
+}
+/** Passed to `onSend` along with the text. */
+export interface ChatSendContext {
+    /** The conversation so far, ending with the new user message. */
+    messages: ChatMessage[];
+    /** Aborted when the user presses Stop or the Chat unmounts. Pass it to `fetch`. */
+    signal: AbortSignal;
+}
+/**
+ * What `onSend` returns: the whole reply as a string, an async iterable of
+ * text chunks to stream it in (an `async function*`, or `readTextStream`),
+ * or nothing when you add the reply yourself through controlled `messages`.
+ */
+export type ChatSendResult = string | AsyncIterable<string> | void;
+/** Built-in text of a Chat. Every key can be overridden with the `labels` prop. */
+export type ChatLabels = Messages["chat"];
+export interface ChatProps extends Omit<ComponentPropsWithRef<"section">, "children" | "onError"> {
+    /** Controlled conversation. */
+    messages?: ChatMessage[];
+    /** Initial conversation when uncontrolled. */
+    defaultMessages?: ChatMessage[];
+    /** Called with the whole conversation whenever it changes (new messages, every streamed chunk, status changes). */
+    onMessagesChange?: (messages: ChatMessage[]) => void;
+    /**
+     * Connects the Chat to your backend. Called with the user's text when they
+     * send a message (or retry). Return the reply as a string, stream it as an
+     * `AsyncIterable<string>`, or return nothing and add it yourself through
+     * controlled `messages`. Throwing (or rejecting) turns the reply into an
+     * error with a Retry button.
+     */
+    onSend?: (text: string, context: ChatSendContext) => ChatSendResult | Promise<ChatSendResult>;
+    /** Called when the user stops a reply, after its `signal` is aborted. */
+    onStop?: () => void;
+    /** Called with whatever `onSend` threw, for logging. The user sees `labels.error` (or the message's `error`). */
+    onError?: (error: unknown) => void;
+    /** Controlled text of the message box. */
+    draft?: string;
+    /** Initial text of the message box when uncontrolled. */
+    defaultDraft?: string;
+    /** Called with the message box text on every edit. */
+    onDraftChange?: (draft: string) => void;
+    /** Prompts offered as buttons while the conversation is empty. Pressing one sends it. */
+    suggestions?: string[];
+    /** Shown while the conversation is empty, above the suggestions. Defaults to a short greeting (`labels.emptyTitle`). */
+    emptyState?: ReactNode;
+    /**
+     * Renders a message's content, e.g. through your Markdown renderer.
+     * Defaults to plain text with line breaks kept. Never render
+     * unsanitized HTML from a model or a user.
+     */
+    renderContent?: (message: ChatMessage) => ReactNode;
+    /** Name of the assistant, read to screen readers ("Coach said:"). Defaults to `labels.assistant`. */
+    assistantName?: string;
+    /** Shown beside assistant messages (e.g. an `Avatar` or `Icon`). Decorative: hidden from assistive technology. */
+    assistantAvatar?: ReactNode;
+    /** Shown beside user messages. Decorative: hidden from assistive technology. */
+    userAvatar?: ReactNode;
+    /** Show a Copy button under finished assistant messages. @default true */
+    copyable?: boolean;
+    /** Small print under the message box, e.g. "AI can make mistakes." */
+    disclaimer?: ReactNode;
+    /** Placeholder of the message box. Defaults to `labels.placeholder`. */
+    placeholder?: string;
+    /** Maximum length of a message, in characters. Shows a counter near the limit. */
+    maxLength?: number;
+    /** Disables the message box and the suggestions. */
+    disabled?: boolean;
+    /** Overrides for the built-in text. */
+    labels?: Partial<ChatLabels>;
+}
+/**
+ * A chat interface for an AI assistant (or a person), with no backend of its
+ * own: `onSend` connects it to any API and can stream the reply. Includes a
+ * scrolling conversation that follows new messages, an auto-growing message
+ * box (Enter sends, Shift+Enter adds a line), Stop and Retry, copy buttons,
+ * suggested prompts, and screen reader announcements of each reply.
+ *
+ * ```tsx
+ * <Chat
+ *   style={{ blockSize: 560 }}
+ *   onSend={async function* (text, { messages, signal }) {
+ *     const res = await fetch("/api/chat", {
+ *       method: "POST",
+ *       body: JSON.stringify({ messages }),
+ *       signal,
+ *     });
+ *     yield* readTextStream(res);
+ *   }}
+ * />
+ * ```
+ */
+export declare const Chat: ({ messages: messagesProp, defaultMessages, onMessagesChange, onSend, onStop, onError, draft: draftProp, defaultDraft, onDraftChange, suggestions, emptyState, renderContent, assistantName: assistantNameProp, assistantAvatar, userAvatar, copyable, disclaimer, placeholder, maxLength, disabled, labels: labelsProp, className, "aria-label": ariaLabel, ...rest }: ChatProps) => import("react").JSX.Element;

package/dist/components/data-display/Chat/Chat.mjs

@@ -0,0 +1,301 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { useClipboard as n } from "../../../hooks/useClipboard.mjs";
+import { useReducedMotion as r } from "../../../hooks/useEnvironment.mjs";
+import { cx as i } from "../../../utils/cx.mjs";
+import { announce as a } from "../../../utils/announce.mjs";
+import { VisuallyHidden as o } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { Button as s, IconButton as c } from "../../primitives/Button/Button.mjs";
+import { Icon as l } from "../../primitives/Icon/Icon.mjs";
+import { ScrollArea as u } from "../../layout/ScrollArea/ScrollArea.mjs";
+import { Textarea as ee } from "../../forms/Textarea/Textarea.mjs";
+import d from "./Chat.module.css.mjs";
+import { useCallback as f, useEffect as p, useId as te, useLayoutEffect as ne, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/data-display/Chat/Chat.tsx
+var re = 48, ie = typeof window < "u" ? ne : p;
+function ae(e) {
+	return e != null && typeof e[Symbol.asyncIterator] == "function";
+}
+var oe = () => /* @__PURE__ */ g(l, { children: /* @__PURE__ */ g("rect", {
+	x: "7",
+	y: "7",
+	width: "10",
+	height: "10",
+	rx: "2",
+	fill: "currentColor",
+	stroke: "none"
+}) }), v = ({ messages: ne, defaultMessages: v, onMessagesChange: se, onSend: y, onStop: ce, onError: b, draft: le, defaultDraft: ue, onDraftChange: de, suggestions: x, emptyState: fe, renderContent: S, assistantName: pe, assistantAvatar: me, userAvatar: he, copyable: C = !0, disclaimer: w, placeholder: ge, maxLength: T, disabled: E = !1, labels: _e, className: ve, "aria-label": ye, ...D }) => {
+	let O = {
+		...t().chat,
+		..._e
+	}, k = pe ?? O.assistant, be = r(), A = te(), j = `${A}-hint`, [M, N] = e({
+		value: ne,
+		defaultValue: v ?? [],
+		onChange: se
+	}), P = m(M), F = m(M);
+	M !== F.current && (F.current = M, P.current = M);
+	let I = f((e) => {
+		let t = e(P.current);
+		P.current = t, N(t);
+	}, [N]), L = f((e, t) => I((n) => n.map((n) => n.id === e ? {
+		...n,
+		...t
+	} : n)), [I]), xe = m(0), R = () => `${A}-${++xe.current}`, [z, B] = e({
+		value: le,
+		defaultValue: ue ?? "",
+		onChange: de
+	}), [V, H] = h(!1), U = m(null), W = m(null), G = m(y);
+	G.current = y;
+	let K = m(b);
+	K.current = b, p(() => () => U.current?.abort(), []);
+	let q = m(null), J = m(!0), [Se, Y] = h(!0), Ce = () => {
+		let e = q.current;
+		if (!e) return;
+		let t = e.scrollHeight - e.scrollTop - e.clientHeight <= re;
+		J.current = t, Y(t);
+	};
+	ie(() => {
+		let e = q.current;
+		e && J.current && (e.scrollTop = e.scrollHeight);
+	}, [M]);
+	let we = () => {
+		let e = q.current;
+		e && (J.current = !0, Y(!0), e.scrollTo({
+			top: e.scrollHeight,
+			behavior: be ? "auto" : "smooth"
+		}), W.current?.focus());
+	}, X = async (e, t) => {
+		let n = R();
+		I(() => [...e, {
+			id: n,
+			role: "assistant",
+			content: "",
+			status: "streaming"
+		}]), J.current = !0, Y(!0), H(!0), a(O.typing(k));
+		let r = new AbortController();
+		U.current = r;
+		let i = "";
+		try {
+			let o = await G.current?.(t, {
+				messages: e,
+				signal: r.signal
+			});
+			if (typeof o == "string") i = o;
+			else if (ae(o)) for await (let e of o) {
+				if (r.signal.aborted) break;
+				i += e, L(n, { content: i });
+			}
+			else if (!r.signal.aborted) {
+				I((e) => e.filter((e) => e.id !== n));
+				return;
+			}
+			if (r.signal.aborted) throw r.signal.reason;
+			L(n, {
+				content: i,
+				status: "done"
+			}), a(`${O.assistantSaid(k)} ${i}`);
+		} catch (e) {
+			r.signal.aborted ? (L(n, {
+				content: i,
+				status: "stopped"
+			}), a(O.stopped)) : (K.current?.(e), L(n, {
+				content: i,
+				status: "error"
+			}), a(O.error));
+		} finally {
+			U.current === r && (U.current = null), H(!1);
+		}
+	}, Z = (e) => {
+		let t = e.trim();
+		!t || V || E || (B(""), X([...P.current, {
+			id: R(),
+			role: "user",
+			content: t,
+			status: "done"
+		}], t));
+	}, Q = () => {
+		U.current && (U.current.abort(), ce?.(), W.current?.focus());
+	}, Te = (e) => {
+		let t = P.current, n = t.findIndex((t) => t.id === e) - 1;
+		for (; n >= 0 && t[n].role !== "user";) n--;
+		n < 0 || V || (X(t.slice(0, n + 1), t[n].content), W.current?.focus());
+	}, Ee = (e) => {
+		e.preventDefault(), V ? Q() : Z(z);
+	}, De = (e) => {
+		if (e.key === "Escape" && V) {
+			e.preventDefault(), Q();
+			return;
+		}
+		e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), Z(e.currentTarget.value));
+	}, { copy: Oe } = n(), [$, ke] = h(null);
+	p(() => {
+		if ($ === null) return;
+		let e = window.setTimeout(() => ke(null), 2e3);
+		return () => window.clearTimeout(e);
+	}, [$]);
+	let Ae = async (e) => {
+		await Oe(e.content) && (ke(e.id), a(O.copied));
+	}, je = M.filter((e) => e.role !== "system").length === 0, Me = M[M.length - 1], Ne = (e) => {
+		if (e.role === "system") return /* @__PURE__ */ g("p", {
+			className: d.system,
+			children: e.content
+		}, e.id);
+		let t = e.role === "user", n = e.status ?? "done", r = n === "streaming" && e.content === "", a = t ? he : me, u = !t && !V && e === Me && (n === "error" || n === "stopped");
+		return /* @__PURE__ */ _("article", {
+			className: i(d.message, t ? d.user : d.assistant),
+			"data-role": e.role,
+			"data-status": n,
+			"aria-busy": n === "streaming" || void 0,
+			children: [a != null && /* @__PURE__ */ g("div", {
+				className: d.avatar,
+				"aria-hidden": "true",
+				children: a
+			}), /* @__PURE__ */ _("div", {
+				className: d.body,
+				children: [
+					r ? /* @__PURE__ */ _("div", {
+						className: d.bubble,
+						children: [/* @__PURE__ */ _("span", {
+							className: d.dots,
+							"aria-hidden": "true",
+							children: [
+								/* @__PURE__ */ g("span", {}),
+								/* @__PURE__ */ g("span", {}),
+								/* @__PURE__ */ g("span", {})
+							]
+						}), /* @__PURE__ */ g(o, { children: O.typing(k) })]
+					}) : e.content !== "" && /* @__PURE__ */ _("div", {
+						className: d.bubble,
+						children: [/* @__PURE__ */ _(o, { children: [t ? O.youSaid : O.assistantSaid(k), " "] }), S ? S(e) : /* @__PURE__ */ g("p", {
+							className: d.text,
+							children: e.content
+						})]
+					}),
+					n === "error" && /* @__PURE__ */ _("p", {
+						className: d.error,
+						children: [/* @__PURE__ */ g(l, {
+							name: "error",
+							size: "sm"
+						}), /* @__PURE__ */ g("span", { children: e.error ?? O.error })]
+					}),
+					n === "stopped" && /* @__PURE__ */ g("p", {
+						className: d.note,
+						children: O.stopped
+					}),
+					!t && (u || C && n === "done" && e.content !== "") && /* @__PURE__ */ _("div", {
+						className: d.actions,
+						children: [C && n === "done" && e.content !== "" && /* @__PURE__ */ g(c, {
+							variant: "ghost",
+							tone: "neutral",
+							size: "sm",
+							"aria-label": $ === e.id ? O.copied : O.copy,
+							onClick: () => void Ae(e),
+							children: /* @__PURE__ */ g(l, { name: $ === e.id ? "check" : "copy" })
+						}), u && /* @__PURE__ */ g(s, {
+							variant: "ghost",
+							tone: "neutral",
+							size: "sm",
+							startIcon: /* @__PURE__ */ g(l, { name: "refresh" }),
+							onClick: () => Te(e.id),
+							children: O.retry
+						})]
+					})
+				]
+			})]
+		}, e.id);
+	};
+	return /* @__PURE__ */ _("section", {
+		...D,
+		"aria-label": ye ?? (D["aria-labelledby"] ? void 0 : O.region),
+		className: i(d.root, ve),
+		children: [/* @__PURE__ */ _("div", {
+			className: d.logWrap,
+			children: [/* @__PURE__ */ g(u, {
+				className: d.log,
+				viewportRef: q,
+				onViewportScroll: Ce,
+				"aria-label": O.log,
+				"aria-busy": V || void 0,
+				tabIndex: 0,
+				children: /* @__PURE__ */ _("div", {
+					className: d.messages,
+					children: [je && /* @__PURE__ */ _("div", {
+						className: d.empty,
+						children: [fe ?? /* @__PURE__ */ g("p", {
+							className: d.emptyTitle,
+							children: O.emptyTitle
+						}), x && x.length > 0 && /* @__PURE__ */ g("div", {
+							role: "group",
+							"aria-label": O.suggestions,
+							className: d.suggestions,
+							children: x.map((e) => /* @__PURE__ */ g(s, {
+								variant: "outline",
+								tone: "neutral",
+								size: "sm",
+								disabled: E,
+								className: d.suggestion,
+								onClick: () => Z(e),
+								children: e
+							}, e))
+						})]
+					}), M.map(Ne)]
+				})
+			}), !Se && !je && /* @__PURE__ */ g(c, {
+				variant: "soft",
+				tone: "neutral",
+				size: "sm",
+				className: d.jump,
+				"aria-label": O.scrollToLatest,
+				onClick: we,
+				children: /* @__PURE__ */ g(l, { name: "arrow-down" })
+			})]
+		}), /* @__PURE__ */ _("form", {
+			className: d.composer,
+			onSubmit: Ee,
+			children: [
+				/* @__PURE__ */ _("div", {
+					className: d.inputRow,
+					children: [/* @__PURE__ */ g(ee, {
+						ref: W,
+						className: d.input,
+						"aria-label": O.input,
+						"aria-describedby": j,
+						placeholder: ge ?? O.placeholder,
+						value: z,
+						onValueChange: B,
+						onKeyDown: De,
+						autoResize: !0,
+						rows: 1,
+						maxRows: 6,
+						maxLength: T,
+						showCount: T !== void 0,
+						disabled: E,
+						enterKeyHint: "send"
+					}), V ? /* @__PURE__ */ g(c, {
+						type: "submit",
+						variant: "soft",
+						tone: "neutral",
+						"aria-label": O.stop,
+						children: /* @__PURE__ */ g(oe, {})
+					}) : /* @__PURE__ */ g(c, {
+						type: "submit",
+						"aria-label": O.send,
+						disabled: E || z.trim() === "",
+						children: /* @__PURE__ */ g(l, { name: "arrow-up" })
+					})]
+				}),
+				/* @__PURE__ */ g(o, {
+					id: j,
+					children: O.hint
+				}),
+				w != null && /* @__PURE__ */ g("p", {
+					className: d.disclaimer,
+					children: w
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { v as Chat };

package/dist/components/data-display/Chat/Chat.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1vnqg_8`,t=`_logWrap_1vnqg_18`,n=`_log_1vnqg_18`,r=`_messages_1vnqg_30`,i=`_empty_1vnqg_39`,a=`_emptyTitle_1vnqg_48`,o=`_suggestions_1vnqg_56`,s=`_suggestion_1vnqg_56`,c=`_message_1vnqg_30`,l=`_enter_1vnqg_1`,u=`_user_1vnqg_80`,d=`_assistant_1vnqg_85`,f=`_avatar_1vnqg_89`,p=`_body_1vnqg_94`,m=`_bubble_1vnqg_105`,h=`_text_1vnqg_128`,g=`_dots_1vnqg_134`,_=`_bounce_1vnqg_1`,v=`_error_1vnqg_185`,y=`_note_1vnqg_194`,b=`_actions_1vnqg_201`,x=`_system_1vnqg_207`,S=`_jump_1vnqg_217`,C=`_composer_1vnqg_230`,w=`_inputRow_1vnqg_238`,T=`_input_1vnqg_238`,E=`_disclaimer_1vnqg_248`,D={root:e,logWrap:t,log:n,messages:r,empty:i,emptyTitle:a,suggestions:o,suggestion:s,message:c,enter:l,user:u,assistant:d,avatar:f,body:p,bubble:m,text:h,dots:g,bounce:_,error:v,note:y,actions:b,system:x,jump:S,composer:C,inputRow:w,input:T,disclaimer:E};exports.actions=b,exports.assistant=d,exports.avatar=f,exports.body=p,exports.bounce=_,exports.bubble=m,exports.composer=C,exports.default=D,exports.disclaimer=E,exports.dots=g,exports.empty=i,exports.emptyTitle=a,exports.enter=l,exports.error=v,exports.input=T,exports.inputRow=w,exports.jump=S,exports.log=n,exports.logWrap=t,exports.message=c,exports.messages=r,exports.note=y,exports.root=e,exports.suggestion=s,exports.suggestions=o,exports.system=x,exports.text=h,exports.user=u;

package/dist/components/data-display/Chat/Chat.module.css.mjs

@@ -0,0 +1,32 @@
+//#region src/components/data-display/Chat/Chat.module.css
+var e = "_root_1vnqg_8", t = "_logWrap_1vnqg_18", n = "_log_1vnqg_18", r = "_messages_1vnqg_30", i = "_empty_1vnqg_39", a = "_emptyTitle_1vnqg_48", o = "_suggestions_1vnqg_56", s = "_suggestion_1vnqg_56", c = "_message_1vnqg_30", l = "_enter_1vnqg_1", u = "_user_1vnqg_80", d = "_assistant_1vnqg_85", f = "_avatar_1vnqg_89", p = "_body_1vnqg_94", m = "_bubble_1vnqg_105", h = "_text_1vnqg_128", g = "_dots_1vnqg_134", _ = "_bounce_1vnqg_1", v = "_error_1vnqg_185", y = "_note_1vnqg_194", b = "_actions_1vnqg_201", x = "_system_1vnqg_207", S = "_jump_1vnqg_217", C = "_composer_1vnqg_230", w = "_inputRow_1vnqg_238", T = "_input_1vnqg_238", E = "_disclaimer_1vnqg_248", D = {
+	root: e,
+	logWrap: t,
+	log: n,
+	messages: r,
+	empty: i,
+	emptyTitle: a,
+	suggestions: o,
+	suggestion: s,
+	message: c,
+	enter: l,
+	user: u,
+	assistant: d,
+	avatar: f,
+	body: p,
+	bubble: m,
+	text: h,
+	dots: g,
+	bounce: _,
+	error: v,
+	note: y,
+	actions: b,
+	system: x,
+	jump: S,
+	composer: C,
+	inputRow: w,
+	input: T,
+	disclaimer: E
+};
+//#endregion
+export { b as actions, d as assistant, f as avatar, p as body, _ as bounce, m as bubble, C as composer, D as default, E as disclaimer, g as dots, i as empty, a as emptyTitle, l as enter, v as error, T as input, w as inputRow, S as jump, n as log, t as logWrap, c as message, r as messages, y as note, e as root, s as suggestion, o as suggestions, x as system, h as text, u as user };

package/dist/components/data-display/Chat/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Chat';
+export * from './streams';

package/dist/components/data-display/Chat/streams.cjs.js

@@ -0,0 +1,4 @@
+function e(e){let t=e instanceof Response?e.body:e;if(!t)throw Error(`readTextStream: the response has no body to read.`);return t}async function*t(t){let n=e(t).getReader(),r=new TextDecoder;try{for(;;){let{done:e,value:t}=await n.read();if(e)break;let i=r.decode(t,{stream:!0});i&&(yield i)}let e=r.decode();e&&(yield e)}finally{n.releaseLock()}}async function*n(e){let n=``,r=function*(e){let t=n.split(/\r?\n\r?\n/);n=e?``:t.pop()??``;for(let e of t){let t=e.split(/\r?\n/).filter(e=>e.startsWith(`data:`)).map(e=>e.slice(5).replace(/^ /,``));t.length>0&&(yield t.join(`
+`))}};for await(let i of t(e))n+=i,yield*r(!1);n+=`
+
+`,yield*r(!0)}exports.readEventStream=n,exports.readTextStream=t;

package/dist/components/data-display/Chat/streams.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Helpers for turning a streaming HTTP response into the `AsyncIterable<string>`
+ * that `Chat`'s `onSend` can return. They read with `getReader()`, so they
+ * work in browsers without async iteration of `ReadableStream`.
+ */
+type ByteSource = Response | ReadableStream<Uint8Array> | null | undefined;
+/**
+ * Yields decoded text chunks from a plain streaming response (a body that is
+ * just the reply text, sent in pieces).
+ *
+ * ```ts
+ * onSend={async function* (text, { signal }) {
+ *   const res = await fetch("/api/chat", { method: "POST", body: text, signal });
+ *   yield* readTextStream(res);
+ * }}
+ * ```
+ */
+export declare function readTextStream(source: ByteSource): AsyncGenerator<string>;
+/**
+ * Yields the `data` of each server-sent event (`text/event-stream`), the
+ * format most LLM APIs stream in. Multi-line data is joined with `\n`. Parse
+ * each payload yourself, since every API shapes it differently.
+ *
+ * ```ts
+ * for await (const data of readEventStream(res)) {
+ *   if (data === "[DONE]") break;
+ *   yield JSON.parse(data).delta ?? "";
+ * }
+ * ```
+ */
+export declare function readEventStream(source: ByteSource): AsyncGenerator<string>;
+export {};

package/dist/components/data-display/Chat/streams.mjs

@@ -0,0 +1,35 @@
+//#region src/components/data-display/Chat/streams.ts
+function e(e) {
+	let t = e instanceof Response ? e.body : e;
+	if (!t) throw Error("readTextStream: the response has no body to read.");
+	return t;
+}
+async function* t(t) {
+	let n = e(t).getReader(), r = new TextDecoder();
+	try {
+		for (;;) {
+			let { done: e, value: t } = await n.read();
+			if (e) break;
+			let i = r.decode(t, { stream: !0 });
+			i && (yield i);
+		}
+		let e = r.decode();
+		e && (yield e);
+	} finally {
+		n.releaseLock();
+	}
+}
+async function* n(e) {
+	let n = "", r = function* (e) {
+		let t = n.split(/\r?\n\r?\n/);
+		n = e ? "" : t.pop() ?? "";
+		for (let e of t) {
+			let t = e.split(/\r?\n/).filter((e) => e.startsWith("data:")).map((e) => e.slice(5).replace(/^ /, ""));
+			t.length > 0 && (yield t.join("\n"));
+		}
+	};
+	for await (let i of t(e)) n += i, yield* r(!1);
+	n += "\n\n", yield* r(!0);
+}
+//#endregion
+export { n as readEventStream, t as readTextStream };

package/dist/components/data-display/DataGrid/DataGrid.module.css.cjs.js

@@ -1 +1 @@
-var e=`_frame_r500b_37`,t=`_plain_r500b_71`,n=`_striped_r500b_79`,r=`_body_r500b_79`,i=`_row_r500b_79`,a=`_outline_r500b_87`,o=`_compact_r500b_103`,s=`_comfortable_r500b_115`,c=`_spacious_r500b_127`,l=`_scroll_r500b_139`,u=`_table_r500b_149`,d=`_cell_r500b_173`,f=`_hoverable_r500b_227`,p=`_clickable_r500b_235`,m=`_head_r500b_279`,h=`_sticky_r500b_305`,g=`_rowHeader_r500b_317`,_=`_alignStart_r500b_331`,v=`_alignCenter_r500b_339`,y=`_alignEnd_r500b_347`,b=`_numeric_r500b_355`,x=`_selectCell_r500b_371`,S=`_sortableCell_r500b_383`,C=`_sortButton_r500b_391`,w=`_sortLabel_r500b_475`,T=`_sortIcon_r500b_477`,E=`_sortPriority_r500b_529`,D=`_emptyCell_r500b_545`,O=`_loadingInline_r500b_557`,k=`_loadingOverlay_r500b_569`,A=`_footer_r500b_589`,j=`_status_r500b_613`,M=`_paging_r500b_625`,N=`_range_r500b_641`,P=`_fixed_r500b_695`,F=`_hasHeaderEnd_r500b_705`,I={frame:e,plain:t,striped:n,body:r,row:i,outline:a,compact:o,comfortable:s,spacious:c,scroll:l,table:u,cell:d,hoverable:f,clickable:p,head:m,sticky:h,rowHeader:g,alignStart:_,alignCenter:v,alignEnd:y,numeric:b,selectCell:x,sortableCell:S,sortButton:C,sortLabel:w,sortIcon:T,sortPriority:E,emptyCell:D,loadingInline:O,loadingOverlay:k,footer:A,status:j,paging:M,range:N,fixed:P,hasHeaderEnd:F};exports.alignCenter=v,exports.alignEnd=y,exports.alignStart=_,exports.body=r,exports.cell=d,exports.clickable=p,exports.comfortable=s,exports.compact=o,exports.default=I,exports.emptyCell=D,exports.fixed=P,exports.footer=A,exports.frame=e,exports.hasHeaderEnd=F,exports.head=m,exports.hoverable=f,exports.loadingInline=O,exports.loadingOverlay=k,exports.numeric=b,exports.outline=a,exports.paging=M,exports.plain=t,exports.range=N,exports.row=i,exports.rowHeader=g,exports.scroll=l,exports.selectCell=x,exports.sortButton=C,exports.sortIcon=T,exports.sortLabel=w,exports.sortPriority=E,exports.sortableCell=S,exports.spacious=c,exports.status=j,exports.sticky=h,exports.striped=n,exports.table=u;
+var e=`_frame_uic8v_19`,t=`_plain_uic8v_36`,n=`_striped_uic8v_40`,r=`_body_uic8v_40`,i=`_row_uic8v_40`,a=`_outline_uic8v_44`,o=`_compact_uic8v_52`,s=`_comfortable_uic8v_58`,c=`_spacious_uic8v_64`,l=`_scroll_uic8v_70`,u=`_table_uic8v_75`,d=`_cell_uic8v_87`,f=`_hoverable_uic8v_114`,p=`_clickable_uic8v_118`,m=`_head_uic8v_140`,h=`_sticky_uic8v_153`,g=`_rowHeader_uic8v_159`,_=`_alignStart_uic8v_166`,v=`_alignCenter_uic8v_170`,y=`_alignEnd_uic8v_174`,b=`_numeric_uic8v_178`,x=`_selectCell_uic8v_186`,S=`_sortableCell_uic8v_192`,C=`_sortButton_uic8v_196`,w=`_sortLabel_uic8v_238`,T=`_sortIcon_uic8v_239`,E=`_sortPriority_uic8v_265`,D=`_emptyCell_uic8v_273`,O=`_loadingInline_uic8v_279`,k=`_loadingOverlay_uic8v_285`,A=`_footer_uic8v_295`,j=`_status_uic8v_307`,M=`_paging_uic8v_313`,N=`_range_uic8v_321`,P=`_fixed_uic8v_348`,F=`_hasHeaderEnd_uic8v_353`,I={frame:e,plain:t,striped:n,body:r,row:i,outline:a,compact:o,comfortable:s,spacious:c,scroll:l,table:u,cell:d,hoverable:f,clickable:p,head:m,sticky:h,rowHeader:g,alignStart:_,alignCenter:v,alignEnd:y,numeric:b,selectCell:x,sortableCell:S,sortButton:C,sortLabel:w,sortIcon:T,sortPriority:E,emptyCell:D,loadingInline:O,loadingOverlay:k,footer:A,status:j,paging:M,range:N,fixed:P,hasHeaderEnd:F};exports.alignCenter=v,exports.alignEnd=y,exports.alignStart=_,exports.body=r,exports.cell=d,exports.clickable=p,exports.comfortable=s,exports.compact=o,exports.default=I,exports.emptyCell=D,exports.fixed=P,exports.footer=A,exports.frame=e,exports.hasHeaderEnd=F,exports.head=m,exports.hoverable=f,exports.loadingInline=O,exports.loadingOverlay=k,exports.numeric=b,exports.outline=a,exports.paging=M,exports.plain=t,exports.range=N,exports.row=i,exports.rowHeader=g,exports.scroll=l,exports.selectCell=x,exports.sortButton=C,exports.sortIcon=T,exports.sortLabel=w,exports.sortPriority=E,exports.sortableCell=S,exports.spacious=c,exports.status=j,exports.sticky=h,exports.striped=n,exports.table=u;

package/dist/components/data-display/DataGrid/DataGrid.module.css.mjs

@@ -1,5 +1,5 @@
 //#region src/components/data-display/DataGrid/DataGrid.module.css
-var e = "_frame_r500b_37", t = "_plain_r500b_71", n = "_striped_r500b_79", r = "_body_r500b_79", i = "_row_r500b_79", a = "_outline_r500b_87", o = "_compact_r500b_103", s = "_comfortable_r500b_115", c = "_spacious_r500b_127", l = "_scroll_r500b_139", u = "_table_r500b_149", d = "_cell_r500b_173", f = "_hoverable_r500b_227", p = "_clickable_r500b_235", m = "_head_r500b_279", h = "_sticky_r500b_305", g = "_rowHeader_r500b_317", _ = "_alignStart_r500b_331", v = "_alignCenter_r500b_339", y = "_alignEnd_r500b_347", b = "_numeric_r500b_355", x = "_selectCell_r500b_371", S = "_sortableCell_r500b_383", C = "_sortButton_r500b_391", w = "_sortLabel_r500b_475", T = "_sortIcon_r500b_477", E = "_sortPriority_r500b_529", D = "_emptyCell_r500b_545", O = "_loadingInline_r500b_557", k = "_loadingOverlay_r500b_569", A = "_footer_r500b_589", j = "_status_r500b_613", M = "_paging_r500b_625", N = "_range_r500b_641", P = "_fixed_r500b_695", F = "_hasHeaderEnd_r500b_705", I = {
+var e = "_frame_uic8v_19", t = "_plain_uic8v_36", n = "_striped_uic8v_40", r = "_body_uic8v_40", i = "_row_uic8v_40", a = "_outline_uic8v_44", o = "_compact_uic8v_52", s = "_comfortable_uic8v_58", c = "_spacious_uic8v_64", l = "_scroll_uic8v_70", u = "_table_uic8v_75", d = "_cell_uic8v_87", f = "_hoverable_uic8v_114", p = "_clickable_uic8v_118", m = "_head_uic8v_140", h = "_sticky_uic8v_153", g = "_rowHeader_uic8v_159", _ = "_alignStart_uic8v_166", v = "_alignCenter_uic8v_170", y = "_alignEnd_uic8v_174", b = "_numeric_uic8v_178", x = "_selectCell_uic8v_186", S = "_sortableCell_uic8v_192", C = "_sortButton_uic8v_196", w = "_sortLabel_uic8v_238", T = "_sortIcon_uic8v_239", E = "_sortPriority_uic8v_265", D = "_emptyCell_uic8v_273", O = "_loadingInline_uic8v_279", k = "_loadingOverlay_uic8v_285", A = "_footer_uic8v_295", j = "_status_uic8v_307", M = "_paging_uic8v_313", N = "_range_uic8v_321", P = "_fixed_uic8v_348", F = "_hasHeaderEnd_uic8v_353", I = {
 	frame: e,
 	plain: t,
 	striped: n,

package/dist/components/data-display/VirtualList/VirtualList.module.css.cjs.js

@@ -1 +1 @@
-var e=`_root_llhaj_13`,t=`_list_llhaj_23`,n=`_item_llhaj_33`,r=`_empty_llhaj_47`,i={root:e,list:t,item:n,empty:r};exports.default=i,exports.empty=r,exports.item=n,exports.list=t,exports.root=e;
+var e=`_root_boa19_7`,t=`_list_boa19_12`,n=`_item_boa19_17`,r=`_empty_boa19_24`,i={root:e,list:t,item:n,empty:r};exports.default=i,exports.empty=r,exports.item=n,exports.list=t,exports.root=e;

package/dist/components/data-display/VirtualList/VirtualList.module.css.mjs

@@ -1,5 +1,5 @@
 //#region src/components/data-display/VirtualList/VirtualList.module.css
-var e = "_root_llhaj_13", t = "_list_llhaj_23", n = "_item_llhaj_33", r = "_empty_llhaj_47", i = {
+var e = "_root_boa19_7", t = "_list_boa19_12", n = "_item_boa19_17", r = "_empty_boa19_24", i = {
 	root: e,
 	list: t,
 	item: n,

package/dist/components/feedback/ErrorSummary/ErrorSummary.module.css.cjs.js

@@ -1 +1 @@
-var e=`_root_10u06_7`,t=`_list_10u06_17`,n={root:e,list:t};exports.default=n,exports.list=t,exports.root=e;
+var e=`_root_e770i_4`,t=`_list_e770i_9`,n={root:e,list:t};exports.default=n,exports.list=t,exports.root=e;

package/dist/components/feedback/ErrorSummary/ErrorSummary.module.css.mjs

@@ -1,5 +1,5 @@
 //#region src/components/feedback/ErrorSummary/ErrorSummary.module.css
-var e = "_root_10u06_7", t = "_list_10u06_17", n = {
+var e = "_root_e770i_4", t = "_list_e770i_9", n = {
 	root: e,
 	list: t
 };