@ayni.org/ayni-ui-core 0.3.2 → 0.3.3

package/README.md

@@ -16,7 +16,7 @@ The browser draws with CSS and the Ayni app with React Native styles. What the t
 
 | Surface | Design values and colour roles | What it shows |
 | --- | --- | --- |
-| A conversation | `CONVERSATION_DESIGN`, `CONVERSATION_COLORS` | `replyQuoteOf`, `reactionPillOf`, `plainText` |
+| A conversation | `CONVERSATION_DESIGN`, `CONVERSATION_COLORS` | `replyQuoteOf`, `reactionPillOf`, `plainText`, `progressOf` (the agent is working) |
 | The home page (rail and column) | `HOME_DESIGN`, `HOME_COLORS` | `TRUST_MARK`, `CONTROLLER_KIND_ICON`, `formatTime` |
 | The Proof of Trust | `PROOF_OF_TRUST_DESIGN`, `PROOF_OF_TRUST_COLORS` | `verdictOf`, `identityStepOf`, `accreditationLine`, `otherCredentialLine`, `claimRows`, and its English wording (`PROOF_OF_TRUST_COPY`) |
 

package/dist/conversationDesign.d.ts

@@ -75,6 +75,33 @@ export declare const CONVERSATION_DESIGN: {
         readonly bottom: 12;
         readonly awayBeyond: 320;
     };
+    /**
+     * The agent is working (UI-CONV-016): a bubble on the agent's side with three bouncing dots, then the steps of
+     * the run in progress or "Thinking…".
+     */
+    readonly progress: {
+        readonly fontSize: 13;
+        readonly gap: 10;
+        readonly paddingY: 10;
+        readonly paddingX: 14;
+        readonly radius: 16;
+        readonly tailRadius: 4;
+    };
+    /**
+     * The three dots: each rises and brightens, one after the other. Over one period a dot is at rest until it
+     * starts, at its peak at `peakAt` of the period and back at rest from `restFrom`; the second and third dots
+     * start `delayMs` and twice `delayMs` later.
+     */
+    readonly dots: {
+        readonly size: 7;
+        readonly gap: 4;
+        readonly periodMs: 1200;
+        readonly delayMs: 150;
+        readonly lift: 4;
+        readonly restOpacity: 0.35;
+        readonly peakAt: 0.4;
+        readonly restFrom: 0.8;
+    };
 };
 export type ConversationDesign = typeof CONVERSATION_DESIGN;
 /** The colour roles both palettes define, in the browser as custom properties and in the app as theme colours. */
@@ -113,6 +140,13 @@ export declare const CONVERSATION_COLORS: {
         readonly border: "border";
         readonly icon: "text";
     };
+    readonly progress: {
+        readonly background: "surface";
+        readonly text: "muted";
+    };
+    readonly dots: {
+        readonly color: "accent";
+    };
 };
 /** The side a message sits on, and the corner its bubble tightens. */
 export declare function bubbleSide(role: 'user' | 'assistant' | 'system'): 'mine' | 'theirs' | 'system';
@@ -165,3 +199,26 @@ export declare function reactionPillOf(reactions: readonly {
     }[];
     mine?: string;
 } | null;
+/** The wording of a conversation the two renderers share, in English (the browser's `conversation.*` keys). */
+export declare const CONVERSATION_COPY: {
+    readonly thinking: "Thinking…";
+};
+/**
+ * What the transcript shows while the agent works (UI-CONV-016): the steps of the run in progress when it reports
+ * some; else "thinking", from the start of a run until its reply begins to stream; nothing when no run is in
+ * progress or the reply is already arriving. A run started from another device of the person counts the same.
+ */
+export declare function progressOf(transcript: {
+    run: {
+        steps: readonly string[];
+    } | null;
+    messages: readonly {
+        role: string;
+        streaming?: boolean;
+    }[];
+} | null | undefined): {
+    kind: 'steps';
+    steps: readonly string[];
+} | {
+    kind: 'thinking';
+} | null;

package/dist/conversationDesign.js

@@ -59,6 +59,17 @@ export const CONVERSATION_DESIGN = {
     },
     /** the button that returns to the latest message */
     latestButton: { size: 36, right: 20, bottom: 12, awayBeyond: 320 },
