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

package/README.md

@@ -185,6 +185,39 @@ couldn't begin again), `close`, `agent` (its name when the face can't be read),
 (`--text`, `--voice`; `aria-checked` on the one on), `sc-space__caption` (`--person`, `--agent`),
 `sc-space__status`.
 
+### Panels, modals and your own blocks
+
+What the agent shows can stand apart from the conversation (`show` and `ask_person` with
+`where`, v3/UI.md, Surfaces): in a **panel** beside the chat (over it, where the space is narrow:
+the rep's week while they talk), or in a **modal** over the page (something to answer now; once
+used it closes and the chat goes on). Each opens as it comes, and a conversation that opens
+waiting on one opens it; the reply keeps a quiet line, "Ray abrió tu semana" (`opened`), that
+opens it again. Your page decides what it allows: `surfaces={{ panel: true, modal: false }}`
+(both by default); a place left out shows in the conversation, as on a channel. `AgentChat`
+takes the same `surfaces`.
+
+`blocks` registers your own blocks by the name each was declared with (`PUT /v1/blocks/{name}`):
+`blocks={{ "demoprep.deal-card": DealCard }}`. The agent gives only props, which the API checked
+against your schema; your component gets `{props, text, active, onAction}` (`HostBlockProps`),
+and a block it has no component for shows its words in a quiet card (`sc-surface__host`).
+
+```tsx
+function DealCard({ props }: HostBlockProps<{ title: string; amount: number }>) {
+  return <YourDealCard title={props.title} amount={props.amount} />;
+}
+
+<AgentSpace
+  client={client}
+  agentId="agt_…"
+  surfaces={{ panel: true, modal: true }}
+  blocks={{ "demoprep.deal-card": DealCard }}
+/>;
+```
+
+Words: `opened(name, title)`, `closePlaced`. Parts: `sc-chat__placed` (`--open`), `sc-chat--placed`
+(a panel is open), `sc-placed` (`--panel`, `--modal`, the latter a `<dialog>`),
+`sc-placed__head`, `sc-placed__title`, `sc-placed__body`.
+
 ### Threads, unread, and several yeses at once
 
 A person keeps several conversations (threads) with the agent, each with its title: one your
@@ -257,6 +290,10 @@ flow at the element's size (560px tall unless your CSS says). A visitor's conver
 | `stylesheet`      | your own CSS for the widget: the CSS itself (anything with a `{`) or its address; adopted inside the shadow root, after ours. Also the element's `stylesheet` property                                |
 | `unstyled`        | our look's defaults drop away (grounds, lines, shadows, corners, every ink but the page's text), the layout stays: for a host that styles everything                                                  |
 | `shadow`          | `none`: no shadow root; the widget draws in the page (our stylesheet goes first in `<head>`, so your CSS wins), for a host whose global CSS should apply directly. Read once, as the element connects |
