@appquality/unguess-design-system 3.1.105-attachments → 3.1.106-attachments

package/build/index.js

@@ -25,9 +25,9 @@ var sunburst = require('@nivo/sunburst');
 var waffle = require('@nivo/waffle');
 var line = require('@nivo/line');
 var reactForms = require('@zendeskgarden/react-forms');
-var uuid = require('uuid');
 var react = require('@tiptap/react');
 var reactTooltips = require('@zendeskgarden/react-tooltips');
+var uuid = require('uuid');
 var Typography = require('@tiptap/extension-typography');
 var Link = require('@tiptap/extension-link');
 var StarterKit = require('@tiptap/starter-kit');
@@ -2351,7 +2351,6 @@ const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMenti
             }));
         },
         addThumbnails: ({ files }) => {
-            files.forEach((file) => (file.isLoadingMedia = true));
             setThumbnails((prev) => [...prev, ...files]);
             if (onFileUpload) {
                 onFileUpload(files).then((data) => {
@@ -2737,74 +2736,6 @@ const ChatTitle = styled__default["default"](Title$1) `
   padding: ${({ theme }) => `${theme.space.sm} ${theme.space.md}`};
 `;
 
-const UgClose$1 = styled__default["default"](reactNotifications.Close) `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${({ theme }) => theme.space.xl};
-    height: ${({ theme }) => theme.space.xl};
-`;
-/**
- * Title is a basic component used to display a title. Often used in card headers.
- */
-const Close = (props) => jsxRuntime.jsx(UgClose$1, Object.assign({}, props));
-
-const NOTIFICATION_COMPONENT_ID = "notifications.notification";
-const CLOSE_COMPONENT_ID = "notifications.notification.close";
-const CLOSE_ICON_COMPONENT_ID = "notifications.notification.close-icon";
-const TITLE_COMPONENT_ID = "notifications.notification.title";
-const UgClose = styled__default["default"](Close).attrs((props) => {
-    var _a;
-    return ({
-        "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : CLOSE_ICON_COMPONENT_ID,
-    });
-}) `
-  ${(props) => reactTheming.retrieveComponentStyles(CLOSE_ICON_COMPONENT_ID, props)};
-`;
-const UgAnchor = styled__default["default"](reactButtons.Anchor).attrs((props) => {
-    var _a;
-    return ({
-        "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : CLOSE_COMPONENT_ID,
-    });
-}) `
-  ${(props) => reactTheming.retrieveComponentStyles(CLOSE_COMPONENT_ID, props)};
-`;
-const UgTitle = styled__default["default"](Title$1).attrs((props) => {
-    var _a;
-    return ({
-        "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : TITLE_COMPONENT_ID,
-    });
-}) `
-  ${(props) => reactTheming.retrieveComponentStyles(TITLE_COMPONENT_ID, props)};
-`;
-const UgNotification = styled__default["default"](reactNotifications.Notification) `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-right: ${({ theme }) => theme.space.md};
-  white-space: pre;
-
-  ${UgAnchor} {
-    flex-shrink: 0;
-    margin-left: ${({ theme }) => theme.space.md};
-  }
-
-  ${(props) => reactTheming.retrieveComponentStyles(NOTIFICATION_COMPONENT_ID, props)};
-`;
-/**
- * A Notification is a passive status update that keeps users informed of system progress.
- * <hr>
- * Used for this:
-    - For a passive status update about user or system activity
- */
-const Notification = (_a) => {
-    var { closeText, message, onClose, type, isPrimary, isRegular } = _a, props = __rest(_a, ["closeText", "message", "onClose", "type", "isPrimary", "isRegular"]);
-    return (jsxRuntime.jsxs(UgNotification, Object.assign({ type: type, isPrimary: isPrimary }, props, { children: [jsxRuntime.jsx(UgTitle, Object.assign({ isRegular: isRegular, type: type, isPrimary: isPrimary }, { children: message })), jsxRuntime.jsx(UgAnchor, Object.assign({ type: type, isPrimary: isPrimary, onClick: onClose }, { children: closeText !== null && closeText !== void 0 ? closeText : jsxRuntime.jsx(UgClose, {}) }))] })));
-};
-// ToastProvider
-const ToastProvider = (props) => (jsxRuntime.jsx(reactNotifications.ToastProvider, Object.assign({}, props)));
-const useToast = reactNotifications.useToast;
-
 var _path$w;
 function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
 const SvgBoldFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
@@ -3042,6 +2973,97 @@ const SvgClipboard = props => /*#__PURE__*/React__namespace.createElement("svg",
   d: "M9.5 4v7.7c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V3C6.5 1.6 7.6.5 9 .5s2.5 1.1 2.5 2.5v9c0 1.9-1.6 3.5-3.5 3.5S4.5 13.9 4.5 12V4"
 })));
 
+const UgClose$1 = styled__default["default"](reactNotifications.Close) `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${({ theme }) => theme.space.xl};
+    height: ${({ theme }) => theme.space.xl};
+`;
+/**
+ * Title is a basic component used to display a title. Often used in card headers.
+ */
+const Close = (props) => jsxRuntime.jsx(UgClose$1, Object.assign({}, props));
+
+const NOTIFICATION_COMPONENT_ID = "notifications.notification";
+const CLOSE_COMPONENT_ID = "notifications.notification.close";
+const CLOSE_ICON_COMPONENT_ID = "notifications.notification.close-icon";
+const TITLE_COMPONENT_ID = "notifications.notification.title";
+const UgClose = styled__default["default"](Close).attrs((props) => {
+    var _a;
+    return ({
+        "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : CLOSE_ICON_COMPONENT_ID,
+    });
+}) `
+  ${(props) => reactTheming.retrieveComponentStyles(CLOSE_ICON_COMPONENT_ID, props)};
+`;
+const UgAnchor = styled__default["default"](reactButtons.Anchor).attrs((props) => {
+    var _a;
+    return ({
+        "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : CLOSE_COMPONENT_ID,
+    });
+}) `
+  ${(props) => reactTheming.retrieveComponentStyles(CLOSE_COMPONENT_ID, props)};
+`;
+const UgTitle = styled__default["default"](Title$1).attrs((props) => {
+    var _a;
+    return ({
+        "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : TITLE_COMPONENT_ID,
+    });
+}) `
+  ${(props) => reactTheming.retrieveComponentStyles(TITLE_COMPONENT_ID, props)};
+`;
+const UgNotification = styled__default["default"](reactNotifications.Notification) `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: ${({ theme }) => theme.space.md};
+  white-space: pre;
+
+  ${UgAnchor} {
+    flex-shrink: 0;
+    margin-left: ${({ theme }) => theme.space.md};
+  }
+
+  ${(props) => reactTheming.retrieveComponentStyles(NOTIFICATION_COMPONENT_ID, props)};
+`;
+/**
+ * A Notification is a passive status update that keeps users informed of system progress.
+ * <hr>
+ * Used for this:
+    - For a passive status update about user or system activity
+ */
+const Notification = (_a) => {
+    var { closeText, message, onClose, type, isPrimary, isRegular } = _a, props = __rest(_a, ["closeText", "message", "onClose", "type", "isPrimary", "isRegular"]);
+    return (jsxRuntime.jsxs(UgNotification, Object.assign({ type: type, isPrimary: isPrimary }, props, { children: [jsxRuntime.jsx(UgTitle, Object.assign({ isRegular: isRegular, type: type, isPrimary: isPrimary }, { children: message })), jsxRuntime.jsx(UgAnchor, Object.assign({ type: type, isPrimary: isPrimary, onClick: onClose }, { children: closeText !== null && closeText !== void 0 ? closeText : jsxRuntime.jsx(UgClose, {}) }))] })));
+};
+// ToastProvider
+const ToastProvider = (props) => (jsxRuntime.jsx(reactNotifications.ToastProvider, Object.assign({}, props)));
+const useToast = reactNotifications.useToast;
+
+const acceptedMediaTypes = /^(image|video)\//;
+function useMedia() {
+    const { addToast } = useToast();
+    function getValidMedia(data) {
+        const wrongFiles = Array.from(data).filter((file) => !acceptedMediaTypes.test(file.type));
+        if (wrongFiles.length) {
+            addToast(({ close }) => (jsxRuntime.jsx(Notification, { onClose: close, type: "error", message: wrongFiles.length === 1
+                    ? `${wrongFiles[0].name} not supported, please upload video or image only`
+                    : "Some attachments are not supported, please upload video or image only", isPrimary: true })), { placement: "top" });
+        }
+        return Array.from(data).filter((file) => acceptedMediaTypes.test(file.type));
+    }
+    function getMedia(data) {
+        return getValidMedia(data).map((file) => {
+            return Object.assign(file, {
+                isLoadingMedia: true,
+                internal_id: uuid.v4(),
+            });
+        });
+    }
+    return { getMedia };
+}
+
 const MenuContainer = styled__default["default"].div `
   padding: ${({ theme }) => theme.space.xs} 0;
   display: flex;
@@ -3059,59 +3081,33 @@ const VerticalDivider = styled__default["default"].div `
 const CommentBar = ({ editor, i18n, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { addThumbnails } = useChatContext();
+    const { getMedia } = useMedia();
     if (!editor)
         return null;
-    const getIcon = (type) => {
-        switch (type) {
-            case "bold":
-                return jsxRuntime.jsx(SvgBoldStroke, {});
-            case "italic":
-                return jsxRuntime.jsx(SvgItalicStroke, {});
-            case "mention":
-                return jsxRuntime.jsx(SvgAtStroke, {});
-            case "attachment":
-                return jsxRuntime.jsx(SvgClipboard, {});
-            default:
-                return null;
-        }
+    const handleBoldClick = () => {
+        editor.chain().focus().toggleBold().run();
     };
-    const handleClick = (type) => {
-        switch (type) {
-            case "bold":
-                return editor.chain().focus().toggleBold().run();
-            case "italic":
-                return editor.chain().focus().toggleItalic().run();
-            case "mention":
-                const { from } = editor.state.selection;
-                const char = from > 1 ? " @" : "@";
-                return editor.chain().focus().insertContent(char).run();
-            case "attachment":
-                //open a file browser to select one or more images
-                const fileInput = document.createElement("input");
-                fileInput.type = "file";
-                fileInput.accept = "image/*,video/*";
-                fileInput.multiple = true;
-                fileInput.click();
-                fileInput.onchange = () => {
-                    const files = fileInput.files;
-                    if (files) {
-                        const mediaFiles = Array.from(files).map((file) => {
-                            return Object.assign(file, {
-                                isLoadingMedia: false,
-                                internal_id: uuid.v4(),
-                            });
-                        });
-                        if (mediaFiles.length === 0)
-                            return;
-                        addThumbnails({ files: mediaFiles });
-                    }
-                };
-                return;
-            default:
-                return;
-        }
+    const handleItalicClick = () => {
+        editor.chain().focus().toggleItalic().run();
+    };
+    const handleMentionClick = () => {
+        const { from } = editor.state.selection;
+        const char = from > 1 ? " @" : "@";
+        editor.chain().focus().insertContent(char).run();
     };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(MenuContainer, Object.assign({ id: "menu-container" }, { children: [jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _a === void 0 ? void 0 : _a.bold) !== null && _b !== void 0 ? _b : "Bold text"} ${isMac() ? "Cmd" : "Ctrl"} + B`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false, onClick: () => handleClick("bold") }, { children: getIcon("bold") })) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_d = (_c = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _c === void 0 ? void 0 : _c.italic) !== null && _d !== void 0 ? _d : "Italic text"} ${isMac() ? "Cmd" : "Ctrl"} + I`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false, onClick: () => handleClick("italic") }, { children: getIcon("italic") })) })), jsxRuntime.jsx(VerticalDivider, {}), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_f = (_e = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _e === void 0 ? void 0 : _e.mention) !== null && _f !== void 0 ? _f : "Add a mention", placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("mention"), isPrimary: editor.isActive("mention"), isPill: false, onClick: () => handleClick("mention") }, { children: getIcon("mention") })) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_h = (_g = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _g === void 0 ? void 0 : _g.attachment) !== null && _h !== void 0 ? _h : "Upload images and video. Max size: 5GB", placement: "top", type: "light", size: "small", hasArrow: true }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("attachment"), isPrimary: editor.isActive("attachment"), isPill: false, onClick: () => handleClick("attachment") }, { children: getIcon("attachment") })) }))] })) }));
