@appcorp/app-corp-vista 0.0.14 → 0.0.16

package/atoms/chat-circle.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface ChatCircleProps {
+    fillPercentage: string;
+    fillColor: string;
+    emptyColor: string;
+}
+export declare const ChatCircle: FC<ChatCircleProps>;

package/atoms/chat-circle.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatCircle = void 0;
+var react_1 = __importDefault(require("react"));
+var ChatCircle = function (_a) {
+    var fillColor = _a.fillColor, fillPercentage = _a.fillPercentage, emptyColor = _a.emptyColor;
+    return (react_1.default.createElement("svg", { viewBox: "0 0 32 32", width: 12, height: 12, xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("mask", { id: "circle-mask-".concat(fillPercentage) },
+            react_1.default.createElement("rect", { x: "0", y: "0", width: "".concat(fillPercentage, "%"), height: "100%", fill: "white" })),
+        react_1.default.createElement("circle", { cx: "16", cy: "16", r: "15", fill: emptyColor }),
+        react_1.default.createElement("circle", { cx: "16", cy: "16", r: "15", fill: fillColor, mask: "url(#circle-mask-".concat(fillPercentage, ")") })));
+};
+exports.ChatCircle = ChatCircle;

package/atoms/chat-triangle.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+type ChatTriangleProps = {
+    fill: string;
+};
+export declare const ChatTriangle: React.FC<ChatTriangleProps>;
+export {};

package/atoms/chat-triangle.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatTriangle = void 0;
+var React = __importStar(require("react"));
+var ChatTriangle = function (_a) {
+    var fill = _a.fill;
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 100 100", xmlSpace: "preserve", fill: fill },
+        React.createElement("polygon", { points: "0,100 100,100 0,0" })));
+};
+exports.ChatTriangle = ChatTriangle;

package/data/vista-chat-props.d.ts

@@ -0,0 +1,30 @@
+import { VISTA_CHAT_BUBBLE_TYPES } from "../type/vista-chat-type";
+export declare const chats: {
+    avatarUrl: string;
+    avatarAlt: string;
+    firstName: string;
+    lastName: string;
+    lastMessage: string;
+    timestamp: string;
+}[];
+export declare const messages: {
+    message: string;
+    timestamp: string;
+    type: VISTA_CHAT_BUBBLE_TYPES;
+}[];
+export declare const vistaChatV1Props: {
+    currentUser: VISTA_CHAT_BUBBLE_TYPES;
+    messages: {
+        message: string;
+        timestamp: string;
+        type: VISTA_CHAT_BUBBLE_TYPES;
+    }[];
+    chats: {
+        avatarUrl: string;
+        avatarAlt: string;
+        firstName: string;
+        lastName: string;
+        lastMessage: string;
+        timestamp: string;
+    }[];
+};

