@promptbook/components 0.102.0-3 → 0.102.0-5

package/esm/index.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { useMemo, useState, useRef, useCallback, useEffect, memo } from 'react';
 import spaceTrim, { spaceTrim as spaceTrim$1 } from 'spacetrim';
 import 'path';
 import 'crypto';
@@ -21,7 +21,7 @@ const BOOK_LANGUAGE_VERSION = '1.0.0';
  * @generated
  * @see https://github.com/webgptorg/promptbook
  */
-const PROMPTBOOK_ENGINE_VERSION = '0.102.0-3';
+const PROMPTBOOK_ENGINE_VERSION = '0.102.0-5';
 /**
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
  * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -3161,6 +3161,23 @@ const DEFAULT_BOOK_FONT_CLASS = styles.bookEditorSerif;
  * Note: [💞] Ignore a discrepancy between file name and entity name
  */
 
+// Debounce utility for BookEditor and related components
+// [🧠] Use this for debouncing highlight and other expensive operations
+/**
+ * @private
+ */
+function debounce(fn, delay) {
+    let timeout = null;
+    return (...args) => {
+        if (timeout)
+            clearTimeout(timeout);
+        timeout = setTimeout(() => fn(...args), delay);
+    };
+}
+/**
+ * Note: [💞] Ignore a discrepancy between file name and entity name
+ * TODO: !!! remove this file */
+
 /**
  * @private util of `<BookEditor />`
  */
@@ -3173,6 +3190,33 @@ function BookEditorInner(props) {
     const highlightRef = useRef(null);
     const [lineHeight, setLineHeight] = useState(32);
     const [isDragOver, setIsDragOver] = useState(false);
+    // Virtualization state: visible line range
+    const [visibleRange, setVisibleRange] = useState([0, 30]);
+    // Debounced update for visible range
+    const updateVisibleRange = useCallback(debounce(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        const scrollTop = textarea.scrollTop;
+        const clientHeight = textarea.clientHeight;
+        const totalLines = (value !== null && value !== void 0 ? value : '').split('\n').length;
+        const firstLine = Math.max(0, Math.floor(scrollTop / lineHeight) - 10); // buffer
+        const lastLine = Math.min(totalLines, Math.ceil((scrollTop + clientHeight) / lineHeight) + 10);
+        setVisibleRange([firstLine, lastLine]);
+    }, 30), [value, lineHeight]);
+    // Update visible range on scroll/resize/value change
+    useEffect(() => {
+        updateVisibleRange();
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        textarea.addEventListener('scroll', updateVisibleRange);
+        window.addEventListener('resize', updateVisibleRange);
+        return () => {
+            textarea.removeEventListener('scroll', updateVisibleRange);
+            window.removeEventListener('resize', updateVisibleRange);
+        };
+    }, [updateVisibleRange]);
     const handleChange = useCallback((event) => {
         const newValue = event.target.value;
         if (controlledValue !== undefined) {
@@ -3485,29 +3529,32 @@ function BookEditorInner(props) {
         });
         return parameters.sort((a, b) => a.start - b.start);
     }, [atParameterRegex, braceParameterRegex]);
