@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/dist/AgentSpace.js

@@ -0,0 +1,339 @@
+import { classes } from "./classes.js";
+import { KitProvider } from "./kit/context.js";
+import { Button } from "./kit/Button.js";
+import { agentGlyph } from "./agentIcons.js";
+import { ApiError } from "./client.js";
+import { agentTint } from "./tint.js";
+import { AgentTasks, TASK_MESSAGES, useTasks } from "./AgentTasks.js";
+import { useConversation } from "./useConversation.js";
+import { AgentChat } from "./AgentChat.js";
+import { Modes } from "./Modes.js";
+import { useAgentFace } from "./useAgentFace.js";
+import { Suspense, lazy, useEffect, useRef, useState } from "react";
+import { PhoneIcon, XIcon } from "@phosphor-icons/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/AgentSpace.tsx
+const VoiceCall = lazy(() => import("./VoiceCall.js").then((module) => ({ default: module.VoiceCall })));
+const SPACE_MESSAGES = {
+	modes: {
+		label: "Mode",
+		text: "Text",
+		voice: "Voice"
+	},
+	again: "Call again",
+	close: "Close",
+	agent: "Agent",
+	opening: "Opening the conversation…",
+	failed: "The conversation couldn't be opened.",
+	retry: "Try again",
+	chat: {},
+	voice: {},
+	tasks: TASK_MESSAGES
+};
+/** How big a call's orb is drawn in each layout: a small panel keeps room for what is said. */
+const ORB_SIZES = {
+	compact: 200,
+	full: 280
+};
+/**
+* An agent in a host's page, for the people it serves: the conversation, and when the agent has a
+* voice, two modes beside the composer's paperclip, text and voice. Voice turns the space into
+* the call (`VoiceCall`, with the orb and what is being said), in the same place and size, with
+* the modes at its foot to go back; a call is a conversation of its own (the API makes one with
+* each), and once the agent took it the space goes on in it, where what was said shows, told
+* through `onConversation`. Ending the call, or choosing text, comes back to writing; a call that
+* couldn't begin stays to say why, and offers to try again. While the agent runs tasks for the
+* person (what they asked it to do later), a line over the chat opens them, with their runs, to
+* pause or take away. The conversation is the one given, or
+* one the space starts. The agent's face over it all is the host's to turn on (`header`). Styled
+* as `AgentChat` is: the tokens, `messages`, `classNames` and `components`. One agent per mount:
+* key it on the agent's id.
+*/
+function AgentSpace({ client, agentId, conversationId, onConversation, layout = "compact", header = false, steps, messages, classNames, components, locale, suggestions, onTool, onError, orb, onClose, tasks: showsTasks = true }) {
+	const words = {
+		...SPACE_MESSAGES,
+		...messages
+	};
+	const theirs = useTasks(client, agentId, showsTasks && client.who === "person");
+	const [listing, setListing] = useState(false);
+	const { face, loading } = useAgentFace(client, agentId);
+	const opened = useOpened(client, agentId, conversationId, onConversation);
+	const [mode, setMode] = useState("text");
+	const [attempt, setAttempt] = useState(0);
+	const [called, setCalled] = useState(null);
+	const answered = useRef(false);
+	const [refocus, setRefocus] = useState(false);
+	const root = useRef(null);
+	const tint = agentTint(agentId);
+	const Glyph = agentGlyph(face?.icon);
+	const name = face?.name ?? (loading ? "" : words.agent);
+	const id = opened.id;
+	const voice = face?.voice.enabled === true;
+	const parts = [`sc-space--${layout}`];
+	if (mode === "voice") parts.push("sc-space--voice");
+	/** Back to writing: in the call's conversation once the agent took the call. */
+	const write = () => {
+		if (answered.current && called !== null) opened.go(called);
+		setMode("text");
+	};
+	const choose = (next) => {
+		setRefocus(root.current?.matches(":focus-within") ?? false);
+		if (next === "text") {
+			write();
+			return;
+		}
+		answered.current = false;
+		setCalled(null);
+		setAttempt((count) => count + 1);
+		setMode("voice");
+	};
+	const modes = (current) => /* @__PURE__ */ jsx(Modes, {
+		mode: current,
+		onChange: choose,
+		words: words.modes,
+		classNames,
+		focus: refocus
+	});
+	const body = () => {
+		if (opened.failed) return /* @__PURE__ */ jsxs("div", {
+			className: classes(classNames, "sc-space__status"),
+			children: [/* @__PURE__ */ jsx("p", { children: words.failed }), /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				onClick: opened.retry,
+				children: words.retry
+			})]
+		});
+		if (id === null || loading) return /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: classes(classNames, "sc-space__status"),
+			children: words.opening
+		});
+		if (listing && theirs.tasks !== null) return /* @__PURE__ */ jsx(AgentTasks, {
+			client,
+			agentId,
+			tasks: theirs.tasks,
+			onChange: theirs.refresh,
+			onBack: () => {
+				setListing(false);
+			},
+			words: words.tasks,
+			classNames
+		});
+		if (mode === "voice" && voice) return /* @__PURE__ */ jsxs("div", {
+			part: "voice",
+			className: classes(classNames, "sc-space__voice"),
+			children: [/* @__PURE__ */ jsx(Suspense, {
+				fallback: null,
+				children: /* @__PURE__ */ jsx(VoiceCall, {
+					connect: async () => {
+						const join = await client.conversations.call(agentId);
+						setCalled(join.conversation_id);
+						return join;
+					},
+					onAnswer: () => {
+						answered.current = true;
+					},
+					onEnd: (_, problem) => {
+						if (problem !== null) return;
+						setRefocus(root.current?.matches(":focus-within") ?? false);
+						write();
+					},
+					name,
+					tint,
+					orb,
+					orbSize: ORB_SIZES[layout],
+					messages: words.voice,
+					classNames,
+					captions: called !== null && /* @__PURE__ */ jsx(Captions, {
+						client,
+						conversationId: called,
+						onTool,
+						classNames
+					}),
+					after: /* @__PURE__ */ jsx(Button, {
+						tone: "primary",
+						icon: PhoneIcon,
+						onClick: () => {
+							choose("voice");
+						},
+						children: words.again
+					})
+				}, attempt)
+			}), /* @__PURE__ */ jsx("div", {
+				className: classes(classNames, "sc-space__foot"),
+				children: modes("voice")
+			})]
+		});
+		const count = theirs.tasks?.length ?? 0;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [count > 0 && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			part: "tasks-open",
+			className: classes(classNames, "sc-space__tasks"),
+			onClick: () => {
+				setListing(true);
+				theirs.refresh();
+			},
+			children: words.tasks.open(count)
+		}), /* @__PURE__ */ jsx(AgentChat, {
+			client,
+			conversationId: id,
+			name,
+			messages: words.chat,
+			classNames,
+			components,
+			locale,
+			suggestions,
+			steps,
+			actions: voice ? modes("text") : void 0,
+			onTool,
+			onError
+		})] });
+	};
+	const close = onClose && /* @__PURE__ */ jsx(Button, {
+		tone: "ghost",
+		size: "sm",
+		icon: XIcon,
+		"aria-label": words.close,
+		title: words.close,
+		onClick: onClose,
+		part: "close",
+		className: classes(classNames, "sc-space__close")
+	});
+	return /* @__PURE__ */ jsx(KitProvider, {
+		classNames,
+		messages: words.chat.kit,
+		locale,
+		children: /* @__PURE__ */ jsxs("section", {
+			ref: root,
+			"aria-label": name || void 0,
+			part: "space",
+			className: `sc ${classes(classNames, "sc-space", ...parts)}`,
+			children: [header ? /* @__PURE__ */ jsxs("header", {
+				part: "header",
+				className: classes(classNames, "sc-space__face"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: classes(classNames, "sc-space__mark", `sc-space__mark--${tint}`),
+						children: /* @__PURE__ */ jsx(Glyph, { weight: "duotone" })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: classes(classNames, "sc-space__who"),
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: classes(classNames, "sc-space__name"),
+							children: name
+						}), face?.role && /* @__PURE__ */ jsx("p", {
+							className: classes(classNames, "sc-space__role"),
+							children: face.role
+						})]
+					}),
+					close
+				]
+			}) : close, /* @__PURE__ */ jsx("div", {
+				className: classes(classNames, "sc-space__body"),
+				children: body()
+			})]
+		})
+	});
+}
+/**
+* What is being said on the call, under the orb: the person's last words, and the agent's answer
+* as it comes, read live from the call's own conversation (where the platform keeps them). The
+* host's tools the agent calls meanwhile run here too, as in the chat.
+*/
+function Captions({ client, conversationId, onTool, classNames }) {
+	const { person, agent } = captionsOf(useConversation(client, conversationId, { onTool }));
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [person !== "" && /* @__PURE__ */ jsx("p", {
+		className: classes(classNames, "sc-space__caption", "sc-space__caption--person"),
+		children: person
+	}), agent !== "" && /* @__PURE__ */ jsx("p", {
+		className: classes(classNames, "sc-space__caption", "sc-space__caption--agent"),
+		children: agent
+	})] });
+}
+/**
+* The last exchange of a call, as its captions say it: what the person last said, and the agent's
+* words after it (as they stream, else the last it said; its greeting before anything was said).
+*/
+function captionsOf({ messages, pending, draft }) {
+	const lastSaid = messages.findLastIndex((message) => message.role === "user");
+	const replied = messages.slice(lastSaid + 1).findLast((message) => message.role === "assistant" && message.author !== "operator" && message.text !== "");
+	return {
+		person: messages[lastSaid]?.text ?? "",
+		agent: pending && draft !== "" ? draft : replied?.text ?? ""
+	};
+}
+/** Whether a conversation asked for is gone for this person: not there, or not theirs. */
+const isGone = (error) => error instanceof ApiError && (error.status === 404 || error.status === 403);
+/**
+* The conversation the space shows: the one given while it is still the person's, else a new one
+* with the agent, told to `onConversation`. Asked once per attempt (a second effect of the same
+* attempt, as React's strict mode runs, waits on the first rather than starting another); after
+* that, the conversation it opened is the one it goes on with, until it goes on in another (`go`:
+* a call's), told the same way.
+*/
+function useOpened(client, agentId, given, onConversation) {
+	const kept = useRef(given);
+	const asking = useRef(null);
+	const [id, setId] = useState(null);
+	const [failed, setFailed] = useState(false);
+	const [attempt, setAttempt] = useState(0);
+	const told = useRef(onConversation);
+	useEffect(() => {
+		told.current = onConversation;
+	});
+	const started = (conversation) => {
+		told.current?.(conversation);
+	};
+	useEffect(() => {
+		let current = true;
+		const start = () => client.conversations.start(agentId).then((conversation) => {
+			started(conversation.id);
+			return conversation.id;
+		});
+		const open = () => {
+			const known = kept.current;
+			if (known === void 0) return start();
+			return client.conversations.get(known).then((conversation) => conversation.id, (error) => isGone(error) ? start() : Promise.reject(error));
+		};
+		const asked = asking.current;
+		const ask = asked?.client === client && asked.attempt === attempt ? asked : {
+			client,
+			attempt,
+			id: open()
+		};
+		asking.current = ask;
+		ask.id.then((opened) => {
+			if (!current) return;
+			kept.current = opened;
+			setId(opened);
+		}, () => {
+			if (current) setFailed(true);
+		});
+		return () => {
+			current = false;
+		};
+	}, [
+		client,
+		agentId,
+		attempt
+	]);
+	return {
+		id,
+		failed,
+		retry: () => {
+			setFailed(false);
+			setAttempt((count) => count + 1);
+		},
+		go: (conversation) => {
+			if (conversation === kept.current) return;
+			kept.current = conversation;
+			setId(conversation);
+			started(conversation);
+		}
+	};
+}
+//#endregion
+export { AgentSpace, SPACE_MESSAGES, captionsOf };
+
+//# sourceMappingURL=AgentSpace.js.map

