From 6d38bb70fe6398214e83ce7cc3996306fc430813 Mon Sep 17 00:00:00 2001
From: Ivy <ivy.jeong@gmail.com>
Date: Mon, 30 Dec 2024 12:11:35 -0500
Subject: [PATCH] fix: show selected thread in agents threads dropdown

---
 ui/admin/app/components/agent/Agent.tsx       |  4 +-
 ui/admin/app/components/agent/PastThreads.tsx | 52 ++++++++++++++-----
 ui/admin/app/routes/_auth.agents.$agent.tsx   |  6 ++-
 3 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/ui/admin/app/components/agent/Agent.tsx b/ui/admin/app/components/agent/Agent.tsx
index 14a614f9..21abac01 100644
--- a/ui/admin/app/components/agent/Agent.tsx
+++ b/ui/admin/app/components/agent/Agent.tsx
@@ -21,10 +21,11 @@ import { useDebounce } from "~/hooks/useDebounce";
 
 type AgentProps = {
     className?: string;
+    currentThreadId?: string | null;
     onRefresh?: (threadId: string | null) => void;
 };
 
-export function Agent({ className, onRefresh }: AgentProps) {
+export function Agent({ className, currentThreadId, onRefresh }: AgentProps) {
     const { agent, updateAgent, isUpdating, lastUpdated, error } = useAgent();
 
     const [agentUpdates, setAgentUpdates] = useState(agent);
@@ -179,6 +180,7 @@ export function Agent({ className, onRefresh }: AgentProps) {
 
                 <div className="flex gap-2">
                     <PastThreads
+                        currentThreadId={currentThreadId}
                         agentId={agent.id}
                         onThreadSelect={handleThreadSelect}
                     />
diff --git a/ui/admin/app/components/agent/PastThreads.tsx b/ui/admin/app/components/agent/PastThreads.tsx
index 952deee4..c5b39827 100644
--- a/ui/admin/app/components/agent/PastThreads.tsx
+++ b/ui/admin/app/components/agent/PastThreads.tsx
@@ -1,4 +1,4 @@
-import { ChevronUpIcon } from "lucide-react";
+import { CheckIcon, ChevronUpIcon } from "lucide-react";
 import React, { useState } from "react";
 import useSWR from "swr";
 
@@ -29,11 +29,13 @@ import {
 
 interface PastThreadsProps {
     agentId: string;
+    currentThreadId?: string | null;
     onThreadSelect: (threadId: string) => void;
 }
 
 export const PastThreads: React.FC<PastThreadsProps> = ({
     agentId,
+    currentThreadId,
     onThreadSelect,
 }) => {
     const [open, setOpen] = useState(false);
@@ -58,6 +60,19 @@ export const PastThreads: React.FC<PastThreadsProps> = ({
         setOpen(false);
     };
 
+    const sortedThreads =
+        currentThreadId && threads
+            ? [...threads].sort((a, b) => {
+                  if (a.id === currentThreadId) {
+                      return -1;
+                  }
+                  if (b.id === currentThreadId) {
+                      return 1;
+                  }
+                  return 0;
+              })
+            : (threads ?? []);
+
     return (
         <Tooltip>
             <TooltipContent>Switch threads</TooltipContent>
@@ -86,7 +101,7 @@ export const PastThreads: React.FC<PastThreadsProps> = ({
                                 </div>
                             ) : threads && threads.length > 0 ? (
                                 <CommandGroup>
-                                    {threads.map((thread: Thread) => (
+                                    {sortedThreads.map((thread: Thread) => (
                                         <CommandItem
                                             key={thread.id}
                                             onSelect={() =>
@@ -94,18 +109,27 @@ export const PastThreads: React.FC<PastThreadsProps> = ({
                                             }
                                             className="cursor-pointer"
                                         >
-                                            <div>
-                                                <TypographyP className="font-semibold">
-                                                    Thread
-                                                    <span className="ml-2 text-muted-foreground">
-                                                        {thread.id}
-                                                    </span>
-                                                </TypographyP>
-                                                <TypographyP className="text-sm text-gray-500">
-                                                    {new Date(
-                                                        thread.created
-                                                    ).toLocaleString()}
-                                                </TypographyP>
+                                            <div className="flex items-center justify-between w-full">
+                                                <div>
+                                                    <TypographyP className="font-semibold">
+                                                        Thread
+                                                        <span className="ml-2 text-muted-foreground">
+                                                            {thread.id}
+                                                        </span>
+                                                    </TypographyP>
+                                                    <TypographyP className="text-sm text-gray-500">
+                                                        {new Date(
+                                                            thread.created
+                                                        ).toLocaleString()}
+                                                    </TypographyP>
+                                                </div>
+                                                <div>
+                                                    {currentThreadId &&
+                                                        thread.id ===
+                                                            currentThreadId && (
+                                                            <CheckIcon />
+                                                        )}
+                                                </div>
                                             </div>
                                         </CommandItem>
                                     ))}
diff --git a/ui/admin/app/routes/_auth.agents.$agent.tsx b/ui/admin/app/routes/_auth.agents.$agent.tsx
index 1b7ed49b..f3b5d34a 100644
--- a/ui/admin/app/routes/_auth.agents.$agent.tsx
+++ b/ui/admin/app/routes/_auth.agents.$agent.tsx
@@ -77,7 +77,11 @@ export default function ChatAgent() {
             <ResizablePanelGroup direction="horizontal" className="flex-auto">
                 <ResizablePanel className="">
                     <AgentProvider agent={agent}>
-                        <Agent onRefresh={updateThreadId} key={agent.id} />
+                        <Agent
+                            currentThreadId={threadId}
+                            onRefresh={updateThreadId}
+                            key={agent.id}
+                        />
                     </AgentProvider>
                 </ResizablePanel>
                 <ResizableHandle withHandle />