@zohoim/chat-components 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/es/AttachmentBubble/AttachmentBubble.js +9 -2
  2. package/es/AttachmentBubble/css/AttachmentBubble.module.css +5 -0
  3. package/es/AttachmentBubble/css/cssJSLogic.js +4 -2
  4. package/es/AttachmentBubble/props/defaultProps.js +1 -0
  5. package/es/AttachmentBubble/props/propTypes.js +2 -1
  6. package/es/AttachmentIcon/AttachmentIcon.js +15 -4
  7. package/es/AttachmentIcon/css/AttachmentIcon.module.css +4 -0
  8. package/es/AttachmentIcon/css/cssJSLogic.js +13 -0
  9. package/es/AttachmentIcon/props/defaultProps.js +2 -0
  10. package/es/AttachmentIcon/props/propTypes.js +3 -1
  11. package/es/AttachmentIcon/utils/getAttachmentIconComponent.js +23 -4
  12. package/es/ReplyBubble/ReplyBubble.js +4 -2
  13. package/es/ReplyBubble/props/propTypes.js +1 -0
  14. package/es/Theme/themeVariables/commonThemeColorVariable.js +1 -1
  15. package/es/icons/factory/attachments/ppt.svg +1 -0
  16. package/es/icons/factory/attachments/xls.svg +1 -0
  17. package/es/icons/factory/common/alertTriangle.svg +5 -0
  18. package/es/icons/iconSrc/attachments/Ppt.js +26 -0
  19. package/es/icons/iconSrc/attachments/Xls.js +26 -0
  20. package/es/icons/iconSrc/attachments/index.js +2 -0
  21. package/es/icons/iconSrc/common/AlertTriangle.js +23 -0
  22. package/es/icons/iconSrc/common/index.js +1 -0
  23. package/es/im/IMIntegrationIcon/IMIntegrationIcon.js +4 -2
  24. package/es/im/IMMessage/IMMessage.js +8 -6
  25. package/es/im/IMMessage/props/defaultProps.js +2 -0
  26. package/es/im/IMMessage/props/propTypes.js +19 -10
  27. package/es/im/IMMessageContent/IMMessageContent.js +5 -0
  28. package/es/im/IMMessageContent/props/defaultProps.js +1 -0
  29. package/es/im/IMMessageContent/props/propTypes.js +3 -0
  30. package/es/im/IMMessageMeta/IMMessageMeta.js +20 -12
  31. package/es/im/IMMessageMeta/css/IMMessageMeta.module.css +6 -1
  32. package/es/im/IMMessageMeta/css/cssJSLogic.js +1 -0
  33. package/es/im/IMMessageMeta/props/defaultProps.js +2 -1
  34. package/es/im/IMMessageMeta/props/propTypes.js +19 -12
  35. package/es/im/IMMessageMetaInfo/IMMessageMetaInfo.js +29 -0
  36. package/es/im/IMMessageMetaInfo/css/IMMessageMetaInfo.module.css +14 -0
  37. package/es/im/IMMessageMetaInfo/index.js +1 -0
  38. package/es/im/IMMessageMetaInfo/props/defaultProps.js +8 -0
  39. package/es/im/IMMessageMetaInfo/props/propTypes.js +8 -0
  40. package/es/im/index.js +1 -1
  41. package/package.json +4 -4
  42. package/es/im/IMAutoMessageInfo/IMAutoMessageInfo.js +0 -32
  43. package/es/im/IMAutoMessageInfo/css/IMAutoMessageInfo.module.css +0 -13
  44. package/es/im/IMAutoMessageInfo/index.js +0 -1
  45. package/es/im/IMAutoMessageInfo/props/defaultProps.js +0 -6
  46. package/es/im/IMAutoMessageInfo/props/propTypes.js +0 -28
@@ -28,7 +28,8 @@ export default function AttachmentBubble(props) {
28
28
  attachmentDetails,
29
29
  isFailed,
30
30
  isSending,
31
- onClick: propOnClick
31
+ onClick: propOnClick,
32
+ attachmentBubbleTitle
32
33
  } = props;