package/data/vista-chat-props.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vistaChatV1Props = exports.messages = exports.chats = void 0;
+var vista_chat_type_1 = require("../type/vista-chat-type");
+exports.chats = [
+    {
+        avatarUrl: '',
+        avatarAlt: '',
+        firstName: 'Doris',
+        lastName: 'Brown',
+        lastMessage: 'Hello Sir, how are you?',
+        timestamp: '14:22 PM',
+    },
+    {
+        avatarUrl: '',
+        avatarAlt: '',
+        firstName: 'Linda',
+        lastName: 'Taylor',
+        lastMessage: 'Hello Miss, how are you?',
+        timestamp: '12:10 PM',
+    },
+];
+exports.messages = [
+    {
+        message: 'Good Morning',
+        timestamp: '2024-12-23T10:00:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.PSYCHIC
+    },
+    {
+        message: 'I am well thank you for asking',
+        timestamp: '2024-12-23T10:20:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.USER,
+    },
+    {
+        message: "That's great to hear! How can I assist you today?",
+        timestamp: '2024-12-23T10:25:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.PSYCHIC,
+    },
+    {
+        message: 'I have a question about my recent order',
+        timestamp: '2024-12-23T10:30:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.USER,
+    },
+    {
+        message: "Of course, I'd be happy to help. Can you please provide me with your order number?",
+        timestamp: '2024-12-23T10:32:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.PSYCHIC,
+    },
+    {
+        message: "Certainly, it's ORD-12345",
+        timestamp: '2024-12-23T10:35:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.USER,
+    },
+    {
+        message: "Certainly, it's ORD-12345",
+        timestamp: '2024-12-23T10:36:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.USER,
+    },
+    {
+        message: "Certainly, it's ORD-12345",
+        timestamp: '2024-12-23T10:37:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.USER,
+    },
+    {
+        message: "Certainly, it's ORD-12345",
+        timestamp: '2024-12-23T10:38:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.USER,
+    },
+    {
+        message: "Thank you. I've located your order. What specific information do you need about it?",
+        timestamp: '2024-12-23T10:37:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.PSYCHIC,
+    },
+    {
+        message: 'I was wondering about the estimated delivery date',
+        timestamp: '2024-12-23T10:40:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.USER,
+    },
+    {
+        message: 'According to our system, your order is scheduled to be delivered on Friday, June 25th.',
+        timestamp: '2024-12-23T10:42:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.PSYCHIC,
+    },
+    {
+        message: "That's perfect, thank you so much for your help!",
+        timestamp: '2024-12-23T10:45:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.USER,
+    },
+    {
+        message: "You're welcome! I'm glad I could assist you. If you have any more questions in the future, please don't hesitate to ask.",
+        timestamp: '2024-12-19T10:47:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.PSYCHIC,
+    },
+    {
+        message: "You're welcome! I'm glad I could assist you. If you have any more questions in the future, please don't hesitate to ask.",
+        timestamp: '2024-12-20T10:47:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.PSYCHIC,
+    },
+    {
+        message: "You're welcome! I'm glad I could assist you. If you have any more questions in the future, please don't hesitate to ask.",
+        timestamp: '2021-12-23T10:47:00Z',
+        type: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.PSYCHIC,
+    },
+];
+exports.vistaChatV1Props = {
+    currentUser: vista_chat_type_1.VISTA_CHAT_BUBBLE_TYPES.USER,
+    messages: exports.messages,
+    chats: exports.chats,
+};

package/molecules/vista-chat-bubble-v1.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const VistaChatBubbleV1: FC<any>;

package/molecules/vista-chat-bubble-v1.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaChatBubbleV1 = void 0;
+var react_1 = __importDefault(require("react"));
+var vista_avatar_v1_1 = require("./vista-avatar-v1/vista-avatar-v1");
+var format_timestamp_1 = require("../utils/format-timestamp");
+var vista_chat_type_1 = require("../type/vista-chat-type");
+var chat_triangle_1 = require("../atoms/chat-triangle");
+var chat_circle_1 = require("../atoms/chat-circle");
+var VistaChatBubbleV1 = function (_a) {
+    var message = _a.message, timestamp = _a.timestamp, type = _a.type, showAvatar = _a.showAvatar, currentUser = _a.currentUser, status = _a.status;
+    var isRecipient = currentUser && type !== currentUser;
+    var getContainerClasses = function () {
+        return "flex items-start gap-6 ".concat(isRecipient ? 'justify-start' : 'justify-end');
+    };
+    var getAvatar = function () {
+        return showAvatar ? react_1.default.createElement(vista_avatar_v1_1.VistaAvatarV1, { alt: "" }) : null;
+    };
+    var getBubbleClasses = function () {
+        return "relative ".concat(isRecipient ? 'bg-gray-200 text-black' : 'bg-primary text-white');
+    };
+    var getBubbleStyles = function () { return ({
+        borderTopLeftRadius: isRecipient ? '0px' : '8px',
+        borderTopRightRadius: isRecipient ? '8px' : '0px',
+        borderBottomLeftRadius: '8px',
+        borderBottomRightRadius: '8px',
+    }); };
+    var getTriangle = function () {
+        return showAvatar ? (react_1.default.createElement(chat_triangle_1.ChatTriangle, { fill: isRecipient ? '#E5E7EB' : '#9153D0' })) : null;
+    };
+    var getStatusIndicator = function () {
+        if (isRecipient || !status)
+            return null;
+        var isViewed = status === vista_chat_type_1.VISTA_CHAT_BUBBLE_STATUS.VIEWED;
+        var fillPercentage = isViewed ? '100' : '50';
+        var fillColor = '#7e22ce';
+        var emptyColor = '#D1D5DB';
+        return (react_1.default.createElement(chat_circle_1.ChatCircle, { fillColor: fillColor, fillPercentage: fillPercentage, emptyColor: emptyColor }));
+    };
+    var getTextAlignmentClasses = function () {
+        return "flex items-center px-4 py-2 text-xs justify-between ".concat(isRecipient ? 'text-left' : 'text-right');
+    };
+    return (react_1.default.createElement("div", { className: getContainerClasses() },
+        react_1.default.createElement("div", { className: "order-1 min-w-10" }, isRecipient && getAvatar()),
+        react_1.default.createElement("div", { className: isRecipient ? 'order-2' : 'order-1' },
+            react_1.default.createElement("div", { className: getBubbleClasses(), style: getBubbleStyles() },
+                react_1.default.createElement("div", { className: "absolute top-0 size-4 ".concat(isRecipient ? '-left-4 rotate-180' : '-right-4 rotate-90') }, getTriangle()),
+                react_1.default.createElement("p", { className: "px-4 pt-2" }, message),
+                react_1.default.createElement("div", { className: getTextAlignmentClasses() },
+                    react_1.default.createElement("span", { className: "mr-2" }, (0, format_timestamp_1.formatTimestamp)(timestamp)),
+                    getStatusIndicator()))),
+        react_1.default.createElement("div", { className: "order-2 min-w-10" }, !isRecipient && getAvatar())));
+};
+exports.VistaChatBubbleV1 = VistaChatBubbleV1;

