@elliemae/ds-chat 2.3.0-alpha.8 → 2.3.0-next.10

package/cjs/exported-related/system-message/SystemMessage.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var style = require('./style.js');
+var props = require('./props.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _span;
+
+const SystemMessage = props$1 => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.systemMessageProps);
+  const {
+    title,
+    time,
+    body
+  } = propsWithDefault;
+  return /*#__PURE__*/_jsx__default["default"](style.Wrapper, {
+    rows: ['auto', 'auto']
+  }, void 0, /*#__PURE__*/_jsx__default["default"](style.Header, {
+    cols: ['1fr', 'auto', '1fr']
+  }, void 0, _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {})), /*#__PURE__*/_jsx__default["default"](style.Title, {
+    "data-testid": "chat-system-message-title"
+  }, void 0, title), /*#__PURE__*/_jsx__default["default"](style.Time, {
+    "data-testid": "chat-system-message-time"
+  }, void 0, time)), /*#__PURE__*/_jsx__default["default"](style.Message, {
+    "data-testid": "chat-system-message-body"
+  }, void 0, body));
+};
+
+const SystemMessageWithSchema = dsPropsHelpers.describe(SystemMessage);
+SystemMessageWithSchema.propTypes = props.systemMessageProps;
+
+exports.SystemMessage = SystemMessage;
+exports.SystemMessageWithSchema = SystemMessageWithSchema;

package/cjs/exported-related/system-message/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var SystemMessage = require('./SystemMessage.js');
+
+
+
+exports.SystemMessage = SystemMessage.SystemMessage;
+exports.SystemMessageWithSchema = SystemMessage.SystemMessageWithSchema;

package/cjs/exported-related/system-message/props.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const defaultProps = {
+  title: 'System Message',
+  time: '',
+  body: ''
+};
+const systemMessageProps = {
+  title: reactDesc.PropTypes.string.isRequired.description('Message title').defaultValue('System Message'),
+  time: reactDesc.PropTypes.string.description('data of the message, ie: hour'),
+  body: reactDesc.PropTypes.string.isRequired.description('message')
+};
+
+exports.defaultProps = defaultProps;
+exports.systemMessageProps = systemMessageProps;

