@aparte/angular 0.24.0 → 0.25.0

package/dist/fesm2022/aparte-angular.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, makeEnvironmentProviders, provideAppInitializer, DestroyRef, effect, ElementRef, signal, computed, output, numberAttribute, booleanAttribute, ViewChildren, ViewChild, Input, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, Renderer2, Directive, EventEmitter, HostListener, Output } from '@angular/core';
-import { AparteClient, aparteGlobalConfig, isAwaitingReply, uuid, AparteChatHost, APARTE_DEFAULT_UI_EVENTS, applyElementProps, AparteConversationManager } from '@aparte/core';
+import { InjectionToken, inject, Injectable, makeEnvironmentProviders, provideAppInitializer, DestroyRef, TemplateRef, Directive, effect, untracked, afterNextRender, ElementRef, Injector, PLATFORM_ID, input, linkedSignal, booleanAttribute, signal, computed, numberAttribute, contentChild, output, ViewChildren, ViewChild, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, ViewContainerRef, Renderer2, Input, EventEmitter, HostListener, Output } from '@angular/core';
+import { AparteClient, aparteGlobalConfig, isAwaitingReply, releaseDeferredHydration, uuid, AparteChatHost, defineMountedToolRenderer, defineMountedSegmentRenderer, overrideSegmentRenderer, APARTE_DEFAULT_UI_EVENTS, applyElementProps, AparteConversationManager } from '@aparte/core';
 export { aparteGlobalConfig } from '@aparte/core';
-import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 
 /**
  * Injection token for AparteClient configuration. Provided by `provideAparte()`;
@@ -210,7 +210,37 @@ function provideAparte(options = {}) {
 }
 
 /**
- * AparteChatComponent — Angular 19 Wrapper
+ * Marks the template `<aparte-chat>` draws each message with, in place of
+ * `<aparte-chat-bubble>`: write it as content of the chat, the message as `$implicit`.
+ *
+ * ```html
+ * <aparte-chat [messages]="messages">
+ *   <ng-template aparteBubble let-message>
+ *     <app-bubble [message]="message" />
+ *   </ng-template>
+ * </aparte-chat>
+ * ```
+ *
+ * The same thing as passing a `TemplateRef` to `[bubbleTemplate]`, written where Angular
+ * developers write a per-item template. When both are given, `[bubbleTemplate]` wins.
+ * The built-in action bar (retry, edit, the version picker) belongs to the native bubble;
+ * a template of yours owns whatever it wires.
+ */
+class AparteBubbleDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteBubbleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: AparteBubbleDirective, isStandalone: true, selector: "ng-template[aparteBubble]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteBubbleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[aparteBubble]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * AparteChatComponent — the Angular wrapper (19.2 to 21, zone or zoneless)
  *
  * Standalone component wrapping aparté Web Components with Angular Signals.
  * The streaming / branch-navigation / host-method orchestration (orphan-stream
@@ -232,42 +262,83 @@ class AparteChatComponent {
             // bubbles `bubbleRefs.changes` hid the divergence; under a custom
             // `[bubbleTemplate]` that query never fires and this was the only path.
             this.messages();
-            if (this._syncRafId !== null)
+            // A server render has no frame to wait for and no host to sync.
+            if (!this._isBrowser || this._syncRafId !== null)
                 return;
             this._syncRafId = requestAnimationFrame(() => {
                 this._syncRafId = null;
                 this._host?.syncBubbles();
             });
         });
+        // A parent that empties [messages] starts a new conversation: the host lets go of
+        // its render cache then — the same rule React, Vue and Svelte apply.
+        effect(() => {
+            const next = this.messagesInput();
+            // An echo of the chat's own emptied list is not a parent starting over.
+            if (next.length === 0 && !this._emitted.has(next))
+                untracked(() => this._host?.clearRenderCache());
+        });
+        // [conversationId] drives the host; an echo of the id the host already holds
+        // (e.g. the one it just created and reported) is a no-op.
+        effect(() => {
+            const next = this.conversationIdInput() ?? null;
+            untracked(() => {
+                if (next === this._conversationId)
+                    return;
+                this._conversationId = next;
+                if (this._host)
+                    void this._host.setConversationId(next);
+            });
+        });
+        // The host touches the DOM and the custom elements: browser only, never in a server
+        // render, where there is no element to drive. Built in ngAfterViewInit (below), so a
+        // parent's own ngAfterViewInit, which runs after it, can already call the API; this
+        // render hook is the fallback, and does nothing once the host exists.
+        afterNextRender(() => this._createHost());
+    }
+    ngAfterViewInit() {
+        if (this._isBrowser)
+            this._createHost();
     }
     elementRef = inject(ElementRef);
