@promptbook/components 0.101.0-10 → 0.101.0-11

package/umd/index.umd.js

@@ -22,7 +22,7 @@
      * @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
@@ -4128,6 +4128,49 @@
      * 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
      *
@@ -4308,7 +4351,10 @@
                 return { ...message, content: humanizeAiText(message.content) };
             });
         }, [messages, isAiTextHumanized]);
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ratingConfirmation && jsxRuntime.jsx("div", { className: styles$1.ratingConfirmation, children: ratingConfirmation }), jsxRuntime.jsx("div", { className: classNames(className, styles$1.Chat, useChatCssClassName('Chat')), style, children: jsxRuntime.jsxs("div", { className: classNames(className, styles$1.chatMainFlow, useChatCssClassName('chatMainFlow')), children: [children && jsxRuntime.jsx("div", { className: classNames(styles$1.chatBar, chatBarCssClassName), children: children }), !isAutoScrolling && (jsxRuntime.jsx("div", { className: styles$1.scrollToBottomContainer, children: jsxRuntime.jsx("button", { "data-button-type": "custom", className: classNames(styles$1.scrollToBottom, scrollToBottomCssClassName), onClick: () => {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ratingConfirmation && jsxRuntime.jsx("div", { className: styles$1.ratingConfirmation, children: ratingConfirmation }), jsxRuntime.jsx("div", { className: classNames(className, styles$1.Chat, useChatCssClassName('Chat')), style: {
+                        ...CRITICAL_STYLES.chat,
+                        ...style,
+                    }, children: jsxRuntime.jsxs("div", { className: classNames(className, styles$1.chatMainFlow, useChatCssClassName('chatMainFlow')), style: CRITICAL_STYLES.chatMainFlow, children: [children && (jsxRuntime.jsx("div", { className: classNames(styles$1.chatBar, chatBarCssClassName), style: CRITICAL_STYLES.chatBar, children: children })), !isAutoScrolling && (jsxRuntime.jsx("div", { className: styles$1.scrollToBottomContainer, children: jsxRuntime.jsx("button", { "data-button-type": "custom", className: classNames(styles$1.scrollToBottom, scrollToBottomCssClassName), onClick: () => {
                                         const chatMessagesElement = chatMessagesRef.current;
                                         if (chatMessagesElement === null) {
                                             return;
@@ -4330,7 +4376,7 @@
                                                 return;
                                             }
                                             onReset();
-                                        }, children: [jsxRuntime.jsx(ResetIcon, {}), jsxRuntime.jsx("span", { className: styles$1.resetButtonText, children: "New chat" })] })), onUseTemplate && (jsxRuntime.jsxs("button", { className: classNames(styles$1.useTemplateButton), onClick: onUseTemplate, children: [jsxRuntime.jsx("span", { className: styles$1.resetButtonText, children: "Use this template" }), jsxRuntime.jsx(TemplateIcon, { size: 16 })] }))] }), jsxRuntime.jsx("div", { className: classNames(styles$1.chatMessages, useChatCssClassName('chatMessages')), ref: (chatMessagesElement) => {
+                                        }, children: [jsxRuntime.jsx(ResetIcon, {}), jsxRuntime.jsx("span", { className: styles$1.resetButtonText, children: "New chat" })] })), onUseTemplate && (jsxRuntime.jsxs("button", { className: classNames(styles$1.useTemplateButton), onClick: onUseTemplate, children: [jsxRuntime.jsx("span", { className: styles$1.resetButtonText, children: "Use this template" }), jsxRuntime.jsx(TemplateIcon, { size: 16 })] }))] }), jsxRuntime.jsx("div", { className: classNames(styles$1.chatMessages, useChatCssClassName('chatMessages')), style: CRITICAL_STYLES.chatMessages, ref: (chatMessagesElement) => {
                                     chatMessagesRef.current = chatMessagesElement;
                                     if (chatMessagesElement === null) {
                                         return;
@@ -4403,7 +4449,7 @@
                                                                         : '#666',
                                                                 transition: 'color 0.2s',
                                                             }, children: "\u2B50" })) }))] })] }, i));
-                                }) }), onMessage && (jsxRuntime.jsxs("div", { className: classNames(styles$1.chatInput, useChatCssClassName('chatInput')), children: [jsxRuntime.jsx("textarea", { ref: (element) => {
+                                }) }), onMessage && (jsxRuntime.jsxs("div", { className: classNames(styles$1.chatInput, useChatCssClassName('chatInput')), style: CRITICAL_STYLES.chatInput, children: [jsxRuntime.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) *