+    const handleAttachmentClick = () => {
+        const fileInput = document.createElement("input");
+        fileInput.type = "file";
+        fileInput.accept = "image/*,video/*";
+        fileInput.multiple = true;
+        fileInput.click();
+        fileInput.onchange = () => {
+            if (fileInput.files) {
+                addThumbnails({ files: getMedia(fileInput.files) });
+            }
+        };
+    };
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(MenuContainer, Object.assign({ id: "menu-container" }, { children: [jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _a === void 0 ? void 0 : _a.bold) !== null && _b !== void 0 ? _b : "Bold text"} ${isMac() ? "Cmd" : "Ctrl"} + B`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false, onClick: handleBoldClick }, { children: jsxRuntime.jsx(SvgBoldStroke, {}) })) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_d = (_c = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _c === void 0 ? void 0 : _c.italic) !== null && _d !== void 0 ? _d : "Italic text"} ${isMac() ? "Cmd" : "Ctrl"} + I`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false, onClick: handleItalicClick }, { children: jsxRuntime.jsx(SvgItalicStroke, {}) })) })), jsxRuntime.jsx(VerticalDivider, {}), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_f = (_e = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _e === void 0 ? void 0 : _e.mention) !== null && _f !== void 0 ? _f : "Add a mention", placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("mention"), isPrimary: editor.isActive("mention"), isPill: false, onClick: handleMentionClick }, { children: jsxRuntime.jsx(SvgAtStroke, {}) })) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_h = (_g = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _g === void 0 ? void 0 : _g.attachment) !== null && _h !== void 0 ? _h : "Upload images and video. Max size: 5GB", placement: "top", type: "light", size: "small", hasArrow: true }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("attachment"), isPrimary: editor.isActive("attachment"), isPill: false, onClick: handleAttachmentClick }, { children: jsxRuntime.jsx(SvgClipboard, {}) })) }))] })) }));
 };
 
 const CustomMention = Mention__default["default"].extend({
@@ -3392,45 +3388,13 @@ const StyledDeleteThumbnailX = styled__default["default"].div `
   width: 32px;
   height: 32px;
   opacity: 0;
+  transition: opacity 0.2s;
   z-index: 2;
 `;
 const DeleteThumbnailX = ({ deleteThumbnail }) => {
     return (jsxRuntime.jsx(StyledDeleteThumbnailX, Object.assign({ className: "deleteThumbnail" }, { children: jsxRuntime.jsx(SvgRemoveMediaIcon, { onClick: (e) => deleteThumbnail(e) }) })));
 };
 
-const ImageCard = styled__default["default"](SpecialCard) `
-  padding: 0;
-  :hover .deleteThumbnail {
-    opacity: 1;
-  }
-`;
-const Preview$1 = styled__default["default"].div `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 150px;
-  width: 100%;
-  background-image: url(${(props) => props.url});
-  background-color: ${({ theme }) => theme.palette.grey[100]};
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-`;
-const ImageThumbnail = ({ src, index = 0, removeThumbnail, clickThumbnail, showX = true, isLoadingMedia = true, isError = false, }) => {
-    const handleCancel = (e) => {
-        e.stopPropagation();
-        if (removeThumbnail)
-            removeThumbnail(index);
-    };
-    return (jsxRuntime.jsxs(ImageCard, Object.assign({ onClick: clickThumbnail }, { children: [isLoadingMedia && (jsxRuntime.jsx(Preview$1, Object.assign({ url: "" }, { children: jsxRuntime.jsx(reactLoaders.Spinner, { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }, size: "large" }) }))), isError && (
-            // todo: add error icon
-            jsxRuntime.jsx("span", { children: "error uploading media" })), !isLoadingMedia && (jsxRuntime.jsx(Preview$1, Object.assign({ url: src }, { children: showX && (jsxRuntime.jsx(DeleteThumbnailX, { deleteThumbnail: (e) => handleCancel(e) })) })))] })));
-};
-
 var _circle$2, _path$o;
 function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 const SvgVideoPlayIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
@@ -3449,16 +3413,11 @@ const SvgVideoPlayIcon = props => /*#__PURE__*/React__namespace.createElement("s
   fill: "currentColor"
 })));
 
