@zohoim/chat-components 0.0.14 → 0.0.16

package/es/icons/iconSrc/integrations/{TtTwitter.js → TtLine.js}

@@ -3,39 +3,35 @@ 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: "Layer_1",
-    "data-name": "Layer 1",
-    xmlns: "http://www.w3.org/2000/svg",
+    id: "ttLine",
     viewBox: "0 0 40 40"
-  }, " ", /*#__PURE__*/React.createElement("defs", null, " ", /*#__PURE__*/React.createElement("style", {
-    dangerouslySetInnerHTML: {
-      __html: `.cls-1{fill:#c8cadb;isolation:isolate;opacity:0.5;}.cls-2{fill:#010101;}`
-    }
-  }), " "), " ", /*#__PURE__*/React.createElement("ellipse", {
-    className: "cls-1",
+  }, " ", /*#__PURE__*/React.createElement("ellipse", {
+    fill: "#c8cadb",
+    isolation: "isolate",
+    opacity: "0.5",
     cx: "23.38",
     cy: "21.39",
     rx: "14.03",
     ry: "11.35"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-0",
-    d: "M28.79,15.92H24.94a.26.26,0,0,0-.26.26v6a.26.26,0,0,0,.26.26h3.85a.25.25,0,0,0,.26-.26v-1a.26.26,0,0,0-.26-.26H26.17v-1h2.62a.26.26,0,0,0,.26-.26v-1a.26.26,0,0,0-.26-.27H26.17v-1h2.62a.25.25,0,0,0,.26-.26v-1A.26.26,0,0,0,28.79,15.92Z"
+    d: "M28.79,15.92H24.94a.26.26,0,0,0-.26.26v6a.26.26,0,0,0,.26.26h3.85a.25.25,0,0,0,.26-.26v-1a.26.26,0,0,0-.26-.26H26.17v-1h2.62a.26.26,0,0,0,.26-.26v-1a.26.26,0,0,0-.26-.27H26.17v-1h2.62a.25.25,0,0,0,.26-.26v-1A.26.26,0,0,0,28.79,15.92Z",
+    className: "path-0"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-1",
-    d: "M14.55,20.93H11.93V16.18a.26.26,0,0,0-.26-.26h-1a.27.27,0,0,0-.27.26v6a.27.27,0,0,0,.27.26h3.85a.26.26,0,0,0,.26-.26v-1A.26.26,0,0,0,14.55,20.93Z"
+    d: "M14.55,20.93H11.93V16.18a.26.26,0,0,0-.26-.26h-1a.27.27,0,0,0-.27.26v6a.27.27,0,0,0,.27.26h3.85a.26.26,0,0,0,.26-.26v-1A.26.26,0,0,0,14.55,20.93Z",
+    className: "path-1"
   }), " ", /*#__PURE__*/React.createElement("rect", {
-    className: "cls-2",
+    fill: "#010101",
     x: "15.63",
     y: "15.92",
     width: "1.5",
     height: "6.51",
     rx: "0.26"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-2",
-    d: "M23.48,15.92h-1a.26.26,0,0,0-.26.26v3.55L19.5,16s0,0,0,0v0H18.32a.27.27,0,0,0-.26.27v6a.26.26,0,0,0,.26.26h1a.27.27,0,0,0,.27-.26V18.61l2.74,3.71s0,.05.06.06h.07a.06.06,0,0,0,.06,0h1a.25.25,0,0,0,.26-.25h0V16.18A.25.25,0,0,0,23.48,15.92Z"
+    d: "M23.48,15.92h-1a.26.26,0,0,0-.26.26v3.55L19.5,16s0,0,0,0v0H18.32a.27.27,0,0,0-.26.27v6a.26.26,0,0,0,.26.26h1a.27.27,0,0,0,.27-.26V18.61l2.74,3.71s0,.05.06.06h.07a.06.06,0,0,0,.06,0h1a.25.25,0,0,0,.26-.25h0V16.18A.25.25,0,0,0,23.48,15.92Z",
+    className: "path-2"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-3",
-    d: "M19.89,6.17c-8.56,0-15.53,5.72-15.53,12.77,0,6.31,5.47,11.61,12.94,12.59a2.06,2.06,0,0,1,.63.22,2.42,2.42,0,0,1,0,.76l-.22,1.27a1.74,1.74,0,0,0,.47,1.75,1.45,1.45,0,0,0,.92.3,3.14,3.14,0,0,0,1.17-.28C22,34.83,28.94,30.42,32,26.84a11.45,11.45,0,0,0,3.37-7.91C35.41,11.89,28.44,6.17,19.89,6.17ZM30.65,25.61h0c-2.86,3.29-9.4,7.46-11.07,8.2l.17-1a3.7,3.7,0,0,0-.1-1.79,2.51,2.51,0,0,0-2-1.29c-6.6-.88-11.4-5.4-11.4-10.77,0-6,6.13-10.9,13.67-10.9s13.66,4.89,13.66,10.9A9.61,9.61,0,0,1,30.65,25.61Z"
+    d: "M19.89,6.17c-8.56,0-15.53,5.72-15.53,12.77,0,6.31,5.47,11.61,12.94,12.59a2.06,2.06,0,0,1,.63.22,2.42,2.42,0,0,1,0,.76l-.22,1.27a1.74,1.74,0,0,0,.47,1.75,1.45,1.45,0,0,0,.92.3,3.14,3.14,0,0,0,1.17-.28C22,34.83,28.94,30.42,32,26.84a11.45,11.45,0,0,0,3.37-7.91C35.41,11.89,28.44,6.17,19.89,6.17ZM30.65,25.61h0c-2.86,3.29-9.4,7.46-11.07,8.2l.17-1a3.7,3.7,0,0,0-.1-1.79,2.51,2.51,0,0,0-2-1.29c-6.6-.88-11.4-5.4-11.4-10.77,0-6,6.13-10.9,13.67-10.9s13.66,4.89,13.66,10.9A9.61,9.61,0,0,1,30.65,25.61Z",
+    className: "path-3"
   }), " "));
 }
 IconComponent.propTypes = Icon.propTypes;

package/es/icons/iconSrc/integrations/TtTelegram.js

@@ -3,20 +3,16 @@ 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: "Layer_1",
-    "data-name": "Layer 1",
-    xmlns: "http://www.w3.org/2000/svg",
+    id: "ttTelegram",
     viewBox: "0 0 40 40"
-  }, " ", /*#__PURE__*/React.createElement("defs", null, " ", /*#__PURE__*/React.createElement("style", {
-    dangerouslySetInnerHTML: {
-      __html: `.cls-1{fill:#999;fill-rule:evenodd;}.cls-2{fill:#010101;}`
-    }
-  }), " "), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-0",
-    d: "M23.73,36.75l-7.52-7.36a1.07,1.07,0,0,1-.06-1.46l8.18-9.38a.22.22,0,0,0-.29-.32L13.46,25.84a1.07,1.07,0,0,1-1.25,0l-5.79-4.3a1.51,1.51,0,0,1,.42-2.65l24.45-8.23a1.52,1.52,0,0,1,1.94,1.87l-7,23.58A1.52,1.52,0,0,1,23.73,36.75Z"
+  }, " ", /*#__PURE__*/React.createElement("path", {
+    fill: "#999",
+    fillRule: "evenodd",
+    d: "M23.73,36.75l-7.52-7.36a1.07,1.07,0,0,1-.06-1.46l8.18-9.38a.22.22,0,0,0-.29-.32L13.46,25.84a1.07,1.07,0,0,1-1.25,0l-5.79-4.3a1.51,1.51,0,0,1,.42-2.65l24.45-8.23a1.52,1.52,0,0,1,1.94,1.87l-7,23.58A1.52,1.52,0,0,1,23.73,36.75Z",
+    className: "path-0"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-1",
-    d: "M22.79,35.19A2.51,2.51,0,0,1,21,34.47L13.51,27.1a2.06,2.06,0,0,1-.11-2.83L17.12,20,12,23.65a2,2,0,0,1-2.43,0L3.82,19.34a2.52,2.52,0,0,1-1-2.42,2.49,2.49,0,0,1,1.68-2L29,6.71a2.52,2.52,0,0,1,3.22,3.1l-7,23.57a2.51,2.51,0,0,1-1.78,1.73A2.8,2.8,0,0,1,22.79,35.19Zm-.62-21a1.22,1.22,0,0,1,.91,2l-8.17,9.37L22.43,33h0a.54.54,0,0,0,.5.13.5.5,0,0,0,.36-.35l7-23.58a.52.52,0,0,0-.66-.64L5.16,16.83a.51.51,0,0,0-.35.4.53.53,0,0,0,.2.5L10.8,22l10.66-7.61A1.16,1.16,0,0,1,22.17,14.19Zm-.59.7Z"
+    d: "M22.79,35.19A2.51,2.51,0,0,1,21,34.47L13.51,27.1a2.06,2.06,0,0,1-.11-2.83L17.12,20,12,23.65a2,2,0,0,1-2.43,0L3.82,19.34a2.52,2.52,0,0,1-1-2.42,2.49,2.49,0,0,1,1.68-2L29,6.71a2.52,2.52,0,0,1,3.22,3.1l-7,23.57a2.51,2.51,0,0,1-1.78,1.73A2.8,2.8,0,0,1,22.79,35.19Zm-.62-21a1.22,1.22,0,0,1,.91,2l-8.17,9.37L22.43,33h0a.54.54,0,0,0,.5.13.5.5,0,0,0,.36-.35l7-23.58a.52.52,0,0,0-.66-.64L5.16,16.83a.51.51,0,0,0-.35.4.53.53,0,0,0,.2.5L10.8,22l10.66-7.61A1.16,1.16,0,0,1,22.17,14.19Zm-.59.7Z",
+    className: "path-1"
   }), " "));
 }
 IconComponent.propTypes = Icon.propTypes;

package/es/icons/iconSrc/integrations/TtTwillio.js

@@ -3,34 +3,30 @@ 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: "Layer_1",
-    "data-name": "Layer 1",
-    xmlns: "http://www.w3.org/2000/svg",
+    id: "ttTwillio",
     viewBox: "0 0 40 40"
-  }, " ", /*#__PURE__*/React.createElement("defs", null, " ", /*#__PURE__*/React.createElement("style", {
-    dangerouslySetInnerHTML: {
-      __html: `.cls-1{fill:#c8cadb;isolation:isolate;opacity:0.5;}.cls-2{fill:#010101;}`
-    }
-  }), " "), " ", /*#__PURE__*/React.createElement("circle", {
-    className: "cls-1",
+  }, " ", /*#__PURE__*/React.createElement("circle", {
+    fill: "#c8cadb",
+    isolation: "isolate",
+    opacity: "0.5",
     cx: "23.21",
     cy: "23",
     r: "11.54"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-0",
-    d: "M20,4.65A15.35,15.35,0,1,0,35.35,20,15.35,15.35,0,0,0,20,4.65Zm0,28.57A13.22,13.22,0,1,1,33.22,20,13.22,13.22,0,0,1,20,33.22Z"
+    d: "M20,4.65A15.35,15.35,0,1,0,35.35,20,15.35,15.35,0,0,0,20,4.65Zm0,28.57A13.22,13.22,0,1,1,33.22,20,13.22,13.22,0,0,1,20,33.22Z",
+    className: "path-0"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-1",
-    d: "M15.61,13A3.07,3.07,0,1,0,18.67,16h0A3.07,3.07,0,0,0,15.61,13ZM16.55,16a.94.94,0,1,1-.94-.94.94.94,0,0,1,.94.94Z"
+    d: "M15.61,13A3.07,3.07,0,1,0,18.67,16h0A3.07,3.07,0,0,0,15.61,13ZM16.55,16a.94.94,0,1,1-.94-.94.94.94,0,0,1,.94.94Z",
+    className: "path-1"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-2",
-    d: "M24.51,13A3.07,3.07,0,1,0,27.57,16h0A3.07,3.07,0,0,0,24.51,13ZM25.45,16a.94.94,0,1,1-.95-.94,1,1,0,0,1,.95.93Z"
+    d: "M24.51,13A3.07,3.07,0,1,0,27.57,16h0A3.07,3.07,0,0,0,24.51,13ZM25.45,16a.94.94,0,1,1-.95-.94,1,1,0,0,1,.95.93Z",
+    className: "path-2"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-3",
-    d: "M15.61,21.25a3.07,3.07,0,1,0,3.06,3.06h0A3.06,3.06,0,0,0,15.61,21.25Zm.94,3.06a.94.94,0,0,1-.93.94h0a.94.94,0,1,1,.94-.94Z"
+    d: "M15.61,21.25a3.07,3.07,0,1,0,3.06,3.06h0A3.06,3.06,0,0,0,15.61,21.25Zm.94,3.06a.94.94,0,0,1-.93.94h0a.94.94,0,1,1,.94-.94Z",
+    className: "path-3"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-4",
-    d: "M24.51,21.25a3.07,3.07,0,1,0,3.06,3.06h0A3.06,3.06,0,0,0,24.51,21.25Zm.94,3.06a.94.94,0,0,1-.94.94h0a.94.94,0,0,1,0-1.88,1,1,0,0,1,.95.94Z"
+    d: "M24.51,21.25a3.07,3.07,0,1,0,3.06,3.06h0A3.06,3.06,0,0,0,24.51,21.25Zm.94,3.06a.94.94,0,0,1-.94.94h0a.94.94,0,0,1,0-1.88,1,1,0,0,1,.95.94Z",
+    className: "path-4"
   }), " "));
 }
 IconComponent.propTypes = Icon.propTypes;

package/es/icons/iconSrc/integrations/TtWechat.js

@@ -3,40 +3,39 @@ 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: "Layer_1",
-    "data-name": "Layer 1",
-    xmlns: "http://www.w3.org/2000/svg",
+    id: "ttWechat",
     viewBox: "0 0 40 40"
-  }, " ", /*#__PURE__*/React.createElement("defs", null, " ", /*#__PURE__*/React.createElement("style", {
-    dangerouslySetInnerHTML: {
-      __html: `.cls-1{fill:#c8cadb;isolation:isolate;opacity:0.5;}.cls-2{fill:#010101;}`
-    }
-  }), " "), " ", /*#__PURE__*/React.createElement("ellipse", {
-    className: "cls-1",
+  }, " ", /*#__PURE__*/React.createElement("ellipse", {
+    fill: "#c8cadb",
+    isolation: "isolate",
+    opacity: "0.5",
     cx: "27.55",
     cy: "23",
     rx: "7.04",
     ry: "5.69"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-0",
-    d: "M25.26,16.47C24.51,12.81,20.58,10,15.83,10c-5.28,0-9.57,3.47-9.57,7.74s4.29,7.74,9.57,7.74a11.52,11.52,0,0,0,3.67-.59,5.55,5.55,0,0,1-.34-1.9C19.16,19.9,21.74,17.28,25.26,16.47Z"
+    fill: "#c8cadb",
+    isolation: "isolate",
+    opacity: "0.5",
+    d: "M25.26,16.47C24.51,12.81,20.58,10,15.83,10c-5.28,0-9.57,3.47-9.57,7.74s4.29,7.74,9.57,7.74a11.52,11.52,0,0,0,3.67-.59,5.55,5.55,0,0,1-.34-1.9C19.16,19.9,21.74,17.28,25.26,16.47Z",
+    className: "path-0"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-1",
-    d: "M27.55,14.7h-.13C25.89,10,21,6.7,15.33,6.7c-6.92,0-12.57,4.94-12.57,11a10.24,10.24,0,0,0,3.52,7.63V31a.93.93,0,0,0,.93.93h0a.83.83,0,0,0,.49-.14l5.24-3.24a14.53,14.53,0,0,0,6.65-.44,10.12,10.12,0,0,0,8,3.66,10.31,10.31,0,0,0,1.75-.13L33.17,34a.91.91,0,0,0,.49.14.93.93,0,0,0,.93-.93V29.07a7.94,7.94,0,0,0,2.65-5.86C37.24,18.52,32.89,14.7,27.55,14.7Zm-9,11.72a12.59,12.59,0,0,1-5.63.19.93.93,0,0,0-.67.13L8.15,29.28V24.92a.93.93,0,0,0-.34-.71,8.49,8.49,0,0,1-3.18-6.5c0-5,4.8-9.14,10.7-9.14,4.7,0,8.76,2.56,10.18,6.32-4.38.82-7.66,4.24-7.66,8.32A7.59,7.59,0,0,0,18.56,26.42Zm14.49,1.51h0a.92.92,0,0,0-.34.71v2.87L30,29.82a1,1,0,0,0-.5-.14l-.17,0a9.43,9.43,0,0,1-1.75.17c-4.32,0-7.83-3-7.83-6.65s3.5-6.65,7.83-6.65,7.82,3,7.82,6.65A6.15,6.15,0,0,1,33.05,27.93Z"
+    d: "M27.55,14.7h-.13C25.89,10,21,6.7,15.33,6.7c-6.92,0-12.57,4.94-12.57,11a10.24,10.24,0,0,0,3.52,7.63V31a.93.93,0,0,0,.93.93h0a.83.83,0,0,0,.49-.14l5.24-3.24a14.53,14.53,0,0,0,6.65-.44,10.12,10.12,0,0,0,8,3.66,10.31,10.31,0,0,0,1.75-.13L33.17,34a.91.91,0,0,0,.49.14.93.93,0,0,0,.93-.93V29.07a7.94,7.94,0,0,0,2.65-5.86C37.24,18.52,32.89,14.7,27.55,14.7Zm-9,11.72a12.59,12.59,0,0,1-5.63.19.93.93,0,0,0-.67.13L8.15,29.28V24.92a.93.93,0,0,0-.34-.71,8.49,8.49,0,0,1-3.18-6.5c0-5,4.8-9.14,10.7-9.14,4.7,0,8.76,2.56,10.18,6.32-4.38.82-7.66,4.24-7.66,8.32A7.59,7.59,0,0,0,18.56,26.42Zm14.49,1.51h0a.92.92,0,0,0-.34.71v2.87L30,29.82a1,1,0,0,0-.5-.14l-.17,0a9.43,9.43,0,0,1-1.75.17c-4.32,0-7.83-3-7.83-6.65s3.5-6.65,7.83-6.65,7.82,3,7.82,6.65A6.15,6.15,0,0,1,33.05,27.93Z",
+    className: "path-1"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-2",
-    d: "M25.53,21.11a1.29,1.29,0,1,0,1.16,1.41A1.3,1.3,0,0,0,25.53,21.11Z"
+    d: "M25.53,21.11a1.29,1.29,0,1,0,1.16,1.41A1.3,1.3,0,0,0,25.53,21.11Z",
+    className: "path-2"
   }), " ", /*#__PURE__*/React.createElement("circle", {
-    className: "cls-2",
+    fill: "#010101",
     cx: "29.99",
     cy: "22.4",
     r: "1.29"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-3",
-    d: "M11.52,15.16a1.3,1.3,0,1,0,1.29,1.3A1.3,1.3,0,0,0,11.52,15.16Z"
+    d: "M11.52,15.16a1.3,1.3,0,1,0,1.29,1.3A1.3,1.3,0,0,0,11.52,15.16Z",
+    className: "path-3"
   }), " ", /*#__PURE__*/React.createElement("path", {
-    className: "path-4",
-    d: "M18,15.16a1.3,1.3,0,1,0,1.3,1.3A1.29,1.29,0,0,0,18,15.16Z"
+    d: "M18,15.16a1.3,1.3,0,1,0,1.3,1.3A1.29,1.29,0,0,0,18,15.16Z",
+    className: "path-4"
   }), " "));
 }
 IconComponent.propTypes = Icon.propTypes;

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

@@ -1,7 +1,7 @@
 export { default as ChInstagram } from './ChInstagram';
 export { default as ChWhatsApp } from './ChWhatsApp';
 export { default as TtASAP } from './TtASAP';
+export { default as TtLine } from './TtLine';
 export { default as TtTelegram } from './TtTelegram';
 export { default as TtTwillio } from './TtTwillio';
-export { default as TtTwitter } from './TtTwitter';
 export { default as TtWechat } from './TtWechat';

package/es/im/ArticleBubble/ArticleBubble.js

@@ -10,19 +10,23 @@ import articleBubbleDefaultProps from './props/defaultProps';
 import articleBubblePropTypes from './props/propTypes';
 /** ** Components *** */
 
-import { Container } from '@zohodesk/components/es/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from './css/ArticleBubble.module.css';
 /** ** Icons *** */
 
 import ArticleIcon from '../../icons/iconSrc/common/Article';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
 export default function ArticleBubble(props) {
   const {
     customStyle,
     info,
     articleDetails,
-    onClick: propOnClick
+    onClick: propOnClick,
+    isFailed
   } = props;
   const {
     title,
@@ -41,23 +45,33 @@ export default function ArticleBubble(props) {
   const iconCustomStyle = useMemo(() => ({
     base: newStyle.articleIcon
   }), [newStyle.articleIcon]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, {
+  /* css classnames added based on logic */
+
+  const {
+    articleBubbleClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
+  return /*#__PURE__*/React.createElement(Box, {
+    className: articleBubbleClass
+  }, /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
     isCover: false
-  }, /*#__PURE__*/React.createElement("div", {
-    className: newStyle.icon
   }, /*#__PURE__*/React.createElement(ArticleIcon, {
     customStyle: iconCustomStyle
-  })), /*#__PURE__*/React.createElement("div", null, info)), /*#__PURE__*/React.createElement("a", {
+  }), /*#__PURE__*/React.createElement(Box, {
+    className: style.content,
+    flexible: true
+  }, info)), /*#__PURE__*/React.createElement("a", {
     className: newStyle.articleWrapper,
     href: webUrl,
     onClick: onClick,
     rel: "noopener noreferrer",
     target: "_blank"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.title
-  }, title), /*#__PURE__*/React.createElement("div", {
+  }, title), /*#__PURE__*/React.createElement(Box, {
     className: newStyle.summary
   }, summary)));
 }

package/es/im/ArticleBubble/css/ArticleBubble.module.css

@@ -1,28 +1,32 @@
-.icon {
-  display: flex;
-}
-
 .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: var(--zd_size4) 0 var(--zd_size2) ;
+  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_color);
+  color: var(--imlib_chat_components_articleBubble_title_color);
   font-size: var(--zd_font_size15) ;
   line-height: 1.5;
