pixelon 0.3.23 → 0.3.25

package/dist/index.js

@@ -1641,6 +1641,130 @@ function parseContent(content) {
 
 const DISPLAY_COMPONENTS = /* @__PURE__ */ new Set(["card", "badge"]);
 
+const useAppHeight$5 = () => {
+  React.useEffect(() => {
+    const setDrawerHeight = () => {
+      const fullViewportHeight = window.innerHeight;
+      const documentHeight = document.documentElement.clientHeight;
+      const drawerHeight = Math.max(fullViewportHeight, documentHeight);
+      document.documentElement.style.setProperty(
+        "--app-height",
+        `${drawerHeight}px`
+      );
+      document.documentElement.style.setProperty(
+        "--drawer-height",
+        `${drawerHeight}px`
+      );
+      document.documentElement.style.setProperty(
+        "--viewport-height",
+        `${fullViewportHeight}px`
+      );
+    };
+    setDrawerHeight();
+    window.addEventListener("resize", setDrawerHeight);
+    window.addEventListener("orientationchange", setDrawerHeight);
+    document.addEventListener("fullscreenchange", setDrawerHeight);
+    return () => {
+      window.removeEventListener("resize", setDrawerHeight);
+      window.removeEventListener("orientationchange", setDrawerHeight);
+      document.removeEventListener("fullscreenchange", setDrawerHeight);
+    };
+  }, []);
+};
+
+const Drawer$1 = ({
+  isOpen,
+  onClose,
+  children,
+  title,
+  headerExtra,
+  footer,
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  className = ""
+}) => {
+  const [visible, setVisible] = React.useState(false);
+  const [animating, setAnimating] = React.useState(false);
+  const contentRef = React.useRef(null);
+  useAppHeight$5();
+  React.useEffect(() => {
+    if (isOpen) {
+      setVisible(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setAnimating(true));
+      });
+    } else {
+      setAnimating(false);
+      const timer = setTimeout(() => setVisible(false), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+  React.useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }
+  }, [isOpen]);
+  React.useEffect(() => {
+    if (!isOpen || !closeOnEscape) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose, closeOnEscape]);
+  const handleOverlayClick = React.useCallback((e) => {
+    if (e.target === e.currentTarget && closeOnOverlayClick) {
+      onClose();
+    }
+  }, [onClose, closeOnOverlayClick]);
+  if (!visible) return null;
+  const prefix = COMPONENT_PREFIX$1;
+  const overlayClasses = [
+    `${prefix}drawer-overlay`,
+    animating && `${prefix}drawer-overlay--visible`
+  ].filter(Boolean).join(" ");
+  const drawerClasses = [
+    `${prefix}drawer`,
+    animating && `${prefix}drawer--open`,
+    className
+  ].filter(Boolean).join(" ");
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: overlayClasses, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: drawerClasses,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? `${prefix}drawer-title` : void 0,
+        children: [
+          (title || showCloseButton || headerExtra) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${prefix}drawer__header`, children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("h2", { id: `${prefix}drawer-title`, className: `${prefix}drawer__title`, children: title }),
+            headerExtra && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${prefix}drawer__header-extra`, children: headerExtra }),
+            showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: `${prefix}drawer__close`,
+                onClick: onClose,
+                "aria-label": "Cerrar",
+                children: "\u2715"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: `${prefix}drawer__content`, children }),
+          footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${prefix}drawer__footer`, children: footer })
+        ]
+      }
+    ) }),
+    document.body
+  );
+};
+Drawer$1.displayName = "Drawer";
+
 function createEventBus() {
   const handlers = {};
   let externalBridge = null;
@@ -1671,6 +1795,7 @@ const CHAT_EVENT = {
   RETRY_MESSAGE: "retryMessage",
   PLACEHOLDER_UPDATED: "placeholderUpdated",
   THINKING_UPDATED: "thinkingUpdated",
+  INPUT_DISABLED: "inputDisabled",
   CLOSE: "close"
 };
 const chatEventBus = createEventBus();
@@ -1698,20 +1823,167 @@ function useComponentInteraction({
   return { emitInteraction, isConfirmed };
 }
 
+const MOBILE_BREAKPOINT$3 = 640;
+const useIsMobile$4 = () => {
+  const [isMobile, setIsMobile] = React.useState(
+    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT$3 : false
+  );
+  React.useEffect(() => {
+    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);
+  }, []);
+  return isMobile;
+};
 const SelectWithConfirm = ({
   component,
   eventBus,
   assistantMessageId = ""
 }) => {
   const [selected, setSelected] = React.useState(null);
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState("");
+  const searchInputRef = React.useRef(null);
+  const isMobile = useIsMobile$4();
   const { field_name, value, ...componentProps } = component.props;
+  const options = componentProps.options || [];
+  const placeholder = componentProps.placeholder || "Seleccionar...";
+  const label = componentProps.label || "";
   const { emitInteraction, isConfirmed } = useComponentInteraction({
     eventBus,
     fieldName: component.props.field_name,
     componentType: component.type,
     assistantMessageId
   });
+  const handleConfirm = () => {
+    if (selected) {
+      emitInteraction(selected.value, selected.label);
+      setIsDrawerOpen(false);
+    }
+  };
+  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]);
   if (isConfirmed) return null;
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-select-with-confirm", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "px-chat-select-with-confirm__label", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `px-chat-select-with-confirm__trigger ${isDrawerOpen ? "px-chat-select-with-confirm__trigger--open" : ""}`,
+          onClick: () => setIsDrawerOpen(true),
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") setIsDrawerOpen(true);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-chat-select-with-confirm__trigger-text ${!selected ? "px-chat-select-with-confirm__trigger-text--placeholder" : ""}`, children: selected ? selected.label : placeholder }),
+            selected && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "px-chat-select-with-confirm__clear",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setSelected(null);
+                },
+                "aria-label": "Limpiar selecci\xF3n",
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.CLOSE, size: "small" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-select-with-confirm__chevron", children: /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.CHEVRON_DOWN, size: "small" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button$1,
+        {
+          variant: "primary",
+          size: "small",
+          disabled: !selected,
+          onClick: handleConfirm,
+          children: "Confirmar"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Drawer$1,
+        {
+          isOpen: isDrawerOpen,
+          onClose: () => {
+            setIsDrawerOpen(false);
+            setSearchValue("");
+          },
+          title: label || placeholder,
+          footer: /* @__PURE__ */ jsxRuntime.jsx(
+            Button$1,
+            {
+              variant: "primary",
+              size: "medium",
+              disabled: !selected,
+              onClick: handleConfirm,
+              fullWidth: true,
+              children: "Confirmar"
+            }
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-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((option) => {
+              const isSelected = selected?.value === option.value;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "li",
+                {
+                  className: `px-chat-select-drawer__option ${isSelected ? "px-chat-select-drawer__option--selected" : ""} ${option.disabled ? "px-chat-select-drawer__option--disabled" : ""}`,
+                  onClick: () => {
+                    if (!option.disabled) {
+                      setSelected(option);
+                      setIsDrawerOpen(false);
+                      setSearchValue("");
+                    }
+                  },
+                  role: "option",
+                  "aria-selected": isSelected,
+                  children: [
+                    option.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-select-drawer__option-icon", children: option.icon }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-select-drawer__option-label", children: option.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" }) })
+                  ]
+                },
+                option.value
+              );
+            }) })
+          ] })
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-select-with-confirm", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Select$2,
@@ -1720,6 +1992,7 @@ const SelectWithConfirm = ({
         ...componentProps,
         variant: "chat",
         mode: "single",
+        showSearch: true,
         hideErrorSpace: true,
         allowClear: true,
         onClear: () => setSelected(null),
@@ -1732,27 +2005,185 @@ const SelectWithConfirm = ({
         variant: "primary",
         size: "small",
         disabled: !selected,
-        onClick: () => selected && emitInteraction(selected.value, selected.label),
+        onClick: handleConfirm,
         children: "Confirmar"
       }
     )
   ] });
 };
 
