@bbki.ng/bb-msg-history 0.3.0 → 0.5.0

package/dist/src/const/styles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Main component styles
+ */
+export declare const MAIN_STYLES: string;
+/**
+ * Empty state styles
+ */
+export declare const EMPTY_STYLES: string;
+/**
+ * Fallback styles for when custom elements are not supported
+ */
+export declare const FALLBACK_STYLES: string;

package/dist/src/const/styles.js

@@ -0,0 +1,425 @@
+import { THEME } from './theme.js';
+/**
+ * Main component styles
+ */
+export const MAIN_STYLES = `
+  :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: ${THEME.gray[50]};
+    --bb-max-height: 600px;
+    --bb-avatar-bg: #ffffff;
+    --bb-avatar-color: ${THEME.gray[600]};
+  }
+
+  .history {
+    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: ${THEME.gray[400]} transparent;
+  }
+
+  /* Custom scrollbar for webkit browsers */
+  .history::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .history::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 3px;
+  }
+
+  .history::-webkit-scrollbar-thumb {
+    background: ${THEME.gray[400]};
+    border-radius: 3px;
+  }
+
+  .history::-webkit-scrollbar-thumb:hover {
+    background: ${THEME.gray[500]};
+  }
+
+  /* Scroll to bottom button */
+  .scroll-to-bottom {
+    position: absolute;
+    bottom: 16px;
+    left: 50%;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: transparent;
+    border: none;
+    color: ${THEME.gray[500]};
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(-50%) translateY(10px) scale(0.9);
+    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+  }
+
+  .scroll-to-bottom.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+
+  .scroll-to-bottom:hover {
+    color: ${THEME.gray[700]};
+    transform: translateX(-50%) translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  }
+
+  .scroll-to-bottom:active {
+    transform: translateX(-50%) translateY(0) scale(0.95);
+  }
+
+  .scroll-to-bottom svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* Message row layout */
+  .msg-row {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.5rem;
+    max-width: 80%;
+  }
+
+  .msg-row--left {
+    align-self: flex-start;
+    margin-right: auto;
+  }
+
+  .msg-row--right {
+    align-self: flex-end;
+    margin-left: auto;
+  }
+
+  .msg-row--subsequent {
+    margin-top: 0.125rem;
+  }
+
+  .msg-row--new-author {
+    margin-top: 0.75rem;
+  }
+
+  .msg-row--new-author:first-child {
+    margin-top: 0;
+  }
+
+  /* Avatar container */
+  .avatar-wrapper {
+    position: relative;
+    flex-shrink: 0;
+    width: 1.75rem;
+    height: 1.75rem;
+    background: #ffffff;
+    border-radius: 50%;
+    overflow: hidden;
+    cursor: help;
+  }
+
+  .avatar-wrapper--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .avatar {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .avatar svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Hover tooltip */
+  .avatar-tooltip {
+    position: fixed;
+    padding: 0.25rem 0.5rem;
+    background: ${THEME.gray[800]};
+    color: ${THEME.gray[50]};
+    font-size: 0.75rem;
+    border-radius: 0.25rem;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: 10;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+  }
+
+  .avatar-tooltip::after {
+    content: '';
+    position: absolute;
+    top: calc(100% - 1px);
+    left: 50%;
+    transform: translateX(-50%);
+    border: 4px solid transparent;
+    border-top-color: ${THEME.gray[800]};
+  }
+
+  .avatar-wrapper:hover .avatar-tooltip {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  /* Message content area */
+  .msg-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .msg-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: 1rem;
+  }
+
+  /* Left bubble */
+  .msg-bubble--left {
+    border-bottom-left-radius: 0.25rem;
+    background-color: ${THEME.gray[200]};
+    color: ${THEME.gray[900]};
+  }
+
+  /* Right bubble */
+  .msg-bubble--right {
+    border-bottom-right-radius: 0.25rem;
+    color: ${THEME.gray[900]};
+  }
+
+  /* Empty state */
+  .empty-state {
+    text-align: center;
+    padding: 2rem;
+    color: ${THEME.gray[400]};
+    font-size: 0.875rem;
+  }
+
+  /* Mobile responsive */
+  @media (max-width: 480px) {
+    .history {
+      max-height: var(--bb-max-height, 70vh);
+    }
+    
+    .msg-row {
+      max-width: 85%;
+    }
+    
+    .msg-bubble {
+      font-size: 0.9375rem;
+      padding: 0.5rem 0.75rem;
+    }
+    
+    .avatar-wrapper {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    .scroll-to-bottom {
+      width: 32px;
+      height: 32px;
+      bottom: 12px;
+    }
+
+    .scroll-to-bottom svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  /* Dark mode styles - shared between media query and attribute */
+  :host([theme="dark"]) {
+    --bb-bg-color: ${THEME.gray[900]};
+    --bb-avatar-bg: ${THEME.slate[600]};
+    --bb-avatar-color: ${THEME.slate[200]};
+  }
+
+  :host([theme="dark"]) .history {
+    background-color: transparent;
+    scrollbar-color: ${THEME.gray[600]} transparent;
+  }
+
+  :host([theme="dark"]) .history::-webkit-scrollbar-thumb {
+    background: ${THEME.gray[600]};
+  }
+
+  :host([theme="dark"]) .history::-webkit-scrollbar-thumb:hover {
+    background: ${THEME.gray[500]};
+  }
+
+  :host([theme="dark"]) .msg-bubble {
+    color: ${THEME.slate[100]};
+  }
+
+  :host([theme="dark"]) .msg-bubble--right {
+    background-color: ${THEME.slate[700]};
+    color: ${THEME.slate[100]};
+  }
+
+  :host([theme="dark"]) .msg-bubble--left {
+    background-color: ${THEME.slate[800]};
+    border: 1px solid ${THEME.slate[700]};
+    color: ${THEME.slate[100]};
+  }
+
+  :host([theme="dark"]) .avatar-wrapper {
+    background: ${THEME.slate[600]};
+  }
+
+  :host([theme="dark"]) .empty-state {
+    color: ${THEME.gray[500]};
+  }
+
+  :host([theme="dark"]) .scroll-to-bottom {
+    background: ${THEME.slate[800]};
+    border: none;
+    color: ${THEME.slate[300]};
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+  }
+
+  :host([theme="dark"]) .scroll-to-bottom:hover {
+    color: ${THEME.slate[200]};
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  }
+
+  /* System dark mode preference */
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --bb-bg-color: ${THEME.gray[900]};
+      --bb-avatar-bg: ${THEME.slate[600]};
+      --bb-avatar-color: ${THEME.slate[200]};
+    }
+
+    .history {
+      background-color: transparent;
+      scrollbar-color: ${THEME.gray[600]} transparent;
+    }
+
+    .history::-webkit-scrollbar-thumb {
+      background: ${THEME.gray[600]};
+    }
+
+    .history::-webkit-scrollbar-thumb:hover {
+      background: ${THEME.gray[500]};
+    }
+
+    .msg-bubble {
+      color: ${THEME.slate[100]};
+    }
+
+    .msg-bubble--right {
+      background-color: ${THEME.slate[700]};
+      color: ${THEME.slate[100]};
+    }
+
+    .msg-bubble--left {
+      background-color: ${THEME.slate[800]};
+      border: 1px solid ${THEME.slate[700]};
+      color: ${THEME.slate[100]};
+    }
+
+    .avatar-wrapper {
+      background: ${THEME.slate[600]};
+    }
+
+    .empty-state {
+      color: ${THEME.gray[500]};
+    }
+
+    .scroll-to-bottom {
+      background: ${THEME.slate[800]};
+      border: none;
+      color: ${THEME.slate[300]};
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+    }
+
+    .scroll-to-bottom:hover {
+      color: ${THEME.slate[200]};
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .history {
+      scroll-behavior: auto;
+    }
+
+    .scroll-to-bottom {
+      transition: opacity 0.15s ease, visibility 0.15s ease;
+      transform: translateX(-50%);
+    }
+
+    .scroll-to-bottom.visible {
+      transform: translateX(-50%);
+    }
+
+    .scroll-to-bottom:hover {
+      transform: translateX(-50%);
+    }
+
+    .scroll-to-bottom:active {
+      transform: translateX(-50%);
+    }
+  }
+`;
+/**
+ * Empty state styles
+ */
+export const EMPTY_STYLES = `
+  :host { display: block; }
+  .empty-state {
+    text-align: center;
+    padding: 2rem;
+    color: ${THEME.gray[400]};
+    font-size: 0.875rem;
+    font-family: inherit;
+  }
+`;
+/**
+ * Fallback styles for when custom elements are not supported
+ */
+export const FALLBACK_STYLES = `
+  background: ${THEME.gray[100]};
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: ${THEME.gray[900]};
+  margin: 0;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  border: 1px solid ${THEME.gray[200]};
+`;

