🤖 feat: Add Agent Duplication Functionality with Permission (#5022)

* 🤖 feat: Add Agent Duplication Functionality with Permission * 🐛 fix: Enhance Agent Duplication Logic and Filter Sensitive Data * refactor(agents/v1): reorganized variables and error logging * refactor: remove duplication permission * chore: update librechat-data-provider version to 0.7.64 * fix: optimize agent duplication --------- Co-authored-by: Marco Beretta <[email protected]>
danny-avila · Dec 18, 2024 · 18ad89b · 18ad89b
1 parent 16eed5f
commit 18ad89b
Show file tree

Hide file tree

Showing 17 changed files with 270 additions and 38 deletions.
diff --git a/api/models/Agent.js b/api/models/Agent.js
@@ -20,7 +20,7 @@ const Agent = mongoose.model('agent', agentSchema);
  * @throws {Error} If the agent creation fails.
  */
 const createAgent = async (agentData) => {
-  return await Agent.create(agentData);
+  return (await Agent.create(agentData)).toObject();
 };
 
 /**

diff --git a/api/server/controllers/agents/v1.js b/api/server/controllers/agents/v1.js
@@ -1,6 +1,12 @@
 const fs = require('fs').promises;
 const { nanoid } = require('nanoid');
-const { FileContext, Constants, Tools, SystemRoles } = require('librechat-data-provider');
+const {
+  FileContext,
+  Constants,
+  Tools,
+  SystemRoles,
+  actionDelimiter,
+} = require('librechat-data-provider');
 const {
   getAgent,
   createAgent,
@@ -10,6 +16,7 @@ const {
 } = require('~/models/Agent');
 const { uploadImageBuffer, filterFile } = require('~/server/services/Files/process');
 const { getStrategyFunctions } = require('~/server/services/Files/strategies');
+const { updateAction, getActions } = require('~/models/Action');
 const { getProjectByName } = require('~/models/Project');
 const { updateAgentProjects } = require('~/models/Agent');
 const { deleteFileByFilter } = require('~/models/File');
@@ -173,6 +180,99 @@ const updateAgentHandler = async (req, res) => {
   }
 };
 
+/**
+ * Duplicates an Agent based on the provided ID.
+ * @route POST /Agents/:id/duplicate
+ * @param {object} req - Express Request
+ * @param {object} req.params - Request params
+ * @param {string} req.params.id - Agent identifier.
+ * @returns {Agent} 201 - success response - application/json
+ */
+const duplicateAgentHandler = async (req, res) => {
+  const { id } = req.params;
+  const { id: userId } = req.user;
+  const sensitiveFields = ['api_key', 'oauth_client_id', 'oauth_client_secret'];
+
+  try {
+    const agent = await getAgent({ id });
+    if (!agent) {
+      return res.status(404).json({
+        error: 'Agent not found',
+        status: 'error',
+      });
+    }
+
+    const {
+      _id: __id,
+      id: _id,
+      author: _author,
+      createdAt: _createdAt,
+      updatedAt: _updatedAt,
+      ...cloneData
+    } = agent;
+
+    const newAgentId = `agent_${nanoid()}`;
+    const newAgentData = Object.assign(cloneData, {
+      id: newAgentId,
+      author: userId,
+    });
+
+    const newActionsList = [];
+    const originalActions = (await getActions({ agent_id: id }, true)) ?? [];
+    const promises = [];
+
+    /**
+     * Duplicates an action and returns the new action ID.
+     * @param {Action} action
+     * @returns {Promise<string>}
+     */
+    const duplicateAction = async (action) => {
+      const newActionId = nanoid();
+      const [domain] = action.action_id.split(actionDelimiter);
+      const fullActionId = `${domain}${actionDelimiter}${newActionId}`;
+
+      const newAction = await updateAction(
+        { action_id: newActionId },
+        {
+          metadata: action.metadata,
+          agent_id: newAgentId,
+          user: userId,
+        },
+      );
+
+      const filteredMetadata = { ...newAction.metadata };
+      for (const field of sensitiveFields) {
+        delete filteredMetadata[field];
+      }
+
+      newAction.metadata = filteredMetadata;
+      newActionsList.push(newAction);
+      return fullActionId;
+    };
+
+    for (const action of originalActions) {
+      promises.push(
+        duplicateAction(action).catch((error) => {
+          logger.error('[/agents/:id/duplicate] Error duplicating Action:', error);
+        }),
+      );
+    }
+
+    const agentActions = await Promise.all(promises);
+    newAgentData.actions = agentActions;
+    const newAgent = await createAgent(newAgentData);
+
+    return res.status(201).json({
+      agent: newAgent,
+      actions: newActionsList,
+    });
+  } catch (error) {
+    logger.error('[/Agents/:id/duplicate] Error duplicating Agent:', error);
+
+    res.status(500).json({ error: error.message });
+  }
+};
+
 /**
  * Deletes an Agent based on the provided ID.
  * @route DELETE /Agents/:id
@@ -292,6 +392,7 @@ module.exports = {
   createAgent: createAgentHandler,
   getAgent: getAgentHandler,
   updateAgent: updateAgentHandler,
+  duplicateAgent: duplicateAgentHandler,
   deleteAgent: deleteAgentHandler,
   getListAgents: getListAgentsHandler,
   uploadAgentAvatar: uploadAgentAvatarHandler,

diff --git a/api/server/routes/agents/v1.js b/api/server/routes/agents/v1.js
@@ -62,6 +62,14 @@ router.get('/:id', checkAgentAccess, v1.getAgent);
  */
 router.patch('/:id', checkGlobalAgentShare, v1.updateAgent);
 
+/**
+ * Duplicates an agent.
+ * @route POST /agents/:id/duplicate
+ * @param {string} req.params.id - Agent identifier.
+ * @returns {Agent} 201 - Success response - application/json
+ */
+router.post('/:id/duplicate', checkAgentCreate, v1.duplicateAgent);
+
 /**
  * Deletes an agent.
  * @route DELETE /agents/:id

diff --git a/client/src/components/Nav/NavToggle.tsx b/client/src/components/Nav/NavToggle.tsx
@@ -1,4 +1,4 @@
-import { useLocalize, useLocalStorage } from '~/hooks';
+import { useLocalize } from '~/hooks';
 import { TooltipAnchor } from '~/components/ui';
 import { cn } from '~/utils';
 

diff --git a/client/src/components/SidePanel/Agents/AdminSettings.tsx b/client/src/components/SidePanel/Agents/AdminSettings.tsx
@@ -142,7 +142,7 @@ const AdminSettings = () => {
         <Button
           size={'sm'}
           variant={'outline'}
-          className="btn btn-neutral border-token-border-light relative my-1 h-9 w-full gap-1 rounded-lg font-medium"
+          className="btn btn-neutral border-token-border-light relative mb-4 h-9 w-full gap-1 rounded-lg font-medium"
         >
           <ShieldEllipsis className="cursor-pointer" />
           {localize('com_ui_admin_settings')}

diff --git a/client/src/components/SidePanel/Agents/AgentConfig.tsx b/client/src/components/SidePanel/Agents/AgentConfig.tsx
@@ -18,11 +18,12 @@ import { useToastContext, useFileMapContext } from '~/Providers';
 import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
 import Action from '~/components/SidePanel/Builder/Action';
 import { ToolSelectDialog } from '~/components/Tools';
+import DuplicateAgent from './DuplicateAgent';
 import { processAgentOption } from '~/utils';
 import AdminSettings from './AdminSettings';
-import { Spinner } from '~/components/svg';
 import DeleteButton from './DeleteButton';
 import AgentAvatar from './AgentAvatar';
+import { Spinner } from '~/components';
 import FileSearch from './FileSearch';
 import ShareAgent from './ShareAgent';
 import AgentTool from './AgentTool';
@@ -421,6 +422,7 @@ export default function AgentConfig({
               isCollaborative={agent?.isCollaborative}
             />
           )}
+          {agent && agent.author === user?.id && <DuplicateAgent agent_id={agent_id} />}
           {/* Submit Button */}
           <button
             className="btn btn-primary focus:shadow-outline flex h-9 w-full items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"

