@apia/components 4.0.41 → 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, getLabel, isChild, EventEmitter, useUnmount, useMount, 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';
@@ -5230,485 +5230,79 @@ 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,
-          {
-            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$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;
-};
-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;
-                },
-                title: getLabel("btnAddComment").text
-              });
-            },
-            variant: "icon-only"
-          }
-        ] : []
-      }
-    );
-  }
-);
-
-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 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);
-          }
-        }
-      ];
+      ];
     }
   },
   {
@@ -5980,10 +5574,10 @@ const CommentsParsers = [
   }
 ];
 
-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$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) => {
@@ -6181,8 +5775,8 @@ const parseOptions = (customOptions, commentsData) => {
 };
 const _Templater = class _Templater {
   constructor() {
-    __publicField$d(this, "isDownloadingTemplate", false);
-    __publicField$d(this, "templates", {});
+    __publicField$f(this, "isDownloadingTemplate", false);
+    __publicField$f(this, "templates", {});
     __privateAdd$4(this, _actuallyParse, (html, options) => {
       let actualHTML = html;
       if (window.onPreParseTemplate) {
@@ -6327,71 +5921,477 @@ const _Templater = class _Templater {
     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;
+_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
+          }
+        )
+      ]
+    }
+  );
+};
 
-const MDRenderer = ({ str }) => {
-  return /* @__PURE__ */ jsx(Box, { ...getVariant("layout.common.markdown"), children: Templater.instance.parseString(
-    new Remarkable({ linkTarget: "_blank" }).render(str)
-  ) });
+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, key + "" , value);
+  return value;
 };
-var MDRenderer$1 = memo(MDRenderer);
-
-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" });
-          }
+class UploadHandler {
+  constructor(props) {
+    this.props = props;
+    __publicField$d(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 MessageBlock = ({
-  componentData
-}) => {
-  if (typeof componentData.args === "string") {
-    componentData.args = JSON.parse(componentData.args);
+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;
+                },
+                title: getLabel("btnAddComment").text
+              });
+            },
+            variant: "icon-only"
+          }
+        ] : []
+      }
+    );
   }
-  const Component = importComponent(componentData.path);
-  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Component, { ...componentData.args }) });
-};
-var MessageBlock$1 = memo(MessageBlock);
+);
 
-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);
+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 Message = observer(
   ({
@@ -8302,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) {
@@ -8872,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: [
@@ -8887,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 })
       ]
     }
   );
@@ -12014,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