feat: add agent timestamps and improve agent retrieval logic

frontend/src/Navigation.tsx

@@ -43,6 +43,7 @@ import {
   setConversations,
   setModalStateDeleteConv,
   setSelectedAgent,
+  setAgents,
 } from './preferences/preferenceSlice';
 import Upload from './upload/Upload';
 
@@ -90,9 +91,17 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   async function getAgents() {
     const response = await userService.getAgents(token);
     if (!response.ok) throw new Error('Failed to fetch agents');
-    const data = await response.json();
+    const data: Agent[] = await response.json();
+    dispatch(setAgents(data));
     setRecentAgents(
-      data.filter((agent: Agent) => agent.status === 'published'),
+      data
+        .filter((agent: Agent) => agent.status === 'published')
+        .sort(
+          (a: Agent, b: Agent) =>
+            new Date(b.last_used_at ?? 0).getTime() -
+            new Date(a.last_used_at ?? 0).getTime(),
+        )
+        .slice(0, 3),
     );
   }
 
@@ -356,7 +365,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             </div>
           ) : (
             <div
-              className="mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4"
+              className="mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
               onClick={() => navigate('/agents')}
             >
               <div className="flex w-6 justify-center">
@@ -366,7 +375,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                   className="h-[18px] w-[18px]"
                 />
               </div>
-              <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-6 text-eerie-black hover:text-purple-30 dark:text-bright-gray hover:dark:text-purple-30">
+              <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-6 text-eerie-black dark:text-bright-gray">
                 Manage Agents
               </p>
             </div>

frontend/src/agents/index.tsx

@@ -1,5 +1,5 @@
 import React, { SyntheticEvent, useEffect, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { Route, Routes, useNavigate } from 'react-router-dom';
 
 import userService from '../api/services/userService';
@@ -12,10 +12,11 @@ import ThreeDots from '../assets/three-dots.svg';
 import ContextMenu, { MenuOption } from '../components/ContextMenu';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
-import { selectToken } from '../preferences/preferenceSlice';
+import { selectToken, setSelectedAgent } from '../preferences/preferenceSlice';
 import AgentLogs from './AgentLogs';
 import NewAgent from './NewAgent';
 import { Agent } from './types';
+import Spinner from '../components/Spinner';
 
 export default function Agents() {
   return (
@@ -33,14 +34,23 @@ function AgentsList() {
   const token = useSelector(selectToken);
 
   const [userAgents, setUserAgents] = useState<Agent[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
 
-  useEffect(() => {
-    const getAgents = async () => {
+  const getAgents = async () => {
+    try {
+      setLoading(true);
       const response = await userService.getAgents(token);
       if (!response.ok) throw new Error('Failed to fetch agents');
       const data = await response.json();
       setUserAgents(data);
-    };
+      setLoading(false);
+    } catch (error) {
+      console.error('Error:', error);
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
     getAgents();
   }, [token]);
   return (
@@ -107,9 +117,29 @@ function AgentsList() {
           </button>
         </div>
         <div className="flex w-full flex-wrap gap-4">
-          {userAgents.map((agent, idx) => (
-            <AgentCard key={idx} agent={agent} setUserAgents={setUserAgents} />
-          ))}
+          {loading ? (
+            <div className="flex h-72 w-full items-center justify-center">
+              <Spinner />
+            </div>
+          ) : userAgents.length > 0 ? (
+            userAgents.map((agent) => (
+              <AgentCard
+                key={agent.id}
+                agent={agent}
+                setUserAgents={setUserAgents}
+              />
+            ))
+          ) : (
+            <div className="flex h-72 w-full flex-col items-center justify-center gap-3 text-base text-[#18181B] dark:text-[#E0E0E0]">
+              <p>You don’t have any created agents yet </p>
+              <button
+                className="ml-2 rounded-full bg-purple-30 px-4 py-2 text-sm text-white hover:bg-violets-are-blue"
+                onClick={() => navigate('/agents/new')}
+              >
+                New Agent
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </div>
@@ -124,12 +154,15 @@ function AgentCard({
   setUserAgents: React.Dispatch<React.SetStateAction<Agent[]>>;
 }) {
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const token = useSelector(selectToken);
-  const menuRef = useRef<HTMLDivElement>(null);
+
   const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
   const [deleteConfirmation, setDeleteConfirmation] =
     useState<ActiveState>('INACTIVE');
 
+  const menuRef = useRef<HTMLDivElement>(null);
+
   const menuOptions: MenuOption[] = [
     {
       icon: Monitoring,
@@ -156,13 +189,21 @@ function AgentCard({
     {
       icon: Trash,
       label: 'Delete',
-      onClick: () => setDeleteConfirmation('ACTIVE'),
+      onClick: (e: SyntheticEvent) => {
+        e.stopPropagation();
+        setDeleteConfirmation('ACTIVE');
+      },
       variant: 'danger',
       iconWidth: 12,
       iconHeight: 12,
     },
   ];
 
+  const handleClick = () => {
+    dispatch(setSelectedAgent(agent));
+    navigate(`/`);
+  };
+
   const handleDelete = async (agentId: string) => {
     const response = await userService.deleteAgent(agentId, token);
     if (!response.ok) throw new Error('Failed to delete agent');
@@ -172,13 +213,17 @@ function AgentCard({
     );
   };
   return (
-    <div className="relative flex h-44 w-48 flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 dark:bg-[#383838]">
+    <div
+      className="relative flex h-44 w-48 cursor-pointer flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 dark:bg-[#383838]"
+      onClick={(e) => handleClick()}
+    >
       <div
         ref={menuRef}
-        onClick={() => {
+        onClick={(e) => {
+          e.stopPropagation();
           setIsMenuOpen(true);
         }}
-        className="absolute right-4 top-4 cursor-pointer"
+        className="absolute right-4 top-4 z-50 cursor-pointer"
       >
         <img src={ThreeDots} alt={'use-agent'} className="h-[19px] w-[19px]" />
         <ContextMenu

frontend/src/agents/types/index.ts

@@ -11,4 +11,7 @@ export type Agent = {
   agent_type: string;
   status: string;
   key?: string;
+  created_at?: string;
+  updated_at?: string;
+  last_used_at?: string;
 };

frontend/src/preferences/preferenceSlice.ts

@@ -24,6 +24,7 @@ export interface Preference {
   token: string | null;
   modalState: ActiveState;
   paginatedDocuments: Doc[] | null;
+  agents: Agent[] | null;
   selectedAgent: Agent | null;
 }
 
@@ -49,6 +50,7 @@ const initialState: Preference = {
   token: localStorage.getItem('authToken') || null,
   modalState: 'INACTIVE',
   paginatedDocuments: null,
+  agents: null,
   selectedAgent: null,
 };
 
@@ -86,6 +88,9 @@ export const prefSlice = createSlice({
     setModalStateDeleteConv: (state, action: PayloadAction<ActiveState>) => {
       state.modalState = action.payload;
     },
+    setAgents: (state, action) => {
+      state.agents = action.payload;
+    },
     setSelectedAgent: (state, action) => {
       state.selectedAgent = action.payload;
     },
@@ -103,6 +108,7 @@ export const {
   setTokenLimit,
   setModalStateDeleteConv,
   setPaginatedDocuments,
+  setAgents,
   setSelectedAgent,
 } = prefSlice.actions;
 export default prefSlice.reducer;
@@ -178,5 +184,6 @@ export const selectTokenLimit = (state: RootState) =>
   state.preference.token_limit;
 export const selectPaginatedDocuments = (state: RootState) =>
   state.preference.paginatedDocuments;
+export const selectAgents = (state: RootState) => state.preference.agents;
 export const selectSelectedAgent = (state: RootState) =>
   state.preference.selectedAgent;

frontend/src/store.ts

@@ -1,4 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
+
 import { conversationSlice } from './conversation/conversationSlice';
 import { sharedConversationSlice } from './conversation/sharedConversationSlice';
 import {
@@ -40,6 +41,7 @@ const preloadedState: { preference: Preference } = {
     ],
     modalState: 'INACTIVE',
     paginatedDocuments: null,
+    agents: null,
     selectedAgent: null,
   },
 };