@zohoim/chat-components 0.0.6 → 0.0.7

package/es/IMArticleBubble/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const imArticleBubbleClass = compileClassNames({
+    [style.imArticleBubble]: true
+  });
+  return {
+    imArticleBubbleClass
+  };
+}

package/es/IMArticleBubble/index.js

@@ -0,0 +1 @@
+export { default as IMArticleBubble } from './IMArticleBubble';

package/es/IMArticleBubble/props/defaultProps.js

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const imArticleBubbleDefaultProps = {
+  customStyle: dummyObject,
+  articleCustomStyle: dummyObject,
+  articleDetails: dummyObject
+};
+export default imArticleBubbleDefaultProps;

package/es/IMArticleBubble/props/propTypes.js

@@ -0,0 +1,14 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imArticleBubblePropTypes = {
+  customStyle: PropTypes.object,
+  articleCustomStyle: PropTypes.object,
+  articleDetails: PropTypes.shape({
+    createdTime: PropTypes.string,
+    id: PropTypes.string,
+    summary: PropTypes.string,
+    title: PropTypes.string,
+    webUrl: PropTypes.string
+  })
+};
+export default imArticleBubblePropTypes;

package/es/IMAttachmentBubble/IMAttachmentBubble.js

@@ -0,0 +1,63 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import imAttachmentBubbleDefaultProps from './props/defaultProps';
+import imAttachmentBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMAttachmentBubble.module.css';
+import AttachmentBubble from '../AttachmentBubble/AttachmentBubble';
+import IMAttachmentIcon from '../IMAttachmentIcon/IMAttachmentIcon';
+import useIMAttachmentBubble from '../../../chat-components-hooks/es/IMAttachmentBubble/useIMAttachmentBubble';
+export default function IMAttachmentBubble(props) {
+  const {
+    customStyle,
+    iconCustomStyle,
+    bubbleCustomStyle,
+    bubbleInfoCustomStyle,
+    attachmentDetails
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imAttachmentBubbleClass
+  } = cssJSLogic(props, newStyle);
+  const {
+    formattedFileSize: fileSize,
+    fileName,
+    fileFormat
+  } = useIMAttachmentBubble({
+    attachmentDetails
+  });
+  function renderFileTypeIcon() {
+    return /*#__PURE__*/React.createElement(IMAttachmentIcon, {
+      customStyle: iconCustomStyle,
+      fileFormat: fileFormat
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: imAttachmentBubbleClass
+  }, /*#__PURE__*/React.createElement(AttachmentBubble, {
+    customStyle: bubbleCustomStyle,
+    renderFileTypeIcon: renderFileTypeIcon,
+    fileName: fileName,
+    fileSize: fileSize,
+    bubbleInfoCustomStyle: bubbleInfoCustomStyle
+  }));
+}
+IMAttachmentBubble.propTypes = imAttachmentBubblePropTypes;
+IMAttachmentBubble.defaultProps = imAttachmentBubbleDefaultProps;
+IMAttachmentBubble.displayName = 'IMAttachmentBubble';

package/es/IMAttachmentBubble/css/IMAttachmentBubble.module.css

@@ -0,0 +1 @@
+

package/es/IMAttachmentBubble/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const imAttachmentBubbleClass = compileClassNames({
+    [style.imAttachmentBubble]: true
+  });
+  return {
+    imAttachmentBubbleClass
+  };
+}

package/es/IMAttachmentBubble/index.js

@@ -0,0 +1 @@
+export { default as IMAttachmentBubble } from './IMAttachmentBubble';

package/es/IMAttachmentBubble/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const imAttachmentBubbleDefaultProps = {
+  customStyle: dummyObject,
+  bubbleCustomStyle: dummyObject,
+  bubbleInfoCustomStyle: dummyObject,
+  iconCustomStyle: dummyObject,
+  attachmentDetails: dummyObject
+};
+export default imAttachmentBubbleDefaultProps;

