@appcorp/app-corp-vista 0.0.40 → 0.0.41

package/atoms/chat-triangle/chat-triangle.d.ts

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

package/atoms/chat-triangle/chat-triangle.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.ChatTriangle = void 0;
+var react_1 = __importDefault(require("react"));
+var ChatTriangle = function (_a) {
+    var fill = _a.fill;
+    return (react_1.default.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_1.default.createElement("polygon", { points: "0,100 100,100 0,0" })));
+};
+exports.ChatTriangle = ChatTriangle;

package/data/vista-chat-props.js

@@ -113,7 +113,44 @@ exports.vistaChatV2Props = {
     chatValue: '',
     handleChatOnChange: function () { return void 0; },
     sectionHeading: 'Psychic Tools',
-    messages: [],
+    user: {
+        avatarUrl: '',
+        avatarAlt: '',
+    },
+    psychic: {
+        avatarUrl: '',
+        avatarAlt: '',
+    },
+    messages: [
+        {
+            message: 'Hello from User',
+            id: 'item-1',
+            createdAt: '2025-01-11 10:09:49.891',
+            status: 'DELIVERED',
+            isUser: true,
+        },
+        {
+            message: 'Hello from Psychic',
+            id: 'item-2',
+            createdAt: '2025-01-11 10:15:49.891',
+            status: 'DELIVERED',
+            isUser: false,
+        },
+        {
+            message: 'Hello from User',
+            id: 'item-3',
+            createdAt: '2025-01-11 10:19:49.891',
+            status: 'DELIVERED',
+            isUser: true,
+        },
+        {
+            message: 'Hello from User',
+            id: 'item-4',
+            createdAt: '2025-01-11 10:29:49.891',
+            status: 'DELIVERED',
+            isUser: true,
+        },
+    ],
     actionItems: [
         {
             enabled: true,

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

@@ -1,2 +1,3 @@
 import { FC } from 'react';
-export declare const VistaChatBubbleV1: FC<any>;
+import { VistaChatBubbleV1Props } from '../../type/vista-chat-bubble-type';
+export declare const VistaChatBubbleV1: FC<VistaChatBubbleV1Props>;

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

@@ -7,53 +7,24 @@ 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 chat_triangle_1 = require("../../atoms/chat-triangle/chat-triangle");
 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 message = _a.message, createdAt = _a.createdAt, isUser = _a.isUser, user = _a.user, psychic = _a.psychic;
     var getBubbleStyles = function () { return ({
-        borderTopLeftRadius: isRecipient ? '0px' : '8px',
-        borderTopRightRadius: isRecipient ? '8px' : '0px',
+        borderTopLeftRadius: isUser ? '8px' : '0px',
+        borderTopRightRadius: isUser ? '0px' : '8px',
         borderBottomLeftRadius: '8px',
         borderBottomRightRadius: '8px',
     }); };
-    // const getTriangle = (): JSX.Element | null =>
-    //   showAvatar ? (
-    //     <ChatTriangle fill={isRecipient ? '#E5E7EB' : '#9153D0'} />
-    //   ) : null;
-    // const getStatusIndicator = (): JSX.Element | null => {
-    //   if (isRecipient || !status) return null;
-    //   const isViewed = status === VISTA_CHAT_BUBBLE_STATUS.VIEWED;
-    //   const fillPercentage = isViewed ? '100' : '50';
-    //   const fillColor = '#7e22ce';
-    //   const emptyColor = '#D1D5DB';
-    //   return (
-    //     <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') }),
+    return (react_1.default.createElement("div", { className: "flex items-start gap-6 my-2 ".concat(isUser ? 'justify-end' : 'justify-start') },
+        react_1.default.createElement("div", { className: isUser ? 'order-1' : 'order-2' },
+            react_1.default.createElement("div", { className: "relative ".concat(isUser ? 'bg-primary text-white' : 'bg-gray-200 text-black'), style: getBubbleStyles() },
+                react_1.default.createElement("div", { className: "absolute top-0 size-4 ".concat(isUser ? '-right-4 rotate-90' : '-left-4 rotate-180') },
+                    react_1.default.createElement(chat_triangle_1.ChatTriangle, { fill: isUser ? '#9153D0' : '#E5E7EB' })),
                 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))))),
-        react_1.default.createElement("div", { className: "order-2 min-w-10" }, !isRecipient && getAvatar())));
+                react_1.default.createElement("div", { className: "flex items-center px-4 py-2 text-xs justify-between ".concat(isUser ? 'text-right' : 'text-left') },
+                    react_1.default.createElement("span", { className: "mr-2" }, (0, format_timestamp_1.formatTimestamp)(createdAt))))),
+        react_1.default.createElement("div", { className: "order-1 min-w-10" },
+            react_1.default.createElement(vista_avatar_v1_1.VistaAvatarV1, { alt: isUser ? user.avatarAlt : psychic.avatarAlt, src: isUser ? user.avatarUrl : psychic.avatarUrl }))));
 };
 exports.VistaChatBubbleV1 = VistaChatBubbleV1;

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

