pixelon 0.3.27 → 0.3.29

package/dist/index.js

@@ -1639,8 +1639,47 @@ function parseContent(content) {
   return null;
 }
 
+const TERMINAL_STATUS = /* @__PURE__ */ new Set(["answered", "cancelled", "expired"]);
 const DISPLAY_COMPONENTS = /* @__PURE__ */ new Set(["card", "badge", "reactive_form", "carousel"]);
 
+const AnsweredSummary = ({ component }) => {
+  const status = component.status;
+  const values = component.selected_values ?? [];
+  const labels = values.map((v) => v.label).filter(Boolean).join(", ");
+  let icon = "\u2713";
+  let text = labels || "Respondido";
+  let color = "#3a8a3a";
+  if (status === "cancelled") {
+    icon = "\u2715";
+    text = "Cancelado";
+    color = "#999";
+  } else if (status === "expired") {
+    icon = "\u231B";
+    text = "Expir\xF3";
+    color = "#b58a00";
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "6px 12px",
+        borderRadius: "999px",
+        background: "rgba(0,0,0,0.04)",
+        color,
+        fontSize: "0.875rem",
+        fontWeight: 500
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: text })
+      ]
+    }
+  );
+};
+
 const useAppHeight$5 = () => {
   React.useEffect(() => {
     const setDrawerHeight = () => {
@@ -1817,13 +1856,14 @@ function useComponentInteraction({
 }) {
   const [isConfirmed, setIsConfirmed] = React.useState(false);
   const emitInteraction = React.useCallback(
-    (value, label) => {
+    (value, label, actionId) => {
       eventBus?.emit(CHAT_EVENT.COMPONENT_INTERACTION, {
         fieldName,
         value,
         label,
         componentType,
-        assistantMessageId
+        assistantMessageId,
+        actionId
       });
       setIsConfirmed(true);
     },
@@ -1832,6 +1872,114 @@ function useComponentInteraction({
   return { emitInteraction, isConfirmed };
 }
 
+const FETCH_TIMEOUT_MS = 12e4;
+function fetchViaEventBus(eventBus, service, url, method, body) {
+  const requestId = globalThis.crypto?.randomUUID?.() ?? "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    return (c === "x" ? r : r & 3 | 8).toString(16);
+  });
+  return new Promise((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      unsubscribe();
+      reject(new Error(`Timeout: no response for ${url} after ${FETCH_TIMEOUT_MS}ms`));
+    }, FETCH_TIMEOUT_MS);
+    const unsubscribe = eventBus.on(CHAT_EVENT.FETCH_RESPONSE, (response) => {
+      if (response.requestId !== requestId) return;
+      clearTimeout(timeoutId);
+      unsubscribe();
+      if (response.httpError) {
+        reject(new Error(response.httpError));
+      } else {
+        resolve(response.data);
+      }
+    });
+    eventBus.emit(CHAT_EVENT.FETCH_REQUEST, {
+      requestId,
+      service,
+      url,
+      method,
+      ...body ? { body } : {}
+    });
+  });
+}
+
+function mapResponseToOptions(data, endpoint) {
+  let items = [];
+  if (endpoint.response_path) {
+    const parts = endpoint.response_path.split(".");
+    let current = data;
+    for (const part of parts) {
+      if (current != null && typeof current === "object") {
+        current = current[part];
+      } else {
+        return [];
+      }
+    }
+    items = Array.isArray(current) ? current : [];
+  } else if (Array.isArray(data)) {
+    items = data;
+  } else {
+    return [];
+  }
+  return items.filter((item) => item != null && typeof item === "object").map((item) => ({
+    value: String(item[endpoint.value_field] ?? ""),
+    label: String(item[endpoint.label_field] ?? "")
+  }));
+}
+
+function normalizeBody(body) {
+  if (!body) return void 0;
+  const normalized = { ...body };
+  for (const [key, val] of Object.entries(normalized)) {
+    if (/s_id$/.test(key) && typeof val === "string") {
+      normalized[key] = [val];
+    }
+  }
+  return normalized;
+}
+function useSelectEndpoint(endpoint, eventBus) {
+  const [options, setOptions] = React.useState([]);
+  const [status, setStatus] = React.useState(endpoint ? "loading" : "idle");
+  const [errorMessage, setErrorMessage] = React.useState("");
+  const fetchedRef = React.useRef(false);
+  const endpointRef = React.useRef(endpoint);
+  endpointRef.current = endpoint;
+  const doFetch = React.useCallback(async () => {
+    const ep = endpointRef.current;
+    if (!ep || fetchedRef.current) return;
+    fetchedRef.current = true;
+    if (!eventBus) {
+      setOptions([
+        { value: "mock-1", label: "Mock Option 1" },
+        { value: "mock-2", label: "Mock Option 2" }
+      ]);
+      setStatus("idle");
+      return;
+    }
+    try {
+      const body = normalizeBody(ep.body);
+      if (ep.method.toUpperCase() === "POST" && !body) {
+        setErrorMessage("Faltan par\xE1metros para cargar opciones");
+        setStatus("error");
+        return;
+      }
+      const data = await fetchViaEventBus(eventBus, ep.service, ep.url, ep.method, body);
+      const mapped = mapResponseToOptions(data, ep);
+      setOptions(mapped);
+      setStatus("idle");
+    } catch (err) {
+      setErrorMessage(err instanceof Error ? err.message : "Error al cargar opciones");
+      setStatus("error");
+    }
+  }, [eventBus]);
+  React.useEffect(() => {
+    if (endpoint && !fetchedRef.current) {
+      doFetch();
+    }
+  }, [endpoint, doFetch]);
+  return { options, status, errorMessage };
+}
+
 const MOBILE_BREAKPOINT$4 = 640;
 const useIsMobile$5 = () => {
   const [isMobile, setIsMobile] = React.useState(
@@ -1855,10 +2003,15 @@ const SelectWithConfirm = ({
   const [searchValue, setSearchValue] = React.useState("");
   const searchInputRef = React.useRef(null);
   const isMobile = useIsMobile$5();
-  const { field_name, value, ...componentProps } = component.props;
-  const options = componentProps.options || [];
+  const { field_name, value, endpoint: endpointProp, ...componentProps } = component.props;
+  const endpoint = endpointProp;
+  const { options: endpointOptions, status: endpointStatus, errorMessage } = useSelectEndpoint(endpoint, eventBus);
+  const staticOptions = componentProps.options || [];
+  const options = endpoint ? endpointOptions : staticOptions;
   const placeholder = componentProps.placeholder || "Seleccionar...";
   const label = componentProps.label || "";
+  const isLoading = endpointStatus === "loading";
+  const isError = endpointStatus === "error";
   const { emitInteraction, isConfirmed } = useComponentInteraction({
     eventBus,
     fieldName: component.props.field_name,
@@ -1878,6 +2031,18 @@ const SelectWithConfirm = ({
     }
   }, [isDrawerOpen]);
   if (isConfirmed) return null;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-select-with-confirm", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "px-chat-select-with-confirm__label", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-select-with-confirm__loading", children: "Cargando opciones..." })
+    ] });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-select-with-confirm", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "px-chat-select-with-confirm__label", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-select-with-confirm__error", children: errorMessage })
+    ] });
+  }
   if (isMobile) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-select-with-confirm", children: [
       label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "px-chat-select-with-confirm__label", children: label }),