+    // Virtualized, debounced highlight rendering for large books
     const highlightedHtml = useMemo(() => {
         const text = value !== null && value !== void 0 ? value : '';
-        let lastIndex = 0;
+        const lines = text.split('\n');
+        const [firstLine, lastLine] = visibleRange;
+        const visibleLines = lines.slice(firstLine, lastLine);
+        // Compute offset for correct line numbers
+        const offset = lines.slice(0, firstLine).join('\n').length + (firstLine > 0 ? 1 : 0);
         let out = '';
         const processedRanges = [];
-        // First, handle comment-like commitments (NOTE, COMMENT, NONCE) - they take highest priority
-        // and should be highlighted as gray comments, including their content
-        text.replace(commentRegex, (match, ...args) => {
-            const index = args[args.length - 2];
-            // Adjust index to skip the newline character if present at the beginning of match
+        // Highlighting logic for visible lines only
+        const visibleText = visibleLines.join('\n');
+        // First, handle comment-like commitments (NOTE, COMMENT, NONCE)
+        visibleText.replace(commentRegex, (match, ...args) => {
+            const index = args[args.length - 2] + offset;
             const adjustedStart = match.startsWith('\n') ? index + 1 : index;
             const adjustedMatch = match.startsWith('\n') ? match.slice(1) : match;
             processedRanges.push({ start: adjustedStart, end: adjustedStart + adjustedMatch.length, type: 'comment' });
             return match;
         });
-        // Then, handle META commitments (they take priority over regular commitments)
-        text.replace(metaRegex, (match, ...args) => {
-            const index = args[args.length - 2];
-            // Adjust index to skip the newline character if present at the beginning of match
+        // META commitments
+        visibleText.replace(metaRegex, (match, ...args) => {
+            const index = args[args.length - 2] + offset;
             const adjustedStart = match.startsWith('\n') ? index + 1 : index;
             const adjustedMatch = match.startsWith('\n') ? match.slice(1) : match;
             const matchEnd = adjustedStart + adjustedMatch.length;
-            // Check if this match overlaps with any existing range (especially comments)
             const overlaps = processedRanges.some((range) => (adjustedStart >= range.start && adjustedStart < range.end) ||
                 (matchEnd > range.start && matchEnd <= range.end) ||
                 (adjustedStart < range.start && matchEnd > range.end));
@@ -3516,14 +3563,12 @@ function BookEditorInner(props) {
             }
             return match;
         });
-        // Then handle regular commitment types, avoiding overlaps with META and comment ranges
-        text.replace(typeRegex, (match, ...args) => {
-            const index = args[args.length - 2];
-            // Adjust index to skip the newline character if present at the beginning of match
+        // Regular commitment types
+        visibleText.replace(typeRegex, (match, ...args) => {
+            const index = args[args.length - 2] + offset;
             const adjustedStart = match.startsWith('\n') ? index + 1 : index;
             const adjustedMatch = match.startsWith('\n') ? match.slice(1) : match;
             const matchEnd = adjustedStart + adjustedMatch.length;
-            // Check if this match overlaps with any existing range
             const overlaps = processedRanges.some((range) => (adjustedStart >= range.start && adjustedStart < range.end) ||
                 (matchEnd > range.start && matchEnd <= range.end) ||
                 (adjustedStart < range.start && matchEnd > range.end));
@@ -3532,29 +3577,28 @@ function BookEditorInner(props) {
             }
             return match;
         });
-        // Handle parameters using the unified extraction function - both @Parameter and {parameter} notations
-        // are treated as the same syntax feature with unified highlighting
-        const unifiedParameters = extractUnifiedParameters(text);
+        // Parameters
+        const unifiedParameters = extractUnifiedParameters(visibleText);
         unifiedParameters.forEach((param) => {
-            // Check if this parameter overlaps with any existing range
-            const overlaps = processedRanges.some((range) => (param.start >= range.start && param.start < range.end) ||
-                (param.end > range.start && param.end <= range.end) ||
-                (param.start < range.start && param.end > range.end));
+            const paramStart = param.start + offset;
+            const paramEnd = param.end + offset;
+            const overlaps = processedRanges.some((range) => (paramStart >= range.start && paramStart < range.end) ||
+                (paramEnd > range.start && paramEnd <= range.end) ||
+                (paramStart < range.start && paramEnd > range.end));
             if (!overlaps) {
                 processedRanges.push({
-                    start: param.start,
-                    end: param.end,
+                    start: paramStart,
+                    end: paramEnd,
                     type: 'parameter',
                 });
             }
         });
         // Sort ranges by start position
         processedRanges.sort((a, b) => a.start - b.start);
-        // Build the highlighted HTML
+        // Build the highlighted HTML for the visible lines only
+        let visibleLastIndex = offset;
         processedRanges.forEach((range) => {
-            // Add text before this range
-            out += escapeHtml(text.slice(lastIndex, range.start));
-            // Add highlighted text with appropriate class
+            out += escapeHtml(text.slice(visibleLastIndex, range.start));
             const matchText = text.slice(range.start, range.end);
             let cssClass;
             switch (range.type) {
@@ -3562,11 +3606,9 @@ function BookEditorInner(props) {
                     cssClass = 'book-highlight-keyword';
                     break;
                 case 'parameter':
-                    // Use the unified parameter class, but maintain backward compatibility
                     cssClass = 'book-highlight-parameter';
                     break;
                 case 'comment':
-                    // NOTE, COMMENT, NONCE commitments should be highlighted as gray comments
                     cssClass = 'book-highlight-comment';
                     break;
                 default:
@@ -3574,16 +3616,15 @@ function BookEditorInner(props) {
                     break;
             }
             out += `<span class="${cssClass}">${escapeHtml(matchText)}</span>`;
-            lastIndex = range.end;
+            visibleLastIndex = range.end;
         });
-        // Add remaining text
-        out += escapeHtml(text.slice(lastIndex));
-        const lines = out.split('\n');
-        if (lines.length > 0) {
-            lines[0] = `<span class="book-highlight-title">${lines[0]}</span>`;
-        }
-        return lines.join('\n');
-    }, [value, typeRegex, metaRegex, extractUnifiedParameters]);
+        out += escapeHtml(text.slice(visibleLastIndex, offset + visibleText.length));
+        const resultLines = out.split('\n').slice(firstLine, lastLine);
+        if (resultLines.length > 0 && firstLine === 0) {
+            resultLines[0] = `<span class="book-highlight-title">${resultLines[0]}</span>`;
+        }
+        return resultLines.join('\n');
+    }, [value, typeRegex, metaRegex, extractUnifiedParameters, visibleRange]);
     return (jsx("div", { className: classNames(styles.bookEditorContainer, isVerbose && styles.isVerbose, className), children: jsxs("div", { className: classNames(styles.bookEditorWrapper, effectiveFontClassName, isBorderRadiusDisabled && styles.isBorderRadiusDisabled), children: [jsx("div", { "aria-hidden": true, className: styles.bookEditorBackground, style: { backgroundImage: 'none' } }), jsx("pre", { ref: highlightRef, "aria-hidden": true, className: `${styles.bookEditorHighlight} ${effectiveFontClassName}`, style: {
                         lineHeight: `${lineHeight}px`,
                         backgroundImage: `linear-gradient(90deg, transparent 30px, rgba(59,130,246,0.3) 30px, rgba(59,130,246,0.3) 31px, transparent 31px), repeating-linear-gradient(0deg, transparent, transparent calc(${lineHeight}px - 1px), rgba(0,0,0,0.06) ${lineHeight}px)`,
@@ -4712,6 +4753,18 @@ function useChatAutoScroll(config = {}) {
     };
 }
 
+/**
+ * Utility to compute readable text color based on background
+ */
+function getTextColor(bgColor) {
+    // Simple luminance check for contrast
+    const hex = bgColor.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b);
+    return luminance > 186 ? '#222' : '#fff';
+}
 /**
  * HTML export plugin
  *
@@ -4720,7 +4773,112 @@ function useChatAutoScroll(config = {}) {
 const htmlSaveFormatDefinition = {
     formatName: 'html',
     label: 'HTML',
-    getContent: (messages) => `<html><body>${messages.map((m) => `<strong>${m.from}:</strong><br>${m.content}<hr>`).join('')}</body></html>`,
+    getContent: (messages) => spaceTrim(`
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="UTF-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                <title>Chat Export - Promptbook</title>
+                <style>
+                    body {
+                        font-family: 'Segoe UI', Arial, sans-serif;
+                        background: #f7f8fa;
+                        margin: 0;
+                        padding: 0;
+                    }
+                    .chat-container {
+                        max-width: 600px;
+                        margin: 40px auto 20px auto;
+                        background: #fff;
+                        border-radius: 12px;
+                        box-shadow: 0 2px 16px rgba(0,0,0,0.07);
+                        padding: 24px 18px 18px 18px;
+                    }
+                    .chat-message {
+                        display: flex;
+                        align-items: flex-start;
+                        margin-bottom: 18px;
+                        border-radius: 10px;
+                        padding: 0;
+                    }
+                    .avatar {
+                        width: 38px;
+                        height: 38px;
+                        border-radius: 50%;
+                        background: #ccc;
+                        margin-right: 14px;
+                        flex-shrink: 0;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-weight: bold;
+                        font-size: 18px;
+                        color: #fff;
+                        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+                    }
+                    .bubble {
+                        border-radius: 10px;
+                        padding: 12px 16px;
+                        min-width: 80px;
+                        max-width: 100%;
+                        word-break: break-word;
+                        box-shadow: 0 1px 4px rgba(0,0,0,0.03);
+                        font-size: 16px;
+                        line-height: 1.6;
+                        margin-top: 2px;
+                    }
+                    .from-label {
+                        font-weight: bold;
+                        font-size: 15px;
+                        margin-bottom: 4px;
+                        display: block;
+                        opacity: 0.85;
+                    }
+                    .footer {
+                        text-align: center;
+                        margin: 32px 0 18px 0;
+                        color: #888;
+                        font-size: 15px;
+                        opacity: 0.85;
+                    }
+                    .footer a {
+                        color: #2b7cff;
+                        text-decoration: none;
+                        font-weight: bold;
+                    }
+                </style>
+            </head>
+            <body>
+                <div class="chat-container">
+                    ${messages.map((m) => {
+        // Fallback color map for common participants
+        const participantColors = {
+            USER: '#2b7cff',
+            ASSISTANT: '#ffb300',
+            SYSTEM: '#888',
+        };
+        const bgColor = participantColors[String(m.from)] || '#2b7cff';
+        const textColor = getTextColor(bgColor);
+        return spaceTrim(`
+                            <div class="chat-message">
+                                <div class="avatar" style="background:${bgColor};color:${getTextColor(bgColor)};">
+                                    ${String(m.from)[0] || '?'}
+                                </div>
+                                <div class="bubble" style="background:${bgColor};color:${textColor};">
+                                    <span class="from-label">${String(m.from)}:</span>
+                                    ${m.content}
+                                </div>
+                            </div>
+                        `);
+    }).join('')}
+                </div>
+                <div class="footer">
+                    Exported from <a href="https://ptbk.io" target="_blank" rel="noopener">Promptbook</a>
+                </div>
+            </body>
+            </html>
+        `),
     mimeType: 'text/html',
     fileExtension: 'html',
 };
@@ -4746,7 +4904,19 @@ const jsonSaveFormatDefinition = {
 const mdSaveFormatDefinition = {
     formatName: 'md',
     label: 'Markdown',
-    getContent: (messages) => messages.map((m) => `**${m.from}:**\n\n${m.content}\n`).join('\n---\n'),
+    getContent: (messages) => spaceTrim$1(`
+            ${messages
+        .map((m) => spaceTrim$1(`
+                        **${m.from}:**
+
+                        > ${m.content.replace(/\n/g, '\n> ')}
+                    `))
+        .join('\n\n---\n\n')}
+
+            ---
+
+            _Exported from [Promptbook](https://ptbk.io)_
+        `),
     mimeType: 'text/markdown',
     fileExtension: 'md',
 };
@@ -4764,6 +4934,25 @@ const txtSaveFormatDefinition = {
     fileExtension: 'txt',
 };
 
+/**
+ * PDF export plugin
+ *
+ * @public exported from `@promptbook/components`
+ */
+const pdfSaveFormatDefinition = {
+    formatName: 'pdf',
+    label: 'PDF',
+    getContent: (messages) => {
+        htmlSaveFormatDefinition.getContent(messages);
+        // <- TODO: !!!!
+        // PDF conversion should be implemented here (sync or pre-generated)
+        // For now, return a placeholder string
+        return '[PDF chat save not implemented. Integrate a PDF library for conversion.]';
+    },
+    mimeType: 'application/pdf',
+    fileExtension: 'pdf',
+};
+
 /**
  * Registry of all built-in chat save plugins
  *
@@ -4774,6 +4963,7 @@ const CHAT_SAVE_FORMATS = [
     txtSaveFormatDefinition,
     mdSaveFormatDefinition,
     htmlSaveFormatDefinition,
+    pdfSaveFormatDefinition,
 ];
 /**
  * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -4951,6 +5141,107 @@ const LOADING_INTERACTIVE_IMAGE = 'Loading...';
 
 // [🚉] Avatar dimensions constant to prevent layout jumps and maintain DRY principle
 const AVATAR_SIZE = 40;
+const ChatMessageItem = memo(({ message, participant, participants, isLastMessage, onMessage, setExpandedMessageId, isExpanded, currentRating, handleRating, mode, }) => {
+    const avatarSrc = (participant === null || participant === void 0 ? void 0 : participant.avatarSrc) || '';
+    const color = Color.from((participant && participant.color) || '#ccc');
+    const colorOfText = color.then(textColor);
+    const { contentWithoutButtons, buttons } = parseMessageButtons(message.content);
+    const shouldShowButtons = isLastMessage && buttons.length > 0 && onMessage;
+    const [localHoveredRating, setLocalHoveredRating] = useState(0);
+    useEffect(() => {
+        if (!isExpanded) {
+            setLocalHoveredRating(0);
+        }
+    }, [isExpanded]);
+    return (jsxs("div", { className: classNames(chatStyles.chatMessage, (participant === null || participant === void 0 ? void 0 : participant.isMe) && chatStyles.isMe, !message.isComplete && chatStyles.isNotCompleteMessage), onClick: () => {
+            console.group('💬', message.content);
+            console.info('message', message);
+            console.info('participant', participant);
+            console.info('participants', participants);
+            console.info('participant avatarSrc', avatarSrc);
+            console.info('participant color', { color, colorOfText });
+            console.groupEnd();
+        }, children: [avatarSrc && (jsx("div", { className: chatStyles.avatar, children: jsx("img", { width: AVATAR_SIZE, height: AVATAR_SIZE, src: avatarSrc, alt: `Avatar of ${message.from.toString().toLocaleLowerCase()}`, style: {
+                        backgroundColor: color.toHex(),
+                        width: AVATAR_SIZE,
+                        height: AVATAR_SIZE,
+                        borderRadius: '50%',
+                        objectFit: 'cover',
+                        border: '2px solid rgba(125, 125, 125, 0.1)',
+                        flexShrink: 0,
+                    } }) })), jsxs("div", { className: chatStyles.messageText, style: {
+                    backgroundColor: color.toHex(),
+                    color: colorOfText.toHex(),
+                }, children: [message.isVoiceCall && (jsx("div", { className: chatStyles.voiceCallIndicator, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }) })), message.content === LOADING_INTERACTIVE_IMAGE ? (jsx(Fragment, {})) : (jsx("div", { dangerouslySetInnerHTML: {
+                            __html: renderMarkdown(contentWithoutButtons),
+                        } })), !message.isComplete && jsx("span", { className: chatStyles.NonCompleteMessageFiller, children: '_'.repeat(70) }), shouldShowButtons && (jsx("div", { className: chatStyles.messageButtons, children: buttons.map((button, buttonIndex) => (jsx("button", { className: chatStyles.messageButton, onClick: (event) => {
+                                event.stopPropagation();
+                                if (onMessage) {
+                                    onMessage(button.message);
+                                }
+                            }, dangerouslySetInnerHTML: {
+                                __html: renderMarkdown(button.text),
+                            } }, buttonIndex))) })), message.isComplete && (jsx("div", { className: chatStyles.rating, onMouseEnter: () => {
+                            setExpandedMessageId(message.id);
+                        }, onMouseLeave: () => {
+                            setExpandedMessageId(null);
+                            setLocalHoveredRating(0);
+                        }, children: isExpanded ? ([1, 2, 3, 4, 5].map((star) => (jsx("span", { onClick: () => handleRating(message, star), onMouseEnter: () => setLocalHoveredRating(star), style: {
+                                cursor: 'pointer',
+                                fontSize: '20px',
+                                color: star <= (localHoveredRating || currentRating || 0)
+                                    ? '#FFD700'
+                                    : mode === 'LIGHT'
+                                        ? '#ccc'
+                                        : '#555',
+                                transition: 'color 0.2s',
+                            }, children: "\u2B50" }, star)))) : (jsx("span", { onClick: () => handleRating(message, currentRating || 1), style: {
+                                cursor: 'pointer',
+                                fontSize: '20px',
+                                color: currentRating ? '#FFD700' : mode === 'LIGHT' ? '#888' : '#666',
+                                transition: 'color 0.2s',
+                            }, children: "\u2B50" })) }))] })] }));
+}, (prev, next) => {
+    var _a, _b, _c, _d;
+    if (prev.message.id !== next.message.id) {
+        return false;
+    }
+    if (prev.message.content !== next.message.content) {
+        return false;
+    }
+    if (((_a = prev.message.isComplete) !== null && _a !== void 0 ? _a : true) !== ((_b = next.message.isComplete) !== null && _b !== void 0 ? _b : true)) {
+        return false;
+    }
+    if (((_c = prev.message.isVoiceCall) !== null && _c !== void 0 ? _c : false) !== ((_d = next.message.isVoiceCall) !== null && _d !== void 0 ? _d : false)) {
+        return false;
+    }
+    if (prev.participant !== next.participant) {
+        return false;
+    }
+    if (prev.participants !== next.participants) {
+        return false;
+    }
+    if (prev.isLastMessage !== next.isLastMessage) {
+        return false;
+    }
+    if (prev.onMessage !== next.onMessage) {
+        return false;
+    }
+    if (prev.setExpandedMessageId !== next.setExpandedMessageId) {
+        return false;
+    }
+    if (prev.isExpanded !== next.isExpanded) {
+        return false;
+    }
+    if (prev.currentRating !== next.currentRating) {
+        return false;
+    }
+    if (prev.handleRating !== next.handleRating) {
+        return false;
+    }
+    return prev.mode === next.mode;
+});
+ChatMessageItem.displayName = 'ChatMessageItem';
 /**
  * Renders a chat with messages and input for new messages
  *
@@ -5133,9 +5424,13 @@ function Chat(props) {
     const scrollToBottomCssClassName = useChatCssClassName('scrollToBottom');
     const handleRating = useCallback(async (message, newRating) => {
         setSelectedMessage(message);
-        setMessageRatings(new Map(messageRatings.set(message.id, newRating)));
+        setMessageRatings((previousRatings) => {
+            const nextRatings = new Map(previousRatings);
+            nextRatings.set(message.id, newRating);
+            return nextRatings;
+        });
         setRatingModalOpen(true);
-    }, [messageRatings]);
+    }, []);
     const submitRating = useCallback(async () => {
         if (!selectedMessage)
             return;
@@ -5248,67 +5543,10 @@ function Chat(props) {
                                                     cursor: 'pointer',
                                                 }, onClick: () => handleDownload(formatDefinition.formatName), children: formatDefinition.label }, formatDefinition.formatName))) }))] })), onUseTemplate && (jsxs("button", { className: classNames(chatStyles.useTemplateButton), onClick: onUseTemplate, children: [jsx("span", { className: chatStyles.resetButtonText, children: "Use this template" }), jsx(TemplateIcon, { size: 16 })] })), extraActions] }), jsx("div", { className: classNames(chatStyles.chatMessages, useChatCssClassName('chatMessages')), ref: chatMessagesRef, onScroll: handleScroll, children: postprocessedMessages.map((message, i) => {
                                 const participant = participants.find((participant) => participant.name === message.from);
-                                const avatarSrc = (participant && participant.avatarSrc) || '';
-                                const color = Color.from((participant && participant.color) || '#ccc');
-                                const colorOfText = color.then(textColor);
-                                // Parse buttons from message content
-                                const { contentWithoutButtons, buttons } = parseMessageButtons(message.content);
-                                // Only show buttons for the last message
                                 const isLastMessage = i === postprocessedMessages.length - 1;
-                                const shouldShowButtons = isLastMessage && buttons.length > 0 && onMessage;
-                                return (jsxs("div", { className: classNames(chatStyles.chatMessage, (participant === null || participant === void 0 ? void 0 : participant.isMe) && chatStyles.isMe, !message.isComplete && chatStyles.isNotCompleteMessage), onClick: () => {
-                                        console.group('💬', message.content);
-                                        console.info('message', message);
-                                        console.info('participant', participant);
-                                        console.info('participants', participants);
-                                        console.info('participant avatarSrc', avatarSrc);
-                                        console.info('participant color', { color, colorOfText });
-                                        console.groupEnd();
-                                    }, children: [avatarSrc && (jsx("div", { className: chatStyles.avatar, children: jsx("img", { width: AVATAR_SIZE, height: AVATAR_SIZE, src: avatarSrc, alt: `Avatar of ${message.from.toString().toLocaleLowerCase()}`, style: {
-                                                    backgroundColor: color.toHex(),
-                                                    width: AVATAR_SIZE,
-                                                    height: AVATAR_SIZE,
-                                                    borderRadius: '50%',
-                                                    objectFit: 'cover',
-                                                    border: '2px solid rgba(125, 125, 125, 0.1)',
-                                                    flexShrink: 0,
-                                                } }) })), jsxs("div", { className: chatStyles.messageText, style: {
-                                                backgroundColor: color.toHex(),
-                                                color: colorOfText.toHex(),
-                                            }, children: [message.isVoiceCall && (jsx("div", { className: chatStyles.voiceCallIndicator, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }) })), message.content === LOADING_INTERACTIVE_IMAGE ? (jsx(Fragment, {})) : (jsx("div", { dangerouslySetInnerHTML: {
-                                                        __html: renderMarkdown(contentWithoutButtons),
-                                                    } })), !message.isComplete && (jsx("span", { className: chatStyles.NonCompleteMessageFiller, children: '_'.repeat(70) })), shouldShowButtons && (jsx("div", { className: chatStyles.messageButtons, children: buttons.map((button, buttonIndex) => (jsx("button", { className: chatStyles.messageButton, onClick: (event) => {
-                                                            event.stopPropagation();
-                                                            if (onMessage) {
-                                                                onMessage(button.message);
-                                                            }
-                                                        }, dangerouslySetInnerHTML: {
-                                                            __html: renderMarkdown(button.text),
-                                                        } }, buttonIndex))) })), message.isComplete && (jsx("div", { className: chatStyles.rating, onMouseEnter: () => setExpandedMessageId(message.id), onMouseLeave: () => {
-                                                        setExpandedMessageId(null);
-                                                        setHoveredRating(0);
-                                                    }, children: expandedMessageId === message.id ? ([1, 2, 3, 4, 5].map((star) => (jsx("span", { onClick: () => handleRating(message, star), onMouseEnter: () => setHoveredRating(star), style: {
-                                                            cursor: 'pointer',
-                                                            fontSize: '20px',
-                                                            color: star <=
-                                                                (hoveredRating ||
-                                                                    messageRatings.get(message.id) ||
-                                                                    0)
-                                                                ? '#FFD700'
-                                                                : mode === 'LIGHT'
-                                                                    ? '#ccc'
-                                                                    : '#555',
-                                                            transition: 'color 0.2s',
-                                                        }, children: "\u2B50" }, star)))) : (jsx("span", { onClick: () => handleRating(message, messageRatings.get(message.id) || 1), style: {
-                                                            cursor: 'pointer',
-                                                            fontSize: '20px',
-                                                            color: messageRatings.get(message.id)
-                                                                ? '#FFD700'
-                                                                : mode === 'LIGHT'
-                                                                    ? '#888'
-                                                                    : '#666',
-                                                            transition: 'color 0.2s',
-                                                        }, children: "\u2B50" })) }))] })] }, message.id));
+                                const isExpanded = expandedMessageId === message.id;
+                                const currentRating = messageRatings.get(message.id) || 0;
+                                return (jsx(ChatMessageItem, { message: message, participant: participant, participants: participants, isLastMessage: isLastMessage, onMessage: onMessage, setExpandedMessageId: setExpandedMessageId, isExpanded: isExpanded, currentRating: currentRating, handleRating: handleRating, mode: mode }, message.id));
                             }) }), onMessage && (jsxs("div", { className: classNames(chatStyles.chatInput, useChatCssClassName('chatInput'), isDragOver && chatStyles.dragOver), ...(onFileUpload
                                 ? {
                                     onDrop: handleDrop,
@@ -5350,7 +5588,11 @@ function Chat(props) {
                     if (e.target === e.currentTarget && isMobile) {
                         setRatingModalOpen(false);
                     }
-                }, children: jsxs("div", { className: chatStyles.ratingModalContent, children: [jsx("h3", { children: "Rate this response" }), jsx("div", { className: chatStyles.stars, children: [1, 2, 3, 4, 5].map((star) => (jsx("span", { onClick: () => setMessageRatings(new Map(messageRatings.set(selectedMessage.id, star))), onMouseEnter: () => setHoveredRating(star), onMouseLeave: () => setHoveredRating(0), style: {
+                }, children: jsxs("div", { className: chatStyles.ratingModalContent, children: [jsx("h3", { children: "Rate this response" }), jsx("div", { className: chatStyles.stars, children: [1, 2, 3, 4, 5].map((star) => (jsx("span", { onClick: () => setMessageRatings((previousRatings) => {
+                                    const nextRatings = new Map(previousRatings);
+                                    nextRatings.set(selectedMessage.id, star);
+                                    return nextRatings;
+                                }), onMouseEnter: () => setHoveredRating(star), onMouseLeave: () => setHoveredRating(0), style: {
                                     cursor: 'pointer',
                                     fontSize: '24px',
                                     color: star <= (hoveredRating || messageRatings.get(selectedMessage.id) || 0)
@@ -6001,5 +6243,5 @@ function MockedChat(props) {
         onMessage: isSimulationComplete && chatProps.onMessage ? chatProps.onMessage : undefined }));
 }
 
-export { ArrowIcon, AttachmentIcon, AvatarChip, AvatarChipFromSource, AvatarProfile, AvatarProfileFromSource, BLOCKY_FLOW, BOOK_LANGUAGE_VERSION, BookEditor, CHAT_SAVE_FORMATS, Chat, CloseIcon, DEFAULT_BOOK_FONT_CLASS, FAST_FLOW, LlmChat, MOCKED_CHAT_DELAY_CONFIGS, MockedChat, NORMAL_FLOW, PROMPTBOOK_ENGINE_VERSION, PauseIcon, PlayIcon, RANDOM_FLOW, ResetIcon, SLOW_FLOW, SendIcon, TemplateIcon, getChatSaveFormatDefinitions, htmlSaveFormatDefinition, isMarkdownContent, jsonSaveFormatDefinition, mdSaveFormatDefinition, parseMessageButtons, renderMarkdown, txtSaveFormatDefinition, useChatAutoScroll, useSendMessageToLlmChat };
+export { ArrowIcon, AttachmentIcon, AvatarChip, AvatarChipFromSource, AvatarProfile, AvatarProfileFromSource, BLOCKY_FLOW, BOOK_LANGUAGE_VERSION, BookEditor, CHAT_SAVE_FORMATS, Chat, CloseIcon, DEFAULT_BOOK_FONT_CLASS, FAST_FLOW, LlmChat, MOCKED_CHAT_DELAY_CONFIGS, MockedChat, NORMAL_FLOW, PROMPTBOOK_ENGINE_VERSION, PauseIcon, PlayIcon, RANDOM_FLOW, ResetIcon, SLOW_FLOW, SendIcon, TemplateIcon, getChatSaveFormatDefinitions, htmlSaveFormatDefinition, isMarkdownContent, jsonSaveFormatDefinition, mdSaveFormatDefinition, parseMessageButtons, pdfSaveFormatDefinition, renderMarkdown, txtSaveFormatDefinition, useChatAutoScroll, useSendMessageToLlmChat };
 //# sourceMappingURL=index.es.js.map