themelia-react-ui 0.0.0-stage → 1.0.1

package/dist/features/ai-chat.js

@@ -0,0 +1,567 @@
+"use client";
+import { interpolateString as e, useStrings as t } from "../lib/strings.js";
+import { t as n } from "../utils-C2EKeIw3.js";
+import { n as r } from "../buttons-Co6GavvM.js";
+import { a as i, r as a } from "../typography-Cv8MT-82.js";
+import { t as o } from "../structure-MvKVq-oL.js";
+import { t as s } from "../badge-BZXZT9wd.js";
+import { d as c } from "../text-inputs-Dh9XGyiS.js";
+import { l } from "../data-display-cWIRdeaf.js";
+import { S as u, _ as d, a as f, b as p, d as m, h, l as g, p as _, r as v, s as y, t as b, y as x } from "../ai-artifact-B5tPpXnS.js";
+import { useCallback as S, useEffect as C, useRef as w, useState as T } from "react";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { ArrowDown as k, ArrowUp as A, Loader2 as j, Paperclip as M, Sparkles as N, Square as P, X as F } from "lucide-react";
+//#region src/components/features/ai-chat/ai-chat.strings.ts
+var I = {
+	placeholder: "Ask anything…",
+	attachAria: "Attach files",
+	submitAria: "Send message",
+	stopAria: "Stop generating",
+	modelPickerAria: "Choose model",
+	hint: "Press {{submitKey}} to send · {{newlineKey}} for newline"
+}, L = {
+	transcriptAria: "Conversation messages",
+	empty: "No messages yet.",
+	scrollToBottom: "Jump to latest",
+	scrollToBottomAria: "Scroll to bottom"
+}, R = {
+	header: "In queue",
+	cancelAria: "Remove from queue",
+	queuedLabel: "Queued",
+	runningLabel: "Running"
+}, z = { header: "Try" }, B = { pending: "Thinking…" }, V = {
+	prompt: I,
+	conversation: L,
+	queue: R,
+	suggestions: z,
+	message: B,
+	emptyTitle: "Start a conversation",
+	emptyDescription: "Ask a question, share context, or attach a file to get going.",
+	disabledAnnouncement: "Chat is disabled"
+};
+//#endregion
+//#region src/components/features/ai-chat/partials/ai-chat-attachments-strip.tsx
+function H({ attachments: e, onRemove: t, onOpen: r, className: i }) {
+	return e.length === 0 ? null : /* @__PURE__ */ D(o, {
+		direction: "horizontal",
+		gap: "sm",
+		className: n("ai-chat-attachments-strip--component", i),
+		children: e.map((e) => /* @__PURE__ */ D(h, {
+			name: e.name,
+			meta: e.meta,
+			kind: e.kind,
+			icon: e.icon,
+			thumbnailUrl: e.thumbnailUrl,
+			progress: e.progress,
+			errored: e.errored,
+			onOpen: r ? () => r(e) : void 0,
+			onRemove: t ? () => t(e.id) : void 0
+		}, e.id))
+	});
+}
+H.displayName = "AiChatAttachmentsStrip";
+//#endregion
+//#region src/components/features/ai-chat/hooks/use-ai-chat-scroll.ts
+function U({ threshold: e = 80, dependency: t, disableAutoScroll: n = !1 } = {}) {
+	let r = w(null), i = w(null), [a, o] = T(!0), s = S((e = "smooth") => {
+		i.current?.scrollIntoView({
+			behavior: e,
+			block: "end"
+		});
+	}, []);
+	return C(() => {
+		let t = r.current;
+		if (!t) return;
+		let n = () => {
+			let n = t.scrollHeight - t.clientHeight - t.scrollTop;
+			o(n <= e);
+		};
+		return n(), t.addEventListener("scroll", n, { passive: !0 }), () => t.removeEventListener("scroll", n);
+	}, [e]), C(() => {
+		if (n || !a) return;
+		let e = window.requestAnimationFrame(() => s("auto"));
+		return () => window.cancelAnimationFrame(e);
+	}, [t, n]), {
+		containerRef: r,
+		endRef: i,
+		isAtBottom: a,
+		scrollToBottom: s
+	};
+}
+//#endregion
+//#region src/components/features/ai-chat/partials/ai-chat-conversation.tsx
+function W({ messages: e, renderMessage: a, intro: s, footer: c, empty: l, disableAutoScroll: u, className: d, strings: f }) {
+	let p = t(L, f), { containerRef: m, endRef: h, isAtBottom: g, scrollToBottom: _ } = U({
+		dependency: e.length,
+		disableAutoScroll: u
+	}), v = e.length === 0 && !s;
+	return /* @__PURE__ */ O("div", {
+		className: n("ai-chat-conversation--component relative flex h-full min-h-0 flex-col", d),
+		children: [/* @__PURE__ */ O("div", {
+			ref: m,
+			tabIndex: 0,
+			"aria-label": p.transcriptAria,
+			className: "flex-1 overflow-y-auto p-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+			children: [
+				!!s && /* @__PURE__ */ D("div", {
+					className: "mb-space-xl",
+					children: s
+				}),
+				v ? l ?? /* @__PURE__ */ D("div", {
+					className: "flex h-full items-center justify-center p-surface-lg",
+					children: /* @__PURE__ */ D(i, {
+						type: "secondary",
+						children: p.empty
+					})
+				}) : /* @__PURE__ */ D(o, {
+					render: /* @__PURE__ */ D("ol", {}),
+					gap: "xl",
+					className: "ai-chat-conversation--messages",
+					children: e.map((t, n) => {
+						let r = {
+							isLast: n === e.length - 1,
+							index: n
+						};
+						return /* @__PURE__ */ D("li", { children: a(t, r) }, t.id);
+					})
+				}),
+				!!c && /* @__PURE__ */ D("div", {
+					className: "mt-space-xl",
+					children: c
+				}),
+				/* @__PURE__ */ D("div", {
+					ref: h,
+					"aria-hidden": !0,
+					className: "h-px"
+				})
+			]
+		}), !g && /* @__PURE__ */ D("div", {
+			className: "ai-chat-conversation--jump flex shrink-0 justify-center border-t border-border/50 bg-background/95 px-space-md py-space-sm",
+			children: /* @__PURE__ */ O(r, {
+				type: "button",
+				tone: "secondary",
+				buttonStyle: "solid",
+				"aria-label": p.scrollToBottomAria,
+				onClick: () => _("smooth"),
+				className: n("rounded-full shadow-sm max-sm:size-action-sm max-sm:p-0", "border border-border/60"),
+				children: [/* @__PURE__ */ D(k, { className: "size-icon-md" }), /* @__PURE__ */ D(i, {
+					tag: "span",
+					size: "pxs",
+					className: "max-sm:sr-only",
+					children: p.scrollToBottom
+				})]
+			})
+		})]
+	});
+}
+W.displayName = "AiChatConversation";
+//#endregion
+//#region src/components/features/ai-chat/partials/ai-chat-empty-state.tsx
+function G({ title: e = "Start a conversation", description: t, icon: r = N, below: i, className: a }) {
+	let s = /* @__PURE__ */ D(r, {
+		className: "size-icon",
+		"aria-hidden": "true"
+	});
+	return /* @__PURE__ */ O(o, {
+		gap: "md",
+		align: "center",
+		justify: "center",
+		className: n("ai-chat-empty-state--component h-full text-center", a),
+		children: [/* @__PURE__ */ D(l, {
+			title: e,
+			description: t ?? !1,
+			media: s,
+			mediaVariant: "icon",
+			padding: "md",
+			className: "w-full"
+		}), !!i && /* @__PURE__ */ D("div", {
+			className: "w-full max-w-2xl",
+			children: i
+		})]
+	});
+}
+G.displayName = "AiChatEmptyState";
+//#endregion
+//#region src/components/features/ai-chat/partials/ai-chat-message.tsx
+function K({ message: e, onCopy: r, onRegenerate: i, onAttachmentOpen: a, className: s, strings: c }) {
+	let l = t(B, c), d = [], f = [];
+	for (let t of e.parts) t.type === "text" ? d.push(t) : f.push(t);
+	let p = d.map((e) => e.type === "text" ? e.plain ?? J(e.content) : "").filter(Boolean).join("\n") || void 0, m = e.pending ? /* @__PURE__ */ D(x, { children: l.pending }) : d.length === 0 && f.length > 0 ? null : /* @__PURE__ */ D(o, {
+		gap: "md",
+		children: d.map((e, t) => e.type === "text" ? /* @__PURE__ */ D("div", {
+			className: "whitespace-pre-wrap",
+			children: e.content
+		}, t) : null)
+	});
+	return /* @__PURE__ */ O(o, {
+		gap: "md",
+		className: n("ai-chat-message--component", s),
+		children: [
+			(m !== null || e.pending) && /* @__PURE__ */ D(u, {
+				role: e.role,
+				avatar: e.avatar,
+				authorName: e.authorName,
+				timestamp: e.timestamp,
+				plainText: p,
+				loading: e.loading,
+				onCopy: p ? r ?? (() => void 0) : void 0,
+				onRegenerate: i,
+				children: m
+			}),
+			f.length > 0 && /* @__PURE__ */ D(o, {
+				gap: "md",
+				className: n(e.role === "user" ? "pr-9 sm:pl-12" : "pl-9 sm:pr-12"),
+				children: f.map((e, t) => /* @__PURE__ */ D(q, {
+					part: e,
+					onAttachmentOpen: a
+				}, t))
+			}),
+			!!e.trailing && /* @__PURE__ */ D("div", {
+				className: n(e.role === "user" ? "pr-9 sm:pl-12" : "pl-9 sm:pr-12"),
+				children: e.trailing
+			})
+		]
+	});
+}
+K.displayName = "AiChatMessage";
+function q({ part: e, onAttachmentOpen: t }) {
+	switch (e.type) {
+		case "text": return /* @__PURE__ */ D(i, { children: e.content });
+		case "reasoning": return /* @__PURE__ */ D(y, {
+			streaming: e.streaming,
+			durationSeconds: e.durationSeconds,
+			children: e.content
+		});
+		case "chain-of-thought": return /* @__PURE__ */ D(f, {
+			steps: e.steps,
+			streaming: e.streaming
+		});
+		case "tool": return /* @__PURE__ */ D(p, {
+			name: e.name,
+			status: e.status,
+			icon: e.icon,
+			args: e.args,
+			result: e.result,
+			error: e.error,
+			durationMs: e.durationMs,
+			defaultExpanded: e.defaultExpanded
+		});
+		case "code": return /* @__PURE__ */ D(d, {
+			code: e.code,
+			language: e.language,
+			filename: e.filename,
+			showLineNumbers: e.showLineNumbers,
+			highlightLines: e.highlightLines
+		});
+		case "attachments": return /* @__PURE__ */ D(H, {
+			attachments: e.items,
+			onOpen: t ? (e) => t(e.id) : void 0
+		});
+		case "sources": return /* @__PURE__ */ D(g, {
+			sources: e.items,
+			variant: e.variant,
+			defaultExpanded: e.defaultExpanded
+		});
+		case "task": return /* @__PURE__ */ D(v, { task: e.task });
+		case "artifact": return /* @__PURE__ */ D(b, {
+			title: e.title,
+			subtitle: e.subtitle,
+			icon: e.icon,
+			copyText: e.copyText,
+			actions: e.actions,
+			onOpen: e.onOpen,
+			onDownload: e.onDownload,
+			children: e.body
+		});
+		case "confirmation": return /* @__PURE__ */ D(m, {
+			title: e.title,
+			description: e.description,
+			tone: e.tone,
+			status: e.status,
+			details: e.details,
+			onApprove: e.onApprove,
+			onReject: e.onReject
+		});
+		case "custom": return /* @__PURE__ */ D(E, { children: e.render() });
+		default: return null;
+	}
+}
+function J(e) {
+	return typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(J).join("") : "";
+}
+//#endregion
+//#region src/components/features/ai-chat/partials/ai-chat-prompt-input.tsx
+function Y({ value: a, onValueChange: o, onSubmit: s, onStop: l, streaming: u = !1, disabled: d = !1, attachments: f = [], onRemoveAttachment: p, onAttach: m, showAttach: h, leadingActions: g, trailingActions: _, hideHint: v = !1, minRows: y = 1, maxRows: b = 8, autoFocus: x = !1, submitKeyLabel: C = "↩", className: T, strings: E }) {
+	let k = t(I, E), j = w(null), N = !u && !d && (a.trim().length > 0 || f.length > 0), F = S(() => {
+		N && s?.({
+			text: a,
+			attachments: f
+		});
+	}, [
+		N,
+		s,
+		a,
+		f
+	]), L = S((e) => {
+		e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), F());
+	}, [F]), R = h ?? !!m;
+	return /* @__PURE__ */ O("div", {
+		className: n("ai-chat-prompt-input--component", "rounded-radius-lg border border-border bg-card transition-colors duration-150", "focus-within:border-foreground/20 focus-within:ring-2 focus-within:ring-ring/30", d && "opacity-60 pointer-events-none", T),
+		children: [
+			f.length > 0 && /* @__PURE__ */ D("div", {
+				className: "border-b border-border/60 p-surface-xs",
+				children: /* @__PURE__ */ D(H, {
+					attachments: f,
+					onRemove: p
+				})
+			}),
+			/* @__PURE__ */ D(c, {
+				ref: j,
+				value: a,
+				onChange: (e) => o(e.target.value),
+				onKeyDown: L,
+				placeholder: k.placeholder,
+				autoResize: !0,
+				minRows: y,
+				maxRows: b,
+				autoFocus: x,
+				disabled: d,
+				className: n("!border-0 !bg-transparent !shadow-none focus-visible:!ring-0 resize-none px-control py-2.5")
+			}),
+			/* @__PURE__ */ O("div", {
+				className: "flex items-center gap-space-xs border-t border-border/60 px-surface-xs py-space-sm",
+				children: [
+					g,
+					R && /* @__PURE__ */ D(r, {
+						type: "button",
+						tone: "secondary",
+						buttonStyle: "ghost",
+						size: "sm",
+						iconOnly: !0,
+						"aria-label": k.attachAria,
+						onClick: m,
+						disabled: d,
+						children: /* @__PURE__ */ D(M, { className: "size-icon" })
+					}),
+					/* @__PURE__ */ O("div", {
+						className: "ml-auto flex items-center gap-space-xs",
+						children: [_, u ? /* @__PURE__ */ D(r, {
+							type: "button",
+							tone: "secondary",
+							buttonStyle: "solid",
+							size: "sm",
+							iconOnly: !0,
+							"aria-label": k.stopAria,
+							onClick: l,
+							children: /* @__PURE__ */ D(P, { className: "size-icon-md fill-current" })
+						}) : /* @__PURE__ */ D(r, {
+							type: "button",
+							tone: "primary",
+							buttonStyle: "solid",
+							size: "sm",
+							iconOnly: !0,
+							"aria-label": k.submitAria,
+							onClick: F,
+							disabled: !N,
+							children: /* @__PURE__ */ D(A, { className: "size-icon" })
+						})]
+					})
+				]
+			}),
+			!v && /* @__PURE__ */ D("div", {
+				className: "px-surface-xs pb-surface-xs",
+				children: /* @__PURE__ */ D(i, {
+					size: "xs",
+					type: "discrete",
+					children: e(k.hint, {
+						submitKey: C,
+						newlineKey: "⇧↩"
+					})
+				})
+			})
+		]
+	});
+}
+Y.displayName = "AiChatPromptInput";
+//#endregion
+//#region src/components/features/ai-chat/partials/ai-chat-queue.tsx
+function X({ items: e, hideHeader: c = !1, onCancel: l, className: u, strings: d }) {
+	let f = t(R, d);
+	return e.length === 0 ? null : /* @__PURE__ */ O("div", {
+		className: n("ai-chat-queue--component", "rounded-radius border border-border/60 bg-muted/20 p-surface-xs", u),
+		children: [!c && /* @__PURE__ */ O(a, {
+			className: "mb-1.5 px-1",
+			children: [
+				f.header,
+				" · ",
+				e.length
+			]
+		}), /* @__PURE__ */ D(o, {
+			render: /* @__PURE__ */ D("ul", {}),
+			gap: "xs",
+			className: "ai-chat-queue--list",
+			children: e.map((e) => {
+				let t = e.status ?? "queued";
+				return /* @__PURE__ */ O("li", {
+					className: "flex items-center gap-space-md rounded-radius-md bg-card px-space-md py-space-sm",
+					children: [
+						t === "running" ? /* @__PURE__ */ D(j, { className: "size-icon-md shrink-0 animate-spin text-primary-accent" }) : /* @__PURE__ */ D("span", {
+							"aria-hidden": !0,
+							className: "size-2 shrink-0 rounded-full bg-muted-foreground/50"
+						}),
+						/* @__PURE__ */ D(i, {
+							className: "flex-1 truncate",
+							children: e.label
+						}),
+						/* @__PURE__ */ D(s, {
+							tone: t === "running" ? "primary" : "secondary",
+							children: t === "running" ? f.runningLabel : f.queuedLabel
+						}),
+						(!!e.onCancel || !!l) && /* @__PURE__ */ D(r, {
+							type: "button",
+							tone: "secondary",
+							buttonStyle: "ghost",
+							size: "sm",
+							iconOnly: !0,
+							"aria-label": f.cancelAria,
+							onClick: () => {
+								e.onCancel?.(), l?.(e.id);
+							},
+							children: /* @__PURE__ */ D(F, { className: "size-icon-md" })
+						})
+					]
+				}, e.id);
+			})
+		})]
+	});
+}
+X.displayName = "AiChatQueue";
+//#endregion
+//#region src/components/features/ai-chat/partials/ai-chat-suggestions-row.tsx
+function Z({ suggestions: e, onPick: o, hideHeader: s = !1, className: c, strings: l }) {
+	let u = t(z, l);
+	return e.length === 0 ? null : /* @__PURE__ */ O("div", {
+		className: n("ai-chat-suggestions-row--component flex items-center gap-space-md", c),
+		children: [!s && /* @__PURE__ */ O("div", {
+			className: "inline-flex shrink-0 items-center gap-space-sm",
+			children: [/* @__PURE__ */ D(N, { className: "size-icon-md text-muted-foreground" }), /* @__PURE__ */ D(a, { children: u.header })]
+		}), /* @__PURE__ */ D("div", {
+			className: "-mx-1 flex flex-1 items-center gap-space-sm overflow-x-auto px-1 py-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+			children: e.map((e) => {
+				let t = e.icon;
+				return /* @__PURE__ */ O(r, {
+					type: "button",
+					tone: "secondary",
+					buttonStyle: "ghost",
+					size: "sm",
+					onClick: () => o?.(e),
+					className: n("h-auto shrink-0 gap-space-sm rounded-full border border-border/60 bg-card px-control-sm py-1", "transition-[border-color,background] duration-150", "hover:border-foreground/20 hover:bg-muted/40"),
+					children: [!!t && /* @__PURE__ */ D(t, { className: "size-icon-sm text-muted-foreground" }), /* @__PURE__ */ D(i, {
+						tag: "span",
+						weight: "medium",
+						children: e.label
+					})]
+				}, e.id);
+			})
+		})]
+	});
+}
+Z.displayName = "AiChatSuggestionsRow";
+//#endregion
+//#region src/components/features/ai-chat/ai-chat.tsx
+function Q({ messages: e, inputValue: r, onInputChange: a, onSubmit: s, onStop: c, streaming: l = !1, disabled: u = !1, attachments: d = [], onRemoveAttachment: f, onAttach: p, showAttach: m, agent: h, headerActions: g, queue: v = [], onCancelQueueItem: y, suggestions: b = [], onPickSuggestion: x, onMessageCopy: C, onMessageRegenerate: w, onAttachmentOpen: E, disableAutoScroll: k, slots: A, strings: j, className: M }) {
+	let N = t(V, j), [, P] = T(0), F = S((e, t) => A?.renderMessage ? A.renderMessage(e, t) : /* @__PURE__ */ D(K, {
+		className: "ai-chat-message--component",
+		message: e,
+		strings: N.message,
+		onCopy: C ? () => C(e) : void 0,
+		onRegenerate: w ? () => w(e) : void 0,
+		onAttachmentOpen: E ? (t) => E(e.id, t) : void 0
+	}), [
+		E,
+		C,
+		w,
+		A,
+		N.message
+	]), I = A?.header ?? (h ? /* @__PURE__ */ D("div", {
+		className: "border-b border-border bg-card p-surface",
+		children: /* @__PURE__ */ O(o, {
+			direction: "horizontal",
+			align: "center",
+			gap: "lg",
+			children: [/* @__PURE__ */ D(_, {
+				name: h.name,
+				icon: h.icon,
+				avatar: h.avatar,
+				subtitle: h.subtitle,
+				tone: h.tone,
+				status: h.status,
+				variant: "inline"
+			}), !!g && /* @__PURE__ */ D("div", {
+				className: "ml-auto flex items-center gap-space-xs",
+				children: g
+			})]
+		})
+	}) : null), L = A?.empty ?? (e.length === 0 ? /* @__PURE__ */ D(G, {
+		title: N.emptyTitle,
+		description: N.emptyDescription
+	}) : null), R = A?.queue ?? (v.length > 0 ? /* @__PURE__ */ D(X, {
+		items: v,
+		onCancel: y,
+		strings: N.queue
+	}) : null), z = A?.suggestions ?? (b.length > 0 ? /* @__PURE__ */ D(Z, {
+		suggestions: b,
+		onPick: x,
+		strings: N.suggestions
+	}) : null), B = A?.input ?? /* @__PURE__ */ D(Y, {
+		value: r,
+		onValueChange: a,
+		onSubmit: (e) => {
+			s?.(e), P((e) => e + 1);
+		},
+		onStop: c,
+		streaming: l,
+		disabled: u,
+		attachments: d,
+		onRemoveAttachment: f,
+		onAttach: p,
+		showAttach: m,
+		strings: N.prompt
+	});
+	return /* @__PURE__ */ O("div", {
+		className: n("ai-chat--component flex h-full flex-col overflow-hidden rounded-radius-lg border border-border bg-background", M),
+		children: [
+			I,
+			/* @__PURE__ */ D(W, {
+				messages: e,
+				renderMessage: F,
+				intro: A?.intro,
+				footer: A?.belowMessages,
+				empty: L,
+				disableAutoScroll: k,
+				strings: N.conversation
+			}),
+			(R || z || B) && /* @__PURE__ */ D("div", {
+				className: "border-t border-border bg-card/60 p-surface",
+				children: /* @__PURE__ */ O(o, {
+					gap: "md",
+					children: [
+						R,
+						z,
+						B
+					]
+				})
+			}),
+			u && /* @__PURE__ */ D(i, {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: N.disabledAnnouncement
+			})
+		]
+	});
+}
+Q.displayName = "AiChat";
+//#endregion
+export { Q as AiChat, H as AiChatAttachmentsStrip, W as AiChatConversation, G as AiChatEmptyState, K as AiChatMessageView, Y as AiChatPromptInput, X as AiChatQueue, Z as AiChatSuggestionsRow, L as defaultAiChatConversationStrings, B as defaultAiChatMessageStrings, I as defaultAiChatPromptInputStrings, R as defaultAiChatQueueStrings, V as defaultAiChatStrings, z as defaultAiChatSuggestionsStrings, U as useAiChatScroll };
+
+//# sourceMappingURL=ai-chat.js.map