@bloonio/chat-angular 0.1.0 → 0.2.0

package/fesm2022/bloonio-chat-angular.mjs

@@ -1,8 +1,8 @@
 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 { InjectionToken, makeEnvironmentProviders, inject, computed, PLATFORM_ID, DestroyRef, signal, afterNextRender, Injectable, effect, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, Output, Input, Injector } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { isObservable, firstValueFrom } from 'rxjs';
-import { WSClient, ChatClient } from '@bloonio/chat-client-core';
+import { BloonioChatServerError, tenantKey, WSClient, ChatClient } from '@bloonio/chat-client-core';
 export { BloonioChatAuthError, BloonioChatError, BloonioChatNetworkError, BloonioChatServerError } from '@bloonio/chat-client-core';
 
 /**
@@ -17,7 +17,7 @@ export { BloonioChatAuthError, BloonioChatError, BloonioChatNetworkError, Blooni
  *       provideBloonioChat({
  *         tenantId: env.CHAT_TENANT_ID,
  *         publicKey: env.CHAT_PUBLIC_KEY,
- *         baseUrl: 'https://chat-relay.bloonio.com',
+ *         baseUrl: 'https://chat-relay.example.com',
  *         visitorTokenProvider: () => inject(HttpClient).get<{token: string}>(
  *           '/api/chat/visitor-token'
  *         ).pipe(map(r => r.token)),
@@ -26,6 +26,10 @@ export { BloonioChatAuthError, BloonioChatError, BloonioChatNetworkError, Blooni
  *     ],
  *   };
  */
+/** Reads a config entry that is either a value or a function. */
+function readOption(option) {
+    return typeof option === 'function' ? option() : option;
+}
 const BLOONIO_CHAT_CONFIG = new InjectionToken('BLOONIO_CHAT_CONFIG');
 /** Standalone-provider factory.
  *
@@ -34,9 +38,15 @@ const BLOONIO_CHAT_CONFIG = new InjectionToken('BLOONIO_CHAT_CONFIG');
  * ``providedIn: 'root'`` so we don't need an explicit provider entry — we
  * only need the config token to be registered.
  */
