Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-16 16:30:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

🚧 chore: merge latest dev build to main repo (#3844)

Browse source 
* agents - phase 1 (#30)

* chore: copy assistant files

* feat: frontend and data-provider

* feat: backend get endpoint test

* fix(MessageEndpointIcon): switched to AgentName and AgentAvatar

* fix: small fixes

* fix: agent endpoint config

* fix: show Agent Builder

* chore: install agentus

* chore: initial scaffolding for agents

* fix: updated Assistant logic to Agent Logic for some Agent components

* WIP first pass, demo of agent package

* WIP: initial backend infra for agents

* fix: agent list error

* wip: agents routing

* chore: Refactor useSSE hook to handle different data events

* wip: correctly emit events

* chore: Update @librechat/agentus npm dependency to version 1.0.9

* remove comment

* first pass: streaming agent text

* chore: Remove @librechat/agentus root-level workspace npm dependency

* feat: Agent Schema and Model

* fix: content handling fixes

* fix: content message save

* WIP: new content data

* fix: run step issue with tool calls

* chore: Update @librechat/agentus npm dependency to version 1.1.5

* feat: update controller and agent routes

* wip: initial backend tool and tool error handling support

* wip: tool chunks

* chore: Update @librechat/agentus npm dependency to version 1.1.7

* chore: update tool_call typing, add test conditions and logs

* fix: create agent

* fix: create agent

* first pass: render completed content parts

* fix: remove logging, fix step handler typing

* chore: Update @librechat/agentus npm dependency to version 1.1.9

* refactor: cleanup maps on unmount

* chore: Update BaseClient.js to safely count tokens for string, number, and boolean values

* fix: support subsequent messages with tool_calls

* chore: export order

* fix: select agent

* fix: tool call types and handling

* chore: switch to anthropic for testing

* fix: AgentSelect

* refactor: experimental: OpenAIClient to use array for intermediateReply

* fix(useSSE): revert old condition for streaming legacy client tokens

* fix: lint

* revert `agent_id` to `id`

* chore: update localization keys for agent-related components

* feat: zod schema handling for actions

* refactor(actions): if no params, no zodSchema

* chore: Update @librechat/agentus npm dependency to version 1.2.1

* feat: first pass, actions

* refactor: empty schema for actions without params

* feat: Update createRun function to accept additional options

* fix: message payload formatting; feat: add more client options

* fix: ToolCall component rendering when action has no args but has output

* refactor(ToolCall): allow non-stringy args

* WIP: first pass, correctly formatted tool_calls between providers

* refactor: Remove duplicate import of 'roles' module

* refactor: Exclude 'vite.config.ts' from TypeScript compilation

* refactor: fix agent related types
> - no need to use endpoint/model fields for identifying agent metadata
> - add `provider` distinction for agent-configured 'endpoint'
- no need for agent-endpoint map
- reduce complexity of tools as functions into tools as string[]
- fix types related to above changes
- reduce unnecessary variables for queries/mutations and corresponding react-query keys

* refactor: Add tools and tool_kwargs fields to agent schema

* refactor: Remove unused code and update dependencies

* refactor: Update updateAgentHandler to use req.body directly

* refactor: Update AgentSelect component to use localized hooks

* refactor: Update agent schema to include tools and provider fields

* refactor(AgentPanel): add scrollbar gutter, add provider field to form, fix agent schema required values

* refactor: Update AgentSwitcher component to use selectedAgentId instead of selectedAgent

* refactor: Update AgentPanel component to include alternateName import and defaultAgentFormValues

* refactor(SelectDropDown): allow setting value as option while still supporting legacy usage (string values only)

* refactor: SelectDropdown changes - Only necessary when the available values are objects with label/value fields and the selected value is expected to be a string.

* refactor: TypeError issues and handle provider as option

* feat: Add placeholder for provider selection in AgentPanel component

* refactor: Update agent schema to include author and provider fields

* fix: show expected 'create agent' placeholder when creating agent

* chore: fix localization strings, hide capabilities form for now

* chore: typing

* refactor: import order and use compact agents schema for now

* chore: typing

* refactor: Update AgentForm type to use AgentCapabilities

* fix agent form agent selection issues

* feat: responsive agent selection

* fix: Handle cancelled fetch in useSelectAgent hook

* fix: reset agent form on accordion close/open

* feat: Add agent_id to default conversation for agents endpoint

* feat: agents endpoint request handling

* refactor: reset conversation model on agent select

* refactor: add `additional_instructions` to conversation schema, organize other fields

* chore: casing

* chore: types

* refactor(loadAgentTools): explicitly pass agent_id, do not pass `model` to loadAgentTools for now, load action sets by agent_id

* WIP: initial draft of real agent client initialization

* WIP: first pass, anthropic agent requests

* feat: remember last selected agent

* feat: openai and azure connected

* fix: prioritize agent model for runs unless an explicit override model is passed from client

* feat: Agent Actions

* fix: save agent id to convo

* feat: model panel (#29)

* feat: model panel

* bring back comments

* fix: method still null

* fix: AgentPanel FormContext

* feat: add more parameters

* fix: style issues; refactor: Agent Controller

* fix: cherry-pick

* fix: Update AgentAvatar component to use AssistantIcon instead of BrainCircuit

* feat: OGDialog for delete agent; feat(assistant): update Agent types, introduced `model_parameters`

* feat: icon and general `model_parameters` update

* feat: use react-hook-form better

* fix: agent builder form reset issue when switching panels

* refactor: modularize agent builder form

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

* fix: AgentPanel and ModelPanel type issues and use `useFormContext` and `watch` instead of `methods` directly and `useWatch`.

* fix: tool call issues due to invalid input (anthropic) of empty string

* fix: handle empty text in Part component

---------

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>

* refactor: remove form ModelPanel and fixed nested ternary expressions in AgentConfig

* fix: Model Parameters not saved correctly

* refactor: remove console log

* feat: avatar upload and get for Agents (#36)

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>

* chore: update to public package

* fix: typing, optional chaining

* fix: cursor not showing for content parts

* chore: conditionally enable agents

* ci: fix azure test

* ci: fix frontend tests, fix eslint api

* refactor: Remove unused errorContentPart variable

* continue of the agent message PR (#40)

* last fixes

* fix: agentMap

* pr merge test  (#41)

* fix: model icon not fetching correctly

* remove console logs

* feat: agent name

* refactor: pass documentsMap as a prop to allow re-render of assistant form

* refactor: pass documentsMap as a prop to allow re-render of assistant form

* chore: Bump version to 0.7.419

* fix: TypeError: Cannot read properties of undefined (reading 'id')

* refactor: update AgentSwitcher component to use ControlCombobox instead of Combobox

---------

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>
This commit is contained in:
Danny Avila 2024-08-31 16:33:51 -04:00 • committed by GitHub
parent 618be4bf2b
commit a0291ed155
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
141 changed files with 14473 additions and 5714 deletions
Download patch file Download diff file Expand all files Collapse all files

57
api/app/clients/BaseClient.js
View file

@ -34,6 +34,12 @@ class BaseClient {
this.userMessagePromise;
/** @type {ClientDatabaseSavePromise} */
this.responsePromise;
/** @type {string} */
this.user;
/** @type {string} */
this.conversationId;
/** @type {string} */
this.responseMessageId;
}
setOptions() {
@ -161,6 +167,8 @@ class BaseClient {
this.currentMessages[this.currentMessages.length - 1].messageId = head;
}
this.responseMessageId = responseMessageId;
return {
...opts,
user,
@ -347,7 +355,12 @@ class BaseClient {
};
}
async handleContextStrategy({ instructions, orderedMessages, formattedMessages }) {
async handleContextStrategy({
instructions,
orderedMessages,
formattedMessages,
buildTokenMap = true,
}) {
let _instructions;
let tokenCount;
@ -417,19 +430,23 @@ class BaseClient {
maxContextTokens: this.maxContextTokens,
});
let tokenCountMap = orderedWithInstructions.reduce((map, message, index) => {
const { messageId } = message;
if (!messageId) {
/** @type {Record<string, number> | undefined} */
let tokenCountMap;
if (buildTokenMap) {
tokenCountMap = orderedWithInstructions.reduce((map, message, index) => {
const { messageId } = message;
if (!messageId) {
return map;
}
if (shouldSummarize && index === summaryIndex && !usePrevSummary) {
map.summaryMessage = { ...summaryMessage, messageId, tokenCount: summaryTokenCount };
}
map[messageId] = orderedWithInstructions[index].tokenCount;
return map;
}
if (shouldSummarize && index === summaryIndex && !usePrevSummary) {
map.summaryMessage = { ...summaryMessage, messageId, tokenCount: summaryTokenCount };
}
map[messageId] = orderedWithInstructions[index].tokenCount;
return map;
}, {});
}, {});
}
const promptTokens = this.maxContextTokens - remainingContextTokens;
@ -542,13 +559,19 @@ class BaseClient {
isEdited,
model: this.modelOptions.model,
sender: this.sender,
text: addSpaceIfNeeded(generation) + completion,
promptTokens,
iconURL: this.options.iconURL,
endpoint: this.options.endpoint,
...(this.metadata ?? {}),
};
if (typeof completion === 'string') {
responseMessage.text = addSpaceIfNeeded(generation) + completion;
} else if (completion) {
responseMessage.text = '';
responseMessage.content = completion;
}
if (
tokenCountMap &&
this.recordTokenUsage &&
@ -868,8 +891,12 @@ class BaseClient {
processValue(nestedValue);
}
} else {
} else if (typeof value === 'string') {
numTokens += this.getTokenCount(value);
} else if (typeof value === 'number') {
numTokens += this.getTokenCount(value.toString());
} else if (typeof value === 'boolean') {
numTokens += this.getTokenCount(value.toString());
}
};

19
api/app/clients/OpenAIClient.js
View file

@ -1023,7 +1023,7 @@ ${convo}
async chatCompletion({ payload, onProgress, abortController = null }) {
let error = null;
const errorCallback = (err) => (error = err);
let intermediateReply = '';
const intermediateReply = [];
try {
if (!abortController) {
abortController = new AbortController();
@ -1217,19 +1217,19 @@ ${convo}
}
if (typeof finalMessage.content !== 'string' || finalMessage.content.trim() === '') {
finalChatCompletion.choices[0].message.content = intermediateReply;
finalChatCompletion.choices[0].message.content = intermediateReply.join('');
}
})
.on('finalMessage', (message) => {
if (message?.role !== 'assistant') {
stream.messages.push({ role: 'assistant', content: intermediateReply });
stream.messages.push({ role: 'assistant', content: intermediateReply.join('') });
UnexpectedRoleError = true;
}
});
for await (const chunk of stream) {
const token = chunk.choices[0]?.delta?.content || '';
intermediateReply += token;
intermediateReply.push(token);
onProgress(token);
if (abortController.signal.aborted) {
stream.controller.abort();
@ -1285,11 +1285,12 @@ ${convo}
}
if (typeof message.content !== 'string' || message.content.trim() === '') {
const reply = intermediateReply.join('');
logger.debug(
'[OpenAIClient] chatCompletion: using intermediateReply due to empty message.content',
{ intermediateReply },
{ intermediateReply: reply },
);
return intermediateReply;
return reply;
}
return message.content;
@ -1298,7 +1299,7 @@ ${convo}
err?.message?.includes('abort') ||
(err instanceof OpenAI.APIError && err?.message?.includes('abort'))
) {
return intermediateReply;
return intermediateReply.join('');
}
if (
err?.message?.includes(
@ -1313,10 +1314,10 @@ ${convo}
(err instanceof OpenAI.OpenAIError && err?.message?.includes('missing finish_reason'))
) {
logger.error('[OpenAIClient] Known OpenAI error:', err);
return intermediateReply;
return intermediateReply.join('');
} else if (err instanceof OpenAI.APIError) {
if (intermediateReply) {
return intermediateReply;
return intermediateReply.join('');
} else {
throw err;
}

2
api/app/clients/llm/createLLM.js
View file

@ -8,7 +8,7 @@ const { isEnabled } = require('~/server/utils');
* @param {Object} options - The options for creating the LLM.
* @param {ModelOptions} options.modelOptions - The options specific to the model, including modelName, temperature, presence_penalty, frequency_penalty, and other model-related settings.
* @param {ConfigOptions} options.configOptions - Configuration options for the API requests, including proxy settings and custom headers.
* @param {Callbacks} options.callbacks - Callback functions for managing the lifecycle of the LLM, including token buffers, context, and initial message count.
* @param {Callbacks} [options.callbacks] - Callback functions for managing the lifecycle of the LLM, including token buffers, context, and initial message count.
* @param {boolean} [options.streaming=false] - Determines if the LLM should operate in streaming mode.
* @param {string} options.openAIApiKey - The API key for OpenAI, used for authentication.
* @param {AzureOptions} [options.azure={}] - Optional Azure-specific configurations. If provided, Azure configurations take precedence over OpenAI configurations.

78
api/app/clients/prompts/formatMessages.js
View file

@ -1,4 +1,5 @@
const { EModelEndpoint } = require('librechat-data-provider');
const { ToolMessage } = require('@langchain/core/messages');
const { EModelEndpoint, ContentTypes } = require('librechat-data-provider');
const { HumanMessage, AIMessage, SystemMessage } = require('langchain/schema');
/**
@ -14,11 +15,11 @@ const { HumanMessage, AIMessage, SystemMessage } = require('langchain/schema');
*/
const formatVisionMessage = ({ message, image_urls, endpoint }) => {
if (endpoint === EModelEndpoint.anthropic) {
message.content = [...image_urls, { type: 'text', text: message.content }];
message.content = [...image_urls, { type: ContentTypes.TEXT, text: message.content }];
return message;
}
message.content = [{ type: 'text', text: message.content }, ...image_urls];
message.content = [{ type: ContentTypes.TEXT, text: message.content }, ...image_urls];
return message;
};
@ -51,7 +52,7 @@ const formatMessage = ({ message, userName, assistantName, endpoint, langChain =
_role = roleMapping[lc_id[2]];
}
const role = _role ?? (sender && sender?.toLowerCase() === 'user' ? 'user' : 'assistant');
const content = text ?? _content ?? '';
const content = _content ?? text ?? '';
const formattedMessage = {
role,
content,
@ -131,4 +132,71 @@ const formatFromLangChain = (message) => {
};
};
module.exports = { formatMessage, formatLangChainMessages, formatFromLangChain };
/**
* Formats an array of messages for LangChain, handling tool calls and creating ToolMessage instances.
*
* @param {Array<Partial<TMessage>>} payload - The array of messages to format.
* @returns {Array<(HumanMessage|AIMessage|SystemMessage|ToolMessage)>} - The array of formatted LangChain messages, including ToolMessages for tool calls.
*/
const formatAgentMessages = (payload) => {
const messages = [];
for (const message of payload) {
if (message.role !== 'assistant') {
messages.push(formatMessage({ message, langChain: true }));
continue;
}
let currentContent = [];
let lastAIMessage = null;
for (const part of message.content) {
if (part.type === ContentTypes.TEXT && part.tool_call_ids) {
// If there's pending content, add it as an AIMessage
if (currentContent.length > 0) {
messages.push(new AIMessage({ content: currentContent }));
currentContent = [];
}
// Create a new AIMessage with this text and prepare for tool calls
lastAIMessage = new AIMessage({
content: part.text || '',
});
messages.push(lastAIMessage);
} else if (part.type === ContentTypes.TOOL_CALL) {
if (!lastAIMessage) {
throw new Error('Invalid tool call structure: No preceding AIMessage with tool_call_ids');
}
// Note: `tool_calls` list is defined when constructed by `AIMessage` class, and outputs should be excluded from it
const { output, ...tool_call } = part.tool_call;
lastAIMessage.tool_calls.push(tool_call);
// Add the corresponding ToolMessage
messages.push(
new ToolMessage({
tool_call_id: tool_call.id,
name: tool_call.name,
content: output,
}),
);
} else {
currentContent.push(part);
}
}
if (currentContent.length > 0) {
messages.push(new AIMessage({ content: currentContent }));
}
}
return messages;
};
module.exports = {
formatMessage,
formatFromLangChain,
formatAgentMessages,
formatLangChainMessages,
};

78
api/app/clients/tools/structured/TavilySearch.js Normal file
View file

@ -0,0 +1,78 @@
const { z } = require('zod');
const { tool } = require('@langchain/core/tools');
const { getEnvironmentVariable } = require('@langchain/core/utils/env');
function createTavilySearchTool(fields = {}) {
const envVar = 'TAVILY_API_KEY';
const override = fields.override ?? false;
const apiKey = fields.apiKey ?? getApiKey(envVar, override);
const kwargs = fields?.kwargs ?? {};
function getApiKey(envVar, override) {
const key = getEnvironmentVariable(envVar);
if (!key && !override) {
throw new Error(`Missing ${envVar} environment variable.`);
}
return key;
}
return tool(
async (input) => {
const { query, ...rest } = input;
const requestBody = {
api_key: apiKey,
query,
...rest,
...kwargs,
};
const response = await fetch('https://api.tavily.com/search', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody),
});
const json = await response.json();
if (!response.ok) {
throw new Error(`Request failed with status ${response.status}: ${json.error}`);
}
return JSON.stringify(json);
},
{
name: 'tavily_search_results_json',
description:
'A search engine optimized for comprehensive, accurate, and trusted results. Useful for when you need to answer questions about current events.',
schema: z.object({
query: z.string().min(1).describe('The search query string.'),
max_results: z
.number()
.min(1)
.max(10)
.optional()
.describe('The maximum number of search results to return. Defaults to 5.'),
search_depth: z
.enum(['basic', 'advanced'])
.optional()
.describe(
'The depth of the search, affecting result quality and response time (`basic` or `advanced`). Default is basic for quick results and advanced for indepth high quality results but longer response time. Advanced calls equals 2 requests.',
),
include_images: z
.boolean()
.optional()
.describe(
'Whether to include a list of query-related images in the response. Default is False.',
),
include_answer: z
.boolean()
.optional()
.describe('Whether to include answers in the search results. Default is False.'),
}),
},
);
}
module.exports = createTavilySearchTool;

6
api/models/Action.js
View file

@ -12,7 +12,7 @@ const Action = mongoose.model('action', actionSchema);
* @param {string} searchParams.user - The user ID of the action's author.
* @param {Object} updateData - An object containing the properties to update.
* @param {mongoose.ClientSession} [session] - The transaction session to use.
* @returns {Promise<Object>} The updated or newly created action document as a plain object.
* @returns {Promise<Action>} The updated or newly created action document as a plain object.
*/
const updateAction = async (searchParams, updateData, session = null) => {
const options = { new: true, upsert: true, session };
@ -24,7 +24,7 @@ const updateAction = async (searchParams, updateData, session = null) => {
*
* @param {Object} searchParams - The search parameters to find matching actions.
* @param {boolean} includeSensitive - Flag to include sensitive data in the metadata.
* @returns {Promise<Array<Object>>} A promise that resolves to an array of action documents as plain objects.
* @returns {Promise<Array<Action>>} A promise that resolves to an array of action documents as plain objects.
*/
const getActions = async (searchParams, includeSensitive = false) => {
const actions = await Action.find(searchParams).lean();
@ -55,7 +55,7 @@ const getActions = async (searchParams, includeSensitive = false) => {
* @param {string} searchParams.action_id - The ID of the action to delete.
* @param {string} searchParams.user - The user ID of the action's author.
* @param {mongoose.ClientSession} [session] - The transaction session to use (optional).
* @returns {Promise<Object>} A promise that resolves to the deleted action document as a plain object, or null if no document was found.
* @returns {Promise<Action>} A promise that resolves to the deleted action document as a plain object, or null if no document was found.
*/
const deleteAction = async (searchParams, session = null) => {
const options = session ? { session } : {};

84
api/models/Agent.js Normal file
View file

@ -0,0 +1,84 @@
const mongoose = require('mongoose');
const agentSchema = require('./schema/agent');
const Agent = mongoose.model('agent', agentSchema);
/**
* Create an agent with the provided data.
* @param {Object} agentData - The agent data to create.
* @returns {Promise<Agent>} The created agent document as a plain object.
* @throws {Error} If the agent creation fails.
*/
const createAgent = async (agentData) => {
return await Agent.create(agentData);
};
/**
* Get an agent document based on the provided ID.
*
* @param {Object} searchParameter - The search parameters to find the agent to update.
* @param {string} searchParameter.id - The ID of the agent to update.
* @param {string} searchParameter.author - The user ID of the agent's author.
* @returns {Promise<Agent|null>} The agent document as a plain object, or null if not found.
*/
const getAgent = async (searchParameter) => await Agent.findOne(searchParameter).lean();
/**
* Update an agent with new data without overwriting existing properties,
* or create a new agent if it doesn't exist, within a transaction session if provided.
*
* @param {Object} searchParameter - The search parameters to find the agent to update.
* @param {string} searchParameter.id - The ID of the agent to update.
* @param {string} searchParameter.author - The user ID of the agent's author.
* @param {Object} updateData - An object containing the properties to update.
* @param {mongoose.ClientSession} [session] - The transaction session to use (optional).
* @returns {Promise<Agent>} The updated or newly created agent document as a plain object.
*/
const updateAgent = async (searchParameter, updateData, session = null) => {
const options = { new: true, upsert: true, session };
return await Agent.findOneAndUpdate(searchParameter, updateData, options).lean();
};
/**
* Deletes an agent based on the provided ID.
*
* @param {Object} searchParameter - The search parameters to find the agent to delete.
* @param {string} searchParameter.id - The ID of the agent to delete.
* @param {string} searchParameter.author - The user ID of the agent's author.
* @returns {Promise<void>} Resolves when the agent has been successfully deleted.
*/
const deleteAgent = async (searchParameter) => {
return await Agent.findOneAndDelete(searchParameter);
};
/**
* Get all agents.
* @param {Object} searchParameter - The search parameters to find matching agents.
* @param {string} searchParameter.author - The user ID of the agent's author.
* @returns {Promise<Object>} A promise that resolves to an object containing the agents data and pagination info.
*/
const getListAgents = async (searchParameter) => {
const agents = await Agent.find(searchParameter, {
id: 1,
name: 1,
avatar: 1,
}).lean();
const hasMore = agents.length > 0;
const firstId = agents.length > 0 ? agents[0].id : null;
const lastId = agents.length > 0 ? agents[agents.length - 1].id : null;
return {
data: agents,
has_more: hasMore,
first_id: firstId,
last_id: lastId,
};
};
module.exports = {
createAgent,
getAgent,
updateAgent,
deleteAgent,
getListAgents,
};

88
api/models/Message.js
View file

@ -35,82 +35,34 @@ const idSchema = z.string().uuid();
* @throws {Error} If there is an error in saving the message.
*/
async function saveMessage(req, params, metadata) {
if (!req?.user?.id) {
throw new Error('User not authenticated');
}
const validConvoId = idSchema.safeParse(params.conversationId);
if (!validConvoId.success) {
logger.warn(`Invalid conversation ID: ${params.conversationId}`);
logger.info(`---\`saveMessage\` context: ${metadata?.context}`);
logger.info(`---Invalid conversation ID Params: ${JSON.stringify(params, null, 2)}`);
return;
}
try {
if (!req || !req.user || !req.user.id) {
throw new Error('User not authenticated');
}
const {
text,
error,
model,
files,
plugin,
sender,
plugins,
iconURL,
endpoint,
isEdited,
messageId,
unfinished,
tokenCount,
newMessageId,
finish_reason,
conversationId,
parentMessageId,
isCreatedByUser,
} = params;
const validConvoId = idSchema.safeParse(conversationId);
if (!validConvoId.success) {
logger.warn(`Invalid conversation ID: ${conversationId}`);
if (metadata && metadata?.context) {
logger.info(`---\`saveMessage\` context: ${metadata.context}`);
}
logger.info(`---Invalid conversation ID Params:
${JSON.stringify(params, null, 2)}
`);
return;
}
const update = {
...params,
user: req.user.id,
iconURL,
endpoint,
messageId: newMessageId || messageId,
conversationId,
parentMessageId,
sender,
text,
isCreatedByUser,
isEdited,
finish_reason,
error,
unfinished,
tokenCount,
plugin,
plugins,
model,
messageId: params.newMessageId || params.messageId,
};
if (files) {
update.files = files;
}
const message = await Message.findOneAndUpdate({ messageId, user: req.user.id }, update, {
upsert: true,
new: true,
});
const message = await Message.findOneAndUpdate(
{ messageId: params.messageId, user: req.user.id },
update,
{ upsert: true, new: true },
);
return message.toObject();
} catch (err) {
logger.error('Error saving message:', err);
if (metadata && metadata?.context) {
logger.info(`---\`saveMessage\` context: ${metadata.context}`);
}
logger.info(`---\`saveMessage\` context: ${metadata?.context}`);
throw err;
}
}

1
api/models/schema/action.js
View file

@ -39,6 +39,7 @@ const actionSchema = new Schema({
default: 'action_prototype',
},
settings: Schema.Types.Mixed,
agent_id: String,
assistant_id: String,
metadata: {
api_key: String, // private, encrypted

66
api/models/schema/agent.js Normal file
View file

@ -0,0 +1,66 @@
const mongoose = require('mongoose');
const agentSchema = mongoose.Schema(
{
id: {
type: String,
index: true,
required: true,
},
name: {
type: String,
},
description: {
type: String,
},
instructions: {
type: String,
},
avatar: {
type: {
filepath: String,
source: String,
},
default: undefined,
},
provider: {
type: String,
required: true,
},
model: {
type: String,
required: true,
},
model_parameters: {
type: Object,
},
access_level: {
type: Number,
},
tools: {
type: [String],
default: undefined,
},
tool_kwargs: {
type: [{ type: mongoose.Schema.Types.Mixed }],
},
file_ids: {
type: [String],
default: undefined,
},
actions: {
type: [String],
default: undefined,
},
author: {
type: mongoose.Schema.Types.ObjectId,
ref: 'User',
required: true,
},
},
{
timestamps: true,
},
);
module.exports = agentSchema;

2
api/package.json
View file

@ -40,8 +40,10 @@
"@keyv/mongo": "^2.1.8",
"@keyv/redis": "^2.8.1",
"@langchain/community": "^0.0.46",
"@langchain/core": "^0.2.18",
"@langchain/google-genai": "^0.0.11",
"@langchain/google-vertexai": "^0.0.17",
"@librechat/agents": "^1.4.1",
"axios": "^1.3.4",
"bcryptjs": "^2.4.3",
"cheerio": "^1.0.0-rc.12",

5
api/server/controllers/ModelController.js
View file

@ -2,6 +2,9 @@ const { CacheKeys } = require('librechat-data-provider');
const { loadDefaultModels, loadConfigModels } = require('~/server/services/Config');
const { getLogStores } = require('~/cache');
/**
* @param {ServerRequest} req
*/
const getModelsConfig = async (req) => {
const cache = getLogStores(CacheKeys.CONFIG_STORE);
let modelsConfig = await cache.get(CacheKeys.MODELS_CONFIG);
@ -14,7 +17,7 @@ const getModelsConfig = async (req) => {
/**
* Loads the models from the config.
* @param {Express.Request} req - The Express request object.
* @param {ServerRequest} req - The Express request object.
* @returns {Promise<TModelsConfig>} The models config.
*/
async function loadModels(req) {

83
api/server/controllers/agents/callbacks.js Normal file
View file

@ -0,0 +1,83 @@
const { GraphEvents, ToolEndHandler, ChatModelStreamHandler } = require('@librechat/agents');
/** @typedef {import('@librechat/agents').EventHandler} EventHandler */
/** @typedef {import('@librechat/agents').ChatModelStreamHandler} ChatModelStreamHandler */
/** @typedef {import('@librechat/agents').GraphEvents} GraphEvents */
/**
* Sends message data in Server Sent Events format.
* @param {ServerResponse} res - The server response.
* @param {{ data: string | Record<string, unknown>, event?: string }} event - The message event.
* @param {string} event.event - The type of event.
* @param {string} event.data - The message to be sent.
*/
const sendEvent = (res, event) => {
if (typeof event.data === 'string' && event.data.length === 0) {
return;
}
res.write(`event: message\ndata: ${JSON.stringify(event)}\n\n`);
};
/**
* Get default handlers for stream events.
* @param {{ res?: ServerResponse }} options - The options object.
* @returns {Record<string, t.EventHandler>} The default handlers.
* @throws {Error} If the request is not found.
*/
function getDefaultHandlers({ res }) {
if (!res) {
throw new Error('Request not found');
}
const handlers = {
// [GraphEvents.CHAT_MODEL_END]: new ModelEndHandler(),
[GraphEvents.TOOL_END]: new ToolEndHandler(),
[GraphEvents.CHAT_MODEL_STREAM]: new ChatModelStreamHandler(),
[GraphEvents.ON_RUN_STEP]: {
/**
* Handle ON_RUN_STEP event.
* @param {string} event - The event name.
* @param {StreamEventData} data - The event data.
*/
handle: (event, data) => {
sendEvent(res, { event, data });
},
},
[GraphEvents.ON_RUN_STEP_DELTA]: {
/**
* Handle ON_RUN_STEP_DELTA event.
* @param {string} event - The event name.
* @param {StreamEventData} data - The event data.
*/
handle: (event, data) => {
sendEvent(res, { event, data });
},
},
[GraphEvents.ON_RUN_STEP_COMPLETED]: {
/**
* Handle ON_RUN_STEP_COMPLETED event.
* @param {string} event - The event name.
* @param {StreamEventData & { result: ToolEndData }} data - The event data.
*/
handle: (event, data) => {
sendEvent(res, { event, data });
},
},
[GraphEvents.ON_MESSAGE_DELTA]: {
/**
* Handle ON_MESSAGE_DELTA event.
* @param {string} event - The event name.
* @param {StreamEventData} data - The event data.
*/
handle: (event, data) => {
sendEvent(res, { event, data });
},
},
};
return handlers;
}
module.exports = {
sendEvent,
getDefaultHandlers,
};

462
api/server/controllers/agents/client.js Normal file
View file

@ -0,0 +1,462 @@
// const { HttpsProxyAgent } = require('https-proxy-agent');
// const {
// Constants,
// ImageDetail,
// EModelEndpoint,
// resolveHeaders,
// validateVisionModel,
// mapModelToAzureConfig,
// } = require('librechat-data-provider');
const { Callback } = require('@librechat/agents');
const {
EModelEndpoint,
providerEndpointMap,
removeNullishValues,
} = require('librechat-data-provider');
const {
extractBaseURL,
// constructAzureURL,
// genAzureChatCompletion,
} = require('~/utils');
const {
formatMessage,
formatAgentMessages,
createContextHandlers,
} = require('~/app/clients/prompts');
const Tokenizer = require('~/server/services/Tokenizer');
const BaseClient = require('~/app/clients/BaseClient');
// const { sleep } = require('~/server/utils');
const { createRun } = require('./run');
const { logger } = require('~/config');
class AgentClient extends BaseClient {
constructor(options = {}) {
super(options);
/** @type {'discard' | 'summarize'} */
this.contextStrategy = 'discard';
/** @deprecated @type {true} - Is a Chat Completion Request */
this.isChatCompletion = true;
const { maxContextTokens, modelOptions = {}, ...clientOptions } = options;
this.modelOptions = modelOptions;
this.maxContextTokens = maxContextTokens;
this.options = Object.assign({ endpoint: EModelEndpoint.agents }, clientOptions);
}
setOptions(options) {
logger.info('[api/server/controllers/agents/client.js] setOptions', options);
}
/**
*
* Checks if the model is a vision model based on request attachments and sets the appropriate options:
* - Sets `this.modelOptions.model` to `gpt-4-vision-preview` if the request is a vision request.
* - Sets `this.isVisionModel` to `true` if vision request.
* - Deletes `this.modelOptions.stop` if vision request.
* @param {MongoFile[]} attachments
*/
checkVisionRequest(attachments) {
logger.info(
'[api/server/controllers/agents/client.js #checkVisionRequest] not implemented',
attachments,
);
// if (!attachments) {
// return;
// }
// const availableModels = this.options.modelsConfig?.[this.options.endpoint];
// if (!availableModels) {
// return;
// }
// let visionRequestDetected = false;
// for (const file of attachments) {
// if (file?.type?.includes('image')) {
// visionRequestDetected = true;
// break;
// }
// }
// if (!visionRequestDetected) {
// return;
// }
// this.isVisionModel = validateVisionModel({ model: this.modelOptions.model, availableModels });
// if (this.isVisionModel) {
// delete this.modelOptions.stop;
// return;
// }
// for (const model of availableModels) {
// if (!validateVisionModel({ model, availableModels })) {
// continue;
// }
// this.modelOptions.model = model;
// this.isVisionModel = true;
// delete this.modelOptions.stop;
// return;
// }
// if (!availableModels.includes(this.defaultVisionModel)) {
// return;
// }
// if (!validateVisionModel({ model: this.defaultVisionModel, availableModels })) {
// return;
// }
// this.modelOptions.model = this.defaultVisionModel;
// this.isVisionModel = true;
// delete this.modelOptions.stop;
}
getSaveOptions() {
return removeNullishValues(
Object.assign(
{
agent_id: this.options.agent.id,
modelLabel: this.options.modelLabel,
maxContextTokens: this.options.maxContextTokens,
resendFiles: this.options.resendFiles,
imageDetail: this.options.imageDetail,
spec: this.options.spec,
},
this.modelOptions,
{
model: undefined,
// TODO:
// would need to be override settings; otherwise, model needs to be undefined
// model: this.override.model,
// instructions: this.override.instructions,
// additional_instructions: this.override.additional_instructions,
},
),
);
}
getBuildMessagesOptions(opts) {
return {
instructions: opts.instructions,
additional_instructions: opts.additional_instructions,
};
}
async buildMessages(
messages,
parentMessageId,
{ instructions = null, additional_instructions = null },
opts,
) {
let orderedMessages = this.constructor.getMessagesForConversation({
messages,
parentMessageId,
summary: this.shouldSummarize,
});
let payload;
/** @type {{ role: string; name: string; content: string } | undefined} */
let systemMessage;
/** @type {number | undefined} */
let promptTokens;
/** @type {string} */
let systemContent = `${instructions ?? ''}${additional_instructions ?? ''}`;
if (this.options.attachments) {
const attachments = await this.options.attachments;
if (this.message_file_map) {
this.message_file_map[orderedMessages[orderedMessages.length - 1].messageId] = attachments;
} else {
this.message_file_map = {
[orderedMessages[orderedMessages.length - 1].messageId]: attachments,
};
}
const files = await this.addImageURLs(
orderedMessages[orderedMessages.length - 1],
attachments,
);
this.options.attachments = files;
}
if (this.message_file_map) {
this.contextHandlers = createContextHandlers(
this.options.req,
orderedMessages[orderedMessages.length - 1].text,
);
}
const formattedMessages = orderedMessages.map((message, i) => {
const formattedMessage = formatMessage({
message,
userName: this.options?.name,
assistantName: this.options?.modelLabel,
});
const needsTokenCount = this.contextStrategy && !orderedMessages[i].tokenCount;
/* If tokens were never counted, or, is a Vision request and the message has files, count again */
if (needsTokenCount || (this.isVisionModel && (message.image_urls || message.files))) {
orderedMessages[i].tokenCount = this.getTokenCountForMessage(formattedMessage);
}
/* If message has files, calculate image token cost */
// if (this.message_file_map && this.message_file_map[message.messageId]) {
// const attachments = this.message_file_map[message.messageId];
// for (const file of attachments) {
// if (file.embedded) {
// this.contextHandlers?.processFile(file);
// continue;
// }
// orderedMessages[i].tokenCount += this.calculateImageTokenCost({
// width: file.width,
// height: file.height,
// detail: this.options.imageDetail ?? ImageDetail.auto,
// });
// }
// }
return formattedMessage;
});
if (this.contextHandlers) {
this.augmentedPrompt = await this.contextHandlers.createContext();
systemContent = this.augmentedPrompt + systemContent;
}
if (systemContent) {
systemContent = `${systemContent.trim()}`;
systemMessage = {
role: 'system',
name: 'instructions',
content: systemContent,
};
if (this.contextStrategy) {
const instructionTokens = this.getTokenCountForMessage(systemMessage);
if (instructionTokens >= 0) {
const firstMessageTokens = orderedMessages[0].tokenCount ?? 0;
orderedMessages[0].tokenCount = firstMessageTokens + instructionTokens;
}
}
}
if (this.contextStrategy) {
({ payload, promptTokens, messages } = await this.handleContextStrategy({
orderedMessages,
formattedMessages,
/* prefer usage_metadata from final message */
buildTokenMap: false,
}));
}
const result = {
prompt: payload,
promptTokens,
messages,
};
if (promptTokens >= 0 && typeof opts?.getReqData === 'function') {
opts.getReqData({ promptTokens });
}
return result;
}
/** @type {sendCompletion} */
async sendCompletion(payload, opts = {}) {
this.modelOptions.user = this.user;
return await this.chatCompletion({
payload,
onProgress: opts.onProgress,
abortController: opts.abortController,
});
}
// async recordTokenUsage({ promptTokens, completionTokens, context = 'message' }) {
// await spendTokens(
// {
// context,
// model: this.modelOptions.model,
// conversationId: this.conversationId,
// user: this.user ?? this.options.req.user?.id,
// endpointTokenConfig: this.options.endpointTokenConfig,
// },
// { promptTokens, completionTokens },
// );
// }
async chatCompletion({ payload, abortController = null }) {
try {
if (!abortController) {
abortController = new AbortController();
}
const baseURL = extractBaseURL(this.completionsUrl);
logger.debug('[api/server/controllers/agents/client.js] chatCompletion', {
baseURL,
payload,
});
// if (this.useOpenRouter) {
// opts.defaultHeaders = {
// 'HTTP-Referer': 'https://librechat.ai',
// 'X-Title': 'LibreChat',
// };
// }
// if (this.options.headers) {
// opts.defaultHeaders = { ...opts.defaultHeaders, ...this.options.headers };
// }
// if (this.options.proxy) {
// opts.httpAgent = new HttpsProxyAgent(this.options.proxy);
// }
// if (this.isVisionModel) {
// modelOptions.max_tokens = 4000;
// }
// /** @type {TAzureConfig | undefined} */
// const azureConfig = this.options?.req?.app?.locals?.[EModelEndpoint.azureOpenAI];
// if (
// (this.azure && this.isVisionModel && azureConfig) ||
// (azureConfig && this.isVisionModel && this.options.endpoint === EModelEndpoint.azureOpenAI)
// ) {
// const { modelGroupMap, groupMap } = azureConfig;
// const {
// azureOptions,
// baseURL,
// headers = {},
// serverless,
// } = mapModelToAzureConfig({
// modelName: modelOptions.model,
// modelGroupMap,
// groupMap,
// });
// opts.defaultHeaders = resolveHeaders(headers);
// this.langchainProxy = extractBaseURL(baseURL);
// this.apiKey = azureOptions.azureOpenAIApiKey;
// const groupName = modelGroupMap[modelOptions.model].group;
// this.options.addParams = azureConfig.groupMap[groupName].addParams;
// this.options.dropParams = azureConfig.groupMap[groupName].dropParams;
// // Note: `forcePrompt` not re-assigned as only chat models are vision models
// this.azure = !serverless && azureOptions;
// this.azureEndpoint =
// !serverless && genAzureChatCompletion(this.azure, modelOptions.model, this);
// }
// if (this.azure || this.options.azure) {
// /* Azure Bug, extremely short default `max_tokens` response */
// if (!modelOptions.max_tokens && modelOptions.model === 'gpt-4-vision-preview') {
// modelOptions.max_tokens = 4000;
// }
// /* Azure does not accept `model` in the body, so we need to remove it. */
// delete modelOptions.model;
// opts.baseURL = this.langchainProxy
// ? constructAzureURL({
// baseURL: this.langchainProxy,
// azureOptions: this.azure,
// })
// : this.azureEndpoint.split(/(?<!\/)\/(chat|completion)\//)[0];
// opts.defaultQuery = { 'api-version': this.azure.azureOpenAIApiVersion };
// opts.defaultHeaders = { ...opts.defaultHeaders, 'api-key': this.apiKey };
// }
// if (process.env.OPENAI_ORGANIZATION) {
// opts.organization = process.env.OPENAI_ORGANIZATION;
// }
// if (this.options.addParams && typeof this.options.addParams === 'object') {
// modelOptions = {
// ...modelOptions,
// ...this.options.addParams,
// };
// logger.debug('[api/server/controllers/agents/client.js #chatCompletion] added params', {
// addParams: this.options.addParams,
// modelOptions,
// });
// }
// if (this.options.dropParams && Array.isArray(this.options.dropParams)) {
// this.options.dropParams.forEach((param) => {
// delete modelOptions[param];
// });
// logger.debug('[api/server/controllers/agents/client.js #chatCompletion] dropped params', {
// dropParams: this.options.dropParams,
// modelOptions,
// });
// }
// const streamRate = this.options.streamRate ?? Constants.DEFAULT_STREAM_RATE;
const run = await createRun({
agent: this.options.agent,
tools: this.options.tools,
toolMap: this.options.toolMap,
runId: this.responseMessageId,
modelOptions: this.modelOptions,
customHandlers: this.options.eventHandlers,
});
const config = {
configurable: {
provider: providerEndpointMap[this.options.agent.provider],
thread_id: this.conversationId,
},
run_id: this.responseMessageId,
streamMode: 'values',
version: 'v2',
};
if (!run) {
throw new Error('Failed to create run');
}
const messages = formatAgentMessages(payload);
const runMessages = await run.processStream({ messages }, config, {
[Callback.TOOL_ERROR]: (graph, error, toolId) => {
logger.error(
'[api/server/controllers/agents/client.js #chatCompletion] Tool Error',
error,
toolId,
);
},
});
// console.dir(runMessages, { depth: null });
return runMessages;
} catch (err) {
logger.error(
'[api/server/controllers/agents/client.js #chatCompletion] Unhandled error type',
err,
);
throw err;
}
}
getEncoding() {
return this.modelOptions.model?.includes('gpt-4o') ? 'o200k_base' : 'cl100k_base';
}
/**
* Returns the token count of a given text. It also checks and resets the tokenizers if necessary.
* @param {string} text - The text to get the token count for.
* @returns {number} The token count of the given text.
*/
getTokenCount(text) {
const encoding = this.getEncoding();
return Tokenizer.getTokenCount(text, encoding);
}
}
module.exports = AgentClient;

44
api/server/controllers/agents/demo.js Normal file
View file

@ -0,0 +1,44 @@
// Import the necessary modules
const path = require('path');
const base = path.resolve(__dirname, '..', '..', '..', '..', 'api');
console.log(base);
//api/server/controllers/agents/demo.js
require('module-alias')({ base });
const connectDb = require('~/lib/db/connectDb');
const AgentClient = require('./client');
// Define the user and message options
const user = 'user123';
const parentMessageId = 'pmid123';
const conversationId = 'cid456';
const maxContextTokens = 200000;
const req = {
user: { id: user },
};
const progressOptions = {
res: {},
};
// Define the message options
const messageOptions = {
user,
parentMessageId,
conversationId,
progressOptions,
};
async function main() {
await connectDb();
const client = new AgentClient({ req, maxContextTokens });
const text = 'Hello, this is a test message.';
try {
let response = await client.sendMessage(text, messageOptions);
console.log('Response:', response);
} catch (error) {
console.error('Error sending message:', error);
}
}
main();

153
api/server/controllers/agents/errors.js Normal file
View file

@ -0,0 +1,153 @@
// errorHandler.js
const { logger } = require('~/config');
const getLogStores = require('~/cache/getLogStores');
const { CacheKeys, ViolationTypes } = require('librechat-data-provider');
const { recordUsage } = require('~/server/services/Threads');
const { getConvo } = require('~/models/Conversation');
const { sendResponse } = require('~/server/utils');
/**
* @typedef {Object} ErrorHandlerContext
* @property {OpenAIClient} openai - The OpenAI client
* @property {string} run_id - The run ID
* @property {boolean} completedRun - Whether the run has completed
* @property {string} assistant_id - The assistant ID
* @property {string} conversationId - The conversation ID
* @property {string} parentMessageId - The parent message ID
* @property {string} responseMessageId - The response message ID
* @property {string} endpoint - The endpoint being used
* @property {string} cacheKey - The cache key for the current request
*/
/**
* @typedef {Object} ErrorHandlerDependencies
* @property {Express.Request} req - The Express request object
* @property {Express.Response} res - The Express response object
* @property {() => ErrorHandlerContext} getContext - Function to get the current context
* @property {string} [originPath] - The origin path for the error handler
*/
/**
* Creates an error handler function with the given dependencies
* @param {ErrorHandlerDependencies} dependencies - The dependencies for the error handler
* @returns {(error: Error) => Promise<void>} The error handler function
*/
const createErrorHandler = ({ req, res, getContext, originPath = '/assistants/chat/' }) => {
const cache = getLogStores(CacheKeys.ABORT_KEYS);
/**
* Handles errors that occur during the chat process
* @param {Error} error - The error that occurred
* @returns {Promise<void>}
*/
return async (error) => {
const {
openai,
run_id,
endpoint,
cacheKey,
completedRun,
assistant_id,
conversationId,
parentMessageId,
responseMessageId,
} = getContext();
const defaultErrorMessage =
'The Assistant run failed to initialize. Try sending a message in a new conversation.';
const messageData = {
assistant_id,
conversationId,
parentMessageId,
sender: 'System',
user: req.user.id,
shouldSaveMessage: false,
messageId: responseMessageId,
endpoint,
};
if (error.message === 'Run cancelled') {
return res.end();
} else if (error.message === 'Request closed' && completedRun) {
return;
} else if (error.message === 'Request closed') {
logger.debug(`[${originPath}] Request aborted on close`);
} else if (/Files.*are invalid/.test(error.message)) {
const errorMessage = `Files are invalid, or may not have uploaded yet.${
endpoint === 'azureAssistants'
? ' If using Azure OpenAI, files are only available in the region of the assistant\'s model at the time of upload.'
: ''
}`;
return sendResponse(req, res, messageData, errorMessage);
} else if (error?.message?.includes('string too long')) {
return sendResponse(
req,
res,
messageData,
'Message too long. The Assistants API has a limit of 32,768 characters per message. Please shorten it and try again.',
);
} else if (error?.message?.includes(ViolationTypes.TOKEN_BALANCE)) {
return sendResponse(req, res, messageData, error.message);
} else {
logger.error(`[${originPath}]`, error);
}
if (!openai || !run_id) {
return sendResponse(req, res, messageData, defaultErrorMessage);
}
await new Promise((resolve) => setTimeout(resolve, 2000));
try {
const status = await cache.get(cacheKey);
if (status === 'cancelled') {
logger.debug(`[${originPath}] Run already cancelled`);
return res.end();
}
await cache.delete(cacheKey);
// const cancelledRun = await openai.beta.threads.runs.cancel(thread_id, run_id);
// logger.debug(`[${originPath}] Cancelled run:`, cancelledRun);
} catch (error) {
logger.error(`[${originPath}] Error cancelling run`, error);
}
await new Promise((resolve) => setTimeout(resolve, 2000));
let run;
try {
// run = await openai.beta.threads.runs.retrieve(thread_id, run_id);
await recordUsage({
...run.usage,
model: run.model,
user: req.user.id,
conversationId,
});
} catch (error) {
logger.error(`[${originPath}] Error fetching or processing run`, error);
}
let finalEvent;
try {
// const errorContentPart = {
// text: {
// value:
// error?.message ?? 'There was an error processing your request. Please try again later.',
// },
// type: ContentTypes.ERROR,
// };
finalEvent = {
final: true,
conversation: await getConvo(req.user.id, conversationId),
// runMessages,
};
} catch (error) {
logger.error(`[${originPath}] Error finalizing error process`, error);
return sendResponse(req, res, messageData, 'The Assistant run failed');
}
return sendResponse(req, res, finalEvent);
};
};
module.exports = { createErrorHandler };

106
api/server/controllers/agents/llm.js Normal file
View file

@ -0,0 +1,106 @@
const { HttpsProxyAgent } = require('https-proxy-agent');
const { resolveHeaders } = require('librechat-data-provider');
const { createLLM } = require('~/app/clients/llm');
/**
* Initializes and returns a Language Learning Model (LLM) instance.
*
* @param {Object} options - Configuration options for the LLM.
* @param {string} options.model - The model identifier.
* @param {string} options.modelName - The specific name of the model.
* @param {number} options.temperature - The temperature setting for the model.
* @param {number} options.presence_penalty - The presence penalty for the model.
* @param {number} options.frequency_penalty - The frequency penalty for the model.
* @param {number} options.max_tokens - The maximum number of tokens for the model output.
* @param {boolean} options.streaming - Whether to use streaming for the model output.
* @param {Object} options.context - The context for the conversation.
* @param {number} options.tokenBuffer - The token buffer size.
* @param {number} options.initialMessageCount - The initial message count.
* @param {string} options.conversationId - The ID of the conversation.
* @param {string} options.user - The user identifier.
* @param {string} options.langchainProxy - The langchain proxy URL.
* @param {boolean} options.useOpenRouter - Whether to use OpenRouter.
* @param {Object} options.options - Additional options.
* @param {Object} options.options.headers - Custom headers for the request.
* @param {string} options.options.proxy - Proxy URL.
* @param {Object} options.options.req - The request object.
* @param {Object} options.options.res - The response object.
* @param {boolean} options.options.debug - Whether to enable debug mode.
* @param {string} options.apiKey - The API key for authentication.
* @param {Object} options.azure - Azure-specific configuration.
* @param {Object} options.abortController - The AbortController instance.
* @returns {Object} The initialized LLM instance.
*/
function initializeLLM(options) {
const {
model,
modelName,
temperature,
presence_penalty,
frequency_penalty,
max_tokens,
streaming,
user,
langchainProxy,
useOpenRouter,
options: { headers, proxy },
apiKey,
azure,
} = options;
const modelOptions = {
modelName: modelName || model,
temperature,
presence_penalty,
frequency_penalty,
user,
};
if (max_tokens) {
modelOptions.max_tokens = max_tokens;
}
const configOptions = {};
if (langchainProxy) {
configOptions.basePath = langchainProxy;
}
if (useOpenRouter) {
configOptions.basePath = 'https://openrouter.ai/api/v1';
configOptions.baseOptions = {
headers: {
'HTTP-Referer': 'https://librechat.ai',
'X-Title': 'LibreChat',
},
};
}
if (headers && typeof headers === 'object' && !Array.isArray(headers)) {
configOptions.baseOptions = {
headers: resolveHeaders({
...headers,
...configOptions?.baseOptions?.headers,
}),
};
}
if (proxy) {
configOptions.httpAgent = new HttpsProxyAgent(proxy);
configOptions.httpsAgent = new HttpsProxyAgent(proxy);
}
const llm = createLLM({
modelOptions,
configOptions,
openAIApiKey: apiKey,
azure,
streaming,
});
return llm;
}
module.exports = {
initializeLLM,
};

150
api/server/controllers/agents/request.js Normal file
View file

@ -0,0 +1,150 @@
const { Constants, getResponseSender } = require('librechat-data-provider');
const { createAbortController, handleAbortError } = require('~/server/middleware');
const { sendMessage } = require('~/server/utils');
const { saveMessage } = require('~/models');
const { logger } = require('~/config');
const AgentController = async (req, res, next, initializeClient, addTitle) => {
let {
text,
endpointOption,
conversationId,
modelDisplayLabel,
parentMessageId = null,
overrideParentMessageId = null,
} = req.body;
let userMessage;
let userMessagePromise;
let promptTokens;
let userMessageId;
let responseMessageId;
const sender = getResponseSender({
...endpointOption,
model: endpointOption.modelOptions.model,
modelDisplayLabel,
});
const newConvo = !conversationId;
const user = req.user.id;
const getReqData = (data = {}) => {
for (let key in data) {
if (key === 'userMessage') {
userMessage = data[key];
userMessageId = data[key].messageId;
} else if (key === 'userMessagePromise') {
userMessagePromise = data[key];
} else if (key === 'responseMessageId') {
responseMessageId = data[key];
} else if (key === 'promptTokens') {
promptTokens = data[key];
} else if (!conversationId && key === 'conversationId') {
conversationId = data[key];
}
}
};
try {
const { client } = await initializeClient({ req, res, endpointOption });
const getAbortData = () => ({
sender,
userMessage,
promptTokens,
conversationId,
userMessagePromise,
// text: getPartialText(),
messageId: responseMessageId,
parentMessageId: overrideParentMessageId ?? userMessageId,
});
const { abortController, onStart } = createAbortController(req, res, getAbortData, getReqData);
res.on('close', () => {
logger.debug('[AgentController] Request closed');
if (!abortController) {
return;
} else if (abortController.signal.aborted) {
return;
} else if (abortController.requestCompleted) {
return;
}
abortController.abort();
logger.debug('[AgentController] Request aborted on close');
});
const messageOptions = {
user,
onStart,
getReqData,
conversationId,
parentMessageId,
abortController,
overrideParentMessageId,
progressOptions: {
res,
// parentMessageId: overrideParentMessageId || userMessageId,
},
};
let response = await client.sendMessage(text, messageOptions);
if (overrideParentMessageId) {
response.parentMessageId = overrideParentMessageId;
}
response.endpoint = endpointOption.endpoint;
const { conversation = {} } = await client.responsePromise;
conversation.title =
conversation && !conversation.title ? null : conversation?.title || 'New Chat';
if (client.options.attachments) {
userMessage.files = client.options.attachments;
conversation.model = endpointOption.modelOptions.model;
delete userMessage.image_urls;
}
if (!abortController.signal.aborted) {
sendMessage(res, {
final: true,
conversation,
title: conversation.title,
requestMessage: userMessage,
responseMessage: response,
});
res.end();
await saveMessage(
req,
{ ...response, user },
{ context: 'api/server/controllers/agents/request.js - response end' },
);
}
if (!client.skipSaveUserMessage) {
await saveMessage(req, userMessage, {
context: 'api/server/controllers/agents/request.js - don\'t skip saving user message',
});
}
if (addTitle && parentMessageId === Constants.NO_PARENT && newConvo) {
addTitle(req, {
text,
response,
client,
});
}
} catch (error) {
handleAbortError(res, req, error, {
conversationId,
sender,
messageId: responseMessageId,
parentMessageId: userMessageId ?? parentMessageId,
});
}
};
module.exports = AgentController;

59
api/server/controllers/agents/run.js Normal file
View file

@ -0,0 +1,59 @@
const { Run } = require('@librechat/agents');
const { providerEndpointMap } = require('librechat-data-provider');
/**
* @typedef {import('@librechat/agents').t} t
* @typedef {import('@librechat/agents').StreamEventData} StreamEventData
* @typedef {import('@librechat/agents').ClientOptions} ClientOptions
* @typedef {import('@librechat/agents').EventHandler} EventHandler
* @typedef {import('@librechat/agents').GraphEvents} GraphEvents
* @typedef {import('@librechat/agents').IState} IState
*/
/**
* Creates a new Run instance with custom handlers and configuration.
*
* @param {Object} options - The options for creating the Run instance.
* @param {Agent} options.agent - The agent for this run.
* @param {StructuredTool[] | undefined} [options.tools] - The tools to use in the run.
* @param {Record<string, StructuredTool[]> | undefined} [options.toolMap] - The tool map for the run.
* @param {Record<GraphEvents, EventHandler> | undefined} [options.customHandlers] - Custom event handlers.
* @param {string | undefined} [options.runId] - Optional run ID; otherwise, a new run ID will be generated.
* @param {ClientOptions} [options.modelOptions] - Optional model to use; if not provided, it will use the default from modelMap.
* @param {boolean} [options.streaming=true] - Whether to use streaming.
* @param {boolean} [options.streamUsage=true] - Whether to stream usage information.
* @returns {Promise<Run<IState>>} A promise that resolves to a new Run instance.
*/
async function createRun({
runId,
tools,
agent,
toolMap,
modelOptions,
customHandlers,
streaming = true,
streamUsage = true,
}) {
const llmConfig = Object.assign(
{
provider: providerEndpointMap[agent.provider],
streaming,
streamUsage,
},
modelOptions,
);
return Run.create({
graphConfig: {
runId,
llmConfig,
tools,
toolMap,
instructions: agent.instructions,
additional_instructions: agent.additional_instructions,
},
customHandlers,
});
}
module.exports = { createRun };

208
api/server/controllers/agents/v1.js Normal file
View file

@ -0,0 +1,208 @@
const { nanoid } = require('nanoid');
const { FileContext } = require('librechat-data-provider');
const {
getAgent,
createAgent,
updateAgent,
deleteAgent,
getListAgents,
} = require('~/models/Agent');
const { getStrategyFunctions } = require('~/server/services/Files/strategies');
const { uploadImageBuffer } = require('~/server/services/Files/process');
const { deleteFileByFilter } = require('~/models/File');
const { logger } = require('~/config');
/**
* Creates an Agent.
* @route POST /Agents
* @param {ServerRequest} req - The request object.
* @param {AgentCreateParams} req.body - The request body.
* @param {ServerResponse} res - The response object.
* @returns {Agent} 201 - success response - application/json
*/
const createAgentHandler = async (req, res) => {
try {
const { tools = [], provider, name, description, instructions, model, ...agentData } = req.body;
const { id: userId } = req.user;
agentData.tools = tools
.map((tool) => (typeof tool === 'string' ? req.app.locals.availableTools[tool] : tool))
.filter(Boolean);
Object.assign(agentData, {
author: userId,
name,
description,
instructions,
provider,
model,
});
agentData.id = `agent_${nanoid()}`;
const agent = await createAgent(agentData);
res.status(201).json(agent);
} catch (error) {
logger.error('[/Agents] Error creating agent', error);
res.status(500).json({ error: error.message });
}
};
/**
* Retrieves an Agent by ID.
* @route GET /Agents/:id
* @param {object} req - Express Request
* @param {object} req.params - Request params
* @param {string} req.params.id - Agent identifier.
* @returns {Agent} 200 - success response - application/json
* @returns {Error} 404 - Agent not found
*/
const getAgentHandler = async (req, res) => {
try {
const id = req.params.id;
const agent = await getAgent({ id });
if (!agent) {
return res.status(404).json({ error: 'Agent not found' });
}
return res.status(200).json(agent);
} catch (error) {
logger.error('[/Agents/:id] Error retrieving agent', error);
res.status(500).json({ error: error.message });
}
};
/**
* Updates an Agent.
* @route PATCH /Agents/:id
* @param {object} req - Express Request
* @param {object} req.params - Request params
* @param {string} req.params.id - Agent identifier.
* @param {AgentUpdateParams} req.body - The Agent update parameters.
* @returns {Agent} 200 - success response - application/json
*/
const updateAgentHandler = async (req, res) => {
try {
const id = req.params.id;
const updatedAgent = await updateAgent({ id, author: req.user.id }, req.body);
return res.json(updatedAgent);
} catch (error) {
logger.error('[/Agents/:id] Error updating Agent', error);
res.status(500).json({ error: error.message });
}
};
/**
* Deletes an Agent based on the provided ID.
* @route DELETE /Agents/:id
* @param {object} req - Express Request
* @param {object} req.params - Request params
* @param {string} req.params.id - Agent identifier.
* @returns {Agent} 200 - success response - application/json
*/
const deleteAgentHandler = async (req, res) => {
try {
const id = req.params.id;
const agent = await getAgent({ id });
if (!agent) {
return res.status(404).json({ error: 'Agent not found' });
}
await deleteAgent({ id, author: req.user.id });
return res.json({ message: 'Agent deleted' });
} catch (error) {
logger.error('[/Agents/:id] Error deleting Agent', error);
res.status(500).json({ error: error.message });
}
};
/**
*
* @route GET /Agents
* @param {object} req - Express Request
* @param {object} req.query - Request query
* @param {string} [req.query.user] - The user ID of the agent's author.
* @returns {AgentListResponse} 200 - success response - application/json
*/
const getListAgentsHandler = async (req, res) => {
try {
const { user } = req.query;
const filter = user ? { author: user } : {};
const data = await getListAgents(filter);
return res.json(data);
} catch (error) {
logger.error('[/Agents] Error listing Agents', error);
res.status(500).json({ error: error.message });
}
};
/**
* Uploads and updates an avatar for a specific agent.
* @route POST /avatar/:agent_id
* @param {object} req - Express Request
* @param {object} req.params - Request params
* @param {string} req.params.agent_id - The ID of the agent.
* @param {Express.Multer.File} req.file - The avatar image file.
* @param {object} req.body - Request body
* @param {string} [req.body.avatar] - Optional avatar for the agent's avatar.
* @returns {Object} 200 - success response - application/json
*/
const uploadAgentAvatarHandler = async (req, res) => {
try {
const { agent_id } = req.params;
if (!agent_id) {
return res.status(400).json({ message: 'Agent ID is required' });
}
let { avatar: _avatar = '{}' } = req.body;
const image = await uploadImageBuffer({
req,
context: FileContext.avatar,
metadata: {
buffer: req.file.buffer,
},
});
try {
_avatar = JSON.parse(_avatar);
} catch (error) {
logger.error('[/avatar/:agent_id] Error parsing avatar', error);
_avatar = {};
}
if (_avatar && _avatar.source) {
const { deleteFile } = getStrategyFunctions(_avatar.source);
try {
await deleteFile(req, { filepath: _avatar.filepath });
await deleteFileByFilter({ filepath: _avatar.filepath });
} catch (error) {
logger.error('[/avatar/:agent_id] Error deleting old avatar', error);
}
}
const promises = [];
const data = {
avatar: {
filepath: image.filepath,
source: req.app.locals.fileStrategy,
},
};
promises.push(await updateAgent({ id: agent_id, author: req.user.id }, data));
const resolved = await Promise.all(promises);
res.status(201).json(resolved[0]);
} catch (error) {
const message = 'An error occurred while updating the Agent Avatar';
logger.error(message, error);
res.status(500).json({ message });
}
};
module.exports = {
createAgent: createAgentHandler,
getAgent: getAgentHandler,
updateAgent: updateAgentHandler,
deleteAgent: deleteAgentHandler,
getListAgents: getListAgentsHandler,
uploadAgentAvatar: uploadAgentAvatarHandler,
};

1
api/server/index.js
View file

@ -105,6 +105,7 @@ const startServer = async () => {
app.use('/images/', validateImageRequest, routes.staticRoute);
app.use('/api/share', routes.share);
app.use('/api/roles', routes.roles);
app.use('/api/agents', routes.agents);
app.use('/api/tags', routes.tags);

15
api/server/middleware/buildEndpointOption.js
View file

@ -1,4 +1,4 @@
const { parseCompactConvo, EModelEndpoint } = require('librechat-data-provider');
const { parseCompactConvo, EModelEndpoint, isAgentsEndpoint } = require('librechat-data-provider');
const { getModelsConfig } = require('~/server/controllers/ModelController');
const azureAssistants = require('~/server/services/Endpoints/azureAssistants');
const assistants = require('~/server/services/Endpoints/assistants');
@ -6,6 +6,7 @@ const gptPlugins = require('~/server/services/Endpoints/gptPlugins');
const { processFiles } = require('~/server/services/Files/process');
const anthropic = require('~/server/services/Endpoints/anthropic');
const openAI = require('~/server/services/Endpoints/openAI');
const agents = require('~/server/services/Endpoints/agents');
const custom = require('~/server/services/Endpoints/custom');
const google = require('~/server/services/Endpoints/google');
const enforceModelSpec = require('./enforceModelSpec');
@ -15,6 +16,7 @@ const buildFunction = {
[EModelEndpoint.openAI]: openAI.buildOptions,
[EModelEndpoint.google]: google.buildOptions,
[EModelEndpoint.custom]: custom.buildOptions,
[EModelEndpoint.agents]: agents.buildOptions,
[EModelEndpoint.azureOpenAI]: openAI.buildOptions,
[EModelEndpoint.anthropic]: anthropic.buildOptions,
[EModelEndpoint.gptPlugins]: gptPlugins.buildOptions,
@ -59,12 +61,13 @@ async function buildEndpointOption(req, res, next) {
}
}
req.body.endpointOption = buildFunction[endpointType ?? endpoint](
endpoint,
parsedBody,
endpointType,
);
const endpointFn = buildFunction[endpointType ?? endpoint];
const builder = isAgentsEndpoint(endpoint) ? (...args) => endpointFn(req, ...args) : endpointFn;
// TODO: use object params
req.body.endpointOption = builder(endpoint, parsedBody, endpointType);
// TODO: use `getModelsConfig` only when necessary
const modelsConfig = await getModelsConfig(req);
req.body.endpointOption.modelsConfig = modelsConfig;

166
api/server/routes/agents/actions.js Normal file
View file

@ -0,0 +1,166 @@
const express = require('express');
const { nanoid } = require('nanoid');
const { actionDelimiter } = require('librechat-data-provider');
const { encryptMetadata, domainParser } = require('~/server/services/ActionService');
const { updateAction, getActions, deleteAction } = require('~/models/Action');
const { getAgent, updateAgent } = require('~/models/Agent');
const { logger } = require('~/config');
const router = express.Router();
/**
* Retrieves all user's actions
* @route GET /actions/
* @param {string} req.params.id - Assistant identifier.
* @returns {Action[]} 200 - success response - application/json
*/
router.get('/', async (req, res) => {
try {
res.json(await getActions({ user: req.user.id }));
} catch (error) {
res.status(500).json({ error: error.message });
}
});
/**
* Adds or updates actions for a specific agent.
* @route POST /actions/:agent_id
* @param {string} req.params.agent_id - The ID of the agent.
* @param {FunctionTool[]} req.body.functions - The functions to be added or updated.
* @param {string} [req.body.action_id] - Optional ID for the action.
* @param {ActionMetadata} req.body.metadata - Metadata for the action.
* @returns {Object} 200 - success response - application/json
*/
router.post('/:agent_id', async (req, res) => {
try {
const { agent_id } = req.params;
/** @type {{ functions: FunctionTool[], action_id: string, metadata: ActionMetadata }} */
const { functions, action_id: _action_id, metadata: _metadata } = req.body;
if (!functions.length) {
return res.status(400).json({ message: 'No functions provided' });
}
let metadata = encryptMetadata(_metadata);
let { domain } = metadata;
domain = await domainParser(req, domain, true);
if (!domain) {
return res.status(400).json({ message: 'No domain provided' });
}
const action_id = _action_id ?? nanoid();
const initialPromises = [];
// TODO: share agents
initialPromises.push(getAgent({ id: agent_id, author: req.user.id }));
if (_action_id) {
initialPromises.push(getActions({ action_id }, true));
}
/** @type {[Agent, [Action|undefined]]} */
const [agent, actions_result] = await Promise.all(initialPromises);
if (!agent) {
return res.status(404).json({ message: 'Agent not found for adding action' });
}
if (actions_result && actions_result.length) {
const action = actions_result[0];
metadata = { ...action.metadata, ...metadata };
}
const { actions: _actions = [] } = agent ?? {};
const actions = [];
for (const action of _actions) {
const [_action_domain, current_action_id] = action.split(actionDelimiter);
if (current_action_id === action_id) {
continue;
}
actions.push(action);
}
actions.push(`${domain}${actionDelimiter}${action_id}`);
/** @type {string[]}} */
const { tools: _tools = [] } = agent;
const tools = _tools
.filter((tool) => !(tool && (tool.includes(domain) || tool.includes(action_id))))
.concat(functions.map((tool) => `${tool.function.name}${actionDelimiter}${domain}`));
const updatedAgent = await updateAgent(
{ id: agent_id, author: req.user.id },
{ tools, actions },
);
/** @type {[Action]} */
const updatedAction = await updateAction(
{ action_id },
{ metadata, agent_id, user: req.user.id },
);
const sensitiveFields = ['api_key', 'oauth_client_id', 'oauth_client_secret'];
for (let field of sensitiveFields) {
if (updatedAction.metadata[field]) {
delete updatedAction.metadata[field];
}
}
res.json([updatedAgent, updatedAction]);
} catch (error) {
const message = 'Trouble updating the Agent Action';
logger.error(message, error);
res.status(500).json({ message });
}
});
/**
* Deletes an action for a specific agent.
* @route DELETE /actions/:agent_id/:action_id
* @param {string} req.params.agent_id - The ID of the agent.
* @param {string} req.params.action_id - The ID of the action to delete.
* @returns {Object} 200 - success response - application/json
*/
router.delete('/:agent_id/:action_id', async (req, res) => {
try {
const { agent_id, action_id } = req.params;
const agent = await getAgent({ id: agent_id, author: req.user.id });
if (!agent) {
return res.status(404).json({ message: 'Agent not found for deleting action' });
}
const { tools = [], actions = [] } = agent;
let domain = '';
const updatedActions = actions.filter((action) => {
if (action.includes(action_id)) {
[domain] = action.split(actionDelimiter);
return false;
}
return true;
});
domain = await domainParser(req, domain, true);
if (!domain) {
return res.status(400).json({ message: 'No domain provided' });
}
const updatedTools = tools.filter((tool) => !(tool && tool.includes(domain)));
await updateAgent(
{ id: agent_id, author: req.user.id },
{ tools: updatedTools, actions: updatedActions },
);
await deleteAction({ action_id });
res.status(200).json({ message: 'Action deleted successfully' });
} catch (error) {
const message = 'Trouble deleting the Agent Action';
logger.error(message, error);
res.status(500).json({ message });
}
});
module.exports = router;

35
api/server/routes/agents/chat.js Normal file
View file

@ -0,0 +1,35 @@
const express = require('express');
const router = express.Router();
const {
setHeaders,
handleAbort,
// validateModel,
// validateEndpoint,
buildEndpointOption,
} = require('~/server/middleware');
const { initializeClient } = require('~/server/services/Endpoints/agents');
const AgentController = require('~/server/controllers/agents/request');
router.post('/abort', handleAbort());
/**
* @route POST /
* @desc Chat with an assistant
* @access Public
* @param {express.Request} req - The request object, containing the request data.
* @param {express.Response} res - The response object, used to send back a response.
* @returns {void}
*/
router.post(
'/',
// validateModel,
// validateEndpoint,
buildEndpointOption,
setHeaders,
async (req, res, next) => {
await AgentController(req, res, next, initializeClient);
},
);
module.exports = router;

21
api/server/routes/agents/index.js Normal file
View file

@ -0,0 +1,21 @@
const express = require('express');
const router = express.Router();
const {
uaParser,
checkBan,
requireJwtAuth,
// concurrentLimiter,
// messageIpLimiter,
// messageUserLimiter,
} = require('~/server/middleware');
const v1 = require('./v1');
const chat = require('./chat');
router.use(requireJwtAuth);
router.use(checkBan);
router.use(uaParser);
router.use('/', v1);
router.use('/chat', chat);
module.exports = router;

77
api/server/routes/agents/v1.js Normal file
View file

@ -0,0 +1,77 @@
const multer = require('multer');
const express = require('express');
const v1 = require('~/server/controllers/agents/v1');
const actions = require('./actions');
const upload = multer();
const router = express.Router();
/**
* Agent actions route.
* @route GET|POST /agents/actions
*/
router.use('/actions', actions);
/**
* Get a list of available tools for agents.
* @route GET /agents/tools
* @returns {TPlugin[]} 200 - application/json
*/
router.use('/tools', (req, res) => {
res.json([]);
});
/**
* Creates an agent.
* @route POST /agents
* @param {AgentCreateParams} req.body - The agent creation parameters.
* @returns {Agent} 201 - Success response - application/json
*/
router.post('/', v1.createAgent);
/**
* Retrieves an agent.
* @route GET /agents/:id
* @param {string} req.params.id - Agent identifier.
* @returns {Agent} 200 - Success response - application/json
*/
router.get('/:id', v1.getAgent);
/**
* Updates an agent.
* @route PATCH /agents/:id
* @param {string} req.params.id - Agent identifier.
* @param {AgentUpdateParams} req.body - The agent update parameters.
* @returns {Agent} 200 - Success response - application/json
*/
router.patch('/:id', v1.updateAgent);
/**
* Deletes an agent.
* @route DELETE /agents/:id
* @param {string} req.params.id - Agent identifier.
* @returns {Agent} 200 - success response - application/json
*/
router.delete('/:id', v1.deleteAgent);
/**
* Returns a list of agents.
* @route GET /agents
* @param {AgentListParams} req.query - The agent list parameters for pagination and sorting.
* @returns {AgentListResponse} 200 - success response - application/json
*/
router.get('/', v1.getListAgents);
// TODO: handle private agents
/**
* Uploads and updates an avatar for a specific agent.
* @route POST /avatar/:agent_id
* @param {string} req.params.agent_id - The ID of the agent.
* @param {Express.Multer.File} req.file - The avatar image file.
* @param {string} [req.body.metadata] - Optional metadata for the agent's avatar.
* @returns {Object} 200 - success response - application/json
*/
router.post('/avatar/:agent_id', upload.single('file'), v1.uploadAgentAvatar);
module.exports = router;

22
api/server/routes/assistants/actions.js
View file

@ -1,5 +1,5 @@
const { v4 } = require('uuid');
const express = require('express');
const { nanoid } = require('nanoid');
const { encryptMetadata, domainParser } = require('~/server/services/ActionService');
const { actionDelimiter, EModelEndpoint } = require('librechat-data-provider');
const { getOpenAIClient } = require('~/server/controllers/assistants/helpers');
@ -9,20 +9,6 @@ const { logger } = require('~/config');
const router = express.Router();
/**
* Retrieves all user's actions
* @route GET /actions/
* @param {string} req.params.id - Assistant identifier.
* @returns {Action[]} 200 - success response - application/json
*/
router.get('/', async (req, res) => {
try {
res.json(await getActions());
} catch (error) {
res.status(500).json({ error: error.message });
}
});
/**
* Adds or updates actions for a specific assistant.
* @route POST /actions/:assistant_id
@ -51,7 +37,7 @@ router.post('/:assistant_id', async (req, res) => {
return res.status(400).json({ message: 'No domain provided' });
}
const action_id = _action_id ?? v4();
const action_id = _action_id ?? nanoid();
const initialPromises = [];
const { openai } = await getOpenAIClient({ req, res });
@ -178,6 +164,10 @@ router.delete('/:assistant_id/:action_id/:model', async (req, res) => {
domain = await domainParser(req, domain, true);
if (!domain) {
return res.status(400).json({ message: 'No domain provided' });
}
const updatedTools = tools.filter(
(tool) => !(tool.function && tool.function.name.includes(domain)),
);

64
api/server/routes/index.js
View file

@ -1,51 +1,53 @@
const ask = require('./ask');
const edit = require('./edit');
const assistants = require('./assistants');
const categories = require('./categories');
const tokenizer = require('./tokenizer');
const endpoints = require('./endpoints');
const staticRoute = require('./static');
const messages = require('./messages');
const convos = require('./convos');
const presets = require('./presets');
const prompts = require('./prompts');
const search = require('./search');
const tokenizer = require('./tokenizer');
const auth = require('./auth');
const keys = require('./keys');
const oauth = require('./oauth');
const endpoints = require('./endpoints');
const balance = require('./balance');
const models = require('./models');
const plugins = require('./plugins');
const user = require('./user');
const search = require('./search');
const models = require('./models');
const convos = require('./convos');
const config = require('./config');
const assistants = require('./assistants');
const files = require('./files');
const staticRoute = require('./static');
const share = require('./share');
const categories = require('./categories');
const agents = require('./agents');
const roles = require('./roles');
const oauth = require('./oauth');
const files = require('./files');
const share = require('./share');
const tags = require('./tags');
const auth = require('./auth');
const edit = require('./edit');
const keys = require('./keys');
const user = require('./user');
const ask = require('./ask');
module.exports = {
search,
ask,
edit,
messages,
convos,
presets,
prompts,
auth,
keys,
oauth,
user,
tokenizer,
endpoints,
balance,
tags,
roles,
oauth,
files,
share,
agents,
convos,
search,
prompts,
config,
models,
plugins,
config,
presets,
balance,
messages,
endpoints,
tokenizer,
assistants,
files,
staticRoute,
share,
categories,
roles,
tags,
staticRoute,
};

22
api/server/services/ActionService.js
View file

@ -6,6 +6,7 @@ const {
isImageVisionTool,
actionDomainSeparator,
} = require('librechat-data-provider');
const { tool } = require('@langchain/core/tools');
const { encryptV2, decryptV2 } = require('~/server/utils/crypto');
const { getActions, deleteActions } = require('~/models/Action');
const { deleteAssistant } = require('~/models/Assistant');
@ -101,7 +102,8 @@ async function domainParser(req, domain, inverse = false) {
*
* @param {Object} searchParams - The parameters for loading action sets.
* @param {string} searchParams.user - The user identifier.
* @param {string} searchParams.assistant_id - The assistant identifier.
* @param {string} [searchParams.agent_id]- The agent identifier.
* @param {string} [searchParams.assistant_id]- The assistant identifier.
* @returns {Promise<Action[] | null>} A promise that resolves to an array of actions or `null` if no match.
*/
async function loadActionSets(searchParams) {
@ -114,10 +116,14 @@ async function loadActionSets(searchParams) {
* @param {Object} params - The parameters for loading action sets.
* @param {Action} params.action - The action set. Necessary for decrypting authentication values.
* @param {ActionRequest} params.requestBuilder - The ActionRequest builder class to execute the API call.
* @returns { { _call: (toolInput: Object) => unknown} } An object with `_call` method to execute the tool input.
* @param {string | undefined} [params.name] - The name of the tool.
* @param {string | undefined} [params.description] - The description for the tool.
* @param {import('zod').ZodTypeAny | undefined} [params.zodSchema] - The Zod schema for tool input validation/definition
* @returns { Promsie<typeof tool | { _call: (toolInput: Object | string) => unknown}> } An object with `_call` method to execute the tool input.
*/
async function createActionTool({ action, requestBuilder }) {
async function createActionTool({ action, requestBuilder, zodSchema, name, description }) {
action.metadata = await decryptMetadata(action.metadata);
/** @type {(toolInput: Object | string) => Promise<unknown>} */
const _call = async (toolInput) => {
try {
requestBuilder.setParams(toolInput);
@ -142,6 +148,14 @@ async function createActionTool({ action, requestBuilder }) {
}
};
if (name) {
return tool(_call, {
name,
description: description || '',
schema: zodSchema,
});
}
return {
_call,
};
@ -180,7 +194,7 @@ async function encryptMetadata(metadata) {
* Decrypts sensitive metadata values for an action.
*
* @param {ActionMetadata} metadata - The action metadata to decrypt.
* @returns {ActionMetadata} The updated action metadata with decrypted values.
* @returns {Promise<ActionMetadata>} The updated action metadata with decrypted values.
*/
async function decryptMetadata(metadata) {
const decryptedMetadata = { ...metadata };

2
api/server/services/Config/EndpointService.js
View file

@ -45,5 +45,7 @@ module.exports = {
AZURE_ASSISTANTS_BASE_URL,
EModelEndpoint.azureAssistants,
),
/* key will be part of separate config */
[EModelEndpoint.agents]: generateConfig(process.env.I_AM_A_TEAPOT),
},
};

13
api/server/services/Config/loadDefaultEConfig.js
View file

@ -9,13 +9,22 @@ const { config } = require('./EndpointService');
*/
async function loadDefaultEndpointsConfig(req) {
const { google, gptPlugins } = await loadAsyncEndpoints(req);
const { openAI, assistants, azureAssistants, bingAI, anthropic, azureOpenAI, chatGPTBrowser } =
config;
const {
openAI,
agents,
assistants,
azureAssistants,
bingAI,
anthropic,
azureOpenAI,
chatGPTBrowser,
} = config;
const enabledEndpoints = getEnabledEndpoints();
const endpointConfig = {
[EModelEndpoint.openAI]: openAI,
[EModelEndpoint.agents]: agents,
[EModelEndpoint.assistants]: assistants,
[EModelEndpoint.azureAssistants]: azureAssistants,
[EModelEndpoint.azureOpenAI]: azureOpenAI,

1
api/server/services/Config/loadDefaultModels.js
View file

@ -29,6 +29,7 @@ async function loadDefaultModels(req) {
return {
[EModelEndpoint.openAI]: openAI,
[EModelEndpoint.agents]: openAI,
[EModelEndpoint.google]: google,
[EModelEndpoint.anthropic]: anthropic,
[EModelEndpoint.gptPlugins]: gptPlugins,

30
api/server/services/Endpoints/agents/build.js Normal file
View file

@ -0,0 +1,30 @@
const { getAgent } = require('~/models/Agent');
const { logger } = require('~/config');
const buildOptions = (req, endpoint, parsedBody) => {
const { agent_id, instructions, spec, ...rest } = parsedBody;
const agentPromise = getAgent({
id: agent_id,
// TODO: better author handling
author: req.user.id,
}).catch((error) => {
logger.error(`[/agents/:${agent_id}] Error retrieving agent during build options step`, error);
return undefined;
});
const endpointOption = {
agent: agentPromise,
endpoint,
agent_id,
instructions,
spec,
modelOptions: {
...rest,
},
};
return endpointOption;
};
module.exports = { buildOptions };

7
api/server/services/Endpoints/agents/index.js Normal file
View file

@ -0,0 +1,7 @@
const build = require('./build');
const initialize = require('./initialize');
module.exports = {
...build,
...initialize,
};

119
api/server/services/Endpoints/agents/initialize.js Normal file
View file

@ -0,0 +1,119 @@
// const {
// ErrorTypes,
// EModelEndpoint,
// resolveHeaders,
// mapModelToAzureConfig,
// } = require('librechat-data-provider');
// const { getUserKeyValues, checkUserKeyExpiry } = require('~/server/services/UserService');
// const { isEnabled, isUserProvided } = require('~/server/utils');
// const { getAzureCredentials } = require('~/utils');
// const { OpenAIClient } = require('~/app');
const { z } = require('zod');
const { tool } = require('@langchain/core/tools');
const { EModelEndpoint, providerEndpointMap } = require('librechat-data-provider');
const { getDefaultHandlers } = require('~/server/controllers/agents/callbacks');
// for testing purposes
// const createTavilySearchTool = require('~/app/clients/tools/structured/TavilySearch');
const initAnthropic = require('~/server/services/Endpoints/anthropic/initializeClient');
const initOpenAI = require('~/server/services/Endpoints/openAI/initializeClient');
const { loadAgentTools } = require('~/server/services/ToolService');
const AgentClient = require('~/server/controllers/agents/client');
const { getModelMaxTokens } = require('~/utils');
/* For testing errors */
const _getWeather = tool(
async ({ location }) => {
if (location === 'SAN FRANCISCO') {
return 'It\'s 60 degrees and foggy';
} else if (location.toLowerCase() === 'san francisco') {
throw new Error('Input queries must be all capitals');
} else {
throw new Error('Invalid input.');
}
},
{
name: 'get_weather',
description: 'Call to get the current weather',
schema: z.object({
location: z.string(),
}),
},
);
const providerConfigMap = {
[EModelEndpoint.openAI]: initOpenAI,
[EModelEndpoint.azureOpenAI]: initOpenAI,
[EModelEndpoint.anthropic]: initAnthropic,
};
const initializeClient = async ({ req, res, endpointOption }) => {
if (!endpointOption) {
throw new Error('Endpoint option not provided');
}
// TODO: use endpointOption to determine options/modelOptions
const eventHandlers = getDefaultHandlers({ res });
// const tools = [createTavilySearchTool()];
// const tools = [_getWeather];
// const tool_calls = [{ name: 'getPeople_action_swapi---dev' }];
// const tool_calls = [{ name: 'dalle' }];
// const tool_calls = [{ name: 'getItmOptions_action_YWlhcGkzLn' }];
// const tool_calls = [{ name: 'tavily_search_results_json' }];
// const tool_calls = [
// { name: 'searchListings_action_emlsbG93NT' },
// { name: 'searchAddress_action_emlsbG93NT' },
// { name: 'searchMLS_action_emlsbG93NT' },
// { name: 'searchCoordinates_action_emlsbG93NT' },
// { name: 'searchUrl_action_emlsbG93NT' },
// { name: 'getPropertyDetails_action_emlsbG93NT' },
// ];
if (!endpointOption.agent) {
throw new Error('No agent promise provided');
}
/** @type {Agent} */
const agent = await endpointOption.agent;
const { tools, toolMap } = await loadAgentTools({
req,
tools: agent.tools,
agent_id: agent.id,
// openAIApiKey: process.env.OPENAI_API_KEY,
});
let modelOptions = { model: agent.model };
const getOptions = providerConfigMap[agent.provider];
if (!getOptions) {
throw new Error(`Provider ${agent.provider} not supported`);
}
// TODO: pass-in override settings that are specific to current run
endpointOption.modelOptions.model = agent.model;
const options = await getOptions({
req,
res,
endpointOption,
optionsOnly: true,
overrideEndpoint: agent.provider,
overrideModel: agent.model,
});
modelOptions = Object.assign(modelOptions, options.llmConfig);
const client = new AgentClient({
req,
agent,
tools,
toolMap,
modelOptions,
eventHandlers,
configOptions: options.configOptions,
maxContextTokens:
agent.max_context_tokens ??
getModelMaxTokens(modelOptions.model, providerEndpointMap[agent.provider]),
});
return { client };
};
module.exports = { initializeClient };

15
api/server/services/Endpoints/anthropic/initializeClient.js
View file

@ -1,8 +1,9 @@
const { EModelEndpoint } = require('librechat-data-provider');
const { getUserKey, checkUserKeyExpiry } = require('~/server/services/UserService');
const { getLLMConfig } = require('~/server/services/Endpoints/anthropic/llm');
const { AnthropicClient } = require('~/app');
const initializeClient = async ({ req, res, endpointOption }) => {
const initializeClient = async ({ req, res, endpointOption, optionsOnly }) => {
const { ANTHROPIC_API_KEY, ANTHROPIC_REVERSE_PROXY, PROXY } = process.env;
const expiresAt = req.body.key;
const isUserProvided = ANTHROPIC_API_KEY === 'user_provided';
@ -34,6 +35,18 @@ const initializeClient = async ({ req, res, endpointOption }) => {
clientOptions.streamRate = allConfig.streamRate;
}
if (optionsOnly) {
const requestOptions = Object.assign(
{
reverseProxyUrl: ANTHROPIC_REVERSE_PROXY ?? null,
proxy: PROXY ?? null,
modelOptions: endpointOption.modelOptions,
},
clientOptions,
);
return getLLMConfig(anthropicApiKey, requestOptions);
}
const client = new AnthropicClient(anthropicApiKey, {
req,
res,

55
api/server/services/Endpoints/anthropic/llm.js Normal file
View file

@ -0,0 +1,55 @@
const { HttpsProxyAgent } = require('https-proxy-agent');
const { anthropicSettings, removeNullishValues } = require('librechat-data-provider');
/**
* Generates configuration options for creating an Anthropic language model (LLM) instance.
*
* @param {string} apiKey - The API key for authentication with Anthropic.
* @param {Object} [options={}] - Additional options for configuring the LLM.
* @param {Object} [options.modelOptions] - Model-specific options.
* @param {string} [options.modelOptions.model] - The name of the model to use.
* @param {number} [options.modelOptions.maxOutputTokens] - The maximum number of tokens to generate.
* @param {number} [options.modelOptions.temperature] - Controls randomness in output generation.
* @param {number} [options.modelOptions.topP] - Controls diversity of output generation.
* @param {number} [options.modelOptions.topK] - Controls the number of top tokens to consider.
* @param {string[]} [options.modelOptions.stop] - Sequences where the API will stop generating further tokens.
* @param {boolean} [options.modelOptions.stream] - Whether to stream the response.
* @param {string} [options.proxy] - Proxy server URL.
* @param {string} [options.reverseProxyUrl] - URL for a reverse proxy, if used.
*
* @returns {Object} Configuration options for creating an Anthropic LLM instance, with null and undefined values removed.
*/
function getLLMConfig(apiKey, options = {}) {
const defaultOptions = {
model: anthropicSettings.model.default,
maxOutputTokens: anthropicSettings.maxOutputTokens.default,
stream: true,
};
const mergedOptions = Object.assign(defaultOptions, options.modelOptions);
const requestOptions = {
apiKey,
model: mergedOptions.model,
stream: mergedOptions.stream,
temperature: mergedOptions.temperature,
top_p: mergedOptions.topP,
top_k: mergedOptions.topK,
stop_sequences: mergedOptions.stop,
max_tokens:
mergedOptions.maxOutputTokens || anthropicSettings.maxOutputTokens.reset(mergedOptions.model),
};
const configOptions = {};
if (options.proxy) {
configOptions.httpAgent = new HttpsProxyAgent(options.proxy);
}
if (options.reverseProxyUrl) {
configOptions.baseURL = options.reverseProxyUrl;
}
return { llmConfig: removeNullishValues(requestOptions), configOptions };
}
module.exports = { getLLMConfig };

32
api/server/services/Endpoints/openAI/initializeClient.js
View file

@ -5,11 +5,19 @@ const {
mapModelToAzureConfig,
} = require('librechat-data-provider');
const { getUserKeyValues, checkUserKeyExpiry } = require('~/server/services/UserService');
const { getLLMConfig } = require('~/server/services/Endpoints/openAI/llm');
const { isEnabled, isUserProvided } = require('~/server/utils');
const { getAzureCredentials } = require('~/utils');
const { OpenAIClient } = require('~/app');
const initializeClient = async ({ req, res, endpointOption }) => {
const initializeClient = async ({
req,
res,
endpointOption,
optionsOnly,
overrideEndpoint,
overrideModel,
}) => {
const {
PROXY,
OPENAI_API_KEY,
@ -19,7 +27,9 @@ const initializeClient = async ({ req, res, endpointOption }) => {
OPENAI_SUMMARIZE,
DEBUG_OPENAI,
} = process.env;
const { key: expiresAt, endpoint, model: modelName } = req.body;
const { key: expiresAt } = req.body;
const modelName = overrideModel ?? req.body.model;
const endpoint = overrideEndpoint ?? req.body.endpoint;
const contextStrategy = isEnabled(OPENAI_SUMMARIZE) ? 'summarize' : null;
const credentials = {
@ -45,12 +55,10 @@ const initializeClient = async ({ req, res, endpointOption }) => {
let baseURL = userProvidesURL ? userValues?.baseURL : baseURLOptions[endpoint];
const clientOptions = {
debug: isEnabled(DEBUG_OPENAI),
contextStrategy,
reverseProxyUrl: baseURL ? baseURL : null,
proxy: PROXY ?? null,
req,
res,
debug: isEnabled(DEBUG_OPENAI),
reverseProxyUrl: baseURL ? baseURL : null,
...endpointOption,
};
@ -119,7 +127,17 @@ const initializeClient = async ({ req, res, endpointOption }) => {
throw new Error(`${endpoint} API Key not provided.`);
}
const client = new OpenAIClient(apiKey, clientOptions);
if (optionsOnly) {
const requestOptions = Object.assign(
{
modelOptions: endpointOption.modelOptions,
},
clientOptions,
);
return getLLMConfig(apiKey, requestOptions);
}
const client = new OpenAIClient(apiKey, Object.assign({ req, res }, clientOptions));
return {
client,
openAIApiKey: apiKey,

120
api/server/services/Endpoints/openAI/llm.js Normal file
View file

@ -0,0 +1,120 @@
const { HttpsProxyAgent } = require('https-proxy-agent');
const { sanitizeModelName, constructAzureURL } = require('~/utils');
const { isEnabled } = require('~/server/utils');
/**
* Generates configuration options for creating a language model (LLM) instance.
* @param {string} apiKey - The API key for authentication.
* @param {Object} options - Additional options for configuring the LLM.
* @param {Object} [options.modelOptions] - Model-specific options.
* @param {string} [options.modelOptions.model] - The name of the model to use.
* @param {number} [options.modelOptions.temperature] - Controls randomness in output generation (0-2).
* @param {number} [options.modelOptions.top_p] - Controls diversity via nucleus sampling (0-1).
* @param {number} [options.modelOptions.frequency_penalty] - Reduces repetition of token sequences (-2 to 2).
* @param {number} [options.modelOptions.presence_penalty] - Encourages discussing new topics (-2 to 2).
* @param {number} [options.modelOptions.max_tokens] - The maximum number of tokens to generate.
* @param {string[]} [options.modelOptions.stop] - Sequences where the API will stop generating further tokens.
* @param {string} [options.reverseProxyUrl] - URL for a reverse proxy, if used.
* @param {boolean} [options.useOpenRouter] - Flag to use OpenRouter API.
* @param {Object} [options.headers] - Additional headers for API requests.
* @param {string} [options.proxy] - Proxy server URL.
* @param {Object} [options.azure] - Azure-specific configurations.
* @param {boolean} [options.streaming] - Whether to use streaming mode.
* @param {Object} [options.addParams] - Additional parameters to add to the model options.
* @param {string[]} [options.dropParams] - Parameters to remove from the model options.
* @returns {Object} Configuration options for creating an LLM instance.
*/
function getLLMConfig(apiKey, options = {}) {
const {
modelOptions = {},
reverseProxyUrl,
useOpenRouter,
headers,
proxy,
azure,
streaming = true,
addParams,
dropParams,
} = options;
let llmConfig = {
model: 'gpt-4o-mini',
streaming,
};
Object.assign(llmConfig, modelOptions);
if (addParams && typeof addParams === 'object') {
Object.assign(llmConfig, addParams);
}
if (dropParams && Array.isArray(dropParams)) {
dropParams.forEach((param) => {
delete llmConfig[param];
});
}
const configOptions = {};
// Handle OpenRouter or custom reverse proxy
if (useOpenRouter || reverseProxyUrl === 'https://openrouter.ai/api/v1') {
configOptions.basePath = 'https://openrouter.ai/api/v1';
configOptions.baseOptions = {
headers: Object.assign(
{
'HTTP-Referer': 'https://librechat.ai',
'X-Title': 'LibreChat',
},
headers,
),
};
} else if (reverseProxyUrl) {
configOptions.basePath = reverseProxyUrl;
if (headers) {
configOptions.baseOptions = { headers };
}
}
if (proxy) {
const proxyAgent = new HttpsProxyAgent(proxy);
Object.assign(configOptions, {
httpAgent: proxyAgent,
httpsAgent: proxyAgent,
});
}
if (azure) {
const useModelName = isEnabled(process.env.AZURE_USE_MODEL_AS_DEPLOYMENT_NAME);
azure.azureOpenAIApiDeploymentName = useModelName
? sanitizeModelName(llmConfig.model)
: azure.azureOpenAIApiDeploymentName;
if (process.env.AZURE_OPENAI_DEFAULT_MODEL) {
llmConfig.model = process.env.AZURE_OPENAI_DEFAULT_MODEL;
}
if (configOptions.basePath) {
const azureURL = constructAzureURL({
baseURL: configOptions.basePath,
azureOptions: azure,
});
azure.azureOpenAIBasePath = azureURL.split(`/${azure.azureOpenAIApiDeploymentName}`)[0];
}
Object.assign(llmConfig, azure);
llmConfig.model = llmConfig.azureOpenAIApiDeploymentName;
} else {
llmConfig.openAIApiKey = apiKey;
// Object.assign(llmConfig, {
// configuration: { apiKey },
// });
}
if (process.env.OPENAI_ORGANIZATION && this.azure) {
llmConfig.organization = process.env.OPENAI_ORGANIZATION;
}
return { llmConfig, configOptions };
}
module.exports = { getLLMConfig };

64
api/server/services/Tokenizer.js Normal file
View file

@ -0,0 +1,64 @@
const { encoding_for_model: encodingForModel, get_encoding: getEncoding } = require('tiktoken');
const { logger } = require('~/config');
class Tokenizer {
constructor() {
this.tokenizersCache = {};
this.tokenizerCallsCount = 0;
}
getTokenizer(encoding, isModelName = false, extendSpecialTokens = {}) {
let tokenizer;
if (this.tokenizersCache[encoding]) {
tokenizer = this.tokenizersCache[encoding];
} else {
if (isModelName) {
tokenizer = encodingForModel(encoding, extendSpecialTokens);
} else {
tokenizer = getEncoding(encoding, extendSpecialTokens);
}
this.tokenizersCache[encoding] = tokenizer;
}
return tokenizer;
}
freeAndResetAllEncoders() {
try {
Object.keys(this.tokenizersCache).forEach((key) => {
if (this.tokenizersCache[key]) {
this.tokenizersCache[key].free();
delete this.tokenizersCache[key];
}
});
this.tokenizerCallsCount = 1;
} catch (error) {
logger.error('[Tokenizer] Free and reset encoders error', error);
}
}
resetTokenizersIfNecessary() {
if (this.tokenizerCallsCount >= 25) {
if (this.options?.debug) {
logger.debug('[Tokenizer] freeAndResetAllEncoders: reached 25 encodings, resetting...');
}
this.freeAndResetAllEncoders();
}
this.tokenizerCallsCount++;
}
getTokenCount(text, encoding = 'cl100k_base') {
this.resetTokenizersIfNecessary();
try {
const tokenizer = this.getTokenizer(encoding);
return tokenizer.encode(text, 'all').length;
} catch (error) {
this.freeAndResetAllEncoders();
const tokenizer = this.getTokenizer(encoding);
return tokenizer.encode(text, 'all').length;
}
}
}
const tokenizerService = new Tokenizer();
module.exports = tokenizerService;

117
api/server/services/ToolService.js
View file

@ -1,6 +1,7 @@
const fs = require('fs');
const path = require('path');
const { StructuredTool } = require('langchain/tools');
const { tool: toolFn } = require('@langchain/core/tools');
const { zodToJsonSchema } = require('zod-to-json-schema');
const { Calculator } = require('langchain/tools/calculator');
const {
@ -180,7 +181,7 @@ async function processRequiredActions(client, requiredActions) {
const tools = requiredActions.map((action) => action.tool);
const loadedTools = await loadTools({
user: client.req.user.id,
model: client.req.body.model ?? 'gpt-3.5-turbo-1106',
model: client.req.body.model ?? 'gpt-4o-mini',
tools,
functions: true,
options: {
@ -372,8 +373,120 @@ async function processRequiredActions(client, requiredActions) {
};
}
/**
* Processes the runtime tool calls and returns a combined toolMap.
* @param {Object} params - Run params containing user and request information.
* @param {ServerRequest} params.req - The request object.
* @param {string} params.agent_id - The agent ID.
* @param {string[]} params.tools - The agent's available tools.
* @param {string | undefined} [params.openAIApiKey] - The OpenAI API key.
* @returns {Promise<{ tools?: StructuredTool[]; toolMap?: Record<string, StructuredTool>}>} The combined toolMap.
*/
async function loadAgentTools({ req, agent_id, tools, openAIApiKey }) {
if (!tools || tools.length === 0) {
return {};
}
const loadedTools = await loadTools({
user: req.user.id,
// model: req.body.model ?? 'gpt-4o-mini',
tools,
functions: true,
options: {
req,
openAIApiKey,
returnMetadata: true,
processFileURL,
uploadImageBuffer,
fileStrategy: req.app.locals.fileStrategy,
},
skipSpecs: true,
});
const agentTools = [];
for (let i = 0; i < loadedTools.length; i++) {
const tool = loadedTools[i];
const toolInstance = toolFn(
async (...args) => {
return tool['_call'](...args);
},
{
name: tool.name,
description: tool.description,
schema: tool.schema,
},
);
agentTools.push(toolInstance);
}
const ToolMap = loadedTools.reduce((map, tool) => {
map[tool.name] = tool;
return map;
}, {});
let actionSets = [];
const ActionToolMap = {};
for (const toolName of tools) {
if (!ToolMap[toolName]) {
if (!actionSets.length) {
actionSets = (await loadActionSets({ agent_id })) ?? [];
}
let actionSet = null;
let currentDomain = '';
for (let action of actionSets) {
const domain = await domainParser(req, action.metadata.domain, true);
if (toolName.includes(domain)) {
currentDomain = domain;
actionSet = action;
break;
}
}
if (actionSet) {
const validationResult = validateAndParseOpenAPISpec(actionSet.metadata.raw_spec);
if (validationResult.spec) {
const { requestBuilders, functionSignatures, zodSchemas } = openapiToFunction(
validationResult.spec,
true,
);
const functionName = toolName.replace(`${actionDelimiter}${currentDomain}`, '');
const functionSig = functionSignatures.find((sig) => sig.name === functionName);
const requestBuilder = requestBuilders[functionName];
const zodSchema = zodSchemas[functionName];
if (requestBuilder) {
const tool = await createActionTool({
action: actionSet,
requestBuilder,
zodSchema,
name: toolName,
description: functionSig.description,
});
agentTools.push(tool);
ActionToolMap[toolName] = tool;
}
}
}
}
}
if (tools.length > 0 && agentTools.length === 0) {
throw new Error('No tools found for the specified tool calls.');
}
const toolMap = { ...ToolMap, ...ActionToolMap };
return {
tools: agentTools,
toolMap,
};
}
module.exports = {
formatToOpenAIAssistantTool,
loadAgentTools,
loadAndFormatTools,
processRequiredActions,
formatToOpenAIAssistantTool,
};

60
api/typedefs.js
View file

@ -8,6 +8,36 @@
* @memberof typedefs
*/
/**
* @exports ServerRequest
* @typedef {import('express').Request} ServerRequest
* @memberof typedefs
*/
/**
* @exports ServerResponse
* @typedef {import('express').Response} ServerResponse
* @memberof typedefs
*/
/**
* @exports ClientCallbacks
* @typedef {import('@librechat/agents').ClientCallbacks} ClientCallbacks
* @memberof typedefs
*/
/**
* @exports StreamEventData
* @typedef {import('@librechat/agents').StreamEventData} StreamEventData
* @memberof typedefs
*/
/**
* @exports ToolEndData
* @typedef {import('@librechat/agents').ToolEndData} ToolEndData
* @memberof typedefs
*/
/**
* @exports Ollama
* @typedef {import('ollama').Ollama} Ollama
@ -724,6 +754,36 @@
* @memberof typedefs
*/
/**
* @exports Agent
* @typedef {import('librechat-data-provider').Agent} Agent
* @memberof typedefs
*/
/**
* @exports AgentCreateParams
* @typedef {import('librechat-data-provider').AgentCreateParams} AgentCreateParams
* @memberof typedefs
*/
/**
* @exports AgentUpdateParams
* @typedef {import('librechat-data-provider').AgentUpdateParams} AgentUpdateParams
* @memberof typedefs
*/
/**
* @exports AgentListParams
* @typedef {import('librechat-data-provider').AgentListParams} AgentListParams
* @memberof typedefs
*/
/**
* @exports AgentListResponse
* @typedef {import('librechat-data-provider').AgentListResponse} AgentListResponse
* @memberof typedefs
*/
/**
* Represents details of the message creation by the run step, including the ID of the created message.
*

1
api/utils/tokens.js
View file

@ -68,6 +68,7 @@ const aggregateModels = { ...openAIModels, ...googleModels, ...anthropicModels,
const maxTokensMap = {
[EModelEndpoint.azureOpenAI]: openAIModels,
[EModelEndpoint.openAI]: aggregateModels,
[EModelEndpoint.agents]: aggregateModels,
[EModelEndpoint.custom]: aggregateModels,
[EModelEndpoint.google]: googleModels,
[EModelEndpoint.anthropic]: anthropicModels,

2
client/package.json
View file

@ -135,7 +135,7 @@
"tailwindcss": "^3.4.1",
"ts-jest": "^29.1.0",
"typescript": "^5.0.4",
"vite": "^5.4.2",
"vite": "^5.1.1",
"vite-plugin-node-polyfills": "^0.17.0",
"vite-plugin-pwa": "^0.19.8"
}

27
client/src/Providers/AgentsContext.tsx Normal file
View file

@ -0,0 +1,27 @@
import { useForm, FormProvider } from 'react-hook-form';
import { createContext, useContext } from 'react';
import { defaultAgentFormValues } from 'librechat-data-provider';
import type { UseFormReturn } from 'react-hook-form';
import type { AgentForm } from '~/common';
type AgentsContextType = UseFormReturn<AgentForm>;
export const AgentsContext = createContext<AgentsContextType>({} as AgentsContextType);
export function useAgentsContext() {
const context = useContext(AgentsContext);
if (context === undefined) {
throw new Error('useAgentsContext must be used within an AgentsProvider');
}
return context;
}
export default function AgentsProvider({ children }) {
const methods = useForm<AgentForm>({
defaultValues: defaultAgentFormValues,
});
return <FormProvider {...methods}>{children}</FormProvider>;
}

6
client/src/Providers/AgentsMapContext.tsx Normal file
View file

@ -0,0 +1,6 @@
import { createContext, useContext } from 'react';
import useAgentsMap from '~/hooks/Agents/useAgentsMap';
type AgentsMapContextType = ReturnType<typeof useAgentsMap>;
export const AgentsMapContext = createContext<AgentsMapContextType>({} as AgentsMapContextType);
export const useAgentsMapContext = () => useContext(AgentsMapContext);

3
client/src/Providers/index.ts
View file

@ -1,5 +1,6 @@
export { default as ToastProvider } from './ToastContext';
export { default as AssistantsProvider } from './AssistantsContext';
export { default as AgentsProvider } from './AgentsContext';
export * from './ChatContext';
export * from './ShareContext';
export * from './ToastContext';
@ -10,5 +11,7 @@ export * from './ChatFormContext';
export * from './BookmarkContext';
export * from './DashboardContext';
export * from './AssistantsContext';
export * from './AgentsContext';
export * from './AssistantsMapContext';
export * from './AnnouncerContext';
export * from './AgentsMapContext';

27
client/src/common/agents-types.ts Normal file
View file

@ -0,0 +1,27 @@
import { Capabilities } from 'librechat-data-provider';
import type { Agent, AgentProvider, AgentModelParameters } from 'librechat-data-provider';
import type { Option, ExtendedFile } from './types';
export type TAgentOption = Option &
Agent & {
files?: Array<[string, ExtendedFile]>;
code_files?: Array<[string, ExtendedFile]>;
};
export type AgentCapabilities = {
[Capabilities.code_interpreter]: boolean;
[Capabilities.image_vision]: boolean;
[Capabilities.retrieval]: boolean;
};
export type AgentForm = {
agent?: TAgentOption;
id: string;
name: string | null;
description: string | null;
instructions: string | null;
model: string | null;
model_parameters: AgentModelParameters;
tools?: string[];
provider?: AgentProvider | Option;
} & AgentCapabilities;

6
client/src/common/assistants-types.ts
View file

@ -1,7 +1,9 @@
import { Capabilities } from 'librechat-data-provider';
import type { Assistant } from 'librechat-data-provider';
import { Capabilities, EModelEndpoint } from 'librechat-data-provider';
import type { Assistant, AssistantsEndpoint } from 'librechat-data-provider';
import type { Option, ExtendedFile } from './types';
export type ActionsEndpoint = AssistantsEndpoint | EModelEndpoint.agents;
export type TAssistantOption =
| string
| (Option &

1
client/src/common/index.ts
View file

@ -1,3 +1,4 @@
export * from './artifacts';
export * from './types';
export * from './assistants-types';
export * from './agents-types';

34
client/src/common/types.ts
View file

@ -6,6 +6,7 @@ import type { SetterOrUpdater } from 'recoil';
import type {
TRole,
TUser,
Agent,
Action,
TPreset,
TPlugin,
@ -18,7 +19,9 @@ import type {
TConversation,
TStartupConfig,
EModelEndpoint,
TEndpointsConfig,
ActionMetadata,
AssistantDocument,
AssistantsEndpoint,
TMessageContentParts,
AuthorizationTypeEnum,
@ -66,6 +69,12 @@ export type AssistantListItem = {
model: string;
};
export type AgentListItem = {
id: string;
name: string;
avatar: Agent['avatar'];
};
export type TPluginMap = Record<string, TPlugin>;
export type GenericSetter<T> = (value: T | ((currentValue: T) => T)) => void;
@ -92,10 +101,13 @@ export type IconMapProps = {
context?: 'landing' | 'menu-item' | 'nav' | 'message';
endpoint?: string | null;
assistantName?: string;
agentName?: string;
avatar?: string;
size?: number;
};
export type AgentIconMapProps = IconMapProps & { agentName: string };
export type NavLink = {
title: string;
label?: string;
@ -124,6 +136,7 @@ export interface DataColumnMeta {
export enum Panel {
builder = 'builder',
actions = 'actions',
model = 'model',
}
export type FileSetter =
@ -159,11 +172,30 @@ export type AssistantPanelProps = {
activePanel?: string;
endpoint: AssistantsEndpoint;
version: number | string;
documentsMap: Map<string, AssistantDocument> | null;
setAction: React.Dispatch<React.SetStateAction<Action | undefined>>;
setCurrentAssistantId: React.Dispatch<React.SetStateAction<string | undefined>>;
setActivePanel: React.Dispatch<React.SetStateAction<Panel>>;
};
export type AgentPanelProps = {
index?: number;
agent_id?: string;
activePanel?: string;
action?: Action;
actions?: Action[];
setActivePanel: React.Dispatch<React.SetStateAction<Panel>>;
setAction: React.Dispatch<React.SetStateAction<Action | undefined>>;
endpointsConfig?: TEndpointsConfig;
setCurrentAgentId: React.Dispatch<React.SetStateAction<string | undefined>>;
};
export type AgentModelPanelProps = {
setActivePanel: React.Dispatch<React.SetStateAction<Panel>>;
providers: Option[];
models: Record<string, string[]>;
};
export type AugmentedColumnDef<TData, TValue> = ColumnDef<TData, TValue> & DataColumnMeta;
export type TSetOption = SetOption;
@ -385,6 +417,7 @@ export type IconProps = Pick<TMessage, 'isCreatedByUser' | 'model'> &
endpoint?: EModelEndpoint | string | null;
endpointType?: EModelEndpoint | null;
assistantName?: string;
agentName?: string;
error?: boolean;
};
@ -407,6 +440,7 @@ export type TMessageAudio = {
};
export type OptionWithIcon = Option & { icon?: React.ReactNode };
export type DropdownValueSetter = (value: string | Option | OptionWithIcon) => void;
export type MentionOption = OptionWithIcon & {
type: string;
value: string;

36
client/src/components/Chat/Input/CircleRender.tsx Normal file
View file

@ -0,0 +1,36 @@
import React from 'react';
import { CircleIcon, CircleDotsIcon } from '~/components/svg';
import { ECallState } from 'librechat-data-provider';
const CircleRender = ({ rmsLevel, isCameraOn, state }) => {
const getIconComponent = (state) => {
switch (state) {
case ECallState.Thinking:
return <CircleDotsIcon />;
default:
return (
<div className="smooth-transition" style={{ transform: `scale(${transformScale})` }}>
<CircleIcon state={state} size="256" />
</div>
);
}
};
const baseScale = isCameraOn ? 0.5 : 1;
const scaleMultiplier =
rmsLevel > 0.08
? 1.8
: rmsLevel > 0.07
? 1.6
: rmsLevel > 0.05
? 1.4
: rmsLevel > 0.01
? 1.2
: 1;
const transformScale = baseScale * scaleMultiplier;
return getIconComponent(state);
};
export default CircleRender;

3
client/src/components/Chat/Input/Files/FileRow.tsx
View file

@ -11,6 +11,8 @@ export default function FileRow({
setFiles,
setFilesLoading,
assistant_id,
// TODO: Agent file handling
agent_id,
tool_resource,
fileFilter,
isRTL,
@ -21,6 +23,7 @@ export default function FileRow({
setFilesLoading: React.Dispatch<React.SetStateAction<boolean>>;
fileFilter?: (file: ExtendedFile) => boolean;
assistant_id?: string;
agent_id?: string;
tool_resource?: EToolResources;
isRTL?: boolean;
Wrapper?: React.FC<{ children: React.ReactNode }>;

22
client/src/components/Chat/Menus/Endpoints/Icons.tsx
View file

@ -1,5 +1,6 @@
import { EModelEndpoint } from 'librechat-data-provider';
import type { IconMapProps } from '~/common';
import type { IconMapProps, AgentIconMapProps } from '~/common';
import { BrainCircuit } from 'lucide-react';
import {
MinimalPlugin,
GPTIcon,
@ -33,6 +34,24 @@ const AssistantAvatar = ({ className = '', assistantName, avatar, size }: IconMa
return <Sparkles className={cn(assistantName === '' ? 'icon-2xl' : '', className)} />;
};
const AgentAvatar = ({ className = '', agentName, avatar, size }: AgentIconMapProps) => {
if (agentName && avatar) {
return (
<img
src={avatar}
className="bg-token-surface-secondary dark:bg-token-surface-tertiary h-full w-full rounded-full object-cover"
alt={agentName}
width="80"
height="80"
/>
);
} else if (agentName) {
return <AssistantIcon className={cn('text-token-secondary', className)} size={size} />;
}
return <BrainCircuit className={cn(agentName === '' ? 'icon-2xl' : '', className)} />;
};
export const icons = {
[EModelEndpoint.azureOpenAI]: AzureMinimalIcon,
[EModelEndpoint.openAI]: GPTIcon,
@ -44,5 +63,6 @@ export const icons = {
[EModelEndpoint.custom]: CustomMinimalIcon,
[EModelEndpoint.assistants]: AssistantAvatar,
[EModelEndpoint.azureAssistants]: AssistantAvatar,
[EModelEndpoint.agents]: AgentAvatar,
unknown: UnknownIcon,
};

2
client/src/components/Chat/Messages/Content/ContentParts.tsx
View file

@ -28,7 +28,7 @@ any) => {
return (
<Part
key={`display-${messageId}-${idx}`}
showCursor={showCursor && isSubmitting}
showCursor={showCursor === true && isSubmitting}
isSubmitting={isSubmitting}
part={part}
{...props}

142
client/src/components/Chat/Messages/Content/Part.tsx
View file

@ -15,10 +15,8 @@ import Container from './Container';
import ToolCall from './ToolCall';
import Markdown from './Markdown';
import ImageGen from './ImageGen';
import Image from './Image';
import { cn } from '~/utils';
// import EditMessage from './EditMessage';
import Image from './Image';
// Display Message Component
const DisplayMessage = ({ text, isCreatedByUser = false, message, showCursor }: TDisplayProps) => {
@ -31,6 +29,10 @@ const DisplayMessage = ({ text, isCreatedByUser = false, message, showCursor }:
() => message.messageId === latestMessage?.messageId,
[message.messageId, latestMessage?.messageId],
);
// Note: for testing purposes
// isSubmitting && isLatestMessage && logger.log('message_stream', { text, isCreatedByUser, isSubmitting, showCursorState });
return (
<div
className={cn(
@ -55,7 +57,7 @@ export default function Part({
isSubmitting,
message,
}: {
part: TMessageContentParts;
part: TMessageContentParts | undefined;
isSubmitting: boolean;
showCursor: boolean;
message: TMessage;
@ -67,78 +69,92 @@ export default function Part({
if (part.type === ContentTypes.ERROR) {
return <ErrorMessage message={message} text={part[ContentTypes.TEXT].value} className="my-2" />;
} else if (part.type === ContentTypes.TEXT) {
// Access the value property
const text = typeof part.text === 'string' ? part.text : part.text.value;
if (typeof text !== 'string') {
return null;
}
return (
<Container message={message}>
<DisplayMessage
text={part[ContentTypes.TEXT].value}
text={text}
isCreatedByUser={message.isCreatedByUser}
message={message}
showCursor={showCursor}
/>
</Container>
);
} else if (
part.type === ContentTypes.TOOL_CALL &&
part[ContentTypes.TOOL_CALL].type === ToolCallTypes.CODE_INTERPRETER
) {
} else if (part.type === ContentTypes.TOOL_CALL) {
const toolCall = part[ContentTypes.TOOL_CALL];
const code_interpreter = toolCall[ToolCallTypes.CODE_INTERPRETER];
return (
<CodeAnalyze
initialProgress={toolCall.progress ?? 0.1}
code={code_interpreter.input}
outputs={code_interpreter.outputs ?? []}
isSubmitting={isSubmitting}
/>
);
} else if (
part.type === ContentTypes.TOOL_CALL &&
(part[ContentTypes.TOOL_CALL].type === ToolCallTypes.RETRIEVAL ||
part[ContentTypes.TOOL_CALL].type === ToolCallTypes.FILE_SEARCH)
) {
const toolCall = part[ContentTypes.TOOL_CALL];
return <RetrievalCall initialProgress={toolCall.progress ?? 0.1} isSubmitting={isSubmitting} />;
} else if (
part.type === ContentTypes.TOOL_CALL &&
part[ContentTypes.TOOL_CALL].type === ToolCallTypes.FUNCTION &&
imageGenTools.has(part[ContentTypes.TOOL_CALL].function.name)
) {
const toolCall = part[ContentTypes.TOOL_CALL];
return (
<ImageGen initialProgress={toolCall.progress ?? 0.1} args={toolCall.function.arguments} />
);
} else if (
part.type === ContentTypes.TOOL_CALL &&
part[ContentTypes.TOOL_CALL].type === ToolCallTypes.FUNCTION
) {
const toolCall = part[ContentTypes.TOOL_CALL];
if (isImageVisionTool(toolCall)) {
if (isSubmitting && showCursor) {
return (
<Container message={message}>
<DisplayMessage
text={''}
isCreatedByUser={message.isCreatedByUser}
message={message}
showCursor={showCursor}
/>
</Container>
);
}
if (!toolCall) {
return null;
}
return (
<ToolCall
initialProgress={toolCall.progress ?? 0.1}
isSubmitting={isSubmitting}
args={toolCall.function.arguments}
name={toolCall.function.name}
output={toolCall.function.output}
/>
);
if ('args' in toolCall && (!toolCall.type || toolCall.type === ToolCallTypes.TOOL_CALL)) {
return (
<ToolCall
args={toolCall.args}
name={toolCall.name ?? ''}
output={toolCall.output ?? ''}
initialProgress={toolCall.progress ?? 0.1}
isSubmitting={isSubmitting}
/>
);
} else if (toolCall.type === ToolCallTypes.CODE_INTERPRETER) {
const code_interpreter = toolCall[ToolCallTypes.CODE_INTERPRETER];
return (
<CodeAnalyze
initialProgress={toolCall.progress ?? 0.1}
code={code_interpreter.input}
outputs={code_interpreter.outputs ?? []}
isSubmitting={isSubmitting}
/>
);
} else if (
toolCall.type === ToolCallTypes.RETRIEVAL ||
toolCall.type === ToolCallTypes.FILE_SEARCH
) {
return (
<RetrievalCall initialProgress={toolCall.progress ?? 0.1} isSubmitting={isSubmitting} />
);
} else if (
toolCall.type === ToolCallTypes.FUNCTION &&
ToolCallTypes.FUNCTION in toolCall &&
imageGenTools.has(toolCall.function.name)
) {
return (
<ImageGen
initialProgress={toolCall.progress ?? 0.1}
args={toolCall.function.arguments as string}
/>
);
} else if (toolCall.type === ToolCallTypes.FUNCTION && ToolCallTypes.FUNCTION in toolCall) {
if (isImageVisionTool(toolCall)) {
if (isSubmitting && showCursor) {
return (
<Container message={message}>
<DisplayMessage
text={''}
isCreatedByUser={message.isCreatedByUser}
message={message}
showCursor={showCursor}
/>
</Container>
);
}
return null;
}
return (
<ToolCall
initialProgress={toolCall.progress ?? 0.1}
isSubmitting={isSubmitting}
args={toolCall.function.arguments as string}
name={toolCall.function.name}
output={toolCall.function.output}
/>
);
}
} else if (part.type === ContentTypes.IMAGE_FILE) {
const imageFile = part[ContentTypes.IMAGE_FILE];
const height = imageFile.height ?? 1920;
@ -153,8 +169,6 @@ export default function Part({
height: height + 'px',
width: width + 'px',
}}
// n={imageFiles.length}
// i={i}
/>
);
}

32
client/src/components/Chat/Messages/Content/ToolCall.tsx
View file

@ -1,4 +1,4 @@
// import { useState, useEffect } from 'react';
import { useMemo } from 'react';
import { actionDelimiter, actionDomainSeparator, Constants } from 'librechat-data-provider';
import * as Popover from '@radix-ui/react-popover';
import useLocalize from '~/hooks/useLocalize';
@ -11,18 +11,19 @@ import ToolPopover from './ToolPopover';
// import ActionIcon from './ActionIcon';
import WrenchIcon from './WrenchIcon';
import { useProgress } from '~/hooks';
import { logger } from '~/utils';
export default function ToolCall({
initialProgress = 0.1,
isSubmitting,
name,
args = '',
args: _args = '',
output,
}: {
initialProgress: number;
isSubmitting: boolean;
name: string;
args: string;
args: string | Record<string, unknown>;
output?: string | null;
}) {
const localize = useLocalize();
@ -35,6 +36,27 @@ export default function ToolCall({
const domain = _domain?.replaceAll(actionDomainSeparator, '.') ?? null;
const error = output?.toLowerCase()?.includes('error processing tool');
const args = useMemo(() => {
if (typeof _args === 'string') {
return _args;
}
try {
return JSON.stringify(_args, null, 2);
} catch (e) {
logger.error(
'client/src/components/Chat/Messages/Content/ToolCall.tsx - Failed to stringify args',
e,
);
return '';
}
}, [_args]);
const hasInfo = useMemo(
() => (args?.length || 0) > 0 || (output?.length || 0) > 0,
[args, output],
);
return (
<Popover.Root>
<div className="my-2.5 flex items-center gap-2.5">
@ -67,10 +89,10 @@ export default function ToolCall({
? localize('com_assistants_completed_action', domain)
: localize('com_assistants_completed_function', function_name)
}
hasInput={!!args?.length}
hasInput={hasInfo}
popover={true}
/>
{!!args?.length && (
{hasInfo && (
<ToolPopover input={args} output={output} domain={domain} function_name={function_name} />
)}
</div>

20
client/src/components/Chat/Messages/MessageIcon.tsx
View file

@ -1,6 +1,6 @@
import React, { useMemo, memo } from 'react';
import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
import type { TMessage, TPreset, Assistant } from 'librechat-data-provider';
import type { TMessage, TPreset, Assistant, Agent } from 'librechat-data-provider';
import type { TMessageProps } from '~/common';
import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
import { getEndpointField, getIconEndpoint } from '~/utils';
@ -10,15 +10,26 @@ const MessageIcon = memo(
(
props: Pick<TMessageProps, 'message' | 'conversation'> & {
assistant?: Assistant;
agent?: Agent;
},
) => {
const { data: endpointsConfig } = useGetEndpointsQuery();
const { message, conversation, assistant } = props;
const { message, conversation, assistant, agent } = props;
const assistantName = useMemo(() => assistant?.name ?? '', [assistant]);
const assistantAvatar = useMemo(() => assistant?.metadata?.avatar ?? '', [assistant]);
const agentName = useMemo(() => props.agent?.name ?? '', [props.agent]);
const agentAvatar = useMemo(() => props.agent?.avatar?.filepath ?? '', [props.agent]);
const isCreatedByUser = useMemo(() => message?.isCreatedByUser ?? false, [message]);
let avatarURL = '';
if (assistant) {
avatarURL = assistantAvatar;
} else if (agent) {
avatarURL = agentAvatar;
}
const messageSettings = useMemo(
() => ({
...(conversation ?? {}),
@ -47,8 +58,10 @@ const MessageIcon = memo(
preset={messageSettings as typeof messageSettings & TPreset}
context="message"
assistantAvatar={assistantAvatar}
agentAvatar={agentAvatar}
endpointIconURL={endpointIconURL}
assistantName={assistantName}
agentName={agentName}
/>
);
}
@ -57,9 +70,10 @@ const MessageIcon = memo(
<Icon
isCreatedByUser={isCreatedByUser}
endpoint={endpoint}
iconURL={!assistant ? endpointIconURL : assistantAvatar}
iconURL={avatarURL || endpointIconURL}
model={message?.model ?? conversation?.model}
assistantName={assistantName}
agentName={agentName}
size={28.8}
/>
);

24
client/src/components/Chat/Messages/MessageParts.tsx
View file

@ -20,6 +20,7 @@ export default function Message(props: TMessageProps) {
ask,
edit,
index,
agent,
isLast,
enterEdit,
assistant,
@ -38,6 +39,16 @@ export default function Message(props: TMessageProps) {
return null;
}
let name = '';
if (isCreatedByUser === true) {
name = localize('com_user_message');
} else if (assistant) {
name = assistant.name ?? localize('com_ui_assistant');
} else if (agent) {
name = agent.name ?? localize('com_ui_agent');
}
return (
<>
<div
@ -51,7 +62,12 @@ export default function Message(props: TMessageProps) {
<div>
<div className="pt-0.5">
<div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
<Icon message={message} conversation={conversation} assistant={assistant} />
<Icon
message={message}
conversation={conversation}
assistant={assistant}
agent={agent}
/>
</div>
</div>
</div>
@ -62,11 +78,7 @@ export default function Message(props: TMessageProps) {
isCreatedByUser === true ? '' : 'agent-turn',
)}
>
<div className={cn('select-none font-semibold', fontSize)}>
{isCreatedByUser === true
? localize('com_user_message')
: (assistant && assistant.name) ?? localize('com_ui_assistant')}
</div>
<div className={cn('select-none font-semibold', fontSize)}>{name}</div>
<div className="flex-col gap-1 md:gap-3">
<div className="flex max-w-full flex-grow flex-col gap-0">
<ContentParts

7
client/src/components/Endpoints/ConvoIconURL.tsx
View file

@ -7,8 +7,10 @@ interface ConvoIconURLProps {
preset: TPreset | null;
endpointIconURL?: string;
assistantName?: string;
agentName?: string;
context?: 'landing' | 'menu-item' | 'nav' | 'message';
assistantAvatar?: string;
agentAvatar?: string;
}
const classMap = {
@ -31,6 +33,8 @@ const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
endpointIconURL,
assistantAvatar,
assistantName,
agentAvatar,
agentName,
context,
}) => {
const { iconURL = '' } = preset ?? {};
@ -71,7 +75,8 @@ const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
className="h-2/3 w-2/3"
iconURL={endpointIconURL}
assistantName={assistantName}
avatar={assistantAvatar}
avatar={assistantAvatar || agentAvatar}
agentName={agentName}
/>
</div>
);

32
client/src/components/Endpoints/MessageEndpointIcon.tsx
View file

@ -1,5 +1,6 @@
import { EModelEndpoint, isAssistantsEndpoint } from 'librechat-data-provider';
import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
import { BrainCircuit } from 'lucide-react';
import {
Plugin,
GPTIcon,
@ -25,6 +26,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
size = 30,
model = '',
assistantName,
agentName,
} = props;
const assistantsIcon = {
@ -56,8 +58,38 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
name: endpoint,
};
const agentsIcon = {
icon: props.iconURL ? (
<div className="relative flex h-6 w-6 items-center justify-center">
<div
title={agentName}
style={{
width: size,
height: size,
}}
className={cn('overflow-hidden rounded-full', props.className ?? '')}
>
<img
className="shadow-stroke h-full w-full object-cover"
src={props.iconURL}
alt={agentName}
style={{ height: '80', width: '80' }}
/>
</div>
</div>
) : (
<div className="h-6 w-6">
<div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
<BrainCircuit className="h-2/3 w-2/3 text-gray-400" />
</div>
</div>
),
name: endpoint,
};
const endpointIcons = {
[EModelEndpoint.assistants]: assistantsIcon,
[EModelEndpoint.agents]: agentsIcon,
[EModelEndpoint.azureAssistants]: assistantsIcon,
[EModelEndpoint.azureOpenAI]: {
icon: <AzureMinimalIcon size={size * 0.5555555555555556} />,

2
client/src/components/Endpoints/MinimalIcon.tsx
View file

@ -1,4 +1,5 @@
import { EModelEndpoint } from 'librechat-data-provider';
import { BrainCircuit } from 'lucide-react';
import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
import {
AzureMinimalIcon,
@ -46,6 +47,7 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
[EModelEndpoint.chatGPTBrowser]: { icon: <LightningIcon />, name: 'ChatGPT' },
[EModelEndpoint.assistants]: { icon: <Sparkles className="icon-sm" />, name: 'Assistant' },
[EModelEndpoint.azureAssistants]: { icon: <Sparkles className="icon-sm" />, name: 'Assistant' },
[EModelEndpoint.agents]: { icon: <BrainCircuit className="icon-sm" />, name: 'Agent' },
default: {
icon: (
<UnknownIcon

4
client/src/components/Endpoints/Settings/AgentSettings.tsx
View file

@ -1,5 +1,4 @@
import type { TModelSelectProps } from '~/common';
import { ESide } from '~/common';
import {
Switch,
Label,
@ -9,9 +8,10 @@ import {
SelectDropDown,
HoverCardTrigger,
} from '~/components';
import OptionHover from './OptionHover';
import { cn, optionText, defaultTextProps, removeFocusRings } from '~/utils';
import OptionHover from './OptionHover';
import { useLocalize } from '~/hooks';
import { ESide } from '~/common';
export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
const localize = useLocalize();

12
client/src/components/Endpoints/Settings/Assistants.tsx
View file

@ -2,8 +2,14 @@ import { useState, useMemo, useEffect } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import type { Assistant, TPreset } from 'librechat-data-provider';
import type { TModelSelectProps, Option } from '~/common';
import {
cn,
defaultTextProps,
removeFocusRings,
mapAssistants,
createDropdownSetter,
} from '~/utils';
import { Label, HoverCard, SelectDropDown, HoverCardTrigger } from '~/components/ui';
import { cn, defaultTextProps, removeFocusRings, mapAssistants } from '~/utils';
import { useLocalize, useDebouncedInput, useAssistantListMap } from '~/hooks';
import OptionHover from './OptionHover';
import { ESide } from '~/common';
@ -113,7 +119,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
<div className="grid w-full items-center gap-2">
<SelectDropDown
value={model ?? ''}
setValue={setModel}
setValue={createDropdownSetter(setModel)}
availableValues={modelOptions}
disabled={readonly}
className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)}
@ -128,7 +134,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
<SelectDropDown
title={localize('com_endpoint_assistant')}
value={assistantValue}
setValue={setAssistant}
setValue={createDropdownSetter(setAssistant)}
availableValues={assistants as Option[]}
disabled={readonly}
className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)}

1
client/src/components/Endpoints/Settings/settings.ts
View file

@ -10,6 +10,7 @@ import OpenAISettings from './OpenAI';
const settings: { [key: string]: FC<TModelSelectProps> } = {
[EModelEndpoint.assistants]: AssistantsSettings,
[EModelEndpoint.azureAssistants]: AssistantsSettings,
[EModelEndpoint.agents]: OpenAISettings,
[EModelEndpoint.openAI]: OpenAISettings,
[EModelEndpoint.custom]: OpenAISettings,
[EModelEndpoint.azureOpenAI]: OpenAISettings,

6
client/src/components/Prompts/Groups/CategorySelector.tsx
View file

@ -2,8 +2,8 @@ import React, { useMemo } from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import { LocalStorageKeys } from 'librechat-data-provider';
import { useLocalize, useCategories } from '~/hooks';
import { cn, createDropdownSetter } from '~/utils';
import { SelectDropDown } from '~/components/ui';
import { cn } from '~/utils';
const CategorySelector = ({
currentCategory,
@ -37,11 +37,11 @@ const CategorySelector = ({
title="Category"
tabIndex={tabIndex}
value={categoryOption || ''}
setValue={(value) => {
setValue={createDropdownSetter((value: string) => {
setValue('category', value, { shouldDirty: false });
localStorage.setItem(LocalStorageKeys.LAST_PROMPT_CATEGORY, value);
onValueChange?.(value);
}}
})}
availableValues={categories}
showAbove={false}
showLabel={false}

10
client/src/components/Share/MessageIcon.tsx
View file

@ -1,5 +1,5 @@
import { useMemo } from 'react';
import type { TMessage, TPreset, Assistant } from 'librechat-data-provider';
import type { TMessage, TPreset, Assistant, Agent } from 'librechat-data-provider';
import type { TMessageProps } from '~/common';
import MessageEndpointIcon from '../Endpoints/MessageEndpointIcon';
import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
@ -9,12 +9,15 @@ import { UserIcon } from '../svg';
export default function MessageIcon(
props: Pick<TMessageProps, 'message' | 'conversation'> & {
assistant?: false | Assistant;
agent?: false | Agent;
},
) {
const { message, conversation, assistant } = props;
const { message, conversation, assistant, agent } = props;
const assistantName = assistant ? (assistant.name as string | undefined) : '';
const assistantAvatar = assistant ? (assistant.metadata?.avatar as string | undefined) : '';
const agentName = agent ? (agent.name as string | undefined) : '';
const agentAvatar = agent ? (agent.metadata?.avatar as string | undefined) : '';
const messageSettings = useMemo(
() => ({
@ -38,6 +41,8 @@ export default function MessageIcon(
context="message"
assistantAvatar={assistantAvatar}
assistantName={assistantName}
agentAvatar={agentAvatar}
agentName={agentName}
/>
);
}
@ -65,6 +70,7 @@ export default function MessageIcon(
iconURL={!assistant ? undefined : assistantAvatar}
model={message?.model ?? conversation?.model}
assistantName={assistantName}
agentName={agentName}
size={28.8}
/>
);

87
client/src/components/SidePanel/AgentSwitcher.tsx Normal file
View file

@ -0,0 +1,87 @@
import { useEffect, useMemo } from 'react';
import { EModelEndpoint, isAgentsEndpoint, LocalStorageKeys } from 'librechat-data-provider';
import type { Agent } from 'librechat-data-provider';
import type { SwitcherProps, OptionWithIcon } from '~/common';
import { useSetIndexOptions, useSelectAgent, useLocalize } from '~/hooks';
import { useChatContext, useAgentsMapContext } from '~/Providers';
import ControlCombobox from '~/components/ui/ControlCombobox';
import Icon from '~/components/Endpoints/Icon';
export default function AgentSwitcher({ isCollapsed }: SwitcherProps) {
const localize = useLocalize();
const { setOption } = useSetIndexOptions();
const { index, conversation } = useChatContext();
const { agent_id: selectedAgentId = null, endpoint } = conversation ?? {};
const agentsMapResult = useAgentsMapContext();
const agentsMap = useMemo(() => {
return agentsMapResult ?? {};
}, [agentsMapResult]);
const { onSelect } = useSelectAgent();
const agents: Agent[] = useMemo(() => {
return Object.values(agentsMap) as Agent[];
}, [agentsMap]);
useEffect(() => {
if (selectedAgentId == null && agents.length > 0) {
let agent_id = localStorage.getItem(`${LocalStorageKeys.AGENT_ID_PREFIX}${index}`);
if (agent_id == null) {
agent_id = agents[0].id;
}
const agent = agentsMap[agent_id];
if (agent !== undefined && isAgentsEndpoint(endpoint as string) === true) {
setOption('model')('');
setOption('agent_id')(agent_id);
}
}
}, [index, agents, selectedAgentId, agentsMap, endpoint, setOption]);
const currentAgent = agentsMap[selectedAgentId ?? ''];
const agentOptions: OptionWithIcon[] = useMemo(
() =>
agents.map((agent: Agent) => {
return {
label: agent.name ?? '',
value: agent.id,
icon: (
<Icon
isCreatedByUser={false}
endpoint={EModelEndpoint.agents}
agentName={agent.name ?? ''}
iconURL={agent.avatar?.filepath}
/>
),
};
}),
[agents],
);
return (
<ControlCombobox
selectedValue={currentAgent?.id ?? ''}
displayValue={
agents.find((agent: Agent) => agent.id === selectedAgentId)?.name ??
localize('com_sidepanel_select_agent')
}
selectPlaceholder={localize('com_sidepanel_select_agent')}
searchPlaceholder={localize('com_agents_search_name')}
isCollapsed={isCollapsed}
ariaLabel={'agent'}
setValue={onSelect}
items={agentOptions}
SelectIcon={
<Icon
isCreatedByUser={false}
endpoint={endpoint}
agentName={currentAgent?.name ?? ''}
iconURL={currentAgent?.avatar?.filepath ?? ''}
/>
}
/>
);
}

296
client/src/components/SidePanel/Agents/ActionsAuth.tsx Normal file
View file

@ -0,0 +1,296 @@
import { useFormContext } from 'react-hook-form';
import * as RadioGroup from '@radix-ui/react-radio-group';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import {
AuthTypeEnum,
AuthorizationTypeEnum,
TokenExchangeMethodEnum,
} from 'librechat-data-provider';
import { DialogContent } from '~/components/ui/';
export default function ActionsAuth({
setOpenAuthDialog,
}: {
setOpenAuthDialog: React.Dispatch<React.SetStateAction<boolean>>;
}) {
const { watch, setValue, trigger } = useFormContext();
const type = watch('type');
return (
<DialogContent
role="dialog"
id="radix-:rf5:"
aria-describedby="radix-:rf7:"
aria-labelledby="radix-:rf6:"
data-state="open"
className="left-1/2 col-auto col-start-2 row-auto row-start-2 w-full max-w-md -translate-x-1/2 rounded-xl bg-white pb-0 text-left shadow-xl transition-all dark:bg-gray-700 dark:text-gray-100"
tabIndex={-1}
style={{ pointerEvents: 'auto' }}
>
<div className="flex items-center justify-between border-b border-black/10 px-4 pb-4 pt-5 dark:border-white/10 sm:p-6">
<div className="flex">
<div className="flex items-center">
<div className="flex grow flex-col gap-1">
<h2
id="radix-:rf6:"
className="text-token-text-primary text-lg font-medium leading-6"
>
Authentication
</h2>
</div>
</div>
</div>
</div>
<div className="p-4 sm:p-6 sm:pt-0">
<div className="mb-4">
<label className="mb-1 block text-sm font-medium">Authentication Type</label>
<RadioGroup.Root
defaultValue={AuthTypeEnum.None}
onValueChange={(value) => setValue('type', value)}
value={type}
role="radiogroup"
aria-required="false"
dir="ltr"
className="flex gap-4"
tabIndex={0}
style={{ outline: 'none' }}
>
<div className="flex items-center gap-2">
<label htmlFor=":rf8:" className="flex cursor-pointer items-center gap-1">
<RadioGroup.Item
type="button"
role="radio"
value={AuthTypeEnum.None}
id=":rf8:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
tabIndex={-1}
>
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
</RadioGroup.Item>
None
</label>
</div>
<div className="flex items-center gap-2">
<label htmlFor=":rfa:" className="flex cursor-pointer items-center gap-1">
<RadioGroup.Item
type="button"
role="radio"
value={AuthTypeEnum.ServiceHttp}
id=":rfa:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
tabIndex={0}
>
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
</RadioGroup.Item>
API Key
</label>
</div>
<div className="flex items-center gap-2 text-gray-500">
<label htmlFor=":rfc:" className="flex cursor-not-allowed items-center gap-1">
<RadioGroup.Item
type="button"
role="radio"
disabled={true}
value={AuthTypeEnum.OAuth}
id=":rfc:"
className="mr-1 flex h-5 w-5 cursor-not-allowed items-center justify-center rounded-full border border-gray-500 bg-gray-300 dark:border-gray-600 dark:bg-gray-700"
tabIndex={-1}
>
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
</RadioGroup.Item>
OAuth
</label>
</div>
</RadioGroup.Root>
</div>
{type === 'none' ? null : type === 'service_http' ? <ApiKey /> : <OAuth />}
{/* Cancel/Save */}
<div className="mt-5 flex flex-col gap-3 sm:mt-4 sm:flex-row-reverse">
<button
className="btn relative bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600"
onClick={async () => {
const result = await trigger(undefined, { shouldFocus: true });
setValue('saved_auth_fields', result);
setOpenAuthDialog(!result);
}}
>
<div className="flex w-full items-center justify-center gap-2">Save</div>
</button>
<DialogPrimitive.Close className="btn btn-neutral relative">
<div className="flex w-full items-center justify-center gap-2">Cancel</div>
</DialogPrimitive.Close>
</div>
</div>
</DialogContent>
);
}
const ApiKey = () => {
const { register, watch, setValue } = useFormContext();
const authorization_type = watch('authorization_type');
const type = watch('type');
return (
<>
<label className="mb-1 block text-sm font-medium">API Key</label>
<input
placeholder="<HIDDEN>"
type="password"
autoComplete="new-password"
className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-600"
{...register('api_key', { required: type === AuthTypeEnum.ServiceHttp })}
/>
<label className="mb-1 block text-sm font-medium">Auth Type</label>
<RadioGroup.Root
defaultValue={AuthorizationTypeEnum.Basic}
onValueChange={(value) => setValue('authorization_type', value)}
value={authorization_type}
role="radiogroup"
aria-required="true"
dir="ltr"
className="mb-2 flex gap-6 overflow-hidden rounded-lg"
tabIndex={0}
style={{ outline: 'none' }}
>
<div className="flex items-center gap-2">
<label htmlFor=":rfu:" className="flex cursor-pointer items-center gap-1">
<RadioGroup.Item
type="button"
role="radio"
value={AuthorizationTypeEnum.Basic}
id=":rfu:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
tabIndex={-1}
>
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
</RadioGroup.Item>
Basic
</label>
</div>
<div className="flex items-center gap-2">
<label htmlFor=":rg0:" className="flex cursor-pointer items-center gap-1">
<RadioGroup.Item
type="button"
role="radio"
value={AuthorizationTypeEnum.Bearer}
id=":rg0:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
tabIndex={-1}
>
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
</RadioGroup.Item>
Bearer
</label>
</div>
<div className="flex items-center gap-2">
<label htmlFor=":rg2:" className="flex cursor-pointer items-center gap-1">
<RadioGroup.Item
type="button"
role="radio"
value={AuthorizationTypeEnum.Custom}
id=":rg2:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
tabIndex={0}
>
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
</RadioGroup.Item>
Custom
</label>
</div>
</RadioGroup.Root>
{authorization_type === AuthorizationTypeEnum.Custom && (
<div className="mt-2">
<label className="mb-1 block text-sm font-medium">Custom Header Name</label>
<input
className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-600"
placeholder="X-Api-Key"
{...register('custom_auth_header', {
required: authorization_type === AuthorizationTypeEnum.Custom,
})}
/>
</div>
)}
</>
);
};
const OAuth = () => {
const { register, watch, setValue } = useFormContext();
const token_exchange_method = watch('token_exchange_method');
const type = watch('type');
return (
<>
<label className="mb-1 block text-sm font-medium">Client ID</label>
<input
placeholder="<HIDDEN>"
type="password"
autoComplete="off"
className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800"
{...register('oauth_client_id', { required: type === AuthTypeEnum.OAuth })}
/>
<label className="mb-1 block text-sm font-medium">Client Secret</label>
<input
placeholder="<HIDDEN>"
type="password"
autoComplete="off"
className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800"
{...register('oauth_client_secret', { required: type === AuthTypeEnum.OAuth })}
/>
<label className="mb-1 block text-sm font-medium">Authorization URL</label>
<input
className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800"
{...register('authorization_url', { required: type === AuthTypeEnum.OAuth })}
/>
<label className="mb-1 block text-sm font-medium">Token URL</label>
<input
className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800"
{...register('client_url', { required: type === AuthTypeEnum.OAuth })}
/>
<label className="mb-1 block text-sm font-medium">Scope</label>
<input
className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800"
{...register('scope', { required: type === AuthTypeEnum.OAuth })}
/>
<label className="mb-1 block text-sm font-medium">Token Exchange Method</label>
<RadioGroup.Root
defaultValue={AuthorizationTypeEnum.Basic}
onValueChange={(value) => setValue('token_exchange_method', value)}
value={token_exchange_method}
role="radiogroup"
aria-required="true"
dir="ltr"
tabIndex={0}
style={{ outline: 'none' }}
>
<div className="flex items-center gap-2">
<label htmlFor=":rj1:" className="flex cursor-pointer items-center gap-1">
<RadioGroup.Item
type="button"
role="radio"
value={TokenExchangeMethodEnum.DefaultPost}
id=":rj1:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-700 dark:bg-gray-700"
tabIndex={-1}
>
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
</RadioGroup.Item>
Default (POST request)
</label>
</div>
<div className="flex items-center gap-2">
<label htmlFor=":rj3:" className="flex cursor-pointer items-center gap-1">
<RadioGroup.Item
type="button"
role="radio"
value={TokenExchangeMethodEnum.BasicAuthHeader}
id=":rj3:"
className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-700 dark:bg-gray-700"
tabIndex={-1}
>
<RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
</RadioGroup.Item>
Basic authorization header
</label>
</div>
</RadioGroup.Root>
</>
);
};

285
client/src/components/SidePanel/Agents/ActionsInput.tsx Normal file
View file

@ -0,0 +1,285 @@
import debounce from 'lodash/debounce';
import { useState, useEffect } from 'react';
import { useFormContext } from 'react-hook-form';
import {
validateAndParseOpenAPISpec,
openapiToFunction,
AuthTypeEnum,
} from 'librechat-data-provider';
import type {
Action,
FunctionTool,
ActionMetadata,
ValidationResult,
} from 'librechat-data-provider';
import type { ActionAuthForm } from '~/common';
import type { Spec } from './ActionsTable';
import { ActionsTable, columns } from './ActionsTable';
import { useUpdateAgentAction } from '~/data-provider';
import { cn, removeFocusOutlines } from '~/utils';
import { useToastContext } from '~/Providers';
import useLocalize from '~/hooks/useLocalize';
import { Spinner } from '~/components/svg';
const debouncedValidation = debounce(
(input: string, callback: (result: ValidationResult) => void) => {
const result = validateAndParseOpenAPISpec(input);
callback(result);
},
800,
);
export default function ActionsInput({
action,
agent_id,
setAction,
}: {
action?: Action;
agent_id?: string;
setAction: React.Dispatch<React.SetStateAction<Action | undefined>>;
}) {
const handleResult = (result: ValidationResult) => {
if (!result.status) {
setData(null);
setFunctions(null);
}
setValidationResult(result);
};
const localize = useLocalize();
const { showToast } = useToastContext();
const { handleSubmit, reset } = useFormContext<ActionAuthForm>();
const [validationResult, setValidationResult] = useState<null | ValidationResult>(null);
const [inputValue, setInputValue] = useState('');
const [data, setData] = useState<Spec[] | null>(null);
const [functions, setFunctions] = useState<FunctionTool[] | null>(null);
useEffect(() => {
if (!action?.metadata?.raw_spec) {
return;
}
setInputValue(action.metadata.raw_spec);
debouncedValidation(action.metadata.raw_spec, handleResult);
}, [action?.metadata?.raw_spec]);
useEffect(() => {
if (!validationResult || !validationResult.status || !validationResult.spec) {
return;
}
const { functionSignatures, requestBuilders } = openapiToFunction(validationResult.spec);
const specs = Object.entries(requestBuilders).map(([name, props]) => {
return {
name,
method: props.method,
path: props.path,
domain: props.domain,
};
});
setData(specs);
setValidationResult(null);
setFunctions(functionSignatures.map((f) => f.toObjectTool()));
}, [validationResult]);
const updateAgentAction = useUpdateAgentAction({
onSuccess(data) {
showToast({
message: localize('com_assistants_update_actions_success'),
status: 'success',
});
reset();
setAction(data[1]);
},
onError(error) {
showToast({
message: (error as Error)?.message ?? localize('com_assistants_update_actions_error'),
status: 'error',
});
},
});
const saveAction = handleSubmit((authFormData) => {
console.log('authFormData', authFormData);
if (!agent_id) {
// alert user?
return;
}
if (!functions) {
return;
}
if (!data) {
return;
}
let { metadata = {} } = action ?? {};
const action_id = action?.action_id;
metadata.raw_spec = inputValue;
const parsedUrl = new URL(data[0].domain);
const domain = parsedUrl.hostname;
if (!domain) {
// alert user?
return;
}
metadata.domain = domain;
const { type, saved_auth_fields } = authFormData;
const removeSensitiveFields = (obj: ActionMetadata) => {
delete obj.auth;
delete obj.api_key;
delete obj.oauth_client_id;
delete obj.oauth_client_secret;
};
if (saved_auth_fields && type === AuthTypeEnum.ServiceHttp) {
metadata = {
...metadata,
api_key: authFormData.api_key,
auth: {
type,
authorization_type: authFormData.authorization_type,
custom_auth_header: authFormData.custom_auth_header,
},
};
} else if (saved_auth_fields && type === AuthTypeEnum.OAuth) {
metadata = {
...metadata,
auth: {
type,
authorization_url: authFormData.authorization_url,
client_url: authFormData.client_url,
scope: authFormData.scope,
token_exchange_method: authFormData.token_exchange_method,
},
oauth_client_id: authFormData.oauth_client_id,
oauth_client_secret: authFormData.oauth_client_secret,
};
} else if (saved_auth_fields) {
removeSensitiveFields(metadata);
metadata.auth = {
type,
};
} else {
removeSensitiveFields(metadata);
}
updateAgentAction.mutate({
action_id,
metadata,
functions,
agent_id,
});
});
const handleInputChange: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
const newValue = event.target.value;
setInputValue(newValue);
if (!newValue) {
setData(null);
setFunctions(null);
return setValidationResult(null);
}
debouncedValidation(newValue, handleResult);
};
return (
<>
<div className="">
<div className="mb-1 flex flex-wrap items-center justify-between gap-4">
<label className="text-token-text-primary whitespace-nowrap font-medium">Schema</label>
<div className="flex items-center gap-2">
{/* <button className="btn btn-neutral border-token-border-light relative h-8 min-w-[100px] rounded-lg font-medium">
<div className="flex w-full items-center justify-center text-xs">Import from URL</div>
</button> */}
<select
onChange={(e) => console.log(e.target.value)}
className="border-token-border-medium h-8 min-w-[100px] rounded-lg border bg-transparent px-2 py-0 text-sm"
>
<option value="label">{localize('com_ui_examples')}</option>
{/* TODO: make these appear and function correctly */}
<option value="0">Weather (JSON)</option>
<option value="1">Pet Store (YAML)</option>
<option value="2">Blank Template</option>
</select>
</div>
</div>
<div className="border-token-border-light mb-4 overflow-hidden rounded-lg border">
<div className="relative">
<textarea
value={inputValue}
onChange={handleInputChange}
spellCheck="false"
placeholder="Enter your OpenAPI schema here"
className={cn(
'text-token-text-primary block h-96 w-full border-none bg-transparent p-2 font-mono text-xs',
removeFocusOutlines,
)}
/>
{/* TODO: format input button */}
</div>
{validationResult && validationResult.message !== 'OpenAPI spec is valid.' && (
<div className="border-token-border-light border-t p-2 text-red-500">
{validationResult.message.split('\n').map((line: string, i: number) => (
<div key={i}>{line}</div>
))}
</div>
)}
</div>
</div>
{!!data && (
<div>
<div className="mb-1.5 flex items-center">
<label className="text-token-text-primary block font-medium">
{localize('com_assistants_available_actions')}
</label>
</div>
<ActionsTable columns={columns} data={data} />
</div>
)}
<div className="mt-4">
<div className="mb-1.5 flex items-center">
<span className="" data-state="closed">
<label className="text-token-text-primary block font-medium">
{localize('com_ui_privacy_policy')}
</label>
</span>
</div>
<div className="rounded-md border border-gray-300 px-3 py-2 shadow-none focus-within:border-gray-800 focus-within:ring-1 focus-within:ring-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:focus-within:border-gray-500 dark:focus-within:ring-gray-500">
<label
htmlFor="privacyPolicyUrl"
className="block text-xs font-medium text-gray-900 dark:text-gray-100"
/>
<div className="relative">
<input
name="privacyPolicyUrl"
id="privacyPolicyUrl"
className="block w-full border-0 p-0 text-gray-900 placeholder-gray-500 shadow-none outline-none focus-within:shadow-none focus-within:outline-none focus-within:ring-0 focus:border-none focus:ring-0 dark:bg-gray-700 dark:text-gray-100 sm:text-sm"
placeholder="https://api.example-weather-app.com/privacy"
// value=""
/>
</div>
</div>
</div>
<div className="flex items-center justify-end">
<button
disabled={!functions || !functions.length}
onClick={saveAction}
className="focus:shadow-outline mt-1 flex min-w-[100px] items-center justify-center 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 disabled:bg-green-400"
type="button"
>
{updateAgentAction.isLoading ? (
<Spinner className="icon-md" />
) : action?.action_id ? (
localize('com_ui_update')
) : (
localize('com_ui_create')
)}
</button>
</div>
</>
);
}

198
client/src/components/SidePanel/Agents/ActionsPanel.tsx Normal file
View file

@ -0,0 +1,198 @@
import { useEffect, useState } from 'react';
import { useForm, FormProvider } from 'react-hook-form';
import {
AuthTypeEnum,
AuthorizationTypeEnum,
TokenExchangeMethodEnum,
} from 'librechat-data-provider';
import { ChevronLeft } from 'lucide-react';
import type { AgentPanelProps, ActionAuthForm } from '~/common';
import { Dialog, DialogTrigger, OGDialog, OGDialogTrigger, Label } from '~/components/ui';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { useDeleteAgentAction } from '~/data-provider';
import useLocalize from '~/hooks/useLocalize';
import { useToastContext } from '~/Providers';
import { TrashIcon } from '~/components/svg';
import ActionsInput from './ActionsInput';
import ActionsAuth from './ActionsAuth';
import { Panel } from '~/common';
export default function ActionsPanel({
// activePanel,
action,
setAction,
agent_id,
setActivePanel,
}: AgentPanelProps) {
const localize = useLocalize();
const { showToast } = useToastContext();
const [openAuthDialog, setOpenAuthDialog] = useState(false);
const deleteAgentAction = useDeleteAgentAction({
onSuccess: () => {
showToast({
message: localize('com_assistants_delete_actions_success'),
status: 'success',
});
setActivePanel(Panel.builder);
setAction(undefined);
},
onError(error) {
showToast({
message: (error as Error)?.message ?? localize('com_assistants_delete_actions_error'),
status: 'error',
});
},
});
const methods = useForm<ActionAuthForm>({
defaultValues: {
/* General */
type: AuthTypeEnum.None,
saved_auth_fields: false,
/* API key */
api_key: '',
authorization_type: AuthorizationTypeEnum.Basic,
custom_auth_header: '',
/* OAuth */
oauth_client_id: '',
oauth_client_secret: '',
authorization_url: '',
client_url: '',
scope: '',
token_exchange_method: TokenExchangeMethodEnum.DefaultPost,
},
});
const { reset, watch } = methods;
const type = watch('type');
useEffect(() => {
if (action?.metadata?.auth) {
reset({
type: action.metadata.auth.type || AuthTypeEnum.None,
saved_auth_fields: false,
api_key: action.metadata.api_key ?? '',
authorization_type: action.metadata.auth.authorization_type || AuthorizationTypeEnum.Basic,
oauth_client_id: action.metadata.oauth_client_id ?? '',
oauth_client_secret: action.metadata.oauth_client_secret ?? '',
authorization_url: action.metadata.auth.authorization_url ?? '',
client_url: action.metadata.auth.client_url ?? '',
scope: action.metadata.auth.scope ?? '',
token_exchange_method:
action.metadata.auth.token_exchange_method ?? TokenExchangeMethodEnum.DefaultPost,
});
}
}, [action, reset]);
return (
<FormProvider {...methods}>
<form className="h-full grow overflow-hidden">
<div className="h-full overflow-auto px-2 pb-12 text-sm">
<div className="relative flex flex-col items-center px-16 py-6 text-center">
<div className="absolute left-0 top-6">
<button
type="button"
className="btn btn-neutral relative"
onClick={() => {
setActivePanel(Panel.builder);
setAction(undefined);
}}
>
<div className="flex w-full items-center justify-center gap-2">
<ChevronLeft />
</div>
</button>
</div>
{!!action && (
<OGDialog>
<OGDialogTrigger asChild>
<div className="absolute right-0 top-6">
<button
type="button"
disabled={!agent_id || !action.action_id}
className="btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium"
>
<TrashIcon className="text-red-500" />
</button>
</div>
</OGDialogTrigger>
<OGDialogTemplate
showCloseButton={false}
title={localize('com_ui_delete_action')}
className="max-w-[450px]"
main={
<Label className="text-left text-sm font-medium">
{localize('com_ui_delete_action_confirm')}
</Label>
}
selection={{
selectHandler: () => {
if (!agent_id) {
return showToast({
message: 'No agent_id found, is the agent created?',
status: 'error',
});
}
deleteAgentAction.mutate({
action_id: action.action_id,
agent_id,
});
},
selectClasses:
'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 transition-color duration-200 text-white',
selectText: localize('com_ui_delete'),
}}
/>
</OGDialog>
)}
<div className="text-xl font-medium">{(action ? 'Edit' : 'Add') + ' ' + 'actions'}</div>
<div className="text-token-text-tertiary text-sm">
{localize('com_assistants_actions_info')}
</div>
{/* <div className="text-sm text-token-text-tertiary">
<a href="https://help.openai.com/en/articles/8554397-creating-a-gpt" target="_blank" rel="noreferrer" className="font-medium">Learn more.</a>
</div> */}
</div>
<Dialog open={openAuthDialog} onOpenChange={setOpenAuthDialog}>
<DialogTrigger asChild>
<div className="relative mb-6">
<div className="mb-1.5 flex items-center">
<label className="text-token-text-primary block font-medium">
{localize('com_ui_authentication')}
</label>
</div>
<div className="border-token-border-medium flex rounded-lg border text-sm hover:cursor-pointer">
<div className="h-9 grow px-3 py-2">{type}</div>
<div className="bg-token-border-medium w-px"></div>
<button type="button" color="neutral" className="flex items-center gap-2 px-3">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="icon-sm"
>
<path
d="M11.6439 3C10.9352 3 10.2794 3.37508 9.92002 3.98596L9.49644 4.70605C8.96184 5.61487 7.98938 6.17632 6.93501 6.18489L6.09967 6.19168C5.39096 6.19744 4.73823 6.57783 4.38386 7.19161L4.02776 7.80841C3.67339 8.42219 3.67032 9.17767 4.01969 9.7943L4.43151 10.5212C4.95127 11.4386 4.95127 12.5615 4.43151 13.4788L4.01969 14.2057C3.67032 14.8224 3.67339 15.5778 4.02776 16.1916L4.38386 16.8084C4.73823 17.4222 5.39096 17.8026 6.09966 17.8083L6.93502 17.8151C7.98939 17.8237 8.96185 18.3851 9.49645 19.294L9.92002 20.014C10.2794 20.6249 10.9352 21 11.6439 21H12.3561C13.0648 21 13.7206 20.6249 14.08 20.014L14.5035 19.294C15.0381 18.3851 16.0106 17.8237 17.065 17.8151L17.9004 17.8083C18.6091 17.8026 19.2618 17.4222 19.6162 16.8084L19.9723 16.1916C20.3267 15.5778 20.3298 14.8224 19.9804 14.2057L19.5686 13.4788C19.0488 12.5615 19.0488 11.4386 19.5686 10.5212L19.9804 9.7943C20.3298 9.17767 20.3267 8.42219 19.9723 7.80841L19.6162 7.19161C19.2618 6.57783 18.6091 6.19744 17.9004 6.19168L17.065 6.18489C16.0106 6.17632 15.0382 5.61487 14.5036 4.70605L14.08 3.98596C13.7206 3.37508 13.0648 3 12.3561 3H11.6439Z"
stroke="currentColor"
strokeWidth="2"
strokeLinejoin="round"
/>
<circle cx="12" cy="12" r="2.5" stroke="currentColor" strokeWidth="2" />
</svg>
</button>
</div>
</div>
</DialogTrigger>
<ActionsAuth setOpenAuthDialog={setOpenAuthDialog} />
</Dialog>
<ActionsInput action={action} agent_id={agent_id} setAction={setAction} />
</div>
</form>
</FormProvider>
);
}

54
client/src/components/SidePanel/Agents/ActionsTable/Columns.tsx Normal file
View file

@ -0,0 +1,54 @@
import type { ColumnDef } from '@tanstack/react-table';
export type Spec = {
name: string;
method: string;
path: string;
domain: string;
};
export const fakeData: Spec[] = [
{
name: 'listPets',
method: 'get',
path: '/pets',
domain: 'petstore.swagger.io',
},
{
name: 'createPets',
method: 'post',
path: '/pets',
domain: 'petstore.swagger.io',
},
{
name: 'showPetById',
method: 'get',
path: '/pets/{petId}',
domain: 'petstore.swagger.io',
},
];
export const columns: ColumnDef<Spec>[] = [
{
header: 'Name',
accessorKey: 'name',
},
{
header: 'Method',
accessorKey: 'method',
},
{
header: 'Path',
accessorKey: 'path',
},
// {
// header: '',
// accessorKey: 'action',
// // eslint-disable-next-line @typescript-eslint/no-unused-vars
// cell: ({ row: _row }) => (
// <button className="btn relative btn-neutral h-8 rounded-lg border-token-border-light font-medium">
// <div className="flex w-full gap-2 items-center justify-center">Test</div>
// </button>
// ),
// },
];

47
client/src/components/SidePanel/Agents/ActionsTable/Table.tsx Normal file
View file

@ -0,0 +1,47 @@
import { useReactTable, flexRender, getCoreRowModel } from '@tanstack/react-table';
import type { ColumnDef } from '@tanstack/react-table';
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
}
export default function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
const table = useReactTable({
columns,
data,
getCoreRowModel: getCoreRowModel(),
});
return (
<table className="w-full text-sm">
<thead>
{table.getHeaderGroups().map((headerGroup, i) => (
<tr
key={i}
className="border-token-border-light text-token-text-tertiary border-b text-left text-xs"
>
{headerGroup.headers.map((header, j) => (
<th key={j} className="py-1 font-normal">
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row, i) => (
<tr key={i} className="border-token-border-light border-b">
{row.getVisibleCells().map((cell, j) => (
<td key={j} className="py-2">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
);
}

2
client/src/components/SidePanel/Agents/ActionsTable/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default as ActionsTable } from './Table';
export * from './Columns';

196
client/src/components/SidePanel/Agents/AgentAvatar.tsx Normal file
View file

@ -0,0 +1,196 @@
import * as Popover from '@radix-ui/react-popover';
import { useState, useEffect, useRef } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import {
fileConfig as defaultFileConfig,
QueryKeys,
defaultOrderQuery,
mergeFileConfig,
} from 'librechat-data-provider';
import type { UseMutationResult } from '@tanstack/react-query';
import type {
Agent,
AgentAvatar,
AgentCreateParams,
AgentListResponse,
} from 'librechat-data-provider';
import { useUploadAgentAvatarMutation, useGetFileConfig } from '~/data-provider';
import { AgentAvatarRender, NoImage, AvatarMenu } from './Images';
import { useToastContext } from '~/Providers';
import { useLocalize } from '~/hooks';
import { formatBytes } from '~/utils';
function Avatar({
agent_id,
avatar,
createMutation,
}: {
agent_id: string | null;
avatar: null | AgentAvatar;
createMutation: UseMutationResult<Agent, Error, AgentCreateParams>;
}) {
const queryClient = useQueryClient();
const [menuOpen, setMenuOpen] = useState(false);
const [progress, setProgress] = useState<number>(1);
const [input, setInput] = useState<File | null>(null);
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
const lastSeenCreatedId = useRef<string | null>(null);
const { data: fileConfig = defaultFileConfig } = useGetFileConfig({
select: (data) => mergeFileConfig(data),
});
const localize = useLocalize();
const { showToast } = useToastContext();
const { mutate: uploadAvatar } = useUploadAgentAvatarMutation({
onMutate: () => {
setProgress(0.4);
},
onSuccess: (data, vars) => {
if (vars.postCreation === false) {
showToast({ message: localize('com_ui_upload_success') });
} else if (lastSeenCreatedId.current !== createMutation.data?.id) {
lastSeenCreatedId.current = createMutation.data?.id ?? '';
}
setInput(null);
setPreviewUrl(data.avatar?.filepath as string | null);
const res = queryClient.getQueryData<AgentListResponse>([
QueryKeys.agents,
defaultOrderQuery,
]);
if (!res?.data) {
return;
}
const agents =
res.data.map((agent) => {
if (agent.id === agent_id) {
return {
...agent,
...data,
};
}
return agent;
}) ?? [];
queryClient.setQueryData<AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
...res,
data: agents,
});
setProgress(1);
},
onError: (error) => {
console.error('Error:', error);
setInput(null);
setPreviewUrl(null);
showToast({ message: localize('com_ui_upload_error'), status: 'error' });
setProgress(1);
},
});
useEffect(() => {
if (input) {
const reader = new FileReader();
reader.onloadend = () => {
setPreviewUrl(reader.result as string);
};
reader.readAsDataURL(input);
}
}, [input]);
useEffect(() => {
if (avatar) {
setPreviewUrl((avatar.filepath as string | undefined) ?? null);
}
}, [avatar]);
useEffect(() => {
/** Experimental: Condition to prime avatar upload before Agent Creation
* - If the createMutation state Id was last seen (current) and the createMutation is successful
* we can assume that the avatar upload has already been initiated and we can skip the upload
*
* The mutation state is not reset until the user deliberately selects a new agent or an agent is deleted
*
* This prevents the avatar from being uploaded multiple times before the user selects a new agent
* while allowing the user to upload to prime the avatar and other values before the agent is created.
*/
const sharedUploadCondition = !!(
createMutation.isSuccess &&
input &&
previewUrl &&
previewUrl.includes('base64')
);
if (sharedUploadCondition && lastSeenCreatedId.current === createMutation.data.id) {
return;
}
if (sharedUploadCondition && createMutation.data.id) {
const formData = new FormData();
formData.append('file', input, input.name);
formData.append('agent_id', createMutation.data.id);
if (typeof createMutation.data.avatar === 'object') {
formData.append('avatar', JSON.stringify(createMutation.data.avatar));
}
uploadAvatar({
agent_id: createMutation.data.id,
postCreation: true,
formData,
});
}
}, [createMutation.data, createMutation.isSuccess, input, previewUrl, uploadAvatar]);
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
const file = event.target.files?.[0];
if (fileConfig.avatarSizeLimit && file && file.size <= fileConfig.avatarSizeLimit) {
setInput(file);
setMenuOpen(false);
if (!agent_id) {
return;
}
const formData = new FormData();
formData.append('file', file, file.name);
formData.append('agent_id', agent_id);
if (typeof avatar === 'object') {
formData.append('avatar', JSON.stringify(avatar));
}
uploadAvatar({
agent_id,
formData,
});
} else {
const megabytes = fileConfig.avatarSizeLimit ? formatBytes(fileConfig.avatarSizeLimit) : 2;
showToast({
message: localize('com_ui_upload_invalid_var', megabytes + ''),
status: 'error',
});
}
setMenuOpen(false);
};
return (
<Popover.Root open={menuOpen} onOpenChange={setMenuOpen}>
<div className="flex w-full items-center justify-center gap-4">
<Popover.Trigger asChild>
<button type="button" className="h-20 w-20">
{previewUrl ? <AgentAvatarRender url={previewUrl} progress={progress} /> : <NoImage />}
</button>
</Popover.Trigger>
</div>
{<AvatarMenu handleFileChange={handleFileChange} />}
</Popover.Root>
);
}
export default Avatar;

366
client/src/components/SidePanel/Agents/AgentConfig.tsx Normal file
View file

@ -0,0 +1,366 @@
import React, { useState, useMemo, useCallback } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { Controller, useWatch, useFormContext } from 'react-hook-form';
import { QueryKeys, Capabilities, EModelEndpoint } from 'librechat-data-provider';
import type { TConfig, TPlugin } from 'librechat-data-provider';
import type { AgentForm, AgentPanelProps } from '~/common';
import { cn, defaultTextProps, removeFocusOutlines, getEndpointField, getIconKey } from '~/utils';
import { useCreateAgentMutation, useUpdateAgentMutation } from '~/data-provider';
import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
import Action from '~/components/SidePanel/Builder/Action';
import { useLocalize } from '~/hooks';
import { ToolSelectDialog } from '~/components/Tools';
import { useToastContext } from '~/Providers';
import ContextButton from './ContextButton';
import { Spinner } from '~/components/svg';
import AgentAvatar from './AgentAvatar';
import AgentTool from './AgentTool';
import { Panel } from '~/common';
const labelClass = 'mb-2 text-token-text-primary block font-medium';
const inputClass = cn(
defaultTextProps,
'flex w-full px-3 py-2 border-border-light bg-surface-secondary focus-visible:ring-2 focus-visible:ring-ring-primary',
removeFocusOutlines,
);
export default function AgentConfig({
setAction,
actions = [],
agentsConfig,
endpointsConfig,
setActivePanel,
setCurrentAgentId,
}: AgentPanelProps & { agentsConfig?: TConfig | null }) {
const queryClient = useQueryClient();
const allTools = queryClient.getQueryData<TPlugin[]>([QueryKeys.tools]) ?? [];
const { showToast } = useToastContext();
const localize = useLocalize();
const [showToolDialog, setShowToolDialog] = useState(false);
const methods = useFormContext<AgentForm>();
const { control } = methods;
const provider = useWatch({ control, name: 'provider' });
const model = useWatch({ control, name: 'model' });
const agent = useWatch({ control, name: 'agent' });
const tools = useWatch({ control, name: 'tools' });
const agent_id = useWatch({ control, name: 'id' });
const toolsEnabled = useMemo(
() => agentsConfig?.capabilities?.includes(Capabilities.tools),
[agentsConfig],
);
const actionsEnabled = useMemo(
() => agentsConfig?.capabilities?.includes(Capabilities.actions),
[agentsConfig],
);
const retrievalEnabled = useMemo(
() => agentsConfig?.capabilities?.includes(Capabilities.retrieval),
[agentsConfig],
);
const codeEnabled = useMemo(
() => agentsConfig?.capabilities?.includes(Capabilities.code_interpreter),
[agentsConfig],
);
/* Mutations */
const update = useUpdateAgentMutation({
onSuccess: (data) => {
showToast({
message: `${localize('com_assistants_update_success')} ${
data.name ?? localize('com_ui_agent')
}`,
});
},
onError: (err) => {
const error = err as Error;
showToast({
message: `${localize('com_agents_update_error')}${
error.message ? ` ${localize('com_ui_error')}: ${error.message}` : ''
}`,
status: 'error',
});
},
});
const create = useCreateAgentMutation({
onSuccess: (data) => {
setCurrentAgentId(data.id);
showToast({
message: `${localize('com_assistants_create_success ')} ${
data.name ?? localize('com_ui_agent')
}`,
});
},
onError: (err) => {
const error = err as Error;
showToast({
message: `${localize('com_agents_create_error')}${
error.message ? ` ${localize('com_ui_error')}: ${error.message}` : ''
}`,
status: 'error',
});
},
});
const handleAddActions = useCallback(() => {
if (!agent_id) {
showToast({
message: localize('com_assistants_actions_disabled'),
status: 'warning',
});
return;
}
setActivePanel(Panel.actions);
}, [agent_id, setActivePanel, showToast, localize]);
// Provider Icon logic
const providerValue = typeof provider === 'string' ? provider : provider?.value;
let endpointType: EModelEndpoint | undefined;
let endpointIconURL: string | undefined;
let iconKey: string | undefined;
let Icon:
| React.ComponentType<
React.SVGProps<SVGSVGElement> & {
endpoint: string;
endpointType: EModelEndpoint | undefined;
iconURL: string | undefined;
}
>
| undefined;
if (providerValue !== undefined) {
endpointType = getEndpointField(endpointsConfig, providerValue as string, 'type');
endpointIconURL = getEndpointField(endpointsConfig, providerValue as string, 'iconURL');
iconKey = getIconKey({
endpoint: providerValue as string,
endpointsConfig,
endpointType,
endpointIconURL,
});
Icon = icons[iconKey];
}
const renderSaveButton = () => {
if (create.isLoading || update.isLoading) {
return <Spinner className="icon-md" aria-hidden="true" />;
}
if (agent_id) {
return localize('com_ui_save');
}
return localize('com_ui_create');
};
return (
<>
<div className="h-auto bg-white px-4 pb-8 pt-3 dark:bg-transparent">
{/* Avatar & Name */}
<div className="mb-4">
<AgentAvatar
createMutation={create}
agent_id={agent_id}
avatar={agent?.['avatar'] ?? null}
/>
<label className={labelClass} htmlFor="name">
{localize('com_ui_name')}
</label>
<Controller
name="name"
control={control}
render={({ field }) => (
<input
{...field}
value={field.value ?? ''}
maxLength={256}
className={inputClass}
id="name"
type="text"
placeholder={localize('com_agents_name_placeholder')}
aria-label="Agent name"
/>
)}
/>
<Controller
name="id"
control={control}
render={({ field }) => (
<p className="h-3 text-xs italic text-gray-600" aria-live="polite">
{field.value}
</p>
)}
/>
</div>
{/* Description */}
<div className="mb-4">
<label className={labelClass} htmlFor="description">
{localize('com_ui_description')}
</label>
<Controller
name="description"
control={control}
render={({ field }) => (
<input
{...field}
value={field.value ?? ''}
maxLength={512}
className={inputClass}
id="description"
type="text"
placeholder={localize('com_agents_description_placeholder')}
aria-label="Agent description"
/>
)}
/>
</div>
{/* Instructions */}
<div className="mb-6">
<label className={labelClass} htmlFor="instructions">
{localize('com_ui_instructions')} <span className="text-red-500">*</span>
</label>
<Controller
name="instructions"
control={control}
rules={{ required: true, minLength: 1 }}
render={({ field, fieldState: { error } }) => (
<>
<textarea
{...field}
value={field.value ?? ''}
maxLength={32768}
className={cn(inputClass, 'min-h-[100px] resize-y')}
id="instructions"
placeholder={localize('com_agents_instructions_placeholder')}
rows={3}
aria-label="Agent instructions"
aria-required="true"
aria-invalid={error ? 'true' : 'false'}
/>
{error && (
<span
className="text-sm text-red-500 transition duration-300 ease-in-out"
role="alert"
>
{localize('com_ui_field_required')}
</span>
)}
</>
)}
/>
</div>
{/* Model and Provider */}
<div className="mb-6">
<label className={labelClass} htmlFor="provider">
{localize('com_ui_model')} <span className="text-red-500">*</span>
</label>
<button
type="button"
onClick={() => setActivePanel(Panel.model)}
className="btn btn-neutral border-token-border-light relative h-10 w-full rounded-lg font-medium"
aria-haspopup="true"
aria-expanded="false"
>
<div className="flex w-full items-center gap-2">
{Icon && (
<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}
endpointType={endpointType}
iconURL={endpointIconURL}
/>
</div>
)}
<span>{model ? model : localize('com_ui_select_model')}</span>
</div>
</button>
</div>
{/* Agent Tools & Actions */}
<div className="mb-6">
<label className={labelClass}>
{`${toolsEnabled ? localize('com_assistants_tools') : ''}
${toolsEnabled && actionsEnabled ? ' + ' : ''}
${actionsEnabled ? localize('com_assistants_actions') : ''}`}
</label>
<div className="space-y-2">
{tools?.map((func, i) => (
<AgentTool
key={`${func}-${i}-${agent_id}`}
tool={func}
allTools={allTools}
agent_id={agent_id}
/>
))}
{actions
.filter((action) => action.agent_id === agent_id)
.map((action, i) => (
<Action
key={i}
action={action}
onClick={() => {
setAction(action);
setActivePanel(Panel.actions);
}}
/>
))}
<div className="flex space-x-2">
{(toolsEnabled ?? false) && (
<button
type="button"
onClick={() => setShowToolDialog(true)}
className="btn btn-neutral border-token-border-light relative h-8 w-full rounded-lg font-medium"
aria-haspopup="dialog"
>
<div className="flex w-full items-center justify-center gap-2">
{localize('com_assistants_add_tools')}
</div>
</button>
)}
{(actionsEnabled ?? false) && (
<button
type="button"
disabled={!agent_id}
onClick={handleAddActions}
className="btn btn-neutral border-token-border-light relative h-8 w-full rounded-lg font-medium"
aria-haspopup="dialog"
>
<div className="flex w-full items-center justify-center gap-2">
{localize('com_assistants_add_actions')}
</div>
</button>
)}
</div>
</div>
</div>
{/* Context Button */}
<div className="flex items-center justify-end gap-2">
<ContextButton
agent_id={agent_id}
setCurrentAgentId={setCurrentAgentId}
createMutation={create}
/>
{/* Submit Button */}
<button
className="btn btn-primary focus:shadow-outline flex w-full items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"
type="submit"
disabled={create.isLoading || update.isLoading}
aria-busy={create.isLoading || update.isLoading}
>
{renderSaveButton()}
</button>
</div>
</div>
<ToolSelectDialog
isOpen={showToolDialog}
setIsOpen={setShowToolDialog}
toolsFormKey="tools"
endpoint={EModelEndpoint.agents}
/>
</>
);
}

207
client/src/components/SidePanel/Agents/AgentPanel.tsx Normal file
View file

@ -0,0 +1,207 @@
import React, { useMemo, useCallback } from 'react';
import { useGetModelsQuery } from 'librechat-data-provider/react-query';
import { Controller, useWatch, useForm, FormProvider } from 'react-hook-form';
import {
Tools,
EModelEndpoint,
isAssistantsEndpoint,
defaultAgentFormValues,
} from 'librechat-data-provider';
import type { TConfig } from 'librechat-data-provider';
import type { AgentForm, AgentPanelProps, Option } from '~/common';
import { useCreateAgentMutation, useUpdateAgentMutation } from '~/data-provider';
import { useSelectAgent, useLocalize } from '~/hooks';
// import CapabilitiesForm from './CapabilitiesForm';
import { createProviderOption } from '~/utils';
import { useToastContext } from '~/Providers';
import AgentConfig from './AgentConfig';
import AgentSelect from './AgentSelect';
import ModelPanel from './ModelPanel';
import { Panel } from '~/common';
export default function AgentPanel({
setAction,
activePanel,
actions = [],
setActivePanel,
agent_id: current_agent_id,
setCurrentAgentId,
agentsConfig,
endpointsConfig,
}: AgentPanelProps & { agentsConfig?: TConfig | null }) {
const { onSelect: onSelectAgent } = useSelectAgent();
const { showToast } = useToastContext();
const localize = useLocalize();
const modelsQuery = useGetModelsQuery();
const models = useMemo(() => modelsQuery.data ?? {}, [modelsQuery.data]);
const methods = useForm<AgentForm>({
defaultValues: defaultAgentFormValues,
});
const { control, handleSubmit, reset } = methods;
const agent_id = useWatch({ control, name: 'id' });
const providers = useMemo(
() =>
Object.keys(endpointsConfig ?? {})
.filter(
(key) =>
!isAssistantsEndpoint(key) &&
key !== EModelEndpoint.agents &&
key !== EModelEndpoint.chatGPTBrowser &&
key !== EModelEndpoint.gptPlugins &&
key !== EModelEndpoint.bingAI,
)
.map((provider) => createProviderOption(provider)),
[endpointsConfig],
);
/* Mutations */
const update = useUpdateAgentMutation({
onSuccess: (data) => {
showToast({
message: `${localize('com_assistants_update_success')} ${
data.name ?? localize('com_ui_agent')
}`,
});
},
onError: (err) => {
const error = err as Error;
showToast({
message: `${localize('com_agents_update_error')}${
error.message ? ` ${localize('com_ui_error')}: ${error.message}` : ''
}`,
status: 'error',
});
},
});
const create = useCreateAgentMutation({
onSuccess: (data) => {
setCurrentAgentId(data.id);
showToast({
message: `${localize('com_assistants_create_success ')} ${
data.name ?? localize('com_ui_agent')
}`,
});
},
onError: (err) => {
const error = err as Error;
showToast({
message: `${localize('com_agents_create_error')}${
error.message ? ` ${localize('com_ui_error')}: ${error.message}` : ''
}`,
status: 'error',
});
},
});
const onSubmit = useCallback(
(data: AgentForm) => {
const tools = data.tools ?? [];
if (data.code_interpreter) {
tools.push(Tools.code_interpreter);
}
if (data.retrieval) {
tools.push(Tools.file_search);
}
const {
name,
model,
model_parameters,
provider: _provider,
description,
instructions,
} = data;
const provider = typeof _provider === 'string' ? _provider : (_provider as Option).value;
if (agent_id) {
update.mutate({
agent_id,
data: {
name,
description,
instructions,
model,
tools,
provider,
model_parameters,
},
});
return;
}
create.mutate({
name,
description,
instructions,
model,
tools,
provider,
model_parameters,
});
},
[agent_id, create, update],
);
const handleSelectAgent = useCallback(() => {
if (agent_id) {
onSelectAgent(agent_id);
}
}, [agent_id, onSelectAgent]);
return (
<FormProvider {...methods}>
<form
onSubmit={handleSubmit(onSubmit)}
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">
<Controller
name="agent"
control={control}
render={({ field }) => (
<AgentSelect
reset={reset}
value={field.value}
setCurrentAgentId={setCurrentAgentId}
selectedAgentId={current_agent_id ?? null}
createMutation={create}
/>
)}
/>
{/* 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"
disabled={!agent_id}
onClick={handleSelectAgent}
aria-label="Select agent"
>
{localize('com_ui_select')}
</button>
)}
</div>
{activePanel === Panel.model ? (
<ModelPanel setActivePanel={setActivePanel} providers={providers} models={models} />
) : null}
{activePanel === Panel.builder ? (
<AgentConfig
actions={actions}
setAction={setAction}
agentsConfig={agentsConfig}
setActivePanel={setActivePanel}
endpointsConfig={endpointsConfig}
setCurrentAgentId={setCurrentAgentId}
/>
) : null}
</form>
</FormProvider>
);
}

59
client/src/components/SidePanel/Agents/AgentPanelSwitch.tsx Normal file
View file

@ -0,0 +1,59 @@
import { useState, useEffect, useMemo } from 'react';
import { Capabilities } from 'librechat-data-provider';
import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
import type { ActionsEndpoint } from '~/common';
import type { Action, TConfig, TEndpointsConfig } from 'librechat-data-provider';
import { useGetActionsQuery } from '~/data-provider';
import { useChatContext } from '~/Providers';
import ActionsPanel from './ActionsPanel';
import AgentPanel from './AgentPanel';
import { Panel } from '~/common';
export default function AgentPanelSwitch() {
const { conversation, index } = useChatContext();
const [activePanel, setActivePanel] = useState(Panel.builder);
const [action, setAction] = useState<Action | undefined>(undefined);
const [currentAgentId, setCurrentAgentId] = useState<string | undefined>(conversation?.agent_id);
const { data: actions = [] } = useGetActionsQuery(conversation?.endpoint as ActionsEndpoint);
const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
const agentsConfig = useMemo(
() =>
// endpointsConfig?.[EModelEndpoint.agents] ??
({
// for testing purposes
capabilities: [Capabilities.tools, Capabilities.actions],
} as TConfig),
// [endpointsConfig]);
[],
);
useEffect(() => {
if (conversation?.agent_id) {
setCurrentAgentId(conversation?.agent_id);
}
}, [conversation?.agent_id]);
if (!conversation?.endpoint) {
return null;
}
const commonProps = {
index,
action,
actions,
setAction,
activePanel,
setActivePanel,
setCurrentAgentId,
agent_id: currentAgentId,
};
if (activePanel === Panel.actions) {
return <ActionsPanel {...commonProps} />;
}
return (
<AgentPanel {...commonProps} agentsConfig={agentsConfig} endpointsConfig={endpointsConfig} />
);
}

182
client/src/components/SidePanel/Agents/AgentSelect.tsx Normal file
View file

@ -0,0 +1,182 @@
import { Plus } from 'lucide-react';
import { useCallback, useEffect, useRef } from 'react';
import { Capabilities, defaultAgentFormValues } from 'librechat-data-provider';
import type { AgentCapabilities, AgentForm, TAgentOption } from '~/common';
import type { Agent, AgentCreateParams } from 'librechat-data-provider';
import type { UseMutationResult } from '@tanstack/react-query';
import type { UseFormReset } from 'react-hook-form';
import { cn, createDropdownSetter, createProviderOption, processAgentOption } from '~/utils';
import { useListAgentsQuery, useGetAgentByIdQuery } from '~/data-provider';
import SelectDropDown from '~/components/ui/SelectDropDown';
// import { useFileMapContext } from '~/Providers';
import { useLocalize } from '~/hooks';
const keys = new Set(Object.keys(defaultAgentFormValues));
export default function AgentSelect({
reset,
value: currentAgentValue,
selectedAgentId,
setCurrentAgentId,
createMutation,
}: {
reset: UseFormReset<AgentForm>;
value?: TAgentOption;
selectedAgentId: string | null;
setCurrentAgentId: React.Dispatch<React.SetStateAction<string | undefined>>;
createMutation: UseMutationResult<Agent, Error, AgentCreateParams>;
}) {
const localize = useLocalize();
// TODO: file handling for agents
// const fileMap = useFileMapContext();
const lastSelectedAgent = useRef<string | null>(null);
const { data: agents = [] } = useListAgentsQuery(undefined, {
select: (res) => res.data.map((agent) => processAgentOption(agent /*, fileMap */)),
});
const agentQuery = useGetAgentByIdQuery(selectedAgentId ?? '', {
enabled: !!selectedAgentId,
});
const resetAgentForm = useCallback(
(fullAgent: Agent) => {
const update = {
...fullAgent,
provider: createProviderOption(fullAgent.provider),
label: fullAgent.name ?? '',
value: fullAgent.id ?? '',
};
const actions: AgentCapabilities = {
[Capabilities.code_interpreter]: false,
[Capabilities.image_vision]: false,
[Capabilities.retrieval]: false,
};
const formValues: Partial<AgentForm & AgentCapabilities> = {
...actions,
agent: update,
model: update.model,
tools: update.tools ?? [],
};
Object.entries(fullAgent).forEach(([name, value]) => {
if (name === 'model_parameters') {
formValues[name] = value;
return;
}
if (!keys.has(name)) {
return;
}
if (typeof value !== 'number' && typeof value !== 'object') {
formValues[name] = value;
}
});
reset(formValues);
},
[reset],
);
const onSelect = useCallback(
(selectedId: string) => {
const agentExists = !!(selectedId
? agents.find((agent) => agent.id === selectedId)
: undefined);
createMutation.reset();
if (!agentExists) {
setCurrentAgentId(undefined);
return reset({
...defaultAgentFormValues,
});
}
setCurrentAgentId(selectedId);
const agent = agentQuery.data;
if (!agent) {
console.warn('Agent not found');
return;
}
resetAgentForm(agent);
},
[agents, createMutation, setCurrentAgentId, agentQuery.data, resetAgentForm, reset],
);
useEffect(() => {
if (agentQuery.data && agentQuery.isSuccess) {
resetAgentForm(agentQuery.data);
}
}, [agentQuery.data, agentQuery.isSuccess, resetAgentForm]);
useEffect(() => {
let timerId: NodeJS.Timeout | null = null;
if (selectedAgentId === lastSelectedAgent.current) {
return;
}
if (selectedAgentId && agents) {
timerId = setTimeout(() => {
lastSelectedAgent.current = selectedAgentId;
onSelect(selectedAgentId);
}, 5);
}
return () => {
if (timerId) {
clearTimeout(timerId);
}
};
}, [selectedAgentId, agents, onSelect]);
const createAgent = localize('com_ui_create') + ' ' + localize('com_ui_agent');
const hasAgentValue = !!(typeof currentAgentValue === 'object'
? currentAgentValue.value
: currentAgentValue);
return (
<SelectDropDown
value={!hasAgentValue ? createAgent : (currentAgentValue as TAgentOption)}
setValue={createDropdownSetter(onSelect)}
availableValues={
agents ?? [
{
label: 'Loading...',
value: '',
},
]
}
iconSide="left"
showAbove={false}
showLabel={false}
emptyTitle={true}
containerClassName="flex-grow"
searchClassName="dark:from-gray-850"
searchPlaceholder={localize('com_agents_search_name')}
optionsClass="hover:bg-gray-20/50 dark:border-gray-700"
optionsListClass="rounded-lg shadow-lg dark:bg-gray-850 dark:border-gray-700 dark:last:border"
currentValueClass={cn(
'text-md font-semibold text-gray-900 dark:text-white',
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',
)}
renderOption={() => (
<span className="flex items-center gap-1.5 truncate">
<span className="absolute inset-y-0 left-0 flex items-center pl-2 text-gray-800 dark:text-gray-100">
<Plus className="w-[16px]" />
</span>
<span className={cn('ml-4 flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100')}>
{createAgent}
</span>
</span>
)}
/>
);
}

104
client/src/components/SidePanel/Agents/AgentTool.tsx Normal file
View file

@ -0,0 +1,104 @@
import React, { useState } from 'react';
import { useFormContext } from 'react-hook-form';
import type { TPlugin } from 'librechat-data-provider';
import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
import { OGDialog, OGDialogTrigger, Label } from '~/components/ui';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { useToastContext } from '~/Providers';
import { TrashIcon } from '~/components/svg';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
export default function AgentTool({
tool,
allTools,
agent_id,
}: {
tool: string;
allTools: TPlugin[];
agent_id?: string;
}) {
const [isHovering, setIsHovering] = useState(false);
const localize = useLocalize();
const { showToast } = useToastContext();
const updateUserPlugins = useUpdateUserPluginsMutation();
const { getValues, setValue } = useFormContext();
const currentTool = allTools.find((t) => t.pluginKey === tool);
const removeTool = (tool: string) => {
if (tool) {
updateUserPlugins.mutate(
{ pluginKey: tool, action: 'uninstall', auth: null, isAgentTool: true },
{
onError: (error: unknown) => {
showToast({ message: `Error while deleting the tool: ${error}`, status: 'error' });
},
onSuccess: () => {
const tools = getValues('tools').filter((fn: string) => fn !== tool);
setValue('tools', tools);
showToast({ message: 'Tool deleted successfully', status: 'success' });
},
},
);
}
};
if (!currentTool) {
return null;
}
return (
<OGDialog>
<div
className={cn('flex w-full items-center rounded-lg text-sm', !agent_id ? 'opacity-40' : '')}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
<div className="flex grow items-center">
{currentTool.icon && (
<div className="flex h-9 w-9 items-center justify-center overflow-hidden rounded-full">
<div
className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-center bg-no-repeat dark:bg-white/20"
style={{ backgroundImage: `url(${currentTool.icon})`, backgroundSize: 'cover' }}
/>
</div>
)}
<div
className="h-9 grow px-3 py-2"
style={{ textOverflow: 'ellipsis', wordBreak: 'break-all', overflow: 'hidden' }}
>
{currentTool.name}
</div>
</div>
{isHovering && (
<OGDialogTrigger asChild>
<button
type="button"
className="transition-color 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"
>
<TrashIcon />
</button>
</OGDialogTrigger>
)}
</div>
<OGDialogTemplate
showCloseButton={false}
title={localize('com_ui_delete_tool')}
mainClassName="px-0"
className="max-w-[450px]"
main={
<Label className="text-left text-sm font-medium">
{localize('com_ui_delete_tool_confirm')}
</Label>
}
selection={{
selectHandler: () => removeTool(currentTool.pluginKey),
selectClasses:
'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 transition-color duration-200 text-white',
selectText: localize('com_ui_delete'),
}}
/>
</OGDialog>
);
}

60
client/src/components/SidePanel/Agents/CapabilitiesForm.tsx Normal file
View file

@ -0,0 +1,60 @@
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],
);
// const imageVisionEnabled = useMemo(
// () => agentsConfig?.capabilities?.includes(Capabilities.image_vision),
// [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 && <Code />}
{retrievalEnabled && <Retrieval retrievalModels={retrievalModels} />}
{/* {imageVisionEnabled && version == 1 && <ImageVision />} */}
{codeEnabled && <CodeFiles agent_id={agent_id} files={files} />}
</div>
</div>
);
}

66
client/src/components/SidePanel/Agents/Code.tsx Normal file
View file

@ -0,0 +1,66 @@
import { Capabilities } 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={Capabilities.code_interpreter}
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()}
/>
)}
/>
<div className="flex items-center space-x-2">
<label
className="form-check-label text-token-text-primary w-full cursor-pointer"
htmlFor={Capabilities.code_interpreter}
onClick={() =>
setValue(Capabilities.code_interpreter, !getValues(Capabilities.code_interpreter), {
shouldDirty: true,
})
}
>
{localize('com_assistants_code_interpreter')}
</label>
<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-gray-600 dark:text-gray-300">
{/* // TODO: add a Code Interpreter description */}
</p>
</div>
</HoverCardContent>
</HoverCardPortal>
</div>
</HoverCard>
</>
);
}

95
client/src/components/SidePanel/Agents/CodeFiles.tsx Normal file
View file

@ -0,0 +1,95 @@
import { useState, useRef, useEffect } from 'react';
import {
EToolResources,
EModelEndpoint,
mergeFileConfig,
fileConfig as defaultFileConfig,
} from 'librechat-data-provider';
import type { ExtendedFile } from '~/common';
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;
export default function CodeFiles({
agent_id,
files: _files,
}: {
agent_id: string;
files?: [string, ExtendedFile][];
}) {
const localize = useLocalize();
const { setFilesLoading } = useChatContext();
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({
overrideEndpoint: EModelEndpoint.agents,
additionalMetadata: { agent_id, tool_resource },
fileSetter: setFiles,
});
useEffect(() => {
if (_files) {
setFiles(new Map(_files));
}
}, [_files]);
const endpointFileConfig = fileConfig.endpoints[EModelEndpoint.agents];
if (endpointFileConfig?.disabled) {
return null;
}
const handleButtonClick = () => {
// necessary to reset the input
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
fileInputRef.current?.click();
};
return (
<div className="mb-2 w-full">
<div className="flex flex-col gap-4">
<div className="text-token-text-tertiary rounded-lg text-xs">
{localize('com_assistants_code_interpreter_files')}
</div>
<FileRow
files={files}
setFiles={setFiles}
agent_id={agent_id}
tool_resource={tool_resource}
setFilesLoading={setFilesLoading}
Wrapper={({ children }) => <div className="flex flex-wrap gap-2">{children}</div>}
/>
<div>
<button
type="button"
disabled={!agent_id}
className="btn btn-neutral border-token-border-light relative h-8 w-full rounded-lg font-medium"
onClick={handleButtonClick}
>
<div className="flex w-full items-center justify-center gap-2">
<input
multiple={true}
type="file"
style={{ display: 'none' }}
tabIndex={-1}
ref={fileInputRef}
disabled={!agent_id}
onChange={handleFileChange}
/>
{localize('com_ui_upload_files')}
</div>
</button>
</div>
</div>
</div>
);
}

110
client/src/components/SidePanel/Agents/ContextButton.tsx Normal file
View file

@ -0,0 +1,110 @@
import type { Agent, AgentCreateParams } from 'librechat-data-provider';
import type { UseMutationResult } from '@tanstack/react-query';
import { OGDialog, OGDialogTrigger, Label } from '~/components/ui';
import { useChatContext, useToastContext } from '~/Providers';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { useLocalize, useSetIndexOptions } from '~/hooks';
import { useDeleteAgentMutation } from '~/data-provider';
import { cn, removeFocusOutlines } from '~/utils/';
import { TrashIcon } from '~/components/svg';
export default function ContextButton({
agent_id,
setCurrentAgentId,
createMutation,
}: {
agent_id: string;
setCurrentAgentId: React.Dispatch<React.SetStateAction<string | undefined>>;
createMutation: UseMutationResult<Agent, Error, AgentCreateParams>;
}) {
const localize = useLocalize();
const { showToast } = useToastContext();
const { conversation } = useChatContext();
const { setOption } = useSetIndexOptions();
const deleteAgent = useDeleteAgentMutation({
onSuccess: (_, vars, context) => {
const updatedList = context as Agent[] | undefined;
if (!updatedList) {
return;
}
showToast({
message: localize('com_ui_agent_deleted'),
status: 'success',
});
if (createMutation.data?.id) {
console.log('[deleteAgent] resetting createMutation');
createMutation.reset();
}
const firstAgent = updatedList[0] as Agent | undefined;
if (!firstAgent) {
return setOption('agent_id')('');
}
if (vars.agent_id === conversation?.agent_id) {
setOption('model')('');
return setOption('agent_id')(firstAgent.id);
}
const currentAgent = updatedList?.find((agent) => agent.id === conversation?.agent_id);
if (currentAgent) {
setCurrentAgentId(currentAgent.id);
}
setCurrentAgentId(firstAgent.id);
},
onError: (error) => {
console.error(error);
showToast({
message: localize('com_ui_agent_delete_error'),
status: 'error',
});
},
});
if (!agent_id) {
return null;
}
return (
<OGDialog>
<OGDialogTrigger asChild>
<button
className={cn(
'btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium',
removeFocusOutlines,
)}
type="button"
>
<div className="flex w-full items-center justify-center gap-2 text-red-500">
<TrashIcon />
</div>
</button>
</OGDialogTrigger>
<OGDialogTemplate
title={localize('com_ui_delete') + ' ' + localize('com_ui_agent')}
className="max-w-[450px]"
main={
<>
<div className="flex w-full flex-col items-center gap-2">
<div className="grid w-full items-center gap-2">
<Label htmlFor="delete-agent" className="text-left text-sm font-medium">
{localize('com_ui_delete_agent_confirm')}
</Label>
</div>
</div>
</>
}
selection={{
selectHandler: () => deleteAgent.mutate({ agent_id }),
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
selectText: localize('com_ui_delete'),
}}
/>
</OGDialog>
);
}

40
client/src/components/SidePanel/Agents/ImageVision.tsx Normal file
View file

@ -0,0 +1,40 @@
import { useFormContext, Controller } from 'react-hook-form';
import { Capabilities } from 'librechat-data-provider';
import type { AgentForm } from '~/common';
import { Checkbox } from '~/components/ui';
import { useLocalize } from '~/hooks';
export default function ImageVision() {
const localize = useLocalize();
const methods = useFormContext<AgentForm>();
const { control, setValue, getValues } = methods;
return (
<div className="flex items-center">
<Controller
name={Capabilities.image_vision}
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()}
/>
)}
/>
<label
className="form-check-label text-token-text-primary w-full cursor-pointer"
htmlFor={Capabilities.image_vision}
onClick={() =>
setValue(Capabilities.image_vision, !getValues(Capabilities.image_vision), {
shouldDirty: true,
})
}
>
<div className="flex items-center">{localize('com_assistants_image_vision')}</div>
</label>
</div>
);
}

135
client/src/components/SidePanel/Agents/Images.tsx Normal file
View file

@ -0,0 +1,135 @@
import { useRef } from 'react';
import * as Popover from '@radix-ui/react-popover';
import { useLocalize } from '~/hooks';
export function NoImage() {
return (
<div className="border-token-border-medium flex h-full w-full items-center justify-center rounded-full border-2 border-dashed border-black">
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="text-4xl"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</div>
);
}
export const AgentAvatarRender = ({
url,
progress = 1,
}: {
url?: string;
progress: number; // between 0 and 1
}) => {
const radius = 55; // Radius of the SVG circle
const circumference = 2 * Math.PI * radius;
// Calculate the offset based on the loading progress
const offset = circumference - progress * circumference;
const circleCSSProperties = {
transition: 'stroke-dashoffset 0.3s linear',
};
return (
<div>
<div className="relative h-20 w-20 overflow-hidden rounded-full">
<img
src={url}
className="bg-token-surface-secondary dark:bg-token-surface-tertiary h-full w-full rounded-full object-cover"
alt="GPT"
width="80"
height="80"
style={{ opacity: progress < 1 ? 0.4 : 1 }}
/>
{progress < 1 && (
<div className="absolute inset-0 flex items-center justify-center bg-black/5 text-white">
<svg width="120" height="120" viewBox="0 0 120 120" className="h-6 w-6">
<circle
className="origin-[50%_50%] -rotate-90 stroke-gray-400"
strokeWidth="10"
fill="transparent"
r="55"
cx="60"
cy="60"
/>
<circle
className="origin-[50%_50%] -rotate-90 transition-[stroke-dashoffset]"
stroke="currentColor"
strokeWidth="10"
strokeDasharray={`${circumference} ${circumference}`}
strokeDashoffset={offset}
fill="transparent"
r="55"
cx="60"
cy="60"
style={circleCSSProperties}
/>
</svg>
</div>
)}
</div>
</div>
);
};
export function AvatarMenu({
handleFileChange,
}: {
handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}) {
const localize = useLocalize();
const fileInputRef = useRef<HTMLInputElement>(null);
const onItemClick = () => {
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
fileInputRef.current?.click();
};
return (
<Popover.Portal>
<Popover.Content
className="flex min-w-[100px] max-w-xs flex-col rounded-xl border border-gray-400 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-850 dark:text-white"
sideOffset={5}
>
<div
role="menuitem"
className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-gray-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-800 dark:hover:bg-white/5"
tabIndex={-1}
data-orientation="vertical"
onClick={onItemClick}
>
{localize('com_ui_upload_image')}
</div>
{/* <Popover.Close
role="menuitem"
className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
tabIndex={-1}
data-orientation="vertical"
>
Use DALL·E
</Popover.Close> */}
<input
accept="image/png,.png,image/jpeg,.jpg,.jpeg,image/gif,.gif,image/webp,.webp"
multiple={false}
type="file"
style={{ display: 'none' }}
onChange={handleFileChange}
ref={fileInputRef}
tabIndex={-1}
/>
</Popover.Content>
</Popover.Portal>
);
}

283
client/src/components/SidePanel/Agents/ModelPanel.tsx Normal file
View file

@ -0,0 +1,283 @@
import { useEffect, useMemo } from 'react';
import { ChevronLeft } from 'lucide-react';
import { Controller, useFormContext } from 'react-hook-form';
import type { AgentForm, AgentModelPanelProps } from '~/common';
import { SelectDropDown, ModelParameters } from '~/components/ui';
import { cn, cardStyle } from '~/utils';
import { useLocalize } from '~/hooks';
import { Panel } from '~/common';
export default function ModelPanel({
setActivePanel,
providers,
models: modelsData,
}: AgentModelPanelProps) {
const localize = useLocalize();
const { control, setValue, watch } = useFormContext<AgentForm>();
const model = watch('model');
const providerOption = watch('provider');
const provider = useMemo(() => {
if (!providerOption) {
return '';
}
return typeof providerOption === 'string' ? providerOption : providerOption.value;
}, [providerOption]);
const models = useMemo(() => (provider ? modelsData[provider] : []), [modelsData, provider]);
useEffect(() => {
if (provider && model) {
const modelExists = models.includes(model);
if (!modelExists) {
const newModels = modelsData[provider];
setValue('model', newModels[0] ?? '');
}
}
}, [provider, models, modelsData, setValue, model]);
return (
<div className="h-full overflow-auto px-2 pb-12 text-sm">
<div className="model-panel relative flex flex-col items-center px-16 py-6 text-center">
<div className="absolute left-0 top-6">
<button
type="button"
className="btn btn-neutral relative"
onClick={() => {
setActivePanel(Panel.builder);
}}
>
<div className="model-panel-content flex w-full items-center justify-center gap-2">
<ChevronLeft />
</div>
</button>
</div>
<div className="mb-2 mt-2 text-xl font-medium">{localize('com_ui_model_parameters')}</div>
</div>
{/* Endpoint aka Provider for Agents */}
<div className="mb-4">
<label
className="text-token-text-primary model-panel-label mb-2 block font-medium"
htmlFor="provider"
>
{localize('com_ui_provider')} <span className="text-red-500">*</span>
</label>
<Controller
name="provider"
control={control}
rules={{ required: true, minLength: 1 }}
render={({ field, fieldState: { error } }) => (
<>
<SelectDropDown
emptyTitle={true}
value={field.value ?? ''}
placeholder={localize('com_ui_select_provider')}
setValue={field.onChange}
availableValues={providers}
showAbove={false}
showLabel={false}
className={cn(
cardStyle,
'flex h-[40px] w-full flex-none items-center justify-center border-none px-4 hover:cursor-pointer',
!field.value && 'border-2 border-yellow-400',
)}
containerClassName={cn('rounded-md', error ? 'border-red-500 border-2' : '')}
/>
{error && (
<span className="model-panel-error text-sm text-red-500 transition duration-300 ease-in-out">
{localize('com_ui_field_required')}
</span>
)}
</>
)}
/>
</div>
{/* Model */}
<div className="model-panel-section mb-6">
<label
className={cn(
'text-token-text-primary model-panel-label mb-2 block font-medium',
!provider && 'text-gray-500 dark:text-gray-400',
)}
htmlFor="model"
>
{localize('com_ui_model')} <span className="text-red-500">*</span>
</label>
<Controller
name="model"
control={control}
rules={{ required: true, minLength: 1 }}
render={({ field, fieldState: { error } }) => (
<>
<SelectDropDown
emptyTitle={true}
placeholder={
provider
? localize('com_ui_select_model')
: localize('com_ui_select_provider_first')
}
value={field.value}
setValue={field.onChange}
availableValues={models}
showAbove={false}
showLabel={false}
disabled={!provider}
className={cn(
cardStyle,
'flex h-[40px] w-full flex-none items-center justify-center border-none px-4',
!provider ? 'cursor-not-allowed bg-gray-200' : 'hover:cursor-pointer',
)}
containerClassName={cn('rounded-md', error ? 'border-red-500 border-2' : '')}
/>
{provider && error && (
<span className="text-sm text-red-500 transition duration-300 ease-in-out">
{localize('com_ui_field_required')}
</span>
)}
</>
)}
/>
</div>
<div className="mb-4">
<Controller
name="model_parameters.temperature"
control={control}
rules={{ required: false }}
render={({ field }) => (
<>
<ModelParameters
label="com_endpoint_temperature"
ariaLabel="Temperature"
min={-2}
max={2}
step={0.01}
stepClick={0.01}
initialValue={field.value ?? 1}
onChange={field.onChange}
showButtons={true}
disabled={!provider}
/>
</>
)}
/>
</div>
<div className="mb-4">
<Controller
name="model_parameters.max_context_tokens"
control={control}
rules={{ required: false }}
render={({ field }) => (
<>
<ModelParameters
label="com_endpoint_max_output_tokens"
ariaLabel="Max Context Tokens"
min={0}
max={4096}
step={1}
stepClick={1}
initialValue={field.value ?? 0}
onChange={field.onChange}
showButtons={true}
disabled={!provider}
/>
</>
)}
/>
</div>
<div className="mb-4">
<Controller
name="model_parameters.max_output_tokens"
control={control}
rules={{ required: false }}
render={({ field }) => (
<>
<ModelParameters
label="com_endpoint_context_tokens"
ariaLabel="Max Context Tokens"
min={0}
max={4096}
step={1}
stepClick={1}
initialValue={field.value ?? 0}
onChange={field.onChange}
showButtons={true}
disabled={!provider}
/>
</>
)}
/>
</div>
<div className="mb-4">
<Controller
name="model_parameters.top_p"
control={control}
rules={{ required: false }}
render={({ field }) => (
<>
<ModelParameters
label="com_endpoint_top_p"
ariaLabel="Top P"
min={-2}
max={2}
step={0.01}
stepClick={0.01}
initialValue={field.value ?? 1}
onChange={field.onChange}
showButtons={true}
disabled={!provider}
/>
</>
)}
/>
</div>
<div className="mb-4">
<Controller
name="model_parameters.frequency_penalty"
control={control}
rules={{ required: false }}
render={({ field }) => (
<>
<ModelParameters
label="com_endpoint_frequency_penalty"
ariaLabel="Frequency Penalty"
min={-2}
max={2}
step={0.01}
stepClick={0.01}
initialValue={field.value ?? 0}
onChange={field.onChange}
showButtons={true}
disabled={!provider}
/>
</>
)}
/>
</div>
<div className="mb-4">
<Controller
name="model_parameters.presence_penalty"
control={control}
rules={{ required: false }}
render={({ field }) => (
<>
<ModelParameters
label="com_endpoint_presence_penalty"
ariaLabel="Presence Penalty"
min={-2}
max={2}
step={0.01}
stepClick={0.01}
initialValue={field.value ?? 0}
onChange={field.onChange}
showButtons={true}
disabled={!provider}
/>
</>
)}
/>
</div>
</div>
);
}

91
client/src/components/SidePanel/Agents/Retrieval.tsx Normal file
View file

@ -0,0 +1,91 @@
import { useEffect, useMemo } from 'react';
import { Capabilities } from 'librechat-data-provider';
import { useFormContext, Controller, useWatch } from 'react-hook-form';
import {
Checkbox,
HoverCard,
HoverCardContent,
HoverCardPortal,
HoverCardTrigger,
} from '~/components/ui';
import OptionHover from '~/components/SidePanel/Parameters/OptionHover';
import { CircleHelpIcon } from '~/components/svg';
import type { AgentForm } from '~/common';
import { useLocalize } from '~/hooks';
import { ESide } from '~/common';
import { cn } from '~/utils/';
export default function Retrieval({ retrievalModels }: { retrievalModels: Set<string> }) {
const localize = useLocalize();
const methods = useFormContext<AgentForm>();
const { control, setValue, getValues } = methods;
const model = useWatch({ control, name: 'model' });
const isDisabled = useMemo(() => !retrievalModels.has(model), [model, retrievalModels]);
useEffect(() => {
if (model && isDisabled) {
setValue(Capabilities.retrieval, false);
}
}, [model, setValue, isDisabled]);
return (
<>
<HoverCard openDelay={50}>
<div className="flex items-center">
<Controller
name={Capabilities.retrieval}
control={control}
render={({ field }) => (
<Checkbox
{...field}
checked={field.value}
disabled={isDisabled}
onCheckedChange={field.onChange}
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
value={field?.value?.toString()}
/>
)}
/>
<div className="flex items-center space-x-2">
<label
className={cn(
'form-check-label text-token-text-primary w-full select-none',
isDisabled ? 'cursor-no-drop opacity-50' : 'cursor-pointer',
)}
htmlFor={Capabilities.retrieval}
onClick={() =>
retrievalModels.has(model) &&
setValue(Capabilities.retrieval, !getValues(Capabilities.retrieval), {
shouldDirty: true,
})
}
>
{localize('com_assistants_file_search')}
</label>
<HoverCardTrigger>
<CircleHelpIcon className="h-5 w-5 text-gray-500" />
</HoverCardTrigger>
</div>
<HoverCardPortal>
<HoverCardContent side={ESide.Top} disabled={isDisabled} className="ml-16 w-80">
<div className="space-y-2">
<p className="text-sm text-gray-600 dark:text-gray-300">
{/* // TODO: Add description for file search */}
</p>
</div>
</HoverCardContent>
</HoverCardPortal>
<OptionHover
side={ESide.Top}
disabled={!isDisabled}
description="com_assistants_non_retrieval_model"
langCode={true}
sideOffset={20}
className="ml-16"
/>
</div>
</HoverCard>
</>
);
}

8
client/src/components/SidePanel/Builder/AssistantAction.tsx → client/src/components/SidePanel/Builder/Action.tsx
View file

@ -2,13 +2,7 @@ import { useState } from 'react';
import type { Action } from 'librechat-data-provider';
import GearIcon from '~/components/svg/GearIcon';
export default function AssistantAction({
action,
onClick,
}: {
action: Action;
onClick: () => void;
}) {
export default function Action({ action, onClick }: { action: Action; onClick: () => void }) {
const [isHovering, setIsHovering] = useState(false);
return (

18
client/src/components/SidePanel/Builder/ActionsPanel.tsx
View file

@ -5,6 +5,7 @@ import {
AuthorizationTypeEnum,
TokenExchangeMethodEnum,
} from 'librechat-data-provider';
import { ChevronLeft } from 'lucide-react';
import type { AssistantPanelProps, ActionAuthForm } from '~/common';
import { useAssistantsMapContext, useToastContext } from '~/Providers';
import { Dialog, DialogTrigger, OGDialog, OGDialogTrigger, Label } from '~/components/ui';
@ -102,22 +103,7 @@ export default function ActionsPanel({
}}
>
<div className="flex w-full items-center justify-center gap-2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="icon-md"
>
<path
d="M15 5L8 12L15 19"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</svg>
<ChevronLeft />
</div>
</button>
</div>

22
client/src/components/SidePanel/Builder/AssistantPanel.tsx
View file

@ -22,12 +22,12 @@ import CapabilitiesForm from './CapabilitiesForm';
import { SelectDropDown } from '~/components/ui';
import AssistantAvatar from './AssistantAvatar';
import AssistantSelect from './AssistantSelect';
import AssistantAction from './AssistantAction';
import ContextButton from './ContextButton';
import AssistantTool from './AssistantTool';
import { Spinner } from '~/components/svg';
import Knowledge from './Knowledge';
import { Panel } from '~/common';
import Action from './Action';
const labelClass = 'mb-2 text-token-text-primary block font-medium';
const inputClass = cn(
@ -42,6 +42,7 @@ export default function AssistantPanel({
endpoint,
actions = [],
setActivePanel,
documentsMap,
assistant_id: current_assistant_id,
setCurrentAssistantId,
assistantsConfig,
@ -222,6 +223,7 @@ export default function AssistantPanel({
reset={reset}
value={field.value}
endpoint={endpoint}
documentsMap={documentsMap}
setCurrentAssistantId={setCurrentAssistantId}
selectedAssistant={current_assistant_id ?? null}
createMutation={create}
@ -373,7 +375,7 @@ export default function AssistantPanel({
/>
</div>
{/* Knowledge */}
{(codeEnabled || retrievalEnabled) && version == 1 && (
{(codeEnabled === true || retrievalEnabled === true) && version == 1 && (
<Knowledge assistant_id={assistant_id} files={files} endpoint={endpoint} />
)}
{/* Capabilities */}
@ -387,9 +389,9 @@ export default function AssistantPanel({
{/* Tools */}
<div className="mb-6">
<label className={labelClass}>
{`${toolsEnabled ? localize('com_assistants_tools') : ''}
${toolsEnabled && actionsEnabled ? ' + ' : ''}
${actionsEnabled ? localize('com_assistants_actions') : ''}`}
{`${toolsEnabled === true ? localize('com_assistants_tools') : ''}
${toolsEnabled === true && actionsEnabled === true ? ' + ' : ''}
${actionsEnabled === true ? localize('com_assistants_actions') : ''}`}
</label>
<div className="space-y-2">
{functions.map((func, i) => (
@ -403,12 +405,10 @@ export default function AssistantPanel({
{actions
.filter((action) => action.assistant_id === assistant_id)
.map((action, i) => {
return (
<AssistantAction key={i} action={action} onClick={() => setAction(action)} />
);
return <Action key={i} action={action} onClick={() => setAction(action)} />;
})}
<div className="flex space-x-2">
{toolsEnabled && (
{toolsEnabled === true && (
<button
type="button"
onClick={() => setShowToolDialog(true)}
@ -419,7 +419,7 @@ export default function AssistantPanel({
</div>
</button>
)}
{actionsEnabled && (
{actionsEnabled === true && (
<button
type="button"
disabled={!assistant_id}
@ -463,7 +463,7 @@ export default function AssistantPanel({
<ToolSelectDialog
isOpen={showToolDialog}
setIsOpen={setShowToolDialog}
assistant_id={assistant_id}
toolsFormKey="functions"
endpoint={endpoint}
/>
</form>

33
client/src/components/SidePanel/Builder/AssistantSelect.tsx
View file

@ -1,5 +1,5 @@
import { Plus } from 'lucide-react';
import { useCallback, useEffect, useRef } from 'react';
import { useCallback, useEffect, useRef, useMemo } from 'react';
import {
Tools,
FileSources,
@ -13,9 +13,9 @@ import type { UseFormReset } from 'react-hook-form';
import type { UseMutationResult } from '@tanstack/react-query';
import type {
Assistant,
AssistantCreateParams,
AssistantDocument,
AssistantsEndpoint,
AssistantCreateParams,
} from 'librechat-data-provider';
import type {
Actions,
@ -24,11 +24,11 @@ import type {
TAssistantOption,
LastSelectedModels,
} from '~/common';
import { useListAssistantsQuery, useGetAssistantDocsQuery } from '~/data-provider';
import SelectDropDown from '~/components/ui/SelectDropDown';
import { useListAssistantsQuery } from '~/data-provider';
import { useLocalize, useLocalStorage } from '~/hooks';
import { cn, createDropdownSetter } from '~/utils';
import { useFileMapContext } from '~/Providers';
import { cn } from '~/utils';
const keys = new Set([
'name',
@ -43,6 +43,7 @@ export default function AssistantSelect({
reset,
value,
endpoint,
documentsMap,
selectedAssistant,
setCurrentAssistantId,
createMutation,
@ -51,6 +52,7 @@ export default function AssistantSelect({
value: TAssistantOption;
endpoint: AssistantsEndpoint;
selectedAssistant: string | null;
documentsMap: Map<string, AssistantDocument> | null;
setCurrentAssistantId: React.Dispatch<React.SetStateAction<string | undefined>>;
createMutation: UseMutationResult<Assistant, Error, AssistantCreateParams>;
}) {
@ -62,14 +64,7 @@ export default function AssistantSelect({
{} as LastSelectedModels,
);
const { data: documentsMap = new Map<string, AssistantDocument>() } = useGetAssistantDocsQuery(
endpoint,
{
select: (data) => new Map(data.map((dbA) => [dbA.assistant_id, dbA])),
},
);
const assistants = useListAssistantsQuery(endpoint, undefined, {
const query = useListAssistantsQuery(endpoint, undefined, {
select: (res) =>
res.data.map((_assistant) => {
const source =
@ -128,7 +123,7 @@ export default function AssistantSelect({
);
}
const assistantDoc = documentsMap.get(_assistant.id);
const assistantDoc = documentsMap?.get(_assistant.id);
/* If no user updates, use the latest assistant docs */
if (assistantDoc && !assistant.conversation_starters) {
assistant.conversation_starters = assistantDoc.conversation_starters;
@ -140,7 +135,7 @@ export default function AssistantSelect({
const onSelect = useCallback(
(value: string) => {
const assistant = assistants.data?.find((assistant) => assistant.id === value);
const assistant = query.data?.find((assistant) => assistant.id === value);
createMutation.reset();
if (!assistant) {
@ -206,7 +201,7 @@ export default function AssistantSelect({
reset(formValues);
setCurrentAssistantId(assistant.id);
},
[assistants.data, reset, setCurrentAssistantId, createMutation, endpoint, lastSelectedModels],
[query.data, reset, setCurrentAssistantId, createMutation, endpoint, lastSelectedModels],
);
useEffect(() => {
@ -216,7 +211,7 @@ export default function AssistantSelect({
return;
}
if (selectedAssistant !== '' && selectedAssistant != null && assistants.data) {
if (selectedAssistant !== '' && selectedAssistant != null && query.data) {
timerId = setTimeout(() => {
lastSelectedAssistant.current = selectedAssistant;
onSelect(selectedAssistant);
@ -228,15 +223,15 @@ export default function AssistantSelect({
clearTimeout(timerId);
}
};
}, [selectedAssistant, assistants.data, onSelect]);
}, [selectedAssistant, query.data, onSelect]);
const createAssistant = localize('com_ui_create') + ' ' + localize('com_ui_assistant');
return (
<SelectDropDown
value={!value ? createAssistant : value}
setValue={onSelect}
setValue={createDropdownSetter(onSelect)}
availableValues={
assistants.data ?? [
query.data ?? [
{
label: 'Loading...',
value: '',

17
client/src/components/SidePanel/Builder/PanelSwitch.tsx
View file

@ -1,8 +1,9 @@
import { useState, useEffect, useMemo } from 'react';
import { defaultAssistantsVersion } from 'librechat-data-provider';
import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
import type { Action, AssistantsEndpoint, TEndpointsConfig } from 'librechat-data-provider';
import { useGetActionsQuery } from '~/data-provider';
import type { Action, TEndpointsConfig, AssistantsEndpoint } from 'librechat-data-provider';
import type { ActionsEndpoint } from '~/common';
import { useGetActionsQuery, useGetAssistantDocsQuery } from '~/data-provider';
import AssistantPanel from './AssistantPanel';
import { useChatContext } from '~/Providers';
import ActionsPanel from './ActionsPanel';
@ -17,7 +18,10 @@ export default function PanelSwitch() {
);
const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
const { data: actions = [] } = useGetActionsQuery(conversation?.endpoint as AssistantsEndpoint);
const { data: actions = [] } = useGetActionsQuery(conversation?.endpoint as ActionsEndpoint);
const { data: documentsMap = null } = useGetAssistantDocsQuery(conversation?.endpoint ?? '', {
select: (data) => new Map(data.map((dbA) => [dbA.assistant_id, dbA])),
});
const assistantsConfig = useMemo(
() => endpointsConfig?.[conversation?.endpoint ?? ''],
@ -25,8 +29,9 @@ export default function PanelSwitch() {
);
useEffect(() => {
if (conversation?.assistant_id) {
setCurrentAssistantId(conversation?.assistant_id);
const currentId = conversation?.assistant_id ?? '';
if (currentId) {
setCurrentAssistantId(currentId);
}
}, [conversation?.assistant_id]);
@ -44,6 +49,7 @@ export default function PanelSwitch() {
actions={actions}
setAction={setAction}
activePanel={activePanel}
documentsMap={documentsMap}
setActivePanel={setActivePanel}
assistant_id={currentAssistantId}
setCurrentAssistantId={setCurrentAssistantId}
@ -59,6 +65,7 @@ export default function PanelSwitch() {
action={action}
actions={actions}
setAction={setAction}
documentsMap={documentsMap}
setActivePanel={setActivePanel}
assistant_id={currentAssistantId}
setCurrentAssistantId={setCurrentAssistantId}

5
client/src/components/SidePanel/SidePanel.tsx
View file

@ -83,6 +83,8 @@ const SidePanel = ({
}, []);
const assistants = useMemo(() => endpointsConfig?.[endpoint ?? ''], [endpoint, endpointsConfig]);
const agents = useMemo(() => endpointsConfig?.[endpoint ?? ''], [endpoint, endpointsConfig]);
const userProvidesKey = useMemo(
() => !!(endpointsConfig?.[endpoint ?? '']?.userProvide ?? false),
[endpointsConfig, endpoint],
@ -102,10 +104,11 @@ const SidePanel = ({
}, []);
const Links = useSideNavLinks({
agents,
endpoint,
hidePanel,
assistants,
keyProvided,
endpoint,
interfaceConfig,
});

10
client/src/components/SidePanel/Switcher.tsx
View file

@ -1,7 +1,8 @@
import { isAssistantsEndpoint } from 'librechat-data-provider';
import { isAssistantsEndpoint, isAgentsEndpoint } from 'librechat-data-provider';
import type { SwitcherProps } from '~/common';
import { Separator } from '~/components/ui/Separator';
import AssistantSwitcher from './AssistantSwitcher';
import AgentSwitcher from './AgentSwitcher';
import ModelSwitcher from './ModelSwitcher';
export default function Switcher(props: SwitcherProps) {
@ -12,6 +13,13 @@ export default function Switcher(props: SwitcherProps) {
<Separator className="max-w-[98%] bg-surface-tertiary" />
</>
);
} else if (isAgentsEndpoint(props.endpoint) && props.endpointKeyProvided) {
return (
<>
<AgentSwitcher {...props} />
<Separator className="bg-gray-100/50 dark:bg-gray-600" />
</>
);
} else if (isAssistantsEndpoint(props.endpoint)) {
return null;
}

25
client/src/components/Tools/ToolSelectDialog.tsx
View file

@ -3,7 +3,12 @@ import { Search, X } from 'lucide-react';
import { Dialog, DialogPanel, DialogTitle, Description } from '@headlessui/react';
import { useFormContext } from 'react-hook-form';
import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
import type { AssistantsEndpoint, TError, TPluginAction } from 'librechat-data-provider';
import type {
AssistantsEndpoint,
EModelEndpoint,
TError,
TPluginAction,
} from 'librechat-data-provider';
import type { TPluginStoreDialogProps } from '~/common/types';
import { PluginPagination, PluginAuthForm } from '~/components/Plugins/Store';
import { useLocalize, usePluginDialogHelpers } from '~/hooks';
@ -12,9 +17,13 @@ import ToolItem from './ToolItem';
function ToolSelectDialog({
isOpen,
setIsOpen,
endpoint,
}: TPluginStoreDialogProps & { assistant_id?: string; endpoint: AssistantsEndpoint }) {
setIsOpen,
toolsFormKey,
}: TPluginStoreDialogProps & {
toolsFormKey: string;
endpoint: AssistantsEndpoint | EModelEndpoint.agents;
}) {
const localize = useLocalize();
const { getValues, setValue } = useFormContext();
const { data: tools = [] } = useAvailableToolsQuery(endpoint);
@ -56,9 +65,9 @@ function ToolSelectDialog({
const handleInstall = (pluginAction: TPluginAction) => {
const addFunction = () => {
const fns = getValues('functions').slice();
const fns = getValues(toolsFormKey).slice();
fns.push(pluginAction.pluginKey);
setValue('functions', fns);
setValue(toolsFormKey, fns);
};
if (!pluginAction.auth) {
@ -84,8 +93,8 @@ function ToolSelectDialog({
handleInstallError(error as TError);
},
onSuccess: () => {
const fns = getValues('functions').filter((fn) => fn !== tool);
setValue('functions', fns);
const fns = getValues(toolsFormKey).filter((fn: string) => fn !== tool);
setValue(toolsFormKey, fns);
},
},
);
@ -213,7 +222,7 @@ function ToolSelectDialog({
<ToolItem
key={index}
tool={tool}
isInstalled={getValues('functions').includes(tool.pluginKey)}
isInstalled={getValues(toolsFormKey).includes(tool.pluginKey)}
onAddTool={() => onAddTool(tool.pluginKey)}
onRemoveTool={() => onRemoveTool(tool.pluginKey)}
/>

185
client/src/components/ui/ModelParameters.tsx Normal file
View file

@ -0,0 +1,185 @@
import React, { useState, useCallback, useRef, useEffect } from 'react';
import { useLocalize } from '~/hooks';
import { Minus, Plus } from 'lucide-react';
interface ModelParametersProps {
label?: string;
ariaLabel?: string;
min?: number;
max?: number;
step?: number;
stepClick?: number;
initialValue?: number;
showButtons?: boolean;
onChange?: (value: number) => void;
disabled?: boolean;
}
const ModelParameters: React.FC<ModelParametersProps> = ({
label = 'Value',
ariaLabel = 'Value',
min = 0,
max = 100,
step = 1,
stepClick = 1,
initialValue = 0,
showButtons = true,
onChange,
disabled = false,
}) => {
const localize = useLocalize();
const [value, setValue] = useState(initialValue);
const [isHovering, setIsHovering] = useState(false);
const rangeRef = useRef<HTMLInputElement>(null);
const id = `model-parameter-${ariaLabel.toLowerCase().replace(/\s+/g, '-')}`;
const displayLabel = label.startsWith('com_') ? localize(label) : label;
const getDecimalPlaces = (num: number) => {
const match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
if (!match) {
return 0;
}
return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
};
const decimalPlaces = getDecimalPlaces(step);
const handleChange = useCallback(
(newValue: number) => {
const clampedValue = Math.min(Math.max(newValue, min), max);
const finalValue = Object.is(clampedValue, -0) ? 0 : clampedValue;
setValue(finalValue);
onChange?.(finalValue);
},
[min, max, onChange],
);
const handleInputChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
handleChange(parseFloat(e.target.value));
},
[handleChange],
);
const handleIncrement = useCallback(() => {
handleChange(value + stepClick);
}, [value, stepClick, handleChange]);
const handleDecrement = useCallback(() => {
handleChange(value - stepClick);
}, [value, stepClick, handleChange]);
const handleKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
e.preventDefault();
handleIncrement();
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
e.preventDefault();
handleDecrement();
}
},
[handleIncrement, handleDecrement],
);
useEffect(() => {
const rangeElement = rangeRef.current;
if (rangeElement) {
const percentage = ((value - min) / (max - min)) * 100;
rangeElement.style.backgroundSize = `${percentage}% 100%`;
}
}, [value, min, max]);
return (
<div className="w-full">
<div className="mb-2 flex items-center justify-between">
<label
htmlFor={id}
className={`text-sm font-medium ${disabled ? 'text-gray-400 dark:text-gray-400' : ''}`}
>
{displayLabel}
</label>
<div className="flex items-center gap-2">
<output
htmlFor={id}
className={`select-none text-sm font-medium ${
disabled ? 'text-gray-400 dark:text-gray-400' : ''
}`}
aria-live="polite"
>
{value.toFixed(decimalPlaces).replace('-0.00', '0.00')}
</output>
{showButtons && (
<div className="flex items-center gap-1">
<button
type="button"
onClick={handleDecrement}
className={`rounded-md p-1 transition-colors ${
disabled
? 'cursor-not-allowed text-gray-400 dark:text-gray-400'
: 'hover:bg-gray-200 dark:hover:bg-gray-700'
}`}
aria-label={`Decrease ${label}`}
disabled={disabled}
>
<Minus size={16} />
</button>
<button
type="button"
onClick={handleIncrement}
className={`rounded-md p-1 transition-colors ${
disabled
? 'cursor-not-allowed text-gray-400 dark:text-gray-400'
: 'hover:bg-gray-200 dark:hover:bg-gray-700'
}`}
aria-label={`Increase ${label}`}
disabled={disabled}
>
<Plus size={16} />
</button>
</div>
)}
</div>
</div>
<div className="relative w-full">
<input
ref={rangeRef}
type="range"
id={id}
min={min}
max={max}
step={step}
value={value}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
className={`slider-thumb h-2 w-full appearance-none rounded-lg bg-gradient-to-r from-gray-500 to-gray-500 bg-no-repeat focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${
disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
}`}
tabIndex={0}
style={{
backgroundSize: '50% 100%',
backgroundPosition: 'left',
}}
aria-valuemin={min}
aria-valuemax={max}
aria-valuenow={value}
aria-valuetext={`${value.toFixed(decimalPlaces).replace('-0.00', '0.00')}`}
disabled={disabled}
/>
{isHovering ? (
<div className="trab mt-1 flex justify-between">
<span className="text-xs text-gray-500">{min}</span>
<span className="text-xs text-gray-500">{max}</span>
</div>
) : (
<div className="mt-1" style={{ height: '1rem' }}></div>
)}
</div>
</div>
);
};
export default React.memo(ModelParameters);

41
client/src/components/ui/SelectDropDown.tsx
View file

@ -1,24 +1,24 @@
import React from 'react';
import {
Listbox,
ListboxButton,
Label,
ListboxOptions,
ListboxOption,
Listbox,
Transition,
ListboxButton,
ListboxOption,
ListboxOptions,
} from '@headlessui/react';
import type { Option, OptionWithIcon } from '~/common';
import CheckMark from '../svg/CheckMark';
import type { Option, OptionWithIcon, DropdownValueSetter } from '~/common';
import CheckMark from '~/components/svg/CheckMark';
import { useMultiSearch } from './MultiSearch';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils/';
import { useMultiSearch } from './MultiSearch';
type SelectDropDownProps = {
id?: string;
title?: string;
value: string | null | Option | OptionWithIcon;
disabled?: boolean;
setValue: (value: string) => void;
value: string | null | Option | OptionWithIcon;
setValue: DropdownValueSetter | ((value: string) => void);
tabIndex?: number;
availableValues: string[] | Option[] | OptionWithIcon[];
emptyTitle?: boolean;
@ -32,6 +32,7 @@ type SelectDropDownProps = {
optionsClass?: string;
subContainerClassName?: string;
className?: string;
placeholder?: string;
searchClassName?: string;
searchPlaceholder?: string;
showOptionIcon?: boolean;
@ -48,6 +49,7 @@ function SelectDropDown({
showLabel = true,
emptyTitle = false,
iconSide = 'right',
placeholder,
containerClassName,
optionsListClass,
optionsClass,
@ -94,7 +96,7 @@ function SelectDropDown({
<ListboxButton
data-testid="select-dropdown-button"
className={cn(
'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left dark:border-gray-600 dark:bg-gray-700 sm:text-sm',
'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left disabled:bg-white dark:border-gray-600 dark:bg-gray-700 sm:text-sm',
className ?? '',
)}
>
@ -124,7 +126,15 @@ function SelectDropDown({
{(value as OptionWithIcon).icon}
</span>
)}
{typeof value !== 'string' && value ? value?.label ?? '' : value ?? ''}
{value ? (
typeof value !== 'string' ? (
value?.label ?? ''
) : (
value
)
) : (
<span className="text-gray-500 dark:text-gray-400">{placeholder}</span>
)}
</span>
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@ -164,7 +174,7 @@ function SelectDropDown({
key={'listbox-render-option'}
value={null}
className={cn(
'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-800 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700',
'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden pl-3 pr-9 text-gray-800 hover:bg-gray-20 dark:text-white dark:hover:bg-gray-700',
optionsClass ?? '',
)}
>
@ -177,7 +187,8 @@ function SelectDropDown({
return null;
}
const currentLabel = typeof option === 'string' ? option : option?.label ?? '';
const currentLabel =
typeof option === 'string' ? option : option?.label ?? option?.value ?? '';
const currentValue = typeof option === 'string' ? option : option?.value ?? '';
const currentIcon =
typeof option === 'string' ? null : (option?.icon as React.ReactNode) ?? null;
@ -189,10 +200,10 @@ function SelectDropDown({
return (
<ListboxOption
key={i}
value={currentValue}
value={option}
className={({ active }) =>
cn(
'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-800 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700',
'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden pl-3 pr-9 text-gray-800 hover:bg-gray-20 dark:text-white dark:hover:bg-gray-600',
active ? 'bg-surface-tertiary' : '',
optionsClass ?? '',
)

1
client/src/components/ui/index.ts
View file

@ -31,6 +31,7 @@ export { default as DelayedRender } from './DelayedRender';
export { default as ThemeSelector } from './ThemeSelector';
export { default as SelectDropDown } from './SelectDropDown';
export { default as MultiSelectPop } from './MultiSelectPop';
export { default as ModelParameters } from './ModelParameters';
export { default as InputWithDropdown } from './InputWithDropDown';
export { default as SelectDropDownPop } from './SelectDropDownPop';
export { default as MultiSelectDropDown } from './MultiSelectDropDown';

244
client/src/data-provider/mutations.ts
View file

@ -863,7 +863,7 @@ export const useUpdateAssistantMutation = (
const { endpoint } = data;
const endpointsConfig = queryClient.getQueryData<t.TEndpointsConfig>([QueryKeys.endpoints]);
const endpointConfig = endpointsConfig?.[endpoint];
const version = endpointConfig?.version ?? defaultAssistantsVersion[endpoint];
const version = endpointConfig.version ?? defaultAssistantsVersion[endpoint];
return dataService.updateAssistant({
data,
version,
@ -1104,6 +1104,248 @@ export const useDeleteAction = (
});
};
/**
* AGENTS
*/
/**
* Create a new agent
*/
export const useCreateAgentMutation = (
options?: t.CreateAgentMutationOptions,
): UseMutationResult<t.Agent, Error, t.AgentCreateParams> => {
const queryClient = useQueryClient();
return useMutation((newAgentData: t.AgentCreateParams) => dataService.createAgent(newAgentData), {
onMutate: (variables) => options?.onMutate?.(variables),
onError: (error, variables, context) => options?.onError?.(error, variables, context),
onSuccess: (newAgent, variables, context) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([
QueryKeys.agents,
defaultOrderQuery,
]);
if (!listRes) {
return options?.onSuccess?.(newAgent, variables, context);
}
const currentAgents = [newAgent, ...JSON.parse(JSON.stringify(listRes.data))];
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
...listRes,
data: currentAgents,
});
return options?.onSuccess?.(newAgent, variables, context);
},
});
};
/**
* Hook for updating an agent
*/
export const useUpdateAgentMutation = (
options?: t.UpdateAgentMutationOptions,
): UseMutationResult<t.Agent, Error, { agent_id: string; data: t.AgentUpdateParams }> => {
const queryClient = useQueryClient();
return useMutation(
({ agent_id, data }: { agent_id: string; data: t.AgentUpdateParams }) => {
return dataService.updateAgent({
data,
agent_id,
});
},
{
onMutate: (variables) => options?.onMutate?.(variables),
onError: (error, variables, context) => options?.onError?.(error, variables, context),
onSuccess: (updatedAgent, variables, context) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([
QueryKeys.agents,
defaultOrderQuery,
]);
if (!listRes) {
return options?.onSuccess?.(updatedAgent, variables, context);
}
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
...listRes,
data: listRes.data.map((agent) => {
if (agent.id === variables.agent_id) {
return updatedAgent;
}
return agent;
}),
});
return options?.onSuccess?.(updatedAgent, variables, context);
},
},
);
};
/**
* Hook for deleting an agent
*/
export const useDeleteAgentMutation = (
options?: t.DeleteAgentMutationOptions,
): UseMutationResult<void, Error, t.DeleteAgentBody> => {
const queryClient = useQueryClient();
return useMutation(
({ agent_id }: t.DeleteAgentBody) => {
return dataService.deleteAgent({ agent_id });
},
{
onMutate: (variables) => options?.onMutate?.(variables),
onError: (error, variables, context) => options?.onError?.(error, variables, context),
onSuccess: (_data, variables, context) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([
QueryKeys.agents,
defaultOrderQuery,
]);
if (!listRes) {
return options?.onSuccess?.(_data, variables, context);
}
const data = listRes.data.filter((agent) => agent.id !== variables.agent_id);
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
...listRes,
data,
});
return options?.onSuccess?.(_data, variables, data);
},
},
);
};
/**
* Hook for uploading an agent avatar
*/
export const useUploadAgentAvatarMutation = (
options?: t.UploadAgentAvatarOptions,
): UseMutationResult<
t.Agent, // response data
unknown, // error
t.AgentAvatarVariables, // request
unknown // context
> => {
return useMutation([MutationKeys.agentAvatarUpload], {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
mutationFn: ({ postCreation, ...variables }: t.AgentAvatarVariables) =>
dataService.uploadAgentAvatar(variables),
...(options || {}),
});
};
/**
* Hook for updating Agent Actions
*/
export const useUpdateAgentAction = (
options?: t.UpdateAgentActionOptions,
): UseMutationResult<
t.UpdateAgentActionResponse, // response data
unknown, // error
t.UpdateAgentActionVariables, // request
unknown // context
> => {
const queryClient = useQueryClient();
return useMutation([MutationKeys.updateAgentAction], {
mutationFn: (variables: t.UpdateAgentActionVariables) =>
dataService.updateAgentAction(variables),
onMutate: (variables) => options?.onMutate?.(variables),
onError: (error, variables, context) => options?.onError?.(error, variables, context),
onSuccess: (updateAgentActionResponse, variables, context) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([
QueryKeys.agents,
defaultOrderQuery,
]);
if (!listRes) {
return options?.onSuccess?.(updateAgentActionResponse, variables, context);
}
const updatedAgent = updateAgentActionResponse[0];
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
...listRes,
data: listRes.data.map((agent) => {
if (agent.id === variables.agent_id) {
return updatedAgent;
}
return agent;
}),
});
queryClient.setQueryData<t.Action[]>([QueryKeys.actions], (prev) => {
return prev
?.map((action) => {
if (action.action_id === variables.action_id) {
return updateAgentActionResponse[1];
}
return action;
})
.concat(variables.action_id ? [] : [updateAgentActionResponse[1]]);
});
return options?.onSuccess?.(updateAgentActionResponse, variables, context);
},
});
};
/**
* Hook for deleting an Agent Action
*/
export const useDeleteAgentAction = (
options?: t.DeleteAgentActionOptions,
): UseMutationResult<void, Error, t.DeleteAgentActionVariables, unknown> => {
const queryClient = useQueryClient();
return useMutation([MutationKeys.deleteAgentAction], {
mutationFn: (variables: t.DeleteAgentActionVariables) => {
return dataService.deleteAgentAction({
...variables,
});
},
onMutate: (variables) => options?.onMutate?.(variables),
onError: (error, variables, context) => options?.onError?.(error, variables, context),
onSuccess: (_data, variables, context) => {
let domain: string | undefined = '';
queryClient.setQueryData<t.Action[]>([QueryKeys.actions], (prev) => {
return prev?.filter((action) => {
domain = action.metadata.domain;
return action.action_id !== variables.action_id;
});
});
queryClient.setQueryData<t.AgentListResponse>(
[QueryKeys.agents, defaultOrderQuery],
(prev) => {
if (!prev) {
return prev;
}
return {
...prev,
data: prev.data.map((agent) => {
if (agent.id === variables.agent_id) {
return {
...agent,
tools: agent.tools?.filter((tool) => !tool.includes(domain ?? '')),
};
}
return agent;
}),
};
},
);
return options?.onSuccess?.(_data, variables, context);
},
});
};
/**
* Hook for verifying email address
*/

Some files were not shown because too many files have changed in this diff Show more