@promptbook/components 0.101.0-10 → 0.101.0-11

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-10';
+const PROMPTBOOK_ENGINE_VERSION = '0.101.0-11';
 /**
  * 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,6 +4127,49 @@ 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"
 /**
  * Renders a chat with messages and input for new messages
  *
@@ -4307,7 +4350,10 @@ 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, 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: () => {
+    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: () => {
                                     const chatMessagesElement = chatMessagesRef.current;
                                     if (chatMessagesElement === null) {
                                         return;
@@ -4329,7 +4375,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')), 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')), style: CRITICAL_STYLES.chatMessages, ref: (chatMessagesElement) => {
                                 chatMessagesRef.current = chatMessagesElement;
                                 if (chatMessagesElement === null) {
                                     return;
@@ -4402,7 +4448,7 @@ function Chat(props) {
                                                                     : '#666',
                                                             transition: 'color 0.2s',
                                                         }, children: "\u2B50" })) }))] })] }, i));
-                            }) }), onMessage && (jsxs("div", { className: classNames(styles$1.chatInput, useChatCssClassName('chatInput')), children: [jsx("textarea", { ref: (element) => {
+                            }) }), onMessage && (jsxs("div", { className: classNames(styles$1.chatInput, useChatCssClassName('chatInput')), style: CRITICAL_STYLES.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) *