@zohoim/chat-components 0.0.1-cx

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

@@ -0,0 +1,46 @@
+.varClass {
+  --imMessageMeta-gap: var(--zd_size5);
+  --imMessageMeta-separator_gap: var(--zd_size5);
+  --imMessageMeta-time_padding: var(--zd_size45);
+}
+
+.imMessageMeta {
+  max-width: 100% ;
+  align-items: center;
+  margin-top: var(--imMessageMeta-gap);
+}
+
+.imMessageMetaIncoming {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+.dot {
+  composes: varClass;
+  margin: 0 var(--imMessageMeta-separator_gap);
+}
+
+[dir=ltr] .leftTime {
+  padding-left: var(--imMessageMeta-time_padding);
+}
+
+[dir=rtl] .leftTime {
+  padding-right: var(--imMessageMeta-time_padding);
+}
+
+[dir=ltr] .rightTime {
+  padding-right: var(--imMessageMeta-time_padding);
+}
+
+[dir=rtl] .rightTime {
+  padding-left: var(--imMessageMeta-time_padding);
+}
+
+.dateTime {
+  font-size: var(--zd_font_size11) ;
+  /* max-width: 100px; */
+  /* display: flex; */
+  max-width: var(--zd_size100) ;
+  composes: dotted from '../../css/common.module.css';
+  color: var(--imlib_chat_components_imMessageMeta_time_color);
+}

package/es/im/IMMessageMeta/css/cssJSLogic.js

@@ -0,0 +1,29 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+import getMessageDirectionType from '@zohoim/chat-components-utils/es/getMessageDirectionType';
+export default function cssJSLogic(props, style) {
+  const {
+    direction
+  } = props;
+  const {
+    isIncoming,
+    isOutgoing
+  } = getMessageDirectionType({
+    messageDetails: {
+      direction
+    }
+  });
+  const imMessageMetaClass = compileClassNames({
+    [style.imMessageMeta]: true,
+    [style.imMessageMetaIncoming]: isIncoming,
+    [style.leftTime]: isIncoming,
+    [style.rightTime]: isOutgoing
+  });
+  const dotClass = compileClassNames({
+    [style.dot]: true
+  });
+  return {
+    imMessageMetaClass,
+    dotClass
+  };
+}

package/es/im/IMMessageMeta/index.js

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

package/es/im/IMMessageMeta/props/defaultProps.js

@@ -0,0 +1,11 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+const imMessageMetaDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject,
+  messageMetaInfoI18N: dummyObject,
+  isValidAttachment: true,
+  direction: directionConstants.IN
+};
+export default imMessageMetaDefaultProps;

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

@@ -0,0 +1,42 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+import autoMessageTypes from '@zohoim/chat-components-utils/es/imUtils/constants/autoMessageTypes';
+const {
+  WELCOMEMSG,
+  WORKFLOW_MESSAGE,
+  WORKFLOW_NOTIFICATION,
+  UN_SUPPORTED_FILE
+} = autoMessageTypes;
+const imMessageMetaPropTypes = {
+  direction: PropTypes.oneOf(Object.values(direction)).isRequired,
+  time: PropTypes.string.isRequired,
+  isValidAttachment: PropTypes.bool,
+  autoMessageType: PropTypes.oneOf(Object.values(autoMessageTypes)),
+  messageMetaInfoI18N: PropTypes.shape({
+    autoMessagesI18N: PropTypes.shape({
+      [UN_SUPPORTED_FILE]: PropTypes.string,
+      [WELCOMEMSG]: PropTypes.string,
+      [WORKFLOW_MESSAGE]: PropTypes.string,
+      [WORKFLOW_NOTIFICATION]: PropTypes.string
+    }),
+    autoMessagesTitleI18N: PropTypes.shape({
+      [UN_SUPPORTED_FILE]: PropTypes.string,
+      [WELCOMEMSG]: PropTypes.string,
+      [WORKFLOW_MESSAGE]: PropTypes.string,
+      [WORKFLOW_NOTIFICATION]: PropTypes.string
+    }),
+    restrictedAttachmentMetaInfo: PropTypes.shape({
+      info: PropTypes.string,
+      title: PropTypes.string
+    })
+  }),
+  customProps: PropTypes.shape({
+    imMessageMetaInfoProps: PropTypes.object
+  }),
+  customStyle: PropTypes.object,
+  timeTooltip: PropTypes.string
+};
+export default imMessageMetaPropTypes;

