🖥️ feat: Code Interpreter API for Non-Agent Endpoints (#6803)

* fix: Prevent parsing 'undefined' string in useLocalStorage initialization

* feat: first pass, code interpreter badge

* feat: Integrate API key authentication and default checked value in Code Interpreter Badge

* refactor: Rename showMCPServers to showEphemeralBadges and update related components, memoize values in useChatBadges

* refactor: Enhance AttachFileChat to support ephemeral agents in file attachment logic

* fix: Add baseURL configuration option to legacy function call

* refactor: Update dependency array in useDragHelpers to include handleFiles

* refactor: Update isEphemeralAgent function to accept optional endpoint parameter

* refactor: Update file handling to support ephemeral agents in AttachFileMenu and useDragHelpers

* fix: improve compatibility issues with OpenAI usage field handling in createRun function

* refactor: usage field compatibility

* fix: ensure mcp servers are no longer "selected" if mcp servers are now unavailable

client/src/hooks/Files/useDragHelpers.ts

@@ -4,22 +4,28 @@ import { useRecoilValue } from 'recoil';
 import { NativeTypes } from 'react-dnd-html5-backend';
 import { useQueryClient } from '@tanstack/react-query';
 import {
-  isAgentsEndpoint,
-  EModelEndpoint,
-  AgentCapabilities,
+  Constants,
   QueryKeys,
+  EModelEndpoint,
+  isAgentsEndpoint,
+  isEphemeralAgent,
+  AgentCapabilities,
 } from 'librechat-data-provider';
 import type * as t from 'librechat-data-provider';
 import type { DropTargetMonitor } from 'react-dnd';
 import useFileHandling from './useFileHandling';
-import store from '~/store';
+import store, { ephemeralAgentByConvoId } from '~/store';
 
 export default function useDragHelpers() {
   const queryClient = useQueryClient();
-  const { handleFiles } = useFileHandling();
   const [showModal, setShowModal] = useState(false);
   const [draggedFiles, setDraggedFiles] = useState<File[]>([]);
   const conversation = useRecoilValue(store.conversationByIndex(0)) || undefined;
+  const key = useMemo(
+    () => conversation?.conversationId ?? Constants.NEW_CONVO,
+    [conversation?.conversationId],
+  );
+  const ephemeralAgent = useRecoilValue(ephemeralAgentByConvoId(key));
 
   const handleOptionSelect = (toolResource: string | undefined) => {
     handleFiles(draggedFiles, toolResource);
@@ -28,10 +34,16 @@ export default function useDragHelpers() {
   };
 
   const isAgents = useMemo(
-    () => isAgentsEndpoint(conversation?.endpoint),
-    [conversation?.endpoint],
+    () =>
+      isAgentsEndpoint(conversation?.endpoint) ||
+      isEphemeralAgent(conversation?.endpoint, ephemeralAgent),
+    [conversation?.endpoint, ephemeralAgent],
   );
 
+  const { handleFiles } = useFileHandling({
+    overrideEndpoint: isAgents ? EModelEndpoint.agents : undefined,
+  });
+
   const [{ canDrop, isOver }, drop] = useDrop(
     () => ({
       accept: [NativeTypes.FILE],
@@ -61,7 +73,7 @@ export default function useDragHelpers() {
         canDrop: monitor.canDrop(),
       }),
     }),
-    [],
+    [handleFiles],
   );
 
   return {

client/src/hooks/useChatBadges.ts

@@ -1,8 +1,9 @@
+import { useMemo } from 'react';
 import { useRecoilCallback } from 'recoil';
 import { useRecoilValue } from 'recoil';
 import { MessageCircleDashed, Box } from 'lucide-react';
 import type { BadgeItem } from '~/common';
-import { useLocalize } from '~/hooks';
+import { useLocalize, TranslationKeys } from '~/hooks';
 import store from '~/store';
 
 interface ChatBadgeConfig {
@@ -25,15 +26,22 @@ const badgeConfig: ReadonlyArray<ChatBadgeConfig> = [
 export default function useChatBadges(): BadgeItem[] {
   const localize = useLocalize();
   const activeBadges = useRecoilValue(store.chatBadges) as Array<{ id: string }>;
-  const activeBadgeIds = new Set(activeBadges.map((badge) => badge.id));
-
-  return badgeConfig.map((cfg) => ({
-    id: cfg.id,
-    label: localize(cfg.label),
-    icon: cfg.icon,
-    atom: cfg.atom,
-    isAvailable: activeBadgeIds.has(cfg.id),
-  }));
+  const activeBadgeIds = useMemo(
+    () => new Set(activeBadges.map((badge) => badge.id)),
+    [activeBadges],
+  );
+  const allBadges = useMemo(() => {
+    return (
+      badgeConfig.map((cfg) => ({
+        id: cfg.id,
+        label: localize(cfg.label as TranslationKeys),
+        icon: cfg.icon,
+        atom: cfg.atom,
+        isAvailable: activeBadgeIds.has(cfg.id),
+      })) || []
+    );
+  }, [activeBadgeIds, localize]);
+  return allBadges;
 }
 
 export function useResetChatBadges() {

client/src/hooks/useLocalStorageAlt.tsx

@@ -21,7 +21,7 @@ export default function useLocalStorage<T>(
       localStorage.setItem(key, JSON.stringify(defaultValue));
     }
 
-    const initialValue = item ? JSON.parse(item) : defaultValue;
+    const initialValue = item && item !== 'undefined' ? JSON.parse(item) : defaultValue;
     setValue(initialValue);
     if (globalSetState) {
       globalSetState(initialValue);