blixify-ui-web 0.1.146 → 0.1.147

package/lib/components/chat/chatAnchor/index.d.ts

@@ -0,0 +1,15 @@
+import React, { Component, ReactElement } from "react";
+import "../../../index.css";
+interface Props {
+    chatBase: ReactElement;
+}
+interface State {
+    chatBaseVisible: boolean;
+}
+export declare class ChatAnchor extends Component<Props> {
+    state: State;
+    renderChatAnchorIcon: (chatBaseVisible: boolean) => React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/components/chat/chatAnchor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/chatAnchor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,YAAY,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,oBAAoB,CAAC;AAE5B,UAAU,KAAK;IACb,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,UAAU,KAAK;IACb,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,qBAAa,UAAW,SAAQ,SAAS,CAAC,KAAK,CAAC;IAC9C,KAAK,EAAE,KAAK,CAEV;IAEF,oBAAoB,oBAAqB,OAAO,uBAM9C;IAEF,MAAM;CA2BP"}

package/lib/components/chat/chatAnchor/index.js

@@ -0,0 +1,76 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatAnchor = void 0;
+var react_1 = require("@headlessui/react");
+var solid_1 = require("@heroicons/react/20/solid");
+var react_2 = __importStar(require("react"));
+require("../../../index.css");
+var ChatAnchor = /** @class */ (function (_super) {
+    __extends(ChatAnchor, _super);
+    function ChatAnchor() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            chatBaseVisible: false,
+        };
+        _this.renderChatAnchorIcon = function (chatBaseVisible) {
+            if (chatBaseVisible) {
+                return react_2.default.createElement(solid_1.XMarkIcon, { className: "w-8 h-8", color: "white" });
+            }
+            else {
+                return react_2.default.createElement(solid_1.ChatBubbleOvalLeftIcon, { className: "w-8 h-8", color: "white" });
+            }
+        };
+        return _this;
+    }
+    ChatAnchor.prototype.render = function () {
+        var _this = this;
+        return (react_2.default.createElement("div", { className: "relative w-fit h-fit" },
+            react_2.default.createElement("div", { className: "fixed flex flex-col items-end space-y-4 bottom-8 right-8" },
+                react_2.default.createElement(react_1.Transition, { show: this.state.chatBaseVisible, as: react_2.Fragment, enter: "transform transition duration-[400ms]", enterFrom: "opacity-0 scale-50", leave: "transform duration-200 transition ease-in-out", leaveTo: "opacity-0 scale-95 " },
+                    react_2.default.createElement("div", null, this.props.chatBase)),
+                react_2.default.createElement("div", { onClick: function () {
+                        return _this.setState({ chatBaseVisible: !_this.state.chatBaseVisible });
+                    }, className: "p-4 rounded-full select-none h-fit w-fit bg-primary-500 hover:cursor-pointer hover:bg-primary-600" }, this.renderChatAnchorIcon(this.state.chatBaseVisible)))));
+    };
+    return ChatAnchor;
+}(react_2.Component));
+exports.ChatAnchor = ChatAnchor;
+//# sourceMappingURL=index.js.map

package/lib/components/chat/chatAnchor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/chat/chatAnchor/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+C;AAC/C,mDAA8E;AAC9E,6CAAiE;AACjE,8BAA4B;AAU5B;IAAgC,8BAAgB;IAAhD;QAAA,qEAwCC;QAvCC,WAAK,GAAU;YACb,eAAe,EAAE,KAAK;SACvB,CAAC;QAEF,0BAAoB,GAAG,UAAC,eAAwB;YAC9C,IAAI,eAAe,EAAE;gBACnB,OAAO,8BAAC,iBAAS,IAAC,SAAS,EAAC,SAAS,EAAC,KAAK,EAAC,OAAO,GAAG,CAAC;aACxD;iBAAM;gBACL,OAAO,8BAAC,8BAAsB,IAAC,SAAS,EAAC,SAAS,EAAC,KAAK,EAAC,OAAO,GAAG,CAAC;aACrE;QACH,CAAC,CAAC;;IA6BJ,CAAC;IA3BC,2BAAM,GAAN;QAAA,iBA0BC;QAzBC,OAAO,CACL,uCAAK,SAAS,EAAC,sBAAsB;YACnC,uCAAK,SAAS,EAAC,0DAA0D;gBACvE,8BAAC,kBAAU,IACT,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,EAChC,EAAE,EAAE,gBAAQ,EACZ,KAAK,EAAC,uCAAuC,EAC7C,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAC,+CAA+C,EACrD,OAAO,EAAC,qBAAqB;oBAE7B,2CAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CACrB;gBAEb,uCACE,OAAO,EAAE;wBACP,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC,KAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;oBAA/D,CAA+D,EAEjE,SAAS,EAAC,mGAAmG,IAE5G,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAClD,CACF,CACF,CACP,CAAC;IACJ,CAAC;IACH,iBAAC;AAAD,CAAC,AAxCD,CAAgC,iBAAS,GAwCxC;AAxCY,gCAAU"}

