@zohoim/chat-components 1.0.9-beta.7 → 1.0.9-beta.8

package/es/Theme/themeVariables/light/orangeTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -109,23 +109,6 @@ export default {
     videoBubble: {
       border_color: '#ebf0f5',
       border_color_failed: failedBdr
-    },
-    emojiFooter: {
-      tabLine: primaryOrange,
-      border_color: '#ebf0f5'
-    },
-    replyEditor,
-    emojisHeader,
-    attachmentPreviewHeader,
-    attachmentPreviewBody: {
-      bg_color: '#f5f6f7',
-      editor_border_color: '#d1cbc6',
-      editor_border_hover_color: '#788190',
-      editor_border_active_color: '#e57717'
-    },
-    emojiPopup: { ...emojiPopup,
-      ttIcon_path1_color: 'rgba(204, 201, 199, 0.7)',
-      ttIcon_path2_color: 'var(--dot_black)'
     }
   }
 };

package/es/Theme/themeVariables/light/redTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -109,23 +109,6 @@ export default {
     videoBubble: {
       border_color: '#ebf0f5',
       border_color_failed: failedBdr
-    },
-    emojiFooter: {
-      tabLine: primaryRed,
-      border_color: '#ebf0f5'
-    },
-    replyEditor,
-    emojisHeader,
-    attachmentPreviewHeader,
-    attachmentPreviewBody: {
-      bg_color: '#f5f6f7',
-      editor_border_color: '#b9b2b4',
-      editor_border_hover_color: '#788190',
-      editor_border_active_color: '#de3535'
-    },
-    emojiPopup: { ...emojiPopup,
-      ttIcon_path1_color: 'rgba(204, 199, 201, 0.7)',
-      ttIcon_path2_color: 'var(--dot_black)'
     }
   }
 };

package/es/Theme/themeVariables/light/yellowTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -109,23 +109,6 @@ export default {
     videoBubble: {
       border_color: '#ebf0f5',
       border_color_failed: failedBdr
-    },
-    emojiFooter: {
-      tabLine: primaryYellow,
-      border_color: '#ebf0f5'
-    },
-    replyEditor,
-    emojisHeader,
-    attachmentPreviewHeader,
-    attachmentPreviewBody: {
-      bg_color: '#f5f6f7',
-      editor_border_color: '#ccc2a4',
-      editor_border_hover_color: '#788190',
-      editor_border_active_color: '#e8b923'
-    },
-    emojiPopup: { ...emojiPopup,
-      ttIcon_path1_color: 'rgba(204, 203, 199, 0.7)',
-      ttIcon_path2_color: 'var(--dot_black)'
     }
   }
 };

package/es/Theme/themeVariables/pureDark/blueTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, replyEditor, emojiPopup, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -110,23 +110,6 @@ export default {
     videoBubble: {
       border_color: '#161515',
       border_color_failed: failedBdr
-    },
-    emojiFooter: {
-      tabLine: primaryBlue,
-      border_color: '#161515'
-    },
-    replyEditor,
-    emojiPopup: { ...emojiPopup,
-      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
-      ttIcon_path2_color: 'var(--dot_platinum)'
-    },
-    emojisHeader,
-    attachmentPreviewHeader,
-    attachmentPreviewBody: {
-      bg_color: '#262626',
-      editor_border_color: '#585858',
-      editor_border_hover_color: '#828994',
-      editor_border_active_color: '#479dff'
     }
   }
 };

package/es/Theme/themeVariables/pureDark/commonColorVariable.js

@@ -15,23 +15,4 @@ export const failedBg = '#362530';
 export const failedBdr = '#290000';
 export const failedLine = '#290000';
 export const failedColor = '#e2e4e6';
