Chat Preview List workable PoC

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "workbench.activityBar.orientation": "vertical"
+}

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

@@ -35,8 +35,7 @@ export const ChatSupportTest = () => {
     <SupportChat
 
       signer={librarySigner}
-      supportAddress="0x6269C363695c5E14447a1b3873d7Ae4Ddf6E6eF7"
-      apiKey="tAWEnggQ9Z.UaDBNjrvlJZx3giBTIQDcT8bKQo1O1518uF1Tea7rPwfzXv2ouV5rX9ViwgJUrXm"
+      supportAddress="richa.eth"
       env={env}
       greetingMsg="How can i help you?"
       theme={lightTheme}

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

@@ -0,0 +1,65 @@
+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>
+    )
+}
+
+export default ChatPreviewTest;

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

@@ -0,0 +1,53 @@
+import React, { useContext, useState } from 'react';
+import { Checkbox } from '../components/Checkbox';
+
+import { ChatPreviewList } from "@pushprotocol/uiweb";
+
+const ChatPreviewListTest = () => {
+  // define controls
+  const [chatRequests, setChatRequests] = useState<boolean>(false);
+  const [address, setAddress] = useState<string>();
+
+  // set controls
+  const handleChatRequestsCheckbox = () => {
+    setChatRequests(!chatRequests);
+  };
+
+  const handleAddressChange = (e: React.SyntheticEvent<HTMLElement>) => {
+    setAddress((e.target as HTMLInputElement).value);
+  };
+
+  return (
+    <>
+      <Checkbox
+        id=""
+        label="Fetch Chat Requests"
+        value={chatRequests}
+        onChange={handleChatRequestsCheckbox}
+      />
+      <p />
+      <label>Override Address</label>
+      <br />
+      <input
+        type="text"
+        onChange={handleAddressChange}
+        value={address}
+        style={{ width: 400, height: 30 }}
+      />
+      <hr />
+
+      <div style={{background: "#ffeded", border: "1px solid rgb(226,8,128)", height: "50vh"}}>
+        <ChatPreviewList 
+          listType={chatRequests ? "REQUESTS" : "CHATS"}
+          overrideAccount={address ? address : undefined}
+          onChatSelected={()=>console.log('hello onChatSelected')}
+          onUnreadCountChange={()=>console.log('hello onUnreadCountChange')}
+          // listType='SEARCH'
+          // searchParamter='fabio.eth'
+        />
+      </div>
+    </>
+  )
+}
+
+export default ChatPreviewListTest;

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

@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import styled from 'styled-components';
 import { Link } from 'react-router-dom';
-import { Section } from '../components/StyledComponents';
+import styled from 'styled-components';
 import Loader from '../components/Loader';
+import { Section } from '../components/StyledComponents';
 
 const ChatUITest = () => {
   const [isLoading, setIsLoading] = useState(false);
@@ -29,16 +29,21 @@ const ChatUITest = () => {
         <Link to="/ChatProfile" className="nav-button">
             CHAT PROFILE
           </Link>
-          <Link to="/messageBubble" className="nav-button">
+          <Link to="/ChatViewBubble" className="nav-button">
             CHAT BUBBLE
           </Link>
-          <Link to="/messageList" className="nav-button">
+          <Link to="/ChatViewList" className="nav-button">
            CHAT VIEW LIST
           </Link>
-          <Link to="/messageContainer" className="nav-button">
-            CHAT VIEW COMPONENT
+          <Link to="/ChatView" className="nav-button">
+            CHAT VIEW
+          </Link>
+          <Link to="/ChatPreview" className="nav-button">
+            CHAT PREVIEW
+          </Link>
+          <Link to="/ChatPreviewList" className="nav-button">
+            CHAT PREVIEW LIST
           </Link>
-
         </NavMenu>
       </Section>
     </div>

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

@@ -1,8 +1,7 @@
 import styled from 'styled-components';
 
+import { ChatView, CreateGroupModal, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from "@pushprotocol/uiweb";
 import { Section } from '../components/StyledComponents';
-import { CreateGroupModal, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from "@pushprotocol/uiweb";
-import { ChatView } from '@pushprotocol/uiweb';
 
 const ChatViewComponentTest = () => {
   const chatFilterList = [
@@ -12,20 +11,20 @@ const ChatViewComponentTest = () => {
 
   return (
     <div>
-      <h2>Chat UI Test page</h2>
+      <h2>Chat View Test page</h2>
       {/* <CreateGroupModal onClose={()=>{console.log('in close')}} /> */}
       <ChatViewComponentCard>
       {/* <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/> */}
 
         <ChatView 
-        onVerificationFail={() => console.log("BOIIII RETURNNNSSSSS")} 
-        chatId='0xf8250D363BD1F25f52F10C21188fe82c68C049c4' 
-        component={<div style={{height: "100px"}}><a href="https://github.com" target="_blank">Test</a></div>}
-        limit={10}
-         isConnected={true} 
-         groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}
-         groupInfoModalPositionType={MODAL_POSITION_TYPE.RELATIVE}
-         verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE}
+          onVerificationFail={() => console.log("Verification Failed")} 
+          chatId='0xf8250D363BD1F25f52F10C21188fe82c68C049c4' 
+          component={<div style={{display: "flex"}}><a href="https://github.com" target="_blank" rel="noreferrer">Custom Comp</a></div>}
+          limit={10}
+          isConnected={true} 
+          groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}
+          groupInfoModalPositionType={MODAL_POSITION_TYPE.RELATIVE}
+          verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE}
          />
       </ChatViewComponentCard>
     </div>