@sonordev/site-kit 2.9.0 → 3.0.0

package/dist/{chunk-SLJJJWMV.js → chunk-FPU2QPO4.js}

@@ -1,6 +1,7 @@
 'use client';
 'use strict';
 
+var chunkMLJXELPA_js = require('./chunk-MLJXELPA.js');
 var React2 = require('react');
 var ReactDOM = require('react-dom');
 var navigation = require('next/navigation');
@@ -13,7 +14,260 @@ var React2__default = /*#__PURE__*/_interopDefault(React2);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 
-// src/engage/EngageWidget.tsx
+function alpha(rgb, a) {
+  return `rgba(var(--sk-primary-rgb, ${rgb}), ${a})`;
+}
+function asString(v) {
+  return typeof v === "string" && v.trim() ? v : void 0;
+}
+function asRecord(v) {
+  return v && typeof v === "object" && !Array.isArray(v) ? v : void 0;
+}
+function isNavigable(action) {
+  return /^(https?:\/\/|\/|#|tel:|mailto:)/i.test(action.trim());
+}
+var DISPLAY_ONLY = ["heading", "section_header", "paragraph"];
+function InlineManagedForm({ slug, prefill, primaryColor, primaryRgb }) {
+  const {
+    form,
+    isLoading,
+    fetchError,
+    submitError,
+    visibleFields,
+    values,
+    errors,
+    setFieldValue,
+    submit,
+    isSubmitting,
+    isComplete
+  } = chunkMLJXELPA_js.useForm(slug, { initialValues: prefill || {} });
+  const cardStyle = {
+    marginTop: 8,
+    padding: 12,
+    borderRadius: 12,
+    border: `1px solid ${alpha(primaryRgb, 0.25)}`,
+    backgroundColor: alpha(primaryRgb, 0.04)
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: 13, color: "var(--sk-text-tertiary, #9ca3af)" }, children: "Loading form\u2026" }) });
+  }
+  if (fetchError || !form) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: 13, color: "var(--sk-text-tertiary, #9ca3af)" }, children: "This form is unavailable right now." }) });
+  }
+  if (isComplete) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: 13.5, color: "var(--sk-text-primary, #111827)", lineHeight: 1.5 }, children: form.success_message }) });
+  }
+  const inputBase = {
+    width: "100%",
+    padding: "8px 10px",
+    borderRadius: 8,
+    // Longhand (not the `border` shorthand) so the error-state `borderColor`
+    // override doesn't mix shorthand+longhand and trigger React's style warning.
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "var(--sk-border, #e5e7eb)",
+    backgroundColor: "var(--sk-bg, #ffffff)",
+    color: "var(--sk-text-primary, #111827)",
+    fontSize: 13.5,
+    boxSizing: "border-box",
+    outline: "none"
+  };
+  const renderField = (field) => {
+    const value = values[field.slug];
+    const strValue = value == null ? "" : String(value);
+    const err = errors[field.slug];
+    const labelEl = !field.hide_label && field.label ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        htmlFor: `echo-form-${form.id}-${field.slug}`,
+        style: { display: "block", fontSize: 12.5, fontWeight: 600, marginBottom: 4, color: "var(--sk-text-secondary, #4b5563)" },
+        children: [
+          field.label,
+          field.is_required ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--sk-error, #ef4444)" }, children: " *" }) : null
+        ]
+      }
+    ) : null;
+    const id = `echo-form-${form.id}-${field.slug}`;
+    const common = {
+      id,
+      placeholder: field.placeholder || (field.hide_label ? field.label : void 0),
+      "aria-invalid": !!err,
+      style: { ...inputBase, ...err ? { borderColor: "var(--sk-error, #ef4444)" } : {} }
+    };
+    let control;
+    switch (field.field_type) {
+      case "textarea":
+        control = /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ...common,
+            rows: 3,
+            value: strValue,
+            onChange: (e) => setFieldValue(field.slug, e.target.value),
+            style: { ...common.style, resize: "vertical" }
+          }
+        );
+        break;
+      case "select":
+        control = /* @__PURE__ */ jsxRuntime.jsxs("select", { ...common, value: strValue, onChange: (e) => setFieldValue(field.slug, e.target.value), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: field.placeholder || "Select\u2026" }),
+          (field.options || []).map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+        ] });
+        break;
+      case "radio":
+        control = /* @__PURE__ */ jsxRuntime.jsx("div", { role: "radiogroup", style: { display: "flex", flexDirection: "column", gap: 4 }, children: (field.options || []).map((opt) => /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, cursor: "pointer" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "radio",
+              name: id,
+              checked: strValue === opt.value,
+              onChange: () => setFieldValue(field.slug, opt.value)
+            }
+          ),
+          opt.label
+        ] }, opt.value)) });
+        break;
+      case "checkbox":
+        control = /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, cursor: "pointer" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: value === true || value === "true",
+              onChange: (e) => setFieldValue(field.slug, e.target.checked)
+            }
+          ),
+          field.placeholder || field.label
+        ] });
+        break;
+      default: {
+        const typeMap = {
+          email: "email",
+          phone: "tel",
+          tel: "tel",
+          number: "number",
+          date: "date",
+          time: "time",
+          datetime: "datetime-local"
+        };
+        control = /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...common,
+            type: typeMap[field.field_type] || "text",
+            value: strValue,
+            onChange: (e) => setFieldValue(field.slug, e.target.value)
+          }
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 8 }, children: [
+      field.field_type === "checkbox" ? null : labelEl,
+      control,
+      err ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "4px 0 0", fontSize: 11.5, color: "var(--sk-error, #ef4444)" }, children: err }) : null
+    ] }, field.id || field.slug);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      style: cardStyle,
+      onSubmit: (e) => {
+        e.preventDefault();
+        void submit();
+      },
+      children: [
+        form.name ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13.5, fontWeight: 600, marginBottom: 8, color: "var(--sk-text-primary, #111827)" }, children: form.name }) : null,
+        visibleFields.map((field) => {
+          if (field.field_type === "hidden") return null;
+          if (DISPLAY_ONLY.includes(field.field_type)) {
+            return /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 8px", fontSize: 12.5, color: "var(--sk-text-secondary, #4b5563)" }, children: field.label }, field.id || field.slug);
+          }
+          return renderField(field);
+        }),
+        submitError ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", style: { margin: "0 0 8px", fontSize: 12, color: "var(--sk-error, #ef4444)" }, children: submitError }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: isSubmitting,
+            style: {
+              width: "100%",
+              padding: "9px 14px",
+              borderRadius: 8,
+              border: "none",
+              backgroundColor: primaryColor,
+              color: "#fff",
+              fontSize: 13.5,
+              fontWeight: 600,
+              cursor: isSubmitting ? "default" : "pointer",
+              opacity: isSubmitting ? 0.7 : 1
+            },
+            children: isSubmitting ? "Sending\u2026" : form.submit_button_text || "Submit"
+          }
+        )
+      ]
+    }
+  );
+}
+function SuggestActionChip({ action, message, primaryColor, primaryRgb, onSuggest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSuggest(action, message),
+      style: {
+        padding: "6px 12px",
+        borderRadius: 16,
+        border: `1px solid ${primaryColor}`,
+        backgroundColor: alpha(primaryRgb, 0.063),
+        color: primaryColor,
+        fontSize: 13,
+        cursor: "pointer"
+      },
+      children: message
+    }
+  );
+}
+function EchoUiActions({ actions, primaryColor, primaryRgb, onSuggest }) {
+  if (!actions?.length) return null;
+  const chips = actions.filter((a) => a?.type === "suggest_action");
+  const forms = actions.filter((a) => a?.type === "show_form");
+  if (!chips.length && !forms.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 8 }, children: [
+    forms.map((a, i) => {
+      const slug = asString(a.data?.formSlug);
+      if (!slug) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        InlineManagedForm,
+        {
+          slug,
+          prefill: asRecord(a.data?.prefill),
+          primaryColor,
+          primaryRgb
+        },
+        `form-${slug}-${i}`
+      );
+    }),
+    chips.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: chips.map((a, i) => {
+      const message = asString(a.data?.message);
+      const action = asString(a.data?.action);
+      const label = message || action;
+      if (!label) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SuggestActionChip,
+        {
+          action,
+          message: label,
+          primaryColor,
+          primaryRgb,
+          onSuggest
+        },
+        `chip-${i}`
+      );
+    }) }) : null
+  ] });
+}
 function getApiConfig() {
   const isDev = typeof process !== "undefined" && process.env?.NODE_ENV === "development";
   const defaultApiUrl = isDev && process.env?.SONOR_API_URL ? process.env.SONOR_API_URL : "https://api.sonor.io";
@@ -71,8 +325,8 @@ function hexToRgbString(hex, fallback = "59, 130, 246") {
   if (!match) return fallback;
   return `${parseInt(match[1], 16)}, ${parseInt(match[2], 16)}, ${parseInt(match[3], 16)}`;
 }
-function hexAlpha(rgbVar, alpha, fallbackRgb = "59, 130, 246") {
-  return `rgba(var(${rgbVar}, ${fallbackRgb}), ${alpha})`;
+function hexAlpha(rgbVar, alpha2, fallbackRgb = "59, 130, 246") {
+  return `rgba(var(${rgbVar}, ${fallbackRgb}), ${alpha2})`;
 }
 function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, signalUrl: propSignalUrl, suggested_questions: propSuggestedQuestions, assistant_name: propAssistantName, welcome_message: propWelcomeMessage, assistant_avatar: propAssistantAvatar }) {
   const [resolvedProjectId, setResolvedProjectId] = React2.useState(propProjectId || null);
@@ -268,11 +522,29 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       const aiContent = data?.content ?? data?.response ?? data?.message ?? "I'm sorry, I couldn't process that.";
       const suggestions = data?.suggestions;
       const offerHandoff = data?.offerHandoff === true || data?.offer_handoff === true;
+      const uiActions = Array.isArray(data?.uiActions) ? data.uiActions.filter((a) => a && typeof a === "object" && typeof a.type === "string" && a.data && typeof a.data === "object") : void 0;
       const newConversationId = data?.conversationId ?? conversationId;
-      return { content: aiContent, suggestions, offerHandoff, conversationId: newConversationId };
+      return { content: aiContent, suggestions, offerHandoff, uiActions, conversationId: newConversationId };
     },
     [signalUrl, visitorId, fetchSiteContext]
   );
