@embedreach/components 0.3.16 → 0.3.18

package/dist/chunks/index.js

@@ -3233,6 +3233,7 @@ const useGetBusinessAutomationSentCommunications = (args) => {
   return {
     // Get automation sent communications query
     sentCommunications: getSentCommunicationsQuery.data,
+    totalCount: getSentCommunicationsQuery.data?.pagination.total ?? null,
     isFetching: getSentCommunicationsQuery.isFetching,
     isLoading: getSentCommunicationsQuery.isLoading,
     isPlaceholderData: getSentCommunicationsQuery.isPlaceholderData,
@@ -3314,6 +3315,8 @@ const useListBusinessAutomations = (args) => {
     // The cursor to be used to fetch the *next* page of results.
     // Null or undefined if there are no more pages.
     nextCursor: query.data?.pagination.cursor ?? null,
+    // Total count of items for pagination display
+    totalCount: query.data?.pagination.total ?? null,
     isLoading: query.isLoading,
     error: query.error,
     isFetching: query.isFetching,
@@ -49151,6 +49154,8 @@ const useListSegments = (params) => {
     // The cursor to be used to fetch the *next* page of results.
     // Null or undefined if there are no more pages.
     nextCursor: query.data?.pagination.cursor ?? null,
+    // Total count of items for pagination display
+    totalCount: query.data?.pagination.total ?? null,
     isLoading: query.isLoading,
     error: query.error,
     isFetching: query.isFetching,
@@ -52901,7 +52906,7 @@ function useTanstackTable({
   columns,
   enableDebug = false,
   paginationMode = "none",
-  initialPageSize = 10,
+  initialPageSize = 20,
   initialPageIndex = 0,
   cursorPaginationQueryResult,
   onQueryParametersChange,
@@ -53180,6 +53185,25 @@ function SortingHeader({
     )
   ] });
 }
+const formatValue = (value, options = {}) => {
+  const { decimals = 0, suffix = "", useLocale = false } = options;
+  const num = Number(value);
+  if (!value || Number.isNaN(num)) {
+    return `0${decimals > 0 ? "." + "0".repeat(decimals) : ""}${suffix}`;
+  }
+  let formatted;
+  if (useLocale) {
+    formatted = num.toLocaleString(void 0, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    });
+  } else if (decimals > 0) {
+    formatted = num.toFixed(decimals);
+  } else {
+    formatted = Math.round(num).toString();
+  }
+  return `${formatted}${suffix}`;
+};
 function DebouncedInput({
   value: initialValue,
   onChange,
@@ -53207,7 +53231,8 @@ function TanstackTable({
   columns,
   enableDebug = false,
   paginationMode = "none",
-  initialPageSize = 10,
+  initialPageSize = 20,
+  totalCount,
   initialPageIndex = 0,
   headerActions,
   isLoading = false,
@@ -53260,7 +53285,8 @@ function TanstackTable({
     manualSorting,
     enableSortingRemoval,
     onSortingChange: handleSortingChangeInternal,
-    manualFiltering
+    manualFiltering,
+    manualPageCount: totalCount ? Math.ceil(totalCount / initialPageSize) : void 0
   });
   const scrollContainerRef = useRef(null);
   const [isScrolled, setIsScrolled] = useState(false);
@@ -53338,7 +53364,20 @@ function TanstackTable({
         ))
       },
       row.id
-    )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results found" }) }) })
+    )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results found" }) }) }),
+    enableFooter && !!data?.length && /* @__PURE__ */ jsx(TableFooter, { className: "sticky bottom-0 z-10 bg-card border-t", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx(TableRow, { children: footerGroup.headers.map((header2) => /* @__PURE__ */ jsx(
+      TableHead,
+      {
+        colSpan: header2.colSpan,
+        style: { width: header2.getSize() },
+        className: "bg-card text-card-foreground font-medium",
+        children: header2.isPlaceholder ? null : flexRender(
+          header2.column.columnDef.footer,
+          header2.getContext()
+        )
+      },
+      header2.id
+    )) }, footerGroup.id)) })
   ] });
   const TableSkeleton = () => /* @__PURE__ */ jsx("div", { className: "h-full w-full flex items-center justify-center min-h-[250px]", children: /* @__PURE__ */ jsx(BasicLoader, {}) });
   const isTableLoading = hideLoadingState ? isLoading && (!data || data.length === 0) : isLoading;
