@messenger-box/chat-ui 0.0.1-alpha.399

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.0.1-alpha.399](https://github.com/CDEBase/messenger-box/compare/v0.0.1-alpha.398...v0.0.1-alpha.399) (2023-10-09)
+
+**Note:** Version bump only for package @messenger-box/chat-ui

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2017 CDMBase LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/jest.config.js

@@ -0,0 +1,9 @@
+const base = require('../../../jest.config.base');
+const packageJson = require('./package');
+
+module.exports = {
+    ...base,
+    testEnvironment: 'jsdom', // This is overriden, from the base testEnvironment
+    name: packageJson.name,
+    displayName: packageJson.name,
+};

package/lib/components/CustomerSupportChat/Chat.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const Chat: ({ user, channelId, channelMessages, setChannelMessages }: {
+    user: any;
+    channelId: any;
+    channelMessages: any;
+    setChannelMessages: any;
+}) => React.JSX.Element;
+//# sourceMappingURL=Chat.d.ts.map

package/lib/components/CustomerSupportChat/Chat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/CustomerSupportChat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAkBjF,eAAO,MAAM,IAAI;;;;;uBAsEhB,CAAC"}

package/lib/components/CustomerSupportChat/Chat.js

@@ -0,0 +1,44 @@
+import React,{useState,useRef}from'react';import {MainContainer,ChatContainer,MessageList,MessageGroup,Message,MessageInput}from'@chatscope/chat-ui-kit-react';import {useSendPublicMessageMutation,useOnPublicPostAddedSubscription}from'@messenger-box/platform-client';import {uniqBy}from'lodash';const Chat = ({ user, channelId, channelMessages, setChannelMessages }) => {
+    // Message input value
+    useState('');
+    const [totalCount, setTotalCount] = useState(0);
+    const [sendMsg] = useSendPublicMessageMutation();
+    const chatContainerRef = useRef(null);
+    const { data: newThreadMsg, loading: newThreadMsgLoading, error: newThreadMsgError, } = useOnPublicPostAddedSubscription({
+        variables: {
+            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+        },
+    });
+    const handleSend = async (text) => {
+        if (!(text && channelId)) {
+            return;
+        }
+        await sendMsg({
+            variables: {
+                channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+                messageInput: {
+                    content: text === null || text === void 0 ? void 0 : text.toString(),
+                },
+            },
+        });
+    };
+    React.useEffect(() => {
+        if (newThreadMsg) {
+            const msg = newThreadMsg === null || newThreadMsg === void 0 ? void 0 : newThreadMsg.publicPostAdded;
+            setTotalCount((preCount) => preCount + 1);
+            setChannelMessages((oldMessages) => uniqBy([...oldMessages, msg], ({ id }) => id));
+            // Scroll to the bottom after adding a new message
+            const chatContainer = chatContainerRef.current;
+            chatContainer.scrollToBottom();
+        }
+    }, [newThreadMsg]);
+    return (React.createElement(MainContainer, null,
+        React.createElement(ChatContainer, null,
+            React.createElement(MessageList, { ref: chatContainerRef }, channelMessages.map((g) => (React.createElement(MessageGroup, { key: g.id, direction: 'outgoing' },
+                React.createElement(MessageGroup.Messages, null,
+                    React.createElement(Message, { key: g.id, model: {
+                            type: 'text',
+                            payload: g.message,
+                        } })))))),
+            React.createElement(MessageInput, { placeholder: "Type message here", onSend: handleSend }))));
+};export{Chat};//# sourceMappingURL=Chat.js.map

package/lib/components/CustomerSupportChat/Chat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.js","sources":["../../../src/components/CustomerSupportChat/Chat.tsx"],"sourcesContent":[null],"names":[],"mappings":"sSAkBO,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,kBAAkB,EAAE,KAAI;;IAEnD,QAAQ,CAAC,EAAE,EAAE;IACvC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAEhD,IAAA,MAAM,CAAC,OAAO,CAAC,GAAG,4BAA4B,EAAE,CAAC;AAEjD,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAEtC,IAAA,MAAM,EACF,IAAI,EAAE,YAAY,EAClB,OAAO,EAAE,mBAAmB,EAC5B,KAAK,EAAE,iBAAiB,GAC3B,GAAG,gCAAgC,CAAC;AACjC,QAAA,SAAS,EAAE;YACP,SAAS,EAAE,SAAS,KAAT,IAAA,IAAA,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAAE;AACnC,SAAA;AACJ,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,UAAU,GAAG,OAAO,IAAS,KAAI;AACnC,QAAA,IAAI,EAAE,IAAI,IAAI,SAAS,CAAC,EAAE;YACtB,OAAO;AACV,SAAA;AAED,QAAA,MAAM,OAAO,CAAC;AACV,YAAA,SAAS,EAAE;gBACP,SAAS,EAAE,SAAS,KAAT,IAAA,IAAA,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAAE;AAChC,gBAAA,YAAY,EAAE;oBACV,OAAO,EAAE,IAAI,KAAJ,IAAA,IAAA,IAAI,uBAAJ,IAAI,CAAE,QAAQ,EAAE;AAC5B,iBAAA;AACJ,aAAA;AACJ,SAAA,CAAC,CAAC;AACP,KAAC,CAAC;AACF,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,IAAI,YAAY,EAAE;YACd,MAAM,GAAG,GAAG,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAZ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAY,CAAE,eAAe,CAAC;YAC1C,aAAa,CAAC,CAAC,QAAa,KAAK,QAAQ,GAAG,CAAC,CAAC,CAAC;YAC/C,kBAAkB,CAAC,CAAC,WAAgB,KAAK,MAAM,CAAC,CAAC,GAAG,WAAW,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;;AAGxF,YAAA,MAAM,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC;YAC/C,aAAa,CAAC,cAAc,EAAE,CAAC;AAClC,SAAA;AACL,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,QACI,oBAAC,aAAa,EAAA,IAAA;AACV,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA;YACV,KAAC,CAAA,aAAA,CAAA,WAAW,EAAC,EAAA,GAAG,EAAE,gBAAgB,EAC7B,EAAA,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,MACnB,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,UAAU,EAAA;gBAC1C,KAAC,CAAA,aAAA,CAAA,YAAY,CAAC,QAAQ,EAAA,IAAA;oBAClB,KAAC,CAAA,aAAA,CAAA,OAAO,IACJ,GAAG,EAAE,CAAC,CAAC,EAAE,EACT,KAAK,EACD;AACI,4BAAA,IAAI,EAAE,MAAM;4BACZ,OAAO,EAAE,CAAC,CAAC,OAAO;AACd,yBAAA,EAAA,CAEd,CACkB,CACb,CAClB,CAAC,CACQ;AAEd,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,WAAW,EAAC,mBAAmB,EAAC,MAAM,EAAE,UAAU,EAAA,CAAI,CACxD,CACJ,EAClB;AACN"}

package/lib/components/CustomerSupportChat/CustomerSupportChat.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
+export declare const CustomerSupportChat: () => React.JSX.Element;
+//# sourceMappingURL=CustomerSupportChat.d.ts.map

package/lib/components/CustomerSupportChat/CustomerSupportChat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerSupportChat.d.ts","sourceRoot":"","sources":["../../../src/components/CustomerSupportChat/CustomerSupportChat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAQnD,OAAO,2DAA2D,CAAC;AAKnE,eAAO,MAAM,mBAAmB,yBA8M/B,CAAC"}

package/lib/components/CustomerSupportChat/CustomerSupportChat.js

@@ -0,0 +1,128 @@
+import React,{useState,useEffect}from'react';import {Box,Button,Image}from'@chakra-ui/react';import {BiConversation,BiMessageDetail}from'react-icons/bi';import {MdKeyboardArrowDown,MdOutlineArticle}from'react-icons/md';import {nanoid}from'nanoid';import {BasicStorage,ChatProvider,AutoDraft}from'@chatscope/use-chat';import {ExampleChatService}from'@chatscope/use-chat/dist/examples';import'@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';import {useGetNewMongooseObjectIdQuery,usePublicMessagesQuery}from'@messenger-box/platform-client';import {uniqBy}from'lodash';import {Chat}from'./Chat.js';const CustomerSupportChat = () => {
+    var _a;
+    // Check if ID exists in storage
+    const storeChannelId = (_a = localStorage === null || localStorage === void 0 ? void 0 : localStorage.getItem('channelId')) !== null && _a !== void 0 ? _a : null;
+    const [isChat, setIsChat] = useState(false);
+    const [isChatOpen, setIsChatOpen] = useState(false);
+    const [channelMessages, setChannelMessages] = useState([]);
+    const [channelId, setChannelId] = useState(storeChannelId);
+    // Storage needs to generate id for messages and groups
+    const messageIdGenerator = () => nanoid();
+    const groupIdGenerator = () => nanoid();
+    // Create serviceFactory
+    const serviceFactory = (storage, updateState) => {
+        return new ExampleChatService(storage, updateState);
+    };
+    const { data: mongooseObjectId } = useGetNewMongooseObjectIdQuery({
+        fetchPolicy: 'network-only',
+    });
+    useEffect(() => {
+        var _a, _b;
+        if (storeChannelId === 'undefined' || storeChannelId === null) {
+            // ID is undefined or not present in localStorage
+            const newId = (_a = mongooseObjectId === null || mongooseObjectId === void 0 ? void 0 : mongooseObjectId.getNewMongooseObjectId) === null || _a === void 0 ? void 0 : _a.toString();
+            localStorage.setItem('channelId', newId);
+            setChannelId((_b = mongooseObjectId === null || mongooseObjectId === void 0 ? void 0 : mongooseObjectId.getNewMongooseObjectId) === null || _b === void 0 ? void 0 : _b.toString());
+        }
+        else {
+            if (storeChannelId)
+                setChannelId(storeChannelId === null || storeChannelId === void 0 ? void 0 : storeChannelId.toString());
+        }
+    }, [mongooseObjectId, storeChannelId]);
+    const { data, loading, error } = usePublicMessagesQuery({
+        variables: {
+            channelId: channelId === null || channelId === void 0 ? void 0 : channelId.toString(),
+        },
+    });
+    React.useEffect(() => {
+        var _a, _b, _c;
+        if ((_a = data === null || data === void 0 ? void 0 : data.publicMessages) === null || _a === void 0 ? void 0 : _a.data) {
+            const currentConversaion = (_c = (_b = data === null || data === void 0 ? void 0 : data.publicMessages) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.slice().reverse();
+            currentConversaion.map((msg) => {
+                setChannelMessages((oldMessages) => uniqBy([...oldMessages, msg], ({ id }) => id));
+            });
+        }
+    }, [data, isChat]);
+    const handleChat = () => {
+        setIsChatOpen(true);
+    };
+    const handleChatClick = () => {
+        setIsChat(true);
+    };
+    const chatStorage = new BasicStorage({ groupIdGenerator, messageIdGenerator });
+    return (React.createElement(React.Fragment, null, !isChat ? (React.createElement(Box, { style: { position: 'fixed', bottom: '20px', right: '30px', zIndex: '2' } },
+        React.createElement(Button, { background: '#3182ce', fontSize: '38px', padding: '36px 18px', borderRadius: '50%', onClick: handleChatClick },
+            React.createElement(BiConversation, null)))) : (React.createElement(Box, { width: { base: '80%', md: '50%', lg: '30%', xl: '25%' }, style: { position: 'fixed', bottom: '20px', right: '30px', zIndex: '2' } },
+        React.createElement(Box, { textAlign: 'right', marginBottom: '20px' },
+            React.createElement(Button, { background: '#3182ce', fontSize: '42px', borderRadius: '50%', padding: '30px 10px', onClick: () => setIsChat(false) },
+                React.createElement(MdKeyboardArrowDown, null))),
+        React.createElement(Box, { style: { borderRadius: '20px', background: 'white' } },
+            React.createElement(Box, { style: {
+                    display: 'flex',
+                    backgroundColor: '#3182ce',
+                    padding: '20px 30px',
+                    lineHeight: '7vh',
+                    alignItems: 'center',
+                } },
+                React.createElement(Box, { style: {
+                        background: '#366c96',
+                        padding: '10px',
+                        borderRadius: '54px',
+                        fontSize: '25px',
+                    } },
+                    React.createElement(BiMessageDetail, null)),
+                React.createElement(Box, { style: { fontWeight: '700', fontSize: '18px', marginLeft: '30px' } }, "Conversation(s)")),
+            React.createElement(Box, { style: {
+                    height: '50vh',
+                    background: '#fafafa',
+                    color: 'black',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignContent: 'stretch',
+                    justifyContent: 'space-evenly',
+                    alignItems: 'center',
+                } }, !isChatOpen && !channelMessages.length ? (React.createElement(Box, { textAlign: 'center' },
+                React.createElement(Image, { width: '50%', margin: 'auto', src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThpk_KxVKIRa0_fxwaVgIFcRvTgUem0LbkaA&usqp=CAU" }),
+                React.createElement(Box, { textAlign: 'center' }, " No ongoing Conversation"),
+                React.createElement(Button, { style: {
+                        backgroundColor: '#3182ce',
+                        padding: '22px 26px',
+                        marginTop: '20px',
+                        borderRadius: '8px',
+                        color: 'whitesmoke',
+                    }, leftIcon: React.createElement(BiMessageDetail, { fontSize: '22px' }), onClick: handleChat }, "Chat now"))) : (React.createElement(Box, { w: '100%', h: '50vh' },
+                React.createElement(ChatProvider, { serviceFactory: serviceFactory, storage: chatStorage, config: {
+                        typingThrottleTime: 250,
+                        typingDebounceTime: 900,
+                        debounceTyping: true,
+                        autoDraft: AutoDraft.Save | AutoDraft.Restore,
+                    } },
+                    React.createElement(Chat, { user: { name: 'beeena', avatar: '' }, channelId: channelId, setChannelMessages: setChannelMessages, channelMessages: channelMessages }))))),
+            React.createElement(Box, { style: {
+                    height: '7vh',
+                    background: 'white',
+                    color: 'black',
+                    display: 'flex',
+                    alignContent: 'center',
+                    alignItems: 'center',
+                    padding: '30px 0px',
+                    justifyContent: 'space-evenly',
+                    boxShadow: '0 0 5px rgba(0, 0, 0, 0.9)',
+                    outline: '1px solid transparent',
+                } },
+                React.createElement(Box, { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                    } },
+                    React.createElement(BiMessageDetail, null),
+                    " Conversation"),
+                React.createElement(Box, { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                    } },
+                    React.createElement(MdOutlineArticle, null),
+                    " Articles",
+                    ' ')))))));
+};export{CustomerSupportChat};//# sourceMappingURL=CustomerSupportChat.js.map

package/lib/components/CustomerSupportChat/CustomerSupportChat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerSupportChat.js","sources":["../../../src/components/CustomerSupportChat/CustomerSupportChat.tsx"],"sourcesContent":[null],"names":[],"mappings":"8lBAaO,MAAM,mBAAmB,GAAG,MAAK;;;AAEpC,IAAA,MAAM,cAAc,GAAG,CAAA,EAAA,GAAA,YAAY,aAAZ,YAAY,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZ,YAAY,CAAE,OAAO,CAAC,WAAW,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,IAAI,CAAC;IAClE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,cAAc,CAAC,CAAC;;AAGnE,IAAA,MAAM,kBAAkB,GAAG,MAAM,MAAM,EAAE,CAAC;AAC1C,IAAA,MAAM,gBAAgB,GAAG,MAAM,MAAM,EAAE,CAAC;;AAGxC,IAAA,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,WAAW,KAAI;AAC5C,QAAA,OAAO,IAAI,kBAAkB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;AACxD,KAAC,CAAC;AACF,IAAA,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,8BAA8B,CAAC;AAC9D,QAAA,WAAW,EAAE,cAAc;AAC9B,KAAA,CAAC,CAAC;IAGH,SAAS,CAAC,MAAK;;AACX,QAAA,IAAI,cAAc,KAAK,WAAW,IAAI,cAAc,KAAK,IAAI,EAAE;;AAE3D,YAAA,MAAM,KAAK,GAAG,CAAA,EAAA,GAAA,gBAAgB,KAAhB,IAAA,IAAA,gBAAgB,KAAhB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,gBAAgB,CAAE,sBAAsB,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAQ,EAAE,CAAC;AACnE,YAAA,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AACzC,YAAA,YAAY,CAAC,CAAA,EAAA,GAAA,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAhB,gBAAgB,CAAE,sBAAsB,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAC,CAAC;AACtE,SAAA;AAAM,aAAA;AACH,YAAA,IAAI,cAAc;gBAAE,YAAY,CAAC,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAd,cAAc,CAAE,QAAQ,EAAE,CAAC,CAAC;AAChE,SAAA;AACL,KAAC,EAAE,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,sBAAsB,CAAC;AACpD,QAAA,SAAS,EAAE;YACP,SAAS,EAAE,SAAS,KAAT,IAAA,IAAA,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAAE;AACnC,SAAA;AACJ,KAAA,CAAC,CAAC;AAEH,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;;QACjB,IAAI,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJ,IAAI,CAAE,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,EAAE;AAC5B,YAAA,MAAM,kBAAkB,GAAG,CAAA,EAAA,GAAA,MAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,IAAI,CAAE,cAAc,0CAAE,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,KAAK,EAAG,CAAA,OAAO,EAAE,CAAC;AACzE,YAAA,kBAAkB,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;gBAC3B,kBAAkB,CAAC,CAAC,WAAgB,KAAK,MAAM,CAAC,CAAC,GAAG,WAAW,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AAC5F,aAAC,CAAC,CAAC;AACN,SAAA;AACL,KAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IACnB,MAAM,UAAU,GAAG,MAAK;QACpB,aAAa,CAAC,IAAI,CAAC,CAAC;AACxB,KAAC,CAAC;IACF,MAAM,eAAe,GAAG,MAAK;QACzB,SAAS,CAAC,IAAI,CAAC,CAAC;AACpB,KAAC,CAAC;IACF,MAAM,WAAW,GAAG,IAAI,YAAY,CAAC,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC,CAAC;AAE/E,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACK,CAAC,MAAM,IACJ,KAAC,CAAA,aAAA,CAAA,GAAG,EAAC,EAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,EAAA;QAEzE,KAAC,CAAA,aAAA,CAAA,MAAM,IACH,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,KAAK,EACnB,OAAO,EAAE,eAAe,EAAA;YAExB,KAAC,CAAA,aAAA,CAAA,cAAc,OAAG,CACb,CACP,KAEN,KAAC,CAAA,aAAA,CAAA,GAAG,IACA,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EACvD,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,EAAA;QAExE,KAAC,CAAA,aAAA,CAAA,GAAG,IAAC,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAA;YAEzC,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,MAAM,EAChB,YAAY,EAAE,KAAK,EACnB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,MAAM,SAAS,CAAC,KAAK,CAAC,EAAA;gBAE/B,KAAC,CAAA,aAAA,CAAA,mBAAmB,EAAG,IAAA,CAAA,CAClB,CACP;AACN,QAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,EAAA;YACrD,KAAC,CAAA,aAAA,CAAA,GAAG,EACA,EAAA,KAAK,EAAE;AACH,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,eAAe,EAAE,SAAS;AAC1B,oBAAA,OAAO,EAAE,WAAW;AACpB,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,UAAU,EAAE,QAAQ;AACvB,iBAAA,EAAA;gBAED,KAAC,CAAA,aAAA,CAAA,GAAG,EACA,EAAA,KAAK,EAAE;AACH,wBAAA,UAAU,EAAE,SAAS;AACrB,wBAAA,OAAO,EAAE,MAAM;AACf,wBAAA,YAAY,EAAE,MAAM;AACpB,wBAAA,QAAQ,EAAE,MAAM;AACnB,qBAAA,EAAA;oBAED,KAAC,CAAA,aAAA,CAAA,eAAe,OAAG,CACjB;AACN,gBAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAC,EAAA,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,sBAEjE,CACJ;YACN,KAAC,CAAA,aAAA,CAAA,GAAG,EACA,EAAA,KAAK,EAAE;AACH,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,UAAU,EAAE,SAAS;AACrB,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,aAAa,EAAE,QAAQ;AACvB,oBAAA,YAAY,EAAE,SAAS;AACvB,oBAAA,cAAc,EAAE,cAAc;AAC9B,oBAAA,UAAU,EAAE,QAAQ;AACvB,iBAAA,EAAA,EAEA,CAAC,UAAU,IAAI,CAAC,eAAe,CAAC,MAAM,IACnC,KAAC,CAAA,aAAA,CAAA,GAAG,EAAC,EAAA,SAAS,EAAE,QAAQ,EAAA;AAEpB,gBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACF,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,GAAG,EAAC,qGAAqG,EAC3G,CAAA;AACF,gBAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAE,QAAQ,EAAgC,EAAA,0BAAA,CAAA;gBAExD,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,KAAK,EAAE;AACH,wBAAA,eAAe,EAAE,SAAS;AAC1B,wBAAA,OAAO,EAAE,WAAW;AACpB,wBAAA,SAAS,EAAE,MAAM;AACjB,wBAAA,YAAY,EAAE,KAAK;AACnB,wBAAA,KAAK,EAAE,YAAY;AACtB,qBAAA,EACD,QAAQ,EAAE,KAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,QAAQ,EAAE,MAAM,EAAI,CAAA,EAC/C,OAAO,EAAE,UAAU,EAAA,EAAA,UAAA,CAGd,CACP,KAEN,KAAC,CAAA,aAAA,CAAA,GAAG,EAAC,EAAA,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAA;gBACrB,KAAC,CAAA,aAAA,CAAA,YAAY,EACT,EAAA,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE;AACJ,wBAAA,kBAAkB,EAAE,GAAG;AACvB,wBAAA,kBAAkB,EAAE,GAAG;AACvB,wBAAA,cAAc,EAAE,IAAI;AACpB,wBAAA,SAAS,EAAE,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,OAAO;AAChD,qBAAA,EAAA;AAED,oBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EACpC,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAAA,CAClC,CACS,CACb,CACT,CACC;YACN,KAAC,CAAA,aAAA,CAAA,GAAG,EACA,EAAA,KAAK,EAAE;AACH,oBAAA,MAAM,EAAE,KAAK;AACb,oBAAA,UAAU,EAAE,OAAO;AACnB,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,OAAO,EAAE,UAAU;AACnB,oBAAA,cAAc,EAAE,cAAc;AAC9B,oBAAA,SAAS,EAAE,4BAA4B;AACvC,oBAAA,OAAO,EAAE,uBAAuB;AACnC,iBAAA,EAAA;gBAED,KAAC,CAAA,aAAA,CAAA,GAAG,EACA,EAAA,KAAK,EAAE;AACH,wBAAA,OAAO,EAAE,MAAM;AACf,wBAAA,aAAa,EAAE,QAAQ;AACvB,wBAAA,UAAU,EAAE,QAAQ;AACvB,qBAAA,EAAA;AAED,oBAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAG,IAAA,CAAA;AACjB,oBAAA,eAAA,CAAA;gBACN,KAAC,CAAA,aAAA,CAAA,GAAG,EACA,EAAA,KAAK,EAAE;AACH,wBAAA,OAAO,EAAE,MAAM;AACf,wBAAA,aAAa,EAAE,QAAQ;AACvB,wBAAA,UAAU,EAAE,QAAQ;AACvB,qBAAA,EAAA;AAED,oBAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,EAAG,IAAA,CAAA;;AAAU,oBAAA,GAAG,CAC/B,CACJ,CACJ,CACJ,CACT,CACF,EACL;AACN"}

package/lib/components/CustomerSupportChat/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Chat';
+export * from './CustomerSupportChat';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/CustomerSupportChat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CustomerSupportChat/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC"}

package/lib/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Chat, CustomerSupportChat } from './CustomerSupportChat';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/config/env-config.d.ts

@@ -0,0 +1,2 @@
+export declare const config: Readonly<import("envalid").CleanedEnvAccessors>;
+//# sourceMappingURL=env-config.d.ts.map

package/lib/config/env-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"env-config.d.ts","sourceRoot":"","sources":["../../src/config/env-config.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,iDAEjB,CAAC"}

package/lib/config/index.d.ts

@@ -0,0 +1,2 @@
+export { config } from './env-config';
+//# sourceMappingURL=index.d.ts.map

package/lib/config/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export { Chat, CustomerSupportChat, } from './components';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,IAAI,EACJ,mBAAmB,GACtB,MAAM,cAAc,CAAC"}

package/lib/index.js

@@ -0,0 +1 @@
+export{Chat}from'./components/CustomerSupportChat/Chat.js';export{CustomerSupportChat}from'./components/CustomerSupportChat/CustomerSupportChat.js';//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/module.d.ts

@@ -0,0 +1,4 @@
+import { Feature } from '@common-stack/client-react';
+declare const _default: Feature;
+export default _default;
+//# sourceMappingURL=module.d.ts.map

package/lib/module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;;AAErD,wBAIG"}

package/package.json

@@ -0,0 +1,80 @@
+{
+    "name": "@messenger-box/chat-ui",
+    "version": "0.0.1-alpha.399",
+    "description": "Account browser",
+    "license": "ISC",
+    "author": "CDMBase LLC",
+    "main": "lib/index.js",
+    "module": "lib/index.mjs",
+    "typings": "lib/index.d.ts",
+    "scripts": {
+        "build": "npm run build:clean && npm run build:lib",
+        "build:clean": "rimraf lib",
+        "build:lib": "rollup -c rollup.config.mjs",
+        "build:lib:watch": "yarn build:lib -- --watch",
+        "jest": "./node_modules/.bin/jest",
+        "prepublish": "npm run build",
+        "test": "cross-env ENV_FILE=../../config/test/test.env jest",
+        "test:debug": "npm test -- --runInBand",
+        "test:watch": "npm test -- --watch",
+        "watch": "npm run build:lib:watch"
+    },
+    "jest": {
+        "moduleFileExtensions": [
+            "ts",
+            "tsx",
+            "js",
+            "json"
+        ],
+        "modulePaths": [
+            "node_modules"
+        ],
+        "roots": [
+            "src"
+        ],
+        "testEnvironment": "node",
+        "testRegex": "/__tests__/.*test*\\.(ts|tsx|js)$",
+        "transform": {
+            "\\.(ts|tsx)$": "<rootDir>/../../node_modules/ts-jest/preprocessor.js"
+        }
+    },
+    "dependencies": {
+        "@chatscope/chat-ui-kit-react": "^1.10.1",
+        "@chatscope/chat-ui-kit-styles": "^1.4.0",
+        "@chatscope/use-chat": "^3.1.1",
+        "@messenger-box/core": "0.0.1-alpha.399",
+        "@messenger-box/platform-client": "0.0.1-alpha.399",
+        "date-fns": "^2.28.0",
+        "date-fns-tz": "^1.3.3",
+        "emoji-mart": "^3.0.1",
+        "javascript-time-ago": "^2.3.13",
+        "react-icons": "~4.3.1"
+    },
+    "peerDependencies": {
+        "@adminide-stack/chakra-design-pro": "*",
+        "@adminide-stack/core": "*",
+        "@adminide-stack/user-auth0-browser": "*",
+        "@cdm-logger/client": "*",
+        "@chakra-ui/react": "*",
+        "@common-stack/client-react": "*",
+        "@emotion/react": ">=11",
+        "@emotion/styled": ">=11",
+        "@workbench-stack/components": "*",
+        "lodash": "*",
+        "moment": "*",
+        "react": ">=16.14.0",
+        "react-redux": "*",
+        "react-router": "*",
+        "react-router-dom": "*",
+        "redux": ">=4.0.1",
+        "redux-observable": "*",
+        "rxjs": "*"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "typescript": {
+        "definition": "lib/index.d.ts"
+    },
+    "gitHead": "0813ba639b35ddbb8e75c2206f5bf2a72336f892"
+}

package/rollup.config.mjs

@@ -0,0 +1,32 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import graphql from '@rollup/plugin-graphql';
+import image from '@rollup/plugin-image';
+import typescript from '@rollup/plugin-typescript';
+
+const isDev = process.env.NODE_ENV === 'development';
+const bundle = (config) => ({
+    ...config,
+    input: 'src/index.ts',
+    // marking all node modules as external
+    external: (id) => !/^[./]/.test(id),
+});
+const globals = { react: 'React' };
+
+export default [
+    bundle({
+        plugins: [typescript({ noEmitOnError: !isDev }), image(), graphql()],
+        output: [
+            {
+                dir: 'lib',
+                format: 'es',
+                name: 'Counter',
+                compact: true,
+                exports: 'named',
+                sourcemap: true,
+                preserveModules: true,
+                chunkFileNames: '[name]-[hash].[format].js',
+                globals,
+            },
+        ],
+    }),
+];

package/src/components/CustomerSupportChat/Chat.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useMemo, useEffect, useCallback, useRef } from 'react';
+import {
+    MainContainer,
+    Sidebar,
+    ConversationList,
+    Conversation,
+    Avatar,
+    MessageGroup,
+    Message,
+    ChatContainer,
+    ConversationHeader,
+    MessageList,
+    MessageInput,
+} from '@chatscope/chat-ui-kit-react';
+
+import { useOnPublicPostAddedSubscription, useSendPublicMessageMutation } from '@messenger-box/platform-client';
+import { uniqBy } from 'lodash';
+
+export const Chat = ({ user, channelId, channelMessages, setChannelMessages }) => {
+    // Message input value
+    const [value, setValue] = useState('');
+    const [totalCount, setTotalCount] = useState(0);
+
+    const [sendMsg] = useSendPublicMessageMutation();
+
+    const chatContainerRef = useRef(null);
+
+    const {
+        data: newThreadMsg,
+        loading: newThreadMsgLoading,
+        error: newThreadMsgError,
+    } = useOnPublicPostAddedSubscription({
+        variables: {
+            channelId: channelId?.toString(),
+        },
+    });
+
+    const handleSend = async (text: any) => {
+        if (!(text && channelId)) {
+            return;
+        }
+
+        await sendMsg({
+            variables: {
+                channelId: channelId?.toString(),
+                messageInput: {
+                    content: text?.toString(),
+                },
+            },
+        });
+    };
+    React.useEffect(() => {
+        if (newThreadMsg) {
+            const msg = newThreadMsg?.publicPostAdded;
+            setTotalCount((preCount: any) => preCount + 1);
+            setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, msg], ({ id }) => id));
+
+            // Scroll to the bottom after adding a new message
+            const chatContainer = chatContainerRef.current;
+            chatContainer.scrollToBottom();
+        }
+    }, [newThreadMsg]);
+
+    return (
+        <MainContainer>
+            <ChatContainer>
+                <MessageList ref={chatContainerRef}>
+                    {channelMessages.map((g) => (
+                        <MessageGroup key={g.id} direction={'outgoing'}>
+                            <MessageGroup.Messages>
+                                <Message
+                                    key={g.id}
+                                    model={
+                                        {
+                                            type: 'text',
+                                            payload: g.message,
+                                        } as any
+                                    }
+                                />
+                            </MessageGroup.Messages>
+                        </MessageGroup>
+                    ))}
+                </MessageList>
+
+                <MessageInput placeholder="Type message here" onSend={handleSend} />
+            </ChatContainer>
+        </MainContainer>
+    );
+};

