@vendorflow/components 2.0.40 → 2.0.41

package/lib/components/InfiniteScroll/InfiniteScroll.js

@@ -89,11 +89,7 @@ function useInfiniteScroll(_a) {
         return false;
     }, [(_b = scrollParent.current) === null || _b === void 0 ? void 0 : _b.clientHeight, (_c = scrollBody.current) === null || _c === void 0 ? void 0 : _c.clientHeight]);
     (0, react_2.useEffect)(function () {
-        var _a, _b;
         if (!isLoading && hasScrollbar) {
-            console.log('scrolling to start!');
-            console.log('scroll parent height: ', (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
-            console.log('scroll body height: ', (_b = scrollBody.current) === null || _b === void 0 ? void 0 : _b.clientHeight);
             prevPosition.current = null;
             scrollToStart();
         }
@@ -118,7 +114,6 @@ function useInfiniteScroll(_a) {
                 if (scrollBody.current && isReverse && isScrollInit) {
                     // save the last element, so that we can scroll to it after the new data loads in
                     prevPosition.current = scrollBody.current.clientHeight;
-                    console.log('saving prev position: ', prevPosition.current);
                 }
                 // load the next page
                 fetchNextPage();
@@ -129,7 +124,6 @@ function useInfiniteScroll(_a) {
         });
         if (node) {
             if (isReverse && scrollParent.current && prevPosition.current != null) {
-                console.log('scrolling to prev position: ', prevPosition.current);
                 // If we had a prev position, then we want to scroll to it
                 scrollParent.current.scrollTo(0, scrollBody.current.clientHeight - prevPosition.current);
                 prevPosition.current = null;

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

@@ -12,7 +12,6 @@ export interface ChatInterfaceProps {
     handleSend: (message: string) => Promise<boolean>;
     className?: string;
     style?: any;
-    submitting: boolean;
     placeholder?: string;
     hasNextPage?: boolean;
     fetchNextPage?: () => Promise<any> | any;
@@ -20,6 +19,8 @@ export interface ChatInterfaceProps {
     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;
@@ -27,4 +28,4 @@ export interface ChatInterfaceProps {
     /** 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, submitting, placeholder, isLoading, isFetching, colors, renderInputComponent, }: ChatInterfaceProps): JSX.Element;
+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

@@ -67,7 +67,7 @@ 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, submitting = _a.submitting, placeholder = _a.placeholder, isLoading = _a.isLoading, isFetching = _a.isFetching, colors = _a.colors, renderInputComponent = _a.renderInputComponent;
+    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() {
@@ -102,7 +102,7 @@ function ChatInterface(_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 }),
-                renderInputComponent ? (renderInputComponent(measureRef)) : ((0, react_1.jsx)(MessageInput_1.default, { ref: measureRef, handleClickSend: handleClickSend, message: message, setMessage: setMessage, submitting: submitting, placeholder: placeholder }))));
+                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;

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

@@ -44,7 +44,7 @@ var ChatInterface_1 = __importDefault(require("./ChatInterface"));
 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), submitting = _c[0], setSubmitting = _c[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 () {
@@ -106,7 +106,7 @@ function ChatInterface() {
         });
     }
     return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        border: 1px solid #ededed;\n        height: 50rem;\n      "], ["\n        border: 1px solid #ededed;\n        height: 50rem;\n      "]))) },
-        (0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, submitting: submitting, fetchNextPage: loadMore, hasNextPage: hasMore, isLoading: isLoading, isFetching: isFetching })));
+        (0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, fetchNextPage: loadMore, hasNextPage: hasMore, isLoading: isLoading, isFetching: isFetching, isSubmitting: isSubmitting })));
 }
 exports.ChatInterface = ChatInterface;
 var templateObject_1;

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

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

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

@@ -15,7 +15,7 @@ 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 MessageInput = (0, react_2.forwardRef)(function (_a, ref) {
-    var handleClickSend = _a.handleClickSend, message = _a.message, placeholder = _a.placeholder, setMessage = _a.setMessage, submitting = _a.submitting;
+    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);
@@ -42,7 +42,7 @@ var MessageInput = (0, react_2.forwardRef)(function (_a, ref) {
                 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            height: 2rem;\n            width: 2rem;\n            padding-right: ", ";\n          "], ["\n            height: 2rem;\n            width: 2rem;\n            padding-right: ", ";\n          "])), submitting ? '0.5rem' : '0.25rem') }, submitting ? ((0, react_1.jsx)(material_1.CircularProgress, { size: "2rem" })) : ((0, react_1.jsx)(material_1.IconButton, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                height: 100%;\n                width: 100%;\n              "], ["\n                height: 100%;\n                width: 100%;\n              "]))), onClick: handleOnClickSend, disabled: submitting },
+        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            height: 2rem;\n            width: 2rem;\n            padding-right: ", ";\n          "], ["\n            height: 2rem;\n            width: 2rem;\n            padding-right: ", ";\n          "])), isSubmitting ? '0.5rem' : '0.25rem') }, isSubmitting ? ((0, react_1.jsx)(material_1.CircularProgress, { size: "2rem" })) : ((0, react_1.jsx)(material_1.IconButton, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                height: 100%;\n                width: 100%;\n              "], ["\n                height: 100%;\n                width: 100%;\n              "]))), onClick: handleOnClickSend, disabled: isSubmitting },
             (0, react_1.jsx)(icons_material_1.Send, null))))));
 });
 exports.default = MessageInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.40",
+  "version": "2.0.41",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",