@vendorflow/components 2.0.42 → 2.0.46

package/lib/components/index.d.ts

@@ -10,5 +10,4 @@ export { default as InputCheckboxGroup } from './material-ui/InputCheckboxGroup'
 export { default as InputRadioGroup } from './material-ui/InputRadioGroup';
 export { default as InputSearchDropdown } from './material-ui/InputSearchDropdown';
 export { default as InputTime } from './material-ui/InputTime';
-export { default as InfiniteScroll } from './InfiniteScroll';
 export { default as Modal } from './material-ui/Modal';

package/lib/components/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = exports.InfiniteScroll = exports.InputTime = exports.InputSearchDropdown = exports.InputRadioGroup = exports.InputCheckboxGroup = exports.InputGroup = exports.InputDateTime = exports.InputDate = exports.DataTable = exports.ColorPicker = exports.ChatInterface = exports.ButtonMenu = exports.Button = void 0;
+exports.Modal = exports.InputTime = exports.InputSearchDropdown = exports.InputRadioGroup = exports.InputCheckboxGroup = exports.InputGroup = exports.InputDateTime = exports.InputDate = exports.DataTable = exports.ColorPicker = exports.ChatInterface = exports.ButtonMenu = exports.Button = void 0;
 var Button_1 = require("./material-ui/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
 var ButtonMenu_1 = require("./material-ui/ButtonMenu");
@@ -28,7 +28,5 @@ var InputSearchDropdown_1 = require("./material-ui/InputSearchDropdown");
 Object.defineProperty(exports, "InputSearchDropdown", { enumerable: true, get: function () { return __importDefault(InputSearchDropdown_1).default; } });
 var InputTime_1 = require("./material-ui/InputTime");
 Object.defineProperty(exports, "InputTime", { enumerable: true, get: function () { return __importDefault(InputTime_1).default; } });
-var InfiniteScroll_1 = require("./InfiniteScroll");
-Object.defineProperty(exports, "InfiniteScroll", { enumerable: true, get: function () { return __importDefault(InfiniteScroll_1).default; } });
 var Modal_1 = require("./material-ui/Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(Modal_1).default; } });

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

@@ -3,6 +3,8 @@ export interface Message {
     id: string;
     userId: string;
     username: string;
+    /** use for building chat icon */
+    initials: string;
     timestamp: string;
     content: string;
 }

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

@@ -101,7 +101,7 @@ function ChatInterface(_a) {
             } }, 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, colors: colors }),
+                (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 }))));
         })));
 }

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

@@ -40,6 +40,7 @@ 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];
@@ -48,7 +49,7 @@ function ChatInterface() {
     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));
+        setMessages(new Array(5).fill(null).map(generateMessage).concat([generateSystemMessage()]));
         setLoading(false);
         setFetching(false);
     }, []);
@@ -58,21 +59,39 @@ function ChatInterface() {
     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),
         };
@@ -80,35 +99,36 @@ function ChatInterface() {
     function generateMessagePage() {
         return new Array(10).fill(null).map(generateMessage);
     }
-    function loadMore() {
+    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 () {
-                setSubmitting(false);
-                setFetching(false);
                 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: loadMore, hasNextPage: hasMore, isLoading: isLoading, isFetching: isFetching, isSubmitting: isSubmitting })));
+        (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/MessageItem.js

@@ -27,6 +27,7 @@ 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];
@@ -56,16 +57,15 @@ function MessageItem(_a) {
     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            height: 2rem;\n            width: 2rem;\n            margin-right: 0.5rem;\n            background-color: ", ";\n          }\n        "], ["\n          && {\n            height: 2rem;\n            width: 2rem;\n            margin-right: 0.5rem;\n            background-color: ", ";\n          }\n        "])), userId === message.userId
+                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%)');
-            } },
-            (0, react_1.jsx)(icons_material_1.Person, null)),
+            } }, 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            font-size: 0.875rem;\n            white-space: break-spaces;\n          "], ["\n            font-size: 0.875rem;\n            white-space: break-spaces;\n          "]))) }, message.content))));
+            (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 +1,6 @@
 import { ChatInterfaceProps } from './ChatInterface';
-interface Props extends Pick<ChatInterfaceProps, 'userId' | 'messages' | 'hasNextPage' | 'fetchNextPage' | 'isLoading' | 'isFetching' | 'colors'> {
+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, colors, }: Props): JSX.Element;
+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

@@ -12,12 +12,108 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@emotion/react");
 var react_2 = require("react");
 var MessageItem_1 = __importDefault(require("./MessageItem"));
-var InfiniteScroll_1 = __importDefault(require("../../InfiniteScroll/InfiniteScroll"));
+var lodash_1 = require("lodash");
+var material_1 = require("@mui/material");
 function MessageThread(_a) {
-    var userId = _a.userId, messages = _a.messages, inputHeight = _a.inputHeight, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, isLoading = _a.isLoading, isFetching = _a.isFetching, colors = _a.colors;
+    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)(InfiniteScroll_1.default, { scrollParent: scrollParent, isReverse: true, isLoading: isLoading, isFetching: isFetching, hasNextPage: hasNextPage, fetchNextPage: fetchNextPage }, messages.map(function (message) { return ((0, react_1.jsx)(MessageItem_1.default, { key: "" + message.id, message: message, userId: userId, colors: colors })); }))));
+        (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;
+var templateObject_1, templateObject_2, templateObject_3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.42",
+  "version": "2.0.46",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -62,6 +62,7 @@
     "@types/react-table": "^7.7.6",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "@typescript-eslint/parser": "^4.32.0",
+    "@vendorflow/common": "^1.0.36",
     "babel-eslint": "10.1.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.2.2",