Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-09-22 08:12:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🔎 feat: Native Web Search with Citation References (#7516)

Browse source 
* WIP: search tool integration

* WIP: Add web search capabilities and API key management to agent actions

* WIP: web search capability to agent configuration and selection

* WIP: Add web search capability to backend agent configuration

* WIP: add web search option to default agent form values

* WIP: add attachments for web search

* feat: add plugin for processing web search citations

* WIP: first pass, Citation UI

* chore: remove console.log

* feat: Add AnimatedTabs component for tabbed UI functionality

* refactor: AnimatedTabs component with CSS animations and stable ID generation

* WIP example content

* feat: SearchContext for managing search results apart from MessageContext

* feat: Enhance AnimatedTabs with underline animation and state management

* WIP: first pass, Implement dynamic tab functionality in Sources component with search results integration

* fix: Update class names for improved styling in Sources and AnimatedTabs components

* feat: Improve styling and layout in Sources component with enhanced button and item designs

* feat: Refactor Sources component to integrate OGDialog for source display and improve layout

* style: Update background color in SourceItem and SourcesGroup components for improved visibility

* refactor: Sources component to enhance SourceItem structure and improve favicon handling

* style: Adjust font size of domain text in SourceItem for better readability

* feat: Add localization for citation source and details in CompositeCitation component

* style: add theming to Citation components

* feat: Enhance SourceItem component with dialog support and improved hovercard functionality

* feat: Add localization for sources tab and image alt text in Sources component

* style: Replace divs with spans for better semantic structure in CompositeCitation and Citation components

* refactor: Sources component to use useMemo for tab generation and improve performance

* chore: bump @librechat/agents to v2.4.318

* chore: update search result types

* fix: search results retrieval in ContentParts component, re-render attachments when expected

* feat: update sources style/types to use latest search result structure

* style: enhance Dialog (expanded) SourceItem component with link wrapping and improved styling

* style: update ImageItem component styling for improved title visibility

* refactor: remove SourceItemBase component and adjust SourceItem layout for improved styling

* chore: linting twcss order

* fix: prevent FileAttachment from rendering search attachments

* fix: append underscore to responseMessageId for unique identification to prevent mapping of previous latest message's attachments

* chore: remove unused parameter 'useSpecs' from loadTools function

* chore: twcss order

* WIP: WebSearch Tool UI

* refactor: add limit parameter to StackedFavicons for customizable source display

* refactor: optimize search results memoization by making more granular and separate conerns

* refactor: integrated StackedFavicons to WebSearch mid-run

* chore: bump @librechat/agents to expose handleToolCallChunks

* chore: use typedefs from dedicated file instead of defining them in AgentClient module

* WIP: first pass, search progress results

* refactor: move createOnSearchResults function to a dedicated search module

* chore: bump @librechat/agents to v2.4.320

* WIP: first pass, search results processed UX

* refactor: consolidate context variables in createOnSearchResults function

* chore: bump @librechat/agents to v2.4.321

* feat: add guidelines for web search tool response formatting in loadTools function

* feat: add isLast prop to Part component and update WebSearch logic for improved state handling

* style: update Hovercard styles for improved UI consistency

* feat: export FaviconImage component for improved accessibility in other modules

* refactor: export getCleanDomain function and use FaviconImage in Citation component for improved source representation

* refactor: implement SourceHovercard component for consistency and DRY compliance

* fix: replace <p> with <span> for snippet and title in SourceItem and SourceHovercard for consistency

* style: `not-prose`

* style: remove 'not-prose' class for consistency in SourceItem, Citation, and SourceHovercard components, adjust style classes

* refactor: `imageUrl` on hover and prevent duplicate sources

* refactor: enhance SourcesGroup dialog layout and improve source item presentation

* refactor: reorganize Web Components, save in same directory

* feat: add 'news' refType to refTypeMap for citation sources

* style: adjust Hovercard width for improved layout

* refactor: update tool usage guidelines for improved clarity and execution

* chore: linting

* feat: add Web Search badge with initial permissions and local storage logic

* feat: add webSearch support to interface and permissions schemas

* feat: implement Web Search API key management and localization updates

* feat: refactor Web Search API key handling and integrate new search API key form

* fix: remove unnecessary visibility state from FileAttachment component

* feat: update WebSearch component to use Globe icon and localized search label

* feat: enhance ApiKeyDialog with dropdown for reranker selection and update translations

* feat: implement dropdown menus for engine, scraper, and reranker selection in ApiKeyDialog

* chore: linting and add unknown instead of `any` type

* feat: refactor ApiKeyDialog and useAuthSearchTool for improved API key management

* refactor: update ocrSchema to use template literals for default apiKey and baseURL

* feat: add web search configuration and utility functions for environment variable extraction

* fix: ensure filepath is defined before checking its prefix in useAttachmentHandler

* feat: enhance web search functionality with improved configuration and environment variable extraction for authFields

* fix: update auth type in TPluginAction and TUpdateUserPlugins to use Partial<Record<string, string>>

* feat: implement web search authentication verification and enhance webSearchAuth structure

* feat: enhance ephemeral agent handling with new web search capability and type definition

* feat: enhance isEphemeralAgent function to include web search selection

* feat: refactor verifyWebSearchAuth to improve key handling and authentication checks

* feat: implement loadWebSearchAuth function for improved web search authentication handling

* feat: enhance web search authentication with new configuration options and refactor related types

* refactor: rename search engine to search provider and update related localization keys

* feat: update verifyWebSearchAuth to handle multiple authentication types and improve error handling

* feat: update ApiKeyDialog to accept authTypes prop and remove isUserProvided check

* feat: add tests for extractWebSearchEnvVars and loadWebSearchAuth functions

* feat: enhance loadWebSearchAuth to support specific service checks for providers, scrapers, and rerankers

* fix: update web search configuration key and adjust auth result handling in loadTools function

* feat: add new progress key for repeated web searching and update localization

* chore: bump @librechat/agents to 2.4.322

* feat: enhance loadTools function to include ISO time and improve search tool logging

* feat: update StackedFavicons to handle negative start index and improve citation attribution styling and text

* chore: update .gitignore to categorize AI-related files

* fix: mobile responsiveness of sources/citations hovercards

* feat: enhance source display with improved line clamping for better readability

* chore: bump @librechat/agents to v2.4.33

* feat: add handling for image sources in references mapping

* chore: bump librechat-data-provider version to 0.7.84

* chore: bump @librechat/agents version to 2.4.34

* fix: update auth handling to support multiple auth types in tools and allow key configuration in agent panel

* chore: remove redundant agent attribution text from search form

* fix: web search auth uninstall

* refactor: convert CheckboxButton to a forwardRef component and update setValue callback signature

* feat: add triggerRef prop to ApiKeyDialog components for improved dialog control

* feat: integrate triggerRef in CodeInterpreter and WebSearch components for enhanced dialog management

* feat: enhance ApiKeyDialog with additional links for Firecrawl and Jina API key guidance

* feat: implement web search configuration handling in ApiKeyDialog and add tests for dropdown visibility

* fix: update webSearchConfig reference in config route for correct payload assignment

* feat: update ApiKeyDialog to conditionally render sections based on authTypes and modify loadWebSearchAuth to correctly categorize authentication types

* feat: refactor ApiKeyDialog and related tests to use SearchCategories and RerankerTypes enums and remove nested ternaries

* refactor: move ThinkingButton rendering to improve layout consistency in ContentParts

* feat: integrate search context into Markdown component to conditionally include unicodeCitation plugin

* chore: bump @librechat/agents to v2.4.35

* chore: remove unused 18n key

* ci: add WEB_SEARCH permission testing and update AppService tests for new webSearch configuration

* ci: add more comprehensive tests for loadWebSearchAuth to validate authentication handling and authTypes structure

* chore: remove debugging console log from web.spec.ts to clean up test output
This commit is contained in:
Danny Avila 2025-05-23 00:14:04 -04:00
parent bf80cf30b3
commit 0dbbf7de04
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
73 changed files with 6366 additions and 2003 deletions
Download patch file Download diff file Expand all files Collapse all files

42
api/app/clients/tools/util/handleTools.js
View file

@ -1,7 +1,13 @@
const { SerpAPI } = require('@langchain/community/tools/serpapi');
const { Calculator } = require('@langchain/community/tools/calculator');
const { createCodeExecutionTool, EnvVar } = require('@librechat/agents');
const { Tools, Constants, EToolResources } = require('librechat-data-provider');
const { EnvVar, createCodeExecutionTool, createSearchTool } = require('@librechat/agents');
const {
Tools,
Constants,
EToolResources,
loadWebSearchAuth,
replaceSpecialVars,
} = require('librechat-data-provider');
const { getUserPluginAuthValue } = require('~/server/services/PluginService');
const {
availableTools,
@ -138,7 +144,6 @@ const loadTools = async ({
agent,
model,
endpoint,
useSpecs,
tools = [],
options = {},
functions = true,
@ -263,6 +268,37 @@ const loadTools = async ({
return createFileSearchTool({ req: options.req, files, entity_id: agent?.id });
};
continue;
} else if (tool === Tools.web_search) {
const webSearchConfig = options?.req?.app?.locals?.webSearch;
const result = await loadWebSearchAuth({
userId: user,
loadAuthValues,
webSearchConfig,
});
const { onSearchResults, onGetHighlights } = options?.[Tools.web_search] ?? {};
requestedTools[tool] = async () => {
// const { files, toolContext } = await primeSearchFiles(options);
// if (toolContext) {
// toolContextMap[tool] = toolContext;
// }
toolContextMap[tool] = `# \`${tool}\`:
Current Date & Time: ${replaceSpecialVars({ text: '{{iso_datetime}}' })}
1. **Execute immediately without preface** when using \`${tool}\`.
2. **After the search, begin with a brief summary** that directly addresses the query without headers or explaining your process.
3. **Structure your response clearly** using Markdown formatting (Level 2 headers for sections, lists for multiple points, tables for comparisons).
4. **Cite sources properly** according to the citation anchor format, utilizing group anchors when appropriate.
5. **Tailor your approach to the query type** (academic, news, coding, etc.) while maintaining an expert, journalistic, unbiased tone.
6. **Provide comprehensive information** with specific details, examples, and as much relevant context as possible from search results.
7. **Avoid moralizing language.**
`.trim();
return createSearchTool({
...result.authResult,
onSearchResults,
onGetHighlights,
logger,
});
};
continue;
} else if (tool && appTools[tool] && mcpToolPattern.test(tool)) {
requestedTools[tool] = async () =>
createMCPTool({

9
api/models/Agent.js
View file

@ -60,12 +60,17 @@ const loadEphemeralAgent = ({ req, agent_id, endpoint, model_parameters: _m }) =
const { model, ...model_parameters } = _m;
/** @type {Record<string, FunctionTool>} */
const availableTools = req.app.locals.availableTools;
const mcpServers = new Set(req.body.ephemeralAgent?.mcp);
/** @type {TEphemeralAgent | null} */
const ephemeralAgent = req.body.ephemeralAgent;
const mcpServers = new Set(ephemeralAgent?.mcp);
/** @type {string[]} */
const tools = [];
if (req.body.ephemeralAgent?.execute_code === true) {
if (ephemeralAgent?.execute_code === true) {
tools.push(Tools.execute_code);
}
if (ephemeralAgent?.web_search === true) {
tools.push(Tools.web_search);
}
if (mcpServers.size > 0) {
for (const toolName of Object.keys(availableTools)) {

2
api/package.json
View file

@ -48,7 +48,7 @@
"@langchain/google-genai": "^0.2.8",
"@langchain/google-vertexai": "^0.2.8",
"@langchain/textsplitters": "^0.1.0",
"@librechat/agents": "^2.4.317",
"@librechat/agents": "^2.4.35",
"@librechat/data-schemas": "*",
"@waylaidwanderer/fetch-event-source": "^3.0.1",
"axios": "^1.8.2",

54
api/server/controllers/UserController.js
View file

@ -1,4 +1,10 @@
const { FileSources } = require('librechat-data-provider');
const {
Tools,
Constants,
FileSources,
webSearchKeys,
extractWebSearchEnvVars,
} = require('librechat-data-provider');
const {
Balance,
getFiles,
@ -83,7 +89,6 @@ const deleteUserFiles = async (req) => {
const updateUserPluginsController = async (req, res) => {
const { user } = req;
const { pluginKey, action, auth, isEntityTool } = req.body;
let authService;
try {
if (!isEntityTool) {
const userPluginsService = await updateUserPluginsService(user, pluginKey, action);
@ -95,32 +100,55 @@ const updateUserPluginsController = async (req, res) => {
}
}
if (auth) {
const keys = Object.keys(auth);
if (auth == null) {
return res.status(200).send();
}
let keys = Object.keys(auth);
if (keys.length === 0 && pluginKey !== Tools.web_search) {
return res.status(200).send();
}
const values = Object.values(auth);
if (action === 'install' && keys.length > 0) {
/** @type {number} */
let status = 200;
/** @type {string} */
let message;
/** @type {IPluginAuth | Error} */
let authService;
if (pluginKey === Tools.web_search) {
/** @type {TCustomConfig['webSearch']} */
const webSearchConfig = req.app.locals?.webSearch;
keys = extractWebSearchEnvVars({
keys: action === 'install' ? keys : webSearchKeys,
config: webSearchConfig,
});
}
if (action === 'install') {
for (let i = 0; i < keys.length; i++) {
authService = await updateUserPluginAuth(user.id, keys[i], pluginKey, values[i]);
if (authService instanceof Error) {
logger.error('[authService]', authService);
const { status, message } = authService;
res.status(status).send({ message });
({ status, message } = authService);
}
}
}
if (action === 'uninstall' && keys.length > 0) {
} else if (action === 'uninstall') {
for (let i = 0; i < keys.length; i++) {
authService = await deleteUserPluginAuth(user.id, keys[i]);
if (authService instanceof Error) {
logger.error('[authService]', authService);
const { status, message } = authService;
res.status(status).send({ message });
}
({ status, message } = authService);
}
}
}
res.status(200).send();
if (status === 200) {
return res.status(status).send();
}
res.status(status).send({ message });
} catch (err) {
logger.error('[updateUserPluginsController]', err);
return res.status(500).json({ message: 'Something went wrong.' });

24
api/server/controllers/agents/callbacks.js
View file

@ -237,6 +237,30 @@ function createToolEndCallback({ req, res, artifactPromises }) {
return;
}
if (output.artifact[Tools.web_search]) {
artifactPromises.push(
(async () => {
const name = `${output.name}_${output.tool_call_id}_${nanoid()}`;
const attachment = {
name,
type: Tools.web_search,
messageId: metadata.run_id,
toolCallId: output.tool_call_id,
conversationId: metadata.thread_id,
[Tools.web_search]: { ...output.artifact[Tools.web_search] },
};
if (!res.headersSent) {
return attachment;
}
res.write(`event: attachment\ndata: ${JSON.stringify(attachment)}\n\n`);
return attachment;
})().catch((error) => {
logger.error('Error processing artifact content:', error);
return null;
}),
);
}
if (output.artifact.content) {
/** @type {FormattedContent[]} */
const content = output.artifact.content;

5
api/server/controllers/agents/client.js
View file

@ -39,9 +39,6 @@ const BaseClient = require('~/app/clients/BaseClient');
const { logger, sendEvent } = require('~/config');
const { createRun } = require('./run');
/** @typedef {import('@librechat/agents').MessageContentComplex} MessageContentComplex */
/** @typedef {import('@langchain/core/runnables').RunnableConfig} RunnableConfig */
/**
* @param {ServerRequest} req
* @param {Agent} agent
@ -543,7 +540,7 @@ class AgentClient extends BaseClient {
}
async chatCompletion({ payload, abortController = null }) {
/** @type {Partial<RunnableConfig> & { version: 'v1' | 'v2'; run_id?: string; streamMode: string }} */
/** @type {Partial<GraphRunnableConfig>} */
let config;
/** @type {ReturnType<createRun>} */
let run;

34
api/server/controllers/tools.js
View file

@ -6,6 +6,7 @@ const {
Permissions,
ToolCallTypes,
PermissionTypes,
loadWebSearchAuth,
} = require('librechat-data-provider');
const { processFileURL, uploadImageBuffer } = require('~/server/services/Files/process');
const { processCodeOutput } = require('~/server/services/Files/Code/process');
@ -24,6 +25,36 @@ const toolAccessPermType = {
[Tools.execute_code]: PermissionTypes.RUN_CODE,
};
/**
* Verifies web search authentication, ensuring each category has at least
* one fully authenticated service.
*
* @param {ServerRequest} req - The request object
* @param {ServerResponse} res - The response object
* @returns {Promise<void>} A promise that resolves when the function has completed
*/
const verifyWebSearchAuth = async (req, res) => {
try {
const userId = req.user.id;
/** @type {TCustomConfig['webSearch']} */
const webSearchConfig = req.app.locals?.webSearch || {};
const result = await loadWebSearchAuth({
userId,
loadAuthValues,
webSearchConfig,
throwError: false,
});
return res.status(200).json({
authenticated: result.authenticated,
authTypes: result.authTypes,
});
} catch (error) {
console.error('Error in verifyWebSearchAuth:', error);
return res.status(500).json({ message: error.message });
}
};
/**
* @param {ServerRequest} req - The request object, containing information about the HTTP request.
* @param {ServerResponse} res - The response object, used to send back the desired HTTP response.
@ -32,6 +63,9 @@ const toolAccessPermType = {
const verifyToolAuth = async (req, res) => {
try {
const { toolId } = req.params;
if (toolId === Tools.web_search) {
return await verifyWebSearchAuth(req, res);
}
const authFields = fieldsMap[toolId];
if (!authFields) {
res.status(404).json({ message: 'Tool not found' });

20
api/server/routes/config.js
View file

@ -85,6 +85,26 @@ router.get('/', async function (req, res) {
bundlerURL: process.env.SANDPACK_BUNDLER_URL,
staticBundlerURL: process.env.SANDPACK_STATIC_BUNDLER_URL,
};
/** @type {TCustomConfig['webSearch']} */
const webSearchConfig = req.app.locals.webSearch;
if (
webSearchConfig != null &&
(webSearchConfig.searchProvider ||
webSearchConfig.scraperType ||
webSearchConfig.rerankerType)
) {
payload.webSearch = {};
}
if (webSearchConfig?.searchProvider) {
payload.webSearch.searchProvider = webSearchConfig.searchProvider;
}
if (webSearchConfig?.scraperType) {
payload.webSearch.scraperType = webSearchConfig.scraperType;
}
if (webSearchConfig?.rerankerType) {
payload.webSearch.rerankerType = webSearchConfig.rerankerType;
}
if (ldap) {
payload.ldap = ldap;

5
api/server/services/AppService.js
View file

@ -1,9 +1,10 @@
const {
FileSources,
EModelEndpoint,
loadOCRConfig,
processMCPEnv,
EModelEndpoint,
getConfigDefaults,
loadWebSearchConfig,
} = require('librechat-data-provider');
const { checkVariables, checkHealth, checkConfig, checkAzureVariables } = require('./start/checks');
const { azureAssistantsDefaults, assistantsConfigSetup } = require('./start/assistants');
@ -35,6 +36,7 @@ const AppService = async (app) => {
const configDefaults = getConfigDefaults();
const ocr = loadOCRConfig(config.ocr);
const webSearch = loadWebSearchConfig(config.webSearch);
const filteredTools = config.filteredTools;
const includedTools = config.includedTools;
const fileStrategy = config.fileStrategy ?? configDefaults.fileStrategy;
@ -79,6 +81,7 @@ const AppService = async (app) => {
const defaultLocals = {
ocr,
paths,
webSearch,
fileStrategy,
socialLogins,
filteredTools,

12
api/server/services/AppService.spec.js
View file

@ -141,6 +141,14 @@ describe('AppService', () => {
balance: { enabled: true },
filteredTools: undefined,
includedTools: undefined,
webSearch: {
cohereApiKey: '${COHERE_API_KEY}',
firecrawlApiKey: '${FIRECRAWL_API_KEY}',
firecrawlApiUrl: '${FIRECRAWL_API_URL}',
jinaApiKey: '${JINA_API_KEY}',
safeSearch: true,
serperApiKey: '${SERPER_API_KEY}',
},
});
});
@ -537,7 +545,7 @@ describe('AppService updating app.locals and issuing warnings', () => {
const { logger } = require('~/config');
expect(logger.warn).toHaveBeenCalledWith(
expect.stringContaining(
'The \'assistants\' endpoint has both \'supportedIds\' and \'excludedIds\' defined.',
"The 'assistants' endpoint has both 'supportedIds' and 'excludedIds' defined.",
),
);
});
@ -559,7 +567,7 @@ describe('AppService updating app.locals and issuing warnings', () => {
const { logger } = require('~/config');
expect(logger.warn).toHaveBeenCalledWith(
expect.stringContaining(
'The \'assistants\' endpoint has both \'privateAssistants\' and \'supportedIds\' or \'excludedIds\' defined.',
"The 'assistants' endpoint has both 'privateAssistants' and 'supportedIds' or 'excludedIds' defined.",
),
);
});

12
api/server/services/Files/MistralOCR/crud.js
View file

@ -2,7 +2,12 @@
const fs = require('fs');
const path = require('path');
const FormData = require('form-data');
const { FileSources, envVarRegex, extractEnvVariable } = require('librechat-data-provider');
const {
FileSources,
envVarRegex,
extractEnvVariable,
extractVariableName,
} = require('librechat-data-provider');
const { loadAuthValues } = require('~/server/services/Tools/credentials');
const { logger, createAxiosInstance } = require('~/config');
const { logAxiosError } = require('~/utils/axios');
@ -108,11 +113,6 @@ async function performOCR({
});
}
function extractVariableName(str) {
const match = str.match(envVarRegex);
return match ? match[1] : null;
}
/**
* Uploads a file to the Mistral OCR API and processes the OCR result.
*

26
api/server/services/PluginService.js
View file

@ -66,16 +66,26 @@ const getUserPluginAuthValue = async (userId, authField, throwError = true) => {
// }
// };
/**
*
* @async
* @param {string} userId
* @param {string} authField
* @param {string} pluginKey
* @param {string} value
* @returns {Promise<IPluginAuth>}
* @throws {Error}
*/
const updateUserPluginAuth = async (userId, authField, pluginKey, value) => {
try {
const encryptedValue = await encrypt(value);
const pluginAuth = await PluginAuth.findOne({ userId, authField }).lean();
if (pluginAuth) {
const pluginAuth = await PluginAuth.updateOne(
return await PluginAuth.findOneAndUpdate(
{ userId, authField },
{ $set: { value: encryptedValue } },
);
return pluginAuth;
{ new: true, upsert: true },
).lean();
} else {
const newPluginAuth = await new PluginAuth({
userId,
@ -84,7 +94,7 @@ const updateUserPluginAuth = async (userId, authField, pluginKey, value) => {
pluginKey,
});
await newPluginAuth.save();
return newPluginAuth;
return newPluginAuth.toObject();
}
} catch (err) {
logger.error('[updateUserPluginAuth]', err);
@ -92,6 +102,14 @@ const updateUserPluginAuth = async (userId, authField, pluginKey, value) => {
}
};
/**
* @async
* @param {string} userId
* @param {string} authField
* @param {boolean} [all]
* @returns {Promise<import('mongoose').DeleteResult>}
* @throws {Error}
*/
const deleteUserPluginAuth = async (userId, authField, all = false) => {
if (all) {
try {

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

@ -1,8 +1,8 @@
const fs = require('fs');
const path = require('path');
const { zodToJsonSchema } = require('zod-to-json-schema');
const { tool: toolFn, Tool, DynamicStructuredTool } = require('@langchain/core/tools');
const { Calculator } = require('@langchain/community/tools/calculator');
const { tool: toolFn, Tool, DynamicStructuredTool } = require('@langchain/core/tools');
const {
Tools,
ErrorTypes,
@ -29,6 +29,7 @@ const {
toolkits,
} = require('~/app/clients/tools');
const { processFileURL, uploadImageBuffer } = require('~/server/services/Files/process');
const { createOnSearchResults } = require('~/server/services/Tools/search');
const { isActionDomainAllowed } = require('~/server/services/domains');
const { getEndpointsConfig } = require('~/server/services/Config');
const { recordUsage } = require('~/server/services/Threads');
@ -504,11 +505,15 @@ async function loadAgentTools({ req, res, agent, tool_resources, openAIApiKey })
const checkCapability = (capability) => enabledCapabilities.has(capability);
const areToolsEnabled = checkCapability(AgentCapabilities.tools);
let includesWebSearch = false;
const _agentTools = agent.tools?.filter((tool) => {
if (tool === Tools.file_search) {
return checkCapability(AgentCapabilities.file_search);
} else if (tool === Tools.execute_code) {
return checkCapability(AgentCapabilities.execute_code);
} else if (tool === Tools.web_search) {
includesWebSearch = checkCapability(AgentCapabilities.web_search);
return includesWebSearch;
} else if (!areToolsEnabled && !tool.includes(actionDelimiter)) {
return false;
}
@ -518,7 +523,11 @@ async function loadAgentTools({ req, res, agent, tool_resources, openAIApiKey })
if (!_agentTools || _agentTools.length === 0) {
return {};
}
/** @type {ReturnType<createOnSearchResults>} */
let webSearchCallbacks;
if (includesWebSearch) {
webSearchCallbacks = createOnSearchResults(res);
}
const { loadedTools, toolContextMap } = await loadTools({
agent,
functions: true,
@ -532,6 +541,7 @@ async function loadAgentTools({ req, res, agent, tool_resources, openAIApiKey })
uploadImageBuffer,
returnMetadata: true,
fileStrategy: req.app.locals.fileStrategy,
[Tools.web_search]: webSearchCallbacks,
},
});

122
api/server/services/Tools/search.js Normal file
View file

@ -0,0 +1,122 @@
const { nanoid } = require('nanoid');
const { Tools } = require('librechat-data-provider');
const { logger } = require('~/config');
/**
* Creates a function to handle search results and stream them as attachments
* @param {import('http').ServerResponse} res - The HTTP server response object
* @returns {{ onSearchResults: function(SearchResult, GraphRunnableConfig): void; onGetHighlights: function(string): void}} - Function that takes search results and returns or streams an attachment
*/
function createOnSearchResults(res) {
const context = {
sourceMap: new Map(),
searchResultData: undefined,
toolCallId: undefined,
attachmentName: undefined,
messageId: undefined,
conversationId: undefined,
};
/**
* @param {SearchResult} results
* @param {GraphRunnableConfig} runnableConfig
*/
function onSearchResults(results, runnableConfig) {
logger.info(
`[onSearchResults] user: ${runnableConfig.metadata.user_id} | thread_id: ${runnableConfig.metadata.thread_id} | run_id: ${runnableConfig.metadata.run_id}`,
results,
);
if (!results.success) {
logger.error(
`[onSearchResults] user: ${runnableConfig.metadata.user_id} | thread_id: ${runnableConfig.metadata.thread_id} | run_id: ${runnableConfig.metadata.run_id} | error: ${results.error}`,
);
return;
}
const turn = runnableConfig.toolCall?.turn ?? 0;
const data = { turn, ...structuredClone(results.data ?? {}) };
context.searchResultData = data;
// Map sources to links
for (let i = 0; i < data.organic.length; i++) {
const source = data.organic[i];
if (source.link) {
context.sourceMap.set(source.link, {
type: 'organic',
index: i,
turn,
});
}
}
for (let i = 0; i < data.topStories.length; i++) {
const source = data.topStories[i];
if (source.link) {
context.sourceMap.set(source.link, {
type: 'topStories',
index: i,
turn,
});
}
}
context.toolCallId = runnableConfig.toolCall.id;
context.messageId = runnableConfig.metadata.run_id;
context.conversationId = runnableConfig.metadata.thread_id;
context.attachmentName = `${runnableConfig.toolCall.name}_${context.toolCallId}_${nanoid()}`;
const attachment = buildAttachment(context);
if (!res.headersSent) {
return attachment;
}
res.write(`event: attachment\ndata: ${JSON.stringify(attachment)}\n\n`);
}
/**
* @param {string} link
* @returns {void}
*/
function onGetHighlights(link) {
const source = context.sourceMap.get(link);
if (!source) {
return;
}
const { type, index } = source;
const data = context.searchResultData;
if (!data) {
return;
}
if (data[type][index] != null) {
data[type][index].processed = true;
}
const attachment = buildAttachment(context);
res.write(`event: attachment\ndata: ${JSON.stringify(attachment)}\n\n`);
}
return {
onSearchResults,
onGetHighlights,
};
}
/**
* Helper function to build an attachment object
* @param {object} context - The context containing attachment data
* @returns {object} - The attachment object
*/
function buildAttachment(context) {
return {
messageId: context.messageId,
toolCallId: context.toolCallId,
conversationId: context.conversationId,
name: context.attachmentName,
type: Tools.web_search,
[Tools.web_search]: context.searchResultData,
};
}
module.exports = {
createOnSearchResults,
};

9
api/server/services/start/interface.js
View file

@ -38,6 +38,7 @@ async function loadDefaultInterface(config, configDefaults, roleName = SystemRol
agents: interfaceConfig?.agents ?? defaults.agents,
temporaryChat: interfaceConfig?.temporaryChat ?? defaults.temporaryChat,
runCode: interfaceConfig?.runCode ?? defaults.runCode,
webSearch: interfaceConfig?.webSearch ?? defaults.webSearch,
customWelcome: interfaceConfig?.customWelcome ?? defaults.customWelcome,
});
@ -48,6 +49,7 @@ async function loadDefaultInterface(config, configDefaults, roleName = SystemRol
[PermissionTypes.AGENTS]: { [Permissions.USE]: loadedInterface.agents },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: loadedInterface.temporaryChat },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: loadedInterface.runCode },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: loadedInterface.webSearch },
});
await updateAccessPermissions(SystemRoles.ADMIN, {
[PermissionTypes.PROMPTS]: { [Permissions.USE]: loadedInterface.prompts },
@ -56,6 +58,7 @@ async function loadDefaultInterface(config, configDefaults, roleName = SystemRol
[PermissionTypes.AGENTS]: { [Permissions.USE]: loadedInterface.agents },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: loadedInterface.temporaryChat },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: loadedInterface.runCode },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: loadedInterface.webSearch },
});
let i = 0;
@ -74,7 +77,7 @@ async function loadDefaultInterface(config, configDefaults, roleName = SystemRol
// warn about config.modelSpecs.prioritize if true and presets are enabled, that default presets will conflict with prioritizing model specs.
if (config?.modelSpecs?.prioritize && loadedInterface.presets) {
logger.warn(
'Note: Prioritizing model specs can conflict with default presets if a default preset is set. It\'s recommended to disable presets from the interface or disable use of a default preset.',
"Note: Prioritizing model specs can conflict with default presets if a default preset is set. It's recommended to disable presets from the interface or disable use of a default preset.",
);
i === 0 && i++;
}
@ -88,14 +91,14 @@ async function loadDefaultInterface(config, configDefaults, roleName = SystemRol
loadedInterface.parameters)
) {
logger.warn(
'Note: Enforcing model specs can conflict with the interface options: endpointsMenu, modelSelect, presets, and parameters. It\'s recommended to disable these options from the interface or disable enforcing model specs.',
"Note: Enforcing model specs can conflict with the interface options: endpointsMenu, modelSelect, presets, and parameters. It's recommended to disable these options from the interface or disable enforcing model specs.",
);
i === 0 && i++;
}
// warn if enforce is true and prioritize is not, that enforcing model specs without prioritizing them can lead to unexpected behavior.
if (config?.modelSpecs?.enforce && !config?.modelSpecs?.prioritize) {
logger.warn(
'Note: Enforcing model specs without prioritizing them can lead to unexpected behavior. It\'s recommended to enable prioritizing model specs if enforcing them.',
"Note: Enforcing model specs without prioritizing them can lead to unexpected behavior. It's recommended to enable prioritizing model specs if enforcing them.",
);
i === 0 && i++;
}

43
api/server/services/start/interface.spec.js
View file

@ -16,6 +16,7 @@ describe('loadDefaultInterface', () => {
agents: true,
temporaryChat: true,
runCode: true,
webSearch: true,
},
};
const configDefaults = { interface: {} };
@ -29,6 +30,7 @@ describe('loadDefaultInterface', () => {
[PermissionTypes.AGENTS]: { [Permissions.USE]: true },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: true },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: true },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: true },
});
});
@ -41,6 +43,7 @@ describe('loadDefaultInterface', () => {
agents: false,
temporaryChat: false,
runCode: false,
webSearch: false,
},
};
const configDefaults = { interface: {} };
@ -54,6 +57,7 @@ describe('loadDefaultInterface', () => {
[PermissionTypes.AGENTS]: { [Permissions.USE]: false },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: false },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: false },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: false },
});
});
@ -70,6 +74,7 @@ describe('loadDefaultInterface', () => {
[PermissionTypes.AGENTS]: { [Permissions.USE]: undefined },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: undefined },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: undefined },
});
});
@ -82,6 +87,7 @@ describe('loadDefaultInterface', () => {
agents: undefined,
temporaryChat: undefined,
runCode: undefined,
webSearch: undefined,
},
};
const configDefaults = { interface: {} };
@ -95,6 +101,7 @@ describe('loadDefaultInterface', () => {
[PermissionTypes.AGENTS]: { [Permissions.USE]: undefined },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: undefined },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: undefined },
});
});
@ -107,6 +114,7 @@ describe('loadDefaultInterface', () => {
agents: true,
temporaryChat: undefined,
runCode: false,
webSearch: true,
},
};
const configDefaults = { interface: {} };
@ -120,6 +128,7 @@ describe('loadDefaultInterface', () => {
[PermissionTypes.AGENTS]: { [Permissions.USE]: true },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: false },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: true },
});
});
@ -133,6 +142,7 @@ describe('loadDefaultInterface', () => {
agents: true,
temporaryChat: true,
runCode: true,
webSearch: true,
},
};
@ -145,6 +155,7 @@ describe('loadDefaultInterface', () => {
[PermissionTypes.AGENTS]: { [Permissions.USE]: true },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: true },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: true },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: true },
});
});
@ -161,6 +172,7 @@ describe('loadDefaultInterface', () => {
[PermissionTypes.AGENTS]: { [Permissions.USE]: undefined },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: undefined },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: undefined },
});
});
@ -177,6 +189,7 @@ describe('loadDefaultInterface', () => {
[PermissionTypes.AGENTS]: { [Permissions.USE]: undefined },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: undefined },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: undefined },
});
});
@ -193,6 +206,7 @@ describe('loadDefaultInterface', () => {
[PermissionTypes.AGENTS]: { [Permissions.USE]: undefined },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: undefined },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: undefined },
});
});
@ -218,6 +232,7 @@ describe('loadDefaultInterface', () => {
[PermissionTypes.AGENTS]: { [Permissions.USE]: false },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: true },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: false },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: undefined },
});
});
@ -231,6 +246,7 @@ describe('loadDefaultInterface', () => {
agents: undefined,
temporaryChat: undefined,
runCode: undefined,
webSearch: undefined,
},
};
@ -243,6 +259,33 @@ describe('loadDefaultInterface', () => {
[PermissionTypes.AGENTS]: { [Permissions.USE]: undefined },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: undefined },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: undefined },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: undefined },
});
});
it('should call updateAccessPermissions with the correct parameters when WEB_SEARCH is undefined', async () => {
const config = {
interface: {
prompts: true,
bookmarks: false,
multiConvo: true,
agents: false,
temporaryChat: true,
runCode: false,
},
};
const configDefaults = { interface: {} };
await loadDefaultInterface(config, configDefaults);
expect(updateAccessPermissions).toHaveBeenCalledWith(SystemRoles.USER, {
[PermissionTypes.PROMPTS]: { [Permissions.USE]: true },
[PermissionTypes.BOOKMARKS]: { [Permissions.USE]: false },
[PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: true },
[PermissionTypes.AGENTS]: { [Permissions.USE]: false },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: true },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: false },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: undefined },
});
});
});

