feat: shared and pinning agents + fix for streaming tools

frontend/src/agents/index.tsx

@@ -9,10 +9,15 @@ import Monitoring from '../assets/monitoring.svg';
 import Pin from '../assets/pin.svg';
 import Trash from '../assets/red-trash.svg';
 import Robot from '../assets/robot.svg';
+import Link from '../assets/link-gray.svg';
 import ThreeDots from '../assets/three-dots.svg';
 import UnPin from '../assets/unpin.svg';
 import ContextMenu, { MenuOption } from '../components/ContextMenu';
 import Spinner from '../components/Spinner';
+import {
+  setConversation,
+  updateConversationId,
+} from '../conversation/conversationSlice';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
 import {
@@ -24,6 +29,7 @@ import {
 } from '../preferences/preferenceSlice';
 import AgentLogs from './AgentLogs';
 import NewAgent from './NewAgent';
+import SharedAgent from './SharedAgent';
 import { Agent } from './types';
 
 export default function Agents() {
@@ -33,10 +39,26 @@ export default function Agents() {
       <Route path="/new" element={<NewAgent mode="new" />} />
       <Route path="/edit/:agentId" element={<NewAgent mode="edit" />} />
       <Route path="/logs/:agentId" element={<AgentLogs />} />
+      <Route path="/shared/:agentId" element={<SharedAgent />} />
     </Routes>
   );
 }
 
+const sectionConfig = {
+  user: {
+    title: 'By me',
+    description: 'Agents created or published by you',
+    showNewAgentButton: true,
+    emptyStateDescription: 'You don’t have any created agents yet',
+  },
+  shared: {
+    title: 'Shared with me',
+    description: 'Agents imported by using a public link',
+    showNewAgentButton: false,
+    emptyStateDescription: 'No shared agents found',
+  },
+};
+
 function AgentsList() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -44,24 +66,47 @@ function AgentsList() {
   const agents = useSelector(selectAgents);
   const selectedAgent = useSelector(selectSelectedAgent);
 
-  const [loading, setLoading] = useState<boolean>(true);
+  const [sharedAgents, setSharedAgents] = useState<Agent[]>([]);
+  const [loadingUserAgents, setLoadingUserAgents] = useState<boolean>(true);
+  const [loadingSharedAgents, setLoadingSharedAgents] = useState<boolean>(true);
 
   const getAgents = async () => {
     try {
-      setLoading(true);
+      setLoadingUserAgents(true);
       const response = await userService.getAgents(token);
       if (!response.ok) throw new Error('Failed to fetch agents');
       const data = await response.json();
       dispatch(setAgents(data));
-      setLoading(false);
+      setLoadingUserAgents(false);
     } catch (error) {
       console.error('Error:', error);
-      setLoading(false);
+      setLoadingUserAgents(false);
+    }
+  };
+
+  const getSharedAgents = async () => {
+    try {
+      setLoadingSharedAgents(true);
+      const response = await userService.getSharedAgents(token);
+      if (!response.ok) throw new Error('Failed to fetch shared agents');
+      const data = await response.json();
+      setSharedAgents(data);
+      setLoadingSharedAgents(false);
+    } catch (error) {
+      console.error('Error:', error);
+      setLoadingSharedAgents(false);
     }
   };
 
   useEffect(() => {
     getAgents();
+    getSharedAgents();
+    dispatch(setConversation([]));
+    dispatch(
+      updateConversationId({
+        query: { conversationId: null },
+      }),
+    );
     if (selectedAgent) dispatch(setSelectedAgent(null));
   }, [token]);
   return (
@@ -71,7 +116,7 @@ function AgentsList() {
       </h1>
       <p className="mt-5 text-[15px] text-[#71717A] dark:text-[#949494]">
         Discover and create custom versions of DocsGPT that combine
-        instructions, extra knowledge, and any combination of skills.
+        instructions, extra knowledge, and any combination of skills
       </p>
       {/* Premade agents section */}
       {/* <div className="mt-6">
@@ -116,45 +161,91 @@ function AgentsList() {
           ))}
         </div>
       </div> */}
-      <div className="mt-8 flex flex-col gap-4">
-        <div className="flex w-full items-center justify-between">
+      <AgentSection
+        agents={agents ?? []}
+        loading={loadingUserAgents}
+        section="user"
+      />
+      <AgentSection
+        agents={sharedAgents ?? []}
+        loading={loadingSharedAgents}
+        section="shared"
+      />
+    </div>
+  );
+}
+
+function AgentSection({
+  agents,
+  loading,
+  section,
+}: {
+  agents: Agent[];
+  loading: boolean;
+  section: keyof typeof sectionConfig;
+}) {
+  const navigate = useNavigate();
+  return (
+    <div className="mt-8 flex flex-col gap-4">
+      <div className="flex w-full items-center justify-between">
+        <div className="flex flex-col gap-2">
           <h2 className="text-[18px] font-semibold text-[#18181B] dark:text-[#E0E0E0]">
-            Created by You
+            {sectionConfig[section].title}
           </h2>
+          <p className="text-[13px] text-[#71717A]">
+            {sectionConfig[section].description}
+          </p>
+        </div>
+        {sectionConfig[section].showNewAgentButton && (
           <button
             className="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 className="flex w-full flex-wrap gap-4">
-          {loading ? (
-            <div className="flex h-72 w-full items-center justify-center">
-              <Spinner />
-            </div>
-          ) : agents && agents.length > 0 ? (
-            agents.map((agent) => (
-              <AgentCard key={agent.id} agent={agent} agents={agents} />
-            ))
-          ) : (
-            <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>
+        )}
+      </div>
+      <div className="flex w-full flex-wrap gap-4">
+        {loading ? (
+          <div className="flex h-72 w-full items-center justify-center">
+            <Spinner />
+          </div>
+        ) : agents && agents.length > 0 ? (
+          agents.map((agent) => (
+            <AgentCard
+              key={agent.id}
+              agent={agent}
+              agents={agents}
+              section={section}
+            />
+          ))
+        ) : (
+          <div className="flex h-72 w-full flex-col items-center justify-center gap-3 text-base text-[#18181B] dark:text-[#E0E0E0]">
+            <p>{sectionConfig[section].emptyStateDescription}</p>
+            {sectionConfig[section].showNewAgentButton && (
               <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>
     </div>
   );
 }
 
-function AgentCard({ agent, agents }: { agent: Agent; agents: Agent[] }) {
+function AgentCard({
+  agent,
+  agents,
+  section,
+}: {
+  agent: Agent;
+  agents: Agent[];
+  section: keyof typeof sectionConfig;
+}) {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const token = useSelector(selectToken);
@@ -180,57 +271,79 @@ function AgentCard({ agent, agents }: { agent: Agent; agents: Agent[] }) {
     }
   };
 
-  const menuOptions: MenuOption[] = [
-    {
-      icon: Monitoring,
-      label: 'Logs',
-      onClick: (e: SyntheticEvent) => {
-        e.stopPropagation();
-        navigate(`/agents/logs/${agent.id}`);
+  const menuOptionsConfig: Record<string, MenuOption[]> = {
+    user: [
+      {
+        icon: Monitoring,
+        label: 'Logs',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          navigate(`/agents/logs/${agent.id}`);
+        },
+        variant: 'primary',
+        iconWidth: 14,
+        iconHeight: 14,
       },
-      variant: 'primary',
-      iconWidth: 14,
-      iconHeight: 14,
-    },
-    {
-      icon: Edit,
-      label: 'Edit',
-      onClick: (e: SyntheticEvent) => {
-        e.stopPropagation();
-        navigate(`/agents/edit/${agent.id}`);
+      {
+        icon: Edit,
+        label: 'Edit',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          navigate(`/agents/edit/${agent.id}`);
+        },
+        variant: 'primary',
+        iconWidth: 14,
+        iconHeight: 14,
       },
-      variant: 'primary',
-      iconWidth: 14,
-      iconHeight: 14,
-    },
-    {
-      icon: agent.pinned ? UnPin : Pin,
-      label: agent.pinned ? 'Unpin' : 'Pin agent',
-      onClick: (e: SyntheticEvent) => {
-        e.stopPropagation();
-        togglePin();
+      {
+        icon: agent.pinned ? UnPin : Pin,
+        label: agent.pinned ? 'Unpin' : 'Pin agent',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          togglePin();
+        },
+        variant: 'primary',
+        iconWidth: 18,
+        iconHeight: 18,
       },
-      variant: 'primary',
-      iconWidth: 18,
-      iconHeight: 18,
-    },
-    {
-      icon: Trash,
-      label: 'Delete',
-      onClick: (e: SyntheticEvent) => {
-        e.stopPropagation();
-        setDeleteConfirmation('ACTIVE');
+      {
+        icon: Trash,
+        label: 'Delete',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          setDeleteConfirmation('ACTIVE');
+        },
+        variant: 'danger',
+        iconWidth: 13,
+        iconHeight: 13,
       },
-      variant: 'danger',
-      iconWidth: 13,
-      iconHeight: 13,
-    },
-  ];
+    ],
+    shared: [
+      {
+        icon: Link,
+        label: 'Open',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          navigate(`/agents/shared/${agent.shared_token}`);
+        },
+        variant: 'primary',
+        iconWidth: 14,
+        iconHeight: 14,
+      },
+    ],
+  };
+
+  const menuOptions = menuOptionsConfig[section] || [];
 
   const handleClick = () => {
-    if (agent.status === 'published') {
-      dispatch(setSelectedAgent(agent));
-      navigate(`/`);
+    if (section === 'user') {
+      if (agent.status === 'published') {
+        dispatch(setSelectedAgent(agent));
+        navigate(`/`);
+      }
+    }
+    if (section === 'shared') {
+      navigate(`/agents/shared/${agent.shared_token}`);
     }
   };