@apia/components 3.0.21 → 3.0.23

package/dist/index.js

@@ -1,18 +1,18 @@
 import uniqueId$2 from 'lodash-es/uniqueId';
-import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, EventEmitter, useMount, getLabel, getSpecificParent, isChild, useUnmount, StatefulEmitter, debugDispatcher, customEvents, getDateFormat, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription } from '@apia/util';
+import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, EventEmitter, useMount, getLabel, getSpecificParent, isChild, useUnmount, StatefulEmitter, debugDispatcher, customEvents, getDateFormat, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, AudioRecorder } from '@apia/util';
 import { jsx, Fragment, jsxs } from '@apia/theme/jsx-runtime';
 import * as React from 'react';
 import React__default, { createContext, useContext, useMemo, useEffect, useState, useCallback, useRef, forwardRef, Fragment as Fragment$1, useDeferredValue, lazy, Suspense, useTransition, Children, memo, isValidElement, cloneElement } from 'react';
 import usePortal from 'react-cool-portal';
 import { CSSTransition } from 'react-transition-group';
-import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Spinner, Button, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, focusOutline, makeStyledComponent, useThemeUI, Label, Progress, Grid } from '@apia/theme';
+import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Spinner, Button, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, focusOutline, makeStyledComponent, useThemeUI, Label, Progress, Grid, Form, Textarea } from '@apia/theme';
 import { uniqueId as uniqueId$1, defaultNotifier, NotificationsList } from '@apia/notifications';
 import ReactFocusLock, { FreeFocusInside } from 'react-focus-lock';
 import { useBreakpointIndex as useBreakpointIndex$1 } from '@theme-ui/match-media';
+import { isIconName, Icon as Icon$1, icons, FileIcon } from '@apia/icons';
 import { useMenuState, ControlledMenu, MenuItem, MenuDivider, SubMenu } from '@szhsin/react-menu';
-import { makeAutoObservable, observable, reaction } from 'mobx';
+import { makeAutoObservable, observable, reaction, makeObservable, action } from 'mobx';
 import { shallowEqual } from '@apia/store';
-import { isIconName, Icon as Icon$1, icons } from '@apia/icons';
 import AnimateHeight from 'react-animate-height';
 import { useUpdateEffect as useUpdateEffect$1 } from 'ahooks';
 import dayjs from 'dayjs';
@@ -23,6 +23,8 @@ import { observer } from 'mobx-react-lite';
 import { createFAsomeStore } from '@apia/dom-store';
 import { BarLoader } from 'react-spinners';
 import { keyframes } from '@emotion/react';
+import { Collector } from '@apia/validations';
+import { IconButton as IconButton$2, ApiaUtil as ApiaUtil$1 } from '@apia/components';
 
 const AccordionContext = createContext(null);
 const AccordionItemContext = createContext(null);
@@ -33,10 +35,10 @@ const useAccordionContext = () => {
   return context;
 };
 
