@zohoim/chat-components 0.0.14 → 0.0.15

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

@@ -1,24 +1,18 @@
-.icon {
-  display: flex;
-}
-
 .articleWrapper {
+  display: block;
+  /* margin: 4px 0 2px; */
   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) ;
 }
 
 .title {
   color: var(--imlib_chat_components_articleBubble_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";
 }
 
 .summary {
@@ -34,14 +28,30 @@
 }
 
 .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";
+}
+
+[dir=ltr] .content{
+  margin-left: var(--zd_size8);
+}
+
+[dir=rtl] .content{
+  margin-right: var(--zd_size8);
+}

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/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,11 @@ 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';
+/** ** Styles *** */
+
+import style from './css/IMMessage.module.css';
 export default function IMMessage(props) {
   const {
     defaultAvatarUrls,
@@ -26,10 +33,12 @@ export default function IMMessage(props) {
     onSelectAction,
     replyText,
     seeMoreText,
+    deleteMessageText,
     messageStatusI18N,
     onLoadFullMessage,
     onClickReply,
     onTicketClick,
+    customStyle,
     customProps
   } = props;
   const {
@@ -44,6 +53,7 @@ export default function IMMessage(props) {
     isShowSender,
     isShowMessageTime
   } = messageDisplayProps;
+  const newStyle = useMergeStyle(style, customStyle);
   const {
     direction,
     // isBot,
@@ -74,21 +84,33 @@ export default function IMMessage(props) {
   /** ** Render Message Content *** */
 
   const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, _extends({
+    deleteMessageText: deleteMessageText,
     messageDetails: messageDetails,
     onClickReply: onClickReply,
     onLoadFullMessage: onLoadFullMessage,
     replyText: replyText,
     seeMoreText: seeMoreText,
     sessionDetails: sessionDetails
-  }, imMessageContentProps)), [seeMoreText, replyText, messageDetails, sessionDetails, onLoadFullMessage, onClickReply, imMessageContentProps]);
+  }, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, onLoadFullMessage, onClickReply, 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({

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;

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

@@ -75,13 +75,15 @@ const imMessagePropTypes = {
   onSelectAction: PropTypes.func,
   replyText: PropTypes.string,
   seeMoreText: PropTypes.string,
+  deleteMessageText: PropTypes.string,
   onLoadFullMessage: PropTypes.func,
   onClickReply: PropTypes.func,
   onTicketClick: PropTypes.func,
+  customStyle: PropTypes.object,
   customProps: PropTypes.shape({
     imIntegrationIconProps: PropTypes.object,
     imMessageContentProps: PropTypes.object,
-    imTicketLinkProps: PropTypes.object,
+    imPermaLinkProps: PropTypes.object,
     messageProps: PropTypes.object
   })
 };

package/es/im/IMMessageContent/IMMessageContent.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 /* eslint-disable react/jsx-indent */
 
 /** ** Libraries *** */
-import React, { useMemo } from 'react';
+import React, { useMemo, Fragment } from 'react';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -36,6 +36,7 @@ export default function IMMessageContent(props) {
     onClickReply,
     seeMoreText,
     replyText,
+    deleteMessageText,
     customStyle,
     customProps,
     renderCustomMessage
@@ -58,7 +59,8 @@ export default function IMMessageContent(props) {
     isShowAttachmentBubble,
     isShowLocationBubble,
     isShowTextBubble,
-    isShowCustomBubble
+    isShowCustomBubble,
+    isShowDeleteBubble
   } = useMemo(() => getIsShowBubble({
     messageDetails
   }), [messageDetails]);
@@ -72,7 +74,7 @@ export default function IMMessageContent(props) {
   } = useMemo(() => getMessageBubbleDetails({
     messageDetails
   }), [messageDetails]);
-  return /*#__PURE__*/React.createElement("div", null, isShowLayoutBubble ? null : null, isShowReplyBubble ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment, null, isShowLayoutBubble ? null : null, isShowDeleteBubble ? /*#__PURE__*/React.createElement("div", null, deleteMessageText) : null, isShowReplyBubble ? /*#__PURE__*/React.createElement("div", {
     className: newStyle.messageContentRow
   }, /*#__PURE__*/React.createElement(IMReplyBubble, _extends({
     messageDetails: replyToMessage,

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

@@ -26,6 +26,7 @@ const imMessageContentPropTypes = {
   onLoadFullMessage: PropTypes.func,
   onClickReply: PropTypes.func,
   seeMoreText: PropTypes.string,
+  deleteMessageText: PropTypes.string,
   replyText: PropTypes.string,
   renderCustomMessage: PropTypes.func,
   customStyle: PropTypes.object,

package/es/im/IMMessageMeta/css/IMMessageMeta.module.css

@@ -36,8 +36,6 @@
   /* max-width: 100px; */
   /* display: flex; */
   max-width: var(--zd_size100) ;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  composes: dotted from "../../css/common.module.css";
   color: var(--imlib_chat_components_imMessageMeta_timeColor);
 }

package/es/im/IMPermaLink/IMPermaLink.js

@@ -0,0 +1,48 @@
+/* eslint-disable @zohodesk/zsecurity/no-protocol-check */
+
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useIMPermaLink from '@zohoim/chat-components-hooks/es/im/IMPermaLink/useIMPermaLink';
+/** ** Constants *** */
+
+import imPermaLinkDefaultProps from './props/defaultProps';
+import imPermaLinkPropTypes from './props/propTypes';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
+/** ** Styles *** */
+
+import style from './css/IMPermaLink.module.css';
+export default function IMPermaLink(props) {
+  const {
+    customStyle,
+    isDisabled
+  } = props;
+  const {
+    href,
+    onClick,
+    text
+  } = useIMPermaLink(props);
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+
+  const {
+    imPermaLinkClass
+  } = cssJSLogic({
+    isDisabled
+  }, newStyle);
+  return text ? /*#__PURE__*/React.createElement("a", {
+    className: imPermaLinkClass,
+    href: href,
+    onClick: onClick,
+    rel: "noopener noreferrer"
+  }, text) : null;
+}
+IMPermaLink.propTypes = imPermaLinkPropTypes;
+IMPermaLink.defaultProps = imPermaLinkDefaultProps;
+IMPermaLink.displayName = 'IMPermaLink';

package/es/im/IMPermaLink/css/IMPermaLink.module.css

@@ -0,0 +1,14 @@
+.text {
+  color: var(--imlib_chat_components_imPermaLink_color);
+  display: block;
+  composes: dotted from '../../css/common.module.css';
+  cursor: pointer;
+}
+
+.disabled {
+  pointer-events: none;
+}
+
+a.text:hover {
+  text-decoration: underline;
+}

package/es/im/{IMTicketLink → IMPermaLink}/css/cssJSLogic.js

@@ -4,11 +4,11 @@ export default function cssJSLogic(props, style) {
   const {
     isDisabled
   } = props;
-  const imTicketLinkClass = compileClassNames({
-    [style.ticketNumber]: true,
+  const imPermaLinkClass = compileClassNames({
+    [style.text]: true,
     [style.disabled]: isDisabled === true
   });
   return {
-    imTicketLinkClass
+    imPermaLinkClass
   };
 }

package/es/im/IMPermaLink/index.js

@@ -0,0 +1 @@
+export { default as IMPermaLink } from './IMPermaLink';

package/es/im/{IMTicketLink → IMPermaLink}/props/defaultProps.js

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

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

@@ -0,0 +1,11 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imPermaLinkPropTypes = {
+  text: PropTypes.string.isRequired,
+  customStyle: PropTypes.object,
+  isDisabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  id: PropTypes.string,
+  href: PropTypes.string
+};
+export default imPermaLinkPropTypes;

package/es/im/css/common.module.css

@@ -0,0 +1,6 @@
+.dotted {
+    overflow: hidden;
+    white-space: nowrap;
+    word-wrap: normal;
+    text-overflow: ellipsis;
+}

package/es/im/index.js

@@ -1,6 +1,6 @@
 export * from './IMIntegrationIcon';
 export * from './IMMessage';
-export * from './IMTicketLink';
+export * from './IMPermaLink';
 export * from './IMMessageMeta';
 export * from './IMAutoMessageInfo';
 export * from './IMMessageContent';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "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.12",
-    "@zohoim/chat-components-utils": "^0.0.11"
+    "@zohoim/chat-components-hooks": "^0.0.13",
+    "@zohoim/chat-components-utils": "^0.0.12"
   },
   "devDependencies": {
     "@zohodesk-private/css-variable-migrator": "1.0.1",
@@ -61,5 +61,5 @@
       "cssVariableReplacementConfig": "../../node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
     }
   },
-  "gitHead": "de72d83a0b40cde9b34b122654601ec5c23c8e55"
+  "gitHead": "0b3fa05803c74cad58e84613fc54c979493192c0"
 }

package/es/icons/factory/integrations/ttTwitter.svg

@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#c8cadb;isolation:isolate;opacity:0.5;}.cls-2{fill:#010101;}</style></defs><ellipse class="cls-1" cx="23.38" cy="21.39" rx="14.03" ry="11.35"/><path class="cls-2" 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"/><path class="cls-2" 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"/><rect class="cls-2" x="15.63" y="15.92" width="1.5" height="6.51" rx="0.26"/><path class="cls-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"/><path class="cls-2" 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"/></svg>

package/es/im/IMTicketLink/IMTicketLink.js

@@ -1,48 +0,0 @@
-/* eslint-disable @zohodesk/zsecurity/no-protocol-check */
-
-/** ** Libraries *** */
-import React from 'react';
-/** ** Hooks *** */
-
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import useIMTicketLink from '@zohoim/chat-components-hooks/es/im/IMTicketLink/useIMTicketLink';
-/** ** Constants *** */
-
-import imTicketLinkDefaultProps from './props/defaultProps';
-import imTicketLinkPropTypes from './props/propTypes';
-/** ** Methods *** */
-
-import cssJSLogic from './css/cssJSLogic';
-/** ** Styles *** */
-
-import style from './css/IMTicketLink.module.css';
-export default function IMTicketLink(props) {
-  const {
-    customStyle,
-    isDisabled
-  } = props;
-  const {
-    ticketUrl,
-    onClick,
-    ticketNumber
-  } = useIMTicketLink(props);
-  /* External CSS Customization */
-
-  const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-
-  const {
-    imTicketLinkClass
-  } = cssJSLogic({
-    isDisabled
-  }, newStyle);
-  return ticketNumber ? /*#__PURE__*/React.createElement("a", {
-    className: imTicketLinkClass,
-    href: ticketUrl,
-    onClick: onClick,
-    rel: "noopener noreferrer"
-  }, ticketNumber) : null;
-}
-IMTicketLink.propTypes = imTicketLinkPropTypes;
-IMTicketLink.defaultProps = imTicketLinkDefaultProps;
-IMTicketLink.displayName = 'IMTicketLink';

package/es/im/IMTicketLink/index.js

@@ -1 +0,0 @@
-export { default as IMTicketLink } from './IMTicketLink';

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

@@ -1,11 +0,0 @@
-/** ** Libraries *** */
-import PropTypes from 'prop-types';
-const imTicketLinkPropTypes = {
-  ticketNumber: PropTypes.string.isRequired,
-  customStyle: PropTypes.object,
-  isDisabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  ticketId: PropTypes.string,
-  ticketUrl: PropTypes.string
-};
-export default imTicketLinkPropTypes;