implementing web conversation thread

app/client/web/package.json

@@ -28,6 +28,7 @@
     "react": "18.3.1",
     "react-dom": "18.2.0",
     "react-easy-crop": "^5.0.8",
+    "react-resize-detector": "^11.0.1",
     "react-router-dom": "^6.26.0",
     "redaxios": "^0.5.1",
     "ts-jest": "29.0.2",

app/client/web/src/conversation/Conversation.tsx

@@ -15,10 +15,14 @@ export function Conversation() {
   };
 
   const topics = state.topics.map((topic, idx) => {
+    const card = state.cards.get(topic.guid) || null;
+    const profile = state.profile?.guid === topic.guid ? state.profile : null;
     return (
       <Message
         key={idx}
         topic={topic}
+        card={card}
+        profile={profile}
       />
     )
   })

app/client/web/src/conversation/useConversation.hook.ts

@@ -1,7 +1,7 @@
 import { useState, useContext, useEffect, useRef } from 'react'
 import { AppContext } from '../context/AppContext'
 import { DisplayContext } from '../context/DisplayContext'
-import { Focus, FocusDetail, Topic, AssetSource, HostingMode, TransformType } from 'databag-client-sdk'
+import { Focus, FocusDetail, Topic, Profile, Card, AssetSource, HostingMode, TransformType } from 'databag-client-sdk'
 import { ContextType } from '../context/ContextType'
 
 const img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII'
@@ -13,6 +13,8 @@ export function useConversation() {
     focus: null as Focus | null,
     layout: null,
     topics: [] as Topic[],
+    profile: null as Profile | null,
+    cards: new Map<string, Card>(),
   })
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -27,7 +29,8 @@ export function useConversation() {
 
   useEffect(() => {
     const focus = app.state.focus;
-    if (focus) {
+    const { contact, identity } = app.state.session;
+    if (focus && contact && identity) {
       const setTopics = (topics: Topic[]) => {
         const sorted = topics.sort((a, b) => {
           if (a.created < b.created) {
@@ -40,14 +43,28 @@ export function useConversation() {
         });
         updateState({ topics: sorted });
       }
+      const setCards = (cards: Card[]) => {
+        const contacts = new Map<string, Card>();
+        cards.forEach(card => {
+          contacts.set(card.guid, card);
+        });
+        updateState({ cards: contacts });
+      }
+      const setProfile = (profile: Profile) => {
+        updateState({ profile });
+      }
       const setDetail = (focused: { cardId: string | null, channelId: string, detail: FocusDetail | null }) => {
         console.log(focused);
       }
       focus.addTopicListener(setTopics);
       focus.addDetailListener(setDetail);
+      contact.addCardListener(setCards);
+      identity.addProfileListener(setProfile);
       return () => {
         focus.removeTopicListener(setTopics);
         focus.removeDetailListener(setDetail);
+        contact.removeCardListener(setCards);
+        identity.removeProfileListener(setProfile);
       }
     }
   }, [app.state.focus]);

app/client/web/src/message/Message.tsx

@@ -1,5 +1,6 @@
-import { Topic } from 'databag-client-sdk';
+import { Topic, Card, Profile } from 'databag-client-sdk';
 
-export function Message({ topic }: { topic: Topic}) {
+export function Message({ topic, card, profile }: { topic: Topic, card: Card | null, profile: Profile | null }) {
+  console.log(card, profile);
   return <div>CREATED: { topic.created }</div>
 }

app/client/web/yarn.lock

@@ -3753,6 +3753,11 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -4222,6 +4227,13 @@ react-remove-scroll@^2.6.0:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-resize-detector@^11.0.1:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-11.0.1.tgz#70684958ae82bc0deb240d133a1ee440e0624532"
+  integrity sha512-1Tdgu6Ou3vI3RQD+o2/kTvDibb4NRe7Oh83hIjNNEXb6WKKCQT99VQlh3Xlbdq2HtkUoFEMrgMMKkYI83YbD7Q==
+  dependencies:
+    lodash "^4.17.21"
+
 react-router-dom@^6.26.0:
   version "6.28.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.28.0.tgz#f73ebb3490e59ac9f299377062ad1d10a9f579e6"

app/sdk/src/identity.ts

@@ -91,7 +91,7 @@ export class IdentityModule implements Identity {
     }
   }
 
-  public setProfile() {
+  public setProfile(): Profile {
     const { guid, handle, name, description, location, image, revision, seal, version, node } = this.profile;
     return {
       guid,
@@ -100,6 +100,7 @@ export class IdentityModule implements Identity {
       description,
       location,
       imageSet: Boolean(image),
+      imageUrl: this.imageUrl,
       version,
       node,
       sealSet: Boolean(seal),