@superdispatch/ui-lab 0.23.0 → 0.23.3

package/dist-node/index.js

@@ -15,6 +15,8 @@ var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread
 var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
 var reactTransitionGroup = require('react-transition-group');
 var core = require('@material-ui/core');
+var dates = require('@superdispatch/dates');
+var uiLab = require('@superdispatch/ui-lab');
 var js = require('@mdi/js');
 var Dropzone = _interopDefault(require('react-dropzone'));
 var reactAnchorme = require('react-anchorme');
@@ -531,6 +533,89 @@ var AnchorButton = /*#__PURE__*/react.forwardRef((_ref5, ref) => {
 });
 if (process.env.NODE_ENV !== "production") AnchorButton.displayName = "AnchorButton";
 
+var ChatContainer = /*#__PURE__*/styled__default('div').withConfig({
+  displayName: "Chat__ChatContainer",
+  componentId: "SD__sc-qksih8-0"
+})(_ref => {
+  var {
+    isEmpty
+  } = _ref;
+  return "\n  display: flex;\n  flex-direction: column-reverse;\n  overflow: auto;\n  justify-content: ".concat(isEmpty ? 'center' : 'end', ";\n  width: 100%;\n  height: 100%;\n  min-width: 300px;\n  max-width: 560px;\n  min-height: 368px;\n  max-height: 696px;\n  padding: 16px;\n  box-sizing: border-box;\n");
+});
+
+function emptyPlaceholder(text) {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+    color: "textSecondary",
+    align: "center",
+    children: text
+  });
+}
+
+var Chat = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
+  var {
+    children,
+    className,
+    emptyText = 'No new messages'
+  } = _ref2;
+  var isEmpty = react.Children.toArray(children).length === 0;
+  return /*#__PURE__*/jsxRuntime.jsx(ChatContainer, {
+    "data-testid": "chat-container",
+    isEmpty: isEmpty,
+    ref: ref,
+    className: className,
+    children: /*#__PURE__*/jsxRuntime.jsx(ui.Stack, {
+      space: "small",
+      children: isEmpty ? emptyPlaceholder(emptyText) : children
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") Chat.displayName = "Chat";
+Chat.displayName = 'Chat';
+
+var ChatMessage = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  var {
+    author,
+    role,
+    dateTime,
+    text,
+    variant
+  } = _ref;
+  var time = dates.formatDate(dateTime, {
+    variant: 'Time'
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(ui.Stack, {
+    space: "xxsmall",
+    align: variant === 'outgoing' ? 'right' : 'left',
+    ref: ref,
+    "data-testid": "chat-message",
+    children: [/*#__PURE__*/jsxRuntime.jsxs(ui.Inline, {
+      verticalAlign: "center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+        color: "textPrimary",
+        children: author
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+        color: "textSecondary",
+        children: role
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+        color: "textSecondary",
+        children: time
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(uiLab.Box, {
+      display: "inline-block",
+      padding: "xsmall",
+      marginTop: "none",
+      borderRadius: "medium",
+      backgroundColor: variant === 'outgoing' ? 'Blue50' : 'Silver200',
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+        color: "textPrimary",
+        children: text
+      })
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") ChatMessage.displayName = "ChatMessage";
+ChatMessage.displayName = 'ChatMessage';
+
 var _excluded$3 = ["fullViewportHeight"];
 var Container = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -2108,6 +2193,8 @@ exports.Banner = Banner;
 exports.Box = Box;
 exports.Button = Button;
 exports.ButtonArea = ButtonArea;
+exports.Chat = Chat;
+exports.ChatMessage = ChatMessage;
 exports.Container = Container;
 exports.DescriptionItem = DescriptionItem;
 exports.FileDropZone = FileDropZone;