ugcinc-render 1.8.178 → 1.8.179

package/dist/index.d.mts

@@ -1135,6 +1135,15 @@ interface IMessageDmCompositionProps {
     messageHeaderLetterSpacing?: number;
     messageHeaderLeft?: number;
     messageHeaderRight?: number;
+    showMessageTails?: boolean;
+    recipientTailOffsetLeft?: number;
+    recipientTailOffsetRight?: number;
+    recipientTailOffsetTop?: number;
+    recipientTailOffsetBottom?: number;
+    senderTailOffsetLeft?: number;
+    senderTailOffsetRight?: number;
+    senderTailOffsetTop?: number;
+    senderTailOffsetBottom?: number;
     showReadReceipt?: boolean;
     readReceiptText?: string;
     readReceiptGap?: number;

package/dist/index.d.ts

@@ -1135,6 +1135,15 @@ interface IMessageDmCompositionProps {
     messageHeaderLetterSpacing?: number;
     messageHeaderLeft?: number;
     messageHeaderRight?: number;
+    showMessageTails?: boolean;
+    recipientTailOffsetLeft?: number;
+    recipientTailOffsetRight?: number;
+    recipientTailOffsetTop?: number;
+    recipientTailOffsetBottom?: number;
+    senderTailOffsetLeft?: number;
+    senderTailOffsetRight?: number;
+    senderTailOffsetTop?: number;
+    senderTailOffsetBottom?: number;
     showReadReceipt?: boolean;
     readReceiptText?: string;
     readReceiptGap?: number;

package/dist/index.js

@@ -5304,6 +5304,18 @@ var MESSAGE_DEFAULTS2 = {
   messageHeaderLetterSpacing: 1.25,
   messageHeaderLeft: 0,
   messageHeaderRight: 1206,
+  // Message tails (on last message in group)
+  showMessageTails: true,
+  // Recipient tail offsets (from message left & bottom)
+  recipientTailOffsetLeft: -16,
+  recipientTailOffsetRight: 18,
+  recipientTailOffsetTop: -47,
+  recipientTailOffsetBottom: 0,
+  // Sender tail offsets (from message right & bottom)
+  senderTailOffsetLeft: -18,
+  senderTailOffsetRight: 16,
+  senderTailOffsetTop: -47,
+  senderTailOffsetBottom: 1,
   // Read receipt (under last sender message)
   showReadReceipt: true,
   readReceiptText: "Read 12:16 PM",
@@ -5611,6 +5623,61 @@ function generateMessageElements2(props, calculatedMessages) {
   }
   return elements;
 }
+function generateTailElements(props, calculatedMessages) {
+  const showMessageTails = props.showMessageTails ?? MESSAGE_DEFAULTS2.showMessageTails;
+  if (!showMessageTails) {
+    return [];
+  }
+  const elements = [];
+  const recipientTailOffsetLeft = props.recipientTailOffsetLeft ?? MESSAGE_DEFAULTS2.recipientTailOffsetLeft;
+  const recipientTailOffsetRight = props.recipientTailOffsetRight ?? MESSAGE_DEFAULTS2.recipientTailOffsetRight;
+  const recipientTailOffsetTop = props.recipientTailOffsetTop ?? MESSAGE_DEFAULTS2.recipientTailOffsetTop;
+  const recipientTailOffsetBottom = props.recipientTailOffsetBottom ?? MESSAGE_DEFAULTS2.recipientTailOffsetBottom;
+  const senderTailOffsetLeft = props.senderTailOffsetLeft ?? MESSAGE_DEFAULTS2.senderTailOffsetLeft;
+  const senderTailOffsetRight = props.senderTailOffsetRight ?? MESSAGE_DEFAULTS2.senderTailOffsetRight;
+  const senderTailOffsetTop = props.senderTailOffsetTop ?? MESSAGE_DEFAULTS2.senderTailOffsetTop;
+  const senderTailOffsetBottom = props.senderTailOffsetBottom ?? MESSAGE_DEFAULTS2.senderTailOffsetBottom;
+  for (let i = 0; i < calculatedMessages.length; i++) {
+    const cm = calculatedMessages[i];
+    if (!cm.isLastInGroup) {
+      continue;
+    }
+    const isUser = cm.message.sender === "user";
+    const messageLeft = cm.left;
+    const messageRight = cm.left + cm.width;
+    const messageBottom = cm.bottom;
+    let tailX;
+    let tailY;
+    let tailWidth;
+    let tailHeight;
+    let tailImage;
+    if (isUser) {
+      tailX = messageRight + senderTailOffsetLeft;
+      tailY = messageBottom + senderTailOffsetTop;
+      tailWidth = senderTailOffsetRight - senderTailOffsetLeft;
+      tailHeight = senderTailOffsetBottom - senderTailOffsetTop;
+      tailImage = "imsg-sender-tail.png";
+    } else {
+      tailX = messageLeft + recipientTailOffsetLeft;
+      tailY = messageBottom + recipientTailOffsetTop;
+      tailWidth = recipientTailOffsetRight - recipientTailOffsetLeft;
+      tailHeight = recipientTailOffsetBottom - recipientTailOffsetTop;
+      tailImage = "imsg-recv-tail.png";
+    }
+    elements.push({
+      id: `tail-${cm.message.id}`,
+      type: "image",
+      x: tailX,
+      y: tailY,
+      width: tailWidth,
+      height: tailHeight,
+      zIndex: 4,
+      // Below message elements (5+i)
+      url: `/${tailImage}`
+    });
+  }
+  return elements;
+}
 function generateHeaderTextElements(props, calculatedMessages) {
   if (calculatedMessages.length === 0) {
     return [];
@@ -5728,9 +5795,10 @@ function convertPropsToElements2(props) {
   const height = props.height ?? 2622;
   const calculatedMessages = calculateMessagePositions2(props);
   const messageElements = generateMessageElements2(props, calculatedMessages);
+  const tailElements = generateTailElements(props, calculatedMessages);
   const headerTextElements = generateHeaderTextElements(props, calculatedMessages);
   const readReceiptElements = generateReadReceiptElement(props, calculatedMessages);
-  const allElements = [...messageElements, ...headerTextElements, ...readReceiptElements];
+  const allElements = [...messageElements, ...tailElements, ...headerTextElements, ...readReceiptElements];
   allElements.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   const imageUrls = buildImageUrls2(props);
   return {
@@ -5910,6 +5978,18 @@ var defaultIMessageDmProps = {
   messageHeaderLetterSpacing: 1.25,
   messageHeaderLeft: 0,
   messageHeaderRight: 1206,
+  // Message tails (on last message in group)
+  showMessageTails: true,
+  // Recipient tail offsets (from message left & bottom)
+  recipientTailOffsetLeft: -16,
+  recipientTailOffsetRight: 18,
+  recipientTailOffsetTop: -47,
+  recipientTailOffsetBottom: 0,
+  // Sender tail offsets (from message right & bottom)
+  senderTailOffsetLeft: -18,
+  senderTailOffsetRight: 16,
+  senderTailOffsetTop: -47,
+  senderTailOffsetBottom: 1,
   // Read receipt (under last sender message)
   showReadReceipt: true,
   readReceiptText: "Read 12:16 PM",
@@ -7265,6 +7345,16 @@ var iMessageDmPropsSchema = import_zod.z.object({
   messageHeaderLetterSpacing: import_zod.z.number().optional(),
   messageHeaderLeft: import_zod.z.number().optional(),
   messageHeaderRight: import_zod.z.number().optional(),
+  // Message tails
+  showMessageTails: import_zod.z.boolean().optional(),
+  recipientTailOffsetLeft: import_zod.z.number().optional(),
+  recipientTailOffsetRight: import_zod.z.number().optional(),
+  recipientTailOffsetTop: import_zod.z.number().optional(),
+  recipientTailOffsetBottom: import_zod.z.number().optional(),
+  senderTailOffsetLeft: import_zod.z.number().optional(),
+  senderTailOffsetRight: import_zod.z.number().optional(),
+  senderTailOffsetTop: import_zod.z.number().optional(),
+  senderTailOffsetBottom: import_zod.z.number().optional(),
   // Read receipt
   showReadReceipt: import_zod.z.boolean().optional(),
   readReceiptText: import_zod.z.string().optional(),

package/dist/index.mjs

@@ -4350,6 +4350,18 @@ var MESSAGE_DEFAULTS2 = {
   messageHeaderLetterSpacing: 1.25,
   messageHeaderLeft: 0,
   messageHeaderRight: 1206,
+  // Message tails (on last message in group)
+  showMessageTails: true,
+  // Recipient tail offsets (from message left & bottom)
+  recipientTailOffsetLeft: -16,
+  recipientTailOffsetRight: 18,
+  recipientTailOffsetTop: -47,
+  recipientTailOffsetBottom: 0,
+  // Sender tail offsets (from message right & bottom)
+  senderTailOffsetLeft: -18,
+  senderTailOffsetRight: 16,
+  senderTailOffsetTop: -47,
+  senderTailOffsetBottom: 1,
   // Read receipt (under last sender message)
   showReadReceipt: true,
   readReceiptText: "Read 12:16 PM",
@@ -4657,6 +4669,61 @@ function generateMessageElements2(props, calculatedMessages) {
   }
   return elements;
 }
+function generateTailElements(props, calculatedMessages) {
+  const showMessageTails = props.showMessageTails ?? MESSAGE_DEFAULTS2.showMessageTails;
+  if (!showMessageTails) {
+    return [];
+  }
+  const elements = [];
+  const recipientTailOffsetLeft = props.recipientTailOffsetLeft ?? MESSAGE_DEFAULTS2.recipientTailOffsetLeft;
+  const recipientTailOffsetRight = props.recipientTailOffsetRight ?? MESSAGE_DEFAULTS2.recipientTailOffsetRight;
+  const recipientTailOffsetTop = props.recipientTailOffsetTop ?? MESSAGE_DEFAULTS2.recipientTailOffsetTop;
+  const recipientTailOffsetBottom = props.recipientTailOffsetBottom ?? MESSAGE_DEFAULTS2.recipientTailOffsetBottom;
+  const senderTailOffsetLeft = props.senderTailOffsetLeft ?? MESSAGE_DEFAULTS2.senderTailOffsetLeft;
+  const senderTailOffsetRight = props.senderTailOffsetRight ?? MESSAGE_DEFAULTS2.senderTailOffsetRight;
+  const senderTailOffsetTop = props.senderTailOffsetTop ?? MESSAGE_DEFAULTS2.senderTailOffsetTop;
+  const senderTailOffsetBottom = props.senderTailOffsetBottom ?? MESSAGE_DEFAULTS2.senderTailOffsetBottom;
+  for (let i = 0; i < calculatedMessages.length; i++) {
+    const cm = calculatedMessages[i];
+    if (!cm.isLastInGroup) {
+      continue;
+    }
+    const isUser = cm.message.sender === "user";
+    const messageLeft = cm.left;
+    const messageRight = cm.left + cm.width;
+    const messageBottom = cm.bottom;
+    let tailX;
+    let tailY;
+    let tailWidth;
+    let tailHeight;
+    let tailImage;
+    if (isUser) {
+      tailX = messageRight + senderTailOffsetLeft;
+      tailY = messageBottom + senderTailOffsetTop;
+      tailWidth = senderTailOffsetRight - senderTailOffsetLeft;
+      tailHeight = senderTailOffsetBottom - senderTailOffsetTop;
+      tailImage = "imsg-sender-tail.png";
+    } else {
+      tailX = messageLeft + recipientTailOffsetLeft;
+      tailY = messageBottom + recipientTailOffsetTop;
+      tailWidth = recipientTailOffsetRight - recipientTailOffsetLeft;
+      tailHeight = recipientTailOffsetBottom - recipientTailOffsetTop;
+      tailImage = "imsg-recv-tail.png";
+    }
+    elements.push({
+      id: `tail-${cm.message.id}`,
+      type: "image",
+      x: tailX,
+      y: tailY,
+      width: tailWidth,
+      height: tailHeight,
+      zIndex: 4,
+      // Below message elements (5+i)
+      url: `/${tailImage}`
+    });
+  }
+  return elements;
+}
 function generateHeaderTextElements(props, calculatedMessages) {
   if (calculatedMessages.length === 0) {
     return [];
@@ -4774,9 +4841,10 @@ function convertPropsToElements2(props) {
   const height = props.height ?? 2622;
   const calculatedMessages = calculateMessagePositions2(props);
   const messageElements = generateMessageElements2(props, calculatedMessages);
+  const tailElements = generateTailElements(props, calculatedMessages);
   const headerTextElements = generateHeaderTextElements(props, calculatedMessages);
   const readReceiptElements = generateReadReceiptElement(props, calculatedMessages);
-  const allElements = [...messageElements, ...headerTextElements, ...readReceiptElements];
+  const allElements = [...messageElements, ...tailElements, ...headerTextElements, ...readReceiptElements];
   allElements.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   const imageUrls = buildImageUrls2(props);
   return {
@@ -4956,6 +5024,18 @@ var defaultIMessageDmProps = {
   messageHeaderLetterSpacing: 1.25,
   messageHeaderLeft: 0,
   messageHeaderRight: 1206,
+  // Message tails (on last message in group)
+  showMessageTails: true,
+  // Recipient tail offsets (from message left & bottom)
+  recipientTailOffsetLeft: -16,
+  recipientTailOffsetRight: 18,
+  recipientTailOffsetTop: -47,
+  recipientTailOffsetBottom: 0,
+  // Sender tail offsets (from message right & bottom)
+  senderTailOffsetLeft: -18,
+  senderTailOffsetRight: 16,
+  senderTailOffsetTop: -47,
+  senderTailOffsetBottom: 1,
   // Read receipt (under last sender message)
   showReadReceipt: true,
   readReceiptText: "Read 12:16 PM",
@@ -6028,6 +6108,16 @@ var iMessageDmPropsSchema = z.object({
   messageHeaderLetterSpacing: z.number().optional(),
   messageHeaderLeft: z.number().optional(),
   messageHeaderRight: z.number().optional(),
+  // Message tails
+  showMessageTails: z.boolean().optional(),
+  recipientTailOffsetLeft: z.number().optional(),
+  recipientTailOffsetRight: z.number().optional(),
+  recipientTailOffsetTop: z.number().optional(),
+  recipientTailOffsetBottom: z.number().optional(),
+  senderTailOffsetLeft: z.number().optional(),
+  senderTailOffsetRight: z.number().optional(),
+  senderTailOffsetTop: z.number().optional(),
+  senderTailOffsetBottom: z.number().optional(),
   // Read receipt
   showReadReceipt: z.boolean().optional(),
   readReceiptText: z.string().optional(),

package/package.json

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