package/dist/AgentSpace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentSpace.js","names":[],"sources":["../src/AgentSpace.tsx"],"sourcesContent":["import { PhoneIcon, XIcon } from \"@phosphor-icons/react\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { AgentChat, type ChatMessages, type ChatPart, type ChatSteps } from \"./AgentChat\";\nimport { agentGlyph } from \"./agentIcons\";\nimport {\n  AgentTasks,\n  TASK_MESSAGES,\n  useTasks,\n  type TaskMessages,\n  type TaskPart,\n} from \"./AgentTasks\";\nimport type { BrowserPart } from \"./BrowserView\";\nimport { classes } from \"./classes\";\nimport { ApiError, type Client } from \"./client\";\nimport { Button } from \"./kit/Button\";\nimport { KitProvider, type KitPart } from \"./kit/context\";\nimport type { KitLocale } from \"./kit/messages\";\nimport { Modes, type ModeMessages, type ModePart, type SpaceMode } from \"./Modes\";\nimport type { SurfaceComponents, SurfacePart } from \"./surface/scope\";\nimport { agentTint, type AgentTint } from \"./tint\";\nimport { useAgentFace } from \"./useAgentFace\";\nimport { useConversation, type LiveConversation, type ToolHandler } from \"./useConversation\";\nimport type { VoiceCallMessages, VoiceCallPart } from \"./VoiceCall\";\nimport type { OrbStyle } from \"./voice/orbs\";\n\n// The call, and LiveKit under it, load the first time someone calls.\nconst VoiceCall = lazy(() =>\n  import(\"./VoiceCall\").then((module) => ({ default: module.VoiceCall })),\n);\n\n/** The words the space says around the chat and the call; a host gives its own, in its language. */\nexport interface SpaceMessages {\n  /** The two modes beside the composer's paperclip: the group's name, and each mode's. */\n  modes: ModeMessages;\n  /** After a call that couldn't begin: try it again. */\n  again: string;\n  /** The button that closes the space, where the host gives `onClose`. */\n  close: string;\n  /** The agent's name when its face can't be read. */\n  agent: string;\n  /** While the conversation is found, or started. */\n  opening: string;\n  /** The conversation could not be opened; and the button that tries again. */\n  failed: string;\n  retry: string;\n  /** What the chat says (`AgentChat`'s words). */\n  chat: Partial<ChatMessages>;\n  /** What a call says (`VoiceCall`'s words). */\n  voice: Partial<VoiceCallMessages>;\n  /** What the person's tasks say (`AgentTasks`'s words). */\n  tasks: TaskMessages;\n}\n\nexport const SPACE_MESSAGES: SpaceMessages = {\n  modes: { label: \"Mode\", text: \"Text\", voice: \"Voice\" },\n  again: \"Call again\",\n  close: \"Close\",\n  agent: \"Agent\",\n  opening: \"Opening the conversation…\",\n  failed: \"The conversation couldn't be opened.\",\n  retry: \"Try again\",\n  chat: {},\n  voice: {},\n  tasks: TASK_MESSAGES,\n};\n\n/** The space's parts, by the class each carries; `classNames` adds a host's own under the same keys. */\nexport type SpacePart =\n  | \"sc-space\"\n  | \"sc-space--compact\"\n  | \"sc-space--full\"\n  | \"sc-space--voice\"\n  | \"sc-space__face\"\n  | \"sc-space__mark\"\n  | `sc-space__mark--${AgentTint}`\n  | \"sc-space__who\"\n  | \"sc-space__name\"\n  | \"sc-space__role\"\n  | \"sc-space__close\"\n  | \"sc-space__body\"\n  | \"sc-space__voice\"\n  | \"sc-space__foot\"\n  | \"sc-space__caption\"\n  | \"sc-space__caption--person\"\n  | \"sc-space__caption--agent\"\n  | \"sc-space__status\"\n  | \"sc-space__tasks\"\n  | ModePart;\n\n/**\n * How the space sits: `compact` in a small panel (a widget's, a side of the host's page); `full`\n * as a page's main column, the conversation at a reading measure.\n */\nexport type SpaceLayout = \"compact\" | \"full\";\n\n/** How big a call's orb is drawn in each layout: a small panel keeps room for what is said. */\nconst ORB_SIZES: Readonly<Record<SpaceLayout, number>> = { compact: 200, full: 280 };\n\nexport interface AgentSpaceProps {\n  client: Client;\n  /** The agent the person talks to (its face is read with `client`). One per mount: key on it. */\n  agentId: string;\n  /**\n   * The person's conversation to go on with, read when the space opens. Without one, or once it\n   * is gone (not theirs, not there), a new one starts, told through `onConversation`.\n   */\n  conversationId?: string | undefined;\n  /** Hears the conversation the space started, for the host to keep and give back next time. */\n  onConversation?: ((id: string) => void) | undefined;\n  layout?: SpaceLayout | undefined;\n  /**\n   * Draws the agent's face at the top: its mark in its tint, its name and role (and the close).\n   * Off by default: the host's page says who it is, or draws its own with `useAgentFace`.\n   */\n  header?: boolean | undefined;\n  /**\n   * Whether the chat shows the agent's steps (`AgentChat`'s `steps`): by default hidden for a\n   * person or a visitor, shown for the business.\n   */\n  steps?: ChatSteps | undefined;\n  messages?: Partial<SpaceMessages> | undefined;\n  classNames?:\n    | Partial<\n        Record<\n          SpacePart | ChatPart | SurfacePart | KitPart | BrowserPart | VoiceCallPart | TaskPart,\n          string\n        >\n      >\n    | undefined;\n  /** The host's own drawing of a block type, for every surface the agent shows. */\n  components?: SurfaceComponents | undefined;\n  /** The language of the surfaces' calendars, days, times and numbers; English by default. */\n  locale?: KitLocale | undefined;\n  /** A few things the person might say first, offered while nothing has been said. */\n  suggestions?: readonly string[] | undefined;\n  /** Runs the host's own tools the agent calls in the page (`AgentChat`'s `onTool`). */\n  onTool?: ToolHandler | undefined;\n  /** An error's code, from the chat's socket or `load`; the host words it. */\n  onError?: ((code: string) => void) | undefined;\n  /** How a call's orb is drawn: `\"wave\"` (the default) or `\"fluid-dots\"`. */\n  orb?: OrbStyle | undefined;\n  /** Draws a close button (in the face, or at the top's end without it), for a space in a panel. */\n  onClose?: (() => void) | undefined;\n  /**\n   * Whether a person sees the tasks the agent runs for them (`AgentTasks`): a line over the chat\n   * while there are any, which opens them. On by default; the business's own space never has it.\n   */\n  tasks?: boolean | undefined;\n}\n\n/**\n * An agent in a host's page, for the people it serves: the conversation, and when the agent has a\n * voice, two modes beside the composer's paperclip, text and voice. Voice turns the space into\n * the call (`VoiceCall`, with the orb and what is being said), in the same place and size, with\n * the modes at its foot to go back; a call is a conversation of its own (the API makes one with\n * each), and once the agent took it the space goes on in it, where what was said shows, told\n * through `onConversation`. Ending the call, or choosing text, comes back to writing; a call that\n * couldn't begin stays to say why, and offers to try again. While the agent runs tasks for the\n * person (what they asked it to do later), a line over the chat opens them, with their runs, to\n * pause or take away. The conversation is the one given, or\n * one the space starts. The agent's face over it all is the host's to turn on (`header`). Styled\n * as `AgentChat` is: the tokens, `messages`, `classNames` and `components`. One agent per mount:\n * key it on the agent's id.\n */\nexport function AgentSpace({\n  client,\n  agentId,\n  conversationId,\n  onConversation,\n  layout = \"compact\",\n  header = false,\n  steps,\n  messages,\n  classNames,\n  components,\n  locale,\n  suggestions,\n  onTool,\n  onError,\n  orb,\n  onClose,\n  tasks: showsTasks = true,\n}: AgentSpaceProps) {\n  const words = { ...SPACE_MESSAGES, ...messages };\n  const theirs = useTasks(client, agentId, showsTasks && client.who === \"person\");\n  const [listing, setListing] = useState(false);\n  const { face, loading } = useAgentFace(client, agentId);\n  const opened = useOpened(client, agentId, conversationId, onConversation);\n  const [mode, setMode] = useState<SpaceMode>(\"text\");\n  // Each call made is a new attempt, which keys a new `VoiceCall`.\n  const [attempt, setAttempt] = useState(0);\n  // The conversation the call being made is (each call is one of its own, made with it), and\n  // whether the agent took it: once it did, the space goes on in it.\n  const [called, setCalled] = useState<string | null>(null);\n  const answered = useRef(false);\n  // Whether the modes drawn after a switch take the keyboard: when it was in the space (asked of\n  // the space itself, which a shadow root's focus answers too).\n  const [refocus, setRefocus] = useState(false);\n  const root = useRef<HTMLElement>(null);\n  const tint = agentTint(agentId);\n  const Glyph = agentGlyph(face?.icon);\n  const name = face?.name ?? (loading ? \"\" : words.agent);\n  const id = opened.id;\n  const voice = face?.voice.enabled === true;\n  const parts: SpacePart[] = [`sc-space--${layout}`];\n  if (mode === \"voice\") parts.push(\"sc-space--voice\");\n\n  /** Back to writing: in the call's conversation once the agent took the call. */\n  const write = () => {\n    if (answered.current && called !== null) opened.go(called);\n    setMode(\"text\");\n  };\n  const choose = (next: SpaceMode) => {\n    setRefocus(root.current?.matches(\":focus-within\") ?? false);\n    if (next === \"text\") {\n      write();\n      return;\n    }\n    answered.current = false;\n    setCalled(null);\n    setAttempt((count) => count + 1);\n    setMode(\"voice\");\n  };\n  const modes = (current: SpaceMode) => (\n    <Modes\n      mode={current}\n      onChange={choose}\n      words={words.modes}\n      classNames={classNames}\n      focus={refocus}\n    />\n  );\n\n  const body = () => {\n    if (opened.failed) {\n      return (\n        <div className={classes(classNames, \"sc-space__status\")}>\n          <p>{words.failed}</p>\n          <Button size=\"sm\" onClick={opened.retry}>\n            {words.retry}\n          </Button>\n        </div>\n      );\n    }\n    if (id === null || loading) {\n      return (\n        <p role=\"status\" className={classes(classNames, \"sc-space__status\")}>\n          {words.opening}\n        </p>\n      );\n    }\n    if (listing && theirs.tasks !== null) {\n      return (\n        <AgentTasks\n          client={client}\n          agentId={agentId}\n          tasks={theirs.tasks}\n          onChange={theirs.refresh}\n          onBack={() => {\n            setListing(false);\n          }}\n          words={words.tasks}\n          classNames={classNames}\n        />\n      );\n    }\n    if (mode === \"voice\" && voice) {\n      return (\n        <div part=\"voice\" className={classes(classNames, \"sc-space__voice\")}>\n          <Suspense fallback={null}>\n            <VoiceCall\n              key={attempt}\n              connect={async () => {\n                const join = await client.conversations.call(agentId);\n                setCalled(join.conversation_id);\n                return join;\n              }}\n              onAnswer={() => {\n                answered.current = true;\n              }}\n              // Over, the call gives the space back to writing; one that couldn't begin stays to\n              // say why, with the way to try again and the modes to go back.\n              onEnd={(_, problem) => {\n                if (problem !== null) return;\n                setRefocus(root.current?.matches(\":focus-within\") ?? false);\n                write();\n              }}\n              name={name}\n              tint={tint}\n              orb={orb}\n              orbSize={ORB_SIZES[layout]}\n              messages={words.voice}\n              classNames={classNames}\n              captions={\n                called !== null && (\n                  <Captions\n                    client={client}\n                    conversationId={called}\n                    onTool={onTool}\n                    classNames={classNames}\n                  />\n                )\n              }\n              after={\n                <Button\n                  tone=\"primary\"\n                  icon={PhoneIcon}\n                  onClick={() => {\n                    choose(\"voice\");\n                  }}\n                >\n                  {words.again}\n                </Button>\n              }\n            />\n          </Suspense>\n          <div className={classes(classNames, \"sc-space__foot\")}>{modes(\"voice\")}</div>\n        </div>\n      );\n    }\n    const count = theirs.tasks?.length ?? 0;\n    return (\n      <>\n        {count > 0 && (\n          <button\n            type=\"button\"\n            part=\"tasks-open\"\n            className={classes(classNames, \"sc-space__tasks\")}\n            onClick={() => {\n              setListing(true);\n              void theirs.refresh();\n            }}\n          >\n            {words.tasks.open(count)}\n          </button>\n        )}\n        <AgentChat\n          client={client}\n          conversationId={id}\n          name={name}\n          messages={words.chat}\n          classNames={classNames}\n          components={components}\n          locale={locale}\n          suggestions={suggestions}\n          steps={steps}\n          actions={voice ? modes(\"text\") : undefined}\n          onTool={onTool}\n          onError={onError}\n        />\n      </>\n    );\n  };\n\n  const close = onClose && (\n    <Button\n      tone=\"ghost\"\n      size=\"sm\"\n      icon={XIcon}\n      aria-label={words.close}\n      title={words.close}\n      onClick={onClose}\n      part=\"close\"\n      className={classes(classNames, \"sc-space__close\")}\n    />\n  );\n\n  return (\n    <KitProvider classNames={classNames} messages={words.chat.kit} locale={locale}>\n      <section\n        ref={root}\n        aria-label={name || undefined}\n        part=\"space\"\n        className={`sc ${classes(classNames, \"sc-space\", ...parts)}`}\n      >\n        {header ? (\n          <header part=\"header\" className={classes(classNames, \"sc-space__face\")}>\n            <span\n              aria-hidden\n              className={classes(classNames, \"sc-space__mark\", `sc-space__mark--${tint}`)}\n            >\n              <Glyph weight=\"duotone\" />\n            </span>\n            <div className={classes(classNames, \"sc-space__who\")}>\n              <h2 className={classes(classNames, \"sc-space__name\")}>{name}</h2>\n              {face?.role && <p className={classes(classNames, \"sc-space__role\")}>{face.role}</p>}\n            </div>\n            {close}\n          </header>\n        ) : (\n          close\n        )}\n        <div className={classes(classNames, \"sc-space__body\")}>{body()}</div>\n      </section>\n    </KitProvider>\n  );\n}\n\n/**\n * What is being said on the call, under the orb: the person's last words, and the agent's answer\n * as it comes, read live from the call's own conversation (where the platform keeps them). The\n * host's tools the agent calls meanwhile run here too, as in the chat.\n */\nfunction Captions({\n  client,\n  conversationId,\n  onTool,\n  classNames,\n}: {\n  client: Client;\n  conversationId: string;\n  onTool: ToolHandler | undefined;\n  classNames: Partial<Record<SpacePart, string>> | undefined;\n}) {\n  const live = useConversation(client, conversationId, { onTool });\n  const { person, agent } = captionsOf(live);\n  return (\n    <>\n      {person !== \"\" && (\n        <p className={classes(classNames, \"sc-space__caption\", \"sc-space__caption--person\")}>\n          {person}\n        </p>\n      )}\n      {agent !== \"\" && (\n        <p className={classes(classNames, \"sc-space__caption\", \"sc-space__caption--agent\")}>\n          {agent}\n        </p>\n      )}\n    </>\n  );\n}\n\n/**\n * The last exchange of a call, as its captions say it: what the person last said, and the agent's\n * words after it (as they stream, else the last it said; its greeting before anything was said).\n */\nexport function captionsOf({\n  messages,\n  pending,\n  draft,\n}: Pick<LiveConversation, \"messages\" | \"pending\" | \"draft\">): {\n  person: string;\n  agent: string;\n} {\n  const lastSaid = messages.findLastIndex((message) => message.role === \"user\");\n  const replied = messages\n    .slice(lastSaid + 1)\n    .findLast(\n      (message) =>\n        message.role === \"assistant\" && message.author !== \"operator\" && message.text !== \"\",\n    );\n  return {\n    person: messages[lastSaid]?.text ?? \"\",\n    agent: pending && draft !== \"\" ? draft : (replied?.text ?? \"\"),\n  };\n}\n\n/** Whether a conversation asked for is gone for this person: not there, or not theirs. */\nconst isGone = (error: unknown): boolean =>\n  error instanceof ApiError && (error.status === 404 || error.status === 403);\n\n/**\n * The conversation the space shows: the one given while it is still the person's, else a new one\n * with the agent, told to `onConversation`. Asked once per attempt (a second effect of the same\n * attempt, as React's strict mode runs, waits on the first rather than starting another); after\n * that, the conversation it opened is the one it goes on with, until it goes on in another (`go`:\n * a call's), told the same way.\n */\nfunction useOpened(\n  client: Client,\n  agentId: string,\n  given: string | undefined,\n  onConversation: ((id: string) => void) | undefined,\n): { id: string | null; failed: boolean; retry: () => void; go: (id: string) => void } {\n  const kept = useRef(given);\n  const asking = useRef<{ client: Client; attempt: number; id: Promise<string> } | null>(null);\n  const [id, setId] = useState<string | null>(null);\n  const [failed, setFailed] = useState(false);\n  const [attempt, setAttempt] = useState(0);\n  // The host's ear as it last gave it, told from the effect's answer and from a call's end alike.\n  const told = useRef(onConversation);\n  useEffect(() => {\n    told.current = onConversation;\n  });\n  const started = (conversation: string) => {\n    told.current?.(conversation);\n  };\n\n  useEffect(() => {\n    let current = true;\n    const start = () =>\n      client.conversations.start(agentId).then((conversation) => {\n        started(conversation.id);\n        return conversation.id;\n      });\n    const open = (): Promise<string> => {\n      const known = kept.current;\n      if (known === undefined) return start();\n      return client.conversations.get(known).then(\n        (conversation) => conversation.id,\n        (error: unknown) => (isGone(error) ? start() : Promise.reject(error)),\n      );\n    };\n    const asked = asking.current;\n    const ask =\n      asked?.client === client && asked.attempt === attempt\n        ? asked\n        : { client, attempt, id: open() };\n    asking.current = ask;\n    ask.id.then(\n      (opened) => {\n        if (!current) return;\n        kept.current = opened;\n        setId(opened);\n      },\n      () => {\n        if (current) setFailed(true);\n      },\n    );\n    return () => {\n      current = false;\n    };\n  }, [client, agentId, attempt]);\n\n  return {\n    id,\n    failed,\n    retry: () => {\n      setFailed(false);\n      setAttempt((count) => count + 1);\n    },\n    go: (conversation) => {\n      if (conversation === kept.current) return;\n      kept.current = conversation;\n      setId(conversation);\n      started(conversation);\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/AgentTasks.d.ts