+  const pushEchoReply = React2.useCallback(
+    (reply, probeContent) => {
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: `ai-${Date.now()}`,
+          role: "assistant",
+          content: reply.content,
+          timestamp: /* @__PURE__ */ new Date(),
+          ...reply.suggestions?.length ? { suggestions: reply.suggestions } : {},
+          ...reply.uiActions?.length ? { uiActions: reply.uiActions } : {},
+          ...reply.offerHandoff || userRequestedHandoff(probeContent) ? { offerHandoff: true } : {}
+        }
+      ]);
+    },
+    []
+  );
   const handleSocketMessage = React2.useCallback((data) => {
     switch (data.type || data.event) {
       case "message": {
@@ -475,19 +747,8 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             { id: `u-${Date.now()}`, role: "user", content: pending, timestamp: /* @__PURE__ */ new Date() }
           ]);
           try {
-            const { content: aiContent, suggestions, offerHandoff } = await sendToSignalApi(pending, id);
-            const userWantsHandoff = userRequestedHandoff(pending);
-            setMessages((prev) => [
-              ...prev,
-              {
-                id: `ai-${Date.now()}`,
-                role: "assistant",
-                content: aiContent,
-                timestamp: /* @__PURE__ */ new Date(),
-                ...suggestions?.length ? { suggestions } : {},
-                ...offerHandoff || userWantsHandoff ? { offerHandoff: true } : {}
-              }
-            ]);
+            const reply = await sendToSignalApi(pending, id);
+            pushEchoReply(reply, pending);
           } catch (err) {
             console.error("[ChatWidget] Signal API error:", err);
             setMessages((prev) => [
@@ -530,7 +791,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     return () => {
       if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
     };
-  }, [isOpen, showWelcome, checkingAvailability, showOfflineForm, sessionId, initSession, connectSocket, sendToSignalApi]);
+  }, [isOpen, showWelcome, checkingAvailability, showOfflineForm, sessionId, initSession, connectSocket, sendToSignalApi, pushEchoReply]);
   const handleToggle = React2.useCallback(() => {
     setIsOpen((prev) => !prev);
   }, []);
@@ -622,19 +883,9 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       setIsLoading(true);
       if (widgetConfig?.signal_enabled && !isHandedOff && hasText) {
         try {
-          const { content: aiContent, suggestions, offerHandoff } = await sendToSignalApi(content, sessionId);
+          const reply = await sendToSignalApi(content, sessionId);
           const lastUserContent = messages.filter((m) => m.role === "user").slice(-1)[0]?.content ?? "";
-          setMessages((prev) => [
-            ...prev,
-            {
-              id: `ai-${Date.now()}`,
-              role: "assistant",
-              content: aiContent,
-              timestamp: /* @__PURE__ */ new Date(),
-              ...suggestions?.length ? { suggestions } : {},
-              ...offerHandoff || userRequestedHandoff(lastUserContent) ? { offerHandoff: true } : {}
-            }
-          ]);
+          pushEchoReply(reply, lastUserContent);
         } catch (err) {
           console.error("[ChatWidget] Signal API error:", err);
           setMessages((prev) => [
@@ -670,7 +921,52 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         }
       }, 3e3);
     },
-    [inputValue, isLoading, pendingFiles, uploadWidgetFile, widgetConfig?.signal_enabled, isHandedOff, sendToSignalApi, sessionId]
+    [inputValue, isLoading, pendingFiles, uploadWidgetFile, widgetConfig?.signal_enabled, isHandedOff, sendToSignalApi, sessionId, pushEchoReply]
+  );
+  const sendEchoText = React2.useCallback(
+    async (text) => {
+      const content = text.trim();
+      if (!content || isLoading) return;
+      setMessages((prev) => [
+        ...prev,
+        { id: `user-${Date.now()}`, role: "user", content, timestamp: /* @__PURE__ */ new Date() }
+      ]);
+      setIsLoading(true);
+      try {
+        const reply = await sendToSignalApi(content, sessionId);
+        pushEchoReply(reply, content);
+      } catch (err) {
+        console.error("[ChatWidget] Signal API error:", err);
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: `err-${Date.now()}`,
+            role: "assistant",
+            content: "I apologize, but I encountered an error. Would you like to speak with a team member?",
+            timestamp: /* @__PURE__ */ new Date(),
+            suggestions: ["Talk to a person", "Try again"],
+            offerHandoff: true
+          }
+        ]);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [isLoading, sessionId, sendToSignalApi, pushEchoReply]
+  );
+  const handleSuggestAction = React2.useCallback(
+    (action, message) => {
+      const a = (action || "").trim();
+      if (a && isNavigable(a)) {
+        if (typeof window !== "undefined") {
+          if (/^https?:\/\//i.test(a)) window.open(a, "_blank", "noopener,noreferrer");
+          else window.location.href = a;
+        }
+        return;
+      }
+      if (message?.trim()) void sendEchoText(message);
+    },
+    [sendEchoText]
   );
   const retryFailedSend = React2.useCallback(() => {
     if (!lastFailedSend || !sessionId) return;
@@ -1148,6 +1444,15 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                     },
                     i
                   )) }) : null,
+                  message.uiActions?.length ? /* @__PURE__ */ jsxRuntime.jsx(
+                    EchoUiActions,
+                    {
+                      actions: message.uiActions,
+                      primaryColor,
+                      primaryRgb,
+                      onSuggest: handleSuggestAction
+                    }
+                  ) : null,
                   message.sendFailed && lastFailedSend && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
@@ -2022,5 +2327,5 @@ function getDeviceType() {
 exports.ChatWidget = ChatWidget;
 exports.DesignRenderer = DesignRenderer;
 exports.EngageWidget = EngageWidget;
-//# sourceMappingURL=chunk-SLJJJWMV.js.map
-//# sourceMappingURL=chunk-SLJJJWMV.js.map
+//# sourceMappingURL=chunk-FPU2QPO4.js.map
+//# sourceMappingURL=chunk-FPU2QPO4.js.map