pixelon 0.3.29 → 0.3.31

package/dist/components/molecules/chat/StructuredContent/components/ActionMenu/ActionMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ChatComponentProps } from '../../helpers/types';
+export declare const ActionMenu: React.FC<ChatComponentProps>;

package/dist/components/molecules/chat/StructuredContent/components/index.d.ts

@@ -9,3 +9,4 @@ export { BadgeDisplay } from './BadgeDisplay/BadgeDisplay';
 export { TimeInputWithConfirm } from './TimeInputWithConfirm/TimeInputWithConfirm';
 export { ReactiveForm } from './ReactiveForm/ReactiveForm';
 export { CarouselDisplay } from './CarouselDisplay/CarouselDisplay';
+export { ActionMenu } from './ActionMenu/ActionMenu';

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

@@ -27,5 +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/index.esm.js

@@ -1618,6 +1618,11 @@ 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"]);
 
@@ -1999,7 +2004,7 @@ const SelectWithConfirm = ({
   });
   const handleConfirm = () => {
     if (selected) {
-      emitInteraction(selected.value, selected.label);
+      emitInteraction(selected.value, selected.label, getSubmitActionId(component));
       setIsDrawerOpen(false);
     }
   };
@@ -2202,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);
     }
@@ -2405,7 +2411,7 @@ const InputWithConfirm = ({
         variant: "primary",
         size: "small",
         disabled: !inputValue,
-        onClick: () => emitInteraction(inputValue, inputValue),
+        onClick: () => emitInteraction(inputValue, inputValue, getSubmitActionId(component)),
         children: "Confirmar"
       }
     )
@@ -2548,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";
@@ -2976,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";
@@ -5054,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;
       }
@@ -5062,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) => {
@@ -5077,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") {
@@ -5140,6 +5147,42 @@ const CarouselDisplay = ({
   ] });
 };
 
+const ActionMenu = ({
+  component,
+  eventBus,
+  assistantMessageId = ""
+}) => {
+  const { emitInteraction, isConfirmed } = useComponentInteraction({
+    eventBus,
+    fieldName: component.props.field_name || "action_menu",
+    componentType: component.type,
+    assistantMessageId
+  });
+  if (isConfirmed) return null;
+  const label = component.props.label;
+  const actions = component.actions ?? [];
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "px-chat-action-menu",
+      style: { display: "flex", flexDirection: "column", gap: "8px" },
+      children: [
+        label && /* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children: label }),
+        /* @__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.value ?? a.id, a.label, a.id),
+            children: a.label
+          },
+          a.id
+        )) })
+      ]
+    }
+  );
+};
+
 const COMPONENT_MAP = {
   select: SelectWithConfirm,
   select_multiple: SelectMultipleWithConfirm,
@@ -5150,7 +5193,8 @@ const COMPONENT_MAP = {
   card: CardDisplay,
   badge: BadgeDisplay,
   reactive_form: ReactiveForm,
-  carousel: CarouselDisplay
+  carousel: CarouselDisplay,
+  action_menu: ActionMenu
 };
 function renderComponent(props) {
   const { component } = props;

package/dist/index.js

@@ -1639,6 +1639,11 @@ 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"]);
 
@@ -2020,7 +2025,7 @@ const SelectWithConfirm = ({
   });
   const handleConfirm = () => {
     if (selected) {
-      emitInteraction(selected.value, selected.label);
+      emitInteraction(selected.value, selected.label, getSubmitActionId(component));
       setIsDrawerOpen(false);
     }
   };
@@ -2223,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);
     }
@@ -2426,7 +2432,7 @@ const InputWithConfirm = ({
         variant: "primary",
         size: "small",
         disabled: !inputValue,
-        onClick: () => emitInteraction(inputValue, inputValue),
+        onClick: () => emitInteraction(inputValue, inputValue, getSubmitActionId(component)),
         children: "Confirmar"
       }
     )
@@ -2569,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";
@@ -2997,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";
@@ -5075,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;
       }
@@ -5083,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) => {
@@ -5098,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") {
@@ -5161,6 +5168,42 @@ const CarouselDisplay = ({
   ] });
 };
 
+const ActionMenu = ({
+  component,
+  eventBus,
+  assistantMessageId = ""
+}) => {
+  const { emitInteraction, isConfirmed } = useComponentInteraction({
+    eventBus,
+    fieldName: component.props.field_name || "action_menu",
+    componentType: component.type,
+    assistantMessageId
+  });
+  if (isConfirmed) return null;
+  const label = component.props.label;
+  const actions = component.actions ?? [];
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "px-chat-action-menu",
+      style: { display: "flex", flexDirection: "column", gap: "8px" },
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 500 }, children: label }),
+        /* @__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.value ?? a.id, a.label, a.id),
+            children: a.label
+          },
+          a.id
+        )) })
+      ]
+    }
+  );
+};
+
 const COMPONENT_MAP = {
   select: SelectWithConfirm,
   select_multiple: SelectMultipleWithConfirm,
@@ -5171,7 +5214,8 @@ const COMPONENT_MAP = {
   card: CardDisplay,
   badge: BadgeDisplay,
   reactive_form: ReactiveForm,
-  carousel: CarouselDisplay
+  carousel: CarouselDisplay,
+  action_menu: ActionMenu
 };
 function renderComponent(props) {
   const { component } = props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelon",
-  "version": "0.3.29",
+  "version": "0.3.31",
   "description": "Design system de la marca goluti",
   "type": "module",
   "main": "dist/index.js",