package/es/im/IMMessageMetaInfo/IMMessageMetaInfo.js

@@ -0,0 +1,29 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import imMessageMetaInfoDefaultProps from './props/defaultProps';
+import imMessageMetaInfoPropTypes from './props/propTypes';
+/** ** Styles *** */
+
+import style from './css/IMMessageMetaInfo.module.css';
+export default function IMMessageMetaInfo(props) {
+  const {
+    imMessageMetaInfoTitle,
+    imMessageMetaInfoContent,
+    customStyle
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: newStyle.imMessageMetaInfo,
+    "data-title": imMessageMetaInfoTitle
+  }, imMessageMetaInfoContent);
+}
+IMMessageMetaInfo.propTypes = imMessageMetaInfoPropTypes;
+IMMessageMetaInfo.defaultProps = imMessageMetaInfoDefaultProps;
+IMMessageMetaInfo.displayName = 'IMMessageMetaInfo';

package/es/im/IMMessageMetaInfo/css/IMMessageMetaInfo.module.css

@@ -0,0 +1,14 @@
+.varClass {
+  --imMessageMetaInfo-font_size: var(--zd_font_size13);
+  --imMessageMetaInfo-max_width: var(--zd_size150);
+  --imMessageMetaInfo-letter_spacing: 0.2px;
+}
+
+.imMessageMetaInfo {
+  composes: varClass;
+  composes: dotted from '../../../css/common.module.css';
+  font-size: var(--imMessageMetaInfo-font_size);
+  letter-spacing: var(--imMessageMetaInfo-letter_spacing);
+  max-width: var(--imMessageMetaInfo-max_width);
+  color: var(--imlib_chat_components_imAutoMessageInfo_text_color);
+}

package/es/im/IMMessageMetaInfo/index.js

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

package/es/im/IMMessageMetaInfo/props/defaultProps.js

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const imMessageMetaInfoDefaultProps = {
+  imMessageMetaInfoTitle: '',
+  imMessageMetaInfoContent: '',
+  customStyle: dummyObject
+};
+export default imMessageMetaInfoDefaultProps;

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

@@ -0,0 +1,8 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imMessageMetaInfoPropTypes = {
+  imMessageMetaInfoTitle: PropTypes.string,
+  imMessageMetaInfoContent: PropTypes.string,
+  customStyle: PropTypes.object
+};
+export default imMessageMetaInfoPropTypes;

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_url_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/IMPermaLink/css/cssJSLogic.js

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

package/es/im/IMPermaLink/index.js

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

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

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const imPermaLinkDefaultProps = {
+  customStyle: dummyObject
+};
+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/IMReplyBubble/IMReplyBubble.js

@@ -0,0 +1,52 @@
+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 from 'react';
+/** ** Hooks *** */
+
+import useIMReplyBubble from '@zohoim/chat-components-hooks/es/im/IMReplyBubble/useIMReplyBubble';
+/** ** Constants *** */
+
+import imReplyBubbleDefaultProps from './props/defaultProps';
+import imReplyBubblePropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Components *** */
+
+import ReplyBubble from '../../ReplyBubble/ReplyBubble';
+export default function IMReplyBubble(props) {
+  const {
+    replyText,
+    messageDetails,
+    customProps,
+    onClick: propOnClick,
+    isFailed
+  } = props;
+  const {
+    replyBubbleProps = dummyObject
+  } = customProps;
+  const {
+    message,
+    senderName,
+    dateTimeDetails,
+    attachmentDetails,
+    locationUrl,
+    onClick
+  } = useIMReplyBubble({
+    messageDetails,
+    onClick: propOnClick
+  });
+  return /*#__PURE__*/React.createElement(ReplyBubble, _extends({
+    attachmentDetails: attachmentDetails,
+    dateTimeDetails: dateTimeDetails,
+    locationUrl: locationUrl,
+    message: message,
+    onClick: onClick,
+    replyText: replyText,
+    senderName: senderName
+  }, replyBubbleProps, {
+    isFailed: isFailed
+  }));
+}
+IMReplyBubble.propTypes = imReplyBubblePropTypes;
+IMReplyBubble.defaultProps = imReplyBubbleDefaultProps;
+IMReplyBubble.displayName = 'IMReplyBubble';

