@zohoim/chat-components 1.1.4 → 1.1.6-beta.1

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

@@ -0,0 +1,35 @@
+"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", {
+    viewBox: "0 0 29 29",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, " ", /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M6.79264 28.179C6.25485 28.1726 5.72811 28.0254 5.26489 27.752C4.80164 27.4789 4.41804 27.0891 4.15227 26.6215C3.8865 26.1539 3.74782 25.6248 3.75003 25.087C3.75225 24.5492 3.89527 24.0212 4.16488 23.5559L13.9607 7.09663C14.229 6.63566 14.6136 6.25317 15.076 5.9873C15.5385 5.72146 16.0626 5.58154 16.596 5.58154C17.1293 5.58154 17.6534 5.72146 18.1158 5.9873C18.5783 6.25317 18.9628 6.63566 19.2312 7.09663L29.0195 23.5634C29.2809 24.0231 29.4232 24.5408 29.4336 25.0693C29.4376 25.475 29.3613 25.8774 29.2092 26.2535C29.0573 26.6298 28.8324 26.9722 28.5476 27.2611C28.263 27.5501 27.9238 27.7799 27.5499 27.9375C27.1761 28.095 26.7748 28.1771 26.3691 28.179H6.79264ZM15.2557 7.84957L5.46747 24.3164C5.26169 24.6774 5.20635 25.1051 5.31343 25.5068C5.42052 25.9083 5.68143 26.2516 6.0397 26.4623C6.26775 26.5976 6.52749 26.6703 6.79264 26.6731H26.3691C26.7793 26.6575 27.1667 26.4813 27.4485 26.1829C27.7301 25.8844 27.8831 25.4872 27.875 25.0768C27.8722 24.8116 27.7995 24.552 27.6642 24.3239L17.9061 7.84957C17.7999 7.67397 17.6601 7.52104 17.4948 7.39959C17.3294 7.27813 17.1416 7.19054 16.9423 7.14181C16.7456 7.09174 16.5409 7.08193 16.3403 7.11299C16.1398 7.14403 15.9476 7.21531 15.7752 7.32251C15.5628 7.45463 15.3848 7.63527 15.2557 7.84957Z",
+    fill: "#AB1A18",
+    className: "path-0"
+  }), " ", /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M16.5801 19.6704C16.3804 19.6704 16.1889 19.5911 16.0477 19.45C15.9065 19.3088 15.8271 19.1172 15.8271 18.9174V13.4512C15.8271 13.2515 15.9065 13.06 16.0477 12.9188C16.1889 12.7776 16.3804 12.6982 16.5801 12.6982C16.7798 12.6982 16.9713 12.7776 17.1125 12.9188C17.2537 13.06 17.333 13.2515 17.333 13.4512V18.9174C17.333 19.1172 17.2537 19.3088 17.1125 19.45C16.9713 19.5911 16.7798 19.6704 16.5801 19.6704Z",
+    fill: "#AB1A18",
+    className: "path-1"
+  }), " ", /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M16.5801 23.5183C16.481 23.5189 16.3828 23.4999 16.291 23.4624C16.1993 23.4249 16.1159 23.3698 16.0455 23.3C15.9757 23.2296 15.9205 23.1462 15.883 23.0543C15.8456 22.9626 15.8266 22.8644 15.8272 22.7654C15.828 22.5677 15.9064 22.3785 16.0455 22.2383C16.1155 22.1677 16.1988 22.1116 16.2905 22.0734C16.3823 22.0352 16.4807 22.0156 16.5801 22.0156C16.6795 22.0156 16.7779 22.0352 16.8697 22.0734C16.9614 22.1116 17.0447 22.1677 17.1147 22.2383C17.2538 22.3785 17.3322 22.5677 17.333 22.7654C17.3312 22.8661 17.3107 22.9656 17.2728 23.059C17.2361 23.1488 17.1824 23.2305 17.1147 23.3C17.0443 23.3698 16.9609 23.4249 16.8692 23.4624C16.7774 23.4999 16.6792 23.5189 16.5801 23.5183Z",
+    fill: "#AB1A18",
+    className: "path-2"
+  }), " "));
+}
+
+IconComponent.propTypes = _Icon["default"].propTypes;

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

