@vendorflow/components 2.0.95 → 2.0.97

package/lib/components/material-ui/ChatInterface/ChatInterface.js

@@ -0,0 +1,109 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var react_2 = require("react");
+var react_measure_1 = __importDefault(require("react-measure"));
+var MessageInput_1 = __importDefault(require("./MessageInput"));
+var MessageThread_1 = __importDefault(require("./MessageThread"));
+function ChatInterface(_a) {
+    var userId = _a.userId, messages = _a.messages, fetchNextPage = _a.fetchNextPage, handleSend = _a.handleSend, hasNextPage = _a.hasNextPage, className = _a.className, style = _a.style, isSubmitting = _a.isSubmitting, placeholder = _a.placeholder, isLoading = _a.isLoading, isFetching = _a.isFetching, colors = _a.colors, renderInputComponent = _a.renderInputComponent;
+    var _b = __read((0, react_2.useState)(''), 2), message = _b[0], setMessage = _b[1];
+    var _c = __read((0, react_2.useState)(-1), 2), inputHeight = _c[0], setInputHeight = _c[1];
+    function handleClickSend() {
+        return __awaiter(this, void 0, void 0, function () {
+            var success, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, handleSend(message)];
+                    case 1:
+                        success = _a.sent();
+                        if (success) {
+                            setMessage('');
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        e_1 = _a.sent();
+                        // tslint:disable-next-line:no-console
+                        console.error(e_1);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: 100%;\n        height: 100%;\n        min-height: 15rem;\n        position: relative;\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n          'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      "], ["\n        width: 100%;\n        height: 100%;\n        min-height: 15rem;\n        position: relative;\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n          'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      "]))), className: className, style: style },
+        (0, react_1.jsx)(react_measure_1.default, { bounds: true, onResize: function (_a) {
+                var bounds = _a.bounds;
+                return setInputHeight((bounds === null || bounds === void 0 ? void 0 : bounds.height) || 0);
+            } }, function (_a) {
+            var measureRef = _a.measureRef;
+            return ((0, react_1.jsx)(react_2.Fragment, null,
+                (0, react_1.jsx)(MessageThread_1.default, { userId: userId, messages: messages, inputHeight: inputHeight, hasNextPage: hasNextPage, fetchNextPage: fetchNextPage, isLoading: isLoading, isFetching: isFetching, isSubmitting: isSubmitting, colors: colors }),
+                renderInputComponent ? (renderInputComponent(measureRef)) : ((0, react_1.jsx)(MessageInput_1.default, { ref: measureRef, handleClickSend: handleClickSend, message: message, setMessage: setMessage, isSubmitting: isSubmitting, placeholder: placeholder }))));
+        })));
+}
+exports.default = ChatInterface;
+var templateObject_1;

package/lib/components/material-ui/ChatInterface/ChatInterface.story.d.ts

@@ -0,0 +1 @@
+export declare function ChatInterface(): JSX.Element;

package/lib/components/material-ui/ChatInterface/ChatInterface.story.js

@@ -0,0 +1,134 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatInterface = void 0;
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var react_2 = require("react");
+var faker_1 = __importDefault(require("faker"));
+var short_uuid_1 = __importDefault(require("short-uuid"));
+var ChatInterface_1 = __importDefault(require("./ChatInterface"));
+var Workspaces_constants_1 = require("@vendorflow/common/lib/constants/Workspaces.constants");
+// tslint:disable-next-line:no-console
+function ChatInterface() {
+    var _a = __read((0, react_2.useState)(true), 2), isLoading = _a[0], setLoading = _a[1];
+    var _b = __read((0, react_2.useState)(true), 2), isFetching = _b[0], setFetching = _b[1];
+    var _c = __read((0, react_2.useState)(false), 2), isSubmitting = _c[0], setSubmitting = _c[1];
+    var _d = __read((0, react_2.useState)([]), 2), messages = _d[0], setMessages = _d[1];
+    var _e = __read((0, react_2.useState)(true), 2), hasMore = _e[0], setHasMore = _e[1];
+    (0, react_2.useEffect)(function () {
+        setMessages(new Array(5).fill(null).map(generateMessage).concat([generateSystemMessage()]));
+        setLoading(false);
+        setFetching(false);
+    }, []);
+    function generateTimestamp() {
+        return new Date().toISOString();
+    }
+    function generateId() {
+        return short_uuid_1.default.generate();
+    }
+    function generateSystemMessage() {
+        return {
+            id: generateId(),
+            userId: Workspaces_constants_1.SYSTEM_IDENTITY_ID,
+            username: 'System',
+            initials: 'S',
+            timestamp: generateTimestamp(),
+            content: faker_1.default.lorem.sentence(5, 2),
+        };
+    }
+    function generateMessage() {
+        var user = faker_1.default.random.arrayElement([
+            {
+                id: 'user1',
+                name: 'Socorro Aguilar',
+                initials: 'SA',
+            },
+            {
+                id: 'user2',
+                name: 'Greg Bujak',
+                initials: 'GB',
+            },
+            {
+                id: 'user3',
+                name: 'xinyi@vendorflow.co',
+                initials: 'X',
+            },
+        ]);
+        return {
+            id: generateId(),
+            userId: user.id,
+            username: user.name,
+            initials: user.initials,
+            timestamp: generateTimestamp(),
+            content: faker_1.default.lorem.sentence(5, 2),
+        };
+    }
+    function generateMessagePage() {
+        return new Array(10).fill(null).map(generateMessage);
+    }
+    var fetchNextPage = (0, react_2.useCallback)(function () {
+        setFetching(true);
+        setTimeout(function () {
+            setMessages(__spreadArray(__spreadArray([], __read(messages), false), __read(generateMessagePage()), false));
+            setFetching(false);
+        }, 100);
+    }, [messages, generateMessagePage, setMessages]);
+    function handleSend(message) {
+        setSubmitting(true);
+        setFetching(true);
+        return new Promise(function (resolve) {
+            setTimeout(function () {
+                setMessages(__spreadArray([
+                    {
+                        id: generateId(),
+                        userId: 'user1',
+                        username: 'Socorro Aguilar',
+                        initials: 'SA',
+                        timestamp: generateTimestamp(),
+                        content: message,
+                    }
+                ], __read(messages), false));
+                setSubmitting(false);
+                setFetching(false);
+                resolve(true);
+            }, 500);
+        });
+    }
+    return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        border: 1px solid #ededed;\n        height: 30rem;\n      "], ["\n        border: 1px solid #ededed;\n        height: 30rem;\n      "]))) },
+        (0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, fetchNextPage: fetchNextPage, hasNextPage: hasMore, isLoading: isLoading, isFetching: isFetching, isSubmitting: isSubmitting })));
+}
+exports.ChatInterface = ChatInterface;
+var templateObject_1;