+    /**
+     * The agent is working (UI-CONV-016): a bubble on the agent's side with three bouncing dots, then the steps of
+     * the run in progress or "Thinking…".
+     */
+    progress: { fontSize: 13, gap: 10, paddingY: 10, paddingX: 14, radius: 16, tailRadius: 4 },
+    /**
+     * The three dots: each rises and brightens, one after the other. Over one period a dot is at rest until it
+     * starts, at its peak at `peakAt` of the period and back at rest from `restFrom`; the second and third dots
+     * start `delayMs` and twice `delayMs` later.
+     */
+    dots: { size: 7, gap: 4, periodMs: 1200, delayMs: 150, lift: 4, restOpacity: 0.35, peakAt: 0.4, restFrom: 0.8 },
 };
 /** Which colour role paints what in a conversation. */
 export const CONVERSATION_COLORS = {
@@ -70,6 +81,8 @@ export const CONVERSATION_COLORS = {
     quote: { border: 'accent', who: 'accent' },
     reactionPill: { background: 'bg', border: 'border', text: 'text', mineBorder: 'accent' },
     latestButton: { background: 'bg', border: 'border', icon: 'text' },
+    progress: { background: 'surface', text: 'muted' },
+    dots: { color: 'accent' },
 };
 /** The side a message sits on, and the corner its bubble tightens. */
 export function bubbleSide(role) {
@@ -123,3 +136,21 @@ export function reactionPillOf(reactions, me) {
         mine: own?.emoji,
     };
 }
+/** The wording of a conversation the two renderers share, in English (the browser's `conversation.*` keys). */
+export const CONVERSATION_COPY = {
+    thinking: 'Thinking…',
+};
+/**
+ * What the transcript shows while the agent works (UI-CONV-016): the steps of the run in progress when it reports
+ * some; else "thinking", from the start of a run until its reply begins to stream; nothing when no run is in
+ * progress or the reply is already arriving. A run started from another device of the person counts the same.
+ */
+export function progressOf(transcript) {
+    const run = transcript?.run;
+    if (!run)
+        return null;
+    if (run.steps.length)
+        return { kind: 'steps', steps: run.steps };
+    const replying = transcript.messages.some((m) => m.role !== 'activity' && m.streaming);
+    return replying ? null : { kind: 'thinking' };
+}

package/dist/reducer.d.ts

@@ -4,9 +4,14 @@ export interface Reduction {
     transcript: Transcript;
     session: SessionRecord;
     /** signals the shell reacts to (title, badge, sound) */
-    signals: ('message' | 'bound' | 'closed' | 'token' | 'approval' | 'identified')[];
+    signals: ('message' | 'bound' | 'closed' | 'token' | 'approval' | 'identified' | 'conversations')[];
 }
 export declare function emptyTranscript(sessionId: string): Transcript;
+/**
+ * The agent's signal that the person's list of conversations changed (PROF-CONV-007): a title, an archive, a
+ * closure, made from any device. Named here until the profile package that lists it is the one every client has.
+ */
+export declare const CONVERSATION_CHANGED = "ayni.conversation.changed";
 /** The five closed states of a flow (flow profile §5.2). */
 export declare function isClosedFlow(state: unknown): boolean;
 export declare function reduce(transcript: Transcript, session: SessionRecord, event: AgUiEvent, fromRun: boolean, isOnScreen: boolean): Reduction;

package/dist/reducer.js

@@ -7,6 +7,11 @@ export function emptyTranscript(sessionId) {
     return { sessionId, messages: [], oldestLoadedId: null, complete: false, run: null, routed: {}, reactions: {} };
 }
 const now = () => new Date().toISOString();
+/**
+ * The agent's signal that the person's list of conversations changed (PROF-CONV-007): a title, an archive, a
+ * closure, made from any device. Named here until the profile package that lists it is the one every client has.
+ */
+export const CONVERSATION_CHANGED = 'ayni.conversation.changed';
 /** The five closed states of a flow (flow profile §5.2). */
 export function isClosedFlow(state) {
     return (state === 'completed' || state === 'declined' || state === 'cancelled' || state === 'failed' || state === 'expired');
@@ -191,6 +196,11 @@ export function reduce(transcript, session, event, fromRun, isOnScreen) {
                     }
                     break;
                 }
+                case CONVERSATION_CHANGED:
+                    // a conversation of the person was renamed, archived or closed, here or on another device: the client
+                    // reads the agent's list again (PROF-CONV-007)
+                    signals.push('conversations');
+                    break;
                 case CUSTOM_EVENT.sessionBound:
                     s = {
                         ...s,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayni.org/ayni-ui-core",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Framework-independent core of the Ayni UI (UI-SHELL-004): agents and controllers, trust resolution, sessions and binding, the conversation reducer, the local store and sync; shared by the browser UI and the Ayni app",
   "type": "module",
   "main": "./dist/index.js",