@@ -38,13 +38,15 @@ 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/vista-chat-bubble-v1");
+// import { shouldShowAvatar } from '../../utils/should-show-avatar';
+// import { VISTA_CHAT_BUBBLE_STATUS } from '../../type/vista-chat-type';
+// import { VistaChatBubbleV1 } from '../../molecules/vista-chat-bubble-v1/vista-chat-bubble-v1';
 var vista_chat_heading_v1_1 = require("../../molecules/vista-chat-heading-v1/vista-chat-heading-v1");
 var vista_chat_side_bar_v1_1 = require("../../molecules/vista-chat-side-bar-v1/vista-chat-side-bar-v1");
 var VistaChatV1 = function (_a) {
-    var currentUser = _a.currentUser, messages = _a.messages, chats = _a.chats;
+    var 
+    // currentUser,
+    messages = _a.messages, chats = _a.chats;
     var chatContainerRef = (0, react_1.useRef)(null);
     var getMessageSpacing = function (index) {
         var isFirstMessage = index === 0;
@@ -60,8 +62,7 @@ var VistaChatV1 = function (_a) {
             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 }))));
+                react_1.default.createElement("div", { className: getMessageSpacing(index) })));
         });
     };
     var scrollToBottom = function () {

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

@@ -13,11 +13,11 @@ 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_chat_bubble_v1_1 = require("../../molecules/vista-chat-bubble-v1/vista-chat-bubble-v1");
 var VistaChatV2 = function (_a) {
-    var actionItems = _a.actionItems, chatId = _a.chatId, chatValue = _a.chatValue, handleChatOnChange = _a.handleChatOnChange, sectionHeading = _a.sectionHeading, messages = _a.messages;
+    var actionItems = _a.actionItems, chatId = _a.chatId, chatValue = _a.chatValue, handleChatOnChange = _a.handleChatOnChange, sectionHeading = _a.sectionHeading, messages = _a.messages, user = _a.user, psychic = _a.psychic;
     var renderChatMessages = function () {
-        return (react_1.default.createElement(react_1.default.Fragment, null, messages.map((function (_a, idx) {
-            var message = _a.message, timestamp = _a.timestamp, currentUser = _a.currentUser, type = _a.type, status = _a.status;
-            return (react_1.default.createElement(vista_chat_bubble_v1_1.VistaChatBubbleV1, { key: idx, message: message, timestamp: timestamp, type: type, currentUser: currentUser, status: status }));
+        return (react_1.default.createElement(react_1.default.Fragment, null, messages.map((function (_a) {
+            var createdAt = _a.createdAt, id = _a.id, isUser = _a.isUser, message = _a.message;
+            return (react_1.default.createElement(vista_chat_bubble_v1_1.VistaChatBubbleV1, { createdAt: createdAt, isUser: isUser, key: id, message: message, psychic: psychic, user: user }));
         }))));
     };
     return (react_1.default.createElement("div", { className: "relative h-screen grid grid-cols-12 grid-rows-1 overflow-hidden" },
@@ -25,7 +25,7 @@ var VistaChatV2 = function (_a) {
         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 h-full" },
-                react_1.default.createElement("div", { className: "h-full overflow-y-auto p-4" }, renderChatMessages())),
+                react_1.default.createElement("div", { className: "h-full flex flex-col justify-end overflow-y-auto p-4" }, renderChatMessages())),
             react_1.default.createElement("div", { className: "flex flex-row items-center gap-4 border-t border-gray-200 p-4" },
                 react_1.default.createElement("div", { className: 'w-full' },
                     react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: handleChatOnChange, id: chatId, placeholder: 'Enter message...', value: chatValue })),

package/package.json

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

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

@@ -0,0 +1,8 @@
+import { VistaChatV2Psychic, VistaChatV2User } from "./vista-chat-type";
+export interface VistaChatBubbleV1Props {
+    createdAt: string;
+    isUser: boolean;
+    message: string;
+    psychic: VistaChatV2Psychic;
+    user: VistaChatV2User;
+}

package/type/vista-chat-bubble-type.js

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

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

@@ -19,6 +19,14 @@ export interface VistaChatV2ActionItem {
     order: number;
     variant: VISTA_BUTTON_VARIANT;
 }
+export interface VistaChatV2User {
+    avatarUrl: string;
+    avatarAlt: string;
+}
+export interface VistaChatV2Psychic {
+    avatarUrl: string;
+    avatarAlt: string;
+}
 export interface VistaChatV2Props {
     actionItems: VistaChatV2ActionItem[];
     chatId: string;
@@ -26,4 +34,6 @@ export interface VistaChatV2Props {
     handleChatOnChange: (k: string, v: string) => void;
     sectionHeading: string;
     messages: any[];
+    user: VistaChatV2User;
+    psychic: VistaChatV2Psychic;
 }