pixelon 0.3.25 → 0.3.27

package/dist/index.js

@@ -8,9 +8,9 @@ var ReactMarkdown = require('react-markdown');
 var DatePicker = require('react-datepicker');
 var locale = require('date-fns/locale');
 require('react-datepicker/dist/react-datepicker.css');
+var yup = require('yup');
 var qrcode_react = require('qrcode.react');
 var reactHookForm = require('react-hook-form');
-var yup = require('yup');
 var reactRouterDom = require('react-router-dom');
 var yup$1 = require('@hookform/resolvers/yup');
 
@@ -1639,7 +1639,7 @@ function parseContent(content) {
   return null;
 }
 
-const DISPLAY_COMPONENTS = /* @__PURE__ */ new Set(["card", "badge"]);
+const DISPLAY_COMPONENTS = /* @__PURE__ */ new Set(["card", "badge", "reactive_form", "carousel"]);
 
 const useAppHeight$5 = () => {
   React.useEffect(() => {
@@ -1679,6 +1679,7 @@ const Drawer$1 = ({
   title,
   headerExtra,
   footer,
+  placement = "bottom",
   showCloseButton = true,
   closeOnOverlayClick = true,
   closeOnEscape = true,
@@ -1730,6 +1731,7 @@ const Drawer$1 = ({
   const drawerClasses = [
     `${prefix}drawer`,
     animating && `${prefix}drawer--open`,
+    `${prefix}drawer--${placement}`,
     className
   ].filter(Boolean).join(" ");
   return ReactDOM.createPortal(
@@ -1796,7 +1798,14 @@ const CHAT_EVENT = {
   PLACEHOLDER_UPDATED: "placeholderUpdated",
   THINKING_UPDATED: "thinkingUpdated",
   INPUT_DISABLED: "inputDisabled",
-  CLOSE: "close"
+  CLOSE: "close",
+  FETCH_REQUEST: "fetchRequest",
+  FETCH_RESPONSE: "fetchResponse",
+  FORM_SUBMIT: "formSubmit",
+  FORM_TRACE: "formTrace",
+  AGENT_EVENT: "agentEvent",
+  STREAM_CHUNK: "streamChunk",
+  MESSAGE_SAVED: "messageSaved"
 };
 const chatEventBus = createEventBus();
 
@@ -1823,13 +1832,13 @@ function useComponentInteraction({
   return { emitInteraction, isConfirmed };
 }
 
-const MOBILE_BREAKPOINT$3 = 640;
-const useIsMobile$4 = () => {
+const MOBILE_BREAKPOINT$4 = 640;
+const useIsMobile$5 = () => {
   const [isMobile, setIsMobile] = React.useState(
-    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT$3 : false
+    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT$4 : false
   );
   React.useEffect(() => {
-    const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT$3 - 1}px)`);
+    const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT$4 - 1}px)`);
     const handler = (e) => setIsMobile(e.matches);
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
@@ -1845,7 +1854,7 @@ const SelectWithConfirm = ({
   const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
   const [searchValue, setSearchValue] = React.useState("");
   const searchInputRef = React.useRef(null);
-  const isMobile = useIsMobile$4();
+  const isMobile = useIsMobile$5();
   const { field_name, value, ...componentProps } = component.props;
   const options = componentProps.options || [];
   const placeholder = componentProps.placeholder || "Seleccionar...";
@@ -2012,13 +2021,13 @@ const SelectWithConfirm = ({
   ] });
 };
 
-const MOBILE_BREAKPOINT$2 = 640;
-const useIsMobile$3 = () => {
+const MOBILE_BREAKPOINT$3 = 640;
+const useIsMobile$4 = () => {
   const [isMobile, setIsMobile] = React.useState(
-    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT$2 : false
+    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT$3 : false
   );
   React.useEffect(() => {
-    const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT$2 - 1}px)`);
+    const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT$3 - 1}px)`);
     const handler = (e) => setIsMobile(e.matches);
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
@@ -2034,7 +2043,7 @@ const SelectMultipleWithConfirm = ({
   const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
   const [searchValue, setSearchValue] = React.useState("");
   const searchInputRef = React.useRef(null);
-  const isMobile = useIsMobile$3();
+  const isMobile = useIsMobile$4();
   const { field_name, value, ...componentProps } = component.props;
   const options = componentProps.options || [];
   const placeholder = componentProps.placeholder || "Seleccionar...";
@@ -2277,8 +2286,8 @@ const ChatConfigProvider = ({ value, children }) => /* @__PURE__ */ jsxRuntime.j
 const useChatConfig = () => React.useContext(ChatConfigContext);
 
 DatePicker.registerLocale("es", locale.es);
-const MOBILE_BREAKPOINT$1 = 640;
-const parseDate$2 = (dateString) => {
+const MOBILE_BREAKPOINT$2 = 640;
+const parseDate$3 = (dateString) => {
   if (!dateString) return null;
   try {
     if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
@@ -2291,14 +2300,14 @@ const parseDate$2 = (dateString) => {
     return null;
   }
 };
-const formatDateToISO = (date) => {
+const formatDateToISO$1 = (date) => {
   if (!date) return "";
   const year = date.getFullYear();
   const month = (date.getMonth() + 1).toString().padStart(2, "0");
   const day = date.getDate().toString().padStart(2, "0");
   return `${year}-${month}-${day}`;
 };
-const formatDateDisplay = (date, locale, timezone) => {
+const formatDateDisplay$1 = (date, locale, timezone) => {
   if (!date) return "";
   return date.toLocaleDateString(locale, {
     day: "2-digit",
@@ -2347,12 +2356,12 @@ const CustomHeader$1 = ({
     )
   ] });
 };
-const useIsMobile$2 = () => {
+const useIsMobile$3 = () => {
   const [isMobile, setIsMobile] = React.useState(
-    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT$1 : false
+    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT$2 : false
   );
   React.useEffect(() => {
-    const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT$1 - 1}px)`);
+    const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT$2 - 1}px)`);
     const handler = (e) => setIsMobile(e.matches);
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
@@ -2368,15 +2377,15 @@ const DateInputWithConfirm = ({
   const [selectedDate, setSelectedDate] = React.useState(null);
   const [isOpen, setIsOpen] = React.useState(false);
   const triggerRef = React.useRef(null);
-  const isMobile = useIsMobile$2();
+  const isMobile = useIsMobile$3();
   const { emitInteraction, isConfirmed } = useComponentInteraction({
     eventBus,
     fieldName: component.props.field_name,
     componentType: component.type,
     assistantMessageId
   });
-  const minDate = component.props.min_date ? parseDate$2(component.props.min_date) : void 0;
-  const maxDate = component.props.max_date ? parseDate$2(component.props.max_date) : void 0;
+  const minDate = component.props.min_date ? parseDate$3(component.props.min_date) : void 0;
+  const maxDate = component.props.max_date ? parseDate$3(component.props.max_date) : void 0;
   React.useEffect(() => {
     if (!isOpen || isMobile) return;
     const handleKey = (e) => {
@@ -2393,12 +2402,12 @@ const DateInputWithConfirm = ({
   };
   const handleConfirm = React.useCallback(() => {
     if (!selectedDate) return;
-    const isoValue = formatDateToISO(selectedDate);
-    const displayValue2 = formatDateDisplay(selectedDate, locale, timezone);
+    const isoValue = formatDateToISO$1(selectedDate);
+    const displayValue2 = formatDateDisplay$1(selectedDate, locale, timezone);
     emitInteraction(isoValue, displayValue2);
     setIsOpen(false);
   }, [selectedDate, emitInteraction, locale, timezone]);
-  const displayValue = formatDateDisplay(selectedDate, locale, timezone);
+  const displayValue = formatDateDisplay$1(selectedDate, locale, timezone);
   const placeholder = component.props.placeholder || "Selecciona una fecha";
   const label = component.props.label || "Selecciona una fecha";
   const calendarContent = /* @__PURE__ */ jsxRuntime.jsx(
@@ -2537,13 +2546,14 @@ const ConfirmButton = ({
 };
 
 const CardDisplay = ({ component }) => {
-  const { title, rows, variant = "default" } = component.props;
+  const { title, rows, content, variant = "default" } = component.props;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `px-chat-card px-chat-card--${variant}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-card__title", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-card__rows", children: rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-card__row", children: [
+    content && !rows?.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-card__content", children: content }),
+    rows?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-card__rows", children: rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-card__row", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-card__row-label", children: row.label }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-card__row-value", children: row.value })
-    ] }, i)) })
+    ] }, i)) }) : null
   ] });
 };
 
@@ -2694,13 +2704,13 @@ const ScrollableColumn$1 = ({
   ] });
 };
 
-const MOBILE_BREAKPOINT = 640;
-const useIsMobile$1 = () => {
+const MOBILE_BREAKPOINT$1 = 640;
+const useIsMobile$2 = () => {
   const [isMobile, setIsMobile] = React.useState(
-    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT : false
+    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT$1 : false
   );
   React.useEffect(() => {
-    const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT$1 - 1}px)`);
     const handler = (e) => setIsMobile(e.matches);
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
@@ -2753,7 +2763,7 @@ const TimeInputWithConfirm = ({
   assistantMessageId = ""
 }) => {
   const { timezone, locale } = useChatConfig();
-  const isMobile = useIsMobile$1();
+  const isMobile = useIsMobile$2();
   const [isOpen, setIsOpen] = React.useState(false);
   const [confirmedTime, setConfirmedTime] = React.useState("");
   const triggerRef = React.useRef(null);
@@ -2994,130 +3004,1929 @@ const TimeInputWithConfirm = ({
   ] });
 };
 
-const COMPONENT_MAP = {
-  select: SelectWithConfirm,
-  select_multiple: SelectMultipleWithConfirm,
-  confirm: ConfirmButton,
-  date_input: DateInputWithConfirm,
-  time_input: TimeInputWithConfirm,
-  input: InputWithConfirm,
-  card: CardDisplay,
-  badge: BadgeDisplay
-};
-function renderComponent(props) {
-  const { component } = props;
-  if (component.answered && !DISPLAY_COMPONENTS.has(component.type)) {
+DatePicker.registerLocale("es", locale.es);
+const parseDate$2 = (dateString) => {
+  if (!dateString) return null;
+  try {
+    if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
+      const [year, month, day] = dateString.split("-").map(Number);
+      return new Date(year, month - 1, day);
+    }
+    const parsed = new Date(dateString);
+    return isNaN(parsed.getTime()) ? null : parsed;
+  } catch {
     return null;
   }
-  const Component = COMPONENT_MAP[component.type];
-  if (!Component) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props });
-}
-
-const StructuredContent = ({
-  content,
-  eventBus,
-  assistantMessageId,
-  className = ""
+};
+const formatDateToISO = (date) => {
+  if (!date) return "";
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const day = date.getDate().toString().padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+const formatDateDisplay = (date) => {
+  if (!date) return "";
+  return date.toLocaleDateString("es", { day: "2-digit", month: "long", year: "numeric" });
+};
+const DynamicField = ({
+  field,
+  value,
+  error,
+  disabled,
+  fieldState,
+  onChange,
+  drawerPlacement = "bottom"
 }) => {
-  const structured = parseContent(content);
-  const markdownContent = structured ? structured.message : content;
-  const rawComponent = structured?.component || null;
-  const components = rawComponent ? Array.isArray(rawComponent) ? rawComponent : [rawComponent] : [];
-  const hasVisibleComponents = components.some((comp) => !comp.answered || DISPLAY_COMPONENTS.has(comp.type));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${COMPONENT_PREFIX$1}structured-content ${className}`, children: [
-    markdownContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${COMPONENT_PREFIX$1}assistant-message__markdown${hasVisibleComponents ? ` ${COMPONENT_PREFIX$1}assistant-message__markdown--with-component` : ``}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ReactMarkdown,
+  const { loading, options } = fieldState;
+  if (field.type === "hidden") return null;
+  const renderField = () => {
+    switch (field.type) {
+      case "select":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SelectField$1,
+          {
+            field,
+            value,
+            disabled,
+            loading,
+            options,
+            onChange,
+            drawerPlacement
+          }
+        );
+      case "select_multiple":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SelectMultipleField,
+          {
+            field,
+            value,
+            disabled,
+            loading,
+            options,
+            onChange,
+            drawerPlacement
+          }
+        );
+      case "date":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          DateField,
+          {
+            field,
+            value,
+            disabled,
+            onChange,
+            drawerPlacement
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: field.type === "email" ? "email" : field.type === "number" ? "number" : "text",
+            className: "px-chat-rf__input",
+            placeholder: field.placeholder,
+            value: value || "",
+            disabled,
+            onChange: (e) => onChange(e.target.value, e.target.value)
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `px-chat-rf__field ${error ? "px-chat-rf__field--error" : ""} ${disabled ? "px-chat-rf__field--disabled" : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "px-chat-rf__field-label", children: field.label }),
+    renderField(),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__field-error", children: error })
+  ] });
+};
+const SelectField$1 = ({ field, value, disabled, loading, options, onChange, drawerPlacement }) => {
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState("");
+  const searchInputRef = React.useRef(null);
+  const selectedLabel = options.find((o) => o.value === value)?.label || "";
+  const placeholder = loading ? "Cargando..." : field.placeholder || "Seleccionar...";
+  const filteredOptions = searchValue ? options.filter((opt) => opt.label.toLowerCase().includes(searchValue.toLowerCase())) : options;
+  React.useEffect(() => {
+    if (isDrawerOpen && searchInputRef.current) {
+      setTimeout(() => searchInputRef.current?.focus(), 350);
+    }
+  }, [isDrawerOpen]);
+  const handleSelect = (opt) => {
+    const { value: v, label, ...extra } = opt;
+    onChange(v, label, Object.keys(extra).length > 0 ? extra : void 0);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        components: {
-          a: ({ href, children }) => /* @__PURE__ */ jsxRuntime.jsx(
-            Link,
-            {
-              href: href || "#",
-              variant: "primary",
-              size: "medium",
-              weight: "bold",
-              underline: false,
-              children
-            }
-          )
+        className: `px-chat-select-with-confirm__trigger ${isDrawerOpen ? "px-chat-select-with-confirm__trigger--open" : ""}`,
+        onClick: () => !disabled && !loading && setIsDrawerOpen(true),
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: (e) => {
+          if (!disabled && (e.key === "Enter" || e.key === " ")) setIsDrawerOpen(true);
         },
-        children: markdownContent
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-chat-select-with-confirm__trigger-text ${!value ? "px-chat-select-with-confirm__trigger-text--placeholder" : ""}`, children: value ? selectedLabel : placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-select-with-confirm__chevron", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Loader$1, { size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.CHEVRON_DOWN, size: "small" }) })
+        ]
       }
-    ) }),
-    components.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${COMPONENT_PREFIX$1}structured-content__component`, children: components.map((comp, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderComponent({ component: comp, eventBus, assistantMessageId }) }, `${comp.type}-${index}`)) })
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Drawer$1,
+      {
+        isOpen: isDrawerOpen,
+        onClose: () => {
+          setIsDrawerOpen(false);
+          setSearchValue("");
+        },
+        title: field.label,
+        placement: drawerPlacement,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-select-drawer px-chat-rf-select-drawer", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-select-drawer__search", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.SEARCH, size: "small" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: searchInputRef,
+                type: "text",
+                className: "px-chat-select-drawer__search-input",
+                value: searchValue,
+                onChange: (e) => setSearchValue(e.target.value),
+                placeholder: "Buscar..."
+              }
+            ),
+            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) => {
+            const isSelected = opt.value === value;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "li",
+              {
+                className: `px-chat-select-drawer__option ${isSelected ? "px-chat-select-drawer__option--selected" : ""}`,
+                onClick: () => {
+                  handleSelect(opt);
+                  setIsDrawerOpen(false);
+                  setSearchValue("");
+                },
+                role: "option",
+                "aria-selected": isSelected,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-select-drawer__option-label", children: opt.label }),
+                  isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-select-drawer__option-check", children: /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.CHECK, size: "small" }) })
+                ]
+              },
+              opt.value
+            );
+          }) })
+        ] })
+      }
+    )
   ] });
 };
-
-const getAttachmentType = (file) => {
-  const mimeType = file.type.toLowerCase();
-  if (mimeType.startsWith(MIME_PREFIXES.AUDIO)) {
-    return AttachmentType.AUDIO;
-  }
-  if (mimeType.startsWith(MIME_PREFIXES.VIDEO)) {
-    return AttachmentType.VIDEO;
-  }
-  if (mimeType.startsWith(MIME_PREFIXES.IMAGE)) {
-    return AttachmentType.IMAGE;
-  }
-  if (mimeType === MIME_TYPES.PDF) {
-    return AttachmentType.PDF;
-  }
-  if (mimeType.includes(MIME_KEYWORDS.DOCUMENT) || mimeType.includes(MIME_KEYWORDS.WORD) || mimeType.includes(MIME_KEYWORDS.EXCEL) || mimeType.includes(MIME_KEYWORDS.POWERPOINT) || mimeType.startsWith(MIME_PREFIXES.TEXT)) {
-    return AttachmentType.DOCUMENT;
-  }
-  return AttachmentType.OTHER;
-};
-const filterFilesByType = (files, type) => {
-  const types = Array.isArray(type) ? type : [type];
-  return files.filter((file) => {
-    const fileType = getAttachmentType(file);
-    return types.includes(fileType);
-  });
-};
-const getFileUrl = (file) => {
-  if (file.url) {
-    return file.url;
-  }
-  return URL.createObjectURL(file);
-};
-const getAudioFiles = (files) => {
-  return filterFilesByType(files, [AttachmentType.AUDIO]);
-};
-const getNonAudioFiles = (files) => {
-  return filterFilesByType(files, [
-    AttachmentType.IMAGE,
-    AttachmentType.PDF,
-    AttachmentType.DOCUMENT,
-    AttachmentType.OTHER
-  ]);
-};
-
-function createStore(initial) {
-  const state = { ...initial };
-  const listeners = {};
-  const notify = (key, value) => {
-    const keyStr = String(key);
-    listeners[keyStr]?.forEach((l) => l(value));
-  };
-  const subscribe = (key, listener) => {
-    const keyStr = String(key);
-    if (!listeners[keyStr]) listeners[keyStr] = /* @__PURE__ */ new Set();
-    listeners[keyStr].add(listener);
-    listener(state[key]);
-    return () => {
-      listeners[keyStr].delete(listener);
-    };
-  };
-  const set = (key, value) => {
-    state[key] = value;
-    notify(key, value);
+const SelectMultipleField = ({ field, value, disabled, loading, options, onChange, drawerPlacement }) => {
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState("");
+  const searchInputRef = React.useRef(null);
+  const selected = value || [];
+  const placeholder = loading ? "Cargando..." : field.placeholder || "Seleccionar...";
+  const filteredOptions = searchValue ? options.filter((opt) => opt.label.toLowerCase().includes(searchValue.toLowerCase())) : options;
+  React.useEffect(() => {
+    if (isDrawerOpen && searchInputRef.current) {
+      setTimeout(() => searchInputRef.current?.focus(), 350);
+    }
+  }, [isDrawerOpen]);
+  const toggleOption = (optValue) => {
+    const isChecked = selected.includes(optValue);
+    const next = isChecked ? selected.filter((v) => v !== optValue) : [...selected, optValue];
+    const labels = next.map((v) => options.find((o) => o.value === v)?.label || v).join(", ");
+    onChange(next, labels);
   };
-  const get = (key) => state[key];
-  return { set, get, subscribe };
-}
-
-function deepMerge(target, source) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `px-chat-select-with-confirm__trigger ${isDrawerOpen ? "px-chat-select-with-confirm__trigger--open" : ""}`,
+        onClick: () => !disabled && !loading && setIsDrawerOpen(true),
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: (e) => {
+          if (!disabled && (e.key === "Enter" || e.key === " ")) setIsDrawerOpen(true);
+        },
+        children: [
+          selected.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-select-with-confirm__trigger-text px-chat-select-with-confirm__trigger-text--placeholder", children: placeholder }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-select-with-confirm__trigger-tags", children: selected.map((v) => {
+            const opt = options.find((o) => o.value === v);
+            return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-chat-select-with-confirm__trigger-tag", children: [
+              opt?.label || v,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "px-chat-select-with-confirm__trigger-tag-remove",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    toggleOption(v);
+                  },
+                  "aria-label": `Quitar ${opt?.label || v}`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.CLOSE, size: "small" })
+                }
+              )
+            ] }, v);
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-select-with-confirm__chevron", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Loader$1, { size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.CHEVRON_DOWN, size: "small" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Drawer$1,
+      {
+        isOpen: isDrawerOpen,
+        onClose: () => {
+          setIsDrawerOpen(false);
+          setSearchValue("");
+        },
+        title: field.label,
+        placement: drawerPlacement,
+        footer: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "px-chat-rf__btn px-chat-rf__btn--primary",
+            style: { width: "100%" },
+            onClick: () => {
+              setIsDrawerOpen(false);
+              setSearchValue("");
+            },
+            children: [
+              "Listo",
+              selected.length > 0 ? ` (${selected.length})` : ""
+            ]
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-select-drawer px-chat-rf-select-drawer", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-select-drawer__search", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.SEARCH, size: "small" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: searchInputRef,
+                type: "text",
+                className: "px-chat-select-drawer__search-input",
+                value: searchValue,
+                onChange: (e) => setSearchValue(e.target.value),
+                placeholder: "Buscar..."
+              }
+            ),
+            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) => {
+            const isChecked = selected.includes(opt.value);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "li",
+              {
+                className: `px-chat-select-drawer__option ${isChecked ? "px-chat-select-drawer__option--selected" : ""}`,
+                onClick: () => toggleOption(opt.value),
+                role: "option",
+                "aria-selected": isChecked,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-chat-select-drawer__checkbox ${isChecked ? "px-chat-select-drawer__checkbox--checked" : ""}`, children: isChecked && /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.CHECK, size: "small" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-select-drawer__option-label", children: opt.label })
+                ]
+              },
+              opt.value
+            );
+          }) })
+        ] })
+      }
+    )
+  ] });
+};
+const DateField = ({ field, value, disabled, onChange, drawerPlacement }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const selectedDate = value ? parseDate$2(value) : null;
+  const displayValue = formatDateDisplay(selectedDate);
+  const placeholder = field.placeholder || "Selecciona una fecha";
+  const minDateRaw = field.validation?.min_date ? String(field.validation.min_date.value ?? field.validation.min_date) : field.min_date ? String(field.min_date) : void 0;
+  const maxDateRaw = field.validation?.max_date ? String(field.validation.max_date.value ?? field.validation.max_date) : field.max_date ? String(field.max_date) : void 0;
+  const minDate = minDateRaw ? parseDate$2(minDateRaw) : void 0;
+  const maxDate = maxDateRaw ? parseDate$2(maxDateRaw) : void 0;
+  const handleDateChange = (date) => {
+    if (!date) return;
+    const isoValue = formatDateToISO(date);
+    const display = formatDateDisplay(date);
+    onChange(isoValue, display);
+  };
+  const calendarContent = /* @__PURE__ */ jsxRuntime.jsx(
+    DatePicker,
+    {
+      selected: selectedDate,
+      onChange: handleDateChange,
+      inline: true,
+      locale: "es",
+      minDate: minDate || void 0,
+      maxDate: maxDate || void 0,
+      renderCustomHeader: ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-datepicker__header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-chat-datepicker__nav-btn", onClick: decreaseMonth, disabled: prevMonthButtonDisabled, children: "\u2039" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-datepicker__month-year", children: date.toLocaleDateString("es", { month: "long", year: "numeric" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-chat-datepicker__nav-btn", onClick: increaseMonth, disabled: nextMonthButtonDisabled, children: "\u203A" })
+      ] })
+    }
+  );
+  const calendarIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 1V3M11 1V3M1 6H15M2 2.5H14C14.5523 2.5 15 2.94772 15 3.5V14C15 14.5523 14.5523 15 14 15H2C1.44772 15 1 14.5523 1 14V3.5C1 2.94772 1.44772 2.5 2 2.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `px-chat-rf__date-trigger ${isOpen ? "px-chat-rf__date-trigger--open" : ""}`,
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: (e) => {
+          if (!disabled && (e.key === "Enter" || e.key === " ")) setIsOpen(!isOpen);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-chat-rf__date-trigger-text ${!selectedDate ? "px-chat-rf__date-trigger-text--placeholder" : ""}`, children: selectedDate ? displayValue : placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__date-trigger-icon", children: calendarIcon })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Drawer$1,
+      {
+        isOpen,
+        onClose: () => setIsOpen(false),
+        title: field.label,
+        placement: drawerPlacement,
+        footer: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "px-chat-rf__btn px-chat-rf__btn--primary",
+            style: { width: "100%" },
+            disabled: !selectedDate,
+            onClick: () => setIsOpen(false),
+            children: "Confirmar"
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-datepicker px-chat-datepicker--mobile", children: calendarContent }),
+          selectedDate && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-datepicker__selected-date", children: displayValue })
+        ]
+      }
+    )
+  ] });
+};
+
+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" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 6.5H14", stroke: "currentColor", strokeWidth: "1.2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 1.5V4", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.5 1.5V4", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
+] });
+const formIcon = /* @__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: "1.5", width: "12", height: "13", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 5.5H11", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8.5H11", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 11.5H8.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
+] });
+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 {
+    formStatus,
+    setFormStatus,
+    currentStep,
+    setCurrentStep,
+    values,
+    errors,
+    touched,
+    fieldStates,
+    totalSteps,
+    handleTriggerClick,
+    handleFieldChange,
+    handleNext,
+    handleBack,
+    handleSubmit,
+    getDependencies,
+    allDepsResolved,
+    resolveSummaryRows
+  } = form;
+  const renderTrigger = () => {
+    const isOpen = formStatus === "open";
+    const isFinished = formStatus === "completed" || formStatus === "warning" || formStatus === "error";
+    const statusClass = isFinished ? `px-chat-rf__trigger--${formStatus}` : "";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: `px-chat-rf__trigger ${isOpen ? "px-chat-rf__trigger--open" : ""} ${statusClass}`,
+        onClick: handleTriggerClick,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__trigger-icon", children: isFinished ? checkIcon : trigger.icon === "calendar" ? calendarIcon : formIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__trigger-label", children: isFinished ? form.submitMessage : trigger.label }),
+          !isFinished && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__trigger-arrow", children: isOpen ? chevronDown : chevronRight })
+        ]
+      }
+    );
+  };
+  const renderStepIndicator = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__steps-indicator", children: [
+    steps.map((step, i) => {
+      const isCompleted = i < currentStep;
+      const isActive = i === currentStep;
+      return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+        i > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `px-chat-rf__step-line ${isCompleted ? "px-chat-rf__step-line--done" : ""}` }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: `px-chat-rf__step-dot ${isActive ? "px-chat-rf__step-dot--active" : ""} ${isCompleted ? "px-chat-rf__step-dot--done" : ""}`,
+            onClick: () => isCompleted && setCurrentStep(i),
+            disabled: !isCompleted && !isActive,
+            title: step.title,
+            children: isCompleted ? checkIcon : i + 1
+          }
+        )
+      ] }, i);
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `px-chat-rf__step-line ${currentStep >= steps.length ? "px-chat-rf__step-line--done" : ""}` }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: `px-chat-rf__step-dot ${currentStep >= steps.length ? "px-chat-rf__step-dot--active" : ""}`,
+        disabled: currentStep < steps.length,
+        children: currentStep >= steps.length ? checkIcon : totalSteps
+      }
+    )
+  ] });
+  const renderNavButtons = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__nav", children: [
+    currentStep > 0 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-chat-rf__btn px-chat-rf__btn--secondary", onClick: handleBack, children: "Atras" }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-chat-rf__btn px-chat-rf__btn--primary", onClick: handleNext, children: "Siguiente" })
+  ] });
+  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 });
+    }
+    const actionHandlers = {
+      submit: handleSubmit,
+      close: () => setFormStatus("closed"),
+      back: handleBack
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__nav", children: actions.map((act, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: `px-chat-rf__btn px-chat-rf__btn--${act.variant || "primary"}`,
+        onClick: actionHandlers[act.action] || (() => {
+        }),
+        children: act.label
+      },
+      i
+    )) });
+  };
+  const renderStepContent = () => {
+    if (currentStep >= steps.length) {
+      const resolvedRows = resolveSummaryRows(summary.rows);
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__summary", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__summary-card", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__summary-title", children: summary.title }),
+        resolvedRows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__summary-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__summary-label", children: row.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__summary-value", children: row.value })
+        ] }, i))
+      ] }) });
+    }
+    const step = steps[currentStep];
+    const stepFields = step.fields.map((name) => fields.find((f) => f.name === name)).filter(Boolean);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__step-content", children: [
+      currentStep > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-rf__completed-steps", children: steps.slice(0, currentStep).map((prevStep, si) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__completed-step", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf__completed-step-header", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__completed-step-title", children: prevStep.title }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "px-chat-rf__edit-btn",
+              onClick: () => setCurrentStep(si),
+              children: "editar"
+            }
+          )
+        ] }),
+        prevStep.fields.map((fname) => {
+          const fs = fieldStates[fname];
+          const fld = fields.find((f) => f.name === 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,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-rf__completed-field-value", children: fs?.label || String(values[fname] || "") })
+          ] }, fname);
+        })
+      ] }, si)) }),
+      /* @__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) => {
+          const deps = getDependencies(field);
+          const isDisabled = !allDepsResolved(deps, values);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicField,
+            {
+              field,
+              value: values[field.name],
+              error: touched[field.name] ? errors[field.name] : void 0,
+              disabled: isDisabled,
+              fieldState: fieldStates[field.name],
+              drawerPlacement,
+              onChange: (val, label, extra) => handleFieldChange(field.name, val, label, extra)
+            },
+            field.name
+          );
+        })
+      ] })
+    ] });
+  };
+  const renderDrawerFooter = () => {
+    if (currentStep >= steps.length) return renderSummaryActions();
+    return renderNavButtons();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-rf", children: [
+    renderTrigger(),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Drawer$1,
+      {
+        isOpen: formStatus === "open",
+        onClose: () => setFormStatus("closed"),
+        title,
+        placement: drawerPlacement,
+        className: "px-chat-rf-drawer--mobile",
+        footer: renderDrawerFooter(),
+        children: [
+          renderStepIndicator(),
+          renderStepContent()
+        ]
+      }
+    )
+  ] });
+};
+
+function buildYupSchema(fields) {
+  const shape = {};
+  for (const field of fields) {
+    if (field.type === "hidden") continue;
+    const v = field.validation;
+    if (!v) continue;
+    if (field.type === "select_multiple") {
+      let s = yup__namespace.array().of(yup__namespace.string());
+      if (v.required) s = s.min(1, v.required);
+      if (v.min) s = s.min(Number(v.min.value), v.min.message);
+      if (v.max) s = s.max(Number(v.max.value), v.max.message);
+      shape[field.name] = s;
+    } else if (field.type === "date") {
+      let s = yup__namespace.string().typeError(`${field.label || field.name}: fecha inv\xE1lida`);
+      if (v.required) s = s.required(v.required);
+      const minDateRule = v.min_date ?? field.min_date;
+      if (minDateRule) {
+        const minVal = typeof minDateRule === "object" && minDateRule !== null ? String(minDateRule.value) : String(minDateRule);
+        const minMsg = typeof minDateRule === "object" && minDateRule !== null ? minDateRule.message || `La fecha debe ser ${minVal} o posterior` : `La fecha debe ser ${minVal} o posterior`;
+        s = s.test("min-date", minMsg, (val) => !val || val >= minVal);
+      }
+      const maxDateRule = v.max_date ?? field.max_date;
+      if (maxDateRule) {
+        const maxVal = typeof maxDateRule === "object" && maxDateRule !== null ? String(maxDateRule.value) : String(maxDateRule);
+        const maxMsg = typeof maxDateRule === "object" && maxDateRule !== null ? maxDateRule.message || `La fecha debe ser ${maxVal} o anterior` : `La fecha debe ser ${maxVal} o anterior`;
+        s = s.test("max-date", maxMsg, (val) => !val || val <= maxVal);
+      }
+      shape[field.name] = s;
+    } else {
+      let s = yup__namespace.string();
+      if (v.required) s = s.required(v.required);
+      if (v.pattern) s = s.matches(new RegExp(v.pattern.value), v.pattern.message);
+      if (v.email) s = s.email(v.email);
+      if (v.min) s = s.min(Number(v.min.value), v.min.message);
+      if (v.max) s = s.max(Number(v.max.value), v.max.message);
+      shape[field.name] = s;
+    }
+  }
+  return yup__namespace.object().shape(shape);
+}
+function buildInitialValues(fields) {
+  const values = {};
+  for (const field of fields) {
+    if (field.type === "hidden") {
+      values[field.name] = field.default_value ?? "";
+    } else {
+      values[field.name] = field.type === "select_multiple" ? [] : "";
+    }
+  }
+  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);
+    if (isNaN(d.getTime())) return value;
+    return d.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+      ...timezone ? { timeZone: timezone } : {}
+    });
+  } catch {
+    return value;
+  }
+}
+function formatDate$3(value, timezone) {
+  try {
+    const d = new Date(value);
+    if (isNaN(d.getTime())) return value;
+    return d.toLocaleDateString("sv-SE", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      ...timezone ? { timeZone: timezone } : {}
+    });
+  } catch {
+    return value;
+  }
+}
+async function mockFetch(url, params) {
+  await new Promise((r) => setTimeout(r, 600 + Math.random() * 400));
+  if (url.includes("companies")) {
+    return [
+      { id: "company-1", name: "Goluti" },
+      { id: "company-2", name: "Barbeer" }
+    ];
+  }
+  if (url.includes("locations")) {
+    if (params.company_id === "company-1") {
+      return [
+        { id: "loc-1", name: "Sede Chico" },
+        { id: "loc-2", name: "Sede Suba" }
+      ];
+    }
+    return [{ id: "loc-3", name: "Sede Norte" }];
+  }
+  if (url.includes("services")) {
+    return [
+      { id: "svc-1", name: "Corte de cabello" },
+      { id: "svc-2", name: "Manicure" },
+      { id: "svc-3", name: "Tinte completo" }
+    ];
+  }
+  if (url.includes("availability")) {
+    return [
+      {
+        collaborator_id: "collab-1",
+        user_location_rol_id: "ulr-1",
+        name: "Leon",
+        assignment_hours: [
+          { start: "2026-03-02T14:00:00", end: "2026-03-02T14:20:00", start_time: "14:00", end_time: "14:20" },
+          { start: "2026-03-02T14:30:00", end: "2026-03-02T14:50:00", start_time: "14:30", end_time: "14:50" }
+        ]
+      },
+      {
+        collaborator_id: "collab-2",
+        user_location_rol_id: "ulr-2",
+        name: "Carlos",
+        assignment_hours: [
+          { start: "2026-03-02T10:00:00", end: "2026-03-02T10:20:00", start_time: "10:00", end_time: "10:20" },
+          { start: "2026-03-02T11:00:00", end: "2026-03-02T11:20:00", start_time: "11:00", end_time: "11:20" }
+        ]
+      }
+    ];
+  }
+  return [];
+}
+function getDependencies(field) {
+  if (!field.depends_on) return [];
+  return Array.isArray(field.depends_on) ? field.depends_on : [field.depends_on];
+}
+function allDepsResolved(deps, formValues) {
+  return deps.every((dep) => {
+    const val = formValues[dep];
+    if (Array.isArray(val)) return val.length > 0;
+    return val !== "" && val !== null && val !== void 0;
+  });
+}
+function useReactiveEndpoints({ fields, fieldStates, setFieldState, eventBus, timezone, formTitle }) {
+  const loadingRef = React.useRef(/* @__PURE__ */ new Set());
+  const loadEndpoint = React.useCallback(
+    async (field, formValues) => {
+      if (!field.endpoint || loadingRef.current.has(field.name)) return;
+      const deps = getDependencies(field);
+      if (!allDepsResolved(deps, formValues)) return;
+      loadingRef.current.add(field.name);
+      setFieldState(field.name, { loading: true, error: null });
+      const startTime = Date.now();
+      try {
+        const resolvedBody = field.endpoint.body ? resolveBody(field.endpoint.body, formValues, fieldStates) : void 0;
+        const params = field.endpoint.params ? resolveParams(field.endpoint.params, formValues, fieldStates) : {};
+        const requestBody = resolvedBody ?? (Object.keys(params).length > 0 ? params : void 0);
+        if (eventBus) {
+          eventBus.emit(CHAT_EVENT.FORM_TRACE, {
+            chatId: "",
+            formTitle: formTitle || "",
+            source: "reactive_form",
+            phase: "request",
+            service: field.endpoint.service,
+            url: field.endpoint.url,
+            method: field.endpoint.method,
+            body: requestBody
+          });
+        }
+        let rawData;
+        if (eventBus) {
+          rawData = await fetchViaEventBus(
+            eventBus,
+            field.endpoint.service,
+            field.endpoint.url,
+            field.endpoint.method,
+            requestBody
+          );
+        } else {
+          rawData = await mockFetch(field.endpoint.url, params);
+        }
+        let dataArray;
+        let data = rawData;
+        if (rawData && typeof rawData === "object" && "response" in rawData) {
+          data = rawData.response;
+        }
+        if (field.endpoint.response_path && data && typeof data === "object" && !Array.isArray(data)) {
+          const extracted = data[field.endpoint.response_path];
+          dataArray = Array.isArray(extracted) ? extracted : [];
+        } else {
+          dataArray = Array.isArray(data) ? data : [];
+        }
+        if (eventBus && rawData && typeof rawData === "object") {
+          const resp = rawData;
+          if (resp.notification_type && String(resp.notification_type).toLowerCase() !== "success") {
+            throw new Error(resp.message || "Error en la respuesta");
+          }
+        }
+        const options = dataArray.map((item) => {
+          const opt = {
+            value: String(item[field.endpoint.value_field] || ""),
+            label: String(item[field.endpoint.label_field] || "")
+          };
+          if (field.endpoint.extra_fields) {
+            for (const ef of field.endpoint.extra_fields) {
+              opt[ef] = item[ef];
+            }
+          }
+          return opt;
+        });
+        setFieldState(field.name, { options, loading: false });
+        if (eventBus) {
+          eventBus.emit(CHAT_EVENT.FORM_TRACE, {
+            chatId: "",
+            formTitle: formTitle || "",
+            source: "reactive_form",
+            phase: "response",
+            service: field.endpoint.service,
+            url: field.endpoint.url,
+            method: field.endpoint.method,
+            status: 200,
+            duration_ms: Date.now() - startTime,
+            success: true,
+            response: rawData
+          });
+        }
+      } catch (err) {
+        const errorMsg = err instanceof Error ? err.message : "Error al cargar opciones";
+        setFieldState(field.name, { loading: false, error: errorMsg });
+        if (eventBus) {
+          eventBus.emit(CHAT_EVENT.FORM_TRACE, {
+            chatId: "",
+            formTitle: formTitle || "",
+            source: "reactive_form",
+            phase: "response",
+            service: field.endpoint.service,
+            url: field.endpoint.url,
+            method: field.endpoint.method,
+            status: 500,
+            duration_ms: Date.now() - startTime,
+            success: false,
+            error: errorMsg
+          });
+        }
+      } finally {
+        loadingRef.current.delete(field.name);
+      }
+    },
+    [fields, fieldStates, setFieldState, eventBus]
+  );
+  const resolveOptionsFrom = React.useCallback(
+    (field, formValues) => {
+      if (!field.options_from) return;
+      const sourceState = fieldStates[field.options_from.source_field];
+      const sourceValue = formValues[field.options_from.source_field];
+      if (!sourceState || !sourceValue) return;
+      const selectedItem = sourceState.options.find((o) => o.value === sourceValue);
+      if (!selectedItem) return;
+      const rawData = selectedItem[field.options_from.data_field];
+      if (!Array.isArray(rawData)) return;
+      const options = rawData.map((item) => {
+        let val = field.options_from.value_template;
+        let lbl = field.options_from.label_template;
+        for (const [k, v] of Object.entries(item)) {
+          const strVal = String(v);
+          const timeStr = formatTime$1(strVal, timezone);
+          const dateStr = formatDate$3(strVal, timezone);
+          val = val.replace(`\${${k}|time}`, timeStr);
+          val = val.replace(`\${${k}|date}`, dateStr);
+          val = val.replace(`\${${k}_time}`, timeStr);
+          val = val.replace(`\${${k}_date}`, dateStr);
+          val = val.replace(`\${${k}}`, strVal);
+          lbl = lbl.replace(`\${${k}|time}`, timeStr);
+          lbl = lbl.replace(`\${${k}|date}`, dateStr);
+          lbl = lbl.replace(`\${${k}_time}`, timeStr);
+          lbl = lbl.replace(`\${${k}_date}`, dateStr);
+          lbl = lbl.replace(`\${${k}}`, strVal);
+        }
+        return { value: val, label: lbl, ...item };
+      });
+      setFieldState(field.name, { options, loading: false });
+    },
+    [fieldStates, setFieldState]
+  );
+  return { loadEndpoint, resolveOptionsFrom, getDependencies, allDepsResolved, fetchViaEventBus: eventBus ? fetchViaEventBus.bind(null, eventBus) : void 0 };
+}
+
+function createInitialFieldStates(fields) {
+  const map = {};
+  for (const f of fields) {
+    map[f.name] = {
+      value: f.type === "hidden" ? f.default_value ?? "" : f.type === "select_multiple" ? [] : "",
+      label: "",
+      options: f.options || [],
+      loading: false,
+      error: null
+    };
+  }
+  return map;
+}
+function useReactiveForm(props) {
+  const { fields, steps, submit, eventBus } = props;
+  const { timezone } = useChatConfig();
+  const [formStatus, setFormStatus] = React.useState("closed");
+  const [currentStep, setCurrentStep] = React.useState(0);
+  const [values, setValues] = React.useState(() => buildInitialValues(fields));
+  const [errors, setErrors] = React.useState({});
+  const [touched, setTouched] = React.useState({});
+  const [fieldStates, setFieldStatesMap] = React.useState(
+    () => createInitialFieldStates(fields)
+  );
+  const validationSchema = React.useMemo(() => buildYupSchema(fields), [fields]);
+  const totalSteps = steps.length + 1;
+  const setFieldState = React.useCallback((name, partial) => {
+    setFieldStatesMap((prev) => ({
+      ...prev,
+      [name]: { ...prev[name], ...partial }
+    }));
+  }, []);
+  const { loadEndpoint, resolveOptionsFrom, getDependencies, allDepsResolved } = useReactiveEndpoints({ fields, fieldStates, setFieldState, eventBus, timezone, formTitle: props.title });
+  const handleTriggerClick = () => {
+    if (formStatus === "completed") return;
+    setFormStatus(formStatus === "open" ? "closed" : "open");
+  };
+  const setFieldValue = React.useCallback((name, value) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+  }, []);
+  const handleFieldChange = React.useCallback(
+    (fieldName, value, label, extraData) => {
+      setFieldValue(fieldName, value);
+      setFieldState(fieldName, { value, label, extraData });
+      setErrors((prev) => {
+        const next = { ...prev };
+        delete next[fieldName];
+        return next;
+      });
+      for (const f of fields) {
+        const deps = getDependencies(f);
+        if (deps.includes(fieldName)) {
+          const resetVal = f.type === "select_multiple" ? [] : "";
+          setFieldValue(f.name, resetVal);
+          setFieldState(f.name, { value: resetVal, label: "", options: [], extraData: void 0 });
+        }
+      }
+      setValues((currentValues) => {
+        const nextValues = { ...currentValues, [fieldName]: value };
+        for (const f of fields) {
+          const deps = getDependencies(f);
+          if (deps.includes(fieldName) && allDepsResolved(deps, nextValues)) {
+            if (f.endpoint) {
+              loadEndpoint(f, nextValues);
+            } else if (f.options_from) {
+              setTimeout(() => resolveOptionsFrom(f, nextValues), 0);
+            }
+          }
+        }
+        return nextValues;
+      });
+    },
+    [fields, getDependencies, allDepsResolved, loadEndpoint, resolveOptionsFrom, setFieldState, setFieldValue]
+  );
+  React.useEffect(() => {
+    if (formStatus !== "open") return;
+    const initialValues = buildInitialValues(fields);
+    for (const f of fields) {
+      if (!f.endpoint || fieldStates[f.name]?.options.length > 0) continue;
+      const deps = getDependencies(f);
+      if (deps.length === 0 || allDepsResolved(deps, initialValues)) {
+        loadEndpoint(f, initialValues);
+      }
+    }
+  }, [formStatus]);
+  React.useEffect(() => {
+    if (formStatus !== "open" || currentStep >= steps.length) return;
+    const stepFieldNames = steps[currentStep].fields;
+    setValues((currentValues) => {
+      for (const f of fields) {
+        if (!stepFieldNames.includes(f.name)) continue;
+        if (!f.endpoint && !f.options_from) continue;
+        if (fieldStates[f.name]?.options.length > 0) continue;
+        if (fieldStates[f.name]?.loading) continue;
+        const deps = getDependencies(f);
+        if (allDepsResolved(deps, currentValues)) {
+          if (f.endpoint) {
+            loadEndpoint(f, currentValues);
+          } else if (f.options_from) {
+            resolveOptionsFrom(f, currentValues);
+          }
+        }
+      }
+      return currentValues;
+    });
+  }, [currentStep, formStatus]);
+  const validateFields = async (fieldNames) => {
+    const fieldErrors = {};
+    try {
+      await validationSchema.validate(values, { abortEarly: false });
+    } catch (err) {
+      if (err && typeof err === "object" && "inner" in err) {
+        const yupErr = err;
+        for (const e of yupErr.inner) {
+          if (e.path && fieldNames.includes(e.path)) {
+            fieldErrors[e.path] = e.message;
+          }
+        }
+      }
+    }
+    return fieldErrors;
+  };
+  const validateStep = async (stepIndex) => {
+    if (stepIndex >= steps.length) return true;
+    const stepFieldNames = steps[stepIndex].fields;
+    const stepErrors = await validateFields(stepFieldNames);
+    setErrors((prev) => ({ ...prev, ...stepErrors }));
+    const touchMap = {};
+    for (const name of stepFieldNames) touchMap[name] = true;
+    setTouched((prev) => ({ ...prev, ...touchMap }));
+    return Object.keys(stepErrors).length === 0;
+  };
+  const handleNext = async () => {
+    const valid = await validateStep(currentStep);
+    if (valid) setCurrentStep((s) => s + 1);
+  };
+  const handleBack = () => setCurrentStep((s) => s - 1);
+  const [submitMessage, setSubmitMessage] = React.useState("");
+  const handleSubmit = async () => {
+    const resolvedPayload = resolveBody(submit.payload_map, values, fieldStates);
+    if (eventBus) {
+      try {
+        const data = await fetchViaEventBus(
+          eventBus,
+          submit.service,
+          submit.url,
+          submit.method,
+          resolvedPayload
+        );
+        const resp = data;
+        const notificationType = String(resp?.notification_type ?? "SUCCESS").toUpperCase();
+        const message = String(resp?.message ?? "");
+        const formLabels = {};
+        for (const [name, state] of Object.entries(fieldStates)) {
+          if (state.label) formLabels[name] = state.label;
+        }
+        eventBus.emit(CHAT_EVENT.FORM_SUBMIT, {
+          formType: "reactive_form",
+          submitUrl: submit.url,
+          result: data,
+          formValues: values,
+          formLabels
+        });
+        if (notificationType === "SUCCESS") {
+          setSubmitMessage(message || "Completado");
+          setFormStatus("completed");
+        } else if (notificationType === "WARNING") {
+          setSubmitMessage(message || "Advertencia");
+          setFormStatus("warning");
+        } else {
+          setSubmitMessage(message || "Error al procesar");
+          setFormStatus("error");
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Error al enviar formulario";
+        setSubmitMessage(message);
+        setFormStatus("error");
+      }
+    } else {
+      console.log("[ReactiveForm] Submit:", values);
+      console.log("[ReactiveForm] Payload map:", resolvedPayload);
+      setFormStatus("completed");
+    }
+  };
+  const resolveRows = (rows) => resolveSummaryRows(rows, values, fieldStates);
+  return {
+    formStatus,
+    setFormStatus,
+    submitMessage,
+    currentStep,
+    setCurrentStep,
+    values,
+    errors,
+    touched,
+    fieldStates,
+    validationSchema,
+    totalSteps,
+    handleTriggerClick,
+    setFieldValue,
+    handleFieldChange,
+    validateFields,
+    validateStep,
+    handleNext,
+    handleBack,
+    handleSubmit,
+    getDependencies,
+    allDepsResolved,
+    resolveSummaryRows: resolveRows
+  };
+}
+
+const MOBILE_BREAKPOINT = 640;
+const useIsMobile$1 = () => {
+  const [isMobile, setIsMobile] = React.useState(
+    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT : false
+  );
+  React.useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+};
+const ReactiveForm = ({ component, eventBus }) => {
+  const props = component.props;
+  const isMobile = useIsMobile$1();
+  const form = useReactiveForm({ ...props, eventBus });
+  if (component.answered && form.formStatus !== "completed" && form.formStatus !== "warning" && form.formStatus !== "error") {
+    form.setFormStatus("completed");
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ReactiveFormView,
+    {
+      ...props,
+      form,
+      drawerPlacement: isMobile ? "bottom" : "right"
+    }
+  );
+};
+
+function useStoreState(store, key) {
+  const [value, setValue] = React.useState(() => store.get(key));
+  React.useEffect(() => {
+    return store.subscribe(key, setValue);
+  }, [store, key]);
+  return value;
+}
+
+function createStore(initial) {
+  const state = { ...initial };
+  const listeners = {};
+  const notify = (key, value) => {
+    const keyStr = String(key);
+    listeners[keyStr]?.forEach((l) => l(value));
+  };
+  const subscribe = (key, listener) => {
+    const keyStr = String(key);
+    if (!listeners[keyStr]) listeners[keyStr] = /* @__PURE__ */ new Set();
+    listeners[keyStr].add(listener);
+    listener(state[key]);
+    return () => {
+      listeners[keyStr].delete(listener);
+    };
+  };
+  const set = (key, value) => {
+    state[key] = value;
+    notify(key, value);
+  };
+  const get = (key) => state[key];
+  return { set, get, subscribe };
+}
+
+const CAROUSEL_STORE_KEYS = {
+  ITEMS: "items",
+  ORIGINAL_ITEMS: "originalItems",
+  SEARCH_QUERY: "searchQuery",
+  SEARCH_STATUS: "searchStatus",
+  SELECTED_IDS: "selectedIds",
+  CURRENT_PAGE: "currentPage",
+  HAS_MORE: "hasMore"
+};
+
+function createCarouselStore(initialItems) {
+  return createStore({
+    [CAROUSEL_STORE_KEYS.ITEMS]: initialItems,
+    [CAROUSEL_STORE_KEYS.ORIGINAL_ITEMS]: initialItems,
+    [CAROUSEL_STORE_KEYS.SEARCH_QUERY]: "",
+    [CAROUSEL_STORE_KEYS.SEARCH_STATUS]: "idle",
+    [CAROUSEL_STORE_KEYS.SELECTED_IDS]: [],
+    [CAROUSEL_STORE_KEYS.CURRENT_PAGE]: 0,
+    [CAROUSEL_STORE_KEYS.HAS_MORE]: false
+  });
+}
+
+function createCarouselActions(store) {
+  return {
+    items: {
+      set: (items) => store.set(CAROUSEL_STORE_KEYS.ITEMS, items),
+      remove: (id) => {
+        const current = store.get(CAROUSEL_STORE_KEYS.ITEMS);
+        if (current.length <= 1) return;
+        store.set(CAROUSEL_STORE_KEYS.ITEMS, current.filter((i) => i.id !== id));
+      },
+      get: () => store.get(CAROUSEL_STORE_KEYS.ITEMS)
+    },
+    selection: {
+      toggle: (id) => {
+        const current = store.get(CAROUSEL_STORE_KEYS.SELECTED_IDS);
+        const next = current.includes(id) ? current.filter((i) => i !== id) : [...current, id];
+        store.set(CAROUSEL_STORE_KEYS.SELECTED_IDS, next);
+      },
+      clear: () => store.set(CAROUSEL_STORE_KEYS.SELECTED_IDS, []),
+      get: () => store.get(CAROUSEL_STORE_KEYS.SELECTED_IDS)
+    },
+    search: {
+      setQuery: (query) => store.set(CAROUSEL_STORE_KEYS.SEARCH_QUERY, query),
+      setStatus: (status) => store.set(CAROUSEL_STORE_KEYS.SEARCH_STATUS, status),
+      getQuery: () => store.get(CAROUSEL_STORE_KEYS.SEARCH_QUERY)
+    },
+    pagination: {
+      setPage: (page) => store.set(CAROUSEL_STORE_KEYS.CURRENT_PAGE, page),
+      setHasMore: (hasMore) => store.set(CAROUSEL_STORE_KEYS.HAS_MORE, hasMore),
+      getPage: () => store.get(CAROUSEL_STORE_KEYS.CURRENT_PAGE)
+    },
+    getOriginalItems: () => store.get(CAROUSEL_STORE_KEYS.ORIGINAL_ITEMS)
+  };
+}
+
+const SIZE_PX = { small: 80, medium: 120, large: 180 };
+const GAP_PX = 8;
+function calcPageLimit(size, containerWidth) {
+  const cardWidth = SIZE_PX[size];
+  return Math.max(1, Math.floor(containerWidth / (cardWidth + GAP_PX)));
+}
+function resolveSize(size, itemCount) {
+  if (size && size !== "auto") return size;
+  if (itemCount <= 3) return "large";
+  if (itemCount <= 6) return "medium";
+  return "small";
+}
+function mapResponseToItems(data, endpoint) {
+  let unwrapped = data;
+  if (unwrapped && typeof unwrapped === "object" && "response" in unwrapped) {
+    unwrapped = unwrapped.response;
+  }
+  if (endpoint.response_path && unwrapped && typeof unwrapped === "object" && !Array.isArray(unwrapped)) {
+    unwrapped = unwrapped[endpoint.response_path];
+  }
+  const arr = Array.isArray(unwrapped) ? unwrapped : [];
+  return arr.map((item) => {
+    const metadata = {};
+    if (endpoint.extra_fields) {
+      for (const field of endpoint.extra_fields) {
+        metadata[field] = item[field];
+      }
+    }
+    return {
+      id: String(item[endpoint.id_field] ?? ""),
+      type: endpoint.item_type,
+      title: endpoint.title_field ? String(item[endpoint.title_field] ?? "") : void 0,
+      description: endpoint.description_field ? String(item[endpoint.description_field] ?? "") : void 0,
+      src: endpoint.src_field ? String(item[endpoint.src_field] ?? "") : void 0,
+      file_type: endpoint.file_type_field ? String(item[endpoint.file_type_field] ?? "") : void 0,
+      status: "ready",
+      metadata: Object.keys(metadata).length > 0 ? metadata : void 0
+    };
+  });
+}
+
+const MOCK_NAMES = [
+  "Alpha",
+  "Beta",
+  "Gamma",
+  "Delta",
+  "Epsilon",
+  "Zeta",
+  "Eta",
+  "Theta",
+  "Iota",
+  "Kappa",
+  "Lambda",
+  "Mu",
+  "Nu",
+  "Xi",
+  "Omicron",
+  "Pi",
+  "Rho",
+  "Sigma",
+  "Tau",
+  "Upsilon",
+  "Phi",
+  "Chi",
+  "Psi",
+  "Omega",
+  "Altair",
+  "Vega",
+  "Sirius",
+  "Rigel",
+  "Polaris",
+  "Antares"
+];
+const MOCK_ITEMS = MOCK_NAMES.map((name, i) => ({
+  id: String(i + 1),
+  name: `Empresa ${name}`,
+  address: `Calle ${i + 1} #${(i + 1) * 10}-${(i + 1) * 5}`,
+  logo_url: `https://picsum.photos/seed/${name.toLowerCase()}/200`
+}));
+async function mockSearchFetch(query, skip, limit) {
+  await new Promise((r) => setTimeout(r, 400 + Math.random() * 300));
+  let filtered = MOCK_ITEMS;
+  if (query) {
+    filtered = MOCK_ITEMS.filter((i) => i.name.toLowerCase().includes(query.toLowerCase()));
+  }
+  return filtered.slice(skip, skip + limit);
+}
+function useCarouselSearch({ actions, endpoint, eventBus, pageLimit }) {
+  const loadingRef = React.useRef(false);
+  const search = React.useCallback(
+    async (query, page = 0) => {
+      if (loadingRef.current) return;
+      loadingRef.current = true;
+      actions.search.setQuery(query);
+      if (page === 0) {
+        actions.search.setStatus("loading");
+      }
+      const limit = endpoint?.limit ?? pageLimit;
+      const skip = page * limit;
+      const startTime = Date.now();
+      try {
+        let rawData;
+        if (eventBus && endpoint) {
+          const baseBody = endpoint.body ?? {};
+          const cleanBody = {};
+          for (const [k, v] of Object.entries(baseBody)) {
+            if (typeof v === "string" && v.includes("$query")) continue;
+            cleanBody[k] = v;
+          }
+          const body = {
+            ...cleanBody,
+            skip,
+            limit
+          };
+          if (query && endpoint.query_param) {
+            body.filters = [
+              ...Array.isArray(body.filters) ? body.filters : [],
+              { field: endpoint.query_param, condition: "like", value: query }
+            ];
+          }
+          eventBus.emit(CHAT_EVENT.FORM_TRACE, {
+            chatId: "",
+            formTitle: "carousel",
+            source: "carousel",
+            phase: "request",
+            service: endpoint.service,
+            url: endpoint.url,
+            method: endpoint.method,
+            body
+          });
+          rawData = await fetchViaEventBus(
+            eventBus,
+            endpoint.service,
+            endpoint.url,
+            endpoint.method,
+            body
+          );
+          eventBus.emit(CHAT_EVENT.FORM_TRACE, {
+            chatId: "",
+            formTitle: "carousel",
+            source: "carousel",
+            phase: "response",
+            service: endpoint.service,
+            url: endpoint.url,
+            method: endpoint.method,
+            status: 200,
+            duration_ms: Date.now() - startTime,
+            success: true,
+            response: rawData
+          });
+        } else {
+          rawData = await mockSearchFetch(query, skip, limit);
+        }
+        let newItems;
+        if (endpoint) {
+          newItems = mapResponseToItems(rawData, endpoint);
+        } else {
+          const arr = Array.isArray(rawData) ? rawData : [];
+          newItems = arr.map((item) => ({
+            id: String(item.id ?? ""),
+            type: "image",
+            title: String(item.name ?? ""),
+            description: String(item.address ?? ""),
+            src: String(item.logo_url ?? ""),
+            status: "ready"
+          }));
+        }
+        actions.items.set(newItems);
+        actions.pagination.setPage(page);
+        actions.pagination.setHasMore(newItems.length === limit);
+        actions.search.setStatus("idle");
+      } catch (err) {
+        actions.search.setStatus("error");
+        if (eventBus && endpoint) {
+          eventBus.emit(CHAT_EVENT.FORM_TRACE, {
+            chatId: "",
+            formTitle: "carousel",
+            source: "carousel",
+            phase: "response",
+            service: endpoint.service,
+            url: endpoint.url,
+            method: endpoint.method,
+            status: 500,
+            duration_ms: Date.now() - startTime,
+            success: false,
+            error: err instanceof Error ? err.message : "Error en busqueda"
+          });
+        }
+      } finally {
+        loadingRef.current = false;
+      }
+    },
+    [actions, endpoint, eventBus, pageLimit]
+  );
+  const loadNext = React.useCallback(() => {
+    const currentPage = actions.pagination.getPage();
+    const query = actions.search.getQuery();
+    search(query, currentPage + 1);
+  }, [actions, search]);
+  const loadPrev = React.useCallback(() => {
+    const currentPage = actions.pagination.getPage();
+    if (currentPage <= 0) return;
+    const query = actions.search.getQuery();
+    search(query, currentPage - 1);
+  }, [actions, search]);
+  return { search, loadNext, loadPrev };
+}
+
+const FILE_ICONS = {
+  pdf: "\u{1F4C4}",
+  doc: "\u{1F4DD}",
+  docx: "\u{1F4DD}",
+  xls: "\u{1F4CA}",
+  xlsx: "\u{1F4CA}",
+  ppt: "\u{1F4CE}",
+  pptx: "\u{1F4CE}",
+  zip: "\u{1F4E6}",
+  rar: "\u{1F4E6}",
+  jpg: "\u{1F5BC}\uFE0F",
+  jpeg: "\u{1F5BC}\uFE0F",
+  png: "\u{1F5BC}\uFE0F",
+  gif: "\u{1F5BC}\uFE0F",
+  webp: "\u{1F5BC}\uFE0F",
+  mp4: "\u{1F3AC}",
+  mov: "\u{1F3AC}",
+  avi: "\u{1F3AC}",
+  mp3: "\u{1F3B5}",
+  wav: "\u{1F3B5}"
+};
+const CarouselCard = ({
+  item,
+  size,
+  selectionMode,
+  isSelected,
+  disabled,
+  onSelect,
+  onRemove,
+  onPreview
+}) => {
+  const isSelectable = selectionMode !== "none" && !disabled;
+  const hasPreview = selectionMode === "none" && !!onPreview && item.src && (item.type === "image" || item.type === "file");
+  const isClickable = isSelectable || hasPreview;
+  const handleClick = () => {
+    if (isSelectable) {
+      if (selectionMode === "removable") return;
+      onSelect(item);
+      return;
+    }
+    if (hasPreview) {
+      onPreview(item);
+    }
+  };
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    if (disabled) return;
+    onRemove(item);
+  };
+  if (item.status === "loading") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `px-chat-carousel-card px-chat-carousel-card--${size} px-chat-carousel-card--loading`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-carousel-card__skeleton" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [
+        "px-chat-carousel-card",
+        `px-chat-carousel-card--${size}`,
+        `px-chat-carousel-card--${item.type}`,
+        isSelected ? "px-chat-carousel-card--selected" : "",
+        isClickable ? "px-chat-carousel-card--clickable" : "",
+        disabled ? "px-chat-carousel-card--disabled" : ""
+      ].filter(Boolean).join(" "),
+      onClick: handleClick,
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
+      onKeyDown: isClickable ? (e) => {
+        if (e.key === "Enter" || e.key === " ") handleClick();
+      } : void 0,
+      children: [
+        selectionMode === "removable" && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "px-chat-carousel-card__remove",
+            onClick: handleRemove,
+            "aria-label": "Eliminar",
+            type: "button",
+            children: "\xD7"
+          }
+        ),
+        isSelected && selectionMode !== "removable" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-carousel-card__check", children: "\u2713" }),
+        item.type === "image" && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            className: "px-chat-carousel-card__image",
+            src: item.src,
+            alt: item.title || "",
+            loading: "lazy"
+          }
+        ),
+        item.type === "file" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-carousel-card__file-icon", children: FILE_ICONS[item.file_type?.toLowerCase() ?? ""] || "\u{1F4C1}" }),
+        item.type === "text" && !item.title && !item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-carousel-card__file-icon", children: "\u{1F4CB}" }),
+        (item.title || item.description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-carousel-card__info", children: [
+          item.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-carousel-card__title", children: item.title }),
+          item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-carousel-card__description", children: item.description })
+        ] })
+      ]
+    }
+  );
+};
+
+const CarouselTrack = ({
+  currentPage,
+  hasMore,
+  onPrev,
+  onNext,
+  children
+}) => {
+  const trackRef = React.useRef(null);
+  React.useEffect(() => {
+    if (trackRef.current) {
+      trackRef.current.scrollLeft = 0;
+    }
+  }, [currentPage]);
+  const showPrev = currentPage > 0;
+  const showNext = hasMore;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-carousel-track-wrapper", children: [
+    showPrev && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "px-chat-carousel-track__nav",
+        onClick: onPrev,
+        type: "button",
+        "aria-label": "Anterior",
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-carousel-track", ref: trackRef, children }),
+    showNext && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "px-chat-carousel-track__nav",
+        onClick: onNext,
+        type: "button",
+        "aria-label": "Siguiente",
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" }) })
+      }
+    )
+  ] });
+};
+
+const DEBOUNCE_MS = 300;
+const CarouselSearch = ({ onSearch, loading }) => {
+  const [value, setValue] = React.useState("");
+  const timerRef = React.useRef(void 0);
+  const onSearchRef = React.useRef(onSearch);
+  onSearchRef.current = onSearch;
+  React.useEffect(() => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      onSearchRef.current(value);
+    }, DEBOUNCE_MS);
+    return () => clearTimeout(timerRef.current);
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-carousel-search", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: "px-chat-carousel-search__input",
+        type: "text",
+        placeholder: "Buscar...",
+        value,
+        onChange: (e) => setValue(e.target.value)
+      }
+    ),
+    loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-carousel-search__spinner" }),
+    value && !loading && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "px-chat-carousel-search__clear",
+        onClick: () => setValue(""),
+        type: "button",
+        "aria-label": "Limpiar",
+        children: "\xD7"
+      }
+    )
+  ] });
+};
+
+const CarouselConfirm = ({
+  label,
+  count,
+  disabled,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-carousel-confirm", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      className: "px-chat-carousel-confirm__button",
+      disabled,
+      onClick,
+      type: "button",
+      children: [
+        label,
+        " ",
+        count > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-chat-carousel-confirm__count", children: [
+          "(",
+          count,
+          ")"
+        ] })
+      ]
+    }
+  ) });
+};
+
+const CarouselDisplay = ({
+  component,
+  eventBus,
+  assistantMessageId = ""
+}) => {
+  const props = component.props;
+  const {
+    items: initialItems = [],
+    size: sizeProp,
+    selection_mode: selectionMode = "none",
+    confirm_label: confirmLabel = "Confirmar",
+    searchable = false,
+    search_endpoint: searchEndpoint,
+    field_name: fieldName = ""
+  } = props;
+  const isAnswered = component.answered === true;
+  const disabled = isAnswered && selectionMode !== "none";
+  const { store, actions } = React.useMemo(() => {
+    const s = createCarouselStore(initialItems);
+    if (searchable && initialItems.length === 0) {
+      s.set(CAROUSEL_STORE_KEYS.SEARCH_STATUS, "loading");
+    }
+    return { store: s, actions: createCarouselActions(s) };
+  }, []);
+  const items = useStoreState(store, CAROUSEL_STORE_KEYS.ITEMS);
+  const selectedIds = useStoreState(store, CAROUSEL_STORE_KEYS.SELECTED_IDS);
+  const searchStatus = useStoreState(store, CAROUSEL_STORE_KEYS.SEARCH_STATUS);
+  const hasMore = useStoreState(store, CAROUSEL_STORE_KEYS.HAS_MORE);
+  const currentPage = useStoreState(store, CAROUSEL_STORE_KEYS.CURRENT_PAGE);
+  const containerRef = React.useRef(null);
+  const resolvedSize = resolveSize(sizeProp, items.length);
+  const pageLimit = React.useMemo(() => {
+    const width = containerRef.current?.clientWidth ?? window.innerWidth;
+    return calcPageLimit(resolvedSize, width);
+  }, [resolvedSize]);
+  const { emitInteraction, isConfirmed } = useComponentInteraction({
+    eventBus,
+    fieldName,
+    componentType: "carousel",
+    assistantMessageId
+  });
+  const { search, loadNext, loadPrev } = useCarouselSearch({
+    actions,
+    endpoint: searchEndpoint,
+    eventBus,
+    pageLimit
+  });
+  React.useEffect(() => {
+    if (searchable && initialItems.length === 0) {
+      search("", 0);
+    }
+  }, []);
+  const handleSelect = React.useCallback(
+    (item) => {
+      if (disabled || isConfirmed) return;
+      if (selectionMode === "single") {
+        actions.selection.clear();
+        actions.selection.toggle(item.id);
+        emitInteraction(
+          [{ value: item.id, label: item.title || item.id }],
+          item.title || item.id
+        );
+        return;
+      }
+      if (selectionMode === "multiple") {
+        actions.selection.toggle(item.id);
+      }
+    },
+    [selectionMode, disabled, isConfirmed, actions, emitInteraction]
+  );
+  const handleRemove = React.useCallback(
+    (item) => {
+      if (disabled || isConfirmed) return;
+      actions.items.remove(item.id);
+    },
+    [disabled, isConfirmed, actions]
+  );
+  const handleConfirm = React.useCallback(() => {
+    if (disabled || isConfirmed) return;
+    if (selectionMode === "multiple") {
+      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);
+    }
+    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);
+    }
+  }, [selectionMode, disabled, isConfirmed, items, selectedIds, emitInteraction]);
+  const confirmDisabled = React.useMemo(() => {
+    if (selectionMode === "multiple") return selectedIds.length === 0;
+    if (selectionMode === "removable") {
+      const originalLen = actions.getOriginalItems().length;
+      return items.length === originalLen;
+    }
+    return true;
+  }, [selectionMode, selectedIds, items, actions]);
+  const showConfirm = (selectionMode === "multiple" || selectionMode === "removable") && !disabled && !isConfirmed;
+  if (selectionMode === "single" && (isConfirmed || isAnswered)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-carousel", ref: containerRef, children: [
+    searchable && /* @__PURE__ */ jsxRuntime.jsx(
+      CarouselSearch,
+      {
+        onSearch: (q) => search(q, 0),
+        loading: searchStatus === "loading"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CarouselTrack,
+      {
+        currentPage,
+        hasMore,
+        onPrev: loadPrev,
+        onNext: loadNext,
+        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          CarouselCard,
+          {
+            item,
+            size: resolvedSize,
+            selectionMode,
+            isSelected: selectedIds.includes(item.id),
+            disabled: disabled || isConfirmed,
+            onSelect: handleSelect,
+            onRemove: handleRemove
+          },
+          item.id
+        ))
+      }
+    ),
+    showConfirm && /* @__PURE__ */ jsxRuntime.jsx(
+      CarouselConfirm,
+      {
+        label: confirmLabel,
+        count: selectionMode === "multiple" ? selectedIds.length : items.length,
+        disabled: confirmDisabled,
+        onClick: handleConfirm
+      }
+    ),
+    items.length === 0 && searchStatus !== "loading" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-carousel__empty", children: "Sin resultados" })
+  ] });
+};
+
+const COMPONENT_MAP = {
+  select: SelectWithConfirm,
+  select_multiple: SelectMultipleWithConfirm,
+  confirm: ConfirmButton,
+  date_input: DateInputWithConfirm,
+  time_input: TimeInputWithConfirm,
+  input: InputWithConfirm,
+  card: CardDisplay,
+  badge: BadgeDisplay,
+  reactive_form: ReactiveForm,
+  carousel: CarouselDisplay
+};
+function renderComponent(props) {
+  const { component } = props;
+  if (component.answered && !DISPLAY_COMPONENTS.has(component.type)) {
+    return null;
+  }
+  const Component = COMPONENT_MAP[component.type];
+  if (!Component) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props });
+}
+
+const StructuredContent = ({
+  content,
+  eventBus,
+  assistantMessageId,
+  className = ""
+}) => {
+  const structured = parseContent(content);
+  const markdownContent = structured ? structured.message : content;
+  const rawComponent = structured?.component || null;
+  const components = rawComponent ? Array.isArray(rawComponent) ? rawComponent : [rawComponent] : [];
+  const hasVisibleComponents = components.some((comp) => !comp.answered || DISPLAY_COMPONENTS.has(comp.type));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${COMPONENT_PREFIX$1}structured-content ${className}`, children: [
+    markdownContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${COMPONENT_PREFIX$1}assistant-message__markdown${hasVisibleComponents ? ` ${COMPONENT_PREFIX$1}assistant-message__markdown--with-component` : ``}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ReactMarkdown,
+      {
+        components: {
+          a: ({ href, children }) => /* @__PURE__ */ jsxRuntime.jsx(
+            Link,
+            {
+              href: href || "#",
+              variant: "primary",
+              size: "medium",
+              weight: "bold",
+              underline: false,
+              children
+            }
+          )
+        },
+        children: markdownContent
+      }
+    ) }),
+    components.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${COMPONENT_PREFIX$1}structured-content__component`, children: components.map((comp, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderComponent({ component: comp, eventBus, assistantMessageId }) }, `${comp.type}-${index}`)) })
+  ] });
+};
+
+const getAttachmentType = (file) => {
+  const mimeType = file.type.toLowerCase();
+  if (mimeType.startsWith(MIME_PREFIXES.AUDIO)) {
+    return AttachmentType.AUDIO;
+  }
+  if (mimeType.startsWith(MIME_PREFIXES.VIDEO)) {
+    return AttachmentType.VIDEO;
+  }
+  if (mimeType.startsWith(MIME_PREFIXES.IMAGE)) {
+    return AttachmentType.IMAGE;
+  }
+  if (mimeType === MIME_TYPES.PDF) {
+    return AttachmentType.PDF;
+  }
+  if (mimeType.includes(MIME_KEYWORDS.DOCUMENT) || mimeType.includes(MIME_KEYWORDS.WORD) || mimeType.includes(MIME_KEYWORDS.EXCEL) || mimeType.includes(MIME_KEYWORDS.POWERPOINT) || mimeType.startsWith(MIME_PREFIXES.TEXT)) {
+    return AttachmentType.DOCUMENT;
+  }
+  return AttachmentType.OTHER;
+};
+const filterFilesByType = (files, type) => {
+  const types = Array.isArray(type) ? type : [type];
+  return files.filter((file) => {
+    const fileType = getAttachmentType(file);
+    return types.includes(fileType);
+  });
+};
+const getFileUrl = (file) => {
+  if (file.url) {
+    return file.url;
+  }
+  return URL.createObjectURL(file);
+};
+const getAudioFiles = (files) => {
+  return filterFilesByType(files, [AttachmentType.AUDIO]);
+};
+const getNonAudioFiles = (files) => {
+  return filterFilesByType(files, [
+    AttachmentType.IMAGE,
+    AttachmentType.PDF,
+    AttachmentType.DOCUMENT,
+    AttachmentType.OTHER
+  ]);
+};
+
+function deepMerge(target, source) {
   if (typeof target !== "object" || target === null) {
     return source;
   }
@@ -3218,24 +5027,248 @@ const AssistantMessage = ({
         className: `${COMPONENT_PREFIX$1}assistant-message__timestamp`,
         children: timestamp
       }
-    )
-  ] }) });
+    )
+  ] }) });
+};
+
+const initialState$1 = {
+  // ChatInput (molécula) - Estados del input de chat
+  chatInput: {
+    buttonSend: {
+      disabled: true,
+      // Disabled hasta que haya contenido
+      visible: false
+      // Inicialmente oculto
+    },
+    buttonMicrophone: {
+      disabled: false,
+      visible: true
+      // Inicialmente visible (botón de audio por defecto)
+    },
+    buttonAttachment: {
+      disabled: false
+    },
+    hasText: false,
+    hasAttachments: false
+  },
+  // AssistantThinkingIndicator (molécula) - Estado del indicador
+  assistantThinkingIndicator: {
+    visible: false,
+    agentName: void 0,
+    agentLabel: void 0,
+    toolName: void 0
+  },
+  // ScrollButton (átomo) - Estado del botón de scroll
+  scrollButton: {
+    visible: false
+  },
+  // VirtualKeyboard - Estado del teclado virtual
+  virtualKeyboard: {
+    isOpen: false
+  },
+  // Textarea - Estado del textarea del chat
+  textarea: {
+    isFocused: false,
+    isEmpty: true,
+    shouldPreventKeyboard: false,
+    shouldFocus: false,
+    shouldBlur: false
+  },
+  // Scroll to top trigger
+  scrollToTop: {
+    pending: false
+  }
+};
+const chatStore = createStore(initialState$1);
+const setChatStore = createStoreMerger(chatStore);
+const subscribeChatProperty = createDeepPropertySubscriber(chatStore);
+
+const CHAT_STORE_KEYS = {
+  // ChatInput relacionado
+  CHAT_INPUT: "chatInput",
+  // AssistantThinkingIndicator relacionado  
+  ASSISTANT_THINKING_INDICATOR: "assistantThinkingIndicator",
+  // ScrollButton relacionado
+  SCROLL_BUTTON: "scrollButton",
+  // VirtualKeyboard relacionado
+  VIRTUAL_KEYBOARD: "virtualKeyboard",
+  // Textarea relacionado
+  TEXTAREA: "textarea",
+  // Scroll to top trigger
+  SCROLL_TO_TOP: "scrollToTop"
+};
+
+const textareaActions = {
+  focus: () => setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: true }),
+  blur: () => setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldBlur: true }),
+  setFocused: (isFocused) => setChatStore(CHAT_STORE_KEYS.TEXTAREA, { isFocused }),
+  setEmpty: (isEmpty) => setChatStore(CHAT_STORE_KEYS.TEXTAREA, { isEmpty }),
+  setShouldPreventKeyboard: (shouldPrevent) => setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldPreventKeyboard: shouldPrevent }),
+  resetTriggers: () => setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: false, shouldBlur: false }),
+  maintainFocusAfterSend: () => {
+    setTimeout(() => {
+      setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: true });
+    }, 10);
+    setTimeout(() => {
+      setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: true });
+    }, 50);
+  },
+  preserveFocusWithKeyboard: () => {
+    setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: true });
+    setTimeout(() => {
+      setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: true });
+    }, 10);
+    setTimeout(() => {
+      setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: true });
+    }, 50);
+  }
+};
+const keyboardActions = {
+  setOpen: (isOpen) => setChatStore(CHAT_STORE_KEYS.VIRTUAL_KEYBOARD, { isOpen }),
+  open: () => setChatStore(CHAT_STORE_KEYS.VIRTUAL_KEYBOARD, { isOpen: true }),
+  close: () => setChatStore(CHAT_STORE_KEYS.VIRTUAL_KEYBOARD, { isOpen: false })
+};
+const chatInputActions = {
+  setSendDisabled: (disabled) => {
+    const currentState = chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT);
+    setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, {
+      buttonSend: {
+        disabled,
+        visible: currentState.buttonSend.visible
+      }
+    });
+  },
+  setMicDisabled: (disabled) => {
+    const currentState = chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT);
+    setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, {
+      buttonMicrophone: {
+        disabled,
+        visible: currentState.buttonMicrophone.visible
+      }
+    });
+  },
+  setAttachDisabled: (disabled) => setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, { buttonAttachment: { disabled } }),
+  setSendVisible: (visible) => {
+    const currentState = chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT);
+    setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, {
+      buttonSend: {
+        visible,
+        disabled: currentState.buttonSend.disabled
+      }
+    });
+  },
+  setMicVisible: (visible) => {
+    const currentState = chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT);
+    setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, {
+      buttonMicrophone: {
+        visible,
+        disabled: currentState.buttonMicrophone.disabled
+      }
+    });
+  },
+  setHasText: (hasText) => setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, { hasText }),
+  setHasAttachments: (hasAttachments) => setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, { hasAttachments }),
+  updateButtonVisibility: (hasText, hasAttachments) => {
+    const shouldShowSend = hasText || hasAttachments;
+    const shouldShowMic = !hasText && !hasAttachments;
+    const isThinking = chatStore.get(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR).visible;
+    const hasContent = hasText || hasAttachments;
+    const currentState = chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT);
+    setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, {
+      hasText,
+      hasAttachments,
+      buttonSend: {
+        visible: shouldShowSend,
+        disabled: isThinking || !hasContent
+      },
+      buttonMicrophone: {
+        visible: shouldShowMic,
+        disabled: currentState.buttonMicrophone.disabled
+      }
+    });
+  }
+};
+const thinkingActions = {
+  setVisible: (visible) => setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, { visible }),
+  show: () => setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, { visible: true }),
+  hide: () => setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, {
+    visible: false,
+    agentName: void 0,
+    agentLabel: void 0,
+    toolName: void 0
+  }),
+  setThinking: (isThinking) => {
+    setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, { visible: isThinking });
+  },
+  setAgentName: (agentName) => setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, { agentName }),
+  setAgentLabel: (agentLabel) => setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, { agentLabel }),
+  setToolName: (toolName) => setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, { toolName })
+};
+const scrollButtonActions = {
+  setVisible: (visible) => setChatStore(CHAT_STORE_KEYS.SCROLL_BUTTON, { visible }),
+  show: () => setChatStore(CHAT_STORE_KEYS.SCROLL_BUTTON, { visible: true }),
+  hide: () => setChatStore(CHAT_STORE_KEYS.SCROLL_BUTTON, { visible: false })
+};
+const scrollToTopActions = {
+  activate: () => setChatStore(CHAT_STORE_KEYS.SCROLL_TO_TOP, { pending: true }),
+  reset: () => setChatStore(CHAT_STORE_KEYS.SCROLL_TO_TOP, { pending: false })
+};
+const combinedActions = {
+  prepareFileButtonClick: (isEmpty, isKeyboardOpen) => {
+    if (!isKeyboardOpen && isEmpty) {
+      textareaActions.setShouldPreventKeyboard(true);
+      textareaActions.blur();
+    }
+  },
+  initializeChat: () => {
+    textareaActions.setEmpty(true);
+    textareaActions.setFocused(false);
+    keyboardActions.close();
+    thinkingActions.hide();
+    scrollButtonActions.hide();
+    chatInputActions.updateButtonVisibility(false, false);
+  },
+  handleMessageSend: () => {
+    textareaActions.maintainFocusAfterSend();
+  }
 };
 
