@appquality/unguess-design-system 3.1.90 → 3.1.91

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v3.1.91 (Fri May 17 2024)
+
+#### 🐛 Bug Fix
+
+- new feat media attachments [#350](https://github.com/AppQuality/unguess-design-system/pull/350) ([@iacopolea](https://github.com/iacopolea) [@Kariamos](https://github.com/Kariamos))
+- Fix attachments [#348](https://github.com/AppQuality/unguess-design-system/pull/348) ([@iacopolea](https://github.com/iacopolea) [@Kariamos](https://github.com/Kariamos))
+
+#### Authors: 2
+
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Marco ([@Kariamos](https://github.com/Kariamos))
+
+---
+
 # v3.1.90 (Thu May 16 2024)
 
 #### 🐛 Bug Fix

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');
@@ -38,10 +38,10 @@ var Mention = require('@tiptap/extension-mention');
 var tippy = require('tippy.js');
 var Image$2 = require('@tiptap/extension-image');
 var Dropcursor = require('@tiptap/extension-dropcursor');
-var reactGrid = require('@zendeskgarden/react-grid');
 var reactModals = require('@zendeskgarden/react-modals');
 var SlickSlider = require('react-slick');
 var Video = require('@appquality/stream-player');
+var reactGrid = require('@zendeskgarden/react-grid');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var reactColorpickers = require('@zendeskgarden/react-colorpickers');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
@@ -2339,7 +2339,7 @@ const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMenti
         setThumbnails,
         afterUploadCallback: (failed) => {
             setThumbnails(thumbnails.map((file) => {
-                if (failed.includes(file.name)) {
+                if (failed.includes(file.id)) {
                     file.isLoadingMedia = false;
                     //file.isError = true;
                 }
@@ -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) => {
@@ -2360,7 +2359,7 @@ const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMenti
                     setThumbnails((prev) => {
                         return prev.map((file) => {
                             file.isLoadingMedia = false;
-                            if ((failed === null || failed === void 0 ? void 0 : failed.length) && failed.includes(file.name)) {
+                            if ((failed === null || failed === void 0 ? void 0 : failed.length) && failed.includes(file.id)) {
                                 file.isError = true;
                             }
                             else {
@@ -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({
@@ -3049,6 +2980,98 @@ 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, {
+                url: URL.createObjectURL(file),
+                isLoadingMedia: true,
+                id: uuid.v4(),
+            });
+        });
+    }
+    return { getMedia };
+}
+
 const MenuContainer = styled__default["default"].div `
   padding: ${({ theme }) => theme.space.xs} 0;
   display: flex;
@@ -3066,59 +3089,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();
     };
-    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 handleMentionClick = () => {
+        const { from } = editor.state.selection;
+        const char = from > 1 ? " @" : "@";
+        editor.chain().focus().insertContent(char).run();
+    };
+    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 : (jsxRuntime.jsxs("span", { children: ["Upload images and video.", " ", jsxRuntime.jsxs("span", Object.assign({ style: { color: theme.palette.grey[600] } }, { children: [" ", jsxRuntime.jsx("br", {}), " 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({
@@ -3399,45 +3396,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({
@@ -3456,15 +3421,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;
-  }
+  min-width: 90px;
 
   &:before {
     content: "";
@@ -3474,103 +3435,93 @@ 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;
+  height: 100px;
   width: 100%;
 
+  ${(p) => p.url &&
+    `
+    background-image: url(${p.url});
+    background-color: ${p.theme.palette.grey[100]};
+    background-size: cover;
+    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) `
-  padding-left: 0;
-  padding-right: 0;
-`;
-/**
- * The Grid component is a framework for building modular layouts.
- * <hr>
- * Used for this:
-    - To structure the layout of a page
- */
-const Grid = (props) => jsxRuntime.jsx(UgGrid, Object.assign({}, props));
-
-const Row$1 = (props) => jsxRuntime.jsx(reactGrid.Row, Object.assign({}, props));
-
-const StyledCol$1 = styled__default["default"](reactGrid.Col) `
-  margin-bottom: ${theme.space.lg};
-
-  @media screen and (max-width: ${theme.breakpoints.sm}) {
-    margin-bottom: ${theme.space.md};
-  }
+const FlexContainer = styled.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.space.xs};
+  flex-wrap: wrap;
 `;
-const Col = (props) => jsxRuntime.jsx(StyledCol$1, Object.assign({}, props));
-
 const ThumbnailContainer = ({ openLightbox }) => {
     const { thumbnails, removeThumbnail, onDeleteThumbnail } = useChatContext();
     const mediaFiles = React.useMemo(() => {
         return thumbnails.map((file) => ({
             fileName: file.name,
             fileType: file.type,
-            previewUrl: URL.createObjectURL(file),
-            internal_id: file.internal_id,
+            previewUrl: file.url,
+            id: file.id,
             isLoadingMedia: file.isLoadingMedia,
         }));
     }, [thumbnails]);
     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(FlexContainer, { children: mediaFiles.map((file, index) => (jsxRuntime.jsx(Thumbnail, { src: file.previewUrl, showX: true, type: file.fileType, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
+                removeThumbnail(index);
+                onDeleteThumbnail(file.id);
+            }, clickThumbnail: () => {
+                openLightbox(index);
+            } }, file.id))) }));
 };
 
 const UgModalBody = styled__default["default"](reactModals.Body) `
@@ -4762,6 +4713,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, alt: `media ${item.name}`, style: { maxHeight: "100%", height: "auto" } })), item.type.includes("video") && item.url && (jsxRuntime.jsx(Player, { ref: (ref) => {
+                                            videoRefs.current.push(ref);
+                                        }, url: item.url }))] }, item.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]};
@@ -4781,14 +4741,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);
     };
@@ -4801,10 +4766,7 @@ const CommentBox = (_a) => {
             }
         });
     }, [videoRefs]);
-    const handleOpenLightbox = (file, index) => {
-        if (!file)
-            throw Error("Error with the image");
-        setSelectedImage(file);
+    const handleOpenLightbox = (index) => {
         setSelectedImageIndex(index);
         setIsOpen(true);
     };
@@ -4816,48 +4778,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) => {
@@ -4870,14 +4796,32 @@ 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 UgGrid = styled__default["default"](reactGrid.Grid) `
+  padding-left: 0;
+  padding-right: 0;
+`;
+/**
+ * The Grid component is a framework for building modular layouts.
+ * <hr>
+ * Used for this:
+    - To structure the layout of a page
+ */
+const Grid = (props) => jsxRuntime.jsx(UgGrid, Object.assign({}, props));
+
+const Row$1 = (props) => jsxRuntime.jsx(reactGrid.Row, Object.assign({}, props));
+
+const StyledCol$1 = styled__default["default"](reactGrid.Col) `
+  margin-bottom: ${theme.space.lg};
+
+  @media screen and (max-width: ${theme.breakpoints.sm}) {
+    margin-bottom: ${theme.space.md};
+  }
+`;
+const Col = (props) => jsxRuntime.jsx(StyledCol$1, Object.assign({}, props));
+
 const CommentCard = styled.styled(Card) `
   padding: ${({ theme }) => `${theme.space.base * 3}px ${theme.space.sm}`};
   background-color: ${({ theme }) => theme.palette.grey[100]};
@@ -4921,13 +4865,9 @@ 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);
+    const handleClickThumbnail = (index) => {
         setSelectedImageIndex(index);
         setIsOpen(true);
     };
@@ -4936,7 +4876,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) {
@@ -4953,23 +4892,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, type: file.type, showX: false, isLoadingMedia: false, clickThumbnail: () => {
+                                handleClickThumbnail(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 })] }));
 };
 
 /**

package/build/stories/chat/_types.d.ts

@@ -9,7 +9,6 @@ export type SuggestedUser = {
 };
 export interface ChatEditorArgs extends Partial<EditorOptions> {
     author: Author;
-    messageBadFileFormat: string;
     placeholderOptions?: Partial<PlaceholderOptions>;
     hasFloatingMenu?: boolean;
     hasButtonsMenu?: boolean;
@@ -19,7 +18,7 @@ export interface ChatEditorArgs extends Partial<EditorOptions> {
             bold?: string;
             italic?: string;
             mention?: string;
-            attachment?: string | React.ReactNode;
+            attachment?: React.ReactNode;
         };
         mention?: {
             noResults?: string;
@@ -38,10 +37,13 @@ export interface EditorHeaderArgs {
     title?: string;
     validation?: validationStatus;
 }
-export interface FileItem extends File {
-    isLoadingMedia: boolean;
+export interface CommentMedia {
+    id: string;
+    type: string;
+    name?: string;
+    isLoadingMedia?: boolean;
     isError?: boolean;
-    internal_id: string;
+    url?: string;
 }
 export interface FloatingMenuArgs extends Partial<BubbleMenuProps> {
 }

package/build/stories/chat/context/chatContext.d.ts

@@ -1,15 +1,15 @@
 import { Editor } from "@tiptap/react";
 import React from "react";
-import { FileItem, SuggestedUser } from "../_types";
+import { CommentMedia, SuggestedUser } from "../_types";
 export type ChatContextType = {
     triggerSave: () => void;
     editor?: Editor;
     setEditor: React.Dispatch<React.SetStateAction<Editor | undefined>>;
     addThumbnails: (props: {
-        files: FileItem[];
+        files: (File & CommentMedia)[];
     }) => void;
     removeThumbnail: (index: number) => void;
-    thumbnails: FileItem[];
+    thumbnails: CommentMedia[];
     mentionableUsers: (props: {
         query: string;
     }) => SuggestedUser[];
@@ -29,7 +29,7 @@ export interface Data {
 }
 export declare const ChatContextProvider: ({ onSave, onFileUpload, onDeleteThumbnail, setMentionableUsers, children, }: {
     onSave?: ((editor: Editor, mentions: SuggestedUser[]) => void) | undefined;
-    onFileUpload?: ((files: FileItem[]) => Promise<Data>) | undefined;
+    onFileUpload?: ((files: (File & CommentMedia)[]) => Promise<Data>) | undefined;
     onDeleteThumbnail: (id: string) => void;
     children: React.ReactNode;
     setMentionableUsers: (props: {

package/build/stories/chat/hooks/useMedia.d.ts

@@ -0,0 +1,8 @@
+export declare const acceptedMediaTypes: RegExp;
+export declare function useMedia(): {
+    getMedia: (data: FileList) => (File & {
+        url: string;
+        isLoadingMedia: boolean;
+        id: string;
+    })[];
+};

package/build/stories/chat/index.stories.d.ts

@@ -1,7 +1,6 @@
 import { PlaceholderOptions } from "@tiptap/extension-placeholder";
 import { Editor as TipTapEditor } from "@tiptap/react";
-import { ChatEditorArgs, FileItem, SuggestedUser } from "./_types";
-import { MediaType } from "./parts/comment";
+import { ChatEditorArgs, CommentMedia, SuggestedUser } from "./_types";
 import { Data } from "./context/chatContext";
 interface EditorStoryArgs extends ChatEditorArgs {
     children?: any;
@@ -13,12 +12,12 @@ interface EditorStoryArgs extends ChatEditorArgs {
         };
         message: string;
         date: string;
-        media?: MediaType[];
+        media?: CommentMedia[];
     }[];
     editorText?: string;
     background?: string;
     onSave: (editor: TipTapEditor, mentions: SuggestedUser[]) => void;
-    onFileUpload?: (files: FileItem[]) => Promise<Data>;
+    onFileUpload?: (files: (File & CommentMedia)[]) => Promise<Data>;
     placeholderOptions?: Partial<PlaceholderOptions>;
 }
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, EditorStoryArgs>;

package/build/stories/chat/parts/MediaLightbox.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { CommentMedia } from "../_types";
+interface MediaLightBoxProps {
+    isOpen: boolean;
+    header: React.ReactNode;
+    onClose: () => void;
+    slideChange: (index: number) => void;
+    selectedImageIndex: number;
+    thumbnails: CommentMedia[];
+    videoRefs: React.MutableRefObject<Array<HTMLVideoElement | null>>;
+    details?: React.ReactNode;
+}
+declare const MediaLightBox: ({ header, onClose, slideChange, selectedImageIndex, thumbnails, videoRefs, isOpen, details }: MediaLightBoxProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MediaLightBox;

package/build/stories/chat/parts/ThumbnailContainer/Thumbnail.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    src?: string;
+    type: string;
+    clickThumbnail?: () => void;
+    isLoadingMedia?: boolean;
+    removeThumbnail?: () => void;
+    showX?: boolean;
+    isError?: boolean;
+}
+declare const Thumbnail: ({ src, type, removeThumbnail, clickThumbnail, showX, isLoadingMedia, isError, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/build/stories/chat/parts/ThumbnailContainer/index.d.ts

@@ -7,7 +7,7 @@ export interface FileElement {
     isLoadingMedia: boolean;
 }
 interface Props {
-    openLightbox: (file: File, index: number) => void;
+    openLightbox: (index: number) => void;
 }
 declare const ThumbnailContainer: ({ openLightbox }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default ThumbnailContainer;

package/build/stories/chat/parts/comment.d.ts

@@ -1,15 +1,10 @@
 import { PropsWithChildren } from "react";
-import { Author } from "../_types";
-export type MediaType = {
-    url: string;
-    id: number;
-    type: "image" | "video";
-};
+import { Author, CommentMedia } from "../_types";
 export declare const Comment: ({ author, message, children, date, media, header, }: PropsWithChildren<{
     author: Author;
     message: string;
     date: string;
-    media?: MediaType[] | undefined;
+    media?: CommentMedia[] | undefined;
     header: {
         title: string;
         message?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.90",
+  "version": "3.1.91",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/build/stories/chat/parts/ThumbnailContainer/ImageThumbnail.d.ts

@@ -1,11 +0,0 @@
-interface Props {
-    src: string;
-    index?: number;
-    removeThumbnail?: (index: number) => void;
-    clickThumbnail: () => void;
-    showX?: boolean;
-    isLoadingMedia: boolean;
-    isError?: boolean;
-}
-declare const ImageThumbnail: ({ src, index, removeThumbnail, clickThumbnail, showX, isLoadingMedia, isError, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default ImageThumbnail;

package/build/stories/chat/parts/ThumbnailContainer/VideoThumbnail.d.ts

@@ -1,11 +0,0 @@
-interface Props {
-    src: string;
-    index?: number;
-    removeThumbnail?: (index: number) => void;
-    clickThumbnail: () => void;
-    showX?: boolean;
-    isLoadingMedia: boolean;
-    isError?: boolean;
-}
-declare const VideoThumbnail: ({ src, index, removeThumbnail, clickThumbnail, showX, isLoadingMedia, isError, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default VideoThumbnail;