@bbki.ng/bb-msg-history 0.14.1 → 2.0.0

package/dist/components/bb-loading-overlay.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+/**
+ * Loading overlay component - displays spinner overlay
+ */
+export declare class BBLoadingOverlay extends LitElement {
+    static styles: import("lit").CSSResult;
+    visible: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bb-loading-overlay': BBLoadingOverlay;
+    }
+}

package/dist/components/bb-loading-overlay.js

@@ -0,0 +1,89 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { THEME } from '../const/theme.js';
+/**
+ * Loading overlay component - displays spinner overlay
+ */
+let BBLoadingOverlay = class BBLoadingOverlay extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      position: absolute;
+      inset: 0;
+      z-index: 20;
+    }
+
+    .overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.6);
+      backdrop-filter: blur(1px);
+      border-radius: 0.5rem;
+      min-height: 120px;
+    }
+
+    .spinner {
+      width: 24px;
+      height: 24px;
+      border: 2px solid ${unsafeCSS(THEME.gray[200])};
+      border-top-color: ${unsafeCSS(THEME.gray[500])};
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner {
+        animation-duration: 1.5s;
+        opacity: 0.8;
+      }
+    }
+
+    /* Dark mode */
+    @media (prefers-color-scheme: dark) {
+      .overlay {
+        background: rgba(17, 24, 39, 0.6);
+      }
+
+      .spinner {
+        border-color: ${unsafeCSS(THEME.gray[700])};
+        border-top-color: ${unsafeCSS(THEME.gray[400])};
+      }
+    }
+  `; }
+    render() {
+        if (!this.visible) {
+            return html ``;
+        }
+        return html `
+      <div class="overlay" role="status" aria-label="Loading messages">
+        <div class="spinner"></div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], BBLoadingOverlay.prototype, "visible", void 0);
+BBLoadingOverlay = __decorate([
+    customElement('bb-loading-overlay')
+], BBLoadingOverlay);
+export { BBLoadingOverlay };

package/dist/components/bb-message-bubble.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+/**
+ * Message bubble component - displays message text with theming
+ */
+export declare class BBMessageBubble extends LitElement {
+    static styles: import("lit").CSSResult;
+    text: string;
+    side: 'left' | 'right';
+    subsequent: boolean;
+    customBg: string;
+    customColor: string;
+    private _getInlineStyles;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bb-message-bubble': BBMessageBubble;
+    }
+}

package/dist/components/bb-message-bubble.js

