feat: add agent webhook endpoint and implement related functionality

frontend/src/agents/AgentPreview.tsx

@@ -141,6 +141,7 @@ export default function AgentPreview() {
             loading={status === 'loading'}
             showSourceButton={selectedAgent ? false : true}
             showToolButton={selectedAgent ? false : true}
+            autoFocus={false}
           />
           <p className="w-full self-center bg-transparent pt-2 text-center text-xs text-gray-4000 dark:text-sonic-silver md:inline">
             This is a preview of the agent. You can publish it to start using it

frontend/src/agents/NewAgent.tsx

@@ -155,9 +155,10 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     const data = await response.json();
     if (data.id) setAgent((prev) => ({ ...prev, id: data.id }));
     if (data.key) setAgent((prev) => ({ ...prev, key: data.key }));
-    if (effectiveMode === 'new') {
-      setAgentDetails('ACTIVE');
+    if (effectiveMode === 'new' || effectiveMode === 'draft') {
       setEffectiveMode('edit');
+      setAgent((prev) => ({ ...prev, status: 'published' }));
+      setAgentDetails('ACTIVE');
     }
   };
 
@@ -408,7 +409,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                     agent.prompt_id
                       ? prompts.filter(
                           (prompt) => prompt.id === agent.prompt_id,
-                        )[0].name || null
+                        )[0]?.name || null
                       : null
                   }
                   onSelect={(option: { label: string; value: string }) =>
@@ -532,7 +533,7 @@ function AgentPreviewArea() {
   const selectedAgent = useSelector(selectSelectedAgent);
   return (
     <div className="h-full w-full rounded-[30px] border border-[#F6F6F6] bg-white dark:border-[#7E7E7E] dark:bg-[#222327] max-[1180px]:h-[48rem]">
-      {selectedAgent?.id ? (
+      {selectedAgent?.status === 'published' ? (
         <div className="flex h-full w-full flex-col justify-end overflow-auto rounded-[30px]">
           <AgentPreview />
         </div>
@@ -540,7 +541,7 @@ function AgentPreviewArea() {
         <div className="flex h-full w-full flex-col items-center justify-center gap-2">
           <span className="block h-12 w-12 bg-[url('/src/assets/science-spark.svg')] bg-contain bg-center bg-no-repeat transition-all dark:bg-[url('/src/assets/science-spark-dark.svg')]" />{' '}
           <p className="text-xs text-[#18181B] dark:text-[#949494]">
-            Published agents can be previewd here
+            Published agents can be previewed here
           </p>
         </div>
       )}

frontend/src/agents/index.tsx

@@ -12,7 +12,13 @@ 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, setSelectedAgent } from '../preferences/preferenceSlice';
+import {
+  selectToken,
+  setSelectedAgent,
+  setAgents,
+  selectAgents,
+  selectSelectedAgent,
+} from '../preferences/preferenceSlice';
 import AgentLogs from './AgentLogs';
 import NewAgent from './NewAgent';
 import { Agent } from './types';
@@ -31,9 +37,12 @@ export default function Agents() {
 
 function AgentsList() {
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const token = useSelector(selectToken);
+  const agents = useSelector(selectAgents);
+  const selectedAgent = useSelector(selectSelectedAgent);
 
-  const [userAgents, setUserAgents] = useState<Agent[]>([]);
+  const [userAgents, setUserAgents] = useState<Agent[]>(agents || []);
   const [loading, setLoading] = useState<boolean>(true);
 
   const getAgents = async () => {
@@ -43,6 +52,7 @@ function AgentsList() {
       if (!response.ok) throw new Error('Failed to fetch agents');
       const data = await response.json();
       setUserAgents(data);
+      dispatch(setAgents(data));
       setLoading(false);
     } catch (error) {
       console.error('Error:', error);
@@ -52,6 +62,7 @@ function AgentsList() {
 
   useEffect(() => {
     getAgents();
+    if (selectedAgent) dispatch(setSelectedAgent(null));
   }, [token]);
   return (
     <div className="p-4 md:p-12">
@@ -62,6 +73,7 @@ function AgentsList() {
         Discover and create custom versions of DocsGPT that combine
         instructions, extra knowledge, and any combination of skills.
       </p>
+      {/* Premade agents section */}
       {/* <div className="mt-6">
         <h2 className="text-[18px] font-semibold text-[#18181B] dark:text-[#E0E0E0]">
           Premade by DocsGPT
@@ -200,8 +212,10 @@ function AgentCard({
   ];
 
   const handleClick = () => {
-    dispatch(setSelectedAgent(agent));
-    navigate(`/`);
+    if (agent.status === 'published') {
+      dispatch(setSelectedAgent(agent));
+      navigate(`/`);
+    }
   };
 
   const handleDelete = async (agentId: string) => {
@@ -214,8 +228,11 @@ function AgentCard({
   };
   return (
     <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()}
+      className={`relative flex h-44 w-48 flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] hover:dark:bg-[#383838]/80 ${agent.status === 'published' && 'cursor-pointer'}`}
+      onClick={(e) => {
+        e.stopPropagation();
+        handleClick();
+      }}
     >
       <div
         ref={menuRef}