@zohoim/chat-components 0.0.17 → 0.0.19

package/es/MessageActionsWrapper/MessageActionsWrapper.js

@@ -56,7 +56,8 @@ export default function MessageActionsWrapper(props) {
     renderMoreIcon: renderMoreIcon
   }, messageActionsMoreProps)), [moreActions, renderMoreIcon, messageActionsMoreProps]);
   const renderRow = useCallback(() => /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row"
+    alignBox: "row",
+    isCover: false
   }, renderDefaultActions(), isShowMoreIcon ? renderMoreActions() : null), [renderDefaultActions, renderMoreActions, isShowMoreIcon]);
   return /*#__PURE__*/React.createElement("div", {
     className: newStyle.messageActionsWrapper

package/es/MessageBubble/MessageBubble.js

@@ -44,7 +44,8 @@ export default function MessageBubble(props) {
   /* css classnames added based on logic */
 
   const {
-    bubbleClass
+    bubbleClass,
+    messageActionWrapperClass
   } = cssJSLogic({
     isActive,
     direction,
@@ -65,9 +66,9 @@ export default function MessageBubble(props) {
   const messageActionsRenderer = useCallback(() => {
     const messageActions = isRenderMessageActions ? renderHandler(renderMessageActions)() : null;
     return messageActions ? /*#__PURE__*/React.createElement(Box, {
-      className: newStyle.messageActionWrapper
+      className: messageActionWrapperClass
     }, messageActions) : null;
-  }, [isRenderMessageActions, renderMessageActions, newStyle.messageActionWrapper]);
+  }, [isRenderMessageActions, renderMessageActions, messageActionWrapperClass]);
   /* Message Box Render */
 
   const messageBoxRenderer = useCallback(() => {

package/es/MessageBubble/css/MessageBubble.module.css

@@ -33,8 +33,17 @@
 .messageActionWrapper {
   grid-area: messageAction;
   width: var(--zd_size78) ;
+  display: flex;
+  flex-direction: column;
 }
 
+.messageActionWrapperEnd {
+  align-items: flex-end;
+}
+
+.messageActionWrapperStart {
+  align-items: flex-start;
+}
 .messageBoxFooterWrapper {
   grid-area: messageBoxFooter;
   font-size: var(--messageBox-footer_fontSize);
@@ -69,7 +78,7 @@
   margin-inline-end: 78px;
 }
 
-.isHovered.directionIn .messageContainer{
+.isHovered.directionIn .messageContainer {
   margin-inline-end: 0;
 }
 
@@ -79,6 +88,6 @@
   margin-inline-start: 78px;
 }
 
-.isHovered.directionOut .messageContainer{
+.isHovered.directionOut .messageContainer {
   margin-inline-start: 0;
-}
+}

package/es/MessageBubble/css/cssJSLogic.js

@@ -22,7 +22,13 @@ export default function cssJSLogic(props, style) {
     [style.active]: isActive,
     [style.isHovered]: isRenderMessageActions
   });
+  const messageActionWrapperClass = compileClassNames({
+    [style.messageActionWrapper]: true,
+    [style.messageActionWrapperEnd]: isOutgoing,
+    [style.messageActionWrapperStart]: isIncoming
+  });
   return {
-    bubbleClass
+    bubbleClass,
+    messageActionWrapperClass
   };
 }

package/es/TextBubble/css/TextBubble.module.css

@@ -3,7 +3,7 @@
   color: var(--imlib_chat_components_textBubble_text_color);
 }
 
-.failedTextBubble{
+.failedTextBubble {
   color: var(--imlib_chat_components_textBubble_text_color_failed);
 }
 
@@ -14,7 +14,11 @@
   cursor: pointer;
 }
 
-.failedMoreText{
+.moreText:hover {
+  text-decoration: underline;
+}
+
+.failedMoreText {
   color: var(--imlib_chat_components_textBubble_see_more_color_failed);
 }
 
@@ -28,6 +32,6 @@
   /* !important for Desk css overwrite */
 }
 
-.failedTextBubble a{
+.failedTextBubble a {
   color: var(--imlib_chat_components_textBubble_url_color_failed);
-}
+}

package/es/Theme/themeVariables/commonThemeColorVariable.js

@@ -9,4 +9,8 @@ export const imIntegrationIcon = {
   instagram_color: 'red',
   asap_color: '#0a73eb'
 };
+export const imTtIcon = {
+  path0_color: '#ffffff40',
+  path1_color: '#fff'
+};
 export const messagetextColor = '#e2e4e6';

package/es/Theme/themeVariables/dark/blueTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -40,6 +40,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

package/es/Theme/themeVariables/dark/greenTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -40,6 +40,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

package/es/Theme/themeVariables/dark/orangeTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -40,6 +40,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

package/es/Theme/themeVariables/dark/redTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -40,6 +40,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

package/es/Theme/themeVariables/dark/yellowTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -40,6 +40,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

package/es/Theme/themeVariables/light/blueTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -39,6 +39,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

package/es/Theme/themeVariables/light/commonColorVariable.js

@@ -18,6 +18,17 @@ export const failedLine = '#ffd6d6';
 export const failedColor = '#000';
 export const failedUrlColor = '#0a73eb';
 export const imIntegrationIcon = {
+  path0_color: '#ffffff40',
+  path1_color: '#fff',
+  whatsapp_color: '#24d366',
+  telegram_color: '#4fa7d8',
+  wechat_color: '#2dc100',
+  line_color: '#01b901',
+  twillio_color: '#f22f46',
+  instagram_color: 'red',
+  asap_color: '#0a73eb'
+};
+export const imTtIcon = {
   path0_color: 'rgba(200,203,220,0.7)',
   path1_color: '#000'
 };

package/es/Theme/themeVariables/light/greenTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -39,6 +39,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

package/es/Theme/themeVariables/light/orangeTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -39,6 +39,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

package/es/Theme/themeVariables/light/redTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -39,6 +39,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -39,6 +39,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -40,6 +40,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -40,6 +40,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -40,6 +40,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -40,6 +40,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -40,6 +40,7 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
     // IMMessageContent: {},
     imMessageMeta: {

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

@@ -49,11 +49,11 @@
 }
 
 .articleIcon :global(.path-0) {
-  fill: var(--imlib_chat_components_imIntegrationIcon_path0_color);
+  fill: var(--imlib_chat_components_imTtIcon_path0_color);
 }
 
 .articleIcon :global(.path-1) {
-  fill: var(--imlib_chat_components_imIntegrationIcon_path1_color);
+  fill: var(--imlib_chat_components_imTtIcon_path1_color);
 }
 
 .content{

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

@@ -1,6 +1,6 @@
 .varClass {
-  --integrationIcon-small_height: var(--zd_size22);
-  --integrationIcon-small_width: var(--zd_size22);
+  --integrationIcon-small_height: var(--zd_size20);
+  --integrationIcon-small_width: var(--zd_size20);
   --integrationIcon-medium_height: var(--zd_size26);
   --integrationIcon-medium_width: var(--zd_size26);
 }
@@ -87,4 +87,4 @@
 
 .asapIcon {
   background-color: var(--imlib_chat_components_imIntegrationIcon_asap_color);
-}
+}

package/es/im/IMMessage/IMMessage.js

@@ -150,18 +150,22 @@ export default function IMMessage(props) {
 
   const messageCustomProps = useMemo(() => {
     const {
-      messageBubbleProps
+      customProps
     } = messageProps;
+    const {
+      messageBubbleProps
+    } = customProps;
     return { ...messageProps,
-      messageBubbleProps: {
-        renderMessageBoxFooter: handleRenderMessageBoxFooter,
-        ...messageBubbleProps
+      customProps: { ...customProps,
+        messageBubbleProps: {
+          renderMessageBoxFooter: handleRenderMessageBoxFooter,
+          ...messageBubbleProps
+        }
       }
     };
   }, [messageProps, handleRenderMessageBoxFooter]);
-  return /*#__PURE__*/React.createElement(Message, {
+  return /*#__PURE__*/React.createElement(Message, _extends({
     actions: actions,
-    customProps: messageCustomProps,
     direction: direction,
     isActive: isHighlightMessage,
     isShowSender: isShowSender,
@@ -174,7 +178,7 @@ export default function IMMessage(props) {
     renderSecondaryActions: handleRenderSecondaryActions,
     status: isAgentMessage ? messageStatus : '',
     statusTooltip: messageStatusTitle
-  });
+  }, messageCustomProps));
 }
 IMMessage.propTypes = imMessagePropTypes;
 IMMessage.defaultProps = imMessageDefaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "Chat Components",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -35,8 +35,8 @@
     "@zohodesk/utils": "1.3.9",
     "@zohodesk/variables": "1.0.0-beta.30",
     "@zohodesk/virtualizer": "1.0.13",
-    "@zohoim/chat-components-hooks": "^0.0.15",
-    "@zohoim/chat-components-utils": "^0.0.14"
+    "@zohoim/chat-components-hooks": "^0.0.17",
+    "@zohoim/chat-components-utils": "^0.0.16"
   },
   "devDependencies": {
     "@zohodesk-private/css-variable-migrator": "1.0.1",
@@ -44,5 +44,5 @@
     "jsdom": "22.1.0",
     "react-to-jsx": "1.3.2"
   },
-  "gitHead": "bb60818da98f0ee842e489c6bfb3a83a22a7485b"
+  "gitHead": "fd40ae8f16de17a0a0239b5c71c7448cf374bbca"
 }