+    _injector = inject(Injector);
+    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     /**
      * Template bridge to core's shared `isAwaitingReply` (an Angular template can't
      * call an imported function). One rule for the four wrappers and core itself,
      * so "is this bubble in flight" can't drift between them.
      */
     awaitingReply = isAwaitingReply;
-    // ── Input Signals ────────────────────────────────────────────────────────
-    /** Messages to display */
-    set messagesInput(val) {
-        this.messages.set(val);
-        // When messages are cleared (new conversation), reset the host's render cache
-        // so the next conversation starts clean — same as React/Vue/Svelte do. (The
-        // viewport's own clearMessages() is @deprecated in core and only clears its
-        // repo; the host's clearAll() path already owns the real teardown.)
-        if (val.length === 0)
-            this._host?.clearRenderCache();
-    }
-    messages = signal([]);
+    // ── Inputs ───────────────────────────────────────────────────────────────
+    //
+    // Signal inputs under the same public names as before (`[messages]`, `disabled`,
+    // `centerWhenEmpty`…), so no template changes. Where the chat also writes a value
+    // itself (the list, the typing line), the input feeds a `linkedSignal`: a parent write
+    // resets it, the chat's own writes move it, and neither emits — `messagesChange` is
+    // emitted by the host's report only, never by a `set` (which is why this is not a
+    // `model()`: a model emits on every write, and an optimistic append must stay silent).
+    /** Messages to display. Two-way: `[(messages)]`, with `(messagesChange)` reporting the chat's own changes. */
+    messagesInput = input([], { alias: 'messages' });
+    /** Every list the host reported — read only by the render-cache rule below. */
+    _emitted = new WeakSet();
+    /**
+     * Under `[(messages)]` each report comes back through the input — possibly an EARLIER one,
+     * after the chat appended without reporting (an optimistic append, or core's append right
+     * after a flush) — and an echo is not the parent's word: it keeps the local list. The host
+     * tells them apart (`takeEcho`), the rule React, Vue and Svelte apply, so a list the parent
+     * restores later (a reopened conversation, an undo) is applied. Before the host exists
+     * nothing was reported, so the input is taken as it is.
+     */
+    messages = linkedSignal({
+        source: this.messagesInput,
+        computation: (next, previous) => (previous && this._host?.takeEcho(next) ? previous.value : next),
+    });
     /** Input placeholder text */
-    set placeholderInput(val) { this.placeholder.set(val); }
-    placeholder = signal('Type a message...');
+    placeholder = input('Type a message...');
     /** Whether the input is disabled */
-    set disabledInput(val) { this.disabled.set(val); }
-    disabled = signal(false);
+    disabled = input(false, { transform: booleanAttribute });
     /** When false, Shift+Enter submits and a bare Enter inserts a newline. */
-    set submitOnEnterInput(val) { this.submitOnEnter.set(val); }
-    submitOnEnter = signal(true);
+    submitOnEnter = input(true, { transform: booleanAttribute });
     /**
      * Opt in to the "centered composer when empty" layout: the composer sits
      * vertically centered with the `[slot='empty-state']` content above it while
@@ -275,23 +346,29 @@ class AparteChatComponent {
      * Off by default — additive (adds the `--auto-center` modifier + a
      * `data-aparte-empty` attribute the shipped `aparte.css` recipe keys off).
      */
-    set centerWhenEmptyInput(val) { this.centerWhenEmpty.set(val); }
-    centerWhenEmpty = signal(false);
+    centerWhenEmpty = input(false, { transform: booleanAttribute });
     /**
      * The conversation is on its way: the viewport draws two skeleton turns, the empty
      * state stays off and the composer is disabled until it lands. The conversation
      * controller sets this itself while it fetches through your adapter's `loadFull()`;
      * the input is for a wait of your own. Off by default.
      */
-    set loadingInput(val) { this.loading.set(val); }
-    loading = signal(false);
+    loading = input(false, { transform: booleanAttribute });
     /** The controller's wait (a conversation fetched through the adapter). */
     hostLoading = signal(false);
     waiting = computed(() => this.loading() || this.hostLoading());
     /** Bumped on every config change, so the two locale strings below follow a language switch under OnPush. */
     _localeTick = signal(0);
+    /**
+     * True until the host is built — on the server always, and in the browser only while Angular
+     * hydrates the server's HTML: the host element is then the one the server sent, still carrying
+     * the attribute. A client-only render holds nothing, so a component projected into the empty
+     * state (built in an @if, after the host binding) talks to live elements in its own
+     * ngAfterViewInit, which runs before this component's.
+     */
+    hydrating = signal(!this._isBrowser || this.elementRef.nativeElement.hasAttribute('defer-hydration'));
     _unsubscribeLocale;
