🤖 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 <81851188+berry-13@users.noreply.github.com>
2026-01-22 02:06:12 +01:00 · 2024-12-17 19:47:39 -05:00 · 2024-12-17 19:47:39 -05:00 · 18ad89be2c
commit 18ad89be2c
parent 16eed5f32d
17 changed files with 270 additions and 38 deletions
--- 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';

--- 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')}
--- 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"
--- 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 && (
--- 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>
--- 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">
--- 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>
+  );
+}
--- 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: {
--- a/client/src/data-provider/Agents/mutations.ts
+++ b/client/src/data-provider/Agents/mutations.ts
@ -121,6 +121,43 @@ export const useDeleteAgentMutation = (
  );
 };

+/**
+ * Hook for duplicating an agent
+ */
+export const useDuplicateAgentMutation = (
+  options?: t.DuplicateAgentMutationOptions,
+): UseMutationResult<{ agent: t.Agent; actions: t.Action[] }, Error, t.DuplicateAgentBody> => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{ agent: t.Agent; actions: t.Action[] }, Error, t.DuplicateAgentBody>(
+    (params: t.DuplicateAgentBody) => dataService.duplicateAgent(params),
+    {
+      onMutate: options?.onMutate,
+      onError: options?.onError,
+      onSuccess: ({ agent, actions }, variables, context) => {
+        const listRes = queryClient.getQueryData<t.AgentListResponse>([
+          QueryKeys.agents,
+          defaultOrderQuery,
+        ]);
+
+        if (listRes) {
+          const currentAgents = [agent, ...listRes.data];
+          queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
+            ...listRes,
+            data: currentAgents,
+          });
+        }
+
+        const existingActions = queryClient.getQueryData<t.Action[]>([QueryKeys.actions]) || [];
+
+        queryClient.setQueryData<t.Action[]>([QueryKeys.actions], existingActions.concat(actions));
+
+        return options?.onSuccess?.({ agent, actions }, variables, context);
+      },
+    },
+  );
+};
+
 /**
 * Hook for uploading an agent avatar
 */
--- a/client/src/localization/languages/Eng.ts
+++ b/client/src/localization/languages/Eng.ts
@ -361,6 +361,8 @@ export default {
  com_ui_agents_allow_share_global: 'Allow sharing Agents to all users',
  com_ui_agents_allow_use: 'Allow using Agents',
  com_ui_agents_allow_create: 'Allow creating Agents',
+  com_ui_agent_duplicated: 'Agent duplicated successfully',
+  com_ui_agent_duplicate_error: 'There was an error duplicating the agent',
  com_ui_prompt_already_shared_to_all: 'This prompt is already shared to all users',
  com_ui_description_placeholder: 'Optional: Enter a description to display for the prompt',
  com_ui_command_placeholder: 'Optional: Enter a command for the prompt or name will be used.',
@ -428,6 +430,8 @@ export default {
  com_ui_no_bookmarks: 'it seems like you have no bookmarks yet. Click on a chat and add a new one',
  com_ui_no_conversation_id: 'No conversation ID found',
  com_ui_add_multi_conversation: 'Add multi-conversation',
+  com_ui_duplicate: 'Duplicate',
+  com_ui_duplicate_agent_confirm: 'Are you sure you want to duplicate this agent?',
  com_auth_error_login:
    'Unable to login with the information provided. Please check your credentials and try again.',
  com_auth_error_login_rl: