Client-side conversation participants (#1935)

front/components/assistant/conversation/ConversationParticipants.tsx

@@ -0,0 +1,83 @@
+import { Avatar } from "@dust-tt/sparkle";
+import React from "react";
+
+import { ConversationType } from "@app/types/assistant/conversation";
+
+export function ConversationParticipants({
+  conversation,
+}: {
+  conversation: ConversationType;
+}) {
+  type UserParticipant = {
+    username: string;
+    fullName: string | null;
+    pictureUrl: string | null;
+  };
+  type AgentParticipant = {
+    configurationId: string;
+    name: string;
+    pictureUrl: string;
+  };
+  const userParticipantsMap = new Map<string, UserParticipant>();
+  const agentParticipantsMap = new Map<string, AgentParticipant>();
+  conversation.content.map((messages) => {
+    messages.map((m) => {
+      if (m.type === "user_message") {
+        const key = `${m.context.username}-${m.context.profilePictureUrl}`;
+        if (!userParticipantsMap.has(key)) {
+          userParticipantsMap.set(key, {
+            username: m.context.username,
+            fullName: m.context.fullName,
+            pictureUrl: m.context.profilePictureUrl,
+          });
+        }
+      } else if (m.type === "agent_message") {
+        const key = `${m.configuration.sId}`;
+        if (!agentParticipantsMap.has(key)) {
+          agentParticipantsMap.set(key, {
+            configurationId: m.configuration.sId,
+            name: m.configuration.name,
+            pictureUrl: m.configuration.pictureUrl,
+          });
+        }
+      }
+    });
+  });
+  const userParticipants = Array.from(userParticipantsMap.values());
+  const agentParticipants = Array.from(agentParticipantsMap.values());
+
+  return (
+    <div className="flex gap-6">
+      <Avatar.Stack
+        size="sm"
+        nbMoreItems={
+          agentParticipants.length > 4 ? agentParticipants.length - 4 : 0
+        }
+      >
+        {agentParticipants.slice(0, 4).map((agent) => (
+          <Avatar
+            name={agent.name}
+            visual={agent.pictureUrl}
+            size="md"
+            key={agent.configurationId}
+          />
+        ))}
+      </Avatar.Stack>
+      <Avatar.Stack
+        size="sm"
+        nbMoreItems={
+          userParticipants.length > 4 ? userParticipants.length - 4 : 0
+        }
+      >
+        {userParticipants.slice(0, 4).map((user, i) => (
+          <Avatar
+            name={user.fullName || user.username}
+            visual={user.pictureUrl}
+            size="md"
+            key={i}
+          />
+        ))}
+      </Avatar.Stack>
+    </div>
+  );
+}

front/components/assistant/conversation/ConversationTitle.tsx

@@ -1,6 +1,5 @@
 import {
   ArrowUpOnSquareIcon,
-  Avatar,
   Button,
   CheckIcon,
   ClipboardCheckIcon,
@@ -14,6 +13,7 @@ import {
 import React, { MouseEvent, useRef, useState } from "react";
 import { useSWRConfig } from "swr";
 
+import { ConversationParticipants } from "@app/components/assistant/conversation/ConversationParticipants";
 import { useConversation } from "@app/lib/swr";
 import { WorkspaceType } from "@app/types/user";
 
@@ -161,46 +161,10 @@ export function ConversationTitle({
           />
         )}
       </div>
-      <div className="flex items-center gap-6">
-        <div className="hidden lg:flex">
-          <Avatar.Stack
-            size="sm"
-            nbMoreItems={
-              conversation.participants.agents.length > 4
-                ? conversation.participants.agents.length - 4
-                : 0
-            }
-          >
-            {conversation.participants.agents.slice(0, 4).map((agent) => (
-              <Avatar
-                name={agent.name}
-                visual={agent.pictureUrl}
-                size="md"
-                key={agent.configurationId}
-              />
-            ))}
-          </Avatar.Stack>
-        </div>
-        <div className="hidden lg:flex">
-          <Avatar.Stack
-            size="sm"
-            nbMoreItems={
-              conversation.participants.users.length > 4
-                ? conversation.participants.users.length - 4
-                : 0
-            }
-          >
-            {conversation.participants.users.slice(0, 4).map((user, i) => (
-              <Avatar
-                name={user.fullName || user.username}
-                visual={user.pictureUrl}
-                size="md"
-                key={i}
-              />
-            ))}
-          </Avatar.Stack>
+      <div className="flex items-center">
+        <div className="hidden pr-6 lg:flex">
+          <ConversationParticipants conversation={conversation} />
         </div>
-
         <Button.List>
           <div className="hidden lg:flex">
             {onDelete && (

front/lib/api/assistant/conversation.ts

@@ -82,7 +82,6 @@ export async function createConversation(
     title: conversation.title,
     visibility: conversation.visibility,
     content: [],
-    participants: { users: [], agents: [] },
   };
 }
 
@@ -401,23 +400,11 @@ export async function getConversation(
     ],
   });
 
-  const userParticipants = new Map();
-  const agentParticipants = new Map();
-
   const render = await Promise.all(
     messages.map((message) => {
       return (async () => {
         if (message.userMessage) {
           const m = await renderUserMessage(message, message.userMessage);
-
-          const key = `${m.context.username}-${m.context.profilePictureUrl}`;
-          if (!userParticipants.has(key)) {
-            userParticipants.set(key, {
-              username: m.context.username,
-              fullName: m.context.fullName,
-              pictureUrl: m.context.profilePictureUrl,
-            });
-          }
           return { m, rank: message.rank, version: message.version };
         }
         if (message.agentMessage) {
@@ -426,14 +413,6 @@ export async function getConversation(
             agentMessage: message.agentMessage,
             messages,
           });
-          const configurationId = m.configuration.sId;
-          if (!agentParticipants.has(configurationId)) {
-            agentParticipants.set(configurationId, {
-              configurationId: configurationId,
-              name: m.configuration.name,
-              pictureUrl: m.configuration.pictureUrl,
-            });
-          }
           return { m, rank: message.rank, version: message.version };
         }
         throw new Error("Unreachable: message must be either user or agent");
@@ -468,10 +447,6 @@ export async function getConversation(
     title: conversation.title,
     visibility: conversation.visibility,
     content,
-    participants: {
-      users: Array.from(userParticipants.values()),
-      agents: Array.from(agentParticipants.values()),
-    },
   };
 }
 

front/types/assistant/conversation.ts

@@ -135,10 +135,6 @@ export type ConversationType = {
   title: string | null;
   visibility: ConversationVisibility;
   content: (UserMessageType[] | AgentMessageType[])[];
-  participants: {
-    users: UserParticipant[];
-    agents: AgentParticipant[];
-  };
 };
 
 export type UserParticipant = {