-    get loadingText() { this._localeTick(); return (this.config ?? aparteGlobalConfig).t('loadingConversation'); }
+    get loadingText() { this._localeTick(); return (this.config() ?? aparteGlobalConfig).t('loadingConversation'); }
     /**
      * Class(es) merged onto the INNER `.aparte-chat-container`, not onto this
      * component's own `<aparte-chat>` host.
@@ -304,11 +381,12 @@ class AparteChatComponent {
      * selector on Angular alone. This input is that parity. Additive: the recipe's
      * own classes stay.
      */
-    set containerClassInput(val) { this.containerClass.set(val ?? ''); }
-    containerClass = signal('');
+    containerClass = input('', { alias: 'containerClass', transform: (val) => val ?? '' });
     /** Inline style for the same div — a string or a `{ prop: value }` map. */
-    set containerStyleInput(val) { this.containerStyle.set(val ?? null); }
-    containerStyle = signal(null);
+    containerStyle = input(null, {
+        alias: 'containerStyle',
+        transform: (val) => val ?? null,
+    });
     /**
      * Overlay the composer on the transcript (the ChatGPT anatomy): the scroll
      * surface spans the whole column, the scrollbar runs edge to edge, and the
@@ -317,8 +395,7 @@ class AparteChatComponent {
      * core's recipe and the viewport's measurement both key on the attribute
      * there. Read when the viewport mounts.
      */
-    set overlayComposerInput(val) { this.overlayComposer.set(val); }
-    overlayComposer = signal(false);
+    overlayComposer = input(false, { transform: booleanAttribute });
     /**
      * Add the file picker + chips strip to the default composer shell. **Off by
      * default**, because the capability needs a host that consumes the files: an
@@ -328,8 +405,7 @@ class AparteChatComponent {
      * project a `[slot='composer']` (drop `<aparte-composer-add-attachment>` and
      * `<aparte-composer-attachments>` in it yourself).
      */
-    set attachmentsInput(val) { this.attachments.set(val); }
-    attachments = signal(false);
+    attachments = input(false, { transform: booleanAttribute });
     /**
      * Render the `<aparte-elicitation>` presenter inside the host — on by default, as
      * it is in `<aparte-chat>`: the built-in approval gate and `requestUserInput()`
@@ -337,51 +413,45 @@ class AparteChatComponent {
      * when you mount a presenter of your own (`setElicitationPresenter`) or place the
      * element yourself.
      */
-    set elicitationInput(val) { this.elicitation.set(val); }
-    elicitation = signal(true);
-    /** Whether the assistant is currently typing/streaming */
-    set isTypingInput(val) { this.isTyping.set(val); }
-    isTyping = signal(false);
+    elicitation = input(true, { transform: booleanAttribute });
+    /** Whether the assistant is currently typing/streaming. The host turns it off on the first token. */
+    isTypingInput = input(false, { alias: 'isTyping', transform: booleanAttribute });
+    isTyping = linkedSignal(() => this.isTypingInput());
     /** Text to show in the typing status */
-    set typingTextInput(val) { this.typingText.set(val); }
-    typingText = signal(undefined);
+    typingText = input(undefined);
     /** The status line's word: the input, else the locale's, like the rest of the chat. */
-    get typingLabel() { this._localeTick(); return this.typingText() ?? (this.config ?? aparteGlobalConfig).t('typing'); }
-    /** Duration in ms to freeze spacer recalculation after a conversation swap. */
-    layoutTransitionMs = 0;
+    get typingLabel() { this._localeTick(); return this.typingText() ?? (this.config() ?? aparteGlobalConfig).t('typing'); }
+    /** Duration in ms to freeze spacer recalculation after a conversation swap. Read when the host is created. */
+    layoutTransitionMs = input(0, { transform: numberAttribute });
     /**
      * Active conversation id. When provided, the host attaches an
      * `AparteConversationController` that loads/persists messages via the
      * `AparteConversationManager` registered in `aparteGlobalConfig`. Setting a different id
      * mid-stream aborts the previous request; `null` deselects.
      */
-    set conversationIdInput(val) {
-        const next = val ?? null;
-        if (next === this._conversationId)
-            return;
-        this._conversationId = next;
-        if (this._host)
-            void this._host.setConversationId(next);
-    }
+    conversationIdInput = input(undefined, { alias: 'conversationId' });
     _conversationId = null;
     /**
      * Instance {@link AparteConfig} for this chat. When set, aparté components
      * inside resolve THIS config instead of `aparteGlobalConfig`, so
      * several independently-configured chats can coexist on one page. Omit for the
-     * global config. Read once in `ngAfterViewInit` when the host is created.
+     * global config. Read once, when the host is created after the first render.
      */