-function provideBloonioChat(config) {
+function provideBloonioChat(
+/** The config, or a factory run in an injection context (so it can
+ *  `inject()` the host's language signal, for instance). */
+config) {
     return makeEnvironmentProviders([
-        { provide: BLOONIO_CHAT_CONFIG, useValue: config },
+        {
+            provide: BLOONIO_CHAT_CONFIG,
+            useFactory: () => (typeof config === 'function' ? config() : config),
+        },
     ]);
 }
 /** Internal accessor used by the components to fail loud when the
@@ -50,6 +60,86 @@ function injectBloonioChatConfig() {
     return cfg;
 }
 
+/**
+ * Built-in strings for everything the widget renders itself. Text that comes
+ * from the relay (status texts, offline message, quick replies, messages) is
+ * shown as received.
+ */
+/** "4h" up to a day, "3d" beyond. */
+const sla = (hours, hour, day) => hours <= 24 ? `${hours}${hour}` : `${Math.round(hours / 24)}${day}`;
+const STRINGS = {
+    en: {
+        placeholder: 'Enter your message...',
+        send: 'Send',
+        close: 'Close',
+        openChat: 'Open chat',
+        closeChat: 'Close chat',
+        unread: (n) => `Open chat (${n} unread)`,
+        typing: 'Assistant is typing',
+        suggestedReplies: 'Suggested replies',
+        chatWith: (name) => `Chat with ${name}`,
+        support: 'Support',
+        poweredBy: 'Powered by',
+        connecting: 'Connecting…',
+        unavailable: 'Chat is unavailable right now. Please try again later.',
+        error: (message) => `Error: ${message}`,
+        agentJoined: (name) => `${name} has joined the chat`,
+        agentLeft: 'The agent has left the chat',
+        ticketCreated: (n, category, priority, hours) => `Support ticket #${n} created (${category}, ${priority}). ` +
+            `We'll follow up within ${sla(hours, 'h', 'd')}.`,
+    },
+    fr: {
+        placeholder: 'Votre message',
+        send: 'Envoyer',
+        close: 'Fermer',
+        openChat: 'Ouvrir la conversation',
+        closeChat: 'Fermer la conversation',
+        unread: (n) => `Ouvrir la conversation (${n} non lu${n > 1 ? 's' : ''})`,
+        typing: 'Réponse en cours de rédaction',
+        suggestedReplies: 'Réponses suggérées',
+        chatWith: (name) => `Discuter avec ${name}`,
+        support: 'Assistance',
+        poweredBy: 'Propulsé par',
+        connecting: 'Connexion…',
+        unavailable: 'La conversation est indisponible pour le moment. Réessayez plus tard.',
+        error: (message) => `Erreur : ${message}`,
+        agentJoined: (name) => `${name} a rejoint la conversation`,
+        agentLeft: 'Le conseiller a quitté la conversation',
+        ticketCreated: (n, category, priority, hours) => `Demande d'assistance n° ${n} créée (${category}, ${priority}). ` +
+            `Nous revenons vers vous sous ${sla(hours, ' h', ' j')}.`,
+    },
+    zh: {
+        placeholder: '输入消息',
+        send: '发送',
+        close: '关闭',
+        openChat: '打开聊天',
+        closeChat: '关闭聊天',
+        unread: (n) => `打开聊天（${n} 条未读）`,
+        typing: '对方正在输入',
+        suggestedReplies: '快捷回复',
+        chatWith: (name) => `与 ${name} 聊天`,
+        support: '客服',
+        poweredBy: '技术支持',
+        connecting: '正在连接…',
+        unavailable: '聊天暂时无法使用，请稍后再试。',
+        error: (message) => `错误：${message}`,
+        agentJoined: (name) => `${name} 已加入对话`,
+        agentLeft: '客服已离开对话',
+        ticketCreated: (n, category, priority, hours) => `工单 #${n} 已创建（${category}，${priority}）。` +
+            `我们将在 ${sla(hours, ' 小时', ' 天')}内回复您。`,
+    },
+};
+/** The strings of the configured locale, re-read whenever a signal behind
+ *  it changes. Anything other than fr / en / zh (after trimming a region:
+ *  "fr-FR") is "en". */
+function injectChatStrings() {
+    const { locale } = injectBloonioChatConfig();
+    return computed(() => {
+        const code = String(readOption(locale) ?? '').slice(0, 2).toLowerCase();
+        return STRINGS[code in STRINGS ? code : 'en'];
+    });
+}
+
 /**
  * BloonioChatService — signals-based reactive state container.
  *
@@ -69,49 +159,128 @@ function injectBloonioChatConfig() {
  *   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.
+ * SSR-safe: every transport call (fetch, WebSocket) and every storage access
+ * is gated behind a platform check via `afterNextRender()` so server
+ * pre-rendering doesn't try to open sockets.
+ *
+ * Resume: the visitor session is kept in `localStorage` per tenant. On the
+ * next page load the token is refreshed, the thread replayed and the socket
+ * reopened, so a visitor waiting for an agent keeps the conversation.
  */
+/** `sender` of a stored relay message → the widget's `from`. */
+const HISTORY_FROM = {
+    visitor: 'visitor',
+    operator: 'agent',
+    bot: 'bot',
+};
+/** Socket close codes the relay uses to refuse a visitor for good. */
+const WS_BAD_TOKEN = 4401;
+const WS_TENANT_UNAVAILABLE = 4403;
+const WS_SESSION_EXPIRED = 4404;
+/** The relay sends one typing "start" per bot answer and the "stop" can be
+ *  lost, so the dots give up after this long without news. Long enough for
+ *  a slow answer, which clears them itself when it arrives. */
+const TYPING_TIMEOUT_MS = 30_000;
+const isAnswer = (m) => m.from === 'bot' || m.from === 'agent';
 class BloonioChatService {
     config = injectBloonioChatConfig();
     platformId = inject(PLATFORM_ID);
     destroyRef = inject(DestroyRef);
+    t = injectChatStrings();
     /** True when running in the browser (vs. server pre-render). */
     isBrowser = isPlatformBrowser(this.platformId);
+    /** Identified visitors are not resumed: a stored thread would outlive a
+     *  logout and show to the next account on the same browser.
+     *  shortcut: scope the storage key by user id to resume them too. */
+    canPersist = this.isBrowser && !this.config.visitorTokenProvider;
     /** 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);
+    bootstrap = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bootstrap" }] : /* istanbul ignore next */ []));
+    /** Visitor session (id + JWT + expires_at) — set lazily on first open,
+     *  or on load when a stored session resumes. */
+    session = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "session" }] : /* istanbul ignore next */ []));
     /** Message log, oldest → newest. */
-    messages = signal([]);
+    messages = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
     /** True between bot's typing(start) and typing(stop) frames. */
