@embedreach/components 0.3.35 → 0.3.36

package/dist/chunks/index.js

@@ -35090,10 +35090,15 @@ const useUpdateCommunicationGroup = () => {
       groupId,
       params
     }) => updateCommunicationGroup(groupId, params),
-    onSuccess: () => {
+    onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({
         queryKey: communicationGroupQueryKeys.all
       });
+      if (variables?.groupId) {
+        queryClient.invalidateQueries({
+          queryKey: ["communication-group", variables.groupId]
+        });
+      }
       queryClient.invalidateQueries({
         queryKey: ["reputation", "communication-groups"]
       });
@@ -35104,6 +35109,7 @@ const useUpdateCommunicationGroup = () => {
   });
   return {
     updateCommunicationGroup: updateCommunicationGroupMutation.mutate,
+    updateCommunicationGroupAsync: updateCommunicationGroupMutation.mutateAsync,
     isUpdating: updateCommunicationGroupMutation.isPending,
     updateError: updateCommunicationGroupMutation.error,
     isUpdateSuccess: updateCommunicationGroupMutation.isSuccess
@@ -83728,7 +83734,8 @@ const MissingDataForPreview = ({
 };
 const EmailPreviewHtmlRenderer = ({
   html,
-  onHeightChange
+  onHeightChange,
+  expanded = false
 }) => {
   const iframeRef = useRef(null);
   const [state, setState] = useState({
@@ -83852,40 +83859,40 @@ const EmailPreviewHtmlRenderer = ({
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(MissingDataForPreview, { type: "email" }) });
   }
   const currentHeight = state.type === "ready" ? state.height : "auto";
-  return /* @__PURE__ */ jsx(
-    "div",
+  const wrapperStyle = expanded ? {
+    width: "100%",
+    // In expanded mode, let the wrapper size to fit the iframe
+    height: "auto"
+  } : {
+    transition: "height 0.3s ease-in-out",
+    height: currentHeight
+  };
+  const iframeHeight = expanded && state.type === "ready" && state.height ? `${state.height}px` : "100%";
+  return /* @__PURE__ */ jsx("div", { className: "w-full bg-white rounded-lg border-0", style: wrapperStyle, children: state.type === "loading" ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(BasicLoader, { text: "Loading email preview..." }) }) : /* @__PURE__ */ jsx(
+    "iframe",
     {
-      className: "w-full h-full bg-white rounded-lg border-0 overflow-hidden",
+      ref: iframeRef,
+      title: "Email Preview",
+      srcDoc: prettyHtml,
+      className: "w-full block",
       style: {
-        transition: "height 0.3s ease-in-out",
-        height: currentHeight
+        border: "none",
+        backgroundColor: "white",
+        width: "100%",
+        height: iframeHeight,
+        overflow: "hidden",
+        scrollbarWidth: "none",
+        msOverflowStyle: "none",
+        display: "block"
       },
-      children: state.type === "loading" ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(BasicLoader, { text: "Loading email preview..." }) }) : /* @__PURE__ */ jsx(
-        "iframe",
-        {
-          ref: iframeRef,
-          title: "Email Preview",
-          srcDoc: prettyHtml,
-          className: "w-full block",
-          style: {
-            border: "none",
-            backgroundColor: "white",
-            width: "100%",
-            height: "100%",
-            overflow: "hidden",
-            scrollbarWidth: "none",
-            msOverflowStyle: "none"
-          },
-          scrolling: "no",
-          onLoad: handleIframeLoad,
-          onError: () => {
-            const estimatedHeight = estimateHeightFromContent(prettyHtml);
-            handleHeightUpdate(estimatedHeight);
-          }
-        }
-      )
+      scrolling: "no",
+      onLoad: handleIframeLoad,
+      onError: () => {
+        const estimatedHeight = estimateHeightFromContent(prettyHtml);
+        handleHeightUpdate(estimatedHeight);
+      }
     }
-  );
+  ) });
 };
 function OrderedMap(content2) {
   this.content = content2;
@@ -105719,12 +105726,10 @@ const SMSSenderAndCompanyEditor = React__default.memo(
     const [internalCompanyName, setInternalCompanyName] = useState(null);
     const [popoverOpen, setPopoverOpen] = useState(false);
     const [hasInitialized, setHasInitialized] = useState(false);
-    const lastSavedCompanyName = useRef(null);
-    const debouncedCompanyName = useDebounce(internalCompanyName, 250);
     const { channelSenders } = useChannelSender();
     const { channelAccounts } = useChannelAccount();
     const { data: smsApplication } = useGetLatestSmsRegistrationApplication();
-    const { updateCommunicationGroup: updateCommunicationGroup2, isUpdating } = useUpdateCommunicationGroup();
+    const { updateCommunicationGroupAsync, isUpdating } = useUpdateCommunicationGroup();
     const smsChannelSenders = useMemo(() => {
       return getSmsChannelSenders({
         channelSenders: channelSenders?.results ?? [],
@@ -105741,7 +105746,6 @@ const SMSSenderAndCompanyEditor = React__default.memo(
         };
         setFromSender(initialSenderId);
         setInternalCompanyName(companyName);
-        lastSavedCompanyName.current = companyName;
         setHasInitialized(true);
       }
     }, [communicationGroupId, companyName, hasInitialized, initialSenderId]);
@@ -105758,16 +105762,9 @@ const SMSSenderAndCompanyEditor = React__default.memo(
         };
       }
     }, [hasInitialized, initialSenderId, companyName, communicationGroupId]);
