@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/dist/AgentChat.js

@@ -0,0 +1,1127 @@
+import { actionWords } from "./about.js";
+import { classes } from "./classes.js";
+import { KIT_MESSAGES } from "./kit/messages.js";
+import { KitProvider } from "./kit/context.js";
+import { actionMark } from "./marks.js";
+import { BROWSER_MESSAGES, BrowserView } from "./BrowserView.js";
+import { channelParts } from "./channelParts.js";
+import { useDictation } from "./useDictation.js";
+import { useReveal } from "./reveal.js";
+import { useConversationFiles } from "./conversationFiles.js";
+import "./frames.js";
+import { AudioPlayer } from "./kit/AudioPlayer.js";
+import { FileChips, UploadChips, carriesFiles, useUploads } from "./kit/FileField.js";
+import { stepGlyph } from "./stepGlyphs.js";
+import { Markdown } from "./surface/Markdown.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/AgentChat.tsx
+const CHAT_MESSAGES = {
+	placeholder: (name) => `Write to ${name}…`,
+	connecting: "Connecting…",
+	awaiting: "Answer above to go on…",
+	thinking: (name) => `${name} is thinking`,
+	typing: "Typing",
+	working: "Working",
+	writing: "Writing",
+	elapsed: (seconds) => `${seconds} s`,
+	escape: "esc to stop",
+	done: (seconds) => `Done in ${seconds} s`,
+	empty: (name) => `Talk with ${name}`,
+	intro: () => "",
+	send: "Send",
+	attach: "Attach files",
+	drop: "Drop to attach",
+	dictate: "Dictate",
+	dictateStop: "Stop and write it",
+	dictation: {
+		listening: "Listening…",
+		writing: "Writing it down…",
+		failed: "Couldn't hear you: allow the microphone and try again"
+	},
+	stop: "Stop",
+	log: "Conversation",
+	steps: {
+		show: "Shows",
+		ask_person: "Asks"
+	},
+	failed: "failed",
+	approval: "Needs your approval",
+	request: (name, action) => `${name} wants to ${action}`,
+	inputs: {},
+	allow: "Allow",
+	decline: "Decline",
+	confirming: "Waiting for the business to confirm",
+	handedOff: "Handed to a person",
+	handover: (holder, by, name) => {
+		const automation = by.kind === "automation" ? ` by “${by.title}”` : "";
+		switch (holder) {
+			case "agent":
+				if (by.kind === "owner") return `You gave it back to ${name}`;
+				return `Given back to ${name}${automation}`;
+			case "person":
+				if (by.kind === "owner") return `You paused ${name}`;
+				if (by.kind === "agent") return `${name} handed it to a person`;
+				return `Handed to a person${automation}`;
+			case "nobody": return `Ignored${automation}`;
+		}
+	},
+	skipped: "Not answered",
+	cut: (heard) => heard === "" ? "Cut off before a word of it was heard" : `Cut off after «${heard}»`,
+	write: "Reply as the business…",
+	business: "You",
+	voiceNote: "Voice note",
+	delivery: {
+		queued: "Waiting to go",
+		sent: "Sent",
+		delivered: "Delivered",
+		read: "Read",
+		failed: "Not delivered"
+	},
+	undelivered: (error) => error ? `Not delivered: ${error}` : "Not delivered",
+	noTool: NO_TOOL,
+	kit: KIT_MESSAGES,
+	browser: BROWSER_MESSAGES
+};
+/** How close to the foot, in pixels, still counts as being at it (v2's). */
+const NEAR_FOOT = 80;
+/**
+* The conversation with an agent: the person's messages at the right in a bubble, the agent's at
+* the left as text with the steps it took and what they drew, its reply growing as it streams;
+* the composer at the foot. On a channel, the business's side stays at the left: the agent's
+* words with where they got to (a quiet mark), and what a person of the business wrote set apart
+* in a bubble of its own; the surfaces went to the person there, so they only read here, and the
+* reply, which runs on its own time, can't be stopped from here. With `handovers`, each change of
+* who answers it is a quiet line where it fell, the moment it is made, and a person's message the
+* agent let pass says so under it. The host picks the conversation; another id starts the chat
+* afresh.
+*/
+function AgentChat(props) {
+	const taken = useRef(props.compose?.key ?? null);
+	const kit = props.messages?.kit ?? CHAT_MESSAGES.kit;
+	return /* @__PURE__ */ jsx(KitProvider, {
+		classNames: props.classNames,
+		messages: kit,
+		locale: props.locale,
+		children: /* @__PURE__ */ jsx(Chat, {
+			...props,
+			taken
+		}, 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 }) {
+	const words = {
+		...CHAT_MESSAGES,
+		...messages
+	};
+	const live = useConversation(client, conversationId, {
+		onError,
+		onHolder,
+		onStep,
+		handover,
+		onTool: onTool ?? (() => Promise.reject(new Error(words.noTool)))
+	});
+	const files = useConversationFiles(client, conversationId, live.messages, onOpenFile);
+	const uploads = useUploads(attachments ? files : void 0, { max: 10 });
+	const attaching = attachments && (write !== void 0 || live.awaiting === null);
+	const [over, setOver] = useState(false);
+	const following = useRef(true);
+	const fresh = !live.loading && live.messages.length === 0 && !live.pending;
+	const took = useTook(live.pending);
+	const builder = look !== "agent";
+	const { pending } = live;
+	const onChannel = live.messages.some((message) => message.author != null);
+	const stop = useRef(live.stop);
+	useEffect(() => {
+		stop.current = live.stop;
+	});
+	useEffect(() => {
+		if (!builder || !pending) return void 0;
+		const onKey = (event) => {
+			if (event.key === "Escape" && !event.defaultPrevented) stop.current();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => {
+			window.removeEventListener("keydown", onKey);
+		};
+	}, [builder, pending]);
+	const looks = builder ? ["sc-chat--builder"] : [];
+	if (look === "console") looks.push("sc-chat--console");
+	const stepsShown = steps === "shown";
+	return /* @__PURE__ */ jsxs("div", {
+		part: "chat",
+		className: `sc ${classes(classNames, "sc-chat", ...looks)}`,
+		onKeyDown: (event) => {
+			if (!builder && !onChannel && event.key === "Escape" && live.pending) live.stop();
+		},
+		onDragOver: (event) => {
+			if (!attaching || !carriesFiles(event)) return;
+			const zone = event.target instanceof Element && event.target.closest("[data-drop]");
+			setOver(!zone);
+			if (zone) return;
+			event.preventDefault();
+			event.dataTransfer.dropEffect = "copy";
+		},
+		onDragLeave: (event) => {
+			const to = event.relatedTarget;
+			if (!(to instanceof Node && event.currentTarget.contains(to))) setOver(false);
+		},
+		onDrop: (event) => {
+			setOver(false);
+			if (event.defaultPrevented || !attaching || !carriesFiles(event)) return;
+			event.preventDefault();
+			uploads.add([...event.dataTransfer.files]);
+		},
+		children: [
+			fresh ? /* @__PURE__ */ jsxs("div", {
+				part: "empty",
+				className: classes(classNames, "sc-chat__empty"),
+				children: [
+					/* @__PURE__ */ jsx("h2", { children: words.empty(name) }),
+					words.intro(name) !== "" && /* @__PURE__ */ jsx("p", { children: words.intro(name) }),
+					suggestions !== void 0 && suggestions.length > 0 && /* @__PURE__ */ jsx("ul", { children: suggestions.map((text) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						disabled: !live.open,
+						onClick: () => {
+							if (live.say(text)) following.current = true;
+						},
+						part: "suggestion",
+						className: classes(classNames, "sc-chat__suggestion"),
+						children: [
+							"«",
+							text,
+							"»"
+						]
+					}) }, text)) })
+				]
+			}) : /* @__PURE__ */ jsx(Log, {
+				live,
+				name,
+				words,
+				classNames,
+				components,
+				locale,
+				following,
+				took,
+				builder,
+				onChannel,
+				files,
+				handovers: handovers ? live.handovers : void 0,
+				who: client.who,
+				steps: stepsShown
+			}),
+			/* @__PURE__ */ jsx(BrowserView, {
+				live,
+				name,
+				messages: words.browser,
+				classNames
+			}),
+			live.pending && /* @__PURE__ */ jsx(Status, {
+				label: builder ? workingOn(live, words) : stepsShown ? words.thinking(name) : words.typing,
+				stoppable: !onChannel,
+				timed: stepsShown,
+				words,
+				classNames
+			}),
+			/* @__PURE__ */ jsx(Composer, {
+				live,
+				name,
+				words,
+				classNames,
+				actions,
+				compose,
+				taken,
+				fresh,
+				builder,
+				uploads: attachments ? uploads : void 0,
+				files,
+				dictate,
+				write,
+				onSent: () => {
+					following.current = true;
+				}
+			}),
+			over && /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": true,
+				className: classes(classNames, "sc-chat__drop"),
+				children: [/* @__PURE__ */ jsx(UploadSimpleIcon, { weight: "bold" }), words.drop]
+			})
+		]
+	});
+}
+/**
+* What the builder is doing right now, v2's way: the step running in this turn, by its name (the
+* first one not settled: the actions of a reply run in its order); its words, while they come; or
+* that it is working.
+*/
+function workingOn(live, words) {
+	const lastSaid = live.messages.findLastIndex((message) => message.role === "user");
+	const running = live.messages.slice(lastSaid + 1).flatMap((message) => message.steps).find((step) => step.state === "running");
+	if (running) return words.steps[running.action] ?? running.action;
+	return live.draft === "" ? words.working : words.writing;
+}
+const NO_HANDOFFS = /* @__PURE__ */ new Set();
+/** Whether a message is the agent's own words: a reply, not what a person of the business wrote. */
+const agentSaid = (message) => message?.role === "assistant" && message.author !== "operator";
+/**
+* The replies a handoff line follows: in each turn where the agent handed the conversation to a
+* person (an `escalate` step done), its last reply, so the line closes what the agent said.
+*/
+function handoffs(messages) {
+	const after = /* @__PURE__ */ new Set();
+	let handed = false;
+	for (const [index, message] of messages.entries()) {
+		handed ||= message.steps.some((step) => step.action === "escalate" && step.state === "done");
+		if (handed && !agentSaid(messages[index + 1])) {
+			after.add(message.id);
+			handed = false;
+		}
+	}
+	return after;
+}
+/** Who changed who answers, from a handover's `by`: anything but these three is an automation's name. */
+function handoverBy({ by, title }) {
+	if (by === "owner" || by === "agent" || by === "platform") return { kind: by };
+	return {
+		kind: "automation",
+		title: title ?? by
+	};
+}
+/** A change of who answers, as its line says it: what changed and who changed it, then why. */
+function handoverLine(handover, name, words) {
+	const line = words.handover(handover.holder, handoverBy(handover), name);
+	const reason = handover.reason.trim();
+	return reason === "" ? line : `${line}: ${reason}`;
+}
+/**
+* The line under a person's message the agent let pass this time, with why (the owner's words,
+* else the automation that decided); none for any other decision: an answer is the reply itself,
+* and a conversation held or ignored has its line where who answers changed.
+*/
+function decisionLine(decision, words) {
+	if (decision?.kind !== "skip") return null;
+	const why = decision.reason?.trim() || decision.title;
+	return why ? `${words.skipped}: ${why}` : words.skipped;
+}
+/**
+* Where each change of who answers falls among the messages, by the index of the message it goes
+* before (`messages.length`: after them all): before the first message said after it, and the
+* agent's own after the last reply of its turn, so its line closes what the agent said.
+*/
+function handoversAt(messages, handovers) {
+	const at = /* @__PURE__ */ new Map();
+	let next = 0;
+	for (const [index, message] of messages.entries()) {
+		const said = Date.parse(message.created_at);
+		const before = [];
+		let handover = handovers[next];
+		while (handover !== void 0 && Date.parse(handover.at) < said && !(handover.by === "agent" && agentSaid(message))) {
+			before.push(handover);
+			next += 1;
+			handover = handovers[next];
+		}
+		if (before.length > 0) at.set(index, before);
+	}
+	if (next < handovers.length) at.set(messages.length, handovers.slice(next));
+	return at;
+}
+/** When a line across the log happened, as the locale writes it: the time today, else the day too. */
+function whenSaid(at, now, code) {
+	const moment = new Date(at);
+	const today = moment.toDateString() === now.toDateString();
+	return new Intl.DateTimeFormat(code, {
+		...today ? {} : {
+			day: "numeric",
+			month: "short"
+		},
+		hour: "numeric",
+		minute: "2-digit"
+	}).format(moment);
+}
+/**
+* The messages, read down, and the reply on its way: who is thinking until its first words, then
+* the words as they come with the agent's mark at their end. Where who answers the conversation
+* changed (`handovers`, when the host draws them; else where the agent handed it to a person),
+* 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 }) {
+	const scroller = useRef(null);
+	const said = useRef(null);
+	const { messages, pending, draft, awaiting } = live;
+	const shown = useRef(0);
+	const last = messages.at(-1);
+	const outgoing = last !== void 0 && last.role === "assistant" && last.delivery != null && last.delivery !== "failed";
+	const drafted = useReveal(draft, 0, (count) => {
+		shown.current = count;
+	});
+	const lastDraft = useRef("");
+	const carried = useRef(null);
+	const latest = messages.at(-1);
+	if (latest?.role === "assistant" && lastDraft.current !== "" && draft === "" && carried.current?.id !== latest.id) carried.current = {
+		id: latest.id,
+		from: shown.current
+	};
+	lastDraft.current = draft;
+	useLayoutEffect(() => {
+		const box = scroller.current;
+		if (box && following.current) box.scrollTop = box.scrollHeight;
+	}, [
+		messages,
+		pending,
+		drafted,
+		following
+	]);
+	useEffect(() => {
+		const box = scroller.current;
+		const log = said.current;
+		if (!box || !log || typeof ResizeObserver === "undefined") return void 0;
+		const observer = new ResizeObserver(() => {
+			if (following.current) box.scrollTop = box.scrollHeight;
+		});
+		observer.observe(log);
+		observer.observe(box);
+		return () => {
+			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 handed = handovers === void 0 ? handoffs(messages) : NO_HANDOFFS;
+	const placed = handoversAt(messages, handovers ?? []);
+	const lines = (index) => placed.get(index)?.map((handover) => /* @__PURE__ */ jsx(HandoverLine, {
+		handover,
+		name,
+		words,
+		classNames,
+		code: locale?.code ?? "en-US"
+	}, `${handover.at} ${handover.holder}`));
+	return /* @__PURE__ */ jsxs("div", {
+		ref: scroller,
+		onScroll: (event) => {
+			const box = event.currentTarget;
+			following.current = box.scrollHeight - box.scrollTop - box.clientHeight < NEAR_FOOT;
+		},
+		part: "transcript",
+		className: classes(classNames, "sc-chat__log", ...onChannel ? ["sc-chat__log--channel"] : []),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: said,
+				role: "log",
+				"aria-label": words.log,
+				children: [messages.map((message, index) => /* @__PURE__ */ jsxs(Fragment, { children: [lines(index), message.role === "user" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(Heard, {
+						message,
+						after: messages[index - 1],
+						words,
+						classNames
+					}),
+					/* @__PURE__ */ jsx(Said, {
+						message,
+						words,
+						classNames,
+						files
+					}),
+					handovers !== void 0 && /* @__PURE__ */ jsx(Decided, {
+						decision: message.decision,
+						words,
+						classNames
+					})
+				] }) : message.author === "operator" ? /* @__PURE__ */ jsx(Business, {
+					message,
+					words,
+					classNames,
+					files
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Reply, {
+					message,
+					from: carried.current?.id === message.id ? carried.current.from : void 0,
+					awaiting: onChannel ? null : awaiting,
+					current: idle && index > lastSaid,
+					answers,
+					name,
+					words,
+					classNames,
+					components,
+					locale,
+					onAction: live.act,
+					builder,
+					files,
+					who,
+					steps,
+					onChannel
+				}), handed.has(message.id) && /* @__PURE__ */ jsxs("p", {
+					className: classes(classNames, "sc-chat__handoff"),
+					children: [actionMark("escalate", "library"), /* @__PURE__ */ jsx("span", { children: words.handedOff })]
+				})] })] }, message.id)), lines(messages.length)]
+			}),
+			steps && !pending && took !== null && /* @__PURE__ */ jsx("p", {
+				className: classes(classNames, "sc-chat__done"),
+				children: words.done(took)
+			}),
+			pending && onChannel && !outgoing && /* @__PURE__ */ jsx(Typing, {
+				label: words.typing,
+				classNames
+			}),
+			pending && !onChannel && drafted !== "" && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				part: "message message-agent",
+				className: classes(classNames, "sc-chat__text", "sc-chat__reply"),
+				children: /* @__PURE__ */ jsx(Markdown, { text: drafted })
+			})
+		]
+	});
+}
+/** The channel's "typing": three dots in the business's bubble, while a reply or its parts come. */
+function Typing({ label, classNames }) {
+	return /* @__PURE__ */ jsxs("p", {
+		role: "status",
+		"aria-label": label,
+		className: classes(classNames, "sc-chat__typing"),
+		children: [
+			/* @__PURE__ */ jsx("span", {}),
+			/* @__PURE__ */ jsx("span", {}),
+			/* @__PURE__ */ jsx("span", {})
+		]
+	});
+}
+/** How many of the last words heard a cut line quotes. */
+const HEARD_WORDS = 8;
+/** The last words of what was heard, with an ellipsis before them when there was more. */
+function heardTail(heard, count = HEARD_WORDS) {
+	const words = heard.trim().split(/\s+/).filter(Boolean);
+	if (words.length <= count) return words.join(" ");
+	return `…${words.slice(-count).join(" ")}`;
+}
+/**
+* On a call, what the person heard of the agent's last words before this message, when it wasn't
+* what was stored. After a reply (the greeting is the first), they cut it short: a quiet line
+* under it quotes the last of what they heard. With no reply before, it was a greeting from before
+* the API kept it: drawn here as the agent's words, where it was said.
+*/
+function Heard({ message, after, words, classNames }) {
+	const { heard } = message;
+	if (heard == null) return null;
+	if (after?.role === "assistant") return /* @__PURE__ */ jsx("p", {
+		className: classes(classNames, "sc-chat__cut"),
+		children: words.cut(heardTail(heard))
+	});
+	if (heard.trim() === "") return null;
+	return /* @__PURE__ */ jsx("div", {
+		part: "message message-agent",
+		className: classes(classNames, "sc-chat__message", "sc-chat__message--agent", "sc-chat__message--heard"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: classes(classNames, "sc-chat__text"),
+			children: /* @__PURE__ */ jsx("p", { children: heard })
+		})
+	});
+}
+/**
+* The person's message: their words in a bubble (a voice note's player with its words under it);
+* the files they sent with it as chips over it, each opening where the host shows files. An
+* answer on a surface is its words alone: the surface shows its files.
+*/
+function Said({ message, words, classNames, files }) {
+	const sent = message.action ? [] : message.files ?? [];
+	const bubble = message.voice ? /* @__PURE__ */ jsx(VoiceNote, {
+		file: message.voice,
+		text: message.text,
+		parts: "message message-person",
+		kind: "sc-chat__message--person",
+		words,
+		classNames,
+		files
+	}) : message.text !== "" && /* @__PURE__ */ jsx("p", {
+		part: "message message-person",
+		className: classes(classNames, "sc-chat__message", "sc-chat__message--person", ...message.action ? ["sc-chat__message--action"] : []),
+		children: message.text
+	});
+	if (sent.length === 0) return bubble;
+	return /* @__PURE__ */ jsxs("div", {
+		part: "files",
+		className: classes(classNames, "sc-chat__said"),
+		children: [/* @__PURE__ */ jsx(FileChips, {
+			files: sent,
+			onOpen: files.open
+		}), bubble]
+	});
+}
+/**
+* A voice note on a channel, either way: a bubble with the page's own player, streaming from where
+* the file plays (asked again, once, when that ran out), and what was said under it.
+*/
+function VoiceNote({ file, text, parts, kind, words, classNames, files }) {
+	const played = usePlayed(file, files.play);
+	const lost = useRef(false);
+	return /* @__PURE__ */ jsxs("div", {
+		part: parts,
+		className: classes(classNames, ...kind === "sc-chat__text" ? [] : ["sc-chat__message"], kind, "sc-chat__message--voice"),
+		children: [/* @__PURE__ */ jsx(AudioPlayer, {
+			src: played?.url,
+			label: words.voiceNote,
+			onError: () => {
+				if (lost.current || played === null) return;
+				lost.current = true;
+				played.again();
+			}
+		}), text !== "" && /* @__PURE__ */ jsx("div", {
+			className: classes(classNames, "sc-chat__transcript"),
+			children: /* @__PURE__ */ jsx(Markdown, { text })
+		})]
+	});
+}
+/** Under a person's message the agent let pass this time: that it didn't answer it, and why. */
+function Decided({ decision, words, classNames }) {
+	const line = decisionLine(decision, words);
+	if (line === null) return null;
+	return /* @__PURE__ */ jsx("p", {
+		className: classes(classNames, "sc-chat__decision"),
+		children: line
+	});
+}
+/**
+* Where who answers the conversation changed: a quiet line across the log, what changed and who
+* changed it, why, and when.
+*/
+function HandoverLine({ handover, name, words, classNames, code }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: classes(classNames, "sc-chat__handover"),
+		children: /* @__PURE__ */ jsxs("span", { children: [handoverLine(handover, name, words), /* @__PURE__ */ jsx("time", {
+			dateTime: handover.at,
+			children: whenSaid(handover.at, /* @__PURE__ */ new Date(), code)
+		})] })
+	});
+}
+/**
+* What a person of the business wrote on the channel, on the business's side but set apart from
+* the agent's words: a bubble of its own, the files it carried over it, and under it who wrote it
+* and where it got to.
+*/
+function Business({ message, words, classNames, files }) {
+	const sent = message.files ?? [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes(classNames, "sc-chat__business"),
+		children: [
+			sent.length > 0 && /* @__PURE__ */ jsx(FileChips, {
+				files: sent,
+				onOpen: files.open
+			}),
+			message.text !== "" && /* @__PURE__ */ jsx("p", {
+				part: "message message-business",
+				className: classes(classNames, "sc-chat__message", "sc-chat__message--business"),
+				children: message.text
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: classes(classNames, "sc-chat__meta"),
+				children: [/* @__PURE__ */ jsx("span", { children: words.business }), /* @__PURE__ */ jsx(DeliveryMark, {
+					message,
+					words,
+					classNames
+				})]
+			})
+		]
+	});
+}
+const DELIVERY_MARKS = {
+	queued: /* @__PURE__ */ jsx(ClockIcon, { "aria-hidden": true }),
+	sent: /* @__PURE__ */ jsx(CheckIcon, {
+		"aria-hidden": true,
+		weight: "bold"
+	}),
+	delivered: /* @__PURE__ */ jsx(ChecksIcon, {
+		"aria-hidden": true,
+		weight: "bold"
+	}),
+	read: /* @__PURE__ */ jsx(ChecksIcon, {
+		"aria-hidden": true,
+		weight: "bold"
+	}),
+	failed: /* @__PURE__ */ jsx(WarningCircleIcon, {
+		"aria-hidden": true,
+		weight: "fill"
+	})
+};
+/**
+* Where a message that went out on a channel got to, quietly: a clock while it waits to go, a
+* check once sent, two once delivered, two in the accent once read; one that never got there in
+* the danger tone, with why. Nothing for a message that didn't go out.
+*/
+function DeliveryMark({ message, words, classNames }) {
+	const { delivery } = message;
+	if (delivery == null) return null;
+	const failed = delivery === "failed";
+	return /* @__PURE__ */ jsxs("span", {
+		role: failed ? void 0 : "img",
+		"aria-label": failed ? void 0 : words.delivery[delivery],
+		title: failed ? void 0 : words.delivery[delivery],
+		"data-delivery": delivery,
+		className: classes(classNames, "sc-chat__delivery"),
+		children: [DELIVERY_MARKS[delivery], failed && /* @__PURE__ */ jsx("span", { children: words.undelivered(message.delivery_error ?? null) })]
+	});
+}
+/**
+* The agent's message: its words, then the steps it took as a compact list (a mark for the
+* state, the action's name, its output), then what each step drew (with what the person did on
+* it, from `answers`), and the card for one that waits to be allowed by whoever this page speaks
+* 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 }) {
+	const text = useReveal(message.text, from ?? message.text.length);
+	const { shown: said, typing } = onChannel ? channelParts(message, text) : {
+		shown: [text],
+		typing: false
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		part: "message message-agent",
+		className: classes(classNames, "sc-chat__message", "sc-chat__message--agent"),
+		children: [
+			message.voice && said.length > 0 ? /* @__PURE__ */ jsx(VoiceNote, {
+				file: message.voice,
+				text,
+				parts: "text",
+				kind: "sc-chat__text",
+				words,
+				classNames,
+				files
+			}) : text !== "" && said.map((words, index) => /* @__PURE__ */ jsx("div", {
+				part: "text",
+				className: classes(classNames, "sc-chat__text"),
+				children: /* @__PURE__ */ jsx(Markdown, { text: words })
+			}, index)),
+			typing && /* @__PURE__ */ jsx(Typing, {
+				label: words.typing,
+				classNames
+			}),
+			steps && message.steps.length > 0 && /* @__PURE__ */ jsx("ol", {
+				className: classes(classNames, "sc-chat__steps"),
+				children: message.steps.map((step, index) => /* @__PURE__ */ jsx("li", {
+					className: classes(classNames, "sc-chat__step", `sc-chat__step--${shownState(step, message.steps.slice(0, index))}`),
+					children: builder ? /* @__PURE__ */ jsx(BuilderStep, {
+						step,
+						words,
+						classNames
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(Mark, {
+							state: step.state,
+							action: step.action,
+							app: step.app ?? null,
+							classNames
+						}),
+						/* @__PURE__ */ jsx("span", { children: words.steps[step.action] ?? actionWords(step.action) }),
+						step.state === "failed" && step.output !== null && /* @__PURE__ */ jsx("small", { children: step.output })
+					] })
+				}, 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
+					})
+				})
+			}, step.id)),
+			message.steps.map((step) => {
+				const { request } = step;
+				if (request === null) return null;
+				if (request.decides === "business" && who === "person") return /* @__PURE__ */ jsxs("p", {
+					part: "confirming",
+					className: classes(classNames, "sc-chat__confirming"),
+					children: [/* @__PURE__ */ jsx(ClockIcon, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children: words.confirming })]
+				}, step.id);
+				return /* @__PURE__ */ jsx(Approval, {
+					request,
+					name,
+					words,
+					classNames,
+					components,
+					locale,
+					onAction: (action) => onAction({
+						surface: step.id,
+						...action
+					})
+				}, step.id);
+			}),
+			message.delivery != null && /* @__PURE__ */ jsxs("p", {
+				className: classes(classNames, "sc-chat__meta"),
+				children: [onChannel && /* @__PURE__ */ jsx("span", { children: name }), /* @__PURE__ */ jsx(DeliveryMark, {
+					message,
+					words,
+					classNames
+				})]
+			})
+		]
+	});
+}
+/**
+* A step's state as its list shows it, after the steps `before` it in its reply: the actions of
+* one reply run one after another, in its order, so one still `running` after another that runs
+* is only to come (`queued`).
+*/
+function shownState(step, before) {
+	const behind = before.some((earlier) => earlier.state === "running");
+	return step.state === "running" && behind ? "queued" : step.state;
+}
+/**
+* A step in the builder's look, v2's: its mark and its name, "failed" beside it when it did, and
+* what it returned folded under a caret that shows on hover, opened on a click.
+*/
+function BuilderStep({ step, words, classNames }) {
+	const row = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Mark, {
+			state: step.state,
+			action: step.action,
+			app: step.app ?? null,
+			classNames
+		}),
+		/* @__PURE__ */ jsx("span", { children: words.steps[step.action] ?? actionWords(step.action) }),
+		step.state === "failed" && /* @__PURE__ */ jsx("em", { children: words.failed })
+	] });
+	if (!step.output) return row;
+	return /* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsxs("summary", { children: [row, /* @__PURE__ */ jsx(CaretRightIcon, { "aria-hidden": true })] }), /* @__PURE__ */ jsx("pre", {
+		className: classes(classNames, "sc-chat__output"),
+		children: step.output
+	})] });
+}
+/**
+* A step's mark on the list's line: the kind of work it is (its glyph) once it is done, a turning
+* ring while it runs, a ring while it waits for the person, a warning when it failed.
+*/
+function Mark({ state, action, app, classNames }) {
+	const Glyph = stepGlyph(action);
+	const logo = app?.icon && /^https:\/\//i.test(app.icon) ? app.icon : null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: classes(classNames, "sc-chat__mark"),
+		children: state === "done" && logo !== null ? /* @__PURE__ */ jsx("img", {
+			src: logo,
+			alt: "",
+			loading: "lazy",
+			draggable: false
+		}) : state === "done" ? /* @__PURE__ */ jsx(Glyph, {}) : state === "running" ? null : /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 14 14",
+			fill: "none",
+			children: MARKS[state]
+		})
+	});
+}
+const STROKE = {
+	stroke: "currentColor",
+	strokeWidth: 1.5,
+	strokeLinecap: "round"
+};
+const MARKS = {
+	waiting: /* @__PURE__ */ jsx("circle", {
+		cx: "7",
+		cy: "7",
+		r: "4.75",
+		...STROKE
+	}),
+	failed: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("path", {
+			d: "M7 1.9l5.6 9.7H1.4L7 1.9z",
+			...STROKE,
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M7 5.6v2.6",
+			...STROKE
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "7",
+			cy: "10",
+			r: "0.8",
+			fill: "currentColor"
+		})
+	] })
+};
+/** How long the last reply took, in whole seconds, once it is in; none before the first. */
+function useTook(pending) {
+	const [took, setTook] = useState(null);
+	const started = useRef(null);
+	useEffect(() => {
+		if (pending) {
+			started.current = Date.now();
+			setTook(null);
+		} else if (started.current !== null) {
+			setTook(Math.max(1, Math.round((Date.now() - started.current) / 1e3)));
+			started.current = null;
+		}
+	}, [pending]);
+	return took;
+}
+/**
+* What is happening while a reply is on its way, in one quiet line over the composer: a dot that
+* breathes, what goes on (`label`) under a sweeping light, the seconds it has taken, and how to
+* stop it. A new label rises in where the last was.
+*/
+function Status({ label, stoppable, timed, words, classNames }) {
+	const [seconds, setSeconds] = useState(0);
+	useEffect(() => {
+		const started = Date.now();
+		const tick = setInterval(() => {
+			setSeconds(Math.floor((Date.now() - started) / 1e3));
+		}, 1e3);
+		return () => {
+			clearInterval(tick);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("p", {
+		role: "status",
+		part: "status",
+		className: classes(classNames, "sc-chat__status"),
+		children: [
+			/* @__PURE__ */ jsx("i", { "aria-hidden": true }),
+			/* @__PURE__ */ jsxs("span", { children: [label, "…"] }, label),
+			timed && /* @__PURE__ */ jsx("small", { children: words.elapsed(seconds) }),
+			timed && stoppable && /* @__PURE__ */ jsx("kbd", { children: words.escape })
+		]
+	});
+}
+/**
+* An action the platform holds until the person allows it, as v2's card: a head that says it
+* needs their approval, then the sentence, what the action would take, and the two answers,
+* drawn as a surface so the host's blocks and words apply. Drawn from the step, so it is there
+* live and read back alike.
+*/
+function Approval({ request, name, words, classNames, components, locale, onAction }) {
+	const sentence = words.request(name, request.action);
+	const surface = {
+		blocks: [{
+			type: "fields",
+			items: Object.entries(request.input).map(([field, value]) => ({
+				label: words.inputs[field] ?? field,
+				value: typeof value === "string" ? value : JSON.stringify(value)
+			}))
+		}, {
+			type: "stack",
+			direction: "row",
+			children: [{
+				type: "button",
+				label: words.allow,
+				action: "approve",
+				tone: "primary"
+			}, {
+				type: "button",
+				label: words.decline,
+				action: "decline",
+				tone: "neutral"
+			}]
+		}],
+		text: sentence
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		part: "approval",
+		className: classes(classNames, "sc-chat__request"),
+		children: [/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx(ShieldWarningIcon, { "aria-hidden": true }), words.approval] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", { children: sentence }), /* @__PURE__ */ jsx(Surface, {
+			surface,
+			components,
+			classNames,
+			messages: words.kit,
+			locale,
+			onAction
+		})] })]
+	});
+}
+/**
+* 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
+* says so; while a reply is on its way, the send button is a stop button (Esc stops too). The
+* host's `compose` is said from here, or put in the box. With `uploads`, the paperclip attaches
+* files (a picture pasted too): they upload at once, as chips over the words, and go with them
+* (or alone) once every one is in. With `write`, what is written goes to the host instead (a
+* person of the business, on a channel): whatever the turn is doing, emptied once it went.
+*/
+function Composer({ live, name, words, classNames, actions, compose, taken, fresh, builder, uploads, files, dictate, write, onSent }) {
+	const [text, setText] = useState("");
+	const [writing, setWriting] = useState(false);
+	const input = useRef(null);
+	const picker = useRef(null);
+	const [placed, setPlaced] = useState(0);
+	const held = write === void 0 && live.awaiting !== null;
+	const dictation = useDictation(dictate, (words) => {
+		setText((now) => now.trim() === "" ? words : `${now.trimEnd()} ${words}`);
+		setPlaced((count) => count + 1);
+	});
+	const listening = dictation.state === "listening";
+	useEffect(() => {
+		if (compose === void 0 || taken.current === compose.key) return;
+		if (compose.send && !live.open) return;
+		taken.current = compose.key;
+		if (compose.send && live.say(compose.text)) {
+			onSent();
+			return;
+		}
+		setText(compose.text);
+		setPlaced((count) => count + 1);
+	}, [
+		compose,
+		taken,
+		live,
+		onSent
+	]);
+	useLayoutEffect(() => {
+		const box = input.current;
+		if (placed === 0 || box === null) return;
+		box.focus();
+		box.setSelectionRange(box.value.length, box.value.length);
+	}, [placed]);
+	const attached = uploads?.ids ?? [];
+	const settled = uploads === void 0 || uploads.waiting === null;
+	const said = text.trim() !== "" || attached.length > 0;
+	const sent = () => {
+		setText("");
+		uploads?.clear();
+		onSent();
+	};
+	const submit = () => {
+		if (!settled) return;
+		if (write === void 0) {
+			if (live.say(text, attached)) sent();
+			return;
+		}
+		if (writing || !said) return;
+		setWriting(true);
+		write(text.trim(), attached).then(sent, () => void 0).finally(() => {
+			setWriting(false);
+		});
+	};
+	const onKeyDown = (event) => {
+		if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+		event.preventDefault();
+		submit();
+	};
+	const ready = write === void 0 ? live.open && !live.pending && !held && settled && said : !writing && settled && said;
+	const invitation = write === void 0 ? words.placeholder(name, fresh) : words.write;
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: (event) => {
+			event.preventDefault();
+			submit();
+		},
+		part: "composer",
+		className: classes(classNames, "sc-chat__composer"),
+		children: [
+			uploads && uploads.items.length > 0 && /* @__PURE__ */ jsx("div", {
+				part: "files",
+				className: classes(classNames, "sc-chat__files"),
+				children: /* @__PURE__ */ jsx(UploadChips, {
+					uploads,
+					host: files
+				})
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				ref: input,
+				rows: 1,
+				value: text,
+				maxLength: 2e4,
+				disabled: held,
+				autoFocus: builder,
+				"aria-label": invitation,
+				placeholder: held ? words.awaiting : live.open || write !== void 0 ? invitation : words.connecting,
+				onChange: (event) => {
+					setText(event.target.value);
+				},
+				onKeyDown,
+				part: "input",
+				onPaste: (event) => {
+					const pasted = [...event.clipboardData.files];
+					if (!uploads || pasted.length === 0) return;
+					if (event.clipboardData.getData("text/plain") !== "") return;
+					event.preventDefault();
+					uploads.add(pasted);
+				},
+				className: classes(classNames, "sc-chat__input")
+			}),
+			uploads && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": words.attach,
+				title: words.attach,
+				disabled: held,
+				onClick: () => picker.current?.click(),
+				part: "attach",
+				className: classes(classNames, "sc-chat__attach"),
+				children: /* @__PURE__ */ jsx(PaperclipIcon, { "aria-hidden": true })
+			}), /* @__PURE__ */ jsx("input", {
+				ref: picker,
+				type: "file",
+				multiple: true,
+				hidden: true,
+				tabIndex: -1,
+				onChange: (event) => {
+					uploads.add([...event.target.files ?? []]);
+					event.target.value = "";
+				}
+			})] }),
+			/* @__PURE__ */ jsxs("div", {
+				part: "actions",
+				className: classes(classNames, "sc-chat__actions"),
+				children: [
+					dictation.available && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": listening ? words.dictateStop : words.dictate,
+						title: listening ? words.dictateStop : words.dictate,
+						"aria-pressed": listening,
+						"data-state": dictation.state,
+						disabled: held || dictation.state === "writing",
+						onClick: dictation.toggle,
+						part: "dictate",
+						className: classes(classNames, "sc-chat__dictate"),
+						children: /* @__PURE__ */ jsx(MicrophoneIcon, {
+							"aria-hidden": true,
+							weight: listening ? "fill" : "regular"
+						})
+					}),
+					dictation.state !== "idle" && /* @__PURE__ */ jsx("span", {
+						role: "status",
+						"data-state": dictation.state,
+						className: classes(classNames, "sc-chat__dictation"),
+						children: words.dictation[dictation.state]
+					}),
+					actions
+				]
+			}),
+			live.pending && write === void 0 ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": words.stop,
+				title: `${words.stop} (Esc)`,
+				onClick: () => live.stop(),
+				part: "stop",
+				className: classes(classNames, "sc-chat__stop"),
+				children: /* @__PURE__ */ jsx(StopIcon, {
+					weight: "fill",
+					"aria-hidden": true
+				})
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "submit",
+				"aria-label": words.send,
+				title: words.send,
+				disabled: !ready,
+				part: "send",
+				className: classes(classNames, "sc-chat__send"),
+				children: /* @__PURE__ */ jsx(ArrowUpIcon, {
+					weight: "bold",
+					"aria-hidden": true
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { AgentChat, CHAT_MESSAGES, decisionLine, handoffs, handoverBy, handoverLine, handoversAt, heardTail, shownState, whenSaid, workingOn };
+
+//# sourceMappingURL=AgentChat.js.map