33
34
  const {
34
35
  attachmentBubbleInfoProps,
@@ -38,6 +39,8 @@ export default function AttachmentBubble(props) {
38
39
  formattedFileSize: fileSize,
39
40
  fileName,
40
41
  fileFormat,
42
+ isDisabled,
43
+ isValidAttachment,
41
44
  mediaType,
42
45
  onClick
43
46
  } = useAttachmentBubble({
@@ -53,17 +56,21 @@ export default function AttachmentBubble(props) {
53
56
  attachmentBubbleClass
54
57
  } = cssJSLogic({
55
58
  isFailed,
56
- isSending
59
+ isSending,
60
+ isDisabled
57
61
  }, newStyle);
58
62
  return /*#__PURE__*/React.createElement(Container, {
59
63
  alignBox: "row",
60
64
  className: attachmentBubbleClass,
65
+ "data-title": attachmentBubbleTitle,
61
66
  isCover: false,
62
67
  onClick: onClick
63
68
  }, /*#__PURE__*/React.createElement(Box, {
64
69
  className: newStyle.attachmentBubbleIcon
65
70
  }, /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
66
71
  fileFormat: fileFormat,
72
+ isDisabled: isDisabled,
73
+ isValidAttachment: isValidAttachment,
67
74
  mediaType: mediaType
68
75
  }, attachmentIconProps))), /*#__PURE__*/React.createElement(Box, {
69
76
  className: newStyle.attachmentBubbleContent,
@@ -5,6 +5,11 @@
5
5
  border: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
6
6
  }
7
7
 
8
+ .disabledAttachmentBubble {
9
+ opacity: 0.5;
10
+ cursor: not-allowed;
11
+ }
12
+
8
13
  .failedAttachmentBubble {
9
14
  background-color: var(
10
15
  --imlib_chat_components_attachmentBubble_bg_color_failed
@@ -2,12 +2,14 @@ import { compileClassNames } from '@zohodesk/utils';
2
2
  export default function cssJSLogic(props, style) {
3
3
  const {
4
4
  isFailed,
5
- isSending
5
+ isSending,
6
+ isDisabled
6
7
  } = props;
7
8
  const attachmentBubbleClass = compileClassNames({
8
9
  [style.attachmentBubble]: true,
10
+ [style.disabledAttachmentBubble]: isDisabled,
9
11
  [style.failedAttachmentBubble]: isFailed,
10
- [style.attachmentBubbleCursor]: !isSending,
12
+ [style.attachmentBubbleCursor]: !isSending && !isDisabled,
11
13
  [style.sendingdAttachmentBubble]: isSending
12
14
  });
13
15
  return {
@@ -1,6 +1,7 @@
1
1
  /** ** Constants *** */
2
2
  import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
3
  const attachmentBubbleDefaultProps = {
4
+ attachmentBubbleTitle: '',
4
5
  customStyle: dummyObject,
5
6
  customProps: dummyObject
6
7
  };
@@ -13,6 +13,7 @@ const attachmentBubblePropTypes = {
13
13
  customStyle: PropTypes.object,
14
14
  isFailed: PropTypes.bool,
15
15
  isSending: PropTypes.bool,
16
- onClick: PropTypes.func
16
+ onClick: PropTypes.func,
17
+ attachmentBubbleTitle: PropTypes.string
17
18
  };
18
19
  export default attachmentBubblePropTypes;
@@ -9,6 +9,7 @@ import attachmentIconDefaultProps from './props/defaultProps';
9
9
  import attachmentIconPropTypes from './props/propTypes';
10
10
  /** ** Methods *** */
11
11
 
12
+ import cssJSLogic from './css/cssJSLogic';
12
13
  import getAttachmentIconComponent from './utils/getAttachmentIconComponent';
13
14
  import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
14
15
  /** ** Styles *** */
@@ -19,14 +20,23 @@ export default function AttachmentIcon(props) {
19
20
  customStyle,
20
21
  fileFormat,
21
22
  mediaType,
22
- renderCustomIcon
23
+ isDisabled,
24
+ renderCustomIcon,
25
+ isValidAttachment
23
26
  } = props;
24
27
  /* External CSS Customization */
25
28
 
26
29
  const newStyle = useMergeStyle(style, customStyle);
30
+ /* css classnames added based on logic */
31
+
32
+ const {
33
+ iconStyleClass
34
+ } = cssJSLogic({
35
+ isDisabled
36
+ }, newStyle);
27
37
  const iconCustomStyle = useMemo(() => ({
28
- base: newStyle.icon
29
- }), [newStyle.icon]);
38
+ base: iconStyleClass
39
+ }), [iconStyleClass]);
30
40
  /* Custom Icon Renderer */
31
41
 
32
42
  if (renderCustomIcon) {
@@ -38,7 +48,8 @@ export default function AttachmentIcon(props) {
38
48
  IconComponent
39
49
  } = getAttachmentIconComponent({
40
50
  fileFormat,
41
- mediaType
51
+ mediaType,
52
+ isValidAttachment
42
53
  });
43
54
  return IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
44
55
  customStyle: iconCustomStyle
@@ -2,3 +2,7 @@
2
2
  width: var(--zd_size20) !important;
3
3
  height: var(--zd_size20) !important;
4
4
  }
5
+
6
+ .disabledIcon {
7
+ cursor: not-allowed !important;
8
+ }
@@ -0,0 +1,13 @@
1
+ import { compileClassNames } from '@zohodesk/utils';
2
+ export default function cssJSLogic(props, style) {
3
+ const {
4
+ isDisabled
5
+ } = props;
6
+ const iconStyleClass = compileClassNames({
7
+ [style.icon]: true,
8
+ [style.disabledIcon]: isDisabled
9
+ });
10
+ return {
11
+ iconStyleClass
12
+ };
13
+ }
@@ -1,6 +1,8 @@
1
1
  /** ** Constants *** */
2
2
  import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
3
  const attachmentIconDefaultProps = {
4
+ isDisabled: false,
5
+ isValidAttachment: true,
4
6
  customStyle: dummyObject
5
7
  };
6
8
  export default attachmentIconDefaultProps;
@@ -13,7 +13,9 @@ const fileFormats = JSON.parse(JSON.stringify(Object.values(attachmentFileTypes)
13
13
  const attachmentIconPropTypes = {
14
14
  fileFormat: PropTypes.oneOf(fileFormats).isRequired,
15
15
  mediaType: PropTypes.oneOf([AUDIO, VIDEO, IMAGE]).isRequired,
16
+ isDisabled: PropTypes.bool,
16
17
  customStyle: PropTypes.object,
17
- renderCustomIcon: PropTypes.func
18
+ renderCustomIcon: PropTypes.func,
19
+ isValidAttachment: PropTypes.bool
18
20
  };
19
21
  export default attachmentIconPropTypes;
@@ -7,6 +7,9 @@ import TextIcon from '../../icons/iconSrc/attachments/Text';
7
7
  import UnknownIcon from '../../icons/iconSrc/attachments/Unknown';
8
8
  import VideoIcon from '../../icons/iconSrc/attachments/Video';
9
9
  import ZipIcon from '../../icons/iconSrc/attachments/Zip';
10
+ import AlertIcon from '../../icons/iconSrc/common/AlertTriangle';
11
+ import XlsIcon from '../../icons/iconSrc/attachments/Xls';
12
+ import PptIcon from '../../icons/iconSrc/attachments/Ppt';
10
13
  /** ** Constants *** */
11
14
 
12
15
  import attachmentFileTypes from '@zohoim/chat-components-utils/es/constants/attachmentFileTypes';
@@ -27,13 +30,17 @@ const {
27
30
  CSS,
28
31
  TEXT,
29
32
  PLAIN,
33
+ XLS,
34
+ PPT,
30
35
  ZIP,
31
- UNDEFINED
36
+ UNDEFINED,
37
+ INVALID
32
38
  } = attachmentFileTypes;
33
39
  export default function getAttachmentIconComponent(_ref) {
34
40
  let {
35
41
  fileFormat,
36
- mediaType
42
+ mediaType,
43
+ isValidAttachment
37
44
  } = _ref;
38
45
  const iconMapping = {
39
46
  [SVG]: CodeIcon,
@@ -52,10 +59,22 @@ export default function getAttachmentIconComponent(_ref) {
52
59
  [CSS]: CodeIcon,
53
60
  [TEXT]: TextIcon,
54
61
  [PLAIN]: TextIcon,
62
+ [XLS]: XlsIcon,
63
+ [PPT]: PptIcon,
55
64
  [ZIP]: ZipIcon,
56
- [UNDEFINED]: UnknownIcon
65
+ [UNDEFINED]: UnknownIcon,
66
+ [INVALID]: AlertIcon
57
67
  };
58
- const IconComponent = attachmentFileTypes[mediaType] ? iconMapping[attachmentFileTypes[mediaType]] : iconMapping[fileFormat] || iconMapping[UNDEFINED];
68
+ let IconComponent;
69
+
70
+ if (!isValidAttachment) {
71
+ IconComponent = iconMapping[INVALID];
72
+ } else if (attachmentFileTypes[mediaType]) {
73
+ IconComponent = iconMapping[attachmentFileTypes[mediaType]];
74
+ } else {
75
+ IconComponent = iconMapping[fileFormat] || iconMapping[UNDEFINED];
76
+ }
77
+
59
78
  return {
60
79
  IconComponent
61
80
  };
@@ -44,7 +44,8 @@ export default function ReplyBubble(props) {
44
44
  fileName,
45
45
  fileURL,
46
46
  fileFormat,
47
- mediaType
47
+ mediaType,
48
+ isValidAttachment
48
49
  } = attachmentDetails || dummyObject;
49
50
  /* External CSS Customization */
50
51
 
@@ -93,12 +94,13 @@ export default function ReplyBubble(props) {
93
94
  return /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
94
95
  customStyle: iconStyle,
95
96
  fileFormat: fileFormat,
97
+ isValidAttachment: isValidAttachment,
96
98
  mediaType: mediaType
97
99
  }, iconProps));
98
100
  }
99
101
 
100
102
  return null;
101
- }, [fileURL, fileName, fileFormat, mediaType, iconStyle, iconProps, newStyle.image, imageWrapperClass]);
103
+ }, [fileURL, fileName, fileFormat, isValidAttachment, mediaType, iconStyle, iconProps, newStyle.image, imageWrapperClass]);
102
104
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ReplyBubbleHeader, _extends({
103
105
  dateTimeDetails: dateTimeDetails,
104
106
  isFailed: isFailed,
@@ -9,6 +9,7 @@ const replyBubblePropTypes = {
9
9
  fileFormat: PropTypes.string,
10
10
  fileName: PropTypes.string,
11
11
  fileURL: PropTypes.string,
12
+ isValidAttachment: PropTypes.bool,
12
13
  mediaType: PropTypes.string
13
14
  }),
14
15
  locationUrl: PropTypes.string,
@@ -6,7 +6,7 @@ export const imIntegrationIcon = {
6
6
  wechat_color: '#2dc100',
7
7
  line_color: '#01b901',
8
8
  twillio_color: '#f22f46',
9
- instagram_color: 'red',
9
+ instagram_color: 'linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);',
10
10
  asap_color: '#0a73eb',
11
11
  fb_color: '#006aff'
12
12
  };
@@ -0,0 +1 @@
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.52 30.27"><defs><style>.cls-1{fill:#010101;}.cls-2{fill:#c8cadb;opacity:.5;}</style></defs><rect class="cls-2" x="4.25" y="4" width="26.27" height="26.27" rx="3.16" ry="3.16"/><path class="cls-1" d="M29.75,10.13L21.12,.34c-.19-.22-.46-.34-.75-.34H4.11C1.84,0,0,1.84,0,4.11V25.88c0,2.27,1.84,4.11,4.11,4.11H25.89c2.27,0,4.11-1.84,4.11-4.11V10.79c0-.24-.09-.48-.25-.66Zm-1.75,15.75c0,1.16-.95,2.11-2.11,2.11H4.11c-1.16,0-2.11-.95-2.11-2.11V4.11c0-1.16,.95-2.11,2.11-2.11h15.66V7.94c0,1.93,1.57,3.5,3.5,3.5h4.73v14.44Zm-5.83-13.7h-6.17v-.84c0-.55-.45-1-1-1s-1,.45-1,1v.84H7.83c-.55,0-1,.45-1,1v8.78c0,.55,.45,1,1,1h2.76l-.59,.97c-.29,.47-.14,1.09,.33,1.37,.16,.1,.34,.15,.52,.15,.34,0,.67-.17,.85-.48l1.23-2.01h3.89l1.23,2.01c.19,.31,.52,.48,.85,.48,.18,0,.36-.05,.52-.15,.47-.29,.62-.9,.33-1.37l-.59-.97h3c.55,0,1-.45,1-1V13.17c0-.55-.45-1-1-1Zm-1,8.78H8.83v-6.78h12.34v6.78Z"/></svg>
@@ -0,0 +1 @@
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30.27"><defs><style>.cls-1{fill:#010101;}.cls-2{fill:#c8cadb;opacity:.5;}</style></defs><rect class="cls-2" x="3.73" y="4" width="26.27" height="26.27" rx="3.16" ry="3.16"/><path class="cls-1" d="M14.58,16.36l4.24,6.07h-3.27l-2.6-3.76-1.19,1.66h1.19v2.1H7.07l4.32-6.07-3.79-5.5h3.13l2.23,3.18,2.23-3.18h3.13l-3.72,5.5Zm15.42-5.57v15.09c0,2.27-1.84,4.11-4.11,4.11H4.11c-2.27,0-4.11-1.84-4.11-4.11V4.11C0,1.84,1.84,0,4.11,0H20.38c.29,0,.56,.12,.75,.34l8.62,9.79c.16,.18,.25,.42,.25,.66Zm-2,.65h-4.73c-1.93,0-3.5-1.57-3.5-3.5V2H4.11c-1.16,0-2.11,.95-2.11,2.11V25.88c0,1.16,.95,2.11,2.11,2.11H25.89c1.16,0,2.11-.95,2.11-2.11V11.44Z"/></svg>
@@ -0,0 +1,5 @@
1
+ <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6.79264 28.179C6.25485 28.1726 5.72811 28.0254 5.26489 27.752C4.80164 27.4789 4.41804 27.0891 4.15227 26.6215C3.8865 26.1539 3.74782 25.6248 3.75003 25.087C3.75225 24.5492 3.89527 24.0212 4.16488 23.5559L13.9607 7.09663C14.229 6.63566 14.6136 6.25317 15.076 5.9873C15.5385 5.72146 16.0626 5.58154 16.596 5.58154C17.1293 5.58154 17.6534 5.72146 18.1158 5.9873C18.5783 6.25317 18.9628 6.63566 19.2312 7.09663L29.0195 23.5634C29.2809 24.0231 29.4232 24.5408 29.4336 25.0693C29.4376 25.475 29.3613 25.8774 29.2092 26.2535C29.0573 26.6298 28.8324 26.9722 28.5476 27.2611C28.263 27.5501 27.9238 27.7799 27.5499 27.9375C27.1761 28.095 26.7748 28.1771 26.3691 28.179H6.79264ZM15.2557 7.84957L5.46747 24.3164C5.26169 24.6774 5.20635 25.1051 5.31343 25.5068C5.42052 25.9083 5.68143 26.2516 6.0397 26.4623C6.26775 26.5976 6.52749 26.6703 6.79264 26.6731H26.3691C26.7793 26.6575 27.1667 26.4813 27.4485 26.1829C27.7301 25.8844 27.8831 25.4872 27.875 25.0768C27.8722 24.8116 27.7995 24.552 27.6642 24.3239L17.9061 7.84957C17.7999 7.67397 17.6601 7.52104 17.4948 7.39959C17.3294 7.27813 17.1416 7.19054 16.9423 7.14181C16.7456 7.09174 16.5409 7.08193 16.3403 7.11299C16.1398 7.14403 15.9476 7.21531 15.7752 7.32251C15.5628 7.45463 15.3848 7.63527 15.2557 7.84957Z" fill="#AB1A18"/>
3
+ <path d="M16.5801 19.6704C16.3804 19.6704 16.1889 19.5911 16.0477 19.45C15.9065 19.3088 15.8271 19.1172 15.8271 18.9174V13.4512C15.8271 13.2515 15.9065 13.06 16.0477 12.9188C16.1889 12.7776 16.3804 12.6982 16.5801 12.6982C16.7798 12.6982 16.9713 12.7776 17.1125 12.9188C17.2537 13.06 17.333 13.2515 17.333 13.4512V18.9174C17.333 19.1172 17.2537 19.3088 17.1125 19.45C16.9713 19.5911 16.7798 19.6704 16.5801 19.6704Z" fill="#AB1A18"/>
4
+ <path d="M16.5801 23.5183C16.481 23.5189 16.3828 23.4999 16.291 23.4624C16.1993 23.4249 16.1159 23.3698 16.0455 23.3C15.9757 23.2296 15.9205 23.1462 15.883 23.0543C15.8456 22.9626 15.8266 22.8644 15.8272 22.7654C15.828 22.5677 15.9064 22.3785 16.0455 22.2383C16.1155 22.1677 16.1988 22.1116 16.2905 22.0734C16.3823 22.0352 16.4807 22.0156 16.5801 22.0156C16.6795 22.0156 16.7779 22.0352 16.8697 22.0734C16.9614 22.1116 17.0447 22.1677 17.1147 22.2383C17.2538 22.3785 17.3322 22.5677 17.333 22.7654C17.3312 22.8661 17.3107 22.9656 17.2728 23.059C17.2361 23.1488 17.1824 23.2305 17.1147 23.3C17.0443 23.3698 16.9609 23.4249 16.8692 23.4624C16.7774 23.4999 16.6792 23.5189 16.5801 23.5183Z" fill="#AB1A18"/>
5
+ </svg>
@@ -0,0 +1,26 @@
1
+ /* eslint-disable */
2
+ import React from 'react';
3
+ import Icon from '@zohodesk/icon/es/Icon/Icon';
4
+ export default function IconComponent(props) {
5
+ return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
6
+ id: "Layer_1",
7
+ xmlns: "http://www.w3.org/2000/svg",
8
+ viewBox: "0 0 30.52 30.27"
9
+ }, " ", /*#__PURE__*/React.createElement("defs", null, " ", /*#__PURE__*/React.createElement("style", {
10
+ dangerouslySetInnerHTML: {
11
+ __html: `.cls-1{fill:#010101;}.cls-2{fill:#c8cadb;opacity:.5;}`
12
+ }
13
+ }), " "), " ", /*#__PURE__*/React.createElement("rect", {
14
+ className: "cls-2",
15
+ x: "4.25",
16
+ y: "4",
17
+ width: "26.27",
18
+ height: "26.27",
19
+ rx: "3.16",
20
+ ry: "3.16"
21
+ }), " ", /*#__PURE__*/React.createElement("path", {
22
+ className: "path-0",
23
+ d: "M29.75,10.13L21.12,.34c-.19-.22-.46-.34-.75-.34H4.11C1.84,0,0,1.84,0,4.11V25.88c0,2.27,1.84,4.11,4.11,4.11H25.89c2.27,0,4.11-1.84,4.11-4.11V10.79c0-.24-.09-.48-.25-.66Zm-1.75,15.75c0,1.16-.95,2.11-2.11,2.11H4.11c-1.16,0-2.11-.95-2.11-2.11V4.11c0-1.16,.95-2.11,2.11-2.11h15.66V7.94c0,1.93,1.57,3.5,3.5,3.5h4.73v14.44Zm-5.83-13.7h-6.17v-.84c0-.55-.45-1-1-1s-1,.45-1,1v.84H7.83c-.55,0-1,.45-1,1v8.78c0,.55,.45,1,1,1h2.76l-.59,.97c-.29,.47-.14,1.09,.33,1.37,.16,.1,.34,.15,.52,.15,.34,0,.67-.17,.85-.48l1.23-2.01h3.89l1.23,2.01c.19,.31,.52,.48,.85,.48,.18,0,.36-.05,.52-.15,.47-.29,.62-.9,.33-1.37l-.59-.97h3c.55,0,1-.45,1-1V13.17c0-.55-.45-1-1-1Zm-1,8.78H8.83v-6.78h12.34v6.78Z"
24
+ }), " "));
25
+ }
26
+ IconComponent.propTypes = Icon.propTypes;
@@ -0,0 +1,26 @@
1
+ /* eslint-disable */
2
+ import React from 'react';
3
+ import Icon from '@zohodesk/icon/es/Icon/Icon';
4
+ export default function IconComponent(props) {
5
+ return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
6
+ id: "Layer_1",
7
+ xmlns: "http://www.w3.org/2000/svg",
8
+ viewBox: "0 0 30 30.27"
9
+ }, " ", /*#__PURE__*/React.createElement("defs", null, " ", /*#__PURE__*/React.createElement("style", {
10
+ dangerouslySetInnerHTML: {
11
+ __html: `.cls-1{fill:#010101;}.cls-2{fill:#c8cadb;opacity:.5;}`
12
+ }
13
+ }), " "), " ", /*#__PURE__*/React.createElement("rect", {
14
+ className: "cls-2",
15
+ x: "3.73",
16
+ y: "4",
17
+ width: "26.27",
18
+ height: "26.27",
19
+ rx: "3.16",
20
+ ry: "3.16"
21
+ }), " ", /*#__PURE__*/React.createElement("path", {
22
+ className: "path-0",
23
+ d: "M14.58,16.36l4.24,6.07h-3.27l-2.6-3.76-1.19,1.66h1.19v2.1H7.07l4.32-6.07-3.79-5.5h3.13l2.23,3.18,2.23-3.18h3.13l-3.72,5.5Zm15.42-5.57v15.09c0,2.27-1.84,4.11-4.11,4.11H4.11c-2.27,0-4.11-1.84-4.11-4.11V4.11C0,1.84,1.84,0,4.11,0H20.38c.29,0,.56,.12,.75,.34l8.62,9.79c.16,.18,.25,.42,.25,.66Zm-2,.65h-4.73c-1.93,0-3.5-1.57-3.5-3.5V2H4.11c-1.16,0-2.11,.95-2.11,2.11V25.88c0,1.16,.95,2.11,2.11,2.11H25.89c1.16,0,2.11-.95,2.11-2.11V11.44Z"
24
+ }), " "));
25
+ }
26
+ IconComponent.propTypes = Icon.propTypes;
@@ -2,7 +2,9 @@ export { default as Audio } from './Audio';
2
2
  export { default as Code } from './Code';