package/es/IMAttachmentBubble/props/propTypes.js

@@ -0,0 +1,16 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imAttachmentBubblePropTypes = {
+  customStyle: PropTypes.object,
+  iconCustomStyle: PropTypes.object,
+  bubbleCustomStyle: PropTypes.object,
+  bubbleInfoCustomStyle: PropTypes.object,
+  attachmentDetails: PropTypes.shape({
+    name: PropTypes.string,
+    size: PropTypes.string,
+    type: PropTypes.string,
+    url: PropTypes.string,
+    id: PropTypes.string
+  })
+};
+export default imAttachmentBubblePropTypes;

package/es/IMAttachmentIcon/IMAttachmentIcon.js

@@ -0,0 +1,86 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import imAttachmentIconDefaultProps from './props/defaultProps';
+import imAttachmentIconPropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMAttachmentIcon.module.css';
+import attachmentFileTypes from '@zohoim/chat-components-utils/es/constants/attachmentFileTypes';
+
+/** ** Icons *** */
+import AudioIcon from '../icons/iconSrc/attachments/Audio';
+import CodeIcon from '../icons/iconSrc/attachments/Code';
+import ImageIcon from '../icons/iconSrc/attachments/Image';
+import PdfIcon from '../icons/iconSrc/attachments/Pdf';
+import TextIcon from '../icons/iconSrc/attachments/Txt';
+import UnknownIcon from '../icons/iconSrc/attachments/Unknown';
+import VideoIcon from '../icons/iconSrc/attachments/Video';
+import ZipIcon from '../icons/iconSrc/attachments/Zip';
+const {
+  SVG,
+  IMAGE,
+  PDF,
+  AUDIO,
+  VIDEO,
+  MP3,
+  M4A,
+  MP4,
+  // LOCATION,
+  HTML,
+  PSD,
+  CSS,
+  TEXT,
+  PLAIN,
+  ZIP,
+  UNDEFINED
+} = attachmentFileTypes;
+export default function IMAttachmentIcon(props) {
+  const {
+    customStyle,
+    fileFormat
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    iconStyle
+  } = cssJSLogic(props, newStyle);
+  const iconMapping = {
+    [SVG]: UnknownIcon,
+    [IMAGE]: ImageIcon,
+    [PDF]: PdfIcon,
+    [AUDIO]: AudioIcon,
+    [VIDEO]: VideoIcon,
+    [MP3]: AudioIcon,
+    [M4A]: AudioIcon,
+    [MP4]: VideoIcon,
+    // [LOCATION]: ReplyIcon,
+    [HTML]: CodeIcon,
+    [PSD]: UnknownIcon,
+    [CSS]: CodeIcon,
+    [TEXT]: TextIcon,
+    [PLAIN]: UnknownIcon,
+    [ZIP]: ZipIcon,
+    [UNDEFINED]: UnknownIcon
+  };
+  const IconComponent = iconMapping[fileFormat];
+  return IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
+    customStyle: iconStyle
+  }) : null;
+}
+IMAttachmentIcon.propTypes = imAttachmentIconPropTypes;
+IMAttachmentIcon.defaultProps = imAttachmentIconDefaultProps;
+IMAttachmentIcon.displayName = 'IMAttachmentIcon';

package/es/IMAttachmentIcon/css/IMAttachmentIcon.module.css

@@ -0,0 +1,4 @@
+.icon {
+    width: var(--imlib_size_20);
+    height: var(--imlib_size_20);
+}

package/es/IMAttachmentIcon/css/cssJSLogic.js

@@ -0,0 +1,16 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const imAttachmentIconClass = compileClassNames({
+    [style.imAttachmentIcon]: true
+  });
+  const iconClass = compileClassNames({
+    [style.icon]: true
+  });
+  return {
+    imAttachmentIconClass,
+    iconStyle: {
+      base: iconClass
+    }
+  };
+}

package/es/IMAttachmentIcon/index.js