@@ -1997,8 +2162,8 @@ const SelectWithConfirm = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Select$2,
       {
-        options: [],
         ...componentProps,
+        options,
         variant: "chat",
         mode: "single",
         showSearch: true,
@@ -2535,6 +2700,22 @@ const ConfirmButton = ({
     assistantMessageId
   });
   if (isConfirmed) return null;
+  const actions = component.actions;
+  if (actions && actions.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: actions.map((a) => /* @__PURE__ */ jsxRuntime.jsx(
+      Button$1,
+      {
+        variant: a.intent === "primary" ? "primary" : "secondary",
+        onClick: () => emitInteraction(
+          a.emits_value ? component.props.value : a.value,
+          a.label,
+          a.id
+        ),
+        children: a.label
+      },
+      a.id
+    )) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button$1,
     {
@@ -3158,7 +3339,7 @@ const SelectField$1 = ({ field, value, disabled, loading, options, onChange, dra
             ),
             searchValue && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-chat-select-drawer__search-clear", onClick: () => setSearchValue(""), children: /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.CLOSE, size: "small" }) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "px-chat-select-drawer__options", role: "listbox", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-chat-select-drawer__empty", children: "No hay opciones disponibles" }) : filteredOptions.map((opt) => {
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "px-chat-select-drawer__options", role: "listbox", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-chat-select-drawer__empty", children: field.empty_message || "No hay opciones disponibles" }) : filteredOptions.map((opt) => {
             const isSelected = opt.value === value;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "li",
@@ -3279,7 +3460,7 @@ const SelectMultipleField = ({ field, value, disabled, loading, options, onChang
             ),
             searchValue && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-chat-select-drawer__search-clear", onClick: () => setSearchValue(""), children: /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.CLOSE, size: "small" }) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "px-chat-select-drawer__options", role: "listbox", "aria-multiselectable": "true", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-chat-select-drawer__empty", children: "No hay opciones disponibles" }) : filteredOptions.map((opt) => {
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "px-chat-select-drawer__options", role: "listbox", "aria-multiselectable": "true", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-chat-select-drawer__empty", children: field.empty_message || "No hay opciones disponibles" }) : filteredOptions.map((opt) => {
             const isChecked = selected.includes(opt.value);
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "li",
@@ -3377,6 +3558,200 @@ const DateField = ({ field, value, disabled, onChange, drawerPlacement }) => {
   ] });
 };
 
+const PREFIX$3 = "px-chat-currency";
+const ChatCurrencyDisplay = ({
+  value,
+  currencyCode,
+  currencySymbol,
+  showCode = true,
+  size = "md",
+  className
+}) => {
+  const { locale, currency: configCurrency } = useChatConfig();
+  const code = currencyCode || configCurrency?.code || "COP";
+  const symbol = currencySymbol || configCurrency?.symbol || "$";
+  const formatted = React.useMemo(() => {
+    if (value === null || value === void 0 || value === "") return null;
+    const num = typeof value === "string" ? parseFloat(value) : value;
+    if (isNaN(num)) return null;
+    try {
+      return new Intl.NumberFormat(locale || "es-CO", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      }).format(num);
+    } catch {
+      return num.toFixed(2);
+    }
+  }, [value, locale]);
+  if (!formatted) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${PREFIX$3} ${PREFIX$3}--empty`, children: "-" });
+  const classes = [PREFIX$3, `${PREFIX$3}--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classes, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${PREFIX$3}__symbol`, children: symbol }),
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${PREFIX$3}__value`, children: formatted }),
+    showCode && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${PREFIX$3}__code`, children: code })
+    ] })
+  ] });
+};
+ChatCurrencyDisplay.displayName = "ChatCurrencyDisplay";
+
+function resolveVariable(template, formValues, fieldStates) {
+  if (!template.startsWith("$")) return template;
+  const withoutDollar = template.slice(1);
+  const dotIndex = withoutDollar.indexOf(".");
+  const fieldName = dotIndex >= 0 ? withoutDollar.slice(0, dotIndex) : withoutDollar;
+  const prop = dotIndex >= 0 ? withoutDollar.slice(dotIndex + 1) : null;
+  const value = formValues[fieldName];
+  const state = fieldStates[fieldName];
+  if (!prop) return value;
+  if (prop === "label" && state) {
+    return state.label || "";
+  }
+  if (prop === "labels" && state && Array.isArray(value)) {
+    return value.map((v) => {
+      const opt = state.options.find((o) => o.value === v);
+      return opt?.label || v;
+    }).join(", ");
+  }
+  if (state) {
+    const selectedOpt = state.options.find((o) => o.value === value);
+    if (selectedOpt && prop in selectedOpt) {
+      return selectedOpt[prop];
+    }
+  }
+  return "";
+}
+function resolveBody(obj, formValues, fieldStates) {
+  if (typeof obj === "string") return resolveVariable(obj, formValues, fieldStates);
+  if (Array.isArray(obj)) return obj.map((item) => resolveBody(item, formValues, fieldStates));
+  if (obj !== null && typeof obj === "object") {
+    const resolved = {};
+    for (const [key, value] of Object.entries(obj)) {
+      resolved[key] = resolveBody(value, formValues, fieldStates);
+    }
+    return resolved;
+  }
+  return obj;
+}
+function resolveParams(params, formValues, fieldStates) {
+  const resolved = {};
+  for (const [key, template] of Object.entries(params)) {
+    resolved[key] = resolveVariable(template, formValues, fieldStates);
+  }
+  return resolved;
+}
+function resolveSummaryRows(rows, formValues, fieldStates) {
+  return rows.map((row) => ({
+    label: row.label,
+    value: String(resolveVariable(row.value, formValues, fieldStates) ?? "")
+  }));
+}
+
+const CostSummaryField = ({
+  field,
+  values,
+  fieldStates,
+  onCostResolved,
+  eventBus,
+  onCancel
+}) => {
+  const [totalCost, setTotalCost] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState("");
+  const selectedItems = React.useMemo(() => {
+    if (!field.items_from) return [];
+    const { source_field, label_key, value_key } = field.items_from;
+    const sourceState = fieldStates[source_field];
+    const selectedValues = values[source_field];
+    if (!sourceState?.options || !selectedValues) return [];
+    const selectedArr = Array.isArray(selectedValues) ? selectedValues : [selectedValues];
+    return sourceState.options.filter((opt) => selectedArr.includes(opt.value)).map((opt) => ({
+      label: String(opt[label_key] || opt.label || ""),
+      value: Number(opt[value_key] || 0)
+    }));
+  }, [field.items_from, fieldStates, values]);
+  const fetchedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!field.endpoint || !eventBus || fetchedRef.current) {
+      if (!field.endpoint || !eventBus) setLoading(false);
+      return;
+    }
+    fetchedRef.current = true;
+    const body = resolveBody(field.endpoint.body || {}, values, fieldStates);
+    setLoading(true);
+    setError("");
+    fetchViaEventBus(eventBus, field.endpoint.service, field.endpoint.url, field.endpoint.method, body).then((data) => {
+      const resp = data;
+      if (resp?.notification_type && String(resp.notification_type).toUpperCase() !== "SUCCESS") {
+        setError(String(resp.message || "Error al calcular costo"));
+        return;
+      }
+      const responseData = resp?.response;
+      const totalField = field.endpoint.total_field || "total_cost";
+      const cost = Number(responseData?.[totalField] ?? resp?.[totalField] ?? 0);
+      setTotalCost(cost);
+      if (onCostResolved) {
+        try {
+          const formatted = new Intl.NumberFormat("es-CO", { style: "currency", currency: "COP" }).format(cost);
+          onCostResolved(field.name, formatted);
+        } catch {
+          onCostResolved(field.name, `$${cost}`);
+        }
+      }
+    }).catch((err) => {
+      setError(err instanceof Error ? err.message : "Error al calcular costo");
+    }).finally(() => setLoading(false));
+  }, [field.endpoint, eventBus]);
+  const handleCancel = () => {
+    if (field.on_cancel && eventBus) {
+      if (field.on_cancel.type === "system_message") {
+        eventBus.emit(CHAT_EVENT.FORM_TRACE, {
+          chatId: "",
+          formTitle: "",
+          source: "reactive_form",
+          phase: "cancel",
+          data: { message: field.on_cancel.message },
+          service: "",
+          url: "",
+          method: ""
+        });
+      }
+    }
+    onCancel();
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__cost-summary px-chat-rf__cost-summary--loading", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__cost-summary__title", children: field.label || "Resumen de costos" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__cost-summary__loader", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__spinner" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Calculando costo..." })
+      ] })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__cost-summary px-chat-rf__cost-summary--error", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__cost-summary__title", children: field.label || "Resumen de costos" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__cost-summary__error", children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-chat-rf__btn px-chat-rf__btn--secondary", onClick: handleCancel, children: "Cancelar" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__cost-summary", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__cost-summary__title", children: field.label || "Resumen de costos" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__cost-summary__items", children: selectedItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__cost-summary__item", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__cost-summary__item-label", children: item.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(ChatCurrencyDisplay, { value: item.value, size: "sm" })
+    ] }, i)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__cost-summary__divider" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__cost-summary__total", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__cost-summary__total-label", children: "Total" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ChatCurrencyDisplay, { value: totalCost, size: "lg" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__cost-summary__actions", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-chat-rf__btn px-chat-rf__btn--secondary", onClick: handleCancel, children: "Cancelar" }) })
+  ] });
+};
+
 const checkIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 const calendarIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "3", width: "12", height: "11", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
@@ -3392,7 +3767,7 @@ const formIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "
 ] });
 const chevronDown = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 const chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 3L7.5 6L4.5 9", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
-const ReactiveFormView = ({ title, trigger, steps, fields, submit, summary, form, drawerPlacement = "bottom" }) => {
+const ReactiveFormView = ({ title, trigger, steps, fields, submit, summary, form, drawerPlacement = "bottom", eventBus }) => {
   const {
     formStatus,
     setFormStatus,
@@ -3408,6 +3783,7 @@ const ReactiveFormView = ({ title, trigger, steps, fields, submit, summary, form
     handleNext,
     handleBack,
     handleSubmit,
+    isSubmitting,
     getDependencies,
     allDepsResolved,
     resolveSummaryRows
@@ -3467,11 +3843,25 @@ const ReactiveFormView = ({ title, trigger, steps, fields, submit, summary, form
   const renderSummaryActions = () => {
     const actions = summary.actions;
     if (!actions || actions.length === 0) {
-      return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-chat-rf__btn px-chat-rf__btn--primary px-chat-rf__btn--full", onClick: handleSubmit, children: submit.label });
+      return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-chat-rf__btn px-chat-rf__btn--primary px-chat-rf__btn--full", onClick: handleSubmit, disabled: isSubmitting, children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__spinner" }) : submit.label });
     }
     const actionHandlers = {
       submit: handleSubmit,
-      close: () => setFormStatus("closed"),
+      close: () => {
+        if (eventBus) {
+          eventBus.emit(CHAT_EVENT.FORM_TRACE, {
+            chatId: "",
+            formTitle: "",
+            source: "reactive_form",
+            phase: "cancel",
+            data: { message: "El usuario cancel\xF3 el agendamiento de la cita." },
+            service: "",
+            url: "",
+            method: ""
+          });
+        }
+        setFormStatus("closed");
+      },
       back: handleBack
     };
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__nav", children: actions.map((act, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -3481,7 +3871,8 @@ const ReactiveFormView = ({ title, trigger, steps, fields, submit, summary, form
         className: `px-chat-rf__btn px-chat-rf__btn--${act.variant || "primary"}`,
         onClick: actionHandlers[act.action] || (() => {
         }),
-        children: act.label
+        disabled: act.action === "submit" && isSubmitting,
+        children: act.action === "submit" && isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__spinner" }) : act.label
       },
       i
     )) });
@@ -3514,8 +3905,15 @@ const ReactiveFormView = ({ title, trigger, steps, fields, submit, summary, form
           )
         ] }),
         prevStep.fields.map((fname) => {
-          const fs = fieldStates[fname];
           const fld = fields.find((f) => f.name === fname);
+          if (fld?.type === "cost_summary") {
+            const costLabel = fieldStates[fname]?.label;
+            return costLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__completed-field", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__completed-field-label", children: "Total:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__completed-field-value", children: costLabel })
+            ] }, fname) : null;
+          }
+          const fs = fieldStates[fname];
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__completed-field", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-chat-rf__completed-field-label", children: [
               fld?.label,
@@ -3528,6 +3926,20 @@ const ReactiveFormView = ({ title, trigger, steps, fields, submit, summary, form
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__active-step", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__step-title", children: step.title }),
         stepFields.map((field) => {
+          if (field.type === "cost_summary") {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              CostSummaryField,
+              {
+                field,
+                values,
+                fieldStates,
+                eventBus,
+                onCancel: () => setFormStatus("closed"),
+                onCostResolved: (name, label) => handleFieldChange(name, label, label)
+              },
+              field.name
+            );
+          }
           const deps = getDependencies(field);
           const isDisabled = !allDepsResolved(deps, values);
           return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3623,89 +4035,6 @@ function buildInitialValues(fields) {
   return values;
 }
 
-function resolveVariable(template, formValues, fieldStates) {
-  if (!template.startsWith("$")) return template;
-  const withoutDollar = template.slice(1);
-  const dotIndex = withoutDollar.indexOf(".");
-  const fieldName = dotIndex >= 0 ? withoutDollar.slice(0, dotIndex) : withoutDollar;
-  const prop = dotIndex >= 0 ? withoutDollar.slice(dotIndex + 1) : null;
-  const value = formValues[fieldName];
-  const state = fieldStates[fieldName];
-  if (!prop) return value;
-  if (prop === "label" && state) {
-    return state.label || "";
-  }
-  if (prop === "labels" && state && Array.isArray(value)) {
-    return value.map((v) => {
-      const opt = state.options.find((o) => o.value === v);
-      return opt?.label || v;
-    }).join(", ");
-  }
-  if (state) {
-    const selectedOpt = state.options.find((o) => o.value === value);
-    if (selectedOpt && prop in selectedOpt) {
-      return selectedOpt[prop];
-    }
-  }
-  return "";
-}
-function resolveBody(obj, formValues, fieldStates) {
-  if (typeof obj === "string") return resolveVariable(obj, formValues, fieldStates);
-  if (Array.isArray(obj)) return obj.map((item) => resolveBody(item, formValues, fieldStates));
-  if (obj !== null && typeof obj === "object") {
-    const resolved = {};
-    for (const [key, value] of Object.entries(obj)) {
-      resolved[key] = resolveBody(value, formValues, fieldStates);
-    }
-    return resolved;
-  }
-  return obj;
-}
-function resolveParams(params, formValues, fieldStates) {
-  const resolved = {};
-  for (const [key, template] of Object.entries(params)) {
-    resolved[key] = resolveVariable(template, formValues, fieldStates);
-  }
-  return resolved;
-}
-function resolveSummaryRows(rows, formValues, fieldStates) {
-  return rows.map((row) => ({
-    label: row.label,
-    value: String(resolveVariable(row.value, formValues, fieldStates) ?? "")
-  }));
-}
-
-const FETCH_TIMEOUT_MS = 12e4;
-function fetchViaEventBus(eventBus, service, url, method, body) {
-  const requestId = globalThis.crypto?.randomUUID?.() ?? "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-    const r = Math.random() * 16 | 0;
-    return (c === "x" ? r : r & 3 | 8).toString(16);
-  });
-  return new Promise((resolve, reject) => {
-    const timeoutId = setTimeout(() => {
-      unsubscribe();
-      reject(new Error(`Timeout: no response for ${url} after ${FETCH_TIMEOUT_MS}ms`));
-    }, FETCH_TIMEOUT_MS);
-    const unsubscribe = eventBus.on(CHAT_EVENT.FETCH_RESPONSE, (response) => {
-      if (response.requestId !== requestId) return;
-      clearTimeout(timeoutId);
-      unsubscribe();
-      if (response.httpError) {
-        reject(new Error(response.httpError));
-      } else {
-        resolve(response.data);
-      }
-    });
-    eventBus.emit(CHAT_EVENT.FETCH_REQUEST, {
-      requestId,
-      service,
-      url,
-      method,
-      ...body ? { body } : {}
-    });
-  });
-}
-
 function formatTime$1(value, timezone) {
   try {
     const d = new Date(value);
@@ -3713,7 +4042,7 @@ function formatTime$1(value, timezone) {
     return d.toLocaleTimeString([], {
       hour: "2-digit",
       minute: "2-digit",
-      hour12: false,
+      hour12: true,
       ...timezone ? { timeZone: timezone } : {}
     });
   } catch {
@@ -4075,7 +4404,10 @@ function useReactiveForm(props) {
   };
   const handleBack = () => setCurrentStep((s) => s - 1);
   const [submitMessage, setSubmitMessage] = React.useState("");
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
   const handleSubmit = async () => {
+    if (isSubmitting) return;
+    setIsSubmitting(true);
     const resolvedPayload = resolveBody(submit.payload_map, values, fieldStates);
     if (eventBus) {
       try {
@@ -4098,7 +4430,8 @@ function useReactiveForm(props) {
           submitUrl: submit.url,
           result: data,
           formValues: values,
-          formLabels
+          formLabels,
+          onSuccess: submit.on_success
         });
         if (notificationType === "SUCCESS") {
           setSubmitMessage(message || "Completado");
@@ -4114,6 +4447,7 @@ function useReactiveForm(props) {
         const message = err instanceof Error ? err.message : "Error al enviar formulario";
         setSubmitMessage(message);
         setFormStatus("error");
+        setIsSubmitting(false);
       }
     } else {
       console.log("[ReactiveForm] Submit:", values);
@@ -4142,6 +4476,7 @@ function useReactiveForm(props) {
     handleNext,
     handleBack,
     handleSubmit,
+    isSubmitting,
     getDependencies,
     allDepsResolved,
     resolveSummaryRows: resolveRows
@@ -4173,7 +4508,8 @@ const ReactiveForm = ({ component, eventBus }) => {
     {
       ...props,
       form,
-      drawerPlacement: isMobile ? "bottom" : "right"
+      drawerPlacement: isMobile ? "bottom" : "right",
+      eventBus
     }
   );
 };
@@ -4839,7 +5175,15 @@ const COMPONENT_MAP = {
 };
 function renderComponent(props) {
   const { component } = props;
-  if (component.answered && !DISPLAY_COMPONENTS.has(component.type)) {
+  if (component.status) {
+    if (TERMINAL_STATUS.has(component.status)) {
+      const policy = component.visibility_policy ?? "hide_on_terminal";
+      if (policy === "hide_on_terminal") return null;
+      if (component.selected_values && component.selected_values.length > 0) {
+        return /* @__PURE__ */ jsxRuntime.jsx(AnsweredSummary, { component });
+      }
+    }
+  } else if (component.answered && !DISPLAY_COMPONENTS.has(component.type)) {
     return null;
   }
   const Component = COMPONENT_MAP[component.type];