@green-on-grey/ui-kit 1.8.0 → 1.9.0

package/dist/chat/MessageView.d.ts

@@ -13,3 +13,5 @@ export declare function MessageView({ m, busy, onRetry, loadAttachment, onOpenAt
     loadAttachment?: LoadAttachment;
     onOpenAttachment?: (a: ChatAttachment) => void;
 }): import("react").JSX.Element;
+/** A notice longer than this many lines is folded (FTR.NAB.CHAT-0002 design §3.1). */
+export declare const NOTICE_LINES = 12;

package/dist/chat/index.d.ts

@@ -5,6 +5,6 @@ export { AgentButton, AgentMenu, type AgentModelOption, type AgentModels, type A
 export { AgentSettingsMenu, agentModelKey, agentModelOptions, type AgentModel, type AgentModelChoice, type AgentModelState, } from "./AgentSettingsMenu";
 export { CommandPalette } from "./CommandPalette";
 export { ContextMeter, tokens } from "./ContextMeter";
-export { MessageView } from "./MessageView";
+export { MessageView, NOTICE_LINES } from "./MessageView";
 export { useRecorder } from "./useRecorder";
 export type { ChatAttachment, ChatCommand, ChatConfirmation, ChatContext, ChatConversation, ChatEvent, ChatMark, ChatMessage, ChatProps, ChatStep, ChatUpload, ChatWait, ConversationListProps, } from "./types";

package/dist/chat/types.d.ts

@@ -66,6 +66,9 @@ export interface ChatMessage {
     };
     /** The content of the product inside the message: a mail card, a digest. */
     content?: ReactNode;
+    /** `notice`: an answer that is a notice of a product, not words of the agent (FTR.NAB.CHAT-0002 R2):
+     * a card with a stripe, without the actions of an answer, folded past `NOTICE_LINES` lines. */
+    variant?: "notice";
     /** The tooltip of the bubble: the model of an answer (FTR.NAB.CHAT-0001 R18). */
     hint?: string;
 }
