ugcinc-render 1.8.172 → 1.8.174

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -5297,13 +5297,22 @@ 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",
+  readReceiptLeft: 0,
+  readReceiptRight: 1158
 };
 var FONT_FAMILY2 = getFontFamily("apple");
 function calculateAutoWidthAndLines3({
@@ -5662,6 +5671,48 @@ 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 readReceiptLeft = props.readReceiptLeft ?? MESSAGE_DEFAULTS2.readReceiptLeft;
+  const readReceiptRight = props.readReceiptRight ?? MESSAGE_DEFAULTS2.readReceiptRight;
+  const readReceiptWidth = readReceiptRight - readReceiptLeft;
+  const readReceiptTop = lastSenderMessage.bottom + readReceiptGap - readReceiptFontSize;
+  return [{
+    id: "read-receipt",
+    type: "text",
+    x: readReceiptLeft,
+    y: readReceiptTop,
+    width: readReceiptWidth,
+    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 +5729,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 +5882,22 @@ 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",
+  readReceiptLeft: 0,
+  readReceiptRight: 1158,
   // 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 +7139,15 @@ 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(),
+  readReceiptLeft: import_zod.z.number().optional(),
+  readReceiptRight: import_zod.z.number().optional(),
   // Messages
   messages: import_zod.z.array(import_zod.z.object({
     id: import_zod.z.string(),

package/dist/index.mjs

@@ -4343,13 +4343,22 @@ 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",
+  readReceiptLeft: 0,
+  readReceiptRight: 1158
 };
 var FONT_FAMILY2 = getFontFamily("apple");
 function calculateAutoWidthAndLines3({
@@ -4708,6 +4717,48 @@ 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 readReceiptLeft = props.readReceiptLeft ?? MESSAGE_DEFAULTS2.readReceiptLeft;
+  const readReceiptRight = props.readReceiptRight ?? MESSAGE_DEFAULTS2.readReceiptRight;
+  const readReceiptWidth = readReceiptRight - readReceiptLeft;
+  const readReceiptTop = lastSenderMessage.bottom + readReceiptGap - readReceiptFontSize;
+  return [{
+    id: "read-receipt",
+    type: "text",
+    x: readReceiptLeft,
+    y: readReceiptTop,
+    width: readReceiptWidth,
+    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 +4775,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 +4928,22 @@ 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",
+  readReceiptLeft: 0,
+  readReceiptRight: 1158,
   // 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 +5902,15 @@ 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(),
+  readReceiptLeft: z.number().optional(),
+  readReceiptRight: 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.172",
+  "version": "1.8.174",
   "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",