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

package/dist/components/bb-custom-avatar.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * Custom avatar component - displays SVG, img, emoji, or HTML content
+ * Includes tooltip on hover
+ */
+export declare class BBCustomAvatar extends LitElement {
+    static styles: import("lit").CSSResult;
+    tooltip: string;
+    private _tooltipRef;
+    private _showTooltip;
+    private _onMouseEnter;
+    private _onMouseLeave;
+    private _positionTooltip;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bb-custom-avatar': BBCustomAvatar;
+    }
+}

package/dist/components/bb-custom-avatar.js

@@ -0,0 +1,145 @@
+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';
+/**
+ * Custom avatar component - displays SVG, img, emoji, or HTML content
+ * Includes tooltip on hover
+ */
+let BBCustomAvatar = class BBCustomAvatar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tooltip = '';
+        this._tooltipRef = null;
+        this._showTooltip = false;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      width: 1.75rem;
+      height: 1.75rem;
+    }
+
+    .avatar-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      background: #ffffff;
+      border-radius: 50%;
+      overflow: hidden;
+      cursor: help;
+    }
+
+    .avatar {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    .avatar ::slotted(svg) {
+      width: 100%;
+      height: 100%;
+    }
+
+    .avatar ::slotted(img) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    /* Tooltip styles */
+    .avatar-tooltip {
+      position: fixed;
+      padding: 0.25rem 0.5rem;
+      background: ${unsafeCSS(THEME.gray[800])};
+      color: ${unsafeCSS(THEME.gray[50])};
+      font-size: 0.75rem;
+      border-radius: 0.25rem;
+      white-space: nowrap;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      z-index: 10000;
+      font-weight: 500;
+      letter-spacing: 0.02em;
+      transition:
+        opacity 0.2s ease,
+        visibility 0.2s ease;
+    }
+
+    .avatar-tooltip::after {
+      content: '';
+      position: absolute;
+      top: calc(100% - 1px);
+      left: 50%;
+      transform: translateX(-50%);
+      border: 4px solid transparent;
+      border-top-color: ${unsafeCSS(THEME.gray[800])};
+    }
+
+    .avatar-tooltip.visible {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    @media (max-width: 480px) {
+      :host {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+    }
+  `; }
+    _onMouseEnter() {
+        this._showTooltip = true;
+        this._positionTooltip();
+        this.requestUpdate();
+    }
+    _onMouseLeave() {
+        this._showTooltip = false;
+        this.requestUpdate();
+    }
+    _positionTooltip() {
+        if (!this._tooltipRef || !this._showTooltip)
+            return;
+        const rect = this.getBoundingClientRect();
+        const tooltipRect = this._tooltipRef.getBoundingClientRect();
+        this._tooltipRef.style.left = `${rect.left + rect.width / 2 - tooltipRect.width / 2}px`;
+        this._tooltipRef.style.top = `${rect.top - tooltipRect.height - 8}px`;
+    }
+    render() {
+        return html `
+      <div
+        class="avatar-wrapper"
+        @mouseenter=${this._onMouseEnter}
+        @mouseleave=${this._onMouseLeave}
+      >
+        <div class="avatar"><slot></slot></div>
+      </div>
+      <div
+        class="avatar-tooltip ${this._showTooltip ? 'visible' : ''}"
+        ${(el) => {
+            if (el)
+                this._tooltipRef = el;
+        }}
+      >
+        ${this.tooltip}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], BBCustomAvatar.prototype, "tooltip", void 0);
+BBCustomAvatar = __decorate([
+    customElement('bb-custom-avatar')
+], BBCustomAvatar);
+export { BBCustomAvatar };

package/dist/components/bb-letter-avatar.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+/**
+ * Letter avatar component - displays a letter in a circular container
+ */
+export declare class BBLetterAvatar extends LitElement {
+    static styles: import("lit").CSSResult;
+    letter: string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bb-letter-avatar': BBLetterAvatar;
+    }
+}

package/dist/components/bb-letter-avatar.js

@@ -0,0 +1,61 @@
+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';
+/**
+ * Letter avatar component - displays a letter in a circular container
+ */
+let BBLetterAvatar = class BBLetterAvatar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.letter = '';
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      width: 1.75rem;
+      height: 1.75rem;
+    }
+
+    .avatar {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--bb-avatar-bg, #ffffff);
+      color: var(--bb-avatar-color, ${unsafeCSS(THEME.gray[600])});
+      font-size: 14px;
+      font-weight: 600;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    @media (max-width: 480px) {
+      :host {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      .avatar {
+        font-size: 12px;
+      }
+    }
+  `; }
+    render() {
+        return html `<div class="avatar">${this.letter}</div>`;
+    }
+};
+__decorate([
+    property()
+], BBLetterAvatar.prototype, "letter", void 0);
+BBLetterAvatar = __decorate([
+    customElement('bb-letter-avatar')
+], BBLetterAvatar);
+export { BBLetterAvatar };

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 };