@@ -99,6 +102,11 @@ export interface ChatProps {
     header?: ReactNode;
     /** The second line of the empty conversation. */
     emptyHint?: ReactNode;
+    /** Replaces the whole empty conversation: the draft of a topic with its suggestions
+     * (FTR.HMR.DISC-0001 design §3.2). `emptyHint` is then not used. */
+    empty?: ReactNode;
+    /** The placeholder of the composer instead of «Message to <agent>»; a picked skill keeps its own. */
+    placeholder?: string;
     loading?: boolean;
     historyError?: ReactNode;
     hasOlder?: boolean;

package/dist/chat.js

@@ -584,7 +584,7 @@ function ie({ m: e, busy: n, onRetry: i, loadAttachment: a, onOpenAttachment: u
 		className: "sysnote",
 		children: e.text
 	});
-	if (e.role === "event" && e.event) return /* @__PURE__ */ c(K, { m: e });
+	if (e.role === "event" && e.event) return /* @__PURE__ */ c(ae, { m: e });
 	let _ = e.mark && /* @__PURE__ */ l("div", {
 		className: "chan",
 		children: [
@@ -625,6 +625,11 @@ function ie({ m: e, busy: n, onRetry: i, loadAttachment: a, onOpenAttachment: u
 			})
 		]
 	});
+	if (e.variant === "notice") return /* @__PURE__ */ c(q, {
+		m: e,
+		mark: _,
+		atts: v
+	});
 	let y = e.steps ?? [], b = (e.status === "streaming" || e.status === "pending") && !e.text && !e.content;
 	return /* @__PURE__ */ l("div", {
 		className: "m a",
@@ -686,7 +691,28 @@ function ie({ m: e, busy: n, onRetry: i, loadAttachment: a, onOpenAttachment: u
 		]
 	});
 }
-function K({ m: e }) {
+var K = 12;
+function q({ m: e, mark: t, atts: n }) {
+	let { t: i } = g(o), [a, s] = h(!1), u = !e.content && e.text.split("\n").length > 12;
+	return /* @__PURE__ */ l("div", {
+		className: "m a notice",
+		children: [
+			t,
+			e.content ?? /* @__PURE__ */ l("div", {
+				className: `bub${u && !a ? " folded" : ""}`,
+				children: [/* @__PURE__ */ c(r, { text: e.text }), u && /* @__PURE__ */ c("button", {
+					type: "button",
+					className: "textbtn",
+					"aria-expanded": a,
+					onClick: () => s((e) => !e),
+					children: i(a ? "chat.notice.less" : "chat.notice.more")
+				})]
+			}),
+			n
+		]
+	});
+}
+function ae({ m: e }) {
 	let { t: n, i18n: r } = g(o), [i, a] = h(!1), s = e.event;
 	return /* @__PURE__ */ l("div", {
 		className: "evdiv",
@@ -724,20 +750,20 @@ function K({ m: e }) {
 }
 //#endregion
 //#region src/chat/transcription.ts
-async function ae(e, t, n) {
+async function oe(e, t, n) {
 	n.busy(!0);
 	let r;
 	try {
 		r = await t(e);
 	} catch (r) {
-		n.busy(!1), n.failed(r instanceof Error && r.message ? r.message : void 0, () => void ae(e, t, n));
+		n.busy(!1), n.failed(r instanceof Error && r.message ? r.message : void 0, () => void oe(e, t, n));
 		return;
 	}
 	n.busy(!1), r !== null && (r ? n.text(r) : n.empty());
 }
 //#endregion
 //#region src/chat/useRecorder.ts
-function oe(e = 300, t) {
+function se(e = 300, t) {
 	let n = typeof window < "u" && "MediaRecorder" in window && !!navigator.mediaDevices?.getUserMedia, [r, i] = h(!1), [a, o] = h(0), [s, c] = h(0), [l, f] = h(!1), p = m(null), g = m([]), _ = m(void 0), v = m(null), y = m(null), b = m(!1), x = m(t);
 	d(() => {
 		x.current = t;
@@ -799,24 +825,24 @@ function oe(e = 300, t) {
 		cancel: T
 	};
 }
-function se(e) {
+function ce(e) {
 	return `${Math.floor(e / 60)}:${String(e % 60).padStart(2, "0")}`;
 }
 //#endregion
 //#region src/chat/Chat.tsx
-function q(n) {
+function le(n) {
 	let r = a(), i = e(), [o, u] = h(""), [g, y] = h([]), [b, S] = h(!1), [C, w] = h(null), [T, E] = h(0), [D, O] = h(!1), [k, A] = h(null), [j, ee] = h(!1), [M, N] = h(null), P = m(n.loadAttachment);
 	d(() => {
 		P.current = n.loadAttachment;
 	});
-	let F = !!n.loadAttachment, I = p(() => F ? (e) => P.current ? P.current(e) : Promise.reject(/* @__PURE__ */ Error("no loader")) : void 0, [F]), L = m(!1), R = m(null), z = m(null), B = m(null), V = n.voiceMaxSeconds ?? 300, H = oe(V, () => void ve()), { messages: U, busy: W = !1 } = n, ne = W || U.some((e) => e.status === "pending" || e.status === "streaming"), re = n.onPendingChange;
+	let F = !!n.loadAttachment, I = p(() => F ? (e) => P.current ? P.current(e) : Promise.reject(/* @__PURE__ */ Error("no loader")) : void 0, [F]), L = m(!1), R = m(null), z = m(null), B = m(null), V = n.voiceMaxSeconds ?? 300, H = se(V, () => void ve()), { messages: U, busy: W = !1 } = n, ne = W || U.some((e) => e.status === "pending" || e.status === "streaming"), re = n.onPendingChange;
 	d(() => re?.(g), [g, re]);
-	let G = U[0]?.id, K = U[U.length - 1], q = K?.id, ue = K?.text.length, pe = K?.steps?.length, me = m({ height: 0 });
+	let G = U[0]?.id, K = U[U.length - 1], q = K?.id, ae = K?.text.length, le = K?.steps?.length, fe = m({ height: 0 });
 	f(() => {
 		let e = R.current;
 		if (!e) return;
-		let t = me.current;
-		e.scrollTop = t.first !== void 0 && G !== t.first && q === t.last ? e.scrollTop + (e.scrollHeight - t.height) : e.scrollHeight, me.current = {
+		let t = fe.current;
+		e.scrollTop = t.first !== void 0 && G !== t.first && q === t.last ? e.scrollTop + (e.scrollHeight - t.height) : e.scrollHeight, fe.current = {
 			first: G,
 			last: q,
 			height: e.scrollHeight
@@ -825,32 +851,32 @@ function q(n) {
 		U.length,
 		G,
 		q,
-		ue,
-		pe
+		ae,
+		le
 	]);
-	let J = n.commands && !C && o.startsWith("/") && !/\s/.test(o) ? o.slice(1) : null, Y = J === null ? [] : _(n.commands ?? [], J), X = J !== null && !D, Z = () => {
+	let J = n.commands && !C && o.startsWith("/") && !/\s/.test(o) ? o.slice(1) : null, Y = J === null ? [] : _(n.commands ?? [], J), X = J !== null && !D, he = () => {
 		u(""), y([]), w(null), A(null), L.current = !1;
-	}, Q = async (e, t) => {
+	}, Z = async (e, t) => {
 		if (n.onCommand) try {
-			await n.onCommand(e, t), Z();
+			await n.onCommand(e, t), he();
 		} catch {}
-	}, $ = async (e, t = !1) => {
+	}, Q = async (e, t = !1) => {
 		let r = e.trim();
 		if (!(!r && g.length === 0 && !C || W || n.readOnly)) {
 			if (!t && !C && n.commands && r.startsWith("/")) {
 				let [e, ...t] = r.slice(1).split(/\s+/), i = n.commands.find((t) => t.kind === "command" && t.name === e);
-				if (i) return Q(i.name, t.join(" "));
+				if (i) return Z(i.name, t.join(" "));
 				if (e && !r.includes("\n")) {
 					A("/" + e);
 					return;
 				}
 			}
 			try {
-				await n.onSend(r, g.map((e) => e.id), L.current, C ?? void 0), Z();
+				await n.onSend(r, g.map((e) => e.id), L.current, C ?? void 0), he();
 			} catch {}
 		}
-	}, he = (e) => {
-		E(0), e.kind === "skill" ? (w(e.name), u("")) : e.takesText ? u("/" + e.name + " ") : Q(e.name, ""), B.current?.focus();
+	}, $ = (e) => {
+		E(0), e.kind === "skill" ? (w(e.name), u("")) : e.takesText ? u("/" + e.name + " ") : Z(e.name, ""), B.current?.focus();
 	}, ge = (e) => {
 		if (X && Y.length > 0) {
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
@@ -860,17 +886,17 @@ function q(n) {
 				return;
 			}
 			if (e.key === "Enter" && !e.shiftKey || e.key === "Tab") {
-				e.preventDefault(), he(Y[Math.min(T, Y.length - 1)]);
+				e.preventDefault(), $(Y[Math.min(T, Y.length - 1)]);
 				return;
 			}
 		}
-		X && e.key === "Escape" ? (e.preventDefault(), O(!0)) : e.key === "Backspace" && C && o === "" ? w(null) : e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && !le() && (e.preventDefault(), $(o));
+		X && e.key === "Escape" ? (e.preventDefault(), O(!0)) : e.key === "Backspace" && C && o === "" ? w(null) : e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && !de() && (e.preventDefault(), Q(o));
 	};
-	f(() => de(R.current, () => fe(B.current)), [o]), d(() => {
+	f(() => pe(R.current, () => me(B.current)), [o]), d(() => {
 		let e = B.current;
 		if (!e || typeof ResizeObserver > "u") return;
 		let t = e.clientWidth, n = new ResizeObserver(() => {
-			e.clientWidth !== t && (t = e.clientWidth, de(R.current, () => fe(e)));
+			e.clientWidth !== t && (t = e.clientWidth, pe(R.current, () => me(e)));
 		});
 		return n.observe(e), () => n.disconnect();
 	}, [H.recording]);
@@ -894,7 +920,7 @@ function q(n) {
 	};
 	async function ve() {
 		let e = await H.stop();
-		e && n.onTranscribe && await ae(e, n.onTranscribe, {
+		e && n.onTranscribe && await oe(e, n.onTranscribe, {
 			busy: ee,
 			empty: () => i({
 				kind: "error",
@@ -916,7 +942,7 @@ function q(n) {
 	}
 	let ye = (e) => {
 		e.key === "Escape" && H.recording && (e.preventDefault(), H.cancel());
-	}, be = C ? r("chat.skillPlaceholder") : r("chat.placeholder", { name: n.agentName }), xe = V - H.seconds;
+	}, be = C ? r("chat.skillPlaceholder") : n.placeholder ?? r("chat.placeholder", { name: n.agentName }), xe = V - H.seconds;
 	return /* @__PURE__ */ l("section", {
 		className: "nb-chat",
 		"aria-label": r("chat.title"),
@@ -938,7 +964,7 @@ function q(n) {
 						className: "err-text",
 						children: n.historyError
 					}),
-					U.length === 0 && !n.loading && !n.historyError && /* @__PURE__ */ l("div", {
+					U.length === 0 && !n.loading && !n.historyError && (n.empty ?? /* @__PURE__ */ l("div", {
 						className: "empty",
 						children: [
 							/* @__PURE__ */ c("div", {
@@ -948,7 +974,7 @@ function q(n) {
 							/* @__PURE__ */ c("b", { children: r("chat.emptyTitle", { name: n.agentName }) }),
 							n.emptyHint
 						]
-					}),
+					})),
 					U.map((e) => /* @__PURE__ */ c(ie, {
 						m: e,
 						busy: W,
@@ -999,7 +1025,7 @@ function q(n) {
 					X && /* @__PURE__ */ c(v, {
 						items: Y,
 						active: Math.min(T, Math.max(Y.length - 1, 0)),
-						onPick: he,
+						onPick: $,
 						onHover: E
 					}),
 					n.aboveComposer,
@@ -1035,7 +1061,7 @@ function q(n) {
 						children: [r("chat.unknownCommand", { name: k }), /* @__PURE__ */ c("button", {
 							type: "button",
 							className: "textbtn",
-							onClick: () => void $(o, !0),
+							onClick: () => void Q(o, !0),
 							children: r("chat.sendAsText")
 						})]
 					}),
@@ -1068,9 +1094,9 @@ function q(n) {
 									/* @__PURE__ */ l("span", {
 										className: "tm",
 										children: [
-											se(H.seconds),
+											ce(H.seconds),
 											" / ",
-											se(V)
+											ce(V)
 										]
 									}),
 									/* @__PURE__ */ c("span", {
@@ -1138,7 +1164,7 @@ function q(n) {
 								onReset: n.onReset,
 								busy: ne
 							}),
-							n.onTranscribe && !H.recording && /* @__PURE__ */ c(ce, {
+							n.onTranscribe && !H.recording && /* @__PURE__ */ c(ue, {
 								supported: H.supported,
 								recognizing: j,
 								onStart: () => void H.start()
@@ -1152,7 +1178,7 @@ function q(n) {
 								className: "iconbtn fill",
 								"aria-label": r("chat.send"),
 								disabled: !o.trim() && g.length === 0 && !C || W || j,
-								onClick: () => $(o),
+								onClick: () => Q(o),
 								children: /* @__PURE__ */ c(t, { name: "send" })
 							}))
 						]
@@ -1172,7 +1198,7 @@ function q(n) {
 		]
 	});
 }
-function ce({ supported: e, recognizing: n, onStart: r }) {
+function ue({ supported: e, recognizing: n, onStart: r }) {
 	let i = a();
 	return n ? /* @__PURE__ */ l("span", {
 		className: "voicewait",
@@ -1195,15 +1221,15 @@ function ce({ supported: e, recognizing: n, onStart: r }) {
 		children: /* @__PURE__ */ c(t, { name: "mic" })
 	});
 }
-function le() {
+function de() {
 	return typeof window < "u" && !!window.matchMedia?.("(hover: none) and (pointer: coarse)").matches;
 }
-var ue = (e) => e.scrollHeight - e.scrollTop - e.clientHeight < 2;
-function de(e, t) {
-	let n = !!e && ue(e);
+var fe = (e) => e.scrollHeight - e.scrollTop - e.clientHeight < 2;
+function pe(e, t) {
+	let n = !!e && fe(e);
 	t(), e && n && (e.scrollTop = e.scrollHeight);
 }
-function fe(e) {
+function me(e) {
 	if (!e) return;
 	e.style.overflowY = "hidden", e.style.height = "auto";
 	let t = e.scrollHeight + e.offsetHeight - e.clientHeight;
@@ -1211,7 +1237,7 @@ function fe(e) {
 }
 //#endregion
 //#region src/chat/ConversationList.tsx
-function pe({ conversations: e, currentId: n, open: r, onPick: i, onClose: o, onCreate: u }) {
+function J({ conversations: e, currentId: n, open: r, onPick: i, onClose: o, onCreate: u }) {
 	let f = a(), [p, m] = h(!1);
 	d(() => {
 		if (!r) return;
@@ -1287,19 +1313,19 @@ function pe({ conversations: e, currentId: n, open: r, onPick: i, onClose: o, on
 			"aria-label": f("close"),
 			onClick: o
 		}),
-		p && u && /* @__PURE__ */ c(J, {
+		p && u && /* @__PURE__ */ c(X, {
 			onClose: () => m(!1),
 			onCreate: u
 		})
 	] });
 }
-function me({ narrow: e, children: t }) {
+function Y({ narrow: e, children: t }) {
 	return /* @__PURE__ */ c("div", {
 		className: `nb-app${e ? " narrow" : ""}`,
 		children: t
 	});
 }
-function J({ onClose: e, onCreate: t }) {
+function X({ onClose: e, onCreate: t }) {
 	let r = a(), [i, o] = h(""), [u, d] = h(!1), [f, p] = h(null), m = async () => {
 		if (i.trim() && !u) {
 			d(!0), p(null);
@@ -1351,7 +1377,7 @@ function J({ onClose: e, onCreate: t }) {
 }
 //#endregion
 //#region src/chat/AgentMenu.tsx
-function Y({ icon: e, label: n, title: r, expanded: i, small: a, disabled: o, onClick: s }) {
+function he({ icon: e, label: n, title: r, expanded: i, small: a, disabled: o, onClick: s }) {
 	return /* @__PURE__ */ c("button", {
 		type: "button",
 		className: `agentbtn${a ? " s" : ""}`,
@@ -1367,7 +1393,7 @@ function Y({ icon: e, label: n, title: r, expanded: i, small: a, disabled: o, on
 		})
 	});
 }
-function X({ label: e, name: n, options: r, value: o, optionsLabel: u, hint: d, narrow: f, models: p, onRename: m, onPick: g, onClose: _ }) {
+function Z({ label: e, name: n, options: r, value: o, optionsLabel: u, hint: d, narrow: f, models: p, onRename: m, onPick: g, onClose: _ }) {
 	let v = a(), [y, b] = h(n), x = i(!0, _);
 	return /* @__PURE__ */ l("div", {
 		className: `agentmenu${f ? " narrow" : ""}`,
@@ -1479,8 +1505,8 @@ function X({ label: e, name: n, options: r, value: o, optionsLabel: u, hint: d,
 }
 //#endregion
 //#region src/chat/AgentSettingsMenu.tsx
-var Z = (e) => `${e.connectionId}/${e.model}`;
-function Q(e, t, n) {
+var Q = (e) => `${e.connectionId}/${e.model}`;
+function $(e, t, n) {
 	let r = (n) => [
 		...n.caps.image ? [{
 			icon: "image",
@@ -1492,7 +1518,7 @@ function Q(e, t, n) {
 		}] : [],
 		...n.caps.contextWindow > 0 ? [{ text: b(n.caps.contextWindow, t) }] : []
 	], i = (t) => t.caps.contextWindow > 0 && n.contextTokens > .8 * t.caps.contextWindow ? e("agent.modelCompactWarn") : void 0, a = n.available.length > 1, o = n.available.map((e) => ({
-		key: Z(e),
+		key: Q(e),
 		label: e.name,
 		sub: e.connection,
 		badges: r(e),
@@ -1505,12 +1531,12 @@ function Q(e, t, n) {
 			sub: n.defaultModel?.name ?? "—",
 			warn: n.defaultModel ? i(n.defaultModel) : void 0
 		}, ...o] : o,
-		value: n.chosen && n.model ? Z(n.model) : a ? "" : n.model ? Z(n.model) : ""
+		value: n.chosen && n.model ? Q(n.model) : a ? "" : n.model ? Q(n.model) : ""
 	};
 }
-function $({ name: e, value: t, options: n, models: r, hint: i, onRename: o, onPick: s, onModel: l, onClose: u }) {
-	let d = a(), { i18n: f } = g(), p = r && l ? Q(d, f.language, r) : null;
-	return /* @__PURE__ */ c(X, {
+function ge({ name: e, value: t, options: n, models: r, hint: i, onRename: o, onPick: s, onModel: l, onClose: u }) {
+	let d = a(), { i18n: f } = g(), p = r && l ? $(d, f.language, r) : null;
+	return /* @__PURE__ */ c(Z, {
 		label: d("agent.menu"),
 		name: e,
 		value: t,
@@ -1524,7 +1550,7 @@ function $({ name: e, value: t, options: n, models: r, hint: i, onRename: o, onP
 			onPick: (e) => {
 				if (!r || !l) return;
 				if (!e) return l(null);
-				let t = r.available.find((t) => Z(t) === e);
+				let t = r.available.find((t) => Q(t) === e);
 				t && l({
 					connectionId: t.connectionId,
 					model: t.model
@@ -1538,6 +1564,6 @@ function $({ name: e, value: t, options: n, models: r, hint: i, onRename: o, onP
 	});
 }
 //#endregion
-export { Y as AgentButton, X as AgentMenu, $ as AgentSettingsMenu, V as AttachmentList, te as AttachmentPreview, q as Chat, me as ChatLayout, v as CommandPalette, x as ContextMeter, pe as ConversationList, ie as MessageView, J as NewTopicModal, ce as VoiceButton, Z as agentModelKey, Q as agentModelOptions, A as fileSize, L as parseTable, O as previewIcon, E as previewKind, b as tokens, oe as useRecorder };
+export { he as AgentButton, Z as AgentMenu, ge as AgentSettingsMenu, V as AttachmentList, te as AttachmentPreview, le as Chat, Y as ChatLayout, v as CommandPalette, x as ContextMeter, J as ConversationList, ie as MessageView, K as NOTICE_LINES, X as NewTopicModal, ue as VoiceButton, Q as agentModelKey, $ as agentModelOptions, A as fileSize, L as parseTable, O as previewIcon, E as previewKind, b as tokens, se as useRecorder };
 
 //# sourceMappingURL=chat.js.map