package/lib/components/chat/chatBase/index.d.ts

@@ -0,0 +1,55 @@
+import React, { Component, ReactElement } from "react";
+import "../../../index.css";
+export interface User {
+    id: string;
+    name: string;
+    imageUrl?: string;
+}
+export interface Message {
+    sender: User;
+    messageBody: string;
+    createdAt: Date;
+}
+export interface Conversation {
+    id: string;
+    members: User[];
+    messageList: Message[];
+}
+interface Props {
+    value: string;
+    currentUser: User;
+    conversation: Conversation;
+    searchMessage?: string;
+    headerElement?: ReactElement;
+    bodyElement?: ReactElement;
+    className?: string;
+    sizeClassName?: string;
+    onSendMessage?: (event: any) => void;
+    onChangeMessage?: (event: any) => void;
+    onSearch?: (searchMessage: string) => void;
+    onChangeSearch?: (event: any) => void;
+}
+interface State {
+    searchBoxVisible: boolean;
+    scrolling: boolean;
+}
+export declare class ChatBase extends Component<Props> {
+    state: State;
+    timeout: any;
+    scrollToBottomRef: any;
+    componentDidUpdate: (prevProps: Props) => void;
+    handleOnSearch: (searchMessage: string) => void;
+    handleOnChangeMessage: (e: any) => void;
+    handleOnChangeSearch: (e: any) => void;
+    handleConversationScroll: () => void;
+    handleOnSendMessage: () => void;
+    renderDefaultHeader: () => React.JSX.Element;
+    renderConversation: () => React.JSX.Element;
+    renderMessages: () => any;
+    renderMoreOption: () => React.JSX.Element;
+    renderMoreOptionItem: () => any;
+    renderSearch: () => React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/components/chat/chatBase/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/chatBase/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,YAAY,EAAa,MAAM,OAAO,CAAC;AAC5E,OAAO,oBAAoB,CAAC;AAK5B,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE,IAAI,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,IAAI,EAAE,CAAC;IAChB,WAAW,EAAE,OAAO,EAAE,CAAC;CACxB;AAED,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC;AAED,UAAU,KAAK;IACb,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,qBAAa,QAAS,SAAQ,SAAS,CAAC,KAAK,CAAC;IAC5C,KAAK,EAAE,KAAK,CAGV;IAEF,OAAO,EAAE,GAAG,CAAQ;IACpB,iBAAiB,EAAE,GAAG,CAAe;IAErC,kBAAkB,cAAe,KAAK,UAWpC;IAEF,cAAc,kBAAmB,MAAM,UAErC;IAEF,qBAAqB,MAAO,GAAG,UAE7B;IAEF,oBAAoB,MAAO,GAAG,UAE5B;IAEF,wBAAwB,aAMtB;IAEF,mBAAmB,aAcjB;IAEF,mBAAmB,0BAMjB;IAEF,kBAAkB,0BAahB;IAEF,cAAc,YAoDZ;IAEF,gBAAgB,0BAyBd;IAEF,oBAAoB,YAgBlB;IAEF,YAAY,0BAmCV;IAEF,MAAM;CA6CP"}

package/lib/components/chat/chatBase/index.js

@@ -0,0 +1,209 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatBase = void 0;
+var react_1 = require("@headlessui/react");
+var solid_1 = require("@heroicons/react/20/solid");
+var outline_1 = require("@heroicons/react/24/outline");
+var moment_1 = __importDefault(require("moment"));
+var react_2 = __importStar(require("react"));
+require("../../../index.css");
+var iconButton_1 = require("../../action/iconButton");
+var form_1 = require("../../input/form");
+var textInput_1 = require("../../input/textInput");
+var ChatBase = /** @class */ (function (_super) {
+    __extends(ChatBase, _super);
+    function ChatBase() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            searchBoxVisible: false,
+            scrolling: false,
+        };
+        _this.timeout = null;
+        _this.scrollToBottomRef = (0, react_2.createRef)();
+        _this.componentDidUpdate = function (prevProps) {
+            var _a;
+            if (JSON.stringify(prevProps.conversation) !==
+                JSON.stringify(_this.props.conversation) &&
+                !_this.state.scrolling) {
+                (_a = _this.scrollToBottomRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                    behavior: "smooth",
+                    block: "nearest",
+                });
+            }
+        };
+        _this.handleOnSearch = function (searchMessage) {
+            var _a, _b;
+            (_b = (_a = _this.props).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, searchMessage);
+        };
+        _this.handleOnChangeMessage = function (e) {
+            var _a, _b;
+            (_b = (_a = _this.props).onChangeMessage) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        };
+        _this.handleOnChangeSearch = function (e) {
+            var _a, _b;
+            (_b = (_a = _this.props).onChangeSearch) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        };
+        _this.handleConversationScroll = function () {
+            if (_this.timeout)
+                clearTimeout(_this.timeout);
+            _this.setState({ scrolling: true });
+            _this.timeout = setTimeout(function () {
+                _this.setState({ scrolling: false });
+            }, 3000);
+        };
+        _this.handleOnSendMessage = function () {
+            if (_this.props.onSendMessage && _this.props.value.length > 0) {
+                var dupConversation = {
+                    id: _this.props.conversation.id,
+                    members: __spreadArray([], _this.props.conversation.members, true),
+                    messageList: __spreadArray([], _this.props.conversation.messageList, true),
+                };
+                dupConversation.messageList.push({
+                    sender: _this.props.currentUser,
+                    messageBody: _this.props.value,
+                    createdAt: (0, moment_1.default)().toDate(),
+                });
+                _this.props.onSendMessage(dupConversation);
+            }
+        };
+        _this.renderDefaultHeader = function () {
+            return (react_2.default.createElement("div", { className: "flex flex-col justify-center h-12 pl-6 text-white bg-primary-500" },
+                react_2.default.createElement("p", null, "Chat")));
+        };
+        _this.renderConversation = function () {
+            var _a;
+            return (react_2.default.createElement("div", { onScroll: _this.handleConversationScroll, className: "chat-scrollbar w-full h-full overflow-y-auto" },
+                _this.state.searchBoxVisible && _this.renderSearch(),
+                react_2.default.createElement("div", { className: "w-full h-fit flex flex-col p-2 space-y-2" }, (_a = _this.props.bodyElement) !== null && _a !== void 0 ? _a : _this.renderMessages(),
+                    react_2.default.createElement("div", { ref: _this.scrollToBottomRef }))));
+        };
+        _this.renderMessages = function () {
+            var renderedMessages = [];
+            _this.props.conversation.messageList.map(function (eachMessage) {
+                var sent = eachMessage.sender.id === _this.props.currentUser.id;
+                var defaultRoundedNone = sent ? "rounded-tr-none" : "rounded-tl-none";
+                var defaultBgColor = sent ? "bg-primary-500" : "bg-gray-100";
+                var defaultTextColor = sent ? "text-white" : "text-black";
+                var defaultClassName = "p-2 ".concat(defaultBgColor, " rounded-md ").concat(defaultRoundedNone, " ").concat(defaultTextColor, " text-xs flex-col");
+                if (sent) {
+                    renderedMessages.push(react_2.default.createElement("div", { className: "max-w-[75%] ml-auto" },
+                        react_2.default.createElement("div", { className: defaultClassName },
+                            react_2.default.createElement("p", null, eachMessage.messageBody),
+                            react_2.default.createElement("span", { className: "mt-1 flex justify-end text-[9px] text-gray-200" }, (0, moment_1.default)(eachMessage.createdAt).format("MMM DD HH:mm")))));
+                }
+                else {
+                    renderedMessages.push(react_2.default.createElement("div", { className: "max-w-[75%] flex mr-auto space-x-2" },
+                        eachMessage.sender.imageUrl ? (react_2.default.createElement("img", { src: eachMessage.sender.imageUrl, alt: "", className: "w-8 h-8 rounded-full" })) : (react_2.default.createElement("div", { className: "flex flex-col items-center justify-center w-8 h-8 rounded-full bg-primary-500 " },
+                            react_2.default.createElement(solid_1.ChatBubbleOvalLeftIcon, { color: "white", className: "w-8 h-5" }))),
+                        react_2.default.createElement("div", { className: "flex flex-col space-y-0.5" },
+                            react_2.default.createElement("p", { className: "text-xs text-gray-500" }, eachMessage.sender.name),
+                            react_2.default.createElement("div", { className: defaultClassName },
+                                react_2.default.createElement("p", null, eachMessage.messageBody),
+                                react_2.default.createElement("span", { className: "mt-1 flex justify-end text-[9px] text-gray-500" }, (0, moment_1.default)(eachMessage.createdAt).format("MMM DD HH:mm"))))));
+                }
+                return null;
+            });
+            return renderedMessages;
+        };
+        _this.renderMoreOption = function () {
+            return (react_2.default.createElement("div", { className: "absolute text-right top-2 right-2" },
+                react_2.default.createElement(react_1.Menu, { as: "div", className: "relative text-left" },
+                    react_2.default.createElement("div", null,
+                        react_2.default.createElement(react_1.Menu.Button, { className: "w-full p-2 bg-white rounded-md hover:bg-gray-100 text-primary-500" },
+                            react_2.default.createElement(solid_1.EllipsisVerticalIcon, { className: "w-4 h-4 ", "aria-hidden": "true" }))),
+                    react_2.default.createElement(react_1.Transition, { as: react_2.Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" },
+                        react_2.default.createElement(react_1.Menu.Items, { className: "absolute right-0 z-20 mt-1 text-xs origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-md w-max" }, _this.renderMoreOptionItem())))));
+        };
+        _this.renderMoreOptionItem = function () {
+            var moreOptionItemList = [];
+            moreOptionItemList.push(react_2.default.createElement(react_1.Menu.Item, null,
+                react_2.default.createElement("button", { onClick: function () { return _this.setState({ searchBoxVisible: true }); }, className: "flex w-full items-center rounded-md p-3 gap-1 hover:bg-gray-100" },
+                    react_2.default.createElement(solid_1.MagnifyingGlassIcon, { className: "w-3 h-3", "aria-hidden": "true" }),
+                    "Search")));
+            return moreOptionItemList;
+        };
+        _this.renderSearch = function () {
+            return (react_2.default.createElement("div", { className: "z-10 sticky top-0 left-0 flex p-2 space-x-2 bg-white justify-center items-center" },
+                react_2.default.createElement(form_1.Form, { refList: [], handleComplete: function () { var _a; return _this.handleOnSearch((_a = _this.props.searchMessage) !== null && _a !== void 0 ? _a : ""); }, className: "w-full flex" },
+                    react_2.default.createElement(textInput_1.TextInput, { type: "text", value: _this.props.searchMessage, label: "", onChange: function (e) { return _this.handleOnChangeSearch(e); }, placeholder: "Search messages in chat", inputClassName: "text-xs shadow-md placeholder:text-gray-400", containerClassName: "w-full" })),
+                react_2.default.createElement(iconButton_1.IconButton, { onClick: function () { var _a; return _this.handleOnSearch((_a = _this.props.searchMessage) !== null && _a !== void 0 ? _a : ""); }, icon: react_2.default.createElement(solid_1.MagnifyingGlassIcon, { className: "w-5 h-5" }), className: "focus:ring-transparent flex flex-col justify-center" }),
+                react_2.default.createElement(iconButton_1.IconButton, { onClick: function () {
+                        _this.handleOnSearch("");
+                        _this.setState({ searchBoxVisible: false });
+                    }, className: "focus:ring-transparent flex flex-col justify-center", icon: react_2.default.createElement(solid_1.XMarkIcon, { className: "w-5 h-5", color: "red" }) })));
+        };
+        return _this;
+    }
+    ChatBase.prototype.render = function () {
+        var _this = this;
+        var _a, _b;
+        var defaultClassName = "relative ".concat((_a = this.props.sizeClassName) !== null && _a !== void 0 ? _a : "h-[75vh]", " flex flex-col justify-between bg-white rounded-md");
+        return (react_2.default.createElement("div", { className: "".concat(defaultClassName, " ").concat(this.props.className) },
+            react_2.default.createElement("div", { className: "relative w-full h-fit border-b border-gray-300" }, (_b = this.props.headerElement) !== null && _b !== void 0 ? _b : this.renderDefaultHeader(),
+                this.renderMoreOption()),
+            this.props.bodyElement
+                ? this.props.bodyElement
+                : this.props.conversation
+                    ? this.renderConversation()
+                    : null,
+            react_2.default.createElement("div", { className: "flex justify-between p-2 space-x-2" },
+                react_2.default.createElement(form_1.Form, { refList: [], className: "w-full", handleComplete: this.handleOnSendMessage },
+                    react_2.default.createElement(textInput_1.TextInput, { type: "text", value: this.props.value, placeholder: "Ask a question", label: "", onChange: function (e) {
+                            _this.handleOnChangeMessage(e);
+                        }, inputClassName: "text-xs placeholder:text-gray-400" })),
+                this.props.value.length > 0 && (react_2.default.createElement(iconButton_1.IconButton, { onClick: this.handleOnSendMessage, className: "flex flex-col justify-center", icon: react_2.default.createElement(outline_1.PaperAirplaneIcon, { className: "w-5 h-5 text-primary-500" }) })))));
+    };
+    return ChatBase;
+}(react_2.Component));
+exports.ChatBase = ChatBase;
+//# sourceMappingURL=index.js.map