diff --git a/client/src/components/SidePanel/Agents/AgentPanel.tsx b/client/src/components/SidePanel/Agents/AgentPanel.tsx
@@ -20,6 +20,7 @@ import { createProviderOption } from '~/utils';
 import { useToastContext } from '~/Providers';
 import AgentConfig from './AgentConfig';
 import AgentSelect from './AgentSelect';
+import { Button } from '~/components';
 import ModelPanel from './ModelPanel';
 import { Panel } from '~/common';
 
@@ -208,7 +209,7 @@ export default function AgentPanel({
         className="scrollbar-gutter-stable h-auto w-full flex-shrink-0 overflow-x-hidden"
         aria-label="Agent configuration form"
       >
-        <div className="flex w-full flex-wrap">
+        <div className="mt-2 flex w-full flex-wrap gap-2">
           <Controller
             name="agent"
             control={control}
@@ -225,15 +226,17 @@ export default function AgentPanel({
           />
           {/* Select Button */}
           {agent_id && (
-            <button
-              className="btn btn-primary focus:shadow-outline mx-2 mt-1 h-[40px] rounded bg-green-500 px-4 py-2 font-semibold text-white hover:bg-green-400 focus:border-green-500 focus:outline-none focus:ring-0"
-              type="button"
+            <Button
+              variant="submit"
               disabled={!agent_id}
-              onClick={handleSelectAgent}
+              onClick={(e) => {
+                e.preventDefault();
+                handleSelectAgent();
+              }}
               aria-label="Select agent"
             >
               {localize('com_ui_select')}
-            </button>
+            </Button>
           )}
         </div>
         {!canEditAgent && (

diff --git a/client/src/components/SidePanel/Agents/AgentPanelSkeleton.tsx b/client/src/components/SidePanel/Agents/AgentPanelSkeleton.tsx
@@ -6,8 +6,8 @@ export default function AgentPanelSkeleton() {
     <div className="scrollbar-gutter-stable h-auto w-full flex-shrink-0 overflow-x-hidden">
       {/* Agent Select and Button */}
       <div className="mt-1 flex w-full gap-2">
-        <Skeleton className="h-[40px] w-3/4 rounded" />
-        <Skeleton className="h-[40px] w-1/4 rounded" />
+        <Skeleton className="h-[40px] w-4/5 rounded-lg" />
+        <Skeleton className="h-[40px] w-1/5 rounded-lg" />
       </div>
 
       <div className="h-auto bg-white px-4 pb-8 pt-3 dark:bg-transparent">
@@ -17,52 +17,60 @@ export default function AgentPanelSkeleton() {
             <Skeleton className="relative h-20 w-20 rounded-full" />
           </div>
           {/* Name */}
-          <Skeleton className="mb-2 h-5 w-1/5 rounded" />
-          <Skeleton className="mb-1 h-[40px] w-full rounded" />
-          <Skeleton className="h-3 w-1/4 rounded" />
+          <Skeleton className="mb-2 h-5 w-1/5 rounded-lg" />
+          <Skeleton className="mb-1 h-[40px] w-full rounded-lg" />
+          <Skeleton className="h-3 w-1/4 rounded-lg" />
         </div>
 
         {/* Description */}
         <div className="mb-4">
-          <Skeleton className="mb-2 h-5 w-1/4 rounded" />
-          <Skeleton className="h-[40px] w-full rounded" />
+          <Skeleton className="mb-2 h-5 w-1/4 rounded-lg" />
+          <Skeleton className="h-[40px] w-full rounded-lg" />
         </div>
 
         {/* Instructions */}
         <div className="mb-6">
-          <Skeleton className="mb-2 h-5 w-1/4 rounded" />
-          <Skeleton className="h-[100px] w-full rounded" />
+          <Skeleton className="mb-2 h-5 w-1/4 rounded-lg" />
+          <Skeleton className="h-[100px] w-full rounded-lg" />
         </div>
 
         {/* Model and Provider */}
         <div className="mb-6">
-          <Skeleton className="mb-2 h-5 w-1/4 rounded" />
-          <Skeleton className="h-[40px] w-full rounded" />
+          <Skeleton className="mb-2 h-5 w-1/4 rounded-lg" />
+          <Skeleton className="h-[40px] w-full rounded-lg" />
         </div>
 
         {/* Capabilities */}
         <div className="mb-6">
-          <Skeleton className="mb-2 h-5 w-1/4 rounded" />
-          <Skeleton className="mb-2 h-[40px] w-full rounded" />
-          <Skeleton className="h-[40px] w-full rounded" />
+          <Skeleton className="mb-2 h-5 w-1/4 rounded-lg" />
+          <Skeleton className="mb-2 h-5 w-36 rounded-lg" />
+          <Skeleton className="mb-4 h-[35px] w-full rounded-lg" />
+          <Skeleton className="mb-2 h-5 w-24 rounded-lg" />
+          <Skeleton className="h-[35px] w-full rounded-lg" />
         </div>
 
         {/* Tools & Actions */}
         <div className="mb-6">
-          <Skeleton className="mb-2 h-5 w-1/4 rounded" />
-          <Skeleton className="mb-2 h-[40px] w-full rounded" />
-          <Skeleton className="mb-2 h-[40px] w-full rounded" />
+          <Skeleton className="mb-2 h-5 w-1/4 rounded-lg" />
+          <Skeleton className="mb-2 h-[35px] w-full rounded-lg" />
+          <Skeleton className="mb-2 h-[35px] w-full rounded-lg" />
           <div className="flex space-x-2">
-            <Skeleton className="h-8 w-1/2 rounded" />
-            <Skeleton className="h-8 w-1/2 rounded" />
+            <Skeleton className="h-8 w-1/2 rounded-lg" />
+            <Skeleton className="h-8 w-1/2 rounded-lg" />
           </div>
         </div>
 
+        {/* Admin Settings */}
+        <div className="mb-6">
+          <Skeleton className="h-[35px] w-full rounded-lg" />
+        </div>
+
         {/* Bottom Buttons */}
         <div className="flex items-center justify-end gap-2">
-          <Skeleton className="h-[40px] w-[100px] rounded" />
-          <Skeleton className="h-[40px] w-[100px] rounded" />
-          <Skeleton className="h-[40px] w-[100px] rounded" />
+          <Skeleton className="h-[35px] w-16 rounded-lg" />
+          <Skeleton className="h-[35px] w-16 rounded-lg" />
+          <Skeleton className="h-[35px] w-16 rounded-lg" />
+          <Skeleton className="h-[35px] w-full rounded-lg" />
         </div>
       </div>
     </div>

diff --git a/client/src/components/SidePanel/Agents/AgentSelect.tsx b/client/src/components/SidePanel/Agents/AgentSelect.tsx
@@ -185,8 +185,8 @@ export default function AgentSelect({
         hasAgentValue ? 'text-gray-500' : '',
       )}
       className={cn(
-        'mt-1 rounded-md dark:border-gray-700 dark:bg-gray-850',
-        'z-50 flex h-[40px] w-full flex-none items-center justify-center px-4 hover:cursor-pointer hover:border-green-500 focus:border-gray-400',
+        'rounded-md dark:border-gray-700 dark:bg-gray-850',
+        'z-50 flex h-[40px] w-full flex-none items-center justify-center truncate px-4 hover:cursor-pointer hover:border-green-500 focus:border-gray-400',
       )}
       renderOption={() => (
         <span className="flex items-center gap-1.5 truncate">

diff --git a/client/src/components/SidePanel/Agents/DuplicateAgent.tsx b/client/src/components/SidePanel/Agents/DuplicateAgent.tsx
@@ -0,0 +1,50 @@
+import { CopyIcon } from 'lucide-react';
+import { useDuplicateAgentMutation } from '~/data-provider';
+import { cn, removeFocusOutlines } from '~/utils';
+import { useToastContext } from '~/Providers';
+import { useLocalize } from '~/hooks';
+
+export default function DuplicateAgent({ agent_id }: { agent_id: string }) {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+
+  const duplicateAgent = useDuplicateAgentMutation({
+    onSuccess: () => {
+      showToast({
+        message: localize('com_ui_agent_duplicated'),
+        status: 'success',
+      });
+    },
+    onError: (error) => {
+      console.error(error);
+      showToast({
+        message: localize('com_ui_agent_duplicate_error'),
+        status: 'error',
+      });
+    },
+  });
+
+  if (!agent_id) {
+    return null;
+  }
+
+  const handleDuplicate = () => {
+    duplicateAgent.mutate({ agent_id });
+  };
+
+  return (
+    <button
+      className={cn(
+        'btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium',
+        removeFocusOutlines,
+      )}
+      aria-label={localize('com_ui_duplicate') + ' ' + localize('com_ui_agent')}
+      type="button"
+      onClick={handleDuplicate}
+    >
+      <div className="flex w-full items-center justify-center gap-2 text-primary">
+        <CopyIcon className="size-4" />
+      </div>
+    </button>
+  );
+}
diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '~/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {