@apia/components 4.0.40 → 4.0.42

package/dist/index.js

@@ -4,10 +4,10 @@ import React__default, { createContext, useContext, useEffect, useMemo, useState
 import parse, { domToReact, Element } from 'html-react-parser';
 import { Spinner as Spinner$1, Box as Box$1 } from 'theme-ui';
 import { uniqueId as uniqueId$3, cloneDeep, isFunction } from 'lodash-es';
-import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Link, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, Progress, Label as Label$1, Paragraph, Container, Form, focusOutline, makeStyledComponent, useThemeUI, Grid, Textarea } from '@apia/theme';
+import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Link, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, Paragraph, Label as Label$1, Container, Progress, Form, focusOutline, makeStyledComponent, useThemeUI, Grid, Textarea } from '@apia/theme';
 import { BarLoader } from 'react-spinners';
 import uniqueId$2 from 'lodash-es/uniqueId';
-import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, EventEmitter, useMount, getLabel, isChild, useUnmount, StatefulEmitter, shallowEqual as shallowEqual$1, getSpecificParent, getDateFormat, customEvents, uniqueId as uniqueId$4, decodeBase64ToUtf8, AudioRecorder, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, useMatchScrollDirection, arrayOrArray } from '@apia/util';
+import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, getLabel, isChild, EventEmitter, useUnmount, useMount, StatefulEmitter, shallowEqual as shallowEqual$1, getSpecificParent, getDateFormat, customEvents, decodeBase64ToUtf8, uniqueId as uniqueId$4, AudioRecorder, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, useMatchScrollDirection, arrayOrArray } from '@apia/util';
 import usePortal from 'react-cool-portal';
 import { CSSTransition } from 'react-transition-group';
 import { uniqueId as uniqueId$1, defaultNotifier, NotificationsList } from '@apia/notifications';
@@ -425,7 +425,9 @@ function useModal(configuration) {
   });
   const hide = React__default.useCallback(() => {
     setIsOpen(false);
-  }, []);
+    if (configuration?.onClose)
+      configuration.onClose();
+  }, [configuration]);
   const show = React__default.useCallback(() => {
     if (configuration?.preFetcher) {
       setIsLoading(true);
@@ -457,8 +459,7 @@ function useModal(configuration) {
       if (configuration?.onOpen)
         configuration.onOpen();
       showPortal();
-    } else
-      onClose?.();
+    }
   }, [isOpen]);
   return {
     hide,
@@ -1443,7 +1444,7 @@ var __privateWrapper$2 = (obj, member, setter, getter) => ({
     return __privateGet$9(obj, member, getter);
   }
 });
-var _emitter$4, _maxId$1, _maxOverlay, _useModalsList;
+var _maxId$1, _maxOverlay;
 class ApiaUtilModalHandler {
   constructor(close) {
     this.close = close;
@@ -1452,54 +1453,12 @@ class ApiaUtilModalHandler {
 class ApiaUtilModals {
   constructor() {
     __publicField$q(this, "overlays", []);
-    __privateAdd$c(this, _emitter$4, new EventEmitter());
+    __publicField$q(this, "modals", []);
     __privateAdd$c(this, _maxId$1, 0);
     __privateAdd$c(this, _maxOverlay, 0);
-    __privateAdd$c(this, _useModalsList, () => {
-      const [modals, setModals] = useState(
-        []
-      );
-      useMount(() => {
-        const u1 = __privateGet$9(this, _emitter$4).on("open", (ev) => {
-          setModals((current) => [
-            ...current,
-            {
-              ...ev,
-              isOpen: true,
-              onClose: ev.onClose,
-              onExited: () => {
-                ev.onExited?.();
-                setModals(
-                  (current2) => current2.filter((modal) => modal.id !== ev.id)
-                );
-              }
-            }
-          ]);
-        });
-        const u2 = __privateGet$9(this, _emitter$4).on("closeAll", () => {
-          setModals(
-            (current) => current.map((modal) => ({ ...modal, isOpen: false }))
-          );
-        });
-        const u3 = __privateGet$9(this, _emitter$4).on("close", (modalId) => {
-          setModals(
-            (current) => current.map(
-              (modal) => modal.id === modalId ? { ...modal, isOpen: false } : modal
-            )
-          );
-        });
-        return () => {
-          u1();
-          u2();
-          u3();
-        };
-      });
-      return modals;
-    });
     __publicField$q(this, "Component", observer(() => {
-      const modals = __privateGet$9(this, _useModalsList).call(this);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        modals.map((current) => /* @__PURE__ */ jsx(OpenModal, { ...current }, current.id)),
+        this.modals.map((current) => /* @__PURE__ */ jsx(OpenModal, { ...current }, current.id)),
         this.overlays.map((c) => c.render)
       ] });
     }));
@@ -1508,17 +1467,27 @@ class ApiaUtilModals {
       this.open(cevent.detail);
     });
     makeObservable(this, {
-      overlays: observable
+      overlays: observable,
+      modals: observable
     });
   }
   close(id) {
-    __privateGet$9(this, _emitter$4).emit("close", id);
+    this.modals = this.modals.filter((s) => s.id !== id);
   }
   open(props) {
     const id = props.id ?? `modal_${__privateWrapper$2(this, _maxId$1)._++}`;
-    __privateGet$9(this, _emitter$4).emit("open", { ...props, id });
+    this.modals.push({
+      ...props,
+      id,
+      isOpen: true,
+      onClose: props.onClose,
+      onExited: () => {
+        props.onExited?.();
+        this.close(id);
+      }
+    });
     return new ApiaUtilModalHandler(() => {
-      __privateGet$9(this, _emitter$4).emit("close", id);
+      this.close(id);
     });
   }
   /**
@@ -1560,10 +1529,8 @@ class ApiaUtilModals {
     };
   }
 }
-_emitter$4 = new WeakMap();
 _maxId$1 = new WeakMap();
 _maxOverlay = new WeakMap();
-_useModalsList = new WeakMap();
 
 var __defProp$p = Object.defineProperty;
 var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -1933,6 +1900,7 @@ const ConfirmModal = ({
   onConfirm,
   onCancel,
   title,
+  size,
   ...props
 }) => {
   const hasConfirmed = useRef(false);
@@ -1961,6 +1929,7 @@ const ConfirmModal = ({
         []
       ),
       title,
+      size,
       children: /* @__PURE__ */ jsx(Confirm, { ...props, onCancel: handleCancel, onConfirm: handleConfirm })
     }
   );
@@ -2003,7 +1972,7 @@ const AlertModal = ({ children, onClose, title }) => {
 var __defProp$o = Object.defineProperty;
 var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$o = (obj, key, value) => {
-  __defNormalProp$o(obj, key + "" , value);
+  __defNormalProp$o(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$b = (obj, member, msg) => {
@@ -2032,40 +2001,23 @@ var __privateWrapper$1 = (obj, member, setter, getter) => ({
     return __privateGet$8(obj, member, getter);
   }
 });
-var _emitter$3, _maxIdAlert, _maxIdConfirm;
+var _maxIdAlert, _maxIdConfirm;
 class ApiaUtilDialogs {
   constructor() {
-    __privateAdd$b(this, _emitter$3, new EventEmitter());
     __privateAdd$b(this, _maxIdAlert, 0);
     __privateAdd$b(this, _maxIdConfirm, 0);
-    __publicField$o(this, "Component", () => {
-      const [confirmDialogs, setConfirmDialogs] = useState([]);
-      const [alertsDialogs, setAlertsDialogs] = useState(
-        []
-      );
-      useMount(() => {
-        const unsuscribe1 = __privateGet$8(this, _emitter$3).on("alert", (ev) => {
-          setAlertsDialogs((current) => [...current, ev]);
-        });
-        const unsuscribe2 = __privateGet$8(this, _emitter$3).on("confirm", (ev) => {
-          setConfirmDialogs((current) => [...current, ev]);
-        });
-        return () => {
-          unsuscribe1();
-          unsuscribe2();
-        };
-      });
+    __publicField$o(this, "alerts", []);
+    __publicField$o(this, "dialogs", []);
+    __publicField$o(this, "Component", observer(() => {
       const removeModal = useCallback(
         (which) => {
-          setConfirmDialogs(
-            (current) => current.filter((search) => search !== which)
-          );
+          this.dialogs = this.dialogs.filter((search) => search !== which);
         },
         []
       );
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        alertsDialogs.map((current) => /* @__PURE__ */ createElement(AlertModal, { ...current, key: current.id })),
-        confirmDialogs.map((current) => /* @__PURE__ */ createElement(
+        this.alerts.map((current) => /* @__PURE__ */ createElement(AlertModal, { ...current, key: current.id })),
+        this.dialogs.map((current) => /* @__PURE__ */ createElement(
           ConfirmModal,
           {
             ...current,
@@ -2081,11 +2033,12 @@ class ApiaUtilDialogs {
           }
         ))
       ] });
-    });
+    }));
+    makeAutoObservable(this);
   }
   alert(props) {
     return new Promise((resolve) => {
-      __privateGet$8(this, _emitter$3).emit("alert", {
+      this.alerts.push({
         ...props,
         onClose: () => resolve(),
         id: `confirm${__privateWrapper$1(this, _maxIdAlert)._++}`
@@ -2094,7 +2047,7 @@ class ApiaUtilDialogs {
   }
   confirm(props) {
     return new Promise((resolve) => {
-      __privateGet$8(this, _emitter$3).emit("confirm", {
+      this.dialogs.push({
         ...props,
         id: `confirm${__privateWrapper$1(this, _maxIdConfirm)._++}`,
         onCancel: () => resolve(false),
@@ -2103,7 +2056,6 @@ class ApiaUtilDialogs {
     });
   }
 }
-_emitter$3 = new WeakMap();
 _maxIdAlert = new WeakMap();
 _maxIdConfirm = new WeakMap();
 
@@ -5278,740 +5230,308 @@ const LabelBox = ({
   );
 };
 
-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;
-class ChatMessage {
-  constructor(message = "", messageType = "user", attachments = [], reference = null) {
-    this.message = message;
-    this.messageType = messageType;
-    this.attachments = attachments;
-    this.reference = reference;
-    __publicField$f(this, "id");
-    __publicField$f(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
+function importComponent(path) {
+  return lazy(() => {
+    return new Promise((resolve) => {
+      import(
+        /* webpackInclude: /\.tsx?$/ */
+        `/customComponents/${path}`
+      ).then((result) => {
+        if (result?.default?.default)
+          resolve(result.default);
+        else if (result?.default)
+          resolve(result);
+        else
+          resolve({
+            default: () => /* @__PURE__ */ jsx(Fragment, { children: "Something went wrong when importing component" })
+          });
+      }).catch((error) => {
+        resolve({
+          default: () => {
+            console.error(error);
+            return /* @__PURE__ */ jsx(Fragment, { children: "Error" });
+          }
+        });
+      });
     });
-  }
-  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, threshold = 150, className }) => {
-  const wrapperRef = useRef(null);
-  const autoScrollEnabled = useRef(true);
-  useEffect(() => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper)
-      return;
-    const scrollEl = findScrollContainer(wrapper);
-    const isNearBottom = () => scrollEl.scrollHeight - (scrollEl.scrollTop + scrollEl.clientHeight) <= threshold;
-    const onWheel = (e) => {
-      if (e.deltaY < 0) {
-        autoScrollEnabled.current = false;
-      } else if (e.deltaY > 0 && isNearBottom()) {
-        autoScrollEnabled.current = true;
-      }
-    };
-    const onScroll = () => {
-      if (isNearBottom()) {
-        autoScrollEnabled.current = true;
-      }
-    };
-    function enable() {
-      autoScrollEnabled.current = true;
-    }
-    scrollEl.addEventListener("wheel", onWheel, { passive: true });
-    scrollEl.addEventListener("scroll", onScroll, { passive: true });
-    document.addEventListener("enableAutoScroll", enable);
-    scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior: "smooth" });
-    const mo = new MutationObserver(() => {
-      if (autoScrollEnabled.current) {
-        scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior: "smooth" });
-      }
-    });
-    mo.observe(wrapper, { childList: true, subtree: true });
-    return () => {
-      scrollEl.removeEventListener("wheel", onWheel);
-      scrollEl.removeEventListener("enableAutoScroll", enable);
-      scrollEl.removeEventListener("scroll", onScroll);
-      mo.disconnect();
-    };
-  }, [threshold]);
-  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: `${className || ""} autoscrollContainer`, children });
+const MessageBlock = ({
+  componentData
+}) => {
+  if (typeof componentData.args === "string") {
+    componentData.args = JSON.parse(componentData.args);
+  }
+  const Component = importComponent(componentData.path);
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Component, { ...componentData.args }) });
 };
+var MessageBlock$1 = memo(MessageBlock);
 
-const FileCard = forwardRef(
-  ({
-    name,
-    iconsSize,
-    additionalButtons,
-    className,
-    sx,
-    width = "fit-content",
-    handleClose,
-    onDoubleClick,
-    onClick,
-    onDropFiles
-  }, ref) => {
-    const [isDragOver, setIsDragOver] = useState(false);
-    return /* @__PURE__ */ createElement(
-      Box,
-      {
-        ...getVariant("layout.common.components.fileCard"),
-        sx: {
-          ...sx,
-          width,
-          ...isDragOver && onDropFiles ? {
-            border: "2px dashed #1976d2!important",
-            backgroundColor: "#f5faff!important"
-          } : {}
-        },
-        ref,
-        key: name,
-        className: `fileCard ${className ?? ""}`,
-        onDoubleClick,
-        onClick,
-        title: name,
-        tabIndex: 0,
-        onDragOver: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setIsDragOver(true);
-        },
-        onDragLeave: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setIsDragOver(false);
-        },
-        onDrop: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setIsDragOver(false);
-          if (onDropFiles && e.dataTransfer?.files?.length) {
-            const files = Array.from(e.dataTransfer.files);
-            onDropFiles(files);
-          }
-        }
-      },
-      /* @__PURE__ */ jsxs(Box, { className: "fileCard__content", children: [
-        /* @__PURE__ */ jsx(FileIcon, { docName: name, iconSize: iconsSize }),
-        /* @__PURE__ */ jsx(Box, { as: "span", className: "fileCard__name", children: name })
-      ] }),
-      /* @__PURE__ */ jsx(Box, { className: "fileCard__additionalButtons", children: additionalButtons?.map((c) => {
-        return /* @__PURE__ */ jsx(
-          IconButton,
+const AttributeParsers = [
+  /**
+   * Allows to pass javascript event handlers through the format
+   * onEventDispatched, the main difficulty is that the html parser returns the
+   * attributes with lowercase, that's why any attribute of the type
+   * onEventDispatched will be passed to the component as onEventdispatched
+   * (note the lowercase 'd').
+   */
+  {
+    match: /^(?:data-)?on(.*)$/i,
+    parse([, originalAction], value) {
+      if (value.match(/^__contextMethod/))
+        return [
           {
-            iconSize: "Md",
-            ...c,
-            className: `fileCard__additionalButton ${c.className ?? ""}`
+            newName: `on${originalAction[0].toUpperCase()}${originalAction.slice(
+              1
+            )}`,
+            newValue: value
           }
-        );
-      }) }),
-      handleClose && /* @__PURE__ */ jsx(
-        Close,
+        ];
+      let newName = `on${originalAction.charAt(0).toUpperCase()}${originalAction.slice(1)}`;
+      const composedEvent = originalAction.match(/^(mouse|key|double)(.*)$/i);
+      if (composedEvent) {
+        newName = `on${composedEvent[1].charAt(0).toUpperCase()}${composedEvent[1].slice(1)}${composedEvent[2].charAt(0).toUpperCase()}${composedEvent[2].slice(1)}`;
+      }
+      return [
         {
-          type: "button",
-          className: "fileCard__delete",
-          onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            handleClose(name);
+          newName,
+          newValue: (ev) => {
+            const evalString = value.replace(/return [^;\n\r]+/, "");
+            const f = eval(evalString);
+            f(ev);
           }
         }
-      )
-    );
-  }
-);
-
-const Dropzone = ({
-  sx,
-  className,
-  messageError,
-  progress = 0,
-  defaultLabel = getLabel("btnUploadClass").text,
-  draggingLabel = getLabel("lblDroping").text,
-  onClick,
-  onChange,
-  handleInfoButton
-}) => {
-  const innerSx = messageError ? { borderLeft: "2px solid", borderColor: "danger" } : {};
-  const fileInputRef = useRef(null);
-  const handleClick = (ev) => {
-    onClick?.(ev);
-    if (!ev.defaultPrevented) {
-      fileInputRef.current?.click();
+      ];
     }
-  };
-  const handleDragOver = (e) => {
-    e.preventDefault();
-  };
-  const [isDragging, setIsDragging] = useState(false);
-  const handleDragStart = (_e) => {
-    setIsDragging(true);
-  };
-  const handleDragLeave = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
-  };
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...getVariant("layout.execution.components.uploader.dropzone"),
-      className: "dropzone__container",
-      children: [
-        /* @__PURE__ */ jsxs(
-          Box,
+  },
+  {
+    /**
+     * Allows to pass style objects as JSON strings
+     */
+    match: /^data-style$/,
+    parse(_match, value2) {
+      try {
+        return [{ newName: "style", newValue: JSON.parse(value2) }];
+      } catch (e) {
+        console.error({ value: value2, e });
+      }
+      return null;
+    }
+  },
+  {
+    /**
+     * Allows conditional rendering of a component
+     */
+    match: /^data-render$/,
+    parse(_match, originalValue) {
+      if (originalValue !== "" && !JSON.parse(originalValue)) {
+        throw new Command("COMMAND: PREVENT_RENDERING");
+      }
+      return [
+        {
+          newName: "data-render",
+          newValue: void 0
+        }
+      ];
+    }
+  },
+  {
+    /**
+     * Allow to pass json data as property to the components
+     */
+    match: /^data-json-([a-zA-Z][\w_]*)$/,
+    parse: ([, name], originalValue) => {
+      try {
+        return [
           {
-            tabIndex: 0,
-            sx: { ...innerSx, sx },
-            className: `dropzone ${className ?? ""}`,
-            onClick: handleClick,
-            onKeyDown: (ev) => {
-              if (ev.code === "Enter" || ev.code === "Space") {
-                handleClick(ev);
-              }
-            },
-            onDrop: (e) => {
-              e.preventDefault();
-              const newFiles = Array.from(e.dataTransfer.files);
-              setIsDragging(false);
-              onChange?.(newFiles);
-            },
-            onDragEnter: handleDragStart,
-            onDragLeave: handleDragLeave,
-            onDragOver: handleDragOver,
-            children: [
-              progress > 0 && progress < 100 && /* @__PURE__ */ jsx(Progress, { max: 100, value: progress, className: "progressBar" }),
-              messageError ? /* @__PURE__ */ jsx(Box, { color: "danger", children: messageError }) : isDragging ? draggingLabel : defaultLabel,
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  multiple: true,
-                  type: "file",
-                  ref: fileInputRef,
-                  style: { display: "none" },
-                  onChange: (e) => {
-                    e.preventDefault();
-                    if (e.target.files) {
-                      const newFiles = Array.from([...e.target.files]);
-                      onChange?.(newFiles);
-                      e.target.value = "";
-                    }
-                  }
-                }
-              )
-            ]
+            newName: name,
+            newValue: JSON.parse(originalValue)
           }
-        ),
-        handleInfoButton && /* @__PURE__ */ jsx(
-          IconButton,
+        ];
+      } catch (e) {
+        console.info(`Prop: ${name}, originalValue: ${originalValue}`);
+        console.error(e);
+        return null;
+      }
+    }
+  },
+  {
+    match: /^data(?:-dom)?-variant$/,
+    parse(_, newValue) {
+      return [
+        { newName: "data-variant", newValue },
+        { newName: "variant", newValue }
+      ];
+    }
+  },
+  {
+    match: /^data-dom-([a-zA-Z][\w_]*)/i,
+    parse([, name], newValue) {
+      return [{ newName: `data-${name}`, newValue }];
+    }
+  },
+  {
+    /**
+     * Change all the attributes whose name matches with data-(name) to just
+     * name
+     */
+    match: /^data-([a-zA-Z][\w_]*)$/,
+    parse: ([, newName2], newValue) => [{ newName: newName2, newValue }]
+  },
+  /**
+   * Allows to pass conditional data to a component. It accepts as value a JSON
+   * string with the following structure:
+   *
+   * data-condition-NAME_OF_ATTRIBUTE=`
+   * {
+   *  "condition": CONDITION,
+   *  "NAME_OF_ATTRIBUTE": VALUE_TO_PASS_TO_THE_COMPONENT
+   * }
+   *
+   * Where:
+   *  - NAME_OF_ATTRIBUTE can be anything you want, the only limitations are
+   *  the attribute names limitations. - CONDITION will be evaluated with a
+   *  ternary conditional, if it parses to true the value will be passed or
+   *  hidden elsewhere - VALUE_TO_PASS_TO_THE_COMPONENT Since all the attribute
+   *  will be parsed with JSON, the value to pass can be anything that
+   *      can be parsed this way.
+   */
+  {
+    match: /^data-condition-([a-zA-Z][\w_]*)$/,
+    parse: ([, newName2], value2) => {
+      try {
+        const parsedValue = JSON.parse(value2);
+        return [
           {
-            className: "info",
-            iconSize: "Sm",
-            icon: "Info",
-            onMouseEnter: handleInfoButton,
-            onClick: handleClick
+            newName: newName2,
+            newValue: parsedValue.condition ? parsedValue[newName2] : void 0
           }
-        )
-      ]
+        ];
+      } catch (e) {
+        console.error(e);
+      }
+      return null;
     }
-  );
-};
+  },
+  {
+    match: /^tabindex/i,
+    parse(_, newValue) {
+      return [{ newName: "tabIndex", newValue }];
+    }
+  }
+];
 
-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, key + "" , value);
-  return value;
+const PathShortcuts = {};
+
+const AttributeFilters = ["data-template", "data-component", "style"];
+
+const AttributeReplacers = {
+  // Common html props
+  class: "className",
+  colspan: "colSpan",
+  for: "htmlFor",
+  readonly: "readOnly",
+  autocomplete: "autoComplete",
+  // Chart button
+  chartid: "chartId",
+  // Dynamic button
+  apiaprops: "apiaProps",
+  // Profiles props
+  // Users administration
+  isglobal: "isGlobal",
+  iscreate: "isCreate",
+  ldapfull: "ldapFull",
+  passwordprops: "passwordProps",
+  // Validation fields
+  initialvalue: "initialValue",
+  submitvalueparser: "submitValueParser",
+  validationclass: "validationClass",
+  validationfunction: "validationFunction",
+  validationrules: "validationRules",
+  allowpickbeforetoday: "allowPickBeforeToday",
+  evtmetafilters: "evtMetaFilters",
+  trafreemetafilters: "traFreeMetaFilters",
+  // Documents info modal
+  allowdownload: "allowDownload",
+  // Documents upload modal
+  allowpickfromdirectories: "allowPickFromDirectories",
+  allowpickfrommonitor: "allowPickFromMonitor",
+  // Document Info modal
+  frommonitor: "fromMonitor",
+  showhistory: "showHistory",
+  showdownloadinfo: "showDownloadInfo",
+  showpermissions: "showPermissions",
+  // LangPicker
+  currentlang: "currentLang",
+  // Change Dates Modal
+  dateinputname: "dateInputName",
+  initiallyexpanded: "initiallyExpanded",
+  buttonsactions: "buttonsActions",
+  // Reports
+  reportname: "reportName"
 };
-class UploadHandler {
-  constructor(props) {
-    this.props = props;
-    __publicField$e(this, "state", { inProgressFiles: [], uploadedFiles: [] });
-    makeAutoObservable(this);
-    this.state.uploadedFiles = this.props.initialFiles;
-  }
-  delete(file) {
-    this.props.onDelete(file).then((res) => {
-      if (res === true) {
-        this.state.uploadedFiles = this.state.uploadedFiles.filter(
-          (c) => c !== file
-        );
-      } else if (typeof res === "string") {
-        ApiaUtil.instance.notifications.notify({
-          message: res
-        });
-      }
-    });
-  }
-  start(files) {
-    files.forEach((file) => {
-      const newUpload = {
-        abortController: new AbortController(),
-        id: uniqueId$4("file_upload"),
-        file,
-        progress: 0
-      };
-      this.state.inProgressFiles.push(newUpload);
-      this.props.onUpload(newUpload).then((res) => {
-        this.state.inProgressFiles = this.state.inProgressFiles.filter(
-          (c) => c.id !== newUpload.id
-        );
-        if (typeof res === "string") {
-          ApiaUtil.instance.notifications.notify({
-            message: res,
-            icon: ""
-          });
-        } else if (res) {
-          this.state.uploadedFiles.push(res);
-        }
-      });
-    });
-  }
-}
-const Uploader = observer(({ handler }) => {
-  return /* @__PURE__ */ jsxs(Box, { className: "file_uploader", children: [
-    /* @__PURE__ */ jsx(Box, { className: "file_uploader__dropzone", children: (handler.props.isMultiple || handler.state.uploadedFiles.length === 0 && handler.state.inProgressFiles.length === 0) && /* @__PURE__ */ jsx(
-      Dropzone,
-      {
-        onChange: (ev) => {
-          handler.start(ev);
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Box, { className: "file_uploader__in_progress", children: handler.state.inProgressFiles.map((c) => /* @__PURE__ */ jsx(
-      Dropzone,
-      {
-        progress: c.progress,
-        messageError: c.error
-      },
-      c.file.name
-    )) }),
-    /* @__PURE__ */ jsx(Box, { className: "file_uploader__files_list", children: handler.state.uploadedFiles.map((c) => /* @__PURE__ */ jsx(
-      FileCard,
-      {
-        name: c.name,
-        handleClose: () => handler.delete(c)
-      },
-      c.id
-    )) })
-  ] });
-});
 
-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.base64 }),
-            attachment.description && /* @__PURE__ */ jsx(Label$1, { children: attachment.description })
-          ]
-        }
-      )
-    });
-    return /* @__PURE__ */ jsx(
-      FileCard,
-      {
-        ref,
-        name: attachment.name,
-        handleClose: onRemove,
-        additionalButtons: onAddDescription ? [
-          {
-            icon: "Pencil",
-            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"
-          }
-        ] : []
-      }
-    );
+const ComplexReplacements = [
+  (domNode, _, customOptions, commentsData) => {
+    if (domNode.attribs["data-prevent-parse"] && domNode.attribs["data-prevent-parse"].trim() === "true") {
+      return null;
+    }
+    if (domNode.attributes.find((current) => current.name === "data-fragment")) {
+      const children = domToReact(
+        cloneDeep(domNode.children),
+        parseOptions(customOptions, commentsData)
+      );
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    }
+    return false;
   }
-);
+];
 
