refactor: agents sharing and shared with me logic

frontend/src/agents/SharedAgent.tsx

@@ -21,6 +21,7 @@ import {
 import { useDarkTheme } from '../hooks';
 import { selectToken, setSelectedAgent } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
+import SharedAgentCard from './SharedAgentCard';
 import { Agent } from './types';
 
 export default function SharedAgent() {
@@ -193,65 +194,3 @@ export default function SharedAgent() {
     </div>
   );
 }
-
-function SharedAgentCard({ agent }: { agent: Agent }) {
-  return (
-    <div className="flex w-full max-w-[720px] flex-col rounded-3xl border border-dark-gray p-6 shadow-sm dark:border-grey sm:w-fit sm:min-w-[480px]">
-      <div className="flex items-center gap-3">
-        <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
-          <img src={Robot} className="h-full w-full object-contain" />
-        </div>
-        <div className="flex max-h-[92px] w-[80%] flex-col gap-px">
-          <h2 className="text-base font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-lg">
-            {agent.name}
-          </h2>
-          <p className="overflow-y-auto text-wrap break-all text-xs text-[#71717A] dark:text-[#949494] sm:text-sm">
-            {agent.description}
-          </p>
-        </div>
-      </div>
-      <div className="mt-4 flex items-center gap-8">
-        {agent.shared_metadata?.shared_by && (
-          <p className="text-xs font-light text-[#212121] dark:text-[#E0E0E0] sm:text-sm">
-            by {agent.shared_metadata.shared_by}
-          </p>
-        )}
-        {agent.shared_metadata?.shared_at && (
-          <p className="text-xs font-light text-[#71717A] dark:text-[#949494] sm:text-sm">
-            Shared on{' '}
-            {new Date(agent.shared_metadata.shared_at).toLocaleString('en-US', {
-              month: 'long',
-              day: 'numeric',
-              year: 'numeric',
-              hour: '2-digit',
-              minute: '2-digit',
-              hour12: true,
-            })}
-          </p>
-        )}
-      </div>
-      {agent.tools.length > 0 && (
-        <div className="mt-8">
-          <p className="text-sm font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-base">
-            Connected Tools
-          </p>
-          <div className="mt-2 flex flex-wrap gap-2">
-            {agent.tools.map((tool, index) => (
-              <span
-                key={index}
-                className="flex items-center gap-1 rounded-full bg-bright-gray px-3 py-1 text-xs font-light text-[#212121] dark:bg-dark-charcoal dark:text-[#E0E0E0]"
-              >
-                <img
-                  src={`/toolIcons/tool_${tool}.svg`}
-                  alt={`${tool} icon`}
-                  className="h-3 w-3"
-                />{' '}
-                {tool}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/agents/SharedAgentCard.tsx

@@ -0,0 +1,64 @@
+import Robot from '../assets/robot.svg';
+import { Agent } from './types';
+
+export default function SharedAgentCard({ agent }: { agent: Agent }) {
+  return (
+    <div className="flex w-full max-w-[720px] flex-col rounded-3xl border border-dark-gray p-6 shadow-sm dark:border-grey sm:w-fit sm:min-w-[480px]">
+      <div className="flex items-center gap-3">
+        <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
+          <img src={Robot} className="h-full w-full object-contain" />
+        </div>
+        <div className="flex max-h-[92px] w-[80%] flex-col gap-px">
+          <h2 className="text-base font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-lg">
+            {agent.name}
+          </h2>
+          <p className="overflow-y-auto text-wrap break-all text-xs text-[#71717A] dark:text-[#949494] sm:text-sm">
+            {agent.description}
+          </p>
+        </div>
+      </div>
+      <div className="mt-4 flex items-center gap-8">
+        {agent.shared_metadata?.shared_by && (
+          <p className="text-xs font-light text-[#212121] dark:text-[#E0E0E0] sm:text-sm">
+            by {agent.shared_metadata.shared_by}
+          </p>
+        )}
+        {agent.shared_metadata?.shared_at && (
+          <p className="text-xs font-light text-[#71717A] dark:text-[#949494] sm:text-sm">
+            Shared on{' '}
+            {new Date(agent.shared_metadata.shared_at).toLocaleString('en-US', {
+              month: 'long',
+              day: 'numeric',
+              year: 'numeric',
+              hour: '2-digit',
+              minute: '2-digit',
+              hour12: true,
+            })}
+          </p>
+        )}
+      </div>
+      {agent.tools.length > 0 && (
+        <div className="mt-8">
+          <p className="text-sm font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-base">
+            Connected Tools
+          </p>
+          <div className="mt-2 flex flex-wrap gap-2">
+            {agent.tools.map((tool, index) => (
+              <span
+                key={index}
+                className="flex items-center gap-1 rounded-full bg-bright-gray px-3 py-1 text-xs font-light text-[#212121] dark:bg-dark-charcoal dark:text-[#E0E0E0]"
+              >
+                <img
+                  src={`/toolIcons/tool_${tool}.svg`}
+                  alt={`${tool} icon`}
+                  className="h-3 w-3"
+                />{' '}
+                {tool}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/agents/index.tsx

@@ -286,7 +286,10 @@ function AgentCard({
 
   const handleHideSharedAgent = async () => {
     try {
-      const response = await userService.hideSharedAgent(agent.id ?? '', token);
+      const response = await userService.removeSharedAgent(
+        agent.id ?? '',
+        token,
+      );
       if (!response.ok) throw new Error('Failed to hide shared agent');
       const updatedAgents = agents.filter(
         (prevAgent) => prevAgent.id !== agent.id,

frontend/src/api/endpoints.ts

@@ -18,7 +18,7 @@ const endpoints = {
     SHARED_AGENT: (id: string) => `/api/shared_agent?token=${id}`,
     SHARED_AGENTS: '/api/shared_agents',
     SHARE_AGENT: `/api/share_agent`,
-    HIDE_SHARED_AGENT: (id: string) => `/api/hide_shared_agent?id=${id}`,
+    REMOVE_SHARED_AGENT: (id: string) => `/api/remove_shared_agent?id=${id}`,
     AGENT_WEBHOOK: (id: string) => `/api/agent_webhook?id=${id}`,
     PROMPTS: '/api/get_prompts',
     CREATE_PROMPT: '/api/create_prompt',

frontend/src/api/services/userService.ts

@@ -41,8 +41,8 @@ const userService = {
     apiClient.get(endpoints.USER.SHARED_AGENTS, token),
   shareAgent: (data: any, token: string | null): Promise<any> =>
     apiClient.put(endpoints.USER.SHARE_AGENT, data, token),
-  hideSharedAgent: (id: string, token: string | null): Promise<any> =>
-    apiClient.delete(endpoints.USER.HIDE_SHARED_AGENT(id), token),
+  removeSharedAgent: (id: string, token: string | null): Promise<any> =>
+    apiClient.delete(endpoints.USER.REMOVE_SHARED_AGENT(id), token),
   getAgentWebhook: (id: string, token: string | null): Promise<any> =>
     apiClient.get(endpoints.USER.AGENT_WEBHOOK(id), token),
   getPrompts: (token: string | null): Promise<any> =>