@zohoim/chat-components 0.0.8 → 0.0.11

package/es/Theme/desk/light/yellowTheme.js

@@ -1,30 +1,37 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor } from "./commonColorVariable.js";
 import { imIntegrationIcon } from "../commonDeskColorVariable.js";
 export default {
-  library: 'chat_components',
+  library: "chat_components",
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: '#5a616f'
+      messageBox_footer_text_color: "#5a616f"
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: '#fdf8e9',
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#fcebeb',
-      text_color: '#000'
+      outgoing_bg_color: "#fdf8e9",
+      bg_color: "#f1f7fe",
+      failed_bg_color: "#fcebeb",
+      text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: '#fdf8e9',
-      border_color: '#f6e3a7'
+      bg_color: "#fdf8e9",
+      border_color: "#f6e3a7"
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: '#b68c07',
+      read_color: "#b68c07",
       failed_color: messageStatusFailedColor
+    },
+    attachmentBubble: {
+      bg_color: "#fff",
+      border_color: "#ebf0f5"
+    },
+    imTicketLink: {
+      color: "#b68c07"
     }
   }
 };

package/es/Theme/desk/pureDark/blueTheme.js

@@ -1,30 +1,41 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
+import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
 export default {
-  library: 'chat_components',
+  library: "chat_components",
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: '#5a616f'
+      messageBox_footer_text_color: "#5a616f"
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: outgoingBubbleBgColor,
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#fcebeb',
-      text_color: '#000'
+      bg_color: "#f1f7fe",
+      failed_bg_color: "#fcebeb",
+      text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: '#252d37',
-      border_color: '#2c4664'
+      bg_color: "#252d37",
+      border_color: "#2c4664"
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: '#479dff',
+      read_color: "#479dff",
       failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: "#e2e4e6",
+      fileSize_color: "#788190"
+    },
+    attachmentBubble: {
+      bg_color: "#212121",
+      border_color: "#161515"
+    },
+    imTicketLink: {
+      color: "#479dff"
     }
   }
 };

package/es/Theme/desk/pureDark/commonColorVariable.js

@@ -3,4 +3,5 @@ export const outgoingBubbleBgColor = '#2e2e2e';
 export const bubbleActiveBgColor = '#202821';
 export const actionIconColor = '#e2e4e6';
 export const messageStatusSendColor = '#61667a';
-export const messageStatusFailedColor = '#de3535';
+export const messageStatusFailedColor = '#de3535';
+export const messagetextColor = "#e2e4e6";

package/es/Theme/desk/pureDark/greenTheme.js

@@ -1,30 +1,41 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
+import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
 export default {
-  library: 'chat_components',
+  library: "chat_components",
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: '#5a616f'
+      messageBox_footer_text_color: "#5a616f"
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: outgoingBubbleBgColor,
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#fcebeb',
-      text_color: '#000'
+      bg_color: "#f1f7fe",
+      failed_bg_color: "#fcebeb",
+      text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: '#252e27',
-      border_color: '#2c4732'
+      bg_color: "#252e27",
+      border_color: "#2c4732"
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: '#45a159',
+      read_color: "#45a159",
       failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: "#e2e4e6",
+      fileSize_color: "#788190"
+    },
+    attachmentBubble: {
+      bg_color: "#212121",
+      border_color: "#161515"
+    },
+    imTicketLink: {
+      color: "#45a159"
     }
   }
 };

package/es/Theme/desk/pureDark/orangeTheme.js

@@ -1,30 +1,41 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
+import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
 export default {
-  library: 'chat_components',
+  library: "chat_components",
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: '#5a616f'
+      messageBox_footer_text_color: "#5a616f"
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: outgoingBubbleBgColor,
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#fcebeb',
-      text_color: '#000'
+      bg_color: "#f1f7fe",
+      failed_bg_color: "#fcebeb",
+      text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: '#312821',
-      border_color: '#4d3421'
+      bg_color: "#312821",
+      border_color: "#4d3421"
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: '#ff801f',
+      read_color: "#ff801f",
       failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: "#e2e4e6",
+      fileSize_color: "#788190"
+    },
+    attachmentBubble: {
+      bg_color: "#212121",
+      border_color: "#161515"
+    },
+    imTicketLink: {
+      color: "#ff801f"
     }
   }
 };