3
api/server/utils/handleText.js
View file

@ -200,11 +200,12 @@ function generateConfig(key, baseURL, endpoint) {
config.capabilities = [
AgentCapabilities.execute_code,
AgentCapabilities.file_search,
AgentCapabilities.web_search,
AgentCapabilities.artifacts,
AgentCapabilities.actions,
AgentCapabilities.tools,
AgentCapabilities.ocr,
AgentCapabilities.chain,
AgentCapabilities.ocr,
];
}

45
api/typedefs.js
View file

@ -55,6 +55,12 @@
* @memberof typedefs
*/
/**
* @exports MessageContentComplex
* @typedef {import('@librechat/agents').MessageContentComplex} MessageContentComplex
* @memberof typedefs
*/
/**
* @exports EventHandler
* @typedef {import('@librechat/agents').EventHandler} EventHandler
@ -186,6 +192,8 @@
* agent_index: number;
* last_agent_index: number;
* hide_sequential_outputs: boolean;
* version?: 'v1' | 'v2';
* streamMode?: string
* }> & {
* toolCall?: LangChainToolCall & { stepId?: string };
* }} GraphRunnableConfig
@ -473,6 +481,25 @@
* @typedef {import('librechat-data-provider').Agents.MessageContentImageUrl} MessageContentImageUrl
* @memberof typedefs
*/
/** Web Search */
/**
* @exports SearchResult
* @typedef {import('@librechat/agents').SearchResult} SearchResult
* @memberof typedefs
*/
/**
* @exports SearchResultData
* @typedef {import('@librechat/agents').SearchResultData} SearchResultData
* @memberof typedefs
*/
/**
* @exports ValidSource
* @typedef {import('librechat-data-provider').ValidSource} ValidSource
* @memberof typedefs
*/
/** Prompts */
/**
@ -848,6 +875,12 @@
* @memberof typedefs
*/
/**
* @exports IPluginAuth
* @typedef {import('@librechat/data-schemas').IPluginAuth} IPluginAuth
* @memberof typedefs
*/
/**
* @exports ObjectId
* @typedef {import('mongoose').Types.ObjectId} ObjectId
@ -990,6 +1023,18 @@
* @memberof typedefs
*/
/**
* @exports TEphemeralAgent
* @typedef {import('librechat-data-provider').TEphemeralAgent} TEphemeralAgent
* @memberof typedefs
*/
/**
* @exports TWebSearchKeys
* @typedef {import('librechat-data-provider').TWebSearchKeys} TWebSearchKeys
* @memberof typedefs
*/
/**
* @exports AgentToolResources
* @typedef {import('librechat-data-provider').AgentToolResources} AgentToolResources

9
client/src/Providers/SearchContext.tsx Normal file
View file

@ -0,0 +1,9 @@
import { createContext, useContext } from 'react';
import type { SearchResultData } from 'librechat-data-provider';
type SearchContext = {
searchResults?: { [key: string]: SearchResultData };
};
export const SearchContext = createContext<SearchContext>({} as SearchContext);
export const useSearchContext = () => useContext(SearchContext);

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

@ -20,3 +20,4 @@ export * from './ArtifactContext';
export * from './CodeBlockContext';
export * from './ToolCallsMapContext';
export * from './SetConvoContext';
export * from './SearchContext';

1
client/src/common/agents-types.ts
View file

@ -10,6 +10,7 @@ export type TAgentOption = OptionWithIcon &
};
export type TAgentCapabilities = {
[AgentCapabilities.web_search]: boolean;
[AgentCapabilities.file_search]: boolean;
[AgentCapabilities.execute_code]: boolean;
[AgentCapabilities.end_after_tools]?: boolean;

2
client/src/components/Chat/Input/BadgeRow.tsx
View file

@ -15,6 +15,7 @@ import type { BadgeItem } from '~/common';
import { useChatBadges } from '~/hooks';
import { Badge } from '~/components/ui';
import MCPSelect from './MCPSelect';
import WebSearch from './WebSearch';
import store from '~/store';
interface BadgeRowProps {
@ -354,6 +355,7 @@ function BadgeRow({
)}
{showEphemeralBadges === true && (
<>
<WebSearch conversationId={conversationId} />
<CodeInterpreter conversationId={conversationId} />
<MCPSelect conversationId={conversationId} />
</>

8
client/src/components/Chat/Input/CodeInterpreter.tsx
View file

@ -1,5 +1,5 @@
import debounce from 'lodash/debounce';
import React, { memo, useMemo, useCallback } from 'react';
import React, { memo, useMemo, useCallback, useRef } from 'react';
import { useRecoilState } from 'recoil';
import { TerminalSquareIcon } from 'lucide-react';
import {
@ -32,6 +32,7 @@ const storageCondition = (value: unknown, rawCurrentValue?: string | null) => {
};
function CodeInterpreter({ conversationId }: { conversationId?: string | null }) {
const triggerRef = useRef<HTMLInputElement>(null);
const localize = useLocalize();
const key = conversationId ?? Constants.NEW_CONVO;
@ -73,9 +74,10 @@ function CodeInterpreter({ conversationId }: { conversationId?: string | null })
);
const handleChange = useCallback(
(isChecked: boolean) => {
(e: React.ChangeEvent<HTMLInputElement>, isChecked: boolean) => {
if (!isAuthenticated) {
setIsDialogOpen(true);
e.preventDefault();
return;
}
setRunCode(isChecked);
@ -95,6 +97,7 @@ function CodeInterpreter({ conversationId }: { conversationId?: string | null })
return (
<>
<CheckboxButton
ref={triggerRef}
className="max-w-fit"
defaultChecked={runCode}
setValue={debouncedChange}
@ -105,6 +108,7 @@ function CodeInterpreter({ conversationId }: { conversationId?: string | null })
<ApiKeyDialog
onSubmit={onSubmit}
isOpen={isDialogOpen}
triggerRef={triggerRef}
register={methods.register}
onRevoke={handleRevokeApiKey}
onOpenChange={setIsDialogOpen}

123
client/src/components/Chat/Input/WebSearch.tsx Normal file
View file

@ -0,0 +1,123 @@
import React, { memo, useRef, useMemo, useCallback } from 'react';
import { Globe } from 'lucide-react';
import debounce from 'lodash/debounce';
import { useRecoilState } from 'recoil';
import {
Tools,
AuthType,
Constants,
Permissions,
PermissionTypes,
LocalStorageKeys,
} from 'librechat-data-provider';
import ApiKeyDialog from '~/components/SidePanel/Agents/Search/ApiKeyDialog';
import { useLocalize, useHasAccess, useSearchApiKeyForm } from '~/hooks';
import CheckboxButton from '~/components/ui/CheckboxButton';
import useLocalStorage from '~/hooks/useLocalStorageAlt';
import { useVerifyAgentToolAuth } from '~/data-provider';
import { ephemeralAgentByConvoId } from '~/store';
const storageCondition = (value: unknown, rawCurrentValue?: string | null) => {
if (rawCurrentValue) {
try {
const currentValue = rawCurrentValue?.trim() ?? '';
if (currentValue === 'true' && value === false) {
return true;
}
} catch (e) {
console.error(e);
}
}
return value !== undefined && value !== null && value !== '' && value !== false;
};
function WebSearch({ conversationId }: { conversationId?: string | null }) {
const triggerRef = useRef<HTMLInputElement>(null);
const localize = useLocalize();
const key = conversationId ?? Constants.NEW_CONVO;
const canUseWebSearch = useHasAccess({
permissionType: PermissionTypes.WEB_SEARCH,
permission: Permissions.USE,
});
const [ephemeralAgent, setEphemeralAgent] = useRecoilState(ephemeralAgentByConvoId(key));
const isWebSearchToggleEnabled = useMemo(() => {
return ephemeralAgent?.web_search ?? false;
}, [ephemeralAgent?.web_search]);
const { data } = useVerifyAgentToolAuth(
{ toolId: Tools.web_search },
{
retry: 1,
},
);
const authTypes = useMemo(() => data?.authTypes ?? [], [data?.authTypes]);
const isAuthenticated = useMemo(() => data?.authenticated ?? false, [data?.authenticated]);
const { methods, onSubmit, isDialogOpen, setIsDialogOpen, handleRevokeApiKey } =
useSearchApiKeyForm({});
const setValue = useCallback(
(isChecked: boolean) => {
setEphemeralAgent((prev) => ({
...prev,
web_search: isChecked,
}));
},
[setEphemeralAgent],
);
const [webSearch, setWebSearch] = useLocalStorage<boolean>(
`${LocalStorageKeys.LAST_WEB_SEARCH_TOGGLE_}${key}`,
isWebSearchToggleEnabled,
setValue,
storageCondition,
);
const handleChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>, isChecked: boolean) => {
if (!isAuthenticated) {
setIsDialogOpen(true);
e.preventDefault();
return;
}
setWebSearch(isChecked);
},
[setWebSearch, setIsDialogOpen, isAuthenticated],
);
const debouncedChange = useMemo(
() => debounce(handleChange, 50, { leading: true }),
[handleChange],
);
if (!canUseWebSearch) {
return null;
}
return (
<>
<CheckboxButton
ref={triggerRef}
className="max-w-fit"
defaultChecked={webSearch}
setValue={debouncedChange}
label={localize('com_ui_search')}
isCheckedClassName="border-blue-600/40 bg-blue-500/10 hover:bg-blue-700/10"
icon={<Globe className="icon-md" />}
/>
<ApiKeyDialog
onSubmit={onSubmit}
authTypes={authTypes}
isOpen={isDialogOpen}
triggerRef={triggerRef}
register={methods.register}
onRevoke={handleRevokeApiKey}
onOpenChange={setIsDialogOpen}
handleSubmit={methods.handleSubmit}
isToolAuthenticated={isAuthenticated}
/>
</>
);
}
export default memo(WebSearch);

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

@ -2,10 +2,12 @@ import { memo, useMemo, useState } from 'react';
import { useRecoilValue, useRecoilState } from 'recoil';
import { ContentTypes } from 'librechat-data-provider';
import type { TMessageContentParts, TAttachment, Agents } from 'librechat-data-provider';
import { useSearchResultsByTurn } from '~/hooks/Messages/useSearchResultsByTurn';
import { ThinkingButton } from '~/components/Artifacts/Thinking';
import useLocalize from '~/hooks/useLocalize';
import { mapAttachments } from '~/utils/map';
import { MessageContext } from '~/Providers';
import { MessageContext, SearchContext } from '~/Providers';
import Sources from '~/components/Web/Sources';
import { EditTextPart } from './Parts';
import store from '~/store';
import Part from './Part';
@ -42,13 +44,15 @@ const ContentParts = memo(
setSiblingIdx,
}: ContentPartsProps) => {
const localize = useLocalize();
const messageAttachmentsMap = useRecoilValue(store.messageAttachmentsMap);
const [showThinking, setShowThinking] = useRecoilState<boolean>(store.showThinking);
const [isExpanded, setIsExpanded] = useState(showThinking);
const messageAttachmentsMap = useRecoilValue(store.messageAttachmentsMap);
const attachmentMap = useMemo(
() => mapAttachments(attachments ?? messageAttachmentsMap[messageId] ?? []),
const messageAttachments = useMemo(
() => attachments ?? messageAttachmentsMap[messageId] ?? [],
[attachments, messageAttachmentsMap, messageId],
);
const searchResults = useSearchResultsByTurn(messageAttachments);
const attachmentMap = useMemo(() => mapAttachments(messageAttachments), [messageAttachments]);
const hasReasoningParts = useMemo(() => {
const hasThinkPart = content?.some((part) => part?.type === ContentTypes.THINK) ?? false;
@ -98,6 +102,8 @@ const ContentParts = memo(
return (
<>
<SearchContext.Provider value={{ searchResults }}>
<Sources />
{hasReasoningParts && (
<div className="mb-5">
<ThinkingButton
@ -127,9 +133,9 @@ const ContentParts = memo(
key={`provider-${messageId}-${idx}`}
value={{
messageId,
isExpanded,
conversationId,
partIndex: idx,
isExpanded,
nextType: content[idx + 1]?.type,
}}
>
@ -145,6 +151,7 @@ const ContentParts = memo(
</MessageContext.Provider>
);
})}
</SearchContext.Provider>
</>
);
},

23
client/src/components/Chat/Messages/Content/Markdown.tsx
View file

@ -12,13 +12,16 @@ import type { Pluggable } from 'unified';
import {
useToastContext,
ArtifactProvider,
useSearchContext,
CodeBlockProvider,
useCodeBlockContext,
} from '~/Providers';
import { Citation, CompositeCitation, HighlightedText } from '~/components/Web/Citation';
import { Artifact, artifactPlugin } from '~/components/Artifacts/Artifact';
import { langSubset, preprocessLaTeX, handleDoubleClick } from '~/utils';
import CodeBlock from '~/components/Messages/Content/CodeBlock';
import useHasAccess from '~/hooks/Roles/useHasAccess';
import { unicodeCitation } from '~/components/Web';
import { useFileDownload } from '~/data-provider';
import useLocalize from '~/hooks/useLocalize';
import store from '~/store';
@ -172,6 +175,7 @@ type TContentProps = {
};
const Markdown = memo(({ content = '', isLatestMessage }: TContentProps) => {
const { searchResults } = useSearchContext();
const LaTeXParsing = useRecoilValue<boolean>(store.LaTeXParsing);
const isInitializing = content === '';
@ -197,16 +201,22 @@ const Markdown = memo(({ content = '', isLatestMessage }: TContentProps) => {
[],
);
const remarkPlugins: Pluggable[] = useMemo(
() => [
const searchTurns = useMemo(() => Object.keys(searchResults ?? {}).length, [searchResults]);
const remarkPlugins: Pluggable[] = useMemo(() => {
const plugins: Pluggable[] = [
supersub,
remarkGfm,
remarkDirective,
artifactPlugin,
[remarkMath, { singleDollarTextMath: true }],
],
[],
);
];
if (searchTurns > 0) {
plugins.push(unicodeCitation);
}
return plugins;
}, [searchTurns]);
if (isInitializing) {
return (
@ -232,6 +242,9 @@ const Markdown = memo(({ content = '', isLatestMessage }: TContentProps) => {
a,
p,
artifact: Artifact,
citation: Citation,
'highlighted-text': HighlightedText,
'composite-citation': CompositeCitation,
} as {
[nodeType: string]: React.ElementType;
}

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

@ -12,6 +12,7 @@ import { ErrorMessage } from './MessageContent';
import RetrievalCall from './RetrievalCall';
import CodeAnalyze from './CodeAnalyze';
import Container from './Container';
import WebSearch from './WebSearch';
import ToolCall from './ToolCall';
import ImageGen from './ImageGen';
import Image from './Image';
@ -107,6 +108,16 @@ const Part = memo(
attachments={attachments}
/>
);
} else if (isToolCall && toolCall.name === Tools.web_search) {
return (
<WebSearch
output={toolCall.output ?? ''}
initialProgress={toolCall.progress ?? 0.1}
isSubmitting={isSubmitting}
attachments={attachments}
isLast={isLast}
/>
);
} else if (isToolCall) {
return (
<ToolCall

9
client/src/components/Chat/Messages/Content/Parts/Attachment.tsx
View file

@ -1,5 +1,5 @@
import { memo, useState, useEffect } from 'react';
import { imageExtRegex } from 'librechat-data-provider';
import { imageExtRegex, Tools } from 'librechat-data-provider';
import type { TAttachment, TFile, TAttachmentMetadata } from 'librechat-data-provider';
import FileContainer from '~/components/Chat/Input/Files/FileContainer';
import Image from '~/components/Chat/Messages/Content/Image';
@ -7,12 +7,12 @@ import { useAttachmentLink } from './LogLink';
import { cn } from '~/utils';
const FileAttachment = memo(({ attachment }: { attachment: Partial<TAttachment> }) => {
const [isVisible, setIsVisible] = useState(false);
const { handleDownload } = useAttachmentLink({
href: attachment.filepath ?? '',
filename: attachment.filename ?? '',
});
const extension = attachment.filename?.split('.').pop();
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const timer = setTimeout(() => setIsVisible(true), 50);
@ -84,6 +84,9 @@ export default function Attachment({ attachment }: { attachment?: TAttachment })
if (!attachment) {
return null;
}
if (attachment.type === Tools.web_search) {
return null;
}
const { width, height, filepath = null } = attachment as TFile & TAttachmentMetadata;
const isImage =
@ -115,7 +118,7 @@ export function AttachmentGroup({ attachments }: { attachments?: TAttachment[] }
if (isImage) {
imageAttachments.push(attachment);
} else {
} else if (attachment.type !== Tools.web_search) {
fileAttachments.push(attachment);
}
});

91
client/src/components/Chat/Messages/Content/WebSearch.tsx Normal file
View file

@ -0,0 +1,91 @@
import { useMemo } from 'react';
import type { TAttachment } from 'librechat-data-provider';
import { StackedFavicons } from '~/components/Web/Sources';
import { useSearchContext } from '~/Providers';
import ProgressText from './ProgressText';
import { useLocalize } from '~/hooks';
type ProgressKeys =
| 'com_ui_web_searching'
| 'com_ui_web_searching_again'
| 'com_ui_web_search_processing'
| 'com_ui_web_search_reading';
export default function WebSearch({
initialProgress: progress = 0.1,
isSubmitting,
isLast,
output,
}: {
isLast?: boolean;
isSubmitting: boolean;
output?: string | null;
initialProgress: number;
attachments?: TAttachment[];
}) {
const localize = useLocalize();
const { searchResults } = useSearchContext();
const error = typeof output === 'string' && output.toLowerCase().includes('error processing');
const cancelled = (!isSubmitting && progress < 1) || error === true;
const complete = !isLast && progress === 1;
const finalizing = isSubmitting && isLast && progress === 1;
const processedSources = useMemo(() => {
if (complete && !finalizing) {
return [];
}
if (!searchResults) return [];
const values = Object.values(searchResults);
const result = values[values.length - 1];
if (!result) return [];
if (finalizing) {
return [...(result.organic || []), ...(result.topStories || [])];
}
return [...(result.organic || []), ...(result.topStories || [])].filter(
(source) => source.processed === true,
);
}, [searchResults, complete, finalizing]);
const turns = useMemo(() => {
if (!searchResults) return 0;
return Object.values(searchResults).length;
}, [searchResults]);
const clampedProgress = useMemo(() => {
return Math.min(progress, 0.99);
}, [progress]);
const showSources = processedSources.length > 0;
const progressText = useMemo(() => {
let text: ProgressKeys = turns > 1 ? 'com_ui_web_searching_again' : 'com_ui_web_searching';
if (showSources) {
text = 'com_ui_web_search_processing';
}
if (finalizing) {
text = 'com_ui_web_search_reading';
}
return localize(text);
}, [turns, localize, showSources, finalizing]);
if (complete || cancelled) {
return null;
}
return (
<>
<div className="relative my-2.5 flex size-5 shrink-0 items-center gap-2.5">
{showSources && (
<div className="mr-2">
<StackedFavicons sources={processedSources} start={-5} />
</div>
)}
<ProgressText
finishedText=""
hasInput={false}
error={cancelled}
isExpanded={false}
progress={clampedProgress}
inProgressText={progressText}
/>
</div>
</>
);
}

13
client/src/components/SidePanel/Agents/AgentConfig.tsx
View file

@ -13,6 +13,7 @@ import { processAgentOption } from '~/utils';
import Instructions from './Instructions';
import AgentAvatar from './AgentAvatar';
import FileContext from './FileContext';
import SearchForm from './Search/Form';
import { useLocalize } from '~/hooks';
import FileSearch from './FileSearch';
import Artifacts from './Artifacts';
@ -73,6 +74,10 @@ export default function AgentConfig({
() => agentsConfig?.capabilities?.includes(AgentCapabilities.file_search) ?? false,
[agentsConfig],
);
const webSearchEnabled = useMemo(
() => agentsConfig?.capabilities?.includes(AgentCapabilities.web_search) ?? false,
[agentsConfig],
);
const codeEnabled = useMemo(
() => agentsConfig?.capabilities?.includes(AgentCapabilities.execute_code) ?? false,
[agentsConfig],
@ -257,13 +262,19 @@ export default function AgentConfig({
</div>
</button>
</div>
{(codeEnabled || fileSearchEnabled || artifactsEnabled || ocrEnabled) && (
{(codeEnabled ||
fileSearchEnabled ||
artifactsEnabled ||
ocrEnabled ||
webSearchEnabled) && (
<div className="mb-4 flex w-full flex-col items-start gap-3">
<label className="text-token-text-primary block font-medium">
{localize('com_assistants_capabilities')}
</label>
{/* Code Execution */}
{codeEnabled && <CodeForm agent_id={agent_id} files={code_files} />}
{/* Web Search */}
{webSearchEnabled && <SearchForm />}
{/* File Context (OCR) */}
{ocrEnabled && <FileContext agent_id={agent_id} files={context_files} />}
{/* Artifacts */}