package/dist/src/const/theme.d.ts

@@ -0,0 +1,6 @@
+import type { Theme } from '../types/index.js';
+/**
+ * Theme color palette
+ * Based on Tailwind-like gray scale and custom pink colors
+ */
+export declare const THEME: Theme;

package/dist/src/const/theme.js

@@ -0,0 +1,44 @@
+/**
+ * Theme color palette
+ * Based on Tailwind-like gray scale and custom pink colors
+ */
+export const THEME = {
+    gray: {
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#f5f5f5',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827',
+    },
+    slate: {
+        50: '#f8fafc',
+        100: '#f1f5f9',
+        200: '#e2e8f0',
+        300: '#cbd5e1',
+        400: '#94a3b8',
+        500: '#64748b',
+        600: '#475569',
+        700: '#334155',
+        800: '#1e293b',
+        900: '#0f172a',
+    },
+    red: {
+        50: '#fef2f2',
+        100: '#fee2e2',
+        200: '#fecaca',
+        300: '#fca5a5',
+        400: '#f87171',
+        500: '#ef4444',
+        600: '#dc2626',
+    },
+    yyPink: {
+        50: '#fdf4f4',
+        100: '#fbd1d2',
+        150: '#f8babc',
+    },
+};

package/dist/src/index.d.ts