+| `surfaces`        | where the agent may put what it shows besides the conversation: `panel`, `modal`, both (`"panel modal"`, the default) or none (`""`)                                                                  |
+
+Your own blocks go as the element's `blocks` property, React components the widget's React
+draws: `document.querySelector("signalcore-chat").blocks = { "demoprep.deal-card": DealCard }`.
 
 By default the widget takes your page's type and ink: the font, the base size and the text colour
 the element inherits come through the shadow root and stand in for our defaults (read as it draws,
@@ -731,6 +768,48 @@ works, a check and "Conectada" in its place (`sc-surface__connect--done`), and a
 it failed. It changes as the connection does, from the `ui` frames the API sends again on the
 same id; before the API has asked for it (`connection` null), only the app as the agent named it.
 
+The kit's blocks of time and work: a `calendar` (`Agenda`: a day's events, or a week's from its
+`start`, at their hours; one with a `url` opens its page, with the calendar's `action` the rest
+send `{event}`; narrow, the days go one under another, an empty one a quiet line; 680px and up,
+the week stands as seven columns), a `timeline` (`Timeline`: dated things the newest first, each
+a dot on a hairline, in its `tone` when it has one, its `status` a quiet word), a `board`
+(`Kanban`: cards in columns; with its `action`, a card dragged to another column, or moved from
+its button's list of the others, goes there at once and sends `{card, column}`, labelled
+`board.moved`). A `host` block is one of yours, drawn by the component `blocks` registers under
+its `name` (a component that fails as it draws leaves its words, and the rest draws). Words:
+`calendar` (`allDay`, `empty`), `board` (`move`, `moveTo`, `moved`, `empty`). Parts:
+`sc-agenda` (`--day`), `sc-agenda__days`, `sc-agenda__day` (`--today`, `--empty`),
+`sc-agenda__date`, `sc-agenda__weekday`, `sc-agenda__number`, `sc-agenda__events`,
+`sc-agenda__event`, `sc-agenda__time`, `sc-agenda__what`, `sc-agenda__title`,
+`sc-agenda__detail`, `sc-agenda__empty`; `sc-timeline`, `sc-timeline__item` (`--info`,
+`--success`, `--warning`, `--danger`), `sc-timeline__dot`, `sc-timeline__body`,
+`sc-timeline__head`, `sc-timeline__title`, `sc-timeline__status`, `sc-timeline__when`,
+`sc-timeline__text`; `sc-board`, `sc-board__column` (`--over`), `sc-board__head`,
+`sc-board__title`, `sc-board__count`, `sc-board__cards`, `sc-board__card` (`--dragging`),
+`sc-board__card-title`, `sc-board__card-subtitle`, `sc-board__card-meta`, `sc-board__move`,
+`sc-board__menu`, `sc-board__empty`.
+
+## View
+
+`<View client name contact? blocks? components? classNames? messages? locale? onAction? />` draws
+an agent's view where your page puts it: what the agent keeps on show for each person (their
+next meeting, their week), a dashboard's spec rendered for one contact with their own rows
+(`GET /views/{name}/render`). With a person's token it is theirs; for the business, `contact`
+names whom (their id). It is read when shown and again every `VIEW_POLL_MS` (30 s), so it shows
+what the rows hold now; while it is first read an empty box holds its place, and a view that
+isn't there (or isn't the person's) draws nothing. `useView(client, name, contact?)` gives
+`{view, problem, gone}` for your own layout (`view.title`, `view.blocks`, `view.text`).
+
+```tsx
+<View
+  client={client}
+  name="proxima_reunion"
+  blocks={{ "demoprep.deal-card": DealCard }}
+  messages={KIT_MESSAGES_ES}
+  locale={es}
+/>
+```
+
 ## AgentAbout
 
 `<AgentAbout client agentId name messages? classNames? controls? apps? locale? view? onViewChange? onOpenFile? onOpenConversation? />`: Qué puede, made to sit

package/dist/AgentChat.d.ts

@@ -5,7 +5,9 @@ import { KitPart } from "./kit/context.js";
 import { ToolHandler } from "./useConversation.js";
 import { BrowserMessages, BrowserPart } from "./BrowserView.js";
 import { Dictate } from "./useDictation.js";
-import { SurfaceComponents, SurfacePart } from "./surface/scope.js";
+import { PlacedPart } from "./surface/Placed.js";
+import { SurfacePlaces } from "./surface/places.js";
+import { HostBlocks, SurfaceComponents, SurfacePart } from "./surface/scope.js";
 import { ReactNode } from "react";
 //#region src/AgentChat.d.ts
 /** The words the chat says; a host gives its own, in its language. */
