cacheplane
diff --git a/‎apps/website/content/docs/chat/components/chat-input.mdx‎
Lines changed: 8 additions & 8 deletions b/‎apps/website/content/docs/chat/components/chat-input.mdx‎
Lines changed: 8 additions & 8 deletions
diff --git a/‎apps/website/content/docs/chat/components/chat-interrupt-panel.mdx‎
Lines changed: 7 additions & 7 deletions b/‎apps/website/content/docs/chat/components/chat-interrupt-panel.mdx‎
Lines changed: 7 additions & 7 deletions
diff --git a/‎…t/docs/chat/components/chat-messages.mdx‎ ‎…cs/chat/components/chat-message-list.mdx‎apps/website/content/docs/chat/components/chat-messages.mdx renamed to apps/website/content/docs/chat/components/chat-message-list.mdx
Lines changed: 19 additions & 24 deletions b/‎…t/docs/chat/components/chat-messages.mdx‎ ‎…cs/chat/components/chat-message-list.mdx‎apps/website/content/docs/chat/components/chat-messages.mdx renamed to apps/website/content/docs/chat/components/chat-message-list.mdx
Lines changed: 19 additions & 24 deletions
diff --git a/‎apps/website/content/docs/chat/components/chat-popup.mdx‎
Lines changed: 115 additions & 0 deletions b/‎apps/website/content/docs/chat/components/chat-popup.mdx‎
Lines changed: 115 additions & 0 deletions
@@ -102,14 +102,14 @@ The component renders a `<form>` containing a `<textarea>` and a `<button>`. It
 
 | Variable | Applied To |
 |----------|-----------|
-| `--chat-input-bg` | Form background |
-| `--chat-input-border` | Form border (unfocused) |
-| `--chat-input-focus-border` | Form border (focused) |
-| `--chat-radius-input` | Form border radius |
-| `--chat-text` | Textarea text color |
-| `--chat-font-family` | Textarea font |
-| `--chat-send-bg` | Send button background |
-| `--chat-send-text` | Send button icon color |
+| `--ngaf-chat-surface-alt` | Form background |
+| `--ngaf-chat-separator` | Form border (unfocused) |
+| `--ngaf-chat-muted` | Form border (focused) |
+| `--ngaf-chat-radius-input` | Form border radius |
+| `--ngaf-chat-text` | Textarea text color |
+| `--ngaf-chat-font-family` | Textarea font |
+| `--ngaf-chat-primary` | Send button background |
+| `--ngaf-chat-on-primary` | Send button icon color |
 
 ## ARIA
 
 
@@ -87,13 +87,13 @@ The panel uses the chat theme's warning variables:
 
 | Variable | Applied To |
 |----------|-----------|
-| `--chat-warning-bg` | Panel background |
-| `--chat-warning-text` | Header and message text |
-| `--chat-border` | Panel border |
-| `--chat-radius-card` | Panel border radius |
-| `--chat-bg-alt` | Action button backgrounds |
-| `--chat-text` | Action button text |
-| `--chat-text-muted` | Ignore button text |
+| `--ngaf-chat-warning-bg` | Panel background |
+| `--ngaf-chat-warning-text` | Header and message text |
+| `--ngaf-chat-separator` | Panel border |
+| `--ngaf-chat-radius-card` | Panel border radius |
+| `--ngaf-chat-surface-alt` | Action button backgrounds |
+| `--ngaf-chat-text` | Action button text |
+| `--ngaf-chat-text-muted` | Ignore button text |
 
 ## Primitive Alternative: ChatInterruptComponent
 
 
@@ -1,30 +1,30 @@
-# ChatMessagesComponent
+# ChatMessageListComponent
 
-`ChatMessagesComponent` is the core primitive for rendering chat messages. It iterates over the messages from a `LangGraphAgent` and renders each one using a matching `MessageTemplateDirective`. This gives you full control over how each message type is displayed.
+`ChatMessageListComponent` is the core primitive for rendering chat messages. It iterates over the messages from a `LangGraphAgent` and renders each one using a matching `MessageTemplateDirective`. This gives you full control over how each message type is displayed.
 