package/lib/components/material-ui/ChatInterface/MessageInput.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ChatInterfaceProps } from './ChatInterface';
+interface Props extends Pick<ChatInterfaceProps, 'isSubmitting' | 'placeholder'> {
+    handleClickSend: () => Promise<void>;
+    message: string;
+    setMessage: Dispatch<SetStateAction<string>>;
+}
+declare const MessageInput: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export default MessageInput;

package/lib/components/material-ui/ChatInterface/MessageInput.js

@@ -0,0 +1,53 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var react_2 = require("react");
+var react_textarea_autosize_1 = __importDefault(require("react-textarea-autosize"));
+var material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
+var ActionsMenu_1 = __importDefault(require("./ActionsMenu"));
+var MessageInput = (0, react_2.forwardRef)(function (_a, ref) {
+    var handleClickSend = _a.handleClickSend, message = _a.message, placeholder = _a.placeholder, setMessage = _a.setMessage, isSubmitting = _a.isSubmitting;
+    function handleOnChange(_a) {
+        var value = _a.target.value;
+        setMessage(value);
+    }
+    function handleOnKeyDown(evt) {
+        if (evt.key === 'Enter') {
+            evt.stopPropagation();
+            evt.preventDefault();
+            if (!evt.metaKey && message.trim().length) {
+                handleClickSend().then();
+            }
+            else if (evt.metaKey) {
+                setMessage(message + '\n');
+            }
+        }
+    }
+    function handleOnClickSend() {
+        if (message.trim().length) {
+            handleClickSend().then();
+        }
+    }
+    return ((0, react_1.jsx)("div", { ref: ref, css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          width: 100%;\n          background-color: white;\n          bottom: 0;\n          left: 0;\n          position: absolute;\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-start;\n          align-items: center;\n        "], ["\n          width: 100%;\n          background-color: white;\n          bottom: 0;\n          left: 0;\n          position: absolute;\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-start;\n          align-items: center;\n        "]))) },
+        (0, react_1.jsx)(react_textarea_autosize_1.default, { css: function (theme) {
+                var _a, _b;
+                return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n              'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n            resize: none;\n            width: calc(100% - 3.5rem);\n            outline: 0 none transparent;\n            font-size: 16px;\n            margin: 0.5rem;\n            padding: 0.5rem;\n            box-sizing: border-box;\n            border-radius: 5px;\n            border-color: ", ";\n          "], ["\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n              'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n            resize: none;\n            width: calc(100% - 3.5rem);\n            outline: 0 none transparent;\n            font-size: 16px;\n            margin: 0.5rem;\n            padding: 0.5rem;\n            box-sizing: border-box;\n            border-radius: 5px;\n            border-color: ", ";\n          "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(0, 0%, 89%)');
+            }, placeholder: placeholder || 'Type your message here...', value: message, onChange: handleOnChange, onKeyDown: handleOnKeyDown, minRows: 3, maxRows: 8 }),
+        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            align-items: center;\n            padding-right: 0.5rem;\n            overflow: hidden;\n          "], ["\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            align-items: center;\n            padding-right: 0.5rem;\n            overflow: hidden;\n          "]))) },
+            (0, react_1.jsx)(ActionsMenu_1.default, null),
+            isSubmitting ? ((0, react_1.jsx)(material_1.CircularProgress, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                margin: 8px;\n              "], ["\n                margin: 8px;\n              "]))), size: "1.5rem" })) : ((0, react_1.jsx)(material_1.Tooltip, { title: "Send Now", placement: "bottom" },
+                (0, react_1.jsx)(material_1.IconButton, { onClick: handleOnClickSend, disabled: isSubmitting },
+                    (0, react_1.jsx)(icons_material_1.Send, null)))))));
+});
+exports.default = MessageInput;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/components/material-ui/ChatInterface/MessageItem.d.ts

