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

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,8 @@ 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
@@ -118,6 +121,8 @@ export const AUTOMATION_MESSAGES_ES: AutomationMessages = {
       platform: "un mensaje",
       agent: "se lo pidieron en el chat",
       test: "prueba",
+      api: "tu app",
+      after: "tras otra",
     })[by],
   statuses: {
     running: "En curso",
@@ -310,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) => {
@@ -417,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",
@@ -428,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

@@ -97,6 +97,14 @@ export type {
 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";
@@ -110,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";
@@ -235,7 +244,6 @@ export type {
   ChannelWeb,
   ContactGlance,
   ConversationPerson,
-  Conversation,
   ConversationDetail,
   ConversationFile,
   Decides,

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 {
@@ -6427,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/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/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);