@@ -0,0 +1,48 @@
+import { Task } from "./automation/types.js";
+import { Client } from "./client.js";
+//#region src/AgentTasks.d.ts
+/** What the person's tasks say, in the space; a host gives its own, in its language. */
+export interface TaskMessages {
+  /** Over the chat, when the agent runs any for them: how many, to open them. */
+  open: (count: number) => string;
+  /** Over the list. */
+  title: string;
+  back: string;
+  /** Taking one away. */
+  remove: string;
+  /** None left. */
+  empty: string;
+  /** A change that didn't go through. */
+  failed: string;
+}
+export declare const TASK_MESSAGES: TaskMessages;
+export type TaskPart = "sc-tasks" | "sc-tasks__head" | "sc-tasks__title" | "sc-tasks__list" | "sc-tasks__empty" | "sc-tasks__problem";
+/** How often the person's tasks are read again while the space is open. */
+export declare const TASKS_POLL_MS = 20000;
+/**
+ * The tasks the agent runs for the person the client speaks for, read when the space opens,
+ * again every `TASKS_POLL_MS` and on `refresh`. Null until read, and whenever it can't be (an API
+ * without tasks, the business's own client): the space then shows none.
+ */
+export declare function useTasks(client: Client, agentId: string, enabled: boolean): {
+  tasks: Task[] | null;
+  refresh: () => Promise<void>;
+};
+export interface AgentTasksProps {
+  client: Client;
+  agentId: string;
+  tasks: readonly Task[];
+  /** Read them again, after a change. */
+  onChange: () => Promise<void>;
+  onBack: () => void;
+  words: TaskMessages;
+  classNames?: Partial<Record<TaskPart, string>> | undefined;
+}
+/**
+ * The person's tasks, as they asked the agent for them: each as an automation reads (when, its
+ * words, its last runs and how each went), with their switch to pause it and the way to take it
+ * away; the way back to the conversation over them.
+ */
+export declare function AgentTasks({ client, agentId, tasks, onChange, onBack, words, classNames }: AgentTasksProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=AgentTasks.d.ts.map

package/dist/AgentTasks.js

@@ -0,0 +1,120 @@
+import { classes } from "./classes.js";
+import { Automation } from "./automation/Automation.js";
+import { Button } from "./kit/Button.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ArrowLeftIcon, TrashIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/AgentTasks.tsx
+const TASK_MESSAGES = {
+	open: (count) => count === 1 ? "1 task set up for you" : `${count} tasks set up for you`,
+	title: "Your tasks",
+	back: "Back to the conversation",
+	remove: "Remove",
+	empty: "Nothing set up. Ask the agent to remind you of something, or to check back later.",
+	failed: "That didn't go through. Try again."
+};
+/** How often the person's tasks are read again while the space is open. */
+const TASKS_POLL_MS = 2e4;
+/**
+* The tasks the agent runs for the person the client speaks for, read when the space opens,
+* again every `TASKS_POLL_MS` and on `refresh`. Null until read, and whenever it can't be (an API
+* without tasks, the business's own client): the space then shows none.
+*/
+function useTasks(client, agentId, enabled) {
+	const [tasks, setTasks] = useState(null);
+	const live = useRef(true);
+	const refresh = useCallback(async () => {
+		try {
+			const read = await client.tasks.list(agentId);
+			if (live.current) setTasks(read);
+		} catch {
+			if (live.current) setTasks(null);
+		}
+	}, [client, agentId]);
+	useEffect(() => {
+		live.current = true;
+		if (!enabled) return;
+		refresh();
+		const timer = setInterval(() => void refresh(), TASKS_POLL_MS);
+		return () => {
+			live.current = false;
+			clearInterval(timer);
+		};
+	}, [enabled, refresh]);
+	return {
+		tasks: enabled ? tasks : null,
+		refresh
+	};
+}
+/**
+* The person's tasks, as they asked the agent for them: each as an automation reads (when, its
+* words, its last runs and how each went), with their switch to pause it and the way to take it
+* away; the way back to the conversation over them.
+*/
+function AgentTasks({ client, agentId, tasks, onChange, onBack, words, classNames }) {
+	const [busy, setBusy] = useState(null);
+	const [failed, setFailed] = useState(false);
+	const change = async (task, doing) => {
+		setBusy(task.id);
+		setFailed(false);
+		try {
+			await doing();
+			await onChange();
+		} catch {
+			setFailed(true);
+		} finally {
+			setBusy(null);
+		}
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": words.title,
+		part: "tasks",
+		className: classes(classNames, "sc-tasks"),
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: classes(classNames, "sc-tasks__head"),
+				children: [/* @__PURE__ */ jsx(Button, {
+					tone: "ghost",
+					size: "sm",
+					icon: ArrowLeftIcon,
+					"aria-label": words.back,
+					title: words.back,
+					onClick: onBack
+				}), /* @__PURE__ */ jsx("h3", {
+					className: classes(classNames, "sc-tasks__title"),
+					children: words.title
+				})]
+			}),
+			failed && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: classes(classNames, "sc-tasks__problem"),
+				children: words.failed
+			}),
+			tasks.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: classes(classNames, "sc-tasks__empty"),
+				children: words.empty
+			}) : /* @__PURE__ */ jsx("div", {
+				className: classes(classNames, "sc-tasks__list"),
+				children: tasks.map((task) => /* @__PURE__ */ jsx(Automation, {
+					automation: task,
+					runs: task.runs,
+					switching: busy === task.id,
+					onSwitch: (on) => void change(task, () => client.tasks.switch(agentId, task.id, on)),
+					actions: /* @__PURE__ */ jsx(Button, {
+						tone: "ghost",
+						size: "sm",
+						icon: TrashIcon,
+						"aria-label": words.remove,
+						title: words.remove,
+						disabled: busy === task.id,
+						onClick: () => void change(task, () => client.tasks.remove(agentId, task.id))
+					})
+				}, task.id))
+			})
+		]
+	});
+}
+//#endregion
+export { AgentTasks, TASKS_POLL_MS, TASK_MESSAGES, useTasks };
+
+//# sourceMappingURL=AgentTasks.js.map