3
client/src/components/SidePanel/Agents/AgentPanel.tsx
View file

@ -162,6 +162,9 @@ export default function AgentPanel({
if (data.file_search === true) {
tools.push(Tools.file_search);
}
if (data.web_search === true) {
tools.push(Tools.web_search);
}
const {
name,

1
client/src/components/SidePanel/Agents/AgentSelect.tsx
View file

@ -52,6 +52,7 @@ export default function AgentSelect({
};
const capabilities: TAgentCapabilities = {
[AgentCapabilities.web_search]: false,
[AgentCapabilities.file_search]: false,
[AgentCapabilities.execute_code]: false,
[AgentCapabilities.end_after_tools]: false,

5
client/src/components/SidePanel/Agents/Code/ApiKeyDialog.tsx
View file

@ -3,6 +3,7 @@ import type { ApiKeyFormData } from '~/common';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { Input, Button, OGDialog } from '~/components/ui';
import { useLocalize } from '~/hooks';
import type { RefObject } from 'react';
export default function ApiKeyDialog({
isOpen,
@ -13,6 +14,7 @@ export default function ApiKeyDialog({
isToolAuthenticated,
register,
handleSubmit,
triggerRef,
}: {
isOpen: boolean;
onOpenChange: (open: boolean) => void;
@ -22,6 +24,7 @@ export default function ApiKeyDialog({
isToolAuthenticated: boolean;
register: UseFormRegister<ApiKeyFormData>;
handleSubmit: UseFormHandleSubmit<ApiKeyFormData>;
triggerRef?: RefObject<HTMLInputElement>;
}) {
const localize = useLocalize();
const languageIcons = [
@ -38,7 +41,7 @@ export default function ApiKeyDialog({
];
return (
<OGDialog open={isOpen} onOpenChange={onOpenChange}>
<OGDialog open={isOpen} onOpenChange={onOpenChange} triggerRef={triggerRef}>
<OGDialogTemplate
className="w-11/12 sm:w-[450px]"
title=""

121
client/src/components/SidePanel/Agents/Search/Action.tsx Normal file
View file

@ -0,0 +1,121 @@
import { KeyRoundIcon } from 'lucide-react';
import { AuthType, AgentCapabilities } from 'librechat-data-provider';
import { useFormContext, Controller, useWatch } from 'react-hook-form';
import type { AgentForm } from '~/common';
import {
Checkbox,
HoverCard,
HoverCardContent,
HoverCardPortal,
HoverCardTrigger,
} from '~/components/ui';
import { useLocalize, useSearchApiKeyForm } from '~/hooks';
import { CircleHelpIcon } from '~/components/svg';
import ApiKeyDialog from './ApiKeyDialog';
import { ESide } from '~/common';
export default function Action({
authTypes = [],
isToolAuthenticated = false,
}: {
authTypes?: [string, AuthType][];
isToolAuthenticated?: boolean;
}) {
const localize = useLocalize();
const methods = useFormContext<AgentForm>();
const { control, setValue, getValues } = methods;
const {
onSubmit,
isDialogOpen,
setIsDialogOpen,
handleRevokeApiKey,
methods: keyFormMethods,
} = useSearchApiKeyForm({
onSubmit: () => {
setValue(AgentCapabilities.web_search, true, { shouldDirty: true });
},
onRevoke: () => {
setValue(AgentCapabilities.web_search, false, { shouldDirty: true });
},
});
const webSearchIsEnabled = useWatch({ control, name: AgentCapabilities.web_search });
const isUserProvided = authTypes?.some(([, authType]) => authType === AuthType.USER_PROVIDED);
const handleCheckboxChange = (checked: boolean) => {
if (isToolAuthenticated) {
setValue(AgentCapabilities.web_search, checked, { shouldDirty: true });
} else if (webSearchIsEnabled) {
setValue(AgentCapabilities.web_search, false, { shouldDirty: true });
} else {
setIsDialogOpen(true);
}
};
return (
<>
<HoverCard openDelay={50}>
<div className="flex items-center">
<Controller
name={AgentCapabilities.web_search}
control={control}
render={({ field }) => (
<Checkbox
{...field}
checked={
webSearchIsEnabled ? webSearchIsEnabled : isToolAuthenticated && field.value
}
onCheckedChange={handleCheckboxChange}
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
value={field.value.toString()}
disabled={webSearchIsEnabled ? false : !isToolAuthenticated}
/>
)}
/>
<button
type="button"
className="flex items-center space-x-2"
onClick={() => {
const value = !getValues(AgentCapabilities.web_search);
handleCheckboxChange(value);
}}
>
<label
className="form-check-label text-token-text-primary w-full cursor-pointer"
htmlFor={AgentCapabilities.web_search}
>
{localize('com_ui_web_search')}
</label>
</button>
<div className="ml-2 flex gap-2">
{isUserProvided && (isToolAuthenticated || webSearchIsEnabled) && (
<button type="button" onClick={() => setIsDialogOpen(true)}>
<KeyRoundIcon className="h-5 w-5 text-text-primary" />
</button>
)}
<HoverCardTrigger>
<CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
</HoverCardTrigger>
</div>
<HoverCardPortal>
<HoverCardContent side={ESide.Top} className="w-80">
<div className="space-y-2">
<p className="text-sm text-text-secondary">{localize('com_agents_search_info')}</p>
</div>
</HoverCardContent>
</HoverCardPortal>
</div>
</HoverCard>
<ApiKeyDialog
onSubmit={onSubmit}
authTypes={authTypes}
isOpen={isDialogOpen}
onRevoke={handleRevokeApiKey}
onOpenChange={setIsDialogOpen}
register={keyFormMethods.register}
isToolAuthenticated={isToolAuthenticated}
handleSubmit={keyFormMethods.handleSubmit}
/>
</>
);
}

148
client/src/components/SidePanel/Agents/Search/ApiKeyDialog.test.tsx Normal file
View file

@ -0,0 +1,148 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import ApiKeyDialog from './ApiKeyDialog';
import { AuthType, SearchCategories, RerankerTypes } from 'librechat-data-provider';
import { useGetStartupConfig } from '~/data-provider';
// Mock useLocalize to just return the key
jest.mock('~/hooks', () => ({
useLocalize: () => (key: string) => key,
}));
jest.mock('~/data-provider', () => ({
useGetStartupConfig: jest.fn(),
}));
const mockRegister = (name: string) => ({
onChange: jest.fn(),
onBlur: jest.fn(),
ref: jest.fn(),
name,
});
const defaultProps = {
isOpen: true,
onOpenChange: jest.fn(),
onSubmit: jest.fn(),
onRevoke: jest.fn(),
authTypes: [
[SearchCategories.PROVIDERS, AuthType.USER_PROVIDED] as [string, AuthType],
[SearchCategories.SCRAPERS, AuthType.USER_PROVIDED] as [string, AuthType],
[SearchCategories.RERANKERS, AuthType.USER_PROVIDED] as [string, AuthType],
],
isToolAuthenticated: false,
register: mockRegister as any,
handleSubmit: (fn: any) => (e: any) => fn(e),
};
describe('ApiKeyDialog', () => {
const mockUseGetStartupConfig = useGetStartupConfig as jest.Mock;
afterEach(() => jest.clearAllMocks());
it('shows all dropdowns and both reranker fields when no config is set', () => {
mockUseGetStartupConfig.mockReturnValue({ data: {} });
render(<ApiKeyDialog {...defaultProps} />);
// Provider dropdown button
expect(
screen.getByRole('button', { name: 'com_ui_web_search_provider_serper' }),
).toBeInTheDocument();
// Scraper dropdown button
expect(
screen.getByRole('button', { name: 'com_ui_web_search_scraper_firecrawl' }),
).toBeInTheDocument();
// Reranker dropdown button
expect(
screen.getByRole('button', { name: 'com_ui_web_search_reranker_jina' }),
).toBeInTheDocument();
// Reranker fields (default is Jina)
expect(screen.getByPlaceholderText('com_ui_web_search_jina_key')).toBeInTheDocument();
// Switch to Cohere
fireEvent.click(screen.getByText('com_ui_web_search_reranker_cohere'));
expect(screen.getByPlaceholderText('com_ui_web_search_cohere_key')).toBeInTheDocument();
});
it('shows static text for provider and only provider input if provider is set', () => {
mockUseGetStartupConfig.mockReturnValue({ data: { webSearch: { searchProvider: 'serper' } } });
render(<ApiKeyDialog {...defaultProps} />);
expect(screen.getByText('com_ui_web_search_provider_serper')).toBeInTheDocument();
// Should not find a dropdown button for provider
expect(screen.queryByRole('button', { name: /provider/i })).not.toBeInTheDocument();
});
it('shows only Jina reranker field if rerankerType is set to jina', () => {
mockUseGetStartupConfig.mockReturnValue({
data: { webSearch: { rerankerType: RerankerTypes.JINA } },
});
render(<ApiKeyDialog {...defaultProps} />);
expect(screen.getByPlaceholderText('com_ui_web_search_jina_key')).toBeInTheDocument();
expect(screen.queryByPlaceholderText('com_ui_web_search_cohere_key')).not.toBeInTheDocument();
});
it('shows only Cohere reranker field if rerankerType is set to cohere', () => {
mockUseGetStartupConfig.mockReturnValue({
data: { webSearch: { rerankerType: RerankerTypes.COHERE } },
});
render(<ApiKeyDialog {...defaultProps} />);
expect(screen.getByPlaceholderText('com_ui_web_search_cohere_key')).toBeInTheDocument();
expect(screen.queryByPlaceholderText('com_ui_web_search_jina_key')).not.toBeInTheDocument();
});
it('shows documentation link for the visible reranker', () => {
mockUseGetStartupConfig.mockReturnValue({ data: {} });
render(<ApiKeyDialog {...defaultProps} />);
// Default is Jina
expect(screen.getByText('com_ui_web_search_reranker_jina_key')).toBeInTheDocument();
// Switch to Cohere
fireEvent.click(screen.getByText('com_ui_web_search_reranker_cohere'));
expect(screen.getByText('com_ui_web_search_reranker_cohere_key')).toBeInTheDocument();
});
it('does not render provider section if SYSTEM_DEFINED', () => {
mockUseGetStartupConfig.mockReturnValue({ data: {} });
const props = {
...defaultProps,
authTypes: [
[SearchCategories.PROVIDERS, AuthType.SYSTEM_DEFINED],
[SearchCategories.SCRAPERS, AuthType.USER_PROVIDED],
[SearchCategories.RERANKERS, AuthType.USER_PROVIDED],
] as [string, AuthType][],
};
render(<ApiKeyDialog {...props} />);
expect(screen.queryByText('com_ui_web_search_provider')).not.toBeInTheDocument();
expect(screen.getByText('com_ui_web_search_scraper')).toBeInTheDocument();
expect(screen.getByText('com_ui_web_search_reranker')).toBeInTheDocument();
});
it('does not render scraper section if SYSTEM_DEFINED', () => {
mockUseGetStartupConfig.mockReturnValue({ data: {} });
const props = {
...defaultProps,
authTypes: [
[SearchCategories.PROVIDERS, AuthType.USER_PROVIDED],
[SearchCategories.SCRAPERS, AuthType.SYSTEM_DEFINED],
[SearchCategories.RERANKERS, AuthType.USER_PROVIDED],
] as [string, AuthType][],
};
render(<ApiKeyDialog {...props} />);
expect(screen.getByText('com_ui_web_search_provider')).toBeInTheDocument();
expect(screen.queryByText('com_ui_web_search_scraper')).not.toBeInTheDocument();
expect(screen.getByText('com_ui_web_search_reranker')).toBeInTheDocument();
});
it('does not render reranker section if SYSTEM_DEFINED', () => {
mockUseGetStartupConfig.mockReturnValue({ data: {} });
const props = {
...defaultProps,
authTypes: [
[SearchCategories.PROVIDERS, AuthType.USER_PROVIDED],
[SearchCategories.SCRAPERS, AuthType.USER_PROVIDED],
[SearchCategories.RERANKERS, AuthType.SYSTEM_DEFINED],
] as [string, AuthType][],
};
render(<ApiKeyDialog {...props} />);
expect(screen.getByText('com_ui_web_search_provider')).toBeInTheDocument();
expect(screen.getByText('com_ui_web_search_scraper')).toBeInTheDocument();
expect(screen.queryByText('com_ui_web_search_reranker')).not.toBeInTheDocument();
});
});

361
client/src/components/SidePanel/Agents/Search/ApiKeyDialog.tsx Normal file
View file

@ -0,0 +1,361 @@
import { useState } from 'react';
import { ChevronDown } from 'lucide-react';
import * as Menu from '@ariakit/react/menu';
import { AuthType, SearchCategories, RerankerTypes } from 'librechat-data-provider';
import type { UseFormRegister, UseFormHandleSubmit } from 'react-hook-form';
import type { SearchApiKeyFormData } from '~/hooks/Plugins/useAuthSearchTool';
import type { MenuItemProps } from '~/common';
import { Input, Button, OGDialog, Label } from '~/components/ui';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import DropdownPopup from '~/components/ui/DropdownPopup';
import { useGetStartupConfig } from '~/data-provider';
import { useLocalize } from '~/hooks';
export default function ApiKeyDialog({
isOpen,
onSubmit,
onRevoke,
onOpenChange,
authTypes,
isToolAuthenticated,
register,
handleSubmit,
triggerRef,
}: {
isOpen: boolean;
onOpenChange: (open: boolean) => void;
onSubmit: (data: SearchApiKeyFormData) => void;
onRevoke: () => void;
authTypes: [string, AuthType][];
isToolAuthenticated: boolean;
register: UseFormRegister<SearchApiKeyFormData>;
handleSubmit: UseFormHandleSubmit<SearchApiKeyFormData>;
triggerRef?: React.RefObject<HTMLInputElement>;
}) {
const localize = useLocalize();
const { data: config } = useGetStartupConfig();
const [selectedReranker, setSelectedReranker] = useState<
RerankerTypes.JINA | RerankerTypes.COHERE
>(
config?.webSearch?.rerankerType === RerankerTypes.COHERE
? RerankerTypes.COHERE
: RerankerTypes.JINA,
);
const [providerDropdownOpen, setProviderDropdownOpen] = useState(false);
const [scraperDropdownOpen, setScraperDropdownOpen] = useState(false);
const [rerankerDropdownOpen, setRerankerDropdownOpen] = useState(false);
const providerItems: MenuItemProps[] = [
{
label: localize('com_ui_web_search_provider_serper'),
onClick: () => {},
},
];
const scraperItems: MenuItemProps[] = [
{
label: localize('com_ui_web_search_scraper_firecrawl'),
onClick: () => {},
},
];
const rerankerItems: MenuItemProps[] = [
{
label: localize('com_ui_web_search_reranker_jina'),
onClick: () => setSelectedReranker(RerankerTypes.JINA),
},
{
label: localize('com_ui_web_search_reranker_cohere'),
onClick: () => setSelectedReranker(RerankerTypes.COHERE),
},
];
const showProviderDropdown = !config?.webSearch?.searchProvider;
const showScraperDropdown = !config?.webSearch?.scraperType;
const showRerankerDropdown = !config?.webSearch?.rerankerType;
// Determine which categories are SYSTEM_DEFINED
const providerAuthType = authTypes.find(([cat]) => cat === SearchCategories.PROVIDERS)?.[1];
const scraperAuthType = authTypes.find(([cat]) => cat === SearchCategories.SCRAPERS)?.[1];
const rerankerAuthType = authTypes.find(([cat]) => cat === SearchCategories.RERANKERS)?.[1];
function renderRerankerInput() {
if (config?.webSearch?.rerankerType === RerankerTypes.JINA) {
return (
<>
<Input
type="password"
placeholder={localize('com_ui_web_search_jina_key')}
autoComplete="one-time-code"
readOnly={true}
onFocus={(e) => (e.target.readOnly = false)}
{...register('jinaApiKey')}
/>
<div className="mt-1 text-xs text-text-secondary">
<a
href="https://jina.ai/api-dashboard/"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
>
{localize('com_ui_web_search_reranker_jina_key')}
</a>
</div>
</>
);
}
if (config?.webSearch?.rerankerType === RerankerTypes.COHERE) {
return (
<>
<Input
type="password"
placeholder={localize('com_ui_web_search_cohere_key')}
autoComplete="one-time-code"
readOnly={true}
onFocus={(e) => (e.target.readOnly = false)}
{...register('cohereApiKey')}
/>
<div className="mt-1 text-xs text-text-secondary">
<a
href="https://dashboard.cohere.com/welcome/login"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
>
{localize('com_ui_web_search_reranker_cohere_key')}
</a>
</div>
</>
);
}
if (!config?.webSearch?.rerankerType && selectedReranker === RerankerTypes.JINA) {
return (
<>
<Input
type="password"
placeholder={localize('com_ui_web_search_jina_key')}
autoComplete="one-time-code"
readOnly={true}
onFocus={(e) => (e.target.readOnly = false)}
{...register('jinaApiKey')}
/>
<div className="mt-1 text-xs text-text-secondary">
<a
href="https://jina.ai/api-dashboard/"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
>
{localize('com_ui_web_search_reranker_jina_key')}
</a>
</div>
</>
);
}
if (!config?.webSearch?.rerankerType && selectedReranker === RerankerTypes.COHERE) {
return (
<>
<Input
type="password"
placeholder={localize('com_ui_web_search_cohere_key')}
autoComplete="one-time-code"
readOnly={true}
onFocus={(e) => (e.target.readOnly = false)}
{...register('cohereApiKey')}
/>
<div className="mt-1 text-xs text-text-secondary">
<a
href="https://dashboard.cohere.com/welcome/login"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
>
{localize('com_ui_web_search_reranker_cohere_key')}
</a>
</div>
</>
);
}
return null;
}
return (
<OGDialog open={isOpen} onOpenChange={onOpenChange} triggerRef={triggerRef}>
<OGDialogTemplate
className="w-11/12 sm:w-[500px]"
title=""
main={
<>
<div className="mb-4 text-center font-medium">{localize('com_ui_web_search')}</div>
<div className="mb-4 text-center text-sm">
{localize('com_ui_web_search_api_subtitle')}
</div>
<form onSubmit={handleSubmit(onSubmit)}>
{/* Search Provider Section */}
{providerAuthType !== AuthType.SYSTEM_DEFINED && (
<div className="mb-6">
<div className="mb-2 flex items-center justify-between">
<Label className="text-md w-fit font-medium">
{localize('com_ui_web_search_provider')}
</Label>
{showProviderDropdown ? (
<DropdownPopup
menuId="search-provider-dropdown"
items={providerItems}
isOpen={providerDropdownOpen}
setIsOpen={setProviderDropdownOpen}
trigger={
<Menu.MenuButton
onClick={() => setProviderDropdownOpen(!providerDropdownOpen)}
className="flex items-center rounded-md border border-border-light px-3 py-1 text-sm text-text-secondary"
>
{localize('com_ui_web_search_provider_serper')}
<ChevronDown className="ml-1 h-4 w-4" />
</Menu.MenuButton>
}
/>
) : (
<div className="text-sm text-text-secondary">
{localize('com_ui_web_search_provider_serper')}
</div>
)}
</div>
<Input
type="password"
placeholder={`${localize('com_ui_enter_api_key')}`}
autoComplete="one-time-code"
readOnly={true}
onFocus={(e) => (e.target.readOnly = false)}
{...register('serperApiKey', { required: true })}
/>
<div className="mt-1 text-xs text-text-secondary">
<a
href="https://serper.dev/api-key"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
>
{localize('com_ui_web_search_provider_serper_key')}
</a>
</div>
</div>
)}
{/* Scraper Section */}
{scraperAuthType !== AuthType.SYSTEM_DEFINED && (
<div className="mb-6">
<div className="mb-2 flex items-center justify-between">
<Label className="text-md w-fit font-medium">
{localize('com_ui_web_search_scraper')}
</Label>
{showScraperDropdown ? (
<DropdownPopup
menuId="scraper-dropdown"
items={scraperItems}
isOpen={scraperDropdownOpen}
setIsOpen={setScraperDropdownOpen}
trigger={
<Menu.MenuButton
onClick={() => setScraperDropdownOpen(!scraperDropdownOpen)}
className="flex items-center rounded-md border border-border-light px-3 py-1 text-sm text-text-secondary"
>
{localize('com_ui_web_search_scraper_firecrawl')}
<ChevronDown className="ml-1 h-4 w-4" />
</Menu.MenuButton>
}
/>
) : (
<div className="text-sm text-text-secondary">
{localize('com_ui_web_search_scraper_firecrawl')}
</div>
)}
</div>
<Input
type="password"
placeholder={`${localize('com_ui_enter_api_key')}`}
autoComplete="one-time-code"
readOnly={true}
onFocus={(e) => (e.target.readOnly = false)}
className="mb-2"
{...register('firecrawlApiKey')}
/>
<Input
type="text"
placeholder={localize('com_ui_web_search_firecrawl_url')}
className="mb-1"
{...register('firecrawlApiUrl')}
/>
<div className="mt-1 text-xs text-text-secondary">
<a
href="https://docs.firecrawl.dev/introduction#api-key"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
>
{localize('com_ui_web_search_scraper_firecrawl_key')}
</a>
</div>
</div>
)}
{/* Reranker Section */}
{rerankerAuthType !== AuthType.SYSTEM_DEFINED && (
<div className="mb-6">
<div className="mb-2 flex items-center justify-between">
<Label className="text-md w-fit font-medium">
{localize('com_ui_web_search_reranker')}
</Label>
{showRerankerDropdown && (
<DropdownPopup
menuId="reranker-dropdown"
isOpen={rerankerDropdownOpen}
setIsOpen={setRerankerDropdownOpen}
items={rerankerItems}
trigger={
<Menu.MenuButton
onClick={() => setRerankerDropdownOpen(!rerankerDropdownOpen)}
className="flex items-center rounded-md border border-border-light px-3 py-1 text-sm text-text-secondary"
>
{selectedReranker === RerankerTypes.JINA
? localize('com_ui_web_search_reranker_jina')
: localize('com_ui_web_search_reranker_cohere')}
<ChevronDown className="ml-1 h-4 w-4" />
</Menu.MenuButton>
}
/>
)}
{!showRerankerDropdown && (
<div className="text-sm text-text-secondary">
{config?.webSearch?.rerankerType === RerankerTypes.COHERE
? localize('com_ui_web_search_reranker_cohere')
: localize('com_ui_web_search_reranker_jina')}
</div>
)}
</div>
{renderRerankerInput()}
</div>
)}
</form>
</>
}
selection={{
selectHandler: handleSubmit(onSubmit),
selectClasses: 'bg-green-500 hover:bg-green-600 text-white',
selectText: localize('com_ui_save'),
}}
buttons={
isToolAuthenticated && (
<Button
onClick={onRevoke}
className="bg-destructive text-white transition-all duration-200 hover:bg-destructive/80"
>
{localize('com_ui_revoke')}
</Button>
)
}
showCancelButton={true}
/>
</OGDialog>
);
}

31
client/src/components/SidePanel/Agents/Search/Form.tsx Normal file
View file

@ -0,0 +1,31 @@
import { Tools } from 'librechat-data-provider';
import { useVerifyAgentToolAuth } from '~/data-provider';
import { useLocalize } from '~/hooks';
import Action from './Action';
export default function SearchForm() {
const localize = useLocalize();
const { data } = useVerifyAgentToolAuth(
{ toolId: Tools.web_search },
{
retry: 1,
},
);
return (
<div className="w-full">
<div className="mb-1.5 flex items-center gap-2">
<div className="flex flex-row items-center gap-1">
<div className="flex items-center gap-1">
<span className="text-token-text-primary block font-medium">
{localize('com_ui_web_search')}
</span>
</div>
</div>
</div>
<div className="flex flex-col items-start gap-2">
<Action authTypes={data?.authTypes} isToolAuthenticated={data?.authenticated} />
</div>
</div>
);
}

168
client/src/components/Web/Citation.tsx Normal file
View file

@ -0,0 +1,168 @@
import { memo, useState, useContext } from 'react';
import type { CitationProps } from './types';
import { SourceHovercard, FaviconImage, getCleanDomain } from '~/components/Web/SourceHovercard';
import { CitationContext, useCitation, useCompositeCitations } from './Context';
import { useLocalize } from '~/hooks';
interface CompositeCitationProps {
citationId?: string;
node?: {
properties?: CitationProps;
};
}
export function CompositeCitation(props: CompositeCitationProps) {
const localize = useLocalize();
const { citations, citationId } = props.node?.properties ?? ({} as CitationProps);
const { setHoveredCitationId } = useContext(CitationContext);
const [currentPage, setCurrentPage] = useState(0);
const sources = useCompositeCitations(citations || []);
if (!sources || sources.length === 0) return null;
const totalPages = sources.length;
const getCitationLabel = () => {
if (!sources || sources.length === 0) return localize('com_citation_source');
const firstSource = sources[0];
const remainingCount = sources.length - 1;
const attribution =
firstSource.attribution ||
firstSource.title ||
getCleanDomain(firstSource.link || '') ||
localize('com_citation_source');
return remainingCount > 0 ? `${attribution} +${remainingCount}` : attribution;
};
const handlePrevPage = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (currentPage > 0) {
setCurrentPage(currentPage - 1);
}
};
const handleNextPage = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (currentPage < totalPages - 1) {
setCurrentPage(currentPage + 1);
}
};
const currentSource = sources?.[currentPage];
return (
<SourceHovercard
source={currentSource}
label={getCitationLabel()}
onMouseEnter={() => setHoveredCitationId(citationId || null)}
onMouseLeave={() => setHoveredCitationId(null)}
>
{totalPages > 1 && (
<span className="mb-2 flex items-center justify-between border-b border-border-heavy pb-2">
<span className="flex gap-2">
<button
onClick={handlePrevPage}
disabled={currentPage === 0}
style={{ opacity: currentPage === 0 ? 0.5 : 1 }}
className="flex cursor-pointer items-center justify-center border-none bg-transparent p-0 text-base"
>
←
</button>
<button
onClick={handleNextPage}
disabled={currentPage === totalPages - 1}
style={{ opacity: currentPage === totalPages - 1 ? 0.5 : 1 }}
className="flex cursor-pointer items-center justify-center border-none bg-transparent p-0 text-base"
>
→
</button>
</span>
<span className="text-xs text-text-tertiary">
{currentPage + 1}/{totalPages}
</span>
</span>
)}
<span className="mb-2 flex items-center">
<FaviconImage domain={getCleanDomain(currentSource.link || '')} className="mr-2" />
<a
href={currentSource.link}
target="_blank"
rel="noopener noreferrer"
className="line-clamp-2 cursor-pointer overflow-hidden text-sm font-bold text-[#0066cc] hover:underline dark:text-blue-400 md:line-clamp-3"
>
{currentSource.attribution}
</a>
</span>
<h4 className="mb-1.5 mt-0 text-xs text-text-primary md:text-sm">{currentSource.title}</h4>
<p className="my-2 text-ellipsis break-all text-xs text-text-secondary md:text-sm">
{currentSource.snippet}
</p>
</SourceHovercard>
);
}
interface CitationComponentProps {
citationId: string;
citationType: 'span' | 'standalone' | 'composite' | 'group' | 'navlist';
node?: {
properties?: CitationProps;
};
}
export function Citation(props: CitationComponentProps) {
const localize = useLocalize();
const { citation, citationId } = props.node?.properties ?? {};
const { setHoveredCitationId } = useContext(CitationContext);
const refData = useCitation({
turn: citation?.turn || 0,
refType: citation?.refType,
index: citation?.index || 0,
});
if (!refData) return null;
const getCitationLabel = () => {
return (
refData.attribution ||
refData.title ||
getCleanDomain(refData.link || '') ||
localize('com_citation_source')
);
};
return (
<SourceHovercard
source={refData}
label={getCitationLabel()}
onMouseEnter={() => setHoveredCitationId(citationId || null)}
onMouseLeave={() => setHoveredCitationId(null)}
/>
);
}
export interface HighlightedTextProps {
children: React.ReactNode;
citationId?: string;
}
export function useHighlightState(citationId: string | undefined) {
const { hoveredCitationId } = useContext(CitationContext);
return citationId && hoveredCitationId === citationId;
}
export const HighlightedText = memo(function HighlightedText({
children,
citationId,
}: HighlightedTextProps) {
const isHighlighted = useHighlightState(citationId);
return (
<span
className={`rounded px-0 py-0.5 transition-colors ${isHighlighted ? 'bg-amber-300/20' : ''}`}
>
{children}
</span>
);
});

105
client/src/components/Web/Context.tsx Normal file
View file

@ -0,0 +1,105 @@
import { createContext, useContext } from 'react';
import type { SearchRefType, ValidSource, ResultReference } from 'librechat-data-provider';
import type * as t from './types';
import { useSearchContext } from '~/Providers';
export interface CitationContextType {
hoveredCitationId: string | null;
setHoveredCitationId: (id: string | null) => void;
}
export const CitationContext = createContext<CitationContextType>({
hoveredCitationId: null,
setHoveredCitationId: () => {},
});
export function useHighlightState(citationId: string | undefined) {
const { hoveredCitationId } = useContext(CitationContext);
return citationId && hoveredCitationId === citationId;
}
export type CitationSource = (ValidSource | ResultReference) & {
turn: number;
refType: string | SearchRefType;
index: number;
};
const refTypeMap: Record<string | SearchRefType, string> = {
search: 'organic',
ref: 'references',
news: 'topStories',
};
export function useCitation({
turn,
index,
refType: _refType,
}: {
turn: number;
index: number;
refType?: SearchRefType | string;
}): (t.Citation & t.Reference) | undefined {
const { searchResults } = useSearchContext();
if (!_refType) {
return undefined;
}
const refType = refTypeMap[_refType.toLowerCase()]
? refTypeMap[_refType.toLowerCase()]
: _refType;
if (!searchResults || !searchResults[turn] || !searchResults[turn][refType]) {
return undefined;
}
const source: CitationSource = searchResults[turn][refType][index];
if (!source) {
return undefined;
}
return {
...source,
turn,
refType: _refType.toLowerCase(),
index,
link: source.link ?? '',
title: source.title ?? '',
snippet: source['snippet'] ?? '',
attribution: source.attribution ?? '',
};
}
export function useCompositeCitations(
citations: Array<{ turn: number; refType: SearchRefType | string; index: number }>,
): Array<t.Citation & t.Reference> {
const { searchResults } = useSearchContext();
const result: Array<t.Citation & t.Reference> = [];
for (const { turn, refType: _refType, index } of citations) {
const refType = refTypeMap[_refType.toLowerCase()]
? refTypeMap[_refType.toLowerCase()]
: _refType;
if (!searchResults || !searchResults[turn] || !searchResults[turn][refType]) {
continue;
}
const source: CitationSource = searchResults[turn][refType][index];
if (!source) {
continue;
}
result.push({
...source,
turn,
refType: _refType.toLowerCase(),
index,
link: source.link ?? '',
title: source.title ?? '',
snippet: source['snippet'] ?? '',
attribution: source.attribution ?? '',
});
}
return result;
}

113
client/src/components/Web/SourceHovercard.tsx Normal file
View file

@ -0,0 +1,113 @@
import React, { ReactNode } from 'react';
import * as Ariakit from '@ariakit/react';
import { ChevronDown } from 'lucide-react';
import { VisuallyHidden } from '@ariakit/react';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
export interface SourceData {
link: string;
title?: string;
attribution?: string;
snippet?: string;
}
interface SourceHovercardProps {
source: SourceData;
label: string;
onMouseEnter?: () => void;
onMouseLeave?: () => void;
children?: ReactNode;
}
/** Helper to get domain favicon */
function getFaviconUrl(domain: string) {
return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
}
/** Helper to get clean domain name */
export function getCleanDomain(url: string) {
const domain = url.replace(/(^\w+:|^)\/\//, '').split('/')[0];
return domain.startsWith('www.') ? domain.substring(4) : domain;
}
export function FaviconImage({ domain, className = '' }: { domain: string; className?: string }) {
return (
<div className={cn('relative size-4 flex-shrink-0 overflow-hidden rounded-full', className)}>
<div className="absolute inset-0 rounded-full bg-white" />
<img src={getFaviconUrl(domain)} alt={domain} className="relative size-full" />
<div className="border-border-light/10 absolute inset-0 rounded-full border dark:border-transparent"></div>
</div>
);
}
export function SourceHovercard({
source,
label,
onMouseEnter,
onMouseLeave,
children,
}: SourceHovercardProps) {
const localize = useLocalize();
const domain = getCleanDomain(source.link || '');
return (
<span className="relative ml-0.5 inline-block">
<Ariakit.HovercardProvider showTimeout={150} hideTimeout={150}>
<span className="flex items-center">
<Ariakit.HovercardAnchor
render={
<a
href={source.link}
target="_blank"
rel="noopener noreferrer"
className="ml-1 inline-block h-5 max-w-36 cursor-pointer items-center overflow-hidden text-ellipsis whitespace-nowrap rounded-xl border border-border-heavy bg-surface-secondary px-2 text-xs font-medium no-underline transition-colors hover:bg-surface-hover dark:border-border-medium dark:hover:bg-surface-tertiary"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{label}
</a>
}
/>
<Ariakit.HovercardDisclosure className="ml-0.5 rounded-full text-text-primary focus:outline-none focus:ring-2 focus:ring-ring">
<VisuallyHidden>{localize('com_citation_more_details', { label })}</VisuallyHidden>
<ChevronDown className="icon-sm" />
</Ariakit.HovercardDisclosure>
<Ariakit.Hovercard
gutter={16}
className="dark:shadow-lg-dark z-[999] w-[300px] max-w-[calc(100vw-2rem)] rounded-xl border border-border-medium bg-surface-secondary p-3 text-text-primary shadow-lg"
portal={true}
unmountOnHide={true}
>
{children}
{!children && (
<>
<span className="mb-2 flex items-center">
<FaviconImage domain={domain} className="mr-2" />
<a
href={source.link}
target="_blank"
rel="noopener noreferrer"
className="line-clamp-2 cursor-pointer overflow-hidden text-sm font-bold text-[#0066cc] hover:underline dark:text-blue-400 md:line-clamp-3"
>
{source.attribution || domain}
</a>
</span>
<h4 className="mb-1.5 mt-0 text-xs text-text-primary md:text-sm">
{source.title || source.link}
</h4>
{source.snippet && (
<span className="my-2 text-ellipsis break-all text-xs text-text-secondary md:text-sm">
{source.snippet}
</span>
)}
</>
)}
</Ariakit.Hovercard>
</span>
</Ariakit.HovercardProvider>
</span>
);
}

409
client/src/components/Web/Sources.tsx Normal file
View file

@ -0,0 +1,409 @@
import React, { useMemo } from 'react';
import * as Ariakit from '@ariakit/react';
import { VisuallyHidden } from '@ariakit/react';
import { Globe, Newspaper, Image, ChevronDown } from 'lucide-react';
import type { ValidSource, ImageResult } from 'librechat-data-provider';
import { FaviconImage, getCleanDomain } from '~/components/Web/SourceHovercard';
import { useSearchContext } from '~/Providers';
import { AnimatedTabs } from '~/components/ui';
import { useLocalize } from '~/hooks';
import {
OGDialog,
OGDialogTitle,
OGDialogContent,
OGDialogTrigger,
} from '~/components/ui/OriginalDialog';
interface SourceItemProps {
source: ValidSource;
isNews?: boolean;
expanded?: boolean;
}
function SourceItem({ source, isNews, expanded = false }: SourceItemProps) {
const localize = useLocalize();
const domain = getCleanDomain(source.link);
if (expanded) {
return (
<a
href={source.link}
target="_blank"
rel="noopener noreferrer"
className="flex w-full flex-col rounded-lg bg-surface-primary-contrast px-3 py-2 text-sm transition-all duration-300 hover:bg-surface-tertiary"
>
<div className="flex items-center gap-2">
<FaviconImage domain={domain} />
<span className="truncate text-xs font-medium text-text-secondary">{domain}</span>
</div>
<div className="mt-1">
<span className="line-clamp-2 text-sm font-medium text-text-primary md:line-clamp-3">
{source.title || source.link}
</span>
{'snippet' in source && source.snippet && (
<span className="mt-1 line-clamp-2 text-xs text-text-secondary md:line-clamp-3">
{source.snippet}
</span>
)}
</div>
</a>
);
}
return (
<span className="not-prose relative inline-block h-full w-full">
<Ariakit.HovercardProvider showTimeout={150} hideTimeout={150}>
<div className="flex h-full items-center">
<Ariakit.HovercardAnchor
render={
<a
href={source.link}
target="_blank"
rel="noopener noreferrer"
className="flex h-full w-full flex-col rounded-lg bg-surface-primary-contrast px-3 py-2 text-sm transition-all duration-300 hover:bg-surface-tertiary"
>
<div className="flex items-center gap-2">
<FaviconImage domain={domain} />
<span className="truncate text-xs font-medium text-text-secondary">{domain}</span>
</div>
<div className="mt-1">
<span className="line-clamp-2 text-sm font-medium text-text-primary md:line-clamp-3">
{source.title || source.link}
</span>
{/* {'snippet' in source && source.snippet && (
<span className="mt-1 line-clamp-2 md:line-clamp-3 text-xs text-text-secondary">
{source.snippet}
</span>
)} */}
</div>
</a>
}
/>
<Ariakit.HovercardDisclosure className="absolute right-2 rounded-full text-text-primary focus:outline-none focus:ring-2 focus:ring-ring">
<VisuallyHidden>
{localize('com_citation_more_details', { label: domain })}
</VisuallyHidden>
<ChevronDown className="icon-sm" />
</Ariakit.HovercardDisclosure>
<Ariakit.Hovercard
gutter={16}
className="dark:shadow-lg-dark z-[999] w-[300px] max-w-[calc(100vw-2rem)] rounded-xl border border-border-medium bg-surface-secondary p-3 text-text-primary shadow-lg"
portal={true}
unmountOnHide={true}
>
<div className="flex gap-3">
<div className="flex-1">
<div className="mb-2 flex items-center">
<FaviconImage domain={domain} className="mr-2" />
<a
href={source.link}
target="_blank"
rel="noopener noreferrer"
className="line-clamp-2 cursor-pointer overflow-hidden text-sm font-bold text-[#0066cc] hover:underline dark:text-blue-400 md:line-clamp-3"
>
{source.attribution || domain}
</a>
</div>
<h4 className="mb-1.5 mt-0 text-xs text-text-primary md:text-sm">
{source.title || source.link}
</h4>
{'snippet' in source && source.snippet && (
<span className="my-2 text-ellipsis break-all text-xs text-text-secondary md:text-sm">
{source.snippet}
</span>
)}
</div>
{'imageUrl' in source && source.imageUrl && (
<div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md">
<img
src={source.imageUrl}
alt={source.title || localize('com_sources_image_alt')}
className="h-full w-full object-cover"
/>
</div>
)}
</div>
</Ariakit.Hovercard>
</div>
</Ariakit.HovercardProvider>
</span>
);
}
function ImageItem({ image }: { image: ImageResult }) {
const localize = useLocalize();
return (
<a
href={image.imageUrl}
target="_blank"
rel="noopener noreferrer"
className="group overflow-hidden rounded-lg bg-surface-secondary transition-all duration-300 hover:bg-surface-tertiary"
>
{image.imageUrl && (
<div className="relative aspect-square w-full overflow-hidden">
<img
src={image.imageUrl}
alt={image.title || localize('com_sources_image_alt')}
className="size-full object-cover"
/>
{image.title && (
<div className="absolute bottom-0 left-0 right-0 w-full border-none bg-gray-900/80 p-1 text-xs font-medium text-white backdrop-blur-sm">
<span className="truncate">{image.title}</span>
</div>
)}
</div>
)}
</a>
);
}
export function StackedFavicons({
sources,
start = 0,
end = 3,
}: {
sources: ValidSource[];
start?: number;
end?: number;
}) {
let slice = [start, end];
if (start < 0) {
slice = [start];
}
return (
<div className="relative flex">
{sources.slice(...slice).map((source, i) => (
<FaviconImage
key={`icon-${i}`}
domain={getCleanDomain(source.link)}
className={i > 0 ? 'ml-[-6px]' : ''}
/>
))}
</div>
);
}
function SourcesGroup({ sources, limit = 3 }: { sources: ValidSource[]; limit?: number }) {
const localize = useLocalize();
const visibleSources = sources.slice(0, limit);
const remainingSources = sources.slice(limit);
const hasMoreSources = remainingSources.length > 0;
/** Calculate grid columns based on number of items (including the +X sources button if present) */
const totalItems = hasMoreSources ? visibleSources.length + 1 : visibleSources.length;
const gridCols = `grid-cols-${Math.min(totalItems, 4)}`;
return (
<div className={`grid ${gridCols} scrollbar-none w-full gap-2 overflow-x-auto`}>
<OGDialog>
{visibleSources.map((source, i) => (
<div key={`source-${i}`} className="w-full min-w-[120px]">
<SourceItem source={source} />
</div>
))}
{hasMoreSources && (
<OGDialogTrigger className="flex flex-col rounded-lg bg-surface-primary-contrast px-3 py-2 text-sm transition-all duration-300 hover:bg-surface-tertiary">
<div className="flex items-center gap-2">
<StackedFavicons sources={remainingSources} />
<span className="truncate text-xs font-medium text-text-secondary">
{localize('com_sources_more_sources', { count: remainingSources.length })}
</span>
</div>
</OGDialogTrigger>
)}
<OGDialogContent className="flex max-h-[80vh] max-w-full flex-col overflow-hidden rounded-lg bg-surface-primary p-0 md:max-w-[600px]">
<div className="sticky top-0 z-10 flex items-center justify-between border-b border-border-light bg-surface-primary px-3 py-2">
<OGDialogTitle className="text-base font-medium">
{localize('com_sources_title')}
</OGDialogTitle>
<button
className="rounded-full p-1 text-text-secondary hover:bg-surface-tertiary hover:text-text-primary"
aria-label={localize('com_ui_close')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div className="flex-1 overflow-y-auto px-3 py-2">
<div className="flex flex-col gap-2">
{[...visibleSources, ...remainingSources].map((source, i) => (
<a
key={`more-source-${i}`}
href={source.link}
target="_blank"
rel="noopener noreferrer"
className="flex gap-2 rounded-lg px-2 py-2 transition-colors hover:bg-surface-tertiary"
>
<FaviconImage
domain={getCleanDomain(source.link)}
className="h-5 w-5 flex-shrink-0"
/>
<div className="min-w-0 flex-1">
<h3 className="mb-0.5 truncate text-sm font-medium text-text-primary">
{source.title || source.link}
</h3>
{'snippet' in source && source.snippet && (
<p className="mb-1 line-clamp-2 text-xs text-text-secondary md:line-clamp-3">
{source.snippet}
</p>
)}
<span className="text-xs text-text-secondary-alt">
{getCleanDomain(source.link)}
</span>
</div>
{'imageUrl' in source && source.imageUrl && (
<div className="hidden h-12 w-12 flex-shrink-0 overflow-hidden rounded-md sm:block">
<img
src={source.imageUrl}
alt={source.title || localize('com_sources_image_alt')}
className="h-full w-full object-cover"
/>
</div>
)}
</a>
))}
</div>
</div>
</OGDialogContent>
</OGDialog>
</div>
);
}
function TabWithIcon({ label, icon }: { label: string; icon: React.ReactNode }) {
return (
<div className="flex items-center gap-2 rounded-md px-3 py-1 text-sm transition-colors hover:bg-surface-tertiary hover:text-text-primary">
{React.cloneElement(icon as React.ReactElement, { size: 14 })}
<span>{label}</span>
</div>
);
}
export default function Sources() {
const localize = useLocalize();
const { searchResults } = useSearchContext();
const { organicSources, topStories, images, hasAnswerBox } = useMemo(() => {
if (!searchResults) {
return {
organicSources: [],
topStories: [],
images: [],
hasAnswerBox: false,
};
}
const organicSourcesMap = new Map<string, ValidSource>();
const topStoriesMap = new Map<string, ValidSource>();
const imagesMap = new Map<string, ImageResult>();
let hasAnswerBox = false;
Object.values(searchResults).forEach((result) => {
if (!result) return;
if (result.organic?.length) {
result.organic.forEach((source) => {
if (source.link) {
organicSourcesMap.set(source.link, source);
}
});
}
if (result.references?.length) {
result.references.forEach((source) => {
if (source.type === 'image') {
imagesMap.set(source.link, {
...source,
imageUrl: source.link,
});
return;
}
if (source.link) {
organicSourcesMap.set(source.link, source);
}
});
}
if (result.topStories?.length) {
result.topStories.forEach((source) => {
if (source.link) {
topStoriesMap.set(source.link, source);
}
});
}
if (result.images?.length) {
result.images.forEach((image) => {
if (image.imageUrl) {
imagesMap.set(image.imageUrl, image);
}
});
}
if (result.answerBox) {
hasAnswerBox = true;
}
});
return {
organicSources: Array.from(organicSourcesMap.values()),
topStories: Array.from(topStoriesMap.values()),
images: Array.from(imagesMap.values()),
hasAnswerBox,
};
}, [searchResults]);
const tabs = useMemo(() => {
const availableTabs: Array<{ label: React.ReactNode; content: React.ReactNode }> = [];
if (organicSources.length || topStories.length || hasAnswerBox) {
availableTabs.push({
label: <TabWithIcon label={localize('com_sources_tab_all')} icon={<Globe />} />,
content: <SourcesGroup sources={[...organicSources, ...topStories]} />,
});
}
if (topStories.length) {
availableTabs.push({
label: <TabWithIcon label={localize('com_sources_tab_news')} icon={<Newspaper />} />,
content: <SourcesGroup sources={topStories} limit={3} />,
});
}
if (images.length) {
availableTabs.push({
label: <TabWithIcon label={localize('com_sources_tab_images')} icon={<Image />} />,
content: (
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
{images.map((item, i) => (
<ImageItem key={`image-${i}`} image={item} />
))}
</div>
),
});
}
return availableTabs;
}, [organicSources, topStories, images, hasAnswerBox, localize]);
if (!tabs.length) return null;
return (
<AnimatedTabs
tabs={tabs}
containerClassName="flex min-w-full mb-4"
tabListClassName="flex items-center mb-2 border-b border-border-light overflow-x-auto"
tabPanelClassName="w-full overflow-x-auto scrollbar-none md:mx-0 md:px-0"
tabClassName="flex items-center whitespace-nowrap text-xs font-medium text-token-text-secondary px-1 pt-2 pb-1 border-b-2 border-transparent data-[state=active]:text-text-primary outline-none"
/>
);
}

2
client/src/components/Web/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from './plugin';
export type * from './types';

250
client/src/components/Web/plugin.ts Normal file
View file

@ -0,0 +1,250 @@
import { visit } from 'unist-util-visit';
import type { Node } from 'unist';
import type { Citation, CitationNode } from './types';
const SPAN_REGEX = /(\\ue203.*?\\ue204)/g;
const COMPOSITE_REGEX = /(\\ue200.*?\\ue201)/g;
const STANDALONE_PATTERN = /\\ue202turn(\d+)(search|image|news|video|ref)(\d+)/g;
const CLEANUP_REGEX = /\\ue200|\\ue201|\\ue202|\\ue203|\\ue204|\\ue206/g;
/**
* Checks if a standalone marker is truly standalone (not inside a composite block)
*/
function isStandaloneMarker(text: string, position: number): boolean {
const beforeText = text.substring(0, position);
const lastUe200 = beforeText.lastIndexOf('\\ue200');
const lastUe201 = beforeText.lastIndexOf('\\ue201');
return lastUe200 === -1 || (lastUe201 !== -1 && lastUe201 > lastUe200);
}
/**
* Find the next pattern match from the current position
*/
function findNextMatch(
text: string,
position: number,
): { type: string; match: RegExpExecArray | null; index: number } | null {
// Reset regex lastIndex to start from current position
SPAN_REGEX.lastIndex = position;
COMPOSITE_REGEX.lastIndex = position;
STANDALONE_PATTERN.lastIndex = position;
// Find next occurrence of each pattern
const spanMatch = SPAN_REGEX.exec(text);
const compositeMatch = COMPOSITE_REGEX.exec(text);
// For standalone, we need to check each match
let standaloneMatch: RegExpExecArray | null = null;
STANDALONE_PATTERN.lastIndex = position;
// Find the first standalone match that's not inside a composite block
let match: RegExpExecArray | null;
while (!standaloneMatch && (match = STANDALONE_PATTERN.exec(text)) !== null) {
if (isStandaloneMarker(text, match.index)) {
standaloneMatch = match;
}
}
// Find closest match
let nextMatch: RegExpExecArray | null = null;
let matchType = '';
let matchIndex = -1;
let typeIndex = -1;
if (spanMatch && (!nextMatch || spanMatch.index < matchIndex || matchIndex === -1)) {
nextMatch = spanMatch;
matchType = 'span';
matchIndex = spanMatch.index;
// We can use a counter for typeIndex if needed
typeIndex = 0;
}
if (compositeMatch && (!nextMatch || compositeMatch.index < matchIndex || matchIndex === -1)) {
nextMatch = compositeMatch;
matchType = 'composite';
matchIndex = compositeMatch.index;
typeIndex = 0;
}
if (standaloneMatch && (!nextMatch || standaloneMatch.index < matchIndex || matchIndex === -1)) {
nextMatch = standaloneMatch;
matchType = 'standalone';
matchIndex = standaloneMatch.index;
typeIndex = 0;
}
if (!nextMatch) return null;
return { type: matchType, match: nextMatch, index: typeIndex };
}
function processTree(tree: Node) {
visit(tree, 'text', (node, index, parent) => {
const textNode = node as CitationNode;
const parentNode = parent as CitationNode;
if (typeof textNode.value !== 'string') return;
const originalValue = textNode.value;
const segments: Array<CitationNode> = [];
// Single-pass processing through the string
let currentPosition = 0;
// Important change: Create a map to track citation IDs by their position
// This ensures consistent IDs across multiple segments
const citationIds = new Map<number, string>();
const typeCounts = { span: 0, composite: 0, standalone: 0 };
while (currentPosition < originalValue.length) {
const nextMatchInfo = findNextMatch(originalValue, currentPosition);
if (!nextMatchInfo) {
// No more matches, add remaining content with cleanup
const remainingText = originalValue.substring(currentPosition).replace(CLEANUP_REGEX, '');
if (remainingText) {
segments.push({ type: 'text', value: remainingText });
}
break;
}
const { type, match } = nextMatchInfo;
const matchIndex = match!.index;
const matchText = match![0];
// Add cleaned text before this match
if (matchIndex > currentPosition) {
const textBeforeMatch = originalValue
.substring(currentPosition, matchIndex)
.replace(CLEANUP_REGEX, '');
if (textBeforeMatch) {
segments.push({ type: 'text', value: textBeforeMatch });
}
}
// Generate a unique ID for this citation based on its position in the text
const citationId = `${type}-${typeCounts[type as keyof typeof typeCounts]}-${matchIndex}`;
citationIds.set(matchIndex, citationId);
// Process based on match type
switch (type) {
case 'span': {
const spanText = matchText;
const cleanText = spanText.replace(/\\ue203|\\ue204/g, '');
// Look ahead for associated citation
let associatedCitationId: string | null = null;
const endOfSpan = matchIndex + matchText.length;
// Check if there's a citation right after this span
const nextCitation = findNextMatch(originalValue, endOfSpan);
if (
nextCitation &&
(nextCitation.type === 'standalone' || nextCitation.type === 'composite') &&
nextCitation.match!.index - endOfSpan < 5
) {
// Use the ID that will be generated for the next citation
const nextIndex = nextCitation.match!.index;
const nextType = nextCitation.type;
associatedCitationId = `${nextType}-${typeCounts[nextType as keyof typeof typeCounts]}-${nextIndex}`;
}
segments.push({
type: 'highlighted-text',
data: {
hName: 'highlighted-text',
hProperties: { citationId: associatedCitationId },
},
children: [{ type: 'text', value: cleanText }],
});
typeCounts.span++;
break;
}
case 'composite': {
const compositeText = matchText;
// Use a regular expression to extract reference indices
const compositeRefRegex = new RegExp(STANDALONE_PATTERN.source, 'g');
let refMatch: RegExpExecArray | null;
const citations: Array<Citation> = [];
while ((refMatch = compositeRefRegex.exec(compositeText)) !== null) {
const turn = Number(refMatch[1]);
const refType = refMatch[2];
const refIndex = Number(refMatch[3]);
citations.push({
turn,
refType,
index: refIndex,
});
}
if (citations.length > 0) {
segments.push({
type: 'composite-citation',
data: {
hName: 'composite-citation',
hProperties: {
citations,
citationId: citationId,
},
},
});
}
typeCounts.composite++;
break;
}
case 'standalone': {
// Extract reference info
const turn = Number(match![1]);
const refType = match![2];
const refIndex = Number(match![3]);
segments.push({
type: 'citation',
data: {
hName: 'citation',
hProperties: {
citation: {
turn,
refType,
index: refIndex,
},
citationType: 'standalone',
citationId: citationId,
},
},
});
typeCounts.standalone++;
break;
}
}
// Move position forward
currentPosition = matchIndex + matchText.length;
}
// Replace the original node with our segments or clean up the original
if (segments.length > 0 && index !== undefined) {
parentNode.children?.splice(index, 1, ...segments);
return index + segments.length;
} else if (textNode.value !== textNode.value.replace(CLEANUP_REGEX, '')) {
// If we didn't create segments but there are markers to clean up
textNode.value = textNode.value.replace(CLEANUP_REGEX, '');
}
});
}
export function unicodeCitation() {
return (tree: Node) => {
processTree(tree);
};
}

32
client/src/components/Web/types.ts Normal file
View file

@ -0,0 +1,32 @@
import type { SearchRefType } from 'librechat-data-provider';
export type Citation = { turn: number; refType: SearchRefType | string; index: number };
export type CitationProps = {
citationId?: string | null;
citationType?: string;
citations?: Array<Citation>;
citation?: Citation;
};
export type CitationNode = {
type?: string;
value?: string;
data?: {
hName?: string;
hProperties?: CitationProps;
};
children?: Array<CitationNode>;
};
export interface Sitelink {
title: string;
link: string;
}
export interface Reference {
title: string;
link: string;
snippet: string;
sitelinks?: Sitelink[];
attribution: string;
}

57
client/src/components/ui/AnimatedTabs.css Normal file
View file

@ -0,0 +1,57 @@
/* AnimatedTabs.css */
.animated-tab-panel {
transition-property: opacity, translate;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
animation-duration: 300ms;
}
/* Sliding underline animation for tabs */
.animated-tab-list {
position: relative;
}
.animated-tab-list::after {
content: '';
position: absolute;
bottom: 0;
height: 2px;
background-color: currentColor; /* Inherit color from active tab */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
left: var(--tab-left, 0);
width: var(--tab-width, 0);
}
.animated-tab {
position: relative;
}
.animated-tab[data-state="active"] {
border-bottom-color: transparent !important;
}
.animated-tab-panel[data-enter] {
opacity: 1 !important;
translate: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
.animated-tab-panel {
transition: none;
}
}
.animated-tab-panel:not([data-open]) {
position: absolute;
top: 0px;
}
.animated-panels:has(> [data-was-open]) > .animated-tab-panel {
opacity: 0;
translate: -100%;
}
.animated-panels [data-was-open] ~ .animated-tab-panel,
.animated-panels [data-open] ~ .animated-tab-panel {
translate: 100%;
}

160
client/src/components/ui/AnimatedTabs.tsx Normal file
View file

@ -0,0 +1,160 @@
import * as Ariakit from '@ariakit/react';
import { ReactNode, forwardRef, useEffect, useRef } from 'react';
import type { ElementRef } from 'react';
import { cn } from '~/utils';
import './AnimatedTabs.css';
export interface TabItem {
id?: string;
label: ReactNode;
content: ReactNode;
disabled?: boolean;
}
export interface AnimatedTabsProps {
tabs: TabItem[];
className?: string;
tabListClassName?: string;
tabClassName?: string;
tabPanelClassName?: string;
tabListProps?: Ariakit.TabListProps;
containerClassName?: string;
defaultSelectedId?: string;
}
function usePrevious<T>(value: T) {
const ref = useRef<T>();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
const Tab = forwardRef<ElementRef<typeof Ariakit.Tab>, Ariakit.TabProps>(function Tab(props, ref) {
const tabRef = useRef<HTMLButtonElement | null>(null);
useEffect(() => {
const tabElement = tabRef.current;
if (!tabElement) return;
const updateState = () => {
const isSelected = tabElement.getAttribute('aria-selected') === 'true';
tabElement.setAttribute('data-state', isSelected ? 'active' : 'inactive');
};
updateState();
const observer = new MutationObserver(updateState);
observer.observe(tabElement, { attributes: true, attributeFilter: ['aria-selected'] });
return () => observer.disconnect();
}, []);
return (
<Ariakit.Tab
ref={(node) => {
// Forward the ref to both our local ref and the provided ref
tabRef.current = node;
if (typeof ref === 'function') ref(node);
else if (ref) ref.current = node;
}}
{...props}
className={`animated-tab aria-selected:text-token-text-primary flex select-none items-center justify-center gap-2 whitespace-nowrap border-none text-sm font-medium outline-none transition-colors aria-disabled:opacity-50 ${props.className || ''}`}
/>
);
});
const TabPanel = forwardRef<ElementRef<typeof Ariakit.TabPanel>, Ariakit.TabPanelProps>(
function TabPanel(props, ref) {
const tab = Ariakit.useTabContext();
const previousTabId = usePrevious(Ariakit.useStoreState(tab, 'selectedId'));
const wasOpen = props.tabId && previousTabId === props.tabId;
return (
<Ariakit.TabPanel
ref={ref}
{...props}
data-was-open={wasOpen || undefined}
className={`animated-tab-panel max-w-full ${props.className || ''}`}
/>
);
},
);
export function AnimatedTabs({
tabs,
className = '',
tabListClassName = '',
tabClassName = '',
tabPanelClassName = '',
containerClassName = '',
tabListProps = {},
defaultSelectedId,
}: AnimatedTabsProps) {
const tabIds = tabs.map((tab, index) => tab.id || `tab-${index}`);
const firstTabId = defaultSelectedId || tabIds[0];
const tabListRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const tabList = tabListRef.current;
if (!tabList) return;
// Function to update the underline position
const updateUnderline = () => {
const activeTab = tabList.querySelector('[data-state="active"]') as HTMLElement;
if (!activeTab) return;
tabList.style.setProperty('--tab-left', `${activeTab.offsetLeft}px`);
tabList.style.setProperty('--tab-width', `${activeTab.offsetWidth}px`);
};
updateUnderline();
const observer = new MutationObserver(updateUnderline);
observer.observe(tabList, { attributes: true, subtree: true, attributeFilter: ['data-state'] });
return () => observer.disconnect();
}, [tabs]);
return (
<div className={`w-full ${className}`}>
<Ariakit.TabProvider defaultSelectedId={firstTabId}>
<Ariakit.TabList
ref={tabListRef}
aria-label="Tabs"
className={`animated-tab-list flex py-1 ${tabListClassName}`}
{...tabListProps}
>
{tabs.map((tab, index) => (
<Tab
key={tabIds[index]}
id={tabIds[index]}
disabled={tab.disabled}
className={tabClassName}
data-state={tabIds[index] === firstTabId ? 'active' : 'inactive'}
>
{tab.label}
</Tab>
))}
</Ariakit.TabList>
<div
className={cn(
'animated-panels relative flex w-full flex-col items-center overflow-hidden p-0',
containerClassName,
)}
>
{tabs.map((tab, index) => (
<TabPanel
key={`panel-${tabIds[index]}`}
id={`panel-${tabIds[index]}`}
tabId={tabIds[index]}
className={tabPanelClassName}
>
{tab.content}
</TabPanel>
))}
</div>
</Ariakit.TabProvider>
</div>
);
}

28
client/src/components/ui/CheckboxButton.tsx
View file

@ -1,22 +1,19 @@
import { useEffect } from 'react';
import { Checkbox, useStoreState, useCheckboxStore } from '@ariakit/react';
import { cn } from '~/utils';
import * as React from 'react';
export default function CheckboxButton({
label,
icon,
setValue,
className,
defaultChecked,
isCheckedClassName,
}: {
const CheckboxButton = React.forwardRef<
HTMLInputElement,
{
icon?: React.ReactNode;
label: string;
className?: string;
icon?: React.ReactNode;
defaultChecked?: boolean;
isCheckedClassName?: string;
setValue?: (isChecked: boolean) => void;
}) {
setValue?: (e: React.ChangeEvent<HTMLInputElement>, isChecked: boolean) => void;
}
>(({ icon, label, setValue, className, defaultChecked, isCheckedClassName }, ref) => {
const checkbox = useCheckboxStore();
const isChecked = useStoreState(checkbox, (state) => state?.value);
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -24,7 +21,7 @@ export default function CheckboxButton({
if (typeof isChecked !== 'boolean') {
return;
}
setValue?.(!isChecked);
setValue?.(e, !isChecked);
};
useEffect(() => {
if (defaultChecked) {
@ -34,6 +31,7 @@ export default function CheckboxButton({
return (
<Checkbox
ref={ref}
store={checkbox}
onChange={onChange}
defaultChecked={defaultChecked}
@ -59,4 +57,8 @@ export default function CheckboxButton({
<span className="hidden truncate md:block">{label}</span>
</Checkbox>
);
}
});
CheckboxButton.displayName = 'CheckboxButton';
export default CheckboxButton;

2
client/src/components/ui/OriginalDialog.tsx
View file

@ -4,7 +4,7 @@ import { X } from 'lucide-react';
import { cn } from '~/utils';
interface OGDialogProps extends DialogPrimitive.DialogProps {
triggerRef?: React.RefObject<HTMLButtonElement>;
triggerRef?: React.RefObject<HTMLButtonElement | HTMLInputElement>;
}
const Dialog = React.forwardRef<HTMLDivElement, OGDialogProps>(

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

@ -1,3 +1,4 @@
export * from './AnimatedTabs';
export * from './AlertDialog';
export * from './Breadcrumb';
export * from './Button';

2
client/src/hooks/Chat/useChatFunctions.ts
View file

@ -245,7 +245,7 @@ export default function useChatFunctions({
const generation = editedText ?? latestMessage?.text ?? '';
const responseText = isEditOrContinue ? generation : '';
const responseMessageId = editedMessageId ?? latestMessage?.messageId ?? null;
const responseMessageId = editedMessageId ?? latestMessage?.messageId + '_' ?? null;
const initialResponse: TMessage = {
sender: responseSender,
text: responseText,

26
client/src/hooks/Messages/useSearchResultsByTurn.ts Normal file
View file

@ -0,0 +1,26 @@
import { useMemo } from 'react';
import { TAttachment, Tools, SearchResultData } from 'librechat-data-provider';
/**
* Hook that creates a map of turn numbers to SearchResultData from web search attachments
* @param attachments Array of attachment metadata
* @returns A map of turn numbers to their corresponding search result data
*/
export function useSearchResultsByTurn(attachments?: TAttachment[]) {
const searchResultsByTurn = useMemo(() => {
const turnMap: { [key: string]: SearchResultData } = {};
attachments?.forEach((attachment) => {
if (attachment.type === Tools.web_search && attachment[Tools.web_search]) {
const searchData = attachment[Tools.web_search];
if (searchData && typeof searchData.turn === 'number') {
turnMap[searchData.turn.toString()] = searchData;
}
}
});
return turnMap;
}, [attachments]);
return searchResultsByTurn;
}

1
client/src/hooks/Plugins/index.ts
View file

@ -1,4 +1,5 @@
export { default as useAuthCodeTool } from './useAuthCodeTool';
export { default as usePluginInstall } from './usePluginInstall';
export { default as useCodeApiKeyForm } from './useCodeApiKeyForm';
export { default as useSearchApiKeyForm } from './useSearchApiKeyForm';
export { default as usePluginDialogHelpers } from './usePluginDialogHelpers';

84
client/src/hooks/Plugins/useAuthSearchTool.ts Normal file
View file

@ -0,0 +1,84 @@
import { useCallback } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { AuthType, Tools, QueryKeys } from 'librechat-data-provider';
import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
export type SearchApiKeyFormData = {
serperApiKey: string;
firecrawlApiKey: string;
firecrawlApiUrl: string;
jinaApiKey: string;
cohereApiKey: string;
};
const useAuthSearchTool = (options?: { isEntityTool: boolean }) => {
const queryClient = useQueryClient();
const isEntityTool = options?.isEntityTool ?? true;
const updateUserPlugins = useUpdateUserPluginsMutation({
onMutate: (vars) => {
queryClient.setQueryData([QueryKeys.toolAuth, Tools.web_search], () => {
return {
authenticated: vars.action === 'install',
authTypes:
vars.action === 'install'
? [
['providers', AuthType.USER_PROVIDED],
['scrapers', AuthType.USER_PROVIDED],
['rerankers', AuthType.USER_PROVIDED],
]
: [],
};
});
},
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.toolAuth, Tools.web_search]);
},
onError: () => {
queryClient.invalidateQueries([QueryKeys.toolAuth, Tools.web_search]);
},
});
const installTool = useCallback(
(data: SearchApiKeyFormData) => {
const auth = Object.entries({
serperApiKey: data.serperApiKey,
firecrawlApiKey: data.firecrawlApiKey,
firecrawlApiUrl: data.firecrawlApiUrl,
jinaApiKey: data.jinaApiKey,
cohereApiKey: data.cohereApiKey,
}).reduce(
(acc, [key, value]) => {
if (value) {
acc[key] = value;
}
return acc;
},
{} as Record<string, string>,
);
updateUserPlugins.mutate({
pluginKey: Tools.web_search,
action: 'install',
auth,
isEntityTool,
});
},
[updateUserPlugins, isEntityTool],
);
const removeTool = useCallback(() => {
updateUserPlugins.mutate({
pluginKey: Tools.web_search,
action: 'uninstall',
auth: {},
isEntityTool,
});
}, [updateUserPlugins, isEntityTool]);
return {
removeTool,
installTool,
};
};
export default useAuthSearchTool;

42
client/src/hooks/Plugins/useSearchApiKeyForm.ts Normal file
View file

@ -0,0 +1,42 @@
import { useState, useCallback } from 'react';
import { useForm } from 'react-hook-form';
import useAuthSearchTool from '~/hooks/Plugins/useAuthSearchTool';
import type { SearchApiKeyFormData } from '~/hooks/Plugins/useAuthSearchTool';
export default function useSearchApiKeyForm({
onSubmit,
onRevoke,
}: {
onSubmit?: () => void;
onRevoke?: () => void;
}) {
const methods = useForm<SearchApiKeyFormData>();
const [isDialogOpen, setIsDialogOpen] = useState(false);
const { installTool, removeTool } = useAuthSearchTool({ isEntityTool: true });
const { reset } = methods;
const onSubmitHandler = useCallback(
(data: SearchApiKeyFormData) => {
reset();
installTool(data);
setIsDialogOpen(false);
onSubmit?.();
},
[onSubmit, reset, installTool],
);
const handleRevokeApiKey = useCallback(() => {
reset();
removeTool();
setIsDialogOpen(false);
onRevoke?.();
}, [reset, onRevoke, removeTool]);
return {
methods,
isDialogOpen,
setIsDialogOpen,
handleRevokeApiKey,
onSubmit: onSubmitHandler,
};
}

2
client/src/hooks/SSE/useAttachmentHandler.ts
View file

@ -10,7 +10,7 @@ export default function useAttachmentHandler(queryClient?: QueryClient) {
return ({ data }: { data: TAttachment; submission: EventSubmission }) => {
const { messageId } = data;
if (queryClient && !data?.filepath?.startsWith('/api/files')) {
if (queryClient && data?.filepath && !data.filepath.startsWith('/api/files')) {
queryClient.setQueryData([QueryKeys.files], (oldData: TAttachment[] | undefined) => {
return [data, ...(oldData || [])];
});

31
client/src/locales/en/translation.json
View file

@ -21,6 +21,7 @@
"com_agents_name_placeholder": "Optional: The name of the agent",
"com_agents_no_access": "You don't have access to edit this agent.",
"com_agents_not_available": "Agent Not Available",
"com_agents_search_info": "When enabled, allows your agent to search the web for up-to-date information. Requires a valid API key.",
"com_agents_search_name": "Search agents by name",
"com_agents_update_error": "There was an error updating your agent.",
"com_assistants_action_attempt": "Assistant wants to talk to {{0}}",
@ -724,6 +725,20 @@
"com_ui_librechat_code_api_key": "Get your LibreChat Code Interpreter API key",
"com_ui_librechat_code_api_subtitle": "Secure. Multi-language. Input/Output Files.",
"com_ui_librechat_code_api_title": "Run AI Code",
"com_ui_web_search_api_subtitle": "Search the web for up-to-date information",
"com_ui_web_search_provider": "Search Provider",
"com_ui_web_search_provider_serper": "Serper API",
"com_ui_web_search_provider_serper_key": "Get your Serper API key",
"com_ui_web_search_scraper": "Scraper",
"com_ui_web_search_scraper_firecrawl": "Firecrawl API",
"com_ui_web_search_scraper_firecrawl_key": "Get your Firecrawl API key",
"com_ui_web_search_reranker": "Reranker",
"com_ui_web_search_reranker_jina": "Jina AI",
"com_ui_web_search_reranker_cohere": "Cohere",
"com_ui_web_search_reranker_cohere_key": "Get your Cohere API key",
"com_ui_web_search_firecrawl_url": "Firecrawl API URL (optional)",
"com_ui_web_search_jina_key": "Enter Jina API Key",
"com_ui_web_search_cohere_key": "Enter Cohere API Key",
"com_ui_loading": "Loading...",
"com_ui_locked": "Locked",
"com_ui_logo": "{{0}} Logo",
@ -800,6 +815,11 @@
"com_ui_roleplay": "Roleplay",
"com_ui_run_code": "Run Code",
"com_ui_run_code_error": "There was an error running the code",
"com_ui_web_search": "Web Search",
"com_ui_web_search_processing": "Processing results",
"com_ui_web_search_reading": "Reading results",
"com_ui_web_searching": "Searching the web",
"com_ui_web_searching_again": "Searching the web again",
"com_ui_save": "Save",
"com_ui_save_badge_changes": "Save badge changes?",
"com_ui_save_submit": "Save & Submit",
@ -895,5 +915,14 @@
"com_ui_yes": "Yes",
"com_ui_zoom": "Zoom",
"com_user_message": "You",
"com_warning_resubmit_unsupported": "Resubmitting the AI message is not supported for this endpoint."
"com_warning_resubmit_unsupported": "Resubmitting the AI message is not supported for this endpoint.",
"com_citation_source": "Source",
"com_citation_more_details": "More details about {{label}}",
"com_sources_tab_all": "All",
"com_sources_tab_news": "News",
"com_sources_tab_images": "Images",
"com_sources_more_sources": "+{{count}} sources",
"com_sources_title": "Sources",
"com_sources_image_alt": "Search result image",
"com_ui_web_search_reranker_jina_key": "Get your Jina API key"
}

2
client/src/style.css
View file

@ -1039,7 +1039,7 @@ pre {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-links: #0066cc;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;

3379
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
packages/data-provider/package.json
View file

@ -1,6 +1,6 @@
{
"name": "librechat-data-provider",
"version": "0.7.83",
"version": "0.7.84",
"description": "data services for librechat apps",
"main": "dist/index.js",
"module": "dist/index.es.js",

899
packages/data-provider/specs/web.spec.ts Normal file
View file

@ -0,0 +1,899 @@
import type {
ScraperTypes,
TCustomConfig,
RerankerTypes,
SearchProviders,
TWebSearchConfig,
} from '../src/config';
import { webSearchAuth, loadWebSearchAuth, extractWebSearchEnvVars } from '../src/web';
import { AuthType } from '../src/schemas';
// Mock the extractVariableName function
jest.mock('../src/utils', () => ({
extractVariableName: (value: string) => {
if (!value || typeof value !== 'string') return null;
const match = value.match(/^\${(.+)}$/);
return match ? match[1] : null;
},
}));
describe('web.ts', () => {
describe('extractWebSearchEnvVars', () => {
it('should return empty array if config is undefined', () => {
const result = extractWebSearchEnvVars({
keys: ['serperApiKey', 'jinaApiKey'],
config: undefined,
});
expect(result).toEqual([]);
});
it('should extract environment variable names from config values', () => {
const config: Partial<TWebSearchConfig> = {
serperApiKey: '${SERPER_API_KEY}',
jinaApiKey: '${JINA_API_KEY}',
cohereApiKey: 'actual-api-key', // Not in env var format
safeSearch: true,
};
const result = extractWebSearchEnvVars({
keys: ['serperApiKey', 'jinaApiKey', 'cohereApiKey'],
config: config as TWebSearchConfig,
});
expect(result).toEqual(['SERPER_API_KEY', 'JINA_API_KEY']);
});
it('should only extract variables for keys that exist in the config', () => {
const config: Partial<TWebSearchConfig> = {
serperApiKey: '${SERPER_API_KEY}',
// firecrawlApiKey is missing
safeSearch: true,
};
const result = extractWebSearchEnvVars({
keys: ['serperApiKey', 'firecrawlApiKey'],
config: config as TWebSearchConfig,
});
expect(result).toEqual(['SERPER_API_KEY']);
});
});
describe('loadWebSearchAuth', () => {
// Common test variables
const userId = 'test-user-id';
let mockLoadAuthValues: jest.Mock;
let webSearchConfig: TCustomConfig['webSearch'];
beforeEach(() => {
// Reset mocks before each test
jest.clearAllMocks();
// Initialize the mock function
mockLoadAuthValues = jest.fn();
// Initialize a basic webSearchConfig
webSearchConfig = {
serperApiKey: '${SERPER_API_KEY}',
firecrawlApiKey: '${FIRECRAWL_API_KEY}',
firecrawlApiUrl: '${FIRECRAWL_API_URL}',
jinaApiKey: '${JINA_API_KEY}',
cohereApiKey: '${COHERE_API_KEY}',
safeSearch: true,
};
});
it('should return authenticated=true when all required categories are authenticated', async () => {
// Mock successful authentication for all services
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
result[field] =
field === 'FIRECRAWL_API_URL' ? 'https://api.firecrawl.dev' : 'test-api-key';
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
expect(result.authenticated).toBe(true);
expect(result.authTypes).toHaveLength(3); // providers, scrapers, rerankers
expect(result.authResult).toHaveProperty('serperApiKey', 'test-api-key');
expect(result.authResult).toHaveProperty('firecrawlApiKey', 'test-api-key');
// The implementation only includes one reranker in the result
// It will be either jina or cohere, but not both
if (result.authResult.rerankerType === 'jina') {
expect(result.authResult).toHaveProperty('jinaApiKey', 'test-api-key');
} else {
expect(result.authResult).toHaveProperty('cohereApiKey', 'test-api-key');
}
expect(result.authResult).toHaveProperty('searchProvider', 'serper');
expect(result.authResult).toHaveProperty('scraperType', 'firecrawl');
expect(['jina', 'cohere']).toContain(result.authResult.rerankerType as string);
});
it('should return authenticated=false when a required category is not authenticated', async () => {
// Mock authentication failure for the providers category
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
// Only provide values for scrapers and rerankers, not for providers
if (field !== 'SERPER_API_KEY') {
result[field] =
field === 'FIRECRAWL_API_URL' ? 'https://api.firecrawl.dev' : 'test-api-key';
}
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
expect(result.authenticated).toBe(false);
// We should still have authTypes for the categories we checked
expect(result.authTypes.some(([category]) => category === 'providers')).toBe(true);
});
it('should handle exceptions from loadAuthValues', async () => {
// Mock loadAuthValues to throw an error
mockLoadAuthValues.mockImplementation(() => {
throw new Error('Authentication failed');
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
throwError: false, // Don't throw errors
});
expect(result.authenticated).toBe(false);
});
it('should correctly identify user-provided vs system-defined auth', async () => {
// Mock environment variables
const originalEnv = process.env;
process.env = {
...originalEnv,
SERPER_API_KEY: 'system-api-key',
FIRECRAWL_API_KEY: 'system-api-key',
JINA_API_KEY: 'system-api-key',
};
// Mock loadAuthValues to return different values for some keys
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
if (field === 'SERPER_API_KEY') {
// This matches the system env var
result[field] = 'system-api-key';
} else if (field === 'FIRECRAWL_API_KEY') {
// This is different from the system env var (user provided)
result[field] = 'user-api-key';
} else if (field === 'FIRECRAWL_API_URL') {
result[field] = 'https://api.firecrawl.dev';
} else if (field === 'JINA_API_KEY') {
// This matches the system env var
result[field] = 'system-api-key';
} else {
result[field] = 'test-api-key';
}
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
expect(result.authenticated).toBe(true);
// Check for providers (system-defined) and scrapers (user-provided)
const providersAuthType = result.authTypes.find(
([category]) => category === 'providers',
)?.[1];
const scrapersAuthType = result.authTypes.find(([category]) => category === 'scrapers')?.[1];
expect(providersAuthType).toBe(AuthType.SYSTEM_DEFINED);
expect(scrapersAuthType).toBe(AuthType.USER_PROVIDED);
// Restore original env
process.env = originalEnv;
});
it('should handle optional fields correctly', async () => {
// Create a config without the optional firecrawlApiUrl
const configWithoutOptional = { ...webSearchConfig } as Partial<TWebSearchConfig>;
delete configWithoutOptional.firecrawlApiUrl;
mockLoadAuthValues.mockImplementation(({ authFields, optional }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
// Don't provide values for optional fields
if (!optional?.has(field)) {
result[field] = 'test-api-key';
}
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig: configWithoutOptional as TWebSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
expect(result.authenticated).toBe(true);
expect(result.authResult).toHaveProperty('firecrawlApiKey', 'test-api-key');
// Optional URL should not be in the result
expect(result.authResult.firecrawlApiUrl).toBeUndefined();
});
it('should preserve safeSearch setting from webSearchConfig', async () => {
// Mock successful authentication
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
result[field] = 'test-api-key';
});
return Promise.resolve(result);
});
// Test with safeSearch: false
const configWithSafeSearchOff = { ...webSearchConfig, safeSearch: false } as TWebSearchConfig;
const result = await loadWebSearchAuth({
userId,
webSearchConfig: configWithSafeSearchOff,
loadAuthValues: mockLoadAuthValues,
});
expect(result.authResult).toHaveProperty('safeSearch', false);
});
it('should set the correct service types in authResult', async () => {
// Mock successful authentication
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
result[field] =
field === 'FIRECRAWL_API_URL' ? 'https://api.firecrawl.dev' : 'test-api-key';
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
// Check that the correct service types are set
expect(result.authResult.searchProvider).toBe('serper' as SearchProviders);
expect(result.authResult.scraperType).toBe('firecrawl' as ScraperTypes);
// One of the rerankers should be set
expect(['jina', 'cohere']).toContain(result.authResult.rerankerType as string);
});
it('should check all services if none are specified', async () => {
// Initialize a webSearchConfig without specific services
const webSearchConfig: TCustomConfig['webSearch'] = {
serperApiKey: '${SERPER_API_KEY}',
firecrawlApiKey: '${FIRECRAWL_API_KEY}',
firecrawlApiUrl: '${FIRECRAWL_API_URL}',
jinaApiKey: '${JINA_API_KEY}',
cohereApiKey: '${COHERE_API_KEY}',
safeSearch: true,
};
// Mock successful authentication
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
result[field] =
field === 'FIRECRAWL_API_URL' ? 'https://api.firecrawl.dev' : 'test-api-key';
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
expect(result.authenticated).toBe(true);
// Should have checked all categories
expect(result.authTypes).toHaveLength(3);
// Should have set values for all categories
expect(result.authResult.searchProvider).toBeDefined();
expect(result.authResult.scraperType).toBeDefined();
expect(result.authResult.rerankerType).toBeDefined();
});
it('should correctly identify authTypes based on specific configurations', async () => {
// Set up environment variables for system-defined auth
const originalEnv = process.env;
process.env = {
...originalEnv,
SERPER_API_KEY: 'system-serper-key',
FIRECRAWL_API_KEY: 'system-firecrawl-key',
FIRECRAWL_API_URL: 'https://api.firecrawl.dev',
JINA_API_KEY: 'system-jina-key',
COHERE_API_KEY: 'system-cohere-key',
};
// Initialize webSearchConfig with environment variable references
const webSearchConfig: TCustomConfig['webSearch'] = {
serperApiKey: '${SERPER_API_KEY}',
firecrawlApiKey: '${FIRECRAWL_API_KEY}',
firecrawlApiUrl: '${FIRECRAWL_API_URL}',
jinaApiKey: '${JINA_API_KEY}',
cohereApiKey: '${COHERE_API_KEY}',
safeSearch: true,
// Specify which services to use
searchProvider: 'serper' as SearchProviders,
scraperType: 'firecrawl' as ScraperTypes,
rerankerType: 'jina' as RerankerTypes,
};
// Mock loadAuthValues to return the actual values
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
if (field === 'SERPER_API_KEY') {
result[field] = 'system-serper-key';
} else if (field === 'FIRECRAWL_API_KEY') {
result[field] = 'system-firecrawl-key';
} else if (field === 'FIRECRAWL_API_URL') {
result[field] = 'https://api.firecrawl.dev';
} else if (field === 'JINA_API_KEY') {
result[field] = 'system-jina-key';
} else if (field === 'COHERE_API_KEY') {
result[field] = 'system-cohere-key';
}
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
// Verify that all required fields are present in the authResult
expect(result.authResult).toHaveProperty('serperApiKey');
expect(result.authResult).toHaveProperty('firecrawlApiKey');
expect(result.authResult).toHaveProperty('firecrawlApiUrl');
expect(result.authResult).toHaveProperty('jinaApiKey');
expect(result.authResult).toHaveProperty('searchProvider');
expect(result.authResult).toHaveProperty('scraperType');
expect(result.authResult).toHaveProperty('rerankerType');
expect(result.authenticated).toBe(true);
// Verify authTypes for each category
const providersAuthType = result.authTypes.find(
([category]) => category === 'providers',
)?.[1];
const scrapersAuthType = result.authTypes.find(([category]) => category === 'scrapers')?.[1];
const rerankersAuthType = result.authTypes.find(
([category]) => category === 'rerankers',
)?.[1];
// All should be system-defined since we're using environment variables
expect(providersAuthType).toBe(AuthType.SYSTEM_DEFINED);
expect(scrapersAuthType).toBe(AuthType.SYSTEM_DEFINED);
expect(rerankersAuthType).toBe(AuthType.SYSTEM_DEFINED);
// Verify the authResult contains the correct values
expect(result.authResult).toHaveProperty('serperApiKey', 'system-serper-key');
expect(result.authResult).toHaveProperty('firecrawlApiKey', 'system-firecrawl-key');
expect(result.authResult).toHaveProperty('firecrawlApiUrl', 'https://api.firecrawl.dev');
expect(result.authResult).toHaveProperty('jinaApiKey', 'system-jina-key');
expect(result.authResult).toHaveProperty('searchProvider', 'serper');
expect(result.authResult).toHaveProperty('scraperType', 'firecrawl');
expect(result.authResult).toHaveProperty('rerankerType', 'jina');
// Restore original env
process.env = originalEnv;
});
it('should handle custom variable names in environment variables', async () => {
// Set up environment variables with custom names
const originalEnv = process.env;
process.env = {
...originalEnv,
CUSTOM_SERPER_KEY: 'custom-serper-key',
CUSTOM_FIRECRAWL_KEY: 'custom-firecrawl-key',
CUSTOM_FIRECRAWL_URL: 'https://custom.firecrawl.dev',
CUSTOM_JINA_KEY: 'custom-jina-key',
CUSTOM_COHERE_KEY: 'custom-cohere-key',
};
// Initialize webSearchConfig with custom variable names
const webSearchConfig: TCustomConfig['webSearch'] = {
serperApiKey: '${CUSTOM_SERPER_KEY}',
firecrawlApiKey: '${CUSTOM_FIRECRAWL_KEY}',
firecrawlApiUrl: '${CUSTOM_FIRECRAWL_URL}',
jinaApiKey: '${CUSTOM_JINA_KEY}',
cohereApiKey: '${CUSTOM_COHERE_KEY}',
safeSearch: true,
// Specify which services to use
searchProvider: 'serper' as SearchProviders,
scraperType: 'firecrawl' as ScraperTypes,
rerankerType: 'jina' as RerankerTypes, // Only Jina will be checked
};
// Mock loadAuthValues to return the actual values
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
if (field === 'CUSTOM_SERPER_KEY') {
result[field] = 'custom-serper-key';
} else if (field === 'CUSTOM_FIRECRAWL_KEY') {
result[field] = 'custom-firecrawl-key';
} else if (field === 'CUSTOM_FIRECRAWL_URL') {
result[field] = 'https://custom.firecrawl.dev';
} else if (field === 'CUSTOM_JINA_KEY') {
result[field] = 'custom-jina-key';
}
// Note: CUSTOM_COHERE_KEY is not checked because we specified jina as rerankerType
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
expect(result.authenticated).toBe(true);
// Verify the authResult contains the correct values from custom variables
expect(result.authResult).toHaveProperty('serperApiKey', 'custom-serper-key');
expect(result.authResult).toHaveProperty('firecrawlApiKey', 'custom-firecrawl-key');
expect(result.authResult).toHaveProperty('firecrawlApiUrl', 'https://custom.firecrawl.dev');
expect(result.authResult).toHaveProperty('jinaApiKey', 'custom-jina-key');
// cohereApiKey should not be in the result since we specified jina as rerankerType
expect(result.authResult).not.toHaveProperty('cohereApiKey');
// Verify the service types are set correctly
expect(result.authResult).toHaveProperty('searchProvider', 'serper');
expect(result.authResult).toHaveProperty('scraperType', 'firecrawl');
expect(result.authResult).toHaveProperty('rerankerType', 'jina');
// Restore original env
process.env = originalEnv;
});
it('should always return authTypes array with exactly 3 categories', async () => {
// Set up environment variables
const originalEnv = process.env;
process.env = {
...originalEnv,
SERPER_API_KEY: 'test-key',
FIRECRAWL_API_KEY: 'test-key',
FIRECRAWL_API_URL: 'https://api.firecrawl.dev',
JINA_API_KEY: 'test-key',
};
// Initialize webSearchConfig with environment variable references
const webSearchConfig: TCustomConfig['webSearch'] = {
serperApiKey: '${SERPER_API_KEY}',
firecrawlApiKey: '${FIRECRAWL_API_KEY}',
firecrawlApiUrl: '${FIRECRAWL_API_URL}',
jinaApiKey: '${JINA_API_KEY}',
cohereApiKey: '${COHERE_API_KEY}',
safeSearch: true,
};
// Mock loadAuthValues to return values
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
result[field] = field === 'FIRECRAWL_API_URL' ? 'https://api.firecrawl.dev' : 'test-key';
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
// Get the number of categories from webSearchAuth
const expectedCategoryCount = Object.keys(webSearchAuth).length;
// Verify authTypes array structure
expect(result.authTypes).toHaveLength(expectedCategoryCount);
// Verify each category exists exactly once
const categories = result.authTypes.map(([category]) => category);
Object.keys(webSearchAuth).forEach((category) => {
expect(categories).toContain(category);
});
// Verify no duplicate categories
expect(new Set(categories).size).toBe(expectedCategoryCount);
// Verify each entry has the correct format [category, AuthType]
result.authTypes.forEach(([category, authType]) => {
expect(typeof category).toBe('string');
expect([AuthType.SYSTEM_DEFINED, AuthType.USER_PROVIDED]).toContain(authType);
});
// Restore original env
process.env = originalEnv;
});
it('should maintain authTypes array structure even when authentication fails', async () => {
// Set up environment variables
const originalEnv = process.env;
process.env = {
...originalEnv,
SERPER_API_KEY: 'test-key',
// Missing other keys to force authentication failure
};
// Initialize webSearchConfig with environment variable references
const webSearchConfig: TCustomConfig['webSearch'] = {
serperApiKey: '${SERPER_API_KEY}',
firecrawlApiKey: '${FIRECRAWL_API_KEY}',
firecrawlApiUrl: '${FIRECRAWL_API_URL}',
jinaApiKey: '${JINA_API_KEY}',
cohereApiKey: '${COHERE_API_KEY}',
safeSearch: true,
};
// Mock loadAuthValues to return partial values
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
if (field === 'SERPER_API_KEY') {
result[field] = 'test-key';
}
// Other fields are intentionally missing
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
// Get the number of categories from webSearchAuth
const expectedCategoryCount = Object.keys(webSearchAuth).length;
// Verify authentication failed
expect(result.authenticated).toBe(false);
// Verify authTypes array structure is maintained
expect(result.authTypes).toHaveLength(expectedCategoryCount);
// Verify each category exists exactly once
const categories = result.authTypes.map(([category]) => category);
Object.keys(webSearchAuth).forEach((category) => {
expect(categories).toContain(category);
});
// Verify no duplicate categories
expect(new Set(categories).size).toBe(expectedCategoryCount);
// Verify each entry has the correct format [category, AuthType]
result.authTypes.forEach(([category, authType]) => {
expect(typeof category).toBe('string');
expect([AuthType.SYSTEM_DEFINED, AuthType.USER_PROVIDED]).toContain(authType);
});
// Restore original env
process.env = originalEnv;
});
});
describe('webSearchAuth', () => {
it('should have the expected structure', () => {
// Check that all expected categories exist
expect(webSearchAuth).toHaveProperty('providers');
expect(webSearchAuth).toHaveProperty('scrapers');
expect(webSearchAuth).toHaveProperty('rerankers');
// Check providers
expect(webSearchAuth.providers).toHaveProperty('serper');
expect(webSearchAuth.providers.serper).toHaveProperty('serperApiKey', 1);
// Check scrapers
expect(webSearchAuth.scrapers).toHaveProperty('firecrawl');
expect(webSearchAuth.scrapers.firecrawl).toHaveProperty('firecrawlApiKey', 1);
expect(webSearchAuth.scrapers.firecrawl).toHaveProperty('firecrawlApiUrl', 0);
// Check rerankers
expect(webSearchAuth.rerankers).toHaveProperty('jina');
expect(webSearchAuth.rerankers.jina).toHaveProperty('jinaApiKey', 1);
expect(webSearchAuth.rerankers).toHaveProperty('cohere');
expect(webSearchAuth.rerankers.cohere).toHaveProperty('cohereApiKey', 1);
});
it('should mark required keys with value 1', () => {
// All keys with value 1 are required
expect(webSearchAuth.providers.serper.serperApiKey).toBe(1);
expect(webSearchAuth.scrapers.firecrawl.firecrawlApiKey).toBe(1);
expect(webSearchAuth.rerankers.jina.jinaApiKey).toBe(1);
expect(webSearchAuth.rerankers.cohere.cohereApiKey).toBe(1);
});
it('should mark optional keys with value 0', () => {
// Keys with value 0 are optional
expect(webSearchAuth.scrapers.firecrawl.firecrawlApiUrl).toBe(0);
});
});
describe('loadWebSearchAuth with specific services', () => {
// Common test variables
const userId = 'test-user-id';
let mockLoadAuthValues: jest.Mock;
beforeEach(() => {
// Reset mocks before each test
jest.clearAllMocks();
// Initialize the mock function
mockLoadAuthValues = jest.fn();
});
it('should only check the specified searchProvider', async () => {
// Initialize a webSearchConfig with a specific searchProvider
const webSearchConfig: TCustomConfig['webSearch'] = {
serperApiKey: '${SERPER_API_KEY}',
firecrawlApiKey: '${FIRECRAWL_API_KEY}',
firecrawlApiUrl: '${FIRECRAWL_API_URL}',
jinaApiKey: '${JINA_API_KEY}',
cohereApiKey: '${COHERE_API_KEY}',
safeSearch: true,
searchProvider: 'serper' as SearchProviders,
};
// Mock successful authentication
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
result[field] =
field === 'FIRECRAWL_API_URL' ? 'https://api.firecrawl.dev' : 'test-api-key';
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
expect(result.authenticated).toBe(true);
expect(result.authResult.searchProvider).toBe('serper');
// Verify that only SERPER_API_KEY was requested for the providers category
const providerCalls = mockLoadAuthValues.mock.calls.filter((call) =>
call[0].authFields.includes('SERPER_API_KEY'),
);
expect(providerCalls.length).toBe(1);
});
it('should only check the specified scraperType', async () => {
// Initialize a webSearchConfig with a specific scraperType
const webSearchConfig: TCustomConfig['webSearch'] = {
serperApiKey: '${SERPER_API_KEY}',
firecrawlApiKey: '${FIRECRAWL_API_KEY}',
firecrawlApiUrl: '${FIRECRAWL_API_URL}',
jinaApiKey: '${JINA_API_KEY}',
cohereApiKey: '${COHERE_API_KEY}',
safeSearch: true,
scraperType: 'firecrawl' as ScraperTypes,
};
// Mock successful authentication
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
result[field] =
field === 'FIRECRAWL_API_URL' ? 'https://api.firecrawl.dev' : 'test-api-key';
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
expect(result.authenticated).toBe(true);
expect(result.authResult.scraperType).toBe('firecrawl');
// Verify that only FIRECRAWL_API_KEY and FIRECRAWL_API_URL were requested for the scrapers category
const scraperCalls = mockLoadAuthValues.mock.calls.filter((call) =>
call[0].authFields.includes('FIRECRAWL_API_KEY'),
);
expect(scraperCalls.length).toBe(1);
});
it('should only check the specified rerankerType', async () => {
// Initialize a webSearchConfig with a specific rerankerType
const webSearchConfig: TCustomConfig['webSearch'] = {
serperApiKey: '${SERPER_API_KEY}',
firecrawlApiKey: '${FIRECRAWL_API_KEY}',
firecrawlApiUrl: '${FIRECRAWL_API_URL}',
jinaApiKey: '${JINA_API_KEY}',
cohereApiKey: '${COHERE_API_KEY}',
safeSearch: true,
rerankerType: 'jina' as RerankerTypes,
};
// Mock successful authentication
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
result[field] =
field === 'FIRECRAWL_API_URL' ? 'https://api.firecrawl.dev' : 'test-api-key';
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
expect(result.authenticated).toBe(true);
expect(result.authResult.rerankerType).toBe('jina');
// Verify that only JINA_API_KEY was requested for the rerankers category
const rerankerCalls = mockLoadAuthValues.mock.calls.filter((call) =>
call[0].authFields.includes('JINA_API_KEY'),
);
expect(rerankerCalls.length).toBe(1);
// Verify that COHERE_API_KEY was not requested
const cohereCalls = mockLoadAuthValues.mock.calls.filter((call) =>
call[0].authFields.includes('COHERE_API_KEY'),
);
expect(cohereCalls.length).toBe(0);
});
it('should handle invalid specified service gracefully', async () => {
// Initialize a webSearchConfig with an invalid searchProvider
const webSearchConfig: TCustomConfig['webSearch'] = {
serperApiKey: '${SERPER_API_KEY}',
firecrawlApiKey: '${FIRECRAWL_API_KEY}',
firecrawlApiUrl: '${FIRECRAWL_API_URL}',
jinaApiKey: '${JINA_API_KEY}',
cohereApiKey: '${COHERE_API_KEY}',
safeSearch: true,
searchProvider: 'invalid-provider' as SearchProviders,
};
// Mock successful authentication
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
result[field] =
field === 'FIRECRAWL_API_URL' ? 'https://api.firecrawl.dev' : 'test-api-key';
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
// Should fail because the specified provider doesn't exist
expect(result.authenticated).toBe(false);
});
it('should fail authentication when specified service is not authenticated but others are', async () => {
// Initialize a webSearchConfig with a specific rerankerType (jina)
const webSearchConfig: TCustomConfig['webSearch'] = {
serperApiKey: '${SERPER_API_KEY}',
firecrawlApiKey: '${FIRECRAWL_API_KEY}',
firecrawlApiUrl: '${FIRECRAWL_API_URL}',
jinaApiKey: '${JINA_API_KEY}',
cohereApiKey: '${COHERE_API_KEY}',
safeSearch: true,
rerankerType: 'jina' as RerankerTypes,
};
// Mock authentication where cohere is authenticated but jina is not
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
// Authenticate all fields except JINA_API_KEY
if (field !== 'JINA_API_KEY') {
result[field] =
field === 'FIRECRAWL_API_URL' ? 'https://api.firecrawl.dev' : 'test-api-key';
}
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
// Should fail because the specified reranker (jina) is not authenticated
// even though another reranker (cohere) might be authenticated
expect(result.authenticated).toBe(false);
// Verify that JINA_API_KEY was requested
const jinaApiKeyCalls = mockLoadAuthValues.mock.calls.filter((call) =>
call[0].authFields.includes('JINA_API_KEY'),
);
expect(jinaApiKeyCalls.length).toBe(1);
// Verify that COHERE_API_KEY was not requested since we specified jina
const cohereApiKeyCalls = mockLoadAuthValues.mock.calls.filter((call) =>
call[0].authFields.includes('COHERE_API_KEY'),
);
expect(cohereApiKeyCalls.length).toBe(0);
});
it('should check all services if none are specified', async () => {
// Initialize a webSearchConfig without specific services
const webSearchConfig: TCustomConfig['webSearch'] = {
serperApiKey: '${SERPER_API_KEY}',
firecrawlApiKey: '${FIRECRAWL_API_KEY}',
firecrawlApiUrl: '${FIRECRAWL_API_URL}',
jinaApiKey: '${JINA_API_KEY}',
cohereApiKey: '${COHERE_API_KEY}',
safeSearch: true,
};
// Mock successful authentication
mockLoadAuthValues.mockImplementation(({ authFields }) => {
const result: Record<string, string> = {};
authFields.forEach((field) => {
result[field] =
field === 'FIRECRAWL_API_URL' ? 'https://api.firecrawl.dev' : 'test-api-key';
});
return Promise.resolve(result);
});
const result = await loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues: mockLoadAuthValues,
});
expect(result.authenticated).toBe(true);
// Should have checked all categories
expect(result.authTypes).toHaveLength(3);
// Should have set values for all categories
expect(result.authResult.searchProvider).toBeDefined();
expect(result.authResult.scraperType).toBeDefined();
expect(result.authResult.rerankerType).toBeDefined();
});
});
});

53
packages/data-provider/src/config.ts
View file

@ -167,6 +167,7 @@ export enum AgentCapabilities {
end_after_tools = 'end_after_tools',
execute_code = 'execute_code',
file_search = 'file_search',
web_search = 'web_search',
artifacts = 'artifacts',
actions = 'actions',
tools = 'tools',
@ -245,11 +246,12 @@ export const agentsEndpointSChema = baseEndpointSchema.merge(
.default([
AgentCapabilities.execute_code,
AgentCapabilities.file_search,
AgentCapabilities.web_search,
AgentCapabilities.artifacts,
AgentCapabilities.actions,
AgentCapabilities.tools,
AgentCapabilities.ocr,
AgentCapabilities.chain,
AgentCapabilities.ocr,
]),
}),
);
@ -494,6 +496,7 @@ export const intefaceSchema = z
agents: z.boolean().optional(),
temporaryChat: z.boolean().optional(),
runCode: z.boolean().optional(),
webSearch: z.boolean().optional(),
})
.default({
endpointsMenu: true,
@ -507,6 +510,7 @@ export const intefaceSchema = z
agents: true,
temporaryChat: true,
runCode: true,
webSearch: true,
});
export type TInterfaceConfig = z.infer<typeof intefaceSchema>;
@ -567,6 +571,11 @@ export type TStartupConfig = {
instanceProjectId: string;
bundlerURL?: string;
staticBundlerURL?: string;
webSearch?: {
searchProvider?: SearchProviders;
scraperType?: ScraperTypes;
rerankerType?: RerankerTypes;
};
};
export enum OCRStrategy {
@ -574,10 +583,45 @@ export enum OCRStrategy {
CUSTOM_OCR = 'custom_ocr',
}
export enum SearchCategories {
PROVIDERS = 'providers',
SCRAPERS = 'scrapers',
RERANKERS = 'rerankers',
}
export enum SearchProviders {
SERPER = 'serper',
SEARXNG = 'searxng',
}
export enum ScraperTypes {
FIRECRAWL = 'firecrawl',
SERPER = 'serper',
}
export enum RerankerTypes {
JINA = 'jina',
COHERE = 'cohere',
}
export const webSearchSchema = z.object({
serperApiKey: z.string().optional().default('${SERPER_API_KEY}'),
firecrawlApiKey: z.string().optional().default('${FIRECRAWL_API_KEY}'),
firecrawlApiUrl: z.string().optional().default('${FIRECRAWL_API_URL}'),
jinaApiKey: z.string().optional().default('${JINA_API_KEY}'),
cohereApiKey: z.string().optional().default('${COHERE_API_KEY}'),
searchProvider: z.nativeEnum(SearchProviders).optional(),
scraperType: z.nativeEnum(ScraperTypes).optional(),
rerankerType: z.nativeEnum(RerankerTypes).optional(),
safeSearch: z.boolean().default(true),
});
export type TWebSearchConfig = z.infer<typeof webSearchSchema>;
export const ocrSchema = z.object({
mistralModel: z.string().optional(),
apiKey: z.string().optional().default('OCR_API_KEY'),
baseURL: z.string().optional().default('OCR_BASEURL'),
apiKey: z.string().optional().default('${OCR_API_KEY}'),
baseURL: z.string().optional().default('${OCR_BASEURL}'),
strategy: z.nativeEnum(OCRStrategy).default(OCRStrategy.MISTRAL_OCR),
});
@ -597,6 +641,7 @@ export const configSchema = z.object({
version: z.string(),
cache: z.boolean().default(true),
ocr: ocrSchema.optional(),
webSearch: webSearchSchema.optional(),
secureImageLinks: z.boolean().optional(),
imageOutputType: z.nativeEnum(EImageOutputType).default(EImageOutputType.PNG),
includedTools: z.array(z.string()).optional(),
@ -1336,6 +1381,8 @@ export enum LocalStorageKeys {
LAST_MCP_ = 'LAST_MCP_',
/** Last checked toggle for Code Interpreter API per conversation ID */
LAST_CODE_TOGGLE_ = 'LAST_CODE_TOGGLE_',
/** Last checked toggle for Web Search per conversation ID */
LAST_WEB_SEARCH_TOGGLE_ = 'LAST_WEB_SEARCH_TOGGLE_',
}
export enum ForkOptions {

3
packages/data-provider/src/index.ts
View file

@ -14,6 +14,8 @@ export * from './generate';
export * from './models';
/* mcp */
export * from './mcp';
/* web search */
export * from './web';
/* RBAC */
export * from './permissions';
export * from './roles';
@ -25,6 +27,7 @@ export * from './types/files';
export * from './types/mutations';
export * from './types/queries';
export * from './types/runs';
export * from './types/web';
/* query/mutation keys */
export * from './keys';
/* api call helpers */

10
packages/data-provider/src/permissions.ts
View file

@ -28,6 +28,10 @@ export enum PermissionTypes {
* Type for using the "Run Code" LC Code Interpreter API feature
*/
RUN_CODE = 'RUN_CODE',
/**
* Type for using the "Web Search" feature
*/
WEB_SEARCH = 'WEB_SEARCH',
}
/**
@ -79,6 +83,11 @@ export const runCodePermissionsSchema = z.object({
});
export type TRunCodePermissions = z.infer<typeof runCodePermissionsSchema>;
export const webSearchPermissionsSchema = z.object({
[Permissions.USE]: z.boolean().default(true),
});
export type TWebSearchPermissions = z.infer<typeof webSearchPermissionsSchema>;
// Define a single permissions schema that holds all permission types.
export const permissionsSchema = z.object({
[PermissionTypes.PROMPTS]: promptPermissionsSchema,
@ -87,4 +96,5 @@ export const permissionsSchema = z.object({
[PermissionTypes.MULTI_CONVO]: multiConvoPermissionsSchema,
[PermissionTypes.TEMPORARY_CHAT]: temporaryChatPermissionsSchema,
[PermissionTypes.RUN_CODE]: runCodePermissionsSchema,
[PermissionTypes.WEB_SEARCH]: webSearchPermissionsSchema,
});

8
packages/data-provider/src/roles.ts
View file

@ -6,6 +6,7 @@ import {
agentPermissionsSchema,
promptPermissionsSchema,
runCodePermissionsSchema,
webSearchPermissionsSchema,
bookmarkPermissionsSchema,
multiConvoPermissionsSchema,
temporaryChatPermissionsSchema,
@ -62,6 +63,9 @@ const defaultRolesSchema = z.object({
[PermissionTypes.RUN_CODE]: runCodePermissionsSchema.extend({
[Permissions.USE]: z.boolean().default(true),
}),
[PermissionTypes.WEB_SEARCH]: webSearchPermissionsSchema.extend({
[Permissions.USE]: z.boolean().default(true),
}),
}),
}),
[SystemRoles.USER]: roleSchema.extend({
@ -96,6 +100,9 @@ export const roleDefaults = defaultRolesSchema.parse({
[PermissionTypes.RUN_CODE]: {
[Permissions.USE]: true,
},
[PermissionTypes.WEB_SEARCH]: {
[Permissions.USE]: true,
},
},
},
[SystemRoles.USER]: {
@ -107,6 +114,7 @@ export const roleDefaults = defaultRolesSchema.parse({
[PermissionTypes.MULTI_CONVO]: {},
[PermissionTypes.TEMPORARY_CHAT]: {},
[PermissionTypes.RUN_CODE]: {},
[PermissionTypes.WEB_SEARCH]: {},
},
},
});

13
packages/data-provider/src/schemas.ts
View file

@ -1,6 +1,7 @@
import { z } from 'zod';
import { Tools } from './types/assistants';
import type { TMessageContentParts, FunctionTool, FunctionToolCall } from './types/assistants';
import type { SearchResultData } from './types/web';
import type { TEphemeralAgent } from './types';
import type { TFile } from './types/files';
@ -101,7 +102,8 @@ export const isEphemeralAgent = (
}
const hasMCPSelected = (ephemeralAgent?.mcp?.length ?? 0) > 0;
const hasCodeSelected = (ephemeralAgent?.execute_code ?? false) === true;
return hasMCPSelected || hasCodeSelected;
const hasSearchSelected = (ephemeralAgent?.web_search ?? false) === true;
return hasMCPSelected || hasCodeSelected || hasSearchSelected;
};
export const isParamEndpoint = (
@ -177,6 +179,7 @@ export const defaultAgentFormValues = {
recursion_limit: undefined,
[Tools.execute_code]: false,
[Tools.file_search]: false,
[Tools.web_search]: false,
};
export const ImageVisionTool: FunctionTool = {
@ -517,7 +520,13 @@ export const tMessageSchema = z.object({
iconURL: z.string().nullable().optional(),
});
export type TAttachmentMetadata = { messageId: string; toolCallId: string };
export type TAttachmentMetadata = {
type?: Tools;
messageId: string;
toolCallId: string;
[Tools.web_search]?: SearchResultData;
};
export type TAttachment =
| (TFile & TAttachmentMetadata)
| (Pick<TFile, 'filename' | 'filepath' | 'conversationId'> & {

5
packages/data-provider/src/types.ts
View file

@ -44,6 +44,7 @@ export type TEndpointOption = {
export type TEphemeralAgent = {
mcp?: string[];
web_search?: boolean;
execute_code?: boolean;
};
@ -79,7 +80,7 @@ export type EventSubmission = Omit<TSubmission, 'initialResponse'> & { initialRe
export type TPluginAction = {
pluginKey: string;
action: 'install' | 'uninstall';
auth?: unknown;
auth?: Partial<Record<string, string>>;
isEntityTool?: boolean;
};
@ -89,7 +90,7 @@ export type TUpdateUserPlugins = {
isEntityTool?: boolean;
pluginKey: string;
action: string;
auth?: unknown;
auth?: Partial<Record<string, string | null>>;
};
// TODO `label` needs to be changed to the proper `TranslationKeys`

1
packages/data-provider/src/types/assistants.ts
View file

@ -19,6 +19,7 @@ export enum Tools {
execute_code = 'execute_code',
code_interpreter = 'code_interpreter',
file_search = 'file_search',
web_search = 'web_search',
retrieval = 'retrieval',
function = 'function',
}

6
packages/data-provider/src/types/mutations.ts
View file

@ -132,9 +132,9 @@ export type UpdateAgentVariables = {
export type DuplicateVersionError = Error & {
statusCode?: number;
details?: {
duplicateVersion?: any;
versionIndex?: number
}
duplicateVersion?: unknown;
versionIndex?: number;
};
};
export type UpdateAgentMutationOptions = MutationOptions<

6
packages/data-provider/src/types/queries.ts
View file

@ -101,7 +101,11 @@ export type AllPromptGroupsResponse = t.TPromptGroup[];
export type ConversationTagsResponse = s.TConversationTag[];
export type VerifyToolAuthParams = { toolId: string };
export type VerifyToolAuthResponse = { authenticated: boolean; message?: string | s.AuthType };
export type VerifyToolAuthResponse = {
authenticated: boolean;
message?: string | s.AuthType;
authTypes?: [string, s.AuthType][];
};
export type GetToolCallParams = { conversationId: string };
export type ToolCallResults = a.ToolCallResult[];

593
packages/data-provider/src/types/web.ts Normal file
View file

@ -0,0 +1,593 @@
import type { Logger as WinstonLogger } from 'winston';
import type { RunnableConfig } from '@langchain/core/runnables';
export type SearchRefType = 'search' | 'image' | 'news' | 'video' | 'ref';
export enum DATE_RANGE {
PAST_HOUR = 'h',
PAST_24_HOURS = 'd',
PAST_WEEK = 'w',
PAST_MONTH = 'm',
PAST_YEAR = 'y',
}
export type SearchProvider = 'serper' | 'searxng';
export type RerankerType = 'infinity' | 'jina' | 'cohere' | 'none';
export interface Highlight {
score: number;
text: string;
references?: UsedReferences;
}
export type ProcessedSource = {
content?: string;
attribution?: string;
references?: References;
highlights?: Highlight[];
processed?: boolean;
};
export type ProcessedOrganic = OrganicResult & ProcessedSource;
export type ProcessedTopStory = TopStoryResult & ProcessedSource;
export type ValidSource = ProcessedOrganic | ProcessedTopStory;
export type ResultReference = {
link: string;
type: 'link' | 'image' | 'video';
title?: string;
attribution?: string;
};
export interface SearchResultData {
turn?: number;
organic?: ProcessedOrganic[];
topStories?: ProcessedTopStory[];
images?: ImageResult[];
videos?: VideoResult[];
places?: PlaceResult[];
news?: NewsResult[];
shopping?: ShoppingResult[];
knowledgeGraph?: KnowledgeGraphResult;
answerBox?: AnswerBoxResult;
peopleAlsoAsk?: PeopleAlsoAskResult[];
relatedSearches?: Array<{ query: string }>;
references?: ResultReference[];
error?: string;
}
export interface SearchResult {
data?: SearchResultData;
error?: string;
success: boolean;
}
export interface Source {
link: string;
html?: string;
title?: string;
snippet?: string;
date?: string;
}
export interface SearchConfig {
searchProvider?: SearchProvider;
serperApiKey?: string;
searxngInstanceUrl?: string;
searxngApiKey?: string;
}
export type References = {
links: MediaReference[];
images: MediaReference[];
videos: MediaReference[];
};
export interface ScrapeResult {
url: string;
error?: boolean;
content: string;
attribution?: string;
references?: References;
highlights?: Highlight[];
}
export interface ProcessSourcesConfig {
topResults?: number;
strategies?: string[];
filterContent?: boolean;
reranker?: unknown;
logger?: Logger;
}
export interface FirecrawlConfig {
firecrawlApiKey?: string;
firecrawlApiUrl?: string;
firecrawlFormats?: string[];
}
export interface ScraperContentResult {
content: string;
}
export interface ScraperExtractionResult {
no_extraction: ScraperContentResult;
}
export interface JinaRerankerResult {
index: number;
relevance_score: number;
document?: string | { text: string };
}
export interface JinaRerankerResponse {
model: string;
usage: {
total_tokens: number;
};
results: JinaRerankerResult[];
}
export interface CohereRerankerResult {
index: number;
relevance_score: number;
}
export interface CohereRerankerResponse {
results: CohereRerankerResult[];
id: string;
meta: {
api_version: {
version: string;
is_experimental: boolean;
};
billed_units: {
search_units: number;
};
};
}
export type SafeSearchLevel = 0 | 1 | 2;
export type Logger = WinstonLogger;
export interface SearchToolConfig extends SearchConfig, ProcessSourcesConfig, FirecrawlConfig {
logger?: Logger;
safeSearch?: SafeSearchLevel;
jinaApiKey?: string;
cohereApiKey?: string;
rerankerType?: RerankerType;
onSearchResults?: (results: SearchResult, runnableConfig?: RunnableConfig) => void;
onGetHighlights?: (link: string) => void;
}
export interface MediaReference {
originalUrl: string;
title?: string;
text?: string;
}
export type UsedReferences = {
type: 'link' | 'image' | 'video';
originalIndex: number;
reference: MediaReference;
}[];
/** Firecrawl */
export interface FirecrawlScrapeOptions {
formats?: string[];
includeTags?: string[];
excludeTags?: string[];
headers?: Record<string, string>;
waitFor?: number;
timeout?: number;
}
export interface ScrapeMetadata {
// Core source information
sourceURL?: string;
url?: string;
scrapeId?: string;
statusCode?: number;
// Basic metadata
title?: string;
description?: string;
language?: string;
favicon?: string;
viewport?: string;
robots?: string;
'theme-color'?: string;
// Open Graph metadata
'og:url'?: string;
'og:title'?: string;
'og:description'?: string;
'og:type'?: string;
'og:image'?: string;
'og:image:width'?: string;
'og:image:height'?: string;
'og:site_name'?: string;
ogUrl?: string;
ogTitle?: string;
ogDescription?: string;
ogImage?: string;
ogSiteName?: string;
// Article metadata
'article:author'?: string;
'article:published_time'?: string;
'article:modified_time'?: string;
'article:section'?: string;
'article:tag'?: string;
'article:publisher'?: string;
publishedTime?: string;
modifiedTime?: string;
// Twitter metadata
'twitter:site'?: string | boolean | number | null;
'twitter:creator'?: string;
'twitter:card'?: string;
'twitter:image'?: string;
'twitter:dnt'?: string;
'twitter:app:name:iphone'?: string;
'twitter:app:id:iphone'?: string;
'twitter:app:url:iphone'?: string;
'twitter:app:name:ipad'?: string;
'twitter:app:id:ipad'?: string;
'twitter:app:url:ipad'?: string;
'twitter:app:name:googleplay'?: string;
'twitter:app:id:googleplay'?: string;
'twitter:app:url:googleplay'?: string;
// Facebook metadata
'fb:app_id'?: string;
// App links
'al:ios:url'?: string;
'al:ios:app_name'?: string;
'al:ios:app_store_id'?: string;
// Allow for additional properties that might be present
[key: string]: string | number | boolean | null | undefined;
}
export interface FirecrawlScrapeResponse {
success: boolean;
data?: {
markdown?: string;
html?: string;
rawHtml?: string;
screenshot?: string;
links?: string[];
metadata?: ScrapeMetadata;
};
error?: string;
}
export interface FirecrawlScraperConfig {
apiKey?: string;
apiUrl?: string;
formats?: string[];
timeout?: number;
logger?: Logger;
}
export type GetSourcesParams = {
query: string;
date?: DATE_RANGE;
country?: string;
numResults?: number;
safeSearch?: SearchToolConfig['safeSearch'];
images?: boolean;
videos?: boolean;
news?: boolean;
type?: 'search' | 'images' | 'videos' | 'news';
};
/** Serper API */
export interface VideoResult {
title?: string;
link?: string;
snippet?: string;
imageUrl?: string;
duration?: string;
source?: string;
channel?: string;
date?: string;
position?: number;
}
export interface PlaceResult {
position?: number;
name?: string;
address?: string;
latitude?: number;
longitude?: number;
rating?: number;
ratingCount?: number;
category?: string;
identifier?: string;
}
export interface NewsResult {
title?: string;
link?: string;
snippet?: string;
date?: string;
source?: string;
imageUrl?: string;
position?: number;
}
export interface ShoppingResult {
title?: string;
source?: string;
link?: string;
price?: string;
delivery?: string;
imageUrl?: string;
rating?: number;
ratingCount?: number;
offers?: string;
productId?: string;
position?: number;
}
export interface ScholarResult {
title?: string;
link?: string;
publicationInfo?: string;
snippet?: string;
year?: number;
citedBy?: number;
}
export interface ImageResult {
title?: string;
imageUrl?: string;
imageWidth?: number;
imageHeight?: number;
thumbnailUrl?: string;
thumbnailWidth?: number;
thumbnailHeight?: number;
source?: string;
domain?: string;
link?: string;
googleUrl?: string;
position?: number;
}
export interface SerperSearchPayload extends SerperSearchInput {
/**
* Search type/vertical
* Options: "search" (web), "images", "news", "places", "videos"
*/
type?: 'search' | 'images' | 'news' | 'places' | 'videos';
/**
* Starting index for search results pagination (used instead of page)
*/
start?: number;
/**
* Filtering for safe search
* Options: "off", "moderate", "active"
*/
safe?: 'off' | 'moderate' | 'active';
}
export type SerperSearchParameters = Pick<SerperSearchPayload, 'q' | 'type'> & {
engine: 'google';
};
export interface OrganicResult {
position?: number;
title?: string;
link: string;
snippet?: string;
date?: string;
sitelinks?: Array<{
title: string;
link: string;
}>;
}
export interface TopStoryResult {
title?: string;
link: string;
source?: string;
date?: string;
imageUrl?: string;
}
export interface KnowledgeGraphResult {
title?: string;
type?: string;
imageUrl?: string;
description?: string;
descriptionSource?: string;
descriptionLink?: string;
attributes?: Record<string, string>;
website?: string;
}
export interface AnswerBoxResult {
title?: string;
snippet?: string;
snippetHighlighted?: string[];
link?: string;
date?: string;
}
export interface PeopleAlsoAskResult {
question?: string;
snippet?: string;
title?: string;
link?: string;
}
export type RelatedSearches = Array<{ query: string }>;
export interface SerperSearchInput {
/**
* The search query string
*/
q: string;
/**
* Country code for localized results
* Examples: "us", "uk", "ca", "de", etc.
*/
gl?: string;
/**
* Interface language
* Examples: "en", "fr", "de", etc.
*/
hl?: string;
/**
* Number of results to return (up to 100)
*/
num?: number;
/**
* Specific location for contextual results
* Example: "New York, NY"
*/
location?: string;
/**
* Search autocorrection setting
*/
autocorrect?: boolean;
page?: number;
/**
* Date range for search results
* Options: "h" (past hour), "d" (past 24 hours), "w" (past week),
* "m" (past month), "y" (past year)
* `qdr:${DATE_RANGE}`
*/
tbs?: string;
}
export type SerperResultData = {
searchParameters: SerperSearchPayload;
organic?: OrganicResult[];
topStories?: TopStoryResult[];
images?: ImageResult[];
videos?: VideoResult[];
places?: PlaceResult[];
news?: NewsResult[];
shopping?: ShoppingResult[];
peopleAlsoAsk?: PeopleAlsoAskResult[];
relatedSearches?: RelatedSearches;
knowledgeGraph?: KnowledgeGraphResult;
answerBox?: AnswerBoxResult;
credits?: number;
};
/** SearXNG */
export interface SearxNGSearchPayload {
/**
* The search query string
* Supports syntax specific to different search engines
* Example: "site:github.com SearXNG"
*/
q: string;
/**
* Comma-separated list of search categories
* Example: "general,images,news"
*/
categories?: string;
/**
* Comma-separated list of search engines to use
* Example: "google,bing,duckduckgo"
*/
engines?: string;
/**
* Code of the language for search results
* Example: "en", "fr", "de", "es"
*/
language?: string;
/**
* Search page number
* Default: 1
*/
pageno?: number;
/**
* Time range filter for search results
* Options: "day", "month", "year"
*/
time_range?: 'day' | 'month' | 'year';
/**
* Output format of results
* Options: "json", "csv", "rss"
*/
format?: 'json' | 'csv' | 'rss';
/**
* Open search results on new tab
* Options: `0` (off), `1` (on)
*/
results_on_new_tab?: 0 | 1;
/**
* Proxy image results through SearxNG
* Options: true, false
*/
image_proxy?: boolean;
/**
* Service for autocomplete suggestions
* Options: "google", "dbpedia", "duckduckgo", "mwmbl",
* "startpage", "wikipedia", "stract", "swisscows", "qwant"
*/
autocomplete?: string;
/**
* Safe search filtering level
* Options: "0" (off), "1" (moderate), "2" (strict)
*/
safesearch?: 0 | 1 | 2;
/**
* Theme to use for results page
* Default: "simple" (other themes may be available per instance)
*/
theme?: string;
/**
* List of enabled plugins
* Default: "Hash_plugin,Self_Information,Tracker_URL_remover,Ahmia_blacklist"
*/
enabled_plugins?: string;
/**
* List of disabled plugins
*/
disabled_plugins?: string;
/**
* List of enabled engines
*/
enabled_engines?: string;
/**
* List of disabled engines
*/
disabled_engines?: string;
}
export interface SearXNGResult {
title?: string;
url?: string;
content?: string;
publishedDate?: string;
img_src?: string;
}
export type ProcessSourcesFields = {
result: SearchResult;
numElements: number;
query: string;
news: boolean;
proMode: boolean;
onGetHighlights: SearchToolConfig['onGetHighlights'];
};

10
packages/data-provider/src/utils.ts
View file

@ -1,5 +1,15 @@
export const envVarRegex = /^\${(.+)}$/;
/** Extracts the environment variable name from a template literal string */
export function extractVariableName(value: string): string | null {
if (!value) {
return null;
}
const match = value.trim().match(envVarRegex);
return match ? match[1] : null;
}
/** Extracts the value of an environment variable from a string. */
export function extractEnvVariable(value: string) {
if (!value) {

270
packages/data-provider/src/web.ts Normal file
View file

@ -0,0 +1,270 @@
import type {
ScraperTypes,
RerankerTypes,
TCustomConfig,
SearchProviders,
TWebSearchConfig,
} from './config';
import { extractVariableName } from './utils';
import { SearchCategories } from './config';
import { AuthType } from './schemas';
export function loadWebSearchConfig(
config: TCustomConfig['webSearch'],
): TCustomConfig['webSearch'] {
const serperApiKey = config?.serperApiKey ?? '${SERPER_API_KEY}';
const firecrawlApiKey = config?.firecrawlApiKey ?? '${FIRECRAWL_API_KEY}';
const firecrawlApiUrl = config?.firecrawlApiUrl ?? '${FIRECRAWL_API_URL}';
const jinaApiKey = config?.jinaApiKey ?? '${JINA_API_KEY}';
const cohereApiKey = config?.cohereApiKey ?? '${COHERE_API_KEY}';
const safeSearch = config?.safeSearch ?? true;
return {
...config,
safeSearch,
jinaApiKey,
cohereApiKey,
serperApiKey,
firecrawlApiKey,
firecrawlApiUrl,
};
}
export type TWebSearchKeys =
| 'serperApiKey'
| 'firecrawlApiKey'
| 'firecrawlApiUrl'
| 'jinaApiKey'
| 'cohereApiKey';
export type TWebSearchCategories =
| SearchCategories.PROVIDERS
| SearchCategories.SCRAPERS
| SearchCategories.RERANKERS;
export const webSearchAuth = {
providers: {
serper: {
serperApiKey: 1 as const,
},
},
scrapers: {
firecrawl: {
firecrawlApiKey: 1 as const,
/** Optional (0) */
firecrawlApiUrl: 0 as const,
},
},
rerankers: {
jina: { jinaApiKey: 1 as const },
cohere: { cohereApiKey: 1 as const },
},
};
/**
* Extracts all API keys from the webSearchAuth configuration object
*/
export const webSearchKeys: TWebSearchKeys[] = [];
// Iterate through each category (providers, scrapers, rerankers)
for (const category of Object.keys(webSearchAuth)) {
const categoryObj = webSearchAuth[category as TWebSearchCategories];
// Iterate through each service within the category
for (const service of Object.keys(categoryObj)) {
const serviceObj = categoryObj[service as keyof typeof categoryObj];
// Extract the API keys from the service
for (const key of Object.keys(serviceObj)) {
webSearchKeys.push(key as TWebSearchKeys);
}
}
}
export function extractWebSearchEnvVars({
keys,
config,
}: {
keys: TWebSearchKeys[];
config: TCustomConfig['webSearch'] | undefined;
}): string[] {
if (!config) {
return [];
}
const authFields: string[] = [];
const relevantKeys = keys.filter((k) => k in config);
for (const key of relevantKeys) {
const value = config[key];
if (typeof value === 'string') {
const varName = extractVariableName(value);
if (varName) {
authFields.push(varName);
}
}
}
return authFields;
}
/**
* Type for web search authentication result
*/
export interface WebSearchAuthResult {
/** Whether all required categories have at least one authenticated service */
authenticated: boolean;
/** Authentication type (user_provided or system_defined) by category */
authTypes: [TWebSearchCategories, AuthType][];
/** Original authentication values mapped to their respective keys */
authResult: Partial<TWebSearchConfig>;
}
/**
* Loads and verifies web search authentication values
* @param params - Authentication parameters
* @returns Authentication result
*/
export async function loadWebSearchAuth({
userId,
webSearchConfig,
loadAuthValues,
throwError = true,
}: {
userId: string;
webSearchConfig: TCustomConfig['webSearch'];
loadAuthValues: (params: {
userId: string;
authFields: string[];
optional?: Set<string>;
throwError?: boolean;
}) => Promise<Record<string, string>>;
throwError?: boolean;
}): Promise<WebSearchAuthResult> {
let authenticated = true;
const authResult: Partial<TWebSearchConfig> = {};
/** Type-safe iterator for the category-service combinations */
async function checkAuth<C extends TWebSearchCategories>(
category: C,
): Promise<[boolean, boolean]> {
type ServiceType = keyof (typeof webSearchAuth)[C];
let isUserProvided = false;
// Check if a specific service is specified in the config
let specificService: ServiceType | undefined;
if (category === SearchCategories.PROVIDERS && webSearchConfig?.searchProvider) {
specificService = webSearchConfig.searchProvider as unknown as ServiceType;
} else if (category === SearchCategories.SCRAPERS && webSearchConfig?.scraperType) {
specificService = webSearchConfig.scraperType as unknown as ServiceType;
} else if (category === SearchCategories.RERANKERS && webSearchConfig?.rerankerType) {
specificService = webSearchConfig.rerankerType as unknown as ServiceType;
}
// If a specific service is specified, only check that one
const services = specificService
? [specificService]
: (Object.keys(webSearchAuth[category]) as ServiceType[]);
for (const service of services) {
// Skip if the service doesn't exist in the webSearchAuth config
if (!webSearchAuth[category][service]) {
continue;
}
const serviceConfig = webSearchAuth[category][service];
// Split keys into required and optional
const requiredKeys: TWebSearchKeys[] = [];
const optionalKeys: TWebSearchKeys[] = [];
for (const key in serviceConfig) {
const typedKey = key as TWebSearchKeys;
if (serviceConfig[typedKey as keyof typeof serviceConfig] === 1) {
requiredKeys.push(typedKey);
} else if (serviceConfig[typedKey as keyof typeof serviceConfig] === 0) {
optionalKeys.push(typedKey);
}
}
if (requiredKeys.length === 0) continue;
const requiredAuthFields = extractWebSearchEnvVars({
keys: requiredKeys,
config: webSearchConfig,
});
const optionalAuthFields = extractWebSearchEnvVars({
keys: optionalKeys,
config: webSearchConfig,
});
if (requiredAuthFields.length !== requiredKeys.length) continue;
const allKeys = [...requiredKeys, ...optionalKeys];
const allAuthFields = [...requiredAuthFields, ...optionalAuthFields];
const optionalSet = new Set(optionalAuthFields);
try {
const authValues = await loadAuthValues({
userId,
authFields: allAuthFields,
optional: optionalSet,
throwError,
});
let allFieldsAuthenticated = true;
for (let j = 0; j < allAuthFields.length; j++) {
const field = allAuthFields[j];
const value = authValues[field];
const originalKey = allKeys[j];
if (originalKey) authResult[originalKey] = value;
if (!optionalSet.has(field) && !value) {
allFieldsAuthenticated = false;
break;
}
if (!isUserProvided && process.env[field] !== value) {
isUserProvided = true;
}
}
if (!allFieldsAuthenticated) {
continue;
}
if (category === SearchCategories.PROVIDERS) {
authResult.searchProvider = service as SearchProviders;
} else if (category === SearchCategories.SCRAPERS) {
authResult.scraperType = service as ScraperTypes;
} else if (category === SearchCategories.RERANKERS) {
authResult.rerankerType = service as RerankerTypes;
}
return [true, isUserProvided];
} catch {
continue;
}
}
return [false, isUserProvided];
}
const categories = [
SearchCategories.PROVIDERS,
SearchCategories.SCRAPERS,
SearchCategories.RERANKERS,
] as const;
const authTypes: [TWebSearchCategories, AuthType][] = [];
for (const category of categories) {
const [isCategoryAuthenticated, isUserProvided] = await checkAuth(category);
if (!isCategoryAuthenticated) {
authenticated = false;
authTypes.push([category, AuthType.USER_PROVIDED]);
continue;
}
authTypes.push([category, isUserProvided ? AuthType.USER_PROVIDED : AuthType.SYSTEM_DEFINED]);
}
authResult.safeSearch = webSearchConfig?.safeSearch ?? true;
return {
authTypes,
authResult,
authenticated,
};
}

7
packages/data-schemas/src/schema/role.ts
View file

@ -26,6 +26,9 @@ export interface IRole extends Document {
[PermissionTypes.RUN_CODE]?: {
[Permissions.USE]?: boolean;
};
[PermissionTypes.WEB_SEARCH]?: {
[Permissions.USE]?: boolean;
};
};
}
@ -54,6 +57,9 @@ const rolePermissionsSchema = new Schema(
[PermissionTypes.RUN_CODE]: {
[Permissions.USE]: { type: Boolean, default: true },
},
[PermissionTypes.WEB_SEARCH]: {
[Permissions.USE]: { type: Boolean, default: true },
},
},
{ _id: false },
);
@ -77,6 +83,7 @@ const roleSchema: Schema<IRole> = new Schema({
[PermissionTypes.MULTI_CONVO]: { [Permissions.USE]: true },
[PermissionTypes.TEMPORARY_CHAT]: { [Permissions.USE]: true },
[PermissionTypes.RUN_CODE]: { [Permissions.USE]: true },
[PermissionTypes.WEB_SEARCH]: { [Permissions.USE]: true },
}),
},
});