-    const handleSenderChange = useCallback(
-      (value) => {
-        setFromSender(value);
-        updateCommunicationGroup2({
-          groupId: propsRef.current.communicationGroupId,
-          params: { smsChannelSenderId: value }
-        });
-      },
-      [updateCommunicationGroup2]
-    );
+    const handleSenderChange = useCallback((value) => {
+      setFromSender(value);
+    }, []);
     const handleCompanyNameChange = useCallback(
       (e4) => {
         const newValue = e4.target.value;
@@ -105775,17 +105772,38 @@ const SMSSenderAndCompanyEditor = React__default.memo(
       },
       []
     );
-    useEffect(() => {
-      if (hasInitialized && debouncedCompanyName !== void 0) {
-        if (debouncedCompanyName !== lastSavedCompanyName.current) {
-          updateCommunicationGroup2({
+    const handleSave = useCallback(async () => {
+      if (!hasInitialized) return;
+      try {
+        const params = {};
+        if (fromSender !== propsRef.current.initialSenderId) {
+          params.smsChannelSenderId = fromSender || void 0;
+        }
+        if (internalCompanyName !== propsRef.current.companyName) {
+          params.textMessageCompanyName = internalCompanyName || null;
+        }
+        if (Object.keys(params).length > 0) {
+          await updateCommunicationGroupAsync({
             groupId: propsRef.current.communicationGroupId,
-            params: { textMessageCompanyName: debouncedCompanyName || null }
+            params
           });
-          lastSavedCompanyName.current = debouncedCompanyName;
         }
+        setPopoverOpen(false);
+      } catch (error2) {
+        console.error("Failed to save sender and company name:", error2);
       }
-    }, [debouncedCompanyName, hasInitialized, updateCommunicationGroup2]);
+    }, [
+      hasInitialized,
+      fromSender,
+      internalCompanyName,
+      updateCommunicationGroupAsync
+    ]);
+    useEffect(() => {
+      if (!popoverOpen && hasInitialized) {
+        setFromSender(propsRef.current.initialSenderId);
+        setInternalCompanyName(propsRef.current.companyName);
+      }
+    }, [popoverOpen, hasInitialized]);
     const handlePopoverOpenChange = useCallback((open) => {
       setPopoverOpen(open);
     }, []);
@@ -105846,8 +105864,30 @@ const SMSSenderAndCompanyEditor = React__default.memo(
               placeholder: "Enter company name",
               className: "w-full"
             }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              variant: "outline",
+              onClick: () => setPopoverOpen(false),
+              disabled: isUpdating,
+              children: "Cancel"
+            }
           ),
-          /* @__PURE__ */ jsx("div", { className: "h-6", children: /* @__PURE__ */ jsx(SavingIndicator, { isSaving: isUpdating }) })
+          /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              onClick: handleSave,
+              disabled: isUpdating,
+              className: "min-w-[100px]",
+              children: isUpdating ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" }),
+                /* @__PURE__ */ jsx("span", { children: "Saving..." })
+              ] }) : "Save"
+            }
+          )
         ] })
       ] });
     }, [
@@ -105857,7 +105897,8 @@ const SMSSenderAndCompanyEditor = React__default.memo(
       isUpdating,
       smsChannelSenders,
       handleSenderChange,
-      handleCompanyNameChange
+      handleCompanyNameChange,
+      handleSave
     ]);
     if (modalType === "popover") {
       return /* @__PURE__ */ jsxs(Popover, { open: popoverOpen, onOpenChange: handlePopoverOpenChange, children: [
@@ -105942,6 +105983,9 @@ const MemoizedSMSSenderAndCompanyEditor$1 = React__default.memo(
         modalType: "dialog"
       }
     );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.communicationGroupId === nextProps.communicationGroupId && prevProps.initialSenderId === nextProps.initialSenderId && prevProps.companyName === nextProps.companyName;
   }
 );
 const SMSEditorContent = React__default.memo(
@@ -105966,15 +106010,9 @@ const SMSEditorContent = React__default.memo(
         communicationGroupId,
         automation2?.id ?? void 0
       );
-      const lastKnownCompanyNameRef = useRef(
-        companyName || null
-      );
-      if (companyName !== null && companyName !== void 0) {
-        lastKnownCompanyNameRef.current = companyName;
-      }
       const stableCompanyName = useMemo(() => {
-        return lastKnownCompanyNameRef.current;
-      }, []);
+        return companyName ?? null;
+      }, [companyName]);
       const hasMergeFieldsInUrl = useCallback((url) => {
         return /\{\{[^}]+\}\}/.test(url);
       }, []);