-const messages = {
+const fallbackMessages = {
   short: ["Revisando...", "Procesando...", "Analizando..."],
   medium: ["Analizando tu consulta...", "Estoy viendo c\xF3mo resolverlo...", "Buscando la mejor manera de ayudarte..."],
   long: ["Sigo con esto. Un momento m\xE1s.", "Estoy en eso, ya te respondo.", "Ya casi lo tengo."],
   veryLong: ["Esto est\xE1 tardando mas de lo habitual.", "Esto lleva un poco m\xE1s de tiempo.", "Lleva un poco m\xE1s de lo normal."]
 };
 const getRandomMessage = (category) => {
-  const categoryMessages = messages[category];
+  const categoryMessages = fallbackMessages[category];
   return categoryMessages[Math.floor(Math.random() * categoryMessages.length)];
 };
 const AssistantThinkingIndicator = () => {
   const { showRoleLabels } = useChatConfig();
-  const [displayedMessage, setDisplayedMessage] = React.useState(getRandomMessage("short"));
+  const [fallbackMessage, setFallbackMessage] = React.useState(getRandomMessage("short"));
   const [elapsedSeconds, setElapsedSeconds] = React.useState(0);
+  const [agentLabel, setAgentLabel] = React.useState(
+    chatStore.get(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR).agentLabel
+  );
+  const [toolName, setToolName] = React.useState(
+    chatStore.get(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR).toolName
+  );
+  React.useEffect(() => {
+    const unsubLabel = subscribeChatProperty(
+      CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR,
+      "agentLabel",
+      setAgentLabel
+    );
+    const unsubTool = subscribeChatProperty(
+      CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR,
+      "toolName",
+      setToolName
+    );
+    return () => {
+      unsubLabel();
+      unsubTool();
+    };
+  }, []);
   React.useEffect(() => {
     const timer = setInterval(() => {
       setElapsedSeconds((prev) => prev + 1);
@@ -3244,13 +5277,14 @@ const AssistantThinkingIndicator = () => {
   }, []);
   React.useEffect(() => {
     if (elapsedSeconds === 6) {
-      setDisplayedMessage(getRandomMessage("medium"));
+      setFallbackMessage(getRandomMessage("medium"));
     } else if (elapsedSeconds === 13) {
-      setDisplayedMessage(getRandomMessage("long"));
+      setFallbackMessage(getRandomMessage("long"));
     } else if (elapsedSeconds === 21) {
-      setDisplayedMessage(getRandomMessage("veryLong"));
+      setFallbackMessage(getRandomMessage("veryLong"));
     }
   }, [elapsedSeconds]);
+  const displayedMessage = agentLabel ? toolName ? `${agentLabel} \u2014 ${toolName}` : `${agentLabel}...` : fallbackMessage;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${COMPONENT_PREFIX$1}assistant-thinking-indicator`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${COMPONENT_PREFIX$1}assistant-thinking-indicator__content`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${COMPONENT_PREFIX$1}assistant-thinking-indicator__bubble`, children: [
     showRoleLabels && /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "caption", color: "secondary", className: `${COMPONENT_PREFIX$1}assistant-thinking-indicator__role`, children: "Assistant" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${COMPONENT_PREFIX$1}assistant-thinking-indicator__text-container`, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "body", color: "primary", className: `${COMPONENT_PREFIX$1}assistant-thinking-indicator__wave-text`, children: displayedMessage.split("").map((char, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -3693,197 +5727,6 @@ const FullscreenViewer = ({
   );
 };
 
-const initialState$1 = {
-  // ChatInput (molécula) - Estados del input de chat
-  chatInput: {
-    buttonSend: {
-      disabled: true,
-      // Disabled hasta que haya contenido
-      visible: false
-      // Inicialmente oculto
-    },
-    buttonMicrophone: {
-      disabled: false,
-      visible: true
-      // Inicialmente visible (botón de audio por defecto)
-    },
-    buttonAttachment: {
-      disabled: false
-    },
-    hasText: false,
-    hasAttachments: false
-  },
-  // AssistantThinkingIndicator (molécula) - Estado del indicador
-  assistantThinkingIndicator: {
-    visible: false
-  },
-  // ScrollButton (átomo) - Estado del botón de scroll
-  scrollButton: {
-    visible: false
-  },
-  // VirtualKeyboard - Estado del teclado virtual
-  virtualKeyboard: {
-    isOpen: false
-  },
-  // Textarea - Estado del textarea del chat
-  textarea: {
-    isFocused: false,
-    isEmpty: true,
-    shouldPreventKeyboard: false,
-    shouldFocus: false,
-    shouldBlur: false
-  },
-  // Scroll to top trigger
-  scrollToTop: {
-    pending: false
-  }
-};
-const chatStore = createStore(initialState$1);
-const setChatStore = createStoreMerger(chatStore);
-const subscribeChatProperty = createDeepPropertySubscriber(chatStore);
-
-const CHAT_STORE_KEYS = {
-  // ChatInput relacionado
-  CHAT_INPUT: "chatInput",
-  // AssistantThinkingIndicator relacionado  
-  ASSISTANT_THINKING_INDICATOR: "assistantThinkingIndicator",
-  // ScrollButton relacionado
-  SCROLL_BUTTON: "scrollButton",
-  // VirtualKeyboard relacionado
-  VIRTUAL_KEYBOARD: "virtualKeyboard",
-  // Textarea relacionado
-  TEXTAREA: "textarea",
-  // Scroll to top trigger
-  SCROLL_TO_TOP: "scrollToTop"
-};
-
-const textareaActions = {
-  focus: () => setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: true }),
-  blur: () => setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldBlur: true }),
-  setFocused: (isFocused) => setChatStore(CHAT_STORE_KEYS.TEXTAREA, { isFocused }),
-  setEmpty: (isEmpty) => setChatStore(CHAT_STORE_KEYS.TEXTAREA, { isEmpty }),
-  setShouldPreventKeyboard: (shouldPrevent) => setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldPreventKeyboard: shouldPrevent }),
-  resetTriggers: () => setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: false, shouldBlur: false }),
-  maintainFocusAfterSend: () => {
-    setTimeout(() => {
-      setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: true });
-    }, 10);
-    setTimeout(() => {
-      setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: true });
-    }, 50);
-  },
-  preserveFocusWithKeyboard: () => {
-    setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: true });
-    setTimeout(() => {
-      setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: true });
-    }, 10);
-    setTimeout(() => {
-      setChatStore(CHAT_STORE_KEYS.TEXTAREA, { shouldFocus: true });
-    }, 50);
-  }
-};
-const keyboardActions = {
-  setOpen: (isOpen) => setChatStore(CHAT_STORE_KEYS.VIRTUAL_KEYBOARD, { isOpen }),
-  open: () => setChatStore(CHAT_STORE_KEYS.VIRTUAL_KEYBOARD, { isOpen: true }),
-  close: () => setChatStore(CHAT_STORE_KEYS.VIRTUAL_KEYBOARD, { isOpen: false })
-};
-const chatInputActions = {
-  setSendDisabled: (disabled) => {
-    const currentState = chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT);
-    setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, {
-      buttonSend: {
-        disabled,
-        visible: currentState.buttonSend.visible
-      }
-    });
-  },
-  setMicDisabled: (disabled) => {
-    const currentState = chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT);
-    setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, {
-      buttonMicrophone: {
-        disabled,
-        visible: currentState.buttonMicrophone.visible
-      }
-    });
-  },
-  setAttachDisabled: (disabled) => setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, { buttonAttachment: { disabled } }),
-  setSendVisible: (visible) => {
-    const currentState = chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT);
-    setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, {
-      buttonSend: {
-        visible,
-        disabled: currentState.buttonSend.disabled
-      }
-    });
-  },
-  setMicVisible: (visible) => {
-    const currentState = chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT);
-    setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, {
-      buttonMicrophone: {
-        visible,
-        disabled: currentState.buttonMicrophone.disabled
-      }
-    });
-  },
-  setHasText: (hasText) => setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, { hasText }),
-  setHasAttachments: (hasAttachments) => setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, { hasAttachments }),
-  updateButtonVisibility: (hasText, hasAttachments) => {
-    const shouldShowSend = hasText || hasAttachments;
-    const shouldShowMic = !hasText && !hasAttachments;
-    const isThinking = chatStore.get(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR).visible;
-    const hasContent = hasText || hasAttachments;
-    const currentState = chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT);
-    setChatStore(CHAT_STORE_KEYS.CHAT_INPUT, {
-      hasText,
-      hasAttachments,
-      buttonSend: {
-        visible: shouldShowSend,
-        disabled: isThinking || !hasContent
-      },
-      buttonMicrophone: {
-        visible: shouldShowMic,
-        disabled: currentState.buttonMicrophone.disabled
-      }
-    });
-  }
-};
-const thinkingActions = {
-  setVisible: (visible) => setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, { visible }),
-  show: () => setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, { visible: true }),
-  hide: () => setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, { visible: false }),
-  setThinking: (isThinking) => {
-    setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, { visible: isThinking });
-  }
-};
-const scrollButtonActions = {
-  setVisible: (visible) => setChatStore(CHAT_STORE_KEYS.SCROLL_BUTTON, { visible }),
-  show: () => setChatStore(CHAT_STORE_KEYS.SCROLL_BUTTON, { visible: true }),
-  hide: () => setChatStore(CHAT_STORE_KEYS.SCROLL_BUTTON, { visible: false })
-};
-const scrollToTopActions = {
-  activate: () => setChatStore(CHAT_STORE_KEYS.SCROLL_TO_TOP, { pending: true }),
-  reset: () => setChatStore(CHAT_STORE_KEYS.SCROLL_TO_TOP, { pending: false })
-};
-const combinedActions = {
-  prepareFileButtonClick: (isEmpty, isKeyboardOpen) => {
-    if (!isKeyboardOpen && isEmpty) {
-      textareaActions.setShouldPreventKeyboard(true);
-      textareaActions.blur();
-    }
-  },
-  initializeChat: () => {
-    textareaActions.setEmpty(true);
-    textareaActions.setFocused(false);
-    keyboardActions.close();
-    thinkingActions.hide();
-    scrollButtonActions.hide();
-    chatInputActions.updateButtonVisibility(false, false);
-  },
-  handleMessageSend: () => {
-    textareaActions.maintainFocusAfterSend();
-  }
-};
-
 const ChatInput = React.forwardRef(({
   value,
   onChange,
@@ -4808,6 +6651,15 @@ const useChatStore = () => {
   const [showThinking, setShowThinking] = React.useState(
     chatStore.get(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR).visible
   );
+  const [agentName, setAgentName] = React.useState(
+    chatStore.get(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR).agentName
+  );
+  const [agentLabel, setAgentLabel] = React.useState(
+    chatStore.get(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR).agentLabel
+  );
+  const [toolName, setToolName] = React.useState(
+    chatStore.get(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR).toolName
+  );
   const [scrollButtonState, setScrollButtonState] = React.useState(
     chatStore.get(CHAT_STORE_KEYS.SCROLL_BUTTON)
   );
@@ -4820,6 +6672,21 @@ const useChatStore = () => {
       "visible",
       setShowThinking
     );
+    const unsubAgentName = subscribeChatProperty(
+      CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR,
+      "agentName",
+      setAgentName
+    );
+    const unsubAgentLabel = subscribeChatProperty(
+      CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR,
+      "agentLabel",
+      setAgentLabel
+    );
+    const unsubToolName = subscribeChatProperty(
+      CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR,
+      "toolName",
+      setToolName
+    );
     const unsubScrollButton = subscribeChatProperty(
       CHAT_STORE_KEYS.SCROLL_BUTTON,
       "",
@@ -4832,12 +6699,18 @@ const useChatStore = () => {
     );
     return () => {
       unsubThinking();
+      unsubAgentName();
+      unsubAgentLabel();
+      unsubToolName();
       unsubScrollButton();
       unsubScrollToTop();
     };
   }, []);
   return {
     showThinking,
+    agentName,
+    agentLabel,
+    toolName,
     scrollButtonState,
     scrollToTopPending
   };