package/molecules/vista-chat-heading-v1.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface Props {
+    heading: string;
+}
+export declare const VistaChatHeadingV1: FC<Props>;
+export {};

package/molecules/vista-chat-heading-v1.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaChatHeadingV1 = void 0;
+var react_1 = __importDefault(require("react"));
+var VistaChatHeadingV1 = function (_a) {
+    var heading = _a.heading;
+    return (react_1.default.createElement("div", { className: "border-b border-gray-600 p-4 text-black dark:text-white" },
+        react_1.default.createElement("p", { className: "text-lg font-semibold" }, heading)));
+};
+exports.VistaChatHeadingV1 = VistaChatHeadingV1;

package/molecules/vista-chat-list-item-v1.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+interface Props {
+    firstName: string;
+    lastName: string;
+    lastMessage: string;
+    timestamp: string;
+}
+export declare const VistaChatListItemV1: FC<Props>;
+export {};

package/molecules/vista-chat-list-item-v1.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaChatListItemV1 = void 0;
+var react_1 = __importDefault(require("react"));
+var vista_avatar_type_1 = require("@appcorp/app-corp-designs/type/vista-avatar-type");
+var vista_avatar_v1_1 = require("@appcorp/app-corp-designs/molecules/vista-avatar-v1");
+var util_functions_1 = require("@react-pakistan/util-functions");
+var VistaChatListItemV1 = function (_a) {
+    var firstName = _a.firstName, lastName = _a.lastName, timestamp = _a.timestamp, lastMessage = _a.lastMessage;
+    return (react_1.default.createElement("div", { className: "flex cursor-pointer items-center justify-between gap-3 p-3 hover:bg-gray-100 dark:hover:bg-gray-600" },
+        react_1.default.createElement(vista_avatar_v1_1.VistaAvatarV1, { alt: "avatar", size: vista_avatar_type_1.VISTA_AVATAR_SIZES.SM, status: vista_avatar_type_1.VISTA_AVATAR_STATUS.ONLINE, statusPosition: vista_avatar_type_1.VISTA_STATUS_POSITION.TOP_RIGHT }),
+        react_1.default.createElement("div", { className: "flex-1" },
+            react_1.default.createElement("p", { className: "font-medium dark:text-gray-300" },
+                firstName,
+                " ",
+                lastName),
+            react_1.default.createElement("p", { className: "truncate text-sm text-gray-500" }, (0, util_functions_1.truncateText)(lastMessage, 18))),
+        react_1.default.createElement("span", { className: "text-xs text-gray-400" }, timestamp)));
+};
+exports.VistaChatListItemV1 = VistaChatListItemV1;