package/cjs/exported-related/system-message/style.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Wrapper = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-1qrpnrc-0"
+})(["align-items:center;justify-content:center;max-width:100%;padding:0 8px 8px;border:1px solid ", ";border-radius:10px;background-color:", ";box-shadow:none;"], props => props.theme.colors.neutral['100'], props => props.theme.colors.neutral['080']);
+const Header = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-1qrpnrc-1"
+})(["align-items:center;height:36px;"]);
+const Title = /*#__PURE__*/styled__default["default"].p.withConfig({
+  componentId: "sc-1qrpnrc-2"
+})(["font-size:14px;font-weight:", ";color:", ";margin:0;"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['700']);
+const Time = /*#__PURE__*/styled__default["default"].p.withConfig({
+  componentId: "sc-1qrpnrc-3"
+})(["font-size:12px;font-weight:", ";color:", ";margin:0;text-align:right;"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700']);
+const Message = /*#__PURE__*/styled__default["default"].p.withConfig({
+  componentId: "sc-1qrpnrc-4"
+})(["font-size:13px;font-weight:", ";color:", ";min-height:32px;text-align:center;margin:0;"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700']);
+
+exports.Header = Header;
+exports.Message = Message;
+exports.Time = Time;
+exports.Title = Title;
+exports.Wrapper = Wrapper;

package/cjs/exported-related/tile-button/TileButton.js

@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var dsTooltip = require('@elliemae/ds-tooltip');
+var dsGrid = require('@elliemae/ds-grid');
+var dsIcons = require('@elliemae/ds-icons');
+var styled = require('./styled.js');
+var props = require('./props.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _StyledWrapperLeftBor, _CloseXsmall;
+
+const TileButton = props$1 => {
+  var _Icon, _StyledTileButtonLabe, _span;
+
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultTileButton);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.propsTileButton);
+  const {
+    label,
+    title,
+    dsId,
+    onClick,
+    onFocus,
+    onBlur,
+    Icon,
+    showClose,
+    onClose,
+    badge,
+    badgeColor,
+    badgePosition,
+    disabled,
+    selected,
+    isHeader,
+    ariaLabel,
+    tooltipPlacement,
+    disableTooltip,
+    innerRef
+  } = propsWithDefault;
+  const handleClick = React__default["default"].useCallback(() => {
+    onClick(dsId, title);
+  }, [dsId, onClick, title]);
+  const MainContent = React__default["default"].useMemo(() => /*#__PURE__*/_jsx__default["default"](styled.StyledWrapperCentralContent, {
+    alignItems: isHeader ? 'center' : undefined
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledTileButtonIcon, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, void 0, _Icon || (_Icon = /*#__PURE__*/_jsx__default["default"](Icon, {
+    size: "m"
+  })), badge ? /*#__PURE__*/_jsx__default["default"](styled.StyledStatusBadge, {
+    badgeColor: badgeColor,
+    badgePosition: badgePosition,
+    "data-testid": "tile-badge-".concat(dsId)
+  }) : null)), !isHeader ? /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    width: "100%",
+    justifyContent: "center"
+  }, void 0, label ? _StyledTileButtonLabe || (_StyledTileButtonLabe = /*#__PURE__*/_jsx__default["default"](styled.StyledTileButtonLabel, {}, void 0, label)) : null) : null), [isHeader, Icon, badge, dsId, badgeColor, badgePosition, label]);
+  const Btn = React__default["default"].useMemo(() => /*#__PURE__*/jsxRuntime.jsx(styled.StyledTileButton, {
+    isHeader: isHeader,
+    value: dsId,
+    "data-testid": "tile-button-".concat(dsId),
+    "data-key": dsId,
+    onClick: handleClick,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled,
+    selected: selected,
+    badgeColor: badgeColor,
+    badgePosition: badgePosition,
+    "aria-pressed": selected,
+    "aria-label": ariaLabel,
+    ref: innerRef,
+    children: /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {
+      alignItems: "center",
+      justifyContent: "center"
+    }, void 0, _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, MainContent)), _StyledWrapperLeftBor || (_StyledWrapperLeftBor = /*#__PURE__*/_jsx__default["default"](styled.StyledWrapperLeftBorder, {})), showClose && !disabled ? /*#__PURE__*/_jsx__default["default"](styled.CloseButton, {
+      onClick: onClose,
+      value: dsId,
+      "data-testid": "tile-close-btn-".concat(dsId)
+    }, void 0, _CloseXsmall || (_CloseXsmall = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {}))) : null)
+  }, dsId), [MainContent, ariaLabel, badgeColor, badgePosition, disabled, dsId, handleClick, isHeader, onBlur, onClose, onFocus, selected, showClose, innerRef]);
+  return title && !disableTooltip ? /*#__PURE__*/_jsx__default["default"](styled.StyledTooltipV3ButtonWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTooltip.DSTooltipV3, {
+    id: "ds-chat-tile-tooltip-button-".concat(dsId),
+    text: title,
+    startPlacementPreference: tooltipPlacement
+  }, void 0, Btn)) : Btn;
+};
+
+const TileButtonWithSchema = dsPropsHelpers.describe(TileButton);
+TileButtonWithSchema.propTypes = props.propsTileButton;
+
+exports.TileButton = TileButton;
+exports.TileButtonWithSchema = TileButtonWithSchema;

package/cjs/exported-related/tile-button/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var TileButton = require('./TileButton.js');
+
+
+
+exports.TileButton = TileButton.TileButton;
+exports.TileButtonWithSchema = TileButton.TileButtonWithSchema;