3
3
  export { default as Image } from './Image';
4
4
  export { default as Pdf } from './Pdf';
5
+ export { default as Ppt } from './Ppt';
5
6
  export { default as Text } from './Text';
6
7
  export { default as Unknown } from './Unknown';
7
8
  export { default as Video } from './Video';
9
+ export { default as Xls } from './Xls';
8
10
  export { default as Zip } from './Zip';
@@ -0,0 +1,23 @@
1
+ /* eslint-disable */
2
+ import React from 'react';
3
+ import Icon from '@zohodesk/icon/es/Icon/Icon';
4
+ export default function IconComponent(props) {
5
+ return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
6
+ viewBox: "0 0 29 29",
7
+ fill: "none",
8
+ xmlns: "http://www.w3.org/2000/svg"
9
+ }, " ", /*#__PURE__*/React.createElement("path", {
10
+ d: "M6.79264 28.179C6.25485 28.1726 5.72811 28.0254 5.26489 27.752C4.80164 27.4789 4.41804 27.0891 4.15227 26.6215C3.8865 26.1539 3.74782 25.6248 3.75003 25.087C3.75225 24.5492 3.89527 24.0212 4.16488 23.5559L13.9607 7.09663C14.229 6.63566 14.6136 6.25317 15.076 5.9873C15.5385 5.72146 16.0626 5.58154 16.596 5.58154C17.1293 5.58154 17.6534 5.72146 18.1158 5.9873C18.5783 6.25317 18.9628 6.63566 19.2312 7.09663L29.0195 23.5634C29.2809 24.0231 29.4232 24.5408 29.4336 25.0693C29.4376 25.475 29.3613 25.8774 29.2092 26.2535C29.0573 26.6298 28.8324 26.9722 28.5476 27.2611C28.263 27.5501 27.9238 27.7799 27.5499 27.9375C27.1761 28.095 26.7748 28.1771 26.3691 28.179H6.79264ZM15.2557 7.84957L5.46747 24.3164C5.26169 24.6774 5.20635 25.1051 5.31343 25.5068C5.42052 25.9083 5.68143 26.2516 6.0397 26.4623C6.26775 26.5976 6.52749 26.6703 6.79264 26.6731H26.3691C26.7793 26.6575 27.1667 26.4813 27.4485 26.1829C27.7301 25.8844 27.8831 25.4872 27.875 25.0768C27.8722 24.8116 27.7995 24.552 27.6642 24.3239L17.9061 7.84957C17.7999 7.67397 17.6601 7.52104 17.4948 7.39959C17.3294 7.27813 17.1416 7.19054 16.9423 7.14181C16.7456 7.09174 16.5409 7.08193 16.3403 7.11299C16.1398 7.14403 15.9476 7.21531 15.7752 7.32251C15.5628 7.45463 15.3848 7.63527 15.2557 7.84957Z",
11
+ fill: "#AB1A18",
12
+ className: "path-0"
13
+ }), " ", /*#__PURE__*/React.createElement("path", {
14
+ d: "M16.5801 19.6704C16.3804 19.6704 16.1889 19.5911 16.0477 19.45C15.9065 19.3088 15.8271 19.1172 15.8271 18.9174V13.4512C15.8271 13.2515 15.9065 13.06 16.0477 12.9188C16.1889 12.7776 16.3804 12.6982 16.5801 12.6982C16.7798 12.6982 16.9713 12.7776 17.1125 12.9188C17.2537 13.06 17.333 13.2515 17.333 13.4512V18.9174C17.333 19.1172 17.2537 19.3088 17.1125 19.45C16.9713 19.5911 16.7798 19.6704 16.5801 19.6704Z",
15
+ fill: "#AB1A18",
16
+ className: "path-1"
17
+ }), " ", /*#__PURE__*/React.createElement("path", {
18
+ d: "M16.5801 23.5183C16.481 23.5189 16.3828 23.4999 16.291 23.4624C16.1993 23.4249 16.1159 23.3698 16.0455 23.3C15.9757 23.2296 15.9205 23.1462 15.883 23.0543C15.8456 22.9626 15.8266 22.8644 15.8272 22.7654C15.828 22.5677 15.9064 22.3785 16.0455 22.2383C16.1155 22.1677 16.1988 22.1116 16.2905 22.0734C16.3823 22.0352 16.4807 22.0156 16.5801 22.0156C16.6795 22.0156 16.7779 22.0352 16.8697 22.0734C16.9614 22.1116 17.0447 22.1677 17.1147 22.2383C17.2538 22.3785 17.3322 22.5677 17.333 22.7654C17.3312 22.8661 17.3107 22.9656 17.2728 23.059C17.2361 23.1488 17.1824 23.2305 17.1147 23.3C17.0443 23.3698 16.9609 23.4249 16.8692 23.4624C16.7774 23.4999 16.6792 23.5189 16.5801 23.5183Z",
19
+ fill: "#AB1A18",
20
+ className: "path-2"
21
+ }), " "));
22
+ }
23
+ IconComponent.propTypes = Icon.propTypes;
@@ -1,2 +1,3 @@
1
+ export { default as AlertTriangle } from './AlertTriangle';
1
2
  export { default as Article } from './Article';
