@promptbook/components 0.101.0-11 → 0.101.0-13

package/esm/index.es.js

@@ -21,7 +21,7 @@ const BOOK_LANGUAGE_VERSION = '1.0.0';
  * @generated
  * @see https://github.com/webgptorg/promptbook
  */
-const PROMPTBOOK_ENGINE_VERSION = '0.101.0-11';
+const PROMPTBOOK_ENGINE_VERSION = '0.101.0-13';
 /**
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
  * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -4127,49 +4127,8 @@ const LOADING_INTERACTIVE_IMAGE = 'Loading...';
  * Note: [💞] Ignore a discrepancy between file name and entity name
  */
 
-// Critical inline styles to prevent layout shift during CSS module loading
-const CRITICAL_STYLES = {
-    chat: {
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    chatMainFlow: {
-        width: '100%',
-        height: '100%',
-        maxWidth: '100vw',
-        display: 'grid',
-        gridTemplate: `
-            'header' min-content
-            'messages' 1fr
-            'input' min-content
-            / 1fr`,
-    },
-    chatMessages: {
-        gridArea: 'messages',
-        width: '100%',
-        height: '100%',
-        padding: '24px 20px 16px',
-        overflowY: 'auto',
-        overflowX: 'hidden',
-    },
-    chatInput: {
-        gridArea: 'input',
-        width: '100%',
-        padding: '20px',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '12px',
-    },
-    chatBar: {
-        gridArea: 'header',
-        width: '100%',
-        padding: '16px 20px',
-        textAlign: 'center',
-    },
-};
-// <- TODO: [💩] !!!! "[✨🦬] Fix `<Chat/>` loading"
+// [🚉] Avatar dimensions constant to prevent layout jumps and maintain DRY principle
+const AVATAR_SIZE = 40;
 /**
  * Renders a chat with messages and input for new messages
  *
@@ -4350,10 +4309,7 @@ function Chat(props) {
             return { ...message, content: humanizeAiText(message.content) };
         });
     }, [messages, isAiTextHumanized]);
-    return (jsxs(Fragment, { children: [ratingConfirmation && jsx("div", { className: styles$1.ratingConfirmation, children: ratingConfirmation }), jsx("div", { className: classNames(className, styles$1.Chat, useChatCssClassName('Chat')), style: {
-                    ...CRITICAL_STYLES.chat,
-                    ...style,
-                }, children: jsxs("div", { className: classNames(className, styles$1.chatMainFlow, useChatCssClassName('chatMainFlow')), style: CRITICAL_STYLES.chatMainFlow, children: [children && (jsx("div", { className: classNames(styles$1.chatBar, chatBarCssClassName), style: CRITICAL_STYLES.chatBar, children: children })), !isAutoScrolling && (jsx("div", { className: styles$1.scrollToBottomContainer, children: jsx("button", { "data-button-type": "custom", className: classNames(styles$1.scrollToBottom, scrollToBottomCssClassName), onClick: () => {
+    return (jsxs(Fragment, { children: [ratingConfirmation && jsx("div", { className: styles$1.ratingConfirmation, children: ratingConfirmation }), jsx("div", { className: classNames(className, styles$1.Chat, useChatCssClassName('Chat')), style, children: jsxs("div", { className: classNames(className, styles$1.chatMainFlow, useChatCssClassName('chatMainFlow')), children: [children && jsx("div", { className: classNames(styles$1.chatBar, chatBarCssClassName), children: children }), !isAutoScrolling && (jsx("div", { className: styles$1.scrollToBottomContainer, children: jsx("button", { "data-button-type": "custom", className: classNames(styles$1.scrollToBottom, scrollToBottomCssClassName), onClick: () => {
                                     const chatMessagesElement = chatMessagesRef.current;
                                     if (chatMessagesElement === null) {
                                         return;
@@ -4375,7 +4331,7 @@ function Chat(props) {
                                             return;
                                         }
                                         onReset();
-                                    }, children: [jsx(ResetIcon, {}), jsx("span", { className: styles$1.resetButtonText, children: "New chat" })] })), onUseTemplate && (jsxs("button", { className: classNames(styles$1.useTemplateButton), onClick: onUseTemplate, children: [jsx("span", { className: styles$1.resetButtonText, children: "Use this template" }), jsx(TemplateIcon, { size: 16 })] }))] }), jsx("div", { className: classNames(styles$1.chatMessages, useChatCssClassName('chatMessages')), style: CRITICAL_STYLES.chatMessages, ref: (chatMessagesElement) => {
+                                    }, children: [jsx(ResetIcon, {}), jsx("span", { className: styles$1.resetButtonText, children: "New chat" })] })), onUseTemplate && (jsxs("button", { className: classNames(styles$1.useTemplateButton), onClick: onUseTemplate, children: [jsx("span", { className: styles$1.resetButtonText, children: "Use this template" }), jsx(TemplateIcon, { size: 16 })] }))] }), jsx("div", { className: classNames(styles$1.chatMessages, useChatCssClassName('chatMessages')), ref: (chatMessagesElement) => {
                                 chatMessagesRef.current = chatMessagesElement;
                                 if (chatMessagesElement === null) {
                                     return;
@@ -4418,8 +4374,14 @@ function Chat(props) {
                                         console.info('participant avatarSrc', avatarSrc);
                                         console.info('participant color', { color, colorOfText });
                                         console.groupEnd();
-                                    }, children: [avatarSrc && (jsx("div", { className: styles$1.avatar, children: jsx("img", { width: 256, height: 256, src: avatarSrc, alt: `Avatar of ${message.from.toLocaleLowerCase()}`, style: {
+                                    }, children: [avatarSrc && (jsx("div", { className: styles$1.avatar, children: jsx("img", { width: AVATAR_SIZE, height: AVATAR_SIZE, src: avatarSrc, alt: `Avatar of ${message.from.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: styles$1.messageText, style: {
                                                 backgroundColor: color.toHex(),
                                                 color: colorOfText.toHex(),
@@ -4448,7 +4410,7 @@ function Chat(props) {
                                                                     : '#666',
                                                             transition: 'color 0.2s',
                                                         }, children: "\u2B50" })) }))] })] }, i));
-                            }) }), onMessage && (jsxs("div", { className: classNames(styles$1.chatInput, useChatCssClassName('chatInput')), style: CRITICAL_STYLES.chatInput, children: [jsx("textarea", { ref: (element) => {
+                            }) }), onMessage && (jsxs("div", { className: classNames(styles$1.chatInput, useChatCssClassName('chatInput')), children: [jsx("textarea", { ref: (element) => {
                                         textareaRef.current = element;
                                     }, style: {
                                         height: Math.max(countLines(((_b = textareaRef.current) === null || _b === void 0 ? void 0 : _b.value) || defaultMessage || ''), (((_c = textareaRef.current) === null || _c === void 0 ? void 0 : _c.value) || defaultMessage || '').split('\n').length, 3) *