package/molecules/vista-chat-search-bar-v1.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export declare const VistaChatSearchBarV1: () => JSX.Element;

package/molecules/vista-chat-search-bar-v1.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaChatSearchBarV1 = void 0;
+var react_1 = __importDefault(require("react"));
+var VistaChatSearchBarV1 = function () {
+    return (react_1.default.createElement("div", { className: "border-b border-gray-600 p-4" },
+        react_1.default.createElement("input", { className: "w-full rounded-lg bg-gray-100 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-400", placeholder: "Search messages or users", type: "text" })));
+};
+exports.VistaChatSearchBarV1 = VistaChatSearchBarV1;

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+interface Props {
+    chats: {
+        firstName: string;
+        lastName: string;
+        lastMessage: string;
+        timestamp: string;
+    }[];
+}
+export declare const VistaChatSideBarV1: FC<Props>;
+export {};

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

@@ -0,0 +1,29 @@
+"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 });
+exports.VistaChatSideBarV1 = void 0;
+var react_1 = __importDefault(require("react"));
+var vista_chat_heading_v1_1 = require("./vista-chat-heading-v1");
+var vista_chat_search_bar_v1_1 = require("./vista-chat-search-bar-v1");
+var vista_chat_list_item_v1_1 = require("./vista-chat-list-item-v1");
+var VistaChatSideBarV1 = function (_a) {
+    var chats = _a.chats;
+    return (react_1.default.createElement("div", { className: "col-span-3 flex flex-col border-r border-gray-600 shadow-md" },
+        react_1.default.createElement(vista_chat_heading_v1_1.VistaChatHeadingV1, { heading: "Chats" }),
+        react_1.default.createElement(vista_chat_search_bar_v1_1.VistaChatSearchBarV1, null),
+        react_1.default.createElement("div", { className: "divide flex-1 divide-y divide-gray-600 overflow-y-auto" }, chats.map(function (item) { return (react_1.default.createElement(vista_chat_list_item_v1_1.VistaChatListItemV1, __assign({ key: item.firstName }, item))); }))));
+};
+exports.VistaChatSideBarV1 = VistaChatSideBarV1;

package/organisms/vista-chat-v1/vista-chat-v1.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { VistaChatV1Props } from '../../type/vista-chat-type';
+export declare const VistaChatV1: FC<VistaChatV1Props>;

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

