From 96c40715c5e2590ed84e7dfb49d7854f9f2f7653 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 1 May 2026 15:20:21 -0700
Subject: [PATCH 1/3] fix(chat): repair message rendering broken by ng-content
 in @switch (0.0.4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Found via fresh-install smoke test against @ngaf/chat@0.0.3. Multiple
critical UX bugs that shipped to npm:

1. Message content never rendered. chat-message used `<ng-content/>`
   inside `@switch @case` blocks; Angular's content projection is
   resolved at view-creation, so projected text/templates never
   reached the per-role slots. Result: empty user bubbles and empty
   assistant bodies. Fix: single root-level `<ng-content/>` slot,
   role-driven CSS class on the body wrapper. Caret + controls
   visibility now driven by `data-streaming` / `data-current` /
   `data-role` host attributes + CSS, not @switch.

2. Empty state had no default content and didn't hide. The
   `[chatEmptyState]` slot in `<chat>` had no fallback, so
   first-time consumers saw a blank tall area. Even worse, the
   `[hidden]` attribute on the empty container was overridden by
   `display: flex` so the empty state stayed visible after
   messages existed. Fix: provide default fallback content in the
   ng-content slot (How can I help? / Ask anything to get started)
   and add `.chat-empty[hidden] { display: none; }` rule.

3. Input textarea didn't clear on submit. The new chat-input pill
   used a getter/setter proxy (messageTextProxy) for ngModel
   two-way binding, but ngModel doesn't reactively re-read
   getters when the underlying signal changes. Setting
   `messageText.set('')` after submit didn't update the textarea.
   Fix: switch to `[ngModel]="messageText()"` +
   `(ngModelChange)="messageText.set($event)"` — signal-native
   binding that updates reactively.

Fixes validated end-to-end against a fresh `ng new` consumer with
no Tailwind, no postcss, no global stylesheet. Embedded mode
renders user bubble + streaming markdown assistant correctly;
popup mode opens with full conversation; empty state shows with
default content and hides cleanly.

Bumps @ngaf/chat to 0.0.4.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../lib/compositions/chat/chat.component.ts   | 16 ++++++---
 .../chat-input/chat-input.component.ts        |  7 ++--
 .../chat-message/chat-message.component.ts    | 36 +++++++++----------
 .../src/lib/styles/chat-message.styles.ts     | 12 +++++--
 4 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/libs/chat/src/lib/compositions/chat/chat.component.ts b/libs/chat/src/lib/compositions/chat/chat.component.ts
index de94d7372..068180f65 100644
--- a/libs/chat/src/lib/compositions/chat/chat.component.ts
+++ b/libs/chat/src/lib/compositions/chat/chat.component.ts
@@ -63,7 +63,12 @@ import type { ChatRenderEvent } from './chat-render-event';
       padding: 60px 20px;
       color: var(--ngaf-chat-text-muted);
       text-align: center;
+      flex: 1;
+      min-height: 0;
     }
+    .chat-empty[hidden] { display: none; }
+    .chat-empty__title { font-size: 1.125rem; font-weight: 500; color: var(--ngaf-chat-text); margin: 0; }
+    .chat-empty__sub { margin: 0; font-size: var(--ngaf-chat-font-size-sm); }
     .chat-empty__title { font-size: 1.125rem; font-weight: 500; color: var(--ngaf-chat-text); margin: 0; }
     .chat-empty__sub { margin: 0; font-size: var(--ngaf-chat-font-size-sm); }
     .chat-scroll { flex: 1; min-height: 0; overflow-y: auto; }
@@ -85,11 +90,12 @@ import type { ChatRenderEvent } from './chat-render-event';
         <chat-window>
           <ng-content select="[chatHeader]" chatHeader />
           <div chatBody class="chat-scroll" #scrollContainer>
-            @if (agent().messages().length === 0 && !agent().isLoading()) {
-              <div class="chat-empty">
-                <ng-content select="[chatEmptyState]" />
-              </div>
-            }
+            <div class="chat-empty" [hidden]="agent().messages().length !== 0 || agent().isLoading()">
+              <ng-content select="[chatEmptyState]">
+                <p class="chat-empty__title">How can I help?</p>
+                <p class="chat-empty__sub">Ask anything to get started.</p>
+              </ng-content>
+            </div>
 
             <chat-message-list [agent]="agent()">
               <ng-template chatMessageTemplate="human" let-message let-i="index">
