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

package/src/credentials.ts

@@ -27,7 +27,7 @@ export type Credentials =
   | Alone<{ publishableKey: string; visitorId?: string | undefined }>;
 
 /** What one request carries to say who calls, and how to have it anew once it is refused. */
-export interface Signed {
+interface Signed {
   headers: Readonly<Record<string, string>>;
   /** Lets go of a token the API refused, for the next request to ask for another; null: none. */
   renew: (() => void) | null;
@@ -41,7 +41,7 @@ export interface Signed {
 export type Speaker = "business" | "person";
 
 /** How every request and socket of a client says who calls. */
-export interface Signer {
+interface Signer {
   who: Speaker;
   /** What `fetch` sends of the browser's own: the cookie on the page's origin, or nothing. */
   credentials: RequestCredentials;

package/src/dev.ts

@@ -12,7 +12,7 @@ function development(): boolean {
   }
 }
 
-export const DEV = development();
+const DEV = development();
 
 /** A note for the developer of the page, in development only: what the package let pass, and why. */
 export function note(...said: unknown[]): void {

package/src/es.ts

@@ -10,6 +10,7 @@ import type { TaskMessages } from "./AgentTasks";
 import type { AutomationMessages, DayRef } from "./automation/messages";
 import type { BrowserMessages } from "./BrowserView";
 import type { KitMessages } from "./kit/messages";
+import type { ThreadMessages } from "./Threads";
 import type { VoiceCallMessages } from "./VoiceCall";
 
 /** The article before a time: "la 1:00", "las 8:00". */
@@ -76,6 +77,9 @@ export const AUTOMATION_MESSAGES_ES: AutomationMessages = {
   on: (often, when) => `${often}, ${when.charAt(0).toLowerCase()}${when.slice(1)}`,
   custom: "Con un horario propio",
   webhook: "Cuando otro sistema la llama",
+  manual: "Cuando alguien la inicia",
+  after: (automation) => (automation ? `Tras «${automation}»` : "Tras otra automatización"),
+  platform: "Cuando llega un mensaje",
   event: (app, event) =>
     event
       ? `Cuando pasa «${event}» en ${app ?? "una app"}`
@@ -114,8 +118,11 @@ export const AUTOMATION_MESSAGES_ES: AutomationMessages = {
       schedule: "horario",
       webhook: "webhook",
       event: app ? `evento de ${app}` : "evento",
+      platform: "un mensaje",
       agent: "se lo pidieron en el chat",
       test: "prueba",
+      api: "tu app",
+      after: "tras otra",
     })[by],
   statuses: {
     running: "En curso",
@@ -220,6 +227,12 @@ export const KIT_MESSAGES_ES: KitMessages = {
   pause: "Pausar",
   position: "Posición",
   automation: AUTOMATION_MESSAGES_ES,
+  connect: {
+    authorize: (app) => `Autorizar en ${app}`,
+    connected: "Conectada",
+    failed: "No se ha podido conectar",
+    preparing: "Preparando la conexión",
+  },
 };
 
 export const BROWSER_MESSAGES_ES: BrowserMessages = {
@@ -302,6 +315,10 @@ export const CHAT_MESSAGES_ES: ChatMessages = {
   inputs: {},
   allow: "Aprobar",
   decline: "Rechazar",
+  approvals: (count) => `${count} acciones esperan tu aprobación`,
+  approveAll: "Aprobar todo",
+  approveSome: (count) => `Aprobar ${count}`,
+  declineAll: "Rechazar todo",
   confirming: "Esperando la confirmación del negocio",
   handedOff: "Pasada a una persona",
   handover: (holder, by, name) => {
@@ -409,6 +426,17 @@ export const TASK_MESSAGES_ES: TaskMessages = {
   failed: "No se ha podido cambiar. Inténtalo de nuevo.",
 };
 
+export const THREAD_MESSAGES_ES: ThreadMessages = {
+  open: "Conversaciones",
+  title: "Tus conversaciones",
+  back: "Volver a la conversación",
+  new: "Nueva conversación",
+  untitled: "Conversación nueva",
+  unread: (count) => (count === 1 ? "1 mensaje sin leer" : `${count} mensajes sin leer`),
+  waiting: "Te espera",
+  empty: "Aún no hay nada aquí.",
+};
+
 export const SPACE_MESSAGES_ES: SpaceMessages = {
   modes: { label: "Modo", text: "Texto", voice: "Voz" },
   again: "Volver a llamar",
@@ -420,4 +448,5 @@ export const SPACE_MESSAGES_ES: SpaceMessages = {
   chat: CHAT_MESSAGES_ES,
   voice: VOICE_CALL_MESSAGES_ES,
   tasks: TASK_MESSAGES_ES,
+  threads: THREAD_MESSAGES_ES,
 };

package/src/frames.ts

@@ -52,13 +52,15 @@ export type Frame =
 
 /**
  * Up: the person says something (words, files they uploaded to the conversation, or both), acts
- * on a surface, or stops the reply on its way; takes the browser or gives it back, and acts on it
+ * on a surface (several things at once: a yes or no on each call a reply waits on), or stops
+ * the reply on its way; takes the browser or gives it back, and acts on it
  * while they hold it. And what a tool of the host's answered, run in the page: its output, or
  * why it failed.
  */
 export type UpFrame =
   | { type: "say"; text: string; files?: string[] }
   | ({ type: "action" } & Action)
+  | { type: "actions"; actions: ({ type: "action" } & Action)[] }
   | { type: "stop" }
   | { type: "browser.control"; to: BrowserControl }
   | { type: "browser.close" }

package/src/index.ts

@@ -94,8 +94,17 @@ export type {
   Trigger,
   Use,
 } from "./automation/types";
+export { taskCard } from "./automation/types";
 export { AgentTasks, TASK_MESSAGES, TASKS_POLL_MS, useTasks } from "./AgentTasks";
 export type { AgentTasksProps, TaskMessages, TaskPart } from "./AgentTasks";
+export { Conversation, THREAD_MESSAGES, THREADS_POLL_MS, Threads, useUnread } from "./Threads";
+export type {
+  ConversationProps,
+  ThreadMessages,
+  ThreadPart,
+  ThreadsProps,
+  Unread,
+} from "./Threads";
 export { AgentCard } from "./AgentCard";
 export type { AgentCardProps, CardField, CardPart } from "./AgentCard";
 export { AgentChat, CHAT_MESSAGES } from "./AgentChat";
@@ -109,6 +118,7 @@ export {
   KIT_MESSAGES_ES,
   SPACE_MESSAGES_ES,
   TASK_MESSAGES_ES,
+  THREAD_MESSAGES_ES,
   VOICE_CALL_MESSAGES_ES,
 } from "./es";
 export { VOICE_CALL_MESSAGES, VoiceCall } from "./VoiceCall";
@@ -234,7 +244,6 @@ export type {
   ChannelWeb,
   ContactGlance,
   ConversationPerson,
-  Conversation,
   ConversationDetail,
   ConversationFile,
   Decides,

package/src/kit/AudioPlayer.tsx

@@ -120,7 +120,7 @@ export function AudioPlayer({ src, label, onError, compact, className }: AudioPl
 }
 
 /** Seconds as a player says them: 0:07, 1:42, 1:02:05. */
-export function clock(seconds: number): string {
+function clock(seconds: number): string {
   const whole = Math.max(0, Math.floor(seconds));
   const hours = Math.floor(whole / 3600);
   const minutes = Math.floor((whole % 3600) / 60);

package/src/kit/Choices.tsx

@@ -42,7 +42,7 @@ export function useRadios(count: number, checked: number, check: (index: number)
 }
 
 /** Few short options with no hints sit side by side in one bar; any other few are cards. */
-export function segmented(options: Option[]): boolean {
+function segmented(options: Option[]): boolean {
   const length = options.reduce((sum, option) => sum + option.label.length, 0);
   return options.length <= 4 && length <= 32 && options.every((option) => !option.hint);
 }

package/src/kit/FileField.tsx

@@ -188,7 +188,7 @@ export interface Uploads {
 let picks = 0;
 
 /** A file already in, by its id: what `useUploads` starts from. */
-export function uploaded(id: string, known: Attachment | undefined): Upload {
+function uploaded(id: string, known: Attachment | undefined): Upload {
   return {
     key: ++picks,
     name: known?.name ?? "",

package/src/kit/Popover.tsx

@@ -55,7 +55,7 @@ export function usePopover(
   return { ...floating, ...interactions };
 }
 
-export type PopoverState = ReturnType<typeof usePopover>;
+type PopoverState = ReturnType<typeof usePopover>;
 
 /**
  * Where the panel goes instead of the page's end: the host's dialog the trigger sits in (a modal

package/src/kit/Tile.tsx

@@ -4,7 +4,7 @@ import { joined, useParts } from "./context";
 
 /**
  * Tiles in a grid that asks its own width, not the window's: two across, one when narrow, three
- * when there is room. What an agent works with, a squad's agents at a glance.
+ * when there is room. What an agent works with, the agents at a glance.
  */
 export function Tiles({
   label,

package/src/kit/messages.ts

@@ -95,6 +95,20 @@ export interface KitMessages {
   position: string;
   /** An automation and its runs: when it runs, how it stands, what each run did. */
   automation: AutomationMessages;
+  /** An app for the person to connect, as its connection stands. */
+  connect: ConnectMessages;
+}
+
+/** The words of an app's card: its button, and what it says where the button isn't. */
+export interface ConnectMessages {
+  /** The button that opens the app's consent page, given the app's name. */
+  authorize: (app: string) => string;
+  /** It works. */
+  connected: string;
+  /** It failed, or the account was lost: the agent asks for it again. */
+  failed: string;
+  /** Before the platform has the consent page. */
+  preparing: string;
 }
 
 const FAMILIES: Readonly<Record<string, string>> = {
@@ -157,4 +171,10 @@ export const KIT_MESSAGES: KitMessages = {
   pause: "Pause",
   position: "Position",
   automation: AUTOMATION_MESSAGES,
+  connect: {
+    authorize: (app) => `Authorize in ${app}`,
+    connected: "Connected",
+    failed: "It couldn't be connected",
+    preparing: "Getting it ready",
+  },
 };

package/src/kit/uploads.ts

@@ -38,14 +38,14 @@ export interface FileHost {
 }
 
 /** A file as picked: its name, its type as the browser gave it ("" when none), its weight. */
-export interface Picked {
+interface Picked {
   name: string;
   type: string;
   size: number;
 }
 
 /** A name's extension, lowercase, without its dot; "" for one without (`README`, `.env`). */
-export function extensionOf(name: string): string {
+function extensionOf(name: string): string {
   const dot = name.lastIndexOf(".");
   return dot <= 0 ? "" : name.slice(dot + 1).toLowerCase();
 }

package/src/kit/waveform.ts

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 const MOST_BYTES = 8 * 1024 * 1024;
 
 /** An audio as drawn: its bars' heights, and how long it is (what an Ogg doesn't say upfront). */
-export interface Waveform {
+interface Waveform {
   heights: number[];
   seconds: number;
 }

package/src/markdown.ts

@@ -8,7 +8,7 @@ export type Inline =
   | { kind: "text" | "strong" | "em" | "code"; text: string }
   | { kind: "link"; text: string; href: string };
 
-export type Node =
+type Node =
   | { kind: "heading"; level: number; inline: Inline[] }
   | { kind: "paragraph"; inline: Inline[] }
   | { kind: "list"; items: Inline[][] };

package/src/marks.tsx

@@ -1,18 +1,10 @@
 import type { ReactNode } from "react";
 
-import type {
-  ActionSource,
-  AutomationKind,
-  ChannelKind,
-  DeviceKind,
-  Icon,
-  Provider,
-} from "./about";
+import type { ActionSource, ChannelKind, DeviceKind, Provider } from "./about";
 
 /**
- * The marks Qué puede draws, each a 16-unit stroke glyph in `currentColor`: the icons a generated
- * line may carry, the shipped actions' marks, the kinds of automation, and the simplest faithful
- * glyph of each app, channel and device. No icon library: a host reads nothing but this package.
+ * The marks Qué puede draws, each a 16-unit stroke glyph in `currentColor`: the shipped actions'
+ * marks and the simplest faithful glyph of each app, channel and device. No icon library: a host reads nothing but this package.
  */
 
 const STROKE = {
@@ -49,36 +41,12 @@ const mail = (
     <path d="m2.5 5.5 5.5 3.7 5.5-3.7" />
   </>
 );
-const calendar = (
-  <>
-    <rect x="2.5" y="3.5" width="11" height="10" rx="1.5" />
-    <path d="M2.5 7h11M5.5 2v3M10.5 2v3" />
-  </>
-);
-const clock = (
-  <>
-    <circle cx="8" cy="8" r="5.75" />
-    <path d="M8 4.75V8l2.2 1.4" />
-  </>
-);
 const search = (
   <>
     <circle cx="7" cy="7" r="4.25" />
     <path d="m10.2 10.2 3.3 3.3" />
   </>
 );
-const file = (
-  <>
-    <path d="M4 2.5h5l3.5 3.5v7.5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1z" />
-    <path d="M9 2.5V6h3.5" />
-  </>
-);
-const table = (
-  <>
-    <rect x="2.5" y="3" width="11" height="10" rx="1.5" />
-    <path d="M2.5 6.5h11M6.5 6.5V13" />
-  </>
-);
 const bell = (
   <>
     <path d="M4 11V7.5a4 4 0 0 1 8 0V11l1 1.5H3z" />
@@ -91,12 +59,6 @@ const hand = (
     <path d="M5.5 8.2 4.4 7a1 1 0 0 0-1.6 1.2L5 11.6a3.6 3.6 0 0 0 3.1 1.9H9a2.5 2.5 0 0 0 2.5-2.5V9.1" />
   </>
 );
-const user = (
-  <>
-    <circle cx="8" cy="5.5" r="2.75" />
-    <path d="M3 13.5a5 5 0 0 1 10 0" />
-  </>
-);
 const globe = (
   <>
     <circle cx="8" cy="8" r="5.75" />
@@ -104,71 +66,6 @@ const globe = (
   </>
 );
 const code = <path d="m5.5 5-3 3 3 3M10.5 5l3 3-3 3M9.3 3.5 6.7 12.5" />;
-const lock = (
-  <>
-    <rect x="3.5" y="7" width="9" height="6.5" rx="1.5" />
-    <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" />
-  </>
-);
-const cart = (
-  <>
-    <path d="M2 3h1.8l1.4 7h7.3l1.3-5H4.4" />
-    <circle cx="6" cy="12.8" r=".9" fill="currentColor" stroke="none" />
-    <circle cx="11.5" cy="12.8" r=".9" fill="currentColor" stroke="none" />
-  </>
-);
-const card = (
-  <>
-    <rect x="2" y="3.5" width="12" height="9" rx="1.5" />
-    <path d="M2 6.5h12M4.5 10h3" />
-  </>
-);
-const map = (
-  <>
-    <path d="m2.5 4.5 3.5-1.5 4 1.5 3.5-1.5v9l-3.5 1.5-4-1.5-3.5 1.5z" />
-    <path d="M6 3v9M10 4.5v9" />
-  </>
-);
-const check = <path d="m3.5 8.5 3 3 6-7" />;
-const warning = (
-  <>
-    <path d="M8 2.5 14 13H2z" />
-    <path d="M8 6.5v3" />
-    <circle cx="8" cy="11.3" r=".8" fill="currentColor" stroke="none" />
-  </>
-);
-const sparkle = (
-  <>
-    <path d="M7 2.5c.4 2.9 1.5 4 4.4 4.4-2.9.4-4 1.5-4.4 4.4-.4-2.9-1.5-4-4.4-4.4C5.5 6.5 6.6 5.4 7 2.5z" />
-    <path d="M12.3 10.5c.2 1 .5 1.3 1.5 1.5-1 .2-1.3.5-1.5 1.5-.2-1-.5-1.3-1.5-1.5 1-.2 1.3-.5 1.5-1.5z" />
-  </>
-);
-
-const ICONS: Readonly<Record<Icon, ReactNode>> = {
-  message,
-  phone,
-  mail,
-  calendar,
-  clock,
-  search,
-  file,
-  table,
-  bell,
-  hand,
-  user,
-  globe,
-  code,
-  lock,
-  cart,
-  card,
-  map,
-  check,
-  warning,
-  sparkle,
-};
-
-/** The mark of a generated line. */
-export const iconOf = (icon: Icon): ReactNode => <Glyph>{ICONS[icon]}</Glyph>;
 
 const pane = (
   <>
@@ -211,23 +108,6 @@ export const actionMark = (name: string, source: ActionSource): ReactNode => (
   <Glyph>{source === "own" ? code : (ACTIONS[name] ?? bolt)}</Glyph>
 );
 
-const hook = (
-  <>
-    <path d="M2.5 8h7M7 5.5 9.5 8 7 10.5" />
-    <path d="M11 3.5h1.5a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H11" />
-  </>
-);
-
-const AUTOMATIONS: Readonly<Record<AutomationKind, ReactNode>> = {
-  schedule: clock,
-  webhook: hook,
-  event: bolt,
-};
-
-export const automationMark = (kind: AutomationKind): ReactNode => (
-  <Glyph>{AUTOMATIONS[kind]}</Glyph>
-);
-
 /** A letter alone: the simplest monogram of an app. */
 function Monogram({ letter }: { letter: string }) {
   return (

package/src/styles.css

@@ -633,6 +633,45 @@
   line-height: 1.375;
 }
 
+/* Several actions waiting for the person's leave, in one card: a row for each, its box ticked
+   and what it would take under it, editable; one button at the foot. */
+.sc-chat__requests > ul {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-chat__ask {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--_space) * 2.5);
+  padding: calc(var(--_space) * 3) calc(var(--_space) * 4);
+}
+
+.sc-chat__ask + .sc-chat__ask {
+  border-top: 1px solid var(--_line);
+}
+
+.sc-chat__ask > .sc-check > span {
+  font-weight: var(--_font-weight-medium);
+  line-height: 1.375;
+}
+
+.sc-chat__ask-fields {
+  display: grid;
+  gap: calc(var(--_space) * 2.5);
+  padding-left: calc(var(--_space) * 6.5);
+}
+
+.sc-chat__requests > footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: calc(var(--_space) * 3) calc(var(--_space) * 4);
+  border-top: 1px solid var(--_line);
+}
+
 /* On a person's page, in place of the approval card: what waits for the business's yes, a quiet
    line under the steps; the person has nothing to press. */
 .sc-chat__confirming {
@@ -5157,6 +5196,21 @@ button.sc-attachment__main:focus-visible {
   font-size: var(--_font-size-sm);
 }
 
+/* An app's card, where its button isn't: a quiet word (on its way, failed); once it works, in
+   the ink, after a check. */
+.sc-surface__connect {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
+}
+
+.sc-surface__connect--done {
+  color: var(--_fg);
+}
+
 /* An automation that is not there any more: a quiet line in a dashed box where it would be. */
 .sc-automation--gone {
   margin: 0;
@@ -6412,6 +6466,158 @@ button.sc-attachment__main:focus-visible {
   outline-offset: -2px;
 }
 
+/* Over the chat, one line: the way to the person's threads (a dot when another has something
+   for them) and, at its end, their tasks. */
+.sc-space__bar {
+  display: flex;
+  flex-shrink: 0;
+  align-items: stretch;
+  border-bottom: 1px solid var(--_line);
+}
+
+.sc-space__bar > .sc-space__threads,
+.sc-space__bar > .sc-space__tasks {
+  width: auto;
+  border-bottom: 0;
+}
+
+.sc-space__bar > .sc-space__tasks:not(:only-child) {
+  margin-left: auto;
+  text-align: right;
+}
+
+/* The way to the person's threads; a dot when another thread has something for them. */
+.sc-space__threads {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: calc(var(--_space) * 1.5);
+  width: 100%;
+  padding: calc(var(--_space) * 2) calc(var(--_space) * 3.5);
+  border: 0;
+  border-bottom: 1px solid var(--_line);
+  background: transparent;
+  color: var(--_muted);
+  font: inherit;
+  font-size: var(--_font-size-xs);
+  font-weight: var(--_font-weight-medium);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color 0.12s,
+    color 0.12s;
+}
+
+.sc-space__threads:hover {
+  background: var(--_wash);
+  color: var(--_fg);
+}
+
+.sc-space__threads:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: -2px;
+}
+
+.sc-space__dot,
+.sc-threads__dot {
+  flex-shrink: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: var(--_radius-full);
+  background: var(--_accent);
+}
+
+/* The person's threads in the chat's place: the way back, their title and another to start, then
+   each by its title with what is unread. */
+.sc-threads {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sc-threads__head {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: calc(var(--_space) * 1.5);
+  padding: calc(var(--_space) * 2) calc(var(--_space) * 3);
+  border-bottom: 1px solid var(--_line);
+}
+
+.sc-threads__title {
+  flex: 1;
+  margin: 0;
+  font-size: var(--_font-size);
+  font-weight: var(--_font-weight-bold);
+}
+
+.sc-threads__list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: calc(var(--_space) * 1.5);
+  list-style: none;
+}
+
+.sc-threads__item {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--_space) * 2);
+  width: 100%;
+  padding: calc(var(--_space) * 2.5) calc(var(--_space) * 2.5);
+  border: 0;
+  border-radius: var(--_radius);
+  background: transparent;
+  color: var(--_fg);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.12s;
+}
+
+.sc-threads__item:hover {
+  background: var(--_wash);
+}
+
+.sc-threads__item:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: -2px;
+}
+
+.sc-threads__item--current {
+  background: var(--_wash);
+  font-weight: var(--_font-weight-medium);
+}
+
+.sc-threads__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-threads__badge {
+  flex-shrink: 0;
+  min-width: 20px;
+  padding: 1px calc(var(--_space) * 1.5);
+  border-radius: var(--_radius-full);
+  background: var(--_accent);
+  color: var(--_accent-fg);
+  font-size: var(--_font-size-xs);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--_font-weight-medium);
+  text-align: center;
+}
+
+.sc-threads__empty {
+  margin: 0;
+  padding: calc(var(--_space) * 4) calc(var(--_space) * 3.5);
+  color: var(--_muted);
+}
+
 /* The tasks in the chat's place: the way back and their title, then each as an automation
    reads, a hairline between them. */
 .sc-tasks {

package/src/surface/Markdown.tsx

@@ -33,7 +33,7 @@ export function Markdown({ text }: { text: string }) {
 }
 
 /** One line's words, its bold, italic, code and links drawn; a link opens apart, never in place. */
-export function Words({ inline }: { inline: Inline[] }) {
+function Words({ inline }: { inline: Inline[] }) {
   return inline.map((part, index) => {
     switch (part.kind) {
       case "text":