load orbis conversations

src/components/@shared/Orbis/FloatingChat/Conversation.module.css

@@ -1,6 +1,8 @@
 .conversationBox {
   padding: calc(var(--spacer) / 2);
   height: calc(100% - (var(--spacer) * 3.5));
+  display: flex;
+  flex-direction: column-reverse;
   overflow-y: auto;
 }
 
@@ -37,7 +39,7 @@
 }
 
 .chatBubbleItem {
-  display: block;
+  display: flex;
 }
 
 .chatBubbleItem + .chatBubbleItem {
@@ -50,23 +52,35 @@
   padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2.5);
   font-size: var(--font-size-base);
   border-radius: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
 }
 
 .chatPrimary {
+  margin-left: auto;
   color: var(--brand-white);
   background-color: var(--color-primary);
+  border-bottom-right-radius: 0px;
 }
 
 .chatDefault {
+  border-bottom-left-radius: 0px;
   background-color: var(--border-color);
 }
 
-.conversationRecipient .colBubble .chatBubbleItem .chatBubble {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0px;
+.conversationRecipient[data-sender='away']
+  + .conversationRecipient[data-sender='away']
+  .chatBubble {
+  border-bottom-left-radius: 0;
 }
 
-.conversationRecipient .colBubble .chatBubbleItem:first-of-type .chatBubble {
+/* .conversationRecipient .colBubble .chatBubbleItem .chatBubble {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0px;
+} */
+
+/* .conversationRecipient .colBubble .chatBubbleItem:first-of-type .chatBubble {
   border-top-left-radius: 1rem;
   border-bottom-left-radius: 0px;
 }
@@ -80,7 +94,7 @@
 .conversationSend .colBubble .chatBubbleItem:first-of-type .chatBubble {
   border-top-right-radius: 1rem;
   border-bottom-left-radius: 0px;
-}
+} */
 
 .chatStamp {
   font-size: var(--font-size-small);

src/components/@shared/Orbis/FloatingChat/Conversation.tsx

@@ -1,111 +1,119 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useOrbis } from '@context/Orbis'
 import styles from './Conversation.module.css'
 
+function RenderDecryptedMessage({
+  content
+}: {
+  content: OrbisPostContentInterface
+}) {
+  const { orbis } = useOrbis()
+  const [decrypted, setDecrypted] = useState(null)
+
+  useEffect(() => {
+    const decryptMessage = async (content: OrbisPostContentInterface) => {
+      const res = await orbis.decryptMessage(content)
+
+      if (res) {
+        console.log(res)
+      }
+
+      setDecrypted(res.result)
+    }
+    if (content) {
+      console.log(content)
+      decryptMessage(content)
+    }
+  }, [content])
+
+  return <>{decrypted}</>
+}
+
 export default function DmConversation({
-  messages,
-  orbis
+  messages
 }: {
   messages: OrbisPostInterface[]
-  orbis: OrbisInterface
 }) {
-  const dummyData = [
-    {
-      name: 'realdatawhale.eth',
-      image: '/apple-touch-icon.png',
-      chat1: 'Hello friend whats up!',
-      chat2:
-        'I have this exact same issue with using brave browser. It wont prompt for metamask instead asking to connect to brave wallet.',
-      chat3: 'Hello!',
-      chat4: 'Yeah thats weird!',
-      chat5:
-        'Did you update your profile within Orbis or with an app you built?!',
-      timestamp: 'Jul 27, 2022, 3:39 AM'
-    }
-  ]
-
-  const decryptMessage = async (content: OrbisPostContentInterface) => {
-    const res = await orbis.decryptMessage(content)
-
-    if (res) {
-      console.log(res)
-    }
-    return <>{res.result}</>
-  }
+  const { account } = useOrbis()
 
   useEffect(() => {
     console.log(messages)
-    messages.forEach((message) => {
-      decryptMessage(message?.content)
-    })
+    // messages.forEach((message) => {
+    //   decryptMessage(message?.content)
+    // })
   }, [messages])
 
   return (
-    <>
-      {messages.map((dm, index) => (
-        <div className={styles.conversationBox} key={index}>
-          <div className={styles.conversationRecipient}>
-            <div className={styles.colAvatar}>
-              {/* <img src={} alt="Avatar" className={styles.avatar}></img> */}
-            </div>
-            <div className={styles.colBubble}>
-              <div className={styles.chatBubbleItem}>
-                <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
-                  (<>{decryptMessage(dm.content)}</>)
-                </div>
-              </div>
-              <div className={styles.chatBubbleItem}>
-                <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
-                  {/* {dm.chat2} */}
-                </div>
-                <div className={styles.chatStamp}>{dm.timestamp}</div>
-              </div>
-            </div>
+    <div className={styles.conversationBox}>
+      {messages.map((message, index) => (
+        <div
+          className={styles.conversationRecipient}
+          key={index}
+          data-sender={
+            account?.did === message.creator_details.did ? 'home' : 'away'
+          }
+        >
+          <div className={styles.colAvatar}>
+            {/* <img src={} alt="Avatar" className={styles.avatar}></img> */}
           </div>
-          <div className={styles.conversationSend}>
-            <div className={styles.colBubble}>
-              <div className={styles.chatBubbleItem}>
-                <div className={`${styles.chatBubble} ${styles.chatDefault}`}>
-                  {/* {dm.chat3} */}
-                </div>
-              </div>
-              <div className={styles.chatBubbleItem}>
-                <div className={`${styles.chatBubble} ${styles.chatDefault}`}>
-                  {/* {dm.chat4} */}
-                </div>
-              </div>
-              <div className={styles.chatBubbleItem}>
-                <div className={`${styles.chatBubble} ${styles.chatDefault}`}>
-                  {/* {dm.chat5} */}
-                </div>
-                <div className={styles.chatStamp}>{dm.timestamp}</div>
-              </div>
-            </div>
-          </div>
-          <div className={styles.conversationRecipient}>
-            <div className={styles.colAvatar}>
-              {/* <img src={} alt="Avatar" className={styles.avatar}></img> */}
-            </div>
-            <div className={styles.colBubble}>
-              <div className={styles.chatBubbleItem}>
-                <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
-                  {/* {dm.chat1} */}
-                </div>
-              </div>
-              <div className={styles.chatBubbleItem}>
-                <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
-                  {/* {dm.chat4} */}
-                </div>
-              </div>
-              <div className={styles.chatBubbleItem}>
-                <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
-                  {/* {dm.chat2} */}
-                </div>
-                <div className={styles.chatStamp}>{dm.timestamp}</div>
+          <div className={styles.colBubble}>
+            <div className={styles.chatBubbleItem}>
+              <div
+                className={`${styles.chatBubble} ${
+                  account?.did === message.creator_details.did
+                    ? styles.chatPrimary
+                    : styles.chatDefault
+                }`}
+              >
+                <RenderDecryptedMessage content={message.content} />
               </div>
             </div>
           </div>
         </div>
       ))}
-    </>
+      {/* <div className={styles.conversationSend}>
+          <div className={styles.colBubble}>
+            <div className={styles.chatBubbleItem}>
+              <div className={`${styles.chatBubble} ${styles.chatDefault}`}>
+                {dm.chat3}
+              </div>
+            </div>
+            <div className={styles.chatBubbleItem}>
+              <div className={`${styles.chatBubble} ${styles.chatDefault}`}>
+                {dm.chat4}
+              </div>
+            </div>
+            <div className={styles.chatBubbleItem}>
+              <div className={`${styles.chatBubble} ${styles.chatDefault}`}>
+                {dm.chat5}
+              </div>
+              <div className={styles.chatStamp}>{dm.timestamp}</div>
+            </div>
+          </div>
+        </div>
+        <div className={styles.conversationRecipient}>
+          <div className={styles.colAvatar}>
+            <img src={} alt="Avatar" className={styles.avatar}></img>
+          </div>
+          <div className={styles.colBubble}>
+            <div className={styles.chatBubbleItem}>
+              <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
+                {dm.chat1}
+              </div>
+            </div>
+            <div className={styles.chatBubbleItem}>
+              <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
+                {dm.chat4}
+              </div>
+            </div>
+            <div className={styles.chatBubbleItem}>
+              <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
+                {dm.chat2}
+              </div>
+              <div className={styles.chatStamp}>{dm.timestamp}</div>
+            </div>
+          </div>
+        </div> */}
+    </div>
   )
 }