@appcorp/app-corp-vista 0.3.29 → 0.3.31

package/data/vista-chat-props.js

@@ -192,10 +192,13 @@ exports.vistaChatV2Props = {
     ],
     paymentLoading: '',
     handlePayment: function () { return void 0; },
+    handleLoadMore: function () { return void 0; },
     isBalanceLow: false,
     typing: 'Username is typing...',
     bannerHeading: 'Your session has started.',
     bannerDescription: 'Enjoy your conversation.',
     showBanner: true,
     showControls: true,
+    showLoadMore: true,
+    chatIsLoading: true,
 };

package/organisms/vista-chat-v2/vista-chat-messages-v2.js

@@ -8,20 +8,28 @@ var react_1 = __importDefault(require("react"));
 var util_functions_1 = require("@react-pakistan/util-functions");
 var vista_vertical_divider_v1_1 = require("../../molecules/vista-vertical-divider-v1");
 var vista_chat_bubble_v1_1 = require("../../molecules/vista-chat-bubble-v1/vista-chat-bubble-v1");
+var vista_button_v1_1 = require("../../molecules/vista-button-v1/vista-button-v1");
+var vista_button_type_1 = require("../../type/vista-button-type");
 var VistaChatMessagesV2 = function (_a) {
-    var messages = _a.messages, psychic = _a.psychic, user = _a.user;
+    var chatIsLoading = _a.chatIsLoading, handleLoadMore = _a.handleLoadMore, messages = _a.messages, psychic = _a.psychic, showLoadMore = _a.showLoadMore, user = _a.user;
     var lastDate = '';
-    return (react_1.default.createElement("div", { className: "overflow-y-scroll" }, messages.map(function (_a, ind) {
-        var _b, _c;
-        var createdAt = _a.createdAt, id = _a.id, isUser = _a.isUser, message = _a.message, messageStatus = _a.messageStatus;
-        var shouldShowDivider = ((_b = lastDate.split('T')) === null || _b === void 0 ? void 0 : _b[0]) === ((_c = createdAt.split('T')) === null || _c === void 0 ? void 0 : _c[0])
-            ? false
-            : true;
-        lastDate = createdAt;
-        return (react_1.default.createElement("div", { key: id },
-            shouldShowDivider && (react_1.default.createElement("div", { className: "pt-8" },
-                react_1.default.createElement(vista_vertical_divider_v1_1.VistaVerticalDividerV1, { label: (0, util_functions_1.formatDate)(createdAt, util_functions_1.DATE_FORMATS.DAY_DD_MM_YY_COMPACT) }))),
-            react_1.default.createElement(vista_chat_bubble_v1_1.VistaChatBubbleV1, { createdAt: createdAt, isLast: ind === messages.length - 1, isUser: isUser, message: message, messageStatus: messageStatus, psychic: psychic, user: user })));
-    })));
+    return (react_1.default.createElement("div", { className: "overflow-y-scroll" },
+        showLoadMore && (react_1.default.createElement("div", { className: "flex flex-row justify-center" },
+            react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { variant: chatIsLoading
+                    ? vista_button_type_1.VISTA_BUTTON_VARIANT.ICON
+                    : vista_button_type_1.VISTA_BUTTON_VARIANT.SECONDARY, label: chatIsLoading ? '' : 'Load Previous Chats...', handleOnClick: handleLoadMore, className: "inline-flex max-w-48 transition-all duration-1000 !bg-white", icon: react_1.default.createElement("div", { role: "status", className: "h-6 w-6 border-4 border-primary border-t-transparent rounded-full animate-spin" },
+                    react_1.default.createElement("span", { className: "sr-only" }, "Loading...")) }))),
+        messages.map(function (_a, ind) {
+            var _b, _c;
+            var createdAt = _a.createdAt, id = _a.id, isUser = _a.isUser, message = _a.message, messageStatus = _a.messageStatus;
+            var shouldShowDivider = ((_b = lastDate.split('T')) === null || _b === void 0 ? void 0 : _b[0]) === ((_c = createdAt.split('T')) === null || _c === void 0 ? void 0 : _c[0])
+                ? false
+                : true;
+            lastDate = createdAt;
+            return (react_1.default.createElement("div", { key: id },
+                shouldShowDivider && (react_1.default.createElement("div", { className: "pt-8" },
+                    react_1.default.createElement(vista_vertical_divider_v1_1.VistaVerticalDividerV1, { label: (0, util_functions_1.formatDate)(createdAt, util_functions_1.DATE_FORMATS.DAY_DD_MM_YY_COMPACT) }))),
+                react_1.default.createElement(vista_chat_bubble_v1_1.VistaChatBubbleV1, { createdAt: createdAt, isLast: ind === messages.length - 1, isUser: isUser, message: message, messageStatus: messageStatus, psychic: psychic, user: user })));
+        })));
 };
 exports.VistaChatMessagesV2 = VistaChatMessagesV2;

package/organisms/vista-chat-v2/vista-chat-v2.js

