@signalcore/ui 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/AgentChat.js

@@ -2,6 +2,7 @@ import { actionWords } from "./about.js";
 import { classes } from "./classes.js";
 import { KIT_MESSAGES } from "./kit/messages.js";
 import { KitProvider } from "./kit/context.js";
+import { Button } from "./kit/Button.js";
 import { actionMark } from "./marks.js";
 import { BROWSER_MESSAGES, BrowserView } from "./BrowserView.js";
 import { channelParts } from "./channelParts.js";
@@ -10,6 +11,8 @@ import { useReveal } from "./reveal.js";
 import { useConversationFiles } from "./conversationFiles.js";
 import "./frames.js";
 import { AudioPlayer } from "./kit/AudioPlayer.js";
+import { Field } from "./kit/Field.js";
+import { Checkbox, NumberInput, TextArea, TextInput } from "./kit/Inputs.js";
 import { FileChips, UploadChips, carriesFiles, useUploads } from "./kit/FileField.js";
 import { stepGlyph } from "./stepGlyphs.js";
 import { Markdown } from "./surface/Markdown.js";
@@ -54,6 +57,10 @@ const CHAT_MESSAGES = {
 	inputs: {},
 	allow: "Allow",
 	decline: "Decline",
+	approvals: (count) => `${count} actions need your approval`,
+	approveAll: "Approve all",
+	approveSome: (count) => `Approve ${count}`,
+	declineAll: "Decline all",
 	confirming: "Waiting for the business to confirm",
 	handedOff: "Handed to a person",
 	handover: (holder, by, name) => {
@@ -125,6 +132,7 @@ function Chat({ client, conversationId, name, messages, classNames, components,
 		onTool: onTool ?? (() => Promise.reject(new Error(words.noTool)))
 	});
 	const files = useConversationFiles(client, conversationId, live.messages, onOpenFile);
+	useReadAsShown(client, conversationId, live.messages.at(-1)?.id);
 	const uploads = useUploads(attachments ? files : void 0, { max: 10 });
 	const attaching = attachments && (write !== void 0 || live.awaiting === null);
 	const [over, setOver] = useState(false);
@@ -449,6 +457,7 @@ function Log({ live, name, words, classNames, components, locale, following, too
 					components,
 					locale,
 					onAction: live.act,
+					onActAll: live.actAll,
 					builder,
 					files,
 					who,
@@ -670,8 +679,9 @@ function DeliveryMark({ message, words, classNames }) {
 * for (on a person's page, one the business allows is a quiet line instead); on a channel, where
 * it got to.
 */
-function Reply({ message, from, awaiting, current, answers, name, words, classNames, components, locale, onAction, builder, files, who, steps, onChannel }) {
+function Reply({ message, from, awaiting, current, answers, name, words, classNames, components, locale, onAction, builder, files, who, steps, onChannel, onActAll }) {
 	const text = useReveal(message.text, from ?? message.text.length);
+	const asked = message.steps.filter((step) => step.request !== null && !(step.request.decides === "business" && who === "person"));
 	const { shown: said, typing } = onChannel ? channelParts(message, text) : {
 		shown: [text],
 		typing: false
@@ -735,9 +745,16 @@ function Reply({ message, from, awaiting, current, answers, name, words, classNa
 					})
 				})
 			}, step.id)),
+			asked.length > 1 && /* @__PURE__ */ jsx(Approvals, {
+				steps: asked,
+				name,
+				words,
+				classNames,
+				onActAll
+			}, asked.map((step) => step.id).join()),
 			message.steps.map((step) => {
 				const { request } = step;
-				if (request === null) return null;
+				if (request === null || asked.length > 1 && asked.some((one) => one.id === step.id)) return null;
 				if (request.decides === "business" && who === "person") return /* @__PURE__ */ jsxs("p", {
 					part: "confirming",
 					className: classes(classNames, "sc-chat__confirming"),
@@ -938,6 +955,141 @@ function Approval({ request, name, words, classNames, components, locale, onActi
 	});
 }
 /**
+* Several actions a reply waits on the person's leave for, in one card: a box to tick for each
+* (all ticked to begin with), what each would take under it, editable while ticked, and one
+* button that sends a yes for each ticked (with what was changed) and a no for the rest, at once.
+*/
+function Approvals({ steps, name, words, classNames, onActAll }) {
+	const [chosen, setChosen] = useState(() => new Set(steps.map((step) => step.id)));
+	const [edits, setEdits] = useState({});
+	const [sent, setSent] = useState(false);
+	const inputOf = (step) => ({
+		...step.request.input,
+		...edits[step.id]
+	});
+	const send = () => {
+		setSent(true);
+		onActAll(steps.map((step) => chosen.has(step.id) ? {
+			surface: step.id,
+			name: "approve",
+			data: step.id in edits ? { input: inputOf(step) } : {},
+			label: words.allow
+		} : {
+			surface: step.id,
+			name: "decline",
+			data: {},
+			label: words.decline
+		}));
+	};
+	const label = chosen.size === steps.length ? words.approveAll : chosen.size === 0 ? words.declineAll : words.approveSome(chosen.size);
+	return /* @__PURE__ */ jsxs("div", {
+		part: "approval",
+		className: classes(classNames, "sc-chat__request", "sc-chat__requests"),
+		children: [
+			/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx(ShieldWarningIcon, { "aria-hidden": true }), words.approvals(steps.length)] }),
+			/* @__PURE__ */ jsx("ul", { children: steps.map((step) => {
+				const ticked = chosen.has(step.id);
+				return /* @__PURE__ */ jsxs("li", {
+					className: classes(classNames, "sc-chat__ask"),
+					children: [/* @__PURE__ */ jsx(Checkbox, {
+						value: ticked,
+						disabled: sent,
+						onChange: (on) => {
+							setChosen((last) => {
+								const next = new Set(last);
+								if (on) next.add(step.id);
+								else next.delete(step.id);
+								return next;
+							});
+						},
+						children: words.request(name, step.request.action)
+					}), ticked && /* @__PURE__ */ jsx("div", {
+						className: classes(classNames, "sc-chat__ask-fields"),
+						children: Object.entries(inputOf(step)).map(([field, value]) => /* @__PURE__ */ jsx(InputValue, {
+							label: words.inputs[field] ?? field,
+							value,
+							disabled: sent,
+							onChange: (changed) => {
+								setEdits((last) => ({
+									...last,
+									[step.id]: {
+										...last[step.id],
+										[field]: changed
+									}
+								}));
+							}
+						}, field))
+					})]
+				}, step.id);
+			}) }),
+			/* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(Button, {
+				tone: "primary",
+				disabled: sent,
+				onClick: send,
+				children: label
+			}) })
+		]
+	});
+}
+/**
+* One field of an action's input, editable as what it holds: words, a number, a yes or no;
+* anything else (a list, an object) shown as it is.
+*/
+function InputValue({ label, value, disabled, onChange }) {
+	if (typeof value === "boolean") return /* @__PURE__ */ jsx(Checkbox, {
+		value,
+		disabled,
+		onChange,
+		children: label
+	});
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		children: (ids) => typeof value === "number" ? /* @__PURE__ */ jsx(NumberInput, {
+			...ids,
+			value,
+			disabled,
+			onChange
+		}) : typeof value === "string" ? value.length > 80 || value.includes("\n") ? /* @__PURE__ */ jsx(TextArea, {
+			...ids,
+			value,
+			disabled,
+			onChange
+		}) : /* @__PURE__ */ jsx(TextInput, {
+			...ids,
+			value,
+			disabled,
+			onChange
+		}) : /* @__PURE__ */ jsx(TextInput, {
+			...ids,
+			value: JSON.stringify(value),
+			disabled: true,
+			onChange: () => void 0
+		})
+	});
+}
+/**
+* On a person's page, what came is read as the chat shows it: each newest message while the page
+* is in sight, and once it comes back into sight. Their threads' `unread` follows.
+*/
+function useReadAsShown(client, conversationId, newest) {
+	useEffect(() => {
+		if (client.who !== "person" || newest === void 0) return void 0;
+		const read = () => {
+			if (document.visibilityState === "hidden") return;
+			client.conversations.read(conversationId).catch(() => void 0);
+		};
+		read();
+		document.addEventListener("visibilitychange", read);
+		return () => {
+			document.removeEventListener("visibilitychange", read);
+		};
+	}, [
+		client,
+		conversationId,
+		newest
+	]);
+}
+/**
 * Where the person writes: a box that grows a few lines with the text. Enter sends, Shift+Enter
 * breaks the line; nothing goes while a reply is on its way or the socket is closed, but the
 * person can keep writing. While the turn waits for them to act above, the box is closed and