2
3
  export { default as Reply } from './Reply';
@@ -20,7 +20,8 @@ const {
20
20
  WECHAT,
21
21
  TWILLIO,
22
22
  LINE,
23
- FACEBOOKMESSENGER
23
+ FACEBOOKMESSENGER,
24
+ INSTAGRAM
24
25
  } = integrationConstants;
25
26
  const fontIconMap = {
26
27
  [TWILLIO]: 'ZD-TT-imtwillio',
@@ -29,7 +30,8 @@ const fontIconMap = {
29
30
  [WECHAT]: 'ZD-TT-imWeChat',
30
31
  [LINE]: 'ZD-TT-imLine',
31
32
  [IM_TALK]: 'ZD-TT-imASAP',
32
- [FACEBOOKMESSENGER]: 'ZD-TT-fbMessanger'
33
+ [FACEBOOKMESSENGER]: 'ZD-TT-fbMessanger',
34
+ [INSTAGRAM]: 'ZD-TT-instagram'
33
35
  };
34
36
  export default function IMIntegrationIcon(props) {
35
37
  const {
@@ -36,9 +36,9 @@ export default function IMMessage(props) {
36
36
  replyText,
37
37
  seeMoreText,
38
38
  deleteMessageText,
39
- autoMessagesI18N,
40
- autoMessagesTitleI18N,
39
+ messageBubbleTitleI18N,
41
40
  messageStatusI18N,
41
+ messageMetaInfoI18N,
42
42
  onLoadFullMessage,
43
43
  onClickReply,
44
44
  onTicketClick,
@@ -79,6 +79,7 @@ export default function IMMessage(props) {
79
79
  isFailedMessage,
80
80
  isSendingMessage,
81
81
  messageStatusTitle,
82
+ isValidAttachment,
82
83
  dateTimeDetails,
83
84
  autoMessageType,
84
85
  // messageId,
@@ -99,14 +100,14 @@ export default function IMMessage(props) {
99
100
  tooltip
100
101
  } = dateTimeDetails || {};
101
102
  return /*#__PURE__*/React.createElement(IMMessageMeta, _extends({
102
- autoMessagesI18N: autoMessagesI18N,
103
- autoMessagesTitleI18N: autoMessagesTitleI18N,
104
103
  autoMessageType: autoMessageType,
105
104
  direction: direction,
105
+ isValidAttachment: isValidAttachment,
106
+ messageMetaInfoI18N: messageMetaInfoI18N,
106
107
  time: isShowMessageTime ? displayDateTime : '',
107
108
  timeTooltip: tooltip
108
109
  }, imMessageMetaProps));
109
- }, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, autoMessagesI18N, autoMessagesTitleI18N]);
110
+ }, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, isValidAttachment, messageMetaInfoI18N]);
110
111
  /** ** Render Message Content *** */
