pixelon 0.3.28 → 0.3.29

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,5 @@ export interface ChatComponentProps {
     assistantMessageId?: string;
 }
 export type OnConfirm = (value: unknown, label: string) => void;
+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,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__ */ 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 +1835,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);
     },
@@ -2639,6 +2679,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,
     {
@@ -5098,7 +5154,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,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);
     },
@@ -2660,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,
     {
@@ -5119,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];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelon",
-  "version": "0.3.28",
+  "version": "0.3.29",
   "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": [