@@ -0,0 +1 @@
+export { default as IMAttachmentIcon } from './IMAttachmentIcon';

package/es/IMAttachmentIcon/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const imAttachmentIconDefaultProps = {
+  customStyle: dummyObject
+};
+export default imAttachmentIconDefaultProps;

package/es/IMAttachmentIcon/props/propTypes.js

@@ -0,0 +1,26 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+import attachmentFileTypes from '@zohoim/chat-components-utils/es/constants/attachmentFileTypes';
+const {
+  SVG,
+  IMAGE,
+  PDF,
+  AUDIO,
+  VIDEO,
+  MP3,
+  M4A,
+  MP4,
+  LOCATION,
+  HTML,
+  PSD,
+  CSS,
+  TEXT,
+  PLAIN,
+  ZIP,
+  UNDEFINED
+} = attachmentFileTypes;
+const imAttachmentIconPropTypes = {
+  customStyle: PropTypes.object,
+  fileFormat: PropTypes.oneOf([SVG, IMAGE, PDF, AUDIO, VIDEO, MP3, M4A, MP4, LOCATION, HTML, PSD, CSS, TEXT, PLAIN, ZIP, UNDEFINED])
+};
+export default imAttachmentIconPropTypes;

package/es/IMAudioBubble/IMAudioBubble.js

@@ -0,0 +1,63 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import imAudioBubbleDefaultProps from './props/defaultProps';
+import imAudioBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMAudioBubble.module.css';
+import AudioBubble from '../AudioBubble/AudioBubble';
+import useIMAudioBubble from '@zohoim/chat-components-hooks/es/IMAudioBubble/useIMAudioBubble';
+export default function IMAudioBubble(props) {
+  const {
+    attachmentDetails,
+    customStyle,
+    audioBubbleCustomStyle,
+    // headerCustomStyle,
+    audioCustomStyle,
+    controlsCustomStyle
+  } = props;
+  const {
+    isShow,
+    fileName,
+    formattedFileSize: fileSize,
+    attachmentURL: fileURL,
+    attachmentType: fileType
+  } = useIMAudioBubble({
+    attachmentDetails
+  });
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imAudioBubbleClass,
+    headerCustomStyle
+  } = cssJSLogic(props, newStyle);
+  return isShow ? /*#__PURE__*/React.createElement("div", {
+    className: imAudioBubbleClass
+  }, /*#__PURE__*/React.createElement(AudioBubble, {
+    customStyle: audioBubbleCustomStyle,
+    headerCustomStyle: headerCustomStyle,
+    audioCustomStyle: audioCustomStyle,
+    controlsCustomStyle: controlsCustomStyle,
+    fileName: fileName,
+    fileSize: fileSize,
+    fileURL: fileURL,
+    fileType: fileType
+  })) : null;
+}
+IMAudioBubble.propTypes = imAudioBubblePropTypes;
+IMAudioBubble.defaultProps = imAudioBubbleDefaultProps;
+IMAudioBubble.displayName = 'IMAudioBubble';

package/es/IMAudioBubble/css/IMAudioBubble.module.css

@@ -0,0 +1,8 @@
+.imAudioBubble {
+    width: 380px;
+}
+
+
+.box{
+    margin-bottom: 5px;
+}

package/es/IMAudioBubble/css/cssJSLogic.js

@@ -0,0 +1,20 @@
+/** ** Methods *** */
+import { compileClassNames } from "@zohodesk/utils";
+export default function cssJSLogic(props, style) {
+  let {
+    headerCustomStyle: propHeaderCustomStyle
+  } = props;
+  const imAudioBubbleClass = compileClassNames({
+    [style.imAudioBubble]: true
+  });
+  const headerCustomStyle = compileClassNames({
+    [style.box]: true
+  });
+  return {
+    imAudioBubbleClass,
+    headerCustomStyle: {
+      attachmentBubbleInfo: headerCustomStyle,
+      ...propHeaderCustomStyle
+    }
+  };
+}

