ugcinc-render 1.8.156 → 1.8.158

package/dist/index.d.mts

@@ -980,6 +980,8 @@ interface ImMessage {
     id: string;
     sender: ImMessageSender;
     text: string;
+    /** Optional image URL to display above the text */
+    imageUrl?: string;
     /** Group with previous message (no gap, continuous bubble feel) */
     groupWithPrevious?: boolean;
 }

package/dist/index.d.ts

@@ -980,6 +980,8 @@ interface ImMessage {
     id: string;
     sender: ImMessageSender;
     text: string;
+    /** Optional image URL to display above the text */
+    imageUrl?: string;
     /** Group with previous message (no gap, continuous bubble feel) */
     groupWithPrevious?: boolean;
 }

package/dist/index.js

@@ -5252,7 +5252,13 @@ var MESSAGE_DEFAULTS2 = {
   receivedMessagePaddingRight: 200,
   multiLineSentMessagePaddingLeft: 31,
   multiLineReceivedMessagePaddingRight: 31,
-  messagesAnchorY: 2340
+  messagesAnchorY: 2340,
+  // Image message defaults
+  imageMaxWidth: 600,
+  imageAspectRatio: 1,
+  // width / height
+  imageBorderRadius: 30,
+  imageGapToText: 8
 };
 function calculateMessagePositions2(props) {
   const messages = props.messages ?? [];
@@ -5268,6 +5274,9 @@ function calculateMessagePositions2(props) {
   const bubblePaddingX = props.bubblePaddingX ?? MESSAGE_DEFAULTS2.bubblePaddingX;
   const bubblePaddingY = props.bubblePaddingY ?? MESSAGE_DEFAULTS2.bubblePaddingY;
   const bubbleTextFontSize = props.bubbleTextFontSize ?? MESSAGE_DEFAULTS2.bubbleTextFontSize;
+  const imageMaxWidth = MESSAGE_DEFAULTS2.imageMaxWidth;
+  const imageAspectRatio = MESSAGE_DEFAULTS2.imageAspectRatio;
+  const imageGapToText = MESSAGE_DEFAULTS2.imageGapToText;
   const calculatedMessages = [];
   let currentY = messagesAnchorY;
   for (let i = messages.length - 1; i >= 0; i--) {
@@ -5285,8 +5294,20 @@ function calculateMessagePositions2(props) {
     const textHeight = numLines * lineHeight;
     const bubbleWidth = textWidth + bubblePaddingX * 2;
     const bubbleHeight = textHeight + bubblePaddingY * 2;
+    let imageWidth;
+    let imageHeight;
+    let imageY;
+    let totalHeight = bubbleHeight;
+    if (msg.imageUrl) {
+      imageWidth = Math.min(imageMaxWidth, maxBubbleWidth);
+      imageHeight = imageWidth / imageAspectRatio;
+      totalHeight = imageHeight + imageGapToText + bubbleHeight;
+    }
     const x = isSender ? canvasWidth - paddingRight - bubbleWidth : paddingLeft;
     const y = currentY - bubbleHeight;
+    if (msg.imageUrl && imageHeight) {
+      imageY = y - imageGapToText - imageHeight;
+    }
     calculatedMessages.unshift({
       message: msg,
       x,
@@ -5294,16 +5315,21 @@ function calculateMessagePositions2(props) {
       width: bubbleWidth,
       height: bubbleHeight,
       textWidth,
-      textHeight
+      textHeight,
+      imageWidth,
+      imageHeight,
+      imageY
     });
     const prevMsg = i > 0 ? messages[i - 1] : null;
     const gap = prevMsg && prevMsg.sender === msg.sender && !msg.groupWithPrevious ? messageGapSameUser : messageGapDifferentUser;
-    currentY = y - gap;
+    const topOfMessage = msg.imageUrl && imageY !== void 0 ? imageY : y;
+    currentY = topOfMessage - gap;
   }
   return calculatedMessages;
 }
 function generateMessageElements2(props, calculatedMessages) {
   const elements = [];
+  const canvasWidth = props.width ?? 1206;
   const senderBubbleColor = props.senderBubbleColor ?? MESSAGE_DEFAULTS2.senderBubbleColor;
   const recipientBubbleColor = props.recipientBubbleColor ?? MESSAGE_DEFAULTS2.recipientBubbleColor;
   const bubbleTextColor = props.bubbleTextColor ?? MESSAGE_DEFAULTS2.bubbleTextColor;
@@ -5312,10 +5338,28 @@ function generateMessageElements2(props, calculatedMessages) {
   const bubbleBorderRadius = props.bubbleBorderRadius ?? MESSAGE_DEFAULTS2.bubbleBorderRadius;
   const bubblePaddingX = props.bubblePaddingX ?? MESSAGE_DEFAULTS2.bubblePaddingX;
   const bubblePaddingY = props.bubblePaddingY ?? MESSAGE_DEFAULTS2.bubblePaddingY;
+  const imageBorderRadius = MESSAGE_DEFAULTS2.imageBorderRadius;
+  const sentMessagePaddingRight = props.sentMessagePaddingRight ?? MESSAGE_DEFAULTS2.sentMessagePaddingRight;
+  const receivedMessagePaddingLeft = props.receivedMessagePaddingLeft ?? MESSAGE_DEFAULTS2.receivedMessagePaddingLeft;
   for (const calc of calculatedMessages) {
-    const { message, x, y, width, height } = calc;
+    const { message, x, y, width, height, imageWidth, imageHeight, imageY } = calc;
     const isSender = message.sender === "user";
     const bubbleColor = isSender ? senderBubbleColor : recipientBubbleColor;
+    if (message.imageUrl && imageWidth && imageHeight && imageY !== void 0) {
+      const imageX = isSender ? canvasWidth - sentMessagePaddingRight - imageWidth : receivedMessagePaddingLeft;
+      elements.push({
+        id: `image-${message.id}`,
+        type: "image",
+        x: imageX,
+        y: imageY,
+        width: imageWidth,
+        height: imageHeight,
+        zIndex: 10,
+        url: message.imageUrl,
+        borderRadius: imageBorderRadius,
+        objectFit: "cover"
+      });
+    }
     elements.push({
       id: `bubble-${message.id}`,
       type: "text",
@@ -5338,7 +5382,7 @@ function generateMessageElements2(props, calculatedMessages) {
       height: height - bubblePaddingY * 2,
       zIndex: 11,
       text: message.text,
-      fontFamily: "SF Pro Display",
+      fontFamily: '"SF Pro Display", "Apple Color Emoji", sans-serif',
       fontWeight: 400,
       fontSize: bubbleTextFontSize,
       letterSpacing: bubbleTextLetterSpacing,
@@ -5484,10 +5528,10 @@ var defaultIMessageDmProps = {
   messagesAnchorY: 2340,
   // Example messages
   messages: [
-    { id: "msg-1", sender: "recipient", text: "Hey! How are you?" },
-    { id: "msg-2", sender: "user", text: "I'm good, thanks!" },
-    { id: "msg-3", sender: "user", text: "How about you?", groupWithPrevious: true },
-    { id: "msg-4", sender: "recipient", text: "Great! Just working on some stuff." }
+    { 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" },
+    { id: "msg-2", sender: "recipient", text: "don't worry king, i gotchu" },
+    { id: "msg-3", sender: "recipient", text: "that is indeed a cute kitty", groupWithPrevious: true },
+    { id: "msg-4", sender: "recipient", text: "try this line out for speed: are you a kitty? because you deserve pets", groupWithPrevious: true }
   ]
 };
 var IMessageDmComposition = (props) => {
@@ -5704,7 +5748,7 @@ var IMessageDmComposition = (props) => {
               "span",
               {
                 style: {
-                  fontFamily: "SF Pro Display",
+                  fontFamily: '"SF Pro Display", "Apple Color Emoji", sans-serif',
                   fontWeight: 400,
                   fontSize: usernameFontSize,
                   letterSpacing: usernameLetterSpacing,
@@ -6667,6 +6711,7 @@ var iMessageDmPropsSchema = import_zod.z.object({
     id: import_zod.z.string(),
     sender: import_zod.z.enum(["user", "recipient"]),
     text: import_zod.z.string(),
+    imageUrl: import_zod.z.string().optional(),
     groupWithPrevious: import_zod.z.boolean().optional()
   })).optional()
 });

package/dist/index.mjs

@@ -4315,7 +4315,13 @@ var MESSAGE_DEFAULTS2 = {
   receivedMessagePaddingRight: 200,
   multiLineSentMessagePaddingLeft: 31,
   multiLineReceivedMessagePaddingRight: 31,
-  messagesAnchorY: 2340
+  messagesAnchorY: 2340,
+  // Image message defaults
+  imageMaxWidth: 600,
+  imageAspectRatio: 1,
+  // width / height
+  imageBorderRadius: 30,
+  imageGapToText: 8
 };
 function calculateMessagePositions2(props) {
   const messages = props.messages ?? [];
@@ -4331,6 +4337,9 @@ function calculateMessagePositions2(props) {
   const bubblePaddingX = props.bubblePaddingX ?? MESSAGE_DEFAULTS2.bubblePaddingX;
   const bubblePaddingY = props.bubblePaddingY ?? MESSAGE_DEFAULTS2.bubblePaddingY;
   const bubbleTextFontSize = props.bubbleTextFontSize ?? MESSAGE_DEFAULTS2.bubbleTextFontSize;
+  const imageMaxWidth = MESSAGE_DEFAULTS2.imageMaxWidth;
+  const imageAspectRatio = MESSAGE_DEFAULTS2.imageAspectRatio;
+  const imageGapToText = MESSAGE_DEFAULTS2.imageGapToText;
   const calculatedMessages = [];
   let currentY = messagesAnchorY;
   for (let i = messages.length - 1; i >= 0; i--) {
@@ -4348,8 +4357,20 @@ function calculateMessagePositions2(props) {
     const textHeight = numLines * lineHeight;
     const bubbleWidth = textWidth + bubblePaddingX * 2;
     const bubbleHeight = textHeight + bubblePaddingY * 2;
+    let imageWidth;
+    let imageHeight;
+    let imageY;
+    let totalHeight = bubbleHeight;
+    if (msg.imageUrl) {
+      imageWidth = Math.min(imageMaxWidth, maxBubbleWidth);
+      imageHeight = imageWidth / imageAspectRatio;
+      totalHeight = imageHeight + imageGapToText + bubbleHeight;
+    }
     const x = isSender ? canvasWidth - paddingRight - bubbleWidth : paddingLeft;
     const y = currentY - bubbleHeight;
+    if (msg.imageUrl && imageHeight) {
+      imageY = y - imageGapToText - imageHeight;
+    }
     calculatedMessages.unshift({
       message: msg,
       x,
@@ -4357,16 +4378,21 @@ function calculateMessagePositions2(props) {
       width: bubbleWidth,
       height: bubbleHeight,
       textWidth,
-      textHeight
+      textHeight,
+      imageWidth,
+      imageHeight,
+      imageY
     });
     const prevMsg = i > 0 ? messages[i - 1] : null;
     const gap = prevMsg && prevMsg.sender === msg.sender && !msg.groupWithPrevious ? messageGapSameUser : messageGapDifferentUser;
-    currentY = y - gap;
+    const topOfMessage = msg.imageUrl && imageY !== void 0 ? imageY : y;
+    currentY = topOfMessage - gap;
   }
   return calculatedMessages;
 }
 function generateMessageElements2(props, calculatedMessages) {
   const elements = [];
+  const canvasWidth = props.width ?? 1206;
   const senderBubbleColor = props.senderBubbleColor ?? MESSAGE_DEFAULTS2.senderBubbleColor;
   const recipientBubbleColor = props.recipientBubbleColor ?? MESSAGE_DEFAULTS2.recipientBubbleColor;
   const bubbleTextColor = props.bubbleTextColor ?? MESSAGE_DEFAULTS2.bubbleTextColor;
@@ -4375,10 +4401,28 @@ function generateMessageElements2(props, calculatedMessages) {
   const bubbleBorderRadius = props.bubbleBorderRadius ?? MESSAGE_DEFAULTS2.bubbleBorderRadius;
   const bubblePaddingX = props.bubblePaddingX ?? MESSAGE_DEFAULTS2.bubblePaddingX;
   const bubblePaddingY = props.bubblePaddingY ?? MESSAGE_DEFAULTS2.bubblePaddingY;
+  const imageBorderRadius = MESSAGE_DEFAULTS2.imageBorderRadius;
+  const sentMessagePaddingRight = props.sentMessagePaddingRight ?? MESSAGE_DEFAULTS2.sentMessagePaddingRight;
+  const receivedMessagePaddingLeft = props.receivedMessagePaddingLeft ?? MESSAGE_DEFAULTS2.receivedMessagePaddingLeft;
   for (const calc of calculatedMessages) {
-    const { message, x, y, width, height } = calc;
+    const { message, x, y, width, height, imageWidth, imageHeight, imageY } = calc;
     const isSender = message.sender === "user";
     const bubbleColor = isSender ? senderBubbleColor : recipientBubbleColor;
+    if (message.imageUrl && imageWidth && imageHeight && imageY !== void 0) {
+      const imageX = isSender ? canvasWidth - sentMessagePaddingRight - imageWidth : receivedMessagePaddingLeft;
+      elements.push({
+        id: `image-${message.id}`,
+        type: "image",
+        x: imageX,
+        y: imageY,
+        width: imageWidth,
+        height: imageHeight,
+        zIndex: 10,
+        url: message.imageUrl,
+        borderRadius: imageBorderRadius,
+        objectFit: "cover"
+      });
+    }
     elements.push({
       id: `bubble-${message.id}`,
       type: "text",
@@ -4401,7 +4445,7 @@ function generateMessageElements2(props, calculatedMessages) {
       height: height - bubblePaddingY * 2,
       zIndex: 11,
       text: message.text,
-      fontFamily: "SF Pro Display",
+      fontFamily: '"SF Pro Display", "Apple Color Emoji", sans-serif',
       fontWeight: 400,
       fontSize: bubbleTextFontSize,
       letterSpacing: bubbleTextLetterSpacing,
@@ -4547,10 +4591,10 @@ var defaultIMessageDmProps = {
   messagesAnchorY: 2340,
   // Example messages
   messages: [
-    { id: "msg-1", sender: "recipient", text: "Hey! How are you?" },
-    { id: "msg-2", sender: "user", text: "I'm good, thanks!" },
-    { id: "msg-3", sender: "user", text: "How about you?", groupWithPrevious: true },
-    { id: "msg-4", sender: "recipient", text: "Great! Just working on some stuff." }
+    { 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" },
+    { id: "msg-2", sender: "recipient", text: "don't worry king, i gotchu" },
+    { id: "msg-3", sender: "recipient", text: "that is indeed a cute kitty", groupWithPrevious: true },
+    { id: "msg-4", sender: "recipient", text: "try this line out for speed: are you a kitty? because you deserve pets", groupWithPrevious: true }
   ]
 };
 var IMessageDmComposition = (props) => {
@@ -4767,7 +4811,7 @@ var IMessageDmComposition = (props) => {
               "span",
               {
                 style: {
-                  fontFamily: "SF Pro Display",
+                  fontFamily: '"SF Pro Display", "Apple Color Emoji", sans-serif',
                   fontWeight: 400,
                   fontSize: usernameFontSize,
                   letterSpacing: usernameLetterSpacing,
@@ -5447,6 +5491,7 @@ var iMessageDmPropsSchema = z.object({
     id: z.string(),
     sender: z.enum(["user", "recipient"]),
     text: z.string(),
+    imageUrl: z.string().optional(),
     groupWithPrevious: z.boolean().optional()
   })).optional()
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.156",
+  "version": "1.8.158",
   "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",