package/cjs/exported-related/tile-button/props.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var lodash = require('lodash');
+var dsIcons = require('@elliemae/ds-icons');
+
+const defaultTileButton = {
+  Icon: dsIcons.Comments,
+  dsId: '',
+  label: '',
+  onClick: lodash.noop,
+  onBlur: lodash.noop,
+  onFocus: lodash.noop,
+  title: '',
+  onClose: lodash.noop,
+  showClose: false,
+  badge: false,
+  badgeColor: 'blue',
+  badgePosition: 'left',
+  disabled: false,
+  selected: false,
+  isHeader: false,
+  ariaLabel: 'Tile button',
+  tooltipPlacement: 'right',
+  disableTooltip: false,
+  innerRef: lodash.noop
+};
+const propsTileButton = {
+  Icon: dsPropsHelpers.PropTypes.func.description('Icon component').defaultValue(defaultTileButton.Icon),
+  dsId: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string]).description('Unique id for the button').defaultValue(defaultTileButton.dsId),
+  label: dsPropsHelpers.PropTypes.string.description('It will display under the icon').defaultValue(defaultTileButton.label),
+  title: dsPropsHelpers.PropTypes.string.description('Tooltip').defaultValue(defaultTileButton.title),
+  onClick: dsPropsHelpers.PropTypes.func.description('The function to call when is clicked').defaultValue(defaultTileButton.onClick),
+  onFocus: dsPropsHelpers.PropTypes.func.description('The function to call when is focused').defaultValue(defaultTileButton.onFocus),
+  onBlur: dsPropsHelpers.PropTypes.func.description('The function to call when is on blur').defaultValue(defaultTileButton.onBlur),
+  onClose: dsPropsHelpers.PropTypes.func.description('The function to call when the X is Clicked').defaultValue(defaultTileButton.onClose),
+  showClose: dsPropsHelpers.PropTypes.bool.description('It will display the X').defaultValue(defaultTileButton.showClose),
+  badge: dsPropsHelpers.PropTypes.bool.description('It will display the badge').defaultValue(defaultTileButton.badge),
+  badgeColor: dsPropsHelpers.PropTypes.oneOf(['blue', 'green']).description('Color badge: blue or green').defaultValue(defaultTileButton.badgeColor),
+  badgePosition: dsPropsHelpers.PropTypes.oneOf(['left', 'right']).description('Color badge: blue or green').defaultValue(defaultTileButton.badgePosition),
+  disabled: dsPropsHelpers.PropTypes.bool.description('It will disabled the button').defaultValue(defaultTileButton.disabled),
+  selected: dsPropsHelpers.PropTypes.bool.description('Indicate that the button is selected').defaultValue(defaultTileButton.disabled),
+  isHeader: dsPropsHelpers.PropTypes.bool.description("It won't render the label").defaultValue(defaultTileButton.disabled),
+  ariaLabel: dsPropsHelpers.PropTypes.string.description('aria-label attribute').defaultValue(defaultTileButton.ariaLabel),
+  tooltipPlacement: dsPropsHelpers.PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preferences, as per popperjs placement option').defaultValue("'right'"),
+  disableTooltip: dsPropsHelpers.PropTypes.bool.description('Disable tooltip option').defaultValue(defaultTileButton.disableTooltip),
+  innerRef: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.func, dsPropsHelpers.PropTypes.shape({
+    current: dsPropsHelpers.PropTypes.any
+  })]).description('reference to the component')
+};
+
+exports.defaultTileButton = defaultTileButton;
+exports.propsTileButton = propsTileButton;

