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

package/dist/component.d.ts

@@ -3,6 +3,7 @@ export declare class BBMsgHistory extends HTMLElement {
     private _mutationObserver?;
     private _userAuthors;
     private _lastAuthor;
+    private _lastGroupTimestamp;
     private _scrollButtonVisible;
     static get observedAttributes(): string[];
     constructor();

package/dist/component.js

@@ -69,12 +69,30 @@ export class BBMsgHistory extends HTMLElement {
         }
         const author = message.author;
         const text = message.text;
+        const timestamp = message.timestamp;
         const config = resolveAuthorConfig(author, this._userAuthors);
-        const isFirstFromAuthor = author !== this._lastAuthor;
+        // Check if this can group with the last message
+        // Same author AND (no timestamp conflict)
+        const canGroupWithLast = author === this._lastAuthor &&
+            (!this._lastGroupTimestamp || !timestamp || this._lastGroupTimestamp === timestamp);
+        const isFirstFromAuthor = !canGroupWithLast;
         this._lastAuthor = author;
         const isSubsequent = !isFirstFromAuthor;
+        // Update group timestamp tracking
+        if (isFirstFromAuthor) {
+            // Start new group
+            this._lastGroupTimestamp = timestamp;
+        }
+        else if (!this._lastGroupTimestamp && timestamp) {
+            // If no timestamp in group yet and current has one, use it
+            this._lastGroupTimestamp = timestamp;
+        }
+        // When appending, we assume this IS the last in group (for now)
+        // If another message from same author comes, we'll re-render
+        const isLastInGroup = true;
+        const groupTimestamp = this._lastGroupTimestamp;
         // Use utility function to build message HTML
-        const msgHtml = buildMessageRowHtml(author, text, config, isSubsequent);
+        const msgHtml = buildMessageRowHtml(author, text, config, isSubsequent, groupTimestamp, isLastInGroup);
         // Append to container
         container.insertAdjacentHTML('beforeend', msgHtml);
         // Setup tooltip for new element using utility function
@@ -117,18 +135,59 @@ export class BBMsgHistory extends HTMLElement {
         const messages = parseMessages(this.textContent);
         if (messages.length === 0) {
             this._lastAuthor = '';
+            this._lastGroupTimestamp = undefined;
             this._renderEmpty();
             return;
         }
+        // Helper: Check if two messages can be grouped (same author, no timestamp conflict)
+        const canGroup = (prev, curr) => {
+            if (prev.author !== curr.author)
+                return false;
+            // Different timestamps = break group
+            if (prev.timestamp && curr.timestamp && prev.timestamp !== curr.timestamp) {
+                return false;
+            }
+            return true;
+        };
+        // First pass: determine which messages are last in their group
+        const lastInGroupFlags = messages.map((msg, i) => {
+            const next = messages[i + 1];
+            return !next || !canGroup(msg, next);
+        });
+        // Second pass: collect the timestamp for each group
+        // Use the first non-empty timestamp in the group
+        const groupTimestamps = new Map();
+        let currentGroupTimestamp;
+        messages.forEach((msg, i) => {
+            // Start of a new group
+            if (i === 0 || !canGroup(messages[i - 1], msg)) {
+                currentGroupTimestamp = msg.timestamp;
+            }
+            else if (!currentGroupTimestamp && msg.timestamp) {
+                // If no timestamp yet and current msg has one, use it
+                currentGroupTimestamp = msg.timestamp;
+            }
+            // If this is the last message in the group, save the timestamp
+            if (lastInGroupFlags[i]) {
+                groupTimestamps.set(i, currentGroupTimestamp);
+                currentGroupTimestamp = undefined;
+            }
+        });
+        // Third pass: build HTML
         let lastAuthor = '';
         const messagesHtml = messages
-            .map(({ author, text }) => {
+            .map((msg, i) => {
+            const { author, text } = msg;
             const config = resolveAuthorConfig(author, this._userAuthors);
-            const isFirstFromAuthor = author !== lastAuthor;
+            // Determine if this is a new author group (can't group with previous)
+            const isFirstFromAuthor = i === 0 || !canGroup(messages[i - 1], msg);
             lastAuthor = author;
             const isSubsequent = !isFirstFromAuthor;
+            // Get timestamp if this is the last in group
+            const isLastInGroup = lastInGroupFlags[i];
+            const groupTimestamp = groupTimestamps.get(i);
             // Use utility function to build message HTML
-            return buildMessageRowHtml(author, text, config, isSubsequent);
+            return buildMessageRowHtml(author, text, config, isSubsequent, groupTimestamp, isLastInGroup);
         })
             .join('');
         this._lastAuthor = lastAuthor;

package/dist/const/styles.js

@@ -113,7 +113,7 @@ export const MAIN_STYLES = `
   }
 
   .msg-row--subsequent {
-    margin-top: 0.125rem;
+    margin-top: 0.375rem;
   }
 
   .msg-row--new-author {
@@ -192,6 +192,34 @@ export const MAIN_STYLES = `
   .msg-content {
     display: flex;
     flex-direction: column;
+    position: relative;
+  }
+
+  /* Timestamp styles */
+  .msg-timestamp {
+    position: absolute;
+    font-size: 11px;
+    color: ${THEME.gray[400]};
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+    white-space: nowrap;
+    bottom: -12px;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  .msg-timestamp--left {
+    left: 0;
+  }
+
+  .msg-timestamp--right {
+    right: 0;
+  }
+
+  .msg-row:hover .msg-timestamp {
+    opacity: 1;
+    visibility: visible;
   }
 
   .msg-bubble {

package/dist/index.dev.js

@@ -1 +1,12 @@
-import{BBMsgHistory}from"./component.js";import{initBBMsgHistory}from"./utils/registration.js";"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>initBBMsgHistory(BBMsgHistory)):initBBMsgHistory(BBMsgHistory);export{BBMsgHistory};export{define}from"./utils/registration.js";
+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/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["BBMsgHistory","initBBMsgHistory","document","readyState","addEventListener","define"],"sources":["dist/index.js"],"mappings":"OAAOA,iBAAiB,wBAAwBC,qBAAqB,0BAA0B,YAAYC,SAASC,WAAWD,SAASE,iBAAiB,mBAAmB,IAAIH,iBAAiBD,eAAeC,iBAAiBD,qBAAqBA,qBAAqBK,WAAW","ignoreList":[]}
+{"version":3,"names":["BBMsgHistory","initBBMsgHistory","document","readyState","addEventListener","define"],"sources":["dist/index.js"],"mappings":"OAASA,iBAAoB,wBACpBC,qBAAwB,0BAEL,YAAxBC,SAASC,WACTD,SAASE,iBAAiB,mBAAoB,IAAMH,iBAAiBD,eAGrEC,iBAAiBD,qBAGZA,qBACAK,WAAc","ignoreList":[]}

package/dist/types/index.d.ts

@@ -5,6 +5,7 @@
 export interface Message {
     author: string;
     text: string;
+    timestamp?: string;
 }
 /** Internal author configuration with resolved values */
 export interface AuthorConfig {

package/dist/utils/message-builder.d.ts

@@ -3,10 +3,14 @@ import type { AuthorConfig } from '../types/index.js';
  * Build avatar HTML string
  */
 export declare function buildAvatarHtml(author: string, config: AuthorConfig, showAvatar: boolean): string;
+/**
+ * Build timestamp HTML string
+ */
+export declare function buildTimestampHtml(timestamp: string, side: 'left' | 'right'): string;
 /**
  * Build a single message row HTML string
  */
-export declare function buildMessageRowHtml(author: string, text: string, config: AuthorConfig, isSubsequent: boolean): string;
+export declare function buildMessageRowHtml(author: string, text: string, config: AuthorConfig, isSubsequent: boolean, timestamp?: string, isLastInGroup?: boolean): string;
 /**
  * Setup tooltip for a single avatar wrapper element
  */

package/dist/utils/message-builder.js

@@ -5,20 +5,28 @@ import { escapeHtml } from './html.js';
  */
 export function buildAvatarHtml(author, config, showAvatar) {
     return `
-    <div class="avatar-wrapper ${showAvatar ? '' : 'avatar-wrapper--hidden'}" 
+    <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 timestamp HTML string
+ */
+export function buildTimestampHtml(timestamp, side) {
+    return `<span class="msg-timestamp msg-timestamp--${side}">${escapeHtml(timestamp)}</span>`;
+}
 /**
  * Build a single message row HTML string
  */
-export function buildMessageRowHtml(author, text, config, isSubsequent) {
+export function buildMessageRowHtml(author, text, config, isSubsequent, timestamp, isLastInGroup) {
     const showAvatar = !isSubsequent;
     const side = config.side;
     const avatarHtml = buildAvatarHtml(author, config, showAvatar);
+    // Only show timestamp on the last message of a group
+    const timestampHtml = isLastInGroup && timestamp ? buildTimestampHtml(timestamp, side) : '';
     // Build inline style only for custom colors (not defaults)
     const isDefaultBubbleColor = config.bubbleColor === THEME.gray[50];
     const isDefaultTextColor = config.textColor === THEME.gray[900];
@@ -35,6 +43,7 @@ export function buildMessageRowHtml(author, text, config, isSubsequent) {
       ${side === 'left' ? avatarHtml : ''}
 
       <div class="msg-content">
+        ${timestampHtml}
         <div class="msg-bubble msg-bubble--${side}"${styleAttr}>
           ${escapeHtml(text)}
         </div>

package/dist/utils/message-parser.d.ts

@@ -1,6 +1,7 @@
 import type { Message } from '../types/index.js';
 /**
  * Parse text content into message array
- * Format: `author: text` (one message per line)
+ * Format: `[timestamp] author: text` or `author: text` (one message per line)
+ * Timestamp is optional for backward compatibility
  */
 export declare function parseMessages(textContent: string | null): Message[];

package/dist/utils/message-parser.js

@@ -1,21 +1,37 @@
 /**
  * Parse text content into message array
- * Format: `author: text` (one message per line)
+ * Format: `[timestamp] author: text` or `author: text` (one message per line)
+ * Timestamp is optional for backward compatibility
  */
 export function parseMessages(textContent) {
     const raw = textContent || '';
     const messages = [];
+    // Pattern: [timestamp] author: text (space between timestamp and author is optional)
+    const timestampPattern = /^\[([^\]]+)\]\s*(.+)$/;
     for (const line of raw.split('\n')) {
         const trimmed = line.trim();
         if (!trimmed)
             continue;
-        const colonIdx = trimmed.indexOf(':');
+        let remainingLine = trimmed;
+        let timestamp;
+        // Try to extract timestamp
+        const timestampMatch = trimmed.match(timestampPattern);
+        if (timestampMatch) {
+            timestamp = timestampMatch[1].trim();
+            remainingLine = timestampMatch[2];
+        }
+        // Find the author:text separator (colon followed by space)
+        const colonIdx = remainingLine.indexOf(':');
         if (colonIdx <= 0)
             continue;
-        const author = trimmed.slice(0, colonIdx).trim();
-        const text = trimmed.slice(colonIdx + 1).trim();
+        const author = remainingLine.slice(0, colonIdx).trim();
+        const text = remainingLine.slice(colonIdx + 1).trim();
         if (author && text) {
-            messages.push({ author, text });
+            const message = { author, text };
+            if (timestamp) {
+                message.timestamp = timestamp;
+            }
+            messages.push(message);
         }
     }
     return messages;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/bb-msg-history",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A chat-style message history web component",
   "main": "dist/index.js",
   "type": "module",
@@ -23,6 +23,19 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "start": "tsc -w",
+    "preview": "python3 -m http.server 8000",
+    "prepare": "tsc && cp dist/index.js dist/index.dev.js && terser dist/index.js --compress --mangle --source-map -o dist/index.js",
+    "build": "tsc && cp dist/index.js dist/index.dev.js && terser dist/index.js --compress --mangle --source-map -o dist/index.js",
+    "lint": "eslint src/**/*.ts",
+    "lint:fix": "eslint src/**/*.ts --fix",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "format:check": "prettier --check \"src/**/*.ts\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "release": "release-it"
+  },
   "lint-staged": {
     "*.ts": [
       "eslint --fix",
@@ -47,17 +60,5 @@
     "terser": "^5.46.0",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4"
-  },
-  "scripts": {
-    "start": "tsc -w",
-    "preview": "python3 -m http.server 8000",
-    "build": "tsc && cp dist/index.js dist/index.dev.js && terser dist/index.js --compress --mangle --source-map -o dist/index.js",
-    "lint": "eslint src/**/*.ts",
-    "lint:fix": "eslint src/**/*.ts --fix",
-    "format": "prettier --write \"src/**/*.ts\"",
-    "format:check": "prettier --check \"src/**/*.ts\"",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "release": "release-it"
   }
-}
+}

package/src/component.ts

@@ -10,6 +10,7 @@ export class BBMsgHistory extends HTMLElement {
   private _mutationObserver?: MutationObserver;
   private _userAuthors = new Map<string, AuthorOptions>();
   private _lastAuthor = '';
+  private _lastGroupTimestamp: string | undefined;
   private _scrollButtonVisible = false;
 
   static get observedAttributes() {
@@ -85,14 +86,43 @@ export class BBMsgHistory extends HTMLElement {
 
     const author = message.author;
     const text = message.text;
+    const timestamp = message.timestamp;
     const config = resolveAuthorConfig(author, this._userAuthors);
-    const isFirstFromAuthor = author !== this._lastAuthor;
+
+    // Check if this can group with the last message
+    // Same author AND (no timestamp conflict)
+    const canGroupWithLast =
+      author === this._lastAuthor &&
+      (!this._lastGroupTimestamp || !timestamp || this._lastGroupTimestamp === timestamp);
+
+    const isFirstFromAuthor = !canGroupWithLast;
     this._lastAuthor = author;
 
     const isSubsequent = !isFirstFromAuthor;
 
+    // Update group timestamp tracking
+    if (isFirstFromAuthor) {
+      // Start new group
+      this._lastGroupTimestamp = timestamp;
+    } else if (!this._lastGroupTimestamp && timestamp) {
+      // If no timestamp in group yet and current has one, use it
+      this._lastGroupTimestamp = timestamp;
+    }
+
+    // When appending, we assume this IS the last in group (for now)
+    // If another message from same author comes, we'll re-render
+    const isLastInGroup = true;
+    const groupTimestamp = this._lastGroupTimestamp;
+
     // Use utility function to build message HTML
-    const msgHtml = buildMessageRowHtml(author, text, config, isSubsequent);
+    const msgHtml = buildMessageRowHtml(
+      author,
+      text,
+      config,
+      isSubsequent,
+      groupTimestamp,
+      isLastInGroup
+    );
 
     // Append to container
     container.insertAdjacentHTML('beforeend', msgHtml);
@@ -144,20 +174,73 @@ export class BBMsgHistory extends HTMLElement {
 
     if (messages.length === 0) {
       this._lastAuthor = '';
+      this._lastGroupTimestamp = undefined;
       this._renderEmpty();
       return;
     }
 
+    // Helper: Check if two messages can be grouped (same author, no timestamp conflict)
+    const canGroup = (prev: Message, curr: Message): boolean => {
+      if (prev.author !== curr.author) return false;
+      // Different timestamps = break group
+      if (prev.timestamp && curr.timestamp && prev.timestamp !== curr.timestamp) {
+        return false;
+      }
+      return true;
+    };
+
+    // First pass: determine which messages are last in their group
+    const lastInGroupFlags: boolean[] = messages.map((msg, i) => {
+      const next = messages[i + 1];
+      return !next || !canGroup(msg, next);
+    });
+
+    // Second pass: collect the timestamp for each group
+    // Use the first non-empty timestamp in the group
+    const groupTimestamps = new Map<number, string | undefined>();
+    let currentGroupTimestamp: string | undefined;
+
+    messages.forEach((msg, i) => {
+      // Start of a new group
+      if (i === 0 || !canGroup(messages[i - 1], msg)) {
+        currentGroupTimestamp = msg.timestamp;
+      } else if (!currentGroupTimestamp && msg.timestamp) {
+        // If no timestamp yet and current msg has one, use it
+        currentGroupTimestamp = msg.timestamp;
+      }
+
+      // If this is the last message in the group, save the timestamp
+      if (lastInGroupFlags[i]) {
+        groupTimestamps.set(i, currentGroupTimestamp);
+        currentGroupTimestamp = undefined;
+      }
+    });
+
+    // Third pass: build HTML
     let lastAuthor = '';
     const messagesHtml = messages
-      .map(({ author, text }) => {
+      .map((msg, i) => {
+        const { author, text } = msg;
         const config = resolveAuthorConfig(author, this._userAuthors);
-        const isFirstFromAuthor = author !== lastAuthor;
+
+        // Determine if this is a new author group (can't group with previous)
+        const isFirstFromAuthor = i === 0 || !canGroup(messages[i - 1], msg);
         lastAuthor = author;
         const isSubsequent = !isFirstFromAuthor;
 
+        // Get timestamp if this is the last in group
+        const isLastInGroup = lastInGroupFlags[i];
+        const groupTimestamp = groupTimestamps.get(i);
+
         // Use utility function to build message HTML
-        return buildMessageRowHtml(author, text, config, isSubsequent);
+        return buildMessageRowHtml(
+          author,
+          text,
+          config,
+          isSubsequent,
+          groupTimestamp,
+          isLastInGroup
+        );
       })
       .join('');
 

package/src/const/styles.ts

@@ -114,7 +114,7 @@ export const MAIN_STYLES = `
   }
 
   .msg-row--subsequent {
-    margin-top: 0.125rem;
+    margin-top: 0.375rem;
   }
 
   .msg-row--new-author {
@@ -193,6 +193,34 @@ export const MAIN_STYLES = `
   .msg-content {
     display: flex;
     flex-direction: column;
+    position: relative;
+  }
+
+  /* Timestamp styles */
+  .msg-timestamp {
+    position: absolute;
+    font-size: 11px;
+    color: ${THEME.gray[400]};
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+    white-space: nowrap;
+    bottom: -12px;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  .msg-timestamp--left {
+    left: 0;
+  }
+
+  .msg-timestamp--right {
+    right: 0;
+  }
+
+  .msg-row:hover .msg-timestamp {
+    opacity: 1;
+    visibility: visible;
   }
 
   .msg-bubble {

package/src/types/index.ts

@@ -6,6 +6,7 @@
 export interface Message {
   author: string;
   text: string;
+  timestamp?: string;
 }
 
 /** Internal author configuration with resolved values */

package/src/utils/message-builder.ts

@@ -7,7 +7,7 @@ import { escapeHtml } from './html.js';
  */
 export function buildAvatarHtml(author: string, config: AuthorConfig, showAvatar: boolean): string {
   return `
-    <div class="avatar-wrapper ${showAvatar ? '' : 'avatar-wrapper--hidden'}" 
+    <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>
@@ -15,6 +15,13 @@ export function buildAvatarHtml(author: string, config: AuthorConfig, showAvatar
   `;
 }
 
+/**
+ * Build timestamp HTML string
+ */
+export function buildTimestampHtml(timestamp: string, side: 'left' | 'right'): string {
+  return `<span class="msg-timestamp msg-timestamp--${side}">${escapeHtml(timestamp)}</span>`;
+}
+
 /**
  * Build a single message row HTML string
  */
@@ -22,11 +29,15 @@ export function buildMessageRowHtml(
   author: string,
   text: string,
   config: AuthorConfig,
-  isSubsequent: boolean
+  isSubsequent: boolean,
+  timestamp?: string,
+  isLastInGroup?: boolean
 ): string {
   const showAvatar = !isSubsequent;
   const side = config.side;
   const avatarHtml = buildAvatarHtml(author, config, showAvatar);
+  // Only show timestamp on the last message of a group
+  const timestampHtml = isLastInGroup && timestamp ? buildTimestampHtml(timestamp, side) : '';
 
   // Build inline style only for custom colors (not defaults)
   const isDefaultBubbleColor = config.bubbleColor === THEME.gray[50];
@@ -47,6 +58,7 @@ export function buildMessageRowHtml(
       ${side === 'left' ? avatarHtml : ''}
 
       <div class="msg-content">
+        ${timestampHtml}
         <div class="msg-bubble msg-bubble--${side}"${styleAttr}>
           ${escapeHtml(text)}
         </div>

package/src/utils/message-parser.ts

@@ -2,24 +2,43 @@ import type { Message } from '../types/index.js';
 
 /**
  * Parse text content into message array
- * Format: `author: text` (one message per line)
+ * Format: `[timestamp] author: text` or `author: text` (one message per line)
+ * Timestamp is optional for backward compatibility
  */
 export function parseMessages(textContent: string | null): Message[] {
   const raw = textContent || '';
   const messages: Message[] = [];
 
+  // Pattern: [timestamp] author: text (space between timestamp and author is optional)
+  const timestampPattern = /^\[([^\]]+)\]\s*(.+)$/;
+
   for (const line of raw.split('\n')) {
     const trimmed = line.trim();
     if (!trimmed) continue;
 
-    const colonIdx = trimmed.indexOf(':');
+    let remainingLine = trimmed;
+    let timestamp: string | undefined;
+
+    // Try to extract timestamp
+    const timestampMatch = trimmed.match(timestampPattern);
+    if (timestampMatch) {
+      timestamp = timestampMatch[1].trim();
+      remainingLine = timestampMatch[2];
+    }
+
+    // Find the author:text separator (colon followed by space)
+    const colonIdx = remainingLine.indexOf(':');
     if (colonIdx <= 0) continue;
 
-    const author = trimmed.slice(0, colonIdx).trim();
-    const text = trimmed.slice(colonIdx + 1).trim();
+    const author = remainingLine.slice(0, colonIdx).trim();
+    const text = remainingLine.slice(colonIdx + 1).trim();
 
     if (author && text) {
-      messages.push({ author, text });
+      const message: Message = { author, text };
+      if (timestamp) {
+        message.timestamp = timestamp;
+      }
+      messages.push(message);
     }
   }
 

package/dist/src/component.d.ts

@@ -1,39 +0,0 @@
-import type { AuthorOptions, Message } from './types/index.js';
-export declare class BBMsgHistory extends HTMLElement {
-    private _mutationObserver?;
-    private _userAuthors;
-    private _lastAuthor;
-    private _scrollButtonVisible;
-    static get observedAttributes(): string[];
-    constructor();
-    attributeChangedCallback(): void;
-    /**
-     * Configure an author's avatar, side, and colors.
-     * Call before or after rendering — the component re-renders automatically.
-     *
-     * @example
-     * el.setAuthor('alice', { avatar: '🐱', side: 'right', bubbleColor: '#e0f2fe' });
-     * el.setAuthor('bob', { avatar: '<img src="bob.png" />', side: 'left' });
-     */
-    setAuthor(name: string, options: AuthorOptions): this;
-    /**
-     * Remove a previously set author config.
-     */
-    removeAuthor(name: string): this;
-    /**
-     * Append a message to the history.
-     * Automatically scrolls to the new message with smooth animation.
-     *
-     * @example
-     * el.appendMessage({ author: 'alice', text: 'Hello!' });
-     * el.appendMessage({ author: 'bob', text: 'How are you?' });
-     */
-    appendMessage(message: Message): this;
-    private _appendSingleMessage;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _setupMutationObserver;
-    private render;
-    private _renderEmpty;
-    private _setupScrollTracking;
-}