@@ -0,0 +1,89 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaChatV1 = void 0;
+var react_1 = __importStar(require("react"));
+var sort_messages_by_timestamp_1 = require("../../utils/sort-messages-by-timestamp");
+var get_divider_label_1 = require("../../utils/get-divider-label");
+var should_show_avatar_1 = require("../../utils/should-show-avatar");
+var vista_chat_type_1 = require("../../type/vista-chat-type");
+var vista_chat_bubble_v1_1 = require("../../molecules/vista-chat-bubble-v1");
+var vista_chat_heading_v1_1 = require("../../molecules/vista-chat-heading-v1");
+var vista_chat_side_bar_v1_1 = require("../../molecules/vista-chat-side-bar-v1");
+var VistaChatV1 = function (_a) {
+    var currentUser = _a.currentUser, messages = _a.messages, chats = _a.chats;
+    var chatContainerRef = (0, react_1.useRef)(null);
+    var getMessageSpacing = function (index) {
+        var isFirstMessage = index === 0;
+        var isDifferentSender = index > 0 && messages[index - 1].type !== messages[index].type;
+        if (isFirstMessage || isDifferentSender) {
+            return 'mt-6';
+        }
+        return 'mt-1';
+    };
+    var sortedMessages = (0, sort_messages_by_timestamp_1.sortMessagesByTimestamp)(messages);
+    var renderChatMessages = function () {
+        return sortedMessages.map(function (message, index) {
+            var dividerLabel = (0, get_divider_label_1.getDividerLabel)(message.timestamp, index > 0 ? sortedMessages[index - 1].timestamp : undefined);
+            return (react_1.default.createElement("div", { key: index },
+                dividerLabel && (react_1.default.createElement("div", { className: "my-4 text-center text-sm text-gray-500" }, dividerLabel)),
+                react_1.default.createElement("div", { className: getMessageSpacing(index) },
+                    react_1.default.createElement(vista_chat_bubble_v1_1.VistaChatBubbleV1, { message: message.message, timestamp: message.timestamp, type: message.type, currentUser: currentUser, showAvatar: (0, should_show_avatar_1.shouldShowAvatar)(index), status: vista_chat_type_1.VISTA_CHAT_BUBBLE_STATUS.DELIVERED }))));
+        });
+    };
+    var scrollToBottom = function () {
+        if (chatContainerRef === null || chatContainerRef === void 0 ? void 0 : chatContainerRef.current) {
+            chatContainerRef === null || chatContainerRef === void 0 ? void 0 : chatContainerRef.current.scrollTo({
+                top: chatContainerRef === null || chatContainerRef === void 0 ? void 0 : chatContainerRef.current.scrollHeight,
+                behavior: 'smooth',
+            });
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        scrollToBottom();
+    }, [sortedMessages]);
+    return (react_1.default.createElement("div", { className: "relative h-screen grid grid-cols-12 grid-rows-1 overflow-hidden" },
+        react_1.default.createElement(vista_chat_side_bar_v1_1.VistaChatSideBarV1, { chats: chats }),
+        react_1.default.createElement("section", { className: "col-span-9 flex flex-col" },
+            react_1.default.createElement(vista_chat_heading_v1_1.VistaChatHeadingV1, { heading: "Doris Brown" }),
+            react_1.default.createElement("div", { className: "overflow-hidden" },
+                react_1.default.createElement("div", { className: "h-full overflow-y-auto p-4", ref: chatContainerRef }, renderChatMessages())),
+            react_1.default.createElement("div", { className: "bg-background border-t border-gray-600 p-4" },
+                react_1.default.createElement("form", { className: "flex items-center gap-3" },
+                    react_1.default.createElement("input", { type: "text", placeholder: "Enter Message...", className: "flex-1 rounded-full border px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-400" }),
+                    react_1.default.createElement("button", { className: "rounded-full bg-indigo-500 px-4 py-2 text-white" }, "Send"))))));
+};
+exports.VistaChatV1 = VistaChatV1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/app-corp-vista",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "scripts": {
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib",
     "build:next": "next build",
@@ -61,6 +61,7 @@
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "concurrently": "^9.1.1",
+    "date-fns": "^4.1.0",
     "eslint": "^9",
     "eslint-config-next": "15.1.3",
     "eslint-plugin-storybook": "^0.11.1",

package/templates/vista-auth-v1/vista-auth-v1.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { VistaAuthV1Props } from '../../type/vista-auth-type';
+export declare const VistaAuthV1: FC<VistaAuthV1Props>;

package/templates/vista-auth-v1/vista-auth-v1.js

