feat: shared and pinning agents + fix for streaming tools

2025-11-30 00:53:14 +00:00 · 2025-05-12 06:06:11 +05:30
parent 07fa656e7c
commit 6520be5b85
16 changed files with 1015 additions and 169 deletions
--- a/frontend/src/agents/AgentCard.tsx
+++ b/frontend/src/agents/AgentCard.tsx
@@ -0,0 +1,123 @@
+import { useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+
+import userService from '../api/services/userService';
+import Robot from '../assets/robot.svg';
+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,
+  setAgents,
+  setSelectedAgent,
+} from '../preferences/preferenceSlice';
+import { Agent } from './types';
+
+type AgentCardProps = {
+  agent: Agent;
+  agents: Agent[];
+  menuOptions?: MenuOption[];
+  onDelete?: (agentId: string) => void;
+};
+
+export default function AgentCard({
+  agent,
+  agents,
+  menuOptions,
+  onDelete,
+}: AgentCardProps) {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const token = useSelector(selectToken);
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [deleteConfirmation, setDeleteConfirmation] =
+    useState<ActiveState>('INACTIVE');
+
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const handleCardClick = () => {
+    if (agent.status === 'published') {
+      dispatch(setSelectedAgent(agent));
+      navigate('/');
+    }
+  };
+
+  const defaultDelete = async (agentId: string) => {
+    const response = await userService.deleteAgent(agentId, token);
+    if (!response.ok) throw new Error('Failed to delete agent');
+    const data = await response.json();
+    dispatch(setAgents(agents.filter((prevAgent) => prevAgent.id !== data.id)));
+  };
+
+  return (
+    <div
+      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={handleCardClick}
+    >
+      <div
+        ref={menuRef}
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsMenuOpen(true);
+        }}
+        className="absolute right-4 top-4 z-10 cursor-pointer"
+      >
+        <img src={ThreeDots} alt="options" className="h-[19px] w-[19px]" />
+        {menuOptions && (
+          <ContextMenu
+            isOpen={isMenuOpen}
+            setIsOpen={setIsMenuOpen}
+            options={menuOptions}
+            anchorRef={menuRef}
+            position="top-right"
+            offset={{ x: 0, y: 0 }}
+          />
+        )}
+      </div>
+
+      <div className="w-full">
+        <div className="flex w-full items-center gap-1 px-1">
+          <img
+            src={agent.image ?? Robot}
+            alt={`${agent.name}`}
+            className="h-7 w-7 rounded-full"
+          />
+          {agent.status === 'draft' && (
+            <p className="text-xs text-black opacity-50 dark:text-[#E0E0E0]">
+              (Draft)
+            </p>
+          )}
+        </div>
+        <div className="mt-2">
+          <p
+            title={agent.name}
+            className="truncate px-1 text-[13px] font-semibold capitalize leading-relaxed text-[#020617] dark:text-[#E0E0E0]"
+          >
+            {agent.name}
+          </p>
+          <p className="mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed text-[#64748B] dark:text-sonic-silver-light">
+            {agent.description}
+          </p>
+        </div>
+      </div>
+
+      <ConfirmationModal
+        message="Are you sure you want to delete this agent?"
+        modalState={deleteConfirmation}
+        setModalState={setDeleteConfirmation}
+        submitLabel="Delete"
+        handleSubmit={() => {
+          onDelete ? onDelete(agent.id || '') : defaultDelete(agent.id || '');
+          setDeleteConfirmation('INACTIVE');
+        }}
+        cancelLabel="Cancel"
+        variant="danger"
+      />
+    </div>
+  );
+}