-  overflow: hidden;
-  white-space: nowrap;
-  word-wrap: normal;
-  text-overflow: ellipsis;
+  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_color);
+  color: var(--imlib_chat_components_articleBubble_summary_color);
   font-size: var(--zd_font_size13) ;
   line-height: 1.5;
   max-height: var(--zd_size40) ;
@@ -33,15 +37,36 @@
   overflow: hidden;
 }
 
+.failedArticleBubbleClass .summary{
+  color: var(--imlib_chat_components_articleBubble_summary_color_failed);
+}
+
 .articleIcon {
-  width: var(--zd_size16) ;
-  height: var(--zd_size16) ;
+  display: flex;
+  flex-shrink: 0;
+  width: var(--zd_size21)  !important;
+  height: var(--zd_size21)  !important;
 }
 
 .articleIcon :global(.path-0) {
-  fill: var(--imlib_chat_components_imIntegrationIcon_path0_color);
+  /* fill: var(--imlib_chat_components_imIntegrationIcon_path0_color); */
+  fill: rgba(200,203,220,0.7);
 }
 
 .articleIcon :global(.path-1) {
-  fill: var(--imlib_chat_components_imIntegrationIcon_path1_color);
+  /* fill: var(--imlib_chat_components_imIntegrationIcon_path1_color); */
+  fill: #000;
+}
+
+.content{
+  composes: dotted from "../../css/common.module.css";
+  font-size: var(--zd_font_size13) ;
+}
+
+[dir=ltr] .content{
+  margin-left: var(--zd_size8);
 }
+
+[dir=rtl] .content{
+  margin-right: var(--zd_size8);
+}

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

@@ -0,0 +1,12 @@
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isFailed
+  } = props;
+  const articleBubbleClass = compileClassNames({
+    [style.failedArticleBubbleClass]: isFailed
+  });
+  return {
+    articleBubbleClass
+  };
+}

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

@@ -8,6 +8,7 @@ const articleBubblePropTypes = {
   }).isRequired,
   customStyle: PropTypes.object,
   info: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  isFailed: PropTypes.bool
 };
 export default articleBubblePropTypes;

package/es/im/IMAutoMessageInfo/css/IMAutoMessageInfo.module.css

@@ -9,4 +9,5 @@
   font-size: var(--imAutoMessageInfo-font_size);
   letter-spacing: var(--imAutoMessageInfo-letter_spacing);
   max-width: var(--imAutoMessageInfo-max_width);
+  color: var(--imlib_chat_components_imAutoMessageInfo_text_color);
 }

package/es/im/IMIntegrationIcon/IMIntegrationIcon.js

@@ -8,7 +8,7 @@ import InstagramIcon from '../../icons/iconSrc/integrations/ChInstagram';
 import ASAPIcon from '../../icons/iconSrc/integrations/TtASAP';
 import WeChatIcon from '../../icons/iconSrc/integrations/TtWechat';
 import TwillioIcon from '../../icons/iconSrc/integrations/TtTwillio';