+const MOBILE_BREAKPOINT$2 = 640;
+const useIsMobile$3 = () => {
+  const [isMobile, setIsMobile] = React.useState(
+    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT$2 : false
+  );
+  React.useEffect(() => {
+    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);
+  }, []);
+  return isMobile;
+};
 const SelectMultipleWithConfirm = ({
   component,
   eventBus,
   assistantMessageId = ""
 }) => {
   const [selectedOptions, setSelectedOptions] = React.useState([]);
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState("");
+  const searchInputRef = React.useRef(null);
+  const isMobile = useIsMobile$3();
   const { field_name, value, ...componentProps } = component.props;
+  const options = componentProps.options || [];
+  const placeholder = componentProps.placeholder || "Seleccionar...";
+  const label = componentProps.label || "";
   const { emitInteraction, isConfirmed } = useComponentInteraction({
     eventBus,
     fieldName: component.props.field_name,
     componentType: component.type,
     assistantMessageId
   });
+  const handleConfirm = () => {
+    if (selectedOptions.length > 0) {
+      emitInteraction(
+        selectedOptions.map((o) => o.value),
+        selectedOptions.map((o) => o.label).join(", ")
+      );
+      setIsDrawerOpen(false);
+    }
+  };
+  const toggleOption = (option) => {
+    if (option.disabled) return;
+    const isSelected = selectedOptions.some((sel) => sel.value === option.value);
+    if (isSelected) {
+      setSelectedOptions(selectedOptions.filter((sel) => sel.value !== option.value));
+    } else {
+      setSelectedOptions([...selectedOptions, option]);
+    }
+  };
+  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]);
   if (isConfirmed) return null;
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-select-with-confirm", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "px-chat-select-with-confirm__label", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `px-chat-select-with-confirm__trigger ${isDrawerOpen ? "px-chat-select-with-confirm__trigger--open" : ""}`,
+          onClick: () => setIsDrawerOpen(true),
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") setIsDrawerOpen(true);
+          },
+          children: [
+            selectedOptions.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: selectedOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-chat-select-with-confirm__trigger-tag", children: [
+              opt.label,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "px-chat-select-with-confirm__trigger-tag-remove",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setSelectedOptions(selectedOptions.filter((s) => s.value !== opt.value));
+                  },
+                  "aria-label": `Quitar ${opt.label}`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.CLOSE, size: "small" })
+                }
+              )
+            ] }, opt.value)) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-select-with-confirm__chevron", children: /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.CHEVRON_DOWN, size: "small" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button$1,
+        {
+          variant: "primary",
+          size: "small",
+          disabled: selectedOptions.length === 0,
+          onClick: handleConfirm,
+          children: "Confirmar"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Drawer$1,
+        {
+          isOpen: isDrawerOpen,
+          onClose: () => {
+            setIsDrawerOpen(false);
+            setSearchValue("");
+          },
+          title: label || placeholder,
+          footer: /* @__PURE__ */ jsxRuntime.jsxs(
+            Button$1,
+            {
+              variant: "primary",
+              size: "medium",
+              disabled: selectedOptions.length === 0,
+              onClick: handleConfirm,
+              fullWidth: true,
+              children: [
+                "Confirmar",
+                selectedOptions.length > 0 ? ` (${selectedOptions.length})` : ""
+              ]
+            }
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-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((option) => {
+              const isSelected = selectedOptions.some((sel) => sel.value === option.value);
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "li",
+                {
+                  className: `px-chat-select-drawer__option ${isSelected ? "px-chat-select-drawer__option--selected" : ""} ${option.disabled ? "px-chat-select-drawer__option--disabled" : ""}`,
+                  onClick: () => toggleOption(option),
+                  role: "option",
+                  "aria-selected": isSelected,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-chat-select-drawer__checkbox ${isSelected ? "px-chat-select-drawer__checkbox--checked" : ""}`, children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: ICON_TYPES.CHECK, size: "small" }) }),
+                    option.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-select-drawer__option-icon", children: option.icon }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-select-drawer__option-label", children: option.label })
+                  ]
+                },
+                option.value
+              );
+            }) })
+          ] })
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-select-with-confirm", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Select$2,
@@ -1761,10 +2192,11 @@ const SelectMultipleWithConfirm = ({
         ...componentProps,
         variant: "chat",
         mode: "multiple",
+        showSearch: true,
         hideErrorSpace: true,
         allowClear: true,
         onClear: () => setSelectedOptions([]),
-        onChangeMultiple: (_values, options) => setSelectedOptions(options)
+        onChangeMultiple: (_values, opts) => setSelectedOptions(opts)
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1773,10 +2205,7 @@ const SelectMultipleWithConfirm = ({
         variant: "primary",
         size: "small",
         disabled: selectedOptions.length === 0,
-        onClick: () => emitInteraction(
-          selectedOptions.map((o) => o.value),
-          selectedOptions.map((o) => o.label).join(", ")
-        ),
+        onClick: handleConfirm,
         children: "Confirmar"
       }
     )
@@ -1830,130 +2259,6 @@ const InputWithConfirm = ({
   ] });
 };
 
-const useAppHeight$5 = () => {
-  React.useEffect(() => {
-    const setDrawerHeight = () => {
-      const fullViewportHeight = window.innerHeight;
-      const documentHeight = document.documentElement.clientHeight;
-      const drawerHeight = Math.max(fullViewportHeight, documentHeight);
-      document.documentElement.style.setProperty(
-        "--app-height",
-        `${drawerHeight}px`
-      );
-      document.documentElement.style.setProperty(
-        "--drawer-height",
-        `${drawerHeight}px`
-      );
-      document.documentElement.style.setProperty(
-        "--viewport-height",
-        `${fullViewportHeight}px`
-      );
-    };
-    setDrawerHeight();
-    window.addEventListener("resize", setDrawerHeight);
-    window.addEventListener("orientationchange", setDrawerHeight);
-    document.addEventListener("fullscreenchange", setDrawerHeight);
-    return () => {
-      window.removeEventListener("resize", setDrawerHeight);
-      window.removeEventListener("orientationchange", setDrawerHeight);
-      document.removeEventListener("fullscreenchange", setDrawerHeight);
-    };
-  }, []);
-};
-
-const Drawer$1 = ({
-  isOpen,
-  onClose,
-  children,
-  title,
-  headerExtra,
-  footer,
-  showCloseButton = true,
-  closeOnOverlayClick = true,
-  closeOnEscape = true,
-  className = ""
-}) => {
-  const [visible, setVisible] = React.useState(false);
-  const [animating, setAnimating] = React.useState(false);
-  const contentRef = React.useRef(null);
-  useAppHeight$5();
-  React.useEffect(() => {
-    if (isOpen) {
-      setVisible(true);
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => setAnimating(true));
-      });
-    } else {
-      setAnimating(false);
-      const timer = setTimeout(() => setVisible(false), 300);
-      return () => clearTimeout(timer);
-    }
-  }, [isOpen]);
-  React.useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-      return () => {
-        document.body.style.overflow = "";
-      };
-    }
-  }, [isOpen]);
-  React.useEffect(() => {
-    if (!isOpen || !closeOnEscape) return;
-    const handleEscape = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [isOpen, onClose, closeOnEscape]);
-  const handleOverlayClick = React.useCallback((e) => {
-    if (e.target === e.currentTarget && closeOnOverlayClick) {
-      onClose();
-    }
-  }, [onClose, closeOnOverlayClick]);
-  if (!visible) return null;
-  const prefix = COMPONENT_PREFIX$1;
-  const overlayClasses = [
-    `${prefix}drawer-overlay`,
-    animating && `${prefix}drawer-overlay--visible`
-  ].filter(Boolean).join(" ");
-  const drawerClasses = [
-    `${prefix}drawer`,
-    animating && `${prefix}drawer--open`,
-    className
-  ].filter(Boolean).join(" ");
-  return ReactDOM.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: overlayClasses, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: drawerClasses,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": title ? `${prefix}drawer-title` : void 0,
-        children: [
-          (title || showCloseButton || headerExtra) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${prefix}drawer__header`, children: [
-            title && /* @__PURE__ */ jsxRuntime.jsx("h2", { id: `${prefix}drawer-title`, className: `${prefix}drawer__title`, children: title }),
-            headerExtra && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${prefix}drawer__header-extra`, children: headerExtra }),
-            showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: `${prefix}drawer__close`,
-                onClick: onClose,
-                "aria-label": "Cerrar",
-                children: "\u2715"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: `${prefix}drawer__content`, children }),
-          footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${prefix}drawer__footer`, children: footer })
-        ]
-      }
-    ) }),
-    document.body
-  );
-};
-Drawer$1.displayName = "Drawer";
-
 const CHAT_CONFIG_DEFAULTS = {
   timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   locale: "es-ES",
@@ -3548,12 +3853,6 @@ const thinkingActions = {
   hide: () => setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, { visible: false }),
   setThinking: (isThinking) => {
     setChatStore(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR, { visible: isThinking });
-    if (isThinking) {
-      chatInputActions.setSendDisabled(true);
-    } else {
-      const currentInput = chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT);
-      chatInputActions.updateButtonVisibility(currentInput.hasText, currentInput.hasAttachments);
-    }
   }
 };
 const scrollButtonActions = {
@@ -4566,9 +4865,9 @@ const useChatHandlers = ({
   clearAttachments,
   scrollToLastUserMessage
 }) => {
-  const isThinking = () => chatStore.get(CHAT_STORE_KEYS.ASSISTANT_THINKING_INDICATOR).visible;
+  const isInputDisabled = () => chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT).buttonSend.disabled;
   const handleSendWithFiles = (content, files) => {
-    if (isThinking()) return;
+    if (isInputDisabled()) return;
     if (!content.trim() && (!files || files.length === 0)) return;
     combinedActions.handleMessageSend();
     onSend(content, files);
@@ -4579,7 +4878,7 @@ const useChatHandlers = ({
   const handleInputKeyDown = (e, inputValue, attachments) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      if (isThinking()) return;
+      if (isInputDisabled()) return;
       handleSendWithFiles(inputValue, attachments);
     }
   };
@@ -4916,12 +5215,21 @@ const Chat = ({
     const unsubComponent = eventBus.on(CHAT_EVENT.COMPONENT_INTERACTION, () => {
       scrollToTopActions.activate();
     });
+    const unsubInputDisabled = eventBus.on(CHAT_EVENT.INPUT_DISABLED, ({ disabled }) => {
+      if (disabled) {
+        chatInputActions.setSendDisabled(true);
+      } else {
+        const { hasText, hasAttachments } = chatStore.get(CHAT_STORE_KEYS.CHAT_INPUT);
+        chatInputActions.updateButtonVisibility(hasText, hasAttachments);
+      }
+    });
     return () => {
       unsubMessages();
       unsubHeader();
       unsubPlaceholder();
       unsubThinking();
       unsubComponent();
+      unsubInputDisabled();
     };
   }, [eventBus]);
   const handleSend = (content, files) => {
@@ -5006,33 +5314,37 @@ const Chat = ({
         ref: messagesContainerRef,
         onClick: handleMainClick,
         children: [
-          messageGroups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DateDivider, { date: group.date }),
-            group.messages.map((msg, msgIndex) => {
-              const key = msg.id ?? `${groupIndex}-${msgIndex}`;
-              return msg.role === "user" ? /* @__PURE__ */ jsxRuntime.jsx(
-                UserMessage,
-                {
-                  content: msg.content,
-                  timestamp: msg.timestamp,
-                  status: msg.status,
-                  onRetry: msg.status === "failed" ? () => handleRetry(msg) : void 0,
-                  files: msg.files
-                },
-                key
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                AssistantMessage,
-                {
-                  content: msg.content,
-                  timestamp: msg.timestamp,
-                  files: msg.files,
-                  eventBus,
-                  messageId: msg.id
-                },
-                key
-              );
-            })
-          ] }, `${group.date.getTime()}-${groupIndex}`)),
+          messageGroups.map((group, groupIndex) => {
+            const isToday = group.date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+            const showDivider = !(messageGroups.length === 1 && isToday);
+            return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+              showDivider && /* @__PURE__ */ jsxRuntime.jsx(DateDivider, { date: group.date }),
+              group.messages.map((msg, msgIndex) => {
+                const key = msg.id ?? `${groupIndex}-${msgIndex}`;
+                return msg.role === "user" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  UserMessage,
+                  {
+                    content: msg.content,
+                    timestamp: msg.timestamp,
+                    status: msg.status,
+                    onRetry: msg.status === "failed" ? () => handleRetry(msg) : void 0,
+                    files: msg.files
+                  },
+                  key
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  AssistantMessage,
+                  {
+                    content: msg.content,
+                    timestamp: msg.timestamp,
+                    files: msg.files,
+                    eventBus,
+                    messageId: msg.id
+                  },
+                  key
+                );
+              })
+            ] }, `${group.date.getTime()}-${groupIndex}`);
+          }),
           showThinking && /* @__PURE__ */ jsxRuntime.jsx(AssistantThinkingIndicator, {}),
           /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
         ]