@zohoim/chat-components 0.0.16 → 0.0.17

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 (11) hide show
  1. package/es/MessageBubble/MessageBubble.js +9 -8
  2. package/es/MessageBubble/css/MessageBubble.module.css +12 -2
  3. package/es/MessageBubble/css/cssJSLogic.js +4 -2
  4. package/es/Theme/themeVariables/light/blueTheme.js +1 -2
  5. package/es/Theme/themeVariables/light/commonColorVariable.js +5 -1
  6. package/es/Theme/themeVariables/light/greenTheme.js +1 -2
  7. package/es/Theme/themeVariables/light/orangeTheme.js +1 -2
  8. package/es/Theme/themeVariables/light/redTheme.js +1 -2
  9. package/es/Theme/themeVariables/light/yellowTheme.js +1 -2
  10. package/es/im/ArticleBubble/css/ArticleBubble.module.css +7 -4
  11. package/package.json +4 -4
package/es/MessageBubble/MessageBubble.js CHANGED
@@ -34,14 +34,6 @@ export default function MessageBubble(props) {
34
34
  /* External CSS Customization */
35
35
 
36
36
  const newStyle = useMergeStyle(style, customStyle);
37
- /* css classnames added based on logic */
38
-
39
- const {
40
- bubbleClass
41
- } = cssJSLogic({
42
- isActive,
43
- direction
44
- }, newStyle);
45
37
  /* Use Hooks */
46
38
 
47
39
  const {
@@ -49,6 +41,15 @@ export default function MessageBubble(props) {
49
41
  onMouseLeave,
50
42
  isRenderMessageActions
51
43
  } = useMessageBubbleAction(props);
44
+ /* css classnames added based on logic */
45
+
46
+ const {
47
+ bubbleClass
48
+ } = cssJSLogic({
49
+ isActive,
50
+ direction,
51
+ isRenderMessageActions
52
+ }, newStyle);
52
53
  /* Render Childrens */
53
54
 
54
55
  /* Message Sender Render */
package/es/MessageBubble/css/MessageBubble.module.css CHANGED
@@ -1,7 +1,6 @@
1
1
  .varClass {
2
2
  --messageBubble-bubble_footer_gap: var(--zd_size5);
3
3
  --messageBubble-message_owner_gap: 13px;
4
- --messageBubble-message_action_gap: var(--zd_size12);
5
4
  --messageBox-max_width: var(--zd_size410);
6
5
  --messageBox-footer_fontSize: var(--zd_font_size11);
7
6
  --messageBox-owner_width: var(--zd_size34);
@@ -23,6 +22,7 @@
23
22
  .messageContainer {
24
23
  grid-area: messageContainer;
25
24
  display: grid;
25
+ column-gap: var(--zd_size10) ;
26
26
  }
27
27
 
28
28
  .messageBoxWrapper {
@@ -32,7 +32,7 @@
32
32
 
33
33
  .messageActionWrapper {
34
34
  grid-area: messageAction;
35
- margin: 0 var(--messageBubble-message_action_gap);
35
+ width: var(--zd_size78) ;
36
36
  }
37
37
 
38
38
  .messageBoxFooterWrapper {
@@ -66,9 +66,19 @@
66
66
  .directionIn .messageContainer {
67
67
  grid-template-columns: auto 1fr;
68
68
  grid-template-areas: 'messageBox messageAction';
69
+ margin-inline-end: 78px;
70
+ }
71
+
72
+ .isHovered.directionIn .messageContainer{
73
+ margin-inline-end: 0;
69
74
  }
70
75
 
71
76
  .directionOut .messageContainer {
72
77
  grid-template-columns: 1fr auto;
73
78
  grid-template-areas: 'messageAction messageBox';
79
+ margin-inline-start: 78px;
74
80
  }
81
+
82
+ .isHovered.directionOut .messageContainer{
83
+ margin-inline-start: 0;
84
+ }
package/es/MessageBubble/css/cssJSLogic.js CHANGED
@@ -4,7 +4,8 @@ import getMessageDirectionType from '@zohoim/chat-components-utils/es/getMessage
4
4
  export default function cssJSLogic(props, style) {
5
5
  const {
6
6
  isActive,
7
- direction
7
+ direction,
8
+ isRenderMessageActions
8
9
  } = props;
9
10
  const {
10
11
  isIncoming,
@@ -18,7 +19,8 @@ export default function cssJSLogic(props, style) {
18
19
  [style.messageBubble]: true,
19
20
  [style.directionIn]: isIncoming,
20
21
  [style.directionOut]: isOutgoing,
21
- [style.active]: isActive
22
+ [style.active]: isActive,
23
+ [style.isHovered]: isRenderMessageActions
22
24
  });
23
25
  return {
24
26
  bubbleClass
package/es/Theme/themeVariables/light/blueTheme.js CHANGED
@@ -1,6 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
3
- import { imIntegrationIcon } from '../commonThemeColorVariable';
2
+ import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
4
3
  export default {
5
4
  library: 'chat_components',
6
5
  variables: {
package/es/Theme/themeVariables/light/commonColorVariable.js CHANGED
@@ -16,4 +16,8 @@ export const failedBg = '#fff0f0';
16
16
  export const failedBdr = '#ffd6d6';
17
17
  export const failedLine = '#ffd6d6';
18
18
  export const failedColor = '#000';
19
- export const failedUrlColor = '#0a73eb';
19
+ export const failedUrlColor = '#0a73eb';
20
+ export const imIntegrationIcon = {
21
+ path0_color: 'rgba(200,203,220,0.7)',
22
+ path1_color: '#000'
23
+ };
package/es/Theme/themeVariables/light/greenTheme.js CHANGED
@@ -1,6 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
3
- import { imIntegrationIcon } from '../commonThemeColorVariable';
2
+ import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
4
3
  export default {
5
4
  library: 'chat_components',
6
5
  variables: {
package/es/Theme/themeVariables/light/orangeTheme.js CHANGED
@@ -1,6 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
3
- import { imIntegrationIcon } from '../commonThemeColorVariable';
2
+ import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
4
3
  export default {
5
4
  library: 'chat_components',
6
5
  variables: {
package/es/Theme/themeVariables/light/redTheme.js CHANGED
@@ -1,6 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
3
- import { imIntegrationIcon } from '../commonThemeColorVariable';
2
+ import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
4
3
  export default {
5
4
  library: 'chat_components',
6
5
  variables: {
package/es/Theme/themeVariables/light/yellowTheme.js CHANGED
@@ -1,6 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
3
- import { imIntegrationIcon } from '../commonThemeColorVariable';
2
+ import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
4
3
  export default {
5
4
  library: 'chat_components',
6
5
  variables: {
package/es/im/ArticleBubble/css/ArticleBubble.module.css CHANGED
@@ -49,18 +49,17 @@
49
49
  }
50
50
 
51
51
  .articleIcon :global(.path-0) {
52
- /* fill: var(--imlib_chat_components_imIntegrationIcon_path0_color); */
53
- fill: rgba(200,203,220,0.7);
52
+ fill: var(--imlib_chat_components_imIntegrationIcon_path0_color);
54
53
  }
55
54
 
56
55
  .articleIcon :global(.path-1) {
57
- /* fill: var(--imlib_chat_components_imIntegrationIcon_path1_color); */
58
- fill: #000;
56
+ fill: var(--imlib_chat_components_imIntegrationIcon_path1_color);
59
57
  }
60
58
 
61
59
  .content{
62
60
  composes: dotted from "../../css/common.module.css";
63
61
  font-size: var(--zd_font_size13) ;
62
+ color: var(--imlib_chat_components_articleBubble_title_color);
64
63
  }
65
64
 
66
65
  [dir=ltr] .content{
@@ -69,4 +68,8 @@
69
68
 
70
69
  [dir=rtl] .content{
71
70
  margin-right: var(--zd_size8);
71
+ }
72
+
73
+ .failedArticleBubbleClass .content{
74
+ color: var(--imlib_chat_components_articleBubble_title_color_failed);
72
75
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohoim/chat-components",
3
- "version": "0.0.16",
3
+ "version": "0.0.17",
4
4
  "description": "Chat Components",
5
5
  "main": "es/index.js",
6
6
  "module": "es/index.js",
@@ -35,8 +35,8 @@
35
35
  "@zohodesk/utils": "1.3.9",
36
36
  "@zohodesk/variables": "1.0.0-beta.30",
37
37
  "@zohodesk/virtualizer": "1.0.13",
38
- "@zohoim/chat-components-hooks": "^0.0.14",
39
- "@zohoim/chat-components-utils": "^0.0.13"
38
+ "@zohoim/chat-components-hooks": "^0.0.15",
39
+ "@zohoim/chat-components-utils": "^0.0.14"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@zohodesk-private/css-variable-migrator": "1.0.1",
@@ -44,5 +44,5 @@
44
44
  "jsdom": "22.1.0",
45
45
  "react-to-jsx": "1.3.2"
46
46
  },
47
- "gitHead": "1b5aa92b8b410ebbe44f5a85b6b3fca89a81805e"
47
+ "gitHead": "bb60818da98f0ee842e489c6bfb3a83a22a7485b"
48
48
  }