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

package/dist/components/bb-msg-history.js

@@ -0,0 +1,473 @@
+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, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { provide } from '@lit/context';
+import { authorContext } from '../contexts/author-context.js';
+import { ScrollController } from '../controllers/scroll-controller.js';
+import { DefaultMessageParser } from '../parsers/default-parser.js';
+import { THEME } from '../const/theme.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>
+ * ```
+ */
+let BBMsgHistory = class BBMsgHistory extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Public properties
+        this.loading = false;
+        this.hideScrollBar = false;
+        this.infinite = false;
+        this.hideScrollButton = false;
+        this.theme = null;
+        // Private state
+        this._messages = [];
+        this._processedMessages = [];
+        // Context provider for author configurations
+        this._userAuthors = new Map();
+        this._isParsing = false;
+        this._parser = new DefaultMessageParser();
+        // Scroll controller
+        this._scrollController = new ScrollController(this);
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      position: relative;
+      font-family:
+        'PT Sans',
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        'Helvetica Neue',
+        Arial,
+        'Noto Sans',
+        sans-serif,
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        'Segoe UI Symbol',
+        'Noto Color Emoji';
+      --bb-bg-color: ${unsafeCSS(THEME.gray[50])};
+      --bb-max-height: 600px;
+      --bb-avatar-bg: #ffffff;
+      --bb-avatar-color: ${unsafeCSS(THEME.gray[600])};
+    }
+
+    :host([theme='dark']) {
+      --bb-bg-color: ${unsafeCSS(THEME.gray[900])};
+      --bb-avatar-bg: ${unsafeCSS(THEME.slate[600])};
+      --bb-avatar-color: ${unsafeCSS(THEME.slate[200])};
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :host {
+        --bb-bg-color: ${unsafeCSS(THEME.gray[900])};
+        --bb-avatar-bg: ${unsafeCSS(THEME.slate[600])};
+        --bb-avatar-color: ${unsafeCSS(THEME.slate[200])};
+      }
+    }
+
+    .history-container {
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      max-height: var(--bb-max-height, 600px);
+      overflow-y: auto;
+      scroll-behavior: smooth;
+      background-color: transparent;
+      border-radius: 0.5rem;
+      /* Firefox scrollbar */
+      scrollbar-width: thin;
+      scrollbar-color: ${unsafeCSS(THEME.gray[400])} transparent;
+    }
+
+    /* Custom scrollbar for webkit browsers */
+    .history-container::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .history-container::-webkit-scrollbar-track {
+      background: transparent;
+      border-radius: 3px;
+    }
+
+    .history-container::-webkit-scrollbar-thumb {
+      background: ${unsafeCSS(THEME.gray[400])};
+      border-radius: 3px;
+    }
+
+    .history-container::-webkit-scrollbar-thumb:hover {
+      background: ${unsafeCSS(THEME.gray[500])};
+    }
+
+    /* Hide scrollbar */
+    :host([hide-scroll-bar]) .history-container {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+
+    :host([hide-scroll-bar]) .history-container::-webkit-scrollbar {
+      display: none;
+    }
+
+    /* Infinite mode */
+    :host([infinite]) .history-container {
+      max-height: none;
+      overflow-y: visible;
+    }
+
+    /* Empty state */
+    .empty-state {
+      text-align: center;
+      padding: 2rem;
+      color: ${unsafeCSS(THEME.gray[400])};
+      font-size: 0.875rem;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .empty-state {
+        color: ${unsafeCSS(THEME.gray[500])};
+      }
+
+      .history-container {
+        scrollbar-color: ${unsafeCSS(THEME.gray[600])} transparent;
+      }
+
+      .history-container::-webkit-scrollbar-thumb {
+        background: ${unsafeCSS(THEME.gray[600])};
+      }
+
+      .history-container::-webkit-scrollbar-thumb:hover {
+        background: ${unsafeCSS(THEME.gray[500])};
+      }
+    }
+
+    @media (max-width: 480px) {
+      .history-container {
+        max-height: var(--bb-max-height, 70vh);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .history-container {
+        scroll-behavior: auto;
+      }
+    }
+  `; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._initLightDOMObserver();
+        // Initial parse if content exists (for SSR or static HTML)
+        if (this.textContent?.trim()) {
+            this._parseLightDOM();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._mutationObserver?.disconnect();
+    }
+    willUpdate(changedProps) {
+        if (changedProps.has('_messages') ||
+            changedProps.has('_userAuthors')) {
+            this._processedMessages = this._computeGroups(this._messages);
+        }
+    }
+    updated(changedProps) {
+        if (changedProps.has('_processedMessages')) {
+            // Update scroll observer when messages change
+            this._scrollController.updateObservedMessage();
+            // Auto-scroll if not in infinite mode
+            if (!this.infinite) {
+                this._scrollController.scrollToBottom('auto');
+            }
+        }
+    }
+    /**
+     * Configure an author's avatar, side, and colors.
+     * Call before or after rendering — the component re-renders automatically.
+     */
+    setAuthor(name, options) {
+        this._userAuthors = new Map([...this._userAuthors, [name, options]]);
+        return this;
+    }
+    /**
+     * Remove a previously set author config.
+     */
+    removeAuthor(name) {
+        const newMap = new Map(this._userAuthors);
+        newMap.delete(name);
+        this._userAuthors = newMap;
+        return this;
+    }
+    /**
+     * Show or hide the loading overlay.
+     */
+    setLoading(isLoading) {
+        this.loading = isLoading;
+        return this;
+    }
+    /**
+     * Append a message to the history.
+     * Automatically scrolls to the new message with smooth animation.
+     */
+    appendMessage(input) {
+        const msg = {
+            author: input.author,
+            text: input.text,
+            timestamp: input.timestamp,
+        };
+        // Pause observation to avoid loop
+        this._mutationObserver?.disconnect();
+        // Update messages array
+        this._messages = [...this._messages, msg];
+        // Optionally sync back to light DOM (for consistency)
+        this._syncToLightDOM();
+        // Restore observation after current event loop
+        requestAnimationFrame(() => {
+            this._initLightDOMObserver();
+        });
+        // Scroll to bottom (skip in infinite mode)
+        if (!this.infinite) {
+            this._scrollController.scrollToBottom();
+        }
+        return this;
+    }
+    /**
+     * Scroll to the bottom of the message history.
+     */
+    scrollToBottom() {
+        this._scrollController.scrollToBottom();
+        return this;
+    }
+    /**
+     * Set a custom parser for message parsing
+     */
+    setParser(parser) {
+        this._parser = parser;
+        this._parseLightDOM();
+        return this;
+    }
+    /**
+     * Initialize MutationObserver for Light DOM observation
+     */
+    _initLightDOMObserver() {
+        if (this._mutationObserver) {
+            this._mutationObserver.disconnect();
+        }
+        this._mutationObserver = new MutationObserver(records => {
+            // Only react to light DOM changes, not shadow DOM
+            const hasLightDOMChange = records.some(r => {
+                const root = r.target.getRootNode();
+                return root === document || root === this;
+            });
+            if (hasLightDOMChange && !this._isParsing) {
+                this._parseLightDOM();
+            }
+        });
+        this._mutationObserver.observe(this, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+        });
+    }
+    /**
+     * Parse Light DOM textContent into messages
+     */
+    _parseLightDOM() {
+        const rawText = this.textContent || '';
+        if (!rawText.trim()) {
+            this._messages = [];
+            return;
+        }
+        this._isParsing = true;
+        const parsed = this._parser.parse(rawText);
+        // Only update if messages actually changed (avoid unnecessary re-renders)
+        if (this._messagesChanged(parsed)) {
+            this._messages = parsed;
+        }
+        // Hide light DOM content visually but keep it accessible
+        this._hideLightDOMContent();
+        requestAnimationFrame(() => {
+            this._isParsing = false;
+        });
+    }
+    /**
+     * Check if messages have changed
+     */
+    _messagesChanged(newMessages) {
+        if (newMessages.length !== this._messages.length)
+            return true;
+        return newMessages.some((msg, i) => {
+            const old = this._messages[i];
+            return (msg.author !== old?.author || msg.text !== old?.text || msg.timestamp !== old?.timestamp);
+        });
+    }
+    /**
+     * Hide light DOM content visually while keeping it for accessibility/parsing
+     */
+    _hideLightDOMContent() {
+        // The content is parsed and rendered in shadow DOM,
+        // so we don't need to hide it explicitly - the shadow DOM overlays it.
+        // But we can ensure proper accessibility by marking it.
+        this.setAttribute('aria-live', 'polite');
+        this.setAttribute('role', 'log');
+        this.setAttribute('aria-label', 'Message history');
+    }
+    /**
+     * Sync current messages back to light DOM
+     */
+    _syncToLightDOM() {
+        const content = this._messages
+            .map(m => {
+            const timestamp = m.timestamp ? `[${m.timestamp}] ` : '';
+            return `${timestamp}${m.author}: ${m.text}`;
+        })
+            .join('\n');
+        // Temporarily disconnect observer to prevent loop
+        this._mutationObserver?.disconnect();
+        this.textContent = content;
+        this._initLightDOMObserver();
+    }
+    /**
+     * Compute message groups for rendering
+     */
+    _computeGroups(messages) {
+        if (messages.length === 0)
+            return [];
+        const processed = [];
+        let currentGroupTimestamp;
+        for (let i = 0; i < messages.length; i++) {
+            const msg = messages[i];
+            const prev = i > 0 ? messages[i - 1] : null;
+            const next = i < messages.length - 1 ? messages[i + 1] : null;
+            // Determine if this is first from author
+            const isFirstFromAuthor = !this._canGroup(prev, msg);
+            // Start of new group - initialize group timestamp
+            if (isFirstFromAuthor) {
+                currentGroupTimestamp = msg.timestamp;
+            }
+            else if (!currentGroupTimestamp && msg.timestamp) {
+                currentGroupTimestamp = msg.timestamp;
+            }
+            // Determine if this is last in group
+            const isLastInGroup = !next || !this._canGroup(msg, next);
+            processed.push({
+                ...msg,
+                isFirstFromAuthor,
+                isLastInGroup,
+                groupTimestamp: isLastInGroup ? currentGroupTimestamp : undefined,
+            });
+            // Reset group timestamp at end of group
+            if (isLastInGroup) {
+                currentGroupTimestamp = undefined;
+            }
+        }
+        return processed;
+    }
+    /**
+     * Check if two messages can be grouped together
+     */
+    _canGroup(prev, curr) {
+        if (!prev)
+            return false;
+        if (prev.author !== curr.author)
+            return false;
+        if (prev.timestamp && curr.timestamp && prev.timestamp !== curr.timestamp) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Handle scroll button click
+     */
+    _onScrollButtonClick() {
+        this._scrollController.scrollToBottom();
+    }
+    render() {
+        const hasMessages = this._processedMessages.length > 0;
+        return html `
+      <div class="history-container" role="log" aria-live="polite" aria-label="Message history">
+        ${hasMessages
+            ? this._processedMessages.map((msg, index) => html `
+                <bb-message
+                  .author=${msg.author}
+                  .text=${msg.text}
+                  .timestamp=${msg.groupTimestamp || ''}
+                  ?subsequent=${!msg.isFirstFromAuthor}
+                  ?lastInGroup=${msg.isLastInGroup}
+                  data-index="${index}"
+                ></bb-message>
+              `)
+            : html ` <div class="empty-state">${this.loading ? '' : 'No messages'}</div> `}
+      </div>
+
+      ${!this.hideScrollButton && !this.infinite
+            ? html `
+            <bb-scroll-button
+              .visible=${this._scrollController.isVisible}
+              @bb-scroll-to-bottom=${this._onScrollButtonClick}
+            ></bb-scroll-button>
+          `
+            : nothing}
+      ${this.loading ? html `<bb-loading-overlay visible></bb-loading-overlay>` : nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], BBMsgHistory.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-scroll-bar' })
+], BBMsgHistory.prototype, "hideScrollBar", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], BBMsgHistory.prototype, "infinite", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-scroll-button' })
+], BBMsgHistory.prototype, "hideScrollButton", void 0);
+__decorate([
+    property({ reflect: true })
+], BBMsgHistory.prototype, "theme", void 0);
+__decorate([
+    state()
+], BBMsgHistory.prototype, "_messages", void 0);
+__decorate([
+    state()
+], BBMsgHistory.prototype, "_processedMessages", void 0);
+__decorate([
+    provide({ context: authorContext }),
+    state()
+], BBMsgHistory.prototype, "_userAuthors", void 0);
+BBMsgHistory = __decorate([
+    customElement('bb-msg-history')
+], BBMsgHistory);
+export { BBMsgHistory };

package/dist/components/bb-scroll-button.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+/**
+ * Scroll-to-bottom button component
+ * Emits bb-scroll-to-bottom event when clicked
+ */
+export declare class BBScrollButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    visible: boolean;
+    private _handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bb-scroll-button': BBScrollButton;
+    }
+}

package/dist/components/bb-scroll-button.js

@@ -0,0 +1,161 @@
+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';
+/**
+ * Scroll-to-bottom button component
+ * Emits bb-scroll-to-bottom event when clicked
+ */
+let BBScrollButton = class BBScrollButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      position: absolute;
+      bottom: 16px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+    }
+
+    .scroll-btn {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: #ffffff;
+      border: none;
+      color: ${unsafeCSS(THEME.gray[500])};
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(10px) scale(0);
+      transition:
+        opacity 0.2s ease,
+        transform 0.2s ease,
+        visibility 0.2s ease,
+        box-shadow 0.2s ease;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    .scroll-btn.visible {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0) scale(1);
+    }
+
+    .scroll-btn:hover {
+      color: ${unsafeCSS(THEME.gray[700])};
+      transform: translateY(-2px) scale(1.05);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    }
+
+    .scroll-btn:active {
+      transform: translateY(-1px) scale(0.95);
+    }
+
+    .scroll-btn svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    @media (max-width: 480px) {
+      :host {
+        bottom: 12px;
+      }
+
+      .scroll-btn {
+        width: 32px;
+        height: 32px;
+      }
+
+      .scroll-btn svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .scroll-btn {
+        transition:
+          opacity 0.15s ease,
+          visibility 0.15s ease;
+        transform: translateY(10px) scale(0);
+      }
+
+      .scroll-btn.visible {
+        transform: translateY(0) scale(1);
+      }
+
+      .scroll-btn:hover {
+        transform: translateY(-2px) scale(1);
+      }
+
+      .scroll-btn:active {
+        transform: translateY(0) scale(0.95);
+      }
+    }
+
+    /* Dark mode */
+    @media (prefers-color-scheme: dark) {
+      .scroll-btn {
+        background: ${unsafeCSS(THEME.slate[800])};
+        color: ${unsafeCSS(THEME.slate[300])};
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+      }
+
+      .scroll-btn:hover {
+        color: ${unsafeCSS(THEME.slate[200])};
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+      }
+    }
+  `; }
+    _handleClick() {
+        this.dispatchEvent(new CustomEvent('bb-scroll-to-bottom', {
+            bubbles: true,
+            composed: true,
+            detail: { behavior: 'smooth' },
+        }));
+    }
+    render() {
+        return html `
+      <button
+        class="scroll-btn ${this.visible ? 'visible' : ''}"
+        @click=${this._handleClick}
+        aria-label="Scroll to bottom"
+        title="Scroll to bottom"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], BBScrollButton.prototype, "visible", void 0);
+BBScrollButton = __decorate([
+    customElement('bb-scroll-button')
+], BBScrollButton);
+export { BBScrollButton };

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+ * Timestamp component - displays message timestamp
+ */
+export declare class BBTimestamp extends LitElement {
+    static styles: import("lit").CSSResult;
+    value: string;
+    side: 'left' | 'right';
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bb-timestamp': BBTimestamp;
+    }
+}