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

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/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`;
+    });
+  });
+}