fix: show selected thread in agents threads dropdown

obot-platform · Dec 30, 2024 · e3d1d43 · e3d1d43
1 parent 95281e5
commit e3d1d43
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git 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
@@ -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);
@@ -94,18 +96,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
@@ -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 />