@zohoim/chat-components 0.0.8 → 0.0.11

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 (194) hide show
  1. package/es/ArticleBubble/ArticleBubble.js +19 -11
  2. package/es/ArticleBubble/css/ArticleBubble.module.css +39 -0
  3. package/es/AttachmentBubble/AttachmentBubble.js +12 -11
  4. package/es/AttachmentBubble/css/AttachmentBubble.module.css +12 -5
  5. package/es/AttachmentBubbleInfo/css/AttachmentBubbleInfo.module.css +9 -2
  6. package/es/Audio/css/Audio.module.css +4 -0
  7. package/es/AudioBubble/css/AudioBubble.module.css +1 -1
  8. package/es/Fonts/puviFont.module.css +61 -0
  9. package/es/LocationBubble/LocationBubble.js +17 -12
  10. package/es/LocationBubble/css/LocationBubble.module.css +33 -0
  11. package/es/Message/Message.js +3 -3
  12. package/es/MessageActionsMore/css/MessageActionsMore.module.css +1 -0
  13. package/es/MessageAvatar/css/MessageAvatar.module.css +3 -3
  14. package/es/MessageBox/css/MessageBox.module.css +5 -2
  15. package/es/MoreActionItem/MoreActionItem.js +1 -0
  16. package/es/MoreActionItem/css/MoreActionItem.module.css +4 -0
  17. package/es/ReplyBubble/ReplyBubble.js +18 -2
  18. package/es/ReplyBubble/props/defaultProps.js +4 -1
  19. package/es/ReplyBubble/props/propTypes.js +9 -1
  20. package/es/ReplyBubbleContent/ReplyBubbleContent.js +56 -0
  21. package/es/ReplyBubbleContent/css/ReplyBubbleContent.module.css +50 -0
  22. package/es/ReplyBubbleContent/css/cssJSLogic.js +22 -0
  23. package/es/ReplyBubbleContent/index.js +1 -0
  24. package/es/ReplyBubbleContent/props/defaultProps.js +6 -0
  25. package/es/ReplyBubbleContent/props/propTypes.js +9 -0
  26. package/es/ReplyBubbleHeader/ReplyBubbleHeader.js +6 -2
  27. package/es/ReplyBubbleHeader/css/ReplyBubbleHeader.module.css +4 -0
  28. package/es/ReplyBubbleHeader/props/defaultProps.js +1 -1
  29. package/es/TextBubble/TextBubble.js +10 -10
  30. package/es/TextBubble/css/TextBubble.module.css +5 -1
  31. package/es/Theme/ThemeWrapper.js +25 -19
  32. package/es/Theme/desk/commonDeskColorVariable.js +3 -1
  33. package/es/Theme/desk/dark/blueTheme.js +23 -11
  34. package/es/Theme/desk/dark/commonColorVariable.js +5 -5
  35. package/es/Theme/desk/dark/greenTheme.js +22 -11
  36. package/es/Theme/desk/dark/orangeTheme.js +13 -2
  37. package/es/Theme/desk/dark/redTheme.js +22 -11
  38. package/es/Theme/desk/dark/yellowTheme.js +22 -11
  39. package/es/Theme/desk/light/blueTheme.js +25 -12
  40. package/es/Theme/desk/light/commonColorVariable.js +2 -1
  41. package/es/Theme/desk/light/greenTheme.js +9 -2
  42. package/es/Theme/desk/light/orangeTheme.js +17 -10
  43. package/es/Theme/desk/light/redTheme.js +17 -10
  44. package/es/Theme/desk/light/yellowTheme.js +17 -10
  45. package/es/Theme/desk/pureDark/blueTheme.js +21 -10
  46. package/es/Theme/desk/pureDark/commonColorVariable.js +2 -1
  47. package/es/Theme/desk/pureDark/greenTheme.js +21 -10
  48. package/es/Theme/desk/pureDark/orangeTheme.js +21 -10
  49. package/es/Theme/desk/pureDark/redTheme.js +21 -10
  50. package/es/Theme/desk/pureDark/yellowTheme.js +21 -10
  51. package/es/VideoBubble/css/VideoBubble.module.css +1 -1
  52. package/es/icons/factory/common/article.svg +4 -0
  53. package/es/icons/factory/common/quote.svg +1 -0
  54. package/es/icons/iconSrc/common/Article.js +17 -0
  55. package/es/icons/iconSrc/common/Quote.js +16 -0
  56. package/es/icons/iconSrc/common/index.js +2 -0
  57. package/es/{IMArticleBubble → im/IMArticleBubble}/IMArticleBubble.js +2 -2
  58. package/es/{IMAttachmentBubble → im/IMAttachmentBubble}/IMAttachmentBubble.js +2 -2
  59. package/es/{IMAttachmentIcon → im/IMAttachmentIcon}/IMAttachmentIcon.js +17 -17
  60. package/es/{IMAudioBubble → im/IMAudioBubble}/IMAudioBubble.js +2 -2
  61. package/es/im/IMAudioBubble/css/IMAudioBubble.module.css +8 -0
  62. package/es/{IMAutoMessageInfo → im/IMAutoMessageInfo}/IMAutoMessageInfo.js +1 -1
  63. package/es/{IMDateTime → im/IMDateTime}/IMDateTime.js +1 -1
  64. package/es/im/IMDateTime/css/IMDateTime.module.css +5 -0
  65. package/es/{IMImageBubble → im/IMImageBubble}/IMImageBubble.js +2 -2
  66. package/es/{IMIntegrationIcon → im/IMIntegrationIcon}/IMIntegrationIcon.js +7 -7
  67. package/es/{IMLocationBubble → im/IMLocationBubble}/IMLocationBubble.js +2 -2
  68. package/es/{IMMessage → im/IMMessage}/IMMessage.js +18 -12
  69. package/es/{IMMessage → im/IMMessage}/props/propTypes.js +9 -6
  70. package/es/{IMMessageActions → im/IMMessageActions}/IMMessageActions.js +5 -5
  71. package/es/{IMMessageActions → im/IMMessageActions}/css/IMMessageActions.module.css +8 -0
  72. package/es/{IMMessageAvatar → im/IMMessageAvatar}/IMMessageAvatar.js +1 -1
  73. package/es/{IMMessageContent → im/IMMessageContent}/IMMessageContent.js +27 -22
  74. package/es/{IMMessageContent → im/IMMessageContent}/props/propTypes.js +3 -1
  75. package/es/{IMMessageStatus → im/IMMessageStatus}/IMMessageStatus.js +4 -4
  76. package/es/im/IMReplyBubble/IMReplyBubble.js +87 -0
  77. package/es/im/IMReplyBubble/css/IMReplyBubble.module.css +24 -0
  78. package/es/im/IMReplyBubble/props/defaultProps.js +9 -0
  79. package/es/im/IMReplyBubble/props/propTypes.js +22 -0
  80. package/es/{IMTextBubble → im/IMTextBubble}/IMTextBubble.js +4 -3
  81. package/es/{IMTicketLink → im/IMTicketLink}/IMTicketLink.js +1 -1
  82. package/es/{IMTicketLink → im/IMTicketLink}/css/IMTicketLink.module.css +4 -1
  83. package/es/{IMVideoBubble → im/IMVideoBubble}/IMVideoBubble.js +2 -2
  84. package/es/im/index.js +20 -0
  85. package/es/index.js +31 -49
  86. package/package.json +4 -4
  87. package/es/IMAudioBubble/css/IMAudioBubble.module.css +0 -8
  88. package/es/IMDateTime/css/IMDateTime.module.css +0 -5
  89. package/es/IMReplyBubble/IMReplyBubble.js +0 -37
  90. package/es/IMReplyBubble/css/IMReplyBubble.module.css +0 -0
  91. package/es/IMReplyBubble/props/defaultProps.js +0 -6
  92. package/es/IMReplyBubble/props/propTypes.js +0 -6
  93. /package/es/{IMArticleBubble → im/IMArticleBubble}/css/IMArticleBubble.module.css +0 -0
  94. /package/es/{IMArticleBubble → im/IMArticleBubble}/css/cssJSLogic.js +0 -0
  95. /package/es/{IMArticleBubble → im/IMArticleBubble}/index.js +0 -0
  96. /package/es/{IMArticleBubble → im/IMArticleBubble}/props/defaultProps.js +0 -0
  97. /package/es/{IMArticleBubble → im/IMArticleBubble}/props/propTypes.js +0 -0
  98. /package/es/{IMAttachmentBubble → im/IMAttachmentBubble}/css/IMAttachmentBubble.module.css +0 -0
  99. /package/es/{IMAttachmentBubble → im/IMAttachmentBubble}/css/cssJSLogic.js +0 -0
  100. /package/es/{IMAttachmentBubble → im/IMAttachmentBubble}/index.js +0 -0
  101. /package/es/{IMAttachmentBubble → im/IMAttachmentBubble}/props/defaultProps.js +0 -0
  102. /package/es/{IMAttachmentBubble → im/IMAttachmentBubble}/props/propTypes.js +0 -0
  103. /package/es/{IMAttachmentIcon → im/IMAttachmentIcon}/css/IMAttachmentIcon.module.css +0 -0
  104. /package/es/{IMAttachmentIcon → im/IMAttachmentIcon}/css/cssJSLogic.js +0 -0
  105. /package/es/{IMAttachmentIcon → im/IMAttachmentIcon}/index.js +0 -0
  106. /package/es/{IMAttachmentIcon → im/IMAttachmentIcon}/props/defaultProps.js +0 -0
  107. /package/es/{IMAttachmentIcon → im/IMAttachmentIcon}/props/propTypes.js +0 -0
  108. /package/es/{IMAudioBubble → im/IMAudioBubble}/css/cssJSLogic.js +0 -0
  109. /package/es/{IMAudioBubble → im/IMAudioBubble}/index.js +0 -0
  110. /package/es/{IMAudioBubble → im/IMAudioBubble}/props/defaultProps.js +0 -0
  111. /package/es/{IMAudioBubble → im/IMAudioBubble}/props/propTypes.js +0 -0
  112. /package/es/{IMAutoMessageInfo → im/IMAutoMessageInfo}/css/IMAutoMessageInfo.module.css +0 -0
  113. /package/es/{IMAutoMessageInfo → im/IMAutoMessageInfo}/css/cssJSLogic.js +0 -0
  114. /package/es/{IMAutoMessageInfo → im/IMAutoMessageInfo}/index.js +0 -0
  115. /package/es/{IMAutoMessageInfo → im/IMAutoMessageInfo}/props/defaultProps.js +0 -0
  116. /package/es/{IMAutoMessageInfo → im/IMAutoMessageInfo}/props/propTypes.js +0 -0
  117. /package/es/{IMDateTime → im/IMDateTime}/css/cssJSLogic.js +0 -0
  118. /package/es/{IMDateTime → im/IMDateTime}/index.js +0 -0
  119. /package/es/{IMDateTime → im/IMDateTime}/props/defaultProps.js +0 -0
  120. /package/es/{IMDateTime → im/IMDateTime}/props/propTypes.js +0 -0
  121. /package/es/{IMImageBubble → im/IMImageBubble}/css/IMImageBubble.module.css +0 -0
  122. /package/es/{IMImageBubble → im/IMImageBubble}/css/cssJSLogic.js +0 -0
  123. /package/es/{IMImageBubble → im/IMImageBubble}/index.js +0 -0
  124. /package/es/{IMImageBubble → im/IMImageBubble}/props/defaultProps.js +0 -0
  125. /package/es/{IMImageBubble → im/IMImageBubble}/props/propTypes.js +0 -0
  126. /package/es/{IMInfoBubble → im/IMInfoBubble}/IMInfoBubble.js +0 -0
  127. /package/es/{IMInfoBubble → im/IMInfoBubble}/css/IMInfoBubble.module.css +0 -0
  128. /package/es/{IMInfoBubble → im/IMInfoBubble}/css/cssJSLogic.js +0 -0
  129. /package/es/{IMInfoBubble → im/IMInfoBubble}/index.js +0 -0
  130. /package/es/{IMInfoBubble → im/IMInfoBubble}/props/defaultProps.js +0 -0
  131. /package/es/{IMInfoBubble → im/IMInfoBubble}/props/propTypes.js +0 -0
  132. /package/es/{IMIntegrationIcon → im/IMIntegrationIcon}/css/IMIntegrationIcon.module.css +0 -0
  133. /package/es/{IMIntegrationIcon → im/IMIntegrationIcon}/css/cssJSLogic.js +0 -0
  134. /package/es/{IMIntegrationIcon → im/IMIntegrationIcon}/index.js +0 -0
  135. /package/es/{IMIntegrationIcon → im/IMIntegrationIcon}/props/defaultProps.js +0 -0
  136. /package/es/{IMIntegrationIcon → im/IMIntegrationIcon}/props/propConstants.js +0 -0
  137. /package/es/{IMIntegrationIcon → im/IMIntegrationIcon}/props/propTypes.js +0 -0
  138. /package/es/{IMLocationBubble → im/IMLocationBubble}/css/IMLocationBubble.module.css +0 -0
  139. /package/es/{IMLocationBubble → im/IMLocationBubble}/css/cssJSLogic.js +0 -0
  140. /package/es/{IMLocationBubble → im/IMLocationBubble}/index.js +0 -0
  141. /package/es/{IMLocationBubble → im/IMLocationBubble}/props/defaultProps.js +0 -0
  142. /package/es/{IMLocationBubble → im/IMLocationBubble}/props/propTypes.js +0 -0
  143. /package/es/{IMMessage → im/IMMessage}/css/IMMessage.module.css +0 -0
  144. /package/es/{IMMessage → im/IMMessage}/css/cssJSLogic.js +0 -0
  145. /package/es/{IMMessage → im/IMMessage}/index.js +0 -0
  146. /package/es/{IMMessage → im/IMMessage}/props/defaultProps.js +0 -0
  147. /package/es/{IMMessage → im/IMMessage}/renderChild/renderMessage.js +0 -0
  148. /package/es/{IMMessage → im/IMMessage}/renderChild/renderMessageActions.js +0 -0
  149. /package/es/{IMMessage → im/IMMessage}/renderChild/renderMessageBox.js +0 -0
  150. /package/es/{IMMessage → im/IMMessage}/renderChild/renderMessageBoxFooter.js +0 -0
  151. /package/es/{IMMessage → im/IMMessage}/renderChild/renderMessageFooter.js +0 -0
  152. /package/es/{IMMessage → im/IMMessage}/renderChild/renderMessageHeader.js +0 -0
  153. /package/es/{IMMessage → im/IMMessage}/renderChild/renderMessageOwner.js +0 -0
  154. /package/es/{IMMessage → im/IMMessage}/renderChild/renderMessageStatus.js +0 -0
  155. /package/es/{IMMessageActions → im/IMMessageActions}/css/cssJSLogic.js +0 -0
  156. /package/es/{IMMessageActions → im/IMMessageActions}/index.js +0 -0
  157. /package/es/{IMMessageActions → im/IMMessageActions}/props/defaultProps.js +0 -0
  158. /package/es/{IMMessageActions → im/IMMessageActions}/props/propTypes.js +0 -0
  159. /package/es/{IMMessageAvatar → im/IMMessageAvatar}/css/IMMessageAvatar.module.css +0 -0
  160. /package/es/{IMMessageAvatar → im/IMMessageAvatar}/css/cssJSLogic.js +0 -0
  161. /package/es/{IMMessageAvatar → im/IMMessageAvatar}/index.js +0 -0
  162. /package/es/{IMMessageAvatar → im/IMMessageAvatar}/props/defaultProps.js +0 -0
  163. /package/es/{IMMessageAvatar → im/IMMessageAvatar}/props/propTypes.js +0 -0
  164. /package/es/{IMMessageContent → im/IMMessageContent}/css/IMMessageContent.module.css +0 -0
  165. /package/es/{IMMessageContent → im/IMMessageContent}/css/cssJSLogic.js +0 -0
  166. /package/es/{IMMessageContent → im/IMMessageContent}/index.js +0 -0
  167. /package/es/{IMMessageContent → im/IMMessageContent}/props/defaultProps.js +0 -0
  168. /package/es/{IMMessageMeta → im/IMMessageMeta}/IMMessageMeta.js +0 -0
  169. /package/es/{IMMessageMeta → im/IMMessageMeta}/css/IMMessageMeta.module.css +0 -0
  170. /package/es/{IMMessageMeta → im/IMMessageMeta}/css/cssJSLogic.js +0 -0
  171. /package/es/{IMMessageMeta → im/IMMessageMeta}/index.js +0 -0
  172. /package/es/{IMMessageMeta → im/IMMessageMeta}/props/defaultProps.js +0 -0
  173. /package/es/{IMMessageMeta → im/IMMessageMeta}/props/propTypes.js +0 -0
  174. /package/es/{IMMessageStatus → im/IMMessageStatus}/css/IMMessageStatus.module.css +0 -0
  175. /package/es/{IMMessageStatus → im/IMMessageStatus}/css/cssJSLogic.js +0 -0
  176. /package/es/{IMMessageStatus → im/IMMessageStatus}/index.js +0 -0
  177. /package/es/{IMMessageStatus → im/IMMessageStatus}/props/defaultProps.js +0 -0
  178. /package/es/{IMMessageStatus → im/IMMessageStatus}/props/propTypes.js +0 -0
  179. /package/es/{IMReplyBubble → im/IMReplyBubble}/css/cssJSLogic.js +0 -0
  180. /package/es/{IMReplyBubble → im/IMReplyBubble}/index.js +0 -0
  181. /package/es/{IMTextBubble → im/IMTextBubble}/css/IMTextBubble.module.css +0 -0
  182. /package/es/{IMTextBubble → im/IMTextBubble}/css/cssJSLogic.js +0 -0
  183. /package/es/{IMTextBubble → im/IMTextBubble}/index.js +0 -0
  184. /package/es/{IMTextBubble → im/IMTextBubble}/props/defaultProps.js +0 -0
  185. /package/es/{IMTextBubble → im/IMTextBubble}/props/propTypes.js +0 -0
  186. /package/es/{IMTicketLink → im/IMTicketLink}/css/cssJSLogic.js +0 -0
  187. /package/es/{IMTicketLink → im/IMTicketLink}/index.js +0 -0
  188. /package/es/{IMTicketLink → im/IMTicketLink}/props/defaultProps.js +0 -0
  189. /package/es/{IMTicketLink → im/IMTicketLink}/props/propTypes.js +0 -0
  190. /package/es/{IMVideoBubble → im/IMVideoBubble}/css/IMVideoBubble.module.css +0 -0
  191. /package/es/{IMVideoBubble → im/IMVideoBubble}/css/cssJSLogic.js +0 -0
  192. /package/es/{IMVideoBubble → im/IMVideoBubble}/index.js +0 -0
  193. /package/es/{IMVideoBubble → im/IMVideoBubble}/props/defaultProps.js +0 -0
  194. /package/es/{IMVideoBubble → im/IMVideoBubble}/props/propTypes.js +0 -0