@@ -0,0 +1,50 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaAuthV1 = void 0;
+var react_1 = __importDefault(require("react"));
+var link_1 = __importDefault(require("next/link"));
+var image_1 = __importDefault(require("next/image"));
+var vista_text_input_v1_1 = require("../../molecules/vista-text-input-v1");
+var VistaAuthV1 = function (_a) {
+    var actionLabel = _a.actionLabel, actionRoute = _a.actionRoute, banner = _a.banner, bannerAlt = _a.bannerAlt, description = _a.description, emailSignInButtonLabel = _a.emailSignInButtonLabel, forgotPassword = _a.forgotPassword, forgotPasswordRoute = _a.forgotPasswordRoute, handleSignIn = _a.handleSignIn, heading = _a.heading, inputElements = _a.inputElements, _b = _a.label, label = _b === void 0 ? false : _b, logo = _a.logo, logoAlt = _a.logoAlt, _c = _a.reverted, reverted = _c === void 0 ? false : _c;
+    return (react_1.default.createElement("section", { className: 'h-screen' },
+        react_1.default.createElement("div", { className: "flex min-h-full flex-1" },
+            react_1.default.createElement("div", { className: "flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24 ".concat(reverted ? 'order-2' : 'order-1') },
+                react_1.default.createElement("div", { className: "mx-auto w-full max-w-sm lg:w-96" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("img", { alt: logoAlt, src: logo, className: "h-10 w-auto" }),
+                        react_1.default.createElement("h2", { className: "mt-8 text-2xl/9 font-bold tracking-tight text-gray-900 dark:text-white" }, heading),
+                        react_1.default.createElement("p", { className: "mt-2 text-sm/6 text-gray-500 dark:text-gray-300" },
+                            description,
+                            ' ',
+                            react_1.default.createElement(link_1.default, { href: actionRoute, className: "font-semibold text-primary" }, actionLabel))),
+                    react_1.default.createElement("div", { className: "mt-10" },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("div", { className: "space-y-6" },
+                                inputElements
+                                    .filter(function (_a) {
+                                    var enabled = _a.enabled;
+                                    return enabled;
+                                })
+                                    .map(function (_a) {
+                                    var handleOnChange = _a.handleOnChange, id = _a.id, inputLabel = _a.inputLabel, inputType = _a.inputType, placeholder = _a.placeholder, value = _a.value;
+                                    return (react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: handleOnChange, id: id, key: id, label: inputLabel, placeholder: placeholder, type: inputType, value: value }));
+                                }),
+                                react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                                    react_1.default.createElement("div", { className: "flex items-center" },
+                                        react_1.default.createElement("input", { id: "remember-me", name: "remember-me", type: "checkbox", className: "size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" }),
+                                        react_1.default.createElement("label", { htmlFor: "remember-me", className: "ml-3 block text-sm/6 text-gray-700 dark:text-gray-300" }, "Remember me")),
+                                    forgotPassword && forgotPasswordRoute && (react_1.default.createElement("div", { className: "text-sm/6" },
+                                        react_1.default.createElement("a", { href: forgotPasswordRoute, className: "font-semibold text-primary" }, forgotPassword)))),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement("button", { className: "flex w-full justify-center rounded-md bg-primary px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm hover:bg-primary/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary/80", onClick: handleSignIn, type: "submit" }, emailSignInButtonLabel))))))),
+            react_1.default.createElement("div", { className: "relative hidden w-0 flex-1 lg:block ".concat(reverted ? 'order-1' : 'order-2') },
+                react_1.default.createElement(image_1.default, { alt: bannerAlt, className: "absolute inset-0 size-full object-cover ".concat(reverted ? '' : 'scale-x-[-1]'), fill: true, height: 0, loading: "lazy", sizes: "60vw", src: banner, width: 0 }),
+                label && (react_1.default.createElement("div", { className: "absolute top-14 bg-primary px-6 py-2 ".concat(reverted ? 'right-0' : 'left-0') },
+                    react_1.default.createElement("p", { className: "text-xl font-semibold text-white" }, label)))))));
+};
+exports.VistaAuthV1 = VistaAuthV1;

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

@@ -0,0 +1,26 @@
+export interface VistaAuthInputElements {
+    enabled: boolean;
+    handleOnChange: (k: string, v: string) => void;
+    id: string;
+    inputLabel: string;
+    inputType: string;
+    placeholder: string;
+    value: string;
+}
+export interface VistaAuthV1Props {
+    actionLabel: string;
+    actionRoute: string;
+    banner: string;
+    bannerAlt: string;
+    description: string;
+    emailSignInButtonLabel: string;
+    forgotPassword: string;
+    forgotPasswordRoute?: string;
+    handleSignIn: () => void;
+    heading: string;
+    inputElements: VistaAuthInputElements[];
+    label?: string;
+    logo: string;
+    logoAlt: string;
+    reverted?: boolean;
+}

package/type/vista-auth-type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,13 @@
+export declare enum VISTA_CHAT_BUBBLE_TYPES {
+    PSYCHIC = "PSYCHIC",
+    USER = "USER"
+}
+export declare enum VISTA_CHAT_BUBBLE_STATUS {
+    DELIVERED = "DELIVERED",
+    VIEWED = "VIEWED"
+}
+export interface VistaChatV1Props {
+    currentUser: VISTA_CHAT_BUBBLE_TYPES;
+    messages: any[];
+    chats: any;
+}