@@ -53358,8 +53397,8 @@ function TanstackTable({
       /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-primary" }),
       /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: "Loading..." })
     ] }) }),
-    (onSearchChange || isStandardPagination || isCursorPagination) && !isTableLoading && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 bg-card border-b px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("div", { children: onSearchChange && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    (onSearchChange || isStandardPagination || isCursorPagination) && !isTableLoading && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 bg-card border-b px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [
+      onSearchChange && /* @__PURE__ */ jsxs("div", { className: "relative w-full sm:w-auto", children: [
         /* @__PURE__ */ jsx(
           DebouncedInput,
           {
@@ -53385,7 +53424,7 @@ function TanstackTable({
               }
             },
             className: cn$1(
-              "w-80 h-9 text-sm border border-border rounded-md px-3 bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring",
+              "w-full sm:w-80 h-9 text-sm border border-border rounded-md px-3 bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring",
               isFetching && "pr-10"
               // Add padding for spinner
             ),
@@ -53394,31 +53433,32 @@ function TanstackTable({
           }
         ),
         !hideLoadingState && isFetching && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
-      ] }) }),
+      ] }),
       /* @__PURE__ */ jsx("div", { children: (isStandardPagination || isCursorPagination) && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
         /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: (() => {
-          if (paginationMode === "cursor") {
-            return null;
-          }
-          const totalRows = table.getPrePaginationRowModel().rows.length;
           const currentPageRows = table.getRowModel().rows.length;
-          if (totalRows === 0) {
-            return /* @__PURE__ */ jsx("span", { children: "No items" });
+          const total = totalCount && totalCount > 0 ? formatValue(totalCount, {
+            decimals: 0,
+            useLocale: true
+          }) : table.getPrePaginationRowModel().rows.length;
+          if (currentPageRows === 0) {
+            return null;
           }
-          const startItem = pageIndex * pageSize + 1;
-          const endItem = pageIndex * pageSize + currentPageRows;
+          const logicalPageNumber = isCursorPagination ? table.logicalPage ?? 0 : pageIndex;
+          const startItem = logicalPageNumber * pageSize + 1;
+          const endItem = logicalPageNumber * pageSize + currentPageRows;
           return /* @__PURE__ */ jsxs("span", { children: [
             "Showing ",
             startItem,
             "–",
             endItem,
             " of ",
-            totalRows,
+            total,
             " items"
           ] });
         })() }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             Button$1,
             {
               "data-testid": "previous-button",
@@ -53432,13 +53472,10 @@ function TanstackTable({
                 }
               },
               disabled: !actualCanPreviousPage || (hideLoadingState ? false : isLoading || isFetching),
-              children: [
-                /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 mr-1" }),
-                "Previous"
-              ]
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 mr-1" })
             }
           ),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             Button$1,
             {
               "data-testid": "next-button",
@@ -53452,10 +53489,7 @@ function TanstackTable({
                 }
               },
               disabled: !actualCanNextPage || (hideLoadingState ? false : isLoading || isFetching),
-              children: [
-                "Next",
-                /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 ml-1" })
-              ]
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 ml-1" })
             }
           )
         ] })
@@ -53470,18 +53504,6 @@ function TanstackTable({
         children: isTableLoading ? /* @__PURE__ */ jsx(TableSkeleton, {}) : /* @__PURE__ */ jsx(TableContent, {})
       }
     ),
