@zohoim/chat-components 0.0.14 → 0.0.15

package/es/ActionIconWrapper/ActionIconWrapper.js

@@ -11,6 +11,7 @@ import actionIconWrapperPropTypes from './props/propTypes';
 /** ** Methods *** */
 
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
 /** ** Styles *** */
 
 import style from './css/ActionIconWrapper.module.css';
@@ -33,13 +34,20 @@ export default function ActionIconWrapper(props) {
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    actionIconWrapperClass
+  } = cssJSLogic({
+    isDisabled
+  }, newStyle);
   /* Render Icon */
 
   const icon = renderHandler(renderIcon)({
     id
   });
   return icon ? /*#__PURE__*/React.createElement("div", {
-    className: newStyle.actionIconWrapper,
+    className: actionIconWrapperClass,
     "data-title": title,
     onClick: onClick
   }, icon) : null;

package/es/ActionIconWrapper/css/ActionIconWrapper.module.css

@@ -25,3 +25,8 @@
   background-color: var(--imlib_chat_components_actionIconWrapper_bg_color);
   border-color: var(--imlib_chat_components_actionIconWrapper_border_color);
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}

package/es/ActionIconWrapper/css/cssJSLogic.js

@@ -0,0 +1,14 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isDisabled
+  } = props;
+  const actionIconWrapperClass = compileClassNames({
+    [style.actionIconWrapper]: true,
+    [style.disabled]: isDisabled
+  });
+  return {
+    actionIconWrapperClass
+  };
+}

package/es/AttachmentBubble/AttachmentBubble.js

@@ -40,8 +40,9 @@ export default function AttachmentBubble(props) {
   });
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
-    className: newStyle.attachmentBubble
-  }, /*#__PURE__*/React.createElement("div", {
+    className: newStyle.attachmentBubble,
+    isCover: false
+  }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.attachmentBubbleIcon
   }, /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
     fileFormat: fileFormat

package/es/AttachmentBubble/css/AttachmentBubble.module.css

@@ -1,4 +1,5 @@
 .attachmentBubble {
+  width: 100% ;
   background-color: var(--imlib_chat_components_attachmentBubble_bg_color);
   border-radius: 3px;
   border: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);

package/es/AttachmentBubbleInfo/AttachmentBubbleInfo.js

@@ -7,6 +7,9 @@ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
 import attachmentBubbleInfoDefaultProps from './props/defaultProps';
 import attachmentBubbleInfoPropTypes from './props/propTypes';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from './css/AttachmentBubbleInfo.module.css';
@@ -19,11 +22,12 @@ export default function AttachmentBubbleInfo(props) {
   /* External css customization */
 
   const newStyle = useMergeStyle(style, customStyle);
-  return /*#__PURE__*/React.createElement("div", {
-    className: newStyle.attachmentBubbleInfo
-  }, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Container, {
+    className: newStyle.attachmentBubbleInfo,
+    isCover: false
+  }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.fileName
-  }, fileName), /*#__PURE__*/React.createElement("div", {
+  }, fileName), /*#__PURE__*/React.createElement(Box, {
     className: newStyle.fileSize
   }, fileSize));
 }

package/es/AttachmentBubbleInfo/css/AttachmentBubbleInfo.module.css

@@ -20,11 +20,10 @@
 
 .fileName,
 .fileSize {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  composes: dotted from "../../css/common.module.css";
 }
 
 .attachmentBubbleInfo {
+  width: 100% ;
   /* Use this class name for css customization */
 }

package/es/AttachmentIcon/utils/getAttachmentIconComponent.js

@@ -17,6 +17,9 @@ const {
   AUDIO,
   VIDEO,
   MP3,
+  MPEG,
+  VORBIS,
+  OGG,
   M4A,
   MP4,
   HTML,
@@ -32,23 +35,26 @@ export default function getAttachmentIconComponent(_ref) {
     fileFormat
   } = _ref;
   const iconMapping = {
-    [SVG]: UnknownIcon,
+    [SVG]: CodeIcon,
     [IMAGE]: ImageIcon,
     [PDF]: PdfIcon,
     [AUDIO]: AudioIcon,
     [VIDEO]: VideoIcon,
     [MP3]: AudioIcon,
+    [MPEG]: AudioIcon,
+    [VORBIS]: AudioIcon,
+    [OGG]: AudioIcon,
     [M4A]: AudioIcon,
     [MP4]: VideoIcon,
     [HTML]: CodeIcon,
     [PSD]: UnknownIcon,
     [CSS]: CodeIcon,
     [TEXT]: TextIcon,
-    [PLAIN]: UnknownIcon,
+    [PLAIN]: TextIcon,
     [ZIP]: ZipIcon,
     [UNDEFINED]: UnknownIcon
   };
-  const IconComponent = iconMapping[fileFormat];
+  const IconComponent = iconMapping[fileFormat] || iconMapping[UNDEFINED];
   return {
     IconComponent
   };

package/es/AudioBubble/AudioBubble.js

@@ -2,17 +2,25 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /** ** Libraries *** */
 import React, { useCallback } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
 
 import audioBubbleDefaultProps from './props/defaultProps';
 import audioBubblePropTypes from './props/propTypes';
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Styles *** */
+
+import style from './css/AudioBubble.module.css';
 /** ** Components *** */
 
+import { Box } from '@zohodesk/components/es/Layout';
 import MediaBubbleWrapper from '../MediaBubbleWrapper/MediaBubbleWrapper';
 import Audio from '../Audio/Audio';
 export default function AudioBubble(props) {
   const {
+    customStyle,
     audioDetails,
     customProps
   } = props;
@@ -20,16 +28,21 @@ export default function AudioBubble(props) {
     audioProps = dummyObject,
     mediaBubbleWrapperProps = dummyObject
   } = customProps;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
   const renderMedia = useCallback(_ref => {
     let {
       fileURL,
       fileType
     } = _ref;
-    return /*#__PURE__*/React.createElement(Audio, _extends({
+    return /*#__PURE__*/React.createElement(Box, {
+      className: newStyle.audioBubble
+    }, /*#__PURE__*/React.createElement(Audio, _extends({
       fileType: fileType,
       fileURL: fileURL
-    }, audioProps));
-  }, [audioProps]);
+    }, audioProps)));
+  }, [audioProps, newStyle.audioBubble]);
   return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
     mediaDetails: audioDetails,
     renderMedia: renderMedia

package/es/AudioBubble/css/AudioBubble.module.css

@@ -0,0 +1,4 @@
+.audioBubble{
+    width: var(--zd_size360) ;
+    max-width: 100% ;
+}

package/es/AudioBubble/props/defaultProps.js

@@ -1,6 +1,7 @@
 /** ** Constants *** */
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const audioBubbleDefaultProps = {
+  customStyle: dummyObject,
   customProps: dummyObject
 };
 export default audioBubbleDefaultProps;

package/es/LocationBubble/LocationBubble.js

@@ -24,7 +24,8 @@ export default function LocationBubble(props) {
   return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
-    className: newStyle.locationBubble
+    className: newStyle.locationBubble,
+    isCover: false
   }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.imageWrapper,
     shrink: true