-    botTyping = signal(false);
+    botTyping = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "botTyping" }] : /* istanbul ignore next */ []));
     /** 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);
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** True from the start of `ensureSession()` until the relay's welcome
+     *  frame: while it is set, nothing can be sent yet. */
+    connecting = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connecting" }] : /* istanbul ignore next */ []));
+    /** Set when bootstrap or the session fails; cleared by the next attempt
+     *  (reopening the panel retries). Diagnostic text, not shown to visitors. */
+    fatalError = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fatalError" }] : /* istanbul ignore next */ []));
+    /** True once a reload replayed an existing thread: the host's greeting
+     *  opens new conversations only. */
+    replayed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "replayed" }] : /* istanbul ignore next */ []));
+    /** What the panel renders: the log, under the host's greeting when the
+     *  conversation is new, plus one status line when the chat is connecting,
+     *  unavailable, or closed for the day with nothing said yet. The greeting
+     *  and the status lines are local: they are not in `messages`, never sent
+     *  and never stored. */
+    visibleMessages = computed(() => {
+        const messages = this.messages();
+        const line = (id, from, content) => ({
+            id,
+            from,
+            content,
+        });
+        if (this.fatalError() && !this.session()) {
+            return [...messages, line('sys_unavailable', 'system', this.t().unavailable)];
+        }
+        const greeting = this.replayed() ? '' : readOption(this.config.greeting);
+        const log = greeting ? [line('sys_greeting', 'bot', greeting), ...messages] : messages;
+        if (messages.length)
+            return log;
+        if (this.connecting()) {
+            return [...log, line('sys_connecting', 'system', this.t().connecting)];
+        }
+        // The host's greeting stands in for the tenant's offline message.
+        const b = this.bootstrap();
+        return b && !b.is_online && !greeting
+            ? [line('sys_offline', 'system', b.offline_message)]
+            : log;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleMessages" }] : /* istanbul ignore next */ []));
     /** Number of bot/agent messages received while the panel was closed.
-     *  Resets to 0 the moment the panel opens. */
-    _seenCount = signal(0);
+     *  Resets to 0 the moment the panel opens; what arrived while it was open
+     *  has been seen too. */
+    _seenCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_seenCount" }] : /* istanbul ignore next */ []));
     unreadCount = computed(() => {
         if (this.open())
             return 0;
-        const total = this.messages().filter((m) => m.from === 'bot' || m.from === 'agent').length;
+        const total = this.messages().filter(isAnswer).length;
         return Math.max(0, total - this._seenCount());
-    });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unreadCount" }] : /* istanbul ignore next */ []));
     client = null;
     ws = null;
     bootstrapPromise = null;
     sessionPromise = null;
+    /** Sockets the relay refused in a row (reset by a welcome frame). */
+    wsRejections = 0;
+    typingTimer;
     constructor() {
         // SSR safety: schedule the initial bootstrap fetch on first browser render.
         afterNextRender(() => {
-            this.loadBootstrap();
+            void this.loadBootstrap().then((bootstrap) => {
+                // A returning visitor reconnects in the background, so an agent's
+                // reply still arrives while the panel is closed.
+                if (bootstrap && this.readStored())
+                    void this.ensureSession();
+            });
         });
         this.destroyRef.onDestroy(() => {
+            this.setTyping(false);
             this.ws?.close();
             this.ws = null;
         });
@@ -120,11 +289,10 @@ class BloonioChatService {
     /** Toggle panel visibility. First open also opens the WS session. */
     async toggle() {
         const next = !this.open();
+        this.markSeen();
         this.open.set(next);
-        if (next) {
-            this._seenCount.set(this.messages().filter((m) => m.from === 'bot' || m.from === 'agent').length);
+        if (next)
             await this.ensureSession();
-        }
     }
     /** Force the panel open. */
     async openPanel() {
@@ -134,6 +302,7 @@ class BloonioChatService {
     }
     /** Force the panel closed. Keeps the WS open so reopening is instant. */
     closePanel() {
+        this.markSeen();
         this.open.set(false);
     }
     /** Send a visitor message. No-op if the WS isn't connected. */
@@ -155,6 +324,17 @@ class BloonioChatService {
         this.ws.send({ type: 'msg', client_msg_id: clientMsgId, content: trimmed });
     }
     // ── Internals ──────────────────────────────────────────────────────────
+    /** Everything received so far counts as read (on open and on close). */
+    markSeen() {
+        this._seenCount.set(this.messages().filter(isAnswer).length);
+    }
+    setTyping(typing) {
+        clearTimeout(this.typingTimer);
+        this.botTyping.set(typing);
+        if (typing) {
+            this.typingTimer = setTimeout(() => this.botTyping.set(false), TYPING_TIMEOUT_MS);
+        }
+    }
     async loadBootstrap() {
         if (!this.isBrowser)
             return null;
@@ -179,8 +359,15 @@ class BloonioChatService {
                 return null;
             }
         })();
+        // A failed bootstrap is fetched again on the next attempt.
+        void this.bootstrapPromise.then((cfg) => {
+            if (!cfg)
+                this.bootstrapPromise = null;
+        });
         return this.bootstrapPromise;
     }
+    /** Resume the stored session, or — once the panel is open — mint a new
+     *  one. A closed panel never creates a session by itself. */
     async ensureSession() {
         if (!this.isBrowser)
             return null;
@@ -189,19 +376,18 @@ class BloonioChatService {
         if (this.sessionPromise)
             return this.sessionPromise;
         this.connecting.set(true);
+        this.fatalError.set(null);
         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 ?? {},
-                });
+                // Bootstrap first: without it the relay is unreachable or refuses
+                // this origin, and `fatalError` already says why.
+                const bootstrap = await this.loadBootstrap();
+                if (!bootstrap)
+                    return null;
+                const session = (await this.resumeSession(bootstrap)) ??
+                    (this.open() ? await this.createSession() : null);
+                if (!session)
+                    return null;
                 this.session.set(session);
                 this.openWebSocket(session);
                 // Optional: identify the visitor server-side if the consumer wired
@@ -215,11 +401,128 @@ class BloonioChatService {
                 return null;
             }
             finally {
-                this.connecting.set(false);
+                // With a session, `connecting` lasts until the socket's welcome.
+                // Without one, let the next open (or load) try again.
+                if (!this.session()) {
+                    this.connecting.set(false);
+                    this.sessionPromise = null;
+                }
             }
         })();
         return this.sessionPromise;
     }