-**Selector:** `chat-messages`
+**Selector:** `chat-message-list`
 
 **Import:**
 
 ```typescript
 import {
-  ChatMessagesComponent,
+  ChatMessageListComponent,
   MessageTemplateDirective,
   getMessageType,
 } from '@ngaf/chat';
 ```
 
 ## How It Works
 
-1. The component reads `ref().messages()` to get the current message list
+1. The component reads `agent().messages()` to get the current message list
 2. For each message, it calls `getMessageType()` to determine the template type
 3. It finds the matching `MessageTemplateDirective` among its content children
 4. It renders the message using `ngTemplateOutlet` with the message as the implicit context
 
 ## Basic Usage
 
 ```html
-<chat-messages [ref]="chatRef">
+<chat-message-list [agent]="chatAgent">
   <ng-template chatMessageTemplate="human" let-message>
     <div class="user-bubble">{{ message.content }}</div>
   </ng-template>
@@ -40,7 +40,7 @@ import {
   <ng-template chatMessageTemplate="system" let-message>
     <em>{{ message.content }}</em>
   </ng-template>
-</chat-messages>
+</chat-message-list>
 ```
 
 ## API
@@ -49,7 +49,7 @@ import {
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
-| `ref` | `LangGraphAgent<any, any>` | **Required** | The agent providing streaming state |
+| `agent` | `LangGraphAgent<any, any>` | **Required** | The agent providing streaming state |
 
 ### Content Children
 
@@ -144,55 +144,50 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { agent } from '@ngaf/langgraph';
 import type { BaseMessage } from '@langchain/core/messages';
 import {
-  ChatMessagesComponent,
+  ChatMessageListComponent,
   MessageTemplateDirective,
-  CHAT_MARKDOWN_STYLES,
   renderMarkdown,
 } from '@ngaf/chat';
 
 @Component({
   selector: 'app-messages-demo',
   standalone: true,
-  imports: [ChatMessagesComponent, MessageTemplateDirective],
-  styles: [CHAT_MARKDOWN_STYLES],
+  imports: [ChatMessageListComponent, MessageTemplateDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <chat-messages [ref]="chatRef">
+    <chat-message-list [agent]="chatAgent">
       <ng-template chatMessageTemplate="human" let-message>
-        <div class="flex justify-end mb-4">
-          <div class="bg-blue-600 text-white rounded-2xl px-4 py-2 max-w-[70%]">
+        <div style="display: flex; justify-content: flex-end; margin-bottom: 1rem;">
+          <div style="background: var(--ngaf-chat-primary); color: var(--ngaf-chat-on-primary); border-radius: var(--ngaf-chat-radius-bubble); padding: 0.5rem 1rem; max-width: 70%;">
             {{ message.content }}
           </div>
         </div>
       </ng-template>
 
       <ng-template chatMessageTemplate="ai" let-message>
-        <div class="flex gap-3 mb-4">
-          <div class="w-8 h-8 bg-gray-200 rounded-lg flex items-center justify-center text-xs font-bold">
-            AI
-          </div>
-          <div class="chat-md flex-1" [innerHTML]="renderMd(message.content)"></div>
+        <div style="display: flex; gap: 0.75rem; margin-bottom: 1rem;">
+          <div style="flex: 1;" [innerHTML]="renderMd(message.content)"></div>
         </div>
       </ng-template>
 
       <ng-template chatMessageTemplate="tool" let-message>
-        <div class="bg-gray-100 rounded-lg p-3 font-mono text-sm mb-4">
+        <div style="background: var(--ngaf-chat-surface-alt); border-radius: var(--ngaf-chat-radius-card); padding: 0.75rem; font-family: var(--ngaf-chat-font-mono); font-size: var(--ngaf-chat-font-size-sm); margin-bottom: 1rem;">
           {{ message.content }}
         </div>
       </ng-template>
 
       <ng-template chatMessageTemplate="system" let-message>
-        <div class="text-center text-gray-500 text-xs italic mb-4">
+        <div style="text-align: center; color: var(--ngaf-chat-text-muted); font-size: var(--ngaf-chat-font-size-xs); font-style: italic; margin-bottom: 1rem;">
           {{ message.content }}
         </div>
       </ng-template>
-    </chat-messages>
+    </chat-message-list>
   `,
 })
 export class MessagesDemoComponent {
   private sanitizer = inject(DomSanitizer);
 
-  chatRef = agent<{ messages: BaseMessage[] }>({
+  chatAgent = agent<{ messages: BaseMessage[] }>({
     assistantId: 'chat_agent',
     threadId: signal(null),
   });
 
@@ -0,0 +1,115 @@
+# ChatPopupComponent
+
+`ChatPopupComponent` is a composition that renders a floating launcher button in the bottom-right corner of the screen. Clicking the launcher opens a chat window as an overlay. The window can be toggled open and closed without destroying conversation state.
+
+**Selector:** `chat-popup`
+
+**Import:**
+
+```typescript
+import { ChatPopupComponent } from '@ngaf/chat';
+```
+
+## When to Use It
+
+Use `ChatPopupComponent` when you want an unobtrusive chat entry point that does not occupy permanent screen real estate. The popup stays out of the way until the user chooses to engage, making it ideal for support chat, contextual help, and assistant features embedded in existing applications.
+
+If you need the chat to always be visible, use [`<chat>`](/docs/chat/components/chat) (embedded) instead. If you need a slide-in panel alongside your app content, use [`<chat-sidebar>`](/docs/chat/components/chat-sidebar).
+
+## Basic Usage
+
+```typescript
+import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
+import { agent } from '@ngaf/langgraph';
+import { ChatPopupComponent } from '@ngaf/chat';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [ChatPopupComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <!-- your app content here -->
+    <chat-popup [agent]="chatAgent" />
+  `,
+})
+export class AppComponent {
+  protected readonly chatAgent = agent({
+    assistantId: 'chat_agent',
+    threadId: signal(null),
+  });
+}
+```
+
+<Callout type="tip" title="Place at the root level">
+`ChatPopupComponent` uses `position: fixed` internally. Place it as a direct child of your root component or app shell so it is not clipped by a parent with `overflow: hidden`.
+</Callout>
+
+## API
+
+### Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `agent` | `LangGraphAgent<any, any>` | **Required** | The agent providing streaming state |
+| `open` | `boolean` | `false` | Two-way bindable. Controls whether the chat window is open |
+
+### Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `openChange` | `boolean` | Emits when the window opens or closes. Use with `[(open)]` for two-way binding |
+
+### Slots
+
+| Slot | Selector | Description |
+|------|----------|-------------|
+| Header content | `[chatHeader]` | Projected into the chat window header bar. Replaces the default title |
+
+### Methods
+
+| Method | Description |
+|--------|-------------|
+| `toggle()` | Toggles the window between open and closed |
+| `openWindow()` | Opens the chat window |
+| `closeWindow()` | Closes the chat window |
+
+## Two-Way Binding
+
+Control the open state from your component:
+
+```typescript
+@Component({
+  template: `
+    <button (click)="popup.openWindow()">Open Chat</button>
+    <chat-popup [(open)]="chatOpen" [agent]="chatAgent" #popup />
+  `,
+})
+export class AppComponent {
+  chatOpen = false;
+  chatAgent = agent({ assistantId: 'chat_agent', threadId: signal(null) });
+}
+```
+
+## Custom Header
+
+Project content into the window header with the `[chatHeader]` slot:
+
+```html
+<chat-popup [agent]="chatAgent">
+  <span chatHeader>Support Chat</span>
+</chat-popup>
+```
+
+## Styling
+
+The popup uses the standard `--ngaf-chat-*` token system. To adjust the launcher position:
+
+```css
+chat-popup {
+  --ngaf-chat-launcher-offset-x: 1.5rem;
+  --ngaf-chat-launcher-offset-y: 1.5rem;
+}
+```
+
+See [Theming](/docs/chat/guides/theming) for the full token reference.