@zohoim/chat-components 0.0.8 → 0.0.11

package/es/ArticleBubble/ArticleBubble.js

@@ -2,22 +2,23 @@
 /* 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 articleBubbleDefaultProps from './props/defaultProps';
-import articleBubblePropTypes from './props/propTypes';
+import articleBubbleDefaultProps from "./props/defaultProps";
+import articleBubblePropTypes 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";
+import { Container, Box } from "@zohodesk/components/es/Layout";
 
 /** ** Styles *** */
-import style from './css/ArticleBubble.module.css';
-import ArticleIcon from '../icons/iconSrc/actions/ConvertTicket';
+import style from "./css/ArticleBubble.module.css";
+import ArticleIcon from "../icons/iconSrc/common/Article";
 export default function ArticleBubble(props) {
   const {
     customStyle,
@@ -41,11 +42,18 @@ export default function ArticleBubble(props) {
   } = cssJSLogic(props, newStyle);
   return /*#__PURE__*/React.createElement("div", {
     className: articleBubbleClass
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Container, {
+    isCover: false,
+    alignBox: "row",
+    align: "vertical",
     className: headerClass
   }, /*#__PURE__*/React.createElement("div", {
     className: iconClass
-  }, /*#__PURE__*/React.createElement(ArticleIcon, null)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ArticleIcon, {
+    customStyle: {
+      base: newStyle.articleIcon
+    }
+  })), /*#__PURE__*/React.createElement("div", {
     className: headerTextClass
   }, bubbleInfo)), /*#__PURE__*/React.createElement("div", {
     className: articleWrapperClass
@@ -57,4 +65,4 @@ export default function ArticleBubble(props) {
 }
 ArticleBubble.propTypes = articleBubblePropTypes;
 ArticleBubble.defaultProps = articleBubbleDefaultProps;
-ArticleBubble.displayName = 'ArticleBubble';
+ArticleBubble.displayName = "ArticleBubble";

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

@@ -1 +1,40 @@
+.icon {
+    display: flex;
+}
 
+.articleWrapper { 
+    height: 80px;
+    padding: 8px 10px;
+    background-color: var(--imlib_chat_components_articleBubble_bg_color);
+    border-radius: 3px;
+    cursor: pointer;
+    border: 1px solid #ebf0f5;
+    margin: 4px 0 2px;
+}
+
+.title {
+    color: #000;
+    font-size: 15px;
+    line-height: 1.5;
+    overflow: hidden;
+    white-space: nowrap;
+    word-wrap: normal;
+    text-overflow: ellipsis;
+}
+
+.summary {
+    color: #000;
+    font-size: 13px;
+    line-height: 1.5;
+    max-height: 40px;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+    overflow: hidden;
+}
+
+.articleIcon{
+    width:16px;
+    height: 16px;
+}

package/es/AttachmentBubble/AttachmentBubble.js

@@ -2,23 +2,23 @@
 /* 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 attachmentBubbleDefaultProps from './props/defaultProps';
-import attachmentBubblePropTypes from './props/propTypes';
+import attachmentBubbleDefaultProps from "./props/defaultProps";
+import attachmentBubblePropTypes 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/AttachmentBubble.module.css';
-import AttachmentBubbleInfo from '../AttachmentBubbleInfo/AttachmentBubbleInfo';
-import { Container, Box } from '@zohodesk/components/es/Layout';
+import style from "./css/AttachmentBubble.module.css";
+import AttachmentBubbleInfo from "../AttachmentBubbleInfo/AttachmentBubbleInfo";
+import { Container, Box } from "@zohodesk/components/es/Layout";
 export default function AttachmentBubble(props) {
   const {
     customStyle,
@@ -42,7 +42,8 @@ export default function AttachmentBubble(props) {
     className: attachmentBubbleClass
   }, /*#__PURE__*/React.createElement("div", {
     className: attachmentBubbleIconClass
-  }, fileIcon), /*#__PURE__*/React.createElement("div", {
+  }, fileIcon), /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
     className: attachmentBubbleContentClass
   }, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, {
     customStyle: bubbleInfoCustomStyle,
@@ -52,4 +53,4 @@ export default function AttachmentBubble(props) {
 }
 AttachmentBubble.propTypes = attachmentBubblePropTypes;
 AttachmentBubble.defaultProps = attachmentBubbleDefaultProps;
-AttachmentBubble.displayName = 'AttachmentBubble';
+AttachmentBubble.displayName = "AttachmentBubble";

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

@@ -1,17 +1,24 @@
 .attachmentBubble {
-    background-color: #fff;
+    background-color: var(--imlib_chat_components_attachmentBubble_bg_color);
     border-radius: 3px;
-    border: 1px solid #ebf0f5;
+    border: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
+}
+
+.attachmentBubbleIcon{
+    width: var(--imlib_size_60);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 [dir=ltr] .attachmentBubbleIcon{
-    border-right: 1px solid #ebf0f5;
+    border-right: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
 [dir=rtl] .attachmentBubbleIcon{
-    border-left: 1px solid #ebf0f5;
+    border-left: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
 .attachmentBubbleIcon, .attachmentBubbleContent{
-    padding: 10px;
+    padding: var(--imlib_size_10);
 }

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

@@ -8,11 +8,18 @@
     composes: varClass;
     font-size: var(--attachmentBubbleInfo-fileName_font_size);
     font-family: var(--attachmentBubbleInfo-fileName_font_family);
-    color: #000;
+    color: var(--imlib_chat_components_attachmentBubbleInfo_fileName_color);
     margin-bottom: var(--imlib_size_5);
 }
 
 .fileSize {
     font-size: var(--attachmentBubbleInfo-fileSize_font_size);
-    color: #5a616f;
+    color: var(--imlib_chat_components_attachmentBubbleInfo_fileSize_color);
+}
+
+.fileName,
+.fileSize{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

package/es/Audio/css/Audio.module.css

@@ -1,3 +1,7 @@
 .audio {
     width: 100%;
 }
+
+.audio::-webkit-media-controls-panel {
+    background-color: var(--dot_white);
+  }

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

@@ -1,3 +1,3 @@
 .header{
-    margin-bottom: 5px;
+    margin-bottom: var(--imlib_size_5);
 }

package/es/Fonts/puviFont.module.css

@@ -0,0 +1,61 @@
+/*$Id$*/
+@font-face {
+    font-family: "ZohoPuviLight";
+    src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Light.woff2")
+      format("woff2");
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+    font-display: swap;
+  }
+  
+  @font-face {
+    font-family: "ZohoPuviRegular";
+    src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2")
+      format("woff2");
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+    font-display: swap;
+  }
+  
+  @font-face {
+    font-family: "ZohoPuviSemiBold";
+    src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold.woff2")
+      format("woff2");
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+    font-display: swap;
+  }
+  
+  @font-face {
+    font-family: "ZohoPuviBold";
+    src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Bold.woff2")
+      format("woff2");
+    font-style: normal;
+    font-weight: bold;
+    text-rendering: optimizeLegibility;
+    font-display: swap;
+  }
+  
+  @font-face {
+    font-family: "ZohoPuviExtBd";
+    src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrabold.woff2")
+      format("woff2");
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+    font-display: swap;
+  }
+  
+  @font-face {
+    font-family: "ZohoPuviMedium";
+    src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Medium.woff2")
+      format("woff2");
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+    font-display: swap;
+  }
+  

package/es/LocationBubble/LocationBubble.js

@@ -3,22 +3,23 @@
 /* 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 locationBubbleDefaultProps from './props/defaultProps';
-import locationBubblePropTypes from './props/propTypes';
+import locationBubbleDefaultProps from "./props/defaultProps";
+import locationBubblePropTypes 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";
+import { Container, Box } from "@zohodesk/components/es/Layout";
 
 /** ** Styles *** */
-import style from './css/LocationBubble.module.css';
-import useLocationBubble from '@zohoim/chat-components-hooks/es/LocationBubble/useLocationBubble';
+import style from "./css/LocationBubble.module.css";
+import useLocationBubble from "@zohoim/chat-components-hooks/es/LocationBubble/useLocationBubble";
 export default function LocationBubble(props) {
   const {
     customStyle
@@ -38,9 +39,12 @@ export default function LocationBubble(props) {
     textWrapperClass,
     textLinkClass
   } = cssJSLogic(props, newStyle);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
     className: locationBubbleClass
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
     className: imageWrapperClass
   }, /*#__PURE__*/React.createElement("a", {
     target: "_blank",
@@ -49,7 +53,8 @@ export default function LocationBubble(props) {
     className: imageLinkClass
   }, /*#__PURE__*/React.createElement("div", {
     className: imageClass
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
     className: textWrapperClass
   }, /*#__PURE__*/React.createElement("a", {
     target: "_blank",
@@ -60,4 +65,4 @@ export default function LocationBubble(props) {
 }
 LocationBubble.propTypes = locationBubblePropTypes;
 LocationBubble.defaultProps = locationBubbleDefaultProps;
-LocationBubble.displayName = 'LocationBubble';
+LocationBubble.displayName = "LocationBubble";

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

@@ -1,3 +1,36 @@
+.imageWrapper {
+  width: 60px;
+  height: 60px;
+}
+
+.locationBubble {
+  white-space: nowrap;
+  width: 100%;
+  background-color: var(--imlib_chat_components_locationBubble_bg_color);
+  padding: 10px;
+}
+
 .image {
+  width: 100%;
+  height: 100%;
   background-image: url('../images/location.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 3px;
+}
+
+[dir=ltr] .textWrapper {
+  margin: 0 0 0 8px;
+}
+
+[dir=rtl] .textWrapper {
+  margin: 0 8px 0 0;
+}
+
+.textLink {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #0a73eb;
 }

package/es/Message/Message.js

@@ -12,9 +12,9 @@ import { direction as directionConstants } from '@zohoim/chat-components-utils/e
 /** ** Components *** */
 import MessageBubble from '../MessageBubble/MessageBubble';
 import MessageBox from '../MessageBox/MessageBox';
-import IMMessageAvatar from '../IMMessageAvatar/IMMessageAvatar';
-import IMMessageActions from '../IMMessageActions/IMMessageActions';
-import IMMessageStatus from '../IMMessageStatus/IMMessageStatus';
+import IMMessageAvatar from '../im/IMMessageAvatar/IMMessageAvatar';
+import IMMessageActions from '../im/IMMessageActions/IMMessageActions';
+import IMMessageStatus from '../im/IMMessageStatus/IMMessageStatus';
 export default function Message(props) {
   const {
     customStyle,

package/es/MessageActionsMore/css/MessageActionsMore.module.css

@@ -4,6 +4,7 @@
 
 .popup {
   /* use this class name for popup customization*/
+  padding: var(--imlib_size_10) 0;
 }
 
 .popupWrapper {

package/es/MessageAvatar/css/MessageAvatar.module.css

@@ -5,15 +5,15 @@
 
 .icon {
   position: absolute;
-  bottom: -6px;
+  bottom: calc(-1*var(--imlib_size_6));
 }
 
 [dir=ltr] .icon {
-  right: -7px;
+  right: calc(-1*var(--imlib_size_7));
 }
 
 [dir=rtl] .icon {
-  left: -7px;
+  left: calc(-1*var(--imlib_size_7));
 }
 
 .avatar {

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

@@ -11,8 +11,9 @@
 .messageBoxContainer {
   composes: varClass;
 
-  display: inline-flex;
-  flex-direction: row;
+  display: grid;
+  /* flex-direction: row; */
+  grid-template-columns: 1fr auto;
   align-items: flex-end;
   color: var(--imlib_chat_components_messageBox_text_color);
   /* max-width: var(--messageBox-max_width); */
@@ -32,6 +33,7 @@
 
 .messageContentWrapper {
   /*Use this class for message content customization*/
+  line-height: 150%;
 }
 
 .messageHeaderWrapper {
@@ -51,6 +53,7 @@
 }
 
 .failedMessageBox {
+  color: var(--imlib_chat_components_messageBox_failed_text_color);
   background-color: var(--imlib_chat_components_messageBox_failed_bg_color);
 }
 

package/es/MoreActionItem/MoreActionItem.js

@@ -68,6 +68,7 @@ export default function MoreActionItem(props) {
   }, needIcon ? /*#__PURE__*/React.createElement(Box, {
     className: iconClass
   }, icon) : null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
     className: textClass
   }, displayText)));
 }

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

@@ -15,11 +15,15 @@
 
 .icon {
   /*Use this class name for list item icon customization */
+  display: flex;
 }
 
 .text {
   composes: varClass;
   font-size: var(--moreActionItem-content_size);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 [dir=ltr] .text {

package/es/ReplyBubble/ReplyBubble.js

@@ -17,13 +17,19 @@ import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
 import style from './css/ReplyBubble.module.css';
+import ReplyBubbleHeader from '../ReplyBubbleHeader/ReplyBubbleHeader';
+import ReplyBubbleContent from '../ReplyBubbleContent/ReplyBubbleContent';
 export default function ReplyBubble(props) {
   const {
     customStyle,
     headerCustomStyle,
+    senderName,
     time,
     replyText,
-    timeCustomStyle
+    timeCustomStyle,
+    contentCustomStyle,
+    renderIcon,
+    renderMessage
   } = props;
 
   /* External customization */
@@ -34,7 +40,17 @@ export default function ReplyBubble(props) {
   } = cssJSLogic(props, newStyle);
   return /*#__PURE__*/React.createElement("div", {
     className: replyBubbleClass
-  }, "Working On this...");
+  }, /*#__PURE__*/React.createElement(ReplyBubbleHeader, {
+    customStyle: headerCustomStyle,
+    replyText: replyText,
+    time: time,
+    timeCustomStyle: timeCustomStyle
+  }), /*#__PURE__*/React.createElement(ReplyBubbleContent, {
+    customStyle: contentCustomStyle,
+    senderName: senderName,
+    renderIcon: renderIcon,
+    renderMessage: renderMessage
+  }));
 }
 ReplyBubble.propTypes = replyBubblePropTypes;
 ReplyBubble.defaultProps = replyBubbleDefaultProps;

package/es/ReplyBubble/props/defaultProps.js

@@ -1,6 +1,9 @@
 /** ** Constants *** */
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
 const replyBubbleDefaultProps = {
-  customStyle: dummyObject
+  customStyle: dummyObject,
+  headerCustomStyle: dummyObject,
+  timeCustomStyle: dummyObject,
+  contentCustomStyle: dummyObject
 };
 export default replyBubbleDefaultProps;

package/es/ReplyBubble/props/propTypes.js

@@ -1,6 +1,14 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const replyBubblePropTypes = {
-  customStyle: PropTypes.object
+  customStyle: PropTypes.object,
+  headerCustomStyle: PropTypes.object,
+  timeCustomStyle: PropTypes.object,
+  contentCustomStyle: PropTypes.object,
+  senderName: PropTypes.string,
+  time: PropTypes.string,
+  replyText: PropTypes.string,
+  renderIcon: PropTypes.func,
+  renderMessage: PropTypes.func
 };
 export default replyBubblePropTypes;

package/es/ReplyBubbleContent/ReplyBubbleContent.js

@@ -0,0 +1,56 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from "react";
+
+/** ** Hooks *** */
+import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
+
+/** ** Constants *** */
+import replyBubbleContentDefaultProps from "./props/defaultProps";
+import replyBubbleContentPropTypes from "./props/propTypes";
+
+/** ** Methods *** */
+import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
+import cssJSLogic from "./css/cssJSLogic";
+
+/** ** Styles *** */
+import style from "./css/ReplyBubbleContent.module.css";
+import { Container, Box } from "@zohodesk/components/es/Layout";
+export default function ReplyBubbleContent(props) {
+  const {
+    customStyle,
+    senderName,
+    renderIcon,
+    renderMessage
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    replyBubbleContentClass,
+    nameClass,
+    iconWrapperClass,
+    messageWrapperClass
+  } = cssJSLogic(props, newStyle);
+  const icon = renderHandler(renderIcon)();
+  const messageContent = renderHandler(renderMessage)();
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    className: replyBubbleContentClass
+  }, icon ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+    className: iconWrapperClass
+  }, icon)) : "", /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: nameClass
+  }, senderName), /*#__PURE__*/React.createElement("div", {
+    className: messageWrapperClass
+  }, messageContent)));
+}
+ReplyBubbleContent.propTypes = replyBubbleContentPropTypes;
+ReplyBubbleContent.defaultProps = replyBubbleContentDefaultProps;
+ReplyBubbleContent.displayName = "ReplyBubbleContent";

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

@@ -0,0 +1,50 @@
+.replyBubbleContent {
+    position: relative;
+    background-color: #fff;
+    border-radius: 3px;
+}[dir=ltr] .replyBubbleContent {
+    padding: 10px 10px 10px 20px;
+}[dir=rtl] .replyBubbleContent {
+    padding: 10px 20px 10px 10px;
+}
+
+.replyBubbleContent::after{
+    content: "";
+    width: 2px;
+    display: block;
+    position: absolute;
+    top: 10px;
+    bottom: 10px;
+    background-color: #cddbf2;
+    border-radius: 30px;
+}
+
+[dir=ltr] .replyBubbleContent::after{
+    left: 10px;
+}
+
+[dir=rtl] .replyBubbleContent::after{
+    right: 10px;
+}
+
+.name {
+    color: #000;
+    font-size: 15px;
+    line-height: 1.5;
+    overflow: hidden;
+    white-space: nowrap;
+    word-wrap: normal;
+    text-overflow: ellipsis;
+}
+
+.messageWrapper {
+    color: #000;
+    font-size: 13px;
+    line-height: 1.5;
+    max-height: 40px;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+    overflow: hidden;
+}

package/es/ReplyBubbleContent/css/cssJSLogic.js

@@ -0,0 +1,22 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const replyBubbleContentClass = compileClassNames({
+    [style.replyBubbleContent]: true
+  });
+  const nameClass = compileClassNames({
+    [style.name]: true
+  });
+  const iconWrapperClass = compileClassNames({
+    [style.iconWrapper]: true
+  });
+  const messageWrapperClass = compileClassNames({
+    [style.messageWrapper]: true
+  });
+  return {
+    replyBubbleContentClass,
+    nameClass,
+    iconWrapperClass,
+    messageWrapperClass
+  };
+}