@promptbook/components 0.104.0-7 → 0.104.0-8

package/esm/typings/src/book-2.0/utils/generatePlaceholderAgentProfileImageUrl.d.ts

@@ -1,4 +1,4 @@
-import type { string_agent_name, string_agent_permanent_id, string_url_image } from '../../types/typeAliases';
+import type { string_agent_name, string_agent_permanent_id, string_url, string_url_image } from '../../types/typeAliases';
 /**
  * Generates an image for the agent to use as profile image
  *
@@ -7,7 +7,7 @@ import type { string_agent_name, string_agent_permanent_id, string_url_image } f
  *
  * @public exported from `@promptbook/core`
  */
-export declare function generatePlaceholderAgentProfileImageUrl(agentIdOrName: string_agent_permanent_id | string_agent_name, agentsServerUrl?: URL): string_url_image;
+export declare function generatePlaceholderAgentProfileImageUrl(agentIdOrName: string_agent_permanent_id | string_agent_name, agentsServerUrl?: URL | string_url): string_url_image;
 /**
  * TODO: [🤹] Figure out best placeholder image generator https://i.pravatar.cc/1000?u=568
  */

package/esm/typings/src/utils/color/utils/colorToDataUrl.d.ts

@@ -1,10 +1,11 @@
+import { string_color, string_data_url, string_url_image } from '../../../types/typeAliases';
 import { Color } from '../Color';
 /**
  * Makes data url from color
  *
  * @public exported from `@promptbook/color`
  */
-export declare function colorToDataUrl(color: Color): string;
+export declare function colorToDataUrl(color: Color | string_color): string_data_url & string_url_image;
 /**
  * TODO: Make as functions NOT const
  */

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.104.0-6`).
+ * It follows semantic versioning (e.g., `0.104.0-7`).
  *
  * @generated
  */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@promptbook/components",
-    "version": "0.104.0-7",
+    "version": "0.104.0-8",
     "description": "Promptbook: Turn your company's scattered knowledge into AI ready books",
     "private": false,
     "sideEffects": false,

package/umd/index.umd.js

@@ -30,7 +30,7 @@
      * @generated
      * @see https://github.com/webgptorg/promptbook
      */
-    const PROMPTBOOK_ENGINE_VERSION = '0.104.0-7';
+    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
@@ -8781,6 +8781,52 @@
      */
     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
      *
@@ -9508,7 +9554,7 @@
      * @private internal subcomponent of `<Chat>` component
      */
     const ChatMessageItem = react.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] = react.useState(false);
         const [avatarTooltipPosition, setAvatarTooltipPosition] = react.useState(null);
         const hoverTimeoutRef = react.useRef(null);
@@ -9602,9 +9648,11 @@
             }, children: [avatarSrc && (jsxRuntime.jsxs("div", { ref: avatarRef, className: chatStyles.avatar, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: showTooltip, children: [jsxRuntime.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 && (jsxRuntime.jsx(AvatarProfileTooltip, { ref: tooltipRef, agentSource: participant.agentSource, position: avatarTooltipPosition }))] })), jsxRuntime.jsxs("div", { className: chatStyles.messageText, style: {
                         '--message-bg-color': color.toHex(),
                         '--message-text-color': colorOfText.toHex(),