@zohoim/chat-components 1.2.1 → 1.2.3-beta-3

package/README.md

@@ -10,6 +10,10 @@ In this Library, We Provide Some Basic Message Components to Build Your Chat App
 
 > import MessageBubble from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;
 
+# 1.2.3
+
+- The IMMessageMeta component has been updated to improve icon handling and display capabilities.
+
 # 1.2.1
 
 - The direction constant has been updated from "IN/OUT" to "in/out".

package/assets/Appearance/dark/mode/General_DarkMode.module.css

@@ -12,6 +12,7 @@
 	--imlib_chat_components_imIntegrationIcon_instagram_color: linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);
 	--imlib_chat_components_imIntegrationIcon_asap_color: linear-gradient(180deg, #A375FF 0%, #7732FF 100%);
 	--imlib_chat_components_imIntegrationIcon_fb_color: hsla(215, 100.00%, calc(50.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_imIntegrationIcon_weCom_color: hsla(215, 48.12%, calc(53.14% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* two tone icon colors */
 	--imlib_chat_components_imTtIcon_path0_color: rgba(255, 255, 255, 0.25);

package/assets/Appearance/light/mode/General_LightMode.module.css

@@ -12,6 +12,7 @@
 	--imlib_chat_components_imIntegrationIcon_instagram_color: linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);
 	--imlib_chat_components_imIntegrationIcon_asap_color: linear-gradient(180deg, #A375FF 0%, #7732FF 100%);
 	--imlib_chat_components_imIntegrationIcon_fb_color: hsla(215, 100.00%, calc(50.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_imIntegrationIcon_weCom_color: hsla(215, 48.12%, calc(53.14% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* two tone icon colors */
 	--imlib_chat_components_imTtIcon_path0_color: rgba(200,203,220,0.7);

package/assets/Appearance/pureDark/mode/General_PureDarkMode.module.css

@@ -12,6 +12,7 @@
 	--imlib_chat_components_imIntegrationIcon_instagram_color: linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);
 	--imlib_chat_components_imIntegrationIcon_asap_color: linear-gradient(180deg, #A375FF 0%, #7732FF 100%);
 	--imlib_chat_components_imIntegrationIcon_fb_color: hsla(215, 100.00%, calc(50.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
+	--imlib_chat_components_imIntegrationIcon_weCom_color: hsla(215, 48.12%, calc(53.14% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
 	
 	/* two tone icon colors */
 	--imlib_chat_components_imTtIcon_path0_color: rgba(255, 255, 255, 0.25);

package/es/icons/factory/common/mobile.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.082 1.35645H3.726C3.40774 1.35645 3.10252 1.48287 2.87747 1.70792C2.65243 1.93296 2.526 2.23819 2.526 2.55645V9.60045C2.526 9.91871 2.65243 10.2239 2.87747 10.449C3.10252 10.674 3.40774 10.8004 3.726 10.8004H8.082C8.40026 10.8004 8.70549 10.674 8.93053 10.449C9.15557 10.2239 9.282 9.91871 9.282 9.60045V2.55645C9.282 2.23819 9.15557 1.93296 8.93053 1.70792C8.70549 1.48287 8.40026 1.35645 8.082 1.35645ZM8.682 9.60645C8.682 9.76558 8.61879 9.91819 8.50627 10.0307C8.39374 10.1432 8.24113 10.2064 8.082 10.2064H3.726C3.56687 10.2064 3.41426 10.1432 3.30174 10.0307C3.18922 9.91819 3.126 9.76558 3.126 9.60645V2.55645C3.126 2.39732 3.18922 2.2447 3.30174 2.13218C3.41426 2.01966 3.56687 1.95645 3.726 1.95645H8.082C8.24113 1.95645 8.39374 2.01966 8.50627 2.13218C8.61879 2.2447 8.682 2.39732 8.682 2.55645V9.60645ZM6.333 9.06045C6.33241 9.14516 6.30675 9.22781 6.25925 9.29796C6.21175 9.36812 6.14454 9.42263 6.0661 9.45464C5.98766 9.48665 5.9015 9.49472 5.81848 9.47783C5.73546 9.46094 5.6593 9.41985 5.59961 9.35974C5.53991 9.29962 5.49935 9.22318 5.48304 9.14004C5.46673 9.05691 5.4754 8.9708 5.50795 8.89259C5.54051 8.81437 5.59549 8.74755 5.66598 8.70054C5.73646 8.65353 5.81928 8.62845 5.904 8.62845C5.96059 8.62844 6.01662 8.63964 6.06887 8.66139C6.12111 8.68313 6.16854 8.715 6.20842 8.75516C6.24829 8.79531 6.27983 8.84296 6.30121 8.89535C6.32259 8.94775 6.3334 9.00386 6.333 9.06045V9.06045ZM6.861 3.15945C6.861 3.23901 6.82939 3.31532 6.77313 3.37158C6.71687 3.42784 6.64057 3.45945 6.561 3.45945H5.247C5.16744 3.45945 5.09113 3.42784 5.03487 3.37158C4.97861 3.31532 4.947 3.23901 4.947 3.15945C4.947 3.07988 4.97861 3.00357 5.03487 2.94731C5.09113 2.89105 5.16744 2.85945 5.247 2.85945H6.561C6.6004 2.85945 6.63941 2.86721 6.67581 2.88228C6.7122 2.89736 6.74528 2.91946 6.77313 2.94731C6.80099 2.97517 6.82309 3.00824 6.83817 3.04464C6.85324 3.08104 6.861 3.12005 6.861 3.15945V3.15945Z" fill="#9C9FAB"/>
+</svg>

package/es/icons/iconSrc/common/Mobile.js

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import React from 'react';
+import Icon from '@zohodesk/icon/es/Icon/Icon';
+export default function IconComponent(props) {
+  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+    id: "mobile",
+    viewBox: "0 0 12 12",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8.082 1.35645H3.726C3.40774 1.35645 3.10252 1.48287 2.87747 1.70792C2.65243 1.93296 2.526 2.23819 2.526 2.55645V9.60045C2.526 9.91871 2.65243 10.2239 2.87747 10.449C3.10252 10.674 3.40774 10.8004 3.726 10.8004H8.082C8.40026 10.8004 8.70549 10.674 8.93053 10.449C9.15557 10.2239 9.282 9.91871 9.282 9.60045V2.55645C9.282 2.23819 9.15557 1.93296 8.93053 1.70792C8.70549 1.48287 8.40026 1.35645 8.082 1.35645ZM8.682 9.60645C8.682 9.76558 8.61879 9.91819 8.50627 10.0307C8.39374 10.1432 8.24113 10.2064 8.082 10.2064H3.726C3.56687 10.2064 3.41426 10.1432 3.30174 10.0307C3.18922 9.91819 3.126 9.76558 3.126 9.60645V2.55645C3.126 2.39732 3.18922 2.2447 3.30174 2.13218C3.41426 2.01966 3.56687 1.95645 3.726 1.95645H8.082C8.24113 1.95645 8.39374 2.01966 8.50627 2.13218C8.61879 2.2447 8.682 2.39732 8.682 2.55645V9.60645ZM6.333 9.06045C6.33241 9.14516 6.30675 9.22781 6.25925 9.29796C6.21175 9.36812 6.14454 9.42263 6.0661 9.45464C5.98766 9.48665 5.9015 9.49472 5.81848 9.47783C5.73546 9.46094 5.6593 9.41985 5.59961 9.35974C5.53991 9.29962 5.49935 9.22318 5.48304 9.14004C5.46673 9.05691 5.4754 8.9708 5.50795 8.89259C5.54051 8.81437 5.59549 8.74755 5.66598 8.70054C5.73646 8.65353 5.81928 8.62845 5.904 8.62845C5.96059 8.62844 6.01662 8.63964 6.06887 8.66139C6.12111 8.68313 6.16854 8.715 6.20842 8.75516C6.24829 8.79531 6.27983 8.84296 6.30121 8.89535C6.32259 8.94775 6.3334 9.00386 6.333 9.06045V9.06045ZM6.861 3.15945C6.861 3.23901 6.82939 3.31532 6.77313 3.37158C6.71687 3.42784 6.64057 3.45945 6.561 3.45945H5.247C5.16744 3.45945 5.09113 3.42784 5.03487 3.37158C4.97861 3.31532 4.947 3.23901 4.947 3.15945C4.947 3.07988 4.97861 3.00357 5.03487 2.94731C5.09113 2.89105 5.16744 2.85945 5.247 2.85945H6.561C6.6004 2.85945 6.63941 2.86721 6.67581 2.88228C6.7122 2.89736 6.74528 2.91946 6.77313 2.94731C6.80099 2.97517 6.82309 3.00824 6.83817 3.04464C6.85324 3.08104 6.861 3.12005 6.861 3.15945V3.15945Z"
+  })));
+}
+IconComponent.propTypes = Icon.propTypes;

package/es/icons/iconSrc/common/index.js

@@ -1,3 +1,4 @@
 export { default as AlertTriangle } from './AlertTriangle';
 export { default as Article } from './Article';
-export { default as Reply } from './Reply';
+export { default as Reply } from './Reply';
+export { default as Mobile } from './Mobile';

package/es/im/IMIntegrationIcon/IMIntegrationIcon.js

@@ -21,7 +21,8 @@ const {
   TWILLIO,
   LINE,
   FACEBOOKMESSENGER,
-  INSTAGRAM
+  INSTAGRAM,
+  WECOM
 } = integrationConstants;
 const fontIconMap = {
   [TWILLIO]: 'ZD-TT-imtwillio',
@@ -31,7 +32,8 @@ const fontIconMap = {
   [LINE]: 'ZD-TT-imLine',
   [IM_TALK]: 'ZD-TT-imASAP',
   [FACEBOOKMESSENGER]: 'ZD-TT-fbMessanger',
-  [INSTAGRAM]: 'ZD-TT-instagram'
+  [INSTAGRAM]: 'ZD-TT-instagram',
+  [WECOM]: 'ZD-TT-weCom'
 };
 export default function IMIntegrationIcon(props) {
   const {

package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css

@@ -70,3 +70,9 @@
 .fontIcon :global .path2::before {
   color: var(--imlib_chat_components_imIntegrationIcon_path1_color) !important;
 }
+
+.weComIcon{
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_weCom_color
+  );
+}

package/es/im/IMIntegrationIcon/css/cssJSLogic.js

@@ -12,7 +12,8 @@ const {
   WECHAT,
   TWILLIO,
   LINE,
-  FACEBOOKMESSENGER
+  FACEBOOKMESSENGER,
+  WECOM
 } = integrationConstants;
 export default function cssJSLogic(props, style) {
   const {
@@ -27,6 +28,7 @@ export default function cssJSLogic(props, style) {
   const isTwillioIcon = integrationName === TWILLIO;
   const isLineIcon = integrationName === LINE;
   const isFbIcon = integrationName === FACEBOOKMESSENGER;
+  const isWeComIcon = integrationName === WECOM;
   const isSmall = size === sizes.SMALL;
   const isMedium = size === sizes.MEDIUM;
   const iconWrapperClass = compileClassNames({
@@ -40,7 +42,8 @@ export default function cssJSLogic(props, style) {
     [style.weChatIcon]: isWeChatIcon,
     [style.twillioIcon]: isTwillioIcon,
     [style.lineIcon]: isLineIcon,
-    [style.fbIcon]: isFbIcon
+    [style.fbIcon]: isFbIcon,
+    [style.weComIcon]: isWeComIcon
   });
   const iconClass = compileClassNames({
     [style.small]: isSmall,

package/es/im/IMMessage/IMMessage.js

@@ -78,6 +78,7 @@ export default function IMMessage(props) {
     messageStatus,
     isFailedMessage,
     isSendingMessage,
+    isSentViaMobile,
     messageStatusTitle,
     isValidAttachment,
     dateTimeDetails,
@@ -102,12 +103,13 @@ export default function IMMessage(props) {
     return /*#__PURE__*/React.createElement(IMMessageMeta, _extends({
       autoMessageType: autoMessageType,
       direction: direction,
+      isSentViaMobile: isSentViaMobile,
       isValidAttachment: isValidAttachment,
       messageMetaInfoI18N: messageMetaInfoI18N,
       time: isShowMessageTime ? displayDateTime : '',
       timeTooltip: tooltip
     }, imMessageMetaProps));
-  }, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, isValidAttachment, messageMetaInfoI18N]);
+  }, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, isValidAttachment, messageMetaInfoI18N, isSentViaMobile]);
   /** ** Render Message Content *** */
 
   const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, _extends({

package/es/im/IMMessageMeta/IMMessageMeta.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /** ** Libraries *** */
-import React from 'react';
+import React, { useMemo } from 'react';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -21,8 +21,13 @@ import style from './css/IMMessageMeta.module.css';
 
 import { Container } from '@zohodesk/components/es/Layout';
 import IMMessageMetaInfo from '../IMMessageMetaInfo/IMMessageMetaInfo';
+import Mobile from '../../icons/iconSrc/common/Mobile';
+const iconMapping = {
+  mobile: Mobile
+};
 export default function IMMessageMeta(props) {
   const {
+    isSentViaMobile,
     direction,
     customStyle,
     time,
@@ -37,11 +42,14 @@ export default function IMMessageMeta(props) {
   } = customProps;
   const {
     imMessageMetaInfoTitle,
-    imMessageMetaInfoContent
+    imMessageMetaInfoContent,
+    imMessageMetaInfoIcon,
+    imMessageMetaInfoIconTitle
   } = useIMMessageMeta({
     messageMetaInfoI18N,
     autoMessageType,
-    isValidAttachment
+    isValidAttachment,
+    isSentViaMobile
   });
   /* External CSS Customization */
 
@@ -54,10 +62,19 @@ export default function IMMessageMeta(props) {
   } = cssJSLogic({
     direction
   }, newStyle);
+  const iconStyle = useMemo(() => ({
+    base: newStyle.icon
+  }), [newStyle.icon]);
+  const IconComponent = imMessageMetaInfoIcon ? iconMapping[imMessageMetaInfoIcon] : null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, imMessageMetaInfoContent || time ? /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: imMessageMetaClass
-  }, imMessageMetaInfoContent ? /*#__PURE__*/React.createElement(IMMessageMetaInfo, _extends({
+  }, IconComponent ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.iconWrapper,
+    "data-title": imMessageMetaInfoIconTitle
+  }, /*#__PURE__*/React.createElement(IconComponent, {
+    customStyle: iconStyle
+  })) : null, imMessageMetaInfoContent ? /*#__PURE__*/React.createElement(IMMessageMetaInfo, _extends({
     imMessageMetaInfoContent: imMessageMetaInfoContent,
     imMessageMetaInfoTitle: imMessageMetaInfoTitle
   }, imMessageMetaInfoProps)) : null, imMessageMetaInfoContent && time ? /*#__PURE__*/React.createElement("div", {

package/es/im/IMMessageMeta/css/IMMessageMeta.module.css

@@ -38,9 +38,20 @@
 
 .dateTime {
   font-size: var(--zd_font_size11) ;
-  /* max-width: 100px; */
-  /* display: flex; */
   max-width: var(--zd_size100) ;
   composes: dotted from '../../css/common.module.css';
   color: var(--imlib_chat_components_imMessageMeta_time_color);
 }
+
+.icon {
+  width: var(--zd_size14) ;
+  height: var(--zd_size14) ;
+}
+
+[dir=ltr] .iconWrapper{
+  margin-right: var(--zd_size4) ;
+}
+
+[dir=rtl] .iconWrapper{
+  margin-left: var(--zd_size4) ;
+}

package/lib/icons/factory/common/mobile.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.082 1.35645H3.726C3.40774 1.35645 3.10252 1.48287 2.87747 1.70792C2.65243 1.93296 2.526 2.23819 2.526 2.55645V9.60045C2.526 9.91871 2.65243 10.2239 2.87747 10.449C3.10252 10.674 3.40774 10.8004 3.726 10.8004H8.082C8.40026 10.8004 8.70549 10.674 8.93053 10.449C9.15557 10.2239 9.282 9.91871 9.282 9.60045V2.55645C9.282 2.23819 9.15557 1.93296 8.93053 1.70792C8.70549 1.48287 8.40026 1.35645 8.082 1.35645ZM8.682 9.60645C8.682 9.76558 8.61879 9.91819 8.50627 10.0307C8.39374 10.1432 8.24113 10.2064 8.082 10.2064H3.726C3.56687 10.2064 3.41426 10.1432 3.30174 10.0307C3.18922 9.91819 3.126 9.76558 3.126 9.60645V2.55645C3.126 2.39732 3.18922 2.2447 3.30174 2.13218C3.41426 2.01966 3.56687 1.95645 3.726 1.95645H8.082C8.24113 1.95645 8.39374 2.01966 8.50627 2.13218C8.61879 2.2447 8.682 2.39732 8.682 2.55645V9.60645ZM6.333 9.06045C6.33241 9.14516 6.30675 9.22781 6.25925 9.29796C6.21175 9.36812 6.14454 9.42263 6.0661 9.45464C5.98766 9.48665 5.9015 9.49472 5.81848 9.47783C5.73546 9.46094 5.6593 9.41985 5.59961 9.35974C5.53991 9.29962 5.49935 9.22318 5.48304 9.14004C5.46673 9.05691 5.4754 8.9708 5.50795 8.89259C5.54051 8.81437 5.59549 8.74755 5.66598 8.70054C5.73646 8.65353 5.81928 8.62845 5.904 8.62845C5.96059 8.62844 6.01662 8.63964 6.06887 8.66139C6.12111 8.68313 6.16854 8.715 6.20842 8.75516C6.24829 8.79531 6.27983 8.84296 6.30121 8.89535C6.32259 8.94775 6.3334 9.00386 6.333 9.06045V9.06045ZM6.861 3.15945C6.861 3.23901 6.82939 3.31532 6.77313 3.37158C6.71687 3.42784 6.64057 3.45945 6.561 3.45945H5.247C5.16744 3.45945 5.09113 3.42784 5.03487 3.37158C4.97861 3.31532 4.947 3.23901 4.947 3.15945C4.947 3.07988 4.97861 3.00357 5.03487 2.94731C5.09113 2.89105 5.16744 2.85945 5.247 2.85945H6.561C6.6004 2.85945 6.63941 2.86721 6.67581 2.88228C6.7122 2.89736 6.74528 2.91946 6.77313 2.94731C6.80099 2.97517 6.82309 3.00824 6.83817 3.04464C6.85324 3.08104 6.861 3.12005 6.861 3.15945V3.15945Z" fill="#9C9FAB"/>
+</svg>

package/lib/icons/iconSrc/common/Mobile.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = IconComponent;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("@zohodesk/icon/es/Icon/Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable */
+function IconComponent(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Icon["default"], props, /*#__PURE__*/_react["default"].createElement("svg", {
+    id: "mobile",
+    viewBox: "0 0 12 12",
+    fill: "none"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M8.082 1.35645H3.726C3.40774 1.35645 3.10252 1.48287 2.87747 1.70792C2.65243 1.93296 2.526 2.23819 2.526 2.55645V9.60045C2.526 9.91871 2.65243 10.2239 2.87747 10.449C3.10252 10.674 3.40774 10.8004 3.726 10.8004H8.082C8.40026 10.8004 8.70549 10.674 8.93053 10.449C9.15557 10.2239 9.282 9.91871 9.282 9.60045V2.55645C9.282 2.23819 9.15557 1.93296 8.93053 1.70792C8.70549 1.48287 8.40026 1.35645 8.082 1.35645ZM8.682 9.60645C8.682 9.76558 8.61879 9.91819 8.50627 10.0307C8.39374 10.1432 8.24113 10.2064 8.082 10.2064H3.726C3.56687 10.2064 3.41426 10.1432 3.30174 10.0307C3.18922 9.91819 3.126 9.76558 3.126 9.60645V2.55645C3.126 2.39732 3.18922 2.2447 3.30174 2.13218C3.41426 2.01966 3.56687 1.95645 3.726 1.95645H8.082C8.24113 1.95645 8.39374 2.01966 8.50627 2.13218C8.61879 2.2447 8.682 2.39732 8.682 2.55645V9.60645ZM6.333 9.06045C6.33241 9.14516 6.30675 9.22781 6.25925 9.29796C6.21175 9.36812 6.14454 9.42263 6.0661 9.45464C5.98766 9.48665 5.9015 9.49472 5.81848 9.47783C5.73546 9.46094 5.6593 9.41985 5.59961 9.35974C5.53991 9.29962 5.49935 9.22318 5.48304 9.14004C5.46673 9.05691 5.4754 8.9708 5.50795 8.89259C5.54051 8.81437 5.59549 8.74755 5.66598 8.70054C5.73646 8.65353 5.81928 8.62845 5.904 8.62845C5.96059 8.62844 6.01662 8.63964 6.06887 8.66139C6.12111 8.68313 6.16854 8.715 6.20842 8.75516C6.24829 8.79531 6.27983 8.84296 6.30121 8.89535C6.32259 8.94775 6.3334 9.00386 6.333 9.06045V9.06045ZM6.861 3.15945C6.861 3.23901 6.82939 3.31532 6.77313 3.37158C6.71687 3.42784 6.64057 3.45945 6.561 3.45945H5.247C5.16744 3.45945 5.09113 3.42784 5.03487 3.37158C4.97861 3.31532 4.947 3.23901 4.947 3.15945C4.947 3.07988 4.97861 3.00357 5.03487 2.94731C5.09113 2.89105 5.16744 2.85945 5.247 2.85945H6.561C6.6004 2.85945 6.63941 2.86721 6.67581 2.88228C6.7122 2.89736 6.74528 2.91946 6.77313 2.94731C6.80099 2.97517 6.82309 3.00824 6.83817 3.04464C6.85324 3.08104 6.861 3.12005 6.861 3.15945V3.15945Z"
+  })));
+}
+
+IconComponent.propTypes = _Icon["default"].propTypes;

package/lib/icons/iconSrc/common/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "Article", {
     return _Article["default"];
   }
 });
+Object.defineProperty(exports, "Mobile", {
+  enumerable: true,
+  get: function get() {
+    return _Mobile["default"];
+  }
+});
 Object.defineProperty(exports, "Reply", {
   enumerable: true,
   get: function get() {
@@ -28,4 +34,6 @@ var _Article = _interopRequireDefault(require("./Article"));
 
 var _Reply = _interopRequireDefault(require("./Reply"));
 
+var _Mobile = _interopRequireDefault(require("./Mobile"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/IMIntegrationIcon/IMIntegrationIcon.js

@@ -40,8 +40,9 @@ var WHATSAPP = _integrationConstants["default"].WHATSAPP,
     TWILLIO = _integrationConstants["default"].TWILLIO,
     LINE = _integrationConstants["default"].LINE,
     FACEBOOKMESSENGER = _integrationConstants["default"].FACEBOOKMESSENGER,
-    INSTAGRAM = _integrationConstants["default"].INSTAGRAM;
-var fontIconMap = (_fontIconMap = {}, _defineProperty(_fontIconMap, TWILLIO, 'ZD-TT-imtwillio'), _defineProperty(_fontIconMap, WHATSAPP, 'ZD-TT-whatsApp'), _defineProperty(_fontIconMap, TELEGRAM, 'ZD-TT-imTelegram'), _defineProperty(_fontIconMap, WECHAT, 'ZD-TT-imWeChat'), _defineProperty(_fontIconMap, LINE, 'ZD-TT-imLine'), _defineProperty(_fontIconMap, IM_TALK, 'ZD-TT-imASAP'), _defineProperty(_fontIconMap, FACEBOOKMESSENGER, 'ZD-TT-fbMessanger'), _defineProperty(_fontIconMap, INSTAGRAM, 'ZD-TT-instagram'), _fontIconMap);
+    INSTAGRAM = _integrationConstants["default"].INSTAGRAM,
+    WECOM = _integrationConstants["default"].WECOM;
+var fontIconMap = (_fontIconMap = {}, _defineProperty(_fontIconMap, TWILLIO, 'ZD-TT-imtwillio'), _defineProperty(_fontIconMap, WHATSAPP, 'ZD-TT-whatsApp'), _defineProperty(_fontIconMap, TELEGRAM, 'ZD-TT-imTelegram'), _defineProperty(_fontIconMap, WECHAT, 'ZD-TT-imWeChat'), _defineProperty(_fontIconMap, LINE, 'ZD-TT-imLine'), _defineProperty(_fontIconMap, IM_TALK, 'ZD-TT-imASAP'), _defineProperty(_fontIconMap, FACEBOOKMESSENGER, 'ZD-TT-fbMessanger'), _defineProperty(_fontIconMap, INSTAGRAM, 'ZD-TT-instagram'), _defineProperty(_fontIconMap, WECOM, 'ZD-TT-weCom'), _fontIconMap);
 
 function IMIntegrationIcon(props) {
   var customStyle = props.customStyle,

package/lib/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css

@@ -70,3 +70,9 @@
 .fontIcon :global .path2::before {
   color: var(--imlib_chat_components_imIntegrationIcon_path1_color) !important;
 }
+
+.weComIcon{
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_weCom_color
+  );
+}

package/lib/im/IMIntegrationIcon/css/cssJSLogic.js

@@ -22,7 +22,8 @@ var WHATSAPP = _integrationConstants["default"].WHATSAPP,
     WECHAT = _integrationConstants["default"].WECHAT,
     TWILLIO = _integrationConstants["default"].TWILLIO,
     LINE = _integrationConstants["default"].LINE,
-    FACEBOOKMESSENGER = _integrationConstants["default"].FACEBOOKMESSENGER;
+    FACEBOOKMESSENGER = _integrationConstants["default"].FACEBOOKMESSENGER,
+    WECOM = _integrationConstants["default"].WECOM;
 
 function cssJSLogic(props, style) {
   var _compileClassNames, _compileClassNames2;
@@ -37,9 +38,10 @@ function cssJSLogic(props, style) {
   var isTwillioIcon = integrationName === TWILLIO;
   var isLineIcon = integrationName === LINE;
   var isFbIcon = integrationName === FACEBOOKMESSENGER;
+  var isWeComIcon = integrationName === WECOM;
   var isSmall = size === _sizes["default"].SMALL;
   var isMedium = size === _sizes["default"].MEDIUM;
-  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));
+  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));
   var iconClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.small, isSmall), _defineProperty(_compileClassNames2, style.medium, isMedium), _compileClassNames2));
   return {
     iconWrapperClass: iconWrapperClass,

package/lib/im/IMMessage/IMMessage.js

@@ -103,6 +103,7 @@ function IMMessage(props) {
       messageStatus = _useIMMessage.messageStatus,
       isFailedMessage = _useIMMessage.isFailedMessage,
       isSendingMessage = _useIMMessage.isSendingMessage,
+      isSentViaMobile = _useIMMessage.isSentViaMobile,
       messageStatusTitle = _useIMMessage.messageStatusTitle,
       isValidAttachment = _useIMMessage.isValidAttachment,
       dateTimeDetails = _useIMMessage.dateTimeDetails,
@@ -121,12 +122,13 @@ function IMMessage(props) {
     return /*#__PURE__*/_react["default"].createElement(_IMMessageMeta["default"], _extends({
       autoMessageType: autoMessageType,
       direction: direction,
+      isSentViaMobile: isSentViaMobile,
       isValidAttachment: isValidAttachment,
       messageMetaInfoI18N: messageMetaInfoI18N,
       time: isShowMessageTime ? displayDateTime : '',
       timeTooltip: tooltip
     }, imMessageMetaProps));
-  }, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, isValidAttachment, messageMetaInfoI18N]);
+  }, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, isValidAttachment, messageMetaInfoI18N, isSentViaMobile]);
   /** ** Render Message Content *** */
 
   var handleRenderMessage = (0, _react.useCallback)(function () {

package/lib/im/IMMessageMeta/IMMessageMeta.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = IMMessageMeta;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
 
@@ -25,12 +27,23 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _IMMessageMetaInfo = _interopRequireDefault(require("../IMMessageMetaInfo/IMMessageMetaInfo"));
 
+var _Mobile = _interopRequireDefault(require("../../icons/iconSrc/common/Mobile"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+var iconMapping = {
+  mobile: _Mobile["default"]
+};
+
 function IMMessageMeta(props) {
-  var direction = props.direction,
+  var isSentViaMobile = props.isSentViaMobile,
+      direction = props.direction,
       customStyle = props.customStyle,
       time = props.time,
       timeTooltip = props.timeTooltip,
@@ -44,10 +57,13 @@ function IMMessageMeta(props) {
   var _useIMMessageMeta = (0, _useIMMessageMeta2["default"])({
     messageMetaInfoI18N: messageMetaInfoI18N,
     autoMessageType: autoMessageType,
-    isValidAttachment: isValidAttachment
+    isValidAttachment: isValidAttachment,
+    isSentViaMobile: isSentViaMobile
   }),
       imMessageMetaInfoTitle = _useIMMessageMeta.imMessageMetaInfoTitle,
-      imMessageMetaInfoContent = _useIMMessageMeta.imMessageMetaInfoContent;
+      imMessageMetaInfoContent = _useIMMessageMeta.imMessageMetaInfoContent,
+      imMessageMetaInfoIcon = _useIMMessageMeta.imMessageMetaInfoIcon,
+      imMessageMetaInfoIconTitle = _useIMMessageMeta.imMessageMetaInfoIconTitle;
   /* External CSS Customization */
 
 
@@ -60,10 +76,21 @@ function IMMessageMeta(props) {
       imMessageMetaClass = _cssJSLogic.imMessageMetaClass,
       dotClass = _cssJSLogic.dotClass;
 
+  var iconStyle = (0, _react.useMemo)(function () {
+    return {
+      base: newStyle.icon
+    };
+  }, [newStyle.icon]);
+  var IconComponent = imMessageMetaInfoIcon ? iconMapping[imMessageMetaInfoIcon] : null;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, imMessageMetaInfoContent || time ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "row",
     className: imMessageMetaClass
-  }, imMessageMetaInfoContent ? /*#__PURE__*/_react["default"].createElement(_IMMessageMetaInfo["default"], _extends({
+  }, IconComponent ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.iconWrapper,
+    "data-title": imMessageMetaInfoIconTitle
+  }, /*#__PURE__*/_react["default"].createElement(IconComponent, {
+    customStyle: iconStyle
+  })) : null, imMessageMetaInfoContent ? /*#__PURE__*/_react["default"].createElement(_IMMessageMetaInfo["default"], _extends({
     imMessageMetaInfoContent: imMessageMetaInfoContent,
     imMessageMetaInfoTitle: imMessageMetaInfoTitle
   }, imMessageMetaInfoProps)) : null, imMessageMetaInfoContent && time ? /*#__PURE__*/_react["default"].createElement("div", {

package/lib/im/IMMessageMeta/css/IMMessageMeta.module.css

@@ -38,9 +38,20 @@
 
 .dateTime {
   font-size: var(--zd_font_size11) ;
-  /* max-width: 100px; */
-  /* display: flex; */
   max-width: var(--zd_size100) ;
   composes: dotted from '../../css/common.module.css';
   color: var(--imlib_chat_components_imMessageMeta_time_color);
 }
+
+.icon {
+  width: var(--zd_size14) ;
+  height: var(--zd_size14) ;
+}
+
+[dir=ltr] .iconWrapper{
+  margin-right: var(--zd_size4) ;
+}
+
+[dir=rtl] .iconWrapper{
+  margin-left: var(--zd_size4) ;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "1.2.1",
+  "version": "1.2.3-beta-3",
   "description": "Chat Components",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -45,8 +45,8 @@
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.13",
-    "@zohoim/chat-components-hooks": "1.2.1",
-    "@zohoim/chat-components-utils": "1.2.1",
+    "@zohoim/chat-components-hooks": "1.2.3-beta-3",
+    "@zohoim/chat-components-utils": "1.2.3-beta-3",
     "html-to-react": "1.7.0 ",
     "jsdom": "23.0.0",
     "react-sortable-hoc": "1.11.0",
@@ -65,10 +65,9 @@
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.13",
-    "@zohoim/chat-components-hooks": "1.2.0",
-    "@zohoim/chat-components-utils": "1.2.0",
+    "@zohoim/chat-components-hooks": "1.2.3-beta-3",
+    "@zohoim/chat-components-utils": "1.2.3-beta-3",
     "react-sortable-hoc": "1.11.0",
     "velocity-react": "1.4.3"
-  },
-  "gitHead": "8402c45f22c981df49cfcc6c5febddfb63cc7493"
+  }
 }