package/es/Theme/desk/pureDark/redTheme.js

@@ -1,30 +1,41 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
+import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
 export default {
-  library: 'chat_components',
+  library: "chat_components",
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: '#5a616f'
+      messageBox_footer_text_color: "#5a616f"
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: outgoingBubbleBgColor,
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#fcebeb',
-      text_color: '#000'
+      bg_color: "#f1f7fe",
+      failed_bg_color: "#fcebeb",
+      text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: '#2f2424',
-      border_color: '#492A29'
+      bg_color: "#2f2424",
+      border_color: "#492A29"
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: '#e94f4f',
+      read_color: "#e94f4f",
       failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: "#e2e4e6",
+      fileSize_color: "#788190"
+    },
+    attachmentBubble: {
+      bg_color: "#212121",
+      border_color: "#161515"
+    },
+    imTicketLink: {
+      color: "#e94f4f"
     }
   }
 };

package/es/Theme/desk/pureDark/yellowTheme.js

@@ -1,30 +1,41 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconColor } from './commonColorVariable.js';
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconColor } from "./commonColorVariable.js";
+import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
 export default {
-  library: 'chat_components',
+  library: "chat_components",
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: '#5a616f'
+      messageBox_footer_text_color: "#5a616f"
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: outgoingBubbleBgColor,
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#fcebeb',
-      text_color: '#000'
+      bg_color: "#f1f7fe",
+      failed_bg_color: "#fcebeb",
+      text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: '#2e2922',
-      border_color: '#453925'
+      bg_color: "#2e2922",
+      border_color: "#453925"
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: '#d79835',
+      read_color: "#d79835",
       failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: "#e2e4e6",
+      fileSize_color: "#788190"
+    },
+    attachmentBubble: {
+      bg_color: "#212121",
+      border_color: "#161515"
+    },
+    imTicketLink: {
+      color: "#d79835"
     }
   }
 };

package/es/VideoBubble/css/VideoBubble.module.css

@@ -1,4 +1,4 @@
 .videoBubble{
-    width: 360px;
+    width: var(--imlib_size_360);
     max-width: 100%;
 }

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

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+<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" fill="black"/>
+</svg>

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

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M9.58,14.69s-.09,.01-.14,.01c.44-2.28,1.79-4.43,3.55-6.14v-.03c.14-.63-.46-.5-.61-.46-.03,.01-.04,.01-.04,.01-.54,.28-1.07,.6-1.58,.94-3.28,2.07-6,5.69-5.93,9.6-.04,.25,.12,1.51,.12,1.51,.36,2.24,2.29,3.95,4.62,3.95,2.6,0,4.7-2.1,4.7-4.7s-2.1-4.7-4.7-4.7Z"/><path d="M22.28,14.69s-.09,.01-.14,.01c.44-2.28,1.79-4.43,3.55-6.14v-.03c.14-.63-.46-.5-.61-.46-.03,.01-.04,.01-.04,.01-.54,.28-1.07,.6-1.58,.94-3.28,2.07-6,5.69-5.93,9.6-.04,.25,.12,1.51,.12,1.51,.36,2.24,2.29,3.95,4.62,3.95,2.6,0,4.7-2.1,4.7-4.7s-2.1-4.7-4.7-4.7Z"/></svg>

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

@@ -0,0 +1,17 @@
+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", {
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, " ", /*#__PURE__*/React.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.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.propTypes;

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

