Feat/chat components

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

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { Section } from '../components/StyledComponents';
+import Loader from '../components/Loader';
+
+const ChatUITest = () => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const NavMenu = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    justify-content: center;
+
+    @media only screen and (max-width: 900px) {
+      flex-direction: column;
+    }
+  `;
+
+  return (
+    <div>
+      <h2>Chat UI Test page</h2>
+
+      <Loader show={isLoading} />
+
+      <Section>
+        <NavMenu>
+          <Link to="/messageBubble" className="nav-button">
+            CHAT BUBBLE
+          </Link>
+          <Link to="/messageList" className="nav-button">
+            MESSAGE LIST
+          </Link>
+        </NavMenu>
+      </Section>
+    </div>
+  );
+};
+
+export default ChatUITest;

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

@@ -0,0 +1,58 @@
+import { MessageBubble } from "@pushprotocol/uiweb";
+import { useEffect, useContext, useState } from "react";
+import { EnvContext, Web3Context } from "../context";
+import * as PUSHAPI from "@pushprotocol/restapi"
+import { ENV } from "@pushprotocol/uiweb";
+import { IMessagePayload } from "@pushprotocol/uiweb";
+
+export const MessageBubbles = () => {
+    const { env } = useContext<any>(EnvContext);
+
+    const { library, account } = useContext<any>(Web3Context)
+    const [message, setMessage] = useState<IMessagePayload[]>([])
+    const [ conversationHash , setConversationHash] = useState<string>('');
+
+    const librarySigner = library.getSigner()
+
+    const fetchMessage = async () => {
+        const user = await PUSHAPI.user.get({
+            account: account
+        })
+        const pgpPrivateKey = await PUSHAPI.chat.decryptPGPKey({
+            encryptedPGPPrivateKey: user.encryptedPrivateKey,
+            signer: librarySigner,
+            env: env
+        })
+
+        const ConversationHash = await PUSHAPI.chat.conversationHash({
+            account: `eip155:${account}`,
+            conversationId: '24b029b8e07e60291bf9d8c0c48ff993fa1e0a99105459f7404c425c92e91bac',
+            env: env
+        });
+        setConversationHash(ConversationHash.threadHash);
+        if(ConversationHash?.threadHash){
+        const chatHistory = await PUSHAPI.chat.history({
+            threadhash: conversationHash,
+            account: account,
+            limit: 10,
+            toDecrypt: true,
+            pgpPrivateKey: pgpPrivateKey ? pgpPrivateKey : undefined,
+            env: env
+        })
+        setMessage(chatHistory)
+        console.log(chatHistory)
+    }
+    }
+
+    useEffect(() => {
+        fetchMessage()
+    }, [])
+
+    return (
+        <div style={{ height: "300px", width: "500px" }}>
+            {message.map((msg) => (
+                <MessageBubble chat={msg} />
+            ))}
+        </div>
+    )
+}

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

@@ -0,0 +1,50 @@
+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 { MessageList } from '@pushprotocol/uiweb';
+import { EnvContext, Web3Context } from '../context';
+import { usePushChatSocket } from '@pushprotocol/uiweb';
+
+const MessageListTest = () => {
+  const { account } = useContext<any>(Web3Context)
+
+  const { env } = useContext<any>(EnvContext);
+  const [ conversationHash , setConversationHash] = useState<string>('');
+
+  const fetchConversationHash = async() =>{
+    const ConversationHash = await PUSHAPI.chat.conversationHash({
+      account: `eip155:${account}`,
+      conversationId: '24b029b8e07e60291bf9d8c0c48ff993fa1e0a99105459f7404c425c92e91bac',
+      env: env
+  });
+  setConversationHash(ConversationHash.threadHash);
+  }
+console.log(conversationHash)
+ useEffect(()=>{
+  fetchConversationHash();
+ })
+
+ usePushChatSocket();
+  return (
+    <div>
+      <h2>Chat UI Test page</h2>
+
+      {/* <Loader show={isLoading} /> */}
+
+      <MessageListCard    >
+
+      <MessageList conversationHash={conversationHash} limit={10}/>
+
+      </MessageListCard>
+    </div>
+  );
+};
+
+export default MessageListTest;
+
+
+const MessageListCard = styled(Section)`
+height:40vh;
+`;

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

@@ -30,14 +30,19 @@ export const ChatWidgetTest = () => {
     console.log('in here widget');
   };
 
+
   return (
-    <ChatAndNotificationWidget
-      account={account}
-      env={env}
-      decryptedPgpPvtKey={pvtKey}
-      signer={librarySigner}
-      // activeTab={PUSH_TABS.APP_NOTIFICATIONS}
-      activeChat="0x3Cf13f6d91F50dca6eAD7356b78482c54CDd95ff"
-    />
+
+    <>
+      <ChatAndNotificationWidget
+        account={account}
+        env={env}
+        decryptedPgpPvtKey={pvtKey}
+        signer={librarySigner}
+        // activeTab={PUSH_TABS.APP_NOTIFICATIONS}
+        activeChat="0x3Cf13f6d91F50dca6eAD7356b78482c54CDd95ff"
+      />
+    </>
+
   );
 };