@m6d/cortex-angular 0.15.2 → 0.16.0

package/README.md

@@ -25,7 +25,7 @@ export class MyComponent {
 The widget attaches its own stylesheet; add `@m6d/cortex-angular/theme.css` to
 your styles to override its tokens in one place (see Theming).
 
-`baseUrl` is the agent's URL: the engine's public origin (`ENGINE_PUBLIC_URL`) plus `/agents/<agent slug>`. Add the page's origin to `ENGINE_CORS_ORIGINS`, or proxy the engine under your own origin as the samples do. The WebSocket URL is `baseUrl` plus `/ws`; set `wsUrl` only to override it, and point it at that same agent-scoped path. The bearer is the end user's token, which Cortex verifies the way the agent's auth says: a JWKS, a shared secret, or the agent's server. For an anonymous agent, leave `getHeaders` out: the widget signs in as a visitor, and Cortex gives the browser an ID it keeps in local storage. When the agent checks visitors with reCAPTCHA Enterprise, the widget loads Google's script with the agent's site key and runs the check invisibly. The widget hides the badge Google draws for the agent's site key, and Google's terms then ask your page to show its reCAPTCHA attribution. A badge your page draws for its own key stays.
+`baseUrl` is the agent's URL: the engine's public origin (`ENGINE_PUBLIC_URL`) plus `/agents/<agent name>`. Add the page's origin to `ENGINE_CORS_ORIGINS`, or proxy the engine under your own origin as the samples do. The WebSocket URL is `baseUrl` plus `/ws`; set `wsUrl` only to override it, and point it at that same agent-scoped path. The bearer is the end user's token, which Cortex verifies the way the agent's auth says: a JWKS, a shared secret, or the agent's server. For an anonymous agent, leave `getHeaders` out: the widget signs in as a visitor, and Cortex gives the browser an ID it keeps in local storage. When the agent checks visitors with reCAPTCHA Enterprise, the widget loads Google's script with the agent's site key and runs the check invisibly. The widget hides the badge Google draws for the agent's site key, and Google's terms then ask your page to show its reCAPTCHA attribution. A badge your page draws for its own key stays.
 
 No root-level providers are needed. Each widget is self-contained, so one page can render several widgets with different configs.
 
@@ -36,12 +36,11 @@ No root-level providers are needed. Each widget is self-contained, so one page c
 | Property                   | Type                                              | Description                                                                     |
 | -------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------- |
 | `locale`                   | `'en' \| 'ar'`                                    | Active locale; the widget lays out in its direction (default: `'en'`)           |
-| `transport.baseUrl`        | `string \| () => string`                          | The agent's URL, `<engine origin>/agents/<slug>`                                |
+| `transport.baseUrl`        | `string \| () => string`                          | The agent's URL, `<engine origin>/agents/<name>`                                |
 | `transport.getHeaders?`    | `() => Headers \| Promise<Headers>`               | Request headers provider; `Headers` is `Record<string, string>`                 |
 | `wsUrl`                    | `string \| false`                                 | WebSocket URL override; `false` disables the socket (optional)                  |
 | `viewMode`                 | `'helper' \| 'full'`                              | Compact panel or full layout with a sidebar (default: `'helper'`)               |
 | `theme`                    | `'light' \| 'dark' \| 'system'`                   | Color scheme (default: `'light'`)                                               |
-| `agentName`                | `string \| { en, ar }`                            | Header title while no thread is selected (optional)                             |
 | `thread`                   | `string`                                          | A thread id to open on mount (optional)                                         |
 | `mediaRenderers`           | `Record<string, MediaRenderer>`                   | Replace or add the media fences the assistant can draw (optional)               |
 | `trustSameOriginEmbeds`    | `boolean`                                         | Allow embedded tool pages served from this page's own origin (default: `false`) |
@@ -76,7 +75,7 @@ import { CortexChatWidgetComponent, CortexSlotDirective } from '@m6d/cortex-angu
             <button class="cortex-widget__header-btn" (click)="chat.openHistory()">☰</button>
           }
           <div class="cortex-widget__chat-title-wrap">