package/cjs/exported-related/tile-button/styled.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var dsGrid = require('@elliemae/ds-grid');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject;
+const MIN_WIDTH_SIDEBAR = 48;
+const BUTTON_SIDEBAR_HEIGHT = 48; // Buttons
+
+const StyledWrapperLeftBorder = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-b69sbu-0"
+})(["height:100%;width:4px;position:absolute;top:0;left:0;"]);
+const StyledStatusBadge = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-b69sbu-1"
+})(["height:8px;width:8px;position:absolute;top:0;background:", ";", ";border-radius:50%;box-sizing:content-box;"], props => {
+  switch (props.badgeColor) {
+    case 'blue':
+      return props.theme.colors.brand[600];
+
+    case 'green':
+      return props.theme.colors.success[900];
+
+    default:
+      return props.theme.colors.brand[600];
+  }
+}, props => {
+  switch (props.badgePosition) {
+    case 'left':
+      return 'left: -4px;';
+
+    case 'right':
+      return 'right: -4px;';
+
+    default:
+      return 'left: -4px;';
+  }
+});
+const StyledWrapperCentralContent = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-b69sbu-2"
+})(["width:24px;height:40px;"]);
+const StyledTileButtonIcon = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-b69sbu-3"
+})(["position:relative;height:24px;width:24px;svg{fill:", ";}&:focus{svg{fill:", ";}}"], props => props.theme.colors.neutral[500], props => props.theme.colors.brand[800]);
+const StyledTileButtonLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-b69sbu-4"
+})(["width:24px;height:", ";text-transform:uppercase;overflow:hidden;text-align:center;font-size:13px;color:", ";line-height:17px;"], props => props.theme.space.xs, props => props.theme.colors.neutral[600]);
+const CloseButton = /*#__PURE__*/styled__default["default"].button.withConfig({
+  componentId: "sc-b69sbu-5"
+})(["outline:none;background:none;height:9px;width:9px;position:absolute;top:1px;right:1px;overflow:hidden;padding:0;border:none;span{position:absolute;left:-3px;top:-4px;}&:focus,&:hover{svg{fill:", ";}&:after{display:block;content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:solid 1px ", ";border-radius:2px;}}cursor:pointer;"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[600]); // MAIN WRAPPER
+
+const StyledTooltipV3ButtonWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-b69sbu-6"
+})(["height:", "px;width:", "px;"], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR);
+const StyledTileButton = /*#__PURE__*/styled__default["default"].button.withConfig({
+  componentId: "sc-b69sbu-7"
+})(["outline:none;background:transparent;height:", "px;width:", "px;position:relative;padding:0;border:none;cursor:pointer;border-bottom:", ";&:focus,&:hover,&:active,&:disabled{background:", ";& ", "{border:2px solid ", ";margin-top:-2px;", ";}}&:focus,&:hover{& ", "{background:", ";}& ", "{color:", ";}& svg{fill:", ";}}&:active:not(:disabled){background:", ";& ", "{background:", ";}& ", "{color:", ";font-weight:600;}& svg{fill:", ";}& ", "{border:2px solid ", ";}}&:disabled{background:", ";", "{background:", ";}& ", "{background:", ";border:2px solid ", ";}", "{svg{fill:", ";}}", "{color:", ";}}", ""], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR, props => props.isHeader ? "1px solid  ".concat(props.theme.colors.neutral['200']) : 'none', props => props.theme.colors.neutral['080'], StyledStatusBadge, props => props.theme.colors.neutral['080'], props => {
+  switch (props.badgePosition) {
+    case 'left':
+      return 'margin-left: -2px;';
+
+    case 'right':
+      return 'margin-right: -2px;';
+
+    default:
+      return 'margin-left: -2px;';
+  }
+}, StyledWrapperLeftBorder, props => props.theme.colors.brand[800], StyledTileButtonLabel, props => props.theme.colors.neutral[600], props => props.theme.colors.brand[800], props => props.theme.colors.neutral['050'], StyledWrapperLeftBorder, props => props.theme.colors.brand[600], StyledTileButtonLabel, props => props.theme.colors.neutral[600], props => props.theme.colors.brand[600], StyledStatusBadge, props => props.theme.colors.neutral['050'], props => props.theme.colors.neutral['080'], StyledWrapperLeftBorder, props => props.theme.colors.neutral['400'], StyledStatusBadge, props => props.theme.colors.neutral['500'], props => props.theme.colors.neutral['080'], StyledTileButtonIcon, props => props.theme.colors.neutral[400], StyledTileButtonLabel, props => props.theme.colors.neutral[400], props => {
+  if (props.selected) {
+    return dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n        & ", " {\n          background: ", ";\n        }\n      "])), StyledWrapperLeftBorder, nestedProps => nestedProps.theme.colors.brand[600]);
+  }
+
+  return '';
+});
+const StyledWrapper = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-b69sbu-8"
+})(["height:100%;width:100%;position:relative;"]);
+
+exports.CloseButton = CloseButton;
+exports.StyledStatusBadge = StyledStatusBadge;
+exports.StyledTileButton = StyledTileButton;
+exports.StyledTileButtonIcon = StyledTileButtonIcon;
+exports.StyledTileButtonLabel = StyledTileButtonLabel;
+exports.StyledTooltipV3ButtonWrapper = StyledTooltipV3ButtonWrapper;
+exports.StyledWrapper = StyledWrapper;
+exports.StyledWrapperCentralContent = StyledWrapperCentralContent;
+exports.StyledWrapperLeftBorder = StyledWrapperLeftBorder;