-    config;
+    config = input(undefined);
     /**
      * Render your OWN element per message in place of `<aparte-chat-bubble>`.
-     * Opt-in — provide a `<ng-template let-message>` and pass its ref. Driven by
-     * the reactive `messages()` signal, so it updates live during streaming.
-     * The built-in action bar (retry/edit/branch) belongs to the native bubble;
-     * a custom bubble owns whatever it wires.
+     * Opt-in — provide a `<ng-template let-message>` and pass its ref, or write the
+     * template as content with {@link AparteBubbleDirective} (`<ng-template aparteBubble
+     * let-message>`); this input wins when both are given. Driven by the reactive
+     * `messages()` signal, so it updates live during streaming. The built-in action bar
+     * (retry/edit/branch) belongs to the native bubble; a custom bubble owns whatever it wires.
      * @example
      * <aparte-chat [bubbleTemplate]="tpl" />
      * <ng-template #tpl let-message>{{ message.content }}</ng-template>
      */
-    bubbleTemplate;
+    bubbleTemplate = input(undefined);
+    /** The `<ng-template aparteBubble>` written as content, if any. */
+    bubbleDirective = contentChild(AparteBubbleDirective);
     // ── Outputs ────────────────────────────────────────────────────────────
     /**
      * User submitted a message from the composer. It is **appended to the thread
@@ -415,14 +485,21 @@ class AparteChatComponent {
     isStreaming = computed(() => this._streamingId() !== null);
     /** rAF id used to coalesce rapid signal updates during streaming */
     _syncRafId = null;
-    /** The framework-agnostic chat-host orchestrator (created in ngAfterViewInit). */
+    /** The framework-agnostic chat-host orchestrator (created after the first render, in the browser). */
     _host;
     _unbindHost;
     /** QueryList.changes subscription — released in ngOnDestroy so SPA route
      *  churn doesn't leak a live subscription per mount. */
     _bubbleRefsSub;