-export const failedUrlColor = '#479dff';
-export const emojiPopup = {
-  bg: '#f1f4f9',
-  border: '#f1f4f9',
-  titleColor: '#aaa'
-};
-export const replyEditor = {
-  bg: '#212121',
-  color: '#e2e4e6',
-  placeholder: '#585858'
-};
-export const emojisHeader = {
-  bg_color: '#171717',
-  border_color: '#161515'
-};
-export const attachmentPreviewHeader = {
-  bg_color: '#212121',
-  name_color: '#e2e4e6',
-  size_color: '#a8b0bd'
-};
+export const failedUrlColor = '#479dff';

package/es/Theme/themeVariables/pureDark/greenTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -110,23 +110,6 @@ export default {
     videoBubble: {
       border_color: '#161515',
       border_color_failed: failedBdr
-    },
-    emojiFooter: {
-      tabLine: primaryGreen,
-      border_color: '#161515'
-    },
-    replyEditor,
-    emojiPopup: { ...emojiPopup,
-      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
-      ttIcon_path2_color: 'var(--dot_platinum)'
-    },
-    emojisHeader,
-    attachmentPreviewHeader,
-    attachmentPreviewBody: {
-      bg_color: '#262626',
-      editor_border_color: '#585858',
-      editor_border_hover_color: '#828994',
-      editor_border_active_color: '#45a159'
     }
   }
 };

package/es/Theme/themeVariables/pureDark/orangeTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -110,23 +110,6 @@ export default {
     videoBubble: {
       border_color: '#161515',
       border_color_failed: failedBdr
-    },
-    emojiFooter: {
-      tabLine: primaryOrange,
-      border_color: '#161515'
-    },
-    emojiPopup: { ...emojiPopup,
-      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
-      ttIcon_path2_color: 'var(--dot_platinum)'
-    },
-    replyEditor,
-    emojisHeader,
-    attachmentPreviewHeader,
-    attachmentPreviewBody: {
-      bg_color: '#262626',
-      editor_border_color: '#585858',
-      editor_border_hover_color: '#828994',
-      editor_border_active_color: '#ff801f'
     }
   }
 };

package/es/Theme/themeVariables/pureDark/redTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -110,23 +110,6 @@ export default {
     videoBubble: {
       border_color: '#161515',
       border_color_failed: failedBdr
-    },
-    emojiFooter: {
-      tabLine: primaryRed,
-      border_color: '#161515'
-    },
-    emojiPopup: { ...emojiPopup,
-      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
-      ttIcon_path2_color: 'var(--dot_platinum)'
-    },
-    replyEditor,
-    emojisHeader,
-    attachmentPreviewHeader,
-    attachmentPreviewBody: {
-      bg_color: '#262626',
-      editor_border_color: '#585858',
-      editor_border_hover_color: '#828994',
-      editor_border_active_color: '#e94f4f'
     }
   }
 };

package/es/Theme/themeVariables/pureDark/yellowTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -110,23 +110,6 @@ export default {
     videoBubble: {
       border_color: '#161515',
       border_color_failed: failedBdr
-    },
-    emojiFooter: {
-      tabLine: primaryYellow,
-      border_color: '#161515'
-    },
-    emojiPopup: { ...emojiPopup,
-      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
-      ttIcon_path2_color: 'var(--dot_platinum)'
-    },
-    replyEditor,
-    emojisHeader,
-    attachmentPreviewHeader,
-    attachmentPreviewBody: {
-      bg_color: '#262626',
-      editor_border_color: '#585858',
-      editor_border_hover_color: '#828994',
-      editor_border_active_color: '#d79835'
     }
   }
 };

package/es/Theme/utils/getThemeConfigurations.js