+    async createSession() {
+        const session = await this.getClient().createVisitorSession({
+            tenantId: this.config.tenantId,
+            widgetPublicKey: this.config.publicKey,
+            origin: this.resolvedOrigin(),
+            // The configured value as given (a function is read now). With none,
+            // "fr": what 0.1.x sent, kept so existing hosts see no change.
+            locale: readOption(this.config.locale) ?? 'fr',
+            metadata: this.config.metadata ?? {},
+        });
+        this.writeStored(session);
+        return session;
+    }
+    /** Rejoin the stored session: refresh its token (the relay accepts an
+     *  expired one while the session lives), replay the thread, hand back the
+     *  same session. Null when there is none or it cannot be resumed — the
+     *  caller then starts a fresh one, and the visitor sees no error. */
+    async resumeSession(bootstrap) {
+        const stored = this.readStored();
+        if (!stored)
+            return null;
+        try {
+            const refreshed = await this.relay('POST', '/refresh/visitor-token', stored.visitor_token);
+            if (typeof refreshed?.visitor_token !== 'string') {
+                throw new BloonioChatServerError('malformed refresh response', 400, refreshed);
+            }
+            // shortcut: replays the newest page only (50 messages), page with
+            // `next_before` if longer threads need their full history.
+            const history = await this.relay('GET', '/fetch/visitor-messages', refreshed.visitor_token);
+            const messages = (history.messages ?? []).map((m) => ({
+                id: m.message_id,
+                from: HISTORY_FROM[m.sender] ?? 'system',
+                content: m.content,
+            }));
+            this.messages.set(messages);
+            this.replayed.set(messages.length > 0);
+            // Replayed answers are not "unread".
+            this.markSeen();
+            this.writeStored(refreshed);
+            return { ...refreshed, widget_config: bootstrap };
+        }
+        catch (err) {
+            // The relay refused the session (4xx): forget it. A network failure
+            // or a 5xx keeps it, so the next page load can still resume.
+            if (err instanceof BloonioChatServerError && err.status < 500) {
+                this.writeStored(null);
+            }
+            return null;
+        }
+    }
+    /** The two visitor endpoints `ChatClient` (core 0.1.0) does not wrap. */
+    async relay(method, path, visitorToken) {
+        const res = await fetch(`${this.config.baseUrl.replace(/\/+$/, '')}/api/v1${path}`, {
+            method,
+            headers: { Authorization: `Bearer ${visitorToken}` },
+            signal: AbortSignal.timeout(10_000),
+        });
+        if (!res.ok) {
+            throw new BloonioChatServerError(`HTTP ${res.status}`, res.status, null);
+        }
+        const json = await res.json();
+        return (json?.data ?? json);
+    }
+    readStored() {
+        if (!this.canPersist)
+            return null;
+        try {
+            const stored = JSON.parse(localStorage.getItem(this.storageKey()) ?? 'null');
+            return typeof stored?.visitor_token === 'string' ? stored : null;
+        }
+        catch {
+            return null; // storage blocked, or the entry is not ours
+        }
+    }
+    writeStored(session) {
+        if (!this.canPersist)
+            return;
+        try {
+            if (!session)
+                return localStorage.removeItem(this.storageKey());
+            const { session_id, visitor_token, expires_at } = session;
+            localStorage.setItem(this.storageKey(), JSON.stringify({ session_id, visitor_token, expires_at }));
+        }
+        catch {
+            // Storage unavailable: the conversation just won't survive a reload.
+        }
+    }
+    storageKey() {
+        return tenantKey(this.config.tenantId, 'session');
+    }
+    /** The relay closed the socket for good. WSClient would retry the same
+     *  dead token forever, so stop it and recover here. */
+    onSocketRejected(ws, code) {
+        ws.close();
+        if (this.ws !== ws)
+            return;
+        this.ws = null;
+        this.session.set(null);
+        this.sessionPromise = null;
+        this.setTyping(false);
+        this.wsRejections += 1;
+        if (code === WS_TENANT_UNAVAILABLE || this.wsRejections > 2) {
+            this.connecting.set(false);
+            this.fatalError.set(`Socket refused (${code})`);
+            return;
+        }
+        // First refusal: the token may only have expired, and resuming
+        // refreshes it. Refused again: drop the session and start fresh.
+        if (this.wsRejections > 1)
+            this.writeStored(null);
+        void this.ensureSession();
+    }
     openWebSocket(session) {
         if (this.ws)
             return;
@@ -228,8 +531,25 @@ class BloonioChatService {
             visitorToken: session.visitor_token,
             heartbeatIntervalMs: 30_000,
         }, {
-            onWelcome: () => undefined,
+            onWelcome: () => {
+                this.wsRejections = 0;
+                this.connecting.set(false);
+            },
+            onClose: ({ code }) => {
+                if (code !== WS_BAD_TOKEN &&
+                    code !== WS_SESSION_EXPIRED &&
+                    code !== WS_TENANT_UNAVAILABLE) {
+                    return; // a dropped connection: WSClient reconnects by itself
+                }
+                // WSClient schedules its reconnect right after this callback, so
+                // it can only be cancelled one tick later.
+                queueMicrotask(() => this.onSocketRejected(ws, code));
+            },
             onMessage: (frame) => {
+                // The answer is here: whoever was typing has finished, even if
+                // the "stop" frame never comes.
+                if (frame.from !== 'system')
+                    this.setTyping(false);
                 this.messages.update((prev) => [
                     ...prev,
                     { id: frame.id, from: frame.from, content: frame.content },
@@ -242,13 +562,17 @@ class BloonioChatService {
             },
             onTyping: (frame) => {
                 if (frame.from === 'bot' || frame.from === 'agent') {
-                    this.botTyping.set(frame.state === 'start');
+                    this.setTyping(frame.state === 'start');
                 }
             },
             onError: (frame) => {
                 this.messages.update((prev) => [
                     ...prev,
-                    { id: `err_${Date.now()}`, from: 'system', content: `Error: ${frame.message}` },
+                    {
+                        id: `err_${Date.now()}`,
+                        from: 'system',
+                        content: this.t().error(frame.message),
+                    },
                 ]);
             },
             // Phase 10c — agent takeover visibility. Renders a system message
@@ -260,10 +584,10 @@ class BloonioChatService {
                     {
                         id: `sys_join_${Date.now()}`,
                         from: 'system',
-                        content: `${frame.agent_display_name} has joined the chat.`,
+                        content: this.t().agentJoined(frame.agent_display_name),
                     },
                 ]);
-                this.botTyping.set(false);
+                this.setTyping(false);
             },
             onAgentLeft: () => {
                 this.messages.update((prev) => [
@@ -271,26 +595,19 @@ class BloonioChatService {
                     {
                         id: `sys_left_${Date.now()}`,
                         from: 'system',
-                        content: 'The agent has left the chat.',
+                        content: this.t().agentLeft,
                     },
                 ]);
-                this.botTyping.set(false);
+                this.setTyping(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}.`,
+                        content: this.t().ticketCreated(frame.ticket_number, frame.category, frame.priority, frame.sla_hours),
                     },
                 ]);
             },
@@ -346,10 +663,10 @@ class BloonioChatService {
         // 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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BloonioChatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BloonioChatService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BloonioChatService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BloonioChatService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -361,33 +678,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  */
 class BloonioChatLauncherComponent {
     chat = inject(BloonioChatService);
-    position = computed(() => this.chat.bootstrap()?.widget_position ?? 'right');
+    t = injectChatStrings();
+    config = injectBloonioChatConfig();
+    button;
+    constructor() {
+        let wasOpen = false;
+        effect(() => {
+            const open = this.chat.open();
+            const button = this.button?.nativeElement;
+            // Closing from inside the panel (Escape, its close button) hands the
+            // keyboard focus back to the launcher instead of dropping it on <body>.
+            if (wasOpen && !open && button?.ownerDocument.activeElement?.closest('.bch-panel')) {
+                button.focus();
+            }
+            wasOpen = open;
+        });
+    }
+    position = computed(() => this.chat.bootstrap()?.widget_position ?? 'right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     /** 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}` : '';
-    });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeStyle" }] : /* istanbul ignore next */ []));
     label = computed(() => {
+        const own = readOption(this.config.launcherLabel);
+        if (own !== undefined)
+            return own || null;
         const b = this.chat.bootstrap();
         return b?.button_label_enabled ? b.button_label_text : null;
-    });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     ariaLabel = computed(() => {
+        if (this.chat.open())
+            return this.t().closeChat;
         const unread = this.chat.unreadCount();
-        return unread > 0
-            ? `Open chat (${unread} unread)`
-            : 'Open chat';
-    });
+        return unread > 0 ? this.t().unread(unread) : this.t().openChat;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BloonioChatLauncherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: BloonioChatLauncherComponent, isStandalone: true, selector: "bloonio-chat-launcher", viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: `
     <div class="bch-root" [attr.data-position]="position()" [style]="themeStyle()">
       <button
+        #button
         type="button"
         class="bch-launcher"
         [attr.aria-label]="ariaLabel()"
+        [attr.aria-expanded]="chat.open()"
         (click)="onToggle()"
       >
         @if (label()) {
@@ -398,12 +740,16 @@ class BloonioChatLauncherComponent {
                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>
+          <!-- Hidden from assistive tech: the count is in the button's name. -->
+          @if (chat.unreadCount(); as unread) {
+            <span class="bch-launcher-badge" aria-hidden="true">{{ unread > 9 ? '9+' : unread }}</span>
+          }
         </span>
       </button>
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BloonioChatLauncherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BloonioChatLauncherComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bloonio-chat-launcher',
@@ -412,9 +758,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     template: `
     <div class="bch-root" [attr.data-position]="position()" [style]="themeStyle()">
       <button
+        #button
         type="button"
         class="bch-launcher"
         [attr.aria-label]="ariaLabel()"
+        [attr.aria-expanded]="chat.open()"
         (click)="onToggle()"
       >
         @if (label()) {
@@ -425,12 +773,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                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>
+          <!-- Hidden from assistive tech: the count is in the button's name. -->
+          @if (chat.unreadCount(); as unread) {
+            <span class="bch-launcher-badge" aria-hidden="true">{{ unread > 9 ? '9+' : unread }}</span>
+          }
         </span>
       </button>
     </div>
   `,
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { button: [{
+                type: ViewChild,
+                args: ['button']
+            }] } });
 
 /**
  * Visitor input bar — multi-line textarea + send button. Enter sends,
@@ -440,7 +795,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class InputBarComponent {
     disabled = false;
     send = new EventEmitter();
-    value = signal('');
+    t = injectChatStrings();
+    value = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     canSend() {
         return !this.disabled && this.value().trim().length > 0;
     }
@@ -460,12 +817,13 @@ class InputBarComponent {
         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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: InputBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", 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..."
+        [placeholder]="t().placeholder"
+        [attr.aria-label]="t().placeholder"
         [disabled]="disabled"
         [value]="value()"
         (input)="onInput($event)"
@@ -474,7 +832,7 @@ class InputBarComponent {
       <button
         type="button"
         class="bch-input-send"
-        aria-label="Send"
+        [attr.aria-label]="t().send"
         [disabled]="!canSend()"
         (click)="submit()"
       >
@@ -485,7 +843,7 @@ class InputBarComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: InputBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bloonio-chat-input-bar',
@@ -495,7 +853,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <div class="bch-input">
       <textarea
         rows="1"
-        placeholder="Enter your message..."
+        [placeholder]="t().placeholder"
+        [attr.aria-label]="t().placeholder"
         [disabled]="disabled"
         [value]="value()"
         (input)="onInput($event)"
@@ -504,7 +863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       <button
         type="button"
         class="bch-input-send"
-        aria-label="Send"
+        [attr.aria-label]="t().send"
         [disabled]="!canSend()"
         (click)="submit()"
       >
@@ -529,42 +888,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 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: `
+    t = injectChatStrings();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MessageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MessageListComponent, isStandalone: true, selector: "bloonio-chat-message-list", inputs: { messages: "messages", botTyping: "botTyping" }, host: { properties: { "style.display": "\"contents\"" } }, ngImport: i0, template: `
     @for (m of messages; track m.id) {
+      <!-- No whitespace around the text: bubbles are pre-wrap and would show it. -->
       <div
         class="bch-bubble"
         [attr.data-from]="m.from"
         [attr.data-pending]="m.pending ? 'true' : null"
-      >
-        {{ m.content }}
-      </div>
+      >{{ m.content }}</div>
     }
     @if (botTyping) {
-      <div class="bch-typing" aria-label="Assistant is typing">
+      <div class="bch-typing" role="status" [attr.aria-label]="t().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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bloonio-chat-message-list',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    // The bubbles are laid out by the parent's flex column (`.bch-messages`:
+                    // visitor right, answers left, notices centred). Without this the host
+                    // box sits in between and every bubble falls back to the left. A binding,
+                    // not a style attribute, so a strict CSP does not drop it.
+                    host: { '[style.display]': '"contents"' },
                     template: `
     @for (m of messages; track m.id) {
+      <!-- No whitespace around the text: bubbles are pre-wrap and would show it. -->
       <div
         class="bch-bubble"
         [attr.data-from]="m.from"
         [attr.data-pending]="m.pending ? 'true' : null"
-      >
-        {{ m.content }}
-      </div>
+      >{{ m.content }}</div>
     }
     @if (botTyping) {
-      <div class="bch-typing" aria-label="Assistant is typing">
+      <div class="bch-typing" role="status" [attr.aria-label]="t().typing">
         <span></span><span></span><span></span>
       </div>
     }
@@ -588,21 +951,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  */
 class QuickRepliesComponent {
     chat = inject(BloonioChatService);
-    /** Show the configured chips only until the visitor's first message. */
+    t = injectChatStrings();
+    config = injectBloonioChatConfig();
+    /** Show the chips (the host's, else the tenant's) only until the
+     *  visitor's first message, and only once a tap can actually be sent. */
     replies = computed(() => {
-        const bootstrap = this.chat.bootstrap();
-        if (!bootstrap || bootstrap.quick_replies.length === 0)
+        if (!this.chat.session() || this.chat.connecting())
             return [];
+        const replies = readOption(this.config.quickReplies) ??
+            this.chat.bootstrap()?.quick_replies ??
+            [];
         const visitorSpoke = this.chat.messages().some((m) => m.from === 'visitor');
-        return visitorSpoke ? [] : bootstrap.quick_replies;
-    });
+        return visitorSpoke ? [] : replies;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "replies" }] : /* istanbul ignore next */ []));
     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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: QuickRepliesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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">
+      <div class="bch-quick-replies" role="group" [attr.aria-label]="t().suggestedReplies">
         @for (reply of replies(); track reply) {
           <button type="button" class="bch-quick-reply" (click)="pick(reply)">
             {{ reply }}
@@ -612,7 +981,7 @@ class QuickRepliesComponent {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QuickRepliesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: QuickRepliesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bloonio-chat-quick-replies',
@@ -620,7 +989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     @if (replies().length) {
-      <div class="bch-quick-replies" role="group" aria-label="Suggested replies">
+      <div class="bch-quick-replies" role="group" [attr.aria-label]="t().suggestedReplies">
         @for (reply of replies(); track reply) {
           <button type="button" class="bch-quick-reply" (click)="pick(reply)">
             {{ reply }}
@@ -642,57 +1011,70 @@ class BloonioChatPanelComponent {
      *  inside the page flow (use for SSR landing pages or sidebar layouts). */
     mode = 'floating';
     chat = inject(BloonioChatService);
+    t = injectChatStrings();
+    config = injectBloonioChatConfig();
+    injector = inject(Injector);
     messagesRef;
-    lastScrollLen = signal(-1);
-    position = computed(() => this.chat.bootstrap()?.widget_position ?? 'right');
+    panelRef;
+    lastScrollLen = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastScrollLen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (this.mode !== 'floating' || !this.chat.open())
+                return;
+            // Opening moves focus into the dialog (so Escape and Tab work from
+            // there). The panel is still `visibility: hidden` until this render
+            // lands, hence after it.
+            afterNextRender(() => this.panelRef?.nativeElement.focus(), {
+                injector: this.injector,
+            });
+        });
+    }
+    position = computed(() => this.chat.bootstrap()?.widget_position ?? 'right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     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();
-    });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     themeStyle = computed(() => {
         const color = this.chat.bootstrap()?.branding_primary_color;
         return color ? `--bch-primary: ${color}` : '';
-    });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeStyle" }] : /* istanbul ignore next */ []));
     displayName = computed(() => this.chat.bootstrap()?.branding_display_name
         ?? this.chat.bootstrap()?.tenant_name
-        ?? 'Support');
-    logoUrl = computed(() => this.chat.bootstrap()?.branding_logo_url ?? null);
+        ?? this.t().support, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []));
+    logoUrl = computed(() => this.chat.bootstrap()?.branding_logo_url ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoUrl" }] : /* istanbul ignore next */ []));
     initials = computed(() => this.displayName()
         .split(/\s+/)
         .slice(0, 2)
         .map((w) => w[0]?.toUpperCase() ?? '')
-        .join('') || '?');
+        .join('') || '?', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
     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;
-    });
+        return b.is_online
+            ? readOption(this.config.onlineStatusText) ?? b.online_status_text
+            : readOption(this.config.offlineStatusText) ?? b.offline_status_text;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusText" }] : /* istanbul ignore next */ []));
+    isOnlineStr = computed(() => String(this.chat.bootstrap()?.is_online ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOnlineStr" }] : /* istanbul ignore next */ []));
     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);
+        const len = this.chat.visibleMessages().length + (this.chat.botTyping() ? 1 : 0);
         if (len !== this.lastScrollLen()) {
             el.scrollTop = el.scrollHeight;
             this.lastScrollLen.set(len);
@@ -704,25 +1086,33 @@ class BloonioChatPanelComponent {
     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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BloonioChatPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: BloonioChatPanelComponent, isStandalone: true, selector: "bloonio-chat-panel", inputs: { mode: "mode" }, viewQueries: [{ propertyName: "messagesRef", first: true, predicate: ["messages"], descendants: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], 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()">
+        <div
+          #panel
+          class="bch-panel"
+          [style]="themeStyle()"
+          [attr.role]="mode === 'floating' ? 'dialog' : null"
+          [attr.aria-label]="mode === 'floating' ? t().chatWith(displayName()) : null"
+          [attr.tabindex]="mode === 'floating' ? -1 : null"
+          (keydown.escape)="mode === 'floating' && onClose()"
+        >
           <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>
+                <span>{{ initials() }}</span>
               }
             </div>
             <div class="bch-header-title">
-              <div class="bch-header-name">Chat with {{ displayName() }}</div>
+              <div class="bch-header-name">{{ t().chatWith(displayName()) }}</div>
               <div class="bch-header-status">
                 <span class="bch-header-status-dot" [attr.data-online]="isOnlineStr()"></span>
                 {{ statusText() }}
@@ -731,7 +1121,7 @@ class BloonioChatPanelComponent {
             <button
               type="button"
               class="bch-header-close"
-              aria-label="Close"
+              [attr.aria-label]="t().close"
               (click)="onClose()"
             >
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
@@ -742,9 +1132,9 @@ class BloonioChatPanelComponent {
             </button>
           </header>
 
-          <div class="bch-messages" #messages>
+          <div class="bch-messages" role="log" #messages>
             <bloonio-chat-message-list
-              [messages]="visibleMessages()"
+              [messages]="chat.visibleMessages()"
               [botTyping]="chat.botTyping()"
             />
           </div>
@@ -752,19 +1142,19 @@ class BloonioChatPanelComponent {
           <bloonio-chat-quick-replies />
 
           <bloonio-chat-input-bar
-            [disabled]="chat.connecting()"
+            [disabled]="chat.connecting() || !chat.session()"
             (send)="onSend($event)"
           />
 
           <div class="bch-footer">
-            Powered by
+            {{ t().poweredBy }}
             <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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BloonioChatPanelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bloonio-chat-panel',
@@ -778,17 +1168,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       [attr.data-position]="position()"
       [attr.data-mode]="mode"
     >
-        <div class="bch-panel" [style]="themeStyle()">
+        <div
+          #panel
+          class="bch-panel"
+          [style]="themeStyle()"
+          [attr.role]="mode === 'floating' ? 'dialog' : null"
+          [attr.aria-label]="mode === 'floating' ? t().chatWith(displayName()) : null"
+          [attr.tabindex]="mode === 'floating' ? -1 : null"
+          (keydown.escape)="mode === 'floating' && onClose()"
+        >
           <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>
+                <span>{{ initials() }}</span>
               }
             </div>
             <div class="bch-header-title">
-              <div class="bch-header-name">Chat with {{ displayName() }}</div>
+              <div class="bch-header-name">{{ t().chatWith(displayName()) }}</div>
               <div class="bch-header-status">
                 <span class="bch-header-status-dot" [attr.data-online]="isOnlineStr()"></span>
                 {{ statusText() }}
@@ -797,7 +1195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             <button
               type="button"
               class="bch-header-close"
-              aria-label="Close"
+              [attr.aria-label]="t().close"
               (click)="onClose()"
             >
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
@@ -808,9 +1206,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             </button>
           </header>
 
-          <div class="bch-messages" #messages>
+          <div class="bch-messages" role="log" #messages>
             <bloonio-chat-message-list
-              [messages]="visibleMessages()"
+              [messages]="chat.visibleMessages()"
               [botTyping]="chat.botTyping()"
             />
           </div>
@@ -818,23 +1216,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           <bloonio-chat-quick-replies />
 
           <bloonio-chat-input-bar
-            [disabled]="chat.connecting()"
+            [disabled]="chat.connecting() || !chat.session()"
             (send)="onSend($event)"
           />
 
           <div class="bch-footer">
-            Powered by
+            {{ t().poweredBy }}
             <a href="https://bloonio.com" target="_blank" rel="noopener noreferrer">Bloonio</a>
           </div>
         </div>
       </div>
   `,
                 }]
-        }], propDecorators: { mode: [{
+        }], ctorParameters: () => [], propDecorators: { mode: [{
                 type: Input
             }], messagesRef: [{
                 type: ViewChild,
                 args: ['messages']
+            }], panelRef: [{
+                type: ViewChild,
+                args: ['panel']
             }] } });
 
 /**
@@ -850,30 +1251,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class BloonioChatThreadComponent {
     chat = inject(BloonioChatService);
     messagesRef;
-    lastScrollLen = signal(-1);
+    lastScrollLen = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastScrollLen" }] : /* istanbul ignore next */ []));
     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;
-    });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeStyle" }] : /* istanbul ignore next */ []));
     ngAfterViewChecked() {
         const el = this.messagesRef?.nativeElement;
         if (!el)
             return;
-        const len = this.visibleMessages().length + (this.chat.botTyping() ? 1 : 0);
+        const len = this.chat.visibleMessages().length + (this.chat.botTyping() ? 1 : 0);
         if (len !== this.lastScrollLen()) {
             el.scrollTop = el.scrollHeight;
             this.lastScrollLen.set(len);
@@ -885,26 +1274,26 @@ class BloonioChatThreadComponent {
     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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BloonioChatThreadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", 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>
+        <div class="bch-messages" role="log" #messages>
           <bloonio-chat-message-list
-            [messages]="visibleMessages()"
+            [messages]="chat.visibleMessages()"
             [botTyping]="chat.botTyping()"
           />
         </div>
         <bloonio-chat-quick-replies />
         <bloonio-chat-input-bar
-          [disabled]="chat.connecting()"
+          [disabled]="chat.connecting() || !chat.session()"
           (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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BloonioChatThreadComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bloonio-chat-thread',
@@ -914,15 +1303,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     template: `
     <div class="bch-root" data-mode="inline" [style]="themeStyle()">
       <div class="bch-panel">
-        <div class="bch-messages" #messages>
+        <div class="bch-messages" role="log" #messages>
           <bloonio-chat-message-list
-            [messages]="visibleMessages()"
+            [messages]="chat.visibleMessages()"
             [botTyping]="chat.botTyping()"
           />
         </div>
         <bloonio-chat-quick-replies />
         <bloonio-chat-input-bar
-          [disabled]="chat.connecting()"
+          [disabled]="chat.connecting() || !chat.session()"
           (send)="chat.sendMessage($event)"
         />
       </div>
@@ -948,7 +1337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Styles ship separately at `@bloonio/chat-angular/styles.css` — import once
  * in your global stylesheet (see README).
  */
-const VERSION = '0.1.0';
+const VERSION = '0.2.0';
 
 /**
  * Generated bundle index. Do not edit.