Feat/chat components

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

@@ -0,0 +1,15 @@
+import { ChatProfile } from "@pushprotocol/uiweb";
+
+export const ChatProfileTest = () => {
+
+    return (
+        <div>
+            <ChatProfile 
+                // chatId='0x455E5AA18469bC6ccEF49594645666C587A3a71B'
+            chatId='24b029b8e07e60291bf9d8c0c48ff993fa1e0a99105459f7404c425c92e91bac'
+                // chatId='36baf37e441fdd94e23406c6c716fc4e91a93a9ee68e070cd5b054534dbe09a6'
+                style="Info"
+             />
+        </div>
+    )
+}

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

@@ -26,11 +26,17 @@ const ChatUITest = () => {
 
       <Section>
         <NavMenu>
+        <Link to="/ChatProfile" className="nav-button">
+            CHAT PROFILE
+          </Link>
           <Link to="/messageBubble" className="nav-button">
             CHAT BUBBLE
           </Link>
           <Link to="/messageList" className="nav-button">
-            MESSAGE LIST
+           CHAT VIEW LIST
+          </Link>
+          <Link to="/messageContainer" className="nav-button">
+            CHAT VIEW COMPONENT
           </Link>
         </NavMenu>
       </Section>

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

@@ -1,16 +1,16 @@
-import { MessageBubble } from "@pushprotocol/uiweb";
+import { ChatViewBubble } 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 = () => {
+export const ChatViewBubbles = () => {
     const { env } = useContext<any>(EnvContext);
 
     const { library, account } = useContext<any>(Web3Context)
     const [message, setMessage] = useState<IMessagePayload[]>([])
-    const [ conversationHash , setConversationHash] = useState<string>('');
+    const [conversationHash, setConversationHash] = useState<string>('');
 
     const librarySigner = library.getSigner()
 
@@ -26,32 +26,32 @@ export const MessageBubbles = () => {
 
         const ConversationHash = await PUSHAPI.chat.conversationHash({
             account: `eip155:${account}`,
-            conversationId: '24b029b8e07e60291bf9d8c0c48ff993fa1e0a99105459f7404c425c92e91bac',
+            conversationId: '831b1d93f36fa2fce6c3d8c7c41c53335c82ad13cbe05478579af235f10716dc',
             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)
-    }
+        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" }}>
+        <div style={{ height: "350px", width: "500px" }}>
             {message.map((msg) => (
-                <MessageBubble chat={msg} />
+                <ChatViewBubble chat={msg} />
             ))}
         </div>
     )

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

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+import { Section } from '../components/StyledComponents';
+
+import { ChatViewComponent } from '@pushprotocol/uiweb';
+
+
+const ChatViewComponentTest = () => {
+
+
+
+  return (
+    <div>
+      <h2>Chat UI Test page</h2>
+
+      {/* <Loader show={isLoading} /> */}
+    <ChatViewComponentCard>
+
+      <ChatViewComponent chatId='0xCD0DAdAb45bAF9a06ce1279D1342EcC3F44845af' limit={10}/>
+      </ChatViewComponentCard>
+    </div>
+  );
+};
+
+export default ChatViewComponentTest;
+
+
+const ChatViewComponentCard = styled(Section)`
+height:60vh;
+`;

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

@@ -0,0 +1,39 @@
+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';
+
+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='0xe19c4b204a76db09697ea54c9182eba2195542aD' limit={10} />
+
+      </ChatViewListCard>
+      <MessageInput chatId='0xe19c4b204a76db09697ea54c9182eba2195542aD' isConnected={true} />
+    </div>
+  );
+};
+
+export default ChatViewListTest;
+
+
+const ChatViewListCard = styled(Section)`
+height:40vh;
+background:black;
+`;