@bbki.ng/bb-msg-history 0.2.0 → 0.4.0

package/src/utils/author-resolver.ts

@@ -0,0 +1,81 @@
+import type { AuthorConfig, AuthorOptions } from '../types/index.js';
+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: string,
+  userAuthors: Map<string, AuthorOptions>
+): AuthorConfig {
+  // 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' as const }),
+      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/src/utils/avatar.ts

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

package/src/utils/html.ts

@@ -0,0 +1,35 @@
+/**
+ * HTML utility functions
+ */
+
+/**
+ * Escape HTML special characters to prevent XSS
+ */
+export function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+/**
+ * Wrap plain text/emoji avatar in a styled container
+ * If HTML tags are present, return as-is
+ */
+export function wrapAvatarHtml(html: string): string {
+  // If it looks like a single emoji or short text (no HTML tags), wrap in a styled div
+  if (!html.includes('<')) {
+    return `<div style="
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      line-height: 1;
+    ">${html}</div>`;
+  }
+  return html;
+}

package/src/utils/message-builder.ts

@@ -0,0 +1,58 @@
+import type { AuthorConfig } from '../types/index.js';
+import { escapeHtml } from './html.js';
+
+/**
+ * Build avatar HTML string
+ */
+export function buildAvatarHtml(author: string, config: AuthorConfig, showAvatar: boolean): string {
+  return `
+    <div class="avatar-wrapper ${showAvatar ? '' : 'avatar-wrapper--hidden'}" 
+         data-author="${escapeHtml(author)}">
+      <div class="avatar">${config.avatar}</div>
+      <div class="avatar-tooltip">${escapeHtml(author)}</div>
+    </div>
+  `;
+}
+
+/**
+ * Build a single message row HTML string
+ */
+export function buildMessageRowHtml(
+  author: string,
+  text: string,
+  config: AuthorConfig,
+  isSubsequent: boolean
+): string {
+  const showAvatar = !isSubsequent;
+  const side = config.side;
+  const avatarHtml = buildAvatarHtml(author, config, showAvatar);
+  
+  return `
+    <div class="msg-row msg-row--${side} ${isSubsequent ? 'msg-row--subsequent' : 'msg-row--new-author'}">
+      ${side === 'left' ? avatarHtml : ''}
+      
+      <div class="msg-content">
+        <div class="msg-bubble msg-bubble--${side}" 
+             style="background-color: ${config.bubbleColor}; color: ${config.textColor};">
+          ${escapeHtml(text)}
+        </div>
+      </div>
+      
+      ${side === 'right' ? avatarHtml : ''}
+    </div>
+  `;
+}
+
+/**
+ * Setup tooltip for a single avatar wrapper element
+ */
+export function setupTooltipForElement(wrapper: Element): void {
+  wrapper.addEventListener('mouseenter', () => {
+    const tooltip = wrapper.querySelector('.avatar-tooltip') as HTMLElement;
+    if (!tooltip) return;
+    const rect = wrapper.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    tooltip.style.left = `${rect.left + rect.width / 2 - tooltipRect.width / 2}px`;
+    tooltip.style.top = `${rect.top - tooltipRect.height - 8}px`;
+  });
+}

package/src/utils/message-parser.ts

@@ -0,0 +1,27 @@
+import type { Message } from '../types/index.js';
+
+/**
+ * Parse text content into message array
+ * Format: `author: text` (one message per line)
+ */
+export function parseMessages(textContent: string | null): Message[] {
+  const raw = textContent || '';
+  const messages: Message[] = [];
+  
+  for (const line of raw.split('\n')) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    
+    const colonIdx = trimmed.indexOf(':');
+    if (colonIdx <= 0) continue;
+    
+    const author = trimmed.slice(0, colonIdx).trim();
+    const text = trimmed.slice(colonIdx + 1).trim();
+    
+    if (author && text) {
+      messages.push({ author, text });
+    }
+  }
+  
+  return messages;
+}

package/src/utils/registration.ts

@@ -0,0 +1,35 @@
+import { THEME } from '../const/theme.js';
+import { FALLBACK_STYLES } from '../const/styles.js';
+
+/**
+ * Define the custom element
+ */
+export function define(
+  BBMsgHistoryClass: CustomElementConstructor,
+  tagName = 'bb-msg-history'
+): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, tagName === 'bb-msg-history'
+      ? BBMsgHistoryClass
+      : class extends BBMsgHistoryClass {}
+    );
+  }
+}
+
+/**
+ * Initialize with fallback for unsupported browsers
+ */
+export function initBBMsgHistory(BBMsgHistoryClass: CustomElementConstructor): void {
+  try {
+    define(BBMsgHistoryClass);
+  } catch (error) {
+    console.warn('BBMsgHistory registration failed, falling back to plain text:', error);
+    
+    document.querySelectorAll('bb-msg-history').forEach(el => {
+      const pre = document.createElement('pre');
+      pre.style.cssText = FALLBACK_STYLES;
+      pre.textContent = el.textContent || '';
+      el.replaceWith(pre);
+    });
+  }
+}

package/src/utils/scroll-button.ts

@@ -0,0 +1,12 @@
+/**
+ * Build scroll-to-bottom button HTML string
+ */
+export function buildScrollButtonHtml(): string {
+  return `
+    <button class="scroll-to-bottom" 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>
+  `;
+}

package/src/utils/tooltip.ts

@@ -0,0 +1,16 @@
+/**
+ * Setup dynamic tooltip positioning
+ * Tooltips are positioned fixed to avoid overflow clipping from parent containers
+ */
+export function setupTooltips(shadowRoot: ShadowRoot): void {
+  shadowRoot.querySelectorAll('.avatar-wrapper').forEach(wrapper => {
+    wrapper.addEventListener('mouseenter', () => {
+      const tooltip = wrapper.querySelector('.avatar-tooltip') as HTMLElement;
+      if (!tooltip) return;
+      const rect = wrapper.getBoundingClientRect();
+      const tooltipRect = tooltip.getBoundingClientRect();
+      tooltip.style.left = `${rect.left + rect.width / 2 - tooltipRect.width / 2}px`;
+      tooltip.style.top = `${rect.top - tooltipRect.height - 8}px`;
+    });
+  });
+}