@zohoim/chat-components 1.2.3-beta-1 → 1.2.3-beta-4

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 (10) hide show
  1. package/assets/Appearance/dark/mode/General_DarkMode.module.css +2 -0
  2. package/assets/Appearance/light/mode/General_LightMode.module.css +2 -0
  3. package/assets/Appearance/pureDark/mode/General_PureDarkMode.module.css +2 -0
  4. package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css +6 -0
  5. package/es/im/IMIntegrationIcon/css/cssJSLogic.js +5 -2
  6. package/es/im/IMMessageMeta/css/IMMessageMeta.module.css +5 -0
  7. package/lib/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css +6 -0
  8. package/lib/im/IMIntegrationIcon/css/cssJSLogic.js +4 -2
  9. package/lib/im/IMMessageMeta/css/IMMessageMeta.module.css +5 -0
  10. package/package.json +5 -5
package/assets/Appearance/dark/mode/General_DarkMode.module.css CHANGED
@@ -12,6 +12,7 @@
12
12
  --imlib_chat_components_imIntegrationIcon_instagram_color: linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);
13
13
  --imlib_chat_components_imIntegrationIcon_asap_color: linear-gradient(180deg, #A375FF 0%, #7732FF 100%);
14
14
  --imlib_chat_components_imIntegrationIcon_fb_color: hsla(215, 100.00%, calc(50.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
15
+ --imlib_chat_components_imIntegrationIcon_weCom_color: hsla(215, 48.12%, calc(53.14% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
15
16
 
16
17
  /* two tone icon colors */
17
18
  --imlib_chat_components_imTtIcon_path0_color: rgba(255, 255, 255, 0.25);
@@ -35,6 +36,7 @@
35
36
  --imlib_chat_components_articleBubble_summary_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
36
37
  --imlib_chat_components_imMessageContent_text_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
37
38
  --imlib_chat_components_imMessageMeta_time_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
+ --imlib_chat_components_imMessageMeta_icon_color: hsla(218, 6.90%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
38
40
  --imlib_chat_components_imAutoMessageInfo_text_color: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
41
  --imlib_chat_components_messageBubble_messageBox_footer_text_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
40
42
  --imlib_chat_components_messageStatus_send_color: hsla(228, 11.42%, calc(42.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
package/assets/Appearance/light/mode/General_LightMode.module.css CHANGED
@@ -12,6 +12,7 @@
12
12
  --imlib_chat_components_imIntegrationIcon_instagram_color: linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);
13
13
  --imlib_chat_components_imIntegrationIcon_asap_color: linear-gradient(180deg, #A375FF 0%, #7732FF 100%);
14
14
  --imlib_chat_components_imIntegrationIcon_fb_color: hsla(215, 100.00%, calc(50.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
15
+ --imlib_chat_components_imIntegrationIcon_weCom_color: hsla(215, 48.12%, calc(53.14% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
15
16
 
16
17
  /* two tone icon colors */
17
18
  --imlib_chat_components_imTtIcon_path0_color: rgba(200,203,220,0.7);
@@ -35,6 +36,7 @@
35
36
  --imlib_chat_components_articleBubble_summary_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
36
37
  --imlib_chat_components_imMessageContent_text_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
37
38
  --imlib_chat_components_imMessageMeta_time_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
+ --imlib_chat_components_imMessageMeta_icon_color: hsla(240, 1.29%, calc(45.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
38
40
  --imlib_chat_components_imAutoMessageInfo_text_color: hsla(240, 1.29%, calc(45.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
41
  --imlib_chat_components_messageBubble_messageBox_footer_text_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
40
42
  --imlib_chat_components_messageStatus_send_color: hsla(228, 11.42%, calc(42.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
package/assets/Appearance/pureDark/mode/General_PureDarkMode.module.css CHANGED
@@ -12,6 +12,7 @@
12
12
  --imlib_chat_components_imIntegrationIcon_instagram_color: linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);
13
13
  --imlib_chat_components_imIntegrationIcon_asap_color: linear-gradient(180deg, #A375FF 0%, #7732FF 100%);
14
14
  --imlib_chat_components_imIntegrationIcon_fb_color: hsla(215, 100.00%, calc(50.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
15
+ --imlib_chat_components_imIntegrationIcon_weCom_color: hsla(215, 48.12%, calc(53.14% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
15
16
 
16
17
  /* two tone icon colors */
17
18
  --imlib_chat_components_imTtIcon_path0_color: rgba(255, 255, 255, 0.25);
@@ -35,6 +36,7 @@
35
36
  --imlib_chat_components_articleBubble_summary_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
36
37
  --imlib_chat_components_imMessageContent_text_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
37
38
  --imlib_chat_components_imMessageMeta_time_color: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
+ --imlib_chat_components_imMessageMeta_icon_color: hsla(0, 0.00%, calc(59.22% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
38
40
  --imlib_chat_components_imAutoMessageInfo_text_color: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
39
41
  --imlib_chat_components_messageBubble_messageBox_footer_text_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
40
42
  --imlib_chat_components_messageStatus_send_color: hsla(228, 11.42%, calc(42.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css CHANGED
@@ -70,3 +70,9 @@
70
70
  .fontIcon :global .path2::before {
71
71
  color: var(--imlib_chat_components_imIntegrationIcon_path1_color) !important;
72
72
  }
73
+
74
+ .weComIcon{
75
+ background-color: var(
76
+ --imlib_chat_components_imIntegrationIcon_weCom_color
77
+ );
78
+ }
package/es/im/IMIntegrationIcon/css/cssJSLogic.js CHANGED
@@ -12,7 +12,8 @@ const {
12
12
  WECHAT,
13
13
  TWILLIO,
14
14
  LINE,
15
- FACEBOOKMESSENGER
15
+ FACEBOOKMESSENGER,
16
+ WECOM
16
17
  } = integrationConstants;
17
18
  export default function cssJSLogic(props, style) {
18
19
  const {
@@ -27,6 +28,7 @@ export default function cssJSLogic(props, style) {
27
28
  const isTwillioIcon = integrationName === TWILLIO;
28
29
  const isLineIcon = integrationName === LINE;
29
30
  const isFbIcon = integrationName === FACEBOOKMESSENGER;
31
+ const isWeComIcon = integrationName === WECOM;
30
32
  const isSmall = size === sizes.SMALL;
31
33
  const isMedium = size === sizes.MEDIUM;
32
34
  const iconWrapperClass = compileClassNames({
@@ -40,7 +42,8 @@ export default function cssJSLogic(props, style) {
40
42
  [style.weChatIcon]: isWeChatIcon,
41
43
  [style.twillioIcon]: isTwillioIcon,
42
44
  [style.lineIcon]: isLineIcon,
43
- [style.fbIcon]: isFbIcon
45
+ [style.fbIcon]: isFbIcon,
46
+ [style.weComIcon]: isWeComIcon
44
47
  });
45
48
  const iconClass = compileClassNames({
46
49
  [style.small]: isSmall,
package/es/im/IMMessageMeta/css/IMMessageMeta.module.css CHANGED
@@ -48,6 +48,11 @@
48
48
  height: var(--zd_size14) ;
49
49
  }
50
50
 
51
+ .iconWrapper{
52
+ display: flex;
53
+ color: var(--imlib_chat_components_imMessageMeta_icon_color);
54
+ }
55
+
51
56
  [dir=ltr] .iconWrapper{
52
57
  margin-right: var(--zd_size4) ;
53
58
  }
package/lib/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css CHANGED
@@ -70,3 +70,9 @@
70
70
  .fontIcon :global .path2::before {
71
71
  color: var(--imlib_chat_components_imIntegrationIcon_path1_color) !important;
72
72
  }
73
+
74
+ .weComIcon{
75
+ background-color: var(
76
+ --imlib_chat_components_imIntegrationIcon_weCom_color
77
+ );
78
+ }
package/lib/im/IMIntegrationIcon/css/cssJSLogic.js CHANGED
@@ -22,7 +22,8 @@ var WHATSAPP = _integrationConstants["default"].WHATSAPP,
22
22
  WECHAT = _integrationConstants["default"].WECHAT,
23
23
  TWILLIO = _integrationConstants["default"].TWILLIO,
24
24
  LINE = _integrationConstants["default"].LINE,
25
- FACEBOOKMESSENGER = _integrationConstants["default"].FACEBOOKMESSENGER;
25
+ FACEBOOKMESSENGER = _integrationConstants["default"].FACEBOOKMESSENGER,
26
+ WECOM = _integrationConstants["default"].WECOM;
26
27
 
27
28
  function cssJSLogic(props, style) {
28
29
  var _compileClassNames, _compileClassNames2;
@@ -37,9 +38,10 @@ function cssJSLogic(props, style) {
37
38
  var isTwillioIcon = integrationName === TWILLIO;
38
39
  var isLineIcon = integrationName === LINE;
39
40
  var isFbIcon = integrationName === FACEBOOKMESSENGER;
41
+ var isWeComIcon = integrationName === WECOM;
40
42
  var isSmall = size === _sizes["default"].SMALL;
41
43
  var isMedium = size === _sizes["default"].MEDIUM;
42
- var iconWrapperClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.integrationIcon, true), _defineProperty(_compileClassNames, style.small, isSmall), _defineProperty(_compileClassNames, style.medium, isMedium), _defineProperty(_compileClassNames, style.whatsappIcon, isWhatsAppIcon), _defineProperty(_compileClassNames, style.telegramIcon, isTelegramIcon), _defineProperty(_compileClassNames, style.instagramIcon, isInstagramIcon), _defineProperty(_compileClassNames, style.asapIcon, isIMTalkIcon), _defineProperty(_compileClassNames, style.weChatIcon, isWeChatIcon), _defineProperty(_compileClassNames, style.twillioIcon, isTwillioIcon), _defineProperty(_compileClassNames, style.lineIcon, isLineIcon), _defineProperty(_compileClassNames, style.fbIcon, isFbIcon), _compileClassNames));
44
+ var iconWrapperClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.integrationIcon, true), _defineProperty(_compileClassNames, style.small, isSmall), _defineProperty(_compileClassNames, style.medium, isMedium), _defineProperty(_compileClassNames, style.whatsappIcon, isWhatsAppIcon), _defineProperty(_compileClassNames, style.telegramIcon, isTelegramIcon), _defineProperty(_compileClassNames, style.instagramIcon, isInstagramIcon), _defineProperty(_compileClassNames, style.asapIcon, isIMTalkIcon), _defineProperty(_compileClassNames, style.weChatIcon, isWeChatIcon), _defineProperty(_compileClassNames, style.twillioIcon, isTwillioIcon), _defineProperty(_compileClassNames, style.lineIcon, isLineIcon), _defineProperty(_compileClassNames, style.fbIcon, isFbIcon), _defineProperty(_compileClassNames, style.weComIcon, isWeComIcon), _compileClassNames));
43
45
  var iconClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.small, isSmall), _defineProperty(_compileClassNames2, style.medium, isMedium), _compileClassNames2));
44
46
  return {
45
47
  iconWrapperClass: iconWrapperClass,
package/lib/im/IMMessageMeta/css/IMMessageMeta.module.css CHANGED
@@ -48,6 +48,11 @@
48
48
  height: var(--zd_size14) ;
49
49
  }
50
50
 
51
+ .iconWrapper{
52
+ display: flex;
53
+ color: var(--imlib_chat_components_imMessageMeta_icon_color);
54
+ }
55
+
51
56
  [dir=ltr] .iconWrapper{
52
57
  margin-right: var(--zd_size4) ;
53
58
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohoim/chat-components",
3
- "version": "1.2.3-beta-1",
3
+ "version": "1.2.3-beta-4",
4
4
  "description": "Chat Components",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -45,8 +45,8 @@
45
45
  "@zohodesk/utils": "1.3.14",
46
46
  "@zohodesk/variables": "1.0.0",
47
47
  "@zohodesk/virtualizer": "1.0.13",
48
- "@zohoim/chat-components-hooks": "1.2.3-beta-2",
49
- "@zohoim/chat-components-utils": "1.2.3-beta-1",
48
+ "@zohoim/chat-components-hooks": "1.2.3-beta-3",
49
+ "@zohoim/chat-components-utils": "1.2.3-beta-3",
50
50
  "html-to-react": "1.7.0 ",
51
51
  "jsdom": "23.0.0",
52
52
  "react-sortable-hoc": "1.11.0",
@@ -65,8 +65,8 @@
65
65
  "@zohodesk/utils": "1.3.14",
66
66
  "@zohodesk/variables": "1.0.0",
67
67
  "@zohodesk/virtualizer": "1.0.13",
68
- "@zohoim/chat-components-hooks": "1.2.3-beta-2",
69
- "@zohoim/chat-components-utils": "1.2.3-beta-1",
68
+ "@zohoim/chat-components-hooks": "1.2.3-beta-3",
69
+ "@zohoim/chat-components-utils": "1.2.3-beta-3",
70
70
  "react-sortable-hoc": "1.11.0",
71
71
  "velocity-react": "1.4.3"
72
72
  }