-    enableFooter && !isTableLoading && !!data?.length && /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 z-10 bg-card border-t", children: /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx(Table$1, { className: "table-fixed", children: /* @__PURE__ */ jsx(TableFooter, { children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx(TableRow, { children: footerGroup.headers.map((header2) => /* @__PURE__ */ jsx(
-      TableHead,
-      {
-        colSpan: header2.colSpan,
-        style: { width: header2.getSize() },
-        children: header2.isPlaceholder ? null : flexRender(
-          header2.column.columnDef.footer,
-          header2.getContext()
-        )
-      },
-      header2.id
-    )) }, footerGroup.id)) }) }) }) }),
     enableDebug && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx("pre", { className: "p-2 bg-gray-50 text-xs overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: JSON.stringify(table.getState(), null, 2) }) }) })
   ] });
 }
@@ -97651,6 +97673,11 @@ const buildFinalSMSBody = (args) => {
   return companyName && smsBody ? `${companyName}:
 ${smsBody}` : smsBody ?? "";
 };
+var ReachMergeFieldTypeEnum = /* @__PURE__ */ ((ReachMergeFieldTypeEnum2) => {
+  ReachMergeFieldTypeEnum2["STATIC"] = "static";
+  ReachMergeFieldTypeEnum2["DYNAMIC"] = "dynamic";
+  return ReachMergeFieldTypeEnum2;
+})(ReachMergeFieldTypeEnum || {});
 const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
 async function convertToPng(base64Data) {
   if (!isBrowser) {
@@ -97702,6 +97729,12 @@ function extractBase64Data(dataUrl) {
   }
   return parts[1];
 }
+const extractMergeFieldNamesUtil = (text2) => {
+  const mergeFieldRegex = /\{\{([^}]+)\}\}/g;
+  const matches2 = text2.match(mergeFieldRegex);
+  if (!matches2) return [];
+  return matches2.map((match2) => match2.slice(2, -2));
+};
 const capitalize = (str) => {
   if (!str) return str;
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -100342,7 +100375,7 @@ const SMSEditor = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground pt-1 border-t", children: "Maximum file size: 5MB. We will try to compress the image if possible." })
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground pt-1 border-t", children: "Maximum size of all images: 5MB. We will try to compress the image if possible." })
               ] }) })
             ]
           }