@@ -0,0 +1,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",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 32"
+  }, " ", /*#__PURE__*/React.createElement("path", {
+    d: "M9.58,14.69s-.09,.01-.14,.01c.44-2.28,1.79-4.43,3.55-6.14v-.03c.14-.63-.46-.5-.61-.46-.03,.01-.04,.01-.04,.01-.54,.28-1.07,.6-1.58,.94-3.28,2.07-6,5.69-5.93,9.6-.04,.25,.12,1.51,.12,1.51,.36,2.24,2.29,3.95,4.62,3.95,2.6,0,4.7-2.1,4.7-4.7s-2.1-4.7-4.7-4.7Z",
+    className: "path-0"
+  }), " ", /*#__PURE__*/React.createElement("path", {
+    d: "M22.28,14.69s-.09,.01-.14,.01c.44-2.28,1.79-4.43,3.55-6.14v-.03c.14-.63-.46-.5-.61-.46-.03,.01-.04,.01-.04,.01-.54,.28-1.07,.6-1.58,.94-3.28,2.07-6,5.69-5.93,9.6-.04,.25,.12,1.51,.12,1.51,.36,2.24,2.29,3.95,4.62,3.95,2.6,0,4.7-2.1,4.7-4.7s-2.1-4.7-4.7-4.7Z",
+    className: "path-1"
+  }), " "));
+}
+IconComponent.propTypes = Icon.propTypes;

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

@@ -0,0 +1,2 @@
+export { default as Article } from "./Article";
+export { default as Quote } from "./Quote";

package/es/{IMArticleBubble → im/IMArticleBubble}/IMArticleBubble.js

@@ -17,8 +17,8 @@ import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
 import style from './css/IMArticleBubble.module.css';