-const VideoCard = styled__default["default"](SpecialCard) `
+const ImageCard = styled__default["default"](SpecialCard) `
   padding: 0;
   position: relative;
   overflow: hidden;
-
-  &:hover .deleteThumbnail {
-    opacity: 1;
-    z-index: 9999;
-  }
-
+  
   &:before {
     content: "";
     position: absolute;
@@ -3467,46 +3426,66 @@ const VideoCard = styled__default["default"](SpecialCard) `
     width: 100%;
     height: 100%;
     background-color: ${({ theme }) => theme.palette.grey[800]};
-    opacity: 0.3;
+    opacity: 0;
+    transition: opacity 0.2s;
     z-index: 1;
   }
 
-  > svg {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 32px;
-    height: 32px;
-    z-index: 2;
+  &:hover {
+    .deleteThumbnail {
+      opacity: 1;
+    }
+    &:before {
+      opacity: 0.3;
+    }
+  }
+
+  &.video{
+    
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 32px;
+      height: 32px;
+      z-index: 2;
+    }
   }
 `;
 const Preview = styled__default["default"].div `
-  padding: ${({ theme }) => theme.space.md};
   display: flex;
   justify-content: center;
   align-items: center;
   height: 150px;
   width: 100%;
 
+  ${p => p.url && `
+    background-image: url(${p.url});
+    background-color: ${p.theme.palette.grey[100]};
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+  `}
+
   > video {
     width: 100%;
     height: 100%;
   }
 `;
-const VideoThumbnail = ({ src, index = 0, removeThumbnail, clickThumbnail, showX = true, isLoadingMedia = true, isError = false, }) => {
+const Thumbnail = ({ src, type, removeThumbnail, clickThumbnail, showX, isLoadingMedia = true, isError = false, }) => {
     const handleCancel = (e) => {
         e.stopPropagation();
         if (removeThumbnail)
-            removeThumbnail(index);
+            removeThumbnail();
     };
-    return (jsxRuntime.jsxs(VideoCard, Object.assign({ onClick: clickThumbnail }, { children: [isLoadingMedia && (jsxRuntime.jsx(Preview, { children: jsxRuntime.jsx(reactLoaders.Spinner, { style: {
+    return (jsxRuntime.jsxs(ImageCard, Object.assign({ onClick: clickThumbnail, className: type.includes('video') ? 'video' : 'image' }, { children: [isError && (
+            // todo: add error icon
+            jsxRuntime.jsx("span", { children: "error uploading media" })), isLoadingMedia ? (jsxRuntime.jsx(Preview, { children: jsxRuntime.jsx(reactLoaders.Spinner, { style: {
                         display: "flex",
                         alignItems: "center",
                         justifyContent: "center",
-                    }, size: "large" }) })), isError && (
-            // todo: add error icon
-            jsxRuntime.jsx("span", { children: "error uploading media" })), !isLoadingMedia && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showX && (jsxRuntime.jsx(DeleteThumbnailX, { deleteThumbnail: (e) => handleCancel(e) })), jsxRuntime.jsx(Preview, { children: jsxRuntime.jsx("video", Object.assign({ src: src }, { children: jsxRuntime.jsx("track", { kind: "captions" }) })) }), jsxRuntime.jsx(SvgVideoPlayIcon, {})] }))] })));
+                    }, size: "large" }) })) : (jsxRuntime.jsxs(Preview, Object.assign({ url: src }, { children: [showX && (jsxRuntime.jsx(DeleteThumbnailX, { deleteThumbnail: (e) => handleCancel(e) })), type.includes('video') && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("video", Object.assign({ src: src }, { children: jsxRuntime.jsx("track", { kind: "captions" }) })), jsxRuntime.jsx(SvgVideoPlayIcon, {})] })] })))] })));
 };
 
 const UgGrid = styled__default["default"](reactGrid.Grid) `
@@ -3546,24 +3525,12 @@ const ThumbnailContainer = ({ openLightbox }) => {
     if (!mediaFiles || mediaFiles.length === 0) {
         return null;
     }
-    return (jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: mediaFiles.map((file, index) => {
-                // Check if item is an image or a video
-                if (file.fileType.includes("image"))
-                    return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, xl: 3, lg: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(ImageThumbnail, { src: file.previewUrl, index: index, showX: true, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
-                                removeThumbnail(index);
-                                onDeleteThumbnail(file.internal_id);
-                            }, clickThumbnail: () => {
-                                openLightbox(thumbnails[index], index);
-                            } }, index) })));
-                if (file.fileType.includes("video"))
-                    return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(VideoThumbnail, { src: file.previewUrl, index: index, showX: true, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
-                                removeThumbnail(index);
-                                onDeleteThumbnail(file.internal_id);
-                            }, clickThumbnail: () => {
-                                openLightbox(thumbnails[index], index);
-                            } }, index) })));
-                return null;
-            }) })) }));
+    return (jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: mediaFiles.map((file, index) => (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(Thumbnail, { src: file.previewUrl, showX: true, type: file.fileType, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
+                        removeThumbnail(index);
+                        onDeleteThumbnail(file.internal_id);
+                    }, clickThumbnail: () => {
+                        openLightbox(thumbnails[index], index);
+                    } }, file.internal_id) })))) })) }));
 };
 
 const UgModalBody = styled__default["default"](reactModals.Body) `