-            <p class="cortex-widget__chat-title">{{ chat.title ?? chat.agentName }}</p>
+            <p class="cortex-widget__chat-title">{{ chat.title }}</p>
           </div>
           <button class="cortex-widget__header-btn" (click)="chat.newChat()">+</button>
         </div>
@@ -123,8 +122,7 @@ One header serves both screens; `screen` says which is showing.
 | -------------- | --------------------- | -------------------------------------------------------------------- |
 | `screen`       | `'chat' \| 'threads'` | Which screen the header is on                                        |
 | `viewMode`     | `'helper' \| 'full'`  | The configured view mode                                             |
-| `title`        | `string \| null`      | The open thread's title; `null` on a new chat                        |
-| `agentName`    | `string \| undefined` | `agentName` in the widget's locale                                   |
+| `title`        | `string`              | The open thread's title, else the agent's display name or "New Chat" |
 | `threadCount`  | `number \| undefined` | How many conversations the history lists; undefined while it loads   |
 | `isWorking`    | `boolean`             | The agent is answering                                               |
 | `debug`        | `{ shown, on }`       | Whether Cortex offers the debug view, and whether it is on           |

package/fesm2022/m6d-cortex-angular.mjs

@@ -50,6 +50,9 @@ function checkAttachmentPolicy(file) {
   return "ok";
 }
 var VISITOR_RECAPTCHA_ACTION = "cortex_visitor";
+function localized(value, locale) {
+  return value[locale] ?? value.en ?? Object.values(value)[0];
+}
 var STATEMENT_TOOLS = ["executeCode", "queryDataset", "describeDataset"];
 var APPROVAL_TITLE_FIELD = "approvalTitle";
 function modelLineOf(input, field) {
@@ -640,14 +643,6 @@ function composerDrop(options) {
     }
   };
 }