@@ -1,4 +1,4 @@
-import { modeConstants, themeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
+import { modeConstants, themeConstants } from "../constants";
 import lightBlue from "../themeVariables/light/blueTheme";
 import lightGreen from "../themeVariables/light/greenTheme";
 import lightOrange from "../themeVariables/light/orangeTheme";

package/es/constants/index.js

@@ -1,7 +1 @@
-export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
-export const EDITOR_POPUP_PORTAL = 'EDITOR_POPUP_PORTAL';
-const version = '1.4.9';
-export const defaultEditorURL = // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.js`;
-// `https://static.zohocdn.com/rtelibrary/${version}/js/rte.js`;
-// `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.min.js`;
-`https://static.zohocdn.com/rtelibrary/${version}/js/rte.min.js`;
+export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';

package/es/im/index.js

@@ -6,11 +6,4 @@ export * from "./IMMessageMetaInfo";
 export * from "./IMMessageContent";
 export * from "./IMTextBubble";
 export * from "./IMReplyBubble";
-export * from "./ArticleBubble";
-export * from "./IMAttachmentHandler";
-export * from "./ReplyComposer";
-export * from "./ReplyEditor";
-export * from "./ReplyEditorSuggestions";
-export * from "./ReplyEditorExtensions";
-export * from "./ReplyComposerFooter";
-export * from "./ReplyEditorSuggestionsPopup";
+export * from "./ArticleBubble";

package/es/index.js

@@ -25,19 +25,8 @@ export * from "./ReplyBubbleHeader";
 export * from "./LazyLoadImage";
 export * from "./ReplyBubbleContent";
 export * from "./MessageStatus";
-export * from "./im";
-export * from "./Emojis";
-export * from "./EmojisList";
-export * from "./Emoji";
-export * from "./EmojiPopup";
-export * from "./EmojisHeader";
-export * from "./EmojisFooter";
-export * from "./EmojisEmptyState";
-export * from "./rte";
-export * from "./AttachmentHandler";
-export * from "./AttachmentPreview";
-export * from "./AttachmentPreviewHeader";
-export * from "./AttachmentPreviewBody";
+export * from "./im"; // ... export other components
+
 /** * CONSTANTS ** */
 
 export * from "./constants";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "1.0.9-beta.7",
+  "version": "1.0.9-beta.8",
   "description": "Chat Components",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -29,15 +29,15 @@
     "!**/__tests__"
   ],
   "dependencies": {
-    "@zohodesk/components": "1.2.43",
-    "@zohodesk/hooks": "2.0.4",
+    "@zohodesk/components": "1.2.56",
+    "@zohodesk/hooks": "2.0.2",
     "@zohodesk/icon": "1.3.15",
-    "@zohodesk/icons": "1.0.43",
+    "@zohodesk/icons": "1.0.20",
     "@zohodesk/utils": "1.3.13",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.13",
-    "@zohoim/chat-components-hooks": "1.0.4-beta.7",
-    "@zohoim/chat-components-utils": "1.0.4-beta.3"
+    "@zohoim/chat-components-hooks": "1.0.4-beta.8",
+    "@zohoim/chat-components-utils": "1.0.4"
   },
   "devDependencies": {
     "@zohodesk-private/css-variable-migrator": "1.0.7",
@@ -45,5 +45,5 @@
     "jsdom": "23.0.0",
     "react-to-jsx": "1.3.2"
   },
-  "gitHead": "44f84bf3e27cc3b76db2abc64e889ab026a258b7"
+  "gitHead": "7927e9dab8d10a2361ce14b578fca1f4bc678a3f"
 }

package/es/AttachmentHandler/AttachmentHandler.js

