fix icon

backend/onyx/server/query_and_chat/chat_backend.py

@@ -182,6 +182,12 @@ def get_chat_session(
         description=chat_session.description,
         persona_id=chat_session.persona_id,
         persona_name=chat_session.persona.name if chat_session.persona else None,
+        persona_icon_color=chat_session.persona.icon_color
+        if chat_session.persona
+        else None,
+        persona_icon_shape=chat_session.persona.icon_shape
+        if chat_session.persona
+        else None,
         current_alternate_model=chat_session.current_alternate_model,
         messages=[
             translate_db_message_to_chat_message_detail(msg) for msg in session_messages

backend/onyx/server/query_and_chat/models.py

@@ -225,6 +225,8 @@ class ChatSessionDetailResponse(BaseModel):
     description: str | None
     persona_id: int | None = None
     persona_name: str | None
+    persona_icon_color: str | None
+    persona_icon_shape: int | None
     messages: list[ChatMessageDetail]
     time_created: datetime
     shared_status: ChatSessionSharedStatus

web/src/app/chat/interfaces.ts

@@ -102,6 +102,8 @@ export interface BackendChatSession {
   description: string;
   persona_id: number;
   persona_name: string;
+  persona_icon_color: string | null;
+  persona_icon_shape: number | null;
   messages: BackendMessage[];
   time_created: string;
   shared_status: ChatSessionSharedStatus;

web/src/app/chat/shared/[chatId]/page.tsx

@@ -13,8 +13,8 @@ import {
   FetchAssistantsResponse,
   fetchAssistantsSS,
 } from "@/lib/assistants/fetchAssistantsSS";
-import FunctionalHeader from "@/components/chat_search/Header";
 import { defaultPersona } from "@/app/admin/assistants/lib";
+import { constructMiniFiedPersona } from "@/lib/assistantIconUtils";
 
 async function getSharedChat(chatId: string) {
   const response = await fetchSS(
@@ -34,7 +34,6 @@ export default async function Page(props: {
     getAuthTypeMetadataSS(),
     getCurrentUserSS(),
     getSharedChat(params.chatId),
-    fetchAssistantsSS(),
   ];
 
   // catch cases where the backend is completely unreachable here
@@ -50,8 +49,6 @@ export default async function Page(props: {
   const authTypeMetadata = results[0] as AuthTypeMetadata | null;
   const user = results[1] as User | null;
   const chatSession = results[2] as BackendChatSession | null;
-  const assistantsResponse = results[3] as FetchAssistantsResponse | null;
-  const [availableAssistants, error] = assistantsResponse ?? [[], null];
 
   const authDisabled = authTypeMetadata?.authType === "disabled";
   if (!authDisabled && !user) {
@@ -61,17 +58,13 @@ export default async function Page(props: {
   if (user && !user.is_verified && authTypeMetadata?.requiresVerification) {
     return redirect("/auth/waiting-on-verification");
   }
-  // prettier-ignore
-  const persona: Persona =
-    chatSession?.persona_id && availableAssistants?.length
-      ? (availableAssistants.find((p) => p.id === chatSession.persona_id) ??
-        defaultPersona)
-      : (availableAssistants?.[0] ?? defaultPersona);
-  console.log("chatSession", chatSession);
-  if (chatSession && chatSession.messages) {
-    chatSession.messages.forEach((message, index) => {
-      console.log(`Message ${index} context_docs:`, message.context_docs);
-    });
-  }
+
+  const persona: Persona = constructMiniFiedPersona(
+    chatSession?.persona_icon_color ?? null,
+    chatSession?.persona_icon_shape ?? null,
+    chatSession?.persona_name ?? "",
+    chatSession?.persona_id ?? 0
+  );
+
   return <SharedChatDisplay chatSession={chatSession} persona={persona} />;
 }

web/src/components/assistants/AssistantIcon.tsx

@@ -33,7 +33,7 @@ export function AssistantIcon({
 
   return (
     <CustomTooltip
-      disabled={disableToolip}
+      disabled={disableToolip || !assistant.description}
       showTick
       line
       wrap

web/src/lib/assistantIconUtils.tsx

@@ -1,3 +1,5 @@
+import { Persona } from "@/app/admin/assistants/interfaces";
+
 export interface GridShape {
   encodedGrid: number;
   filledSquares: number;
@@ -45,7 +47,9 @@ export function generateRandomIconShape(): GridShape {
       if (grid[row][col]) {
         const x = col * 12;
         const y = row * 12;
-        path += `M ${x} ${y} L ${x + 12} ${y} L ${x + 12} ${y + 12} L ${x} ${y + 12} Z `;
+        path += `M ${x} ${y} L ${x + 12} ${y} L ${x + 12} ${y + 12} L ${x} ${
+          y + 12
+        } Z `;
       }
     }
   }
@@ -94,7 +98,9 @@ export function createSVG(
       if (grid[row][col]) {
         const x = col * 12;
         const y = row * 12;
-        path += `M ${x} ${y} L ${x + 12} ${y} L ${x + 12} ${y + 12} L ${x} ${y + 12} Z `;
+        path += `M ${x} ${y} L ${x + 12} ${y} L ${x + 12} ${y + 12} L ${x} ${
+          y + 12
+        } Z `;
       }
     }
   }
@@ -132,3 +138,32 @@ function shuffleArray(array: any[]) {
     [array[i], array[j]] = [array[j], array[i]];
   }
 }
+
+// This is used for rendering a persona in the shared chat display
+export const constructMiniFiedPersona = (
+  assistant_icon_color: string | null,
+  assistant_icon_shape: number | null,
+  name: string,
+  id: number
+): Persona => {
+  return {
+    id,
+    name,
+    icon_color: assistant_icon_color ?? undefined,
+    icon_shape: assistant_icon_shape ?? undefined,
+    is_visible: true,
+    is_public: true,
+    display_priority: 0,
+    description: "",
+    document_sets: [],
+    prompts: [],
+    tools: [],
+    search_start_date: null,
+    owner: null,
+    starter_messages: null,
+    builtin_persona: false,
+    is_default_persona: false,
+    users: [],
+    groups: [],
+  };
+};