@@ -100354,7 +100387,7 @@ const SMSEditor = ({
               "Enter the URL of the image you want to add to your SMS message. You can use merge fields to make the URL dynamic (e.g., https://example.com/images/{{customer_name}}.jpg).",
               /* @__PURE__ */ jsx("br", {}),
               /* @__PURE__ */ jsx("br", {}),
-              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Maximum file size: 5MB. We will try to compress the image if possible." })
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Maximum size of all images: 5MB. We will try to compress the image if possible." })
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
@@ -100681,6 +100714,9 @@ const SMSEditorContent = ({
   const hasMergeFieldsInUrl = useCallback((url) => {
     return /\{\{[^}]+\}\}/.test(url);
   }, []);
+  const extractMergeFieldNames = useCallback((content2) => {
+    return extractMergeFieldNamesUtil(content2);
+  }, []);
   const [editingMessage, setEditingMessage] = useState(initialMessage);
   const [imagePreview, setImagePreview] = useState(
     initialImageUrls.length > 0 ? initialImageUrls[0] : null
@@ -100690,6 +100726,7 @@ const SMSEditorContent = ({
   const [isUploadingImage, setIsUploadingImage] = useState(false);
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [hasInitialized, setHasInitialized] = useState(false);
+  const [dynamicMergeFieldImages, setDynamicMergeFieldImages] = useState([]);
   const fileInputRef = useRef(null);
   const autoSaveRef = useRef();
   const isInitialMountRef = useRef(true);
@@ -100697,6 +100734,29 @@ const SMSEditorContent = ({
     message: initialMessage
   });
   const { communicationGroup } = useGetCommunicationGroup(communicationGroupId);
+  const getDynamicMergeFieldImages = useCallback(
+    (content2) => {
+      if (!communicationGroup?.extraMergeFields) return [];
+      const mergeFieldNames = extractMergeFieldNames(content2);
+      const dynamicImages = [];
+      for (const mergeField of communicationGroup.extraMergeFields) {
+        if (mergeField.type === ReachMergeFieldTypeEnum.DYNAMIC) {
+          for (const field of mergeField.mergeFields) {
+            if (mergeFieldNames.includes(field.templateName) && field.image) {
+              dynamicImages.push({
+                templateName: field.templateName,
+                displayName: field.displayName,
+                placeholderUrl: field.image.placeholderUrl,
+                maxSize: field.image.maxSize
+              });
+            }
+          }
+        }
+      }
+      return dynamicImages;
+    },
+    [communicationGroup?.extraMergeFields, extractMergeFieldNames]
+  );
   const finalSMSBody = useMemo(() => {
     return buildFinalSMSBody({
       companyName: stableCompanyName || void 0,
@@ -100704,6 +100764,12 @@ const SMSEditorContent = ({
     });
   }, [stableCompanyName, editingMessage]);
   const debouncedMessage = useDebounce(editingMessage, 1e3);
+  useEffect(() => {
+    if (hasInitialized) {
+      const dynamicImages = getDynamicMergeFieldImages(editingMessage);
+      setDynamicMergeFieldImages(dynamicImages);
+    }
+  }, [editingMessage, getDynamicMergeFieldImages, hasInitialized]);
   const autoSave = useCallback(async () => {
     if (isInitialMountRef.current) {
       return;
@@ -100825,7 +100891,7 @@ const SMSEditorContent = ({
         console.log("File too large", file.size, MAX_FILE_SIZE);
         toast2({
           title: "File too large",
-          description: `Image must be 5MB or smaller. Your file is ${(file.size / (1024 * 1024)).toFixed(1)}MB.`,
+          description: `Sum of all images attached must be 5MB or smaller. The file you tried to upload is ${(file.size / (1024 * 1024)).toFixed(1)}MB.`,
           variant: "destructive"
         });
         return;
@@ -100941,30 +101007,52 @@ const SMSEditorContent = ({
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-6 h-full", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-        imagePreview && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsx("div", { className: "relative group w-fit", children: hasMergeFieldsInUrl(imagePreview) ? /* @__PURE__ */ jsx("div", { className: "max-h-48 max-w-xs rounded-xl shadow-lg border border-gray-200 bg-gray-50 p-4 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Image will be populated at send time based on the following merge fields:" }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: getMergeFieldsFromUrl(
-            imagePreview,
-            getMergeFields2
-          ).map((fieldName, index2) => /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "inline-flex items-center px-2 py-1 rounded text-xs bg-blue-100 text-blue-800 font-medium border border-blue-200",
-              children: fieldName
-            },
-            index2
-          )) })
-        ] }) }) : /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: imagePreview,
-            alt: "SMS attachment preview",
-            className: "max-h-48 max-w-xs rounded-xl shadow-lg border border-gray-200 object-contain bg-white transition-transform duration-200",
-            style: {
-              boxShadow: "0 4px 24px 0 rgba(0,0,0,0.08)"
-            }
-          }
-        ) }) }),
+        (imagePreview || dynamicMergeFieldImages.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4 justify-center mb-6", children: [
+          imagePreview && /* @__PURE__ */ jsx("div", { className: "relative group w-fit", children: hasMergeFieldsInUrl(imagePreview) ? /* @__PURE__ */ jsx("div", { className: "max-h-48 max-w-xs rounded-xl shadow-lg border border-gray-200 bg-gray-50 p-4 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Image will be populated at send time based on the following merge fields:" }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: getMergeFieldsFromUrl(
+              imagePreview,
+              getMergeFields2
+            ).map((fieldName, index2) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-flex items-center px-2 py-1 rounded text-xs bg-blue-100 text-blue-800 font-medium border border-blue-200",
+                children: fieldName
+              },
+              index2
+            )) })
+          ] }) }) : /* @__PURE__ */ jsxs("div", { className: "max-h-48 max-w-xs rounded-xl shadow-lg border border-green-200 bg-green-50 p-4 flex flex-col items-center justify-center min-h-[12rem]", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: imagePreview,
+                alt: "SMS attachment preview",
+                className: "max-h-32 max-w-48 rounded-lg border border-green-300 object-contain bg-white",
+                style: {
+                  boxShadow: "0 2px 12px 0 rgba(0,0,0,0.06)"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-green-600 mt-2", children: "Uploaded Image" })
+          ] }) }),
+          dynamicMergeFieldImages.map((dynamicImage, index2) => /* @__PURE__ */ jsxs("div", { className: "relative group w-fit", children: [
+            /* @__PURE__ */ jsx("div", { className: "max-h-48 max-w-xs rounded-xl shadow-lg border border-blue-200 bg-blue-50 p-4 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: dynamicImage.placeholderUrl,
+                  alt: `Dynamic merge field ${dynamicImage.displayName} placeholder`,
+                  className: "max-h-32 max-w-48 rounded-lg border border-blue-300 object-contain bg-white",
+                  style: {
+                    boxShadow: "0 2px 12px 0 rgba(0,0,0,0.06)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-blue-600 mt-3", children: dynamicImage.displayName })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-2 text-center", children: "Will be dynamically fetched at send time" })
+          ] }, index2))
+        ] }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -100999,7 +101087,10 @@ const SMSEditorContent = ({
         MemoizedSMSPreview,
         {
           body: finalSMSBody,
-          imageUrls: imagePreview ? [imagePreview] : []
+          imageUrls: [
+            ...dynamicMergeFieldImages.map((img) => img.placeholderUrl),
+            ...imagePreview ? [imagePreview] : []
+          ]
         }
       ) }) }) })
     ] })
