ugcinc-render 1.8.160 → 1.8.161

package/dist/index.d.mts

@@ -1085,9 +1085,11 @@ interface IMessageDmCompositionProps {
     bubbleTextColor?: string;
     bubbleTextFontSize?: number;
     bubbleTextLetterSpacing?: number;
+    bubbleTextLineHeight?: number;
     bubbleBorderRadius?: number;
     bubblePaddingX?: number;
     bubblePaddingY?: number;
+    bubbleMaxWidth?: number;
     messageGapSameUser?: number;
     messageGapDifferentUser?: number;
     sentMessagePaddingLeft?: number;

package/dist/index.d.ts

@@ -1085,9 +1085,11 @@ interface IMessageDmCompositionProps {
     bubbleTextColor?: string;
     bubbleTextFontSize?: number;
     bubbleTextLetterSpacing?: number;
+    bubbleTextLineHeight?: number;
     bubbleBorderRadius?: number;
     bubblePaddingX?: number;
     bubblePaddingY?: number;
+    bubbleMaxWidth?: number;
     messageGapSameUser?: number;
     messageGapDifferentUser?: number;
     sentMessagePaddingLeft?: number;

package/dist/index.js

@@ -5260,25 +5260,118 @@ var MESSAGE_DEFAULTS2 = {
   bubbleTextColor: "#ffffff",
   bubbleTextFontSize: 48,
   bubbleTextLetterSpacing: 0.5,
+  bubbleTextLineHeight: 1.3,
   bubbleBorderRadius: 40,
-  bubblePaddingX: 30,
+  bubblePaddingX: 39,
   bubblePaddingY: 20,
   messageGapSameUser: 8,
   messageGapDifferentUser: 36,
   sentMessagePaddingLeft: 200,
   sentMessagePaddingRight: 28,
-  receivedMessagePaddingLeft: 28,
-  receivedMessagePaddingRight: 200,
-  multiLineSentMessagePaddingLeft: 31,
-  multiLineReceivedMessagePaddingRight: 31,
-  messagesAnchorY: 2340,
+  receivedMessagePaddingLeft: 48,
+  receivedMessagePaddingRight: 270,
+  messagesAnchorY: 2310,
+  bubbleMaxWidth: 900,
   // Image message defaults
   imageMaxWidth: 600,
   imageAspectRatio: 1,
-  // width / height
   imageBorderRadius: 30,
   imageGapToText: 8
 };
+var FONT_FAMILY2 = getFontFamily("apple");
+function calculateAutoWidthAndLines3({
+  text,
+  maxWidth,
+  paddingLeft,
+  paddingRight,
+  fontSize,
+  letterSpacing
+}) {
+  if (typeof document === "undefined") {
+    return { width: maxWidth, lines: [text] };
+  }
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  if (availableWidth <= 0) {
+    return { width: maxWidth, lines: [text] };
+  }
+  const measureSpan = document.createElement("span");
+  measureSpan.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    font-family: ${FONT_FAMILY2};
+    font-size: ${fontSize}px;
+    font-weight: normal;
+    letter-spacing: ${letterSpacing}px;
+    white-space: nowrap;
+  `;
+  document.body.appendChild(measureSpan);
+  const measureText = (textToMeasure) => {
+    measureSpan.textContent = textToMeasure;
+    return measureSpan.getBoundingClientRect().width;
+  };
+  const words = text.split(/(\s+)/);
+  const lines = [];
+  let currentLine = "";
+  for (let i = 0; i < words.length; i++) {
+    const word = words[i];
+    if (word === "\n" || word === "\r\n") {
+      if (currentLine) lines.push(currentLine);
+      currentLine = "";
+      continue;
+    }
+    if (!word) continue;
+    if (/^\s+$/.test(word)) {
+      if (currentLine) currentLine += word;
+      continue;
+    }
+    const testLine = currentLine + word;
+    const testWidth = measureText(testLine);
+    const WRAP_TOLERANCE = 0.5;
+    if (testWidth > availableWidth + WRAP_TOLERANCE) {
+      if (currentLine.trim()) {
+        lines.push(currentLine.trimEnd());
+        currentLine = "";
+      }
+      const wordWidth = measureText(word);
+      if (wordWidth > availableWidth) {
+        let remainingWord = word;
+        while (remainingWord) {
+          let breakPoint = 1;
+          for (let j = 1; j <= remainingWord.length; j++) {
+            measureSpan.textContent = remainingWord.substring(0, j);
+            if (measureSpan.getBoundingClientRect().width > availableWidth) {
+              breakPoint = Math.max(1, j - 1);
+              break;
+            }
+            breakPoint = j;
+          }
+          if (breakPoint >= remainingWord.length) {
+            currentLine = remainingWord;
+            break;
+          } else {
+            lines.push(remainingWord.substring(0, breakPoint));
+            remainingWord = remainingWord.substring(breakPoint);
+          }
+        }
+      } else {
+        currentLine = word;
+      }
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine.trim()) lines.push(currentLine.trimEnd());
+  if (lines.length === 0) lines.push("");
+  let widestLineWidth = 0;
+  for (const line of lines) {
+    const lineWidth = measureText(line);
+    widestLineWidth = Math.max(widestLineWidth, lineWidth);
+  }
+  document.body.removeChild(measureSpan);
+  const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  return { width: calculatedWidth, lines };
+}
 function calculateMessagePositions2(props) {
   const messages = props.messages ?? [];
   if (messages.length === 0) return [];
@@ -5286,13 +5379,12 @@ function calculateMessagePositions2(props) {
   const messagesAnchorY = props.messagesAnchorY ?? MESSAGE_DEFAULTS2.messagesAnchorY;
   const messageGapSameUser = props.messageGapSameUser ?? MESSAGE_DEFAULTS2.messageGapSameUser;
   const messageGapDifferentUser = props.messageGapDifferentUser ?? MESSAGE_DEFAULTS2.messageGapDifferentUser;
-  const sentMessagePaddingLeft = props.sentMessagePaddingLeft ?? MESSAGE_DEFAULTS2.sentMessagePaddingLeft;
-  const sentMessagePaddingRight = props.sentMessagePaddingRight ?? MESSAGE_DEFAULTS2.sentMessagePaddingRight;
-  const receivedMessagePaddingLeft = props.receivedMessagePaddingLeft ?? MESSAGE_DEFAULTS2.receivedMessagePaddingLeft;
-  const receivedMessagePaddingRight = props.receivedMessagePaddingRight ?? MESSAGE_DEFAULTS2.receivedMessagePaddingRight;
   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 bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS2.bubbleMaxWidth;
   const imageMaxWidth = MESSAGE_DEFAULTS2.imageMaxWidth;
   const imageAspectRatio = MESSAGE_DEFAULTS2.imageAspectRatio;
   const imageGapToText = MESSAGE_DEFAULTS2.imageGapToText;
@@ -5301,47 +5393,41 @@ function calculateMessagePositions2(props) {
   for (let i = messages.length - 1; i >= 0; i--) {
     const msg = messages[i];
     if (!msg) continue;
-    const isSender = msg.sender === "user";
-    const paddingLeft = isSender ? sentMessagePaddingLeft : receivedMessagePaddingLeft;
-    const paddingRight = isSender ? sentMessagePaddingRight : receivedMessagePaddingRight;
-    const maxBubbleWidth = canvasWidth - paddingLeft - paddingRight;
-    const maxTextWidth = maxBubbleWidth - bubblePaddingX * 2;
-    const charWidth = bubbleTextFontSize * 0.5;
-    const lineHeight = bubbleTextFontSize * 1.3;
-    const textWidth = Math.min(msg.text.length * charWidth, maxTextWidth);
-    const numLines = Math.ceil(msg.text.length * charWidth / maxTextWidth);
-    const textHeight = numLines * lineHeight;
-    const bubbleWidth = textWidth + bubblePaddingX * 2;
+    const { lines } = calculateAutoWidthAndLines3({
+      text: msg.text,
+      maxWidth: bubbleMaxWidth,
+      paddingLeft: bubblePaddingX,
+      paddingRight: bubblePaddingX,
+      fontSize: bubbleTextFontSize,
+      letterSpacing: bubbleTextLetterSpacing
+    });
+    const lineCount = lines.length;
+    const lineHeightPx = bubbleTextFontSize * bubbleTextLineHeight;
+    const textHeight = lineCount * lineHeightPx;
     const bubbleHeight = textHeight + bubblePaddingY * 2;
     let imageWidth;
     let imageHeight;
     let imageY;
-    let totalHeight = bubbleHeight;
     if (msg.imageUrl) {
-      imageWidth = Math.min(imageMaxWidth, maxBubbleWidth);
+      imageWidth = Math.min(imageMaxWidth, bubbleMaxWidth);
       imageHeight = imageWidth / imageAspectRatio;
-      totalHeight = imageHeight + imageGapToText + bubbleHeight;
     }
-    const x = isSender ? canvasWidth - paddingRight - bubbleWidth : paddingLeft;
-    const y = currentY - bubbleHeight;
+    const bubbleTop = currentY - bubbleHeight;
     if (msg.imageUrl && imageHeight) {
-      imageY = y - imageGapToText - imageHeight;
+      imageY = bubbleTop - imageGapToText - imageHeight;
     }
     calculatedMessages.unshift({
       message: msg,
-      x,
-      y,
-      width: bubbleWidth,
+      top: bubbleTop,
       height: bubbleHeight,
-      textWidth,
-      textHeight,
+      lines,
       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 : y;
+    const topOfMessage = msg.imageUrl && imageY !== void 0 ? imageY : bubbleTop;
     currentY = topOfMessage - gap;
   }
   return calculatedMessages;
@@ -5354,14 +5440,18 @@ function generateMessageElements2(props, calculatedMessages) {
   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 bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS2.bubbleMaxWidth;
   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, imageWidth, imageHeight, imageY } = calc;
+  const senderBubbleRight = canvasWidth - sentMessagePaddingRight;
+  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) {
@@ -5379,35 +5469,39 @@ function generateMessageElements2(props, calculatedMessages) {
         objectFit: "cover"
       });
     }
+    const elementX = isSender ? senderBubbleRight - bubbleMaxWidth : receivedMessagePaddingLeft;
+    const textContent = lines.join("\n");
     elements.push({
-      id: `bubble-${message.id}`,
+      id: `message-${message.id}`,
       type: "text",
-      x,
-      y,
-      width,
+      x: elementX,
+      y: top,
+      width: bubbleMaxWidth,
       height,
-      zIndex: 10,
-      text: "",
-      backgroundColor: bubbleColor,
-      backgroundOpacity: 100,
-      borderRadius: bubbleBorderRadius
-    });
-    elements.push({
-      id: `text-${message.id}`,
-      type: "text",
-      x: x + bubblePaddingX,
-      y: y + bubblePaddingY,
-      width: width - bubblePaddingX * 2,
-      height: height - bubblePaddingY * 2,
-      zIndex: 11,
-      text: message.text,
+      zIndex: 10 + i,
+      text: textContent,
       font: "apple",
       fontWeight: 400,
       fontSize: bubbleTextFontSize,
       letterSpacing: bubbleTextLetterSpacing,
+      lineHeight: bubbleTextLineHeight,
       color: bubbleTextColor,
       textAlign: "left",
-      verticalAlign: "top"
+      verticalAlign: "middle",
+      backgroundColor: bubbleColor,
+      backgroundOpacity: 100,
+      backgroundBorderRadius: {
+        topLeft: bubbleBorderRadius,
+        topRight: bubbleBorderRadius,
+        bottomLeft: bubbleBorderRadius,
+        bottomRight: bubbleBorderRadius
+      },
+      paddingTop: bubblePaddingY,
+      paddingRight: bubblePaddingX,
+      paddingBottom: bubblePaddingY,
+      paddingLeft: bubblePaddingX,
+      autoWidth: true,
+      boxAlign: isSender ? "right" : "left"
     });
   }
   return elements;
@@ -6713,9 +6807,11 @@ var iMessageDmPropsSchema = import_zod.z.object({
   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(),
   messageGapSameUser: import_zod.z.number().optional(),
   messageGapDifferentUser: import_zod.z.number().optional(),
   sentMessagePaddingLeft: import_zod.z.number().optional(),

package/dist/index.mjs

@@ -4306,25 +4306,118 @@ var MESSAGE_DEFAULTS2 = {
   bubbleTextColor: "#ffffff",
   bubbleTextFontSize: 48,
   bubbleTextLetterSpacing: 0.5,
+  bubbleTextLineHeight: 1.3,
   bubbleBorderRadius: 40,
-  bubblePaddingX: 30,
+  bubblePaddingX: 39,
   bubblePaddingY: 20,
   messageGapSameUser: 8,
   messageGapDifferentUser: 36,
   sentMessagePaddingLeft: 200,
   sentMessagePaddingRight: 28,
-  receivedMessagePaddingLeft: 28,
-  receivedMessagePaddingRight: 200,
-  multiLineSentMessagePaddingLeft: 31,
-  multiLineReceivedMessagePaddingRight: 31,
-  messagesAnchorY: 2340,
+  receivedMessagePaddingLeft: 48,
+  receivedMessagePaddingRight: 270,
+  messagesAnchorY: 2310,
+  bubbleMaxWidth: 900,
   // Image message defaults
   imageMaxWidth: 600,
   imageAspectRatio: 1,
-  // width / height
   imageBorderRadius: 30,
   imageGapToText: 8
 };
+var FONT_FAMILY2 = getFontFamily("apple");
+function calculateAutoWidthAndLines3({
+  text,
+  maxWidth,
+  paddingLeft,
+  paddingRight,
+  fontSize,
+  letterSpacing
+}) {
+  if (typeof document === "undefined") {
+    return { width: maxWidth, lines: [text] };
+  }
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  if (availableWidth <= 0) {
+    return { width: maxWidth, lines: [text] };
+  }
+  const measureSpan = document.createElement("span");
+  measureSpan.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    font-family: ${FONT_FAMILY2};
+    font-size: ${fontSize}px;
+    font-weight: normal;
+    letter-spacing: ${letterSpacing}px;
+    white-space: nowrap;
+  `;
+  document.body.appendChild(measureSpan);
+  const measureText = (textToMeasure) => {
+    measureSpan.textContent = textToMeasure;
+    return measureSpan.getBoundingClientRect().width;
+  };
+  const words = text.split(/(\s+)/);
+  const lines = [];
+  let currentLine = "";
+  for (let i = 0; i < words.length; i++) {
+    const word = words[i];
+    if (word === "\n" || word === "\r\n") {
+      if (currentLine) lines.push(currentLine);
+      currentLine = "";
+      continue;
+    }
+    if (!word) continue;
+    if (/^\s+$/.test(word)) {
+      if (currentLine) currentLine += word;
+      continue;
+    }
+    const testLine = currentLine + word;
+    const testWidth = measureText(testLine);
+    const WRAP_TOLERANCE = 0.5;
+    if (testWidth > availableWidth + WRAP_TOLERANCE) {
+      if (currentLine.trim()) {
+        lines.push(currentLine.trimEnd());
+        currentLine = "";
+      }
+      const wordWidth = measureText(word);
+      if (wordWidth > availableWidth) {
+        let remainingWord = word;
+        while (remainingWord) {
+          let breakPoint = 1;
+          for (let j = 1; j <= remainingWord.length; j++) {
+            measureSpan.textContent = remainingWord.substring(0, j);
+            if (measureSpan.getBoundingClientRect().width > availableWidth) {
+              breakPoint = Math.max(1, j - 1);
+              break;
+            }
+            breakPoint = j;
+          }
+          if (breakPoint >= remainingWord.length) {
+            currentLine = remainingWord;
+            break;
+          } else {
+            lines.push(remainingWord.substring(0, breakPoint));
+            remainingWord = remainingWord.substring(breakPoint);
+          }
+        }
+      } else {
+        currentLine = word;
+      }
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine.trim()) lines.push(currentLine.trimEnd());
+  if (lines.length === 0) lines.push("");
+  let widestLineWidth = 0;
+  for (const line of lines) {
+    const lineWidth = measureText(line);
+    widestLineWidth = Math.max(widestLineWidth, lineWidth);
+  }
+  document.body.removeChild(measureSpan);
+  const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  return { width: calculatedWidth, lines };
+}
 function calculateMessagePositions2(props) {
   const messages = props.messages ?? [];
   if (messages.length === 0) return [];
@@ -4332,13 +4425,12 @@ function calculateMessagePositions2(props) {
   const messagesAnchorY = props.messagesAnchorY ?? MESSAGE_DEFAULTS2.messagesAnchorY;
   const messageGapSameUser = props.messageGapSameUser ?? MESSAGE_DEFAULTS2.messageGapSameUser;
   const messageGapDifferentUser = props.messageGapDifferentUser ?? MESSAGE_DEFAULTS2.messageGapDifferentUser;
-  const sentMessagePaddingLeft = props.sentMessagePaddingLeft ?? MESSAGE_DEFAULTS2.sentMessagePaddingLeft;
-  const sentMessagePaddingRight = props.sentMessagePaddingRight ?? MESSAGE_DEFAULTS2.sentMessagePaddingRight;
-  const receivedMessagePaddingLeft = props.receivedMessagePaddingLeft ?? MESSAGE_DEFAULTS2.receivedMessagePaddingLeft;
-  const receivedMessagePaddingRight = props.receivedMessagePaddingRight ?? MESSAGE_DEFAULTS2.receivedMessagePaddingRight;
   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 bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS2.bubbleMaxWidth;
   const imageMaxWidth = MESSAGE_DEFAULTS2.imageMaxWidth;
   const imageAspectRatio = MESSAGE_DEFAULTS2.imageAspectRatio;
   const imageGapToText = MESSAGE_DEFAULTS2.imageGapToText;
@@ -4347,47 +4439,41 @@ function calculateMessagePositions2(props) {
   for (let i = messages.length - 1; i >= 0; i--) {
     const msg = messages[i];
     if (!msg) continue;
-    const isSender = msg.sender === "user";
-    const paddingLeft = isSender ? sentMessagePaddingLeft : receivedMessagePaddingLeft;
-    const paddingRight = isSender ? sentMessagePaddingRight : receivedMessagePaddingRight;
-    const maxBubbleWidth = canvasWidth - paddingLeft - paddingRight;
-    const maxTextWidth = maxBubbleWidth - bubblePaddingX * 2;
-    const charWidth = bubbleTextFontSize * 0.5;
-    const lineHeight = bubbleTextFontSize * 1.3;
-    const textWidth = Math.min(msg.text.length * charWidth, maxTextWidth);
-    const numLines = Math.ceil(msg.text.length * charWidth / maxTextWidth);
-    const textHeight = numLines * lineHeight;
-    const bubbleWidth = textWidth + bubblePaddingX * 2;
+    const { lines } = calculateAutoWidthAndLines3({
+      text: msg.text,
+      maxWidth: bubbleMaxWidth,
+      paddingLeft: bubblePaddingX,
+      paddingRight: bubblePaddingX,
+      fontSize: bubbleTextFontSize,
+      letterSpacing: bubbleTextLetterSpacing
+    });
+    const lineCount = lines.length;
+    const lineHeightPx = bubbleTextFontSize * bubbleTextLineHeight;
+    const textHeight = lineCount * lineHeightPx;
     const bubbleHeight = textHeight + bubblePaddingY * 2;
     let imageWidth;
     let imageHeight;
     let imageY;
-    let totalHeight = bubbleHeight;
     if (msg.imageUrl) {
-      imageWidth = Math.min(imageMaxWidth, maxBubbleWidth);
+      imageWidth = Math.min(imageMaxWidth, bubbleMaxWidth);
       imageHeight = imageWidth / imageAspectRatio;
-      totalHeight = imageHeight + imageGapToText + bubbleHeight;
     }
-    const x = isSender ? canvasWidth - paddingRight - bubbleWidth : paddingLeft;
-    const y = currentY - bubbleHeight;
+    const bubbleTop = currentY - bubbleHeight;
     if (msg.imageUrl && imageHeight) {
-      imageY = y - imageGapToText - imageHeight;
+      imageY = bubbleTop - imageGapToText - imageHeight;
     }
     calculatedMessages.unshift({
       message: msg,
-      x,
-      y,
-      width: bubbleWidth,
+      top: bubbleTop,
       height: bubbleHeight,
-      textWidth,
-      textHeight,
+      lines,
       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 : y;
+    const topOfMessage = msg.imageUrl && imageY !== void 0 ? imageY : bubbleTop;
     currentY = topOfMessage - gap;
   }
   return calculatedMessages;
@@ -4400,14 +4486,18 @@ function generateMessageElements2(props, calculatedMessages) {
   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 bubbleMaxWidth = props.bubbleMaxWidth ?? MESSAGE_DEFAULTS2.bubbleMaxWidth;
   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, imageWidth, imageHeight, imageY } = calc;
+  const senderBubbleRight = canvasWidth - sentMessagePaddingRight;
+  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) {
@@ -4425,35 +4515,39 @@ function generateMessageElements2(props, calculatedMessages) {
         objectFit: "cover"
       });
     }
+    const elementX = isSender ? senderBubbleRight - bubbleMaxWidth : receivedMessagePaddingLeft;
+    const textContent = lines.join("\n");
     elements.push({
-      id: `bubble-${message.id}`,
+      id: `message-${message.id}`,
       type: "text",
-      x,
-      y,
-      width,
+      x: elementX,
+      y: top,
+      width: bubbleMaxWidth,
       height,
-      zIndex: 10,
-      text: "",
-      backgroundColor: bubbleColor,
-      backgroundOpacity: 100,
-      borderRadius: bubbleBorderRadius
-    });
-    elements.push({
-      id: `text-${message.id}`,
-      type: "text",
-      x: x + bubblePaddingX,
-      y: y + bubblePaddingY,
-      width: width - bubblePaddingX * 2,
-      height: height - bubblePaddingY * 2,
-      zIndex: 11,
-      text: message.text,
+      zIndex: 10 + i,
+      text: textContent,
       font: "apple",
       fontWeight: 400,
       fontSize: bubbleTextFontSize,
       letterSpacing: bubbleTextLetterSpacing,
+      lineHeight: bubbleTextLineHeight,
       color: bubbleTextColor,
       textAlign: "left",
-      verticalAlign: "top"
+      verticalAlign: "middle",
+      backgroundColor: bubbleColor,
+      backgroundOpacity: 100,
+      backgroundBorderRadius: {
+        topLeft: bubbleBorderRadius,
+        topRight: bubbleBorderRadius,
+        bottomLeft: bubbleBorderRadius,
+        bottomRight: bubbleBorderRadius
+      },
+      paddingTop: bubblePaddingY,
+      paddingRight: bubblePaddingX,
+      paddingBottom: bubblePaddingY,
+      paddingLeft: bubblePaddingX,
+      autoWidth: true,
+      boxAlign: isSender ? "right" : "left"
     });
   }
   return elements;
@@ -5476,9 +5570,11 @@ var iMessageDmPropsSchema = z.object({
   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(),
   messageGapSameUser: z.number().optional(),
   messageGapDifferentUser: z.number().optional(),
   sentMessagePaddingLeft: z.number().optional(),

package/package.json

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