package/type/vista-chat-type.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VISTA_CHAT_BUBBLE_STATUS = exports.VISTA_CHAT_BUBBLE_TYPES = void 0;
+var VISTA_CHAT_BUBBLE_TYPES;
+(function (VISTA_CHAT_BUBBLE_TYPES) {
+    VISTA_CHAT_BUBBLE_TYPES["PSYCHIC"] = "PSYCHIC";
+    VISTA_CHAT_BUBBLE_TYPES["USER"] = "USER";
+})(VISTA_CHAT_BUBBLE_TYPES || (exports.VISTA_CHAT_BUBBLE_TYPES = VISTA_CHAT_BUBBLE_TYPES = {}));
+var VISTA_CHAT_BUBBLE_STATUS;
+(function (VISTA_CHAT_BUBBLE_STATUS) {
+    VISTA_CHAT_BUBBLE_STATUS["DELIVERED"] = "DELIVERED";
+    VISTA_CHAT_BUBBLE_STATUS["VIEWED"] = "VIEWED";
+})(VISTA_CHAT_BUBBLE_STATUS || (exports.VISTA_CHAT_BUBBLE_STATUS = VISTA_CHAT_BUBBLE_STATUS = {}));

package/utils/format-timestamp.d.ts

@@ -0,0 +1 @@
+export declare const formatTimestamp: (isoString: string) => string;

package/utils/format-timestamp.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTimestamp = void 0;
+var formatTimestamp = function (isoString) {
+    var date = new Date(isoString);
+    return date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true,
+    });
+};
+exports.formatTimestamp = formatTimestamp;

package/utils/get-divider-label.d.ts

@@ -0,0 +1 @@
+export declare const getDividerLabel: (timestamp: string, previousTimestamp?: string) => string | null;

package/utils/get-divider-label.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDividerLabel = void 0;
+var date_fns_1 = require("date-fns");
+var getDividerLabel = function (timestamp, previousTimestamp) {
+    var currentDate = (0, date_fns_1.parseISO)(timestamp);
+    var previousDate = previousTimestamp ? (0, date_fns_1.parseISO)(previousTimestamp) : null;
+    if (!previousDate || currentDate.getDate() !== previousDate.getDate()) {
+        if ((0, date_fns_1.isToday)(currentDate))
+            return 'Today';
+        if ((0, date_fns_1.isYesterday)(currentDate))
+            return 'Yesterday';
+        if ((0, date_fns_1.isThisWeek)(currentDate))
+            return 'This Week';
+        return (0, date_fns_1.format)(currentDate, 'MMMM dd, yyyy');
+    }
+    return null;
+};
+exports.getDividerLabel = getDividerLabel;

package/utils/should-show-avatar.d.ts

@@ -0,0 +1 @@
+export declare const shouldShowAvatar: (index: number) => boolean;

package/utils/should-show-avatar.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldShowAvatar = void 0;
+var vista_chat_props_1 = require("../data/vista-chat-props");
+var shouldShowAvatar = function (index) {
+    if (index === 0)
+        return true;
+    var currentMessage = vista_chat_props_1.messages[index];
+    var previousMessage = vista_chat_props_1.messages[index - 1];
+    var isDifferentSender = currentMessage.type !== previousMessage.type;
+    var currentDate = new Date(currentMessage.timestamp).toDateString();
+    var previousDate = new Date(previousMessage.timestamp).toDateString();
+    var isDifferentDay = currentDate !== previousDate;
+    return isDifferentSender || isDifferentDay;
+};
+exports.shouldShowAvatar = shouldShowAvatar;

package/utils/sort-messages-by-timestamp.d.ts

@@ -0,0 +1,6 @@
+import { messages } from "../data/vista-chat-props";
+export declare const sortMessagesByTimestamp: (message: typeof messages) => {
+    message: string;
+    timestamp: string;
+    type: import("../type/vista-chat-type").VISTA_CHAT_BUBBLE_TYPES;
+}[];

package/utils/sort-messages-by-timestamp.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sortMessagesByTimestamp = void 0;
+var sortMessagesByTimestamp = function (message) {
+    return message.sort(function (a, b) { return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(); });
+};
+exports.sortMessagesByTimestamp = sortMessagesByTimestamp;