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

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/authors.js

@@ -6,7 +6,7 @@ import { THEME } from './theme.js';
 export const AUTHOR_CONFIG = {
     'bbki.ng': {
         avatar: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 48 48" fill="none"><path d="M29.1152 21.3106C32.0605 21.3106 34.4481 18.9101 34.4481 15.9489V24.6457C34.4481 25.7585 33.5508 26.6607 32.444 26.6607H15.1207C14.0138 26.6607 13.1166 25.7585 13.1166 24.6457V15.9489C13.1166 18.9101 15.5042 21.3106 18.4494 21.3106C21.3947 21.3106 23.7823 18.9101 23.7823 15.9489C23.7823 18.9101 26.17 21.3106 29.1152 21.3106Z" fill="${THEME.gray[400]}"/><path d="M23.7823 15.9373L23.7823 15.9489C23.7823 15.9451 23.7823 15.9412 23.7823 15.9373Z" fill="${THEME.gray[400]}"/><path d="M23.1143 28.004C23.1205 30.9598 25.5057 33.3541 28.4472 33.3541C31.3886 33.3541 33.7738 30.9598 33.7801 28.004H23.1143Z" fill="${THEME.gray[400]}"/><path d="M13.7846 28.004C13.7846 28.0079 13.7846 28.0117 13.7846 28.0156C13.7908 30.9714 16.1761 33.3657 19.1175 33.3657C22.0589 33.3657 24.4442 30.9714 24.4504 28.0156H13.7846V28.004Z" fill="${THEME.gray[400]}"/><path d="M14.4527 15.9373C14.4527 16.6792 13.8545 17.2806 13.1166 17.2806C12.3786 17.2806 11.7805 16.6792 11.7805 15.9373C11.7805 15.1954 12.3786 14.594 13.1166 14.594C13.8545 14.594 14.4527 15.1954 14.4527 15.9373Z" fill="${THEME.gray[400]}"/><path d="M25.1184 15.2657C25.1184 16.0076 24.5202 16.609 23.7823 16.609C23.0444 16.609 22.4462 16.0076 22.4462 15.2657C22.4462 14.5238 23.0444 13.9224 23.7823 13.9224C24.5202 13.9224 25.1184 14.5238 25.1184 15.2657Z" fill="${THEME.gray[400]}"/><path d="M35.7842 15.9373C35.7842 16.6792 35.186 17.2806 34.4481 17.2806C33.7102 17.2806 33.112 16.6792 33.112 15.9373C33.112 15.1954 33.7102 14.594 34.4481 14.594C35.186 14.594 35.7842 15.1954 35.7842 15.9373Z" fill="${THEME.gray[400]}"/></svg>`,
-        bubbleColor: THEME.gray[100],
+        bubbleColor: THEME.gray[200],
         textColor: THEME.gray[900],
         side: 'right',
     },

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,35 @@ export const MAIN_STYLES = `
   .msg-content {
     display: flex;
     flex-direction: column;
+    position: relative;
+    padding-bottom: 12px;
+  }
+
+  /* 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: 1px;
+    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 {
@@ -217,6 +246,15 @@ export const MAIN_STYLES = `
     color: ${THEME.gray[900]};
   }
 