diff --git a/libs/chat/src/lib/primitives/chat-input/chat-input.component.ts b/libs/chat/src/lib/primitives/chat-input/chat-input.component.ts
index 4fa9d6dfe..a1e2e7539 100644
--- a/libs/chat/src/lib/primitives/chat-input/chat-input.component.ts
+++ b/libs/chat/src/lib/primitives/chat-input/chat-input.component.ts
@@ -44,7 +44,8 @@ export function submitMessage(
         <textarea
           #textareaEl
           class="chat-input__textarea"
-          [(ngModel)]="messageTextProxy"
+          [ngModel]="messageText()"
+          (ngModelChange)="messageText.set($event)"
           name="messageText"
           [placeholder]="placeholder()"
           [disabled]="isDisabled()"
@@ -83,9 +84,7 @@ export class ChatInputComponent {
   readonly isDisabled = computed(() => this.agent().isLoading());
   readonly focused = signal(false);
 
-  /** Two-way binding helper for ngModel */
-  get messageTextProxy(): string { return this.messageText(); }
-  set messageTextProxy(v: string) { this.messageText.set(v); }
+
 
   readonly canSubmit = computed(() => {
     if (this.isDisabled()) return false;
diff --git a/libs/chat/src/lib/primitives/chat-message/chat-message.component.ts b/libs/chat/src/lib/primitives/chat-message/chat-message.component.ts
index ff99ce66c..bfe87d0b5 100644
--- a/libs/chat/src/lib/primitives/chat-message/chat-message.component.ts
+++ b/libs/chat/src/lib/primitives/chat-message/chat-message.component.ts
@@ -14,28 +14,17 @@ export type ChatMessageRole = 'user' | 'assistant' | 'system' | 'tool';
   host: {
     '[attr.data-role]': 'role()',
     '[attr.data-current]': 'currentStr()',
+    '[attr.data-streaming]': 'streamingStr()',
     '[attr.data-prev-role]': 'prevRole() ?? null',
   },
   template: `
-    @switch (role()) {
-      @case ('user') {
-        <div class="chat-message__bubble"><ng-content /></div>
-      }
-      @case ('assistant') {
-        <div class="chat-message__assistant-body">
-          <ng-content />
-          @if (streaming() && current()) {
-            <span class="chat-message__caret" aria-hidden="true">▍</span>
-          }
-        </div>
-        <div class="chat-message__controls">
-          <ng-content select="[chatMessageControls]" />
-        </div>
-      }
-      @default {
-        <div><ng-content /></div>
-      }
-    }
+    <div [class]="bodyClass()">
+      <ng-content />
+      <span class="chat-message__caret" aria-hidden="true">▍</span>
+    </div>
+    <div class="chat-message__controls">
+      <ng-content select="[chatMessageControls]" />
+    </div>
   `,
 })
 export class ChatMessageComponent {
@@ -45,4 +34,13 @@ export class ChatMessageComponent {
   readonly prevRole = input<ChatMessageRole | undefined>(undefined);
 
   readonly currentStr = computed(() => String(this.current()));
+  readonly streamingStr = computed(() => String(this.streaming()));
+
+  readonly bodyClass = computed(() => {
+    switch (this.role()) {
+      case 'user': return 'chat-message__bubble';
+      case 'assistant': return 'chat-message__assistant-body';
+      default: return 'chat-message__plain';
+    }
+  });
 }
diff --git a/libs/chat/src/lib/styles/chat-message.styles.ts b/libs/chat/src/lib/styles/chat-message.styles.ts
index dd9df0032..c82a0bc45 100644
--- a/libs/chat/src/lib/styles/chat-message.styles.ts
+++ b/libs/chat/src/lib/styles/chat-message.styles.ts
@@ -36,23 +36,31 @@ export const CHAT_MESSAGE_STYLES = `
   }
 
   .chat-message__caret {
-    display: inline-block;
+    display: none;
     margin-left: 2px;
     width: 0.6ch;
     color: var(--ngaf-chat-text-muted);
     animation: ngaf-chat-caret-blink 1.2s step-end infinite;
   }
+  :host([data-role="assistant"][data-current="true"][data-streaming="true"]) .chat-message__caret {
+    display: inline-block;
+  }
+
+  .chat-message__plain { /* system / tool fallback */ }
 
   .chat-message__controls {
+    display: none;
     position: absolute;
     left: 0;
     bottom: -28px;
-    display: flex;
     gap: 1rem;
     opacity: 0;
     transition: opacity 200ms ease;
     pointer-events: none;
   }
+  :host([data-role="assistant"]) .chat-message__controls {
+    display: flex;
+  }
   :host([data-role="assistant"]:hover) .chat-message__controls,
   :host([data-role="assistant"]:focus-within) .chat-message__controls,
   :host([data-current="true"]) .chat-message__controls {

From 8ba36df803b3549c31e5ffd5488b93f9de3f3a34 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 1 May 2026 15:20:27 -0700
Subject: [PATCH 2/3] chore(release): bump @ngaf/chat to 0.0.4

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 libs/chat/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/chat/package.json b/libs/chat/package.json
index 4a39e2f34..9a49dc153 100644
--- a/libs/chat/package.json
+++ b/libs/chat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/chat",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "exports": {
     ".": {
       "types": "./index.d.ts",

From e42858629476bba28e629d12cc61267e4a092e80 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 1 May 2026 15:40:09 -0700
Subject: [PATCH 3/3] fix(chat): make marked a required peer dep, drop optional
 flag
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Smoke-test investigation: when consumers skipped marked (which the
docs called "optional"), the chat rendered raw markdown source
("## Hello!", "**fake**", etc.) since the fallback only does
HTML-escape + \n→<br>. Unusable.

Decision: marked is now required. The defense-in-depth plain-text
fallback in renderMarkdown stays for resilience but the install
contract is "you ship marked alongside chat."

Updates installation.mdx + quickstart.mdx to reflect the change:
install command becomes \`npm install @ngaf/chat marked\` and the
peer-deps table marks marked as Required.

No version bump — lands as part of the same 0.0.4 patch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../content/docs/chat/getting-started/installation.mdx | 10 +++++-----
 .../content/docs/chat/getting-started/quickstart.mdx   |  4 +++-
 libs/chat/package.json                                 |  5 -----
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/apps/website/content/docs/chat/getting-started/installation.mdx b/apps/website/content/docs/chat/getting-started/installation.mdx
index e5cdc0fb6..6221c3839 100644
--- a/apps/website/content/docs/chat/getting-started/installation.mdx
+++ b/apps/website/content/docs/chat/getting-started/installation.mdx
@@ -16,10 +16,10 @@ Required for the build toolchain and package installation.
 ## Install the package
 
 ```bash
-npm install @ngaf/chat
+npm install @ngaf/chat marked
 ```
 
-That's it. The chat components ship with their own design tokens and component-encapsulated styles. **No PostCSS config, no global stylesheet import, no Tailwind required.**
+`marked` is required for parsing assistant markdown. Beyond that: the chat components ship with their own design tokens and component-encapsulated styles. **No PostCSS config, no global stylesheet import, no Tailwind required.**
 
 ## Peer Dependencies
 
@@ -35,10 +35,10 @@ That's it. The chat components ship with their own design tokens and component-e
 | `@ngaf/partial-json` | `^0.0.1` | Yes |
 | `@json-render/core` | `^0.16.0` | Yes |
 | `@langchain/core` | `^1.1.33` | Yes |
-| `marked` | `^15.0.0 \|\| ^16.0.0` | Optional |
+| `marked` | `^15.0.0 \|\| ^16.0.0` | Yes |
 
-<Callout type="tip" title="Markdown rendering">
-The `marked` package is optional. When installed, AI messages render as full markdown (headings, code blocks, tables, lists). Without it, the library falls back to plain text with `<br>` newline conversion.
+<Callout type="info" title="Markdown rendering">
+`marked` parses AI message content into HTML (headings, code blocks, tables, lists). It is a required peer; the library ships a defensive plain-text fallback for resilience, but the rendered output is unusable without `marked` installed.
 </Callout>
 
 ## Configure provideChat() (optional)
diff --git a/apps/website/content/docs/chat/getting-started/quickstart.mdx b/apps/website/content/docs/chat/getting-started/quickstart.mdx
index 8932a4805..03519b69d 100644
--- a/apps/website/content/docs/chat/getting-started/quickstart.mdx
+++ b/apps/website/content/docs/chat/getting-started/quickstart.mdx
@@ -10,9 +10,11 @@ Angular 20+ project with an agent provider configured. See [Agent Installation](
 <Step title="Install the package">
 
 ```bash
-npm install @ngaf/chat
+npm install @ngaf/chat marked
 ```
 
+`marked` is the markdown renderer used for assistant messages.
+
 </Step>
 <Step title="Configure providers">
 
diff --git a/libs/chat/package.json b/libs/chat/package.json
index 9a49dc153..28507f890 100644
--- a/libs/chat/package.json
+++ b/libs/chat/package.json
@@ -26,11 +26,6 @@
     "rxjs": "~7.8.0",
     "marked": "^15.0.0 || ^16.0.0"
   },
-  "peerDependenciesMeta": {
-    "marked": {
-      "optional": true
-    }
-  },
   "license": "MIT",
   "repository": {
     "type": "git",