ugcinc-render 1.8.172 → 1.8.173

package/dist/index.d.mts

@@ -1117,6 +1117,12 @@ interface IMessageDmCompositionProps {
     messageHeaderLetterSpacing?: number;
     messageHeaderLeft?: number;
     messageHeaderRight?: number;
+    showReadReceipt?: boolean;
+    readReceiptText?: string;
+    readReceiptGap?: number;
+    readReceiptFontSize?: number;
+    readReceiptLetterSpacing?: number;
+    readReceiptColor?: string;
     messages?: ImMessage[];
 }
 

package/dist/index.d.ts

@@ -1117,6 +1117,12 @@ interface IMessageDmCompositionProps {
     messageHeaderLetterSpacing?: number;
     messageHeaderLeft?: number;
     messageHeaderRight?: number;
+    showReadReceipt?: boolean;
+    readReceiptText?: string;
+    readReceiptGap?: number;
+    readReceiptFontSize?: number;
+    readReceiptLetterSpacing?: number;
+    readReceiptColor?: string;
     messages?: ImMessage[];
 }
 

package/dist/index.js

@@ -5297,13 +5297,20 @@ var MESSAGE_DEFAULTS2 = {
   // Message area header text (above first message)
   messageHeaderImessageText: "iMessage",
   messageHeaderTimestampText: "Today 12:16 PM",
-  messageHeaderTimestampGap: 36,
-  messageHeaderImessageGap: 39,
+  messageHeaderTimestampGap: 30,
+  messageHeaderImessageGap: 5,
   messageHeaderTextColor: "#626167",
-  messageHeaderFontSize: 36,
-  messageHeaderLetterSpacing: 0.5,
+  messageHeaderFontSize: 34,
+  messageHeaderLetterSpacing: 1.25,
   messageHeaderLeft: 0,
-  messageHeaderRight: 1206
+  messageHeaderRight: 1206,
+  // Read receipt (under last sender message)
+  showReadReceipt: true,
+  readReceiptText: "Read 12:16 PM",
+  readReceiptGap: 47,
+  readReceiptFontSize: 34,
+  readReceiptLetterSpacing: 1.25,
+  readReceiptColor: "#626167"
 };
 var FONT_FAMILY2 = getFontFamily("apple");
 function calculateAutoWidthAndLines3({
@@ -5662,6 +5669,46 @@ function generateHeaderTextElements(props, calculatedMessages) {
   });
   return elements;
 }