-import useIMArticleBubble from '@zohoim/chat-components-hooks/es/IMArticleBubble/useIMArticleBubble';
-import ArticleBubble from '../ArticleBubble/ArticleBubble';
+import useIMArticleBubble from '@zohoim/chat-components-hooks/es/im/IMArticleBubble/useIMArticleBubble';
+import ArticleBubble from '../../ArticleBubble/ArticleBubble';
 export default function IMArticleBubble(props) {
   const {
     customStyle,

package/es/{IMAttachmentBubble → im/IMAttachmentBubble}/IMAttachmentBubble.js

@@ -17,9 +17,9 @@ import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
 import style from './css/IMAttachmentBubble.module.css';
-import AttachmentBubble from '../AttachmentBubble/AttachmentBubble';
+import AttachmentBubble from '../../AttachmentBubble/AttachmentBubble';
 import IMAttachmentIcon from '../IMAttachmentIcon/IMAttachmentIcon';
-import useIMAttachmentBubble from '@zohoim/chat-components-hooks/es/IMAttachmentBubble/useIMAttachmentBubble';
+import useIMAttachmentBubble from '@zohoim/chat-components-hooks/es/im/IMAttachmentBubble/useIMAttachmentBubble';
 export default function IMAttachmentBubble(props) {
   const {
     customStyle,

package/es/{IMAttachmentIcon → im/IMAttachmentIcon}/IMAttachmentIcon.js

@@ -2,32 +2,32 @@
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
-import React from 'react';
+import React from "react";
 
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
 
 /** ** Constants *** */
-import imAttachmentIconDefaultProps from './props/defaultProps';
-import imAttachmentIconPropTypes from './props/propTypes';
+import imAttachmentIconDefaultProps from "./props/defaultProps";
+import imAttachmentIconPropTypes from "./props/propTypes";
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
+import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
+import cssJSLogic from "./css/cssJSLogic";
 
 /** ** Styles *** */
-import style from './css/IMAttachmentIcon.module.css';
-import attachmentFileTypes from '@zohoim/chat-components-utils/es/constants/attachmentFileTypes';
+import style from "./css/IMAttachmentIcon.module.css";
+import attachmentFileTypes from "@zohoim/chat-components-utils/es/constants/attachmentFileTypes";
 
 /** ** Icons *** */
-import AudioIcon from '../icons/iconSrc/attachments/Audio';
-import CodeIcon from '../icons/iconSrc/attachments/Code';
-import ImageIcon from '../icons/iconSrc/attachments/Image';
-import PdfIcon from '../icons/iconSrc/attachments/Pdf';
-import TextIcon from '../icons/iconSrc/attachments/Txt';
-import UnknownIcon from '../icons/iconSrc/attachments/Unknown';
-import VideoIcon from '../icons/iconSrc/attachments/Video';
-import ZipIcon from '../icons/iconSrc/attachments/Zip';
+import AudioIcon from '../../icons/iconSrc/attachments/Audio';
+import CodeIcon from '../../icons/iconSrc/attachments/Code';
+import ImageIcon from '../../icons/iconSrc/attachments/Image';
+import PdfIcon from '../../icons/iconSrc/attachments/Pdf';
+import TextIcon from '../../icons/iconSrc/attachments/Txt';
+import UnknownIcon from '../../icons/iconSrc/attachments/Unknown';
+import VideoIcon from '../../icons/iconSrc/attachments/Video';
+import ZipIcon from '../../icons/iconSrc/attachments/Zip';
 const {
   SVG,
   IMAGE,
@@ -83,4 +83,4 @@ export default function IMAttachmentIcon(props) {
 }
 IMAttachmentIcon.propTypes = imAttachmentIconPropTypes;
 IMAttachmentIcon.defaultProps = imAttachmentIconDefaultProps;
-IMAttachmentIcon.displayName = 'IMAttachmentIcon';
+IMAttachmentIcon.displayName = "IMAttachmentIcon";

package/es/{IMAudioBubble → im/IMAudioBubble}/IMAudioBubble.js

@@ -17,8 +17,8 @@ import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
 import style from './css/IMAudioBubble.module.css';
-import AudioBubble from '../AudioBubble/AudioBubble';
-import useIMAudioBubble from '@zohoim/chat-components-hooks/es/IMAudioBubble/useIMAudioBubble';
+import AudioBubble from '../../AudioBubble/AudioBubble';
+import useIMAudioBubble from '@zohoim/chat-components-hooks/es/im/IMAudioBubble/useIMAudioBubble';
 export default function IMAudioBubble(props) {
   const {
     attachmentDetails,

package/es/im/IMAudioBubble/css/IMAudioBubble.module.css

@@ -0,0 +1,8 @@
+.imAudioBubble {
+    width: var(--imlib_size_380);
+}
+
+
+.box{
+    margin-bottom: var(--imlib_size_5);
+}

package/es/{IMAutoMessageInfo → im/IMAutoMessageInfo}/IMAutoMessageInfo.js

@@ -6,7 +6,7 @@ import React from 'react';
 
 /** ** Hooks *** */
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import useIMAutoMessageInfo from '@zohoim/chat-components-hooks/es/IMAutoMessageInfo/useIMAutoMessageInfo';
+import useIMAutoMessageInfo from '@zohoim/chat-components-hooks/es/im/IMAutoMessageInfo/useIMAutoMessageInfo';
 
 /** ** Constants *** */
 import imAutoMessageInfoDefaultProps from './props/defaultProps';

package/es/{IMDateTime → im/IMDateTime}/IMDateTime.js

@@ -6,7 +6,7 @@ import React from 'react';
 
 /** ** Hooks *** */
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import useIMDateTime from '@zohoim/chat-components-hooks/es/IMDateTime/useIMDateTime';
+import useIMDateTime from '@zohoim/chat-components-hooks/es/im/IMDateTime/useIMDateTime';
 
 /** ** Constants *** */
 import imDateTimeDefaultProps from './props/defaultProps';

package/es/im/IMDateTime/css/IMDateTime.module.css

@@ -0,0 +1,5 @@
+.imDateTime {
+  font-size: 11px;
+  /* max-width: var(--zd_size100); */
+  /* display: flex; */
+}

package/es/{IMImageBubble → im/IMImageBubble}/IMImageBubble.js

@@ -17,8 +17,8 @@ import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
 import style from './css/IMImageBubble.module.css';
-import ImageBubble from '../ImageBubble/ImageBubble';
-import useIMImageBubble from '@zohoim/chat-components-hooks/es/IMImageBubble/useIMImageBubble';
+import ImageBubble from '../../ImageBubble/ImageBubble';
+import useIMImageBubble from '@zohoim/chat-components-hooks/es/im/IMImageBubble/useIMImageBubble';
 export default function IMImageBubble(props) {
   const {
     customStyle,

package/es/{IMIntegrationIcon → im/IMIntegrationIcon}/IMIntegrationIcon.js

@@ -4,13 +4,13 @@
 import React from 'react';
 
 /** ** Icons *** */
-import WhatsappIcon from '../icons/iconSrc/integrations/ChWhatsApp';
-import TelegramIcon from '../icons/iconSrc/integrations/TtTelegram';
-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 WhatsappIcon from '../../icons/iconSrc/integrations/ChWhatsApp';
+import TelegramIcon from '../../icons/iconSrc/integrations/TtTelegram';
+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';
 
 /** ** CSS *** */

package/es/{IMLocationBubble → im/IMLocationBubble}/IMLocationBubble.js

@@ -17,8 +17,8 @@ import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
 import style from './css/IMLocationBubble.module.css';
-import useIMLocationBubble from '@zohoim/chat-components-hooks/es/IMLocationBubble/useIMLocationBubble';
-import LocationBubble from '../LocationBubble/LocationBubble';
+import useIMLocationBubble from '@zohoim/chat-components-hooks/es/im/IMLocationBubble/useIMLocationBubble';
+import LocationBubble from '../../LocationBubble/LocationBubble';
 export default function IMLocationBubble(props) {
   const {
     customStyle,

package/es/{IMMessage → im/IMMessage}/IMMessage.js

@@ -1,19 +1,19 @@
 /* eslint-disable react/jsx-no-bind */
 
 /** ** Libraries *** */
-import React from 'react';
+import React from "react";
 
 /** ** Hooks *** */
-import useIMMessage from '@zohoim/chat-components-hooks/es/IMMessage/useIMMessage';
+import useIMMessage from '@zohoim/chat-components-hooks/es/im/IMMessage/useIMMessage';
 
 /** ** Constants *** */
-import imMessageDefaultProps from './props/defaultProps';
-import imMessagePropTypes from './props/propTypes';
+import imMessageDefaultProps from "./props/defaultProps";
+import imMessagePropTypes from "./props/propTypes";
 
 /** ** Components *** */
-import Message from '../Message/Message';
-import IMMessageContent from '../IMMessageContent/IMMessageContent';
-import IMTicketLink from '../IMTicketLink/IMTicketLink';
+import Message from '../../Message/Message';
+import IMMessageContent from "../IMMessageContent/IMMessageContent";
+import IMTicketLink from "../IMTicketLink/IMTicketLink";
 export default function IMMessage(props) {
   const {
     defaultAgentAvatar,
@@ -50,7 +50,10 @@ export default function IMMessage(props) {
     renderCustomIntegrationIcon,
     renderCustomSenderAvatar,
     renderMessageFooter,
-    renderMessageHeader
+    renderMessageHeader,
+    replyText,
+    articleShareText,
+    moreText
   } = props;
   const {
     direction,
@@ -105,7 +108,10 @@ export default function IMMessage(props) {
   }
   function handleRenderMessage() {
     return /*#__PURE__*/React.createElement(IMMessageContent, {
-      messageDetails: messageDetails
+      messageDetails: messageDetails,
+      replyText: replyText,
+      articleShareText: articleShareText,
+      moreText: moreText
     });
     // return <div>{displayMessage}</div>;
   }
@@ -153,12 +159,12 @@ export default function IMMessage(props) {
     senderSrc: senderSrc,
     senderAlternateSrc: senderAlternateSrc,
     senderTitle: senderTitle,
-    senderIntegrationIcon: isShowIntegrationIcon ? integrationName : '',
+    senderIntegrationIcon: isShowIntegrationIcon ? integrationName : "",
     isFailedMessage: isFailedMessage,
     messageActions: messageActions,
     needMessageActions: needMessageActions ? messageActions.length >= 0 : false,
     onSelectAction: handleSelectAction,
-    messageStatus: isAgentMessage ? messageStatus : '',
+    messageStatus: isAgentMessage ? messageStatus : "",
     statusTitle: messageStatusTitle,
     customStyle: messageBubbleCustomStyle,
     avatarCustomStyle: avatarCustomStyle,
@@ -187,4 +193,4 @@ export default function IMMessage(props) {
 }
 IMMessage.propTypes = imMessagePropTypes;
 IMMessage.defaultProps = imMessageDefaultProps;
-IMMessage.displayName = 'IMMessage';
+IMMessage.displayName = "IMMessage";