@@ -106553,11 +106591,8 @@ const EditSMSContent = () => {
     }
   );
 };
-const AutomationEditorPreviewContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: "rounded-lg p-6 bg-background flex-1 min-h-0 flex items-center justify-center overflow-y-auto", children });
-};
 const EmailPreviewExpanded = ({ emailBody }) => {
-  return /* @__PURE__ */ jsx(AutomationEditorPreviewContainer, { children: /* @__PURE__ */ jsx(EmailPreviewHtmlRenderer, { html: emailBody }) });
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto bg-background rounded-lg p-6", children: /* @__PURE__ */ jsx("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-4xl", children: /* @__PURE__ */ jsx(EmailPreviewHtmlRenderer, { html: emailBody, expanded: true }) }) }) }) });
 };
 const DialogCloseButton = ({ onOpenChange }) => {
   return /* @__PURE__ */ jsx(
@@ -106609,6 +106644,9 @@ const ExpandButton = ({ expandDialogContent }) => {
     )
   ] });
 };
+const AutomationEditorPreviewContainer = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "rounded-lg p-6 bg-background flex-1 min-h-0 flex items-center justify-center overflow-y-auto", children });
+};
 const SMSPreviewExpanded = ({ smsBody, imageUrls }) => {
   return /* @__PURE__ */ jsx(AutomationEditorPreviewContainer, { children: /* @__PURE__ */ jsx(SMSPreview, { body: smsBody, imageUrls }) });
 };
