pixelon 0.3.28 → 0.3.30

package/dist/components/molecules/chat/StructuredContent/helpers/AnsweredSummary.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { UIComponentData } from './types';
+export declare const AnsweredSummary: React.FC<{
+    component: UIComponentData;
+}>;

package/dist/components/molecules/chat/StructuredContent/helpers/types.d.ts

@@ -1,7 +1,24 @@
 import type { ChatEventBus } from '../../../../../core/eventBus';
+export interface ComponentAction {
+    id: string;
+    label: string;
+    kind?: string;
+    emits_value?: boolean;
+    value?: unknown;
+    intent?: 'primary' | 'secondary' | 'danger';
+}
 export interface UIComponentData {
     type: string;
     props: Record<string, unknown>;
+    status?: string;
+    visibility_policy?: 'hide_on_terminal' | 'keep_visible' | 'collapse';
+    actions?: ComponentAction[];
+    /** SPEC-023: respuesta persistida por el backend al cerrar el componente */
+    selected_values?: Array<{
+        value: unknown;
+        label: string;
+    }>;
+    /** @deprecated contrato legacy (pre SPEC-023); usar status */
     answered?: boolean;
 }
 export interface ChatComponentProps {
@@ -10,4 +27,6 @@ export interface ChatComponentProps {
     assistantMessageId?: string;
 }
 export type OnConfirm = (value: unknown, label: string) => void;
+export declare function getSubmitActionId(component: UIComponentData): string | undefined;
+export declare const TERMINAL_STATUS: Set<string>;
 export declare const DISPLAY_COMPONENTS: Set<string>;

package/dist/components/molecules/chat/StructuredContent/helpers/useComponentInteraction.d.ts

@@ -6,7 +6,7 @@ interface UseComponentInteractionParams {
     assistantMessageId: string;
 }
 export declare function useComponentInteraction({ eventBus, fieldName, componentType, assistantMessageId, }: UseComponentInteractionParams): {
-    emitInteraction: (value: unknown, label: string) => void;
+    emitInteraction: (value: unknown, label: string, actionId?: string) => void;
     isConfirmed: boolean;
 };
 export {};

package/dist/core/eventBus/chatEventBus.d.ts

@@ -26,6 +26,8 @@ export type ChatEvents = {
         label: string;
         componentType: string;
         assistantMessageId: string;
+        /** SPEC-023 T8: id de la Action disparada (opcional) */
+        actionId?: string;
     };
     /** Consumer -> Chat: update the displayed messages */
     messagesUpdated: {

package/dist/index.esm.js

@@ -1618,8 +1618,52 @@ function parseContent(content) {
   return null;
 }
 
+function getSubmitActionId(component) {
+  const actions = component.actions;
+  if (!actions || actions.length === 0) return void 0;
+  return (actions.find((a) => a.kind === "submit") ?? actions[0]).id;
+}
+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__ */ 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__ */ jsx("span", { "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ jsx("span", { children: text })
+      ]
+    }
+  );
+};
+
 const useAppHeight$5 = () => {
   useEffect(() => {
     const setDrawerHeight = () => {
@@ -1796,13 +1840,14 @@ function useComponentInteraction({
 }) {
   const [isConfirmed, setIsConfirmed] = useState(false);
   const emitInteraction = useCallback(
-    (value, label) => {
+    (value, label, actionId) => {
       eventBus?.emit(CHAT_EVENT.COMPONENT_INTERACTION, {
         fieldName,
         value,
         label,
         componentType,
-        assistantMessageId
+        assistantMessageId,
+        actionId
       });
       setIsConfirmed(true);
     },
@@ -1959,7 +2004,7 @@ const SelectWithConfirm = ({
   });
   const handleConfirm = () => {
     if (selected) {
-      emitInteraction(selected.value, selected.label);
+      emitInteraction(selected.value, selected.label, getSubmitActionId(component));
       setIsDrawerOpen(false);
     }
   };
@@ -2162,7 +2207,8 @@ const SelectMultipleWithConfirm = ({
     if (selectedOptions.length > 0) {
       emitInteraction(
         selectedOptions.map((o) => o.value),
-        selectedOptions.map((o) => o.label).join(", ")
+        selectedOptions.map((o) => o.label).join(", "),
+        getSubmitActionId(component)
       );
       setIsDrawerOpen(false);
     }
@@ -2365,7 +2411,7 @@ const InputWithConfirm = ({
         variant: "primary",
         size: "small",
         disabled: !inputValue,
-        onClick: () => emitInteraction(inputValue, inputValue),
+        onClick: () => emitInteraction(inputValue, inputValue, getSubmitActionId(component)),
         children: "Confirmar"
       }
     )
@@ -2508,9 +2554,9 @@ const DateInputWithConfirm = ({
     if (!selectedDate) return;
     const isoValue = formatDateToISO$1(selectedDate);
     const displayValue2 = formatDateDisplay$1(selectedDate, locale, timezone);
-    emitInteraction(isoValue, displayValue2);
+    emitInteraction(isoValue, displayValue2, getSubmitActionId(component));
     setIsOpen(false);
-  }, [selectedDate, emitInteraction, locale, timezone]);
+  }, [selectedDate, emitInteraction, locale, timezone, component]);
   const displayValue = formatDateDisplay$1(selectedDate, locale, timezone);
   const placeholder = component.props.placeholder || "Selecciona una fecha";
   const label = component.props.label || "Selecciona una fecha";
@@ -2639,6 +2685,22 @@ const ConfirmButton = ({
     assistantMessageId
   });
   if (isConfirmed) return null;
+  const actions = component.actions;
+  if (actions && actions.length > 0) {
+    return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: actions.map((a) => /* @__PURE__ */ 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__ */ jsx(
     Button$1,
     {
@@ -2920,16 +2982,16 @@ const TimeInputWithConfirm = ({
     const value24h = componentsTo24h(nowComp);
     const display = formatTimeDisplay(value24h, locale, timezone);
     setConfirmedTime(value24h);
-    emitInteraction(value24h, display);
+    emitInteraction(value24h, display, getSubmitActionId(component));
     setIsOpen(false);
-  }, [locale, timezone, emitInteraction]);
+  }, [locale, timezone, emitInteraction, component]);
   const handleConfirm = useCallback(() => {
     const value24h = componentsTo24h(tempComponents);
     const display = formatTimeDisplay(value24h, locale, timezone);
     setConfirmedTime(value24h);
-    emitInteraction(value24h, display);
+    emitInteraction(value24h, display, getSubmitActionId(component));
     setIsOpen(false);
-  }, [tempComponents, locale, timezone, emitInteraction]);
+  }, [tempComponents, locale, timezone, emitInteraction, component]);
   const displayValue = confirmedTime ? formatTimeDisplay(confirmedTime, locale, timezone) : "";
   const placeholder = component.props.placeholder || "Selecciona una hora";
   const label = component.props.label || "Selecciona una hora";
@@ -4998,7 +5060,8 @@ const CarouselDisplay = ({
         actions.selection.toggle(item.id);
         emitInteraction(
           [{ value: item.id, label: item.title || item.id }],
-          item.title || item.id
+          item.title || item.id,
+          getSubmitActionId(component)
         );
         return;
       }
@@ -5006,7 +5069,7 @@ const CarouselDisplay = ({
         actions.selection.toggle(item.id);
       }
     },
-    [selectionMode, disabled, isConfirmed, actions, emitInteraction]
+    [selectionMode, disabled, isConfirmed, actions, emitInteraction, component]
   );
   const handleRemove = useCallback(
     (item) => {
@@ -5021,14 +5084,14 @@ const CarouselDisplay = ({
       const selected = items.filter((i) => selectedIds.includes(i.id));
       const value = selected.map((i) => ({ value: i.id, label: i.title || i.id }));
       const label = selected.map((i) => i.title || i.id).join(", ");
-      emitInteraction(value, label);
+      emitInteraction(value, label, getSubmitActionId(component));
     }
     if (selectionMode === "removable") {
       const value = items.map((i) => ({ value: i.id, label: i.title || i.id }));
       const label = items.map((i) => i.title || i.id).join(", ");
-      emitInteraction(value, label);
+      emitInteraction(value, label, getSubmitActionId(component));
     }
-  }, [selectionMode, disabled, isConfirmed, items, selectedIds, emitInteraction]);
+  }, [selectionMode, disabled, isConfirmed, items, selectedIds, emitInteraction, component]);
   const confirmDisabled = useMemo(() => {
     if (selectionMode === "multiple") return selectedIds.length === 0;
     if (selectionMode === "removable") {
@@ -5098,7 +5161,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__ */ jsx(AnsweredSummary, { component });
+      }
+    }
+  } else if (component.answered && !DISPLAY_COMPONENTS.has(component.type)) {
     return null;
   }
   const Component = COMPONENT_MAP[component.type];

package/dist/index.js

@@ -1639,8 +1639,52 @@ function parseContent(content) {
   return null;
 }
 
+function getSubmitActionId(component) {
+  const actions = component.actions;
+  if (!actions || actions.length === 0) return void 0;
+  return (actions.find((a) => a.kind === "submit") ?? actions[0]).id;
+}
+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 +1861,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);
     },
@@ -1980,7 +2025,7 @@ const SelectWithConfirm = ({
   });
   const handleConfirm = () => {
     if (selected) {
-      emitInteraction(selected.value, selected.label);
+      emitInteraction(selected.value, selected.label, getSubmitActionId(component));
       setIsDrawerOpen(false);
     }
   };
@@ -2183,7 +2228,8 @@ const SelectMultipleWithConfirm = ({
     if (selectedOptions.length > 0) {
       emitInteraction(
         selectedOptions.map((o) => o.value),
-        selectedOptions.map((o) => o.label).join(", ")
+        selectedOptions.map((o) => o.label).join(", "),
+        getSubmitActionId(component)
       );
       setIsDrawerOpen(false);
     }
@@ -2386,7 +2432,7 @@ const InputWithConfirm = ({
         variant: "primary",
         size: "small",
         disabled: !inputValue,
-        onClick: () => emitInteraction(inputValue, inputValue),
+        onClick: () => emitInteraction(inputValue, inputValue, getSubmitActionId(component)),
         children: "Confirmar"
       }
     )
@@ -2529,9 +2575,9 @@ const DateInputWithConfirm = ({
     if (!selectedDate) return;
     const isoValue = formatDateToISO$1(selectedDate);
     const displayValue2 = formatDateDisplay$1(selectedDate, locale, timezone);
-    emitInteraction(isoValue, displayValue2);
+    emitInteraction(isoValue, displayValue2, getSubmitActionId(component));
     setIsOpen(false);
-  }, [selectedDate, emitInteraction, locale, timezone]);
+  }, [selectedDate, emitInteraction, locale, timezone, component]);
   const displayValue = formatDateDisplay$1(selectedDate, locale, timezone);
   const placeholder = component.props.placeholder || "Selecciona una fecha";
   const label = component.props.label || "Selecciona una fecha";
@@ -2660,6 +2706,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,
     {
@@ -2941,16 +3003,16 @@ const TimeInputWithConfirm = ({
     const value24h = componentsTo24h(nowComp);
     const display = formatTimeDisplay(value24h, locale, timezone);
     setConfirmedTime(value24h);
-    emitInteraction(value24h, display);
+    emitInteraction(value24h, display, getSubmitActionId(component));
     setIsOpen(false);
-  }, [locale, timezone, emitInteraction]);
+  }, [locale, timezone, emitInteraction, component]);
   const handleConfirm = React.useCallback(() => {
     const value24h = componentsTo24h(tempComponents);
     const display = formatTimeDisplay(value24h, locale, timezone);
     setConfirmedTime(value24h);
-    emitInteraction(value24h, display);
+    emitInteraction(value24h, display, getSubmitActionId(component));
     setIsOpen(false);
-  }, [tempComponents, locale, timezone, emitInteraction]);
+  }, [tempComponents, locale, timezone, emitInteraction, component]);
   const displayValue = confirmedTime ? formatTimeDisplay(confirmedTime, locale, timezone) : "";
   const placeholder = component.props.placeholder || "Selecciona una hora";
   const label = component.props.label || "Selecciona una hora";
@@ -5019,7 +5081,8 @@ const CarouselDisplay = ({
         actions.selection.toggle(item.id);
         emitInteraction(
           [{ value: item.id, label: item.title || item.id }],
-          item.title || item.id
+          item.title || item.id,
+          getSubmitActionId(component)
         );
         return;
       }
@@ -5027,7 +5090,7 @@ const CarouselDisplay = ({
         actions.selection.toggle(item.id);
       }
     },
-    [selectionMode, disabled, isConfirmed, actions, emitInteraction]
+    [selectionMode, disabled, isConfirmed, actions, emitInteraction, component]
   );
   const handleRemove = React.useCallback(
     (item) => {
@@ -5042,14 +5105,14 @@ const CarouselDisplay = ({
       const selected = items.filter((i) => selectedIds.includes(i.id));
       const value = selected.map((i) => ({ value: i.id, label: i.title || i.id }));
       const label = selected.map((i) => i.title || i.id).join(", ");
-      emitInteraction(value, label);
+      emitInteraction(value, label, getSubmitActionId(component));
     }
     if (selectionMode === "removable") {
       const value = items.map((i) => ({ value: i.id, label: i.title || i.id }));
       const label = items.map((i) => i.title || i.id).join(", ");
-      emitInteraction(value, label);
+      emitInteraction(value, label, getSubmitActionId(component));
     }
-  }, [selectionMode, disabled, isConfirmed, items, selectedIds, emitInteraction]);
+  }, [selectionMode, disabled, isConfirmed, items, selectedIds, emitInteraction, component]);
   const confirmDisabled = React.useMemo(() => {
     if (selectionMode === "multiple") return selectedIds.length === 0;
     if (selectionMode === "removable") {
@@ -5119,7 +5182,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];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelon",
-  "version": "0.3.28",
+  "version": "0.3.30",
   "description": "Design system de la marca goluti",
   "type": "module",
   "main": "dist/index.js",
@@ -24,6 +24,8 @@
     "test:run": "vitest run",
     "mobile": "npx storybook dev -p 6006",
     "get:ip": "ipconfig getifaddr en0",
+    "gen:ux-types": "node scripts/gen-ux-types.mjs",
+    "gen:ux-types:check": "node scripts/gen-ux-types.mjs --check",
     "prepublishOnly": "npm run build:lib"
   },
   "keywords": [