-const Attachments = observer(
-  ({
-    attachments,
-    onRemove,
-    onAddDescription,
-    className
-  }) => {
-    if (!attachments.length)
-      return null;
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        className: `attachments ${className}`,
-        ...getVariant("layout.common.chat.attachments"),
-        children: attachments.map((x) => /* @__PURE__ */ jsx(
-          FileAttachment,
-          {
-            attachment: x,
-            onRemove: onRemove ? () => onRemove(x) : void 0,
-            onAddDescription
-          },
-          x.id
-        ))
-      }
-    );
+const TagReplacers = {
+  div: Box,
+  button: Button,
+  container: Container,
+  h1: (props) => /* @__PURE__ */ jsx(Heading, { as: "h1", ...props }),
+  h2: (props) => /* @__PURE__ */ jsx(Heading, { as: "h2", ...props }),
+  h3: (props) => /* @__PURE__ */ jsx(Heading, { as: "h3", ...props }),
+  h4: (props) => /* @__PURE__ */ jsx(Heading, { as: "h4", ...props }),
+  h5: (props) => /* @__PURE__ */ jsx(Heading, { as: "h5", ...props }),
+  h6: (props) => /* @__PURE__ */ jsx(Heading, { as: "h6", ...props }),
+  img: Image,
+  label: Label$1,
+  input: Input,
+  p: Paragraph,
+  select: Select
+};
+
+const contextMethods = {};
+
+const AttributeValueParsers = (currentValue) => {
+  if (currentValue === "true")
+    return true;
+  if (currentValue === "false")
+    return false;
+  if (typeof currentValue === "string") {
+    const result = currentValue.match(/^__contextMethod\.(\w+)\.(\w+)$/);
+    if (result) {
+      return contextMethods[result[1]][result[2]];
+    }
   }
-);
+  return currentValue;
+};
 