-import LineIcon from '../../icons/iconSrc/integrations/TtTwitter'; // import TwitterIcon from '../icons/iconSrc/integrations/TtTwitter';
+import LineIcon from '../../icons/iconSrc/integrations/TtLine'; // import TwitterIcon from '../icons/iconSrc/integrations/TtTwitter';
 
 /** ** CSS *** */
 

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

@@ -87,9 +87,4 @@
 
 .asapIcon {
   background-color: var(--imlib_chat_components_imIntegrationIcon_asap_color);
-}
-/* .twitterIcon {
-  background-color: var(
-    --imlib_chat_components_imIntegrationIcon_twitter_color
-  );
-} */
+}

package/es/im/IMMessage/IMMessage.js

@@ -4,7 +4,11 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useCallback, useMemo } from 'react';
 /** ** Hooks *** */
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import useIMMessage from '@zohoim/chat-components-hooks/es/im/IMMessage/useIMMessage';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
 /** ** Constants *** */
 
 import imMessageDefaultProps from './props/defaultProps';
@@ -14,8 +18,12 @@ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyCon
 
 import Message from '../../Message/Message';
 import IMMessageContent from '../IMMessageContent/IMMessageContent';
-import IMTicketLink from '../IMTicketLink/IMTicketLink';
+import IMPermaLink from '../IMPermaLink/IMPermaLink';
 import IMIntegrationIcon from '../IMIntegrationIcon/IMIntegrationIcon';
+import IMMessageMeta from '../IMMessageMeta/IMMessageMeta';
+/** ** Styles *** */
+
+import style from './css/IMMessage.module.css';
 export default function IMMessage(props) {
   const {
     defaultAvatarUrls,
@@ -24,19 +32,26 @@ export default function IMMessage(props) {
     messageDisplayProps,
     actions,
     onSelectAction,
+    onMouseEnterAction,
     replyText,
     seeMoreText,
+    deleteMessageText,
+    autoMessagesI18N,
+    autoMessagesTitleI18N,
     messageStatusI18N,
     onLoadFullMessage,
     onClickReply,
     onTicketClick,
+    onMessageContentClick,
+    customStyle,
     customProps
   } = props;
   const {
     messageProps = dummyObject,
     imMessageContentProps = dummyObject,
     imTicketLinkProps = dummyObject,
-    imIntegrationIconProps = dummyObject
+    imIntegrationIconProps = dummyObject,
+    imMessageMetaProps = dummyObject
   } = customProps;
   const {
     isHighlightMessage,
@@ -44,6 +59,7 @@ export default function IMMessage(props) {
     isShowSender,
     isShowMessageTime
   } = messageDisplayProps;
+  const newStyle = useMergeStyle(style, customStyle);
   const {
     direction,
     // isBot,
@@ -55,9 +71,11 @@ export default function IMMessage(props) {
     // messageMetaType,
     // messageType,
     messageStatus,
+    isFailedMessage,
     isAgentMessage,
     messageStatusTitle,
-    createdTime,
+    dateTimeDetails,
+    autoMessageType,
     // messageId,
     ticketId,
     ticketNumber,
@@ -70,25 +88,52 @@ export default function IMMessage(props) {
   });
   /** ** Render Footer *** */
 
-  const handleRenderMessageBoxFooter = useCallback(() => isShowMessageTime ? /*#__PURE__*/React.createElement("div", null, createdTime) : null, [isShowMessageTime, createdTime]);
+  const handleRenderMessageBoxFooter = useCallback(() => {
+    const {
+      displayDateTime,
+      tooltip
+    } = dateTimeDetails || {};
+    return /*#__PURE__*/React.createElement(IMMessageMeta, _extends({
+      autoMessagesI18N: autoMessagesI18N,
+      autoMessagesTitleI18N: autoMessagesTitleI18N,
+      autoMessageType: autoMessageType,
+      direction: direction,
+      time: isShowMessageTime ? displayDateTime : '',
+      timeTooltip: tooltip
+    }, imMessageMetaProps));
+  }, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, autoMessagesI18N, autoMessagesTitleI18N]);
   /** ** Render Message Content *** */
 
   const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, _extends({
+    deleteMessageText: deleteMessageText,
+    isFailed: isFailedMessage,
     messageDetails: messageDetails,
+    onClick: onMessageContentClick,
     onClickReply: onClickReply,
     onLoadFullMessage: onLoadFullMessage,
     replyText: replyText,
     seeMoreText: seeMoreText,
     sessionDetails: sessionDetails
-  }, imMessageContentProps)), [seeMoreText, replyText, messageDetails, sessionDetails, onLoadFullMessage, onClickReply, imMessageContentProps]);
+  }, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, onMessageContentClick, onLoadFullMessage, onClickReply, isFailedMessage, imMessageContentProps]);
   /** ** Render Secondary Actions - TicketId *** */
 
