ugcinc-render 1.8.161 → 1.8.162

package/dist/index.d.mts

@@ -1080,25 +1080,26 @@ interface IMessageDmCompositionProps {
     messageTextLetterSpacing?: number;
     messageTextColor?: string;
     messageText?: string;
+    messageAreaTop?: number;
+    messageAreaBottom?: number;
     senderBubbleColor?: string;
     recipientBubbleColor?: string;
     bubbleTextColor?: string;
-    bubbleTextFontSize?: number;
-    bubbleTextLetterSpacing?: number;
-    bubbleTextLineHeight?: number;
-    bubbleBorderRadius?: number;
-    bubblePaddingX?: number;
-    bubblePaddingY?: number;
-    bubbleMaxWidth?: number;
+    messageFontSize?: number;
+    messageLineHeight?: number;
+    messageLetterSpacing?: number;
+    messagePaddingTop?: number;
+    messagePaddingBottom?: number;
+    messagePaddingLeft?: number;
+    messagePaddingRight?: number;
+    bubbleRadiusNormal?: number;
+    bubbleRadiusGrouped?: number;
+    messageGapInGroup?: number;
     messageGapSameUser?: number;
     messageGapDifferentUser?: number;
-    sentMessagePaddingLeft?: number;
-    sentMessagePaddingRight?: number;
-    receivedMessagePaddingLeft?: number;
-    receivedMessagePaddingRight?: number;
-    multiLineSentMessagePaddingLeft?: number;
-    multiLineReceivedMessagePaddingRight?: number;
-    messagesAnchorY?: number;
+    recipientBubbleLeft?: number;
+    senderBubbleRight?: number;
+    bubbleMaxWidth?: number;
     messages?: ImMessage[];
 }
 

package/dist/index.d.ts

@@ -1080,25 +1080,26 @@ interface IMessageDmCompositionProps {
     messageTextLetterSpacing?: number;
     messageTextColor?: string;
     messageText?: string;
+    messageAreaTop?: number;
+    messageAreaBottom?: number;
     senderBubbleColor?: string;
     recipientBubbleColor?: string;
     bubbleTextColor?: string;
-    bubbleTextFontSize?: number;
-    bubbleTextLetterSpacing?: number;
-    bubbleTextLineHeight?: number;
-    bubbleBorderRadius?: number;
-    bubblePaddingX?: number;
-    bubblePaddingY?: number;
-    bubbleMaxWidth?: number;
+    messageFontSize?: number;
+    messageLineHeight?: number;
+    messageLetterSpacing?: number;
+    messagePaddingTop?: number;
+    messagePaddingBottom?: number;
+    messagePaddingLeft?: number;
+    messagePaddingRight?: number;
+    bubbleRadiusNormal?: number;
+    bubbleRadiusGrouped?: number;
+    messageGapInGroup?: number;
     messageGapSameUser?: number;
     messageGapDifferentUser?: number;
-    sentMessagePaddingLeft?: number;
-    sentMessagePaddingRight?: number;
-    receivedMessagePaddingLeft?: number;
-    receivedMessagePaddingRight?: number;
-    multiLineSentMessagePaddingLeft?: number;
-    multiLineReceivedMessagePaddingRight?: number;
-    messagesAnchorY?: number;
+    recipientBubbleLeft?: number;
+    senderBubbleRight?: number;
+    bubbleMaxWidth?: number;
     messages?: ImMessage[];
 }
 

package/dist/index.js