@@ -0,0 +1,29 @@
+"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: "article",
+    viewBox: "0 0 32 32"
+  }, " ", /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M8.28796 6.63196H21.744C22.2744 6.63196 22.7831 6.84267 23.1582 7.21774C23.5333 7.59282 23.744 8.10152 23.744 8.63196V25.36C23.744 26.1047 23.4481 26.8189 22.9215 27.3455C22.3949 27.8721 21.6807 28.168 20.936 28.168H8.79996C8.13374 28.168 7.4948 27.9033 7.02371 27.4322C6.55262 26.9611 6.28796 26.3222 6.28796 25.656V8.63196C6.28796 8.10152 6.49868 7.59282 6.87375 7.21774C7.24882 6.84267 7.75753 6.63196 8.28796 6.63196Z",
+    fill: "#DFE6F2",
+    className: "path-0"
+  }), " ", /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M18.528 19.904H8.416C8.20382 19.904 8.00034 19.8197 7.85031 19.6697C7.70028 19.5197 7.616 19.3162 7.616 19.104C7.616 18.8918 7.70028 18.6883 7.85031 18.5383C8.00034 18.3883 8.20382 18.304 8.416 18.304H18.528C18.7402 18.304 18.9437 18.3883 19.0937 18.5383C19.2437 18.6883 19.328 18.8918 19.328 19.104C19.328 19.3162 19.2437 19.5197 19.0937 19.6697C18.9437 19.8197 18.7402 19.904 18.528 19.904ZM27.28 23.776V9.792C27.28 9.57983 27.1957 9.37634 27.0457 9.22632C26.8957 9.07629 26.6922 8.992 26.48 8.992C26.2678 8.992 26.0643 9.07629 25.9143 9.22632C25.7643 9.37634 25.68 9.57983 25.68 9.792V23.776C25.6951 24.2267 25.531 24.6649 25.2236 24.9948C24.9162 25.3247 24.4906 25.5193 24.04 25.536H7.24C6.79648 25.5092 6.381 25.3101 6.08211 24.9814C5.78323 24.6526 5.62458 24.2201 5.64 23.776V6.456C5.63984 6.23441 5.72562 6.0214 5.8793 5.86176C6.03297 5.70211 6.24256 5.60828 6.464 5.6H20.6C20.8278 5.59999 21.0463 5.68992 21.2081 5.85023C21.3699 6.01053 21.4619 6.22824 21.464 6.456V20.96C21.464 21.1722 21.5483 21.3757 21.6983 21.5257C21.8483 21.6757 22.0518 21.76 22.264 21.76C22.4762 21.76 22.6797 21.6757 22.8297 21.5257C22.9797 21.3757 23.064 21.1722 23.064 20.96V6.456C23.0619 5.80389 22.8013 5.17922 22.3395 4.71886C21.8776 4.2585 21.2521 4 20.6 4H6.464C5.81189 4 5.18637 4.2585 4.72451 4.71886C4.26265 5.17922 4.00211 5.80389 4 6.456V23.776C3.985 24.651 4.31772 25.4961 4.92515 26.126C5.53257 26.756 6.36508 27.1192 7.24 27.136H24.04C24.9149 27.1192 25.7474 26.756 26.3548 26.126C26.9623 25.4961 27.295 24.651 27.28 23.776ZM14.272 12.576C14.272 12.3638 14.1877 12.1603 14.0377 12.0103C13.8877 11.8603 13.6842 11.776 13.472 11.776H8.416C8.20382 11.776 8.00034 11.8603 7.85031 12.0103C7.70028 12.1603 7.616 12.3638 7.616 12.576C7.616 12.7882 7.70028 12.9917 7.85031 13.1417C8.00034 13.2917 8.20382 13.376 8.416 13.376H13.472C13.6801 13.3761 13.88 13.2951 14.0294 13.1502C14.1787 13.0054 14.2658 12.808 14.272 12.6V12.576Z",
+    className: "path-1"
+  }), " "));
+}
+
+IconComponent.propTypes = _Icon["default"].propTypes;