@@ -1,84 +0,0 @@
-/** ** Libraries *** */
-import React, { useMemo } from 'react';
-/** ** Component *** */
-
-import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
-import { Container } from '@zohodesk/components/es/Layout';
-/** ** Hooks *** */
-
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import useAttachmentHandler from '@zohoim/chat-components-hooks/es/AttachmentHandler/useAttachmentHandler';
-/** ** Constants *** */
-
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-import attachmentHandlerDefaultProps from "./props/defaultProps";
-import attachmentHandlerPropTypes from "./props/propTypes";
-/** ** Methods *** */
-
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-/** ** Styles *** */
-
-import style from "./css/AttachmentHandler.module.css";
-export default function AttachmentHandler(props) {
-  const {
-    customStyle,
-    iconName,
-    iconSize,
-    iconTitle,
-    renderCustomIcon,
-    getRef: propGetRef,
-    supportedFileTypes,
-    isMultiAttachment,
-    onAttach: propOnAttach,
-    customProps = dummyObject
-  } = props;
-  const {
-    inputProps = dummyObject
-  } = customProps;
-  const {
-    onAttach,
-    onAttachmentClick,
-    getRef
-  } = useAttachmentHandler({
-    onAttach: propOnAttach,
-    getRef: propGetRef
-  });
-  /* External customization */
-
-  const newStyle = useMergeStyle(style, customStyle);
-  const inputEl = useMemo(() => /*#__PURE__*/React.createElement("input", {
-    ref: getRef,
-    accept: supportedFileTypes,
-    hidden: true,
-    multiple: isMultiAttachment,
-    onChange: onAttach,
-    size: "1",
-    type: "file",
-    ...inputProps
-  }), [supportedFileTypes, getRef, onAttach, isMultiAttachment, inputProps]);
-  const customIcon = useMemo(() => {
-    /* Render Custom Icon */
-    const icon = renderHandler(renderCustomIcon)({
-      onClick: onAttachmentClick
-    });
-
-    if (icon) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, icon, inputEl);
-    }
-
-    return null;
-  }, [renderCustomIcon, onAttachmentClick, inputEl]);
-  return /*#__PURE__*/React.createElement(Container, {
-    alignBox: "column"
-  }, customIcon || /*#__PURE__*/React.createElement(IconButton, {
-    className: newStyle.iconButton,
-    iconClass: newStyle.icon,
-    iconName: iconName,
-    iconSize: iconSize,
-    onClick: onAttachmentClick,
-    title: iconTitle
-  }, inputEl));
-}
-AttachmentHandler.propTypes = attachmentHandlerPropTypes;
-AttachmentHandler.defaultProps = attachmentHandlerDefaultProps;
-AttachmentHandler.displayName = 'AttachmentHandler';

package/es/AttachmentHandler/css/AttachmentHandler.module.css

@@ -1,27 +0,0 @@
-/** ** Styles *** */
-
-.attachmentHandler {
-  /** ** Use this class for css customisation *** */
-}
-
-[dir=ltr] .iconButton {
-  margin-right: var(--zd_size5) ;
-}
-
-[dir=rtl] .iconButton {
-  margin-left: var(--zd_size5) ;
-}
-
-.icon {
-  color: initial;
-}
-
-
-.icon :global .path1:before {
-  color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
-  opacity: 1;
-}
-
-.icon :global .path2:before {
-  color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
-}

package/es/AttachmentHandler/index.js

@@ -1 +0,0 @@
-export { default as AttachmentHandler } from "./AttachmentHandler";

package/es/AttachmentHandler/props/defaultProps.js

@@ -1,10 +0,0 @@
-/** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-const attachmentHandlerDefaultProps = {
-  customStyle: dummyObject,
-  iconName: 'ZD-TT-image',
-  iconSize: '14',
-  iconTitle: 'Upload',
-  isMultiAttachment: false
-};
-export default attachmentHandlerDefaultProps;

package/es/AttachmentHandler/props/propTypes.js

@@ -1,17 +0,0 @@
-/** ** Libraries *** */
-import PropTypes from 'prop-types';
-const attachmentHandlerPropTypes = {
-  customStyle: PropTypes.object,
-  iconName: PropTypes.string.isRequired,
-  iconSize: PropTypes.number,
-  iconTitle: PropTypes.string,
-  renderCustomIcon: PropTypes.func,
-  getRef: PropTypes.func,
-  supportedFileTypes: PropTypes.string,
-  isMultiAttachment: PropTypes.bool,
-  onAttach: PropTypes.func.isRequired,
-  customProps: PropTypes.shape({
-    inputProps: PropTypes.object
-  })
-};
-export default attachmentHandlerPropTypes;

package/es/AttachmentPreview/AttachmentPreview.js