-  const handleRenderSecondaryActions = useCallback(() => /*#__PURE__*/React.createElement(IMTicketLink, _extends({
-    onClick: onTicketClick,
-    ticketId: ticketId,
-    ticketNumber: ticketNumber,
-    ticketUrl: ticketUrl
-  }, imTicketLinkProps)), [ticketNumber, ticketUrl, ticketId, onTicketClick, imTicketLinkProps]);
+  const handleRenderSecondaryActions = useCallback(() => {
+    const {
+      imTicketLinkClass
+    } = cssJSLogic({
+      messageDetails
+    }, newStyle);
+    const customStyle = {
+      text: imTicketLinkClass
+    };
+    return /*#__PURE__*/React.createElement(IMPermaLink, _extends({
+      customStyle: customStyle,
+      href: ticketUrl,
+      id: ticketId,
+      onClick: onTicketClick,
+      text: ticketNumber ? `#${ticketNumber}` : ''
+    }, imTicketLinkProps));
+  }, [ticketNumber, ticketUrl, ticketId, onTicketClick, imTicketLinkProps, messageDetails, newStyle]);
   /** ** Render Owner Status Icon *** */
 
   const handleRenderIntegIcon = useCallback(() => /*#__PURE__*/React.createElement(IMIntegrationIcon, _extends({
@@ -121,6 +166,7 @@ export default function IMMessage(props) {
     isActive: isHighlightMessage,
     isShowSender: isShowSender,
     needSender: needSender,
+    onMouseEnterAction: onMouseEnterAction,
     onSelectAction: onSelectAction,
     ownerDetails: ownerDetails,
     renderContent: handleRenderMessage,

package/es/im/{IMTicketLink/css/IMTicketLink.module.css → IMMessage/css/IMMessage.module.css}

@@ -4,23 +4,33 @@
   --imTicketLink-max_width: var(--zd_size150);
 }
 
-.ticketNumber {
+.ticketLink {
   composes: varClass;
   font-size: var(--imTicketLink-font_size);
   max-width: var(--imTicketLink-max_width);
-  color: var(--imlib_chat_components_imTicketLink_color);
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   margin-top: var(--imTicketLink-top_gap);
-  cursor: pointer;
 }
 
-.disabled {
-  pointer-events: none;
+.ticketLinkRight {
+  composes: ticketLink;
 }
 
-a.ticketNumber:hover {
-  text-decoration: underline;
+[dir=ltr] .ticketLinkRight {
+  text-align: left;
+}
+
+[dir=rtl] .ticketLinkRight {
+  text-align: right;
+}
+
+.ticketLinkLeft {
+  composes: ticketLink;
+}
+
+[dir=ltr] .ticketLinkLeft {
+  text-align: right;
+}
+
+[dir=rtl] .ticketLinkLeft {
+  text-align: left;
 }

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

@@ -0,0 +1,23 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+import getMessageDirectionType from '@zohoim/chat-components-utils/es/imUtils/getMessageDirection';
+/** ** Constants *** */
+
+import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+export default function cssJSLogic(props, style) {
+  const {
+    messageDetails
+  } = props;
+  const {
+    direction
+  } = getMessageDirectionType({
+    messageDetails
+  });
+  const imTicketLinkClass = compileClassNames({
+    [style.ticketLinkLeft]: directionConstants.OUT === direction,
+    [style.ticketLinkRight]: directionConstants.IN === direction
+  });
+  return {
+    imTicketLinkClass
+  };
+}

package/es/im/IMMessage/props/defaultProps.js

@@ -6,6 +6,7 @@ const imMessageDefaultProps = {
   messageDetails: dummyObject,
   sessionDetails: dummyObject,
   messageStatusI18N: dummyObject,
-  customProps: dummyObject
+  customProps: dummyObject,
+  customStyle: dummyObject
 };
 export default imMessageDefaultProps;