package/lib/icons/iconSrc/common/Reply.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: "reply",
+    viewBox: "0 0 40 40"
+  }, " ", /*#__PURE__*/_react["default"].createElement("path", {
+    className: "path-0",
+    d: "m17.42,33.06c-.39,0-.77-.13-1.09-.39L2.51,21.35c-.41-.33-.64-.83-.64-1.35s.23-1.02.64-1.35l13.83-11.31c.52-.43,1.22-.51,1.83-.22.61.29.98.88.98,1.56v5.61c12.4.03,17.81,10.94,18.73,14.79h0c.18.75-.13,1.5-.79,1.9-.65.4-1.48.34-2.07-.15-7.56-6.34-13.96-5.65-15.88-5.24v5.74c0,.67-.38,1.27-.98,1.56-.24.11-.49.17-.74.17Zm-13.41-13.06l13.14,10.75v-5.24c0-.89.6-1.65,1.47-1.85,1.99-.45,8.98-1.35,17.12,5.17-1.43-4.56-6.94-12.59-16.81-12.55,0,0,0,0-.01,0-.44,0-.87-.18-1.19-.5-.36-.36-.57-.86-.57-1.38v-5.15l-13.14,10.75Zm31.92,9.54h0s0,0,0,0Z"
+  }), " "));
+}
+
+IconComponent.propTypes = _Icon["default"].propTypes;

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AlertTriangle", {
+  enumerable: true,
+  get: function get() {
+    return _AlertTriangle["default"];
+  }
+});
+Object.defineProperty(exports, "Article", {
+  enumerable: true,
+  get: function get() {
+    return _Article["default"];
+  }
+});
+Object.defineProperty(exports, "Reply", {
+  enumerable: true,
+  get: function get() {
+    return _Reply["default"];
+  }
+});
+
+var _AlertTriangle = _interopRequireDefault(require("./AlertTriangle"));
+
+var _Article = _interopRequireDefault(require("./Article"));
+
+var _Reply = _interopRequireDefault(require("./Reply"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/icons/iconSrc/messageStatus/Clock.js

@@ -0,0 +1,26 @@
+"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: "IM_clock",
+    viewBox: "0 0 64 64"
+  }, " ", /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M32,1C14.957,1,1,14.958,1,32s13.957,31,31,31s31-13.958,31-31S49.043,1,32,1z M32,56.792 C18.36,56.792,7.207,45.64,7.207,32S18.36,7.208,32,7.208S56.793,18.36,56.793,32S45.64,56.792,32,56.792z M33.746,16.54h-5.812 v18.622L43.619,45.33l3.164-4.874l-13.036-8.45V16.54z",
+    fill: "currentColor",
+    className: "path-0"
+  }), " "));
+}
+
+IconComponent.propTypes = _Icon["default"].propTypes;

package/lib/icons/iconSrc/messageStatus/DoubleTick.js

@@ -0,0 +1,28 @@
+"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: "IM_doubleTick",
+    viewBox: "0 0 64 64"
+  }, " ", /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "59.016,15.14 31.131,43.291 29.446,41.606 25.728,45.324 31.131,50.727 63,18.858",
+    fill: "currentColor"
+  }), " ", /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "43.758,13.273 15.872,41.424 4.718,30.269 1,33.987 15.872,48.86 47.741,16.991",
+    fill: "currentColor"
+  }), " "));
+}
+
+IconComponent.propTypes = _Icon["default"].propTypes;

package/lib/icons/iconSrc/messageStatus/Failed.js

@@ -0,0 +1,26 @@
+"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: "IM_failed",
+    viewBox: "0 0 64 64"
+  }, " ", /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M32,1C14.88,1,1,14.879,1,32s13.88,31,31,31c17.122,0,31-13.879,31-31S49.122,1,32,1z M32,47.613 c-2.475,0-4.48-2.006-4.48-4.481c0-2.474,2.006-4.481,4.48-4.481s4.48,2.006,4.48,4.481C36.48,45.607,34.475,47.613,32,47.613z M35.875,35.326h-7.75L27.126,15.81h9.751L35.875,35.326z",
+    fill: "currentColor",
+    className: "path-0"
+  }), " "));
+}
+
+IconComponent.propTypes = _Icon["default"].propTypes;