+  /* Subsequent messages - all corners rounded */
+  .msg-row--subsequent .msg-bubble--left {
+    border-bottom-left-radius: 1rem;
+  }
+
+  .msg-row--subsequent .msg-bubble--right {
+    border-bottom-right-radius: 1rem;
+  }
+
   /* Empty state */
   .empty-state {
     text-align: center;

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];
@@ -38,6 +46,7 @@ export function buildMessageRowHtml(author, text, config, isSubsequent) {
         <div class="msg-bubble msg-bubble--${side}"${styleAttr}>
           ${escapeHtml(text)}
         </div>
+        ${timestampHtml}
       </div>
 
       ${side === 'right' ? avatarHtml : ''}

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.1",
   "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/authors.ts

@@ -8,7 +8,7 @@ import { THEME } from './theme.js';
 export const AUTHOR_CONFIG: Record<string, Omit<AuthorConfig, 'isCustomAvatar'>> = {
   'bbki.ng': {
     avatar: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 48 48" fill="none"><path d="M29.1152 21.3106C32.0605 21.3106 34.4481 18.9101 34.4481 15.9489V24.6457C34.4481 25.7585 33.5508 26.6607 32.444 26.6607H15.1207C14.0138 26.6607 13.1166 25.7585 13.1166 24.6457V15.9489C13.1166 18.9101 15.5042 21.3106 18.4494 21.3106C21.3947 21.3106 23.7823 18.9101 23.7823 15.9489C23.7823 18.9101 26.17 21.3106 29.1152 21.3106Z" fill="${THEME.gray[400]}"/><path d="M23.7823 15.9373L23.7823 15.9489C23.7823 15.9451 23.7823 15.9412 23.7823 15.9373Z" fill="${THEME.gray[400]}"/><path d="M23.1143 28.004C23.1205 30.9598 25.5057 33.3541 28.4472 33.3541C31.3886 33.3541 33.7738 30.9598 33.7801 28.004H23.1143Z" fill="${THEME.gray[400]}"/><path d="M13.7846 28.004C13.7846 28.0079 13.7846 28.0117 13.7846 28.0156C13.7908 30.9714 16.1761 33.3657 19.1175 33.3657C22.0589 33.3657 24.4442 30.9714 24.4504 28.0156H13.7846V28.004Z" fill="${THEME.gray[400]}"/><path d="M14.4527 15.9373C14.4527 16.6792 13.8545 17.2806 13.1166 17.2806C12.3786 17.2806 11.7805 16.6792 11.7805 15.9373C11.7805 15.1954 12.3786 14.594 13.1166 14.594C13.8545 14.594 14.4527 15.1954 14.4527 15.9373Z" fill="${THEME.gray[400]}"/><path d="M25.1184 15.2657C25.1184 16.0076 24.5202 16.609 23.7823 16.609C23.0444 16.609 22.4462 16.0076 22.4462 15.2657C22.4462 14.5238 23.0444 13.9224 23.7823 13.9224C24.5202 13.9224 25.1184 14.5238 25.1184 15.2657Z" fill="${THEME.gray[400]}"/><path d="M35.7842 15.9373C35.7842 16.6792 35.186 17.2806 34.4481 17.2806C33.7102 17.2806 33.112 16.6792 33.112 15.9373C33.112 15.1954 33.7102 14.594 34.4481 14.594C35.186 14.594 35.7842 15.1954 35.7842 15.9373Z" fill="${THEME.gray[400]}"/></svg>`,
-    bubbleColor: THEME.gray[100],
+    bubbleColor: THEME.gray[200],
     textColor: THEME.gray[900],
     side: 'right',
   },

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,35 @@ export const MAIN_STYLES = `
   .msg-content {
     display: flex;
     flex-direction: column;
+    position: relative;
+    padding-bottom: 12px;
+  }
+
+  /* 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: 1px;
+    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 {
@@ -218,6 +247,15 @@ export const MAIN_STYLES = `
     color: ${THEME.gray[900]};
   }
 
+  /* Subsequent messages - all corners rounded */
+  .msg-row--subsequent .msg-bubble--left {
+    border-bottom-left-radius: 1rem;
+  }
+
+  .msg-row--subsequent .msg-bubble--right {
+    border-bottom-right-radius: 1rem;
+  }
+
   /* Empty state */
   .empty-state {
     text-align: center;

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];
@@ -50,6 +61,7 @@ export function buildMessageRowHtml(
         <div class="msg-bubble msg-bubble--${side}"${styleAttr}>
           ${escapeHtml(text)}
         </div>
+        ${timestampHtml}
       </div>
 
       ${side === 'right' ? avatarHtml : ''}