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

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,13 +11,17 @@ 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";
+import { Placed } from "./surface/Placed.js";
+import { placeOf } from "./surface/places.js";
 import { Surface, framesItself, usePlayed } from "./surface/Surface.js";
 import { NO_TOOL, useConversation } from "./useConversation.js";
 import { Fragment, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { ArrowUpIcon, CaretRightIcon, CheckIcon, ChecksIcon, ClockIcon, MicrophoneIcon, PaperclipIcon, ShieldWarningIcon, StopIcon, UploadSimpleIcon, WarningCircleIcon } from "@phosphor-icons/react";
+import { ArrowUpIcon, ArrowsOutSimpleIcon, CaretRightIcon, CheckIcon, ChecksIcon, ClockIcon, MicrophoneIcon, PaperclipIcon, ShieldWarningIcon, SidebarSimpleIcon, StopIcon, UploadSimpleIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/AgentChat.tsx
 const CHAT_MESSAGES = {
@@ -54,8 +59,14 @@ 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",
+	opened: (name, title) => `${name} opened ${title}`,
+	closePlaced: "Close",
 	handover: (holder, by, name) => {
 		const automation = by.kind === "automation" ? ` by “${by.title}”` : "";
 		switch (holder) {
@@ -86,6 +97,70 @@ const CHAT_MESSAGES = {
 	kit: KIT_MESSAGES,
 	browser: BROWSER_MESSAGES
 };
+/** Where nothing is put apart: a conversation on a channel. */
+const NO_PLACES = {};
+/**
+* What the person can still do on the conversation's surfaces: what they did on each, by its id
+* (each draws its answer), and whether one takes input. A surface takes input while the turn
+* waits on it or, once nothing runs or waits, when the agent showed it since the person last
+* spoke; older ones are read, not used. On a channel the person answered there: here it reads.
+*/
+function surfacesOf(live, onChannel) {
+	const { messages, pending, awaiting } = live;
+	const idle = !onChannel && !pending && awaiting === null;
+	const lastSaid = messages.findLastIndex((message) => message.role === "user");
+	const answers = /* @__PURE__ */ new Map();
+	for (const message of messages) if (message.action) answers.set(message.action.surface, message.action);
+	const current = (index) => idle && index > lastSaid;
+	return {
+		answers,
+		current,
+		takes: (id, index) => !onChannel && id === awaiting || current(index)
+	};
+}
+/** A step that drew a surface, by its id: the surface, and the index of its reply. */
+function placedStep(messages, id) {
+	for (const [index, message] of messages.entries()) {
+		const step = message.steps.find((each) => each.id === id);
+		if (step?.surface) return {
+			step,
+			surface: step.surface,
+			index
+		};
+	}
+	return null;
+}
+/**
+* The surface open in a panel or a modal, by its step's id: each one the agent puts apart opens
+* as it comes, and a conversation that opens waiting on one opens it; one read with the history
+* waits for its line. Closing it, or opening another, is the person's.
+*/
+function useOpenedPlace(live, places) {
+	const [opened, setOpened] = useState(null);
+	const ids = live.messages.flatMap((message) => message.steps).filter((step) => step.surface && placeOf(step.surface, places) !== "chat").map((step) => step.id);
+	const seen = useRef(null);
+	const key = ids.join(" ");
+	const { loading, awaiting } = live;
+	useEffect(() => {
+		if (loading) return;
+		const known = seen.current;
+		const placed = key === "" ? [] : key.split(" ");
+		if (known === null) {
+			seen.current = new Set(placed);
+			if (awaiting !== null && placed.includes(awaiting)) setOpened(awaiting);
+			return;
+		}
+		const fresh = placed.filter((id) => !known.has(id));
+		for (const id of fresh) known.add(id);
+		const newest = fresh.at(-1);
+		if (newest !== void 0) setOpened(newest);
+	}, [
+		key,
+		loading,
+		awaiting
+	]);
+	return [opened, setOpened];
+}
 /** How close to the foot, in pixels, still counts as being at it (v2's). */
 const NEAR_FOOT = 80;
 /**
@@ -112,7 +187,7 @@ function AgentChat(props) {
 		}, props.conversationId)
 	});
 }
-function Chat({ client, conversationId, name, messages, classNames, components, locale, onError, actions, suggestions, compose, look = "agent", steps = client.who === "person" ? "hidden" : "shown", attachments = true, onOpenFile, dictate, write, handovers = false, onHolder, onStep, handover, onTool, taken }) {
+function Chat({ client, conversationId, name, messages, classNames, components, blocks, surfaces, locale, onError, actions, suggestions, compose, look = "agent", steps = client.who === "person" ? "hidden" : "shown", attachments = true, onOpenFile, dictate, write, handovers = false, onHolder, onStep, handover, onTool, taken }) {
 	const words = {
 		...CHAT_MESSAGES,
 		...messages
@@ -125,6 +200,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);
@@ -134,6 +210,9 @@ function Chat({ client, conversationId, name, messages, classNames, components,
 	const builder = look !== "agent";
 	const { pending } = live;
 	const onChannel = live.messages.some((message) => message.author != null);
+	const places = onChannel ? NO_PLACES : surfaces;
+	const [opened, setOpened] = useOpenedPlace(live, places);
+	const open = opened === null ? null : placedStep(live.messages, opened);
 	const stop = useRef(live.stop);
 	useEffect(() => {
 		stop.current = live.stop;
@@ -150,6 +229,7 @@ function Chat({ client, conversationId, name, messages, classNames, components,
 	}, [builder, pending]);
 	const looks = builder ? ["sc-chat--builder"] : [];
 	if (look === "console") looks.push("sc-chat--console");
+	if (open !== null && placeOf(open.surface, places) === "panel") looks.push("sc-chat--placed");
 	const stepsShown = steps === "shown";
 	return /* @__PURE__ */ jsxs("div", {
 		part: "chat",
@@ -203,6 +283,10 @@ function Chat({ client, conversationId, name, messages, classNames, components,
 				words,
 				classNames,
 				components,
+				blocks,
+				places,
+				opened,
+				onOpen: setOpened,
 				locale,
 				following,
 				took,
@@ -213,6 +297,33 @@ function Chat({ client, conversationId, name, messages, classNames, components,
 				who: client.who,
 				steps: stepsShown
 			}),
+			open !== null && /* @__PURE__ */ jsx(Placed, {
+				where: placeOf(open.surface, places) === "modal" ? "modal" : "panel",
+				title: open.surface.title ?? "",
+				closeLabel: words.closePlaced,
+				onClose: () => {
+					setOpened(null);
+				},
+				classNames,
+				children: /* @__PURE__ */ jsx(Surface, {
+					surface: open.surface,
+					active: surfacesOf(live, onChannel).takes(open.step.id, open.index),
+					answered: surfacesOf(live, onChannel).answers.get(open.step.id),
+					components,
+					blocks,
+					classNames,
+					messages: words.kit,
+					locale,
+					files,
+					onAction: (action) => {
+						live.act({
+							surface: open.step.id,
+							...action
+						});
+						if (placeOf(open.surface, places) === "modal") setOpened(null);
+					}
+				})
+			}, open.step.id),
 			/* @__PURE__ */ jsx(BrowserView, {
 				live,
 				name,
@@ -348,7 +459,7 @@ function whenSaid(at, now, code) {
 * one quiet line across the log says so, and under a person's message the agent let pass, that
 * it did. Screen readers hear a reply once, when it is stored.
 */
-function Log({ live, name, words, classNames, components, locale, following, took, builder, onChannel, files, handovers, who, steps }) {
+function Log({ live, name, words, classNames, components, locale, following, took, builder, onChannel, files, handovers, who, steps, blocks, places, opened, onOpen }) {
 	const scroller = useRef(null);
 	const said = useRef(null);
 	const { messages, pending, draft, awaiting } = live;
@@ -388,10 +499,7 @@ function Log({ live, name, words, classNames, components, locale, following, too
 			observer.disconnect();
 		};
 	}, [following]);
-	const idle = !onChannel && !pending && awaiting === null;
-	const lastSaid = messages.findLastIndex((message) => message.role === "user");
-	const answers = /* @__PURE__ */ new Map();
-	for (const message of messages) if (message.action) answers.set(message.action.surface, message.action);
+	const { answers, current } = surfacesOf(live, onChannel);
 	const handed = handovers === void 0 ? handoffs(messages) : NO_HANDOFFS;
 	const placed = handoversAt(messages, handovers ?? []);
 	const lines = (index) => placed.get(index)?.map((handover) => /* @__PURE__ */ jsx(HandoverLine, {
@@ -441,14 +549,19 @@ function Log({ live, name, words, classNames, components, locale, following, too
 					message,
 					from: carried.current?.id === message.id ? carried.current.from : void 0,
 					awaiting: onChannel ? null : awaiting,
-					current: idle && index > lastSaid,
+					current: current(index),
 					answers,
 					name,
 					words,
 					classNames,
 					components,
+					blocks,
+					places,
+					opened,
+					onOpen,
 					locale,
 					onAction: live.act,
+					onActAll: live.actAll,
 					builder,
 					files,
 					who,
@@ -670,8 +783,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, blocks, places, opened, onOpen }) {
 	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
@@ -717,27 +831,52 @@ function Reply({ message, from, awaiting, current, answers, name, words, classNa
 					] })
 				}, step.id))
 			}),
-			message.steps.map((step) => step.surface && /* @__PURE__ */ jsx("div", {
-				part: "surface",
-				className: classes(classNames, "sc-chat__screen", ...framesItself(step.surface) ? ["sc-chat__screen--bare"] : []),
-				children: /* @__PURE__ */ jsx(Surface, {
-					surface: step.surface,
-					active: step.id === awaiting || current,
-					answered: answers.get(step.id),
-					components,
-					classNames,
-					messages: words.kit,
-					locale,
-					files,
-					onAction: (action) => onAction({
-						surface: step.id,
-						...action
+			message.steps.map((step) => {
+				if (!step.surface) return null;
+				const place = placeOf(step.surface, places);
+				if (place !== "chat") {
+					const Glyph = place === "panel" ? SidebarSimpleIcon : ArrowsOutSimpleIcon;
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						part: "placed",
+						"aria-expanded": opened === step.id,
+						onClick: () => {
+							onOpen(step.id);
+						},
+						className: classes(classNames, "sc-chat__placed", ...opened === step.id ? ["sc-chat__placed--open"] : []),
+						children: [/* @__PURE__ */ jsx(Glyph, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children: words.opened(name, step.surface.title ?? "") })]
+					}, step.id);
+				}
+				return /* @__PURE__ */ jsx("div", {
+					part: "surface",
+					className: classes(classNames, "sc-chat__screen", ...framesItself(step.surface) ? ["sc-chat__screen--bare"] : []),
+					children: /* @__PURE__ */ jsx(Surface, {
+						surface: step.surface,
+						active: step.id === awaiting || current,
+						answered: answers.get(step.id),
+						components,
+						blocks,
+						classNames,
+						messages: words.kit,
+						locale,
+						files,
+						onAction: (action) => onAction({
+							surface: step.id,
+							...action
+						})
 					})
-				})
-			}, step.id)),
+				}, 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 +1077,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
@@ -1122,6 +1396,6 @@ function Composer({ live, name, words, classNames, actions, compose, taken, fres
 	});
 }
 //#endregion
-export { AgentChat, CHAT_MESSAGES, decisionLine, handoffs, handoverBy, handoverLine, handoversAt, heardTail, shownState, whenSaid, workingOn };
+export { AgentChat, CHAT_MESSAGES, decisionLine, handoffs, handoverBy, handoverLine, handoversAt, heardTail, shownState, surfacesOf, whenSaid, workingOn };
 
 //# sourceMappingURL=AgentChat.js.map