@@ -0,0 +1,8 @@
+import { ChatInterfaceProps, Message } from './ChatInterface';
+interface Props {
+    userId: string;
+    message: Message;
+    colors: ChatInterfaceProps['colors'];
+}
+export default function MessageItem({ userId, message, colors }: Props): JSX.Element;
+export {};

package/lib/components/material-ui/ChatInterface/MessageItem.js

@@ -0,0 +1,71 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var date_fns_1 = require("date-fns");
+var icons_material_1 = require("@mui/icons-material");
+var material_1 = require("@mui/material");
+var react_2 = require("react");
+var Workspaces_constants_1 = require("@vendorflow/common/lib/constants/Workspaces.constants");
+function MessageItem(_a) {
+    var userId = _a.userId, message = _a.message, colors = _a.colors;
+    var _b = __read((0, react_2.useState)(getUnixTimestamp()), 2), displayUpdateAt = _b[0], setDisplayUpdateAt = _b[1];
+    (0, react_2.useEffect)(function () {
+        var interval = setInterval(function () { return setDisplayUpdateAt(getUnixTimestamp()); }, 60 * 1000);
+        return function () { return clearInterval(interval); };
+    }, []);
+    function getUnixTimestamp() {
+        return Math.floor(new Date().getTime() / 1000);
+    }
+    var timeDisplay = (0, react_2.useMemo)(function () {
+        var now = new Date();
+        var timestamp = new Date(message.timestamp);
+        if ((0, date_fns_1.isToday)(timestamp)) {
+            var hours = (0, date_fns_1.differenceInHours)(now, timestamp);
+            if (hours > 0) {
+                return hours + " hour" + (hours === 1 ? '' : 's') + " ago";
+            }
+            var minutes = (0, date_fns_1.differenceInMinutes)(now, timestamp);
+            if (minutes > 0) {
+                return minutes + " minute" + (minutes === 1 ? '' : 's') + " ago";
+            }
+            return "now";
+        }
+        return (0, date_fns_1.format)(new Date(message.timestamp), 'H:mm MM/dd/yyyy');
+    }, [message.timestamp, displayUpdateAt]);
+    return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: 100%;\n        background: white;\n        margin-top: 0.5rem;\n        border-radius: 4px;\n        display: flex;\n        flex-direction: row;\n      "], ["\n        width: 100%;\n        background: white;\n        margin-top: 0.5rem;\n        border-radius: 4px;\n        display: flex;\n        flex-direction: row;\n      "]))) },
+        (0, react_1.jsx)(material_1.Avatar, { css: function (theme) {
+                var _a, _b, _c, _d, _e;
+                return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          && {\n            font-size: 1rem;\n            height: 2rem;\n            width: 2rem;\n            margin-right: 0.5rem;\n            visibility: ", ";\n            background-color: ", ";\n          }\n        "], ["\n          && {\n            font-size: 1rem;\n            height: 2rem;\n            width: 2rem;\n            margin-right: 0.5rem;\n            visibility: ", ";\n            background-color: ", ";\n          }\n        "])), message.userId === Workspaces_constants_1.SYSTEM_IDENTITY_ID ? 'hidden' : 'visible', userId === message.userId
+                    ? (colors === null || colors === void 0 ? void 0 : colors.user) || ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.custom) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.tertiary) === null || _c === void 0 ? void 0 : _c.main) || 'hsl(0, 0%, 89%)'
+                    : (colors === null || colors === void 0 ? void 0 : colors.others) || ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) || 'hsl(0, 0%, 47%)');
+            } }, message.initials === '' ? (0, react_1.jsx)(icons_material_1.Person, null) : message.initials),
+        (0, react_1.jsx)("div", null,
+            (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            display: flex;\n            flex-direction: row;\n            justify-content: flex-start;\n            align-items: flex-start;\n          "], ["\n            display: flex;\n            flex-direction: row;\n            justify-content: flex-start;\n            align-items: flex-start;\n          "]))) },
+                (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              font-weight: 700;\n              font-size: 0.75rem;\n              display: inline-block;\n              margin-right: 0.25rem;\n            "], ["\n              font-weight: 700;\n              font-size: 0.75rem;\n              display: inline-block;\n              margin-right: 0.25rem;\n            "]))) }, message.username),
+                (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n              font-size: 0.75rem;\n              display: inline-block;\n            "], ["\n              font-size: 0.75rem;\n              display: inline-block;\n            "]))) }, timeDisplay)),
+            (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n            color: ", ";\n            font-size: 0.875rem;\n            white-space: break-spaces;\n          "], ["\n            color: ", ";\n            font-size: 0.875rem;\n            white-space: break-spaces;\n          "])), message.userId === Workspaces_constants_1.SYSTEM_IDENTITY_ID ? 'hsl(0, 0%, 65%)' : 'inherit') }, message.content))));
+}
+exports.default = MessageItem;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/components/material-ui/ChatInterface/MessageThread.d.ts

@@ -0,0 +1,6 @@
+import { ChatInterfaceProps } from './ChatInterface';
+interface Props extends Pick<ChatInterfaceProps, 'userId' | 'messages' | 'hasNextPage' | 'fetchNextPage' | 'isLoading' | 'isFetching' | 'isSubmitting' | 'colors'> {
+    inputHeight: number;
+}
+export default function MessageThread({ userId, messages, inputHeight, hasNextPage, fetchNextPage, isLoading, isFetching, isSubmitting, colors, }: Props): JSX.Element;
+export {};

package/lib/components/material-ui/ChatInterface/MessageThread.js

@@ -0,0 +1,119 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var react_2 = require("react");
+var MessageItem_1 = __importDefault(require("./MessageItem"));
+var lodash_1 = require("lodash");
+var material_1 = require("@mui/material");
+function MessageThread(_a) {
+    var _b;
+    var userId = _a.userId, messages = _a.messages, inputHeight = _a.inputHeight, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, isLoading = _a.isLoading, isFetching = _a.isFetching, isSubmitting = _a.isSubmitting, colors = _a.colors;
+    var isInitialized = (0, react_2.useRef)(false);
+    var isScrollLoad = (0, react_2.useRef)(false);
+    var hasSubmitted = (0, react_2.useRef)(false);
+    var prevScrollTop = (0, react_2.useRef)(null);
+    var prevScrollHeight = (0, react_2.useRef)(null);
+    var shouldScrollToPrevPosition = (0, react_2.useRef)(false);
+    var scrollParent = (0, react_2.useRef)(null);
+    var handleScrollEvent = (0, react_2.useCallback)((0, lodash_1.debounce)(function (evt) {
+        var parent = evt.target;
+        if (parent.scrollTop === 0 && hasNextPage && fetchNextPage && !isLoading && !isFetching) {
+            isScrollLoad.current = true;
+            prevScrollHeight.current = parent.scrollHeight;
+            fetchNextPage();
+        }
+    }, 300), [hasNextPage, fetchNextPage, isLoading, isFetching]);
+    (0, react_2.useEffect)(function () {
+        if (isSubmitting) {
+            hasSubmitted.current = true;
+        }
+    }, [isSubmitting]);
+    // This will handle the initial loading of messages, then scroll to bottom
+    (0, react_2.useEffect)(function () {
+        if (!isInitialized.current && !isFetching && scrollParent.current) {
+            var _a = scrollParent.current, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight;
+            if (clientHeight >= scrollHeight && hasNextPage && fetchNextPage) {
+                fetchNextPage();
+                return;
+            }
+            isInitialized.current = true;
+            scrollParent.current.scrollTo(0, scrollHeight - clientHeight);
+        }
+    }, [isFetching, isInitialized.current, hasNextPage, fetchNextPage]);
+    // Sets up the scroll event listener
+    (0, react_2.useEffect)(function () {
+        if (scrollParent.current) {
+            scrollParent.current.addEventListener('scroll', handleScrollEvent);
+        }
+        return function () {
+            if (scrollParent.current) {
+                scrollParent.current.removeEventListener('scroll', handleScrollEvent);
+            }
+        };
+    }, [scrollParent.current, hasNextPage, fetchNextPage, isLoading, isFetching]);
+    // Handles the scroll position adjustment after fetching the next page
+    (0, react_2.useEffect)(function () {
+        if (!isFetching &&
+            isInitialized.current &&
+            scrollParent.current &&
+            isScrollLoad.current &&
+            prevScrollHeight.current &&
+            scrollParent.current.scrollHeight !== prevScrollHeight.current) {
+            var delta = scrollParent.current.scrollHeight - prevScrollHeight.current;
+            scrollParent.current.scrollTo(0, delta);
+            isScrollLoad.current = false;
+            prevScrollHeight.current = 0;
+        }
+    }, [isFetching, prevScrollHeight.current]);
+    // Manages scroll position for data changes that are triggered from anything other than the scroll event
+    (0, react_2.useEffect)(function () {
+        var _a;
+        if (scrollParent.current && !isScrollLoad.current && isInitialized.current) {
+            var _b = scrollParent.current, scrollHeight = _b.scrollHeight, scrollTop = _b.scrollTop, clientHeight = _b.clientHeight;
+            if (isFetching) {
+                // track the current position
+                prevScrollHeight.current = scrollHeight;
+                prevScrollTop.current = scrollTop;
+                var distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+                if (!isSubmitting && distanceFromBottom > 200) {
+                    shouldScrollToPrevPosition.current = true;
+                }
+            }
+            else {
+                // init to scroll to bottom delta
+                var delta = scrollHeight - clientHeight;
+                if (hasSubmitted.current) {
+                    // scroll to bottom if this was triggered by the current user's sent message
+                    (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, delta);
+                }
+                else if (!isFetching && prevScrollHeight.current !== null && prevScrollTop.current !== null) {
+                    if (shouldScrollToPrevPosition.current) {
+                        delta = prevScrollTop.current;
+                    }
+                    scrollParent.current.scrollTo(0, delta);
+                }
+                // clean up
+                prevScrollHeight.current = null;
+                prevScrollTop.current = null;
+                hasSubmitted.current = false;
+                shouldScrollToPrevPosition.current = false;
+            }
+        }
+    }, [isFetching, (_b = scrollParent.current) === null || _b === void 0 ? void 0 : _b.scrollHeight]);
+    return ((0, react_1.jsx)("div", { ref: scrollParent, css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        box-sizing: border-box;\n        height: calc(100% - ", "px);\n        width: 100%;\n        padding: 0.5rem 1rem;\n        overflow-y: auto;\n      "], ["\n        box-sizing: border-box;\n        height: calc(100% - ", "px);\n        width: 100%;\n        padding: 0.5rem 1rem;\n        overflow-y: auto;\n      "])), inputHeight) },
+        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: column-reverse;\n          justify-content: flex-start;\n          align-items: flex-start;\n        "], ["\n          display: flex;\n          flex-direction: column-reverse;\n          justify-content: flex-start;\n          align-items: flex-start;\n        "]))) },
+            messages.map(function (message) { return ((0, react_1.jsx)(MessageItem_1.default, { key: "" + message.id, message: message, userId: userId, colors: colors })); }),
+            hasNextPage && ((0, react_1.jsx)("div", { key: "loader", css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              width: 100%;\n              margin: 0.5rem 0;\n              height: auto;\n              display: flex;\n              justify-content: center;\n              align-items: center;\n\n              && {\n                visibility: ", ";\n              }\n            "], ["\n              width: 100%;\n              margin: 0.5rem 0;\n              height: auto;\n              display: flex;\n              justify-content: center;\n              align-items: center;\n\n              && {\n                visibility: ", ";\n              }\n            "])), isFetching && isScrollLoad ? 'visible' : 'hidden') },
+                (0, react_1.jsx)(material_1.CircularProgress, { size: "1.5rem", disableShrink: true }))))));
+}
+exports.default = MessageThread;
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/components/material-ui/ChatInterface/index.d.ts

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

package/lib/components/material-ui/ChatInterface/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ChatInterface_1 = require("./ChatInterface");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ChatInterface_1).default; } });

package/lib/components/material-ui/ColorPicker/styles.d.ts

@@ -1 +1 @@
-export declare const colorPaletteStyles: import("@emotion/utils").SerializedStyles;
+export declare const colorPaletteStyles: import("@emotion/react").SerializedStyles;

package/lib/components/material-ui/DataTable/AppliedFilters.d.ts

@@ -0,0 +1,12 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { Filters, UseFiltersInstanceProps } from 'react-table';
+import { SimpleMap } from '../../../types/Internal.types';
+interface Props<D extends object> {
+    columnNameById: SimpleMap<string>;
+    filters: Filters<D>;
+    setFilter: UseFiltersInstanceProps<D>['setFilter'];
+}
+export default function AppliedFilters<D extends object>({ columnNameById, filters, setFilter }: Props<D>): jsx.JSX.Element | null;
+export {};

package/lib/components/material-ui/DataTable/AppliedFilters.js

@@ -0,0 +1,26 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var SingleSelectFilter_1 = require("./FilterTool/Filters/SingleSelectFilter");
+var PADDING = 24;
+function AppliedFilters(_a) {
+    var columnNameById = _a.columnNameById, filters = _a.filters, setFilter = _a.setFilter;
+    if (!filters.length) {
+        return null;
+    }
+    return ((0, react_1.jsx)(material_1.Stack, { direction: "row", overflow: "none", css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: calc(100% - ", "px);\n        padding: 8px ", "px;\n        flex-wrap: wrap;\n        gap: 0.25rem 0.25rem;\n      "], ["\n        width: calc(100% - ", "px);\n        padding: 8px ", "px;\n        flex-wrap: wrap;\n        gap: 0.25rem 0.25rem;\n      "])), PADDING * 2, PADDING) }, filters
+        .filter(function (filter) {
+        return (Array.isArray(filter.value) && !!filter.value.length) ||
+            (!Array.isArray(filter.value) && filter.value != null);
+    })
+        .map(function (filter) { return ((0, react_1.jsx)(material_1.Chip, { key: filter.id, label: columnNameById[filter.id] + ": " + (filter.value === '' ? SingleSelectFilter_1.BLANK_VALUE_LABEL : filter.value), onDelete: function () { return setFilter(filter.id, null); } })); })));
+}
+exports.default = AppliedFilters;
+var templateObject_1;

package/lib/components/material-ui/DataTable/GlobalSearchFilter.d.ts

@@ -0,0 +1,10 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+interface Props {
+    setShowSearch: (value: boolean) => void;
+    globalFilter: string;
+    setGlobalFilter: (filterValue: any) => void;
+}
+export default function GlobalSearchFilter({ globalFilter, setGlobalFilter, setShowSearch }: Props): jsx.JSX.Element;
+export {};