package/cjs/index.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ChatBubble = require('./exported-related/bubble/ChatBubble.js');
+var props = require('./exported-related/bubble/props.js');
+var FloatingButton = require('./exported-related/floating-button/FloatingButton.js');
+var styled = require('./exported-related/floating-container/styled.js');
+var ChatContainerHeader = require('./exported-related/chat-container-header/ChatContainerHeader.js');
+var ChatEmptyState = require('./exported-related/chat-empty-state/ChatEmptyState.js');
+var SideBarChat = require('./exported-related/chat-sidebar/SideBarChat.js');
+var TileButton = require('./exported-related/tile-button/TileButton.js');
+var MessageDelimiter = require('./exported-related/message-delimiter/MessageDelimiter.js');
+var SystemMessage = require('./exported-related/system-message/SystemMessage.js');
+var ChatCard = require('./exported-related/chat-card/ChatCard.js');
+var reactDescPropTypes = require('./react-desc-prop-types.js');
+var ChatContainerComposer = require('./parts/chat-composer/ChatContainerComposer.js');
+var ChatContainer = require('./parts/chat-container/ChatContainer.js');
+var ChatContainerMessagesList = require('./parts/chat-container-messages-list/ChatContainerMessagesList.js');
+var ChatDataTestids = require('./ChatDataTestids.js');
+
+
+
+exports.ChatBubble = ChatBubble.ChatBubble;
+exports.ChatBubbleWithSchema = ChatBubble.ChatBubbleWithSchema;
+exports.BUBBLE_TYPES = props.BUBBLE_TYPES;
+exports.FloatingButton = FloatingButton.FloatingButton;
+exports.StyledFloatingContainer = styled.StyledFloatingContainer;
+exports.ChatContainerHeader = ChatContainerHeader.ChatContainerHeader;
+exports.ChatContainerHeaderWithSchema = ChatContainerHeader.ChatContainerHeaderWithSchema;
+exports.ChatEmptyState = ChatEmptyState.ChatEmptyState;
+exports.ChatEmptyStateWithSchema = ChatEmptyState.ChatEmptyStateWithSchema;
+exports.SideBarChat = SideBarChat.SideBarChat;
+exports.SideBarChatWithSchema = SideBarChat.SideBarChatWithSchema;
+exports.TileButton = TileButton.TileButton;
+exports.TileButtonWithSchema = TileButton.TileButtonWithSchema;
+exports.MessageDelimiter = MessageDelimiter.MessageDelimiter;
+exports.MessageDelimiterWithSchema = MessageDelimiter.MessageDelimiterWithSchema;
+exports.SystemMessage = SystemMessage.SystemMessage;
+exports.SystemMessageWithSchema = SystemMessage.SystemMessageWithSchema;
+exports.ChatCard = ChatCard.ChatCard;
+exports.ChatCardWithSchema = ChatCard.ChatCardWithSchema;
+exports.ChatComposerPropTypes = reactDescPropTypes.ChatComposerPropTypes;
+exports.ChatContainerMessagesListPropTypes = reactDescPropTypes.ChatContainerMessagesListPropTypes;
+exports.ChatContainerPropTypes = reactDescPropTypes.ChatContainerPropTypes;
+exports.defaultProps = reactDescPropTypes.defaultProps;
+exports.defaultPropsComposer = reactDescPropTypes.defaultPropsComposer;
+exports.defaultPropsMessagesList = reactDescPropTypes.defaultPropsMessagesList;
+exports.ChatComposer = ChatContainerComposer.ChatComposer;
+exports.ChatComposerWithSchema = ChatContainerComposer.ChatComposerWithSchema;
+exports.ChatContainer = ChatContainer.ChatContainer;
+exports.ChatContainerWithSchema = ChatContainer.ChatContainerWithSchema;
+exports.ChatContainerMessagesList = ChatContainerMessagesList.ChatContainerMessagesList;
+exports.ChatContainerMessagesListWithSchema = ChatContainerMessagesList.ChatContainerMessagesListWithSchema;
+exports.ChatDataTestIds = ChatDataTestids.ChatDataTestIds;

