ugcinc-render 1.8.178 → 1.8.180

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,51 @@ function generateMessageElements2(props, calculatedMessages) {
   }
   return elements;
 }
+function generateTailData(props, calculatedMessages) {
+  const showMessageTails = props.showMessageTails ?? MESSAGE_DEFAULTS2.showMessageTails;
+  if (!showMessageTails) {
+    return [];
+  }
+  const tails = [];
+  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;
+    if (isUser) {
+      tails.push({
+        id: `tail-${cm.message.id}`,
+        x: messageRight + senderTailOffsetLeft,
+        y: messageBottom + senderTailOffsetTop,
+        width: senderTailOffsetRight - senderTailOffsetLeft,
+        height: senderTailOffsetBottom - senderTailOffsetTop,
+        image: "imsg-sender-tail.png"
+      });
+    } else {
+      tails.push({
+        id: `tail-${cm.message.id}`,
+        x: messageLeft + recipientTailOffsetLeft,
+        y: messageBottom + recipientTailOffsetTop,
+        width: recipientTailOffsetRight - recipientTailOffsetLeft,
+        height: recipientTailOffsetBottom - recipientTailOffsetTop,
+        image: "imsg-recv-tail.png"
+      });
+    }
+  }
+  return tails;
+}
 function generateHeaderTextElements(props, calculatedMessages) {
   if (calculatedMessages.length === 0) {
     return [];
@@ -5728,6 +5785,7 @@ function convertPropsToElements2(props) {
   const height = props.height ?? 2622;
   const calculatedMessages = calculateMessagePositions2(props);
   const messageElements = generateMessageElements2(props, calculatedMessages);
+  const tails = generateTailData(props, calculatedMessages);
   const headerTextElements = generateHeaderTextElements(props, calculatedMessages);
   const readReceiptElements = generateReadReceiptElement(props, calculatedMessages);
   const allElements = [...messageElements, ...headerTextElements, ...readReceiptElements];
@@ -5736,6 +5794,7 @@ function convertPropsToElements2(props) {
   return {
     elements: allElements,
     imageUrls,
+    tails,
     width,
     height
   };
@@ -5910,6 +5969,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",
@@ -5963,7 +6034,7 @@ var IMessageDmComposition = (props) => {
   }), [props]);
   const conversionResult = (0, import_react10.useMemo)(() => {
     if (!fontsLoaded) {
-      return { elements: [], imageUrls: {}, width: mergedProps.width ?? 1206, height: mergedProps.height ?? 2622 };
+      return { elements: [], imageUrls: {}, tails: [], width: mergedProps.width ?? 1206, height: mergedProps.height ?? 2622 };
     }
     return convertPropsToElements2(mergedProps);
   }, [mergedProps, fontsLoaded]);
@@ -6332,6 +6403,21 @@ var IMessageDmComposition = (props) => {
             children: messageText
           }
         ),
+        conversionResult.tails.map((tail) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_remotion10.Img,
+          {
+            src: (0, import_remotion10.staticFile)(tail.image),
+            style: {
+              position: "absolute",
+              top: tail.y,
+              left: tail.x,
+              width: tail.width,
+              height: tail.height,
+              zIndex: 4
+            }
+          },
+          tail.id
+        )),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           ImageEditorComposition,
           {
@@ -7265,6 +7351,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,51 @@ function generateMessageElements2(props, calculatedMessages) {
   }
   return elements;
 }
+function generateTailData(props, calculatedMessages) {
+  const showMessageTails = props.showMessageTails ?? MESSAGE_DEFAULTS2.showMessageTails;
+  if (!showMessageTails) {
+    return [];
+  }
+  const tails = [];
+  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;
+    if (isUser) {
+      tails.push({
+        id: `tail-${cm.message.id}`,
+        x: messageRight + senderTailOffsetLeft,
+        y: messageBottom + senderTailOffsetTop,
+        width: senderTailOffsetRight - senderTailOffsetLeft,
+        height: senderTailOffsetBottom - senderTailOffsetTop,
+        image: "imsg-sender-tail.png"
+      });
+    } else {
+      tails.push({
+        id: `tail-${cm.message.id}`,
+        x: messageLeft + recipientTailOffsetLeft,
+        y: messageBottom + recipientTailOffsetTop,
+        width: recipientTailOffsetRight - recipientTailOffsetLeft,
+        height: recipientTailOffsetBottom - recipientTailOffsetTop,
+        image: "imsg-recv-tail.png"
+      });
+    }
+  }
+  return tails;
+}
 function generateHeaderTextElements(props, calculatedMessages) {
   if (calculatedMessages.length === 0) {
     return [];
@@ -4774,6 +4831,7 @@ function convertPropsToElements2(props) {
   const height = props.height ?? 2622;
   const calculatedMessages = calculateMessagePositions2(props);
   const messageElements = generateMessageElements2(props, calculatedMessages);
+  const tails = generateTailData(props, calculatedMessages);
   const headerTextElements = generateHeaderTextElements(props, calculatedMessages);
   const readReceiptElements = generateReadReceiptElement(props, calculatedMessages);
   const allElements = [...messageElements, ...headerTextElements, ...readReceiptElements];
@@ -4782,6 +4840,7 @@ function convertPropsToElements2(props) {
   return {
     elements: allElements,
     imageUrls,
+    tails,
     width,
     height
   };
@@ -4956,6 +5015,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",
@@ -5009,7 +5080,7 @@ var IMessageDmComposition = (props) => {
   }), [props]);
   const conversionResult = useMemo8(() => {
     if (!fontsLoaded) {
-      return { elements: [], imageUrls: {}, width: mergedProps.width ?? 1206, height: mergedProps.height ?? 2622 };
+      return { elements: [], imageUrls: {}, tails: [], width: mergedProps.width ?? 1206, height: mergedProps.height ?? 2622 };
     }
     return convertPropsToElements2(mergedProps);
   }, [mergedProps, fontsLoaded]);
@@ -5378,6 +5449,21 @@ var IMessageDmComposition = (props) => {
             children: messageText
           }
         ),
+        conversionResult.tails.map((tail) => /* @__PURE__ */ jsx12(
+          Img5,
+          {
+            src: staticFile3(tail.image),
+            style: {
+              position: "absolute",
+              top: tail.y,
+              left: tail.x,
+              width: tail.width,
+              height: tail.height,
+              zIndex: 4
+            }
+          },
+          tail.id
+        )),
         /* @__PURE__ */ jsx12(
           ImageEditorComposition,
           {
@@ -6028,6 +6114,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.180",
   "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",