@vendorflow/components 2.1.0 → 3.0.4

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

@@ -1,4 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-export default function ActionsMenu(): jsx.JSX.Element;

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

@@ -1,37 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 short_uuid_1 = __importDefault(require("short-uuid"));
-var hooks_1 = require("material-ui-popup-state/hooks");
-var material_1 = require("@mui/material");
-var icons_material_1 = require("@mui/icons-material");
-var react_2 = require("react");
-function ActionsMenu() {
-    var popupId = (0, react_2.useRef)(short_uuid_1.default.generate());
-    var popupState = (0, hooks_1.usePopupState)({ variant: 'popover', popupId: popupId.current });
-    return ((0, react_1.jsx)("div", null,
-        (0, react_1.jsx)(material_1.Tooltip, { placement: "top", title: "Actions" },
-            (0, react_1.jsx)(material_1.IconButton, __assign({}, (0, hooks_1.bindTrigger)(popupState)),
-                (0, react_1.jsx)(icons_material_1.MapsUgc, null))),
-        (0, react_1.jsx)(material_1.Menu, __assign({}, (0, hooks_1.bindMenu)(popupState), { anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { vertical: 'bottom', horizontal: 'right' } }),
-            (0, react_1.jsx)(material_1.MenuItem, null, "Template 1"),
-            (0, react_1.jsx)(material_1.MenuItem, null, "Template 2"),
-            (0, react_1.jsx)(material_1.MenuItem, null, "Template 3"))));
-}
-exports.default = ActionsMenu;

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

@@ -1,33 +0,0 @@
-import { ReactNode, Ref } from 'react';
-export interface Message {
-    id: string;
-    userId: string;
-    username: string;
-    /** use for building chat icon */
-    initials: string;
-    timestamp: string;
-    content: string;
-}
-export interface ChatInterfaceProps {
-    userId: string;
-    messages: Message[];
-    handleSend: (message: string) => Promise<boolean>;
-    className?: string;
-    style?: any;
-    placeholder?: string;
-    hasNextPage?: boolean;
-    fetchNextPage?: () => Promise<any> | any;
-    /** Determines if the initial load is happening */
-    isLoading: boolean;
-    /** Determines if a data fetch is happening */
-    isFetching: boolean;
-    /** Determines if a message submission is happening */
-    isSubmitting: boolean;
-    colors?: {
-        user: string;
-        others: string;
-    };
-    /** Needs to take a ref that is used to determine the height of the input component */
-    renderInputComponent?: (ref: Ref<HTMLDivElement>) => ReactNode;
-}
-export default function ChatInterface({ userId, messages, fetchNextPage, handleSend, hasNextPage, className, style, isSubmitting, placeholder, isLoading, isFetching, colors, renderInputComponent, }: ChatInterfaceProps): JSX.Element;

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

@@ -1,109 +0,0 @@
-"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

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

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

@@ -1,134 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-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

@@ -1,53 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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

@@ -1,71 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-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

@@ -1,119 +0,0 @@
-"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

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

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

@@ -1,8 +0,0 @@
-"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; } });