package/dist/AgentTasks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTasks.js","names":[],"sources":["../src/AgentTasks.tsx"],"sourcesContent":["import { ArrowLeftIcon, TrashIcon } from \"@phosphor-icons/react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Automation } from \"./automation/Automation\";\nimport type { Task } from \"./automation/types\";\nimport { classes } from \"./classes\";\nimport type { Client } from \"./client\";\nimport { Button } from \"./kit/Button\";\n\n/** What the person's tasks say, in the space; a host gives its own, in its language. */\nexport interface TaskMessages {\n  /** Over the chat, when the agent runs any for them: how many, to open them. */\n  open: (count: number) => string;\n  /** Over the list. */\n  title: string;\n  back: string;\n  /** Taking one away. */\n  remove: string;\n  /** None left. */\n  empty: string;\n  /** A change that didn't go through. */\n  failed: string;\n}\n\nexport const TASK_MESSAGES: TaskMessages = {\n  open: (count) => (count === 1 ? \"1 task set up for you\" : `${count} tasks set up for you`),\n  title: \"Your tasks\",\n  back: \"Back to the conversation\",\n  remove: \"Remove\",\n  empty: \"Nothing set up. Ask the agent to remind you of something, or to check back later.\",\n  failed: \"That didn't go through. Try again.\",\n};\n\nexport type TaskPart =\n  | \"sc-tasks\"\n  | \"sc-tasks__head\"\n  | \"sc-tasks__title\"\n  | \"sc-tasks__list\"\n  | \"sc-tasks__empty\"\n  | \"sc-tasks__problem\";\n\n/** How often the person's tasks are read again while the space is open. */\nexport const TASKS_POLL_MS = 20_000;\n\n/**\n * The tasks the agent runs for the person the client speaks for, read when the space opens,\n * again every `TASKS_POLL_MS` and on `refresh`. Null until read, and whenever it can't be (an API\n * without tasks, the business's own client): the space then shows none.\n */\nexport function useTasks(\n  client: Client,\n  agentId: string,\n  enabled: boolean,\n): { tasks: Task[] | null; refresh: () => Promise<void> } {\n  const [tasks, setTasks] = useState<Task[] | null>(null);\n  const live = useRef(true);\n  const refresh = useCallback(async () => {\n    try {\n      const read = await client.tasks.list(agentId);\n      if (live.current) setTasks(read);\n    } catch {\n      if (live.current) setTasks(null);\n    }\n  }, [client, agentId]);\n  useEffect(() => {\n    live.current = true;\n    if (!enabled) return;\n    void refresh();\n    const timer = setInterval(() => void refresh(), TASKS_POLL_MS);\n    return () => {\n      live.current = false;\n      clearInterval(timer);\n    };\n  }, [enabled, refresh]);\n  return { tasks: enabled ? tasks : null, refresh };\n}\n\nexport interface AgentTasksProps {\n  client: Client;\n  agentId: string;\n  tasks: readonly Task[];\n  /** Read them again, after a change. */\n  onChange: () => Promise<void>;\n  onBack: () => void;\n  words: TaskMessages;\n  classNames?: Partial<Record<TaskPart, string>> | undefined;\n}\n\n/**\n * The person's tasks, as they asked the agent for them: each as an automation reads (when, its\n * words, its last runs and how each went), with their switch to pause it and the way to take it\n * away; the way back to the conversation over them.\n */\nexport function AgentTasks({\n  client,\n  agentId,\n  tasks,\n  onChange,\n  onBack,\n  words,\n  classNames,\n}: AgentTasksProps) {\n  const [busy, setBusy] = useState<string | null>(null);\n  const [failed, setFailed] = useState(false);\n  const change = async (task: Task, doing: () => Promise<unknown>) => {\n    setBusy(task.id);\n    setFailed(false);\n    try {\n      await doing();\n      await onChange();\n    } catch {\n      setFailed(true);\n    } finally {\n      setBusy(null);\n    }\n  };\n  return (\n    <section aria-label={words.title} part=\"tasks\" className={classes(classNames, \"sc-tasks\")}>\n      <header className={classes(classNames, \"sc-tasks__head\")}>\n        <Button\n          tone=\"ghost\"\n          size=\"sm\"\n          icon={ArrowLeftIcon}\n          aria-label={words.back}\n          title={words.back}\n          onClick={onBack}\n        />\n        <h3 className={classes(classNames, \"sc-tasks__title\")}>{words.title}</h3>\n      </header>\n      {failed && (\n        <p role=\"alert\" className={classes(classNames, \"sc-tasks__problem\")}>\n          {words.failed}\n        </p>\n      )}\n      {tasks.length === 0 ? (\n        <p className={classes(classNames, \"sc-tasks__empty\")}>{words.empty}</p>\n      ) : (\n        <div className={classes(classNames, \"sc-tasks__list\")}>\n          {tasks.map((task) => (\n            <Automation\n              key={task.id}\n              automation={task}\n              runs={task.runs}\n              switching={busy === task.id}\n              onSwitch={(on) => void change(task, () => client.tasks.switch(agentId, task.id, on))}\n              actions={\n                <Button\n                  tone=\"ghost\"\n                  size=\"sm\"\n                  icon={TrashIcon}\n                  aria-label={words.remove}\n                  title={words.remove}\n                  disabled={busy === task.id}\n                  onClick={() => void change(task, () => client.tasks.remove(agentId, task.id))}\n                />\n              }\n            />\n          ))}\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;AAwBA,MAAa,gBAA8B;CACzC,OAAO,UAAW,UAAU,IAAI,0BAA0B,GAAG,MAAM;CACnE,OAAO;CACP,MAAM;CACN,QAAQ;CACR,OAAO;CACP,QAAQ;AACV;;AAWA,MAAa,gBAAgB;;;;;;AAO7B,SAAgB,SACd,QACA,SACA,SACwD;CACxD,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CACtD,MAAM,OAAO,OAAO,IAAI;CACxB,MAAM,UAAU,YAAY,YAAY;EACtC,IAAI;GACF,MAAM,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO;GAC5C,IAAI,KAAK,SAAS,SAAS,IAAI;EACjC,QAAQ;GACN,IAAI,KAAK,SAAS,SAAS,IAAI;EACjC;CACF,GAAG,CAAC,QAAQ,OAAO,CAAC;CACpB,gBAAgB;EACd,KAAK,UAAU;EACf,IAAI,CAAC,SAAS;EACd,QAAa;EACb,MAAM,QAAQ,kBAAkB,KAAK,QAAQ,GAAG,aAAa;EAC7D,aAAa;GACX,KAAK,UAAU;GACf,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,SAAS,OAAO,CAAC;CACrB,OAAO;EAAE,OAAO,UAAU,QAAQ;EAAM;CAAQ;AAClD;;;;;;AAkBA,SAAgB,WAAW,EACzB,QACA,SACA,OACA,UACA,QACA,OACA,cACkB;CAClB,MAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;CACpD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,SAAS,OAAO,MAAY,UAAkC;EAClE,QAAQ,KAAK,EAAE;EACf,UAAU,KAAK;EACf,IAAI;GACF,MAAM,MAAM;GACZ,MAAM,SAAS;EACjB,QAAQ;GACN,UAAU,IAAI;EAChB,UAAU;GACR,QAAQ,IAAI;EACd;CACF;CACA,OACE,qBAAC,WAAD;EAAS,cAAY,MAAM;EAAO,MAAK;EAAQ,WAAW,QAAQ,YAAY,UAAU;EAAxF,UAAA;GACE,qBAAC,UAAD;IAAQ,WAAW,QAAQ,YAAY,gBAAgB;IAAvD,UAAA,CACE,oBAAC,QAAD;KACE,MAAK;KACL,MAAK;KACL,MAAM;KACN,cAAY,MAAM;KAClB,OAAO,MAAM;KACb,SAAS;IACV,CAAA,GACD,oBAAC,MAAD;KAAI,WAAW,QAAQ,YAAY,iBAAiB;KAAI,UAAA,MAAM;IAAU,CAAA,CAClE;;GACP,UACC,oBAAC,KAAD;IAAG,MAAK;IAAQ,WAAW,QAAQ,YAAY,mBAAmB;IAC/D,UAAA,MAAM;GACN,CAAA;GAEJ,MAAM,WAAW,IAChB,oBAAC,KAAD;IAAG,WAAW,QAAQ,YAAY,iBAAiB;IAAI,UAAA,MAAM;GAAS,CAAA,IAEtE,oBAAC,OAAD;IAAK,WAAW,QAAQ,YAAY,gBAAgB;IACjD,UAAA,MAAM,KAAK,SACV,oBAAC,YAAD;KAEE,YAAY;KACZ,MAAM,KAAK;KACX,WAAW,SAAS,KAAK;KACzB,WAAW,OAAO,KAAK,OAAO,YAAY,OAAO,MAAM,OAAO,SAAS,KAAK,IAAI,EAAE,CAAC;KACnF,SACE,oBAAC,QAAD;MACE,MAAK;MACL,MAAK;MACL,MAAM;MACN,cAAY,MAAM;MAClB,OAAO,MAAM;MACb,UAAU,SAAS,KAAK;MACxB,eAAe,KAAK,OAAO,YAAY,OAAO,MAAM,OAAO,SAAS,KAAK,EAAE,CAAC;KAC7E,CAAA;IAEJ,GAhBM,KAAK,EAgBX,CACF;GACE,CAAA;EAEA;;AAEb"}