package/src/components/CustomerSupportChat/CustomerSupportChat.tsx

@@ -0,0 +1,220 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Button, Image, Text } from '@chakra-ui/react';
+import { BiConversation, BiMessageDetail } from 'react-icons/bi';
+import { MdKeyboardArrowDown, MdOutlineArticle } from 'react-icons/md';
+import { nanoid } from 'nanoid';
+import { BasicStorage, ChatProvider, AutoDraft } from '@chatscope/use-chat';
+import { ExampleChatService } from '@chatscope/use-chat/dist/examples';
+
+import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
+import { useGetNewMongooseObjectIdQuery, usePublicMessagesQuery } from '@messenger-box/platform-client';
+import { uniqBy } from 'lodash';
+import { Chat } from './Chat';
+
+export const CustomerSupportChat = () => {
+    // Check if ID exists in storage
+    const storeChannelId = localStorage?.getItem('channelId') ?? null;
+    const [isChat, setIsChat] = useState(false);
+    const [isChatOpen, setIsChatOpen] = useState(false);
+    const [channelMessages, setChannelMessages] = useState([]);
+    const [channelId, setChannelId] = useState<string>(storeChannelId);
+
+    // Storage needs to generate id for messages and groups
+    const messageIdGenerator = () => nanoid();
+    const groupIdGenerator = () => nanoid();
+
+    // Create serviceFactory
+    const serviceFactory = (storage, updateState) => {
+        return new ExampleChatService(storage, updateState);
+    };
+    const { data: mongooseObjectId } = useGetNewMongooseObjectIdQuery({
+        fetchPolicy: 'network-only',
+    });
+
+
+    useEffect(() => {
+        if (storeChannelId === 'undefined' || storeChannelId === null) {
+            // ID is undefined or not present in localStorage
+            const newId = mongooseObjectId?.getNewMongooseObjectId?.toString();
+            localStorage.setItem('channelId', newId);
+            setChannelId(mongooseObjectId?.getNewMongooseObjectId?.toString());
+        } else {
+            if (storeChannelId) setChannelId(storeChannelId?.toString());
+        }
+    }, [mongooseObjectId, storeChannelId]);
+
+    const { data, loading, error } = usePublicMessagesQuery({
+        variables: {
+            channelId: channelId?.toString(),
+        },
+    });
+
+    React.useEffect(() => {
+        if (data?.publicMessages?.data) {
+            const currentConversaion = data?.publicMessages?.data?.slice().reverse();
+            currentConversaion.map((msg) => {
+                setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, msg], ({ id }) => id));
+            });
+        }
+    }, [data, isChat]);
+    const handleChat = () => {
+        setIsChatOpen(true);
+    };
+    const handleChatClick = () => {
+        setIsChat(true);
+    };
+    const chatStorage = new BasicStorage({ groupIdGenerator, messageIdGenerator });
+
+    return (
+        <>
+            {!isChat ? (
+                <Box style={{ position: 'fixed', bottom: '20px', right: '30px', zIndex: '2' }}>
+                    {/* @ts-ignore */}
+                    <Button
+                        background={'#3182ce'}
+                        fontSize={'38px'}
+                        padding={'36px 18px'}
+                        borderRadius={'50%'}
+                        onClick={handleChatClick}
+                    >
+                        <BiConversation />
+                    </Button>
+                </Box>
+            ) : (
+                <Box
+                    width={{ base: '80%', md: '50%', lg: '30%', xl: '25%' }}
+                    style={{ position: 'fixed', bottom: '20px', right: '30px', zIndex: '2' }}
+                >
+                    <Box textAlign={'right'} marginBottom={'20px'}>
+                        {/* @ts-ignore */}
+                        <Button
+                            background={'#3182ce'}
+                            fontSize={'42px'}
+                            borderRadius={'50%'}
+                            padding={'30px 10px'}
+                            onClick={() => setIsChat(false)}
+                        >
+                            <MdKeyboardArrowDown />
+                        </Button>
+                    </Box>
+                    <Box style={{ borderRadius: '20px', background: 'white' }}>
+                        <Box
+                            style={{
+                                display: 'flex',
+                                backgroundColor: '#3182ce',
+                                padding: '20px 30px',
+                                lineHeight: '7vh',
+                                alignItems: 'center',
+                            }}
+                        >
+                            <Box
+                                style={{
+                                    background: '#366c96',
+                                    padding: '10px',
+                                    borderRadius: '54px',
+                                    fontSize: '25px',
+                                }}
+                            >
+                                <BiMessageDetail />
+                            </Box>
+                            <Box style={{ fontWeight: '700', fontSize: '18px', marginLeft: '30px' }}>
+                                Conversation(s)
+                            </Box>
+                        </Box>
+                        <Box
+                            style={{
+                                height: '50vh',
+                                background: '#fafafa',
+                                color: 'black',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignContent: 'stretch',
+                                justifyContent: 'space-evenly',
+                                alignItems: 'center',
+                            }}
+                        >
+                            {!isChatOpen && !channelMessages.length ? (
+                                <Box textAlign={'center'}>
+                                    {/* @ts-ignore */}
+                                    <Image
+                                        width={'50%'}
+                                        margin={'auto'}
+                                        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThpk_KxVKIRa0_fxwaVgIFcRvTgUem0LbkaA&usqp=CAU"
+                                    />
+                                    <Box textAlign={'center'}> No ongoing Conversation</Box>
+                                    {/* @ts-ignore */}
+                                    <Button
+                                        style={{
+                                            backgroundColor: '#3182ce',
+                                            padding: '22px 26px',
+                                            marginTop: '20px',
+                                            borderRadius: '8px',
+                                            color: 'whitesmoke',
+                                        }}
+                                        leftIcon={<BiMessageDetail fontSize={'22px'} />}
+                                        onClick={handleChat}
+                                    >
+                                        Chat now
+                                    </Button>
+                                </Box>
+                            ) : (
+                                <Box w={'100%'} h={'50vh'}>
+                                    <ChatProvider
+                                        serviceFactory={serviceFactory}
+                                        storage={chatStorage}
+                                        config={{
+                                            typingThrottleTime: 250,
+                                            typingDebounceTime: 900,
+                                            debounceTyping: true,
+                                            autoDraft: AutoDraft.Save | AutoDraft.Restore,
+                                        }}
+                                    >
+                                        <Chat
+                                            user={{ name: 'beeena', avatar: '' }}
+                                            channelId={channelId}
+                                            setChannelMessages={setChannelMessages}
+                                            channelMessages={channelMessages}
+                                        />
+                                    </ChatProvider>
+                                </Box>
+                            )}
+                        </Box>
+                        <Box
+                            style={{
+                                height: '7vh',
+                                background: 'white',
+                                color: 'black',
+                                display: 'flex',
+                                alignContent: 'center',
+                                alignItems: 'center',
+                                padding: '30px 0px',
+                                justifyContent: 'space-evenly',
+                                boxShadow: '0 0 5px rgba(0, 0, 0, 0.9)',
+                                outline: '1px solid transparent',
+                            }}
+                        >
+                            <Box
+                                style={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                }}
+                            >
+                                <BiMessageDetail /> Conversation
+                            </Box>
+                            <Box
+                                style={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                }}
+                            >
+                                <MdOutlineArticle /> Articles{' '}
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+            )}
+        </>
+    );
+};