@@ -5255,22 +5255,32 @@ var import_remotion10 = require("remotion");
 
 // src/compositions/IMessageDmComposition/convertPropsToElements.ts
 var MESSAGE_DEFAULTS2 = {
+  // Message area bounds
+  messageAreaTop: 450,
+  messageAreaBottom: 2310,
+  // Message colors
   senderBubbleColor: "#1a42d5",
   recipientBubbleColor: "#303032",
   bubbleTextColor: "#ffffff",
-  bubbleTextFontSize: 48,
-  bubbleTextLetterSpacing: 0.5,
-  bubbleTextLineHeight: 1.3,
-  bubbleBorderRadius: 40,
-  bubblePaddingX: 39,
-  bubblePaddingY: 20,
+  // Message typography
+  messageFontSize: 48,
+  messageLineHeight: 60,
+  messageLetterSpacing: 0.5,
+  // Message padding (inside bubble)
+  messagePaddingTop: 20,
+  messagePaddingBottom: 20,
+  messagePaddingLeft: 39,
+  messagePaddingRight: 39,
+  // Bubble corner radii
+  bubbleRadiusNormal: 40,
+  bubbleRadiusGrouped: 10,
+  // Message spacing
+  messageGapInGroup: 6,
   messageGapSameUser: 8,
   messageGapDifferentUser: 36,
-  sentMessagePaddingLeft: 200,
-  sentMessagePaddingRight: 28,
-  receivedMessagePaddingLeft: 48,
-  receivedMessagePaddingRight: 270,
-  messagesAnchorY: 2310,
+  // Bubble positioning
+  recipientBubbleLeft: 48,
+  senderBubbleRight: 1178,
   bubbleMaxWidth: 900,
   // Image message defaults
   imageMaxWidth: 600,
@@ -5375,133 +5385,193 @@ function calculateAutoWidthAndLines3({
 function calculateMessagePositions2(props) {
   const messages = props.messages ?? [];
   if (messages.length === 0) return [];
-  const canvasWidth = props.width ?? 1206;
-  const messagesAnchorY = props.messagesAnchorY ?? MESSAGE_DEFAULTS2.messagesAnchorY;
+  const messageAreaBottom = props.messageAreaBottom ?? MESSAGE_DEFAULTS2.messageAreaBottom;
+  const messageFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS2.messageFontSize;
+  const messageLineHeight = props.messageLineHeight ?? MESSAGE_DEFAULTS2.messageLineHeight;
+  const messageLetterSpacing = props.messageLetterSpacing ?? MESSAGE_DEFAULTS2.messageLetterSpacing;
+  const messagePaddingTop = props.messagePaddingTop ?? MESSAGE_DEFAULTS2.messagePaddingTop;
+  const messagePaddingBottom = props.messagePaddingBottom ?? MESSAGE_DEFAULTS2.messagePaddingBottom;
+  const messagePaddingLeft = props.messagePaddingLeft ?? MESSAGE_DEFAULTS2.messagePaddingLeft;
+  const messagePaddingRight = props.messagePaddingRight ?? MESSAGE_DEFAULTS2.messagePaddingRight;
+  const messageGapInGroup = props.messageGapInGroup ?? MESSAGE_DEFAULTS2.messageGapInGroup;
   const messageGapSameUser = props.messageGapSameUser ?? MESSAGE_DEFAULTS2.messageGapSameUser;
   const messageGapDifferentUser = props.messageGapDifferentUser ?? MESSAGE_DEFAULTS2.messageGapDifferentUser;
-  const bubblePaddingX = props.bubblePaddingX ?? MESSAGE_DEFAULTS2.bubblePaddingX;
-  const bubblePaddingY = props.bubblePaddingY ?? MESSAGE_DEFAULTS2.bubblePaddingY;
-  const bubbleTextFontSize = props.bubbleTextFontSize ?? MESSAGE_DEFAULTS2.bubbleTextFontSize;
-  const bubbleTextLetterSpacing = props.bubbleTextLetterSpacing ?? MESSAGE_DEFAULTS2.bubbleTextLetterSpacing;
-  const bubbleTextLineHeight = props.bubbleTextLineHeight ?? MESSAGE_DEFAULTS2.bubbleTextLineHeight;
+  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 calculatedMessages = [];
-  let currentY = messagesAnchorY;
+  let currentBottom = messageAreaBottom;
   for (let i = messages.length - 1; i >= 0; i--) {
-    const msg = messages[i];
-    if (!msg) continue;
-    const { lines } = calculateAutoWidthAndLines3({
-      text: msg.text,
+    const message = messages[i];
+    if (!message) continue;
+    const prevMessage = i > 0 ? messages[i - 1] : null;
+    const nextMessage = i < messages.length - 1 ? messages[i + 1] : null;
+    const isGroupedWithPrev = message.groupWithPrevious && prevMessage?.sender === message.sender;
+    const isGroupedWithNext = nextMessage?.groupWithPrevious && nextMessage?.sender === message.sender;
+    const isFirstInGroup = !isGroupedWithPrev;
+    const isLastInGroup = !isGroupedWithNext;
+    const isSingleMessage = isFirstInGroup && isLastInGroup;
+    let gap = 0;
+    if (i < messages.length - 1) {
+      const belowMessage = messages[i + 1];
+      if (belowMessage?.groupWithPrevious && belowMessage.sender === message.sender) {
+        gap = messageGapInGroup;
+      } else if (belowMessage?.sender === message.sender) {
+        gap = messageGapSameUser;
+      } else {
+        gap = messageGapDifferentUser;
+      }
+    }
+    const { width: bubbleWidth, lines } = calculateAutoWidthAndLines3({
+      text: message.text,
       maxWidth: bubbleMaxWidth,
-      paddingLeft: bubblePaddingX,
-      paddingRight: bubblePaddingX,
-      fontSize: bubbleTextFontSize,
-      letterSpacing: bubbleTextLetterSpacing
+      paddingLeft: messagePaddingLeft,
+      paddingRight: messagePaddingRight,
+      fontSize: messageFontSize,
+      letterSpacing: messageLetterSpacing
     });
     const lineCount = lines.length;
-    const lineHeightPx = bubbleTextFontSize * bubbleTextLineHeight;
-    const textHeight = lineCount * lineHeightPx;
-    const bubbleHeight = textHeight + bubblePaddingY * 2;
+    const textHeight = lineCount * messageLineHeight;
+    const bubbleHeight = textHeight + messagePaddingTop + messagePaddingBottom;
+    const bubbleBottom = currentBottom - gap;
+    const bubbleTop = bubbleBottom - bubbleHeight;
+    let bubbleLeft;
+    if (message.sender === "recipient") {
+      bubbleLeft = recipientBubbleLeft;
+    } else {
+      bubbleLeft = senderBubbleRight - bubbleWidth;
+    }
     let imageWidth;
     let imageHeight;
     let imageY;
-    if (msg.imageUrl) {
+    if (message.imageUrl) {
       imageWidth = Math.min(imageMaxWidth, bubbleMaxWidth);
       imageHeight = imageWidth / imageAspectRatio;
-    }
-    const bubbleTop = currentY - bubbleHeight;
-    if (msg.imageUrl && imageHeight) {
       imageY = bubbleTop - imageGapToText - imageHeight;
     }
     calculatedMessages.unshift({
-      message: msg,
+      message,
       top: bubbleTop,
+      bottom: bubbleBottom,
+      left: bubbleLeft,
+      width: bubbleWidth,
       height: bubbleHeight,
       lines,
+      isFirstInGroup,
+      isLastInGroup,
+      isSingleMessage,
       imageWidth,
       imageHeight,
       imageY
     });
-    const prevMsg = i > 0 ? messages[i - 1] : null;
-    const gap = prevMsg && prevMsg.sender === msg.sender && !msg.groupWithPrevious ? messageGapSameUser : messageGapDifferentUser;
-    const topOfMessage = msg.imageUrl && imageY !== void 0 ? imageY : bubbleTop;
-    currentY = topOfMessage - gap;
+    if (message.imageUrl && imageY !== void 0) {
+      currentBottom = imageY;
+    } else {
+      currentBottom = bubbleTop;
+    }
   }
   return calculatedMessages;
 }
+function getCornerRadii2(cm, bubbleRadiusNormal, bubbleRadiusGrouped) {
+  const isUser = cm.message.sender === "user";
+  if (cm.isSingleMessage) {
+    return {
+      topLeft: bubbleRadiusNormal,
+      topRight: bubbleRadiusNormal,
+      bottomLeft: bubbleRadiusNormal,
+      bottomRight: bubbleRadiusNormal
+    };
+  }
+  if (isUser) {
+    return {
+      topLeft: bubbleRadiusNormal,
+      topRight: cm.isFirstInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+      bottomLeft: bubbleRadiusNormal,
+      bottomRight: cm.isLastInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped
+    };
+  } else {
+    return {
+      topLeft: cm.isFirstInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+      topRight: bubbleRadiusNormal,
+      bottomLeft: cm.isLastInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+      bottomRight: bubbleRadiusNormal
+    };
+  }
+}
 function generateMessageElements2(props, calculatedMessages) {
+  if (calculatedMessages.length === 0) {
+    return [];
+  }
   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;
-  const bubbleTextFontSize = props.bubbleTextFontSize ?? MESSAGE_DEFAULTS2.bubbleTextFontSize;
-  const bubbleTextLetterSpacing = props.bubbleTextLetterSpacing ?? MESSAGE_DEFAULTS2.bubbleTextLetterSpacing;
-  const bubbleTextLineHeight = props.bubbleTextLineHeight ?? MESSAGE_DEFAULTS2.bubbleTextLineHeight;
-  const bubbleBorderRadius = props.bubbleBorderRadius ?? MESSAGE_DEFAULTS2.bubbleBorderRadius;
-  const bubblePaddingX = props.bubblePaddingX ?? MESSAGE_DEFAULTS2.bubblePaddingX;
-  const bubblePaddingY = props.bubblePaddingY ?? MESSAGE_DEFAULTS2.bubblePaddingY;
+  const messageFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS2.messageFontSize;
+  const messageLineHeight = props.messageLineHeight ?? MESSAGE_DEFAULTS2.messageLineHeight;
+  const messageLetterSpacing = props.messageLetterSpacing ?? MESSAGE_DEFAULTS2.messageLetterSpacing;
+  const messagePaddingTop = props.messagePaddingTop ?? MESSAGE_DEFAULTS2.messagePaddingTop;
+  const messagePaddingBottom = props.messagePaddingBottom ?? MESSAGE_DEFAULTS2.messagePaddingBottom;
+  const messagePaddingLeft = props.messagePaddingLeft ?? MESSAGE_DEFAULTS2.messagePaddingLeft;
+  const messagePaddingRight = props.messagePaddingRight ?? MESSAGE_DEFAULTS2.messagePaddingRight;
+  const bubbleRadiusNormal = props.bubbleRadiusNormal ?? MESSAGE_DEFAULTS2.bubbleRadiusNormal;
+  const bubbleRadiusGrouped = props.bubbleRadiusGrouped ?? MESSAGE_DEFAULTS2.bubbleRadiusGrouped;
   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 sentMessagePaddingRight = props.sentMessagePaddingRight ?? MESSAGE_DEFAULTS2.sentMessagePaddingRight;
-  const receivedMessagePaddingLeft = props.receivedMessagePaddingLeft ?? MESSAGE_DEFAULTS2.receivedMessagePaddingLeft;
-  const senderBubbleRight = canvasWidth - sentMessagePaddingRight;
+  const lineHeightMultiplier = messageLineHeight / messageFontSize;
   for (let i = 0; i < calculatedMessages.length; i++) {
-    const calc = calculatedMessages[i];
-    const { message, top, height, lines, 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;
+    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;
       elements.push({
-        id: `image-${message.id}`,
+        id: `image-${cm.message.id}`,
         type: "image",
         x: imageX,
-        y: imageY,
-        width: imageWidth,
-        height: imageHeight,
-        zIndex: 10,
-        url: message.imageUrl,
+        y: cm.imageY,
+        width: cm.imageWidth,
+        height: cm.imageHeight,
+        zIndex: 5 + i,
+        url: cm.message.imageUrl,
         borderRadius: imageBorderRadius,
         objectFit: "cover"
       });
     }
-    const elementX = isSender ? senderBubbleRight - bubbleMaxWidth : receivedMessagePaddingLeft;
-    const textContent = lines.join("\n");
+    const radii = getCornerRadii2(cm, bubbleRadiusNormal, bubbleRadiusGrouped);
+    const elementX = isUser ? senderBubbleRight - bubbleMaxWidth : recipientBubbleLeft;
+    const textContent = cm.lines.join("\n");
     elements.push({
-      id: `message-${message.id}`,
+      id: `message-${cm.message.id}`,
       type: "text",
       x: elementX,
-      y: top,
+      y: cm.top,
       width: bubbleMaxWidth,
-      height,
-      zIndex: 10 + i,
+      height: cm.height,
+      zIndex: 5 + i,
       text: textContent,
       font: "apple",
       fontWeight: 400,
-      fontSize: bubbleTextFontSize,
-      letterSpacing: bubbleTextLetterSpacing,
-      lineHeight: bubbleTextLineHeight,
+      fontSize: messageFontSize,
+      letterSpacing: messageLetterSpacing,
+      lineHeight: lineHeightMultiplier,
       color: bubbleTextColor,
       textAlign: "left",
       verticalAlign: "middle",
       backgroundColor: bubbleColor,
       backgroundOpacity: 100,
-      backgroundBorderRadius: {
-        topLeft: bubbleBorderRadius,
-        topRight: bubbleBorderRadius,
-        bottomLeft: bubbleBorderRadius,
-        bottomRight: bubbleBorderRadius
-      },
-      paddingTop: bubblePaddingY,
-      paddingRight: bubblePaddingX,
-      paddingBottom: bubblePaddingY,
-      paddingLeft: bubblePaddingX,
+      backgroundBorderRadius: radii,
+      paddingTop: messagePaddingTop,
+      paddingRight: messagePaddingRight,
+      paddingBottom: messagePaddingBottom,
+      paddingLeft: messagePaddingLeft,
       autoWidth: true,
-      boxAlign: isSender ? "right" : "left"
+      boxAlign: isUser ? "right" : "left"
     });
   }
   return elements;
@@ -5621,24 +5691,33 @@ var defaultIMessageDmProps = {
   homeIndicatorLeft: 387,
   homeIndicatorRight: 818,
   homeIndicatorColor: "#ffffff",
-  // Message styling defaults
+  // Message area bounds
+  messageAreaTop: 450,
+  messageAreaBottom: 2310,
+  // Message colors
   senderBubbleColor: "#1a42d5",
   recipientBubbleColor: "#303032",
   bubbleTextColor: "#ffffff",
-  bubbleTextFontSize: 48,
-  bubbleTextLetterSpacing: 0.5,
-  bubbleBorderRadius: 40,
-  bubblePaddingX: 30,
-  bubblePaddingY: 20,
+  // Message typography
+  messageFontSize: 48,
+  messageLineHeight: 60,
+  messageLetterSpacing: 0.5,
+  // Message padding (inside bubble)
+  messagePaddingTop: 20,
+  messagePaddingBottom: 20,
+  messagePaddingLeft: 39,
+  messagePaddingRight: 39,
+  // Bubble corner radii
+  bubbleRadiusNormal: 40,
+  bubbleRadiusGrouped: 10,
+  // Message spacing
+  messageGapInGroup: 6,
   messageGapSameUser: 8,
   messageGapDifferentUser: 36,
-  sentMessagePaddingLeft: 200,
-  sentMessagePaddingRight: 28,
-  receivedMessagePaddingLeft: 28,
-  receivedMessagePaddingRight: 200,
-  multiLineSentMessagePaddingLeft: 31,
-  multiLineReceivedMessagePaddingRight: 31,
-  messagesAnchorY: 2340,
+  // Bubble positioning
+  recipientBubbleLeft: 48,
+  senderBubbleRight: 1178,
+  bubbleMaxWidth: 900,
   // 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" },
@@ -6801,26 +6880,33 @@ var iMessageDmPropsSchema = import_zod.z.object({
   messageTextLetterSpacing: import_zod.z.number().optional(),
   messageTextColor: import_zod.z.string().optional(),
   messageText: import_zod.z.string().optional(),
-  // Message styling
+  // Message area bounds
+  messageAreaTop: import_zod.z.number().optional(),
+  messageAreaBottom: import_zod.z.number().optional(),
+  // Message colors
   senderBubbleColor: import_zod.z.string().optional(),
   recipientBubbleColor: import_zod.z.string().optional(),
   bubbleTextColor: import_zod.z.string().optional(),
-  bubbleTextFontSize: import_zod.z.number().optional(),
-  bubbleTextLetterSpacing: import_zod.z.number().optional(),
-  bubbleTextLineHeight: import_zod.z.number().optional(),
-  bubbleBorderRadius: import_zod.z.number().optional(),
-  bubblePaddingX: import_zod.z.number().optional(),
-  bubblePaddingY: import_zod.z.number().optional(),
-  bubbleMaxWidth: import_zod.z.number().optional(),
+  // Message typography
+  messageFontSize: import_zod.z.number().optional(),
+  messageLineHeight: import_zod.z.number().optional(),
+  messageLetterSpacing: import_zod.z.number().optional(),
+  // Message padding (inside bubble)
+  messagePaddingTop: import_zod.z.number().optional(),
+  messagePaddingBottom: import_zod.z.number().optional(),
+  messagePaddingLeft: import_zod.z.number().optional(),
+  messagePaddingRight: import_zod.z.number().optional(),
+  // Bubble corner radii
+  bubbleRadiusNormal: import_zod.z.number().optional(),
+  bubbleRadiusGrouped: import_zod.z.number().optional(),
+  // Message spacing
+  messageGapInGroup: import_zod.z.number().optional(),
   messageGapSameUser: import_zod.z.number().optional(),
   messageGapDifferentUser: import_zod.z.number().optional(),
-  sentMessagePaddingLeft: import_zod.z.number().optional(),
-  sentMessagePaddingRight: import_zod.z.number().optional(),
-  receivedMessagePaddingLeft: import_zod.z.number().optional(),
-  receivedMessagePaddingRight: import_zod.z.number().optional(),
-  multiLineSentMessagePaddingLeft: import_zod.z.number().optional(),
-  multiLineReceivedMessagePaddingRight: import_zod.z.number().optional(),
-  messagesAnchorY: import_zod.z.number().optional(),
+  // Bubble positioning
+  recipientBubbleLeft: import_zod.z.number().optional(),
+  senderBubbleRight: import_zod.z.number().optional(),
+  bubbleMaxWidth: import_zod.z.number().optional(),
   // Messages
   messages: import_zod.z.array(import_zod.z.object({
     id: import_zod.z.string(),

package/dist/index.mjs

@@ -4301,22 +4301,32 @@ import { Img as Img5, staticFile as staticFile3 } from "remotion";
 
 // src/compositions/IMessageDmComposition/convertPropsToElements.ts
 var MESSAGE_DEFAULTS2 = {
+  // Message area bounds
+  messageAreaTop: 450,
+  messageAreaBottom: 2310,
+  // Message colors
   senderBubbleColor: "#1a42d5",
   recipientBubbleColor: "#303032",
   bubbleTextColor: "#ffffff",
-  bubbleTextFontSize: 48,
-  bubbleTextLetterSpacing: 0.5,
-  bubbleTextLineHeight: 1.3,
-  bubbleBorderRadius: 40,
-  bubblePaddingX: 39,
-  bubblePaddingY: 20,
+  // Message typography
+  messageFontSize: 48,
+  messageLineHeight: 60,
+  messageLetterSpacing: 0.5,
+  // Message padding (inside bubble)
+  messagePaddingTop: 20,
+  messagePaddingBottom: 20,
+  messagePaddingLeft: 39,
+  messagePaddingRight: 39,
+  // Bubble corner radii
+  bubbleRadiusNormal: 40,
+  bubbleRadiusGrouped: 10,
+  // Message spacing
+  messageGapInGroup: 6,
   messageGapSameUser: 8,
   messageGapDifferentUser: 36,
-  sentMessagePaddingLeft: 200,
-  sentMessagePaddingRight: 28,
-  receivedMessagePaddingLeft: 48,
-  receivedMessagePaddingRight: 270,
-  messagesAnchorY: 2310,
+  // Bubble positioning
+  recipientBubbleLeft: 48,
+  senderBubbleRight: 1178,
   bubbleMaxWidth: 900,
   // Image message defaults
   imageMaxWidth: 600,
@@ -4421,133 +4431,193 @@ function calculateAutoWidthAndLines3({
 function calculateMessagePositions2(props) {
   const messages = props.messages ?? [];
   if (messages.length === 0) return [];
-  const canvasWidth = props.width ?? 1206;
-  const messagesAnchorY = props.messagesAnchorY ?? MESSAGE_DEFAULTS2.messagesAnchorY;
+  const messageAreaBottom = props.messageAreaBottom ?? MESSAGE_DEFAULTS2.messageAreaBottom;
+  const messageFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS2.messageFontSize;
+  const messageLineHeight = props.messageLineHeight ?? MESSAGE_DEFAULTS2.messageLineHeight;
+  const messageLetterSpacing = props.messageLetterSpacing ?? MESSAGE_DEFAULTS2.messageLetterSpacing;
+  const messagePaddingTop = props.messagePaddingTop ?? MESSAGE_DEFAULTS2.messagePaddingTop;
+  const messagePaddingBottom = props.messagePaddingBottom ?? MESSAGE_DEFAULTS2.messagePaddingBottom;
+  const messagePaddingLeft = props.messagePaddingLeft ?? MESSAGE_DEFAULTS2.messagePaddingLeft;
+  const messagePaddingRight = props.messagePaddingRight ?? MESSAGE_DEFAULTS2.messagePaddingRight;
+  const messageGapInGroup = props.messageGapInGroup ?? MESSAGE_DEFAULTS2.messageGapInGroup;
   const messageGapSameUser = props.messageGapSameUser ?? MESSAGE_DEFAULTS2.messageGapSameUser;
   const messageGapDifferentUser = props.messageGapDifferentUser ?? MESSAGE_DEFAULTS2.messageGapDifferentUser;
-  const bubblePaddingX = props.bubblePaddingX ?? MESSAGE_DEFAULTS2.bubblePaddingX;
-  const bubblePaddingY = props.bubblePaddingY ?? MESSAGE_DEFAULTS2.bubblePaddingY;
-  const bubbleTextFontSize = props.bubbleTextFontSize ?? MESSAGE_DEFAULTS2.bubbleTextFontSize;
-  const bubbleTextLetterSpacing = props.bubbleTextLetterSpacing ?? MESSAGE_DEFAULTS2.bubbleTextLetterSpacing;
-  const bubbleTextLineHeight = props.bubbleTextLineHeight ?? MESSAGE_DEFAULTS2.bubbleTextLineHeight;
+  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 calculatedMessages = [];
-  let currentY = messagesAnchorY;
+  let currentBottom = messageAreaBottom;
   for (let i = messages.length - 1; i >= 0; i--) {
-    const msg = messages[i];
-    if (!msg) continue;
-    const { lines } = calculateAutoWidthAndLines3({
-      text: msg.text,
+    const message = messages[i];
+    if (!message) continue;
+    const prevMessage = i > 0 ? messages[i - 1] : null;
+    const nextMessage = i < messages.length - 1 ? messages[i + 1] : null;
+    const isGroupedWithPrev = message.groupWithPrevious && prevMessage?.sender === message.sender;
+    const isGroupedWithNext = nextMessage?.groupWithPrevious && nextMessage?.sender === message.sender;
+    const isFirstInGroup = !isGroupedWithPrev;
+    const isLastInGroup = !isGroupedWithNext;
+    const isSingleMessage = isFirstInGroup && isLastInGroup;
+    let gap = 0;
+    if (i < messages.length - 1) {
+      const belowMessage = messages[i + 1];
+      if (belowMessage?.groupWithPrevious && belowMessage.sender === message.sender) {
+        gap = messageGapInGroup;
+      } else if (belowMessage?.sender === message.sender) {
+        gap = messageGapSameUser;
+      } else {
+        gap = messageGapDifferentUser;
+      }
+    }
+    const { width: bubbleWidth, lines } = calculateAutoWidthAndLines3({
+      text: message.text,
       maxWidth: bubbleMaxWidth,
-      paddingLeft: bubblePaddingX,
-      paddingRight: bubblePaddingX,
-      fontSize: bubbleTextFontSize,
-      letterSpacing: bubbleTextLetterSpacing
+      paddingLeft: messagePaddingLeft,
+      paddingRight: messagePaddingRight,
+      fontSize: messageFontSize,
+      letterSpacing: messageLetterSpacing
     });
     const lineCount = lines.length;
-    const lineHeightPx = bubbleTextFontSize * bubbleTextLineHeight;
-    const textHeight = lineCount * lineHeightPx;
-    const bubbleHeight = textHeight + bubblePaddingY * 2;
+    const textHeight = lineCount * messageLineHeight;
+    const bubbleHeight = textHeight + messagePaddingTop + messagePaddingBottom;
+    const bubbleBottom = currentBottom - gap;
+    const bubbleTop = bubbleBottom - bubbleHeight;
+    let bubbleLeft;
+    if (message.sender === "recipient") {
+      bubbleLeft = recipientBubbleLeft;
+    } else {
+      bubbleLeft = senderBubbleRight - bubbleWidth;
+    }
     let imageWidth;
     let imageHeight;
     let imageY;
-    if (msg.imageUrl) {
+    if (message.imageUrl) {
       imageWidth = Math.min(imageMaxWidth, bubbleMaxWidth);
       imageHeight = imageWidth / imageAspectRatio;
-    }
-    const bubbleTop = currentY - bubbleHeight;
-    if (msg.imageUrl && imageHeight) {
       imageY = bubbleTop - imageGapToText - imageHeight;
     }
     calculatedMessages.unshift({
-      message: msg,
+      message,
       top: bubbleTop,
+      bottom: bubbleBottom,
+      left: bubbleLeft,
+      width: bubbleWidth,
       height: bubbleHeight,
       lines,
+      isFirstInGroup,
+      isLastInGroup,
+      isSingleMessage,
       imageWidth,
       imageHeight,
       imageY
     });
-    const prevMsg = i > 0 ? messages[i - 1] : null;
-    const gap = prevMsg && prevMsg.sender === msg.sender && !msg.groupWithPrevious ? messageGapSameUser : messageGapDifferentUser;
-    const topOfMessage = msg.imageUrl && imageY !== void 0 ? imageY : bubbleTop;
-    currentY = topOfMessage - gap;
+    if (message.imageUrl && imageY !== void 0) {
+      currentBottom = imageY;
+    } else {
+      currentBottom = bubbleTop;
+    }
   }
   return calculatedMessages;
 }
+function getCornerRadii2(cm, bubbleRadiusNormal, bubbleRadiusGrouped) {
+  const isUser = cm.message.sender === "user";
+  if (cm.isSingleMessage) {
+    return {
+      topLeft: bubbleRadiusNormal,
+      topRight: bubbleRadiusNormal,
+      bottomLeft: bubbleRadiusNormal,
+      bottomRight: bubbleRadiusNormal
+    };
+  }
+  if (isUser) {
+    return {
+      topLeft: bubbleRadiusNormal,
+      topRight: cm.isFirstInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+      bottomLeft: bubbleRadiusNormal,
+      bottomRight: cm.isLastInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped
+    };
+  } else {
+    return {
+      topLeft: cm.isFirstInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+      topRight: bubbleRadiusNormal,
+      bottomLeft: cm.isLastInGroup ? bubbleRadiusNormal : bubbleRadiusGrouped,
+      bottomRight: bubbleRadiusNormal
+    };
+  }
+}
 function generateMessageElements2(props, calculatedMessages) {
+  if (calculatedMessages.length === 0) {
+    return [];
+  }
   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;
-  const bubbleTextFontSize = props.bubbleTextFontSize ?? MESSAGE_DEFAULTS2.bubbleTextFontSize;
-  const bubbleTextLetterSpacing = props.bubbleTextLetterSpacing ?? MESSAGE_DEFAULTS2.bubbleTextLetterSpacing;
-  const bubbleTextLineHeight = props.bubbleTextLineHeight ?? MESSAGE_DEFAULTS2.bubbleTextLineHeight;
-  const bubbleBorderRadius = props.bubbleBorderRadius ?? MESSAGE_DEFAULTS2.bubbleBorderRadius;
-  const bubblePaddingX = props.bubblePaddingX ?? MESSAGE_DEFAULTS2.bubblePaddingX;
-  const bubblePaddingY = props.bubblePaddingY ?? MESSAGE_DEFAULTS2.bubblePaddingY;
+  const messageFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS2.messageFontSize;
+  const messageLineHeight = props.messageLineHeight ?? MESSAGE_DEFAULTS2.messageLineHeight;
+  const messageLetterSpacing = props.messageLetterSpacing ?? MESSAGE_DEFAULTS2.messageLetterSpacing;
+  const messagePaddingTop = props.messagePaddingTop ?? MESSAGE_DEFAULTS2.messagePaddingTop;
+  const messagePaddingBottom = props.messagePaddingBottom ?? MESSAGE_DEFAULTS2.messagePaddingBottom;
+  const messagePaddingLeft = props.messagePaddingLeft ?? MESSAGE_DEFAULTS2.messagePaddingLeft;
+  const messagePaddingRight = props.messagePaddingRight ?? MESSAGE_DEFAULTS2.messagePaddingRight;
+  const bubbleRadiusNormal = props.bubbleRadiusNormal ?? MESSAGE_DEFAULTS2.bubbleRadiusNormal;
+  const bubbleRadiusGrouped = props.bubbleRadiusGrouped ?? MESSAGE_DEFAULTS2.bubbleRadiusGrouped;
   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 sentMessagePaddingRight = props.sentMessagePaddingRight ?? MESSAGE_DEFAULTS2.sentMessagePaddingRight;
-  const receivedMessagePaddingLeft = props.receivedMessagePaddingLeft ?? MESSAGE_DEFAULTS2.receivedMessagePaddingLeft;
-  const senderBubbleRight = canvasWidth - sentMessagePaddingRight;
+  const lineHeightMultiplier = messageLineHeight / messageFontSize;
   for (let i = 0; i < calculatedMessages.length; i++) {
-    const calc = calculatedMessages[i];
-    const { message, top, height, lines, 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;
+    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;
       elements.push({
-        id: `image-${message.id}`,
+        id: `image-${cm.message.id}`,
         type: "image",
         x: imageX,
-        y: imageY,
-        width: imageWidth,
-        height: imageHeight,
-        zIndex: 10,
-        url: message.imageUrl,
+        y: cm.imageY,
+        width: cm.imageWidth,
+        height: cm.imageHeight,
+        zIndex: 5 + i,
+        url: cm.message.imageUrl,
         borderRadius: imageBorderRadius,
         objectFit: "cover"
       });
     }
-    const elementX = isSender ? senderBubbleRight - bubbleMaxWidth : receivedMessagePaddingLeft;
-    const textContent = lines.join("\n");
+    const radii = getCornerRadii2(cm, bubbleRadiusNormal, bubbleRadiusGrouped);
+    const elementX = isUser ? senderBubbleRight - bubbleMaxWidth : recipientBubbleLeft;
+    const textContent = cm.lines.join("\n");
     elements.push({
-      id: `message-${message.id}`,
+      id: `message-${cm.message.id}`,
       type: "text",
       x: elementX,
-      y: top,
+      y: cm.top,
       width: bubbleMaxWidth,
-      height,
-      zIndex: 10 + i,
+      height: cm.height,
+      zIndex: 5 + i,
       text: textContent,
       font: "apple",
       fontWeight: 400,
-      fontSize: bubbleTextFontSize,
-      letterSpacing: bubbleTextLetterSpacing,
-      lineHeight: bubbleTextLineHeight,
+      fontSize: messageFontSize,
+      letterSpacing: messageLetterSpacing,
+      lineHeight: lineHeightMultiplier,
       color: bubbleTextColor,
       textAlign: "left",
       verticalAlign: "middle",
       backgroundColor: bubbleColor,
       backgroundOpacity: 100,
-      backgroundBorderRadius: {
-        topLeft: bubbleBorderRadius,
-        topRight: bubbleBorderRadius,
-        bottomLeft: bubbleBorderRadius,
-        bottomRight: bubbleBorderRadius
-      },
-      paddingTop: bubblePaddingY,
-      paddingRight: bubblePaddingX,
-      paddingBottom: bubblePaddingY,
-      paddingLeft: bubblePaddingX,
+      backgroundBorderRadius: radii,
+      paddingTop: messagePaddingTop,
+      paddingRight: messagePaddingRight,
+      paddingBottom: messagePaddingBottom,
+      paddingLeft: messagePaddingLeft,
       autoWidth: true,
-      boxAlign: isSender ? "right" : "left"
+      boxAlign: isUser ? "right" : "left"
     });
   }
   return elements;
@@ -4667,24 +4737,33 @@ var defaultIMessageDmProps = {
   homeIndicatorLeft: 387,
   homeIndicatorRight: 818,
   homeIndicatorColor: "#ffffff",
-  // Message styling defaults
+  // Message area bounds
+  messageAreaTop: 450,
+  messageAreaBottom: 2310,
+  // Message colors
   senderBubbleColor: "#1a42d5",
   recipientBubbleColor: "#303032",
   bubbleTextColor: "#ffffff",
-  bubbleTextFontSize: 48,
-  bubbleTextLetterSpacing: 0.5,
-  bubbleBorderRadius: 40,
-  bubblePaddingX: 30,
-  bubblePaddingY: 20,
+  // Message typography
+  messageFontSize: 48,
+  messageLineHeight: 60,
+  messageLetterSpacing: 0.5,
+  // Message padding (inside bubble)
+  messagePaddingTop: 20,
+  messagePaddingBottom: 20,
+  messagePaddingLeft: 39,
+  messagePaddingRight: 39,
+  // Bubble corner radii
+  bubbleRadiusNormal: 40,
+  bubbleRadiusGrouped: 10,
+  // Message spacing
+  messageGapInGroup: 6,
   messageGapSameUser: 8,
   messageGapDifferentUser: 36,
-  sentMessagePaddingLeft: 200,
-  sentMessagePaddingRight: 28,
-  receivedMessagePaddingLeft: 28,
-  receivedMessagePaddingRight: 200,
-  multiLineSentMessagePaddingLeft: 31,
-  multiLineReceivedMessagePaddingRight: 31,
-  messagesAnchorY: 2340,
+  // Bubble positioning
+  recipientBubbleLeft: 48,
+  senderBubbleRight: 1178,
+  bubbleMaxWidth: 900,
   // 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" },
@@ -5564,26 +5643,33 @@ var iMessageDmPropsSchema = z.object({
   messageTextLetterSpacing: z.number().optional(),
   messageTextColor: z.string().optional(),
   messageText: z.string().optional(),
-  // Message styling
+  // Message area bounds
+  messageAreaTop: z.number().optional(),
+  messageAreaBottom: z.number().optional(),
+  // Message colors
   senderBubbleColor: z.string().optional(),
   recipientBubbleColor: z.string().optional(),
   bubbleTextColor: z.string().optional(),
-  bubbleTextFontSize: z.number().optional(),
-  bubbleTextLetterSpacing: z.number().optional(),
-  bubbleTextLineHeight: z.number().optional(),
-  bubbleBorderRadius: z.number().optional(),
-  bubblePaddingX: z.number().optional(),
-  bubblePaddingY: z.number().optional(),
-  bubbleMaxWidth: z.number().optional(),
+  // Message typography
+  messageFontSize: z.number().optional(),
+  messageLineHeight: z.number().optional(),
+  messageLetterSpacing: z.number().optional(),
+  // Message padding (inside bubble)
+  messagePaddingTop: z.number().optional(),
+  messagePaddingBottom: z.number().optional(),
+  messagePaddingLeft: z.number().optional(),
+  messagePaddingRight: z.number().optional(),
+  // Bubble corner radii
+  bubbleRadiusNormal: z.number().optional(),
+  bubbleRadiusGrouped: z.number().optional(),
+  // Message spacing
+  messageGapInGroup: z.number().optional(),
   messageGapSameUser: z.number().optional(),
   messageGapDifferentUser: z.number().optional(),
-  sentMessagePaddingLeft: z.number().optional(),
-  sentMessagePaddingRight: z.number().optional(),
-  receivedMessagePaddingLeft: z.number().optional(),
-  receivedMessagePaddingRight: z.number().optional(),
-  multiLineSentMessagePaddingLeft: z.number().optional(),
-  multiLineReceivedMessagePaddingRight: z.number().optional(),
-  messagesAnchorY: z.number().optional(),
+  // Bubble positioning
+  recipientBubbleLeft: z.number().optional(),
+  senderBubbleRight: z.number().optional(),
+  bubbleMaxWidth: 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.161",
+  "version": "1.8.162",
   "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",