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

package/src/surface/Surface.tsx

@@ -7,6 +7,7 @@ import type {
   Block,
   ButtonBlock,
   ChoiceBlock,
+  ConnectBlock,
   FieldsBlock,
   ImageBlock,
   ListBlock,
@@ -75,6 +76,7 @@ const BLOCKS: ReadonlySet<string> = new Set([
   "image",
   "automation",
   "file",
+  "connect",
   "button",
   "choice",
   "form",
@@ -90,12 +92,15 @@ export function known(blocks: Block[]): boolean {
 }
 
 /**
- * Whether a screen draws its own edge: one that is a single card (or an automation, a card of
- * its own) needs no panel around it where it is shown.
+ * Whether a screen draws its own edge: one that is a single card (or an automation, or an app
+ * to connect, each a card of its own) needs no panel around it where it is shown.
  */
 export function framesItself(surface: Shown): boolean {
   const [only, ...more] = surface.blocks;
-  return more.length === 0 && (only?.type === "card" || only?.type === "automation");
+  return (
+    more.length === 0 &&
+    (only?.type === "card" || only?.type === "automation" || only?.type === "connect")
+  );
 }
 
 /**
@@ -214,6 +219,8 @@ function Draw({ block }: { block: Block }) {
       return <AutomationShown block={block} />;
     case "file":
       return <FileShown block={block} />;
+    case "connect":
+      return <Connect block={block} />;
     case "button":
       return <Pressable block={block} />;
     case "choice":
@@ -268,7 +275,7 @@ function FileShown({ block }: { block: FileBlock }) {
 type PlayedKind = "image" | "video" | "audio";
 
 /** How a file plays in the page: a picture, a video, a sound; null for any other kind. */
-export function playedAs(mediaType: string): PlayedKind | null {
+function playedAs(mediaType: string): PlayedKind | null {
   const family = mediaType.split("/")[0];
   return family === "image" || family === "video" || family === "audio" ? family : null;
 }
@@ -452,6 +459,48 @@ function AutomationShown({ block }: { block: AutomationBlock }) {
   return <Automation automation={block.view} runs={block.view.runs} />;
 }
 
+/**
+ * An app for the person to connect, as its connection stands: its logo and name over the line
+ * the agent wrote of what it will do with it; while it waits for them, the button that opens
+ * its consent page apart; once it works, or if it failed, a quiet word in its place. Before
+ * the API has asked for it, only the app as the agent named it.
+ */
+function Connect({ block }: { block: ConnectBlock }) {
+  const part = useSurfaceParts();
+  const { messages } = useKit();
+  const { connection } = block;
+  const title = connection?.title ?? block.app;
+  const pending = connection?.status === "pending" ? connection.url : null;
+  const url = pending !== null && https(pending) ? pending : null;
+  const working = connection?.status === "active";
+  const failed = connection !== null && !working && connection.status !== "pending";
+  return (
+    <Card title={title} subtitle={block.purpose} image={connection?.icon ?? undefined}>
+      {url !== null ? (
+        <Button tone="primary" href={url}>
+          {messages.connect.authorize(title)}
+        </Button>
+      ) : (
+        <p
+          className={part(
+            "sc-surface__connect",
+            ...(working ? (["sc-surface__connect--done"] as const) : []),
+          )}
+        >
+          {working && <CheckIcon aria-hidden weight="bold" />}
+          {connectWords(messages.connect, working, failed)}
+        </p>
+      )}
+    </Card>
+  );
+}
+
+/** The quiet word an app's card says where its button isn't: working, failed, or on its way. */
+function connectWords(words: KitMessages["connect"], working: boolean, failed: boolean): string {
+  if (working) return words.connected;
+  return failed ? words.failed : words.preparing;
+}
+
 /**
  * A button that sends its action, marked once it was the one pressed; or a link that opens its
  * page apart (it stays usable on an older turn: it changes nothing here).

package/src/surface/scope.ts

@@ -28,7 +28,9 @@ export type SurfacePart =
   | "sc-surface__form"
   | "sc-surface__submit"
   | "sc-surface__foot"
-  | "sc-surface__sent";
+  | "sc-surface__sent"
+  | "sc-surface__connect"
+  | "sc-surface__connect--done";
 
 export type SurfaceClassNames = Partial<Record<SurfacePart | KitPart, string>> | undefined;
 

package/src/surface/values.ts

@@ -63,7 +63,7 @@ export const FEW_OPTIONS = 5;
 /** Up to this many, a multiselect is chips; more go in a list to search. */
 export const FEW_CHIPS = 8;
 /** What a secret reads as, anywhere it is shown. */
-export const MASK = "••••••••";
+const MASK = "••••••••";
 /** The longest answer label the API takes. */
 const LABEL_MAX = 2000;
 
@@ -139,7 +139,7 @@ export function startValues(fields: FormField[], answered?: Record<string, unkno
 }
 
 /** A field with nothing given: unticked, none picked, a slider at its least, else nothing. */
-export function emptyOf(field: FormField): FieldValue {
+function emptyOf(field: FormField): FieldValue {
   switch (field.kind) {
     case "checkbox":
       return false;
@@ -154,7 +154,7 @@ export function emptyOf(field: FormField): FieldValue {
 }
 
 /** A value read as the field's kind holds it, or null when it does not fit. */
-export function fit(field: FormField, raw: unknown): FieldValue {
+function fit(field: FormField, raw: unknown): FieldValue {
   switch (field.kind) {
     case "checkbox":
       return raw === true || raw === "true"
@@ -310,7 +310,7 @@ export function problemOf(
 }
 
 /** Whether nothing was given: no words, no pick, an unticked box, no stars. */
-export function isEmpty(field: FormField, value: FieldValue): boolean {
+function isEmpty(field: FormField, value: FieldValue): boolean {
   if (value === null) return true;
   if (field.kind === "checkbox") return value !== true;
   if (typeof value === "string") return value.trim() === "";
@@ -352,7 +352,7 @@ function outOfBounds(
   return null;
 }
 
-export function optionOf(field: FormField, id: string): Option | undefined {
+function optionOf(field: FormField, id: string): Option | undefined {
   return field.options?.find((option) => option.id === id);
 }
 

package/src/tint.ts

@@ -4,7 +4,7 @@ export type AgentTint = "sky" | "rose" | "sand";
 const TINTS: readonly AgentTint[] = ["sky", "rose", "sand"];
 
 /**
- * The tint an agent keeps wherever it appears (a squad's map, its profile, its card): picked from
+ * The tint an agent keeps wherever it appears (the agents' day, its profile, its card): picked from
  * its id, so a rename changes nothing, and spread evenly over the three.
  */
 export function agentTint(id: string): AgentTint {

package/src/types.ts

@@ -90,6 +90,12 @@ export interface Conversation {
    * host's app (`host_person`, its `contact` then) or the widget's visitor.
    */
   person?: ConversationPerson | null | undefined;
+  /**
+   * For the person it is with: how many of the business's messages came since they last read it,
+   * and whether it waits on them (a question, their yes); left out by an older API.
+   */
+  unread?: number | undefined;
+  waiting_on_person?: boolean | undefined;
 }
 
 /** Who a person's token or a publishable key started a conversation for. */
@@ -237,6 +243,8 @@ export interface Request {
   input: Record<string, unknown>;
   /** The person's when left out (an API from before it). */
   decides?: Decides | undefined;
+  /** The JSON Schema of its input, which an edit given with the yes must fit. */
+  schema?: Record<string, unknown> | null | undefined;
 }
 
 /** An action a reply called: what, how it went, and what it drew. */
@@ -306,6 +314,9 @@ export interface Message {
   heard?: string | null | undefined;
   /** On a channel, a person's message: what was decided of it; null otherwise. */
   decision?: Decision | null | undefined;
+  /** The agent's words first, without a turn of the person's, and the run whose code sent them. */
+  proactive?: boolean | undefined;
+  run_id?: string | null | undefined;
   created_at: string;
 }
 

package/src/useConversation.ts

@@ -444,6 +444,8 @@ export interface LiveConversation {
   say: (text: string, files?: readonly string[]) => boolean;
   /** What the person did on a surface; false when the socket is closed. */
   act: (action: Action) => boolean;
+  /** Several things done at once (a yes or no on each call a reply waits on), sent together. */
+  actAll: (actions: readonly Action[]) => boolean;
   /** Stops the reply on its way; false when the socket is closed. */
   stop: () => boolean;
   /** The conversation's browser while it is open: where it is, who holds it. */
@@ -605,6 +607,13 @@ export function useConversation(
     return true;
   };
 
+  const actAll = (actions: readonly Action[]): boolean => {
+    const sent = actions.map((one) => ({ type: "action" as const, ...one }));
+    if (!live.send({ type: "actions", actions: sent })) return false;
+    for (const action of actions) dispatch({ type: "acted", action });
+    return true;
+  };
+
   return {
     messages: state.messages,
     draft: state.draft,
@@ -615,6 +624,7 @@ export function useConversation(
     error: state.error,
     say,
     act,
+    actAll,
     stop: () => live.send({ type: "stop" }),
     browser: state.browser,
     watchScreen: screen.watch,

package/src/usePolled.ts

@@ -3,14 +3,14 @@ import { useEffect, useRef, useState } from "react";
 import { ApiError } from "./client";
 
 /** What a read gave: the value once it came, why it failed, or that it is no longer there. */
-export interface Polled<T> {
+interface Polled<T> {
   value: T | null;
   problem: unknown;
   gone: boolean;
 }
 
 /** How often something still moving (a run under way) is read again. */
-export const POLL_MS = 3000;
+const POLL_MS = 3000;
 
 /**
  * Reads `load` when `key` changes, and again every `POLL_MS` while `moving` says what it gave is

package/src/voice/webgl.ts

@@ -77,7 +77,7 @@ export function inkOver(color: Rgb, surface: Rgb): Rgb {
 let swatch: CanvasRenderingContext2D | null | undefined;
 
 /** A CSS colour as red, green, blue and alpha, each 0 to 1; null where it can't be read. */
-export function rgbaOf(css: string): readonly [number, number, number, number] | null {
+function rgbaOf(css: string): readonly [number, number, number, number] | null {
   if (swatch === undefined) {
     swatch = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
   }

package/src/widget/element.tsx

@@ -5,6 +5,7 @@ import { createRoot, type Root } from "react-dom/client";
 
 import type { ChatSteps } from "../AgentChat";
 import { AgentSpace, SPACE_MESSAGES } from "../AgentSpace";
+import { useUnread } from "../Threads";
 import { createClient } from "../client";
 import type { Credentials } from "../credentials";
 import { SPACE_MESSAGES_ES } from "../es";
@@ -61,9 +62,11 @@ export interface WidgetSettings {
 }
 
 /** The launcher's words, by language. */
-const LAUNCHER: Readonly<Record<Language, { open: string; close: string; chat: string }>> = {
-  en: { open: "Open the chat", close: "Close the chat", chat: "Chat" },
-  es: { open: "Abrir el chat", close: "Cerrar el chat", chat: "Chat" },
+const LAUNCHER: Readonly<
+  Record<Language, { open: string; close: string; chat: string; news: string }>
+> = {
+  en: { open: "Open the chat", close: "Close the chat", chat: "Chat", news: "something new" },
+  es: { open: "Abrir el chat", close: "Cerrar el chat", chat: "Chat", news: "hay novedades" },
 };
 
 /**
@@ -254,6 +257,11 @@ export function Widget({ settings, look = null }: WidgetProps) {
   const [open, setOpen] = useState(false);
   const words = LAUNCHER[language];
   const floating = mode === "floating";
+  // While closed, a dot on the launcher says something waits (an unread message, a question), for
+  // someone who talked before: nobody new is asked after until they open it.
+  const returning = keptConversation(agent) !== undefined;
+  const news = useUnread(client, agent, floating && !open && returning && client.who === "person");
+  const waits = news.unread > 0 || news.waiting;
   const header = settings.header || look?.header === true;
 
   const space = (
@@ -295,7 +303,7 @@ export function Widget({ settings, look = null }: WidgetProps) {
       <button
         type="button"
         part="launcher"
-        aria-label={open ? words.close : words.open}
+        aria-label={open ? words.close : waits ? `${words.open}: ${words.news}` : words.open}
         aria-expanded={open}
         onClick={() => {
           setOpen(!open);
@@ -307,6 +315,7 @@ export function Widget({ settings, look = null }: WidgetProps) {
         ) : (
           <ChatCircleDotsIcon aria-hidden weight="fill" />
         )}
+        {!open && waits && <span aria-hidden className="sc-widget__dot" />}
       </button>
     </div>
   );

package/src/widget/widget.css

@@ -104,6 +104,19 @@ signalcore-chat[shadow="none"][mode="inline"] {
   height: 46%;
 }
 
+/* While the chat is closed and something waits in it (an unread message, a question): a dot at
+   the launcher's corner, ringed in the page's surface so it reads on the accent. */
+.sc-widget__dot {
+  position: absolute;
+  top: 6%;
+  right: 6%;
+  width: 22%;
+  height: 22%;
+  border: 2px solid var(--_surface);
+  border-radius: var(--_radius-full);
+  background: var(--_danger);
+}
+
 .sc-widget--floating > .sc-widget__panel {
   position: fixed;
   right: var(--_offset);