@@ -4722,11 +4689,7 @@ const VideoSpinner = () => (jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx
  * Used for this:
     - To display a video
  */
-const Player = React.forwardRef((props, forwardRef) => {
-    const videoRef = React.useRef(null);
-    React.useImperativeHandle(forwardRef, () => videoRef.current);
-    return (jsxRuntime.jsx(Video__default["default"], Object.assign({ src: props.url }, props, { children: jsxRuntime.jsx(PlayerCore, Object.assign({ ref: videoRef }, props)) })));
-});
+const Player = React.forwardRef((props, forwardRef) => (jsxRuntime.jsx(Video__default["default"], Object.assign({ src: props.url }, props, { children: jsxRuntime.jsx(PlayerCore, Object.assign({ ref: forwardRef }, props)) }))));
 const PlayerCore = React.forwardRef((props, forwardRef) => {
     var _a;
     const { context, togglePlay, setIsPlaying } = Video.useVideoContext();
@@ -4734,7 +4697,7 @@ const PlayerCore = React.forwardRef((props, forwardRef) => {
     const videoRef = (_a = context.player) === null || _a === void 0 ? void 0 : _a.ref.current;
     const isLoaded = !!videoRef;
     const containerRef = React.useRef(null);
-    React.useImperativeHandle(forwardRef, () => videoRef);
+    React.useImperativeHandle(forwardRef, () => videoRef, [videoRef]);
     React.useEffect(() => {
         if (videoRef) {
             videoRef.addEventListener("pause", () => {
@@ -4752,6 +4715,15 @@ const PlayerCore = React.forwardRef((props, forwardRef) => {
     return (jsxRuntime.jsxs(Container$1, Object.assign({ isLoaded: isLoaded, isPlaying: context.isPlaying, ref: containerRef }, { children: [!isLoaded ? (jsxRuntime.jsx(VideoSpinner, {})) : (jsxRuntime.jsx(FloatingControls, { isPlaying: context.isPlaying, onClick: togglePlay })), jsxRuntime.jsx(Video__default["default"].Player, { className: "player-container" }), jsxRuntime.jsx(ProgressContextProvider, { children: jsxRuntime.jsx(Controls, { container: containerRef.current, onCutHandler: onCutHandler, bookmarks: bookmarks, isCutting: isCutting, onBookMarkUpdated: props.handleBookmarkUpdate, i18n: props.i18n }) })] })));
 });
 
+const MediaLightBox = ({ header, onClose, slideChange, selectedImageIndex, thumbnails, videoRefs, isOpen, details }) => {
+    if (!isOpen) {
+        return null;
+    }
+    return (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: onClose }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: header }), jsxRuntime.jsxs(Lightbox.Body, { children: [jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: details ? 2 : 3 } }, { children: jsxRuntime.jsx(Slider, Object.assign({ prevArrow: jsxRuntime.jsx(Slider.PrevButton, { isBright: true }), nextArrow: jsxRuntime.jsx(Slider.NextButton, { isBright: true }), onSlideChange: slideChange, initialSlide: selectedImageIndex }, { children: thumbnails.map((item) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type.includes("image") && (jsxRuntime.jsx("img", { src: item.url || URL.createObjectURL(item), alt: `media ${item.name}`, style: { maxHeight: "100%", height: "auto" } })), item.type.includes("video") && (jsxRuntime.jsx(Player, { ref: (ref) => {
+                                            videoRefs.current.push(ref);
+                                        }, url: item.url || URL.createObjectURL(item) }))] }, item.internal_id))) })) })), details && (jsxRuntime.jsx(Lightbox.Body.Details, Object.assign({ style: { flex: 1 } }, { children: details })))] }), jsxRuntime.jsx(Lightbox.Close, { "aria-label": "Close modal" })] })));
+};
+
 const ChatBoxContainer = styled__default["default"].div `
   display: flex;
   border-top: 1px solid ${({ theme }) => theme.palette.grey[200]};
@@ -4771,14 +4743,19 @@ const ChatBoxContainer = styled__default["default"].div `
     - Simple text input, use textarea instead.
  */
 const CommentBox = (_a) => {
+    var _b;
     var { placeholderOptions } = _a, props = __rest(_a, ["placeholderOptions"]);
     const { children, hasFloatingMenu, hasButtonsMenu, bubbleOptions, i18n } = props;
     const { editor, setEditor, mentionableUsers, triggerSave, thumbnails, addThumbnails, } = useChatContext();
-    const { addToast } = useToast();
     const [isOpen, setIsOpen] = React.useState(false);
-    const [selectedImage, setSelectedImage] = React.useState({});
     const [selectedImageIndex, setSelectedImageIndex] = React.useState(0);
+    const { getMedia } = useMedia();
     const ext = editorExtensions({ placeholderOptions, mentionableUsers });
+    function handleEvent(data) {
+        if (!data || !data.files)
+            return;
+        addThumbnails({ files: getMedia(data.files) });
+    }
     const closeLightbox = () => {
         setIsOpen(false);
     };
@@ -4794,7 +4771,6 @@ const CommentBox = (_a) => {
     const handleOpenLightbox = (file, index) => {
         if (!file)
             throw Error("Error with the image");
-        setSelectedImage(file);
         setSelectedImageIndex(index);
         setIsOpen(true);
     };
@@ -4806,48 +4782,12 @@ const CommentBox = (_a) => {
                 return false;
             },
             handleDrop: function (view, event, slice, moved) {
-                if (!event.dataTransfer || !event.dataTransfer.files)
-                    return false;
                 event.preventDefault();
-                const files = Array.from(event.dataTransfer.files).map((file) => {
-                    return Object.assign(file, {
-                        isLoadingMedia: false,
-                        internal_id: uuid.v4(),
-                    });
-                });
-                const wrongFiles = files.filter((file) => !/^(image|video)\//.test(file.type));
-                if (wrongFiles.length > 0) {
-                    for (const file of wrongFiles) {
-                        addToast(({ close }) => (jsxRuntime.jsx(Notification, { onClose: close, type: "error", message: `${props.messageBadFileFormat} - ${file.name}`, isPrimary: true })), { placement: "top" });
-                    }
-                }
-                const mediaFiles = files.filter((file) => /^(image|video)\//.test(file.type));
-                if (mediaFiles.length === 0)
-                    return false;
-                addThumbnails({ files: mediaFiles });
-                return false;
+                handleEvent(event.dataTransfer);
             },
             handlePaste: (view, event, slice) => {
-                if (!event.clipboardData || !event.clipboardData.items)
-                    return false;
                 event.preventDefault();
-                const files = Array.from(event.clipboardData.files).map((file) => {
-                    return Object.assign(file, {
-                        isLoadingMedia: false,
-                        internal_id: uuid.v4(),
-                    });
-                });
-                const wrongFiles = files.filter((file) => !/^(image|video)\//.test(file.type));
-                if (wrongFiles.length > 0) {
-                    for (const file of wrongFiles) {
-                        addToast(({ close }) => (jsxRuntime.jsx(Notification, { onClose: close, type: "error", message: `${props.messageBadFileFormat} - ${file.name}`, isPrimary: true })), { placement: "top" });
-                    }
-                }
-                const mediaFiles = files.filter((file) => /^(image|video)\//.test(file.type));
-                if (mediaFiles.length === 0)
-                    return false;
-                addThumbnails({ files: mediaFiles });
-                return false;
+                handleEvent(event.clipboardData);
             },
         } }, props));
     const onKeyDown = (event) => {
@@ -4860,12 +4800,7 @@ const CommentBox = (_a) => {
         return null;
     ed.on("create", ({ editor }) => setEditor(editor));
     ed.on("update", ({ editor }) => setEditor(editor));
-    const mediaFiles = thumbnails.map((file) => {
-        return Object.assign(file, { isLoadingMedia: file.isLoadingMedia });
-    });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isOpen && selectedImage && (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: closeLightbox }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: selectedImage.name }), jsxRuntime.jsx(Lightbox.Body, { children: jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: 3 } }, { children: jsxRuntime.jsx(Slider, Object.assign({ prevArrow: jsxRuntime.jsx(Slider.PrevButton, { isBright: true }), nextArrow: jsxRuntime.jsx(Slider.NextButton, { isBright: true }), onSlideChange: slideChange, initialSlide: selectedImageIndex }, { children: mediaFiles.map((item, index) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type.includes("image") && (jsxRuntime.jsx("img", { src: URL.createObjectURL(item), alt: `media ${item.name}` })), item.type.includes("video") && (jsxRuntime.jsx(Player, { ref: (ref) => {
-                                                videoRefs.current.push(ref);
-                                            }, url: URL.createObjectURL(item) }))] }))) })) })) }), jsxRuntime.jsx(Lightbox.Close, { "aria-label": "Close modal" })] }))), jsxRuntime.jsx(ChatBoxContainer, { children: jsxRuntime.jsxs(EditorContainer$1, Object.assign({ editable: true, style: { marginLeft: 0, paddingBottom: 12 } }, { children: [hasFloatingMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), jsxRuntime.jsx(ThumbnailContainer, { openLightbox: handleOpenLightbox })] })) }), hasButtonsMenu && jsxRuntime.jsx(CommentBar, { editor: ed, i18n: i18n })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MediaLightBox, { isOpen: isOpen, header: (_b = thumbnails[selectedImageIndex]) === null || _b === void 0 ? void 0 : _b.name, onClose: closeLightbox, slideChange: slideChange, selectedImageIndex: selectedImageIndex, thumbnails: thumbnails, videoRefs: videoRefs }), jsxRuntime.jsx(ChatBoxContainer, { children: jsxRuntime.jsxs(EditorContainer$1, Object.assign({ editable: true, style: { marginLeft: 0, paddingBottom: 12 } }, { children: [hasFloatingMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), jsxRuntime.jsx(ThumbnailContainer, { openLightbox: handleOpenLightbox })] })) }), hasButtonsMenu && jsxRuntime.jsx(CommentBar, { editor: ed, i18n: i18n })] }));
 };
 
 const CommentCard = styled.styled(Card) `
@@ -4911,13 +4846,11 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
     var _a, _b;
     const { mentionableUsers } = useChatContext();
     const [isOpen, setIsOpen] = React.useState(false);
-    const [selectedImage, setSelectedImage] = React.useState({});
     const [selectedImageIndex, setSelectedImageIndex] = React.useState(0);
     const ext = editorExtensions({ mentionableUsers });
     const handleClickThumbnail = (file, index) => {
         if (!file)
             throw Error("Error with the image");
-        setSelectedImage(file);
         setSelectedImageIndex(index);
         setIsOpen(true);
     };
@@ -4926,7 +4859,6 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
     };
     const videoRefs = React.useRef([]);
     const slideChange = React.useCallback((index) => {
-        setSelectedImage(media[index]);
         setSelectedImageIndex(index);
         videoRefs.current.forEach((ref) => {
             if (ref) {
@@ -4943,23 +4875,12 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
     ed.setOptions({
         editable: false,
     });
-    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", " ", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: false }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed }) })) })] })] }), jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: media.map((file, index) => {
-                        // Check if item is an image or a video
-                        if (file.type.includes("image"))
-                            return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 4, className: "flex-3-sm" }, { children: jsxRuntime.jsx(ImageThumbnail, { src: file.url, index: index, showX: false, isLoadingMedia: false, clickThumbnail: () => {
-                                        handleClickThumbnail(file, index);
-                                    } }, index) })));
-                        if (file.type.includes("video"))
-                            return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 4, className: "flex-3-sm" }, { children: jsxRuntime.jsx(VideoThumbnail, { src: file.url, index: index, showX: false, isLoadingMedia: false, clickThumbnail: () => {
-                                        handleClickThumbnail(file, index);
-                                    } }, index) })));
-                        return null;
-                    }) })) }), isOpen && selectedImage && (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: closeLightbox }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: jsxRuntime.jsxs(reactTypography.MD, Object.assign({ isBold: true }, { children: [jsxRuntime.jsx(Grey600Span, { children: header && header.title }), header && header.message && (jsxRuntime.jsxs(Grey800Span, { children: [" | ", header.message] }))] })) }), jsxRuntime.jsxs(Lightbox.Body, { children: [jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: 2 } }, { children: jsxRuntime.jsx(Slider, Object.assign({ prevArrow: jsxRuntime.jsx(Slider.PrevButton, { isBright: true }), nextArrow: jsxRuntime.jsx(Slider.NextButton, { isBright: true }), onSlideChange: slideChange, initialSlide: selectedImageIndex }, { children: media.map((item, index) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type === "image" && (jsxRuntime.jsx("img", { src: item.url, alt: `{{${item.url}}}` })), item.type === "video" && (jsxRuntime.jsx(Player, { ref: (ref) => {
-                                                    videoRefs.current.push(ref);
-                                                }, url: item.url }))] }))) })) })), jsxRuntime.jsx(Lightbox.Body.Details, Object.assign({ style: { flex: 1 } }, { children: jsxRuntime.jsx(Comment, Object.assign({ header: header, author: {
-                                        avatar: author.avatar,
-                                        name: author.name,
-                                    }, date: date, message: message }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("br", {}) }) })) }))] }), jsxRuntime.jsx(Lightbox.Footer, {}), jsxRuntime.jsx(Lightbox.Close, { "aria-label": "Close modal" })] }))), jsxRuntime.jsx(Footer$2, { children: children })] }));
+    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", " ", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: false }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed }) })) })] })] }), jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: media.map((file, index) => (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 4, className: "flex-3-sm" }, { children: jsxRuntime.jsx(Thumbnail, { src: file.url || URL.createObjectURL(file), type: file.type, showX: false, isLoadingMedia: false, clickThumbnail: () => {
+                                handleClickThumbnail(file, index);
+                            } }) }), index))) })) }), jsxRuntime.jsx(MediaLightBox, { isOpen: isOpen, header: jsxRuntime.jsxs(reactTypography.MD, Object.assign({ isBold: true }, { children: [jsxRuntime.jsx(Grey600Span, { children: header && header.title }), header && header.message && (jsxRuntime.jsxs(Grey800Span, { children: [" | ", header.message] }))] })), onClose: closeLightbox, slideChange: slideChange, selectedImageIndex: selectedImageIndex, thumbnails: media, videoRefs: videoRefs, details: jsxRuntime.jsx(Comment, Object.assign({ header: header, author: {
+                        avatar: author.avatar,
+                        name: author.name,
+                    }, date: date, message: message }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("br", {}) }) })) }), jsxRuntime.jsx(Footer$2, { children: children })] }));
 };
 
 /**