@@ -32,7 +33,7 @@ export default function LocationBubble(props) {
     href: locationUrl,
     rel: "noreferrer noopener",
     target: "_blank"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.image
   }))), /*#__PURE__*/React.createElement(Box, {
     className: newStyle.textWrapper,

package/es/LocationBubble/css/LocationBubble.module.css

@@ -6,10 +6,11 @@
 .locationBubble {
   white-space: nowrap;
   width: 100% ;
+  box-sizing: border-box;
   background-color: var(--imlib_chat_components_locationBubble_bg_color);
   border: 1px solid var(--imlib_chat_components_locationBubble_border_color);
   padding: var(--zd_size10) ;
-  border-radius: 3px;
+  border-radius: 3px; 
 }
 
 .image {
@@ -31,8 +32,6 @@
 
 .textLink {
   display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  composes: dotted from "../../css/common.module.css";
   color: var(--imlib_chat_components_locationBubble_color);
 }

package/es/MediaBubbleWrapper/MediaBubbleWrapper.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /** ** Libraries *** */
-import React, { useMemo } from 'react';
+import React, { useMemo, Fragment } from 'react';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -48,7 +48,7 @@ export default function MediaBubbleWrapper(props) {
     fileURL,
     fileType
   });
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, _extends({
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, _extends({
     customStyle: bubbleInfoCustomStyle,
     fileName: fileName,
     fileSize: fileSize

package/es/MediaBubbleWrapper/css/MediaBubbleWrapper.module.css

@@ -1,3 +1,7 @@
 .header {
   margin-bottom: var(--zd_size5) ;
 }
+
+.audioCont{
+  min-width: var(--zd_size300) ;
+}

package/es/MessageActions/MessageActions.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /** ** Libraries *** */
-import React, { useCallback } from 'react';
+import React, { useCallback, Fragment } from 'react';
 /** ** Components *** */
 
 import ActionIconWrapper from '../ActionIconWrapper/ActionIconWrapper';
@@ -52,6 +52,8 @@ export default function MessageActions(props) {
       e
     });
   }, [onSelect]);
+  /* External Action Icon */
+
   const renderAction = useCallback(function () {
     let {
       id,
@@ -95,7 +97,7 @@ export default function MessageActions(props) {
     renderIcon: renderMoreIcon
   }, actionIconWrapperProps)), [actionIconWrapperProps, renderMoreIcon]);
   const secondaryActions = renderHandler(renderSecondaryActions)();
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MessageActionsWrapper, _extends({
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, _extends({
     actions: allActions,
     defaultShowCount: defaultShowCount,
     renderMoreIcon: renderMore

package/es/MessageBox/MessageBox.js

@@ -11,6 +11,9 @@ import messageBoxPropTypes from './props/propTypes';
 
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from './css/MessageBox.module.css';
@@ -43,17 +46,18 @@ export default function MessageBox(props) {
   const messageConent = renderHandler(renderMessageContent)();
   const messageFooter = renderHandler(renderMessageFooter)();
   const messageStatus = renderHandler(renderMessageStatus)();
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Container, {
     className: messageBoxClass
-  }, /*#__PURE__*/React.createElement("div", {
-    className: newStyle.messageBoxInner
-  }, messageHeader ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageBoxInner,
+    flexible: true
+  }, messageHeader ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageHeaderWrapper
-  }, messageHeader) : null, messageConent ? /*#__PURE__*/React.createElement("div", {
+  }, messageHeader) : null, messageConent ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageContentWrapper
-  }, messageConent) : null, messageFooter ? /*#__PURE__*/React.createElement("div", {
+  }, messageConent) : null, messageFooter ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageFooterWrapper
-  }, messageFooter) : null), messageStatus ? /*#__PURE__*/React.createElement("div", {
+  }, messageFooter) : null), messageStatus ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageStatusWrapper
   }, messageStatus) : null);
 }

package/es/MessageBox/css/MessageBox.module.css

@@ -18,17 +18,12 @@
   /* max-width: var(--messageBox-max_width); */
   word-wrap: break-word;
   font-size: var(--messageBox-content_size);
+  box-sizing: border-box;
   background-color: var(--imlib_chat_components_messageBox_bg_color);
   padding: var(--messageBox-content_padding);
   border-radius: var(--messageBox-border_radius);
 }
 
-.messageBoxInner {
-  flex: 1 ;
-  min-width: 0 ;
-  min-height: 0 ;
-}
-
 .messageContentWrapper {
   /* Use this class for message content customization */
   line-height: 150%;

package/es/MessageBubble/MessageBubble.js

@@ -12,6 +12,9 @@ import messageBubblePropTypes from './props/propTypes';
 
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from './css/MessageBubble.module.css';
@@ -50,7 +53,7 @@ export default function MessageBubble(props) {
 
   const messageSenderRenderer = useCallback(() => {
     const messageOwner = renderHandler(renderMessageOwner)();
-    return needSender ? /*#__PURE__*/React.createElement("div", {
+    return needSender ? /*#__PURE__*/React.createElement(Box, {
       className: newStyle.messageOwnerWrapper
     }, messageOwner) : null;
   }, [renderMessageOwner, needSender, newStyle.messageOwnerWrapper]);
@@ -58,7 +61,7 @@ export default function MessageBubble(props) {
 
   const messageActionsRenderer = useCallback(() => {
     const messageActions = isRenderMessageActions ? renderHandler(renderMessageActions)() : null;
-    return messageActions ? /*#__PURE__*/React.createElement("div", {
+    return messageActions ? /*#__PURE__*/React.createElement(Box, {
       className: newStyle.messageActionWrapper
     }, messageActions) : null;
   }, [isRenderMessageActions, renderMessageActions, newStyle.messageActionWrapper]);
@@ -66,7 +69,7 @@ export default function MessageBubble(props) {
 
   const messageBoxRenderer = useCallback(() => {
     const messageBox = renderHandler(renderMessageBox)();
-    return messageBox ? /*#__PURE__*/React.createElement("div", {
+    return messageBox ? /*#__PURE__*/React.createElement(Box, {
       className: newStyle.messageBoxWrapper
     }, messageBox) : null;
   }, [renderMessageBox, newStyle.messageBoxWrapper]);
@@ -75,7 +78,7 @@ export default function MessageBubble(props) {
   const messageBoxWithActionsRenderer = useCallback(() => {
     const messageBox = messageBoxRenderer();
     const messageActions = messageActionsRenderer();
-    return messageBox || messageActions ? /*#__PURE__*/React.createElement("div", {
+    return messageBox || messageActions ? /*#__PURE__*/React.createElement(Box, {
       className: newStyle.messageContainer
     }, messageBox, messageActions) : null;
   }, [messageBoxRenderer, messageActionsRenderer, newStyle.messageContainer]);
@@ -83,13 +86,13 @@ export default function MessageBubble(props) {
 
   const messageFooterRenderer = useCallback(() => {
     const messageBoxFooter = renderHandler(renderMessageBoxFooter)();
-    return messageBoxFooter ? /*#__PURE__*/React.createElement("div", {
+    return messageBoxFooter ? /*#__PURE__*/React.createElement(Box, {
       className: newStyle.messageBoxFooterWrapper
     }, messageBoxFooter) : null;
   }, [renderMessageBoxFooter, newStyle.messageBoxFooterWrapper]);
   /* Construct Layout */
 
-  const messageLayout = /*#__PURE__*/React.createElement("div", {
+  const messageLayout = /*#__PURE__*/React.createElement(Container, {
     className: bubbleClass,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave

package/es/MoreActionItem/css/MoreActionItem.module.css

@@ -15,9 +15,7 @@
 .text {
   composes: varClass;
   font-size: var(--moreActionItem-content_size);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  composes: dotted from "../../css/common.module.css";
 }
 
 [dir=ltr] .text {

package/es/ReplyBubble/ReplyBubble.js

@@ -45,14 +45,13 @@ export default function ReplyBubble(props) {
   const iconStyle = useMemo(() => ({
     $icon: newStyle.attachmentIcon
   }), [newStyle.attachmentIcon]);
-  const renderMessage = useCallback(() =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
-  React.createElement("span", {
+  const renderMessage = useCallback( // eslint-disable-next-line no-confusing-arrow
+  () => // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
+  message ? /*#__PURE__*/React.createElement("span", {
     dangerouslySetInnerHTML: {
       __html: message
     }
-  }), [message]);
+  }) : null, [message]);
   const renderIcon = useCallback(() => {
     if (fileURL) {
       return /*#__PURE__*/React.createElement("div", {

package/es/ReplyBubble/css/ReplyBubble.module.css

@@ -1,6 +1,6 @@
 .attachmentIcon {
-  height: var(--zd_size40) ;
-  width: var(--zd_size40) ;
+  height: var(--zd_size40)  !important;
+  width: var(--zd_size40)  !important;
 }
 
 .imageWrapper {

package/es/ReplyBubbleContent/ReplyBubbleContent.js

@@ -31,18 +31,19 @@ export default function ReplyBubbleContent(props) {
   return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
-    className: newStyle.replyBubbleContent
+    className: newStyle.replyBubbleContent,
+    isCover: false
   }, icon ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.iconWrapper
   }, /*#__PURE__*/React.createElement(Container, {
     align: "both"
   }, icon)) : null, /*#__PURE__*/React.createElement(Box, {
     flexible: true
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.name
-  }, senderName), /*#__PURE__*/React.createElement("div", {
+  }, senderName), messageContent ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageWrapper
-  }, messageContent)));
+  }, messageContent) : null));
 }
 ReplyBubbleContent.propTypes = replyBubbleContentPropTypes;
 ReplyBubbleContent.defaultProps = replyBubbleContentDefaultProps;

package/es/ReplyBubbleContent/css/ReplyBubbleContent.module.css

@@ -33,10 +33,7 @@
   color: var(--imlib_chat_components_replyBubbleContent_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";
 }
 
 [dir=ltr] .iconWrapper {

package/es/ReplyBubbleHeader/ReplyBubbleHeader.js

@@ -39,14 +39,14 @@ export default function ReplyBubbleHeader(props) {
     });
   }, [iconStyle, renderCustomReplyIcon]);
   return /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row"
-  }, /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
     alignBox: "row"
   }, renderIcon(), /*#__PURE__*/React.createElement(Box, {
-    className: newStyle.replyText
-  }, replyText))), /*#__PURE__*/React.createElement("div", null, time));
+    className: newStyle.replyText,
+    flexible: true
+  }, replyText), /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.time
+  }, time));
 }
 ReplyBubbleHeader.propTypes = replyBubbleHeaderPropTypes;
 ReplyBubbleHeader.defaultProps = replyBubbleHeaderDefaultProps;

package/es/ReplyBubbleHeader/css/ReplyBubbleHeader.module.css

@@ -1,12 +1,31 @@
 .replyIcon {
-  width: var(--zd_size20) ;
-  height: var(--zd_size20) ;
+  display: flex;
+  flex-shrink: 0;
+  width: var(--zd_size20)  !important;
+  height: var(--zd_size20)  !important;
+}[dir=ltr] .replyIcon {
+  margin-right: var(--zd_size5) ;
+}[dir=rtl] .replyIcon {
+  margin-left: var(--zd_size5) ;
 }
 
 .replyText {
-  max-width: var(--zd_size100) ;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   font-size: var(--zd_font_size14) ;
 }
+
+[dir=ltr] .replyText {
+  margin-right: var(--zd_size5) ;
+}
+
+[dir=rtl] .replyText {
+  margin-left: var(--zd_size5) ;
+}
+
+.replyText,
+.time{
+  composes: dotted from "../../css/common.module.css";
+}
+
+.time{
+  max-width: 40% ;
+}

package/es/TextBubble/TextBubble.js

@@ -1,5 +1,5 @@
 /** ** Libraries *** */
-import React from 'react';
+import React, { Fragment } from 'react';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -20,7 +20,7 @@ export default function TextBubble(props) {
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
-  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: newStyle.textBubble // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
     ,
     dangerouslySetInnerHTML: {

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

@@ -11,8 +11,10 @@
 
 .textBubble a {
   color: var(--imlib_chat_components_textBubble_url_color);
+  word-break: break-word;
 }
 
 .textBubble a:hover {
-  text-decoration: underline;
+  text-decoration: underline !important;
+  /* !important for Desk css overwrite */
 }

package/es/Theme/ThemeWrapper.js

@@ -68,11 +68,11 @@ export default function ThemeWrapper(props) {
   const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
     id: "zoho-im-variables"
   }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
-  const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null), /*#__PURE__*/React.createElement(React.Fragment, null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
+  const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
     containerRef: containerRef.current,
     customStyle: tooltipCustomStyle,
     getContainerRef: getContainerRef
-  }) : null)), [getContainerRef, needTooltip, needThemeAssets, tooltipCustomStyle]);
+  }) : null), [getContainerRef, needTooltip, needThemeAssets, tooltipCustomStyle]);
   return /*#__PURE__*/React.createElement("div", _extends({
     id: styleTagId
   }, wrapperDivProps, {

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

@@ -58,7 +58,7 @@ export default {
       see_more_color: primaryBlue,
       url_color: primaryBlue
     },
-    imTicketLink: {
+    imPermaLink: {
       color: '#479dff'
     },
     imMessageMeta: {

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

@@ -34,7 +34,7 @@ export default {
       bg_color: '#232b38',
       border_color: '#2d3748'
     },
-    imTicketLink: {
+    imPermaLink: {
       color: '#45a159'
     },
     replyBubbleContent: {

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

@@ -34,7 +34,7 @@ export default {
       bg_color: '#232b38',
       border_color: '#2d3748'
     },
-    imTicketLink: {
+    imPermaLink: {
       color: '#ff801f'
     },
     replyBubbleContent: {