From ac04f554f1bbdc9b314718c3e931076edd20a65a Mon Sep 17 00:00:00 2001
From: Nuno Campos <nuno@langchain.dev>
Date: Thu, 18 Apr 2024 13:56:14 -0700
Subject: [PATCH] Improve chat list: show bot name

---
 frontend/src/App.tsx                 |  1 +
 frontend/src/components/ChatList.tsx | 25 +++++++++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 514d3588..e864008f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -134,6 +134,7 @@ function App(props: { edit?: boolean }) {
       sidebar={
         <ChatList
           chats={chats}
+          configs={configs}
           enterChat={selectChat}
           deleteChat={deleteChat}
           enterConfig={selectConfig}
diff --git a/frontend/src/components/ChatList.tsx b/frontend/src/components/ChatList.tsx
index 0e6d937f..3e79e94d 100644
--- a/frontend/src/components/ChatList.tsx
+++ b/frontend/src/components/ChatList.tsx
@@ -4,9 +4,11 @@ import { useState, useEffect } from "react";
 import { ChatListProps } from "../hooks/useChatList";
 import { cn } from "../utils/cn";
 import { useThreadAndAssistant } from "../hooks/useThreadAndAssistant.ts";
+import { ConfigListProps } from "../hooks/useConfigList.ts";
 
 export function ChatList(props: {
   chats: ChatListProps["chats"];
+  configs: ConfigListProps["configs"];
   enterChat: (id: string | null) => void;
   deleteChat: (id: string) => void;
   enterConfig: (id: string | null) => void;
@@ -76,15 +78,17 @@ export function ChatList(props: {
         {props.chats?.map((chat) => (
           <li
             key={chat.thread_id}
-            className="flex justify-between items-center p-2 rounded-md hover:bg-gray-50 cursor-pointer"
+            className={cn(
+              chat.thread_id === currentChat?.thread_id
+                ? "bg-gray-50 text-indigo-600"
+                : "text-gray-700 hover:text-indigo-600 hover:bg-gray-50",
+              "flex justify-between items-center p-2 rounded-md hover:bg-gray-50 cursor-pointer",
+            )}
           >
             <div
               onClick={() => props.enterChat(chat.thread_id)}
               className={cn(
-                chat.thread_id === currentChat?.thread_id
-                  ? "bg-gray-50 text-indigo-600"
-                  : "text-gray-700 hover:text-indigo-600 hover:bg-gray-50",
-                "group flex gap-x-3 rounded-md p-2 leading-6 cursor-pointer flex-grow min-w-0",
+                "group flex items-center gap-x-3 rounded-md px-2 leading-6 cursor-pointer flex-grow min-w-0",
               )}
             >
               <span
@@ -97,7 +101,16 @@ export function ChatList(props: {
               >
                 {chat.name?.[0] ?? " "}
               </span>
-              <span className="truncate flex-grow min-w-0">{chat.name}</span>
+              <div className="flex flex-col truncate">
+                <span className="truncate flex-grow min-w-0">{chat.name}</span>
+                <span className="truncate flex-grow min-w-0 text-xs text-gray-400">
+                  {
+                    props.configs?.find(
+                      (config) => config.assistant_id === chat.assistant_id,
+                    )?.name
+                  }
+                </span>
+              </div>
             </div>
             {/* Ellipsis Button */}
             <button