package/es/IMAudioBubble/index.js

@@ -0,0 +1 @@
+export { default as IMAudioBubble } from './IMAudioBubble';

package/es/IMAudioBubble/props/defaultProps.js

@@ -0,0 +1,11 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const imAudioBubbleDefaultProps = {
+  customStyle: dummyObject,
+  audioBubbleCustomStyle: dummyObject,
+  headerCustomStyle: dummyObject,
+  audioCustomStyle: dummyObject,
+  controlsCustomStyle: dummyObject,
+  attachmentDetails: dummyObject
+};
+export default imAudioBubbleDefaultProps;

package/es/IMAudioBubble/props/propTypes.js

@@ -0,0 +1,17 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imAudioBubblePropTypes = {
+  attachmentDetails: PropTypes.shape({
+    name: PropTypes.string,
+    size: PropTypes.string,
+    type: PropTypes.string,
+    url: PropTypes.string,
+    id: PropTypes.string
+  }),
+  customStyle: PropTypes.object,
+  audioBubbleCustomStyle: PropTypes.object,
+  headerCustomStyle: PropTypes.object,
+  audioCustomStyle: PropTypes.object,
+  controlsCustomStyle: PropTypes.object
+};
+export default imAudioBubblePropTypes;

package/es/IMAutoMessageInfo/IMAutoMessageInfo.js

@@ -0,0 +1,43 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useIMAutoMessageInfo from '@zohoim/chat-components-hooks/src/IMAutoMessageInfo/useIMAutoMessageInfo';
+
+/** ** Constants *** */
+import imAutoMessageInfoDefaultProps from './props/defaultProps';
+import imAutoMessageInfoPropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMAutoMessageInfo.module.css';
+export default function IMAutoMessageInfo(props) {
+  const {
+    autoMessageContent,
+    autoMessageTitle
+  } = useIMAutoMessageInfo(props);
+  const {
+    customStyle
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imAutoMessageInfoClass
+  } = cssJSLogic(props, newStyle);
+  return autoMessageContent ? /*#__PURE__*/React.createElement("div", {
+    className: imAutoMessageInfoClass,
+    "data-title": autoMessageTitle
+  }, autoMessageContent) : null;
+}
+IMAutoMessageInfo.propTypes = imAutoMessageInfoPropTypes;
+IMAutoMessageInfo.defaultProps = imAutoMessageInfoDefaultProps;
+IMAutoMessageInfo.displayName = 'IMAutoMessageInfo';

package/es/IMAutoMessageInfo/css/IMAutoMessageInfo.module.css

@@ -0,0 +1,13 @@
+.varClass {
+  --imAutoMessageInfo-font_size: var(--imlib_size_13);
+  --imAutoMessageInfo-max_width: var(--imlib_size_100);
+  --imAutoMessageInfo-letter_spacing: 0.2px;
+}
+
+.imAutoMessageInfo {
+  composes: varClass;
+
+  font-size: var(--imAutoMessageInfo-font_size);
+  letter-spacing: var(--imAutoMessageInfo-letter_spacing);
+  max-width: var(--imAutoMessageInfo-max_width);
+}

package/es/IMAutoMessageInfo/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const imAutoMessageInfoClass = compileClassNames({
+    [style.imAutoMessageInfo]: true
+  });
+  return {
+    imAutoMessageInfoClass
+  };
+}

package/es/IMAutoMessageInfo/index.js

@@ -0,0 +1 @@
+export { default as IMAutoMessageInfo } from './IMAutoMessageInfo';

package/es/IMAutoMessageInfo/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const imAutoMessageInfoDefaultProps = {
+  customStyle: dummyObject
+};
+export default imAutoMessageInfoDefaultProps;

package/es/IMAutoMessageInfo/props/propTypes.js