package/lib/icons/iconSrc/messageStatus/Tick.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: "IM_tick",
+    viewBox: "0 0 64 64"
+  }, " ", /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "52.215,13.447 23.139,42.8 11.508,31.169 7.632,35.046 23.139,50.553 56.368,17.324",
+    fill: "currentColor"
+  }), " "));
+}
+
+IconComponent.propTypes = _Icon["default"].propTypes;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Clock", {
+  enumerable: true,
+  get: function get() {
+    return _Clock["default"];
+  }
+});
+Object.defineProperty(exports, "DoubleTick", {
+  enumerable: true,
+  get: function get() {
+    return _DoubleTick["default"];
+  }
+});
+Object.defineProperty(exports, "Failed", {
+  enumerable: true,
+  get: function get() {
+    return _Failed["default"];
+  }
+});
+Object.defineProperty(exports, "Tick", {
+  enumerable: true,
+  get: function get() {
+    return _Tick["default"];
+  }
+});
+
+var _Clock = _interopRequireDefault(require("./Clock"));
+
+var _DoubleTick = _interopRequireDefault(require("./DoubleTick"));
+
+var _Failed = _interopRequireDefault(require("./Failed"));
+
+var _Tick = _interopRequireDefault(require("./Tick"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/ArticleBubble/ArticleBubble.js

@@ -0,0 +1,104 @@
+"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"] = ArticleBubble;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useArticleBubble2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/ArticleBubble/useArticleBubble"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _ArticleBubbleModule = _interopRequireDefault(require("./css/ArticleBubble.module.css"));
+
+var _Article = _interopRequireDefault(require("../../icons/iconSrc/common/Article"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+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; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Components *** */
+
+/** ** Styles *** */
+
+/** ** Icons *** */
+
+/** ** Methods *** */
+function ArticleBubble(props) {
+  var customStyle = props.customStyle,
+      info = props.info,
+      articleDetails = props.articleDetails,
+      propOnClick = props.onClick,
+      isFailed = props.isFailed;
+  var title = articleDetails.title,
+      summary = articleDetails.summary;
+
+  var _useArticleBubble = (0, _useArticleBubble2["default"])({
+    articleDetails: articleDetails,
+    onClick: propOnClick
+  }),
+      onClick = _useArticleBubble.onClick,
+      webUrl = _useArticleBubble.webUrl;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_ArticleBubbleModule["default"], customStyle);
+  var iconCustomStyle = (0, _react.useMemo)(function () {
+    return {
+      base: newStyle.articleIcon
+    };
+  }, [newStyle.articleIcon]);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed
+  }, newStyle),
+      articleBubbleClass = _cssJSLogic.articleBubbleClass;
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: articleBubbleClass
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "vertical",
+    alignBox: "row",
+    isCover: false
+  }, /*#__PURE__*/_react["default"].createElement(_Article["default"], {
+    customStyle: iconCustomStyle
+  }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _ArticleBubbleModule["default"].content,
+    flexible: true
+  }, info)), /*#__PURE__*/_react["default"].createElement("a", {
+    className: newStyle.articleWrapper,
+    href: webUrl,
+    onClick: onClick,
+    rel: "noopener noreferrer",
+    target: "_blank"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.title
+  }, title), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.summary
+  }, summary)));
+}
+
+ArticleBubble.propTypes = _propTypes["default"];
+ArticleBubble.defaultProps = _defaultProps["default"];
+ArticleBubble.displayName = 'ArticleBubble';

package/lib/im/ArticleBubble/css/ArticleBubble.module.css

