feat: add clsx dependency, enhance logging in agent logic, and improve agent logs component

frontend/src/agents/AgentLogs.tsx

@@ -1,12 +1,40 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import userService from '../api/services/userService';
 import ArrowLeft from '../assets/arrow-left.svg';
+import { selectToken } from '../preferences/preferenceSlice';
 import Analytics from '../settings/Analytics';
 import Logs from '../settings/Logs';
+import Spinner from '../components/Spinner';
+import { Agent } from './types';
 
 export default function AgentLogs() {
   const navigate = useNavigate();
   const { agentId } = useParams();
+  const token = useSelector(selectToken);
+
+  const [agent, setAgent] = useState<Agent>();
+  const [loadingAgent, setLoadingAgent] = useState<boolean>(true);
+
+  const fetchAgent = async (agentId: string) => {
+    setLoadingAgent(true);
+    try {
+      const response = await userService.getAgent(agentId ?? '', token);
+      if (!response.ok) throw new Error('Failed to fetch Chatbots');
+      const agent = await response.json();
+      setAgent(agent);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoadingAgent(false);
+    }
+  };
+
+  useEffect(() => {
+    if (agentId) fetchAgent(agentId);
+  }, [agentId, token]);
   return (
     <div className="p-4 md:p-12">
       <div className="flex items-center gap-3 px-4">
@@ -25,8 +53,29 @@ export default function AgentLogs() {
           Agent Logs
         </h1>
       </div>
-      <Analytics agentId={agentId} />
-      <Logs agentId={agentId} tableHeader="Agent endpoint logs" />
+      <div className="mt-6 flex flex-col gap-3 px-4">
+        <h2 className="text-sm font-semibold text-black dark:text-[#E0E0E0]">
+          Agent Name
+        </h2>
+        {agent && (
+          <p className="text-[#28292E] dark:text-[#E0E0E0]">{agent.name}</p>
+        )}
+      </div>
+      {loadingAgent ? (
+        <div className="flex h-[345px] w-full items-center justify-center">
+          <Spinner />
+        </div>
+      ) : (
+        agent && <Analytics agentId={agent.id} />
+      )}
+      {loadingAgent ? (
+        <div className="flex h-[55vh] w-full items-center justify-center">
+          {' '}
+          <Spinner />
+        </div>
+      ) : (
+        agent && <Logs agentId={agentId} tableHeader="Agent endpoint logs" />
+      )}
     </div>
   );
 }

frontend/src/agents/NewAgent.tsx

@@ -11,10 +11,7 @@ import AgentDetailsModal from '../modals/AgentDetailsModal';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState, Doc, Prompt } from '../models/misc';
 import {
-  selectSelectedAgent,
-  selectSourceDocs,
-  selectToken,
-  setSelectedAgent,
+    selectSelectedAgent, selectSourceDocs, selectToken, setSelectedAgent
 } from '../preferences/preferenceSlice';
 import PromptsModal from '../preferences/PromptsModal';
 import { UserToolType } from '../settings/types';
@@ -287,9 +284,10 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           )}
           {modeConfig[effectiveMode].showAccessDetails && (
             <button
-              className="hover:bg-vi</button>olets-are-blue rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
+              className="group flex items-center gap-2 rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
               onClick={() => navigate(`/agents/logs/${agent.id}`)}
             >
+              <span className="block h-5 w-5 bg-[url('/src/assets/monitoring-purple.svg')] bg-contain bg-center bg-no-repeat transition-all group-hover:bg-[url('/src/assets/monitoring-white.svg')]" />
               Logs
             </button>
           )}

frontend/src/agents/index.tsx

@@ -138,6 +138,7 @@ function AgentsList() {
               <AgentCard
                 key={agent.id}
                 agent={agent}
+                agents={userAgents}
                 setUserAgents={setUserAgents}
               />
             ))
@@ -160,9 +161,11 @@ function AgentsList() {
 
 function AgentCard({
   agent,
+  agents,
   setUserAgents,
 }: {
   agent: Agent;
+  agents: Agent[];
   setUserAgents: React.Dispatch<React.SetStateAction<Agent[]>>;
 }) {
   const navigate = useNavigate();
@@ -225,6 +228,7 @@ function AgentCard({
     setUserAgents((prevAgents) =>
       prevAgents.filter((prevAgent) => prevAgent.id !== data.id),
     );
+    dispatch(setAgents(agents.filter((prevAgent) => prevAgent.id !== data.id)));
   };
   return (
     <div