🚧 WIP: Merge Dev Build (#4611)

* refactor: Agent CodeFiles, abortUpload WIP

* feat: code environment file upload

* refactor: useLazyEffect

* refactor:
- Add `watch` from `useFormContext` to check if code execution is enabled
- Disable file upload button if `agent_id` is not selected or code execution is disabled

* WIP: primeCodeFiles; refactor: rename sessionId to session_id for uniformity

* Refactor: Rename session_id to sessionId for uniformity in AuthService.js

* chore: bump @librechat/agents to version 1.7.1

* WIP: prime code files

* refactor: Update code env file upload method to use read stream

* feat: reupload code env file if no longer active

* refactor: isAssistantTool -> isEntityTool + address type issues

* feat: execute code tool hook

* refactor: Rename isPluginAuthenticated to checkPluginAuth in PluginController.js

* refactor: Update PluginController.js to use AuthType constant for comparison

* feat: verify tool authentication (execute_code)

* feat: enter librechat_code_api_key

* refactor: Remove unused imports in BookmarkForm.tsx

* feat: authenticate code tool

* refactor: Update Action.tsx to conditionally render the key and revoke key buttons

* refactor(Code/Action): prevent uncheck-able 'Run Code' capability when key is revoked

* refactor(Code/Action): Update Action.tsx to conditionally render the key and revoke key buttons

* fix: agent file upload edge cases

* chore: bump @librechat/agents

* fix: custom endpoint providerValue icon

* feat: ollama meta modal token values + context

* feat: ollama agents

* refactor: Update token models for Ollama models

* chore: Comment out CodeForm

* refactor: Update token models for Ollama and Meta models

client/src/components/SidePanel/Agents/AgentConfig.tsx

@@ -11,7 +11,6 @@ import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
 import Action from '~/components/SidePanel/Builder/Action';
 import { ToolSelectDialog } from '~/components/Tools';
 import { useLocalize, useAuthContext } from '~/hooks';
-import CapabilitiesForm from './CapabilitiesForm';
 import { processAgentOption } from '~/utils';
 import { Spinner } from '~/components/svg';
 import DeleteButton from './DeleteButton';
@@ -19,6 +18,7 @@ import AgentAvatar from './AgentAvatar';
 import FileSearch from './FileSearch';
 import ShareAgent from './ShareAgent';
 import AgentTool from './AgentTool';
+// import CodeForm from './Code/Form';
 import { Panel } from '~/common';
 
 const labelClass = 'mb-2 text-token-text-primary block font-medium';
@@ -92,6 +92,26 @@ export default function AgentConfig({
     return _agent.knowledge_files ?? [];
   }, [agent, agent_id, fileMap]);
 
+  const code_files = useMemo(() => {
+    if (typeof agent === 'string') {
+      return [];
+    }
+
+    if (agent?.id !== agent_id) {
+      return [];
+    }
+
+    if (agent.code_files) {
+      return agent.code_files;
+    }
+
+    const _agent = processAgentOption({
+      agent,
+      fileMap,
+    });
+    return _agent.code_files ?? [];
+  }, [agent, agent_id, fileMap]);
+
   /* Mutations */
   const update = useUpdateAgentMutation({
     onSuccess: (data) => {
@@ -293,7 +313,7 @@ export default function AgentConfig({
                 <div className="shadow-stroke relative flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-white text-black dark:bg-white">
                   <Icon
                     className="h-2/3 w-2/3"
-                    endpoint={provider as string}
+                    endpoint={providerValue as string}
                     endpointType={endpointType}
                     iconURL={endpointIconURL}
                   />
@@ -303,11 +323,8 @@ export default function AgentConfig({
             </div>
           </button>
         </div>
-        <CapabilitiesForm
-          codeEnabled={codeEnabled}
-          agentsConfig={agentsConfig}
-          retrievalEnabled={false}
-        />
+        {/* Code Execution */}
+        {/* {codeEnabled && <CodeForm agent_id={agent_id} files={code_files} />} */}
         {/* File Search */}
         {fileSearchEnabled && <FileSearch agent_id={agent_id} files={knowledge_files} />}
         {/* Agent Tools & Actions */}

client/src/components/SidePanel/Agents/AgentTool.tsx

@@ -12,7 +12,7 @@ import { cn } from '~/utils';
 export default function AgentTool({
   tool,
   allTools,
-  agent_id,
+  agent_id = '',
 }: {
   tool: string;
   allTools: TPlugin[];
@@ -28,7 +28,7 @@ export default function AgentTool({
   const removeTool = (tool: string) => {
     if (tool) {
       updateUserPlugins.mutate(
-        { pluginKey: tool, action: 'uninstall', auth: null, isAgentTool: true },
+        { pluginKey: tool, action: 'uninstall', auth: null, isEntityTool: true },
         {
           onError: (error: unknown) => {
             showToast({ message: `Error while deleting the tool: ${error}`, status: 'error' });

client/src/components/SidePanel/Agents/CapabilitiesForm.tsx

@@ -1,56 +0,0 @@
-import { useMemo } from 'react';
-// import { Capabilities } from 'librechat-data-provider';
-// import { useFormContext, useWatch } from 'react-hook-form';
-import type { TConfig } from 'librechat-data-provider';
-// import type { AgentForm } from '~/common';
-// import ImageVision from './ImageVision';
-import { useLocalize } from '~/hooks';
-import Retrieval from './Retrieval';
-// import CodeFiles from './CodeFiles';
-import Code from './Code';
-
-export default function CapabilitiesForm({
-  codeEnabled,
-  retrievalEnabled,
-  agentsConfig,
-}: {
-  codeEnabled?: boolean;
-  retrievalEnabled?: boolean;
-  agentsConfig?: TConfig | null;
-}) {
-  const localize = useLocalize();
-
-  // const methods = useFormContext<AgentForm>();
-  // const { control } = methods;
-  // const agent = useWatch({ control, name: 'agent' });
-  // const agent_id = useWatch({ control, name: 'id' });
-  // const files = useMemo(() => {
-  //   if (typeof agent === 'string') {
-  //     return [];
-  //   }
-  //   return agent?.code_files;
-  // }, [agent]);
-
-  const retrievalModels = useMemo(
-    () => new Set(agentsConfig?.retrievalModels ?? []),
-    [agentsConfig],
-  );
-
-  return (
-    <div className="mb-4">
-      <div className="mb-1.5 flex items-center">
-        <span>
-          <label className="text-token-text-primary block font-medium">
-            {localize('com_assistants_capabilities')}
-          </label>
-        </span>
-      </div>
-      <div className="flex flex-col items-start gap-2">
-        {codeEnabled === true && <Code />}
-        {retrievalEnabled === true && <Retrieval retrievalModels={retrievalModels} />}
-        {/* {imageVisionEnabled && version == 1 && <ImageVision />} */}
-        {/* {codeEnabled && <CodeFiles agent_id={agent_id} files={files} />} */}
-      </div>
-    </div>
-  );
-}

client/src/components/SidePanel/Agents/Code.tsx

@@ -1,70 +0,0 @@
-import { AgentCapabilities } from 'librechat-data-provider';
-import { useFormContext, Controller } from 'react-hook-form';
-import type { AgentForm } from '~/common';
-import {
-  Checkbox,
-  HoverCard,
-  HoverCardContent,
-  HoverCardPortal,
-  HoverCardTrigger,
-} from '~/components/ui';
-import { CircleHelpIcon } from '~/components/svg';
-import { useLocalize } from '~/hooks';
-import { ESide } from '~/common';
-
-export default function Code() {
-  const localize = useLocalize();
-  const methods = useFormContext<AgentForm>();
-  const { control, setValue, getValues } = methods;
-
-  return (
-    <>
-      <HoverCard openDelay={50}>
-        <div className="flex items-center">
-          <Controller
-            name={AgentCapabilities.execute_code}
-            control={control}
-            render={({ field }) => (
-              <Checkbox
-                {...field}
-                checked={field.value}
-                onCheckedChange={field.onChange}
-                className="relative float-left  mr-2 inline-flex h-4 w-4 cursor-pointer"
-                value={field.value.toString()}
-              />
-            )}
-          />
-          <button
-            type="button"
-            className="flex items-center space-x-2"
-            onClick={() =>
-              // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-              setValue(AgentCapabilities.execute_code, !getValues(AgentCapabilities.execute_code), {
-                shouldDirty: true,
-              })
-            }
-          >
-            <label
-              className="form-check-label text-token-text-primary w-full cursor-pointer"
-              htmlFor={AgentCapabilities.execute_code}
-            >
-              {localize('com_agents_execute_code')}
-            </label>
-            <HoverCardTrigger>
-              <CircleHelpIcon className="h-5 w-5 text-gray-500" />
-            </HoverCardTrigger>
-          </button>
-          <HoverCardPortal>
-            <HoverCardContent side={ESide.Top} className="w-80">
-              <div className="space-y-2">
-                <p className="text-sm text-text-secondary">
-                  {/* // TODO: add a Code Interpreter description */}
-                </p>
-              </div>
-            </HoverCardContent>
-          </HoverCardPortal>
-        </div>
-      </HoverCard>
-    </>
-  );
-}

client/src/components/SidePanel/Agents/Code/Action.tsx

@@ -0,0 +1,151 @@
+import { useState } from 'react';
+import { KeyRoundIcon } from 'lucide-react';
+import { AuthType, AgentCapabilities } from 'librechat-data-provider';
+import { useFormContext, Controller, useForm, useWatch } from 'react-hook-form';
+import type { AgentForm } from '~/common';
+import {
+  Input,
+  OGDialog,
+  Checkbox,
+  HoverCard,
+  HoverCardContent,
+  HoverCardPortal,
+  HoverCardTrigger,
+  Button,
+} from '~/components/ui';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
+import { useLocalize, useAuthCodeTool } from '~/hooks';
+import { CircleHelpIcon } from '~/components/svg';
+import { ESide } from '~/common';
+
+type ApiKeyFormData = {
+  apiKey: string;
+  authType?: string | AuthType;
+};
+
+export default function Action({ authType = '', isToolAuthenticated = false }) {
+  const localize = useLocalize();
+  const methods = useFormContext<AgentForm>();
+  const { control, setValue, getValues } = methods;
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const runCodeIsEnabled = useWatch({ control, name: AgentCapabilities.execute_code });
+
+  const { installTool, removeTool } = useAuthCodeTool({ isEntityTool: true });
+
+  const { reset, register, handleSubmit } = useForm<ApiKeyFormData>();
+  const isUserProvided = authType === AuthType.USER_PROVIDED;
+
+  const handleCheckboxChange = (checked: boolean) => {
+    if (isToolAuthenticated) {
+      setValue(AgentCapabilities.execute_code, checked, { shouldDirty: true });
+    } else if (runCodeIsEnabled) {
+      setValue(AgentCapabilities.execute_code, false, { shouldDirty: true });
+    } else {
+      setIsDialogOpen(true);
+    }
+  };
+
+  const onSubmit = (data: { apiKey: string }) => {
+    reset();
+    installTool(data.apiKey);
+    setIsDialogOpen(false);
+  };
+
+  const handleRevokeApiKey = () => {
+    reset();
+    removeTool();
+    setIsDialogOpen(false);
+  };
+
+  return (
+    <>
+      <HoverCard openDelay={50}>
+        <div className="flex items-center">
+          <Controller
+            name={AgentCapabilities.execute_code}
+            control={control}
+            render={({ field }) => (
+              <Checkbox
+                {...field}
+                checked={runCodeIsEnabled ? runCodeIsEnabled : isToolAuthenticated && field.value}
+                onCheckedChange={handleCheckboxChange}
+                className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
+                value={field.value.toString()}
+                disabled={runCodeIsEnabled ? false : !isToolAuthenticated}
+              />
+            )}
+          />
+          <button
+            type="button"
+            className="flex items-center space-x-2"
+            onClick={() => {
+              const value = !getValues(AgentCapabilities.execute_code);
+              handleCheckboxChange(value);
+            }}
+          >
+            <label
+              className="form-check-label text-token-text-primary w-full cursor-pointer"
+              htmlFor={AgentCapabilities.execute_code}
+            >
+              {localize('com_agents_execute_code')}
+            </label>
+          </button>
+          <div className="ml-2 flex gap-2">
+            {isUserProvided && (isToolAuthenticated || runCodeIsEnabled) && (
+              <button type="button" onClick={() => setIsDialogOpen(true)}>
+                <KeyRoundIcon className="h-5 w-5 text-text-primary" />
+              </button>
+            )}
+            <HoverCardTrigger>
+              <CircleHelpIcon className="h-5 w-5 text-gray-500" />
+            </HoverCardTrigger>
+          </div>
+          <HoverCardPortal>
+            <HoverCardContent side={ESide.Top} className="w-80">
+              <div className="space-y-2">
+                <p className="text-sm text-text-secondary">
+                  {/* // TODO: add a Code Interpreter description */}
+                </p>
+              </div>
+            </HoverCardContent>
+          </HoverCardPortal>
+        </div>
+      </HoverCard>
+      <OGDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <OGDialogTemplate
+          className="w-11/12 sm:w-1/4"
+          title={localize('com_agents_tool_not_authenticated')}
+          main={
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <Input
+                type="password"
+                placeholder="Enter API Key"
+                autoComplete="one-time-code"
+                readOnly={true}
+                onFocus={(e) => (e.target.readOnly = false)}
+                {...register('apiKey', { required: true })}
+              />
+            </form>
+          }
+          selection={{
+            selectHandler: handleSubmit(onSubmit),
+            selectClasses: 'bg-green-500 hover:bg-green-600 text-white',
+            selectText: localize('com_ui_save'),
+          }}
+          buttons={
+            isUserProvided &&
+            isToolAuthenticated && (
+              <Button
+                onClick={handleRevokeApiKey}
+                className="bg-destructive text-white transition-all duration-200 hover:bg-destructive/80"
+              >
+                {localize('com_ui_revoke')}
+              </Button>
+            )
+          }
+          showCancelButton={true}
+        />
+      </OGDialog>
+    </>
+  );
+}

client/src/components/SidePanel/Agents/Code/Files.tsx

@@ -1,21 +1,22 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
 import {
   EToolResources,
   EModelEndpoint,
   mergeFileConfig,
+  AgentCapabilities,
   fileConfig as defaultFileConfig,
 } from 'librechat-data-provider';
 import type { EndpointFileConfig } from 'librechat-data-provider';
-import type { ExtendedFile } from '~/common';
+import type { ExtendedFile, AgentForm } from '~/common';
+import { useFileHandling, useLocalize, useLazyEffect } from '~/hooks';
 import FileRow from '~/components/Chat/Input/Files/FileRow';
 import { useGetFileConfig } from '~/data-provider';
-import { useFileHandling } from '~/hooks/Files';
-import useLocalize from '~/hooks/useLocalize';
 import { useChatContext } from '~/Providers';
 
-const tool_resource = EToolResources.code_interpreter;
+const tool_resource = EToolResources.execute_code;
 
-export default function CodeFiles({
+export default function Files({
   agent_id,
   files: _files,
 }: {
@@ -24,22 +25,29 @@ export default function CodeFiles({
 }) {
   const localize = useLocalize();
   const { setFilesLoading } = useChatContext();
+  const { watch } = useFormContext<AgentForm>();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [files, setFiles] = useState<Map<string, ExtendedFile>>(new Map());
   const { data: fileConfig = defaultFileConfig } = useGetFileConfig({
     select: (data) => mergeFileConfig(data),
   });
-  const { handleFileChange } = useFileHandling({
+  const { abortUpload, handleFileChange } = useFileHandling({
+    fileSetter: setFiles,
     overrideEndpoint: EModelEndpoint.agents,
     additionalMetadata: { agent_id, tool_resource },
-    fileSetter: setFiles,
   });
 
-  useEffect(() => {
-    if (_files) {
-      setFiles(new Map(_files));
-    }
-  }, [_files]);
+  useLazyEffect(
+    () => {
+      if (_files) {
+        setFiles(new Map(_files));
+      }
+    },
+    [_files],
+    750,
+  );
+
+  const codeChecked = watch(AgentCapabilities.execute_code);
 
   const endpointFileConfig = fileConfig.endpoints[EModelEndpoint.agents] as
     | EndpointFileConfig
@@ -68,6 +76,7 @@ export default function CodeFiles({
           files={files}
           setFiles={setFiles}
           agent_id={agent_id}
+          abortUpload={abortUpload}
           tool_resource={tool_resource}
           setFilesLoading={setFilesLoading}
           Wrapper={({ children }) => <div className="flex flex-wrap gap-2">{children}</div>}
@@ -75,7 +84,7 @@ export default function CodeFiles({
         <div>
           <button
             type="button"
-            disabled={!agent_id}
+            disabled={!agent_id || codeChecked === false}
             className="btn btn-neutral border-token-border-light relative h-8 w-full rounded-lg font-medium"
             onClick={handleButtonClick}
           >
@@ -86,7 +95,7 @@ export default function CodeFiles({
                 style={{ display: 'none' }}
                 tabIndex={-1}
                 ref={fileInputRef}
-                disabled={!agent_id}
+                disabled={!agent_id || codeChecked === false}
                 onChange={handleFileChange}
               />
               {localize('com_ui_upload_files')}

client/src/components/SidePanel/Agents/Code/Form.tsx

@@ -0,0 +1,33 @@
+import { Tools } from 'librechat-data-provider';
+import type { ExtendedFile } from '~/common';
+import { useVerifyAgentToolAuth } from '~/data-provider';
+import { useLocalize } from '~/hooks';
+import Action from './Action';
+import Files from './Files';
+
+export default function CodeForm({
+  agent_id,
+  files,
+}: {
+  agent_id: string;
+  files?: [string, ExtendedFile][];
+}) {
+  const localize = useLocalize();
+  const { data } = useVerifyAgentToolAuth({ toolId: Tools.execute_code });
+
+  return (
+    <div className="mb-4">
+      <div className="mb-1.5 flex items-center">
+        <span>
+          <label className="text-token-text-primary block font-medium">
+            {localize('com_assistants_capabilities')}
+          </label>
+        </span>
+      </div>
+      <div className="flex flex-col items-start gap-2">
+        <Action authType={data?.message} isToolAuthenticated={data?.authenticated} />
+        <Files agent_id={agent_id} files={files} />
+      </div>
+    </div>
+  );
+}

client/src/components/SidePanel/Agents/FileSearch.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import {
   EModelEndpoint,
@@ -9,12 +9,11 @@ import {
   fileConfig as defaultFileConfig,
 } from 'librechat-data-provider';
 import type { ExtendedFile, AgentForm } from '~/common';
+import { useFileHandling, useLocalize, useLazyEffect } from '~/hooks';
 import FileRow from '~/components/Chat/Input/Files/FileRow';
 import FileSearchCheckbox from './FileSearchCheckbox';
 import { useGetFileConfig } from '~/data-provider';
 import { AttachmentIcon } from '~/components/svg';
-import { useFileHandling } from '~/hooks/Files';
-import useLocalize from '~/hooks/useLocalize';
 import { useChatContext } from '~/Providers';
 
 export default function FileSearch({
@@ -40,18 +39,22 @@ export default function FileSearch({
     fileSetter: setFiles,
   });
 
-  useEffect(() => {
-    if (_files) {
-      setFiles(new Map(_files));
-    }
-  }, [_files]);
+  useLazyEffect(
+    () => {
+      if (_files) {
+        setFiles(new Map(_files));
+      }
+    },
+    [_files],
+    750,
+  );
 
   const fileSearchChecked = watch(AgentCapabilities.file_search);
 
   const endpointFileConfig = fileConfig.endpoints[EModelEndpoint.agents];
-  const disabled = endpointFileConfig.disabled ?? false;
+  const isUploadDisabled = endpointFileConfig.disabled ?? false;
 
-  if (disabled === true) {
+  if (isUploadDisabled) {
     return null;
   }
 

client/src/components/SidePanel/Builder/AssistantTool.tsx

@@ -12,7 +12,7 @@ import { cn } from '~/utils';
 export default function AssistantTool({
   tool,
   allTools,
-  assistant_id,
+  assistant_id = '',
 }: {
   tool: string;
   allTools: TPlugin[];
@@ -28,7 +28,7 @@ export default function AssistantTool({
   const removeTool = (tool: string) => {
     if (tool) {
       updateUserPlugins.mutate(
-        { pluginKey: tool, action: 'uninstall', auth: null, isAssistantTool: true },
+        { pluginKey: tool, action: 'uninstall', auth: null, isEntityTool: true },
         {
           onError: (error: unknown) => {
             showToast({ message: `Error while deleting the tool: ${error}`, status: 'error' });
@@ -78,7 +78,7 @@ export default function AssistantTool({
           <OGDialogTrigger asChild>
             <button
               type="button"
-              className="transition-colors flex h-9 w-9 min-w-9 items-center justify-center rounded-lg duration-200 hover:bg-gray-200 dark:hover:bg-gray-700"
+              className="flex h-9 w-9 min-w-9 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-gray-200 dark:hover:bg-gray-700"
             >
               <TrashIcon />
             </button>