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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalcore/ui",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "SignalCore's components for the people an agent serves: the chat, the call, the agent's space, and the <signalcore-chat> widget.",
   "keywords": [
     "signalcore",

package/src/AgentChat.tsx

@@ -59,6 +59,7 @@ import type {
   Message,
   Request,
   Step,
+  StepApp,
   StepState,
 } from "./types";
 import {
@@ -1294,7 +1295,12 @@ function Reply({
                 <BuilderStep step={step} words={words} classNames={classNames} />
               ) : (
                 <>
-                  <Mark state={step.state} action={step.action} classNames={classNames} />
+                  <Mark
+                    state={step.state}
+                    action={step.action}
+                    app={step.app ?? null}
+                    classNames={classNames}
+                  />
                   <span>{words.steps[step.action] ?? actionWords(step.action)}</span>
                   {/* What a step answered is the model's, in its words: only why it failed. */}
                   {step.state === "failed" && step.output !== null && <small>{step.output}</small>}
@@ -1393,7 +1399,12 @@ function BuilderStep({
 }) {
   const row = (
     <>
-      <Mark state={step.state} action={step.action} classNames={classNames} />
+      <Mark
+        state={step.state}
+        action={step.action}
+        app={step.app ?? null}
+        classNames={classNames}
+      />
       <span>{words.steps[step.action] ?? actionWords(step.action)}</span>
       {step.state === "failed" && <em>{words.failed}</em>}
     </>
@@ -1417,16 +1428,22 @@ function BuilderStep({
 function Mark({
   state,
   action,
+  app,
   classNames,
 }: {
   state: StepState;
   action: string;
+  app: StepApp | null;
   classNames: ClassNames;
 }) {
   const Glyph = stepGlyph(action);
+  // A connected app's step wears the app's logo once done; only an https one is loaded.
+  const logo = app?.icon && /^https:\/\//i.test(app.icon) ? app.icon : null;
   return (
     <span aria-hidden className={classes(classNames, "sc-chat__mark")}>
-      {state === "done" ? (
+      {state === "done" && logo !== null ? (
+        <img src={logo} alt="" loading="lazy" draggable={false} />
+      ) : state === "done" ? (
         <Glyph />
       ) : state === "running" ? null : (
         <svg viewBox="0 0 14 14" fill="none">

package/src/index.ts

@@ -250,6 +250,7 @@ export type {
   Message,
   Request,
   Step,
+  StepApp,
   StepState,
   StoredFile,
   ToolCall,

package/src/styles.css

@@ -501,6 +501,15 @@
   height: 16px;
 }
 
+/* A connected app's logo, in the same square as a glyph: its own colours, softly cornered. */
+.sc-chat__mark > img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  object-fit: contain;
+}
+
 .sc-chat__step--waiting .sc-chat__mark {
   color: var(--_accent);
 }

package/src/types.ts

@@ -253,6 +253,14 @@ export interface Step {
   awaits: boolean;
   /** Set while it waits to be allowed: by the person (the turn stopped), or by the business. */
   request: Request | null;
+  /** A connected app's action: the app, its logo an https address; absent for the platform's. */
+  app?: StepApp | null | undefined;
+}
+
+/** The connected app a step's action belongs to: its name and logo. */
+export interface StepApp {
+  name: string;
+  icon: string | null;
 }
 
 /**