@bloonio/chat-angular 0.1.0

package/fesm2022/bloonio-chat-angular.mjs

@@ -0,0 +1,958 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, PLATFORM_ID, DestroyRef, signal, computed, afterNextRender, Injectable, ChangeDetectionStrategy, Component, EventEmitter, Output, Input, ViewChild } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { isObservable, firstValueFrom } from 'rxjs';
+import { WSClient, ChatClient } from '@bloonio/chat-client-core';
+export { BloonioChatAuthError, BloonioChatError, BloonioChatNetworkError, BloonioChatServerError } from '@bloonio/chat-client-core';
+
+/**
+ * Dependency-injection plumbing for the Angular chat SDK.
+ *
+ * Consumers wire the SDK into their app via the standard Angular pattern
+ * documented in docs/12 §7.3:
+ *
+ *   // app.config.ts
+ *   export const appConfig: ApplicationConfig = {
+ *     providers: [
+ *       provideBloonioChat({
+ *         tenantId: env.CHAT_TENANT_ID,
+ *         publicKey: env.CHAT_PUBLIC_KEY,
+ *         baseUrl: 'https://chat-relay.bloonio.com',
+ *         visitorTokenProvider: () => inject(HttpClient).get<{token: string}>(
+ *           '/api/chat/visitor-token'
+ *         ).pipe(map(r => r.token)),
+ *         locale: 'fr',
+ *       }),
+ *     ],
+ *   };
+ */
+const BLOONIO_CHAT_CONFIG = new InjectionToken('BLOONIO_CHAT_CONFIG');
+/** Standalone-provider factory.
+ *
+ * Returns ``EnvironmentProviders`` so consumers can spread it into
+ * ``app.config.ts``'s providers array. The service itself is
+ * ``providedIn: 'root'`` so we don't need an explicit provider entry — we
+ * only need the config token to be registered.
+ */
+function provideBloonioChat(config) {
+    return makeEnvironmentProviders([
+        { provide: BLOONIO_CHAT_CONFIG, useValue: config },
+    ]);
+}
+/** Internal accessor used by the components to fail loud when the
+ *  consumer forgot ``provideBloonioChat()``. */
+function injectBloonioChatConfig() {
+    const cfg = inject(BLOONIO_CHAT_CONFIG, { optional: true });
+    if (!cfg) {
+        throw new Error('[bloonio-chat-angular] provideBloonioChat() was not called in your app.config.ts. ' +
+            'Add it to providers: [...] alongside provideRouter/provideHttpClient.');
+    }
+    return cfg;
+}
+
+/**
+ * BloonioChatService — signals-based reactive state container.
+ *
+ * Mirrors the Preact widget's `Widget.tsx` state machine but uses Angular
+ * signals so templates auto-track the slots they read. Public surface:
+ *
+ *   readonly bootstrap = signal<WidgetBootstrapConfig | null>(null);
+ *   readonly session   = signal<CreateVisitorSessionResponse | null>(null);
+ *   readonly messages  = signal<ChatMessage[]>([]);
+ *   readonly botTyping = signal(false);
+ *   readonly open      = signal(false);
+ *   readonly connecting= signal(false);
+ *   readonly unreadCount = computed(...);
+ *
+ *   async open(): Promise<void>
+ *   close(): void
+ *   async toggle(): Promise<void>
+ *   sendMessage(text: string): void
+ *
+ * SSR-safe: every transport call (fetch, WebSocket) is gated behind a
+ * platform check via `afterNextRender()` so server pre-rendering doesn't
+ * try to open sockets.
+ */
+class BloonioChatService {
+    config = injectBloonioChatConfig();
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    /** True when running in the browser (vs. server pre-render). */
+    isBrowser = isPlatformBrowser(this.platformId);
+    /** Bootstrap config — populated by the first `loadBootstrap()` call. */
+    bootstrap = signal(null);
+    /** Visitor session (id + JWT + expires_at) — set lazily on first open. */
+    session = signal(null);
+    /** Message log, oldest → newest. */
+    messages = signal([]);
+    /** True between bot's typing(start) and typing(stop) frames. */
+    botTyping = signal(false);
+    /** Panel visibility — drives Launcher / Panel rendering. */
+    open = signal(false);
+    /** True while `ensureSession()` is in flight (initial WS handshake). */
+    connecting = signal(false);
+    /** Set when the WS handshake fails permanently (e.g. tenant suspended). */
+    fatalError = signal(null);
+    /** Number of bot/agent messages received while the panel was closed.
+     *  Resets to 0 the moment the panel opens. */
+    _seenCount = signal(0);
+    unreadCount = computed(() => {
+        if (this.open())
+            return 0;
+        const total = this.messages().filter((m) => m.from === 'bot' || m.from === 'agent').length;
+        return Math.max(0, total - this._seenCount());
+    });
+    client = null;
+    ws = null;
+    bootstrapPromise = null;
+    sessionPromise = null;
+    constructor() {
+        // SSR safety: schedule the initial bootstrap fetch on first browser render.
+        afterNextRender(() => {
+            this.loadBootstrap();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.ws?.close();
+            this.ws = null;
+        });
+    }
+    // ── Public methods ─────────────────────────────────────────────────────
+    /** Toggle panel visibility. First open also opens the WS session. */
+    async toggle() {
+        const next = !this.open();
+        this.open.set(next);
+        if (next) {
+            this._seenCount.set(this.messages().filter((m) => m.from === 'bot' || m.from === 'agent').length);
+            await this.ensureSession();
+        }
+    }
+    /** Force the panel open. */
+    async openPanel() {
+        if (this.open())
+            return;
+        await this.toggle();
+    }
+    /** Force the panel closed. Keeps the WS open so reopening is instant. */
+    closePanel() {
+        this.open.set(false);
+    }
+    /** Send a visitor message. No-op if the WS isn't connected. */
+    sendMessage(content) {
+        const trimmed = content.trim();
+        if (!trimmed || !this.ws)
+            return;
+        const clientMsgId = `c_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+        this.messages.update((prev) => [
+            ...prev,
+            {
+                id: clientMsgId,
+                client_msg_id: clientMsgId,
+                from: 'visitor',
+                content: trimmed,
+                pending: true,
+            },
+        ]);
+        this.ws.send({ type: 'msg', client_msg_id: clientMsgId, content: trimmed });
+    }
+    // ── Internals ──────────────────────────────────────────────────────────
+    async loadBootstrap() {
+        if (!this.isBrowser)
+            return null;
+        if (this.bootstrap())
+            return this.bootstrap();
+        if (this.bootstrapPromise)
+            return this.bootstrapPromise;
+        this.bootstrapPromise = (async () => {
+            try {
+                const client = this.getClient();
+                const cfg = await client.fetchWidgetConfig({
+                    tenantId: this.config.tenantId,
+                    widgetPublicKey: this.config.publicKey,
+                    origin: this.resolvedOrigin(),
+                });
+                this.bootstrap.set(cfg);
+                return cfg;
+            }
+            catch (err) {
+                const msg = err instanceof Error ? err.message : 'unknown error';
+                this.fatalError.set(`Bootstrap failed: ${msg}`);
+                return null;
+            }
+        })();
+        return this.bootstrapPromise;
+    }
+    async ensureSession() {
+        if (!this.isBrowser)
+            return null;
+        if (this.session())
+            return this.session();
+        if (this.sessionPromise)
+            return this.sessionPromise;
+        this.connecting.set(true);
+        this.sessionPromise = (async () => {
+            try {
+                // Make sure bootstrap is resolved first — the visibility/online
+                // flags it carries influence whether we connect at all.
+                await this.loadBootstrap();
+                const client = this.getClient();
+                const session = await client.createVisitorSession({
+                    tenantId: this.config.tenantId,
+                    widgetPublicKey: this.config.publicKey,
+                    origin: this.resolvedOrigin(),
+                    locale: this.config.locale ?? 'fr',
+                    metadata: this.config.metadata ?? {},
+                });
+                this.session.set(session);
+                this.openWebSocket(session);
+                // Optional: identify the visitor server-side if the consumer wired
+                // a token provider.
+                this.tryIdentify(session).catch(() => undefined);
+                return session;
+            }
+            catch (err) {
+                const msg = err instanceof Error ? err.message : 'unknown error';
+                this.fatalError.set(`Session failed: ${msg}`);
+                return null;
+            }
+            finally {
+                this.connecting.set(false);
+            }
+        })();
+        return this.sessionPromise;
+    }
+    openWebSocket(session) {
+        if (this.ws)
+            return;
+        const ws = new WSClient({
+            baseUrl: this.config.baseUrl,
+            visitorToken: session.visitor_token,
+            heartbeatIntervalMs: 30_000,
+        }, {
+            onWelcome: () => undefined,
+            onMessage: (frame) => {
+                this.messages.update((prev) => [
+                    ...prev,
+                    { id: frame.id, from: frame.from, content: frame.content },
+                ]);
+            },
+            onAck: (frame) => {
+                this.messages.update((prev) => prev.map((m) => m.client_msg_id === frame.client_msg_id
+                    ? { ...m, id: frame.server_msg_id, pending: false }
+                    : m));
+            },
+            onTyping: (frame) => {
+                if (frame.from === 'bot' || frame.from === 'agent') {
+                    this.botTyping.set(frame.state === 'start');
+                }
+            },
+            onError: (frame) => {
+                this.messages.update((prev) => [
+                    ...prev,
+                    { id: `err_${Date.now()}`, from: 'system', content: `Error: ${frame.message}` },
+                ]);
+            },
+            // Phase 10c — agent takeover visibility. Renders a system message
+            // and clears any stale bot-typing indicator (the bot's mid-stream
+            // turn may have been pre-empted by the operator claim).
+            onAgentJoined: (frame) => {
+                this.messages.update((prev) => [
+                    ...prev,
+                    {
+                        id: `sys_join_${Date.now()}`,
+                        from: 'system',
+                        content: `${frame.agent_display_name} has joined the chat.`,
+                    },
+                ]);
+                this.botTyping.set(false);
+            },
+            onAgentLeft: () => {
+                this.messages.update((prev) => [
+                    ...prev,
+                    {
+                        id: `sys_left_${Date.now()}`,
+                        from: 'system',
+                        content: 'The agent has left the chat.',
+                    },
+                ]);
+                this.botTyping.set(false);
+            },
+            // Phase 10f — chat_api opened a support ticket.
+            onTicketCreated: (frame) => {
+                const sla = frame.sla_hours === 1
+                    ? 'within 1h'
+                    : frame.sla_hours <= 24
+                        ? `within ${frame.sla_hours}h`
+                        : `within ${Math.round(frame.sla_hours / 24)}d`;
+                this.messages.update((prev) => [
+                    ...prev,
+                    {
+                        id: `sys_ticket_${frame.ticket_id}`,
+                        from: 'system',
+                        content: `🎫 Support ticket #${frame.ticket_number} created — ` +
+                            `${frame.category} · ${frame.priority}. ` +
+                            `We'll follow up ${sla}.`,
+                    },
+                ]);
+            },
+        });
+        this.ws = ws;
+        ws.connect();
+    }
+    async tryIdentify(session) {
+        const provider = this.config.visitorTokenProvider;
+        if (!provider)
+            return;
+        let raw;
+        const result = provider();
+        if (typeof result === 'string') {
+            raw = result;
+        }
+        else if (isObservable(result)) {
+            raw = await firstValueFrom(result);
+        }
+        else {
+            raw = await result;
+        }
+        if (!raw)
+            return;
+        // Caller's token is `userId:signature` (colon-delimited). Falling back
+        // to plain user_id when no colon is present is too easy to misuse —
+        // require explicit signature to avoid identity forgery footguns.
+        const sep = raw.indexOf(':');
+        if (sep < 0) {
+            this.fatalError.set('visitorTokenProvider returned a value without "userId:signature" — refusing to identify.');
+            return;
+        }
+        const userId = raw.slice(0, sep);
+        const userSignature = raw.slice(sep + 1);
+        await this.getClient().identifyVisitor({
+            visitorToken: session.visitor_token,
+            userId,
+            userSignature,
+        });
+    }
+    getClient() {
+        if (!this.client) {
+            this.client = new ChatClient({ baseUrl: this.config.baseUrl });
+        }
+        return this.client;
+    }
+    resolvedOrigin() {
+        if (this.config.origin)
+            return this.config.origin;
+        if (this.isBrowser && typeof window !== 'undefined') {
+            return window.location.origin;
+        }
+        // SSR-safe fallback; the relay validates origins server-side anyway.
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BloonioChatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BloonioChatService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BloonioChatService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Floating launcher — circular chat bubble with optional label.
+ * Wraps the `BloonioChatService` so consumers just drop
+ * `<bloonio-chat-launcher />` somewhere and the SDK handles state.
+ */
+class BloonioChatLauncherComponent {
+    chat = inject(BloonioChatService);
+    position = computed(() => this.chat.bootstrap()?.widget_position ?? 'right');
+    /** Tint the bubble with the tenant's brand colour (falls back to the
+     *  stylesheet default until bootstrap config loads). */
+    themeStyle = computed(() => {
+        const color = this.chat.bootstrap()?.branding_primary_color;
+        return color ? `--bch-primary: ${color}` : '';
+    });
+    label = computed(() => {
+        const b = this.chat.bootstrap();
+        return b?.button_label_enabled ? b.button_label_text : null;
+    });
+    ariaLabel = computed(() => {
+        const unread = this.chat.unreadCount();
+        return unread > 0
+            ? `Open chat (${unread} unread)`
+            : 'Open chat';
+    });
+    onToggle() {
+        void this.chat.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BloonioChatLauncherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BloonioChatLauncherComponent, isStandalone: true, selector: "bloonio-chat-launcher", ngImport: i0, template: `
+    <div class="bch-root" [attr.data-position]="position()" [style]="themeStyle()">
+      <button
+        type="button"
+        class="bch-launcher"
+        [attr.aria-label]="ariaLabel()"
+        (click)="onToggle()"
+      >
+        @if (label()) {
+          <span class="bch-launcher-label">{{ label() }}</span>
+        }
+        <span class="bch-launcher-bubble">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+          </svg>
+        </span>
+      </button>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BloonioChatLauncherComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bloonio-chat-launcher',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="bch-root" [attr.data-position]="position()" [style]="themeStyle()">
+      <button
+        type="button"
+        class="bch-launcher"
+        [attr.aria-label]="ariaLabel()"
+        (click)="onToggle()"
+      >
+        @if (label()) {
+          <span class="bch-launcher-label">{{ label() }}</span>
+        }
+        <span class="bch-launcher-bubble">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+          </svg>
+        </span>
+      </button>
+    </div>
+  `,
+                }]
+        }] });
+
+/**
+ * Visitor input bar — multi-line textarea + send button. Enter sends,
+ * Shift+Enter inserts a newline. Emits `send` with the trimmed content
+ * once it's non-empty.
+ */
+class InputBarComponent {
+    disabled = false;
+    send = new EventEmitter();
+    value = signal('');
+    canSend() {
+        return !this.disabled && this.value().trim().length > 0;
+    }
+    onInput(e) {
+        this.value.set(e.target.value);
+    }
+    onKey(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            this.submit();
+        }
+    }
+    submit() {
+        if (!this.canSend())
+            return;
+        const trimmed = this.value().trim();
+        this.send.emit(trimmed);
+        this.value.set('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputBarComponent, isStandalone: true, selector: "bloonio-chat-input-bar", inputs: { disabled: "disabled" }, outputs: { send: "send" }, ngImport: i0, template: `
+    <div class="bch-input">
+      <textarea
+        rows="1"
+        placeholder="Enter your message..."
+        [disabled]="disabled"
+        [value]="value()"
+        (input)="onInput($event)"
+        (keydown)="onKey($event)"
+      ></textarea>
+      <button
+        type="button"
+        class="bch-input-send"
+        aria-label="Send"
+        [disabled]="!canSend()"
+        (click)="submit()"
+      >
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+        </svg>
+      </button>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bloonio-chat-input-bar',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="bch-input">
+      <textarea
+        rows="1"
+        placeholder="Enter your message..."
+        [disabled]="disabled"
+        [value]="value()"
+        (input)="onInput($event)"
+        (keydown)="onKey($event)"
+      ></textarea>
+      <button
+        type="button"
+        class="bch-input-send"
+        aria-label="Send"
+        [disabled]="!canSend()"
+        (click)="submit()"
+      >
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+        </svg>
+      </button>
+    </div>
+  `,
+                }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], send: [{
+                type: Output
+            }] } });
+
+/**
+ * Renders the message log + typing indicator. Pure presentational —
+ * receives messages + typing flag as inputs so it can also be used
+ * outside the panel (custom layouts, debug screens).
+ */
+class MessageListComponent {
+    messages = [];
+    botTyping = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MessageListComponent, isStandalone: true, selector: "bloonio-chat-message-list", inputs: { messages: "messages", botTyping: "botTyping" }, ngImport: i0, template: `
+    @for (m of messages; track m.id) {
+      <div
+        class="bch-bubble"
+        [attr.data-from]="m.from"
+        [attr.data-pending]="m.pending ? 'true' : null"
+      >
+        {{ m.content }}
+      </div>
+    }
+    @if (botTyping) {
+      <div class="bch-typing" aria-label="Assistant is typing">
+        <span></span><span></span><span></span>
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bloonio-chat-message-list',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @for (m of messages; track m.id) {
+      <div
+        class="bch-bubble"
+        [attr.data-from]="m.from"
+        [attr.data-pending]="m.pending ? 'true' : null"
+      >
+        {{ m.content }}
+      </div>
+    }
+    @if (botTyping) {
+      <div class="bch-typing" aria-label="Assistant is typing">
+        <span></span><span></span><span></span>
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { messages: [{
+                type: Input,
+                args: [{ required: true }]
+            }], botTyping: [{
+                type: Input
+            }] } });
+
+/**
+ * `<bloonio-chat-quick-replies>` — tenant-configured opening prompt chips,
+ * shown under the welcome message until the visitor sends their first
+ * message. Tapping a chip sends its text as that first message.
+ *
+ * Driven by `BloonioChatService` (reads `bootstrap().quick_replies` +
+ * `messages()`), so it self-hides once the conversation starts. Used inside
+ * both the floating panel and the headless thread.
+ */
+class QuickRepliesComponent {
+    chat = inject(BloonioChatService);
+    /** Show the configured chips only until the visitor's first message. */
+    replies = computed(() => {
+        const bootstrap = this.chat.bootstrap();
+        if (!bootstrap || bootstrap.quick_replies.length === 0)
+            return [];
+        const visitorSpoke = this.chat.messages().some((m) => m.from === 'visitor');
+        return visitorSpoke ? [] : bootstrap.quick_replies;
+    });
+    pick(text) {
+        this.chat.sendMessage(text);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QuickRepliesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: QuickRepliesComponent, isStandalone: true, selector: "bloonio-chat-quick-replies", ngImport: i0, template: `
+    @if (replies().length) {
+      <div class="bch-quick-replies" role="group" aria-label="Suggested replies">
+        @for (reply of replies(); track reply) {
+          <button type="button" class="bch-quick-reply" (click)="pick(reply)">
+            {{ reply }}
+          </button>
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QuickRepliesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bloonio-chat-quick-replies',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (replies().length) {
+      <div class="bch-quick-replies" role="group" aria-label="Suggested replies">
+        @for (reply of replies(); track reply) {
+          <button type="button" class="bch-quick-reply" (click)="pick(reply)">
+            {{ reply }}
+          </button>
+        }
+      </div>
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * Floating or docked chat panel. Renders the header, message list, input,
+ * and footer. Sits inside `<bloonio-chat-launcher>` for the floating
+ * variant, or stand-alone for `mode="docked"`/`mode="inline"`.
+ */
+class BloonioChatPanelComponent {
+    /** floating = paired with launcher (default). docked/inline = always-on
+     *  inside the page flow (use for SSR landing pages or sidebar layouts). */
+    mode = 'floating';
+    chat = inject(BloonioChatService);
+    messagesRef;
+    lastScrollLen = signal(-1);
+    position = computed(() => this.chat.bootstrap()?.widget_position ?? 'right');
+    visible = computed(() => {
+        // Floating mode: only when service.open() is true.
+        // Docked/inline: always rendered if bootstrap is loaded.
+        if (this.mode === 'floating')
+            return this.chat.open();
+        return !!this.chat.bootstrap();
+    });
+    themeStyle = computed(() => {
+        const color = this.chat.bootstrap()?.branding_primary_color;
+        return color ? `--bch-primary: ${color}` : '';
+    });
+    displayName = computed(() => this.chat.bootstrap()?.branding_display_name
+        ?? this.chat.bootstrap()?.tenant_name
+        ?? 'Support');
+    logoUrl = computed(() => this.chat.bootstrap()?.branding_logo_url ?? null);
+    initials = computed(() => this.displayName()
+        .split(/\s+/)
+        .slice(0, 2)
+        .map((w) => w[0]?.toUpperCase() ?? '')
+        .join('') || '?');
+    statusText = computed(() => {
+        const b = this.chat.bootstrap();
+        if (!b)
+            return '';
+        return b.is_online ? b.online_status_text : b.offline_status_text;
+    });
+    isOnlineStr = computed(() => String(this.chat.bootstrap()?.is_online ?? false));
+    visibleMessages = computed(() => {
+        const b = this.chat.bootstrap();
+        const messages = this.chat.messages();
+        if (b && !b.is_online && messages.length === 0) {
+            return [
+                {
+                    id: 'sys_offline',
+                    from: 'system',
+                    content: b.offline_message,
+                },
+            ];
+        }
+        return messages;
+    });
+    ngAfterViewChecked() {
+        // Scroll-to-bottom whenever message count changes. We compare against a
+        // stamped length so we don't churn when only typing/status updates fire.
+        const el = this.messagesRef?.nativeElement;
+        if (!el)
+            return;
+        const len = this.visibleMessages().length + (this.chat.botTyping() ? 1 : 0);
+        if (len !== this.lastScrollLen()) {
+            el.scrollTop = el.scrollHeight;
+            this.lastScrollLen.set(len);
+        }
+    }
+    onClose() {
+        this.chat.closePanel();
+    }
+    onSend(content) {
+        this.chat.sendMessage(content);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BloonioChatPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BloonioChatPanelComponent, isStandalone: true, selector: "bloonio-chat-panel", inputs: { mode: "mode" }, viewQueries: [{ propertyName: "messagesRef", first: true, predicate: ["messages"], descendants: true }], ngImport: i0, template: `
+    <div
+      class="bch-root"
+      [class.bch-open]="visible()"
+      [attr.data-position]="position()"
+      [attr.data-mode]="mode"
+    >
+        <div class="bch-panel" [style]="themeStyle()">
+          <header class="bch-header">
+            <div class="bch-header-avatar">
+              @if (logoUrl()) {
+                <img [src]="logoUrl()" alt="" />
+              } @else {
+                <span style="font-weight:600;font-size:15px">{{ initials() }}</span>
+              }
+            </div>
+            <div class="bch-header-title">
+              <div class="bch-header-name">Chat with {{ displayName() }}</div>
+              <div class="bch-header-status">
+                <span class="bch-header-status-dot" [attr.data-online]="isOnlineStr()"></span>
+                {{ statusText() }}
+              </div>
+            </div>
+            <button
+              type="button"
+              class="bch-header-close"
+              aria-label="Close"
+              (click)="onClose()"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                   stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </header>
+
+          <div class="bch-messages" #messages>
+            <bloonio-chat-message-list
+              [messages]="visibleMessages()"
+              [botTyping]="chat.botTyping()"
+            />
+          </div>
+
+          <bloonio-chat-quick-replies />
+
+          <bloonio-chat-input-bar
+            [disabled]="chat.connecting()"
+            (send)="onSend($event)"
+          />
+
+          <div class="bch-footer">
+            Powered by
+            <a href="https://bloonio.com" target="_blank" rel="noopener noreferrer">Bloonio</a>
+          </div>
+        </div>
+      </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: InputBarComponent, selector: "bloonio-chat-input-bar", inputs: ["disabled"], outputs: ["send"] }, { kind: "component", type: MessageListComponent, selector: "bloonio-chat-message-list", inputs: ["messages", "botTyping"] }, { kind: "component", type: QuickRepliesComponent, selector: "bloonio-chat-quick-replies" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BloonioChatPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bloonio-chat-panel',
+                    standalone: true,
+                    imports: [InputBarComponent, MessageListComponent, QuickRepliesComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div
+      class="bch-root"
+      [class.bch-open]="visible()"
+      [attr.data-position]="position()"
+      [attr.data-mode]="mode"
+    >
+        <div class="bch-panel" [style]="themeStyle()">
+          <header class="bch-header">
+            <div class="bch-header-avatar">
+              @if (logoUrl()) {
+                <img [src]="logoUrl()" alt="" />
+              } @else {
+                <span style="font-weight:600;font-size:15px">{{ initials() }}</span>
+              }
+            </div>
+            <div class="bch-header-title">
+              <div class="bch-header-name">Chat with {{ displayName() }}</div>
+              <div class="bch-header-status">
+                <span class="bch-header-status-dot" [attr.data-online]="isOnlineStr()"></span>
+                {{ statusText() }}
+              </div>
+            </div>
+            <button
+              type="button"
+              class="bch-header-close"
+              aria-label="Close"
+              (click)="onClose()"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                   stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </header>
+
+          <div class="bch-messages" #messages>
+            <bloonio-chat-message-list
+              [messages]="visibleMessages()"
+              [botTyping]="chat.botTyping()"
+            />
+          </div>
+
+          <bloonio-chat-quick-replies />
+
+          <bloonio-chat-input-bar
+            [disabled]="chat.connecting()"
+            (send)="onSend($event)"
+          />
+
+          <div class="bch-footer">
+            Powered by
+            <a href="https://bloonio.com" target="_blank" rel="noopener noreferrer">Bloonio</a>
+          </div>
+        </div>
+      </div>
+  `,
+                }]
+        }], propDecorators: { mode: [{
+                type: Input
+            }], messagesRef: [{
+                type: ViewChild,
+                args: ['messages']
+            }] } });
+
+/**
+ * `<bloonio-chat-thread>` — headless variant of the panel. Renders just
+ * the message log + input, no header, no floating chrome. Used when the
+ * tenant wants to embed the chat *inside* their own layout (e.g. inside
+ * a support modal, a sidebar, a help center page).
+ *
+ * Theming and behaviour are otherwise identical — the same
+ * `BloonioChatService` drives state, so a thread and a panel side-by-side
+ * stay in sync.
+ */
+class BloonioChatThreadComponent {
+    chat = inject(BloonioChatService);
+    messagesRef;
+    lastScrollLen = signal(-1);
+    themeStyle = computed(() => {
+        const color = this.chat.bootstrap()?.branding_primary_color;
+        return color ? `--bch-primary: ${color}` : '';
+    });
+    visibleMessages = computed(() => {
+        const b = this.chat.bootstrap();
+        const messages = this.chat.messages();
+        if (b && !b.is_online && messages.length === 0) {
+            return [
+                {
+                    id: 'sys_offline',
+                    from: 'system',
+                    content: b.offline_message,
+                },
+            ];
+        }
+        return messages;
+    });
+    ngAfterViewChecked() {
+        const el = this.messagesRef?.nativeElement;
+        if (!el)
+            return;
+        const len = this.visibleMessages().length + (this.chat.botTyping() ? 1 : 0);
+        if (len !== this.lastScrollLen()) {
+            el.scrollTop = el.scrollHeight;
+            this.lastScrollLen.set(len);
+        }
+    }
+    /** Convenience: thread is meant to be always-on, so it opens the
+     *  service-level session as soon as it's instantiated.
+     *  (Floating panel waits for the launcher click.) */
+    constructor() {
+        void this.chat.openPanel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BloonioChatThreadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BloonioChatThreadComponent, isStandalone: true, selector: "bloonio-chat-thread", viewQueries: [{ propertyName: "messagesRef", first: true, predicate: ["messages"], descendants: true }], ngImport: i0, template: `
+    <div class="bch-root" data-mode="inline" [style]="themeStyle()">
+      <div class="bch-panel">
+        <div class="bch-messages" #messages>
+          <bloonio-chat-message-list
+            [messages]="visibleMessages()"
+            [botTyping]="chat.botTyping()"
+          />
+        </div>
+        <bloonio-chat-quick-replies />
+        <bloonio-chat-input-bar
+          [disabled]="chat.connecting()"
+          (send)="chat.sendMessage($event)"
+        />
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: InputBarComponent, selector: "bloonio-chat-input-bar", inputs: ["disabled"], outputs: ["send"] }, { kind: "component", type: MessageListComponent, selector: "bloonio-chat-message-list", inputs: ["messages", "botTyping"] }, { kind: "component", type: QuickRepliesComponent, selector: "bloonio-chat-quick-replies" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BloonioChatThreadComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bloonio-chat-thread',
+                    standalone: true,
+                    imports: [InputBarComponent, MessageListComponent, QuickRepliesComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="bch-root" data-mode="inline" [style]="themeStyle()">
+      <div class="bch-panel">
+        <div class="bch-messages" #messages>
+          <bloonio-chat-message-list
+            [messages]="visibleMessages()"
+            [botTyping]="chat.botTyping()"
+          />
+        </div>
+        <bloonio-chat-quick-replies />
+        <bloonio-chat-input-bar
+          [disabled]="chat.connecting()"
+          (send)="chat.sendMessage($event)"
+        />
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { messagesRef: [{
+                type: ViewChild,
+                args: ['messages']
+            }] } });
+
+/**
+ * @bloonio/chat-angular — Angular library for the bloonio chat PaaS.
+ *
+ * Public surface:
+ *   - {@link provideBloonioChat} — environment-provider factory for app.config.ts
+ *   - {@link BloonioChatService}  — signals-based reactive state
+ *   - Three standalone components:
+ *       <bloonio-chat-launcher>   floating bubble (collapsed)
+ *       <bloonio-chat-panel>      expandable card (the full chat UX)
+ *       <bloonio-chat-thread>     headless variant for inline embedding
+ *
+ * Styles ship separately at `@bloonio/chat-angular/styles.css` — import once
+ * in your global stylesheet (see README).
+ */
+const VERSION = '0.1.0';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BLOONIO_CHAT_CONFIG, BloonioChatLauncherComponent, BloonioChatPanelComponent, BloonioChatService, BloonioChatThreadComponent, InputBarComponent, MessageListComponent, QuickRepliesComponent, VERSION, injectBloonioChatConfig, provideBloonioChat };
+//# sourceMappingURL=bloonio-chat-angular.mjs.map