@@ -74,6 +76,13 @@ export interface ChatMessages {
   confirming: string;
   /** The line across the log where the agent handed the conversation to a person. */
   handedOff: string;
+  /**
+   * The line where the agent put what it showed in a panel or a modal, which opens it again:
+   * the agent's name and the surface's title ("Ray opened your week").
+   */
+  opened: (name: string, title: string) => string;
+  /** The button that closes a panel or a modal. */
+  closePlaced: string;
   /**
    * The line across the log where who answers the conversation changed (`handovers`), before
    * why: to whom (`holder`), and who changed it (`by`).
@@ -108,8 +117,8 @@ export interface ChatMessages {
 }
 export declare const CHAT_MESSAGES: ChatMessages;
 /** The chat's parts, by the class each carries; `classNames` adds a host's own under the same keys. */
-export type ChatPart = "sc-chat" | "sc-chat--builder" | "sc-chat--console" | "sc-chat__log" | "sc-chat__log--channel" | "sc-chat__message" | "sc-chat__message--person" | "sc-chat__message--agent" | "sc-chat__message--action" | "sc-chat__message--business" | "sc-chat__said" | "sc-chat__business" | "sc-chat__meta" | "sc-chat__delivery" | "sc-chat__text" | "sc-chat__steps" | "sc-chat__step" | "sc-chat__mark" | "sc-chat__step--running" | "sc-chat__step--queued" | "sc-chat__step--waiting" | "sc-chat__step--done" | "sc-chat__step--failed" | "sc-chat__output" | "sc-chat__request" | "sc-chat__requests" | "sc-chat__ask" | "sc-chat__ask-fields" | "sc-chat__confirming" | "sc-chat__screen" | "sc-chat__screen--bare" | "sc-chat__handoff" | "sc-chat__handover" | "sc-chat__decision" | "sc-chat__message--heard" | "sc-chat__message--voice" | "sc-chat__transcript" | "sc-chat__cut" | "sc-chat__reply" | "sc-chat__status" | "sc-chat__done" | "sc-chat__empty" | "sc-chat__suggestion" | "sc-chat__composer" | "sc-chat__files" | "sc-chat__attach" | "sc-chat__dictate" | "sc-chat__typing" | "sc-chat__dictation" | "sc-chat__drop" | "sc-chat__input" | "sc-chat__actions" | "sc-chat__send" | "sc-chat__stop";
-type ClassNames = Partial<Record<ChatPart | SurfacePart | KitPart | BrowserPart, string>> | undefined;
+export type ChatPart = "sc-chat" | "sc-chat--builder" | "sc-chat--console" | "sc-chat--placed" | "sc-chat__log" | "sc-chat__log--channel" | "sc-chat__message" | "sc-chat__message--person" | "sc-chat__message--agent" | "sc-chat__message--action" | "sc-chat__message--business" | "sc-chat__said" | "sc-chat__business" | "sc-chat__meta" | "sc-chat__delivery" | "sc-chat__text" | "sc-chat__steps" | "sc-chat__step" | "sc-chat__mark" | "sc-chat__step--running" | "sc-chat__step--queued" | "sc-chat__step--waiting" | "sc-chat__step--done" | "sc-chat__step--failed" | "sc-chat__output" | "sc-chat__request" | "sc-chat__requests" | "sc-chat__ask" | "sc-chat__ask-fields" | "sc-chat__confirming" | "sc-chat__screen" | "sc-chat__screen--bare" | "sc-chat__handoff" | "sc-chat__placed" | "sc-chat__placed--open" | "sc-chat__handover" | "sc-chat__decision" | "sc-chat__message--heard" | "sc-chat__message--voice" | "sc-chat__transcript" | "sc-chat__cut" | "sc-chat__reply" | "sc-chat__status" | "sc-chat__done" | "sc-chat__empty" | "sc-chat__suggestion" | "sc-chat__composer" | "sc-chat__files" | "sc-chat__attach" | "sc-chat__dictate" | "sc-chat__typing" | "sc-chat__dictation" | "sc-chat__drop" | "sc-chat__input" | "sc-chat__actions" | "sc-chat__send" | "sc-chat__stop";
+type ClassNames = Partial<Record<ChatPart | SurfacePart | KitPart | BrowserPart | PlacedPart, string>> | undefined;
 /**
  * How the chat looks. `agent` is an agent's conversation. `builder` is the builder's, v2's: the
  * working line says what it does under the brand's sweeping light, the steps open on what they
@@ -152,6 +161,13 @@ export interface AgentChatProps {
   classNames?: ClassNames;
   /** The host's own drawing of a block type, for every surface the agent shows. */
   components?: SurfaceComponents | undefined;
+  /** The host's own blocks, by the name each was declared with (`PUT /v1/blocks/{name}`). */
+  blocks?: HostBlocks | undefined;
+  /**
+   * Where the agent may put what it shows besides the conversation: a panel beside it, a modal
+   * over the page (both by default). One the host doesn't allow shows in the conversation.
+   */
+  surfaces?: SurfacePlaces | undefined;
   /** The language of the surfaces' calendars, days, times and numbers; English by default. */
   locale?: KitLocale | undefined;
   /** An error's code, from the socket or `load` for a history that could not be read; the host words it. */

package/dist/AgentChat.js

@@ -16,10 +16,12 @@ 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 = {
@@ -63,6 +65,8 @@ const CHAT_MESSAGES = {
 	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) {
@@ -93,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;
 /**
@@ -119,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
@@ -142,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;
@@ -158,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",
@@ -211,6 +283,10 @@ function Chat({ client, conversationId, name, messages, classNames, components,
 				words,
 				classNames,
 				components,
+				blocks,
+				places,
+				opened,
+				onOpen: setOpened,
 				locale,
 				following,
 				took,
@@ -221,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,
@@ -356,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;
@@ -396,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, {
@@ -449,12 +549,16 @@ 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,
@@ -679,7 +783,7 @@ 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, onActAll }) {
+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) : {
@@ -727,24 +831,42 @@ 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,
@@ -1274,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