@@ -0,0 +1,75 @@
+.articleWrapper {
+  display: block;
+  padding: var(--zd_size8) var(--zd_size10) ;
+  background-color: var(--imlib_chat_components_articleBubble_bg_color);
+  border-radius: 3px;
+  cursor: pointer;
+  border: 1px solid var(--imlib_chat_components_articleBubble_border_color);
+  margin-top: var(--zd_size4) ;
+}
+
+.failedArticleBubbleClass .articleWrapper{
+  background-color: var(--imlib_chat_components_articleBubble_bg_color_failed);
+  border-color: var(--imlib_chat_components_articleBubble_border_color_failed);
+}
+
+.title {
+  color: var(--imlib_chat_components_articleBubble_title_color);
+  font-size: var(--zd_font_size15) ;
+  line-height: 1.5;
+  composes: dotted from "../../css/common.module.css";
+  font-family: var(--zd_semibold);
+}
+
+.failedArticleBubbleClass .title{
+  color: var(--imlib_chat_components_articleBubble_title_color_failed);
+}
+
+.summary {
+  color: var(--imlib_chat_components_articleBubble_summary_color);
+  font-size: var(--zd_font_size13) ;
+  line-height: 1.5;
+  max-height: var(--zd_size40) ;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  overflow: hidden;
+}
+
+.failedArticleBubbleClass .summary{
+  color: var(--imlib_chat_components_articleBubble_summary_color_failed);
+}
+
+.articleIcon {
+  display: flex;
+  flex-shrink: 0;
+  width: var(--zd_size21)  !important;
+  height: var(--zd_size21)  !important;
+}
+
+.articleIcon :global(.path-0) {
+  fill: var(--imlib_chat_components_imTtIcon_path0_color);
+}
+
+.articleIcon :global(.path-1) {
+  fill: var(--imlib_chat_components_imTtIcon_path1_color);
+}
+
+.content{
+  composes: dotted from "../../css/common.module.css";
+  font-size: var(--zd_font_size13) ;
+  color: var(--imlib_chat_components_articleBubble_title_color);
+}
+
+[dir=ltr] .content{
+  margin-left: var(--zd_size8);
+}
+
+[dir=rtl] .content{
+  margin-right: var(--zd_size8);
+}
+
+.failedArticleBubbleClass .content{
+  color: var(--imlib_chat_components_articleBubble_title_color_failed);
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function cssJSLogic(props, style) {
+  var isFailed = props.isFailed;
+  var articleBubbleClass = (0, _utils.compileClassNames)(_defineProperty({}, style.failedArticleBubbleClass, isFailed));
+  return {
+    articleBubbleClass: articleBubbleClass
+  };
+}

package/lib/im/ArticleBubble/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ArticleBubble", {
+  enumerable: true,
+  get: function get() {
+    return _ArticleBubble["default"];
+  }
+});
+
+var _ArticleBubble = _interopRequireDefault(require("./ArticleBubble"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/ArticleBubble/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var articleBubbleDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = articleBubbleDefaultProps;
+exports["default"] = _default;

package/lib/im/ArticleBubble/props/propTypes.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var articleBubblePropTypes = {
+  articleDetails: _propTypes["default"].shape({
+    summary: _propTypes["default"].string.isRequired,
+    title: _propTypes["default"].string.isRequired,
+    webUrl: _propTypes["default"].string
+  }).isRequired,
+  customStyle: _propTypes["default"].object,
+  info: _propTypes["default"].string,
+  onClick: _propTypes["default"].func,
+  isFailed: _propTypes["default"].bool
+};
+var _default = articleBubblePropTypes;
+exports["default"] = _default;

package/lib/im/IMAttachmentHandler/IMAttachmentHandler.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = IMAttachmentHandler;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AttachmentHandler = _interopRequireDefault(require("../../AttachmentHandler/AttachmentHandler"));
+
+var _useIMAttachmentHandler = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/IMAttachmentHandler/useIMAttachmentHandler"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+function IMAttachmentHandler(props) {
+  var _props$customProps = props.customProps,
+      customProps = _props$customProps === void 0 ? _emptyConstants.dummyObject : _props$customProps,
+      iconName = props.iconName,
+      iconSize = props.iconSize,
+      iconTitle = props.iconTitle,
+      renderCustomIcon = props.renderCustomIcon,
+      isMultiAttachment = props.isMultiAttachment,
+      propOnAttach = props.onAttach,
+      attachmentType = props.attachmentType,
+      integrationServiceId = props.integrationServiceId;
+  var _customProps$attachme = customProps.attachmentHandlerProps,
+      attachmentHandlerProps = _customProps$attachme === void 0 ? _emptyConstants.dummyObject : _customProps$attachme;
+
+  var _useIMAttachmentHandl = (0, _useIMAttachmentHandler["default"])({
+    onAttach: propOnAttach,
+    attachmentType: attachmentType,
+    integrationServiceId: integrationServiceId
+  }),
+      onAttach = _useIMAttachmentHandl.onAttach,
+      supportedTypes = _useIMAttachmentHandl.supportedTypes;
+
+  return /*#__PURE__*/_react["default"].createElement(_AttachmentHandler["default"], _extends({
+    iconName: iconName,
+    iconSize: iconSize,
+    iconTitle: iconTitle,
+    isMultiAttachment: isMultiAttachment,
+    onAttach: onAttach,
+    renderCustomIcon: renderCustomIcon,
+    supportedFileTypes: supportedTypes
+  }, attachmentHandlerProps));
+}
+
+IMAttachmentHandler.propTypes = _propTypes["default"];
+IMAttachmentHandler.defaultProps = _defaultProps["default"];
+IMAttachmentHandler.displayName = 'IMAttachmentHandler';

package/lib/im/IMAttachmentHandler/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IMAttachmentHandler", {
+  enumerable: true,
+  get: function get() {
+    return _IMAttachmentHandler["default"];
+  }
+});
+
+var _IMAttachmentHandler = _interopRequireDefault(require("./IMAttachmentHandler"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/IMAttachmentHandler/props/defaultProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var imAttachmentHandlerDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  iconName: 'ZD-TT-image',
+  iconSize: '14',
+  iconTitle: 'Upload',
+  isMultiAttachment: false
+};
+var _default = imAttachmentHandlerDefaultProps;
+exports["default"] = _default;