@promptbook/components 0.101.0-10 → 0.101.0-12

package/esm/typings/src/version.d.ts

@@ -15,7 +15,7 @@ export declare const BOOK_LANGUAGE_VERSION: string_semantic_version;
 export declare const PROMPTBOOK_ENGINE_VERSION: string_promptbook_version;
 /**
  * Represents the version string of the Promptbook engine.
- * It follows semantic versioning (e.g., `0.101.0-9`).
+ * It follows semantic versioning (e.g., `0.101.0-11`).
  *
  * @generated
  */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@promptbook/components",
-    "version": "0.101.0-10",
+    "version": "0.101.0-12",
     "description": "Promptbook: Run AI apps in plain human language across multiple models and platforms",
     "private": false,
     "sideEffects": false,

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-12';
     /**
      * 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,8 @@
      * Note: [💞] Ignore a discrepancy between file name and entity name
      */
 
+    // [🚉] 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
      *
@@ -4373,8 +4375,14 @@
                                             console.info('participant avatarSrc', avatarSrc);
                                             console.info('participant color', { color, colorOfText });
                                             console.groupEnd();
-                                        }, children: [avatarSrc && (jsxRuntime.jsx("div", { className: styles$1.avatar, children: jsxRuntime.jsx("img", { width: 256, height: 256, src: avatarSrc, alt: `Avatar of ${message.from.toLocaleLowerCase()}`, style: {
+                                        }, children: [avatarSrc && (jsxRuntime.jsx("div", { className: styles$1.avatar, children: jsxRuntime.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,
                                                     } }) })), jsxRuntime.jsxs("div", { className: styles$1.messageText, style: {
                                                     backgroundColor: color.toHex(),
                                                     color: colorOfText.toHex(),