@m6d/cortex-angular 0.3.0 → 0.4.1

package/fesm2022/m6d-cortex-angular.mjs

@@ -48,6 +48,9 @@ function toUiMessage(message) {
   return { ...message, role: message.role === "trigger" ? "user" : message.role };
 }
 var CLIENT_TOOL_ANSWERS_KEY = "clientToolAnswers";
+function approvalIdOf(part) {
+  return part.approval?.id ?? `approval_${part.id}`;
+}
 var TIMEZONE_HEADER = "X-Cortex-Timezone";
 
 // src/internal/client/src/chat/api-client.ts
@@ -93,7 +96,7 @@ function createCortexApiClient(getTransport) {
   }
   async function send(path, init) {
     const headers = new Headers(await resolveHeaders());
-    new Headers(init?.headers).forEach(function(value, name) {
+    new Headers(init?.headers).forEach((value, name) => {
       headers.set(name, value);
     });
     if (init?.body instanceof FormData) {
@@ -138,10 +141,10 @@ function createCortexApiClient(getTransport) {
         method: "POST"
       });
     },
-    async uploadAttachment(threadId, file) {
+    uploadAttachment(threadId, file) {
       const body = new FormData;
       body.append("file", file);
-      return await send(`/threads/${threadId}/files`, {
+      return send(`/threads/${threadId}/files`, {
         method: "POST",
         body
       });
@@ -291,7 +294,7 @@ function approvalPrompt(part, locale) {
   const metadata = part.metadata;
   if (!metadata || typeof metadata !== "object" || !("cortex" in metadata))
     return;
-  const cortex = metadata.cortex ?? undefined;
+  const cortex = metadata.cortex;
   return cortex?.approval?.[locale] || undefined;
 }
 function activityLabelKeys(activity) {
@@ -463,11 +466,7 @@ async function* withCommittedTranscript(stream, options, lastSent) {
     const boundary = local.findIndex((message) => message.id === lastSent);
     const queued = boundary === -1 ? [] : local.slice(boundary + 1).filter((message) => message.role === "user");
     options.onTranscriptCarried?.(chunk.timestamp ?? Date.now());
-    const merged = {
-      ...chunk,
-      messages: [...chunk.messages, ...queued]
-    };
-    yield merged;
+    yield { ...chunk, messages: [...chunk.messages, ...queued] };
   }
 }
 function createCortexConnection(options) {
@@ -977,13 +976,13 @@ function createLocationPicker(host, options) {
 function showLocation(host, position, onFailed) {
   let disposed = false;
   let dispose;
-  mountMap(host, { center: position, zoom: STREET_ZOOM, interactive: false }).then((h) => {
+  mountMap(host, { center: position, zoom: STREET_ZOOM, interactive: false }).then((handle) => {
     if (disposed) {
-      h.dispose();
+      handle.dispose();
       return;
     }
-    dispose = h.dispose;
-    h.leaflet.marker(position).addTo(h.map);
+    dispose = handle.dispose;
+    handle.leaflet.marker(position).addTo(handle.map);
   }, () => {
     if (!disposed)
       onFailed();
@@ -1021,6 +1020,17 @@ function describeLocation(position) {
   const point = `${position.lat.toFixed(4)}, ${position.lng.toFixed(4)}`;
   return position.accuracy ? `${point} ±${position.accuracy} m` : point;
 }
+function locationPickerHint(state) {
+  if (state.locating)
+    return { key: "translate_location_locating", failed: false };
+  if (state.deliveryFailed)
+    return { key: "translate_location_send_failed", failed: true };
+  if (state.locateFailed)
+    return { key: "translate_location_locate_failed", failed: true };
+  if (state.mapFailed)
+    return { key: "translate_location_map_failed", failed: true };
+  return { key: "translate_location_hint", failed: false };
+}
 // src/internal/client/src/chat/websocket.ts
 function wsBackoffDelay(attempt) {
   return Math.min(1000 * 2 ** (attempt - 1), 30000);
@@ -1417,9 +1427,10 @@ function firstViolation(entries, check) {
   return;
 }
 var URL_FUNCTION = /url\(([^)]*)\)/gi;
-var IMAGE_FUNCTION = /\b(url|src|image|image-set|-webkit-image-set|cross-fade|element)\(/i;
-var OTHER_IMAGE_FUNCTION = /\b(src|image|image-set|-webkit-image-set|cross-fade|element)\(/i;
-var OTHER_IMAGE_FUNCTION_GLOBAL = /\b(src|image|image-set|-webkit-image-set|cross-fade|element)\([^)]*\)/gi;
+var OTHER_IMAGE_FUNCTION_NAMES = "src|image|image-set|-webkit-image-set|cross-fade|element";
+var IMAGE_FUNCTION = new RegExp(String.raw`\b(url|${OTHER_IMAGE_FUNCTION_NAMES})\(`, "i");
+var OTHER_IMAGE_FUNCTION = new RegExp(String.raw`\b(${OTHER_IMAGE_FUNCTION_NAMES})\(`, "i");
+var OTHER_IMAGE_FUNCTION_GLOBAL = new RegExp(String.raw`\b(${OTHER_IMAGE_FUNCTION_NAMES})\([^)]*\)`, "gi");
 var CSS_ESCAPE = /\\([0-9a-f]{1,6})\s?|\\(.)/gi;
 function decodeCssEscapes(text) {
   return text.replace(CSS_ESCAPE, (_, hex, literal) => {
@@ -1521,27 +1532,32 @@ ${source}`;
     return dispose;
   }
 };
+var PENDING_LABEL = {
+  mermaid: "translate_media_pending_mermaid",
+  "vega-lite": "translate_media_pending_vega_lite",
+  map: "translate_media_pending_map"
+};
+function mediaPendingLabel(language) {
+  return PENDING_LABEL[language] ?? "translate_media_pending";
+}
 function mediaLanguages(overrides) {
   return Object.keys({ ...builtIn, ...overrides });
 }
-function renderMediaBlock(language, host, source, context, overrides) {
-  const renderer = overrides?.[language] ?? builtIn[language];
-  if (!renderer)
-    return Promise.reject(new Error(`No renderer for ${language}.`));
-  return renderer(host, source, context);
-}
 function drawMediaBlock(host, options) {
+  const { language, source, context, overrides, onError } = options;
   const slot = host.appendChild(document.createElement("div"));
+  const renderer = overrides?.[language] ?? builtIn[language];
   let dispose;
   let cancelled = false;
-  renderMediaBlock(options.language, slot, options.source, options.context, options.overrides).then((teardown) => {
+  const drawn = renderer ? renderer(slot, source, context) : Promise.reject(new Error(`No renderer for ${language}.`));
+  drawn.then((teardown) => {
     if (cancelled)
       teardown();
     else
       dispose = teardown;
   }, (reason) => {
     if (!cancelled)
-      options.onError(reason instanceof Error ? reason.message : String(reason));
+      onError(reason instanceof Error ? reason.message : String(reason));
   });
   return () => {
     cancelled = true;
@@ -1788,7 +1804,8 @@ var ar_default = {
   translate_media_source: "المصدر",
   translate_media_pending: "جارٍ الرسم",
   translate_image_unavailable: "الصورة غير متاحة",
-  translate_image_unavailable_alt: "الصورة غير متاحة: {{alt}}"
+  translate_image_unavailable_alt: "الصورة غير متاحة: {{alt}}",
+  translate_send: "إرسال"
 };
 // src/internal/client/src/i18n/en.json
 var en_default = {
@@ -1936,7 +1953,8 @@ var en_default = {
   translate_media_source: "Source",
   translate_media_pending: "Drawing",
   translate_image_unavailable: "Image unavailable",
-  translate_image_unavailable_alt: "Image unavailable: {{alt}}"
+  translate_image_unavailable_alt: "Image unavailable: {{alt}}",
+  translate_send: "Send"
 };
 
 // src/internal/client/src/i18n.ts
@@ -1950,6 +1968,9 @@ function translate(locale, key, params) {
     return value;
   return value.replace(/\{\{\s*(\w+)\s*\}\}/g, (match, name) => (name in params) ? String(params[name]) : match);
 }
+function pluralKey(count, one, other) {
+  return count === 1 ? one : other;
+}
 // src/internal/client/src/format/deep-parse-json.ts
 function deepParseJson(value) {
   if (typeof value === "string") {
@@ -2193,7 +2214,8 @@ function createTurnLifecycle(options) {
         continue;
       if (!unansweredToolCalls(transcript).some((open) => open.id === call.id))
         return true;
-      if (await options.deliver(answer).then(() => true, () => false))
+      const resent = await options.deliver(answer).then(() => true, () => false);
+      if (resent)
         return true;
     }
     return false;
@@ -3103,11 +3125,8 @@ var ChatComposerComponent = class ChatComposerComponent2 {
       [class.cortex-widget__textarea--disabled]="chatService.isAgentWorking()"
     ></textarea>
     @if (chatService.isAgentWorking()) {
-      <!-- Stop button -->
       <button (click)="chatService.abort()" class="cortex-stop-btn">
-        <!-- Pulsing ring -->
         <span class="cortex-stop-btn__ring"></span>
-        <!-- Stop icon (rounded square) -->
         <svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="cortex-stop-btn__icon">
           <rect x="1" y="1" width="10" height="10" rx="2.5" fill="currentColor" />
         </svg>
@@ -3115,7 +3134,6 @@ var ChatComposerComponent = class ChatComposerComponent2 {
     } @else {
       <div class="cortex-widget__input-actions">
         @if (attachmentsEnabled()) {
-          <!-- Attach button -->
           <button
             type="button"
             (click)="fileInput.click()"
@@ -3142,7 +3160,6 @@ var ChatComposerComponent = class ChatComposerComponent2 {
           />
         }
 
-        <!-- Send button -->
         <button
           (click)="send()"
           class="cortex-widget__send-btn"
@@ -3229,11 +3246,8 @@ i0.ɵɵngDeclareClassMetadata({
       [class.cortex-widget__textarea--disabled]="chatService.isAgentWorking()"
     ></textarea>
     @if (chatService.isAgentWorking()) {
-      <!-- Stop button -->
       <button (click)="chatService.abort()" class="cortex-stop-btn">
-        <!-- Pulsing ring -->
         <span class="cortex-stop-btn__ring"></span>
-        <!-- Stop icon (rounded square) -->
         <svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="cortex-stop-btn__icon">
           <rect x="1" y="1" width="10" height="10" rx="2.5" fill="currentColor" />
         </svg>
@@ -3241,7 +3255,6 @@ i0.ɵɵngDeclareClassMetadata({
     } @else {
       <div class="cortex-widget__input-actions">
         @if (attachmentsEnabled()) {
-          <!-- Attach button -->
           <button
             type="button"
             (click)="fileInput.click()"
@@ -3268,7 +3281,6 @@ i0.ɵɵngDeclareClassMetadata({
           />
         }
 
-        <!-- Send button -->
         <button
           (click)="send()"
           class="cortex-widget__send-btn"
@@ -3353,14 +3365,12 @@ var ChatHeaderComponent = class ChatHeaderComponent2 {
   </svg>
 </button>
 
-<!-- Title -->
 <div class="cortex-widget__chat-title-wrap">
   <p class="cortex-widget__chat-title">
     {{ chatService.selectedThread()?.title ?? agentName() ?? ('translate_new_chat' | translate) }}
   </p>
 </div>
 
-<!-- Debug toggle -->
 @if (config().showDebugButton) {
   <button
     (click)="toggleDebug.emit()"
@@ -3372,7 +3382,6 @@ var ChatHeaderComponent = class ChatHeaderComponent2 {
   </button>
 }
 
-<!-- History button -->
 <button
   type="button"
   (click)="openHistory.emit()"
@@ -3425,14 +3434,12 @@ i0.ɵɵngDeclareClassMetadata({
   </svg>
 </button>
 
-<!-- Title -->
 <div class="cortex-widget__chat-title-wrap">
   <p class="cortex-widget__chat-title">
     {{ chatService.selectedThread()?.title ?? agentName() ?? ('translate_new_chat' | translate) }}
   </p>
 </div>
 
-<!-- Debug toggle -->
 @if (config().showDebugButton) {
   <button
     (click)="toggleDebug.emit()"
@@ -3444,7 +3451,6 @@ i0.ɵɵngDeclareClassMetadata({
   </button>
 }
 
-<!-- History button -->
 <button
   type="button"
   (click)="openHistory.emit()"
@@ -3490,10 +3496,9 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var ChatLandingComponent = class ChatLandingComponent2 {
   threadSelected = output();
-  config = inject(CORTEX_CONFIG);
   chatService = inject(CortexChatService);
-  locale = inject(CORTEX_LOCALE);
   threadService = inject(CortexThreadService);
+  locale = inject(CORTEX_LOCALE);
   greeting = computed(() => localized(this.chatService.capabilities()?.greeting, this.locale()) || null, ...ngDevMode ? [{ debugName: "greeting" }] : []);
   suggestions = computed(() => localized(this.chatService.capabilities()?.suggestions, this.locale()), ...ngDevMode ? [{ debugName: "suggestions" }] : []);
   ready = computed(() => this.chatService.capabilities() !== undefined, ...ngDevMode ? [{ debugName: "ready" }] : []);
@@ -4235,23 +4240,13 @@ var JsonTreeComponent = class JsonTreeComponent2 {
   data = input.required(...ngDevMode ? [{ debugName: "data" }] : []);
   expandDepth = input(1, ...ngDevMode ? [{ debugName: "expandDepth" }] : []);
   parsedData = computed(() => deepParseJson(this.data()), ...ngDevMode ? [{ debugName: "parsedData" }] : []);
-  collapsedPaths = /* @__PURE__ */ new Set;
-  userToggled = /* @__PURE__ */ new Set;
+  describe = describeJsonValue;
+  userToggled = /* @__PURE__ */ new Map;
   isCollapsed(path, depth) {
-    if (this.userToggled.has(path))
-      return this.collapsedPaths.has(path);
-    return depth >= this.expandDepth();
+    return this.userToggled.get(path) ?? depth >= this.expandDepth();
   }
   toggle(path, depth) {
-    const collapsed = this.isCollapsed(path, depth);
-    this.userToggled.add(path);
-    if (collapsed)
-      this.collapsedPaths.delete(path);
-    else
-      this.collapsedPaths.add(path);
-  }
-  describe(value, path) {
-    return describeJsonValue(value, path);
+    this.userToggled.set(path, !this.isCollapsed(path, depth));
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
@@ -4857,10 +4852,7 @@ i0.ɵɵngDeclareClassMetadata({
   type: MarkedPipe,
   decorators: [{
     type: Pipe,
-    args: [{
-      name: "marked",
-      standalone: true
-    }]
+    args: [{ name: "marked" }]
   }]
 });
 var AttachmentImageComponent = class AttachmentImageComponent2 {
@@ -5020,11 +5012,6 @@ i0.ɵɵngDeclareClassMetadata({
     }]
   }
 });
-var PENDING_LABEL = {
-  mermaid: "translate_media_pending_mermaid",
-  "vega-lite": "translate_media_pending_vega_lite",
-  map: "translate_media_pending_map"
-};
 var MediaBlockHeadComponent = class MediaBlockHeadComponent2 {
   language = input.required(...ngDevMode ? [{ debugName: "language" }] : []);
   source = input.required(...ngDevMode ? [{ debugName: "source" }] : []);
@@ -5034,7 +5021,7 @@ var MediaBlockHeadComponent = class MediaBlockHeadComponent2 {
   sourceShown = input.required(...ngDevMode ? [{ debugName: "sourceShown" }] : []);
   canToggleSource = input.required(...ngDevMode ? [{ debugName: "canToggleSource" }] : []);
   toggleSource = output();
-  pendingLabel = computed(() => PENDING_LABEL[this.language()] ?? "translate_media_pending", ...ngDevMode ? [{ debugName: "pendingLabel" }] : []);
+  pendingLabel = computed(() => mediaPendingLabel(this.language()), ...ngDevMode ? [{ debugName: "pendingLabel" }] : []);
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
     version: "22.2.0",
@@ -5509,6 +5496,9 @@ var MessageTextPartComponent = class MessageTextPartComponent2 {
   streaming = input(false, ...ngDevMode ? [{ debugName: "streaming" }] : []);
   debugMode = input(false, ...ngDevMode ? [{ debugName: "debugMode" }] : []);
   attachments = input([], ...ngDevMode ? [{ debugName: "attachments" }] : []);
+  config = inject(CORTEX_CONFIG);
+  smoother = null;
+  isFirstRender = true;
   displayedText = signal("", ...ngDevMode ? [{ debugName: "displayedText" }] : []);
   fading = signal([], ...ngDevMode ? [{ debugName: "fading" }] : []);
   segments = computed(() => this.role() === "assistant" ? segmentMessageText(this.displayedText(), mediaLanguages(this.config().mediaRenderers)) : [{
@@ -5519,9 +5509,6 @@ var MessageTextPartComponent = class MessageTextPartComponent2 {
   attachmentFor(id) {
     return this.attachments().find((attachment) => attachment.id.toLowerCase() === id);
   }
-  config = inject(CORTEX_CONFIG);
-  smoother = null;
-  isFirstRender = true;
   constructor() {
     effect(() => {
       const part = this.textPart();
@@ -5533,31 +5520,28 @@ var MessageTextPartComponent = class MessageTextPartComponent2 {
         this.isFirstRender = false;
         return;
       }
+      const smoother = this.ensureSmoother();
       if (this.isFirstRender) {
-        this.ensureSmoother();
-        this.smoother.seed(part.content);
         this.isFirstRender = false;
+        smoother.seed(part.content);
         return;
       }
-      this.isFirstRender = false;
-      this.ensureSmoother();
-      this.smoother.update(part.content, false);
+      smoother.update(part.content, false);
     });
   }
   ngOnDestroy() {
     this.destroySmoother();
   }
   destroySmoother() {
-    if (this.smoother) {
-      this.smoother.destroy();
-      this.smoother = null;
-    }
+    this.smoother?.destroy();
+    this.smoother = null;
   }
   ensureSmoother() {
-    if (this.smoother)
-      return;
-    this.smoother = new StreamTextSmoother((text, fading) => this.show(text, fading));
-    this.smoother.seed(this.displayedText());
+    if (!this.smoother) {
+      this.smoother = new StreamTextSmoother((text, fading) => this.show(text, fading));
+      this.smoother.seed(this.displayedText());
+    }
+    return this.smoother;
   }
   show(text, fading) {
     this.displayedText.set(text);
@@ -6012,10 +5996,7 @@ i0.ɵɵngDeclareClassMetadata({
   type: HighlightPipe,
   decorators: [{
     type: Pipe,
-    args: [{
-      name: "highlight",
-      standalone: true
-    }]
+    args: [{ name: "highlight" }]
   }]
 });
 var MessageToolCallOutcomeComponent = class MessageToolCallOutcomeComponent2 {
@@ -6962,33 +6943,7 @@ var LocationPickerComponent = class LocationPickerComponent2 {
   center = input.required(...ngDevMode ? [{ debugName: "center" }] : []);
   submit = input.required(...ngDevMode ? [{ debugName: "submit" }] : []);
   picked = signal(LOCATION_PICKER_IDLE, ...ngDevMode ? [{ debugName: "picked" }] : []);
-  hint = computed(() => {
-    const state = this.picked();
-    if (state.locating)
-      return {
-        key: "translate_location_locating",
-        failed: false
-      };
-    if (state.deliveryFailed)
-      return {
-        key: "translate_location_send_failed",
-        failed: true
-      };
-    if (state.locateFailed)
-      return {
-        key: "translate_location_locate_failed",
-        failed: true
-      };
-    if (state.mapFailed)
-      return {
-        key: "translate_location_map_failed",
-        failed: true
-      };
-    return {
-      key: "translate_location_hint",
-      failed: false
-    };
-  }, ...ngDevMode ? [{ debugName: "hint" }] : []);
+  hint = computed(() => locationPickerHint(this.picked()), ...ngDevMode ? [{ debugName: "hint" }] : []);
   describe = describeLocation;
   host = viewChild.required("host", ...ngDevMode ? [{ debugName: "host" }] : []);
   picker;
@@ -7446,12 +7401,13 @@ i0.ɵɵngDeclareClassMetadata({
     }]
   }
 });
-var BUILT_IN_TOOL_COMPONENTS = { [REQUEST_LOCATION_TOOL]: LocationInputComponent };
+var BUILT_IN_TOOL_COMPONENTS = /* @__PURE__ */ new Map([[REQUEST_LOCATION_TOOL, LocationInputComponent]]);
 var MessageToolCallAnimatedComponent = class MessageToolCallAnimatedComponent2 {
   message = input.required(...ngDevMode ? [{ debugName: "message" }] : []);
   toolCallPart = input.required(...ngDevMode ? [{ debugName: "toolCallPart" }] : []);
   config = inject(CORTEX_CONFIG);
   locale = inject(CORTEX_LOCALE);
+  chatService = inject(CortexChatService);
   mountedComponent = computed(() => {
     const part = this.toolCallPart();
     const setOutput = (output2) => this.chatService.addToolResult(part.id, part.name, output2);
@@ -7465,7 +7421,7 @@ var MessageToolCallAnimatedComponent = class MessageToolCallAnimatedComponent2 {
           setOutput
         }
       };
-    const builtIn2 = this.owed() || isSettledToolState(part.state) ? BUILT_IN_TOOL_COMPONENTS[part.name] : undefined;
+    const builtIn2 = this.owed() || isSettledToolState(part.state) ? BUILT_IN_TOOL_COMPONENTS.get(part.name) : undefined;
     return builtIn2 ? {
       type: builtIn2,
       inputs: {
@@ -7480,9 +7436,7 @@ var MessageToolCallAnimatedComponent = class MessageToolCallAnimatedComponent2 {
   approvalRequested = computed(() => this.toolCallPart().state === "approval-requested" && !this.chatService.isAgentWorking(), ...ngDevMode ? [{ debugName: "approvalRequested" }] : []);
   prompt = computed(() => approvalPrompt(this.toolCallPart(), this.locale()) ?? translate(this.locale(), "translate_approval_prompt"), ...ngDevMode ? [{ debugName: "prompt" }] : []);
   respond(approved) {
-    const part = this.toolCallPart();
-    const approvalId = part.approval?.id ?? `approval_${part.id}`;
-    this.chatService.respondToApproval(approvalId, approved);
+    this.chatService.respondToApproval(approvalIdOf(this.toolCallPart()), approved);
   }
   animation = computed(() => toolCallAnimation(this.toolCallPart()), ...ngDevMode ? [{ debugName: "animation" }] : []);
   animState = computed(() => this.animation().state, ...ngDevMode ? [{ debugName: "animState" }] : []);
@@ -7494,7 +7448,6 @@ var MessageToolCallAnimatedComponent = class MessageToolCallAnimatedComponent2 {
     const count2 = this.animation().rowCount;
     return count2 === undefined ? undefined : translate(this.locale(), "translate_rows_read", { count: count2 });
   }, ...ngDevMode ? [{ debugName: "rowsLabel" }] : []);
-  chatService = inject(CortexChatService);
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
     version: "22.2.0",
@@ -8512,7 +8465,7 @@ var MessageBodyComponent = class MessageBodyComponent2 {
     const mark = this.fold()?.get(part);
     if (mark?.kind !== "more")
       return;
-    const key = mark.count === 1 ? "translate_one_more_step" : "translate_n_more_steps";
+    const key = pluralKey(mark.count, "translate_one_more_step", "translate_n_more_steps");
     return {
       runId: mark.runId,
       count: mark.count,
@@ -9456,7 +9409,7 @@ var ThreadListComponent = class ThreadListComponent2 {
     this.chatService.deleteThread(threadId).subscribe();
   }
   countKey(count2) {
-    return count2 === 1 ? "translate_one_conversation" : "translate_n_conversations";
+    return pluralKey(count2, "translate_one_conversation", "translate_n_conversations");
   }
   relativeTime(iso) {
     return timeLabel(iso, this.locale());
@@ -9484,7 +9437,6 @@ var ThreadListComponent = class ThreadListComponent2 {
     template: `@let threads = threadService.threads();
 @let threadCount = threads?.length ?? 0;
 
-<!-- Threads header -->
 <div class="cortex-widget__threads-header">
   <!-- Back to chat (helper mode; full mode hides it, the sidebar is always visible) -->
   <button
@@ -9527,10 +9479,9 @@ var ThreadListComponent = class ThreadListComponent2 {
   </button>
 </div>
 
-<!-- Threads list -->
 <div class="cortex-widget__threads-list">
-  <!-- Threads loading skeleton. The three states are siblings rather than an
-       if/else ladder so the row markup below sits one level shallower. -->
+  <!-- The loading, listed and empty states are siblings rather than an if/else
+       ladder, so the row markup sits one level shallower. -->
   @if (threads === undefined) {
     @for (i of [1, 2, 3, 4]; track i) {
       <div class="cortex-widget__thread-skeleton">
@@ -9552,7 +9503,6 @@ var ThreadListComponent = class ThreadListComponent2 {
       class="cortex-widget__thread-item"
       [class.cortex-widget__thread-item--active]="isActive"
     >
-      <!-- Thread icon -->
       <div class="cortex-widget__thread-icon" [class.cortex-widget__thread-icon--active]="isActive">
         <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
           <!-- Rounded speech bubble with a tail, on the shared 16x16 icon grid. -->
@@ -9566,7 +9516,6 @@ var ThreadListComponent = class ThreadListComponent2 {
         </svg>
       </div>
 
-      <!-- Thread info -->
       <div class="cortex-widget__thread-info">
         <div class="cortex-widget__thread-title-row">
           <p
@@ -9593,7 +9542,6 @@ var ThreadListComponent = class ThreadListComponent2 {
         }
       </div>
 
-      <!-- Delete button -->
       <button
         (click)="deleteThread($event, thread.id)"
         class="cortex-widget__thread-delete"
@@ -9609,7 +9557,6 @@ var ThreadListComponent = class ThreadListComponent2 {
         </svg>
       </button>
 
-      <!-- Arrow -->
       <svg
         class="cortex-widget__thread-arrow"
         [class.cortex-widget__thread-arrow--active]="isActive"
@@ -9688,7 +9635,6 @@ i0.ɵɵngDeclareClassMetadata({
       template: `@let threads = threadService.threads();
 @let threadCount = threads?.length ?? 0;
 
-<!-- Threads header -->
 <div class="cortex-widget__threads-header">
   <!-- Back to chat (helper mode; full mode hides it, the sidebar is always visible) -->
   <button
@@ -9731,10 +9677,9 @@ i0.ɵɵngDeclareClassMetadata({
   </button>
 </div>
 
-<!-- Threads list -->
 <div class="cortex-widget__threads-list">
-  <!-- Threads loading skeleton. The three states are siblings rather than an
-       if/else ladder so the row markup below sits one level shallower. -->
+  <!-- The loading, listed and empty states are siblings rather than an if/else
+       ladder, so the row markup sits one level shallower. -->
   @if (threads === undefined) {
     @for (i of [1, 2, 3, 4]; track i) {
       <div class="cortex-widget__thread-skeleton">
@@ -9756,7 +9701,6 @@ i0.ɵɵngDeclareClassMetadata({
       class="cortex-widget__thread-item"
       [class.cortex-widget__thread-item--active]="isActive"
     >
-      <!-- Thread icon -->
       <div class="cortex-widget__thread-icon" [class.cortex-widget__thread-icon--active]="isActive">
         <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
           <!-- Rounded speech bubble with a tail, on the shared 16x16 icon grid. -->
@@ -9770,7 +9714,6 @@ i0.ɵɵngDeclareClassMetadata({
         </svg>
       </div>
 
-      <!-- Thread info -->
       <div class="cortex-widget__thread-info">
         <div class="cortex-widget__thread-title-row">
           <p
@@ -9797,7 +9740,6 @@ i0.ɵɵngDeclareClassMetadata({
         }
       </div>
 
-      <!-- Delete button -->
       <button
         (click)="deleteThread($event, thread.id)"
         class="cortex-widget__thread-delete"
@@ -9813,7 +9755,6 @@ i0.ɵɵngDeclareClassMetadata({
         </svg>
       </button>
 
-      <!-- Arrow -->
       <svg
         class="cortex-widget__thread-arrow"
         [class.cortex-widget__thread-arrow--active]="isActive"
@@ -10003,7 +9944,6 @@ var CortexChatWidgetComponent = class CortexChatWidgetComponent2 {
   (dragover)="onWidgetDragOver($event)"
   (drop)="onWidgetDrop($event)"
 >
-  <!-- SCREEN 1: THREADS -->
   <cortex-thread-list
     class="cortex-widget__screen"
     [class.cortex-widget__screen--active]="screen() === 'threads'"
@@ -10013,7 +9953,6 @@ var CortexChatWidgetComponent = class CortexChatWidgetComponent2 {
     (backRequested)="closeHistory()"
   />
 
-  <!-- SCREEN 2: CHAT -->
   <div
     class="cortex-widget__screen"
     [class.cortex-widget__screen--active]="screen() === 'chat'"
@@ -10033,11 +9972,9 @@ var CortexChatWidgetComponent = class CortexChatWidgetComponent2 {
     } @else if (chatService.isLoadingMessages() && !chatService.isAgentWorking()) {
       <cortex-messages-skeleton />
     } @else {
-      <!-- Messages area -->
       <cortex-message-list class="cortex-widget__messages" [debugMode]="debugMode()" />
     }
 
-    <!-- Agent working indicator -->
     @if (chatService.isAgentWorking() && !chatService.hasPendingToolCalls()) {
       <div class="cortex-widget__working">
         <div class="cortex-widget__working-dots">
@@ -10166,7 +10103,6 @@ i0.ɵɵngDeclareClassMetadata({
   (dragover)="onWidgetDragOver($event)"
   (drop)="onWidgetDrop($event)"
 >
-  <!-- SCREEN 1: THREADS -->
   <cortex-thread-list
     class="cortex-widget__screen"
     [class.cortex-widget__screen--active]="screen() === 'threads'"
@@ -10176,7 +10112,6 @@ i0.ɵɵngDeclareClassMetadata({
     (backRequested)="closeHistory()"
   />
 
-  <!-- SCREEN 2: CHAT -->
   <div
     class="cortex-widget__screen"
     [class.cortex-widget__screen--active]="screen() === 'chat'"
@@ -10196,11 +10131,9 @@ i0.ɵɵngDeclareClassMetadata({
     } @else if (chatService.isLoadingMessages() && !chatService.isAgentWorking()) {
       <cortex-messages-skeleton />
     } @else {
-      <!-- Messages area -->
       <cortex-message-list class="cortex-widget__messages" [debugMode]="debugMode()" />
     }
 
-    <!-- Agent working indicator -->
     @if (chatService.isAgentWorking() && !chatService.hasPendingToolCalls()) {
       <div class="cortex-widget__working">
         <div class="cortex-widget__working-dots">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m6d/cortex-angular",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Reusable AI agent chat UI library for Angular",
   "license": "MIT",
   "sideEffects": false,

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

@@ -16,11 +16,11 @@ declare const ATTACHMENT_STATUSES: readonly [
 	"failed",
 	"skipped"
 ];
+export type AttachmentStatus = (typeof ATTACHMENT_STATUSES)[number];
 declare const ATTACHMENT_ORIGINS: readonly [
 	"upload",
 	"tool"
 ];
-export type AttachmentStatus = (typeof ATTACHMENT_STATUSES)[number];
 export type AttachmentOrigin = (typeof ATTACHMENT_ORIGINS)[number];
 export type AttachmentSummary = {
 	id: string;
@@ -170,11 +170,11 @@ declare const ATTACHMENT_STATUSES$1: readonly [
 	"failed",
 	"skipped"
 ];
+type AttachmentStatus$1 = (typeof ATTACHMENT_STATUSES$1)[number];
 declare const ATTACHMENT_ORIGINS$1: readonly [
 	"upload",
 	"tool"
 ];
-type AttachmentStatus$1 = (typeof ATTACHMENT_STATUSES$1)[number];
 type AttachmentOrigin$1 = (typeof ATTACHMENT_ORIGINS$1)[number];
 export type AttachmentSummary$1 = {
 	id: string;
@@ -269,7 +269,7 @@ declare class CortexChatService {
 	 * forgotten first.
 	 */
 	private loadCapabilities;
-	get events$(): Observable<"onFinish" | "onError" | "onThreadSelected" | "onSend">;
+	get events$(): Observable<"onError" | "onFinish" | "onThreadSelected" | "onSend">;
 	selectThread(thread: ThreadSummary, options?: {
 		skipLoadingMessages?: boolean;
 	}): Observable<ThreadSummary>;
@@ -315,6 +315,7 @@ declare class CortexChatService {
 	static ɵfac: i0.ɵɵFactoryDeclaration<CortexChatService, never>;
 	static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
+/** The chat widget: the thread list, the open conversation and its composer, for the agent `config` points at. */
 export declare class CortexChatWidgetComponent implements OnInit {
 	readonly config: import("@angular/core").InputSignal<CortexAngularConfig>;
 	protected readonly debugMode: import("@angular/core").WritableSignal<boolean>;