+function generateReadReceiptElement(props, calculatedMessages) {
+  const showReadReceipt = props.showReadReceipt ?? MESSAGE_DEFAULTS2.showReadReceipt;
+  if (!showReadReceipt) {
+    return [];
+  }
+  let lastSenderMessage = null;
+  for (let i = calculatedMessages.length - 1; i >= 0; i--) {
+    if (calculatedMessages[i].message.sender === "user") {
+      lastSenderMessage = calculatedMessages[i];
+      break;
+    }
+  }
+  if (!lastSenderMessage) {
+    return [];
+  }
+  const readReceiptText = props.readReceiptText ?? MESSAGE_DEFAULTS2.readReceiptText;
+  const readReceiptGap = props.readReceiptGap ?? MESSAGE_DEFAULTS2.readReceiptGap;
+  const readReceiptFontSize = props.readReceiptFontSize ?? MESSAGE_DEFAULTS2.readReceiptFontSize;
+  const readReceiptLetterSpacing = props.readReceiptLetterSpacing ?? MESSAGE_DEFAULTS2.readReceiptLetterSpacing;
+  const readReceiptColor = props.readReceiptColor ?? MESSAGE_DEFAULTS2.readReceiptColor;
+  const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS2.senderBubbleRight;
+  const readReceiptTop = lastSenderMessage.bottom + readReceiptGap - readReceiptFontSize;
+  return [{
+    id: "read-receipt",
+    type: "text",
+    x: 0,
+    y: readReceiptTop,
+    width: senderBubbleRight,
+    height: readReceiptFontSize,
+    zIndex: 4,
+    text: readReceiptText,
+    font: "apple",
+    fontWeight: 600,
+    fontSize: readReceiptFontSize,
+    letterSpacing: readReceiptLetterSpacing,
+    color: readReceiptColor,
+    textAlign: "right",
+    verticalAlign: "middle"
+  }];
+}
 function buildImageUrls2(props) {
   const imageUrls = {};
   const messages = props.messages ?? [];
@@ -5678,7 +5725,8 @@ function convertPropsToElements2(props) {
   const calculatedMessages = calculateMessagePositions2(props);
   const messageElements = generateMessageElements2(props, calculatedMessages);
   const headerTextElements = generateHeaderTextElements(props, calculatedMessages);
-  const allElements = [...messageElements, ...headerTextElements];
+  const readReceiptElements = generateReadReceiptElement(props, calculatedMessages);
+  const allElements = [...messageElements, ...headerTextElements, ...readReceiptElements];
   allElements.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   const imageUrls = buildImageUrls2(props);
   return {
@@ -5830,13 +5878,20 @@ var defaultIMessageDmProps = {
   // Message area header text (above first message)
   messageHeaderImessageText: "iMessage",
   messageHeaderTimestampText: "Today 12:16 PM",
-  messageHeaderTimestampGap: 36,
-  messageHeaderImessageGap: 39,
+  messageHeaderTimestampGap: 30,
+  messageHeaderImessageGap: 5,
   messageHeaderTextColor: "#626167",
-  messageHeaderFontSize: 36,
-  messageHeaderLetterSpacing: 0.5,
+  messageHeaderFontSize: 34,
+  messageHeaderLetterSpacing: 1.25,
   messageHeaderLeft: 0,
   messageHeaderRight: 1206,
+  // Read receipt (under last sender message)
+  showReadReceipt: true,
+  readReceiptText: "Read 12:16 PM",
+  readReceiptGap: 47,
+  readReceiptFontSize: 34,
+  readReceiptLetterSpacing: 1.25,
+  readReceiptColor: "#626167",
   // 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" },
@@ -7078,6 +7133,13 @@ var iMessageDmPropsSchema = import_zod.z.object({
   messageHeaderLetterSpacing: import_zod.z.number().optional(),
   messageHeaderLeft: import_zod.z.number().optional(),
   messageHeaderRight: import_zod.z.number().optional(),
+  // Read receipt
+  showReadReceipt: import_zod.z.boolean().optional(),
+  readReceiptText: import_zod.z.string().optional(),
+  readReceiptGap: import_zod.z.number().optional(),
+  readReceiptFontSize: import_zod.z.number().optional(),
+  readReceiptLetterSpacing: import_zod.z.number().optional(),
+  readReceiptColor: import_zod.z.string().optional(),
   // Messages
   messages: import_zod.z.array(import_zod.z.object({
     id: import_zod.z.string(),

package/dist/index.mjs

@@ -4343,13 +4343,20 @@ var MESSAGE_DEFAULTS2 = {
   // Message area header text (above first message)
   messageHeaderImessageText: "iMessage",
   messageHeaderTimestampText: "Today 12:16 PM",
-  messageHeaderTimestampGap: 36,
-  messageHeaderImessageGap: 39,
+  messageHeaderTimestampGap: 30,
+  messageHeaderImessageGap: 5,
   messageHeaderTextColor: "#626167",
-  messageHeaderFontSize: 36,
-  messageHeaderLetterSpacing: 0.5,
+  messageHeaderFontSize: 34,
+  messageHeaderLetterSpacing: 1.25,
   messageHeaderLeft: 0,
-  messageHeaderRight: 1206
+  messageHeaderRight: 1206,
+  // Read receipt (under last sender message)
+  showReadReceipt: true,
+  readReceiptText: "Read 12:16 PM",
+  readReceiptGap: 47,
+  readReceiptFontSize: 34,
+  readReceiptLetterSpacing: 1.25,
+  readReceiptColor: "#626167"
 };
 var FONT_FAMILY2 = getFontFamily("apple");
 function calculateAutoWidthAndLines3({
@@ -4708,6 +4715,46 @@ function generateHeaderTextElements(props, calculatedMessages) {
   });
   return elements;
 }
+function generateReadReceiptElement(props, calculatedMessages) {
+  const showReadReceipt = props.showReadReceipt ?? MESSAGE_DEFAULTS2.showReadReceipt;
+  if (!showReadReceipt) {
+    return [];
+  }
+  let lastSenderMessage = null;
+  for (let i = calculatedMessages.length - 1; i >= 0; i--) {
+    if (calculatedMessages[i].message.sender === "user") {
+      lastSenderMessage = calculatedMessages[i];
+      break;
+    }
+  }
+  if (!lastSenderMessage) {
+    return [];
+  }
+  const readReceiptText = props.readReceiptText ?? MESSAGE_DEFAULTS2.readReceiptText;
+  const readReceiptGap = props.readReceiptGap ?? MESSAGE_DEFAULTS2.readReceiptGap;
+  const readReceiptFontSize = props.readReceiptFontSize ?? MESSAGE_DEFAULTS2.readReceiptFontSize;
+  const readReceiptLetterSpacing = props.readReceiptLetterSpacing ?? MESSAGE_DEFAULTS2.readReceiptLetterSpacing;
+  const readReceiptColor = props.readReceiptColor ?? MESSAGE_DEFAULTS2.readReceiptColor;
+  const senderBubbleRight = props.senderBubbleRight ?? MESSAGE_DEFAULTS2.senderBubbleRight;
+  const readReceiptTop = lastSenderMessage.bottom + readReceiptGap - readReceiptFontSize;
+  return [{
+    id: "read-receipt",
+    type: "text",
+    x: 0,
+    y: readReceiptTop,
+    width: senderBubbleRight,
+    height: readReceiptFontSize,
+    zIndex: 4,
+    text: readReceiptText,
+    font: "apple",
+    fontWeight: 600,
+    fontSize: readReceiptFontSize,
+    letterSpacing: readReceiptLetterSpacing,
+    color: readReceiptColor,
+    textAlign: "right",
+    verticalAlign: "middle"
+  }];
+}
 function buildImageUrls2(props) {
   const imageUrls = {};
   const messages = props.messages ?? [];
@@ -4724,7 +4771,8 @@ function convertPropsToElements2(props) {
   const calculatedMessages = calculateMessagePositions2(props);
   const messageElements = generateMessageElements2(props, calculatedMessages);
   const headerTextElements = generateHeaderTextElements(props, calculatedMessages);
-  const allElements = [...messageElements, ...headerTextElements];
+  const readReceiptElements = generateReadReceiptElement(props, calculatedMessages);
+  const allElements = [...messageElements, ...headerTextElements, ...readReceiptElements];
   allElements.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   const imageUrls = buildImageUrls2(props);
   return {
@@ -4876,13 +4924,20 @@ var defaultIMessageDmProps = {
   // Message area header text (above first message)
   messageHeaderImessageText: "iMessage",
   messageHeaderTimestampText: "Today 12:16 PM",
-  messageHeaderTimestampGap: 36,
-  messageHeaderImessageGap: 39,
+  messageHeaderTimestampGap: 30,
+  messageHeaderImessageGap: 5,
   messageHeaderTextColor: "#626167",
-  messageHeaderFontSize: 36,
-  messageHeaderLetterSpacing: 0.5,
+  messageHeaderFontSize: 34,
+  messageHeaderLetterSpacing: 1.25,
   messageHeaderLeft: 0,
   messageHeaderRight: 1206,
+  // Read receipt (under last sender message)
+  showReadReceipt: true,
+  readReceiptText: "Read 12:16 PM",
+  readReceiptGap: 47,
+  readReceiptFontSize: 34,
+  readReceiptLetterSpacing: 1.25,
+  readReceiptColor: "#626167",
   // 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" },
@@ -5841,6 +5896,13 @@ var iMessageDmPropsSchema = z.object({
   messageHeaderLetterSpacing: z.number().optional(),
   messageHeaderLeft: z.number().optional(),
   messageHeaderRight: z.number().optional(),
+  // Read receipt
+  showReadReceipt: z.boolean().optional(),
+  readReceiptText: z.string().optional(),
+  readReceiptGap: z.number().optional(),
+  readReceiptFontSize: z.number().optional(),
+  readReceiptLetterSpacing: z.number().optional(),
+  readReceiptColor: z.string().optional(),
   // Messages
   messages: z.array(z.object({
     id: z.string(),

package/package.json

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