@@ -1,121 +0,0 @@
-/* eslint-disable max-len */
-
-/** ** Libraries *** */
-import React, { useMemo } from 'react';
-/** ** Components *** */
-
-import { Container, Box } from '@zohodesk/components/es/Layout';
-import AttachmentPreviewHeader from "../AttachmentPreviewHeader/AttachmentPreviewHeader";
-import AttachmentPreviewBody from "../AttachmentPreviewBody/AttachmentPreviewBody";
-/** ** Hooks *** */
-
-import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import useAttachmentPreview from '@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreview';
-import useAttachmentPreviewEditor from '@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreviewEditor';
-/** ** Constants *** */
-
-import attachmentPreviewDefaultProps from "./props/defaultProps";
-import attachmentPreviewPropTypes from "./props/propTypes";
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-import { mediaTypes } from '@zohoim/chat-components-utils/es/constants/messageConstants';
-/** ** Styles *** */
-
-import style from "./css/AttachmentPreview.module.css";
-const {
-  IMAGE
-} = mediaTypes;
-export default function AttachmentPreview(props) {
-  const {
-    customStyle,
-    isDescriptionNeeded,
-    files,
-    customProps,
-    onSubmit,
-    onCancel,
-    texts,
-    descriptionDetails,
-    onDescriptionChange: propOnDescriptionChange,
-    needCloseOnEscape,
-    needUploadOnEnter,
-    needAutoZindex
-  } = props;
-  const {
-    editorProps = dummyObject,
-    attachmentPreviewHeaderProps = dummyObject,
-    attachmentPreviewBodyProps = dummyObject
-  } = customProps || dummyObject;
-  const {
-    submitText = 'Submit',
-    cancelText = 'Cancel',
-    placeHolder = 'Add a description for the image'
-  } = texts || dummyObject;
-  /* External customization */
-
-  const newStyle = useMergeStyle(style, customStyle);
-  const getNextIndex = useZIndex();
-  const {
-    selectedFile,
-    isShow,
-    description,
-    onDescriptionChange,
-    onEscape
-  } = useAttachmentPreview({
-    files,
-    onDescriptionChange: propOnDescriptionChange,
-    descriptionDetails,
-    needCloseOnEscape,
-    onCancel
-  });
-  const {
-    onEditorKeyDown
-  } = useAttachmentPreviewEditor({
-    editorProps,
-    onPreviewPopupKeyDown: onEscape,
-    needUploadOnEnter,
-    onSubmit
-  });
-  const {
-    fileName,
-    formattedFileSize: fileSize,
-    attachmentURL,
-    fileFormat,
-    mediaType,
-    attachmentId
-  } = selectedFile;
-  const isImageFile = useMemo(() => mediaType === IMAGE, [mediaType]);
-  return isShow ? /*#__PURE__*/React.createElement(Container, {
-    align: "both",
-    alignBox: "column",
-    className: newStyle.attachmentPreview,
-    style: needAutoZindex ? {
-      zIndex: `${getNextIndex()}`
-    } : {}
-  }, /*#__PURE__*/React.createElement("div", {
-    className: newStyle.uploadPrev
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewHeader, {
-    cancelText: cancelText,
-    fileName: fileName,
-    fileSize: fileSize,
-    onCancel: onCancel,
-    onSubmit: onSubmit,
-    submitText: submitText,
-    ...attachmentPreviewHeaderProps
-  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewBody, {
-    attachmentId: attachmentId,
-    attachmentURL: attachmentURL,
-    description: description,
-    editorProps: editorProps,
-    fileFormat: fileFormat,
-    isDescriptionNeeded: isDescriptionNeeded,
-    isImageFile: isImageFile,
-    mediaType: mediaType,
-    onDescriptionChange: onDescriptionChange,
-    onEditorKeyDown: onEditorKeyDown,
-    placeHolder: placeHolder,
-    ...attachmentPreviewBodyProps
-  })))) : null;
-}
-AttachmentPreview.propTypes = attachmentPreviewPropTypes;
-AttachmentPreview.defaultProps = attachmentPreviewDefaultProps;
-AttachmentPreview.displayName = 'AttachmentPreview';