package/src/components/CustomerSupportChat/index.ts

@@ -0,0 +1,2 @@
+export * from './Chat';
+export * from './CustomerSupportChat';

package/src/components/index.ts

@@ -0,0 +1 @@
+export { Chat, CustomerSupportChat } from './CustomerSupportChat';

package/src/config/env-config.ts

@@ -0,0 +1,5 @@
+import { cleanEnv, num, str } from 'envalid';
+
+export const config = cleanEnv(process.env, {
+
+});

package/src/config/index.ts

@@ -0,0 +1 @@
+export { config } from './env-config';

package/src/index.ts

@@ -0,0 +1,4 @@
+export {
+    Chat,
+    CustomerSupportChat,
+} from './components';

package/src/module.tsx

@@ -0,0 +1,7 @@
+import { Feature } from '@common-stack/client-react';
+
+export default new Feature({
+    stylesInsert: [
+        '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css'
+    ],
+});

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "rootDir": "./src",
+    "outDir": "lib",
+    "declarationDir": "lib",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "exclude": [
+    "../../../node_modules",
+    "node_modules",
+    "lib",
+    "dist",
+    "webpack.config.js",
+    "rollup.config.mjs"
+  ],
+  "include": [
+    "src",
+    "./typings/*.d.ts"
+  ]
+}