package/es/im/IMReplyBubble/index.js

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

package/es/im/IMReplyBubble/props/defaultProps.js

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

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

@@ -0,0 +1,29 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imReplyBubblePropTypes = {
+  messageDetails: PropTypes.shape({
+    actor: PropTypes.shape({
+      contactName: PropTypes.string,
+      externalId: PropTypes.string,
+      name: PropTypes.string
+    }).isRequired,
+    displayMessage: PropTypes.string.isRequired,
+    attachment: PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string,
+      url: PropTypes.string
+    }),
+    dateTimeDetails: PropTypes.shape({
+      displayDateTime: PropTypes.string,
+      tooltip: PropTypes.string
+    }),
+    locationUrl: PropTypes.string
+  }).isRequired,
+  onClick: PropTypes.func.isRequired,
+  replyText: PropTypes.string.isRequired,
+  customProps: PropTypes.shape({
+    replyBubbleProps: PropTypes.object
+  }),
+  isFailed: PropTypes.bool
+};
+export default imReplyBubblePropTypes;

package/es/im/IMTextBubble/IMTextBubble.js

@@ -0,0 +1,40 @@
+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 from 'react';
+/** ** Constants *** */
+
+import imTextBubbleDefaultProps from './props/defaultProps';
+import imTextBubblePropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Components *** */
+
+import TextBubble from '../../TextBubble/TextBubble';
+/** ** Hooks *** */
+
+import useIMTextBubble from '@zohoim/chat-components-hooks/es/im/IMTextBubble/useIMTextBubble';
+export default function IMTextBubble(props) {
+  const {
+    moreText,
+    customProps,
+    isFailed
+  } = props;
+  const {
+    textBubbleProps = dummyObject
+  } = customProps;
+  const {
+    onLoadFullMessage,
+    sanitizedDisplayMessage,
+    isShowSeeMore
+  } = useIMTextBubble(props);
+  return /*#__PURE__*/React.createElement(TextBubble, _extends({
+    message: sanitizedDisplayMessage,
+    moreText: isShowSeeMore ? moreText : '',
+    onClickMore: onLoadFullMessage
+  }, textBubbleProps, {
+    isFailed: isFailed
+  }));
+}
+IMTextBubble.propTypes = imTextBubblePropTypes;
+IMTextBubble.defaultProps = imTextBubbleDefaultProps;
+IMTextBubble.displayName = 'IMTextBubble';

package/es/im/IMTextBubble/index.js

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

package/es/im/IMTextBubble/props/defaultProps.js

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import { TEXT_MESSAGE_MAX_LENGTH } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+const imTextBubbleDefaultProps = {
+  customProps: dummyObject,
+  messageMaxLength: TEXT_MESSAGE_MAX_LENGTH
+};
+export default imTextBubbleDefaultProps;

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

