@aparte/angular 0.2.0-alpha.0

package/dist/fesm2022/aparte-angular.mjs

@@ -0,0 +1,1008 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, makeEnvironmentProviders, provideAppInitializer, DestroyRef, effect, ElementRef, signal, output, computed, numberAttribute, booleanAttribute, ViewChildren, ViewChild, Input, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, Renderer2 } from '@angular/core';
+import { AparteClient, AparteConfig, AparteChatHost, DEFAULT_UI_EVENTS, applyElementProps, ConversationManager } from '@aparte/core';
+export { AparteConfig } from '@aparte/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+/**
+ * Injection token for AparteClient configuration. Provided by `provideAparte()`;
+ * omit it and the service falls back to `{}`.
+ */
+const APARTE_CLIENT_OPTIONS = new InjectionToken('APARTE_CLIENT_OPTIONS');
+/**
+ * AparteAiService
+ *
+ * Angular service to bridge the UI events with AI Providers.
+ * Uses the agnostic `AparteClient` under the hood.
+ */
+class AparteAiService {
+    _clientOptions = inject(APARTE_CLIENT_OPTIONS, { optional: true });
+    _client = new AparteClient(this._clientOptions ?? {});
+    /**
+     * Start listening to `aparte-send` events globally.
+     * This connects the <aparte-chat> components to the AI Providers.
+     *
+     * `provideAparte()` calls this for you on app init (its `autoConnect`,
+     * on by default). Idempotent — a manual call on top of that is a no-op,
+     * so it stays the escape hatch when configuring without `provideAparte`.
+     */
+    connect() {
+        this._client.start();
+    }
+    /**
+     * Stop listening.
+     */
+    disconnect() {
+        this._client.stop();
+    }
+    /**
+     * Abort the current AI response and all active tool calls.
+     */
+    abort() {
+        this._client.abort();
+    }
+    ngOnDestroy() {
+        this.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteAiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteAiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteAiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/** Holds the resolved aparté config, for consumers that want to inject it. */
+const APARTE_CONFIG_TOKEN = new InjectionToken('APARTE_CONFIG');
+async function loadIconPlugin(plugin) {
+    if (typeof plugin === 'object' && plugin !== null) {
+        AparteConfig.setIconProvider(plugin);
+        return;
+    }
+    try {
+        await plugin();
+    }
+    catch (err) {
+        console.warn('[aparte] Failed to load icon plugin', err);
+    }
+}
+async function loadSkeletonPlugin(plugin) {
+    if (typeof plugin === 'object' && plugin !== null) {
+        AparteConfig.setSkeletonProvider(plugin);
+        return;
+    }
+    try {
+        await plugin();
+    }
+    catch (err) {
+        console.warn('[aparte] Failed to load skeleton plugin', err);
+    }
+}
+async function loadMarkdownPlugin(plugin) {
+    // A markdown provider takes the raw string; a loader takes nothing.
+    if (plugin.length >= 1) {
+        AparteConfig.setMarkdownProvider(plugin);
+        return;
+    }
+    try {
+        await plugin();
+    }
+    catch (err) {
+        console.warn('[aparte] Failed to load markdown plugin', err);
+    }
+}
+async function runLoader(loader, label) {
+    try {
+        await loader();
+    }
+    catch (err) {
+        console.warn(`[aparte] Failed to load ${label} plugin`, err);
+    }
+}
+async function loadPlugins(options) {
+    const plugins = options.plugins;
+    if (!plugins)
+        return;
+    const pending = [];
+    for (const action of plugins.actions ?? [])
+        pending.push(runLoader(action, 'action'));
+    if (plugins.icons)
+        pending.push(loadIconPlugin(plugins.icons));
+    if (plugins.skeleton)
+        pending.push(loadSkeletonPlugin(plugins.skeleton));
+    if (plugins.theme)
+        pending.push(runLoader(plugins.theme, 'theme'));
+    if (plugins.markdown)
+        pending.push(loadMarkdownPlugin(plugins.markdown));
+    await Promise.all(pending);
+}
+/** Reflect the theme mode on the document root. */
+function applyThemeMode(mode, destroyRef) {
+    if (mode !== 'auto') {
+        document.documentElement.setAttribute('data-aparte-theme', mode);
+        return;
+    }
+    const query = window.matchMedia('(prefers-color-scheme: dark)');
+    const onChange = (e) => {
+        document.documentElement.setAttribute('data-aparte-theme', e.matches ? 'dark' : 'light');
+    };
+    document.documentElement.setAttribute('data-aparte-theme', query.matches ? 'dark' : 'light');
+    query.addEventListener('change', onChange);
+    // Released with the environment injector, so repeated bootstraps (TestBed, a
+    // multi-instance embed) don't stack listeners on the media query forever.
+    destroyRef.onDestroy(() => query.removeEventListener('change', onChange));
+}
+/**
+ * Configure aparté for a standalone Angular app. Registers your AI providers,
+ * model config, locale and optional plugins on the global `AparteConfig`,
+ * provides {@link APARTE_CLIENT_OPTIONS} for {@link AparteAiService}, and
+ * starts the client (see `autoConnect`) — no manual
+ * `AparteAiService.connect()` needed.
+ *
+ * The components (`AparteChatComponent`, `AparteUiComponent`) are standalone and
+ * work WITHOUT this — it is config sugar. You can equally call `AparteConfig.*`
+ * yourself, exactly like the React/Vue/Svelte wrappers do.
+ *
+ * @example
+ * bootstrapApplication(App, {
+ *   providers: [
+ *     provideAparte({
+ *       providers: [createOpenAICompatProvider(presets.OPENROUTER)],
+ *       clientOptions: { keyResolver },
+ *     }),
+ *   ],
+ * });
+ */
+function provideAparte(options = {}) {
+    return makeEnvironmentProviders([
+        { provide: APARTE_CONFIG_TOKEN, useValue: options },
+        { provide: APARTE_CLIENT_OPTIONS, useValue: options.clientOptions ?? {} },
+        provideAppInitializer(async () => {
+            const destroyRef = inject(DestroyRef);
+            // inject() only works before the first await — grab the service now,
+            // connect at the end (after plugins) so the first send already sees
+            // markdown/action providers. SSR-safe: no listener without a window.
+            const ai = options.autoConnect !== false && typeof window !== 'undefined'
+                ? inject(AparteAiService)
+                : null;
+            if (options.providers?.length) {
+                AparteConfig.registerAIProvider(...options.providers);
+            }
+            if (options.modelConfig) {
+                AparteConfig.setModelConfig(options.modelConfig);
+            }
+            if (options.locale) {
+                AparteConfig.setLocale(options.locale);
+            }
+            await loadPlugins(options);
+            if (options.themeMode) {
+                applyThemeMode(options.themeMode, destroyRef);
+            }
+            ai?.connect();
+        }),
+    ]);
+}
+
+/**
+ * AparteChatComponent — Angular 19 Wrapper
+ *
+ * Standalone component wrapping aparté Web Components with Angular Signals.
+ * The streaming / branch-navigation / host-method orchestration (orphan-stream
+ * guard, lifecycle tracking, conversation lifecycle, bubble reconciliation)
+ * lives in the framework-agnostic `AparteChatHost` from `@aparte/core`; this
+ * component only owns the Angular-idiomatic surface (signals, template, DI) and
+ * binds the host over its `messages` signal.
+ */
+class AparteChatComponent {
+    constructor() {
+        // Reactive effect to reconcile bubbles when the messages signal updates.
+        // Debounced with requestAnimationFrame so rapid token bursts only trigger
+        // one sync per paint frame instead of N syncs for N tokens.
+        effect(() => {
+            const msgs = this.messages();
+            if (msgs.length > 0) {
+                if (this._syncRafId !== null)
+                    return;
+                this._syncRafId = requestAnimationFrame(() => {
+                    this._syncRafId = null;
+                    this._host?.syncBubbles();
+                });
+            }
+        });
+    }
+    elementRef = inject(ElementRef);
+    // ── 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([]);
+    /** Input placeholder text */
+    set placeholderInput(val) { this.placeholder.set(val); }
+    placeholder = signal('Type a message...');
+    /** Whether the input is disabled */
+    set disabledInput(val) { this.disabled.set(val); }
+    disabled = signal(false);
+    /** When false, Shift+Enter submits and a bare Enter inserts a newline. */
+    set submitOnEnterInput(val) { this.submitOnEnter.set(val); }
+    submitOnEnter = signal(true);
+    /**
+     * Opt in to the "centered composer when empty" layout: the composer sits
+     * vertically centered with the `[slot='empty-state']` content above it while
+     * the list is empty, then slides to the bottom on the first message (~0.3s).
+     * 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);
+    /** Whether the assistant is currently typing/streaming */
+    set isTypingInput(val) { this.isTyping.set(val); }
+    isTyping = signal(false);
+    /** Text to show in the typing status */
+    set typingTextInput(val) { this.typingText.set(val); }
+    typingText = signal('Assistant is thinking...');
+    /** Duration in ms to freeze spacer recalculation after a conversation swap. */
+    layoutTransitionMs = 0;
+    /**
+     * Active conversation id. When provided, the host attaches an
+     * `AparteConversationController` that loads/persists messages via the
+     * `ConversationManager` registered in `AparteConfig`. 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);
+    }
+    _conversationId = null;
+    /**
+     * Instance {@link AparteConfigClass} for this chat. When set, aparté components
+     * inside resolve THIS config instead of the global `AparteConfig` singleton, so
+     * several independently-configured chats can coexist on one page. Omit for the
+     * global config. Read once in `ngAfterViewInit` when the host is created.
+     */
+    config;
+    /**
+     * 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.
+     * @example
+     * <aparte-chat [bubbleTemplate]="tpl" />
+     * <ng-template #tpl let-message>{{ message.content }}</ng-template>
+     */
+    bubbleTemplate;
+    // ── Outputs ────────────────────────────────────────────────────────────
+    /**
+     * User submitted a message from the composer. It is **appended to the thread
+     * automatically** (optimistic UI) before this fires — do NOT add it again in
+     * the handler (uncontrolled → duplicates; controlled → mirror it into your
+     * own `[messages]`). For side-effects: scroll, analytics, send.
+     */
+    messageSent = output();
+    /**
+     * Emitted when a custom bubble action (registered via
+     * `AparteConfig.registerAction` with `zones: ['bubble']`) is clicked — a typed
+     * wrapper over the bubbling `aparte-action` DOM event. Switch on `$event.actionId`.
+     */
+    action = output();
+    /** Emitted when messages are updated internally (e.g. by AparteClient) */
+    messagesChange = output();
+    /** Emitted when a message is added internally (e.g. by appendMessage) */
+    messageAppended = output();
+    /** The typing/"thinking" indicator toggled (the host flips it off on the first streamed token). */
+    typingChange = output();
+    /** Emitted when the controller lazily creates a conversation on first send. */
+    conversationCreated = output();
+    // ── View Children ────────────────────────────────────────────────────────
+    viewportRef;
+    inputRef;
+    bubbleRefs;
+    // ── Private State ────────────────────────────────────────────────────────
+    /** Mirror of the host's streaming target id (drives `isStreaming`). */
+    _streamingId = signal(null);
+    /** Computed: is currently streaming */
+    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). */
+    _host;
+    _unbindHost;
+    /** QueryList.changes subscription — released in ngOnDestroy so SPA route
+     *  churn doesn't leak a live subscription per mount. */
+    _bubbleRefsSub;
+    ngAfterViewInit() {
+        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.
+        if (!host.id)
+            host.id = `aparte-chat-${crypto.randomUUID()}`;
+        const composerEl = this.inputRef?.nativeElement;
+        if (composerEl)
+            composerEl.setAttribute('target', host.id);
+        const binding = {
+            hostId: host.id,
+            host,
+            viewport: this.viewportRef?.nativeElement ?? null,
+            getMessages: () => this.messages(),
+            setMessages: (msgs) => this.messages.set(msgs),
+            onMessagesChange: (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),
+            // Sibling-info / deferred work runs after Angular has re-rendered.
+            afterRender: (cb) => { setTimeout(cb, 0); },
+            resetComposer: () => {
+                this.inputRef?.nativeElement?.reset?.();
+            },
+        };
+        this._host = new AparteChatHost(binding, {
+            layoutTransitionMs: this.layoutTransitionMs,
+            conversationId: this._conversationId,
+            onConversationCreated: (id) => {
+                this._conversationId = id;
+                this.conversationCreated.emit(id);
+            },
+            config: this.config,
+        });
+        this._unbindHost = this._host.bind();
+        // Custom bubble actions bubble to the host as `aparte-action`; surface them as
+        // the typed `action` output. (addEventListener, not @HostListener: Angular
+        // parses a colon in the event name as a `target:event` global target.)
+        host.addEventListener('aparte-action', this._onAction);
+        // Re-reconcile bubbles whenever Angular's @for materialises/destroys them.
+        this._host.syncBubbles();
+        this._bubbleRefsSub = this.bubbleRefs.changes.subscribe(() => this._host?.syncBubbles());
+    }
+    _onAction = (event) => {
+        this.action.emit(event.detail);
+    };
+    ngOnDestroy() {
+        if (this._syncRafId !== null) {
+            cancelAnimationFrame(this._syncRafId);
+            this._syncRafId = null;
+        }
+        this.elementRef.nativeElement.removeEventListener('aparte-action', this._onAction);
+        this._bubbleRefsSub?.unsubscribe();
+        this._bubbleRefsSub = undefined;
+        this._unbindHost?.();
+        this._unbindHost = undefined;
+        this._host = undefined;
+    }
+    // ── Public imperative API (delegates to the host) ──────────────────────────
+    /** Append a message optimistically. */
+    appendMessage(message) { this._host?.appendMessage(message); }
+    /** Atomic update for a message. */
+    updateMessage(messageId, updates) {
+        this._host?.updateMessage(messageId, updates);
+    }
+    /** Update the last message content (streaming text). */
+    updateLastMessage(content, options) {
+        this._host?.updateLastMessage(content, options);
+    }
+    /** Add a segment to the last message. */
+    addSegment(segment) { this._host?.addSegment(segment); }
+    /** Update a segment in the last message. */
+    updateSegment(segmentId, updates) {
+        this._host?.updateSegment(segmentId, updates);
+    }
+    /** Remove a transient segment. */
+    removeSegment(segmentId) { this._host?.removeSegment(segmentId); }
+    /** Append content to a segment in the last message. */
+    appendToSegment(segmentId, content) {
+        this._host?.appendToSegment(segmentId, content);
+    }
+    /** Read the current message list. */
+    getMessages() { return this._host?.getMessages() ?? this.messages(); }
+    /** Clear all messages + reset state. */
+    clearMessages() { this._host?.clearMessages(); }
+    /** Scroll the viewport to the latest message. */
+    scrollToBottom() {
+        this.viewportRef?.nativeElement?.scrollToBottom?.();
+    }
+    /**
+     * The `<aparte-chat-viewport>` element — for custom scroll handling, an
+     * IntersectionObserver, etc. Same `getViewport()` accessor on all four
+     * wrappers.
+     */
+    getViewport() { return this.viewportRef?.nativeElement ?? null; }
+    /** Focus the composer input. */
+    focusInput() {
+        this.inputRef?.nativeElement?.focus?.();
+    }
+    /** Create a new branch from a message (returns the new sibling index). */
+    addBranch(messageId) { return this._host?.addBranch(messageId) ?? 0; }
+    /** Add a sibling of an existing message (returns the new id). */
+    addSiblingOf(existingId, newMessage) {
+        return this._host?.addSiblingOf(existingId, newMessage) ?? null;
+    }
+    /** Remove a message and all descendants (edit flow). */
+    truncateFrom(messageId) { this._host?.truncateFrom(messageId); }
+    /** Keep up to and including a user message, drop later responses (retry). */
+    truncateResponsesAfter(userMessageId) {
+        this._host?.truncateResponsesAfter(userMessageId);
+    }
+    // ── Token streaming (cross-wrapper contract + Observable adapter) ──────────
+    /**
+     * Inject a token stream for LLM streaming. Takes the cross-wrapper
+     * `AsyncIterable<string>` contract (the exact call that works on
+     * React/Vue/Svelte) — or an Angular-idiomatic RxJS `Observable<string>`,
+     * adapted into the host's agnostic `streamTokens(AsyncIterable)` so the
+     * orphan-stream guard + id tracking stay in one place (the host).
+     */
+    async injectTokenStream(messageId, stream) {
+        if (!this._host)
+            return;
+        const tokens = Symbol.asyncIterator in stream
+            ? stream
+            : this._observableToAsyncIterable(stream);
+        await this._host.streamTokens(messageId, tokens);
+    }
+    /** Stop any active token stream. */
+    stopTokenStream() { this._host?.stopTokenStream(); }
+    /**
+     * Set the active conversation id imperatively — parity with the other
+     * wrappers' handles (the `conversationId` `@Input` remains the declarative
+     * path). Delegates to the host, which loads/persists via the registered
+     * `ConversationManager`.
+     */
+    setConversationId(id) {
+        return this._host?.setConversationId(id) ?? Promise.resolve();
+    }
+    _observableToAsyncIterable(stream) {
+        return {
+            [Symbol.asyncIterator]() {
+                const buffer = [];
+                let finished = false;
+                let failure = null;
+                let pending = null;
+                const settle = () => {
+                    if (!pending)
+                        return;
+                    if (failure !== null) {
+                        const p = pending;
+                        pending = null;
+                        p.reject(failure);
+                        return;
+                    }
+                    if (buffer.length) {
+                        const p = pending;
+                        pending = null;
+                        p.resolve({ value: buffer.shift(), done: false });
+                        return;
+                    }
+                    if (finished) {
+                        const p = pending;
+                        pending = null;
+                        p.resolve({ value: undefined, done: true });
+                    }
+                };
+                const sub = stream.subscribe({
+                    next: (v) => { buffer.push(v); settle(); },
+                    error: (e) => { failure = e; settle(); },
+                    complete: () => { finished = true; settle(); },
+                });
+                return {
+                    next() {
+                        if (failure !== null)
+                            return Promise.reject(failure);
+                        if (buffer.length) {
+                            return Promise.resolve({ value: buffer.shift(), done: false });
+                        }
+                        if (finished) {
+                            return Promise.resolve({ value: undefined, done: true });
+                        }
+                        return new Promise((resolve, reject) => { pending = { resolve, reject }; });
+                    },
+                    return() {
+                        sub.unsubscribe();
+                        // If a consumer is mid-`await next()` on an empty buffer (e.g. the
+                        // orphan-stream guard calling `return()` on stop/teardown), settle
+                        // that pending promise now with done:true — otherwise it hangs
+                        // forever, since unsubscribing means `next` and `complete` will
+                        // never fire again to resolve it.
+                        if (pending) {
+                            const p = pending;
+                            pending = null;
+                            p.resolve({ value: undefined, done: true });
+                        }
+                        finished = true;
+                        return Promise.resolve({ value: undefined, done: true });
+                    },
+                };
+            },
+        };
+    }
+    /** Handle aparte-send event from the composer Web Component. */
+    onAparteSend(event) {
+        const detail = event.detail;
+        // Smooth-scroll the next auto-scroll (when Angular adds the user bubble).
+        this.viewportRef?.nativeElement
+            ?.requestSmoothScroll?.();
+        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], 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: `
+    <div
+      class="aparte-chat-container"
+      [class.aparte-chat-container--auto-center]="centerWhenEmpty()"
+      [attr.data-aparte-empty]="centerWhenEmpty() && messages().length === 0 ? '' : null"
+    >
+      <aparte-chat-viewport #viewport framework-managed="">
+        @if (messages().length === 0) {
+          <!-- Welcome / placeholder shown inside the viewport while empty. -->
+          <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. -->
+            <ng-container
+              [ngTemplateOutlet]="bubbleTemplate"
+              [ngTemplateOutletContext]="{ $implicit: message }"
+            ></ng-container>
+          } @else {
+            <aparte-chat-bubble
+              #bubble
+              [attr.message-id]="message.id"
+              [attr.data-role]="message.role"
+              [attr.timestamp]="message.timestamp"
+              [attr.content]="message.content"
+              [attr.streaming]="(message.status === 'streaming' || message.status === 'pending') ? '' : null"
+            ></aparte-chat-bubble>
+          }
+        }
+        <aparte-chat-status
+          [attr.visible]="isTyping() ? '' : null"
+          [attr.text]="typingText()"
+        ></aparte-chat-status>
+      </aparte-chat-viewport>
+
+      <ng-content select="[slot='above-composer']"></ng-content>
+
+      <aparte-composer
+        #input
+        [attr.placeholder]="placeholder()"
+        [attr.disabled]="disabled() ? '' : null"
+        [attr.submit-on-enter]="submitOnEnter() ? null : 'false'"
+        (aparte-send)="onAparteSend($event)"
+      >
+        <!-- Custom composer via [slot='composer']; falls back to the default
+             shell (add-attachment · input · send + footer slots). Project your
+             own aparte-composer-* layout for a skin-specific composer. -->
+        <ng-content select="[slot='composer']">
+          <div class="aparte-composer-shell">
+            <aparte-composer-attachments></aparte-composer-attachments>
+            <div class="aparte-composer-row">
+              <aparte-composer-add-attachment></aparte-composer-add-attachment>
+              <aparte-composer-input></aparte-composer-input>
+              <aparte-composer-send></aparte-composer-send>
+            </div>
+            <div class="aparte-composer-footer">
+              <ng-content select="[slot='footer-left']"></ng-content>
+              <ng-content select="[slot='footer-center']"></ng-content>
+              <ng-content select="[slot='footer-right']"></ng-content>
+            </div>
+          </div>
+        </ng-content>
+      </aparte-composer>
+    </div>
+  `, isInline: true, 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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+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: `
+    <div
+      class="aparte-chat-container"
+      [class.aparte-chat-container--auto-center]="centerWhenEmpty()"
+      [attr.data-aparte-empty]="centerWhenEmpty() && messages().length === 0 ? '' : null"
+    >
+      <aparte-chat-viewport #viewport framework-managed="">
+        @if (messages().length === 0) {
+          <!-- Welcome / placeholder shown inside the viewport while empty. -->
+          <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. -->
+            <ng-container
+              [ngTemplateOutlet]="bubbleTemplate"
+              [ngTemplateOutletContext]="{ $implicit: message }"
+            ></ng-container>
+          } @else {
+            <aparte-chat-bubble
+              #bubble
+              [attr.message-id]="message.id"
+              [attr.data-role]="message.role"
+              [attr.timestamp]="message.timestamp"
+              [attr.content]="message.content"
+              [attr.streaming]="(message.status === 'streaming' || message.status === 'pending') ? '' : null"
+            ></aparte-chat-bubble>
+          }
+        }
+        <aparte-chat-status
+          [attr.visible]="isTyping() ? '' : null"
+          [attr.text]="typingText()"
+        ></aparte-chat-status>
+      </aparte-chat-viewport>
+
+      <ng-content select="[slot='above-composer']"></ng-content>
+
+      <aparte-composer
+        #input
+        [attr.placeholder]="placeholder()"
+        [attr.disabled]="disabled() ? '' : null"
+        [attr.submit-on-enter]="submitOnEnter() ? null : 'false'"
+        (aparte-send)="onAparteSend($event)"
+      >
+        <!-- Custom composer via [slot='composer']; falls back to the default
+             shell (add-attachment · input · send + footer slots). Project your
+             own aparte-composer-* layout for a skin-specific composer. -->
+        <ng-content select="[slot='composer']">
+          <div class="aparte-composer-shell">
+            <aparte-composer-attachments></aparte-composer-attachments>
+            <div class="aparte-composer-row">
+              <aparte-composer-add-attachment></aparte-composer-add-attachment>
+              <aparte-composer-input></aparte-composer-input>
+              <aparte-composer-send></aparte-composer-send>
+            </div>
+            <div class="aparte-composer-footer">
+              <ng-content select="[slot='footer-left']"></ng-content>
+              <ng-content select="[slot='footer-center']"></ng-content>
+              <ng-content select="[slot='footer-right']"></ng-content>
+            </div>
+          </div>
+        </ng-content>
+      </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 }]
+            }], 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: [{
+                type: ViewChild,
+                args: ['viewport']
+            }], inputRef: [{
+                type: ViewChild,
+                args: ['input']
+            }], bubbleRefs: [{
+                type: ViewChildren,
+                args: ['bubble']
+            }] } });
+
+/**
+ * AparteUiComponent - Universal UI Proxy
+ *
+ * A pass-through proxy component that dynamically injects any aparté
+ * Web Component, so you don't need a dedicated Angular wrapper per element.
+ *
+ * @example
+ * ```html
+ * <aparte-ui
+ *   name="aparte-model-selector"
+ *   [props]="{
+ *     placeholder: 'Ask anything...',
+ *     '--glow-opacity': '1',
+ *     '--glow-speed': '4s'
+ *   }"
+ *   (elementEvent)="onEvent($event)"
+ * />
+ * ```
+ *
+ * @description
+ * - Keys starting with `--` are applied as CSS Variables
+ * - Other keys are set as DOM properties on the element
+ * - The events in `events` (default: {@link DEFAULT_UI_EVENTS}) bubble up via `elementEvent`
+ */
+class AparteUiComponent {
+    renderer = inject(Renderer2);
+    hostEl = inject(ElementRef);
+    // ─────────────────────────────────────────────────────────────
+    // Inputs
+    // ─────────────────────────────────────────────────────────────
+    /** The custom element tag name (e.g., 'aparte-model-selector') */
+    name;
+    /** Properties to pass to the element. Keys starting with '--' are CSS vars */
+    props = {};
+    /**
+     * Which custom events to forward through `elementEvent`. Defaults to the
+     * interactive aparté surface ({@link DEFAULT_UI_EVENTS}); pass your own list to
+     * listen to other events (e.g. `['aparte-composer-change']` for attachments).
+     */
+    events;
+    // ─────────────────────────────────────────────────────────────
+    // Outputs
+    // ─────────────────────────────────────────────────────────────
+    /** Emits a forwarded custom event from the underlying Web Component */
+    elementEvent = output();
+    // ─────────────────────────────────────────────────────────────
+    // Internal State
+    // ─────────────────────────────────────────────────────────────
+    /** The dynamically created Web Component element */
+    element = null;
+    /** Cleanup functions for event listeners */
+    eventCleanups = [];
+    /** Joined key of the bound event set, so a fresh inline `[events]` array
+     *  doesn't thrash the element — only a real change rebinds. */
+    lastEventsKey = '';
+    // ─────────────────────────────────────────────────────────────
+    // Lifecycle
+    // ─────────────────────────────────────────────────────────────
+    ngAfterViewInit() {
+        this.createElement();
+    }
+    ngOnChanges(changes) {
+        // Recreate the element when `name` (or the forwarded event set) changes.
+        const nameChanged = !!changes['name'] && !changes['name'].firstChange;
+        const eventsChanged = !!changes['events'] &&
+            !changes['events'].firstChange &&
+            this.eventsKey() !== this.lastEventsKey;
+        if (nameChanged || eventsChanged) {
+            this.destroyElement();
+            this.createElement();
+        }
+        // If props changed, update them
+        if (changes['props'] && this.element) {
+            this.applyProps();
+        }
+    }
+    ngOnDestroy() {
+        this.destroyElement();
+    }
+    // ─────────────────────────────────────────────────────────────
+    // Element Management
+    // ─────────────────────────────────────────────────────────────
+    eventsKey() {
+        return (this.events ?? DEFAULT_UI_EVENTS).join('|');
+    }
+    createElement() {
+        if (!this.name)
+            return;
+        // Create the custom element
+        this.element = this.renderer.createElement(this.name);
+        // Apply initial props
+        this.applyProps();
+        // Setup event listeners
+        this.setupEventListeners();
+        // Append to host (not container, to avoid extra wrapper)
+        this.renderer.appendChild(this.hostEl.nativeElement, this.element);
+    }
+    destroyElement() {
+        // Cleanup event listeners
+        this.eventCleanups.forEach(cleanup => cleanup());
+        this.eventCleanups = [];
+        // Remove element
+        if (this.element && this.element.parentNode) {
+            this.renderer.removeChild(this.hostEl.nativeElement, this.element);
+        }
+        this.element = null;
+    }
+    /**
+     * aparté elements are **attribute-driven** (`observedAttributes`): assigning a
+     * property is either a silent no-op (nothing observes it) or throws outright on
+     * a getter-only accessor — `<aparte-composer>`'s `placeholder`/`disabled` are
+     * exactly that. So primitives go through `setAttribute`; only values an
+     * attribute cannot carry (objects, functions) are handed over as properties.
+     */
+    applyProps() {
+        if (this.element)
+            applyElementProps(this.element, this.props);
+    }
+    setupEventListeners() {
+        if (!this.element)
+            return;
+        this.lastEventsKey = this.eventsKey();
+        (this.events ?? DEFAULT_UI_EVENTS).forEach(eventName => {
+            const listener = (event) => {
+                this.elementEvent.emit(event);
+            };
+            this.element.addEventListener(eventName, listener);
+            this.eventCleanups.push(() => {
+                this.element?.removeEventListener(eventName, listener);
+            });
+        });
+    }
+    // ─────────────────────────────────────────────────────────────
+    // Public API
+    // ─────────────────────────────────────────────────────────────
+    /** Get the underlying Web Component element */
+    getElement() {
+        return this.element;
+    }
+    /** Call a method on the underlying element */
+    callMethod(methodName, ...args) {
+        if (!this.element)
+            return undefined;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const method = this.element[methodName];
+        if (typeof method === 'function') {
+            return method.apply(this.element, args);
+        }
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: AparteUiComponent, isStandalone: true, selector: "aparte-ui", inputs: { name: "name", props: "props", events: "events" }, outputs: { elementEvent: "elementEvent" }, usesOnChanges: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteUiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aparte-ui', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-container></ng-container>`, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input,
+                args: [{ required: true }]
+            }], props: [{
+                type: Input
+            }], events: [{
+                type: Input
+            }] } });
+
+/**
+ * Angular 19 Signal-based wrapper around ConversationManager.
+ *
+ * Register a storage adapter before calling init():
+ * ```ts
+ * // app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     {
+ *       provide: CONVERSATION_ADAPTER,
+ *       useValue: new IndexedDBAdapter('my-app-convs'),
+ *     },
+ *   ],
+ * };
+ * ```
+ *
+ * Then inject ConversationManagerService in any component or service.
+ */
+class ConversationManagerService {
+    _manager = null;
+    _unsubscribe = null;
+    // ─── Signals ─────────────────────────────────────────────────────────────
+    /** All conversations (active + archived). */
+    conversations = signal([]);
+    /** Active conversations only, newest first. */
+    activeConversations = computed(() => this.conversations()
+        .filter(c => !c.archivedAt)
+        .sort((a, b) => b.updatedAt - a.updatedAt));
+    /** Archived conversations, newest first. */
+    archivedConversations = computed(() => this.conversations()
+        .filter(c => !!c.archivedAt)
+        .sort((a, b) => b.updatedAt - a.updatedAt));
+    /** Currently active conversation id. */
+    activeId = signal(null);
+    /** The active conversation object (null when no conv is selected). */
+    activeConversation = computed(() => {
+        const id = this.activeId();
+        if (!id)
+            return null;
+        return this.conversations().find(c => c.id === id) ?? null;
+    });
+    // ─── Lifecycle ───────────────────────────────────────────────────────────
+    /**
+     * Initialise the service with a storage adapter.
+     * Call once in your root component or app initialiser.
+     */
+    async init(adapter) {
+        this._manager = new ConversationManager(adapter);
+        this._unsubscribe = this._manager.subscribe(convs => {
+            this.conversations.set([...convs]);
+            this.activeId.set(this._manager.activeId);
+        });
+        await this._manager.init();
+        // Sync activeId after load (manager may have no active conv yet)
+        this.activeId.set(this._manager.activeId);
+        // Register globally so AparteConversationController (used by aparte-chat)
+        // can resolve it without explicit DI plumbing.
+        AparteConfig.setConversationManager(this._manager);
+    }
+    ngOnDestroy() {
+        this._unsubscribe?.();
+    }
+    // ─── Actions ─────────────────────────────────────────────────────────────
+    /** Create a new empty conversation, make it active, return it. */
+    async createNew(title) {
+        this._assertInit();
+        return this._manager.createNew(title);
+    }
+    // Note: there is no `select()` / `clearActive()` here on purpose.
+    // The active conversation is owned exclusively by AparteConversationController
+    // (inside <aparte-chat>). To switch conversations, either bind
+    // `[conversationId]` on <aparte-chat> or dispatch a window event:
+    //   window.dispatchEvent(new CustomEvent('aparte-select-conversation', {
+    //     detail: { id, targetId? },
+    //   }));
+    // The `activeId` signal here is read-only and stays in sync via subscribe().
+    /** Append a message to a conversation and persist. */
+    async addMessage(convId, msg) {
+        this._assertInit();
+        return this._manager.addMessage(convId, msg);
+    }
+    /**
+     * Replace all messages for a conversation.
+     * Call after branch navigation or AI response completion.
+     */
+    async updateMessages(convId, messages) {
+        this._assertInit();
+        return this._manager.updateMessages(convId, messages);
+    }
+    /** Permanently delete a conversation. */
+    async delete(id) {
+        this._assertInit();
+        return this._manager.delete(id);
+    }
+    /** Archive a conversation. */
+    async archive(id) {
+        this._assertInit();
+        return this._manager.archive(id);
+    }
+    /** Restore an archived conversation. */
+    async unarchive(id) {
+        this._assertInit();
+        return this._manager.unarchive(id);
+    }
+    // ─── Private ─────────────────────────────────────────────────────────────
+    _assertInit() {
+        if (!this._manager) {
+            throw new Error('[ConversationManagerService] Not initialised. Call init(adapter) before using the service.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ConversationManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ConversationManagerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ConversationManagerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * aparté Angular wrapper
+ * Angular 19 standalone components + services over the framework-agnostic web components.
+ */
+// Configuration (a standalone provider function — no NgModule).
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { APARTE_CLIENT_OPTIONS, APARTE_CONFIG_TOKEN, AparteAiService, AparteChatComponent, AparteUiComponent, ConversationManagerService, provideAparte };
+//# sourceMappingURL=aparte-angular.mjs.map