@appcorp/app-corp-vista 0.3.30 → 0.3.32

package/data/vista-chat-props.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.vistaChatV2Props = exports.vistaChatV1Props = exports.messages = exports.chats = void 0;
+var react_1 = __importDefault(require("react"));
 var vista_button_type_1 = require("../type/vista-button-type");
 var vista_chat_type_1 = require("../type/vista-chat-type");
 exports.chats = [
@@ -200,4 +204,7 @@ exports.vistaChatV2Props = {
     showBanner: true,
     showControls: true,
     showLoadMore: true,
+    chatIsLoading: true,
+    sideBarHeading: 'hello',
+    sideBarNode: react_1.default.createElement("p", null, "Hello World"),
 };

package/molecules/vista-chat-side-bar-v2/vista-chat-side-bar-v2.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { VistaChatV2Props } from '../../type/vista-chat-type';
+export declare const VistaChatSideBarV2: FC<Pick<VistaChatV2Props, 'sideBarHeading' | 'sideBarNode'>>;

package/molecules/vista-chat-side-bar-v2/vista-chat-side-bar-v2.js

@@ -1,15 +1,15 @@
-// import React, { FC } from 'react';
-// import { VistaChatHeadingV1 } from '../vista-chat-heading-v1/vista-chat-heading-v1';
-// import { VistaChatV2Props } from '../../type/vista-chat-type';
-// export const VistaChatSideBarV2: FC<
-//   Pick<VistaChatV2Props, 'sideBarHeading' | 'sideBarNode'>
-// > = ({ sideBarHeading, sideBarNode }) => {
-//   return (
-//     <div className="col-span-3 flex flex-col border-r border-gray-200 shadow-md">
-//       <VistaChatHeadingV1 heading={sideBarHeading} />
-//       <div className="divide flex-1 divide-y divide-gray-600 overflow-y-auto">
-//         {sideBarNode}
-//       </div>
-//     </div>
-//   );
-// };
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaChatSideBarV2 = void 0;
+var react_1 = __importDefault(require("react"));
+var vista_chat_heading_v1_1 = require("../vista-chat-heading-v1/vista-chat-heading-v1");
+var VistaChatSideBarV2 = function (_a) {
+    var sideBarHeading = _a.sideBarHeading, sideBarNode = _a.sideBarNode;
+    return (react_1.default.createElement("div", { className: "col-span-3 flex flex-col border-r border-gray-200 shadow-md" },
+        react_1.default.createElement(vista_chat_heading_v1_1.VistaChatHeadingV1, { heading: sideBarHeading || '' }),
+        sideBarNode && (react_1.default.createElement("div", { className: "divide flex-1 divide-y divide-gray-600 overflow-y-auto" }, sideBarNode))));
+};
+exports.VistaChatSideBarV2 = VistaChatSideBarV2;

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

@@ -11,11 +11,14 @@ var vista_chat_bubble_v1_1 = require("../../molecules/vista-chat-bubble-v1/vista
 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, showLoadMore = _a.showLoadMore, handleLoadMore = _a.handleLoadMore;
+    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" },
         showLoadMore && (react_1.default.createElement("div", { className: "flex flex-row justify-center" },
-            react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { variant: vista_button_type_1.VISTA_BUTTON_VARIANT.SECONDARY, label: "Load Previous Chats...", handleOnClick: handleLoadMore, className: "inline-flex max-w-48" }))),
+            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;

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

@@ -12,19 +12,22 @@ var vista_button_v1_1 = require("../../molecules/vista-button-v1/vista-button-v1
 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 vista_chat_side_bar_v2_1 = require("../../molecules/vista-chat-side-bar-v2/vista-chat-side-bar-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, handleLoadMore = _a.handleLoadMore, 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, showLoadMore = _a.showLoadMore, 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, sideBarHeading = _a.sideBarHeading, sideBarNode = _a.sideBarNode, timer = _a.timer, typing = _a.typing, user = _a.user;
     var handleOnKeyDown = function (e) {
         if (e.key === 'Enter') {
             actionItems[0].handleOnClick();
         }
     };
-    return (react_1.default.createElement("div", { className: "relative h-screen overflow-hidden max-w-7xl mx-auto ".concat(containerClassName) },
-        react_1.default.createElement("section", { className: "flex flex-col h-full" },
+    return (react_1.default.createElement("div", { className: "relative h-screen overflow-hidden max-w-7xl mx-auto grid grid-cols-6 ".concat(containerClassName) },
+        react_1.default.createElement("div", { className: "col-span-1 h-full" },
+            react_1.default.createElement(vista_chat_side_bar_v2_1.VistaChatSideBarV2, { sideBarHeading: sideBarHeading, sideBarNode: sideBarNode })),
+        react_1.default.createElement("section", { className: "flex flex-col h-full col-span-5" },
             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, psychic: psychic, showLoadMore: showLoadMore, user: user, handleLoadMore: handleLoadMore })),
+                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.30",
+  "version": "0.3.32",
   "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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { VISTA_BUTTON_VARIANT } from './vista-button-type';
 export declare enum VISTA_CHAT_BUBBLE_TYPES {
     PSYCHIC = "PSYCHIC",
@@ -45,6 +46,7 @@ export interface VistaChatV2Props {
     bannerHeading: string;
     buttonDenominations: ButtonDenomination[];
     chatId: string;
+    chatIsLoading?: boolean;
     chatValue: string;
     containerClassName?: string;
     estimatedBalance?: string;
@@ -61,11 +63,14 @@ export interface VistaChatV2Props {
     showBanner?: boolean;
     showControls?: boolean;
     showLoadMore: boolean;
+    sideBarHeading?: string;
+    sideBarNode?: ReactNode;
     timer: string;
     typing?: string;
     user: VistaChatV2User;
 }
 export interface VistaChatMessageV2 {
+    chatIsLoading: boolean;
     handleLoadMore: () => void;
     messages: VistaChatV2Message[];
     psychic: VistaChatV2Psychic;