@@ -102467,6 +102558,8 @@ const ChannelToggleButton = ({
   isUpdating,
   onToggle
 }) => {
+  const automation2 = useAutomation();
+  const disableToggle = !automation2 || automation2.status !== AutomationStatus.DRAFT;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsx(
       Switch,
@@ -102477,7 +102570,7 @@ const ChannelToggleButton = ({
             onToggle();
           }
         },
-        disabled: isUpdating,
+        disabled: isUpdating || disableToggle,
         className: "data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-gray-300"
       }
     ),
@@ -103624,12 +103717,45 @@ const AutomationEditorSMSPreview = ({
   const currentlySelectedSender = smsChannelSenders.find(
     (sender) => sender.channelSender.id === communicationGroup?.smsChannelSenderId
   );
+  const extractMergeFieldNames = useCallback((content2) => {
+    return extractMergeFieldNamesUtil(content2);
+  }, []);
+  const smsBody = communicationGroup?.smsMessageBody || "";
+  const getDynamicMergeFieldImages = useCallback(
+    (content2) => {
+      if (!communicationGroup?.extraMergeFields) return [];
+      const mergeFieldNames = extractMergeFieldNames(content2);
+      const dynamicImages = [];
+      for (const mergeField of communicationGroup.extraMergeFields) {
+        if (mergeField.type === ReachMergeFieldTypeEnum.DYNAMIC) {
+          for (const field of mergeField.mergeFields) {
+            if (mergeFieldNames.includes(field.templateName) && field.image) {
+              dynamicImages.push({
+                templateName: field.templateName,
+                displayName: field.displayName,
+                placeholderUrl: field.image.placeholderUrl,
+                maxSize: field.image.maxSize
+              });
+            }
+          }
+        }
+      }
+      return dynamicImages;
+    },
+    [communicationGroup?.extraMergeFields, extractMergeFieldNames]
+  );
   const imageUrls = useMemo(
     () => communicationGroup?.textMessageMediaUrls ?? [],
     [communicationGroup?.textMessageMediaUrls]
   );
-  const smsBody = communicationGroup?.smsMessageBody || "";
   const isLoading = !communicationGroup || !channelSenders || !channelAccounts;
+  const dynamicMergeFieldImages = useMemo(() => {
+    return getDynamicMergeFieldImages(smsBody);
+  }, [getDynamicMergeFieldImages, smsBody]);
+  const allImageUrls = useMemo(() => {
+    const dynamicUrls = dynamicMergeFieldImages.map((img) => img.placeholderUrl);
+    return [...dynamicUrls, ...imageUrls];
+  }, [imageUrls, dynamicMergeFieldImages]);
   const lastValidCompanyName = useRef(null);
   const lastChangeTime = useRef(0);
   const companyName = useMemo(() => {
@@ -103764,7 +103890,17 @@ const AutomationEditorSMSPreview = ({
     if (prevWithoutCompany === nextWithoutCompany) {
       return true;
     }
-    return false;
+    const prevImageUrls = prevProps.imageUrls || [];
+    const nextImageUrls = nextProps.imageUrls || [];
+    if (prevImageUrls.length !== nextImageUrls.length) {
+      return false;
+    }
+    for (let i3 = 0; i3 < prevImageUrls.length; i3++) {
+      if (prevImageUrls[i3] !== nextImageUrls[i3]) {
+        return false;
+      }
+    }
+    return true;
   });
   return /* @__PURE__ */ jsx("div", { className: "h-full", children: hasAnySMSsenders === false ? /* @__PURE__ */ jsx("div", { className: "w-full pt-8 mx-auto", children: /* @__PURE__ */ jsx(SMSSetup, {}) }) : /* @__PURE__ */ jsxs(
     motion.div,
@@ -103857,18 +103993,18 @@ const AutomationEditorSMSPreview = ({
                           SMSPreviewExpanded,
                           {
                             smsBody: finalSMSBody,
-                            imageUrls
+                            imageUrls: allImageUrls
                           }
                         )
                       }
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx(
+                isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading preview..." }) }) : /* @__PURE__ */ jsx(
                   MemoizedSMSPreview,
                   {
                     body: finalSMSBody,
-                    imageUrls
+                    imageUrls: allImageUrls
                   }
                 )
               ] }),
@@ -111011,6 +111147,7 @@ function AutomationList() {
   const {
     automations,
     nextCursor,
+    totalCount,
     isLoading,
     error: error2,
     isFetching,
@@ -111105,6 +111242,7 @@ function AutomationList() {
         data: mappedItems,
         columns,
         paginationMode: "cursor",
+        totalCount: totalCount ?? void 0,
         initialPageSize: pageSizeForQuery,
         isLoading: isLoading && !isPlaceholderData,
         onRowClick: (row) => {
@@ -111147,6 +111285,7 @@ function BroadcastList() {
   const [searchQuery, setSearchQuery] = useState("");
   const {
     automations,
+    totalCount,
     nextCursor,
     isLoading,
     error: error2,
@@ -111305,6 +111444,7 @@ function BroadcastList() {
         paginationMode: "cursor",
         initialPageSize: pageSizeForQuery,
         isLoading: isLoading && !isPlaceholderData,
+        totalCount: totalCount ?? void 0,
         cursorPaginationQueryResult: {
           nextCursor,
           isLoading,
@@ -111340,7 +111480,14 @@ function SegmentList() {
     void 0
   );
   const [searchQuery, setSearchQuery] = useState("");
-  const { segments, isLoading, nextCursor, isFetching, isPlaceholderData } = useListSegments({
+  const {
+    segments,
+    isLoading,
+    nextCursor,
+    totalCount,
+    isFetching,
+    isPlaceholderData
+  } = useListSegments({
     search: searchQuery || void 0,
     cursor: cursorForQuery,
     limit: pageSizeForQuery
@@ -111396,6 +111543,7 @@ function SegmentList() {
         paginationMode: "cursor",
         initialPageSize: pageSizeForQuery,
         isLoading: isLoading && !isPlaceholderData,
+        totalCount: totalCount ?? void 0,
         cursorPaginationQueryResult: {
           nextCursor,
           isLoading,
@@ -112852,6 +113000,7 @@ const AutomationRecipientsTable = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const {
     sentCommunications,
+    totalCount,
     isLoading: isLoadingRecipients,
     isFetching,
     isPlaceholderData,
@@ -113005,6 +113154,7 @@ const AutomationRecipientsTable = () => {
     {
       data: sentCommunications?.results || [],
       columns,
+      totalCount: totalCount ?? void 0,
       paginationMode: "cursor",
       initialPageSize: pageSizeForQuery,
       isLoading: isLoadingRecipients && !isPlaceholderData,
@@ -115468,6 +115618,40 @@ const AutomationEditorTrigger = () => {
   };
   return /* @__PURE__ */ jsx(Fragment$1, { children: renderTriggerData() });
 };
+const safelyTruncateWithMergeFields = (text2, maxLength) => {
+  if (text2.length <= maxLength) {
+    return text2;
+  }
+  const mergeFieldRegex = /\{\{[^}]+\}\}/g;
+  const mergeFields = [];
+  let match2;
+  while ((match2 = mergeFieldRegex.exec(text2)) !== null) {
+    mergeFields.push({
+      start: match2.index,
+      end: match2.index + match2[0].length,
+      field: match2[0]
+    });
+  }
+  let truncationPoint = maxLength;
+  for (const mergeField of mergeFields) {
+    if (truncationPoint > mergeField.start && truncationPoint < mergeField.end) {
+      truncationPoint = mergeField.start;
+      break;
+    }
+    if (truncationPoint === mergeField.start) {
+      const lastSpace = text2.lastIndexOf(" ", mergeField.start - 1);
+      truncationPoint = lastSpace > 0 ? lastSpace : mergeField.start;
+      break;
+    }
+  }
+  if (truncationPoint === 0) {
+    if (mergeFields.length > 0) {
+      return mergeFields[0].field;
+    }
+    return text2.substring(0, Math.min(maxLength, text2.length));
+  }
+  return text2.substring(0, truncationPoint) + "...";
+};
 const AutomationEditorSubStep = ({
   type,
   actionId
@@ -115598,7 +115782,10 @@ const AutomationEditorSubStep = ({
           ) : isGettingMergeFields ? /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground", children: "..." }) : /* @__PURE__ */ jsx(
             MergeFieldRenderer,
             {
-              content: communicationGroup?.smsMessageBody ? `${communicationGroup.smsMessageBody.substring(0, 40)}${communicationGroup.smsMessageBody.length > 40 ? "..." : ""}` : "No message set",
+              content: communicationGroup?.smsMessageBody ? safelyTruncateWithMergeFields(
+                communicationGroup.smsMessageBody,
+                40
+              ) : "No message set",
               mergeFieldsResponse: getMergeFields2,
               variant: "minimal",
               className: "text-[10px] font-medium text-muted-foreground"

package/dist/index.d.ts

@@ -87,6 +87,7 @@ declare type DynamicMergeField = ReachMergeFieldBase & {
     mergeFields: {
         displayName: string;
         templateName: string;
+        image?: ImageMergeFieldType;
     }[];
     /**
      * The url of the dynamic merge field (e.g. "https://acme.co/id/")
@@ -120,6 +121,11 @@ declare interface EngageTypedOverrides {
  */
 declare type FeatureKey = 'measure' | 'measure-setup' | 'acquire-setup' | 'reputation' | 'engage-segment-builder' | 'engage-automations-create-modal' | 'engage-automations-view-modal' | 'engage';
 
+declare type ImageMergeFieldType = {
+    placeholderUrl: string;
+    maxSize: number;
+};
+
 declare interface LanguageConfig {
     /** Initial language code (e.g., 'en', 'es', 'fr') */
     default: string;