package/lib/components/chat/chatBase/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/chat/chatBase/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/chat/chatDashboard/index.d.ts

@@ -0,0 +1,32 @@
+import React, { Component, ReactElement } from "react";
+import "../../../index.css";
+import { Conversation, User } from "../chatBase";
+interface Props {
+    value: string;
+    currentUser: User;
+    conversationList: Conversation[];
+    selectedConversation: Conversation;
+    searchMessage?: string;
+    className?: string;
+    sizeClassName?: string;
+    chatBaseClassName?: string;
+    chatBaseSizeClassName?: string;
+    mobileSelectedChat?: boolean;
+    bodyElement?: ReactElement;
+    headerElement?: ReactElement;
+    onSendMessage?: (event: any) => void;
+    onChangeMessage?: (event: any) => void;
+    onSearch?: (searchMessage: string) => void;
+    onChangeSearch?: (event: any) => void;
+    handleSelectedConversation: (id: string) => void;
+}
+export declare class ChatDashboard extends Component<Props> {
+    scrollToTopRef: any;
+    componentDidUpdate: (prevProps: Props) => void;
+    handleScrollToLatestMessage: () => void;
+    handleSelectedConversation: (id: string) => void;
+    renderUserList: () => any;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/components/chat/chatDashboard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/chatDashboard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAa,YAAY,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAY,YAAY,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAE3D,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,IAAI,CAAC;IAClB,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACjC,oBAAoB,EAAE,YAAY,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,0BAA0B,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,CAAC;IACjD,cAAc,EAAE,GAAG,CAAe;IAElC,kBAAkB,cAAe,KAAK,UAMpC;IAEF,2BAA2B,aAKzB;IAEF,0BAA0B,OAAQ,MAAM,UAEtC;IAEF,cAAc,YA0CZ;IAEF,MAAM;CAqCP"}

package/lib/components/chat/chatDashboard/index.js

@@ -0,0 +1,102 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatDashboard = void 0;
+var react_1 = __importStar(require("react"));
+require("../../../index.css");
+var chatBase_1 = require("../chatBase");
+var ChatDashboard = /** @class */ (function (_super) {
+    __extends(ChatDashboard, _super);
+    function ChatDashboard() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.scrollToTopRef = (0, react_1.createRef)();
+        _this.componentDidUpdate = function (prevProps) {
+            if (JSON.stringify(_this.props.conversationList) !==
+                JSON.stringify(prevProps.conversationList))
+                _this.handleScrollToLatestMessage();
+        };
+        _this.handleScrollToLatestMessage = function () {
+            var _a;
+            (_a = _this.scrollToTopRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+            });
+        };
+        _this.handleSelectedConversation = function (id) {
+            var _a, _b;
+            (_b = (_a = _this.props).handleSelectedConversation) === null || _b === void 0 ? void 0 : _b.call(_a, id);
+        };
+        _this.renderUserList = function () {
+            var userChatList = [];
+            var conversationCount = _this.props.conversationList.length;
+            if (conversationCount > 0) {
+                _this.props.conversationList.map(function (eachConversation, index) {
+                    var otherUser = eachConversation.members.find(function (eachMember) {
+                        return eachMember.id !== _this.props.currentUser.id;
+                    });
+                    if (otherUser) {
+                        userChatList.push(react_1.default.createElement("div", { onClick: function () {
+                                return _this.handleSelectedConversation(eachConversation.id);
+                            }, className: "p-4 flex items-center ".concat(index === conversationCount - 1 ? "" : "border-b", " border-gray-300 hover:bg-gray-300 hover:cursor-pointer") },
+                            react_1.default.createElement("img", { src: otherUser.imageUrl, alt: "", className: "w-8 h-8 rounded-full" }),
+                            react_1.default.createElement("div", { className: "flex flex-col ml-5" },
+                                react_1.default.createElement("div", { className: "font-bold text-indigo-600" }, otherUser.name),
+                                react_1.default.createElement("div", { className: "text-xs" }, eachConversation.messageList[eachConversation.messageList.length - 1].messageBody))));
+                    }
+                    return null;
+                });
+                return userChatList;
+            }
+        };
+        return _this;
+    }
+    ChatDashboard.prototype.render = function () {
+        var _a, _b;
+        return (react_1.default.createElement("div", { className: "w-full flex border-2 rounded-md b-black" },
+            react_1.default.createElement("div", { className: "chat-scrollbar ".concat((_a = this.props.sizeClassName) !== null && _a !== void 0 ? _a : "h-[75vh]", " ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : "bg-white border-rounded-md border-gray-300 border-r-2", " ").concat(this.props.mobileSelectedChat ? "hidden" : "flex", " sm:flex overflow-y-auto") },
+                react_1.default.createElement("div", { className: "w-full h-fit flex flex-col" },
+                    react_1.default.createElement("div", { ref: this.scrollToTopRef }),
+                    this.renderUserList())),
+            react_1.default.createElement(chatBase_1.ChatBase, { value: this.props.value, searchMessage: this.props.searchMessage, currentUser: this.props.currentUser, conversation: this.props.selectedConversation, bodyElement: this.props.bodyElement, headerElement: this.props.headerElement, className: " ".concat(this.props.chatBaseClassName, " ").concat(!this.props.mobileSelectedChat ? "hidden" : "", " sm:flex overflow-y-auto"), sizeClassName: this.props.chatBaseSizeClassName, onSendMessage: this.props.onSendMessage, onChangeMessage: this.props.onChangeMessage, onChangeSearch: this.props.onChangeSearch, onSearch: this.props.onSearch })));
+    };
+    return ChatDashboard;
+}(react_1.Component));
+exports.ChatDashboard = ChatDashboard;
+//# sourceMappingURL=index.js.map

package/lib/components/chat/chatDashboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/chat/chatDashboard/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/chat/chatUtils.d.ts

@@ -0,0 +1,4 @@
+import { Conversation, User } from "./chatBase";
+export declare const currentUser: User;
+export declare const conversationList: Conversation[];
+//# sourceMappingURL=chatUtils.d.ts.map

package/lib/components/chat/chatUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatUtils.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chatUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAKhD,eAAO,MAAM,WAAW,EAAE,IAIzB,CAAC;AA0CF,eAAO,MAAM,gBAAgB,EAAE,YAAY,EAiQ1C,CAAC"}