ugcinc-render 1.8.181 → 1.8.183

package/dist/index.d.mts

@@ -1136,26 +1136,24 @@ interface IMessageDmCompositionProps {
     messageHeaderLeft?: number;
     messageHeaderRight?: number;
     showMessageTails?: boolean;
+    recipientTailSideY?: number;
+    recipientTailCurveStartY?: number;
     recipientTailTipX?: number;
     recipientTailTipY?: number;
-    recipientTailSideX?: number;
-    recipientTailSideY?: number;
     recipientTailBottomX?: number;
     recipientTailBottomY?: number;
-    recipientTailTopCurveX?: number;
-    recipientTailTopCurveY?: number;
-    recipientTailBottomCurveX?: number;
-    recipientTailBottomCurveY?: number;
+    recipientTailBottomEndX?: number;
+    recipientTailTopBend?: number;
+    recipientTailBottomBend?: number;
+    senderTailSideY?: number;
+    senderTailCurveStartY?: number;
     senderTailTipX?: number;
     senderTailTipY?: number;
-    senderTailSideX?: number;
-    senderTailSideY?: number;
     senderTailBottomX?: number;
     senderTailBottomY?: number;
-    senderTailTopCurveX?: number;
-    senderTailTopCurveY?: number;
-    senderTailBottomCurveX?: number;
-    senderTailBottomCurveY?: number;
+    senderTailBottomEndX?: number;
+    senderTailTopBend?: number;
+    senderTailBottomBend?: number;
     showReadReceipt?: boolean;
     readReceiptText?: string;
     readReceiptGap?: number;

package/dist/index.d.ts

@@ -1136,26 +1136,24 @@ interface IMessageDmCompositionProps {
     messageHeaderLeft?: number;
     messageHeaderRight?: number;
     showMessageTails?: boolean;
+    recipientTailSideY?: number;
+    recipientTailCurveStartY?: number;
     recipientTailTipX?: number;
     recipientTailTipY?: number;
-    recipientTailSideX?: number;
-    recipientTailSideY?: number;
     recipientTailBottomX?: number;
     recipientTailBottomY?: number;
-    recipientTailTopCurveX?: number;
-    recipientTailTopCurveY?: number;
-    recipientTailBottomCurveX?: number;
-    recipientTailBottomCurveY?: number;
+    recipientTailBottomEndX?: number;
+    recipientTailTopBend?: number;
+    recipientTailBottomBend?: number;
+    senderTailSideY?: number;
+    senderTailCurveStartY?: number;
     senderTailTipX?: number;
     senderTailTipY?: number;
-    senderTailSideX?: number;
-    senderTailSideY?: number;
     senderTailBottomX?: number;
     senderTailBottomY?: number;
-    senderTailTopCurveX?: number;
-    senderTailTopCurveY?: number;
-    senderTailBottomCurveX?: number;
-    senderTailBottomCurveY?: number;
+    senderTailBottomEndX?: number;
+    senderTailTopBend?: number;
+    senderTailBottomBend?: number;
     showReadReceipt?: boolean;
     readReceiptText?: string;
     readReceiptGap?: number;

package/dist/index.js

@@ -5938,29 +5938,41 @@ var defaultIMessageDmProps = {
   // Message tails (SVG-based, on last message in group)
   showMessageTails: true,
   // Recipient tail anchor points (offsets from message left & bottom)
-  recipientTailTipX: -16,
-  recipientTailTipY: 0,
-  recipientTailSideX: 0,
-  recipientTailSideY: -47,
-  recipientTailBottomX: 18,
-  recipientTailBottomY: -11,
-  // Recipient tail curve control points (offsets from message left & bottom)
-  recipientTailTopCurveX: -16,
-  recipientTailTopCurveY: -25,
-  recipientTailBottomCurveX: 0,
-  recipientTailBottomCurveY: 0,
+  recipientTailSideY: -53,
+  // Y where tail meets bubble (top of straight line)
+  recipientTailCurveStartY: -33,
+  // Y where straight line ends and curve begins
+  recipientTailTipX: -17,
+  recipientTailTipY: -1,
+  recipientTailBottomX: -19,
+  // X where bottom curve ends
+  recipientTailBottomY: -12,
+  // Y where bottom curve ends
+  recipientTailBottomEndX: 0,
+  // X where flat bottom ends (at bubble edge)
+  // Recipient tail curve bend (-1 to 1, negative = inward, positive = outward)
+  recipientTailTopBend: -0.3,
+  // Top curve bends inward
+  recipientTailBottomBend: 0.5,
+  // Bottom curve bends outward
   // Sender tail anchor points (offsets from message right & bottom)
-  senderTailTipX: 16,
-  senderTailTipY: 1,
-  senderTailSideX: 0,
-  senderTailSideY: -47,
-  senderTailBottomX: -18,
-  senderTailBottomY: -11,
-  // Sender tail curve control points (offsets from message right & bottom)
-  senderTailTopCurveX: 16,
-  senderTailTopCurveY: -25,
-  senderTailBottomCurveX: 0,
-  senderTailBottomCurveY: 1,
+  senderTailSideY: -53,
+  // Y where tail meets bubble (top of straight line)
+  senderTailCurveStartY: -33,
+  // Y where straight line ends and curve begins
+  senderTailTipX: 17,
+  senderTailTipY: -1,
+  senderTailBottomX: 19,
+  // X where bottom curve ends
+  senderTailBottomY: -12,
+  // Y where bottom curve ends
+  senderTailBottomEndX: 0,
+  // X where flat bottom ends (at bubble edge)
+  // Sender tail curve bend (-1 to 1, negative = inward, positive = outward)
+  senderTailTopBend: -0.3,
+  // Top curve bends inward
+  senderTailBottomBend: 0.5,
+  // Bottom curve bends outward
   // Read receipt (under last sender message)
   showReadReceipt: true,
   readReceiptText: "Read 12:16 PM",
@@ -6135,27 +6147,25 @@ var IMessageDmComposition = (props) => {
     senderBubbleColor = "#1a42d5",
     recipientBubbleColor = "#303032",
     // Tail props - recipient (offsets from message left & bottom)
-    recipientTailTipX = -16,
-    recipientTailTipY = 0,
-    recipientTailSideX = 0,
-    recipientTailSideY = -47,
-    recipientTailBottomX = 18,
-    recipientTailBottomY = -11,
-    recipientTailTopCurveX = -16,
-    recipientTailTopCurveY = -25,
-    recipientTailBottomCurveX = 0,
-    recipientTailBottomCurveY = 0,
+    recipientTailSideY = -53,
+    recipientTailCurveStartY = -33,
+    recipientTailTipX = -17,
+    recipientTailTipY = -1,
+    recipientTailBottomX = -19,
+    recipientTailBottomY = -12,
+    recipientTailBottomEndX = 0,
+    recipientTailTopBend = -0.3,
+    recipientTailBottomBend = 0.5,
     // Tail props - sender (offsets from message right & bottom)
-    senderTailTipX = 16,
-    senderTailTipY = 1,
-    senderTailSideX = 0,
-    senderTailSideY = -47,
-    senderTailBottomX = -18,
-    senderTailBottomY = -11,
-    senderTailTopCurveX = 16,
-    senderTailTopCurveY = -25,
-    senderTailBottomCurveX = 0,
-    senderTailBottomCurveY = 1
+    senderTailSideY = -53,
+    senderTailCurveStartY = -33,
+    senderTailTipX = 17,
+    senderTailTipY = -1,
+    senderTailBottomX = 19,
+    senderTailBottomY = -12,
+    senderTailBottomEndX = 0,
+    senderTailTopBend = -0.3,
+    senderTailBottomBend = 0.5
   } = mergedProps;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     BaseDmComposition,
@@ -6409,18 +6419,37 @@ var IMessageDmComposition = (props) => {
         conversionResult.tails.map((tail) => {
           const refX = tail.isUser ? tail.messageRight : tail.messageLeft;
           const refY = tail.messageBottom;
+          const sideY = refY + (tail.isUser ? senderTailSideY : recipientTailSideY);
+          const curveStartY = refY + (tail.isUser ? senderTailCurveStartY : recipientTailCurveStartY);
           const tipX = refX + (tail.isUser ? senderTailTipX : recipientTailTipX);
           const tipY = refY + (tail.isUser ? senderTailTipY : recipientTailTipY);
-          const sideX = refX + (tail.isUser ? senderTailSideX : recipientTailSideX);
-          const sideY = refY + (tail.isUser ? senderTailSideY : recipientTailSideY);
           const bottomX = refX + (tail.isUser ? senderTailBottomX : recipientTailBottomX);
           const bottomY = refY + (tail.isUser ? senderTailBottomY : recipientTailBottomY);
-          const topCurveX = refX + (tail.isUser ? senderTailTopCurveX : recipientTailTopCurveX);
-          const topCurveY = refY + (tail.isUser ? senderTailTopCurveY : recipientTailTopCurveY);
-          const bottomCurveX = refX + (tail.isUser ? senderTailBottomCurveX : recipientTailBottomCurveX);
-          const bottomCurveY = refY + (tail.isUser ? senderTailBottomCurveY : recipientTailBottomCurveY);
+          const bottomEndX = refX + (tail.isUser ? senderTailBottomEndX : recipientTailBottomEndX);
+          const topBend = tail.isUser ? senderTailTopBend : recipientTailTopBend;
+          const bottomBend = tail.isUser ? senderTailBottomBend : recipientTailBottomBend;
+          const sideX = refX;
+          const curveStartX = refX;
+          const topMidX = (curveStartX + tipX) / 2;
+          const topMidY = (curveStartY + tipY) / 2;
+          const topDx = tipX - curveStartX;
+          const topDy = tipY - curveStartY;
+          const topLen = Math.sqrt(topDx * topDx + topDy * topDy);
+          const topPerpX = tail.isUser ? topDy / topLen : -topDy / topLen;
+          const topPerpY = tail.isUser ? -topDx / topLen : topDx / topLen;
+          const topCurveX = topMidX + topPerpX * topBend * topLen;
+          const topCurveY = topMidY + topPerpY * topBend * topLen;
+          const bottomMidX = (tipX + bottomX) / 2;
+          const bottomMidY = (tipY + bottomY) / 2;
+          const bottomDx = bottomX - tipX;
+          const bottomDy = bottomY - tipY;
+          const bottomLen = Math.sqrt(bottomDx * bottomDx + bottomDy * bottomDy);
+          const bottomPerpX = tail.isUser ? bottomDy / bottomLen : -bottomDy / bottomLen;
+          const bottomPerpY = tail.isUser ? -bottomDx / bottomLen : bottomDx / bottomLen;
+          const bottomCurveX = bottomMidX + bottomPerpX * bottomBend * bottomLen;
+          const bottomCurveY = bottomMidY + bottomPerpY * bottomBend * bottomLen;
           const fillColor = tail.isUser ? senderBubbleColor : recipientBubbleColor;
-          const pathD = `M ${sideX} ${sideY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} Z`;
+          const pathD = `M ${sideX} ${sideY} L ${curveStartX} ${curveStartY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} L ${bottomEndX} ${bottomY} Z`;
           return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "svg",
             {
@@ -7374,29 +7403,27 @@ var iMessageDmPropsSchema = import_zod.z.object({
   // Message tails (SVG-based)
   showMessageTails: import_zod.z.boolean().optional(),
   // Recipient tail anchor points
+  recipientTailSideY: import_zod.z.number().optional(),
+  recipientTailCurveStartY: import_zod.z.number().optional(),
   recipientTailTipX: import_zod.z.number().optional(),
   recipientTailTipY: import_zod.z.number().optional(),
-  recipientTailSideX: import_zod.z.number().optional(),
-  recipientTailSideY: import_zod.z.number().optional(),
   recipientTailBottomX: import_zod.z.number().optional(),
   recipientTailBottomY: import_zod.z.number().optional(),
-  // Recipient tail curve control points
-  recipientTailTopCurveX: import_zod.z.number().optional(),
-  recipientTailTopCurveY: import_zod.z.number().optional(),
-  recipientTailBottomCurveX: import_zod.z.number().optional(),
-  recipientTailBottomCurveY: import_zod.z.number().optional(),
+  recipientTailBottomEndX: import_zod.z.number().optional(),
+  // Recipient tail curve bend
+  recipientTailTopBend: import_zod.z.number().optional(),
+  recipientTailBottomBend: import_zod.z.number().optional(),
   // Sender tail anchor points
+  senderTailSideY: import_zod.z.number().optional(),
+  senderTailCurveStartY: import_zod.z.number().optional(),
   senderTailTipX: import_zod.z.number().optional(),
   senderTailTipY: import_zod.z.number().optional(),
-  senderTailSideX: import_zod.z.number().optional(),
-  senderTailSideY: import_zod.z.number().optional(),
   senderTailBottomX: import_zod.z.number().optional(),
   senderTailBottomY: import_zod.z.number().optional(),
-  // Sender tail curve control points
-  senderTailTopCurveX: import_zod.z.number().optional(),
-  senderTailTopCurveY: import_zod.z.number().optional(),
-  senderTailBottomCurveX: import_zod.z.number().optional(),
-  senderTailBottomCurveY: import_zod.z.number().optional(),
+  senderTailBottomEndX: import_zod.z.number().optional(),
+  // Sender tail curve bend
+  senderTailTopBend: import_zod.z.number().optional(),
+  senderTailBottomBend: import_zod.z.number().optional(),
   // Read receipt
   showReadReceipt: import_zod.z.boolean().optional(),
   readReceiptText: import_zod.z.string().optional(),

package/dist/index.mjs

@@ -4984,29 +4984,41 @@ var defaultIMessageDmProps = {
   // Message tails (SVG-based, on last message in group)
   showMessageTails: true,
   // Recipient tail anchor points (offsets from message left & bottom)
-  recipientTailTipX: -16,
-  recipientTailTipY: 0,
-  recipientTailSideX: 0,
-  recipientTailSideY: -47,
-  recipientTailBottomX: 18,
-  recipientTailBottomY: -11,
-  // Recipient tail curve control points (offsets from message left & bottom)
-  recipientTailTopCurveX: -16,
-  recipientTailTopCurveY: -25,
-  recipientTailBottomCurveX: 0,
-  recipientTailBottomCurveY: 0,
+  recipientTailSideY: -53,
+  // Y where tail meets bubble (top of straight line)
+  recipientTailCurveStartY: -33,
+  // Y where straight line ends and curve begins
+  recipientTailTipX: -17,
+  recipientTailTipY: -1,
+  recipientTailBottomX: -19,
+  // X where bottom curve ends
+  recipientTailBottomY: -12,
+  // Y where bottom curve ends
+  recipientTailBottomEndX: 0,
+  // X where flat bottom ends (at bubble edge)
+  // Recipient tail curve bend (-1 to 1, negative = inward, positive = outward)
+  recipientTailTopBend: -0.3,
+  // Top curve bends inward
+  recipientTailBottomBend: 0.5,
+  // Bottom curve bends outward
   // Sender tail anchor points (offsets from message right & bottom)
-  senderTailTipX: 16,
-  senderTailTipY: 1,
-  senderTailSideX: 0,
-  senderTailSideY: -47,
-  senderTailBottomX: -18,
-  senderTailBottomY: -11,
-  // Sender tail curve control points (offsets from message right & bottom)
-  senderTailTopCurveX: 16,
-  senderTailTopCurveY: -25,
-  senderTailBottomCurveX: 0,
-  senderTailBottomCurveY: 1,
+  senderTailSideY: -53,
+  // Y where tail meets bubble (top of straight line)
+  senderTailCurveStartY: -33,
+  // Y where straight line ends and curve begins
+  senderTailTipX: 17,
+  senderTailTipY: -1,
+  senderTailBottomX: 19,
+  // X where bottom curve ends
+  senderTailBottomY: -12,
+  // Y where bottom curve ends
+  senderTailBottomEndX: 0,
+  // X where flat bottom ends (at bubble edge)
+  // Sender tail curve bend (-1 to 1, negative = inward, positive = outward)
+  senderTailTopBend: -0.3,
+  // Top curve bends inward
+  senderTailBottomBend: 0.5,
+  // Bottom curve bends outward
   // Read receipt (under last sender message)
   showReadReceipt: true,
   readReceiptText: "Read 12:16 PM",
@@ -5181,27 +5193,25 @@ var IMessageDmComposition = (props) => {
     senderBubbleColor = "#1a42d5",
     recipientBubbleColor = "#303032",
     // Tail props - recipient (offsets from message left & bottom)
-    recipientTailTipX = -16,
-    recipientTailTipY = 0,
-    recipientTailSideX = 0,
-    recipientTailSideY = -47,
-    recipientTailBottomX = 18,
-    recipientTailBottomY = -11,
-    recipientTailTopCurveX = -16,
-    recipientTailTopCurveY = -25,
-    recipientTailBottomCurveX = 0,
-    recipientTailBottomCurveY = 0,
+    recipientTailSideY = -53,
+    recipientTailCurveStartY = -33,
+    recipientTailTipX = -17,
+    recipientTailTipY = -1,
+    recipientTailBottomX = -19,
+    recipientTailBottomY = -12,
+    recipientTailBottomEndX = 0,
+    recipientTailTopBend = -0.3,
+    recipientTailBottomBend = 0.5,
     // Tail props - sender (offsets from message right & bottom)
-    senderTailTipX = 16,
-    senderTailTipY = 1,
-    senderTailSideX = 0,
-    senderTailSideY = -47,
-    senderTailBottomX = -18,
-    senderTailBottomY = -11,
-    senderTailTopCurveX = 16,
-    senderTailTopCurveY = -25,
-    senderTailBottomCurveX = 0,
-    senderTailBottomCurveY = 1
+    senderTailSideY = -53,
+    senderTailCurveStartY = -33,
+    senderTailTipX = 17,
+    senderTailTipY = -1,
+    senderTailBottomX = 19,
+    senderTailBottomY = -12,
+    senderTailBottomEndX = 0,
+    senderTailTopBend = -0.3,
+    senderTailBottomBend = 0.5
   } = mergedProps;
   return /* @__PURE__ */ jsxs10(
     BaseDmComposition,
@@ -5455,18 +5465,37 @@ var IMessageDmComposition = (props) => {
         conversionResult.tails.map((tail) => {
           const refX = tail.isUser ? tail.messageRight : tail.messageLeft;
           const refY = tail.messageBottom;
+          const sideY = refY + (tail.isUser ? senderTailSideY : recipientTailSideY);
+          const curveStartY = refY + (tail.isUser ? senderTailCurveStartY : recipientTailCurveStartY);
           const tipX = refX + (tail.isUser ? senderTailTipX : recipientTailTipX);
           const tipY = refY + (tail.isUser ? senderTailTipY : recipientTailTipY);
-          const sideX = refX + (tail.isUser ? senderTailSideX : recipientTailSideX);
-          const sideY = refY + (tail.isUser ? senderTailSideY : recipientTailSideY);
           const bottomX = refX + (tail.isUser ? senderTailBottomX : recipientTailBottomX);
           const bottomY = refY + (tail.isUser ? senderTailBottomY : recipientTailBottomY);
-          const topCurveX = refX + (tail.isUser ? senderTailTopCurveX : recipientTailTopCurveX);
-          const topCurveY = refY + (tail.isUser ? senderTailTopCurveY : recipientTailTopCurveY);
-          const bottomCurveX = refX + (tail.isUser ? senderTailBottomCurveX : recipientTailBottomCurveX);
-          const bottomCurveY = refY + (tail.isUser ? senderTailBottomCurveY : recipientTailBottomCurveY);
+          const bottomEndX = refX + (tail.isUser ? senderTailBottomEndX : recipientTailBottomEndX);
+          const topBend = tail.isUser ? senderTailTopBend : recipientTailTopBend;
+          const bottomBend = tail.isUser ? senderTailBottomBend : recipientTailBottomBend;
+          const sideX = refX;
+          const curveStartX = refX;
+          const topMidX = (curveStartX + tipX) / 2;
+          const topMidY = (curveStartY + tipY) / 2;
+          const topDx = tipX - curveStartX;
+          const topDy = tipY - curveStartY;
+          const topLen = Math.sqrt(topDx * topDx + topDy * topDy);
+          const topPerpX = tail.isUser ? topDy / topLen : -topDy / topLen;
+          const topPerpY = tail.isUser ? -topDx / topLen : topDx / topLen;
+          const topCurveX = topMidX + topPerpX * topBend * topLen;
+          const topCurveY = topMidY + topPerpY * topBend * topLen;
+          const bottomMidX = (tipX + bottomX) / 2;
+          const bottomMidY = (tipY + bottomY) / 2;
+          const bottomDx = bottomX - tipX;
+          const bottomDy = bottomY - tipY;
+          const bottomLen = Math.sqrt(bottomDx * bottomDx + bottomDy * bottomDy);
+          const bottomPerpX = tail.isUser ? bottomDy / bottomLen : -bottomDy / bottomLen;
+          const bottomPerpY = tail.isUser ? -bottomDx / bottomLen : bottomDx / bottomLen;
+          const bottomCurveX = bottomMidX + bottomPerpX * bottomBend * bottomLen;
+          const bottomCurveY = bottomMidY + bottomPerpY * bottomBend * bottomLen;
           const fillColor = tail.isUser ? senderBubbleColor : recipientBubbleColor;
-          const pathD = `M ${sideX} ${sideY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} Z`;
+          const pathD = `M ${sideX} ${sideY} L ${curveStartX} ${curveStartY} Q ${topCurveX} ${topCurveY} ${tipX} ${tipY} Q ${bottomCurveX} ${bottomCurveY} ${bottomX} ${bottomY} L ${bottomEndX} ${bottomY} Z`;
           return /* @__PURE__ */ jsx12(
             "svg",
             {
@@ -6137,29 +6166,27 @@ var iMessageDmPropsSchema = z.object({
   // Message tails (SVG-based)
   showMessageTails: z.boolean().optional(),
   // Recipient tail anchor points
+  recipientTailSideY: z.number().optional(),
+  recipientTailCurveStartY: z.number().optional(),
   recipientTailTipX: z.number().optional(),
   recipientTailTipY: z.number().optional(),
-  recipientTailSideX: z.number().optional(),
-  recipientTailSideY: z.number().optional(),
   recipientTailBottomX: z.number().optional(),
   recipientTailBottomY: z.number().optional(),
-  // Recipient tail curve control points
-  recipientTailTopCurveX: z.number().optional(),
-  recipientTailTopCurveY: z.number().optional(),
-  recipientTailBottomCurveX: z.number().optional(),
-  recipientTailBottomCurveY: z.number().optional(),
+  recipientTailBottomEndX: z.number().optional(),
+  // Recipient tail curve bend
+  recipientTailTopBend: z.number().optional(),
+  recipientTailBottomBend: z.number().optional(),
   // Sender tail anchor points
+  senderTailSideY: z.number().optional(),
+  senderTailCurveStartY: z.number().optional(),
   senderTailTipX: z.number().optional(),
   senderTailTipY: z.number().optional(),
-  senderTailSideX: z.number().optional(),
-  senderTailSideY: z.number().optional(),
   senderTailBottomX: z.number().optional(),
   senderTailBottomY: z.number().optional(),
-  // Sender tail curve control points
-  senderTailTopCurveX: z.number().optional(),
-  senderTailTopCurveY: z.number().optional(),
-  senderTailBottomCurveX: z.number().optional(),
-  senderTailBottomCurveY: z.number().optional(),
+  senderTailBottomEndX: z.number().optional(),
+  // Sender tail curve bend
+  senderTailTopBend: z.number().optional(),
+  senderTailBottomBend: 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.181",
+  "version": "1.8.183",
   "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",