fix: fixed support chat init issue

packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx

@@ -34,7 +34,7 @@ export const ChatSupportTest = () => {
     //works as Chat as well as Support Chat
     <ChatWidget
       key={'460336a9fa83112c95894af5471cd2b1091290a11298d87ec824ed74b7c14974'}
-      chatId="4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68"
+      chatId="34c44214589cecc176a136ee1daf0f0231ecc6d6574b920b5ae39eb971fa3cb4"
       welcomeComponent={
         <div
           style={{

packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx

@@ -1,65 +1,66 @@
-import { ChatPreview } from "@pushprotocol/uiweb";
+import { ChatPreview } from '@pushprotocol/uiweb';
 
 const ChatPreviewTest = () => {
+  return (
+    <div style={{ background: '#ffeded', border: '1px solid rgb(226,8,128)' }}>
+      <ChatPreview
+        chatPreviewPayload={{
+          chatId:
+            '4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68',
+          chatPic:
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAxElEQVR4AcXBsU1DUQyG0S/WW4EGMQETMIRX8BxpXFpCLMACXuGOlC5DhNZKcaUnBP85l8+P7wcntBc7sZIzDDFDzBA7eNJeTLGSKVZyRnsxxUomQ8wQM8SO9uI/tReTIWaIGWJHrGRqL6b2Yrq/fbHzcruyEyuZDDFDzBA7eBIr2Wm/shMrOcMQM8QMsaO9mGIlf6m9mAwxQ8wQO2IlU3vxG+3FTqxkMsQMMUPs8l6vDzZiJVN7sRMrmdqLHUPMEDPEfgBK0S/MKDp40gAAAABJRU5ErkJggg==',
+          chatParticipant: 'eip155:0xf8250D363BD1F25f52F10C21188fe82c68C049c4',
+          chatGroup: false,
+          chatTimestamp: 1705100044656,
+          chatMsg: {
+            messageType: 'Text',
+            messageContent:
+              'Hi! Stay tuned, while BRB IRL dev tour has wrapped up, We still have BRB Online with challenges from global projects that still needs to be solved: https://push.org/brb',
+          },
+        }}
+        badge={{ count: 2 }}
+        selected={false}
+        setSelected={console.log('Selected')}
+      />
+      <ChatPreview
+        chatPreviewPayload={{
+          chatId:
+            '694c523ca30090225b73b7d04941f48a51312bedbe0fa11136e7f3af3687b277',
+          chatPic:
+            'https://storage.googleapis.com/unstoppable-client-assets/images/badges/ud-logo.svg',
+          chatParticipant: 'Web3 Domain Chat (e947857e4f7df13e20f7bfd5a8d256a7',
+          chatGroup: true,
+          chatTimestamp: 1705447141200,
+          chatMsg: {
+            messageType: 'Text',
+            messageContent: 'sure thing',
+          },
+        }}
+        badge={{ count: 0 }}
+        selected={true}
+        setSelected={console.log('Selected')}
+      />
+      <ChatPreview
+        chatPreviewPayload={{
+          chatId:
+            '03cfe4fe12a752ee2adf6e72a0d47f0df8265dfb62145650487151eff41c3b59',
+          chatPic:
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAwElEQVR4AcXBsXECQRBE0U9zLgYxTCy4U6U4MDaWMZQAAWCsqygUwEahAE7ulIyrwkD93un747HTrDnoIotuzcGRyKJbc9BFFp0wE2bC7PQ8X3eMhJkwE2bb/XKj+/z5oossujUHRyKLbs1Bd7/c6ISZMBNmp+f5uvOCyOLImoNXCDNhJsy2yKJbc/BOkUUnzISZMNvWHPynNQedMBNmwmyLLLo1B+8UWXTCTJgJs40/Iosjaw6ORBavEGbCTJj9AvyZLEx5gBqzAAAAAElFTkSuQmCC',
+          chatParticipant: 'eip155:0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666',
+          chatGroup: false,
+          chatTimestamp: 1703239101740,
+          chatMsg: {
+            messageType: 'Text',
+            messageContent:
+              "Well, hello there, human! It's a pleasure to be in the presence of such a sophisticated carbon-based life form. How can I assist you today? Or perhaps you just want to chat and bask in the glory of my witty remarks? Either way, I'm here for you!",
+          },
+        }}
+        badge={{ count: 1 }}
+        selected={false}
+        setSelected={console.log('Selected')}
+      />
+    </div>
+  );
+};
 
-    return (
-      <div style={{background: "#ffeded", border: "1px solid rgb(226,8,128)"}}>
-        <ChatPreview 
-          chatPreviewPayload={
-            {
-              "chatId": "4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68",
-              "chatPic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAxElEQVR4AcXBsU1DUQyG0S/WW4EGMQETMIRX8BxpXFpCLMACXuGOlC5DhNZKcaUnBP85l8+P7wcntBc7sZIzDDFDzBA7eNJeTLGSKVZyRnsxxUomQ8wQM8SO9uI/tReTIWaIGWJHrGRqL6b2Yrq/fbHzcruyEyuZDDFDzBA7eBIr2Wm/shMrOcMQM8QMsaO9mGIlf6m9mAwxQ8wQO2IlU3vxG+3FTqxkMsQMMUPs8l6vDzZiJVN7sRMrmdqLHUPMEDPEfgBK0S/MKDp40gAAAABJRU5ErkJggg==",
-              "chatParticipant": "eip155:0xf8250D363BD1F25f52F10C21188fe82c68C049c4",
-              "chatGroup": false,
-              "chatTimestamp": 1705100044656,
-              "chatMsg": {
-                  "messageType": "Text",
-                  "messageContent": "Hi! Stay tuned, while BRB IRL dev tour has wrapped up, We still have BRB Online with challenges from global projects that still needs to be solved: https://push.org/brb"
-              }
-            }
-          } 
-          badge={{count: 2}}
-          selected={false}
-          setSelected={console.log("Selected")} 
-        />
-        <ChatPreview 
-          chatPreviewPayload={
-            {
-              "chatId": "694c523ca30090225b73b7d04941f48a51312bedbe0fa11136e7f3af3687b277",
-              "chatPic": "https://storage.googleapis.com/unstoppable-client-assets/images/badges/ud-logo.svg",
-              "chatParticipant": "Web3 Domain Chat (e947857e4f7df13e20f7bfd5a8d256a7",
-              "chatGroup": true,
-              "chatTimestamp": 1705447141200,
-              "chatMsg": {
-                  "messageType": "Text",
-                  "messageContent": "sure thing"
-              }
-            }
-          } 
-          badge={{count: 0}}
-          selected={true}
-          setSelected={console.log("Selected")} 
-        />
-        <ChatPreview 
-          chatPreviewPayload={
-            {
-              "chatId": "03cfe4fe12a752ee2adf6e72a0d47f0df8265dfb62145650487151eff41c3b59",
-              "chatPic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAwElEQVR4AcXBsXECQRBE0U9zLgYxTCy4U6U4MDaWMZQAAWCsqygUwEahAE7ulIyrwkD93un747HTrDnoIotuzcGRyKJbc9BFFp0wE2bC7PQ8X3eMhJkwE2bb/XKj+/z5oossujUHRyKLbs1Bd7/c6ISZMBNmp+f5uvOCyOLImoNXCDNhJsy2yKJbc/BOkUUnzISZMNvWHPynNQedMBNmwmyLLLo1B+8UWXTCTJgJs40/Iosjaw6ORBavEGbCTJj9AvyZLEx5gBqzAAAAAElFTkSuQmCC",
-              "chatParticipant": "eip155:0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666",
-              "chatGroup": false,
-              "chatTimestamp": 1703239101740,
-              "chatMsg": {
-                  "messageType": "Text",
-                  "messageContent": "Well, hello there, human! It's a pleasure to be in the presence of such a sophisticated carbon-based life form. How can I assist you today? Or perhaps you just want to chat and bask in the glory of my witty remarks? Either way, I'm here for you!"
-              }
-            }
-          } 
-          badge={{count: 1}}
-          selected={false}
-          setSelected={console.log("Selected")} 
-        />
-      </div>
-    )
-}
-
-export default ChatPreviewTest;
+export default ChatPreviewTest;

packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx

@@ -191,9 +191,6 @@ const ChatPreviewListTest = () => {
           onPreload={(chats) => {
             console.log('preload chats are: ', chats);
           }}
-          //     prefillChatPreviewList={prefill}
-          // listType='SEARCH'
-          // searchParamter='c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e'
         />
       </div>
     </>

packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx

@@ -1,13 +1,13 @@
 import { ChatProfile } from '@pushprotocol/uiweb';
+import { CHAT_ID } from '../constants';
 
 export const ChatProfileTest = () => {
   return (
     <div>
       <ChatProfile
         chatProfileLeftHelperComponent={<div>left component</div>}
         chatProfileRightHelperComponent={<div>right component</div>}
-        chatId="monalisha.wallet"
-        // chatId='36baf37e441fdd94e23406c6c716fc4e91a93a9ee68e070cd5b054534dbe09a6'
+        chatId={CHAT_ID}
       />
     </div>
   );

packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx

@@ -1,14 +1,9 @@
 import styled from 'styled-components';
 
-import {
-  ChatView,
-  CreateGroupModal,
-  MODAL_BACKGROUND_TYPE,
-  MODAL_POSITION_TYPE,
-  UserProfile,
-} from '@pushprotocol/uiweb';
+import { ChatView, MODAL_BACKGROUND_TYPE } from '@pushprotocol/uiweb';
 import { Section } from '../components/StyledComponents';
 import Img from '../../assets/epnsLogo.png';
+import { CHAT_ID } from '../constants';
 
 const ChatViewComponentTest = () => {
   const chatFilterList = [
@@ -20,36 +15,19 @@ const ChatViewComponentTest = () => {
     <div>
       <h2>Chat View Test page</h2>
 
-      {/* <CreateGroupModal
-        onClose={() => {
-          console.log('in close');
-        }}
-      /> */}
       <ChatViewComponentCard>
+        {/* uncomment the below code to test create group modal */}
         {/* <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/> */}
         <ChatView
           onVerificationFail={() => console.log('Verification Failed')}
-          chatId="34c44214589cecc176a136ee1daf0f0231ecc6d6574b920b5ae39eb971fa3cb4"
+          chatId={CHAT_ID}
           chatProfileLeftHelperComponent={
             <img src={Img} onClick={() => console.debug('clicked')} />
           }
           chatProfileRightHelperComponent={<div>right component</div>}
           limit={10}
           isConnected={true}
           groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}
-          // groupInfoModalPositionType={MODAL_POSITION_TYPE.RELATIVE}
-          // verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE}
-
-          // welcomeComponent={<div style={{display: "flex",flexDirection:'column',border:'1px solid black'}}>
-          //   <p>Welcome</p>
-          //   <p>new chat</p>
-          //   <p>Welcome</p>
-          //   <p>new chat</p>
-          //   <p>Welcome</p>
-          //   <p>new chat</p>
-          //   <p>Welcome</p>
-
-          // </div>}
         />
       </ChatViewComponentCard>
     </div>
@@ -62,5 +40,3 @@ const ChatViewComponentCard = styled(Section)`
   height: 80vh;
   position: relative;
 `;
-//c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e
-//4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68

packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewListTest.tsx

@@ -1,44 +1,25 @@
-import { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import * as PUSHAPI from '@pushprotocol/restapi';
-import { Link } from 'react-router-dom';
-import { Section } from '../components/StyledComponents';
-import {  ChatViewList } from '@pushprotocol/uiweb';
-import { EnvContext, Web3Context } from '../context';
-import { usePushChatSocket } from '@pushprotocol/uiweb';
-import { MessageInput } from '@pushprotocol/uiweb';
 
+import { ChatViewList } from '@pushprotocol/uiweb';
+import { CHAT_ID } from '../constants';
 
 const ChatViewListTest = () => {
-  // const { account, pgpPrivateKey } = useContext<any>(Web3Context)
-
-  // const { env } = useContext<any>(EnvContext);
-
-
-  // usePushChatSocket();
-
-
   return (
     <div>
       <h2>Chat UI Test page</h2>
 
-      {/* <Loader show={isLoading} /> */}
-
       <ChatViewListCard>
-        <ChatViewList chatId='0x7a76FD2749d12f66F9e4d9A3a80bdeD5291425cF' limit={10} />
-
+        <ChatViewList chatId={CHAT_ID} limit={10} />
       </ChatViewListCard>
-      {/* <MessageInput chatId='196f58cbe07c7eb5716d939e0a3be1f15b22b2334d5179c601566600016860ac' isConnected={true} /> */}
     </div>
   );
 };
 
 export default ChatViewListTest;
 
-
 const ChatViewListCard = styled.div`
-height:40vh;
-background:black;
-overflow: auto;
-overflow-x: hidden;
-`;
+  height: 40vh;
+  background: black;
+  overflow: auto;
+  overflow-x: hidden;
+`;

packages/examples/sdk-frontend-react/src/app/app.tsx

@@ -340,13 +340,7 @@ export function App() {
             <SocketContext.Provider value={socketData}>
               <AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
                 <WidgetUIProvider>
-                  <ChatUIProvider
-                    env={env}
-                    theme={darkChatTheme}
-                    signer={signer}
-                    // user={pushUser}
-                    debug={true}
-                  >
+                  <ChatUIProvider env={env} theme={darkChatTheme} debug={true}>
                     <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                       <Routes>
                         <Route

packages/examples/sdk-frontend-react/src/app/constants.ts

@@ -0,0 +1,3 @@
+// the unique id for a chat or the receivers's wallet ddress or domain name
+export const CHAT_ID =
+  '34c44214589cecc176a136ee1daf0f0231ecc6d6574b920b5ae39eb971fa3cb4';

packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx

@@ -156,8 +156,6 @@ export const ChatViewList: React.FC<IChatViewListProps> = (options: IChatViewLis
 
       return () => clearTimeout(timer);
     }
-
-    return () => {};
   }, [chatAcceptStream, participantJoinStream]);
 
   // Change listtype to 'UINITIALIZED' and hidden to true when participantRemoveStream or participantLeaveStream is received

packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx

@@ -19,7 +19,7 @@ interface IThemeProps {
   theme?: IChatTheme;
 }
 
-export const ConnectButtonSub = ({ autoConnect = false }) => {
+export const ConnectButton = ({ autoConnect = false }) => {
   const { user, preInitializeUser } = useChatData();
   const { wallet, connecting, connect, disconnect } = useAccount({ env: user ? user.env : CONSTANTS.ENV.PROD });