@@ -1,10 +1,10 @@
1
1
  /** ** Libraries *** */
2
- import PropTypes from 'prop-types';
2
+ import PropTypes from "prop-types";
3
3
 
4
4
  /** ** Constants *** */
5
- import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
6
- import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
7
- import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
5
+ import { defaultMessageActions } from "@zohoim/chat-components-utils/es/constants/messageActionConstants";
6
+ import messageStatusConstants from "@zohoim/chat-components-utils/es/constants/messageStatusConstants";
7
+ import sizes from "@zohoim/chat-components-utils/es/constants/sizes";
8
8
  const {
9
9
  REPLY,
10
10
  COPY,
@@ -121,7 +121,7 @@ const imMessagePropTypes = {
121
121
  messageBubbleCustomStyle: PropTypes.object,
122
122
  needMessageActions: PropTypes.bool,
123
123
  needSender: PropTypes.bool,
124
- senderAvatarSize: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
124
+ senderAvatarSize: PropTypes.oneOf(["xxsmall", "small", "xsmall", "medium", "xmedium", "large", "xlarge"]),
125
125
  avatarCustomStyle: PropTypes.object,
126
126
  senderIntegrationIconSize: PropTypes.oneOf([sizes.SMALL, sizes.MEDIUM]),
127
127
  senderIntegrationIconCustomStyle: PropTypes.object,
@@ -140,6 +140,9 @@ const imMessagePropTypes = {
140
140
  moreActionItemCustomStyle: PropTypes.object,
141
141
  messageActionCustomStyle: PropTypes.object,
142
142
  moreActionPopupCustomStyle: PropTypes.object,
143
- messageStatusCustomStyle: PropTypes.object
143
+ messageStatusCustomStyle: PropTypes.object,
144
+ replyText: PropTypes.string,
145
+ articleShareText: PropTypes.string,
146
+ moreText: PropTypes.string
144
147
  };
145
148
  export default imMessagePropTypes;
@@ -7,9 +7,9 @@
7
7
  import React from 'react';
8
8
 
9
9
  /** ** Components *** */
10
- import ActionIcon from '../ActionIcon/ActionIcon';
11
- import MessageActions from '../MessageActions/MessageActions';
12
- import MessageAction from '../MessageAction/MessageAction';
10
+ import ActionIcon from '../../ActionIcon/ActionIcon';
11
+ import MessageActions from '../../MessageActions/MessageActions';
12
+ import MessageAction from '../../MessageAction/MessageAction';
13
13
 
14
14
  /** ** Icons *** */
15
15
  import ReplyIcon from '@zohodesk/icon/es/general/Reply';
@@ -19,10 +19,10 @@ import DownloadIcon from '@zohodesk/icon/es/general/Cloud';
19
19
  import DeleteIcon from '@zohodesk/icon/es/general/Delete';
20
20
  import ForwardIcon from '@zohodesk/icon/es/channels/EmailForward';
21
21
  import MoreIcon from '@zohodesk/icon/es/general/More';
22
- import ConvertTicket from '../icons/iconSrc/actions/ConvertTicket';
22
+ import ConvertTicket from '../../icons/iconSrc/actions/ConvertTicket';
23
23
 
24
24
  /** ** Hooks *** */
25
- import useIMMessageActions from '@zohoim/chat-components-hooks/es/IMMessageActions/useIMMessageActions';
25
+ import useIMMessageActions from '@zohoim/chat-components-hooks/es/im/IMMessageActions/useIMMessageActions';
26
26
 
27
27
  /** ** Methods *** */
28
28
  import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
@@ -16,6 +16,14 @@
16
16
  /* margin-top: var(--imMessageActions-secondaryActions_margin); */
17
17
  }
18
18
 
19
+ [dir=ltr] .secondaryActions {
20
+ text-align: left;
21
+ }
22
+
23
+ [dir=rtl] .secondaryActions {
24
+ text-align: right;
25
+ }
26
+
19
27
  .icon {
20
28
  composes: varClass;
21
29
  width: var(--imMessageActions-action_icon_size);
@@ -2,7 +2,7 @@
2
2
  import React from 'react';
3
3
 
4
4
  /** ** Components *** */
5
- import MessageAvatar from '../MessageAvatar/MessageAvatar';
5
+ import MessageAvatar from '../../MessageAvatar/MessageAvatar';
6
6
  import IMIntegrationIcon from '../IMIntegrationIcon/IMIntegrationIcon';
7
7
 
8
8
  /** ** Constants *** */
@@ -2,36 +2,38 @@
2
2
  /* eslint-disable max-len */
3
3
 
4
4
  /** ** Libraries *** */
5
- import React from 'react';
5
+ import React from "react";
6
6
 
7
7
  /** ** Hooks *** */
8
- import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
8
+ import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
9
9
 
10
10
  /** ** Constants *** */
11
- import imMessageContentDefaultProps from './props/defaultProps';
12
- import imMessageContentPropTypes from './props/propTypes';
11
+ import imMessageContentDefaultProps from "./props/defaultProps";
12
+ import imMessageContentPropTypes from "./props/propTypes";
13
13
 
14
14
  /** ** Methods *** */
15
- import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
16
- import cssJSLogic from './css/cssJSLogic';
15
+ import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
16
+ import cssJSLogic from "./css/cssJSLogic";
17
17
 
18
18
  /** ** Styles *** */
19
- import style from './css/IMMessageContent.module.css';
20
- import useIMMessageContent from '@zohoim/chat-components-hooks/es/IMMessageContent/useIMMessageContent';
21
- import { messageTypes, mediaTypes as mediaTypeConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
22
- import IMReplyBubble from '../IMReplyBubble/IMReplyBubble';
23
- import IMLocationBubble from '../IMLocationBubble/IMLocationBubble';
24
- import IMTextBubble from '../IMTextBubble/IMTextBubble';
25
- import IMImageBubble from '../IMImageBubble/IMImageBubble';
26
- import IMVideoBubble from '../IMVideoBubble/IMVideoBubble';
27
- import IMAudioBubble from '../IMAudioBubble/IMAudioBubble';
28
- import IMAttachmentBubble from '../IMAttachmentBubble/IMAttachmentBubble';
29
- import IMArticleBubble from '../IMArticleBubble/IMArticleBubble';
19
+ import style from "./css/IMMessageContent.module.css";
20
+ import useIMMessageContent from '@zohoim/chat-components-hooks/es/im/IMMessageContent/useIMMessageContent';
21
+ import { messageTypes, mediaTypes as mediaTypeConstants } from "@zohoim/chat-components-utils/es/constants/messageConstants";
22
+ import IMReplyBubble from "../IMReplyBubble/IMReplyBubble";
23
+ import IMLocationBubble from "../IMLocationBubble/IMLocationBubble";
24
+ import IMTextBubble from "../IMTextBubble/IMTextBubble";
25
+ import IMImageBubble from "../IMImageBubble/IMImageBubble";
26
+ import IMVideoBubble from "../IMVideoBubble/IMVideoBubble";
27
+ import IMAudioBubble from "../IMAudioBubble/IMAudioBubble";
28
+ import IMAttachmentBubble from "../IMAttachmentBubble/IMAttachmentBubble";
29
+ import IMArticleBubble from "../IMArticleBubble/IMArticleBubble";
30
30
  export default function IMMessageContent(props) {
31
31
  const {
32
32
  customStyle,
33
33
  messageDetails,
34
- seeMoreText
34
+ seeMoreText,
35
+ replyText,
36
+ articleShareText
35
37
  } = props;
36
38
  const {
37
39
  isShowLayoutBubble,
@@ -56,12 +58,14 @@ export default function IMMessageContent(props) {
56
58
  const {
57
59
  attachment: attachmentDetails,
58
60
  location: locationDetails,
59
- kbArticle: articleDetails
61
+ kbArticle: articleDetails,
62
+ replyToMessage
60
63
  } = messageDetails || {};
61
64
  return /*#__PURE__*/React.createElement("div", {
62
65
  className: imMessageContentClass
63
66
  }, isShowLayoutBubble ? null : null, isShowReplyBubble ? /*#__PURE__*/React.createElement(IMReplyBubble, {
64
- messageDetails: messageDetails
67
+ messageDetails: replyToMessage,
68
+ replyText: replyText
65
69
  }) : null, isShowImageBubble ? /*#__PURE__*/React.createElement(IMImageBubble, {
66
70
  attachmentDetails: attachmentDetails
67
71
  }) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement(IMVideoBubble, {
@@ -73,7 +77,8 @@ export default function IMMessageContent(props) {
73
77
  }) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement(IMLocationBubble, {
74
78
  locationDetails: locationDetails
75
79
  }) : null, isShowArticleBubble ? /*#__PURE__*/React.createElement(IMArticleBubble, {
76
- articleDetails: articleDetails
80
+ articleDetails: articleDetails,
81
+ articleShareI18N: articleShareText
77
82
  }) : null, isShowTextBubble ? /*#__PURE__*/React.createElement(IMTextBubble, {
78
83
  messageDetails: messageDetails,
79
84
  moreText: seeMoreText
@@ -81,4 +86,4 @@ export default function IMMessageContent(props) {
81
86
  }
82
87
  IMMessageContent.propTypes = imMessageContentPropTypes;
83
88
  IMMessageContent.defaultProps = imMessageContentDefaultProps;
84
- IMMessageContent.displayName = 'IMMessageContent';
89
+ IMMessageContent.displayName = "IMMessageContent";
@@ -30,6 +30,8 @@ const imMessageContentPropTypes = {
30
30
  createdTime: PropTypes.string,
31
31
  id: PropTypes.string
32
32
  }),
33
- moreText: PropTypes.string
33
+ moreText: PropTypes.string,
34
+ replyText: PropTypes.string,
35
+ articleShareText: PropTypes.string
34
36
  };
35
37
  export default imMessageContentPropTypes;
@@ -19,10 +19,10 @@ import cssJSLogic from './css/cssJSLogic';
19
19
  import style from './css/IMMessageStatus.module.css';
20
20
 
21
21
  /** ** Icons *** */
22
- import DoubleTickIcon from '../icons/iconSrc/messageStatus/DoubleTick';
23
- import TickIcon from '../icons/iconSrc/messageStatus/Tick';
24
- import ClockIcon from '../icons/iconSrc/messageStatus/Clock';
25
- import FailedIcon from '../icons/iconSrc/messageStatus/Failed';
22
+ import DoubleTickIcon from '../../icons/iconSrc/messageStatus/DoubleTick';
23
+ import TickIcon from '../../icons/iconSrc/messageStatus/Tick';
24
+ import ClockIcon from '../../icons/iconSrc/messageStatus/Clock';
25
+ import FailedIcon from '../../icons/iconSrc/messageStatus/Failed';
26
26
  const {
27
27
  SENT,
28
28
  SAVED,
@@ -0,0 +1,87 @@
1
+ /* eslint-disable react/jsx-no-bind */
2
+ /* eslint-disable max-len */
3
+
4
+ /** ** Libraries *** */
5
+ import React from 'react';
6
+
7
+ /** ** Hooks *** */
8
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
9
+
10
+ /** ** Constants *** */
11
+ import imReplyBubbleDefaultProps from './props/defaultProps';
12
+ import imReplyBubblePropTypes from './props/propTypes';
13
+
14
+ /** ** Methods *** */
15
+ import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
16
+ import cssJSLogic from './css/cssJSLogic';
17
+
18
+ /** ** Styles *** */
19
+ import style from './css/IMReplyBubble.module.css';
20
+ import ReplyBubble from '../../ReplyBubble/ReplyBubble';
21
+ import useIMReplyBubble from '@zohoim/chat-components-hooks/es/im/IMReplyBubble/useIMReplyBubble';
22
+ import IMAttachmentIcon from '../IMAttachmentIcon/IMAttachmentIcon';
23
+ export default function IMReplyBubble(props) {
24
+ const {
25
+ customStyle,
26
+ headerCustomStyle,
27
+ timeCustomStyle,
28
+ contentCustomStyle,
29
+ replyText,
30
+ messageDetails
31
+ } = props;
32
+
33
+ /* External customization */
34
+ const newStyle = useMergeStyle(style, customStyle);
35
+ /* CSS classnames added based on logic */
36
+ const {
37
+ imReplyBubbleClass,
38
+ attachmentIconStyle
39
+ } = cssJSLogic(props, newStyle);
40
+ const {
41
+ fileFormat,
42
+ message,
43
+ senderName,
44
+ time,
45
+ isShowImage,
46
+ fileName,
47
+ attachmentURL
48
+ } = useIMReplyBubble({
49
+ messageDetails
50
+ });
51
+ function renderMessage() {
52
+ return /*#__PURE__*/React.createElement("span", {
53
+ dangerouslySetInnerHTML: {
54
+ __html: message
55
+ }
56
+ });
57
+ }
58
+ function renderIcon() {
59
+ return isShowImage ? /*#__PURE__*/React.createElement("div", {
60
+ className: newStyle.imageWrapper
61
+ }, /*#__PURE__*/React.createElement("img", {
62
+ className: newStyle.image,
63
+ src: attachmentURL,
64
+ alt: fileName
65
+ })) : fileFormat ? /*#__PURE__*/React.createElement(IMAttachmentIcon, {
66
+ customStyle: {
67
+ $icon: newStyle.attachmentIcon
68
+ },
69
+ fileFormat: fileFormat
70
+ }) : null;
71
+ }
72
+ return /*#__PURE__*/React.createElement("div", {
73
+ className: imReplyBubbleClass
74
+ }, /*#__PURE__*/React.createElement(ReplyBubble, {
75
+ headerCustomStyle: headerCustomStyle,
76
+ timeCustomStyle: timeCustomStyle,
77
+ contentCustomStyle: contentCustomStyle,
78
+ senderName: senderName,
79
+ time: time,
80
+ replyText: replyText,
81
+ renderMessage: renderMessage,
82
+ renderIcon: renderIcon
83
+ }));
84
+ }
85
+ IMReplyBubble.propTypes = imReplyBubblePropTypes;
86
+ IMReplyBubble.defaultProps = imReplyBubbleDefaultProps;
87
+ IMReplyBubble.displayName = 'IMReplyBubble';
@@ -0,0 +1,24 @@
1
+ .attachmentIcon {
2
+ height: 40px;
3
+ width: 40px;
4
+ }
5
+
6
+ .imageWrapper {
7
+ height: 60px;
8
+ width: 60px;
9
+ overflow: hidden;
10
+ }
11
+
12
+ [dir=ltr] .imageWrapper {
13
+ margin-right: 10px;
14
+ }
15
+
16
+ [dir=rtl] .imageWrapper {
17
+ margin-left: 10px;
18
+ }
19
+
20
+ .image {
21
+ width: 100%;
22
+ height: 100%;
23
+ border-radius: 3px;
24
+ }
@@ -0,0 +1,9 @@
1
+ /** ** Constants *** */
2
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
3
+ const imReplyBubbleDefaultProps = {
4
+ customStyle: dummyObject,
5
+ headerCustomStyle: dummyObject,
6
+ timeCustomStyle: dummyObject,
7
+ contentCustomStyle: dummyObject
8
+ };
9
+ export default imReplyBubbleDefaultProps;
@@ -0,0 +1,22 @@
1
+ /** ** Libraries *** */
2
+ import PropTypes from 'prop-types';
3
+ const imReplyBubblePropTypes = {
4
+ customStyle: PropTypes.object,
5
+ headerCustomStyle: PropTypes.object,
6
+ timeCustomStyle: PropTypes.object,
7
+ contentCustomStyle: PropTypes.object,
8
+ messageDetails: PropTypes.shape({
9
+ displayMessage: PropTypes.string,
10
+ attachment: PropTypes.shape({
11
+ type: PropTypes.string
12
+ }),
13
+ createdTime: PropTypes.string,
14
+ actor: PropTypes.shape({
15
+ name: PropTypes.string,
16
+ contactName: PropTypes.string,
17
+ externalId: PropTypes.string
18
+ })
19
+ }),
20
+ replyText: PropTypes.string
21
+ };
22
+ export default imReplyBubblePropTypes;
@@ -17,8 +17,9 @@ import cssJSLogic from './css/cssJSLogic';
17
17
 
18
18
  /** ** Styles *** */
19
19
  import style from './css/IMTextBubble.module.css';
20
- import TextBubble from '../TextBubble/TextBubble';
21
- import useIMTextBubble from '@zohoim/chat-components-hooks/es/IMTextBubble/useIMTextBubble';
20
+ import TextBubble from '../../TextBubble/TextBubble';
21
+ import useIMTextBubble from '@zohoim/chat-components-hooks/es/im/IMTextBubble/useIMTextBubble';
22
+ import QuoteIcon from '../../icons/iconSrc/common/Quote';
22
23
  export default function IMTextBubble(props) {
23
24
  const {
24
25
  customStyle,
@@ -40,7 +41,7 @@ export default function IMTextBubble(props) {
40
41
  } = cssJSLogic(props, newStyle);
41
42
  return /*#__PURE__*/React.createElement("div", {
42
43
  className: imTextBubbleWrapperClass
43
- }, isShowQuote ? /*#__PURE__*/React.createElement("span", null, "[QuoteIcon]") : null, /*#__PURE__*/React.createElement(TextBubble, {
44
+ }, isShowQuote ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(QuoteIcon, null)) : null, /*#__PURE__*/React.createElement(TextBubble, {
44
45
  customStyle: textBubbleCustomStyle,
45
46
  message: sanitizedDisplayMessage,
46
47
  isShowMoreText: isShowSeeMore,
@@ -7,7 +7,7 @@ import React from 'react';
7
7
 
8
8
  /** ** Hooks *** */
9
9
  import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
10
- import useIMTicketLink from '@zohoim/chat-components-hooks/es/IMTicketLink/useIMTicketLink';
10
+ import useIMTicketLink from '@zohoim/chat-components-hooks/es/im/IMTicketLink/useIMTicketLink';
11
11
 
12
12
  /** ** Constants *** */
13
13
  import imTicketLinkDefaultProps from './props/defaultProps';
@@ -9,7 +9,10 @@
9
9
  font-size: var(--imTicketLink-font_size);
10
10
  max-width: var(--imTicketLink-max_width);
11
11
  color: var(--imlib_chat_components_imTicketLink_color);
12
- display: inline-block;
12
+ display: block;
13
+ white-space: nowrap;
14
+ overflow: hidden;
15
+ text-overflow: ellipsis;
13
16
 
14
17
  margin-top: var(--imTicketLink-top_gap);
15
18
  cursor: pointer;
@@ -17,8 +17,8 @@ import cssJSLogic from './css/cssJSLogic';
17
17
 
18
18
  /** ** Styles *** */
19
19
  import style from './css/IMVideoBubble.module.css';
20
- import VideoBubble from '../VideoBubble/VideoBubble';
21
- import useIMVideoBubble from '@zohoim/chat-components-hooks/es/IMVideoBubble/useIMVideoBubble';
20
+ import VideoBubble from '../../VideoBubble/VideoBubble';
21
+ import useIMVideoBubble from '@zohoim/chat-components-hooks/es/im/IMVideoBubble/useIMVideoBubble';
22
22
  export default function IMVideoBubble(props) {
23
23
  const {
24
24
  attachmentDetails,
package/es/im/index.js ADDED
@@ -0,0 +1,20 @@
1
+ export * from './IMIntegrationIcon';
2
+ export * from './IMMessageActions';
3
+ export * from './IMMessageAvatar';
4
+ export * from './IMMessageStatus';
5
+ export * from './IMMessage';
6
+ export * from './IMDateTime';
7
+ export * from './IMTicketLink';
8
+ export * from './IMMessageMeta';
9
+ export * from './IMAutoMessageInfo';
10
+ export * from './IMMessageContent';
11
+ export * from './IMAudioBubble';
12
+ export * from './IMAttachmentBubble';
13
+ export * from './IMVideoBubble';
14
+ export * from './IMTextBubble';
15
+ export * from './IMInfoBubble';
16
+ export * from './IMAttachmentIcon';
17
+ export * from './IMReplyBubble';
18
+ export * from './IMImageBubble';
19
+ export * from './IMLocationBubble';
20
+ export * from './IMArticleBubble';
package/es/index.js CHANGED
@@ -1,55 +1,37 @@
1
- export * from './MessageBubble';
1
+ export * from "./MessageBubble";
2
2
 
3
3
  // export * from './AvatarSpace';
4
- export * from './MessageActions';
5
- export * from './MessageBox';
6
- export * from './MessageBoxHeader';
7
- export * from './MessageBoxFooter';
8
- export * from './ActionIcon';
9
- export * from './MessageActionsMore';
10
- export * from './TextMessage';
11
- export * from './MessageAvatar';
12
- export * from './IMIntegrationIcon';
13
- export * from './MoreActionItem';
14
- export * from './IMMessageActions';
15
- export * from './MessageAction';
16
- export * from './IMMessageAvatar';
17
- export * from './IMMessageStatus';
18
- export * from './IMMessage';
19
- export * from './Theme';
20
- export * from './MessageWrapper';
21
- export * from './Message';
22
- export * from './IMDateTime';
23
- export * from './IMTicketLink';
24
- export * from './IMMessageMeta';
25
- export * from './IMAutoMessageInfo';
26
- export * from './IMMessageContent';
27
- export * from './AudioBubble';
28
- export * from './IMAudioBubble';
29
- export * from './AttachmentBubble';
30
- export * from './IMAttachmentBubble';
31
- export * from './VideoBubble';
32
- export * from './IMVideoBubble';
33
- export * from './ImageBubble';
34
- export * from './TextBubble';
35
- export * from './IMTextBubble';
36
- export * from './ArticleBubble';
37
- export * from './LocationBubble';
38
- export * from './InfoBubble';
39
- export * from './IMInfoBubble';
40
- export * from './AttachmentBubbleInfo';
41
- export * from './Audio';
42
- export * from './Video';
43
- export * from './IMAttachmentIcon';
44
- export * from './ReplyBubble';
45
- export * from './IMReplyBubble';
46
- export * from './ReplyBubbleHeader';
47
- export * from './LazyLoadImage';
48
- export * from './IMImageBubble';
49
- export * from './IMLocationBubble';
50
- export * from './IMArticleBubble';
4
+ export * from "./MessageActions";
5
+ export * from "./MessageBox";
6
+ export * from "./MessageBoxHeader";
7
+ export * from "./MessageBoxFooter";
8
+ export * from "./ActionIcon";
9
+ export * from "./MessageActionsMore";
10
+ export * from "./TextMessage";
11
+ export * from "./MessageAvatar";
12
+ export * from "./MoreActionItem";
13
+ export * from "./MessageAction";
14
+ export * from "./Theme";
15
+ export * from "./MessageWrapper";
16
+ export * from "./Message";
17
+ export * from "./AudioBubble";
18
+ export * from "./AttachmentBubble";
19
+ export * from "./VideoBubble";
20
+ export * from "./ImageBubble";
21
+ export * from "./TextBubble";
22
+ export * from "./ArticleBubble";
23
+ export * from "./LocationBubble";
24
+ export * from "./InfoBubble";
25
+ export * from "./AttachmentBubbleInfo";
26
+ export * from "./Audio";
27
+ export * from "./Video";
28
+ export * from "./ReplyBubble";
29
+ export * from "./ReplyBubbleHeader";
30
+ export * from "./LazyLoadImage";
31
+ export * from './ReplyBubbleContent';
32
+ export * from './im';
51
33
 
52
34
  // ... export other components
53
35
 
54
36
  /*** CONSTANTS ***/
55
- export * from './constants';
37
+ export * from "./constants";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohoim/chat-components",
3
- "version": "0.0.8",
3
+ "version": "0.0.11",
4
4
  "description": "Chat Components",
5
5
  "main": "es/index.js",
6
6
  "module": "es/index.js",
@@ -36,12 +36,12 @@
36
36
  "@zohodesk/utils": "1.3.9",
37
37
  "@zohodesk/variables": "1.0.0-beta.30",
38
38
  "@zohodesk/virtualizer": "1.0.13",
39
- "@zohoim/chat-components-hooks": "^0.0.7",
40
- "@zohoim/chat-components-utils": "^0.0.6"
39
+ "@zohoim/chat-components-hooks": "^0.0.9",
40
+ "@zohoim/chat-components-utils": "^0.0.8"
41
41
  },
42
42
  "devDependencies": {
43
43
  "html-to-react": "^1.4.8",
44
44
  "react-to-jsx": "^1.3.2"
45
45
  },
46
- "gitHead": "0559f14c8c257e7fee2c0d7ce2e1588c4776469a"
46
+ "gitHead": "44251e037d721b4e14928c9c49028ea6d4080dc7"
47
47
  }
@@ -1,8 +0,0 @@
1
- .imAudioBubble {
2
- width: 380px;
3
- }
4
-
5
-
6
- .box{
7
- margin-bottom: 5px;
8
- }
@@ -1,5 +0,0 @@
1
- .imDateTime {
2
- font-size: var(--zd_size11);
3
- max-width: var(--zd_size100);
4
- display: flex;
5
- }
@@ -1,37 +0,0 @@
1
- /* eslint-disable react/jsx-no-bind */
2
- /* eslint-disable max-len */
3
-
4
- /** ** Libraries *** */
5
- import React from 'react';
6
-
7
- /** ** Hooks *** */
8
- import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
9
-
10
- /** ** Constants *** */
11
- import imReplyBubbleDefaultProps from './props/defaultProps';
12
- import imReplyBubblePropTypes from './props/propTypes';
13
-
14
- /** ** Methods *** */
15
- import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
16
- import cssJSLogic from './css/cssJSLogic';
17
-
18
- /** ** Styles *** */
19
- import style from './css/IMReplyBubble.module.css';
20
- export default function IMReplyBubble(props) {
21
- const {
22
- customStyle
23
- } = props;
24
-
25
- /* External customization */
26
- const newStyle = useMergeStyle(style, customStyle);
27
- /* CSS classnames added based on logic */
28
- const {
29
- imReplyBubbleClass
30
- } = cssJSLogic(props, newStyle);
31
- return /*#__PURE__*/React.createElement("div", {
32
- className: imReplyBubbleClass
33
- }, "Working On this...");
34
- }
35
- IMReplyBubble.propTypes = imReplyBubblePropTypes;
36
- IMReplyBubble.defaultProps = imReplyBubbleDefaultProps;
37
- IMReplyBubble.displayName = 'IMReplyBubble';
File without changes
@@ -1,6 +0,0 @@
1
- /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
3
- const imReplyBubbleDefaultProps = {
4
- customStyle: dummyObject
5
- };
6
- export default imReplyBubbleDefaultProps;
@@ -1,6 +0,0 @@
1
- /** ** Libraries *** */
2
- import PropTypes from 'prop-types';
3
- const imReplyBubblePropTypes = {
4
- customStyle: PropTypes.object
5
- };
6
- export default imReplyBubblePropTypes;