@@ -0,0 +1,31 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imTextBubblePropTypes = {
+  messageDetails: PropTypes.shape({
+    displayMessage: PropTypes.string.isRequired,
+    attachment: PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string
+    }),
+    contentType: PropTypes.string,
+    fullContentURL: PropTypes.string,
+    fullMessage: PropTypes.string,
+    id: PropTypes.string
+  }).isRequired,
+  customProps: PropTypes.shape({
+    textBubbleProps: PropTypes.object
+  }),
+  messageMaxLength: PropTypes.number,
+  markDownOptions: PropTypes.shape({
+    applyLink: PropTypes.bool,
+    isRemoveUrl: PropTypes.bool
+  }),
+  moreText: PropTypes.string,
+  onLoadFullMessage: PropTypes.func,
+  sessionDetails: PropTypes.shape({
+    id: PropTypes.string
+  }),
+  isFailed: PropTypes.bool,
+  isShowFullContent: PropTypes.bool
+};
+export default imTextBubblePropTypes;

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

@@ -0,0 +1,9 @@
+export * from './IMIntegrationIcon';
+export * from './IMMessage';
+export * from './IMPermaLink';
+export * from './IMMessageMeta';
+export * from './IMMessageMetaInfo';
+export * from './IMMessageContent';
+export * from './IMTextBubble';
+export * from './IMReplyBubble';
+export * from './ArticleBubble';

package/es/index.js

@@ -0,0 +1,32 @@
+export * from './MessageBubble';
+export * from './MessageActionsWrapper';
+export * from './MessageActions';
+export * from './MessageBox';
+export * from './ActionIcon';
+export * from './ActionIconWrapper';
+export * from './MessageActionsMore';
+export * from './MessageAvatar';
+export * from './MoreActionItem';
+export * from './MessageAction';
+export * from './Theme';
+export * from './Message';
+export * from './AudioBubble';
+export * from './AttachmentBubble';
+export * from './AttachmentIcon';
+export * from './VideoBubble';
+export * from './ImageBubble';
+export * from './TextBubble';
+export * from './LocationBubble';
+export * from './AttachmentBubbleInfo';
+export * from './Audio';
+export * from './Video';
+export * from './ReplyBubble';
+export * from './ReplyBubbleHeader';
+export * from './LazyLoadImage';
+export * from './ReplyBubbleContent';
+export * from './MessageStatus';
+export * from './im'; // ... export other components
+
+/** * CONSTANTS ** */
+
+export * from './constants';

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@zohoim/chat-components",
+  "version": "0.0.1-cx",
+  "description": "Chat Components",
+  "main": "es/index.js",
+  "module": "es/index.js",
+  "scripts": {
+    "build": "react-cli build:component:es",
+    "build_watch": "npm run build -- -w",
+    "clean": "react-cli clean unittest coverage es result.json",
+    "rtl": "react-cli rtl ./src ./es",
+    "prepare": "npm run clean && npm run build && npm run rtl && npm run cssVariableConvert",
+    "test": "react-cli test",
+    "test:debug": "react-cli test --runInBand --watch",
+    "create-icons": "node ./src/icons/create-icon-components --sourucePath=./factory --targetPath=./iconSrc",
+    "cssVariableConvert": "react-cli variableConverter ./es ./es",
+    "variable:addignore": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
+    "variable:convert": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
+    "variable:check": "node  ../../node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ../../node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
+  },
+  "author": "ZohoDesk - IM Team",
+  "license": "ISC",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "es",
+    "!**/__tests__"
+  ],
+  "dependencies": {
+    "@zohodesk/components": "1.2.23",
+    "@zohodesk/hooks": "2.0.2",
+    "@zohodesk/icon": "1.3.15",
+    "@zohodesk/icons": "1.0.20",
+    "@zohodesk/utils": "1.3.13",
+    "@zohodesk/variables": "1.0.0",
+    "@zohodesk/virtualizer": "1.0.13",
+    "@zohoim/chat-components-hooks": "^0.0.1-cx",
+    "@zohoim/chat-components-utils": "^0.0.1-cx"
+  },
+  "devDependencies": {
+    "@zohodesk-private/css-variable-migrator": "1.0.7",
+    "html-to-react": "1.7.0 ",
+    "jsdom": "23.0.0",
+    "react-to-jsx": "1.3.2"
+  },
+  "gitHead": "b60f44be95eec75bcc98f775228661b538e2b490"
+}