111
112
 
112
113
  const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, _extends({
@@ -114,6 +115,7 @@ export default function IMMessage(props) {
114
115
  isFailed: isFailedMessage,
115
116
  isSending: isSendingMessage,
116
117
  isShowFullContent: isShowFullContent,
118
+ messageBubbleTitleI18N: messageBubbleTitleI18N,
117
119
  messageContentClickMapping: messageContentClickMapping,
118
120
  messageDetails: messageDetails,
119
121
  onClickReply: onClickReply,
@@ -121,7 +123,7 @@ export default function IMMessage(props) {
121
123
  replyText: replyText,
122
124
  seeMoreText: seeMoreText,
123
125
  sessionDetails: sessionDetails
124
- }, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, messageContentClickMapping, onLoadFullMessage, onClickReply, isFailedMessage, isSendingMessage, imMessageContentProps, isShowFullContent]);
126
+ }, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, messageContentClickMapping, messageBubbleTitleI18N, onLoadFullMessage, onClickReply, isFailedMessage, isSendingMessage, imMessageContentProps, isShowFullContent]);
125
127
  /** ** Render Secondary Actions - TicketId *** */
126
128
 
127
129
  const handleRenderSecondaryActions = useCallback(() => {
@@ -6,6 +6,8 @@ const imMessageDefaultProps = {
6
6
  messageDetails: dummyObject,
7
7
  sessionDetails: dummyObject,
8
8
  messageStatusI18N: dummyObject,
9
+ messageBubbleTitleI18N: dummyObject,
10
+ messageMetaInfoI18N: dummyObject,
9
11
  customProps: dummyObject,
10
12
  customStyle: dummyObject,
11
13
  messageDisplayProps: dummyObject,
@@ -78,17 +78,26 @@ const imMessagePropTypes = {
78
78
  [SENT]: PropTypes.string,
79
79
  [UNSENT]: PropTypes.string
80
80
  }),
81
- autoMessagesI18N: PropTypes.shape({
82
- [UN_SUPPORTED_FILE]: PropTypes.string,
83
- [WELCOMEMSG]: PropTypes.string,
84
- [WORKFLOW_MESSAGE]: PropTypes.string,
85
- [WORKFLOW_NOTIFICATION]: PropTypes.string
81
+ messageBubbleTitleI18N: PropTypes.shape({
82
+ attachmentBubbleTitle: PropTypes.string
86
83
  }),
87
- autoMessagesTitleI18N: PropTypes.shape({
88
- [UN_SUPPORTED_FILE]: PropTypes.string,
89
- [WELCOMEMSG]: PropTypes.string,
90
- [WORKFLOW_MESSAGE]: PropTypes.string,
91
- [WORKFLOW_NOTIFICATION]: PropTypes.string
84
+ messageMetaInfoI18N: PropTypes.shape({
85
+ autoMessagesI18N: PropTypes.shape({
86
+ [UN_SUPPORTED_FILE]: PropTypes.string,
87
+ [WELCOMEMSG]: PropTypes.string,
88
+ [WORKFLOW_MESSAGE]: PropTypes.string,
89
+ [WORKFLOW_NOTIFICATION]: PropTypes.string
90
+ }),
91
+ autoMessagesTitleI18N: PropTypes.shape({
92
+ [UN_SUPPORTED_FILE]: PropTypes.string,
93
+ [WELCOMEMSG]: PropTypes.string,
94
+ [WORKFLOW_MESSAGE]: PropTypes.string,
95
+ [WORKFLOW_NOTIFICATION]: PropTypes.string
96
+ }),
97
+ restrictedAttachmentMetaInfo: PropTypes.shape({
98
+ info: PropTypes.string,
99
+ title: PropTypes.string
100
+ })
92
101
  }),
93
102
  actions: PropTypes.arrayOf(PropTypes.shape({
94
103
  displayText: PropTypes.string.isRequired,
@@ -41,6 +41,7 @@ export default function IMMessageContent(props) {
41
41
  isFailed,
42
42
  isSending,
43
43
  messageContentClickMapping,
44
+ messageBubbleTitleI18N,
44
45
  isShowFullContent
45
46
  } = props;
46
47
  const {
@@ -56,6 +57,9 @@ export default function IMMessageContent(props) {
56
57
  onImageBubbleClick,
57
58
  onAttachmentBubbleClick
58
59
  } = messageContentClickMapping;
60
+ const {
61
+ attachmentBubbleTitle
62
+ } = messageBubbleTitleI18N || dummyObject;
59
63
  const {
60
64
  isShowLayoutBubble,
61
65
  isShowReplyBubble,
@@ -102,6 +106,7 @@ export default function IMMessageContent(props) {
102
106
  audioDetails: attachmentDetails,
103
107
  isFailed: isFailed
104
108
  }, audioBubbleProps))) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(AttachmentBubble, _extends({
109
+ attachmentBubbleTitle: attachmentBubbleTitle,
105
110
  attachmentDetails: attachmentDetails,
106
111
  isFailed: isFailed,
107
112
  isSending: isSending,
@@ -3,6 +3,7 @@ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyCon
3
3
  const imMessageContentDefaultProps = {
4
4
  customStyle: dummyObject,
5
5
  customProps: dummyObject,
6
+ messageBubbleTitleI18N: dummyObject,
6
7
  messageContentClickMapping: dummyObject
7
8
  };
8
9
  export default imMessageContentDefaultProps;
@@ -28,6 +28,9 @@ const imMessageContentPropTypes = {
28
28
  }),
29
29
  onClick: PropTypes.func,
30
30
  messageContentClickMapping: PropTypes.object,
31
+ messageBubbleTitleI18N: PropTypes.shape({
32
+ attachmentBubbleTitle: PropTypes.string
33
+ }),
31
34
  onLoadFullMessage: PropTypes.func,
32
35
  onClickReply: PropTypes.func,
33
36
  seeMoreText: PropTypes.string,
@@ -5,6 +5,7 @@ import React from 'react';
5
5
  /** ** Hooks *** */
6
6
 
7
7
  import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
8
+ import useIMMessageMeta from '@zohoim/chat-components-hooks/es/im/IMMessageMeta/useIMMessageMeta';
8
9
  /** ** Constants *** */
9
10
 
10
11
  import imMessageMetaDefaultProps from './props/defaultProps';
@@ -19,21 +20,29 @@ import style from './css/IMMessageMeta.module.css';
19
20
  /** ** Components *** */
20
21
 
21
22
  import { Container } from '@zohodesk/components/es/Layout';
22
- import IMAutoMessageInfo from '../IMAutoMessageInfo/IMAutoMessageInfo';
23
+ import IMMessageMetaInfo from '../IMMessageMetaInfo/IMMessageMetaInfo';
23
24
  export default function IMMessageMeta(props) {
24
25
  const {
25
26
  direction,
26
27
  customStyle,
27
28
  time,
28
29
  timeTooltip,
30
+ messageMetaInfoI18N,
29
31
  autoMessageType,
30
- autoMessagesI18N,
31
- autoMessagesTitleI18N,
32
+ isValidAttachment,
32
33
  customProps
33
34
  } = props;
34
35
  const {
35
- imAutoMessageInfoProps = dummyObject
36
+ imMessageMetaInfoProps = dummyObject
36
37
  } = customProps;
38
+ const {
39
+ imMessageMetaInfoTitle,
40
+ imMessageMetaInfoContent
41
+ } = useIMMessageMeta({
42
+ messageMetaInfoI18N,
43
+ autoMessageType,
44
+ isValidAttachment
45
+ });
37
46
  /* External CSS Customization */
38
47
 
39
48
  const newStyle = useMergeStyle(style, customStyle);
@@ -45,19 +54,18 @@ export default function IMMessageMeta(props) {
45
54
  } = cssJSLogic({
46
55
  direction
47
56
  }, newStyle);
48
- return /*#__PURE__*/React.createElement(React.Fragment, null, autoMessageType || time ? /*#__PURE__*/React.createElement(Container, {
57
+ return /*#__PURE__*/React.createElement(React.Fragment, null, imMessageMetaInfoContent || time ? /*#__PURE__*/React.createElement(Container, {
49
58
  alignBox: "row",
50
59
  className: imMessageMetaClass
51
- }, autoMessageType ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IMAutoMessageInfo, _extends({
52
- autoMessagesI18N: autoMessagesI18N,
53
- autoMessagesTitleI18N: autoMessagesTitleI18N,
54
- autoMessageType: autoMessageType
55
- }, imAutoMessageInfoProps))) : null, time ? /*#__PURE__*/React.createElement(React.Fragment, null, autoMessageType ? /*#__PURE__*/React.createElement("div", {
60
+ }, imMessageMetaInfoContent ? /*#__PURE__*/React.createElement(IMMessageMetaInfo, _extends({
61
+ imMessageMetaInfoContent: imMessageMetaInfoContent,
62
+ imMessageMetaInfoTitle: imMessageMetaInfoTitle
63
+ }, imMessageMetaInfoProps)) : null, imMessageMetaInfoContent && time ? /*#__PURE__*/React.createElement("div", {
56
64
  className: dotClass
57
- }, "\u22C5") : null, /*#__PURE__*/React.createElement("div", {
65
+ }, "\u22C5") : null, time ? /*#__PURE__*/React.createElement("div", {
58
66
  className: newStyle.dateTime,
59
67
  "data-title": timeTooltip
60
- }, time)) : null) : null);
68
+ }, time) : null) : null);
61
69
  }
62
70
  IMMessageMeta.propTypes = imMessageMetaPropTypes;
63
71
  IMMessageMeta.defaultProps = imMessageMetaDefaultProps;
@@ -10,6 +10,11 @@
10
10
  margin-top: var(--imMessageMeta-gap);
11
11
  }
12
12
 
13
+ .imMessageMetaIncoming {
14
+ flex-direction: row-reverse;
15
+ justify-content: flex-end;
16
+ }
17
+
13
18
  .dot {
14
19
  composes: varClass;
15
20
  margin: 0 var(--imMessageMeta-separator_gap);
@@ -36,6 +41,6 @@
36
41
  /* max-width: 100px; */
37
42
  /* display: flex; */
38
43
  max-width: var(--zd_size100) ;
39
- composes: dotted from "../../css/common.module.css";
44
+ composes: dotted from '../../css/common.module.css';
40
45
  color: var(--imlib_chat_components_imMessageMeta_time_color);
41
46
  }
@@ -15,6 +15,7 @@ export default function cssJSLogic(props, style) {
15
15
  });
16
16
  const imMessageMetaClass = compileClassNames({
17
17
  [style.imMessageMeta]: true,
18
+ [style.imMessageMetaIncoming]: isIncoming,
18
19
  [style.leftTime]: isIncoming,
19
20
  [style.rightTime]: isOutgoing
20
21
  });
@@ -4,7 +4,8 @@ import { direction as directionConstants } from '@zohoim/chat-components-utils/e
4
4
  const imMessageMetaDefaultProps = {
5
5
  customStyle: dummyObject,
6
6
  customProps: dummyObject,
7
- autoMessageCustomStyle: dummyObject,
7
+ messageMetaInfoI18N: dummyObject,
8
+ isValidAttachment: true,
8
9
  direction: directionConstants.IN
9
10
  };
10
11
  export default imMessageMetaDefaultProps;
@@ -13,21 +13,28 @@ const {
13
13
  const imMessageMetaPropTypes = {
14
14
  direction: PropTypes.oneOf(Object.values(direction)).isRequired,
15
15
  time: PropTypes.string.isRequired,
16
+ isValidAttachment: PropTypes.bool,
16
17
  autoMessageType: PropTypes.oneOf(Object.values(autoMessageTypes)),
17
- autoMessagesI18N: PropTypes.shape({
18
- [UN_SUPPORTED_FILE]: PropTypes.string,
19
- [WELCOMEMSG]: PropTypes.string,
20
- [WORKFLOW_MESSAGE]: PropTypes.string,
21
- [WORKFLOW_NOTIFICATION]: PropTypes.string
22
- }),
23
- autoMessagesTitleI18N: PropTypes.shape({
24
- [UN_SUPPORTED_FILE]: PropTypes.string,
25
- [WELCOMEMSG]: PropTypes.string,
26
- [WORKFLOW_MESSAGE]: PropTypes.string,
27
- [WORKFLOW_NOTIFICATION]: PropTypes.string
18
+ messageMetaInfoI18N: PropTypes.shape({
19
+ autoMessagesI18N: PropTypes.shape({
20
+ [UN_SUPPORTED_FILE]: PropTypes.string,
21
+ [WELCOMEMSG]: PropTypes.string,
22
+ [WORKFLOW_MESSAGE]: PropTypes.string,
23
+ [WORKFLOW_NOTIFICATION]: PropTypes.string
24
+ }),
25
+ autoMessagesTitleI18N: PropTypes.shape({
26
+ [UN_SUPPORTED_FILE]: PropTypes.string,
27
+ [WELCOMEMSG]: PropTypes.string,
28
+ [WORKFLOW_MESSAGE]: PropTypes.string,
29
+ [WORKFLOW_NOTIFICATION]: PropTypes.string
30
+ }),
31
+ restrictedAttachmentMetaInfo: PropTypes.shape({
32
+ info: PropTypes.string,
33
+ title: PropTypes.string
34
+ })
28
35
  }),
29
36
  customProps: PropTypes.shape({
30
- imAutoMessageInfoProps: PropTypes.object
37
+ imMessageMetaInfoProps: PropTypes.object
31
38
  }),
32
39
  customStyle: PropTypes.object,
33
40
  timeTooltip: PropTypes.string
@@ -0,0 +1,29 @@
1
+ /** ** Libraries *** */
2
+ import React from 'react';
3
+ /** ** Hooks *** */
4
+
5
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
6
+ /** ** Constants *** */
7
+
8
+ import imMessageMetaInfoDefaultProps from './props/defaultProps';
9
+ import imMessageMetaInfoPropTypes from './props/propTypes';
10
+ /** ** Styles *** */
11
+
12
+ import style from './css/IMMessageMetaInfo.module.css';
13
+ export default function IMMessageMetaInfo(props) {
14
+ const {
15
+ imMessageMetaInfoTitle,
16
+ imMessageMetaInfoContent,
17
+ customStyle
18
+ } = props;
19
+ /* External CSS Customization */
20
+
21
+ const newStyle = useMergeStyle(style, customStyle);
22
+ return /*#__PURE__*/React.createElement("div", {
23
+ className: newStyle.imMessageMetaInfo,
24
+ "data-title": imMessageMetaInfoTitle
25
+ }, imMessageMetaInfoContent);
26
+ }
27
+ IMMessageMetaInfo.propTypes = imMessageMetaInfoPropTypes;
28
+ IMMessageMetaInfo.defaultProps = imMessageMetaInfoDefaultProps;
29
+ IMMessageMetaInfo.displayName = 'IMMessageMetaInfo';
@@ -0,0 +1,14 @@
1
+ .varClass {
2
+ --imMessageMetaInfo-font_size: var(--zd_font_size13);
3
+ --imMessageMetaInfo-max_width: var(--zd_size150);
4
+ --imMessageMetaInfo-letter_spacing: 0.2px;
5
+ }
6
+
7
+ .imMessageMetaInfo {
8
+ composes: varClass;
9
+ composes: dotted from '../../../css/common.module.css';
10
+ font-size: var(--imMessageMetaInfo-font_size);
11
+ letter-spacing: var(--imMessageMetaInfo-letter_spacing);
12
+ max-width: var(--imMessageMetaInfo-max_width);
13
+ color: var(--imlib_chat_components_imAutoMessageInfo_text_color);
14
+ }
@@ -0,0 +1 @@
1
+ export { default as IMMessageMetaInfo } from './IMMessageMetaInfo';
@@ -0,0 +1,8 @@
1
+ /** ** Constants *** */
2
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
+ const imMessageMetaInfoDefaultProps = {
4
+ imMessageMetaInfoTitle: '',
5
+ imMessageMetaInfoContent: '',
6
+ customStyle: dummyObject
7
+ };
8
+ export default imMessageMetaInfoDefaultProps;
@@ -0,0 +1,8 @@
1
+ /** ** Libraries *** */
2
+ import PropTypes from 'prop-types';
3
+ const imMessageMetaInfoPropTypes = {
4
+ imMessageMetaInfoTitle: PropTypes.string,
5
+ imMessageMetaInfoContent: PropTypes.string,
6
+ customStyle: PropTypes.object
7
+ };
8
+ export default imMessageMetaInfoPropTypes;
package/es/im/index.js CHANGED
@@ -2,7 +2,7 @@ export * from './IMIntegrationIcon';
2
2
  export * from './IMMessage';
3
3
  export * from './IMPermaLink';
4
4
  export * from './IMMessageMeta';
5
- export * from './IMAutoMessageInfo';
5
+ export * from './IMMessageMetaInfo';
6
6
  export * from './IMMessageContent';
7
7
  export * from './IMTextBubble';
8
8
  export * from './IMReplyBubble';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohoim/chat-components",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Chat Components",
5
5
  "main": "es/index.js",
6
6
  "module": "es/index.js",
@@ -36,8 +36,8 @@
36
36
  "@zohodesk/utils": "1.3.13",
37
37
  "@zohodesk/variables": "1.0.0",
38
38
  "@zohodesk/virtualizer": "1.0.13",
39
- "@zohoim/chat-components-hooks": "^1.0.0",
40
- "@zohoim/chat-components-utils": "^1.0.0"
39
+ "@zohoim/chat-components-hooks": "^1.0.1",
40
+ "@zohoim/chat-components-utils": "^1.0.1"
41
41
  },
42
42
  "devDependencies": {
43
43
  "@zohodesk-private/css-variable-migrator": "1.0.7",
@@ -45,5 +45,5 @@
45
45
  "jsdom": "23.0.0",
46
46
  "react-to-jsx": "1.3.2"
47
47
  },
48
- "gitHead": "64607512a17d6309b5f77effc85e1e4bd88c7c8c"
48
+ "gitHead": "6a0a48d7d71d085fe7db2eb9281b407a00294506"
49
49
  }
@@ -1,32 +0,0 @@
1
- /** ** Libraries *** */
2
- import React from 'react';
3
- /** ** Hooks *** */
4
-
5
- import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
6
- /** ** Constants *** */
7
-
8
- import imAutoMessageInfoDefaultProps from './props/defaultProps';
9
- import imAutoMessageInfoPropTypes from './props/propTypes';
10
- /** ** Styles *** */
11
-
12
- import style from './css/IMAutoMessageInfo.module.css';
13
- export default function IMAutoMessageInfo(props) {
14
- const {
15
- autoMessageType,
16
- autoMessagesI18N,
17
- autoMessagesTitleI18N,
18
- customStyle
19
- } = props;
20
- /* External CSS Customization */
21
-
22
- const newStyle = useMergeStyle(style, customStyle);
23
- const autoMessageContent = autoMessagesI18N[autoMessageType] || '';
24
- const autoMessageTitle = autoMessagesTitleI18N[autoMessageType] || '';
25
- return autoMessageContent ? /*#__PURE__*/React.createElement("div", {
26
- className: newStyle.imAutoMessageInfo,
27
- "data-title": autoMessageTitle
28
- }, autoMessageContent) : null;
29
- }
30
- IMAutoMessageInfo.propTypes = imAutoMessageInfoPropTypes;
31
- IMAutoMessageInfo.defaultProps = imAutoMessageInfoDefaultProps;
32
- IMAutoMessageInfo.displayName = 'IMAutoMessageInfo';
@@ -1,13 +0,0 @@
1
- .varClass {
2
- --imAutoMessageInfo-font_size: var(--zd_font_size13);
3
- --imAutoMessageInfo-max_width: var(--zd_size100);
4
- --imAutoMessageInfo-letter_spacing: 0.2px;
5
- }
6
-
7
- .imAutoMessageInfo {
8
- composes: varClass;
9
- font-size: var(--imAutoMessageInfo-font_size);
10
- letter-spacing: var(--imAutoMessageInfo-letter_spacing);
11
- max-width: var(--imAutoMessageInfo-max_width);
12
- color: var(--imlib_chat_components_imAutoMessageInfo_text_color);
13
- }
@@ -1 +0,0 @@
1
- export { default as IMAutoMessageInfo } from './IMAutoMessageInfo';
@@ -1,6 +0,0 @@
1
- /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
- const imAutoMessageInfoDefaultProps = {
4
- customStyle: dummyObject
5
- };
6
- export default imAutoMessageInfoDefaultProps;
@@ -1,28 +0,0 @@
1
- /** ** Libraries *** */
2
- import PropTypes from 'prop-types';
3
- /** ** Constants *** */
4
-
5
- import autoMessageTypes from '@zohoim/chat-components-utils/es/imUtils/constants/autoMessageTypes';
6
- const {
7
- WELCOMEMSG,
8
- WORKFLOW_MESSAGE,
9
- WORKFLOW_NOTIFICATION,
10
- UN_SUPPORTED_FILE
11
- } = autoMessageTypes;
12
- const imAutoMessageInfoPropTypes = {
13
- autoMessageType: PropTypes.oneOf(Object.values(autoMessageTypes)).isRequired,
14
- autoMessagesI18N: PropTypes.shape({
15
- [UN_SUPPORTED_FILE]: PropTypes.string,
16
- [WELCOMEMSG]: PropTypes.string,
17
- [WORKFLOW_MESSAGE]: PropTypes.string,
18
- [WORKFLOW_NOTIFICATION]: PropTypes.string
19
- }).isRequired,
20
- autoMessagesTitleI18N: PropTypes.shape({
21
- [UN_SUPPORTED_FILE]: PropTypes.string,
22
- [WELCOMEMSG]: PropTypes.string,
23
- [WORKFLOW_MESSAGE]: PropTypes.string,
24
- [WORKFLOW_NOTIFICATION]: PropTypes.string
25
- }).isRequired,
26
- customStyle: PropTypes.object
27
- };
28
- export default imAutoMessageInfoPropTypes;