@promptbook/components 0.104.0-6 → 0.104.0-8

package/esm/index.es.js

@@ -35,7 +35,7 @@ const BOOK_LANGUAGE_VERSION = '2.0.0';
  * @generated
  * @see https://github.com/webgptorg/promptbook
  */
-const PROMPTBOOK_ENGINE_VERSION = '0.104.0-6';
+const PROMPTBOOK_ENGINE_VERSION = '0.104.0-8';
 /**
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
  * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -157,6 +157,8 @@ function normalizeTo_camelCase(text, _isFirstLetterCapital = false) {
  * Core Promptbook server configuration.
  *
  * This server is also used for auto-federation in the Agents Server.
+ *
+ * @public exported from `@promptbook/core`
  */
 const CORE_SERVER = {
     title: 'Promptbook Core',
@@ -8784,6 +8786,52 @@ function furthest(...colors) {
  */
 const textColor = furthest(Color.get('white'), Color.from('black'));
 
+/**
+ * Makes data url from color
+ *
+ * @public exported from `@promptbook/color`
+ */
+function colorToDataUrl(color) {
+    if (typeof color === 'string') {
+        color = Color.fromHex(color);
+    }
+    return rgbDataURL(color.red, color.green, color.blue);
+}
+/**
+ * Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
+ *
+ * @private util of `colorToDataUrl`
+ */
+const keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+/**
+ * Generates a base64-encoded triplet string
+ *
+ * @param e1 - The first element in the triplet.
+ * @param e2 - The second element in the triplet.
+ * @param e3 - The third element in the triplet.
+ * @returns The base64-encoded triplet string.
+ *
+ * @private util of `colorToDataUrl`
+ */
+const triplet = (e1, e2, e3) => keyStr.charAt(e1 >> 2) +
+    keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
+    keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
+    keyStr.charAt(e3 & 63);
+/**
+ * Converts RGB values to a data URL string
+ *
+ * @param r - The red channel value.
+ * @param g - The green channel value.
+ * @param b - The blue channel value.
+ * @returns The RGB data URL string.
+ *
+ * @private util of `colorToDataUrl`
+ */
+const rgbDataURL = (r, g, b) => `data:image/gif;base64,R0lGODlhAQABAPAA${triplet(0, r, g) + triplet(b, 255, 255)}/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`;
+/**
+ * TODO: Make as functions NOT const
+ */
+
 /**
  * Restricts an Updatable to a (2) BehaviorSubject variant
  *
@@ -9511,7 +9559,7 @@ const AVATAR_SIZE = 40;
  * @private internal subcomponent of `<Chat>` component
  */
 const ChatMessageItem = memo(({ message, participant, participants, isLastMessage, onMessage, setExpandedMessageId, isExpanded, currentRating, handleRating, mode, isCopyButtonEnabled, isFeedbackEnabled, onCopy, onCreateAgent, }) => {
-    const avatarSrc = (participant === null || participant === void 0 ? void 0 : participant.avatarSrc) || '';
+    const avatarSrc = (participant === null || participant === void 0 ? void 0 : participant.avatarSrc) || null;
     const [isAvatarTooltipVisible, setIsAvatarTooltipVisible] = useState(false);
     const [avatarTooltipPosition, setAvatarTooltipPosition] = useState(null);
     const hoverTimeoutRef = useRef(null);
@@ -9605,9 +9653,11 @@ const ChatMessageItem = memo(({ message, participant, participants, isLastMessag
         }, children: [avatarSrc && (jsxs("div", { ref: avatarRef, className: chatStyles.avatar, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: showTooltip, children: [jsx("img", { width: AVATAR_SIZE, src: avatarSrc, alt: `Avatar of ${message.sender.toString().toLocaleLowerCase()}`, style: {
                             '--avatar-bg-color': color.toHex(),
                             objectFit: 'cover',
+                            objectPosition: '50% 20%',
                             width: AVATAR_SIZE,
                             height: AVATAR_SIZE,
                             aspectRatio: '1 / 1',
+                            backgroundImage: `url(${colorToDataUrl(color)})`,
                         } }), isAvatarTooltipVisible && (participant === null || participant === void 0 ? void 0 : participant.agentSource) && avatarTooltipPosition && (jsx(AvatarProfileTooltip, { ref: tooltipRef, agentSource: participant.agentSource, position: avatarTooltipPosition }))] })), jsxs("div", { className: chatStyles.messageText, style: {
                     '--message-bg-color': color.toHex(),
                     '--message-text-color': colorOfText.toHex(),
@@ -16707,13 +16757,14 @@ class OpenAiCompatibleExecutionTools {
         const modelName = currentModelRequirements.modelName || this.getDefaultImageGenerationModel().modelName;
         const modelSettings = {
             model: modelName,
-            // size: currentModelRequirements.size,
-            // quality: currentModelRequirements.quality,
-            // style: currentModelRequirements.style,
+            size: currentModelRequirements.size,
+            quality: currentModelRequirements.quality,
+            style: currentModelRequirements.style,
         };
         const rawPromptContent = templateParameters(content, { ...parameters, modelName });
         const rawRequest = {
             ...modelSettings,
+            size: modelSettings.size || '1024x1024',
             prompt: rawPromptContent,
             user: (_a = this.options.userId) === null || _a === void 0 ? void 0 : _a.toString(),
             response_format: 'url', // TODO: [🧠] Maybe allow b64_json