-function importComponent(path) {
-  return lazy(() => {
-    return new Promise((resolve) => {
-      import(
-        /* webpackInclude: /\.tsx?$/ */
-        `/customComponents/${path}`
-      ).then((result) => {
-        if (result?.default?.default)
-          resolve(result.default);
-        else if (result?.default)
-          resolve(result);
-        else
-          resolve({
-            default: () => /* @__PURE__ */ jsx(Fragment, { children: "Something went wrong when importing component" })
-          });
-      }).catch((error) => {
-        resolve({
-          default: () => {
-            console.error(error);
-            return /* @__PURE__ */ jsx(Fragment, { children: "Error" });
-          }
-        });
-      });
-    });
-  });
+function isMessage(error) {
+  return !!(typeof error === "object" && error && "message" in error);
+}
+function processCommand(command) {
+  return Commands[command]();
 }
+const Commands = {
+  PREVENT_RENDERING: () => null
+};
 
-const AttributeParsers = [
-  /**
-   * Allows to pass javascript event handlers through the format
-   * onEventDispatched, the main difficulty is that the html parser returns the
-   * attributes with lowercase, that's why any attribute of the type
-   * onEventDispatched will be passed to the component as onEventdispatched
-   * (note the lowercase 'd').
-   */
-  {
-    match: /^(?:data-)?on(.*)$/i,
-    parse([, originalAction], value) {
-      if (value.match(/^__contextMethod/))
-        return [
-          {
-            newName: `on${originalAction[0].toUpperCase()}${originalAction.slice(
-              1
-            )}`,
-            newValue: value
-          }
-        ];
-      let newName = `on${originalAction.charAt(0).toUpperCase()}${originalAction.slice(1)}`;
-      const composedEvent = originalAction.match(/^(mouse|key|double)(.*)$/i);
-      if (composedEvent) {
-        newName = `on${composedEvent[1].charAt(0).toUpperCase()}${composedEvent[1].slice(1)}${composedEvent[2].charAt(0).toUpperCase()}${composedEvent[2].slice(1)}`;
-      }
-      return [
-        {
-          newName,
-          newValue: (ev) => {
-            const evalString = value.replace(/return [^;\n\r]+/, "");
-            const f = eval(evalString);
-            f(ev);
-          }
-        }
-      ];
-    }
-  },
-  {
-    /**
-     * Allows to pass style objects as JSON strings
-     */
-    match: /^data-style$/,
-    parse(_match, value2) {
-      try {
-        return [{ newName: "style", newValue: JSON.parse(value2) }];
-      } catch (e) {
-        console.error({ value: value2, e });
-      }
-      return null;
-    }
-  },
-  {
-    /**
-     * Allows conditional rendering of a component
-     */
-    match: /^data-render$/,
-    parse(_match, originalValue) {
-      if (originalValue !== "" && !JSON.parse(originalValue)) {
-        throw new Command("COMMAND: PREVENT_RENDERING");
-      }
-      return [
-        {
-          newName: "data-render",
-          newValue: void 0
-        }
-      ];
-    }
-  },
-  {
-    /**
-     * Allow to pass json data as property to the components
-     */
-    match: /^data-json-([a-zA-Z][\w_]*)$/,
-    parse: ([, name], originalValue) => {
-      try {
-        return [
-          {
-            newName: name,
-            newValue: JSON.parse(originalValue)
-          }
-        ];
-      } catch (e) {
-        console.info(`Prop: ${name}, originalValue: ${originalValue}`);
-        console.error(e);
-        return null;
-      }
-    }
-  },
-  {
-    match: /^data(?:-dom)?-variant$/,
-    parse(_, newValue) {
-      return [
-        { newName: "data-variant", newValue },
-        { newName: "variant", newValue }
-      ];
-    }
-  },
-  {
-    match: /^data-dom-([a-zA-Z][\w_]*)/i,
-    parse([, name], newValue) {
-      return [{ newName: `data-${name}`, newValue }];
-    }
-  },
-  {
-    /**
-     * Change all the attributes whose name matches with data-(name) to just
-     * name
-     */
-    match: /^data-([a-zA-Z][\w_]*)$/,
-    parse: ([, newName2], newValue) => [{ newName: newName2, newValue }]
-  },
-  /**
-   * Allows to pass conditional data to a component. It accepts as value a JSON
-   * string with the following structure:
-   *
-   * data-condition-NAME_OF_ATTRIBUTE=`
-   * {
-   *  "condition": CONDITION,
-   *  "NAME_OF_ATTRIBUTE": VALUE_TO_PASS_TO_THE_COMPONENT
-   * }
-   *
-   * Where:
-   *  - NAME_OF_ATTRIBUTE can be anything you want, the only limitations are
-   *  the attribute names limitations. - CONDITION will be evaluated with a
-   *  ternary conditional, if it parses to true the value will be passed or
-   *  hidden elsewhere - VALUE_TO_PASS_TO_THE_COMPONENT Since all the attribute
-   *  will be parsed with JSON, the value to pass can be anything that
-   *      can be parsed this way.
-   */
-  {
-    match: /^data-condition-([a-zA-Z][\w_]*)$/,
-    parse: ([, newName2], value2) => {
-      try {
-        const parsedValue = JSON.parse(value2);
-        return [
-          {
-            newName: newName2,
-            newValue: parsedValue.condition ? parsedValue[newName2] : void 0
-          }
-        ];
-      } catch (e) {
-        console.error(e);
-      }
-      return null;
-    }
-  },
-  {
-    match: /^tabindex/i,
-    parse(_, newValue) {
-      return [{ newName: "tabIndex", newValue }];
-    }
-  }
-];
-
-const PathShortcuts = {};
-
-const AttributeFilters = ["data-template", "data-component", "style"];
-
-const AttributeReplacers = {
-  // Common html props
-  class: "className",
-  colspan: "colSpan",
-  for: "htmlFor",
-  readonly: "readOnly",
-  autocomplete: "autoComplete",
-  // Chart button
-  chartid: "chartId",
-  // Dynamic button
-  apiaprops: "apiaProps",
-  // Profiles props
-  // Users administration
-  isglobal: "isGlobal",
-  iscreate: "isCreate",
-  ldapfull: "ldapFull",
-  passwordprops: "passwordProps",
-  // Validation fields
-  initialvalue: "initialValue",
-  submitvalueparser: "submitValueParser",
-  validationclass: "validationClass",
-  validationfunction: "validationFunction",
-  validationrules: "validationRules",
-  allowpickbeforetoday: "allowPickBeforeToday",
-  evtmetafilters: "evtMetaFilters",
-  trafreemetafilters: "traFreeMetaFilters",
-  // Documents info modal
-  allowdownload: "allowDownload",
-  // Documents upload modal
-  allowpickfromdirectories: "allowPickFromDirectories",
-  allowpickfrommonitor: "allowPickFromMonitor",
-  // Document Info modal
-  frommonitor: "fromMonitor",
-  showhistory: "showHistory",
-  showdownloadinfo: "showDownloadInfo",
-  showpermissions: "showPermissions",
-  // LangPicker
-  currentlang: "currentLang",
-  // Change Dates Modal
-  dateinputname: "dateInputName",
-  initiallyexpanded: "initiallyExpanded",
-  buttonsactions: "buttonsActions",
-  // Reports
-  reportname: "reportName"
-};
-
-const ComplexReplacements = [
-  (domNode, _, customOptions, commentsData) => {
-    if (domNode.attribs["data-prevent-parse"] && domNode.attribs["data-prevent-parse"].trim() === "true") {
-      return null;
-    }
-    if (domNode.attributes.find((current) => current.name === "data-fragment")) {
-      const children = domToReact(
-        cloneDeep(domNode.children),
-        parseOptions(customOptions, commentsData)
-      );
-      return /* @__PURE__ */ jsx(Fragment, { children });
-    }
-    return false;
-  }
-];
-
-const TagReplacers = {
-  div: Box,
-  button: Button,
-  container: Container,
-  h1: (props) => /* @__PURE__ */ jsx(Heading, { as: "h1", ...props }),
-  h2: (props) => /* @__PURE__ */ jsx(Heading, { as: "h2", ...props }),
-  h3: (props) => /* @__PURE__ */ jsx(Heading, { as: "h3", ...props }),
-  h4: (props) => /* @__PURE__ */ jsx(Heading, { as: "h4", ...props }),
-  h5: (props) => /* @__PURE__ */ jsx(Heading, { as: "h5", ...props }),
-  h6: (props) => /* @__PURE__ */ jsx(Heading, { as: "h6", ...props }),
-  img: Image,
-  label: Label$1,
-  input: Input,
-  p: Paragraph,
-  select: Select
-};
-
-const contextMethods = {};
-
-const AttributeValueParsers = (currentValue) => {
-  if (currentValue === "true")
-    return true;
-  if (currentValue === "false")
-    return false;
-  if (typeof currentValue === "string") {
-    const result = currentValue.match(/^__contextMethod\.(\w+)\.(\w+)$/);
-    if (result) {
-      return contextMethods[result[1]][result[2]];
-    }
-  }
-  return currentValue;
-};
-
-function isMessage(error) {
-  return !!(typeof error === "object" && error && "message" in error);
-}
-function processCommand(command) {
-  return Commands[command]();
-}
-const Commands = {
-  PREVENT_RENDERING: () => null
-};
-
-const CommentsParsers = [
+const CommentsParsers = [
   {
     /**
      * This parser allows to put a comment with the structure:
@@ -6051,382 +5571,827 @@ const CommentsParsers = [
         responseData.SuspenseComponent = importTemplaterComponent(result[1]);
       return responseData;
     }
-  }
-];
+  }
+];
+
+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;
+};
+var __accessCheck$4 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$2 = (obj, member, getter) => {
+  __accessCheck$4(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$4 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var _actuallyParse;
+console.time("Templater parse");
+console.time("Templater pre screen unlock");
+function importTemplaterComponent(path) {
+  return lazy(() => {
+    return new Promise((resolve) => {
+      import(
+        /* webpackChunkName: "[request]" */
+        /* webpackInclude: /\.tsx?$/ */
+        /* webpackPreload: true */
+        /* webpackExclude: /projectAnalysisTree/ */
+        `/src/dynamic/${path}`
+      ).then((result2) => {
+        resolve(result2);
+      }).catch((error) => {
+        resolve({
+          default: () => {
+            console.error(error);
+            throw new Error(
+              `The above error ocurred at component ${path}, does it exist?`
+            );
+          }
+        });
+      });
+    });
+  });
+}
+function parseShortcut(shortcut) {
+  if ("^($)[.".indexOf(shortcut) !== -1)
+    return `\\${shortcut}`;
+  return shortcut;
+}
+const parsedShortcuts = Object.entries(PathShortcuts).map(
+  ([shortcut, path]) => {
+    return [parseShortcut(shortcut), path];
+  }
+);
+const Wrapper = ({
+  children,
+  onMount
+}) => {
+  React.useEffect(() => {
+    if (onMount) {
+      onMount();
+    }
+    return () => {
+    };
+  }, []);
+  return children;
+};
+const Command = Error;
+function makeEmptyCommentsData() {
+  return { customShortcuts: [], SuspenseComponent: () => null };
+}
+const parseOptions = (customOptions, commentsData) => {
+  let actualCommentsData = commentsData ?? makeEmptyCommentsData();
+  return {
+    trim: true,
+    replace: (domNode) => {
+      if (customOptions?.debug)
+        console.log(domNode);
+      if (domNode.type.toLowerCase() === "comment") {
+        CommentsParsers.forEach((parser) => {
+          const matchResult = domNode.data.match(
+            parser.match
+          );
+          if (matchResult) {
+            actualCommentsData = parser.parse(matchResult, actualCommentsData);
+          }
+        });
+      }
+      if (domNode instanceof Element && domNode.attribs) {
+        let componentName = domNode.attribs["data-component"];
+        if (componentName) {
+          actualCommentsData.customShortcuts.forEach(
+            ([shortcut, replacement]) => {
+              if (componentName.match(new RegExp(`^${shortcut}.+`))) {
+                componentName = replacement + componentName.slice(shortcut.length);
+              }
+            }
+          );
+          parsedShortcuts.forEach(([shortcut, replacement]) => {
+            if (componentName.match(new RegExp(`^${shortcut}.+`))) {
+              componentName = replacement + componentName.slice(shortcut.length);
+            }
+          });
+          if (componentName.startsWith("@"))
+            componentName = componentName.slice(1);
+        }
+        try {
+          const Component = componentName ? importTemplaterComponent(componentName) : TagReplacers[domNode.name] ?? ((props3) => /* @__PURE__ */ jsx(Box$1, { as: domNode.name, ...props3 }));
+          for (let i = 0; i < ComplexReplacements.length; i++) {
+            const complexReplacement = ComplexReplacements[i];
+            const result2 = complexReplacement(
+              domNode,
+              Component,
+              customOptions,
+              commentsData
+            );
+            if (result2 !== false)
+              return /* @__PURE__ */ jsx(Suspense, { children: result2 });
+          }
+          [
+            ...AttributeFilters,
+            ...customOptions?.filterAttributes ?? []
+          ].forEach((att) => {
+            delete domNode.attribs[att];
+          });
+          const props2 = Object.entries(domNode.attribs).reduce(
+            (dictionary, [initialName, initialValue]) => {
+              const name = initialName;
+              const value = initialValue;
+              let hasParsed = false;
+              const returnDictionary = { ...dictionary };
+              for (let i = 0; i < AttributeParsers.length; i++) {
+                const parser = AttributeParsers[i];
+                const match = name.match(parser.match);
+                if (customOptions?.debug)
+                  console.log(parser.match, match);
+                if (match) {
+                  const parsed = parser.parse(match, value);
+                  if (customOptions?.debug)
+                    console.log(parser.match, parsed);
+                  if (parsed) {
+                    parsed.forEach(({ newName, newValue }) => {
+                      const finalName = {
+                        ...AttributeReplacers,
+                        ...customOptions?.attributesReplacement ?? {}
+                      }[newName] ?? newName;
+                      returnDictionary[finalName] = AttributeValueParsers(newValue);
+                    });
+                    hasParsed = true;
+                  }
+                  break;
+                }
+              }
+              if (!hasParsed) {
+                const newName = {
+                  ...AttributeReplacers,
+                  ...customOptions?.attributesReplacement ?? {}
+                }[name] ?? name;
+                returnDictionary[newName] = AttributeValueParsers(value);
+              }
+              return returnDictionary;
+            },
+            {}
+          );
+          const children = domToReact(
+            cloneDeep(domNode.children),
+            parseOptions(customOptions, actualCommentsData)
+          );
+          delete props2.children;
+          const { onComponentload } = props2;
+          if (onComponentload) {
+            delete props2.onComponentload;
+          }
+          if (actualCommentsData.SuspenseComponent) {
+            if (onComponentload) {
+              return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Wrapper, { onMount: onComponentload, children: /* @__PURE__ */ jsx(Component, { ...props2, children: domNode.children.length > 0 ? children : null }) }) });
+            }
+            return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Component, { ...props2, children: domNode.children.length > 0 ? children : null }) });
+          }
+          if (onComponentload)
+            return /* @__PURE__ */ jsx(Wrapper, { onMount: onComponentload, children: /* @__PURE__ */ jsx(Component, { ...props2, children: domNode.children.length > 0 ? children : null }) });
+          return /* @__PURE__ */ jsx(Component, { ...props2, children: domNode.children.length > 0 ? children : null });
+        } catch (e) {
+          if (isMessage(e)) {
+            const match = e.message.match(/COMMAND: *(\w[\w\d_-]*)/);
+            if (match) {
+              return processCommand(match[1]);
+            }
+          }
+          console.error(e);
+        }
+      }
+      return domNode;
+    },
+    htmlparser2: { lowerCaseAttributeNames: false }
+  };
+};
+const _Templater = class _Templater {
+  constructor() {
+    __publicField$f(this, "isDownloadingTemplate", false);
+    __publicField$f(this, "templates", {});
+    __privateAdd$4(this, _actuallyParse, (html, options) => {
+      let actualHTML = html;
+      if (window.onPreParseTemplate) {
+        const parser = new DOMParser();
+        const document2 = parser.parseFromString(html, "text/html");
+        window.onPreParseTemplate?.(document2);
+        actualHTML = document2.body.innerHTML;
+      }
+      return parse(actualHTML, options);
+    });
+    this.initTemplates();
+  }
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new _Templater();
+    }
+    return this._instance;
+  }
+  initTemplates() {
+    const templates = [
+      ...document.querySelectorAll("[data-template]")
+    ];
+    const templatesObject = templates.reduce((dictionary, template) => {
+      const name = template.getAttribute("data-template");
+      if (!name)
+        return dictionary;
+      return {
+        ...dictionary,
+        [name]: this.parseContent(name, template.outerHTML, {})
+      };
+    }, {});
+    templates.forEach((template) => template.remove());
+    this.templates = templatesObject;
+  }
+  /**
+   * This method parses the string looking for <script class="context"> tags
+   * and placeholders, run that code and make the replacements in the template
+   * string.
+   *
+   * @param content The HTML string
+   */
+  parseContent(templateName, content, props) {
+    function shoutError(error) {
+      console.error("%cParse template error", "font-size: 16px; margin: 10px");
+      throw new Error(`${error} at template ${templateName}`);
+    }
+    let context = {};
+    let newContent = content.replaceAll(
+      /data-json-([\w_-]+)="([^"]+)"/g,
+      (_2, propName, propValue) => {
+        return `data-json-${propName}='${propValue.replaceAll(
+          "'",
+          "&apos;"
+        )}'`;
+      }
+    ).replaceAll(
+      /<script [^>]*class="context"[^>]*>([\s\S]*?)<\/script>/g,
+      (_, scriptContent) => {
+        if (scriptContent.match(/window[^=;]*=/))
+          throw new Error("Assignment to window is forbidden");
+        try {
+          context = {
+            ...context,
+            ...eval(`{
+              let context = JSON.parse(\`${JSON.stringify(context).replaceAll(
+              '"',
+              '\\"'
+            )}\`);
+              ${scriptContent};
+              context
+            }`)
+          };
+        } catch (e) {
+          console.info(`Script contents: ${scriptContent}`);
+          console.info(`Props`, props);
+          shoutError(e);
+        }
+        return "";
+      }
+    );
+    const contextId = uniqueId$3();
+    const replacementVars = { context, props };
+    Object.entries(replacementVars).forEach(([varName, varContent]) => {
+      if (varContent)
+        Object.entries(varContent).forEach(([key, value]) => {
+          if (isFunction(value)) {
+            if (!contextMethods[contextId])
+              contextMethods[contextId] = {};
+            const methodId = uniqueId$3();
+            contextMethods[contextId][methodId] = value;
+            newContent = newContent.replaceAll(
+              new RegExp(`{{\\s*(${varName})\\??.${key}\\s*}}`, "g"),
+              `__contextMethod.${contextId}.${methodId}`
+            );
+          } else
+            newContent = newContent.replaceAll(
+              new RegExp(`{{\\s*(${varName})\\??.${key}\\s*}}`, "g"),
+              value !== void 0 ? value : ""
+            );
+        });
+    });
+    newContent = newContent.replaceAll(
+      /{{\s*(context|props)\?.([_$a-zA-Z]\w+)\s*}}/g,
+      ""
+    );
+    const result = newContent.match(
+      /\{\{(context|props)\.([_$a-zA-Z]\w+)\\s*}}/
+    );
+    if (result)
+      shoutError(`${result[1]}.${result[2]} is undefined`);
+    return newContent;
+  }
+  /**
+   * This method takes a template from the HTML Document and parses it to React
+   * Components.
+   *
+   * @param name The name of the template you are looking for, it must be specified as
+   * data-template="name" in the HTML element you want to use as template.
+   * @param options This argument allows you to alter the behavior of the parser, for example
+   * to replace some attribute names, parse some attributes with a custom parser function or
+   * discard some attributes. See the type IAlterDefaultOptions to get more information
+   *
+   * @returns A ReactComponent as the result of the parsed HTML template.
+   */
+  getTemplateByName(name, options) {
+    if (!this.templates[name])
+      throw new Error("There is no template with such name, ", name);
+    const component = __privateGet$2(this, _actuallyParse).call(this, this.parseContent(name, this.templates[name], options?.props), parseOptions(options));
+    return component;
+  }
+  /**
+   * This method parses a string in HTML to React Components.
+   *
+   * @param content The HTML string to parse to React Components
+   * @param options This argument allows you to alter the behavior of the parser, for example
+   * to replace some attribute names, parse some attributes with a custom parser function or
+   * discard some attributes. See the type IAlterDefaultOptions to get more information
+   *
+   * @returns A ReactComponent as the result of the parsed HTML template.
+   */
+  parseString(content2, options) {
+    return __privateGet$2(this, _actuallyParse).call(this, this.parseContent("parseStringTemplate", content2, options?.props), parseOptions(options));
+  }
+};
+_actuallyParse = new WeakMap();
+__publicField$f(_Templater, "_instance", null);
+let Templater = _Templater;
+
+const MDRenderer = ({ str }) => {
+  return /* @__PURE__ */ jsx(Box, { ...getVariant("layout.common.markdown"), children: Templater.instance.parseString(
+    new Remarkable({ linkTarget: "_blank" }).render(str)
+  ) });
+};
+var MDRenderer$1 = memo(MDRenderer);
+
+const MessageBlocks = ({ str }) => {
+  const parts = str.split(/(!!\[[^]+])/g).map((c, i) => {
+    if (c.match(/^!!\[[^]+]$/)) {
+      const definition = JSON.parse(
+        decodeBase64ToUtf8(
+          (c.match(/^!!\[([^]+)]$/) ?? [void 0, void 0])[1] ?? ""
+        )
+      );
+      return /* @__PURE__ */ jsx(MessageBlock$1, { componentData: definition }, i);
+    } else {
+      return /* @__PURE__ */ jsx(MDRenderer$1, { str: c }, i);
+    }
+  });
+  return parts;
+};
+var MessageBlocks$1 = memo(MessageBlocks);
+
+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;
+};
+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$e(this, "id");
+    __publicField$e(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, threshold = 150, className }) => {
+  const wrapperRef = useRef(null);
+  const autoScrollEnabled = useRef(true);
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper)
+      return;
+    const scrollEl = findScrollContainer(wrapper);
+    const isNearBottom = () => scrollEl.scrollHeight - (scrollEl.scrollTop + scrollEl.clientHeight) <= threshold;
+    const onWheel = (e) => {
+      if (e.deltaY < 0) {
+        autoScrollEnabled.current = false;
+      } else if (e.deltaY > 0 && isNearBottom()) {
+        autoScrollEnabled.current = true;
+      }
+    };
+    const onScroll = () => {
+      if (isNearBottom()) {
+        autoScrollEnabled.current = true;
+      }
+    };
+    function enable() {
+      autoScrollEnabled.current = true;
+    }
+    scrollEl.addEventListener("wheel", onWheel, { passive: true });
+    scrollEl.addEventListener("scroll", onScroll, { passive: true });
+    document.addEventListener("enableAutoScroll", enable);
+    scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior: "smooth" });
+    const mo = new MutationObserver(() => {
+      if (autoScrollEnabled.current) {
+        scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior: "smooth" });
+      }
+    });
+    mo.observe(wrapper, { childList: true, subtree: true });
+    return () => {
+      scrollEl.removeEventListener("wheel", onWheel);
+      scrollEl.removeEventListener("enableAutoScroll", enable);
+      scrollEl.removeEventListener("scroll", onScroll);
+      mo.disconnect();
+    };
+  }, [threshold]);
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: `${className || ""} autoscrollContainer`, children });
+};
+
+const FileCard = forwardRef(
+  ({
+    name,
+    iconsSize,
+    additionalButtons,
+    className,
+    sx,
+    width = "fit-content",
+    handleClose,
+    onDoubleClick,
+    onClick,
+    onDropFiles
+  }, ref) => {
+    const [isDragOver, setIsDragOver] = useState(false);
+    return /* @__PURE__ */ createElement(
+      Box,
+      {
+        ...getVariant("layout.common.components.fileCard"),
+        sx: {
+          ...sx,
+          width,
+          ...isDragOver && onDropFiles ? {
+            border: "2px dashed #1976d2!important",
+            backgroundColor: "#f5faff!important"
+          } : {}
+        },
+        ref,
+        key: name,
+        className: `fileCard ${className ?? ""}`,
+        onDoubleClick,
+        onClick,
+        title: name,
+        tabIndex: 0,
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragOver(true);
+        },
+        onDragLeave: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragOver(false);
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragOver(false);
+          if (onDropFiles && e.dataTransfer?.files?.length) {
+            const files = Array.from(e.dataTransfer.files);
+            onDropFiles(files);
+          }
+        }
+      },
+      /* @__PURE__ */ jsxs(Box, { className: "fileCard__content", children: [
+        /* @__PURE__ */ jsx(FileIcon, { docName: name, iconSize: iconsSize }),
+        /* @__PURE__ */ jsx(Box, { as: "span", className: "fileCard__name", children: name })
+      ] }),
+      /* @__PURE__ */ jsx(Box, { className: "fileCard__additionalButtons", children: additionalButtons?.map((c) => {
+        return /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            iconSize: "Md",
+            ...c,
+            className: `fileCard__additionalButton ${c.className ?? ""}`
+          }
+        );
+      }) }),
+      handleClose && /* @__PURE__ */ jsx(
+        Close,
+        {
+          type: "button",
+          className: "fileCard__delete",
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            handleClose(name);
+          }
+        }
+      )
+    );
+  }
+);
+
+const Dropzone = ({
+  sx,
+  className,
+  messageError,
+  progress = 0,
+  defaultLabel = getLabel("btnUploadClass").text,
+  draggingLabel = getLabel("lblDroping").text,
+  onClick,
+  onChange,
+  handleInfoButton
+}) => {
+  const innerSx = messageError ? { borderLeft: "2px solid", borderColor: "danger" } : {};
+  const fileInputRef = useRef(null);
+  const handleClick = (ev) => {
+    onClick?.(ev);
+    if (!ev.defaultPrevented) {
+      fileInputRef.current?.click();
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
+  const [isDragging, setIsDragging] = useState(false);
+  const handleDragStart = (_e) => {
+    setIsDragging(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...getVariant("layout.execution.components.uploader.dropzone"),
+      className: "dropzone__container",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            tabIndex: 0,
+            sx: { ...innerSx, sx },
+            className: `dropzone ${className ?? ""}`,
+            onClick: handleClick,
+            onKeyDown: (ev) => {
+              if (ev.code === "Enter" || ev.code === "Space") {
+                handleClick(ev);
+              }
+            },
+            onDrop: (e) => {
+              e.preventDefault();
+              const newFiles = Array.from(e.dataTransfer.files);
+              setIsDragging(false);
+              onChange?.(newFiles);
+            },
+            onDragEnter: handleDragStart,
+            onDragLeave: handleDragLeave,
+            onDragOver: handleDragOver,
+            children: [
+              progress > 0 && progress < 100 && /* @__PURE__ */ jsx(Progress, { max: 100, value: progress, className: "progressBar" }),
+              messageError ? /* @__PURE__ */ jsx(Box, { color: "danger", children: messageError }) : isDragging ? draggingLabel : defaultLabel,
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  multiple: true,
+                  type: "file",
+                  ref: fileInputRef,
+                  style: { display: "none" },
+                  onChange: (e) => {
+                    e.preventDefault();
+                    if (e.target.files) {
+                      const newFiles = Array.from([...e.target.files]);
+                      onChange?.(newFiles);
+                      e.target.value = "";
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        handleInfoButton && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: "info",
+            iconSize: "Sm",
+            icon: "Info",
+            onMouseEnter: handleInfoButton,
+            onClick: handleClick
+          }
+        )
+      ]
+    }
+  );
+};
 
 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);
+  __defNormalProp$d(obj, key + "" , value);
   return value;
 };