-// src/internal/client/src/format/localized.ts
-function localized(value, locale) {
-  if (value === undefined || typeof value === "string" || Array.isArray(value)) {
-    return value;
-  }
-  const byLocale = value;
-  return byLocale[locale] ?? byLocale.en ?? Object.values(byLocale)[0];
-}
 // src/internal/client/src/i18n/ar.json
 var ar_default = {
   translate_history: "السجل",
@@ -2448,6 +2443,7 @@ function createCortexWidget(options) {
     selected: undefined,
     session: BLANK_SESSION,
     capabilities: undefined,
+    displayName: undefined,
     unanswered: undefined,
     attachments: queue.getState(),
     creating: false,
@@ -2564,13 +2560,14 @@ ${draft}` : text);
       onAnswered: (capabilities) => {
         update({
           capabilities,
+          displayName: capabilities.displayName,
           unanswered: undefined,
           debugMode: state.debugMode && capabilities.debug
         });
         if (answers())
           session?.resumeAnswers();
       },
-      onMissed: (unanswered) => update({ unanswered })
+      onMissed: (unanswered) => update({ unanswered, displayName: state.displayName ?? {} })
     });
   }
   function followTitle() {
@@ -2873,8 +2870,15 @@ ${draft}` : text);
   };
 }
 function partsOf(state) {
-  const { threads, selected, capabilities, debugMode } = state;
-  return { threads, selected, capabilities, debugMode, isWorking: state.session.isAgentWorking };
+  const { threads, selected, capabilities, displayName, debugMode } = state;
+  return {
+    threads,
+    selected,
+    capabilities,
+    displayName,
+    debugMode,
+    isWorking: state.session.isAgentWorking
+  };
 }
 function widgetParts(widget, source, config, composer) {
   const locale = resolveLocale(config.locale);
@@ -2882,12 +2886,12 @@ function widgetParts(widget, source, config, composer) {
     newChat: widget.newChat,
     deleteThread: (threadId) => void widget.deleteThread(threadId)
   } : undefined;
+  const newChatTitle = source.displayName === undefined ? "" : localized(source.displayName, locale) ?? translate(locale, "translate_new_chat");
   function header(screen) {
     return {
       screen,
       viewMode: config.viewMode ?? "helper",
-      title: source.selected?.title ?? null,
-      agentName: localized(config.agentName, locale),
+      title: source.selected?.title ?? newChatTitle,
       threadCount: source.threads?.length,
       isWorking: source.isWorking,
       debug: { shown: Boolean(source.capabilities?.debug), on: source.debugMode },
@@ -5398,9 +5402,7 @@ var ChatHeaderComponent = class ChatHeaderComponent {
   </button>
 
   <div class="cortex-widget__chat-title-wrap">
-    <p class="cortex-widget__chat-title">
-      {{ header.title ?? header.agentName ?? ('translate_new_chat' | translate) }}
-    </p>
+    <p class="cortex-widget__chat-title">{{ header.title }}</p>
   </div>
 
   @if (header.debug.shown) {
@@ -5539,9 +5541,7 @@ i0.ɵɵngDeclareClassMetadata({
   </button>
 
   <div class="cortex-widget__chat-title-wrap">
-    <p class="cortex-widget__chat-title">
-      {{ header.title ?? header.agentName ?? ('translate_new_chat' | translate) }}
-    </p>
+    <p class="cortex-widget__chat-title">{{ header.title }}</p>
   </div>
 
   @if (header.debug.shown) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m6d/cortex-angular",
-  "version": "0.15.2",
+  "version": "0.16.0",
   "description": "Angular chat widget for Cortex agents",
   "license": "MIT",
   "sideEffects": false,

package/types/m6d-cortex-angular.d.ts

@@ -80,6 +80,8 @@ export type TokenUsage = {
  * The widget hides UI for anything absent; Cortex enforces each.
  */
 export type AgentCapabilities = {
+	/** The agent's display name per locale, which titles a new chat; `{}` for an agent without one. */
+	displayName: Partial<LocalizedText>;
 	attachments: boolean;
 	/**
 	 * False when this caller may not send to the chat: the agent's `message`
@@ -121,6 +123,8 @@ export type Suggestion = {
 /** The manifest's suggestion and greeting schemas are built from these. */
 export type Suggestions = Record<Locale, Suggestion[]>;
 export type Greeting = Record<Locale, string>;
+/** Author-written copy the widget shows verbatim, one string per locale. */
+export type LocalizedText = Record<Locale, string>;
 export type TriggerFiringSummary = {
 	name: string;
 	firingId: string;
@@ -203,8 +207,6 @@ export type MediaRenderContext = {
  */
 export type MediaRenderer = (host: HTMLElement, source: string, context: MediaRenderContext) => Promise<() => void>;
 export type MediaRenderers = Partial<Record<string, MediaRenderer>>;
-/** One value for every locale, or a map keyed by locale ('en', 'ar'). */
-export type Localized<T> = T | Partial<Record<Locale, T>>;
 export type CortexViewMode = "helper" | "full";
 export type CortexTheme = "light" | "dark" | "system";
 export type CortexToolCallContext = {
@@ -252,12 +254,6 @@ export type CortexConfig = {
 	 * fence tag; `map` swaps the built-in Leaflet map for another provider.
 	 */
 	mediaRenderers?: MediaRenderers;
-	/**
-	 * Chat header title while no thread is selected; defaults to a localized
-	 * "New Chat". Like the other copy props, either one value for every locale
-	 * or a map keyed by locale (`{ en: 'Support', ar: 'الدعم' }`).
-	 */
-	agentName?: Localized<string>;
 	/**
 	 * A thread to open when the widget mounts, by id, once the thread list holds
 	 * it: a deep link into one conversation, such as the console's inspector.
@@ -283,10 +279,11 @@ export type CortexConfig = {
 export type CortexHeaderContext = {
 	screen: "chat" | "threads";
 	viewMode: CortexViewMode;
-	/** The open thread's title; null on a new chat. */
-	title: string | null;
-	/** `agentName` in the widget's locale. */
-	agentName: string | undefined;
+	/**
+	 * The open thread's title, else the agent's display name in the widget's
+	 * locale, else the built-in "New Chat"; empty while the handshake is out.
+	 */
+	title: string;
 	/** How many conversations the history lists; undefined while the first load is out. */
 	threadCount: number | undefined;
 	isWorking: boolean;
@@ -404,6 +401,12 @@ export type CortexWidgetState = {
 	session: ChatSessionState;
 	/** What Cortex offers this agent's clients; undefined until the handshake answers. */
 	capabilities: AgentCapabilities | undefined;
+	/**
+	 * The agent's display name from the last handshake answered, kept while a
+	 * new one is out; `{}` once the first try fails. Undefined only before the
+	 * first answer or miss.
+	 */
+	displayName: AgentCapabilities["displayName"] | undefined;
 	/** Why the handshake has not answered yet, once a try has failed. */
 	unanswered: Unanswered | undefined;
 	/** The files held for the next message. */
@@ -420,7 +423,7 @@ export type CortexWidgetState = {
 	 * one of its fields changes, which a streamed chunk does only as the turn
 	 * starts and stops working, so a framework redraws them only then.
 	 */
-	parts: Pick<CortexWidgetState, "threads" | "selected" | "capabilities" | "debugMode"> & {
+	parts: Pick<CortexWidgetState, "threads" | "selected" | "capabilities" | "displayName" | "debugMode"> & {
 		isWorking: boolean;
 	};
 };
@@ -490,6 +493,8 @@ type TokenUsage$1 = {
  * The widget hides UI for anything absent; Cortex enforces each.
  */
 export type AgentCapabilities$1 = {
+	/** The agent's display name per locale, which titles a new chat; `{}` for an agent without one. */
+	displayName: Partial<LocalizedText$1>;
 	attachments: boolean;
 	/**
 	 * False when this caller may not send to the chat: the agent's `message`
@@ -515,6 +520,7 @@ type Suggestion$1 = {
 };
 type Suggestions$1 = Record<Locale$1, Suggestion$1[]>;
 type Greeting$1 = Record<Locale$1, string>;
+type LocalizedText$1 = Record<Locale$1, string>;
 /**
  * Response of `POST /chat/:threadId/tools/:toolCallId/initiate` for a pending
  * call stamped with an embed. The payload is for the widget only; it never
@@ -599,7 +605,7 @@ declare class CortexChatService {
 	readonly debugMode: import("@angular/core").Signal<boolean>;
 	readonly turnFailure: import("@angular/core").Signal<TurnFailure | undefined>;
 	/** What the header, landing and history are drawn from: a streamed chunk leaves it as it was. */
-	readonly parts: import("@angular/core").Signal<Pick<CortexWidgetState, "threads" | "capabilities" | "debugMode" | "selected"> & {
+	readonly parts: import("@angular/core").Signal<Pick<CortexWidgetState, "threads" | "capabilities" | "debugMode" | "displayName" | "selected"> & {
 		isWorking: boolean;
 	}>;
 	constructor();
@@ -621,8 +627,7 @@ export declare class CortexChatWidgetComponent implements OnInit {
 		chatHeader: {
 			screen: "chat" | "threads";
 			viewMode: CortexViewMode;
-			title: string | null;
-			agentName: string | undefined;
+			title: string;
 			threadCount: number | undefined;
 			isWorking: boolean;
 			debug: {
@@ -637,8 +642,7 @@ export declare class CortexChatWidgetComponent implements OnInit {
 		threadsHeader: {
 			screen: "chat" | "threads";
 			viewMode: CortexViewMode;
-			title: string | null;
-			agentName: string | undefined;
+			title: string;
 			threadCount: number | undefined;
 			isWorking: boolean;
 			debug: {
@@ -695,7 +699,7 @@ export type SlotTemplateContext<Slot extends SlotName> = {
  *
  *   <cortex-chat-widget [config]="config">
  *     <ng-template cortexSlot="header" let-chat>
- *       <div class="cortex-widget__chat-header">{{ chat.title ?? chat.agentName }}</div>
+ *       <div class="cortex-widget__chat-header">{{ chat.title }}</div>
  *     </ng-template>
  *   </cortex-chat-widget>
  */