@@ -106653,6 +106691,7 @@ const validatePhoneNumber = (phoneNumber) => {
   return false;
 };
 const prettyPrintPhoneNumber = (phoneNumber) => {
+  if (!phoneNumber) return "";
   const digitsOnly = phoneNumber.replace(/\D/g, "");
   if (digitsOnly.length === 10) {
     return `(${digitsOnly.slice(0, 3)}) ${digitsOnly.slice(3, 6)}-${digitsOnly.slice(6)}`;
@@ -122833,25 +122872,22 @@ const AutomationEditorSMSPreview = ({
     const dynamicUrls = dynamicMergeFieldImages.map((img) => img.placeholderUrl);
     return [...dynamicUrls, ...imageUrls];
   }, [imageUrls, dynamicMergeFieldImages]);
-  const lastValidCompanyName = useRef(null);
-  const companyName = useMemo(() => {
-    if (lastValidCompanyName.current === null && communicationGroup?.textMessageCompanyName) {
-      const currentName = communicationGroup.textMessageCompanyName;
-      if (currentName && currentName.trim()) {
-        lastValidCompanyName.current = currentName;
-        return currentName;
-      }
+  const [stableCompanyName, setStableCompanyName] = useState(
+    null
+  );
+  useEffect(() => {
+    const latest = communicationGroup?.textMessageCompanyName;
+    if (latest !== void 0) {
+      setStableCompanyName(latest ?? null);
     }
-    const stableName = lastValidCompanyName.current;
-    return stableName;
-  }, []);
+  }, [communicationGroup?.textMessageCompanyName]);
   const finalSMSBody = useMemo(() => {
     const result = buildFinalSMSBody({
-      companyName: companyName ?? void 0,
+      companyName: stableCompanyName ?? void 0,
       smsBody
     });
     return result;
-  }, [companyName, smsBody]);
+  }, [stableCompanyName, smsBody]);
   const { getMergeFields: getMergeFields2 } = useGetMergeFieldsWithAutomation(
     communicationGroup?.id ?? void 0,
     automation2?.id ?? void 0
@@ -123007,7 +123043,7 @@ const AutomationEditorSMSPreview = ({
               communicationGroupId: communicationGroup?.id || "",
               initialMessage,
               initialImageUrls: imageUrls,
-              companyName,
+              companyName: stableCompanyName,
               initialSenderId: communicationGroup?.smsChannelSenderId
             }
           ),

package/dist/chunks/sandbox-loading-screen.js

@@ -24435,17 +24435,18 @@ const createPhoneNumberFactory = (agentId, number) => {
   return {
     id: f.string.uuid(),
     agentId,
-    number: generatedNumber,
-    forwardingEnabled: false,
+    businessId: "mock-business-id",
+    phoneNumber: generatedNumber,
+    forwardingType: "none",
     createdAt: f.date.past().toISOString(),
     updatedAt: f.date.recent().toISOString()
   };
 };
 const createCallFactory = (agentId) => {
   const createdAt = f.date.recent();
-  const answeredAt = f.date.between({ from: createdAt, to: /* @__PURE__ */ new Date() });
+  const startedAt = f.date.between({ from: createdAt, to: /* @__PURE__ */ new Date() });
   const duration = f.number.int({ min: 30, max: 1800 });
-  const endedAt = new Date(answeredAt.getTime() + duration * 1e3);
+  const endedAt = new Date(startedAt.getTime() + duration * 1e3);
   const summaries = [
     "Customer inquired about business hours and services offered. Provided information about our operating schedule and explained our consultation process.",
     "Client called to schedule an appointment for next week. Confirmed availability and provided pricing information for the requested service.",
@@ -24459,15 +24460,22 @@ const createCallFactory = (agentId) => {
   return {
     id: f.string.uuid(),
     agentId,
+    callType: "phone_call",
+    callStatus: "completed",
     fromNumber: generatePlainPhoneNumber(),
-    duration,
-    location: `${f.location.city()}, ${f.location.state({ abbreviated: true })}`,
+    toNumber: generatePlainPhoneNumber(),
+    direction: "inbound",
+    startedAt: startedAt.toISOString(),
+    endedAt: endedAt.toISOString(),
+    durationSecs: duration,
+    sentiment: f.datatype.boolean({ probability: 0.7 }) ? "positive" : "negative",
+    successful: f.datatype.boolean({ probability: 0.8 }),
+    blockedReason: null,
+    transcript: null,
+    summary: f.helpers.arrayElement(summaries),
     recordingUrl: f.datatype.boolean({ probability: 0.8 }) ? `https://example.com/recording/${f.string.uuid()}.mp3` : void 0,
-    aiSummary: f.helpers.arrayElement(summaries),
-    status: "completed",
     createdAt: createdAt.toISOString(),
-    answeredAt: answeredAt.toISOString(),
-    endedAt: endedAt.toISOString()
+    updatedAt: createdAt.toISOString()
   };
 };
 const knowledgeStore = /* @__PURE__ */ new Map();
@@ -24479,6 +24487,7 @@ const mockStore = {
   phoneNumbers: [],
   testCalls: [],
   forwardingTests: [],
+  agentKnowledge: {},
   calls: []
 };
 const getOrCreateAgent = (businessId) => {
@@ -24514,17 +24523,131 @@ const voiceHandlers = [
     return HttpResponse.json({
       success: true,
       message: "Success (Sandbox)",
-      data: [agent]
+      data: {
+        results: [agent],
+        pagination: {
+          hasNextPage: false,
+          cursor: null
+        }
+      }
     });
   }),
+  // Create voice agent
+  http.post(`${HOSTNAME}/api/voice/agents`, async () => {
+    const businessId = "mock-business-id";
+    const existingAgent = mockStore.agents.find(
+      (a2) => a2.businessId === businessId
+    );
+    if (existingAgent) {
+      return HttpResponse.json(
+        {
+          success: false,
+          message: "Agent already exists for this business (Sandbox)"
+        },
+        { status: 409 }
+      );
+    }
+    const agent = createVoiceAgentFactory(businessId);
+    mockStore.agents.push(agent);
+    mockStore.agentKnowledge[agent.id] = [];
+    return HttpResponse.json(
+      {
+        success: true,
+        message: "Agent created (Sandbox)",
+        data: agent
+      },
+      { status: 201 }
+    );
+  }),
+  // Get knowledge items for an agent
+  http.get(
+    `${HOSTNAME}/api/voice/agents/:agentId/knowledge`,
+    async ({ params, request }) => {
+      const agentId = typeof params.agentId === "string" ? params.agentId : Array.isArray(params.agentId) ? params.agentId[0] : "";
+      const agent = mockStore.agents.find((a2) => a2.id === agentId);
+      if (!agent) {
+        return HttpResponse.json(
+          {
+            success: false,
+            message: `Agent with ID ${agentId} not found (Sandbox)`
+          },
+          { status: 404 }
+        );
+      }
+      const url = new URL(request.url);
+      const cursor = url.searchParams.get("cursor") || void 0;
+      const limitParam = url.searchParams.get("limit");
+      const limit = limitParam ? Number.parseInt(limitParam, 10) : void 0;
+      const knowledgeItems = mockStore.agentKnowledge[agentId] || [];
+      const startIndex = cursor ? Number.parseInt(cursor, 10) : 0;
+      const endIndex = limit ? startIndex + limit : knowledgeItems.length;
+      const paginatedItems = knowledgeItems.slice(startIndex, endIndex);
+      const hasNextPage = endIndex < knowledgeItems.length;
+      return HttpResponse.json({
+        success: true,
+        message: "Success (Sandbox)",
+        data: {
+          data: paginatedItems,
+          pagination: {
+            hasNextPage,
+            cursor: hasNextPage ? endIndex.toString() : void 0
+          }
+        }
+      });
+    }
+  ),
+  // Apply knowledge to an agent
+  http.post(
+    `${HOSTNAME}/api/voice/agents/:agentId/knowledge`,
+    async ({ params, request }) => {
+      const agentId = typeof params.agentId === "string" ? params.agentId : Array.isArray(params.agentId) ? params.agentId[0] : "";
+      const agent = mockStore.agents.find((a2) => a2.id === agentId);
+      if (!agent) {
+        return HttpResponse.json(
+          {
+            success: false,
+            message: `Agent with ID ${agentId} not found (Sandbox)`
+          },
+          { status: 404 }
+        );
+      }
+      const body = await request.json();
+      const requests = Array.isArray(body) ? body : [body];
+      const knowledgeItems = requests.map((req) => ({
+        id: crypto.randomUUID(),
+        agentId,
+        title: req.title,
+        content: req.content,
+        websiteScanId: void 0,
+        deactivatedAt: null,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+      }));
+      if (!mockStore.agentKnowledge[agentId]) {
+        mockStore.agentKnowledge[agentId] = [];
+      }
+      mockStore.agentKnowledge[agentId].push(...knowledgeItems);
+      return HttpResponse.json(
+        {
+          success: true,
+          message: "Knowledge applied (Sandbox)",
+          data: knowledgeItems
+        },
+        { status: 201 }
+      );
+    }
+  ),
   // Get knowledge items from webscan-knowledge (business-scoped)
   http.get(`${HOSTNAME}/api/webscan-knowledge`, async () => {
     return HttpResponse.json({
       success: true,
       message: "Success (Sandbox)",
       data: {
-        items: mockStore.knowledgeItems,
-        total: mockStore.knowledgeItems.length
+        results: mockStore.knowledgeItems,
+        pagination: {
+          hasNextPage: false,
+          cursor: null
+        }
       }
     });
   }),
@@ -24871,7 +24994,13 @@ const voiceHandlers = [
       return HttpResponse.json({
         success: true,
         message: "Success (Sandbox)",
-        data: phoneNumbers
+        data: {
+          results: phoneNumbers,
+          pagination: {
+            hasNextPage: false,
+            cursor: null
+          }
+        }
       });
     }
   ),
@@ -25001,28 +25130,36 @@ const voiceHandlers = [
     }
   ),
   // Get calls for an agent
-  http.get(`${HOSTNAME}/api/voice/calls`, ({ request }) => {
-    const url = new URL(request.url);
-    const agentId = url.searchParams.get("agentId");
-    if (!agentId) {
-      return HttpResponse.json(
-        {
-          success: false,
-          message: "agentId query parameter is required (Sandbox)"
-        },
-        { status: 400 }
+  http.get(
+    `${HOSTNAME}/api/voice/agents/:agentId/calls`,
+    ({ params, request }) => {
+      const agentId = params.agentId;
+      const url = new URL(request.url);
+      const cursor = url.searchParams.get("cursor");
+      const limitParam = url.searchParams.get("limit");
+      const limit = limitParam ? parseInt(limitParam, 10) : void 0;
+      const agentCalls = mockStore.calls.filter((c2) => c2.agentId === agentId);
+      agentCalls.sort(
+        (a2, b2) => new Date(b2.createdAt).getTime() - new Date(a2.createdAt).getTime()
       );
+      const startIndex = cursor ? parseInt(cursor, 10) : 0;
+      const endIndex = limit ? Math.min(startIndex + limit, agentCalls.length) : agentCalls.length;
+      const paginatedCalls = agentCalls.slice(startIndex, endIndex);
+      const hasNextPage = endIndex < agentCalls.length;
+      const nextCursor = hasNextPage ? endIndex.toString() : void 0;
+      return HttpResponse.json({
+        success: true,
+        message: "Success (Sandbox)",
+        data: {
+          results: paginatedCalls,
+          pagination: {
+            hasNextPage,
+            cursor: nextCursor
+          }
+        }
+      });
     }
-    const agentCalls = mockStore.calls.filter((c2) => c2.agentId === agentId);
-    agentCalls.sort(
-      (a2, b2) => new Date(b2.createdAt).getTime() - new Date(a2.createdAt).getTime()
-    );
-    return HttpResponse.json({
-      success: true,
-      message: "Success (Sandbox)",
-      data: agentCalls
-    });
-  })
+  )
 ];
 const getHandlersByFeatures = (features) => {
   const allHandlers = [];