-var __accessCheck$4 = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet$2 = (obj, member, getter) => {
-  __accessCheck$4(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd$4 = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var _actuallyParse;
-console.time("Templater parse");
-console.time("Templater pre screen unlock");
-function importTemplaterComponent(path) {
-  return lazy(() => {
-    return new Promise((resolve) => {
-      import(
-        /* webpackChunkName: "[request]" */
-        /* webpackInclude: /\.tsx?$/ */
-        /* webpackPreload: true */
-        /* webpackExclude: /projectAnalysisTree/ */
-        `/src/dynamic/${path}`
-      ).then((result2) => {
-        resolve(result2);
-      }).catch((error) => {
-        resolve({
-          default: () => {
-            console.error(error);
-            throw new Error(
-              `The above error ocurred at component ${path}, does it exist?`
-            );
-          }
-        });
-      });
-    });
-  });
-}
-function parseShortcut(shortcut) {
-  if ("^($)[.".indexOf(shortcut) !== -1)
-    return `\\${shortcut}`;
-  return shortcut;
-}
-const parsedShortcuts = Object.entries(PathShortcuts).map(
-  ([shortcut, path]) => {
-    return [parseShortcut(shortcut), path];
+class UploadHandler {
+  constructor(props) {
+    this.props = props;
+    __publicField$d(this, "state", { inProgressFiles: [], uploadedFiles: [] });
+    makeAutoObservable(this);
+    this.state.uploadedFiles = this.props.initialFiles;
   }
-);
-const Wrapper = ({
-  children,
-  onMount
-}) => {
-  React.useEffect(() => {
-    if (onMount) {
-      onMount();
-    }
-    return () => {
-    };
-  }, []);
-  return children;
-};
-const Command = Error;
-function makeEmptyCommentsData() {
-  return { customShortcuts: [], SuspenseComponent: () => null };
-}
-const parseOptions = (customOptions, commentsData) => {
-  let actualCommentsData = commentsData ?? makeEmptyCommentsData();
-  return {
-    trim: true,
-    replace: (domNode) => {
-      if (customOptions?.debug)
-        console.log(domNode);
-      if (domNode.type.toLowerCase() === "comment") {
-        CommentsParsers.forEach((parser) => {
-          const matchResult = domNode.data.match(
-            parser.match
-          );
-          if (matchResult) {
-            actualCommentsData = parser.parse(matchResult, actualCommentsData);
-          }
+  delete(file) {
+    this.props.onDelete(file).then((res) => {
+      if (res === true) {
+        this.state.uploadedFiles = this.state.uploadedFiles.filter(
+          (c) => c !== file
+        );
+      } else if (typeof res === "string") {
+        ApiaUtil.instance.notifications.notify({
+          message: res
         });
       }
-      if (domNode instanceof Element && domNode.attribs) {
-        let componentName = domNode.attribs["data-component"];
-        if (componentName) {
-          actualCommentsData.customShortcuts.forEach(
-            ([shortcut, replacement]) => {
-              if (componentName.match(new RegExp(`^${shortcut}.+`))) {
-                componentName = replacement + componentName.slice(shortcut.length);
-              }
-            }
-          );
-          parsedShortcuts.forEach(([shortcut, replacement]) => {
-            if (componentName.match(new RegExp(`^${shortcut}.+`))) {
-              componentName = replacement + componentName.slice(shortcut.length);
-            }
-          });
-          if (componentName.startsWith("@"))
-            componentName = componentName.slice(1);
-        }
-        try {
-          const Component = componentName ? importTemplaterComponent(componentName) : TagReplacers[domNode.name] ?? ((props3) => /* @__PURE__ */ jsx(Box$1, { as: domNode.name, ...props3 }));
-          for (let i = 0; i < ComplexReplacements.length; i++) {
-            const complexReplacement = ComplexReplacements[i];
-            const result2 = complexReplacement(
-              domNode,
-              Component,
-              customOptions,
-              commentsData
-            );
-            if (result2 !== false)
-              return /* @__PURE__ */ jsx(Suspense, { children: result2 });
-          }
-          [
-            ...AttributeFilters,
-            ...customOptions?.filterAttributes ?? []
-          ].forEach((att) => {
-            delete domNode.attribs[att];
-          });
-          const props2 = Object.entries(domNode.attribs).reduce(
-            (dictionary, [initialName, initialValue]) => {
-              const name = initialName;
-              const value = initialValue;
-              let hasParsed = false;
-              const returnDictionary = { ...dictionary };
-              for (let i = 0; i < AttributeParsers.length; i++) {
-                const parser = AttributeParsers[i];
-                const match = name.match(parser.match);
-                if (customOptions?.debug)
-                  console.log(parser.match, match);
-                if (match) {
-                  const parsed = parser.parse(match, value);
-                  if (customOptions?.debug)
-                    console.log(parser.match, parsed);
-                  if (parsed) {
-                    parsed.forEach(({ newName, newValue }) => {
-                      const finalName = {
-                        ...AttributeReplacers,
-                        ...customOptions?.attributesReplacement ?? {}
-                      }[newName] ?? newName;
-                      returnDictionary[finalName] = AttributeValueParsers(newValue);
-                    });
-                    hasParsed = true;
-                  }
-                  break;
-                }
-              }
-              if (!hasParsed) {
-                const newName = {
-                  ...AttributeReplacers,
-                  ...customOptions?.attributesReplacement ?? {}
-                }[name] ?? name;
-                returnDictionary[newName] = AttributeValueParsers(value);
-              }
-              return returnDictionary;
-            },
-            {}
-          );
-          const children = domToReact(
-            cloneDeep(domNode.children),
-            parseOptions(customOptions, actualCommentsData)
-          );
-          delete props2.children;
-          const { onComponentload } = props2;
-          if (onComponentload) {
-            delete props2.onComponentload;
-          }
-          if (actualCommentsData.SuspenseComponent) {
-            if (onComponentload) {
-              return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Wrapper, { onMount: onComponentload, children: /* @__PURE__ */ jsx(Component, { ...props2, children: domNode.children.length > 0 ? children : null }) }) });
-            }
-            return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Component, { ...props2, children: domNode.children.length > 0 ? children : null }) });
-          }
-          if (onComponentload)
-            return /* @__PURE__ */ jsx(Wrapper, { onMount: onComponentload, children: /* @__PURE__ */ jsx(Component, { ...props2, children: domNode.children.length > 0 ? children : null }) });
-          return /* @__PURE__ */ jsx(Component, { ...props2, children: domNode.children.length > 0 ? children : null });
-        } catch (e) {
-          if (isMessage(e)) {
-            const match = e.message.match(/COMMAND: *(\w[\w\d_-]*)/);
-            if (match) {
-              return processCommand(match[1]);
-            }
-          }
-          console.error(e);
-        }
-      }
-      return domNode;
-    },
-    htmlparser2: { lowerCaseAttributeNames: false }
-  };
-};
-const _Templater = class _Templater {
-  constructor() {
-    __publicField$d(this, "isDownloadingTemplate", false);
-    __publicField$d(this, "templates", {});
-    __privateAdd$4(this, _actuallyParse, (html, options) => {
-      let actualHTML = html;
-      if (window.onPreParseTemplate) {
-        const parser = new DOMParser();
-        const document2 = parser.parseFromString(html, "text/html");
-        window.onPreParseTemplate?.(document2);
-        actualHTML = document2.body.innerHTML;
-      }
-      return parse(actualHTML, options);
     });
-    this.initTemplates();
-  }
-  static get instance() {
-    if (!this._instance) {
-      this._instance = new _Templater();
-    }
-    return this._instance;
   }
-  initTemplates() {
-    const templates = [
-      ...document.querySelectorAll("[data-template]")
-    ];
-    const templatesObject = templates.reduce((dictionary, template) => {
-      const name = template.getAttribute("data-template");
-      if (!name)
-        return dictionary;
-      return {
-        ...dictionary,
-        [name]: this.parseContent(name, template.outerHTML, {})
+  start(files) {
+    files.forEach((file) => {
+      const newUpload = {
+        abortController: new AbortController(),
+        id: uniqueId$4("file_upload"),
+        file,
+        progress: 0
       };
-    }, {});
-    templates.forEach((template) => template.remove());
-    this.templates = templatesObject;
+      this.state.inProgressFiles.push(newUpload);
+      this.props.onUpload(newUpload).then((res) => {
+        this.state.inProgressFiles = this.state.inProgressFiles.filter(
+          (c) => c.id !== newUpload.id
+        );
+        if (typeof res === "string") {
+          ApiaUtil.instance.notifications.notify({
+            message: res,
+            icon: ""
+          });
+        } else if (res) {
+          this.state.uploadedFiles.push(res);
+        }
+      });
+    });
   }
-  /**
-   * This method parses the string looking for <script class="context"> tags
-   * and placeholders, run that code and make the replacements in the template
-   * string.
-   *
-   * @param content The HTML string
-   */
-  parseContent(templateName, content, props) {
-    function shoutError(error) {
-      console.error("%cParse template error", "font-size: 16px; margin: 10px");
-      throw new Error(`${error} at template ${templateName}`);
-    }
-    let context = {};
-    let newContent = content.replaceAll(
-      /data-json-([\w_-]+)="([^"]+)"/g,
-      (_2, propName, propValue) => {
-        return `data-json-${propName}='${propValue.replaceAll(
-          "'",
-          "&apos;"
-        )}'`;
-      }
-    ).replaceAll(
-      /<script [^>]*class="context"[^>]*>([\s\S]*?)<\/script>/g,
-      (_, scriptContent) => {
-        if (scriptContent.match(/window[^=;]*=/))
-          throw new Error("Assignment to window is forbidden");
-        try {
-          context = {
-            ...context,
-            ...eval(`{
-              let context = JSON.parse(\`${JSON.stringify(context).replaceAll(
-              '"',
-              '\\"'
-            )}\`);
-              ${scriptContent};
-              context
-            }`)
-          };
-        } catch (e) {
-          console.info(`Script contents: ${scriptContent}`);
-          console.info(`Props`, props);
-          shoutError(e);
+}
+const Uploader = observer(({ handler }) => {
+  return /* @__PURE__ */ jsxs(Box, { className: "file_uploader", children: [
+    /* @__PURE__ */ jsx(Box, { className: "file_uploader__dropzone", children: (handler.props.isMultiple || handler.state.uploadedFiles.length === 0 && handler.state.inProgressFiles.length === 0) && /* @__PURE__ */ jsx(
+      Dropzone,
+      {
+        onChange: (ev) => {
+          handler.start(ev);
         }
-        return "";
       }
-    );
-    const contextId = uniqueId$3();
-    const replacementVars = { context, props };
-    Object.entries(replacementVars).forEach(([varName, varContent]) => {
-      if (varContent)
-        Object.entries(varContent).forEach(([key, value]) => {
-          if (isFunction(value)) {
-            if (!contextMethods[contextId])
-              contextMethods[contextId] = {};
-            const methodId = uniqueId$3();
-            contextMethods[contextId][methodId] = value;
-            newContent = newContent.replaceAll(
-              new RegExp(`{{\\s*(${varName})\\??.${key}\\s*}}`, "g"),
-              `__contextMethod.${contextId}.${methodId}`
-            );
-          } else
-            newContent = newContent.replaceAll(
-              new RegExp(`{{\\s*(${varName})\\??.${key}\\s*}}`, "g"),
-              value !== void 0 ? value : ""
-            );
-        });
+    ) }),
+    /* @__PURE__ */ jsx(Box, { className: "file_uploader__in_progress", children: handler.state.inProgressFiles.map((c) => /* @__PURE__ */ jsx(
+      Dropzone,
+      {
+        progress: c.progress,
+        messageError: c.error
+      },
+      c.file.name
+    )) }),
+    /* @__PURE__ */ jsx(Box, { className: "file_uploader__files_list", children: handler.state.uploadedFiles.map((c) => /* @__PURE__ */ jsx(
+      FileCard,
+      {
+        name: c.name,
+        handleClose: () => handler.delete(c)
+      },
+      c.id
+    )) })
+  ] });
+});
+
+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.base64 }),
+            attachment.description && /* @__PURE__ */ jsx(Label$1, { children: attachment.description })
+          ]
+        }
+      )
     });
-    newContent = newContent.replaceAll(
-      /{{\s*(context|props)\?.([_$a-zA-Z]\w+)\s*}}/g,
-      ""
-    );
-    const result = newContent.match(
-      /\{\{(context|props)\.([_$a-zA-Z]\w+)\\s*}}/
+    return /* @__PURE__ */ jsx(
+      FileCard,
+      {
+        ref,
+        name: attachment.name,
+        handleClose: onRemove,
+        additionalButtons: onAddDescription ? [
+          {
+            icon: "Pencil",
+            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;
+                },
+                title: getLabel("btnAddComment").text
+              });
+            },
+            variant: "icon-only"
+          }
+        ] : []
+      }
     );
