🖥️ 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
This commit is contained in:
Danny Avila 2025-04-09 16:11:16 -04:00 committed by GitHub
parent 5d668748f9
commit 24c0433dcf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 311 additions and 48 deletions

View file

@ -1,4 +1,4 @@
import React, { memo, useCallback } from 'react';
import React, { memo, useRef, useMemo, useEffect, useCallback } from 'react';
import { useRecoilState } from 'recoil';
import { Constants, EModelEndpoint, LocalStorageKeys } from 'librechat-data-provider';
import { useAvailableToolsQuery } from '~/data-provider';
@ -10,8 +10,12 @@ import { useLocalize } from '~/hooks';
function MCPSelect({ conversationId }: { conversationId?: string | null }) {
const localize = useLocalize();
const hasSetFetched = useRef(false);
const key = conversationId ?? Constants.NEW_CONVO;
const [ephemeralAgent, setEphemeralAgent] = useRecoilState(ephemeralAgentByConvoId(key));
const mcpState = useMemo(() => {
return ephemeralAgent?.mcp ?? [];
}, [ephemeralAgent?.mcp]);
const setSelectedValues = useCallback(
(values: string[] | null | undefined) => {
if (!values) {
@ -29,10 +33,10 @@ function MCPSelect({ conversationId }: { conversationId?: string | null }) {
);
const [mcpValues, setMCPValues] = useLocalStorage<string[]>(
`${LocalStorageKeys.LAST_MCP_}${key}`,
ephemeralAgent?.mcp ?? [],
mcpState,
setSelectedValues,
);
const { data: mcpServers } = useAvailableToolsQuery(EModelEndpoint.agents, {
const { data: mcpServers, isFetched } = useAvailableToolsQuery(EModelEndpoint.agents, {
select: (data) => {
const serverNames = new Set<string>();
data.forEach((tool) => {
@ -45,6 +49,20 @@ function MCPSelect({ conversationId }: { conversationId?: string | null }) {
},
});
useEffect(() => {
if (hasSetFetched.current) {
return;
}
if (!isFetched) {
return;
}
hasSetFetched.current = true;
if ((mcpServers?.length ?? 0) > 0) {
return;
}
setMCPValues([]);
}, [isFetched, setMCPValues, mcpServers?.length]);
const renderSelectedValues = useCallback(
(values: string[], placeholder?: string) => {
if (values.length === 0) {
@ -70,8 +88,8 @@ function MCPSelect({ conversationId }: { conversationId?: string | null }) {
defaultSelectedValues={mcpValues ?? []}
renderSelectedValues={renderSelectedValues}
placeholder={localize('com_ui_mcp_servers')}
popoverClassName="min-w-[200px]"
className="badge-icon h-full min-w-[150px]"
popoverClassName="min-w-fit"
className="badge-icon min-w-fit"
selectIcon={<MCPIcon className="icon-md text-text-primary" />}
selectItemsClassName="border border-blue-600/50 bg-blue-500/10 hover:bg-blue-700/10"
selectClassName="group relative inline-flex items-center justify-center md:justify-start gap-1.5 rounded-full border border-border-medium text-sm font-medium transition-shadow md:w-full size-9 p-2 md:p-3 bg-surface-chat shadow-sm hover:bg-surface-hover hover:shadow-md active:shadow-inner"