@zohoim/chat-components 0.0.24 → 0.0.27
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.
- package/es/Message/Message.js +1 -1
- package/es/Message/props/defaultProps.js +2 -1
- package/es/Message/props/propTypes.js +1 -0
- package/es/Theme/themeVariables/commonThemeColorVariable.js +2 -1
- package/es/Theme/themeVariables/light/commonColorVariable.js +2 -1
- package/es/im/IMIntegrationIcon/IMIntegrationIcon.js +4 -2
- package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css +7 -3
- package/es/im/IMIntegrationIcon/css/cssJSLogic.js +6 -5
- package/es/im/IMMessage/IMMessage.js +6 -2
- package/es/im/IMMessage/props/propTypes.js +2 -0
- package/es/im/IMMessageContent/IMMessageContent.js +3 -1
- package/es/im/IMMessageContent/props/propTypes.js +2 -1
- package/es/im/IMTextBubble/props/propTypes.js +2 -1
- package/package.json +4 -4
package/es/Message/Message.js
CHANGED
|
@@ -33,6 +33,7 @@ export default function Message(props) {
|
|
|
33
33
|
renderSecondaryActions,
|
|
34
34
|
onSelectAction,
|
|
35
35
|
onMouseEnterAction,
|
|
36
|
+
needMessageActions,
|
|
36
37
|
renderContent,
|
|
37
38
|
customProps
|
|
38
39
|
} = props;
|
|
@@ -110,7 +111,6 @@ export default function Message(props) {
|
|
|
110
111
|
};
|
|
111
112
|
return /*#__PURE__*/React.createElement(MessageActions, _extends({}, props, messageActionsProps));
|
|
112
113
|
}, [actions, onSelectAction, onMouseEnterAction, renderSecondaryActions, messageActionsProps]);
|
|
113
|
-
const needMessageActions = !!actions.length;
|
|
114
114
|
return /*#__PURE__*/React.createElement(MessageBubble, _extends({
|
|
115
115
|
direction: direction,
|
|
116
116
|
isActive: isActive,
|
|
@@ -29,6 +29,7 @@ const messagePropTypes = {
|
|
|
29
29
|
})),
|
|
30
30
|
onSelectAction: PropTypes.func.isRequired,
|
|
31
31
|
renderSecondaryActions: PropTypes.func,
|
|
32
|
+
needMessageActions: PropTypes.bool,
|
|
32
33
|
customProps: PropTypes.shape({
|
|
33
34
|
messageActionsProps: PropTypes.object,
|
|
34
35
|
messageBoxProps: PropTypes.object,
|
|
@@ -26,7 +26,8 @@ export const imIntegrationIcon = {
|
|
|
26
26
|
line_color: '#01b901',
|
|
27
27
|
twillio_color: '#f22f46',
|
|
28
28
|
instagram_color: 'red',
|
|
29
|
-
asap_color: '#0a73eb'
|
|
29
|
+
asap_color: '#0a73eb',
|
|
30
|
+
fb_color: '#006aff'
|
|
30
31
|
};
|
|
31
32
|
export const imTtIcon = {
|
|
32
33
|
path0_color: 'rgba(200,203,220,0.7)',
|
|
@@ -19,7 +19,8 @@ const {
|
|
|
19
19
|
IM_TALK,
|
|
20
20
|
WECHAT,
|
|
21
21
|
TWILLIO,
|
|
22
|
-
LINE
|
|
22
|
+
LINE,
|
|
23
|
+
FACEBOOKMESSENGER
|
|
23
24
|
} = integrationConstants;
|
|
24
25
|
const fontIconMap = {
|
|
25
26
|
[TWILLIO]: 'ZD-TT-imtwillio',
|
|
@@ -27,7 +28,8 @@ const fontIconMap = {
|
|
|
27
28
|
[TELEGRAM]: 'ZD-TT-imTelegram',
|
|
28
29
|
[WECHAT]: 'ZD-TT-imWeChat',
|
|
29
30
|
[LINE]: 'ZD-TT-imLine',
|
|
30
|
-
[IM_TALK]: 'ZD-TT-imASAP'
|
|
31
|
+
[IM_TALK]: 'ZD-TT-imASAP',
|
|
32
|
+
[FACEBOOKMESSENGER]: 'ZD-TT-fbMessanger'
|
|
31
33
|
};
|
|
32
34
|
export default function IMIntegrationIcon(props) {
|
|
33
35
|
const {
|
|
@@ -59,10 +59,14 @@
|
|
|
59
59
|
background-color: var(--imlib_chat_components_imIntegrationIcon_asap_color);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
+
.fbIcon {
|
|
63
|
+
background-color: var(--imlib_chat_components_imIntegrationIcon_fb_color);
|
|
64
|
+
}
|
|
65
|
+
|
|
62
66
|
.fontIcon :global .path1::before {
|
|
63
|
-
color:
|
|
67
|
+
color: var(--imlib_chat_components_imIntegrationIcon_path0_color);
|
|
64
68
|
}
|
|
65
69
|
|
|
66
70
|
.fontIcon :global .path2::before {
|
|
67
|
-
color:var(--imlib_chat_components_imIntegrationIcon_path1_color);
|
|
68
|
-
}
|
|
71
|
+
color: var(--imlib_chat_components_imIntegrationIcon_path1_color);
|
|
72
|
+
}
|
|
@@ -11,7 +11,8 @@ const {
|
|
|
11
11
|
IM_TALK,
|
|
12
12
|
WECHAT,
|
|
13
13
|
TWILLIO,
|
|
14
|
-
LINE
|
|
14
|
+
LINE,
|
|
15
|
+
FACEBOOKMESSENGER
|
|
15
16
|
} = integrationConstants;
|
|
16
17
|
export default function cssJSLogic(props, style) {
|
|
17
18
|
const {
|
|
@@ -24,8 +25,8 @@ export default function cssJSLogic(props, style) {
|
|
|
24
25
|
const isIMTalkIcon = integrationName === IM_TALK;
|
|
25
26
|
const isWeChatIcon = integrationName === WECHAT;
|
|
26
27
|
const isTwillioIcon = integrationName === TWILLIO;
|
|
27
|
-
const isLineIcon = integrationName === LINE;
|
|
28
|
-
|
|
28
|
+
const isLineIcon = integrationName === LINE;
|
|
29
|
+
const isFbIcon = integrationName === FACEBOOKMESSENGER;
|
|
29
30
|
const isSmall = size === sizes.SMALL;
|
|
30
31
|
const isMedium = size === sizes.MEDIUM;
|
|
31
32
|
const iconWrapperClass = compileClassNames({
|
|
@@ -38,8 +39,8 @@ export default function cssJSLogic(props, style) {
|
|
|
38
39
|
[style.asapIcon]: isIMTalkIcon,
|
|
39
40
|
[style.weChatIcon]: isWeChatIcon,
|
|
40
41
|
[style.twillioIcon]: isTwillioIcon,
|
|
41
|
-
[style.lineIcon]: isLineIcon
|
|
42
|
-
|
|
42
|
+
[style.lineIcon]: isLineIcon,
|
|
43
|
+
[style.fbIcon]: isFbIcon
|
|
43
44
|
});
|
|
44
45
|
const iconClass = compileClassNames({
|
|
45
46
|
[style.small]: isSmall,
|
|
@@ -58,7 +58,9 @@ export default function IMMessage(props) {
|
|
|
58
58
|
needSender,
|
|
59
59
|
isShowSender,
|
|
60
60
|
isShowMessageTime,
|
|
61
|
-
isShowMessageStatus
|
|
61
|
+
isShowMessageStatus,
|
|
62
|
+
needMessageActions,
|
|
63
|
+
isShowFullContent
|
|
62
64
|
} = messageDisplayProps;
|
|
63
65
|
const newStyle = useMergeStyle(style, customStyle);
|
|
64
66
|
const {
|
|
@@ -112,6 +114,7 @@ export default function IMMessage(props) {
|
|
|
112
114
|
deleteMessageText: deleteMessageText,
|
|
113
115
|
isFailed: isFailedMessage,
|
|
114
116
|
isSending: isSendingMessage,
|
|
117
|
+
isShowFullContent: isShowFullContent,
|
|
115
118
|
messageContentClickMapping: messageContentClickMapping,
|
|
116
119
|
messageDetails: messageDetails,
|
|
117
120
|
onClickReply: onClickReply,
|
|
@@ -119,7 +122,7 @@ export default function IMMessage(props) {
|
|
|
119
122
|
replyText: replyText,
|
|
120
123
|
seeMoreText: seeMoreText,
|
|
121
124
|
sessionDetails: sessionDetails
|
|
122
|
-
}, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, messageContentClickMapping, onLoadFullMessage, onClickReply, isFailedMessage, isSendingMessage, imMessageContentProps]);
|
|
125
|
+
}, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, messageContentClickMapping, onLoadFullMessage, onClickReply, isFailedMessage, isSendingMessage, imMessageContentProps, isShowFullContent]);
|
|
123
126
|
/** ** Render Secondary Actions - TicketId *** */
|
|
124
127
|
|
|
125
128
|
const handleRenderSecondaryActions = useCallback(() => {
|
|
@@ -176,6 +179,7 @@ export default function IMMessage(props) {
|
|
|
176
179
|
isActive: isHighlightMessage,
|
|
177
180
|
isShowMessageStatus: isShowMessageStatus,
|
|
178
181
|
isShowSender: isShowSender,
|
|
182
|
+
needMessageActions: needMessageActions,
|
|
179
183
|
needSender: needSender,
|
|
180
184
|
onMouseEnterAction: onMouseEnterAction,
|
|
181
185
|
onSelectAction: onSelectAction,
|
|
@@ -61,9 +61,11 @@ const imMessagePropTypes = {
|
|
|
61
61
|
}),
|
|
62
62
|
messageDisplayProps: PropTypes.shape({
|
|
63
63
|
isHighlightMessage: PropTypes.bool,
|
|
64
|
+
isShowFullContent: PropTypes.bool,
|
|
64
65
|
isShowMessageStatus: PropTypes.bool,
|
|
65
66
|
isShowMessageTime: PropTypes.bool,
|
|
66
67
|
isShowSender: PropTypes.bool,
|
|
68
|
+
needMessageActions: PropTypes.bool,
|
|
67
69
|
needSender: PropTypes.bool
|
|
68
70
|
}),
|
|
69
71
|
messageStatusI18N: PropTypes.shape({
|
|
@@ -40,7 +40,8 @@ export default function IMMessageContent(props) {
|
|
|
40
40
|
onClick: propOnClick,
|
|
41
41
|
isFailed,
|
|
42
42
|
isSending,
|
|
43
|
-
messageContentClickMapping
|
|
43
|
+
messageContentClickMapping,
|
|
44
|
+
isShowFullContent
|
|
44
45
|
} = props;
|
|
45
46
|
const {
|
|
46
47
|
imReplyBubbleProps = dummyObject,
|
|
@@ -110,6 +111,7 @@ export default function IMMessageContent(props) {
|
|
|
110
111
|
locationUrl: locationUrl
|
|
111
112
|
}, locationBubbleProps))) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(IMTextBubble, _extends({
|
|
112
113
|
isFailed: isFailed,
|
|
114
|
+
isShowFullContent: isShowFullContent,
|
|
113
115
|
messageDetails: messageDetails,
|
|
114
116
|
moreText: seeMoreText,
|
|
115
117
|
onLoadFullMessage: onLoadFullMessage,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohoim/chat-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.27",
|
|
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.9",
|
|
37
37
|
"@zohodesk/variables": "1.0.0-beta.30",
|
|
38
38
|
"@zohodesk/virtualizer": "1.0.13",
|
|
39
|
-
"@zohoim/chat-components-hooks": "^0.0.
|
|
40
|
-
"@zohoim/chat-components-utils": "^0.0.
|
|
39
|
+
"@zohoim/chat-components-hooks": "^0.0.22",
|
|
40
|
+
"@zohoim/chat-components-utils": "^0.0.21"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@zohodesk-private/css-variable-migrator": "1.0.1",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"jsdom": "22.1.0",
|
|
46
46
|
"react-to-jsx": "1.3.2"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "2fd6976b3ddef8bc5be3896558ed31188eeaa8e5"
|
|
49
49
|
}
|