package/webpack.config.js

@@ -0,0 +1,92 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const nodeExternals = require('webpack-node-externals');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const webpack = require('webpack');
+const path = require('path');
+
+const webpackOpts = {
+    mode: 'development',
+    entry: {
+        index: './src/index.ts',
+    },
+    target: 'node',
+    output: {
+        path: path.join(__dirname, 'lib'),
+        filename: '[name].js',
+        libraryTarget: 'commonjs2',
+    },
+    resolve: {
+        extensions: [
+            '.js',
+            '.jsx',
+            '.ts',
+            '.tsx',
+            '.graphql',
+            '.graphqls',
+            '.gql',
+            '.native.tsx',
+            '.native.ts',
+            '.json',
+        ],
+    },
+    plugins: [
+        new webpack.LoaderOptionsPlugin({
+            options: {
+                test: /\.tsx?$/,
+                ts: {
+                    compiler: 'typescript',
+                    configFile: 'tsconfig.json',
+                },
+                tslint: {
+                    emitErrors: true,
+                    failOnHint: true,
+                },
+            },
+        }),
+    ],
+    devtool: 'source-map',
+    module: {
+        rules: [
+            {
+                test: /\.(tsx)?$/,
+                use: 'ts-loader',
+            },
+            {
+                test: /\.mjs$/,
+                include: /node_modules/,
+                type: 'javascript/auto',
+            },
+            {
+                test: /\.(gql)$/,
+                exclude: /node_modules/,
+                use: ['graphql-tag/loader'],
+            },
+            {
+                test: /\.graphql?/,
+                exclude: /node_modules/,
+                use: 'raw-loader',
+            },
+            {
+                test: /\.(png|jpg|gif|webp)$/i,
+                use: {
+                    loader: 'url-loader',
+                    options: {
+                        limit: 8192,
+                        name: 'static/media/[name].[hash:8].[ext]',
+                    },
+                },
+            },
+            {
+                test: /\.svg$/,
+                use: ['@svgr/webpack'],
+            },
+            {
+                test: /\.json$/,
+                loader: 'json-loader',
+            },
+        ],
+    },
+    externals: [nodeExternals({ modulesDir: '../../../node_modules' }), nodeExternals()],
+};
+
+module.exports = webpackOpts;