-    if (result)
-      shoutError(`${result[1]}.${result[2]} is undefined`);
-    return newContent;
-  }
-  /**
-   * This method takes a template from the HTML Document and parses it to React
-   * Components.
-   *
-   * @param name The name of the template you are looking for, it must be specified as
-   * data-template="name" in the HTML element you want to use as template.
-   * @param options This argument allows you to alter the behavior of the parser, for example
-   * to replace some attribute names, parse some attributes with a custom parser function or
-   * discard some attributes. See the type IAlterDefaultOptions to get more information
-   *
-   * @returns A ReactComponent as the result of the parsed HTML template.
-   */
-  getTemplateByName(name, options) {
-    if (!this.templates[name])
-      throw new Error("There is no template with such name, ", name);
-    const component = __privateGet$2(this, _actuallyParse).call(this, this.parseContent(name, this.templates[name], options?.props), parseOptions(options));
-    return component;
-  }
-  /**
-   * This method parses a string in HTML to React Components.
-   *
-   * @param content The HTML string to parse to React Components
-   * @param options This argument allows you to alter the behavior of the parser, for example
-   * to replace some attribute names, parse some attributes with a custom parser function or
-   * discard some attributes. See the type IAlterDefaultOptions to get more information
-   *
-   * @returns A ReactComponent as the result of the parsed HTML template.
-   */
-  parseString(content2, options) {
-    return __privateGet$2(this, _actuallyParse).call(this, this.parseContent("parseStringTemplate", content2, options?.props), parseOptions(options));
   }