-var __defProp$h = Object.defineProperty;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$h = (obj, key, value) => {
-  __defNormalProp$h(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$l = Object.defineProperty;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$l = (obj, key, value) => {
+  __defNormalProp$l(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 function makeItemStateSelectorHook(handler) {
@@ -68,10 +70,10 @@ class AccordionHandler {
   constructor(id, props) {
     this.id = id;
     this.props = props;
-    __publicField$h(this, "itemsState", {});
-    __publicField$h(this, "itemsStateListeners", {});
-    __publicField$h(this, "propsListeners", []);
-    __publicField$h(this, "hooks", {
+    __publicField$l(this, "itemsState", {});
+    __publicField$l(this, "itemsStateListeners", {});
+    __publicField$l(this, "propsListeners", []);
+    __publicField$l(this, "hooks", {
       useAccordionContextProvider: () => {
         const Provider = useMemo(
           () => ({ children }) => /* @__PURE__ */ jsx(AccordionContext.Provider, { value: this, children }),
@@ -1007,10 +1009,10 @@ const WindowModal = forwardRef(
   }
 );
 
-var __defProp$g = Object.defineProperty;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$g = (obj, key, value) => {
-  __defNormalProp$g(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$k = Object.defineProperty;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$k = (obj, key, value) => {
+  __defNormalProp$k(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$c = (obj, member, msg) => {
@@ -1075,7 +1077,7 @@ _onDestroyCb = new WeakMap();
 const BodyScrollLock = new (_a$1 = class {
   constructor() {
     __privateAdd$c(this, _evaluate);
-    __publicField$g(this, "lockers", []);
+    __publicField$k(this, "lockers", []);
   }
   getLocker() {
     const locker = new BodyScrollLocker();
@@ -1349,7 +1351,8 @@ Modal.displayName = "Modal";
 const OpenModal = (props) => {
   const modalProps = useModal({
     isDefaultOpen: true,
-    onExited: props.onExited
+    onExited: props.onExited,
+    onClose: props.onClose
   });
   const previousOpenProp = usePrevious(props.isOpen);
   if (previousOpenProp.current !== props.isOpen && !props.isOpen) {
@@ -1363,6 +1366,10 @@ const OpenModal = (props) => {
       {
         ...props,
         ...modalProps,
+        onClose: () => {
+          modalProps.onClose?.();
+          props.onClose?.();
+        },
         onExited: () => {
           props.onClose?.();
           if (!hasConfirmed.current) {
@@ -1397,10 +1404,10 @@ const OpenModal = (props) => {
   );
 };
 
-var __defProp$f = Object.defineProperty;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$f = (obj, key, value) => {
-  __defNormalProp$f(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$j = Object.defineProperty;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$j = (obj, key, value) => {
+  __defNormalProp$j(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$b = (obj, member, msg) => {
@@ -1451,6 +1458,7 @@ class ApiaUtilModals {
             {
               ...ev,
               isOpen: true,
+              onClose: ev.onClose,
               onExited: () => {
                 ev.onExited?.();
                 setModals(
@@ -1480,7 +1488,7 @@ class ApiaUtilModals {
       });
       return modals;
     });
-    __publicField$f(this, "Component", () => {
+    __publicField$j(this, "Component", () => {
       const modals = __privateGet$8(this, _useModalsList).call(this);
       return /* @__PURE__ */ jsx(Fragment, { children: modals.map((current) => /* @__PURE__ */ jsx(OpenModal, { ...current }, current.id)) });
     });
@@ -1489,6 +1497,9 @@ class ApiaUtilModals {
       this.open(cevent.detail);
     });
   }
+  close(id) {
+    __privateGet$8(this, _emitter$4).emit("close", id);
+  }
   open(props) {
     const id = props.id ?? `modal_${__privateWrapper$2(this, _maxId$1)._++}`;
     __privateGet$8(this, _emitter$4).emit("open", { ...props, id });
@@ -1501,29 +1512,29 @@ _emitter$4 = new WeakMap();
 _maxId$1 = new WeakMap();
 _useModalsList = new WeakMap();
 
-var __defProp$e = Object.defineProperty;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$e = (obj, key, value) => {
-  __defNormalProp$e(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$i = Object.defineProperty;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$i = (obj, key, value) => {
+  __defNormalProp$i(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class ApiaUtilNotifications {
   constructor() {
-    __publicField$e(this, "close", (id) => {
+    __publicField$i(this, "close", (id) => {
       defaultNotifier.close(id);
     });
-    __publicField$e(this, "closeAll", () => {
+    __publicField$i(this, "closeAll", () => {
       defaultNotifier.closeAll();
     });
-    __publicField$e(this, "notify", (notification) => {
+    __publicField$i(this, "notify", (notification) => {
       defaultNotifier.notify({
         ...notification,
         type: notification.type ?? "warning"
       });
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    __publicField$e(this, "useSelector", (selector) => defaultNotifier.useSelector(selector));
-    __publicField$e(this, "Component", () => {
+    __publicField$i(this, "useSelector", (selector) => defaultNotifier.useSelector(selector));
+    __publicField$i(this, "Component", () => {
       return /* @__PURE__ */ jsx(NotificationsList, {});
     });
   }
@@ -1854,10 +1865,10 @@ const TabsList = observer(
   }
 );
 
-var __defProp$d = Object.defineProperty;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$d = (obj, key, value) => {
-  __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$h = Object.defineProperty;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$h = (obj, key, value) => {
+  __defNormalProp$h(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$a = (obj, member, msg) => {
@@ -1898,7 +1909,7 @@ class TabsController {
     this.id = id;
     this.props = props;
     __privateAdd$a(this, _innerAppend);
-    __publicField$d(this, "state", {
+    __publicField$h(this, "state", {
       openTabs: /* @__PURE__ */ new Set(),
       tabs: /* @__PURE__ */ new Map(),
       timestamp: 0
@@ -2545,10 +2556,10 @@ const AlertModal = ({ children, onClose, title }) => {
   );
 };
 
-var __defProp$c = Object.defineProperty;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$c = (obj, key, value) => {
-  __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$g = Object.defineProperty;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$g = (obj, key, value) => {
+  __defNormalProp$g(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$9 = (obj, member, msg) => {
@@ -2583,7 +2594,7 @@ class ApiaUtilDialogs {
     __privateAdd$9(this, _emitter$3, new EventEmitter());
     __privateAdd$9(this, _maxIdAlert, 0);
     __privateAdd$9(this, _maxIdConfirm, 0);
-    __publicField$c(this, "Component", () => {
+    __publicField$g(this, "Component", () => {
       const [confirmDialogs, setConfirmDialogs] = useState([]);
       const [alertsDialogs, setAlertsDialogs] = useState(
         []
@@ -2865,25 +2876,25 @@ parseCellValue_fn = function(cellValue) {
   return cellValue.match(/^\s*"?([^"]+)"?[\s\r\n]*$/)?.[1] ?? cellValue;
 };
 
-var __defProp$b = Object.defineProperty;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$b = (obj, key, value) => {
-  __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$f = Object.defineProperty;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$f = (obj, key, value) => {
+  __defNormalProp$f(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-let maxId = 0;
+let maxId$1 = 0;
 class ApiaUtilTooltip {
   constructor(props, close) {
     this.props = props;
     this.close = close;
-    __publicField$b(this, "id", `tooltip__${maxId++}`);
+    __publicField$f(this, "id", `tooltip__${maxId$1++}`);
   }
 }
 
-var __defProp$a = Object.defineProperty;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$a = (obj, key, value) => {
-  __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$e = Object.defineProperty;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$e = (obj, key, value) => {
+  __defNormalProp$e(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$7 = (obj, member, msg) => {
@@ -2917,7 +2928,7 @@ class AutomaticTooltip {
     __privateAdd$7(this, _tooltipTimeout, 0);
     __privateAdd$7(this, _unsuscribe, null);
     __privateAdd$7(this, _tooltipController, null);
-    __publicField$a(this, "ref", (el) => {
+    __publicField$e(this, "ref", (el) => {
       var _a, _b;
       (_a = __privateGet$6(this, _unsuscribe)) == null ? void 0 : _a.call(this);
       const listener = () => {
@@ -2935,9 +2946,6 @@ class AutomaticTooltip {
       };
       const reset = () => {
         clearTimeout(__privateGet$6(this, _tooltipTimeout));
-        if (__privateGet$6(this, _tooltip)?.closeOnMouseLeaveAttachedElement) {
-          __privateGet$6(this, _tooltipController)?.close();
-        }
       };
       if (el) {
         el.addEventListener("mousemove", listener);
@@ -2952,7 +2960,7 @@ class AutomaticTooltip {
       }
     });
     __privateAdd$7(this, _tooltip, null);
-    __publicField$a(this, "update", (tooltip) => {
+    __publicField$e(this, "update", (tooltip) => {
       __privateSet$5(this, _tooltip, tooltip);
     });
     __privateSet$5(this, _tooltip, tooltip);
@@ -3062,19 +3070,23 @@ function calculateTooltipPosition({
     const availableTopSpace = actualAnchorPoint.top;
     const availableLeftSpace = actualAnchorPoint.left;
     const availableRightSpace = window.innerWidth - actualAnchorPoint.left;
-    const isEnoughToRight = (minSize?.width ?? 0) <= availableRightSpace;
-    const isEnoughToLeft = (minSize?.width ?? 0) <= availableLeftSpace;
-    const isEnoughToBottom = (minSize?.height ?? 0) <= availableBottomSpace;
-    const isEnoughToTop = (minSize?.height ?? 0) <= availableTopSpace;
+    const isEnoughToRight = ((preferredSize?.width !== "auto" ? preferredSize?.width : void 0) ?? minSize?.width ?? 0) <= availableRightSpace;
+    const isEnoughToLeft = ((preferredSize?.width !== "auto" ? preferredSize?.width : void 0) ?? minSize?.width ?? 0) <= availableLeftSpace;
+    const isEnoughToBottom = ((preferredSize?.height !== "auto" ? preferredSize?.height : void 0) ?? minSize?.height ?? 0) <= availableBottomSpace;
+    const isEnoughToTop = ((preferredSize?.height !== "auto" ? preferredSize?.height : void 0) ?? minSize?.height ?? 0) <= availableTopSpace;
     const preferredWidth = preferredSize.width === "auto" ? Infinity : preferredSize.width;
     const preferredHeight = preferredSize.height === "auto" ? Infinity : preferredSize.height;
     const position = {
       "& > *": {
         width: "100%",
-        height: "100%"
+        height: "100%",
+        overflow: "auto"
       },
-      width: preferredSize.width === "auto" ? "auto" : "100%",
-      height: preferredSize.height === "auto" ? "auto" : "100%"
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      width: preferredSize.width === "auto" ? "auto" : void 0,
+      height: preferredSize.height === "auto" ? "auto" : void 0
     };
     if (preferredOrientationX === "left") {
       if (isEnoughToLeft) {
@@ -3300,10 +3312,10 @@ const Tooltip = ({
   );
 };
 
-var __defProp$9 = Object.defineProperty;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$9 = (obj, key, value) => {
-  __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$d = Object.defineProperty;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$d = (obj, key, value) => {
+  __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$6 = (obj, member, msg) => {
@@ -3323,7 +3335,7 @@ var _emitter$2, _shoutChangedList;
 class ApiaUtilTooltips {
   constructor() {
     __privateAdd$6(this, _emitter$2, new EventEmitter());
-    __publicField$9(this, "tooltips", []);
+    __publicField$d(this, "tooltips", []);
     __privateAdd$6(this, _shoutChangedList, () => {
       __privateGet$5(this, _emitter$2).emit("changedList", [...this.tooltips]);
     });
@@ -3331,7 +3343,7 @@ class ApiaUtilTooltips {
      * Permite crear un tooltip que se abrirá automáticamente al estar parado
      * sobre un elemento durante 300ms
      */
-    __publicField$9(this, "useHover", (tooltip) => {
+    __publicField$d(this, "useHover", (tooltip) => {
       let tt = void 0;
       tt = useMemo(() => {
         tt?.ref(null);
@@ -3342,15 +3354,15 @@ class ApiaUtilTooltips {
       });
       return tt;
     });
-    __publicField$9(this, "close", (id) => {
+    __publicField$d(this, "close", (id) => {
       this.tooltips = this.tooltips.filter((current) => current.id !== id);
       __privateGet$5(this, _shoutChangedList).call(this);
     });
-    __publicField$9(this, "closeAll", () => {
+    __publicField$d(this, "closeAll", () => {
       this.tooltips = [];
       __privateGet$5(this, _shoutChangedList).call(this);
     });
-    __publicField$9(this, "open", (tooltip) => {
+    __publicField$d(this, "open", (tooltip) => {
       const controller = new ApiaUtilTooltip(tooltip, () => {
         this.close(controller.id);
         controller.props.onClose?.();
@@ -3363,7 +3375,7 @@ class ApiaUtilTooltips {
       __privateGet$5(this, _shoutChangedList).call(this);
       return controller;
     });
-    __publicField$9(this, "Component", () => {
+    __publicField$d(this, "Component", () => {
       const [tooltips, setTooltips] = useState(this.tooltips);
       useMount(() => {
         const unsuscribeToList = __privateGet$5(this, _emitter$2).on("changedList", (ev) => {
@@ -3399,10 +3411,10 @@ class ApiaUtilTooltips {
 _emitter$2 = new WeakMap();
 _shoutChangedList = new WeakMap();
 
-var __defProp$8 = Object.defineProperty;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$8 = (obj, key, value) => {
-  __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$c = Object.defineProperty;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$c = (obj, key, value) => {
+  __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$5 = (obj, member, msg) => {
@@ -3439,7 +3451,7 @@ class ApiaUtilMenu {
   constructor() {
     __privateAdd$5(this, _emitter$1, new EventEmitter());
     __privateAdd$5(this, _items$1, []);
-    __publicField$8(this, "menuProps", null);
+    __publicField$c(this, "menuProps", null);
     __privateAdd$5(this, _hooks, {
       useIsOpen: () => {
         const [isOpen, setIsOpen] = useState(false);
@@ -3454,10 +3466,10 @@ class ApiaUtilMenu {
         ];
       }
     });
-    __publicField$8(this, "close", () => {
+    __publicField$c(this, "close", () => {
       __privateGet$4(this, _emitter$1).emit("toggle", false);
     });
-    __publicField$8(this, "open", ({
+    __publicField$c(this, "open", ({
       menuProps,
       items
     }) => {
@@ -3473,10 +3485,15 @@ class ApiaUtilMenu {
         if (isSubmenu(current)) {
           return /* @__PURE__ */ jsx(SubMenu, { label: current.label, children: __privateGet$4(this, _RenderMenu).call(this, current) }, `submenu${__privateWrapper(this, _maxId)._++}`);
         }
-        return /* @__PURE__ */ createElement(MenuItem, { ...current, key: current.key });
+        const children = current.icon ? /* @__PURE__ */ jsxs(Box, { className: "withIcon", children: [
+          /* @__PURE__ */ jsx(Icon$1, { name: current.icon, title: current.title }),
+          " ",
+          current.children
+        ] }) : current.children;
+        return /* @__PURE__ */ createElement(MenuItem, { ...current, key: current.key }, children);
       }) });
     });
-    __publicField$8(this, "Component", () => {
+    __publicField$c(this, "Component", () => {
       const [isOpen, close] = __privateGet$4(this, _hooks).useIsOpen();
       if (!isOpen)
         return null;
@@ -3501,17 +3518,17 @@ _hooks = new WeakMap();
 _maxId = new WeakMap();
 _RenderMenu = new WeakMap();
 
-var __defProp$7 = Object.defineProperty;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$7 = (obj, key, value) => {
-  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$b = Object.defineProperty;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$b = (obj, key, value) => {
+  __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class ApiaUtilMouse extends EventEmitter {
   constructor() {
     super();
-    __publicField$7(this, "x", 0);
-    __publicField$7(this, "y", 0);
+    __publicField$b(this, "x", 0);
+    __publicField$b(this, "y", 0);
     document.addEventListener("mousemove", (ev) => {
       this.x = ev.clientX;
       this.y = ev.clientY;
@@ -3523,10 +3540,10 @@ class ApiaUtilMouse extends EventEmitter {
   }
 }
 
-var __defProp$6 = Object.defineProperty;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$6 = (obj, key, value) => {
-  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$a = Object.defineProperty;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$a = (obj, key, value) => {
+  __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$4 = (obj, member, msg) => {
@@ -3550,15 +3567,15 @@ var __privateSet$3 = (obj, member, value, setter) => {
 var _instance;
 const _ApiaUtil = class _ApiaUtil {
   constructor() {
-    __publicField$6(this, "dialogs");
-    __publicField$6(this, "menu");
-    __publicField$6(this, "modals");
-    __publicField$6(this, "mouse");
-    __publicField$6(this, "notifications");
-    __publicField$6(this, "parsers");
-    __publicField$6(this, "tabs");
-    __publicField$6(this, "tooltips");
-    __publicField$6(this, "Component", () => {
+    __publicField$a(this, "dialogs");
+    __publicField$a(this, "menu");
+    __publicField$a(this, "modals");
+    __publicField$a(this, "mouse");
+    __publicField$a(this, "notifications");
+    __publicField$a(this, "parsers");
+    __publicField$a(this, "tabs");
+    __publicField$a(this, "tooltips");
+    __publicField$a(this, "Component", () => {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(this.dialogs.Component, {}),
         /* @__PURE__ */ jsx(this.modals.Component, {}),
@@ -3587,22 +3604,22 @@ _instance = new WeakMap();
 __privateAdd$4(_ApiaUtil, _instance, void 0);
 let ApiaUtil = _ApiaUtil;
 
-var __defProp$5 = Object.defineProperty;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$5 = (obj, key, value) => {
-  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$9 = Object.defineProperty;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$9 = (obj, key, value) => {
+  __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class ScreenLocker {
   constructor() {
-    __publicField$5(this, "emitter", new StatefulEmitter({
+    __publicField$9(this, "emitter", new StatefulEmitter({
       locks: {
         common: { count: 0 },
         linear: { count: 0 },
         white: { count: 1 }
       }
     }));
-    __publicField$5(this, "lock", (options) => {
+    __publicField$9(this, "lock", (options) => {
       this.emitter.setState("locks", (s) => {
         const key = options?.type ?? "common";
         return {
@@ -3618,11 +3635,11 @@ class ScreenLocker {
         };
       });
     });
-    __publicField$5(this, "hasReleased", false);
+    __publicField$9(this, "hasReleased", false);
     /**
      * This method will work once, then, the action will be ignored. The ScreenLocker starts always locked on white, when this method is called, all listeners of onRelease will be called and the lock will be released.
      */
-    __publicField$5(this, "release", () => {
+    __publicField$9(this, "release", () => {
       if (this.hasReleased)
         return;
       this.hasReleased = true;
@@ -3638,11 +3655,11 @@ class ScreenLocker {
     /**
      * This method notifies when the screenLock is released by the first time.
      */
-    __publicField$5(this, "onRelease", this.emitter.on.bind(this.emitter, "release"));
+    __publicField$9(this, "onRelease", this.emitter.on.bind(this.emitter, "release"));
     /**
      * This component is the responsible for putting the lock courtain in the browser when it's required. It must be used once per application.
      */
-    __publicField$5(this, "Component", () => {
+    __publicField$9(this, "Component", () => {
       const locks = this.emitter.useState("locks");
       const style = {
         alignItems: "center",
@@ -3712,10 +3729,10 @@ const OptionsBox = observer(() => {
   }) });
 });
 
-var __defProp$4 = Object.defineProperty;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$4 = (obj, key, value) => {
-  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$8 = Object.defineProperty;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$8 = (obj, key, value) => {
+  __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$3 = (obj, member, msg) => {
@@ -3739,7 +3756,7 @@ var __privateSet$2 = (obj, member, value, setter) => {
 var _actualSearch, _makeSearch, _search;
 class AutocompleteController {
   constructor(properties) {
-    __publicField$4(this, "state", {
+    __publicField$8(this, "state", {
       disabled: false,
       id: uniqueId$3("autocomplete"),
       loading: false,
@@ -3764,7 +3781,7 @@ class AutocompleteController {
       return debounce(__privateGet$2(this, _actualSearch), this.state.searchDebounce);
     });
     __privateAdd$3(this, _search, __privateGet$2(this, _makeSearch).call(this));
-    __publicField$4(this, "tooltipRef", null);
+    __publicField$8(this, "tooltipRef", null);
     Object.assign(this.state, properties);
     if (properties.value) {
       this.state.showValue = properties.value;
@@ -4424,10 +4441,10 @@ const Checkbox$1 = forwardRef(
 );
 Checkbox$1.displayName = "Checkbox";
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => {
-  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$7 = Object.defineProperty;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$7 = (obj, key, value) => {
+  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$2 = (obj, member, msg) => {
@@ -4452,7 +4469,7 @@ var _onFocusCallbacks, _a;
 const historySize = 50;
 const globalFocus = new (_a = class {
   constructor() {
-    __publicField$3(this, "focused", []);
+    __publicField$7(this, "focused", []);
     __privateAdd$2(this, _onFocusCallbacks, []);
     debugDispatcher.on(
       "focusHistory",
@@ -4687,8 +4704,11 @@ const DateInput = React__default.forwardRef(
     const shoutOnChange = React__default.useCallback(
       (newValue) => {
         if (newValue !== lastEmittedValue.current && onChange) {
-          lastEmittedValue.current = newValue;
-          return onChange(newValue);
+          const result = onChange(newValue);
+          if (result) {
+            lastEmittedValue.current = newValue;
+          }
+          return result;
         }
         return true;
       },
@@ -5924,10 +5944,10 @@ const ListboxItem = memo(
 );
 ListboxItem.displayName = "ListboxItem";
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$6 = (obj, key, value) => {
+  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$1 = (obj, member, msg) => {
@@ -5949,10 +5969,10 @@ class WaiTypeAhead extends EventEmitter {
     super();
     __privateAdd$1(this, _restoreTimeout);
     __privateAdd$1(this, _shout);
-    __publicField$2(this, "frequency", 2.5);
+    __publicField$6(this, "frequency", 2.5);
     // Keys per second
-    __publicField$2(this, "timeout", 0);
-    __publicField$2(this, "typing", "");
+    __publicField$6(this, "timeout", 0);
+    __publicField$6(this, "typing", "");
     const { onMultipleKeys, onSingleKey, onTypeUpdate } = props ?? {};
     if (onMultipleKeys)
       this.on("multipleKeys", onMultipleKeys);
@@ -7524,18 +7544,18 @@ function importComponent(path) {
   });
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => {
+  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class ToolbarController extends EventEmitter {
   constructor() {
     super(...arguments);
-    __publicField$1(this, "eventListeners", {});
-    __publicField$1(this, "itemsState", {});
-    __publicField$1(this, "hooks", {
+    __publicField$5(this, "eventListeners", {});
+    __publicField$5(this, "itemsState", {});
+    __publicField$5(this, "hooks", {
       useItemState: (id, initialState) => {
         const [state, setState] = useState(initialState);
         useEffect(() => {
@@ -7549,11 +7569,11 @@ class ToolbarController extends EventEmitter {
         return state;
       }
     });
-    __publicField$1(this, "setItemState", (id, newState) => {
+    __publicField$5(this, "setItemState", (id, newState) => {
       this.itemsState[id] = { ...this.itemsState[id], ...newState };
       this.emit("updateItemState", id);
     });
-    __publicField$1(this, "Context", ({ children }) => {
+    __publicField$5(this, "Context", ({ children }) => {
       return /* @__PURE__ */ jsx(ToolbarControllerContext.Provider, { value: this, children });
     });
   }
@@ -7724,10 +7744,10 @@ const Toolbar = ({
   ) });
 };
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck = (obj, member, msg) => {
@@ -7758,7 +7778,7 @@ class SortableListHandler {
   constructor() {
     __privateAdd(this, _emitter, new EventEmitter());
     __privateAdd(this, _items, []);
-    __publicField(this, "updateChildren", (items) => {
+    __publicField$4(this, "updateChildren", (items) => {
       __privateSet(this, _items, Children.toArray(items).filter(
         (el) => isValidElement(el)
       ));
@@ -7776,7 +7796,7 @@ class SortableListHandler {
       __privateGet(this, _items).splice(insertIndex + (after ? 1 : 0), 0, item);
       __privateGet(this, _emitter).emit("sort", null);
     });
-    __publicField(this, "useItemEvents", () => {
+    __publicField$4(this, "useItemEvents", () => {
       const unsuscribe = useRef(() => {
       });
       const ref = useCallback((el) => {
@@ -7818,7 +7838,7 @@ class SortableListHandler {
       }, []);
       return ref;
     });
-    __publicField(this, "useSortChange", (onSortChange) => {
+    __publicField$4(this, "useSortChange", (onSortChange) => {
       useSubscription({
         makeSubscription: () => {
           return __privateGet(this, _emitter).on("sort", () => {
@@ -7827,7 +7847,7 @@ class SortableListHandler {
         }
       });
     });
-    __publicField(this, "useWrapperEvents", () => {
+    __publicField$4(this, "useWrapperEvents", () => {
       const unsuscribe = useRef(() => {
       });
       const ref = useCallback((el) => {
@@ -7940,5 +7960,838 @@ const SortableList = makeStyledComponent(
   UnstyledSortableList
 );
 
-export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, BaseButton, CalendarModal, Captcha, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, IconButton, IconInput, IconsList, LabelBox, LinearLoader$1 as LinearLoader, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner$1 as LoaderSpinner, Modal, NumberInput, Overlay, ProgressBar$1 as ProgressBar, RequiredMark, ScreenLocker, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useModal, useModalContext, useOtherTagButton };
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+let maxId = 0;
+class ChatMessage {
+  constructor(message = "", messageType = "user", attachments = [], reference = null) {
+    this.message = message;
+    this.messageType = messageType;
+    this.attachments = attachments;
+    this.reference = reference;
+    __publicField$3(this, "id");
+    __publicField$3(this, "clone", () => new ChatMessage(
+      this.message,
+      this.messageType,
+      this.attachments.map((x) => {
+        return { ...x };
+      }),
+      this.reference
+    ));
+    this.id = maxId++;
+    if (messageType === "response")
+      this.messageType = "system";
+    if (typeof message === "string")
+      this.message = message;
+    makeObservable(this, {
+      attachments: observable,
+      message: observable,
+      messageType: observable,
+      reference: observable
+    });
+  }
+  removeAttachment(attachment) {
+    this.attachments = this.attachments.filter(
+      (current) => current !== attachment
+    );
+  }
+  addAttachmentDescription(attachment, description) {
+    const a = this.attachments.find((current) => current === attachment);
+    if (a) {
+      a.description = description;
+    }
+  }
+}
+
+const AutoscrollContainer = ({ children }) => {
+  const observer = useRef(null);
+  const unsuscribe = useRef(null);
+  const isFullScrolled = useRef(false);
+  const hasInited = useRef(false);
+  const ref = useCallback((el) => {
+    if (!el)
+      return;
+    if (!hasInited.current) {
+      hasInited.current = true;
+      el.scrollTo({
+        top: el.getBoundingClientRect().height,
+        behavior: "auto"
+      });
+      isFullScrolled.current = true;
+    }
+    observer.current?.disconnect();
+    unsuscribe.current?.();
+    observer.current = new MutationObserver(([mutation]) => {
+      if (mutation && mutation.target instanceof HTMLElement) {
+        if (isFullScrolled.current && el.scrollTop !== el.scrollHeight - el.offsetHeight) {
+          el.scrollTo({
+            top: el.scrollHeight,
+            behavior: "smooth"
+          });
+        }
+      }
+    });
+    observer.current.observe(el, { childList: true, subtree: true });
+    const handleScroll = (ev) => {
+      if (ev.target === el && el instanceof HTMLElement) {
+        setTimeout(() => {
+          isFullScrolled.current = Math.abs(el.scrollTop - (el.scrollHeight - el.offsetHeight)) < 150;
+        }, 100);
+      }
+    };
+    el.addEventListener("scroll", handleScroll);
+    unsuscribe.current = () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...getVariant("layout.common.components.autoscrollContainer"),
+      className: "autoscrollContainer",
+      ref,
+      children
+    }
+  );
+};
+
+function getBase64FromFile(f) {
+  return ((f2) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(f2);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject();
+  }))(f);
+}
+function getBase64FromBlob(b) {
+  return ((blob) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const base64String = reader.result;
+      resolve(base64String);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  }))(b);
+}
+function getFileExtension(name) {
+  return name.split(".").at(-1);
+}
+function isImage(base64) {
+  const imageRegex = /^data:image\/(png|jpeg|jpg|gif|webp|bmp|tiff);base64,/;
+  return imageRegex.test(base64);
+}
+
+const FileAttachment = observer(
+  ({
+    attachment,
+    onAddDescription,
+    onRemove
+  }) => {
+    const { ref } = ApiaUtil.instance.tooltips.useHover({
+      preferredOrientationX: "left",
+      preferredOrientationY: "top",
+      minSize: {
+        width: 200,
+        height: 400
+      },
+      attachToMousePosition: true,
+      closeOnMouseLeaveAttachedElement: true,
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "column"
+          },
+          children: [
+            /* @__PURE__ */ jsx("h1", { children: attachment.name }),
+            /* @__PURE__ */ jsx("img", { src: attachment.value }),
+            attachment.description && /* @__PURE__ */ jsx(Label, { children: attachment.description })
+          ]
+        }
+      )
+    });
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        id: `file_box_${attachment.id}`,
+        className: "file_box",
+        ref: isImage(attachment.value) ? ref : null,
+        children: [
+          /* @__PURE__ */ jsx(FileIcon, { className: "file_box__icon", docName: attachment.name }),
+          /* @__PURE__ */ jsx(Box, { className: "file_box__name", title: attachment.name, children: attachment.name }),
+          onAddDescription && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: "Edit",
+              className: "file_box__description",
+              onClick: () => {
+                const collector = new Collector();
+                collector.add(
+                  new collector.fields.textarea(
+                    "desc",
+                    getLabel("lblDesc").text,
+                    { initialValue: attachment.description }
+                  )
+                );
+                collector.show({
+                  onConfirm: (ev) => {
+                    if (ev) {
+                      onAddDescription(attachment, ev.desc);
+                    }
+                    return true;
+                  }
+                });
+              },
+              variant: "icon-only"
+            }
+          ),
+          onRemove && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: "Close",
+              className: "file_box__remove",
+              onClick: onRemove,
+              variant: "icon-only"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+const Attachments = observer(
+  ({
+    attachments,
+    onRemove,
+    onAddDescription
+  }) => {
+    if (!attachments.length)
+      return null;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: "attachments",
+        ...getVariant("layout.common.newChat.attachments"),
+        children: attachments.map((x) => /* @__PURE__ */ jsx(
+          FileAttachment,
+          {
+            attachment: x,
+            onRemove: onRemove ? () => onRemove(x) : void 0,
+            onAddDescription
+          },
+          x.id
+        ))
+      }
+    );
+  }
+);
+
+const Message = observer(
+  ({
+    className,
+    type,
+    id,
+    message,
+    attachments,
+    reference
+  }) => {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        as: "pre",
+        className: `history_message ${className || ""} ${type}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "history_message__content",
+              ...typeof message === "string" ? { dangerouslySetInnerHTML: { __html: message } } : { children: message }
+            }
+          ),
+          attachments.length > 0 && /* @__PURE__ */ jsx(Attachments, { attachments }),
+          reference && /* @__PURE__ */ jsx(Box, { className: "history_message__references", children: reference })
+        ]
+      },
+      id
+    );
+  }
+);
+
+const History = observer(({ messages }) => {
+  let currentType = "";
+  return /* @__PURE__ */ jsx(AutoscrollContainer, { children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...getVariant("layout.common.newChat.history"),
+      className: "chat_history",
+      children: messages.map((current, i) => {
+        let first = false;
+        let last = false;
+        if (currentType !== current.messageType) {
+          currentType = current.messageType;
+          first = true;
+        }
+        if (i === messages.length - 1 || messages[i + 1].messageType !== current.messageType) {
+          last = true;
+        }
+        return /* @__PURE__ */ jsx(
+          Message,
+          {
+            className: first ? "first" : last ? "last" : void 0,
+            type: current.messageType,
+            id: String(current.id),
+            attachments: current.attachments,
+            reference: current.reference,
+            message: current.message
+          }
+        );
+      })
+    }
+  ) });
+});
+
+const TextArea = observer(
+  ({
+    isLoading,
+    isRecording,
+    disablePrevButton,
+    disableNextButton,
+    onSubmit,
+    onChange,
+    onClearHistory,
+    onAttach,
+    onRecord,
+    onVideoRecord,
+    onPrev,
+    onNext,
+    value
+  }) => {
+    const fileInputRef = useRef(null);
+    const searchControlsRef = useRef(null);
+    const recordButton = /* @__PURE__ */ jsx(
+      IconButton$2,
+      {
+        className: `${isRecording ? "isRecording" : ""}`,
+        variant: "icon-only",
+        onClick: onRecord,
+        disabled: isLoading && !isRecording,
+        sx: {
+          color: isRecording ? "red" : void 0
+        },
+        icon: isRecording ? "Stop" : "Microphone",
+        id: "transcribeAudio",
+        iconSize: "Sm",
+        title: getLabel("lblAiRecordAudio").text
+      }
+    );
+    const handleAttachments = async (ev) => {
+      if (ev.target.files) {
+        for await (const f of ev.target.files) {
+          const base64 = await getBase64FromFile(f);
+          onAttach({
+            value: base64,
+            name: f.name,
+            id: f.name
+          });
+        }
+        ev.target.value = "";
+      }
+    };
+    const menuItemsList = [
+      {
+        children: getLabel("btnUpload").text,
+        title: getLabel("btnUpload").text,
+        icon: "File",
+        onClick: () => fileInputRef.current?.click(),
+        key: "2"
+      },
+      {
+        title: getLabel("lblOpenCamera").text,
+        children: getLabel("lblOpenCamera").text,
+        icon: "Camera",
+        onClick: onVideoRecord,
+        key: "3"
+      },
+      {
+        title: getLabel("lblAiRecordAudio").text,
+        children: getLabel("lblAiRecordAudio").text,
+        key: "4",
+        onClick: (event) => onRecord(event),
+        icon: isRecording ? "Stop" : "Microphone"
+      },
+      "separator",
+      {
+        icon: "ArrowLeft",
+        children: getLabel("btnAiPrevious").text,
+        title: getLabel("btnAiPrevious").text,
+        onClick: onPrev,
+        disabled: disablePrevButton,
+        key: "0"
+      },
+      {
+        icon: "ArrowRight",
+        children: getLabel("btnAiNext").text,
+        title: getLabel("btnAiNext").text,
+        onClick: onNext,
+        disabled: disableNextButton,
+        key: "1"
+      },
+      "separator",
+      {
+        icon: "Trash",
+        onClick: onClearHistory,
+        key: "5",
+        children: getLabel("btnAiDeleteMessages").text,
+        title: getLabel("btnAiDeleteMessages").text
+      }
+    ];
+    return /* @__PURE__ */ jsxs(
+      Form,
+      {
+        onSubmit: (ev) => {
+          ev.preventDefault();
+          onSubmit();
+        },
+        className: "search_controls",
+        ...getVariant("layout.common.newChat.form"),
+        children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              ref: searchControlsRef,
+              "aria-label": (
+                /** TODO: Crear etiqueta para búsqueda */
+                "Frase de b\xFAsqueda"
+              ),
+              value,
+              className: "searchTextArea",
+              onChange: (ev) => onChange(ev.target.value),
+              onKeyDown: (ev) => {
+                if (ev.code === "Enter" && !ev.shiftKey) {
+                  ev.preventDefault();
+                  ev.target.closest("form").querySelector('[type="submit"]').click();
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              id: "invisible__attach__file",
+              type: "file",
+              multiple: true,
+              onChange: handleAttachments,
+              sx: { display: "none" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton$2,
+            {
+              className: "ChatBarButton",
+              disabled: isLoading,
+              icon: "Ellipsis",
+              variant: "icon-only",
+              iconSize: "Sm",
+              onClick: (ev) => {
+                ApiaUtil$1.instance.menu.open({
+                  menuProps: {
+                    anchorPoint: { x: ev.clientX, y: ev.clientY }
+                  },
+                  items: menuItemsList
+                });
+              }
+            }
+          ),
+          isRecording ? recordButton : /* @__PURE__ */ jsx(
+            IconButton$2,
+            {
+              className: "ChatBarButton",
+              isLoading,
+              icon: "ArrowRight",
+              variant: "icon-only",
+              iconSize: "Sm",
+              title: getLabel("btnBus").title,
+              type: "submit"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class CameraController {
+  constructor() {
+    __publicField$2(this, "state", {
+      videoStream: null,
+      isOpen: false
+    });
+    __publicField$2(this, "currentCapture", null);
+    __publicField$2(this, "videoElement");
+    __publicField$2(this, "Component", () => {
+      return /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref: (el) => {
+            if (el) {
+              el.srcObject = this.videoElement.srcObject;
+              el.autoplay = true;
+              el.playsInline = true;
+            }
+          },
+          style: { width: "100%", height: "auto" }
+        }
+      );
+    });
+    makeObservable(this, {
+      state: observable,
+      openCamera: action,
+      closeCamera: action
+    });
+    this.videoElement = document.createElement("video");
+    this.videoElement.autoplay = true;
+    this.videoElement.playsInline = true;
+  }
+  async openCamera() {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      this.state.videoStream = stream;
+      this.videoElement.srcObject = stream;
+      this.state.isOpen = true;
+      ApiaUtil$1.instance.modals.open({
+        children: /* @__PURE__ */ jsx(this.Component, {}),
+        onConfirm: () => {
+          this.closeCamera();
+        },
+        onClose: () => {
+          this.closeCamera();
+        }
+      });
+    } catch (error) {
+      console.error("Error while accessing the camera:", error);
+      this.state.isOpen = false;
+      this.closeCamera();
+    }
+  }
+  async closeCamera() {
+    if (!this.videoElement.srcObject)
+      return null;
+    const canvas = document.createElement("canvas");
+    canvas.width = this.videoElement.videoWidth;
+    canvas.height = this.videoElement.videoHeight;
+    const ctx = canvas.getContext("2d");
+    if (ctx)
+      ctx.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
+    this.currentCapture = await new Promise((resolve) => {
+      canvas.toBlob((blob) => {
+        if (blob) {
+          const file = new File([blob], "captured_image.jpg", {
+            type: "image/jpeg"
+          });
+          resolve(file);
+        } else {
+          this.closeCamera();
+        }
+      }, "image/jpeg");
+    }).finally(() => {
+      this.state.videoStream?.getTracks().forEach((track) => track.stop());
+      this.state.videoStream = null;
+      this.videoElement.srcObject = null;
+      this.state.isOpen = false;
+    });
+  }
+  pop() {
+    const returnFile = this.currentCapture;
+    this.currentCapture = null;
+    return returnFile;
+  }
+}
+
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ChatController {
+  constructor(props, onMessageSubmit) {
+    this.onMessageSubmit = onMessageSubmit;
+    __publicField$1(this, "currentIndex", 0);
+    __publicField$1(this, "state", {
+      isLoading: false,
+      canRecord: true,
+      canAttach: true,
+      maxAttachmentsSize: 100,
+      messages: [],
+      currentMessage: new ChatMessage("", "user")
+    });
+    __publicField$1(this, "internalAudioRecorder", new AudioRecorder());
+    __publicField$1(this, "internalCameraRecorder", new CameraController());
+    __publicField$1(this, "maxId", 0);
+    __publicField$1(this, "audioRecorder", {
+      start: () => {
+        this.state.isLoading = true;
+        this.internalAudioRecorder.start().then(async (blob) => {
+          this.state.currentMessage.attachments.push({
+            id: String(this.maxId++),
+            name: `userRecord_${this.audioRecorder.record++}.wav`,
+            value: await getBase64FromBlob(blob)
+          });
+          this.handleSubmit();
+        }).finally(() => {
+          this.state.isLoading = false;
+        });
+      },
+      stop: async () => {
+        this.internalAudioRecorder.stop();
+      },
+      record: 0,
+      state: this.internalAudioRecorder.state
+    });
+    __publicField$1(this, "handleSubmit", async () => {
+      if (this.state.currentMessage.message || this.state.currentMessage.attachments.length > 0) {
+        this.state.isLoading = true;
+        await this.onMessageSubmit({
+          message: this.state.currentMessage,
+          ...this.getAdditionalProps()
+        });
+        this.state.isLoading = false;
+        this.state.currentMessage = new ChatMessage("", "user");
+      }
+    });
+    __publicField$1(this, "History", observer(() => /* @__PURE__ */ jsx(History, { messages: this.state.messages })));
+    __publicField$1(this, "Attachments", observer(() => /* @__PURE__ */ jsx(
+      Attachments,
+      {
+        attachments: this.state.currentMessage.attachments,
+        onRemove: (a) => {
+          this.removeAttachment(a);
+        },
+        onAddDescription: (a, ev) => this.state.currentMessage.addAttachmentDescription(a, ev)
+      }
+    )));
+    __publicField$1(this, "TextArea", observer(() => /* @__PURE__ */ jsx(
+      TextArea,
+      {
+        value: this.state.currentMessage.message,
+        isLoading: this.state.isLoading,
+        isRecording: this.internalAudioRecorder.state.recording,
+        disablePrevButton: !this.canGoPrev(),
+        disableNextButton: !this.canGoNext(),
+        onChange: (ev) => {
+          this.state.currentMessage.message = ev;
+        },
+        onSubmit: () => this.handleSubmit(),
+        onClearHistory: () => {
+          this.clearHistory();
+        },
+        onAttach: async (ev) => {
+          this.state.currentMessage.attachments.push({
+            ...ev,
+            id: String(this.maxId++)
+          });
+        },
+        onRecord: () => {
+          !this.internalAudioRecorder.state.recording ? this.audioRecorder.start() : this.audioRecorder.stop();
+        },
+        onVideoRecord: async () => {
+          !this.internalCameraRecorder.state.isOpen && await this.internalCameraRecorder.openCamera();
+          await new Promise((resolve, _) => {
+            const checkCapture = async () => {
+              if (!this.internalCameraRecorder.state.isOpen) {
+                const capture = this.internalCameraRecorder.pop();
+                if (capture) {
+                  this.state.currentMessage.attachments.push({
+                    id: String(this.maxId++),
+                    name: capture.name,
+                    value: await getBase64FromFile(capture)
+                  });
+                  return resolve();
+                }
+              } else {
+                requestAnimationFrame(checkCapture);
+              }
+            };
+            checkCapture();
+          });
+        },
+        onPrev: () => {
+          this.prevMessage();
+        },
+        onNext: () => {
+          this.nextMessage();
+        },
+        attachments: []
+      }
+    )));
+    __publicField$1(this, "Renderer", () => /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ...getVariant("layout.common.newChat.controller"),
+        className: "chat_controller",
+        children: [
+          /* @__PURE__ */ jsx(this.History, {}),
+          /* @__PURE__ */ jsx(this.Attachments, {}),
+          /* @__PURE__ */ jsx(this.TextArea, {})
+        ]
+      }
+    ));
+    this.state = Object.assign({}, this.state, props);
+    makeObservable(this, { state: observable });
+  }
+  removeMessage(idx) {
+    this.state.messages = this.state.messages.filter((_, i) => i !== idx);
+  }
+  addMessage(message) {
+    this.state.messages.push(message);
+    this.currentIndex = this.state.messages.length;
+  }
+  clearHistory() {
+    this.state.messages = [];
+  }
+  clearMessage() {
+    this.state.currentMessage = new ChatMessage("", "user");
+  }
+  removeAttachment(attachment) {
+    this.state.currentMessage.removeAttachment(attachment);
+  }
+  isForHistory(message) {
+    return message && message.messageType === "user";
+  }
+  canGoNext() {
+    let condition = false;
+    const slice = this.state.messages.slice(
+      this.currentIndex,
+      this.state.messages.length
+    );
+    const n = slice.length;
+    if (this.currentIndex + 1 > n) {
+      return condition;
+    }
+    for (let i = 0; i < n && !condition; i++) {
+      const current = slice[i];
+      condition = current.messageType === "user";
+    }
+    return condition;
+  }
+  canGoPrev() {
+    let condition = false;
+    if (this.currentIndex - 1 === -1) {
+      return condition;
+    }
+    for (let i = this.state.messages.slice(0, this.currentIndex).length - 1; i >= 0 && !condition; i--) {
+      const current = this.state.messages[i];
+      condition = current.messageType === "user";
+    }
+    return condition;
+  }
+  nextMessage() {
+    let newCurrentMessage = void 0;
+    let i = this.currentIndex;
+    const n = this.state.messages.length;
+    if (n === 0 || n - 1 === i) {
+      return;
+    }
+    while (!newCurrentMessage && i < n - 1) {
+      newCurrentMessage = this.state.messages[i + 1];
+      i++;
+      if (this.isForHistory(newCurrentMessage)) {
+        this.state.currentMessage = newCurrentMessage.clone();
+        break;
+      } else {
+        newCurrentMessage = void 0;
+      }
+      if (i === this.currentIndex) {
+        break;
+      }
+    }
+    this.currentIndex = i;
+  }
+  prevMessage() {
+    let newCurrentMessage = void 0;
+    let i = this.currentIndex;
+    const n = this.state.messages.length;
+    if (n === 0 || i === 0) {
+      return;
+    }
+    while (!newCurrentMessage && i > 0) {
+      newCurrentMessage = this.state.messages[i - 1];
+      i--;
+      if (this.isForHistory(newCurrentMessage)) {
+        this.state.currentMessage = newCurrentMessage.clone();
+        break;
+      } else {
+        newCurrentMessage = void 0;
+      }
+      if (i === this.currentIndex) {
+        break;
+      }
+    }
+    this.currentIndex = i;
+  }
+  getAdditionalProps() {
+    return {};
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class FloatingChatController extends ChatController {
+  constructor(props, onMessageSubmit, modalTitle) {
+    super({ ...props, isVisible: true }, onMessageSubmit);
+    this.modalTitle = modalTitle;
+    __publicField(this, "Window", observer(() => {
+      return this.state.isVisible ? /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          className: "chat_controller__open",
+          icon: "Magic",
+          size: "Md",
+          variant: "icon-outline",
+          onClick: () => {
+            this.state.isVisible = false;
+            this.open(() => {
+              this.state.isVisible = true;
+            });
+          }
+        }
+      ) : null;
+    }));
+    makeObservable({ open: action });
+  }
+  open(onClose) {
+    ApiaUtil.instance.modals.open({
+      variant: "layout.common.newChat.assistant.floatingAssistant",
+      defaultPosition: {
+        bottom: "10px",
+        right: "10px"
+      },
+      draggable: true,
+      children: /* @__PURE__ */ jsx(this.Renderer, {}),
+      onClose,
+      title: this.modalTitle
+    });
+  }
+}
+
+export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, AutoscrollContainer, BaseButton, CalendarModal, Captcha, ChatController, ChatMessage, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, FloatingChatController, IconButton, IconInput, IconsList, LabelBox, LinearLoader$1 as LinearLoader, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner$1 as LoaderSpinner, Modal, NumberInput, Overlay, ProgressBar$1 as ProgressBar, RequiredMark, ScreenLocker, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, WaiTypeAhead, getBase64FromBlob, getBase64FromFile, getFieldErrorStyles, getFieldTouchedStyles, getFileExtension, importComponent, isImage, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useModal, useModalContext, useOtherTagButton };
 //# sourceMappingURL=index.js.map