@@ -0,0 +1,116 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { THEME } from '../const/theme.js';
+/**
+ * Message bubble component - displays message text with theming
+ */
+let BBMessageBubble = class BBMessageBubble extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.side = 'left';
+        this.subsequent = false;
+        this.customBg = '';
+        this.customColor = '';
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      --bubble-bg: var(--bb-bubble-bg, ${unsafeCSS(THEME.gray[50])});
+      --bubble-color: var(--bb-bubble-color, ${unsafeCSS(THEME.gray[900])});
+      --bubble-radius: 1rem;
+    }
+
+    :host([side='right']) {
+      --bubble-bg: var(--bb-bubble-right-bg, ${unsafeCSS(THEME.gray[200])});
+    }
+
+    .bubble {
+      padding: 0.625rem 0.875rem;
+      font-size: 0.9375rem;
+      line-height: 1.5;
+      word-wrap: break-word;
+      overflow-wrap: anywhere;
+      word-break: break-word;
+      border-radius: var(--bubble-radius);
+      background-color: var(--bubble-bg);
+      color: var(--bubble-color);
+    }
+
+    /* Left side bubble - squared bottom left */
+    :host([side='left']:not([subsequent])) .bubble {
+      border-bottom-left-radius: 0.25rem;
+    }
+
+    /* Right side bubble - squared bottom right */
+    :host([side='right']:not([subsequent])) .bubble {
+      border-bottom-right-radius: 0.25rem;
+    }
+
+    @media (max-width: 480px) {
+      .bubble {
+        font-size: 0.9375rem;
+        padding: 0.5rem 0.75rem;
+      }
+    }
+
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+      :host {
+        --bubble-bg: var(--bb-bubble-bg-dark, ${unsafeCSS(THEME.slate[800])});
+        --bubble-color: var(--bb-bubble-color-dark, ${unsafeCSS(THEME.slate[100])});
+      }
+
+      :host([side='right']) {
+        --bubble-bg: var(--bb-bubble-right-bg-dark, ${unsafeCSS(THEME.slate[700])});
+      }
+
+      .bubble {
+        border: 1px solid ${unsafeCSS(THEME.slate[700])};
+      }
+
+      :host([side='right']) .bubble {
+        border: none;
+      }
+    }
+  `; }
+    _getInlineStyles() {
+        const styles = [];
+        if (this.customBg) {
+            styles.push(`background-color: ${this.customBg}`);
+        }
+        if (this.customColor) {
+            styles.push(`color: ${this.customColor}`);
+        }
+        return styles.length > 0 ? styles.join('; ') : '';
+    }
+    render() {
+        const style = this._getInlineStyles();
+        return html `<div class="bubble" style="${style}">${this.text}</div>`;
+    }
+};
+__decorate([
+    property()
+], BBMessageBubble.prototype, "text", void 0);
+__decorate([
+    property({ reflect: true })
+], BBMessageBubble.prototype, "side", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], BBMessageBubble.prototype, "subsequent", void 0);
+__decorate([
+    property({ attribute: 'custom-bg' })
+], BBMessageBubble.prototype, "customBg", void 0);
+__decorate([
+    property({ attribute: 'custom-color' })
+], BBMessageBubble.prototype, "customColor", void 0);
+BBMessageBubble = __decorate([
+    customElement('bb-message-bubble')
+], BBMessageBubble);
+export { BBMessageBubble };

package/dist/components/bb-message.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, type PropertyValues } from 'lit';
+import './bb-letter-avatar.js';
+import './bb-custom-avatar.js';
+import './bb-message-bubble.js';
+import './bb-timestamp.js';
+/**
+ * Message row component - composes avatar, bubble, and timestamp
+ */
+export declare class BBMessage extends LitElement {
+    static styles: import("lit").CSSResult;
+    author: string;
+    text: string;
+    timestamp: string;
+    subsequent: boolean;
+    lastInGroup: boolean;
+    side: 'left' | 'right';
+    private _authors?;
+    private _getConfig;
+    willUpdate(changedProps: PropertyValues<this>): void;
+    private _renderAvatar;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bb-message': BBMessage;
+    }
+}

package/dist/components/bb-message.js

@@ -0,0 +1,174 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { consume } from '@lit/context';
+import { authorContext } from '../contexts/author-context.js';
+import { resolveAuthorConfig } from '../utils/author-resolver.js';
+import { FIRST_CHAR_AVATAR_AUTHORS } from '../const/authors.js';
+import './bb-letter-avatar.js';
+import './bb-custom-avatar.js';
+import './bb-message-bubble.js';
+import './bb-timestamp.js';
+/**
+ * Message row component - composes avatar, bubble, and timestamp
+ */
+let BBMessage = class BBMessage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.author = '';
+        this.text = '';
+        this.timestamp = '';
+        this.subsequent = false;
+        this.lastInGroup = false;
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      align-items: flex-end;
+      gap: 0.5rem;
+      max-width: 80%;
+    }
+
+    :host([side='left']) {
+      align-self: flex-start;
+      margin-right: auto;
+    }
+
+    :host([side='right']) {
+      align-self: flex-end;
+      margin-left: auto;
+      flex-direction: row-reverse;
+    }
+
+    :host([subsequent]) {
+      margin-top: 0.375rem;
+    }
+
+    :host(:not([subsequent])) {
+      margin-top: 0.75rem;
+    }
+
+    :host(:first-of-type:not([subsequent])) {
+      margin-top: 0;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      padding-bottom: 12px;
+    }
+
+    .avatar-container {
+      flex-shrink: 0;
+      width: 1.75rem;
+      height: 1.75rem;
+    }
+
+    :host([subsequent]) .avatar-container {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    @media (max-width: 480px) {
+      :host {
+        max-width: 85%;
+      }
+
+      .avatar-container {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+    }
+  `; }
+    _getConfig() {
+        return resolveAuthorConfig(this.author, this._authors ?? new Map());
+    }
+    _renderAvatar(config) {
+        const isLetterAvatar = !config.isCustomAvatar || FIRST_CHAR_AVATAR_AUTHORS.has(this.author);
+        if (isLetterAvatar) {
+            return html `
+        <bb-letter-avatar
+          class="avatar-container"
+          .letter=${this.author.charAt(0).toUpperCase()}
+        ></bb-letter-avatar>
+      `;
+        }
+        // Custom avatar - need to parse the avatar HTML
+        const avatarContent = config.avatar;
+        const isPlainText = !avatarContent.includes('<');
+        if (isPlainText) {
+            // Single emoji or text - wrap in styled div
+            return html `
+        <bb-custom-avatar class="avatar-container" .tooltip=${this.author}>
+          <div
+            style="
+              width: 100%;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 18px;
+              line-height: 1;
+            "
+          >
+            ${avatarContent}
+          </div>
+        </bb-custom-avatar>
+      `;
+        }
+        // HTML content (SVG, img, etc.)
+        return html `
+      <bb-custom-avatar class="avatar-container" .tooltip=${this.author}>
+        <div .innerHTML=${avatarContent}></div>
+      </bb-custom-avatar>
+    `;
+    }
+    render() {
+        const config = this._getConfig();
+        const side = config.side;
+        return html `
+      ${this._renderAvatar(config)}
+      <div class="content">
+        <bb-message-bubble
+          .text=${this.text}
+          side=${side}
+          ?subsequent=${this.subsequent}
+          custom-bg=${config.bubbleColor}
+          custom-color=${config.textColor}
+        ></bb-message-bubble>
+        ${this.lastInGroup && this.timestamp
+            ? html `<bb-timestamp .value=${this.timestamp} side=${side}></bb-timestamp>`
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], BBMessage.prototype, "author", void 0);
+__decorate([
+    property()
+], BBMessage.prototype, "text", void 0);
+__decorate([
+    property()
+], BBMessage.prototype, "timestamp", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], BBMessage.prototype, "subsequent", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], BBMessage.prototype, "lastInGroup", void 0);
+__decorate([
+    consume({ context: authorContext, subscribe: true }),
+    state()
+], BBMessage.prototype, "_authors", void 0);
+BBMessage = __decorate([
+    customElement('bb-message')
+], BBMessage);
+export { BBMessage };

package/dist/components/bb-msg-history.d.ts

@@ -0,0 +1,111 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { AuthorOptions } from '../types/index.js';
+import type { MessageParser, MessageInput } from '../parsers/base.js';
+import './bb-message.js';
+import './bb-scroll-button.js';
+import './bb-loading-overlay.js';
+/**
+ * BBMsgHistory - A chat-style message history web component
+ *
+ * Uses Lit for reactive rendering with a compositional architecture.
+ * Preserves backward compatibility with the lightweight textContent mode.
+ *
+ * @example
+ * ```html
+ * <!-- Lightweight mode -->
+ * <bb-msg-history>
+ *   alice: Hello!
+ *   bob: Hi there!
+ * </bb-msg-history>
+ *
+ * <!-- With custom authors -->
+ * <bb-msg-history id="chat"></bb-msg-history>
+ * <script>
+ *   document.getElementById('chat')
+ *     .setAuthor('alice', { avatar: '🐱', side: 'right' });
+ * </script>
+ * ```
+ */
+export declare class BBMsgHistory extends LitElement {
+    static styles: import("lit").CSSResult;
+    loading: boolean;
+    hideScrollBar: boolean;
+    infinite: boolean;
+    hideScrollButton: boolean;
+    theme: 'light' | 'dark' | null;
+    private _messages;
+    private _processedMessages;
+    private _userAuthors;
+    private _mutationObserver?;
+    private _isParsing;
+    private _parser;
+    private _scrollController;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProps: PropertyValues<BBMsgHistory>): void;
+    updated(changedProps: PropertyValues<BBMsgHistory>): void;
+    /**
+     * Configure an author's avatar, side, and colors.
+     * Call before or after rendering — the component re-renders automatically.
+     */
+    setAuthor(name: string, options: AuthorOptions): this;
+    /**
+     * Remove a previously set author config.
+     */
+    removeAuthor(name: string): this;
+    /**
+     * Show or hide the loading overlay.
+     */
+    setLoading(isLoading: boolean): this;
+    /**
+     * Append a message to the history.
+     * Automatically scrolls to the new message with smooth animation.
+     */
+    appendMessage(input: MessageInput): this;
+    /**
+     * Scroll to the bottom of the message history.
+     */
+    scrollToBottom(): this;
+    /**
+     * Set a custom parser for message parsing
+     */
+    setParser(parser: MessageParser): this;
+    /**
+     * Initialize MutationObserver for Light DOM observation
+     */
+    private _initLightDOMObserver;
+    /**
+     * Parse Light DOM textContent into messages
+     */
+    private _parseLightDOM;
+    /**
+     * Check if messages have changed
+     */
+    private _messagesChanged;
+    /**
+     * Hide light DOM content visually while keeping it for accessibility/parsing
+     */
+    private _hideLightDOMContent;
+    /**
+     * Sync current messages back to light DOM
+     */
+    private _syncToLightDOM;
+    /**
+     * Compute message groups for rendering
+     */
+    private _computeGroups;
+    /**
+     * Check if two messages can be grouped together
+     */
+    private _canGroup;
+    /**
+     * Handle scroll button click
+     */
+    private _onScrollButtonClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bb-msg-history': BBMsgHistory;
+    }
+}