@@ -0,0 +1,26 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+import { autoMessageTypes } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+const {
+  WELCOMEMSG,
+  WORKFLOW_MESSAGE,
+  WORKFLOW_NOTIFICATION,
+  UN_SUPPORTED_FILE
+} = autoMessageTypes;
+const imAutoMessageInfoPropTypes = {
+  customStyle: PropTypes.object,
+  autoMessageType: PropTypes.oneOf([WELCOMEMSG, WORKFLOW_MESSAGE, WORKFLOW_NOTIFICATION, UN_SUPPORTED_FILE]),
+  autoMessagesI18N: PropTypes.shape({
+    [WELCOMEMSG]: PropTypes.string,
+    [WORKFLOW_MESSAGE]: PropTypes.string,
+    [WORKFLOW_NOTIFICATION]: PropTypes.string,
+    [UN_SUPPORTED_FILE]: PropTypes.string
+  }),
+  autoMessagesTitleI18N: PropTypes.shape({
+    [WELCOMEMSG]: PropTypes.string,
+    [WORKFLOW_MESSAGE]: PropTypes.string,
+    [WORKFLOW_NOTIFICATION]: PropTypes.string,
+    [UN_SUPPORTED_FILE]: PropTypes.string
+  })
+};
+export default imAutoMessageInfoPropTypes;

package/es/IMDateTime/IMDateTime.js

@@ -0,0 +1,41 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useIMDateTime from '@zohoim/chat-components-hooks/es/IMDateTime/useIMDateTime';
+
+/** ** Constants *** */
+import imDateTimeDefaultProps from './props/defaultProps';
+import imDateTimePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMDateTime.module.css';
+export default function IMDateTime(props) {
+  const {
+    customStyle
+  } = props;
+  const {
+    time
+  } = useIMDateTime(props);
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imDateTimeClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: imDateTimeClass
+  }, time);
+}
+IMDateTime.propTypes = imDateTimePropTypes;
+IMDateTime.defaultProps = imDateTimeDefaultProps;
+IMDateTime.displayName = 'IMDateTime';

package/es/IMDateTime/css/IMDateTime.module.css

@@ -0,0 +1,5 @@
+.imDateTime {
+  font-size: var(--zd_size11);
+  max-width: var(--zd_size100);
+  display: flex;
+}

package/es/IMDateTime/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const imDateTimeClass = compileClassNames({
+    [style.imDateTime]: true
+  });
+  return {
+    imDateTimeClass
+  };
+}

package/es/IMDateTime/index.js

@@ -0,0 +1 @@
+export { default as IMDateTime } from './IMDateTime';

package/es/IMDateTime/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const imDateTimeDefaultProps = {
+  customStyle: dummyObject
+};
+export default imDateTimeDefaultProps;

package/es/IMDateTime/props/propTypes.js

@@ -0,0 +1,6 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imDateTimePropTypes = {
+  customStyle: PropTypes.object
+};
+export default imDateTimePropTypes;

package/es/IMImageBubble/IMImageBubble.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import imImageBubbleDefaultProps from './props/defaultProps';
+import imImageBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMImageBubble.module.css';
+import ImageBubble from '../ImageBubble/ImageBubble';
+import useIMImageBubble from '@zohoim/chat-components-hooks/es/IMImageBubble/useIMImageBubble';
+export default function IMImageBubble(props) {
+  const {
+    customStyle,
+    attachmentDetails
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imImageBubbleClass
+  } = cssJSLogic(props, newStyle);
+  const {
+    attachmentURL,
+    fileName
+  } = useIMImageBubble({
+    attachmentDetails
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: imImageBubbleClass
+  }, /*#__PURE__*/React.createElement(ImageBubble, {
+    src: attachmentURL,
+    alternate: fileName
+  }));
+}
+IMImageBubble.propTypes = imImageBubblePropTypes;
+IMImageBubble.defaultProps = imImageBubbleDefaultProps;
+IMImageBubble.displayName = 'IMImageBubble';