@@ -0,0 +1,9 @@
+import { BBMsgHistory } from './component.js';
+export { BBMsgHistory };
+export { define } from './utils/registration.js';
+export type { AuthorOptions, AuthorConfig, Message } from './types/index.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'bb-msg-history': BBMsgHistory;
+    }
+}

package/dist/src/index.js

@@ -0,0 +1,12 @@
+import { BBMsgHistory } from './component.js';
+import { initBBMsgHistory } from './utils/registration.js';
+// Auto-initialize
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => initBBMsgHistory(BBMsgHistory));
+}
+else {
+    initBBMsgHistory(BBMsgHistory);
+}
+// Re-exports
+export { BBMsgHistory };
+export { define } from './utils/registration.js';

package/dist/src/types/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Type definitions for bb-msg-history
+ */
+/** Single message structure */
+export interface Message {
+    author: string;
+    text: string;
+}
+/** Internal author configuration with resolved values */
+export interface AuthorConfig {
+    avatar: string;
+    bubbleColor: string;
+    textColor: string;
+    side: 'left' | 'right';
+    isCustomAvatar: boolean;
+}
+/** User-facing options for configuring an author */
+export interface AuthorOptions {
+    /** Avatar HTML string: SVG, <img>, emoji, or plain text */
+    avatar?: string;
+    /** Which side the messages appear on */
+    side?: 'left' | 'right';
+    /** Bubble background color */
+    bubbleColor?: string;
+    /** Text color inside bubble */
+    textColor?: string;
+}
+/** Theme color palette */
+export interface Theme {
+    gray: Record<string, string>;
+    slate: Record<string, string>;
+    red: Record<string, string>;
+    yyPink: Record<string, string>;
+}

package/dist/src/types/index.js

@@ -0,0 +1,4 @@
+/**
+ * Type definitions for bb-msg-history
+ */
+export {};

package/dist/src/utils/author-resolver.d.ts

@@ -0,0 +1,11 @@
+import type { AuthorConfig, AuthorOptions } from '../types/index.js';
+/**
+ * Resolve author configuration with the following priority:
+ * 1. User config (exact match)
+ * 2. User config (fuzzy match - author name contains configured key)
+ * 3. Built-in first-char avatar authors
+ * 4. Built-in exact match
+ * 5. Built-in fuzzy match
+ * 6. Default: letter avatar, left side
+ */
+export declare function resolveAuthorConfig(author: string, userAuthors: Map<string, AuthorOptions>): AuthorConfig;