-};
-_actuallyParse = new WeakMap();
-__publicField$d(_Templater, "_instance", null);
-let Templater = _Templater;
+);
 
-const MDRenderer = ({ str }) => {
-  const parts = str.split(/(!!\[[^]+])/g).map((c, i) => {
-    if (c.match(/^!!\[[^]+]$/)) {
-      const definition = JSON.parse(
-        decodeBase64ToUtf8(
-          (c.match(/^!!\[([^]+)]$/) ?? [void 0, void 0])[1] ?? ""
-        )
-      );
-      if (typeof definition.args === "string") {
-        definition.args = JSON.parse(definition.args);
+const Attachments = observer(
+  ({
+    attachments,
+    onRemove,
+    onAddDescription,
+    className
+  }) => {
+    if (!attachments.length)
+      return null;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: `attachments ${className}`,
+        ...getVariant("layout.common.chat.attachments"),
+        children: attachments.map((x) => /* @__PURE__ */ jsx(
+          FileAttachment,
+          {
+            attachment: x,
+            onRemove: onRemove ? () => onRemove(x) : void 0,
+            onAddDescription
+          },
+          x.id
+        ))
       }
-      const Component = importComponent(definition.path);
-      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Component, { ...definition.args }) }, i);
-    } else {
-      return /* @__PURE__ */ jsx(Box, { children: Templater.instance.parseString(
-        new Remarkable({ linkTarget: "_blank" }).render(c)
-      ) }, i);
-    }
-  });
-  return parts;
-};
-var MDRenderer$1 = memo(MDRenderer);
+    );
+  }
+);
 
 const Message = observer(
   ({
@@ -6448,7 +6413,7 @@ const Message = observer(
             {
               className: "history_message__content",
               ...typeof message === "string" ? {
-                children: /* @__PURE__ */ jsx(MDRenderer$1, { str: message })
+                children: /* @__PURE__ */ jsx(MessageBlocks$1, { str: message })
               } : { children: message }
             }
           ),
@@ -8337,13 +8302,16 @@ const LinearSpinnerLock = ({ isLocked }) => isLocked ? /* @__PURE__ */ jsx(
     className: "locker",
     style: {
       backgroundColor: "rgb(128 128 128 / 0%)",
-      inset: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
       position: "fixed",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      zIndex: "modal",
-      transition: "background-color 2s"
+      zIndex: 1200,
+      transition: "background-color 0.25s"
     },
     ref: (el) => {
       if (el instanceof HTMLElement) {
@@ -8907,7 +8875,7 @@ const DefaultIconRendererNoMemo = (props) => {
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      title: String(props.additionalProps?.title) || props.label,
+      title: String(props.ariaLabel) || props.label,
       className: "iconsList__icon__wrapper",
       children: [
         /* @__PURE__ */ jsxs(Box, { className: "iconsList__icon__image__wrapper", children: [
@@ -8922,7 +8890,7 @@ const DefaultIconRendererNoMemo = (props) => {
           ),
           props.icon && /* @__PURE__ */ jsx(Icon$1, { icon: props.icon, title: props.ariaLabel })
         ] }),
-        /* @__PURE__ */ jsx(Box, { className: "iconsList__icon__label", children: props.label })
+        /* @__PURE__ */ jsx(Box, { className: "iconsList__icon__label", title: props.ariaLabel, children: props.label })
       ]
     }
   );
@@ -12049,5 +12017,5 @@ const _FiltersStore = class _FiltersStore {
 __publicField(_FiltersStore, "instance", new _FiltersStore());
 let FiltersStore = _FiltersStore;
 
-export { Accordion, AccordionAside, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, Aside, AsideLoader, AsidePanel, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, AutoscrollContainer, BaseButton, BodyAside, CalendarModal, Captcha, CenteredHeaderButtons, ChatController, ChatMessage, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DeadSessionModal, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, Dropzone, FavoriteIcon, FieldErrorMessage, FieldLabel, FileCard, FilterConditionDTO, FilterDTO, FiltersStore, FloatingAside, FloatingChatController, FooterButtons, FooterResponsiveButtons, HamburguerMenu, Header, HeaderButtons, IconButton, IconInput, IconsList, Label, LabelBox, LinearLoader, LinearSpinnerLock, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, MDRenderer$1 as MDRenderer, Modal, NumberInput, Overlay, Pagination, Parameter, ParameterRender, Parameters, ParametersGroup, ParametersStore, ParametersTable, ProgressBar, RequiredMark, ScreenLocker, ShowResponsive, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Templater, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, UploadHandler, Uploader, WaiTypeAhead, getBase64FromBlob, getBase64FromFile, getFieldErrorStyles, getFieldTouchedStyles, getFileExtension, importComponent, isFavoriteIcon, isImage, isParametersGroup, makeResponsiveComponent, menuController, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useMenu, useModal, useModalContext, useOtherTagButton, useTabsContext };
+export { Accordion, AccordionAside, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, Aside, AsideLoader, AsidePanel, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, AutoscrollContainer, BaseButton, BodyAside, CalendarModal, Captcha, CenteredHeaderButtons, ChatController, ChatMessage, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DeadSessionModal, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, Dropzone, FavoriteIcon, FieldErrorMessage, FieldLabel, FileCard, FilterConditionDTO, FilterDTO, FiltersStore, FloatingAside, FloatingChatController, FooterButtons, FooterResponsiveButtons, HamburguerMenu, Header, HeaderButtons, IconButton, IconInput, IconsList, Label, LabelBox, LinearLoader, LinearSpinnerLock, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, MDRenderer$1 as MDRenderer, MessageBlock$1 as MessageBlock, MessageBlocks$1 as MessageBlocks, Modal, NumberInput, Overlay, Pagination, Parameter, ParameterRender, Parameters, ParametersGroup, ParametersStore, ParametersTable, ProgressBar, RequiredMark, ScreenLocker, ShowResponsive, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Templater, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, UploadHandler, Uploader, WaiTypeAhead, getBase64FromBlob, getBase64FromFile, getFieldErrorStyles, getFieldTouchedStyles, getFileExtension, importComponent, isFavoriteIcon, isImage, isParametersGroup, makeResponsiveComponent, menuController, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useMenu, useModal, useModalContext, useOtherTagButton, useTabsContext };
 //# sourceMappingURL=index.js.map