package/cjs/parts/chat-composer/ChatContainerComposer.js

@@ -0,0 +1,162 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsGrid = require('@elliemae/ds-grid');
+var dsIcons = require('@elliemae/ds-icons');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var styled = require('./styled.js');
+var reactDescPropTypes = require('../../react-desc-prop-types.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _PaperAirplane, _Grid;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const ChatComposer = props => {
+  var _input$current;
+
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.defaultPropsComposer);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.ChatComposerPropTypes);
+  const {
+    inputValue,
+    onChange,
+    onResize,
+    onSend,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    maxHeight = 300,
+    placeholder,
+    inputMaxLength,
+    maxLengthMessage,
+    ariaMaxLengthMessage,
+    buttonDisabled,
+    dataTestid,
+    actionRef
+  } = propsWithDefault;
+  const COMPOSER_MIN_HEIGHT = 32;
+  const input = React__default["default"].useRef();
+  const inputSize = React__default["default"].useRef();
+  const inputSend = React__default["default"].useRef();
+  const [height, setHeight] = React__default["default"].useState(32);
+  const internalMaxHeight = React__default["default"].useMemo(() => maxHeight - 24, [maxHeight]);
+  const [showScroll, setShowScroll] = React__default["default"].useState(true);
+  React__default["default"].useEffect(() => {
+    var _inputSize$current, _inputSize$current2, _inputSize$current3, _inputSize$current4;
+
+    const newHeight = ((_inputSize$current = inputSize.current) === null || _inputSize$current === void 0 ? void 0 : _inputSize$current.scrollHeight) > internalMaxHeight ? internalMaxHeight : (_inputSize$current2 = inputSize.current) === null || _inputSize$current2 === void 0 ? void 0 : _inputSize$current2.scrollHeight;
+    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) onResize(newHeight);
+    setHeight(newHeight);
+    setShowScroll(((_inputSize$current3 = inputSize.current) === null || _inputSize$current3 === void 0 ? void 0 : _inputSize$current3.scrollHeight) - ((_inputSize$current4 = inputSize.current) === null || _inputSize$current4 === void 0 ? void 0 : _inputSize$current4.clientHeight) > 5);
+  }, [inputValue, internalMaxHeight, height, onResize]);
+  React__default["default"].useEffect(() => {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusToComposer = () => {
+        input.current.focus();
+      };
+
+      actionRef.current.focusToSend = () => {
+        inputSend.current.focus();
+      };
+    }
+  }, [actionRef]);
+  const handleChange = React__default["default"].useCallback(e => {
+    onChange(e.target.value);
+  }, [onChange]);
+  const heightProps = {
+    height,
+    overflow: showScroll ? 'auto' : 'hidden'
+  };
+  const inputLength = String(inputValue || '').length;
+  const hasError = React__default["default"].useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentComposer, {
+    rows: ['auto', '15px'],
+    maxHeight: "".concat(maxHeight, "px"),
+    "data-testid": dataTestid
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    cols: ['1fr', '24px'],
+    style: {
+      height: heightProps.height
+    },
+    justifyContent: "center",
+    alignItems: "flex-end",
+    gutter: "xxs"
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledComposerInput, {
+    ref: input,
+    onChange: handleChange,
+    style: _objectSpread({}, heightProps),
+    value: inputValue,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
+    "aria-label": "Message to send",
+    "data-testid": "chat-composer-textarea",
+    name: "chat-composer-textarea",
+    id: "chat-composer-textarea"
+  }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    height: "32px",
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledComposerButton, {
+    buttonType: "text",
+    icon: _PaperAirplane || (_PaperAirplane = /*#__PURE__*/_jsx__default["default"](dsIcons.PaperAirplane, {
+      width: 18,
+      height: 18
+    })),
+    onClick: onSend,
+    size: "s",
+    disabled: !inputValue || buttonDisabled || hasError,
+    "data-testid": "chat-composer-send-button",
+    "aria-label": "Send",
+    innerRef: inputSend
+  }))), /*#__PURE__*/jsxRuntime.jsx(styled.StyledComposerInput, {
+    ref: inputSize,
+    style: {
+      height: 32,
+      visibility: 'hidden',
+      pointerEvents: 'none',
+      position: 'absolute',
+      top: 0,
+      width: (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.clientWidth
+    },
+    onChange: handleChange,
+    value: inputValue
+  }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    cols: ['1fr', '24px'],
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gutter: "xxs",
+    pb: "xxs"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledCounterArea, {
+    hasError: hasError,
+    "data-testid": "composer-counter-area"
+  }, void 0, inputMaxLength && hasError ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/_jsx__default["default"](styled.StyledCounterErrorA11y, {
+      role: "alert"
+    }, void 0, ariaMaxLengthMessage || "You have entered ".concat(inputLength, " characters and have exceeded the limit by ").concat(inputLength - inputMaxLength, ". Please limit to less than ").concat(inputMaxLength, " characters. ")), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
+  }) : '', inputMaxLength ? " ".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))));
+};
+
+const ChatComposerWithSchema = dsPropsHelpers.describe(ChatComposer);
+ChatComposerWithSchema.propTypes = reactDescPropTypes.ChatComposerPropTypes;
+
+exports.ChatComposer = ChatComposer;
+exports.ChatComposerWithSchema = ChatComposerWithSchema;