-    ngAfterViewInit() {
-        this._unsubscribeLocale = (this.config ?? aparteGlobalConfig).subscribe(() => this._localeTick.update((n) => n + 1));
+    /** Set by ngOnDestroy: an afterNextRender that lands after a destroy must not build a host. */
+    _destroyed = false;
+    _createHost() {
+        if (this._destroyed || this._host)
+            return;
+        // The elements a server render left waiting are upgraded first: the host talks to them.
+        releaseDeferredHydration(this.elementRef.nativeElement);
+        this.hydrating.set(false);
+        this._unsubscribeLocale = (this.config() ?? aparteGlobalConfig).subscribe(() => this._localeTick.update((n) => n + 1));
         const host = this.elementRef.nativeElement;
         // Ensure a stable id so aparte-composer can reference the host via `target`,
         // letting AparteClient find it without DOM traversal across re-renders.
@@ -437,25 +514,29 @@ class AparteChatComponent {
             viewport: this.viewportRef?.nativeElement ?? null,
             getMessages: () => this.messages(),
             setMessages: (msgs) => this.messages.set(msgs),
-            onMessagesChange: (msgs) => this.messagesChange.emit(msgs),
+            onMessagesChange: (msgs) => {
+                this._emitted.add(msgs);
+                this.messagesChange.emit(msgs);
+            },
             onMessageAppended: (msg) => this.messageAppended.emit(msg),
             onTypingChange: (typing) => { this.isTyping.set(typing); this.typingChange.emit(typing); },
             onStreamingChange: (id) => this._streamingId.set(id),
             onLoadingChange: (on) => this.hostLoading.set(on),
-            // Sibling-info / deferred work runs after Angular has re-rendered.
-            afterRender: (cb) => { setTimeout(cb, 0); },
+            // Sibling-info / deferred work runs after Angular has re-rendered — Angular's
+            // own hook for exactly that, which also holds under zoneless.
+            afterRender: (cb) => { afterNextRender(cb, { injector: this._injector }); },
             resetComposer: () => {
                 this.inputRef?.nativeElement?.reset?.();
             },
         };
         this._host = new AparteChatHost(binding, {
-            layoutTransitionMs: this.layoutTransitionMs,
+            layoutTransitionMs: this.layoutTransitionMs(),
             conversationId: this._conversationId,
             onConversationCreated: (id) => {
                 this._conversationId = id;
                 this.conversationCreated.emit(id);
             },
-            config: this.config,
+            config: this.config(),
         });
         this._unbindHost = this._host.bind();
         // Custom bubble actions bubble to the host as `aparte-action`; surface them as
@@ -470,6 +551,7 @@ class AparteChatComponent {
         this.action.emit(event.detail);
     };
     ngOnDestroy() {
+        this._destroyed = true;
         this._unsubscribeLocale?.();
         this._unsubscribeLocale = undefined;
         if (this._syncRafId !== null) {
@@ -641,7 +723,7 @@ class AparteChatComponent {
         this.messageSent.emit(detail);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AparteChatComponent, isStandalone: true, selector: "aparte-chat", inputs: { messagesInput: ["messages", "messagesInput"], placeholderInput: ["placeholder", "placeholderInput"], disabledInput: ["disabled", "disabledInput", booleanAttribute], submitOnEnterInput: ["submitOnEnter", "submitOnEnterInput", booleanAttribute], centerWhenEmptyInput: ["centerWhenEmpty", "centerWhenEmptyInput", booleanAttribute], loadingInput: ["loading", "loadingInput", booleanAttribute], containerClassInput: ["containerClass", "containerClassInput"], containerStyleInput: ["containerStyle", "containerStyleInput"], overlayComposerInput: ["overlayComposer", "overlayComposerInput", booleanAttribute], attachmentsInput: ["attachments", "attachmentsInput", booleanAttribute], elicitationInput: ["elicitation", "elicitationInput", booleanAttribute], isTypingInput: ["isTyping", "isTypingInput", booleanAttribute], typingTextInput: ["typingText", "typingTextInput"], layoutTransitionMs: ["layoutTransitionMs", "layoutTransitionMs", numberAttribute], conversationIdInput: ["conversationId", "conversationIdInput"], config: "config", bubbleTemplate: "bubbleTemplate" }, outputs: { messageSent: "messageSent", action: "action", messagesChange: "messagesChange", messageAppended: "messageAppended", typingChange: "typingChange", conversationCreated: "conversationCreated" }, host: { attributes: { "framework-managed": "" } }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }, { propertyName: "bubbleRefs", predicate: ["bubble"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AparteChatComponent, isStandalone: true, selector: "aparte-chat", inputs: { messagesInput: { classPropertyName: "messagesInput", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, submitOnEnter: { classPropertyName: "submitOnEnter", publicName: "submitOnEnter", isSignal: true, isRequired: false, transformFunction: null }, centerWhenEmpty: { classPropertyName: "centerWhenEmpty", publicName: "centerWhenEmpty", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, containerStyle: { classPropertyName: "containerStyle", publicName: "containerStyle", isSignal: true, isRequired: false, transformFunction: null }, overlayComposer: { classPropertyName: "overlayComposer", publicName: "overlayComposer", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, elicitation: { classPropertyName: "elicitation", publicName: "elicitation", isSignal: true, isRequired: false, transformFunction: null }, isTypingInput: { classPropertyName: "isTypingInput", publicName: "isTyping", isSignal: true, isRequired: false, transformFunction: null }, typingText: { classPropertyName: "typingText", publicName: "typingText", isSignal: true, isRequired: false, transformFunction: null }, layoutTransitionMs: { classPropertyName: "layoutTransitionMs", publicName: "layoutTransitionMs", isSignal: true, isRequired: false, transformFunction: null }, conversationIdInput: { classPropertyName: "conversationIdInput", publicName: "conversationId", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, bubbleTemplate: { classPropertyName: "bubbleTemplate", publicName: "bubbleTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSent: "messageSent", action: "action", messagesChange: "messagesChange", messageAppended: "messageAppended", typingChange: "typingChange", conversationCreated: "conversationCreated" }, host: { attributes: { "framework-managed": "" }, properties: { "attr.defer-hydration": "hydrating() ? '' : null" } }, queries: [{ propertyName: "bubbleDirective", first: true, predicate: AparteBubbleDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }, { propertyName: "bubbleRefs", predicate: ["bubble"], descendants: true }], ngImport: i0, template: `
     <div
       class="aparte-chat-container"
       [class]="containerClass()"
@@ -668,11 +750,12 @@ class AparteChatComponent {
           <ng-content select="[slot='empty-state']"></ng-content>
         }
         @for (message of messages(); track message.id) {
-          @if (bubbleTemplate) {
-            <!-- Render your OWN element per message; driven by the reactive
-                 messages() signal so it streams live. -->
+          @if (bubbleTemplate() || bubbleDirective()) {
+            <!-- Render your OWN element per message ([bubbleTemplate], else an
+                 <ng-template aparteBubble> written as content); driven by the
+                 reactive messages() signal so it streams live. -->
             <ng-container
-              [ngTemplateOutlet]="bubbleTemplate"
+              [ngTemplateOutlet]="bubbleTemplate() ?? bubbleDirective()?.template ?? null"
               [ngTemplateOutletContext]="{ $implicit: message }"
             ></ng-container>
           } @else {
@@ -743,7 +826,7 @@ class AparteChatComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aparte-chat', standalone: true, imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, host: { 'framework-managed': '' }, template: `
+            args: [{ selector: 'aparte-chat', standalone: true, imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, host: { 'framework-managed': '', '[attr.defer-hydration]': "hydrating() ? '' : null" }, template: `
     <div
       class="aparte-chat-container"
       [class]="containerClass()"
@@ -770,11 +853,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
           <ng-content select="[slot='empty-state']"></ng-content>
         }
         @for (message of messages(); track message.id) {
-          @if (bubbleTemplate) {
-            <!-- Render your OWN element per message; driven by the reactive
-                 messages() signal so it streams live. -->
+          @if (bubbleTemplate() || bubbleDirective()) {
+            <!-- Render your OWN element per message ([bubbleTemplate], else an
+                 <ng-template aparteBubble> written as content); driven by the
+                 reactive messages() signal so it streams live. -->
             <ng-container
-              [ngTemplateOutlet]="bubbleTemplate"
+              [ngTemplateOutlet]="bubbleTemplate() ?? bubbleDirective()?.template ?? null"
               [ngTemplateOutletContext]="{ $implicit: message }"
             ></ng-container>
           } @else {
@@ -842,56 +926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       </aparte-composer>
     </div>
   `, styles: [":host{display:block;width:100%;height:100%}.aparte-chat-container{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}aparte-chat-viewport{flex:1;min-height:0}aparte-composer{flex-shrink:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { messagesInput: [{
-                type: Input,
-                args: ['messages']
-            }], placeholderInput: [{
-                type: Input,
-                args: ['placeholder']
-            }], disabledInput: [{
-                type: Input,
-                args: [{ alias: 'disabled', transform: booleanAttribute }]
-            }], submitOnEnterInput: [{
-                type: Input,
-                args: [{ alias: 'submitOnEnter', transform: booleanAttribute }]
-            }], centerWhenEmptyInput: [{
-                type: Input,
-                args: [{ alias: 'centerWhenEmpty', transform: booleanAttribute }]
-            }], loadingInput: [{
-                type: Input,
-                args: [{ alias: 'loading', transform: booleanAttribute }]
-            }], containerClassInput: [{
-                type: Input,
-                args: ['containerClass']
-            }], containerStyleInput: [{
-                type: Input,
-                args: ['containerStyle']
-            }], overlayComposerInput: [{
-                type: Input,
-                args: [{ alias: 'overlayComposer', transform: booleanAttribute }]
-            }], attachmentsInput: [{
-                type: Input,
-                args: [{ alias: 'attachments', transform: booleanAttribute }]
-            }], elicitationInput: [{
-                type: Input,
-                args: [{ alias: 'elicitation', transform: booleanAttribute }]
-            }], isTypingInput: [{
-                type: Input,
-                args: [{ alias: 'isTyping', transform: booleanAttribute }]
-            }], typingTextInput: [{
-                type: Input,
-                args: ['typingText']
-            }], layoutTransitionMs: [{
-                type: Input,
-                args: [{ alias: 'layoutTransitionMs', transform: numberAttribute }]
-            }], conversationIdInput: [{
-                type: Input,
-                args: ['conversationId']
-            }], config: [{
-                type: Input
-            }], bubbleTemplate: [{
-                type: Input
-            }], viewportRef: [{
+        }], ctorParameters: () => [], propDecorators: { viewportRef: [{
                 type: ViewChild,
                 args: ['viewport']
             }], inputRef: [{
@@ -902,6 +937,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 args: ['bubble']
             }] } });
 
+/**
+ * Create the template's view where it is declared — so its injector, and what your app
+ * provides there, is the declaration's — then move its nodes into the element core gave.
+ * The same move the CDK's portal outlet makes. `update` hands the view the next state and
+ * checks it at once, which is what a zoneless app needs.
+ */
+function mountTemplate(container, template, host, view) {
+    const ref = container.createEmbeddedView(template, { $implicit: view });
+    ref.detectChanges();
+    for (const node of ref.rootNodes)
+        host.appendChild(node);
+    return {
+        update: (next) => {
+            ref.context.$implicit = next;
+            ref.detectChanges();
+        },
+        destroy: () => { ref.destroy(); },
+    };
+}
+/**
+ * Draws a tool call with your own template, for as long as the template is in the page.
+ *
+ * ```html
+ * <ng-template aparteToolUI="get_weather" let-tool>
+ *   <app-weather-card [tool]="tool" />
+ * </ng-template>
+ * ```
+ *
+ * `let-tool` is an `AparteToolCallView`; its `input` is the model's arguments, `unknown` until
+ * the card narrows it — give the card the view (`input.required<AparteToolCallView>()`) and type
+ * its arguments there.
+ *
+ * Every `get_weather` call is drawn with the template, the call's view as `$implicit`, and
+ * given back to core's row when the template leaves. The view is created where you declare
+ * the template, so the components in it inject what your app provides there. Underneath it is
+ * core's `overrideToolRenderer` + `defineMountedToolRenderer`; nothing is declared in a server
+ * render, and the cards are drawn in the browser.
+ */
+class AparteToolUIDirective {
+    /** The tool this draws: a name, a `RegExp`, or `'*'` for every tool. */
+    name = input.required({ alias: 'aparteToolUI' });
+    /** The config to declare it on. Defaults to the global one. */
+    config = input(undefined, { alias: 'aparteToolUIConfig' });
+    template = inject(TemplateRef);
+    container = inject(ViewContainerRef);
+    constructor() {
+        const browser = isPlatformBrowser(inject(PLATFORM_ID));
+        effect((onCleanup) => {
+            const name = this.name();
+            const target = this.config() ?? aparteGlobalConfig;
+            if (!browser)
+                return;
+            const restore = untracked(() => target.overrideToolRenderer(name, defineMountedToolRenderer((host, view) => mountTemplate(this.container, this.template, host, view))));
+            onCleanup(restore);
+        });
+    }
+    /** Types `let-tool` in a strict template. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteToolUIDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: AparteToolUIDirective, isStandalone: true, selector: "ng-template[aparteToolUI]", inputs: { name: { classPropertyName: "name", publicName: "aparteToolUI", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "aparteToolUIConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteToolUIDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[aparteToolUI]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Draws a segment type with your own template — one your stream emits, or a built-in such as
+ * `code` — the segment as `$implicit`. Taking the last declaration off a built-in type gives it
+ * back to core's renderer.
+ *
+ * ```html
+ * <ng-template aparteSegmentUI="chart" let-segment>
+ *   <app-chart [segment]="segment" />
+ * </ng-template>
+ * ```
+ *
+ * `let-segment` is the base segment with its own fields: the component it is handed to types it.
+ */
+class AparteSegmentUIDirective {
+    /** The segment `type` this draws. */
+    type = input.required({ alias: 'aparteSegmentUI' });
+    /** The config to declare it on. Defaults to the global one. */
+    config = input(undefined, { alias: 'aparteSegmentUIConfig' });
+    template = inject(TemplateRef);
+    container = inject(ViewContainerRef);
+    constructor() {
+        const browser = isPlatformBrowser(inject(PLATFORM_ID));
+        effect((onCleanup) => {
+            const type = this.type();
+            const target = this.config();
+            if (!browser)
+                return;
+            const restore = untracked(() => {
+                const renderer = defineMountedSegmentRenderer(type, (host, segment) => mountTemplate(this.container, this.template, host, segment));
+                return target ? overrideSegmentRenderer(renderer, target) : overrideSegmentRenderer(renderer);
+            });
+            onCleanup(restore);
+        });
+    }
+    // The segment's shape is the app's: `let-segment` is typed as the base, narrow it in a pipe
+    // or a component input.
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteSegmentUIDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: AparteSegmentUIDirective, isStandalone: true, selector: "ng-template[aparteSegmentUI]", inputs: { type: { classPropertyName: "type", publicName: "aparteSegmentUI", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "aparteSegmentUIConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteSegmentUIDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[aparteSegmentUI]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * AparteUiComponent - Universal UI Proxy
  *
@@ -964,6 +1119,13 @@ class AparteUiComponent {
     // ─────────────────────────────────────────────────────────────
     /** The dynamically created Web Component element */
     element = null;
+    /**
+     * On a server the element is not built: it would be serialized into the HTML without its
+     * props or listeners, hydration would keep it, and the browser would append its own beside
+     * it — two counters, two pickers. React, Vue and Svelte build theirs in an effect or onMount,
+     * which a server never runs.
+     */
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     /** Cleanup functions for event listeners */
     eventCleanups = [];
     /** Joined key of the bound event set, so a fresh inline `[events]` array
@@ -1000,7 +1162,7 @@ class AparteUiComponent {
         return (this.events ?? APARTE_DEFAULT_UI_EVENTS).join('|');
     }
     createElement() {
-        if (!this.name)
+        if (!this.isBrowser || !this.name)
             return;
         // Create the custom element
         this.element = this.renderer.createElement(this.name);
@@ -1584,6 +1746,8 @@ class AparteConversationListDirective extends AparteElementBase {
     set loading(v) { this.write('loading', v); }
     /** Let the list finish the gesture: rename, pin, unpin, archive, unarchive and delete are performed on the conversation manager registered with `setConversationManager()`, instead of leaving you six listeners to write. The event still fires first, and `preventDefault()` on it takes the gesture back. Off by default, and selecting stays yours either way. */
     set manage(v) { this.write('manage', v); }
+    /** Set the list of conversations to display. Triggers a re-render. */
+    set conversations(v) { this.write('conversations', v); }
     /** A row's title was activated; the host loads that conversation. */
     conversationSelect = new EventEmitter();
     /** A rename was committed with a new, non-empty title. Cancelable: `preventDefault()` takes the gesture back from `manage`. Angular: this Output emits the detail, so preventDefault() is not on it — bind the DOM event for that: (aparte-conversation-rename)="$event.preventDefault()". */
@@ -1606,7 +1770,7 @@ class AparteConversationListDirective extends AparteElementBase {
     onConversationUnarchive(e) { this.conversationUnarchive.emit(e.detail); }
     onConversationDelete(e) { this.conversationDelete.emit(e.detail); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteConversationListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.25", type: AparteConversationListDirective, isStandalone: true, selector: "aparte-conversation-list", inputs: { activeId: "activeId", flat: ["flat", "flat", booleanAttribute], loading: ["loading", "loading", booleanAttribute], manage: ["manage", "manage", booleanAttribute] }, outputs: { conversationSelect: "conversationSelect", conversationRename: "conversationRename", conversationPin: "conversationPin", conversationUnpin: "conversationUnpin", conversationArchive: "conversationArchive", conversationUnarchive: "conversationUnarchive", conversationDelete: "conversationDelete" }, host: { listeners: { "aparte-conversation-select": "onConversationSelect($event)", "aparte-conversation-rename": "onConversationRename($event)", "aparte-conversation-pin": "onConversationPin($event)", "aparte-conversation-unpin": "onConversationUnpin($event)", "aparte-conversation-archive": "onConversationArchive($event)", "aparte-conversation-unarchive": "onConversationUnarchive($event)", "aparte-conversation-delete": "onConversationDelete($event)" } }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.25", type: AparteConversationListDirective, isStandalone: true, selector: "aparte-conversation-list", inputs: { activeId: "activeId", flat: ["flat", "flat", booleanAttribute], loading: ["loading", "loading", booleanAttribute], manage: ["manage", "manage", booleanAttribute], conversations: "conversations" }, outputs: { conversationSelect: "conversationSelect", conversationRename: "conversationRename", conversationPin: "conversationPin", conversationUnpin: "conversationUnpin", conversationArchive: "conversationArchive", conversationUnarchive: "conversationUnarchive", conversationDelete: "conversationDelete" }, host: { listeners: { "aparte-conversation-select": "onConversationSelect($event)", "aparte-conversation-rename": "onConversationRename($event)", "aparte-conversation-pin": "onConversationPin($event)", "aparte-conversation-unpin": "onConversationUnpin($event)", "aparte-conversation-archive": "onConversationArchive($event)", "aparte-conversation-unarchive": "onConversationUnarchive($event)", "aparte-conversation-delete": "onConversationDelete($event)" } }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteConversationListDirective, decorators: [{
             type: Directive,
@@ -1622,6 +1786,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], manage: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], conversations: [{
+                type: Input
             }], conversationSelect: [{
                 type: Output
             }], conversationRename: [{
@@ -2167,5 +2333,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APARTE_CLIENT_OPTIONS, APARTE_CONFIG_TOKEN, APARTE_ELEMENT_DIRECTIVES, AparteAiService, AparteChatBubbleDirective, AparteChatComponent, AparteChatStatusDirective, AparteChatViewportDirective, AparteComposerActionDirective, AparteComposerAddAttachmentDirective, AparteComposerAttachmentsDirective, AparteComposerCancelDirective, AparteComposerDirective, AparteComposerInputDirective, AparteComposerSendDirective, AparteComposerToolbarDirective, AparteContextDirective, AparteConversationListDirective, AparteElicitationDirective, AparteIconDirective, AparteOptgroupDirective, AparteOptionDirective, AparteProgressSpinnerDirective, AparteScrollRailDirective, AparteSelectDirective, AparteSidebarDirective, AparteSplitDirective, AparteSuggestionsDirective, AparteUiComponent, ConversationManagerService, provideAparte };
+export { APARTE_CLIENT_OPTIONS, APARTE_CONFIG_TOKEN, APARTE_ELEMENT_DIRECTIVES, AparteAiService, AparteBubbleDirective, AparteChatBubbleDirective, AparteChatComponent, AparteChatStatusDirective, AparteChatViewportDirective, AparteComposerActionDirective, AparteComposerAddAttachmentDirective, AparteComposerAttachmentsDirective, AparteComposerCancelDirective, AparteComposerDirective, AparteComposerInputDirective, AparteComposerSendDirective, AparteComposerToolbarDirective, AparteContextDirective, AparteConversationListDirective, AparteElicitationDirective, AparteIconDirective, AparteOptgroupDirective, AparteOptionDirective, AparteProgressSpinnerDirective, AparteScrollRailDirective, AparteSegmentUIDirective, AparteSelectDirective, AparteSidebarDirective, AparteSplitDirective, AparteSuggestionsDirective, AparteToolUIDirective, AparteUiComponent, ConversationManagerService, provideAparte };
 //# sourceMappingURL=aparte-angular.mjs.map