package/dist/src/utils/author-resolver.js

@@ -0,0 +1,75 @@
+import { THEME } from '../const/theme.js';
+import { AUTHOR_CONFIG, FIRST_CHAR_AVATAR_AUTHORS } from '../const/authors.js';
+import { wrapAvatarHtml } from './html.js';
+import { generateLetterAvatar } from './avatar.js';
+/**
+ * Resolve author configuration with the following priority:
+ * 1. User config (exact match)
+ * 2. User config (fuzzy match - author name contains configured key)
+ * 3. Built-in first-char avatar authors
+ * 4. Built-in exact match
+ * 5. Built-in fuzzy match
+ * 6. Default: letter avatar, left side
+ */
+export function resolveAuthorConfig(author, userAuthors) {
+    // 1. User custom config (exact match)
+    const userConfig = userAuthors.get(author);
+    if (userConfig) {
+        return {
+            avatar: userConfig.avatar
+                ? wrapAvatarHtml(userConfig.avatar)
+                : generateLetterAvatar(author.charAt(0).toUpperCase()),
+            bubbleColor: userConfig.bubbleColor || THEME.gray[50],
+            textColor: userConfig.textColor || THEME.gray[900],
+            side: userConfig.side || 'left',
+            isCustomAvatar: !!userConfig.avatar,
+        };
+    }
+    // 2. User custom config (fuzzy match)
+    for (const [key, cfg] of userAuthors.entries()) {
+        if (author.includes(key)) {
+            return {
+                avatar: cfg.avatar
+                    ? wrapAvatarHtml(cfg.avatar)
+                    : generateLetterAvatar(author.charAt(0).toUpperCase()),
+                bubbleColor: cfg.bubbleColor || THEME.gray[50],
+                textColor: cfg.textColor || THEME.gray[900],
+                side: cfg.side || 'left',
+                isCustomAvatar: !!cfg.avatar,
+            };
+        }
+    }
+    // 3. Built-in first-char avatar authors
+    if (FIRST_CHAR_AVATAR_AUTHORS.has(author)) {
+        const config = AUTHOR_CONFIG[author];
+        const firstChar = author.charAt(0);
+        return {
+            ...(config || {
+                bubbleColor: THEME.gray[50],
+                textColor: THEME.gray[900],
+                side: 'left',
+            }),
+            avatar: generateLetterAvatar(firstChar),
+            isCustomAvatar: false,
+        };
+    }
+    // 4. Built-in exact match
+    if (AUTHOR_CONFIG[author]) {
+        return { ...AUTHOR_CONFIG[author], isCustomAvatar: true };
+    }
+    // 5. Built-in fuzzy match
+    for (const [key, config] of Object.entries(AUTHOR_CONFIG)) {
+        if (author.includes(key)) {
+            return { ...config, isCustomAvatar: true };
+        }
+    }
+    // 6. Default: letter avatar, left side
+    const firstChar = author.charAt(0).toUpperCase();
+    return {
+        avatar: generateLetterAvatar(firstChar),
+        bubbleColor: THEME.gray[50],
+        textColor: THEME.gray[900],
+        side: 'left',
+        isCustomAvatar: false,
+    };
+}

package/dist/src/utils/avatar.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generate a letter avatar with the given letter
+ */
+export declare function generateLetterAvatar(letter: string): string;

package/dist/src/utils/avatar.js

@@ -0,0 +1,18 @@
+import { THEME } from '../const/theme.js';
+/**
+ * Generate a letter avatar with the given letter
+ */
+export function generateLetterAvatar(letter) {
+    return `<div style="
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bb-avatar-bg, #ffffff);
+    color: var(--bb-avatar-color, ${THEME.gray[600]});
+    font-size: 14px;
+    font-weight: 600;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+  ">${letter}</div>`;
+}

package/dist/src/utils/html.d.ts

@@ -0,0 +1,12 @@
+/**
+ * HTML utility functions
+ */
+/**
+ * Escape HTML special characters to prevent XSS
+ */
+export declare function escapeHtml(str: string): string;
+/**
+ * Wrap plain text/emoji avatar in a styled container
+ * If HTML tags are present, return as-is
+ */
+export declare function wrapAvatarHtml(html: string): string;