package/dist/BrowserView.d.ts

@@ -0,0 +1,52 @@
+import { LiveConversation } from "./useConversation.js";
+//#region src/BrowserView.d.ts
+/** The words the browser says; a host gives its own, in its language. */
+export interface BrowserMessages {
+  /** Who holds it: the agent, by its name. */
+  agent: (name: string) => string;
+  /** Who holds it: the agent, in the owner's own Chrome. */
+  agentMine: (name: string) => string;
+  /** Who holds it: the person. */
+  person: string;
+  /** Take it from the agent. */
+  take: string;
+  /** Give it back to the agent, after taking it. */
+  giveBack: string;
+  /** The agent handed it over: what heads its reason. */
+  handedOver: (name: string) => string;
+  /** The person is done with what the agent handed over: the agent goes on. */
+  done: string;
+  /** A hand-over waits, but the browser closed meanwhile (nobody used it for a while). */
+  closed: string;
+  expand: string;
+  shrink: string;
+  /** The way to close it now: it stops running, and being billed. */
+  close: string;
+  /** Where the browser is when it shows no web page. */
+  blank: string;
+  /** The screen's name, for those who cannot see it. */
+  screen: (where: string) => string;
+}
+export declare const BROWSER_MESSAGES: BrowserMessages;
+/** The browser's parts, by the class each carries; `classNames` adds a host's own under the same keys. */
+export type BrowserPart = "sc-browser" | "sc-browser--large" | "sc-browser--yours" | "sc-browser--handed" | "sc-browser--closed" | "sc-browser__bar" | "sc-browser__who" | "sc-browser__address" | "sc-browser__title" | "sc-browser__controls" | "sc-browser__handover" | "sc-browser__screen" | "sc-browser__screen--waiting" | "sc-browser__canvas";
+export interface BrowserViewProps {
+  /** The conversation the browser is of (`useConversation`). */
+  live: LiveConversation;
+  /** The agent's name, for the words that say it holds the browser. */
+  name: string;
+  messages?: Partial<BrowserMessages> | undefined;
+  classNames?: Partial<Record<BrowserPart, string>> | undefined;
+}
+/**
+ * The browser the agent drives, live, while the conversation has one: a compact tile while the
+ * agent works (its screen small, where it is, who holds it), which the person can enlarge or
+ * take over. Taken, or handed over by the agent, it glides open large and the person's pointer
+ * and keys go to the page; a hand-over says why, ringed in the accent, and "done" gives the
+ * browser back, the panel gliding small again, and lets the agent go on. Draws nothing when
+ * there is no browser, unless a hand-over still waits for one that closed: then the person can
+ * go on without it.
+ */
+export declare function BrowserView({ live, name, messages, classNames }: BrowserViewProps): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=BrowserView.d.ts.map