ugcinc-render 1.8.167 → 1.8.169

package/dist/index.d.mts

@@ -1104,6 +1104,10 @@ interface IMessageDmCompositionProps {
     recipientBubbleLeft?: number;
     senderBubbleRight?: number;
     bubbleMaxWidth?: number;
+    senderImageLeft?: number;
+    senderImageHeight?: number;
+    senderImageGapToText?: number;
+    senderImageBorderRadius?: number;
     messages?: ImMessage[];
 }
 

package/dist/index.d.ts

@@ -1104,6 +1104,10 @@ interface IMessageDmCompositionProps {
     recipientBubbleLeft?: number;
     senderBubbleRight?: number;
     bubbleMaxWidth?: number;
+    senderImageLeft?: number;
+    senderImageHeight?: number;
+    senderImageGapToText?: number;
+    senderImageBorderRadius?: number;
     messages?: ImMessage[];
 }
 

package/dist/index.js

@@ -5288,11 +5288,11 @@ var MESSAGE_DEFAULTS2 = {
   recipientBubbleLeft: 48,
   senderBubbleRight: 1158,
   bubbleMaxWidth: 900,
-  // Image message defaults
-  imageMaxWidth: 600,
-  imageAspectRatio: 1,
-  imageBorderRadius: 30,
-  imageGapToText: 8
+  // Sender image attachment
+  senderImageLeft: 336,
+  senderImageHeight: 1120,
+  senderImageGapToText: 3,
+  senderImageBorderRadius: 30
 };
 var FONT_FAMILY2 = getFontFamily("apple");
 function calculateAutoWidthAndLines3({
@@ -5409,9 +5409,9 @@ function calculateMessagePositions2(props) {
   const recipientBubbleLeft = props.recipientBubbleLeft ?? MESSAGE_DEFAULTS2.recipientBubbleLeft;
   const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS2.senderBubbleRight;
   const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS2.bubbleMaxWidth;
-  const imageMaxWidth = MESSAGE_DEFAULTS2.imageMaxWidth;
-  const imageAspectRatio = MESSAGE_DEFAULTS2.imageAspectRatio;
-  const imageGapToText = MESSAGE_DEFAULTS2.imageGapToText;
+  const senderImageLeft = props.senderImageLeft ?? MESSAGE_DEFAULTS2.senderImageLeft;
+  const senderImageHeight = props.senderImageHeight ?? MESSAGE_DEFAULTS2.senderImageHeight;
+  const senderImageGapToText = props.senderImageGapToText ?? MESSAGE_DEFAULTS2.senderImageGapToText;
   const calculatedMessages = [];
   let currentBottom = messageAreaBottom;
   for (let i = messages.length - 1; i >= 0; i--) {
@@ -5462,10 +5462,10 @@ function calculateMessagePositions2(props) {
     let imageWidth;
     let imageHeight;
     let imageY;
-    if (message.imageUrl) {
-      imageWidth = Math.min(imageMaxWidth, bubbleMaxWidth);
-      imageHeight = imageWidth / imageAspectRatio;
-      imageY = bubbleTop - imageGapToText - imageHeight;
+    if (message.imageUrl && message.sender === "user") {
+      imageWidth = senderBubbleRight - senderImageLeft;
+      imageHeight = senderImageHeight;
+      imageY = bubbleTop - senderImageGapToText - imageHeight;
     }
     calculatedMessages.unshift({
       message,
@@ -5537,24 +5537,24 @@ function generateMessageElements2(props, calculatedMessages) {
   const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS2.bubbleMaxWidth;
   const recipientBubbleLeft = props.recipientBubbleLeft ?? MESSAGE_DEFAULTS2.recipientBubbleLeft;
   const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS2.senderBubbleRight;
-  const imageBorderRadius = MESSAGE_DEFAULTS2.imageBorderRadius;
+  const senderImageLeft = props.senderImageLeft ?? MESSAGE_DEFAULTS2.senderImageLeft;
+  const senderImageBorderRadius = props.senderImageBorderRadius ?? MESSAGE_DEFAULTS2.senderImageBorderRadius;
   const lineHeightMultiplier = messageLineHeight / messageFontSize;
   for (let i = 0; i < calculatedMessages.length; i++) {
     const cm = calculatedMessages[i];
     const isUser = cm.message.sender === "user";
     const bubbleColor = isUser ? senderBubbleColor : recipientBubbleColor;
-    if (cm.message.imageUrl && cm.imageWidth && cm.imageHeight && cm.imageY !== void 0) {
-      const imageX = isUser ? senderBubbleRight - cm.imageWidth : recipientBubbleLeft;
+    if (cm.message.imageUrl && cm.imageWidth && cm.imageHeight && cm.imageY !== void 0 && isUser) {
       elements.push({
         id: `image-${cm.message.id}`,
         type: "image",
-        x: imageX,
+        x: senderImageLeft,
         y: cm.imageY,
         width: cm.imageWidth,
         height: cm.imageHeight,
         zIndex: 5 + i,
         url: cm.message.imageUrl,
-        borderRadius: imageBorderRadius,
+        borderRadius: senderImageBorderRadius,
         objectFit: "cover"
       });
     }
@@ -5737,6 +5737,11 @@ var defaultIMessageDmProps = {
   recipientBubbleLeft: 48,
   senderBubbleRight: 1158,
   bubbleMaxWidth: 900,
+  // Sender image attachment
+  senderImageLeft: 336,
+  senderImageHeight: 1120,
+  senderImageGapToText: 3,
+  senderImageBorderRadius: 30,
   // Example messages
   messages: [
     { id: "msg-1", sender: "user", text: "heyyy fae, help me slide on this baddie pls \u{1F64F}", imageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/pinterest-1766175214139-0-JpXmGIxVWdjEJ3qxGyoC4DAi2KAZrg.jpg" },
@@ -5754,6 +5759,17 @@ var IMessageDmComposition = (props) => {
       if (typeof document !== "undefined" && document.fonts?.ready) {
         await document.fonts.ready;
       }
+      await new Promise((resolve) => {
+        if (typeof requestAnimationFrame !== "undefined") {
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              resolve();
+            });
+          });
+        } else {
+          resolve();
+        }
+      });
     };
     loadFonts().then(() => {
       setFontsLoaded(true);
@@ -6951,6 +6967,11 @@ var iMessageDmPropsSchema = import_zod.z.object({
   recipientBubbleLeft: import_zod.z.number().optional(),
   senderBubbleRight: import_zod.z.number().optional(),
   bubbleMaxWidth: import_zod.z.number().optional(),
+  // Sender image attachment
+  senderImageLeft: import_zod.z.number().optional(),
+  senderImageHeight: import_zod.z.number().optional(),
+  senderImageGapToText: import_zod.z.number().optional(),
+  senderImageBorderRadius: import_zod.z.number().optional(),
   // Messages
   messages: import_zod.z.array(import_zod.z.object({
     id: import_zod.z.string(),

package/dist/index.mjs

@@ -4334,11 +4334,11 @@ var MESSAGE_DEFAULTS2 = {
   recipientBubbleLeft: 48,
   senderBubbleRight: 1158,
   bubbleMaxWidth: 900,
-  // Image message defaults
-  imageMaxWidth: 600,
-  imageAspectRatio: 1,
-  imageBorderRadius: 30,
-  imageGapToText: 8
+  // Sender image attachment
+  senderImageLeft: 336,
+  senderImageHeight: 1120,
+  senderImageGapToText: 3,
+  senderImageBorderRadius: 30
 };
 var FONT_FAMILY2 = getFontFamily("apple");
 function calculateAutoWidthAndLines3({
@@ -4455,9 +4455,9 @@ function calculateMessagePositions2(props) {
   const recipientBubbleLeft = props.recipientBubbleLeft ?? MESSAGE_DEFAULTS2.recipientBubbleLeft;
   const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS2.senderBubbleRight;
   const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS2.bubbleMaxWidth;
-  const imageMaxWidth = MESSAGE_DEFAULTS2.imageMaxWidth;
-  const imageAspectRatio = MESSAGE_DEFAULTS2.imageAspectRatio;
-  const imageGapToText = MESSAGE_DEFAULTS2.imageGapToText;
+  const senderImageLeft = props.senderImageLeft ?? MESSAGE_DEFAULTS2.senderImageLeft;
+  const senderImageHeight = props.senderImageHeight ?? MESSAGE_DEFAULTS2.senderImageHeight;
+  const senderImageGapToText = props.senderImageGapToText ?? MESSAGE_DEFAULTS2.senderImageGapToText;
   const calculatedMessages = [];
   let currentBottom = messageAreaBottom;
   for (let i = messages.length - 1; i >= 0; i--) {
@@ -4508,10 +4508,10 @@ function calculateMessagePositions2(props) {
     let imageWidth;
     let imageHeight;
     let imageY;
-    if (message.imageUrl) {
-      imageWidth = Math.min(imageMaxWidth, bubbleMaxWidth);
-      imageHeight = imageWidth / imageAspectRatio;
-      imageY = bubbleTop - imageGapToText - imageHeight;
+    if (message.imageUrl && message.sender === "user") {
+      imageWidth = senderBubbleRight - senderImageLeft;
+      imageHeight = senderImageHeight;
+      imageY = bubbleTop - senderImageGapToText - imageHeight;
     }
     calculatedMessages.unshift({
       message,
@@ -4583,24 +4583,24 @@ function generateMessageElements2(props, calculatedMessages) {
   const bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS2.bubbleMaxWidth;
   const recipientBubbleLeft = props.recipientBubbleLeft ?? MESSAGE_DEFAULTS2.recipientBubbleLeft;
   const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS2.senderBubbleRight;
-  const imageBorderRadius = MESSAGE_DEFAULTS2.imageBorderRadius;
+  const senderImageLeft = props.senderImageLeft ?? MESSAGE_DEFAULTS2.senderImageLeft;
+  const senderImageBorderRadius = props.senderImageBorderRadius ?? MESSAGE_DEFAULTS2.senderImageBorderRadius;
   const lineHeightMultiplier = messageLineHeight / messageFontSize;
   for (let i = 0; i < calculatedMessages.length; i++) {
     const cm = calculatedMessages[i];
     const isUser = cm.message.sender === "user";
     const bubbleColor = isUser ? senderBubbleColor : recipientBubbleColor;
-    if (cm.message.imageUrl && cm.imageWidth && cm.imageHeight && cm.imageY !== void 0) {
-      const imageX = isUser ? senderBubbleRight - cm.imageWidth : recipientBubbleLeft;
+    if (cm.message.imageUrl && cm.imageWidth && cm.imageHeight && cm.imageY !== void 0 && isUser) {
       elements.push({
         id: `image-${cm.message.id}`,
         type: "image",
-        x: imageX,
+        x: senderImageLeft,
         y: cm.imageY,
         width: cm.imageWidth,
         height: cm.imageHeight,
         zIndex: 5 + i,
         url: cm.message.imageUrl,
-        borderRadius: imageBorderRadius,
+        borderRadius: senderImageBorderRadius,
         objectFit: "cover"
       });
     }
@@ -4783,6 +4783,11 @@ var defaultIMessageDmProps = {
   recipientBubbleLeft: 48,
   senderBubbleRight: 1158,
   bubbleMaxWidth: 900,
+  // Sender image attachment
+  senderImageLeft: 336,
+  senderImageHeight: 1120,
+  senderImageGapToText: 3,
+  senderImageBorderRadius: 30,
   // Example messages
   messages: [
     { id: "msg-1", sender: "user", text: "heyyy fae, help me slide on this baddie pls \u{1F64F}", imageUrl: "https://n14dcpakf8w1fekl.public.blob.vercel-storage.com/media/06c3ed1c-eefb-4a60-b0c4-5fb872811ba0/pinterest-1766175214139-0-JpXmGIxVWdjEJ3qxGyoC4DAi2KAZrg.jpg" },
@@ -4800,6 +4805,17 @@ var IMessageDmComposition = (props) => {
       if (typeof document !== "undefined" && document.fonts?.ready) {
         await document.fonts.ready;
       }
+      await new Promise((resolve) => {
+        if (typeof requestAnimationFrame !== "undefined") {
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              resolve();
+            });
+          });
+        } else {
+          resolve();
+        }
+      });
     };
     loadFonts().then(() => {
       setFontsLoaded(true);
@@ -5714,6 +5730,11 @@ var iMessageDmPropsSchema = z.object({
   recipientBubbleLeft: z.number().optional(),
   senderBubbleRight: z.number().optional(),
   bubbleMaxWidth: z.number().optional(),
+  // Sender image attachment
+  senderImageLeft: z.number().optional(),
+  senderImageHeight: z.number().optional(),
+  senderImageGapToText: z.number().optional(),
+  senderImageBorderRadius: z.number().optional(),
   // Messages
   messages: z.array(z.object({
     id: z.string(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.167",
+  "version": "1.8.169",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",