package/cjs/parts/chat-composer/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ChatContainerComposer = require('./ChatContainerComposer.js');
+
+
+
+exports.ChatComposer = ChatContainerComposer.ChatComposer;
+exports.ChatComposerWithSchema = ChatContainerComposer.ChatComposerWithSchema;

package/cjs/parts/chat-composer/styled.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+var DSButton = require('@elliemae/ds-button');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+// Composer
+const StyledChatContainerContentComposer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-1ahwpce-0"
+})(["width:100%;min-height:56px;background:", ";padding:", ";padding-bottom:3px;padding-top:6px;padding-left:", ";max-height:", ";border-top:1px solid #cbcfd7;"], props => props.theme.colors.neutral['050'], props => props.theme.space.xxs, props => props.theme.space.xs, props => props.maxHeight);
+const StyledComposerInput = /*#__PURE__*/styled__default["default"].textarea.withConfig({
+  componentId: "sc-1ahwpce-1"
+})(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.05s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
+const StyledComposerButton = /*#__PURE__*/styled__default["default"](DSButton.DSButton).withConfig({
+  componentId: "sc-1ahwpce-2"
+})(["&:disabled{background:none;svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[200]);
+const StyledCounterArea = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-1ahwpce-3"
+})(["text-align:right;font-size:11px;height:15px;align-items:center;font-style:italic;", " position:relative;"], props => props.hasError ? "color:".concat(props.theme.colors.danger[900], ";") : '');
+const StyledCounterErrorA11y = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1ahwpce-4"
+})(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
+
+exports.StyledChatContainerContentComposer = StyledChatContainerContentComposer;
+exports.StyledComposerButton = StyledComposerButton;
+exports.StyledComposerInput = StyledComposerInput;
+exports.StyledCounterArea = StyledCounterArea;
+exports.StyledCounterErrorA11y = StyledCounterErrorA11y;