@@ -13,7 +13,7 @@ var vista_button_type_1 = require("../../type/vista-button-type");
 var vista_banner_v1_1 = require("../../atoms/vista-banner-v1/vista-banner-v1");
 var vista_chat_messages_v2_1 = require("./vista-chat-messages-v2");
 var VistaChatV2 = function (_a) {
-    var actionItems = _a.actionItems, bannerDescription = _a.bannerDescription, bannerHeading = _a.bannerHeading, buttonDenominations = _a.buttonDenominations, chatId = _a.chatId, chatValue = _a.chatValue, _b = _a.containerClassName, containerClassName = _b === void 0 ? '' : _b, _c = _a.estimatedBalance, estimatedBalance = _c === void 0 ? '' : _c, handleChatOnChange = _a.handleChatOnChange, handleOnBlur = _a.handleOnBlur, handleOnFocus = _a.handleOnFocus, handlePayment = _a.handlePayment, isBalanceLow = _a.isBalanceLow, messages = _a.messages, name = _a.name, paymentLoading = _a.paymentLoading, psychic = _a.psychic, _d = _a.showBanner, showBanner = _d === void 0 ? false : _d, _e = _a.showControls, showControls = _e === void 0 ? true : _e, timer = _a.timer, typing = _a.typing, user = _a.user;
+    var actionItems = _a.actionItems, bannerDescription = _a.bannerDescription, bannerHeading = _a.bannerHeading, buttonDenominations = _a.buttonDenominations, chatId = _a.chatId, _b = _a.chatIsLoading, chatIsLoading = _b === void 0 ? false : _b, chatValue = _a.chatValue, _c = _a.containerClassName, containerClassName = _c === void 0 ? '' : _c, _d = _a.estimatedBalance, estimatedBalance = _d === void 0 ? '' : _d, handleChatOnChange = _a.handleChatOnChange, handleLoadMore = _a.handleLoadMore, handleOnBlur = _a.handleOnBlur, handleOnFocus = _a.handleOnFocus, handlePayment = _a.handlePayment, isBalanceLow = _a.isBalanceLow, messages = _a.messages, name = _a.name, paymentLoading = _a.paymentLoading, psychic = _a.psychic, _e = _a.showBanner, showBanner = _e === void 0 ? false : _e, _f = _a.showControls, showControls = _f === void 0 ? true : _f, showLoadMore = _a.showLoadMore, timer = _a.timer, typing = _a.typing, user = _a.user;
     var handleOnKeyDown = function (e) {
         if (e.key === 'Enter') {
             actionItems[0].handleOnClick();
@@ -24,7 +24,7 @@ var VistaChatV2 = function (_a) {
             react_1.default.createElement(vista_chat_heading_v1_1.VistaChatHeadingV1, { estimatedBalance: estimatedBalance, heading: name, timer: timer }),
             showBanner && (react_1.default.createElement(vista_banner_v1_1.VistaBannerV1, { description: bannerDescription, heading: bannerHeading })),
             react_1.default.createElement("div", { className: "overflow-y-auto h-full flex flex-col justify-end p-4" },
-                react_1.default.createElement(vista_chat_messages_v2_1.VistaChatMessagesV2, { messages: messages, user: user, psychic: psychic })),
+                react_1.default.createElement(vista_chat_messages_v2_1.VistaChatMessagesV2, { messages: messages, psychic: psychic, showLoadMore: showLoadMore, user: user, handleLoadMore: handleLoadMore, chatIsLoading: chatIsLoading })),
             isBalanceLow && (react_1.default.createElement("div", { className: "grid grid-cols-5 m-4 p-4 border-2 border-primary border-dashed rounded-md justify-between items-center bg-cyan-200" },
                 react_1.default.createElement("div", { className: "col-span-2" },
                     react_1.default.createElement("p", { className: "text-md font-semibold" }, "You are running out of your Kismaa credits, click one of the buttons to top up your account.")),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/app-corp-vista",
-  "version": "0.3.29",
+  "version": "0.3.31",
   "scripts": {
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib && cp yarn.lock lib",
     "build:next": "next build",

package/type/vista-chat-type.d.ts

@@ -45,10 +45,12 @@ export interface VistaChatV2Props {
     bannerHeading: string;
     buttonDenominations: ButtonDenomination[];
     chatId: string;
+    chatIsLoading?: boolean;
     chatValue: string;
     containerClassName?: string;
     estimatedBalance?: string;
     handleChatOnChange: (k: string, v: string) => void;
+    handleLoadMore: () => void;
     handleOnBlur?: () => void;
     handleOnFocus?: () => void;
     handlePayment: (l: string, v: string) => void;
@@ -59,12 +61,16 @@ export interface VistaChatV2Props {
     psychic: VistaChatV2Psychic;
     showBanner?: boolean;
     showControls?: boolean;
+    showLoadMore: boolean;
     timer: string;
     typing?: string;
     user: VistaChatV2User;
 }
 export interface VistaChatMessageV2 {
+    chatIsLoading: boolean;
+    handleLoadMore: () => void;
     messages: VistaChatV2Message[];
     psychic: VistaChatV2Psychic;
+    showLoadMore: boolean;
     user: VistaChatV2User;
 }