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

refactor: Encrypt & Expire User Provided Keys, feat: Rate Limiting (#874)

Browse source 
* docs: make_your_own.md formatting fix for mkdocs

* feat: add express-mongo-sanitize
feat: add login/registration rate limiting

* chore: remove unnecessary console log

* wip: remove token handling from localStorage to encrypted DB solution

* refactor: minor change to UserService

* fix mongo query and add keys route to server

* fix backend controllers and simplify schema/crud

* refactor: rename token to key to separate from access/refresh tokens, setTokenDialog -> setKeyDialog

* refactor(schemas): TEndpointOption token -> key

* refactor(api): use new encrypted key retrieval system

* fix(SetKeyDialog): fix key prop error

* fix(abortMiddleware): pass random UUID if messageId is not generated yet for proper error display on frontend

* fix(getUserKey): wrong prop passed in arg, adds error handling

* fix: prevent message without conversationId from saving to DB, prevents branching on the frontend to a new top-level branch

* refactor: change wording of multiple display messages

* refactor(checkExpiry -> checkUserKeyExpiry): move to UserService file

* fix: type imports from common

* refactor(SubmitButton): convert to TS

* refactor(key.ts): change localStorage map key name

* refactor: add new custom tailwind classes to better match openAI colors

* chore: remove unnecessary warning and catch ScreenShot error

* refactor: move userKey frontend logic to hooks and remove use of localStorage and instead query the DB

* refactor: invalidate correct query key, memoize userKey hook, conditionally render SetKeyDialog to avoid unnecessary calls, refactor SubmitButton props and useEffect for showing 'provide key first'

* fix(SetKeyDialog): use enum-like object for expiry values
feat(Dropdown): add optionsClassName to dynamically change dropdown options container classes

* fix: handle edge case where user had provided a key but the server changes to env variable for keys

* refactor(OpenAI/titleConvo): move titling to client to retain authorized credentials in message lifecycle for titling

* fix(azure): handle user_provided keys correctly for azure

* feat: send user Id to OpenAI to differentiate users in completion requests

* refactor(OpenAI/titleConvo): adding tokens helps minimize LLM from using the language in title response

* feat: add delete endpoint for keys

* chore: remove throttling of title

* feat: add 'Data controls' to Settings, add 'Revoke' keys feature in Key Dialog and Data controls

* refactor: reorganize PluginsClient files in langchain format

* feat: use langchain for titling convos

* chore: cleanup titling convo, with fallback to original method, escape braces, use only snippet for language detection

* refactor: move helper functions to appropriate langchain folders for reusability

* fix: userProvidesKey handling for gptPlugins

* fix: frontend handling of plugins key

* chore: cleanup logging and ts-ignore SSE

* fix: forwardRef misuse in DangerButton

* fix(GoogleConfig/FileUpload): localize errors and simplify validation with zod

* fix: cleanup google logging and fix user provided key handling

* chore: remove titling from google

* chore: removing logging from browser endpoint

* wip: fix menu flicker

* feat: useLocalStorage hook

* feat: add Tooltip for UI

* refactor(EndpointMenu): utilize Tooltip and useLocalStorage, remove old 'New Chat' slide-over

* fix(e2e): use testId for endpoint menu trigger

* chore: final touches to EndpointMenu before future refactor to declutter component

* refactor(localization): change select endpoint to open menu and add translations

* chore: add final prop to error message response

* ci: minor edits to facilitate testing

* ci: new e2e test which tests for new key setting/revoking features
This commit is contained in:
Danny Avila 2023-09-06 10:46:27 -04:00 • committed by GitHub
parent 64f1557852
commit 4ca43fb53d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
122 changed files with 1933 additions and 966 deletions
Download patch file Download diff file Expand all files Collapse all files

7
.env.example
View file

@ -13,6 +13,13 @@ APP_TITLE=LibreChat
HOST=localhost
PORT=3080
# Login and registration rate limiting.
LOGIN_MAX=7 # The max amount of logins allowed per IP per LOGIN_WINDOW
LOGIN_WINDOW=5 # in minutes, determines how long an IP is banned for after LOGIN_MAX logins
REGISTER_MAX=5 # The max amount of registrations allowed per IP per REGISTER_WINDOW
REGISTER_WINDOW=60 # in minutes, determines how long an IP is banned for after REGISTER_MAX registrations
# Change this to proxy any API request.
# It's useful if your machine has difficulty calling the original API server.
# PROXY=

19
api/app/bingai.js
View file

@ -1,5 +1,6 @@
require('dotenv').config();
const { KeyvFile } = require('keyv-file');
const { getUserKey, checkUserKeyExpiry } = require('../server/services/UserService');
const askBing = async ({
text,
@ -13,9 +14,21 @@ const askBing = async ({
clientId,
invocationId,
toneStyle,
token,
key: expiresAt,
onProgress,
userId,
}) => {
const isUserProvided = process.env.BINGAI_TOKEN === 'user_provided';
let key = null;
if (expiresAt && isUserProvided) {
checkUserKeyExpiry(
expiresAt,
'Your BingAI Cookies have expired. Please provide your cookies again.',
);
key = await getUserKey({ userId, name: 'bingAI' });
}
const { BingAIClient } = await import('@waylaidwanderer/chatgpt-api');
const store = {
store: new KeyvFile({ filename: './data/cache.json' }),
@ -24,9 +37,9 @@ const askBing = async ({
const bingAIClient = new BingAIClient({
// "_U" cookie from bing.com
// userToken:
// process.env.BINGAI_TOKEN == 'user_provided' ? token : process.env.BINGAI_TOKEN ?? null,
// isUserProvided ? key : process.env.BINGAI_TOKEN ?? null,
// If the above doesn't work, provide all your cookies as a string instead
cookies: process.env.BINGAI_TOKEN == 'user_provided' ? token : process.env.BINGAI_TOKEN ?? null,
cookies: isUserProvided ? key : process.env.BINGAI_TOKEN ?? null,
debug: false,
cache: store,
host: process.env.BINGAI_HOST || null,

23
api/app/chatgpt-browser.js
View file

@ -1,17 +1,29 @@
require('dotenv').config();
const { KeyvFile } = require('keyv-file');
const { getUserKey, checkUserKeyExpiry } = require('../server/services/UserService');
const browserClient = async ({
text,
parentMessageId,
conversationId,
model,
token,
key: expiresAt,
onProgress,
onEventMessage,
abortController,
userId,
}) => {
const isUserProvided = process.env.CHATGPT_TOKEN === 'user_provided';
let key = null;
if (expiresAt && isUserProvided) {
checkUserKeyExpiry(
expiresAt,
'Your ChatGPT Access Token has expired. Please provide your token again.',
);
key = await getUserKey({ userId, name: 'chatGPTBrowser' });
}
const { ChatGPTBrowserClient } = await import('@waylaidwanderer/chatgpt-api');
const store = {
store: new KeyvFile({ filename: './data/cache.json' }),
@ -20,13 +32,12 @@ const browserClient = async ({
const clientOptions = {
// Warning: This will expose your access token to a third party. Consider the risks before using this.
reverseProxyUrl:
process.env.CHATGPT_REVERSE_PROXY || 'https://ai.fakeopen.com/api/conversation',
process.env.CHATGPT_REVERSE_PROXY ?? 'https://ai.fakeopen.com/api/conversation',
// Access token from https://chat.openai.com/api/auth/session
accessToken:
process.env.CHATGPT_TOKEN == 'user_provided' ? token : process.env.CHATGPT_TOKEN ?? null,
accessToken: isUserProvided ? key : process.env.CHATGPT_TOKEN ?? null,
model: model,
debug: false,
proxy: process.env.PROXY || null,
proxy: process.env.PROXY ?? null,
user: userId,
};
@ -37,8 +48,6 @@ const browserClient = async ({
options = { ...options, parentMessageId, conversationId };
}
console.log('gptBrowser clientOptions', clientOptions);
if (parentMessageId === '00000000-0000-0000-0000-000000000000') {
delete options.conversationId;
}

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

@ -3,9 +3,9 @@ const TextStream = require('./TextStream');
const { RecursiveCharacterTextSplitter } = require('langchain/text_splitter');
const { ChatOpenAI } = require('langchain/chat_models/openai');
const { loadSummarizationChain } = require('langchain/chains');
const { refinePrompt } = require('./prompts/refinePrompt');
const { getConvo, getMessages, saveMessage, updateMessage, saveConvo } = require('../../models');
const { addSpaceIfNeeded } = require('../../server/utils');
const { refinePrompt } = require('./prompts');
class BaseClient {
constructor(apiKey, options = {}) {
@ -55,6 +55,7 @@ class BaseClient {
const { isEdited, isContinued } = opts;
const user = opts.user ?? null;
this.user = user;
const saveOptions = this.getSaveOptions();
this.abortController = opts.abortController ?? new AbortController();
const conversationId = opts.conversationId ?? crypto.randomUUID();
@ -407,7 +408,6 @@ class BaseClient {
const { generation = '' } = opts;
this.user = user;
// It's not necessary to push to currentMessages
// depending on subclass implementation of handling messages
// When this is an edit, all messages are already in currentMessages, both user and response
@ -600,6 +600,14 @@ class BaseClient {
// Sum the number of tokens in all properties and add `tokensPerMessage` for metadata
return propertyTokenCounts.reduce((a, b) => a + b, tokensPerMessage);
}
async sendPayload(payload, opts = {}) {
if (opts && typeof opts === 'object') {
this.setOptions(opts);
}
return await this.sendCompletion(payload, opts);
}
}
module.exports = BaseClient;

6
api/app/clients/GoogleClient.js
View file

@ -29,7 +29,8 @@ class GoogleClient extends BaseClient {
jwtClient.authorize((err) => {
if (err) {
console.log(err);
console.error('Error: jwtClient failed to authorize');
console.error(err.message);
throw err;
}
});
@ -247,7 +248,8 @@ class GoogleClient extends BaseClient {
console.debug(result);
}
} catch (err) {
console.error(err);
console.error('Error: failed to send completion to Google');
console.error(err.message);
}
if (!blocked) {

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

@ -5,6 +5,8 @@ const {
get_encoding: getEncoding,
} = require('@dqbd/tiktoken');
const { maxTokensMap, genAzureChatCompletion } = require('../../utils');
const { runTitleChain } = require('./chains');
const { createLLM } = require('./llm');
// Cache to store Tiktoken instances
const tokenizersCache = {};
@ -105,6 +107,7 @@ class OpenAIClient extends BaseClient {
if (this.options.reverseProxyUrl) {
this.completionsUrl = this.options.reverseProxyUrl;
this.langchainProxy = this.options.reverseProxyUrl.match(/.*v1/)[0];
} else if (isChatGptModel) {
this.completionsUrl = 'https://api.openai.com/v1/chat/completions';
} else {
@ -116,7 +119,7 @@ class OpenAIClient extends BaseClient {
}
if (this.azureEndpoint && this.options.debug) {
console.debug(`Using Azure endpoint: ${this.azureEndpoint}`, this.azure);
console.debug('Using Azure endpoint');
}
return this;
@ -315,6 +318,7 @@ class OpenAIClient extends BaseClient {
let reply = '';
let result = null;
let streamResult = null;
this.modelOptions.user = this.user;
if (typeof opts.onProgress === 'function') {
await this.getCompletion(
payload,
@ -373,6 +377,64 @@ class OpenAIClient extends BaseClient {
content: response.text,
});
}
async titleConvo({ text, responseText = '' }) {
let title = 'New Chat';
const convo = `||>User:
"${text}"
||>Response:
"${JSON.stringify(responseText)}"`;
const modelOptions = {
model: 'gpt-3.5-turbo-0613',
temperature: 0.2,
presence_penalty: 0,
frequency_penalty: 0,
max_tokens: 16,
};
const configOptions = {};
if (this.langchainProxy) {
configOptions.basePath = this.langchainProxy;
}
try {
const llm = createLLM({
modelOptions,
configOptions,
openAIApiKey: this.apiKey,
azure: this.azure,
});
title = await runTitleChain({ llm, text, convo });
} catch (e) {
console.error(e.message);
console.log('There was an issue generating title with LangChain, trying the old method...');
modelOptions.model = 'gpt-3.5-turbo';
const instructionsPayload = [
{
role: 'system',
content: `Detect user language and write in the same language an extremely concise title for this conversation, which you must accurately detect.
Write in the detected language. Title in 5 Words or Less. No Punctuation or Quotation. Do not mention the language. All first letters of every word should be capitalized and write the title in User Language only.
${convo}
||>Title:`,
},
];
try {
title = (await this.sendPayload(instructionsPayload, { modelOptions })).replaceAll('"', '');
} catch (e) {
console.error(e);
console.log('There was another issue generating the title, see error above.');
}
}
console.log('CONVERSATION TITLE', title);
return title;
}
}
module.exports = OpenAIClient;

13
api/app/clients/PluginsClient.js
View file

@ -1,10 +1,11 @@
const OpenAIClient = require('./OpenAIClient');
const { CallbackManager } = require('langchain/callbacks');
const { HumanChatMessage, AIChatMessage } = require('langchain/schema');
const { initializeCustomAgent, initializeFunctionsAgent } = require('./agents/');
const { addImages, createLLM, buildErrorInput, buildPromptPrefix } = require('./agents/methods/');
const { SelfReflectionTool } = require('./tools/');
const { initializeCustomAgent, initializeFunctionsAgent } = require('./agents');
const { addImages, buildErrorInput, buildPromptPrefix } = require('./output_parsers');
const { SelfReflectionTool } = require('./tools');
const { loadTools } = require('./tools/util');
const { createLLM } = require('./llm');
class PluginsClient extends OpenAIClient {
constructor(apiKey, options = {}) {
@ -28,9 +29,9 @@ class PluginsClient extends OpenAIClient {
super.setOptions(options);
this.isGpt3 = this.modelOptions.model.startsWith('gpt-3');
if (this.options.reverseProxyUrl) {
this.langchainProxy = this.options.reverseProxyUrl.match(/.*v1/)[0];
}
// if (this.options.reverseProxyUrl) {
// this.langchainProxy = this.options.reverseProxyUrl.match(/.*v1/)[0];
// }
}
getSaveOptions() {

5
api/app/clients/chains/index.js Normal file
View file

@ -0,0 +1,5 @@
const runTitleChain = require('./runTitleChain');
module.exports = {
runTitleChain,
};

43
api/app/clients/chains/runTitleChain.js Normal file
View file

@ -0,0 +1,43 @@
const { z } = require('zod');
const { langPrompt, createTitlePrompt } = require('../prompts');
const { escapeBraces, getSnippet } = require('../output_parsers');
const { createStructuredOutputChainFromZod } = require('langchain/chains/openai_functions');
const langSchema = z.object({
language: z.string().describe('The language of the input text (full noun, no abbreviations).'),
});
const createLanguageChain = ({ llm }) =>
createStructuredOutputChainFromZod(langSchema, {
prompt: langPrompt,
llm,
// verbose: true,
});
const titleSchema = z.object({
title: z.string().describe('The title-cased title of the conversation in the given language.'),
});
const createTitleChain = ({ llm, convo }) => {
const titlePrompt = createTitlePrompt({ convo });
return createStructuredOutputChainFromZod(titleSchema, {
prompt: titlePrompt,
llm,
// verbose: true,
});
};
const runTitleChain = async ({ llm, text, convo }) => {
let snippet = text;
try {
snippet = getSnippet(text);
} catch (e) {
console.log('Error getting snippet of text for titleChain');
console.log(e);
}
const languageChain = createLanguageChain({ llm });
const titleChain = createTitleChain({ llm, convo: escapeBraces(convo) });
const { language } = await languageChain.run(snippet);
return (await titleChain.run(language)).title;
};
module.exports = runTitleChain;

0
api/app/clients/agents/methods/createLLM.js → api/app/clients/llm/createLLM.js
View file

5
api/app/clients/llm/index.js Normal file
View file

@ -0,0 +1,5 @@
const createLLM = require('./createLLM');
module.exports = {
createLLM,
};

0
api/app/clients/agents/methods/addImages.js → api/app/clients/output_parsers/addImages.js
View file

38
api/app/clients/output_parsers/handleInputs.js Normal file
View file

@ -0,0 +1,38 @@
// Escaping curly braces is necessary for LangChain to correctly process the prompt
function escapeBraces(str) {
return str
.replace(/({{2,})|(}{2,})/g, (match) => `${match[0]}`)
.replace(/{|}/g, (match) => `${match}${match}`);
}
function getSnippet(text) {
let limit = 50;
let splitText = escapeBraces(text).split(' ');
if (splitText.length === 1 && splitText[0].length > limit) {
return splitText[0].substring(0, limit);
}
let result = '';
let spaceCount = 0;
for (let i = 0; i < splitText.length; i++) {
if (result.length + splitText[i].length <= limit) {
result += splitText[i] + ' ';
spaceCount++;
} else {
break;
}
if (spaceCount == 10) {
break;
}
}
return result.trim();
}
module.exports = {
escapeBraces,
getSnippet,
};

6
api/app/clients/agents/methods/handleOutputs.js → api/app/clients/output_parsers/handleOutputs.js
View file

@ -1,8 +1,4 @@
const {
instructions,
imageInstructions,
errorInstructions,
} = require('../../prompts/instructions');
const { instructions, imageInstructions, errorInstructions } = require('../prompts');
function getActions(actions = [], functionsAgent = false) {
let output = 'Internal thoughts & actions taken:\n"';

4
api/app/clients/agents/methods/index.js → api/app/clients/output_parsers/index.js
View file

@ -1,9 +1,9 @@
const addImages = require('./addImages');
const createLLM = require('./createLLM');
const handleInputs = require('./handleInputs');
const handleOutputs = require('./handleOutputs');
module.exports = {
addImages,
createLLM,
...handleInputs,
...handleOutputs,
};

9
api/app/clients/prompts/index.js Normal file
View file

@ -0,0 +1,9 @@
const instructions = require('./instructions');
const titlePrompts = require('./titlePrompts');
const refinePrompts = require('./refinePrompts');
module.exports = {
...refinePrompts,
...instructions,
...titlePrompts,
};

0
api/app/clients/prompts/refinePrompt.js → api/app/clients/prompts/refinePrompts.js
View file

33
api/app/clients/prompts/titlePrompts.js Normal file
View file

@ -0,0 +1,33 @@
const {
ChatPromptTemplate,
SystemMessagePromptTemplate,
HumanMessagePromptTemplate,
} = require('langchain/prompts');
const langPrompt = new ChatPromptTemplate({
promptMessages: [
SystemMessagePromptTemplate.fromTemplate('Detect the language used in the following text.'),
HumanMessagePromptTemplate.fromTemplate('{inputText}'),
],
inputVariables: ['inputText'],
});
const createTitlePrompt = ({ convo }) => {
const titlePrompt = new ChatPromptTemplate({
promptMessages: [
SystemMessagePromptTemplate.fromTemplate(
`Write a concise title for this conversation in the given language. Title in 5 Words or Less. No Punctuation or Quotation. All first letters of every word must be capitalized (resembling title-case), written in the given Language.
${convo}`,
),
HumanMessagePromptTemplate.fromTemplate('Language: {language}'),
],
inputVariables: ['language'],
});
return titlePrompt;
};
module.exports = {
langPrompt,
createTitlePrompt,
};

2
api/app/index.js
View file

@ -1,13 +1,11 @@
const { browserClient } = require('./chatgpt-browser');
const { askBing } = require('./bingai');
const clients = require('./clients');
const titleConvo = require('./titleConvo');
const titleConvoBing = require('./titleConvoBing');
module.exports = {
browserClient,
askBing,
titleConvo,
titleConvoBing,
...clients,
};

57
api/app/titleConvo.js
View file

@ -1,57 +0,0 @@
const throttle = require('lodash/throttle');
const { genAzureChatCompletion, getAzureCredentials } = require('../utils/');
const titleConvo = async ({ text, response, openAIApiKey, azure = false }) => {
let title = 'New Chat';
const ChatGPTClient = (await import('@waylaidwanderer/chatgpt-api')).default;
try {
const instructionsPayload = {
role: 'system',
content: `Detect user language and write in the same language an extremely concise title for this conversation, which you must accurately detect. Write in the detected language. Title in 5 Words or Less. No Punctuation or Quotation. All first letters of every word should be capitalized and complete only the title in User Language only.
||>User:
"${text}"
||>Response:
"${JSON.stringify(response?.text)}"
||>Title:`,
};
const options = {
azure,
reverseProxyUrl: process.env.OPENAI_REVERSE_PROXY || null,
proxy: process.env.PROXY || null,
};
const titleGenClientOptions = JSON.parse(JSON.stringify(options));
titleGenClientOptions.modelOptions = {
model: 'gpt-3.5-turbo',
temperature: 0,
presence_penalty: 0,
frequency_penalty: 0,
};
let apiKey = openAIApiKey ?? process.env.OPENAI_API_KEY;
if (azure) {
apiKey = process.env.AZURE_API_KEY;
titleGenClientOptions.reverseProxyUrl = genAzureChatCompletion(getAzureCredentials());
}
const titleGenClient = new ChatGPTClient(apiKey, titleGenClientOptions);
const result = await titleGenClient.getCompletion([instructionsPayload], null);
title = result.choices[0].message.content.replace(/\s+/g, ' ').replaceAll('"', '').trim();
} catch (e) {
console.error(e);
console.log('There was an issue generating title, see error above');
}
console.log('CONVERSATION TITLE', title);
return title;
};
const throttledTitleConvo = throttle(titleConvo, 1000);
module.exports = throttledTitleConvo;

3
api/models/Message.js
View file

@ -21,6 +21,9 @@ module.exports = {
model = null,
}) {
try {
if (!conversationId) {
return console.log('Message not saved: no conversationId');
}
// may also need to update the conversation here
await Message.findOneAndUpdate(
{ messageId },

86
api/models/User.js
View file

@ -3,97 +3,13 @@ const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const Joi = require('joi');
const DebugControl = require('../utils/debug.js');
const userSchema = require('./schema/userSchema.js');
function log({ title, parameters }) {
DebugControl.log.functionName(title);
DebugControl.log.parameters(parameters);
}
const Session = mongoose.Schema({
refreshToken: {
type: String,
default: '',
},
});
const userSchema = mongoose.Schema(
{
name: {
type: String,
},
username: {
type: String,
lowercase: true,
default: '',
},
email: {
type: String,
required: [true, 'can\'t be blank'],
lowercase: true,
unique: true,
match: [/\S+@\S+\.\S+/, 'is invalid'],
index: true,
},
emailVerified: {
type: Boolean,
required: true,
default: false,
},
password: {
type: String,
trim: true,
minlength: 8,
maxlength: 128,
},
avatar: {
type: String,
required: false,
},
provider: {
type: String,
required: true,
default: 'local',
},
role: {
type: String,
default: 'USER',
},
googleId: {
type: String,
unique: true,
sparse: true,
},
facebookId: {
type: String,
unique: true,
sparse: true,
},
openidId: {
type: String,
unique: true,
sparse: true,
},
githubId: {
type: String,
unique: true,
sparse: true,
},
discordId: {
type: String,
unique: true,
sparse: true,
},
plugins: {
type: Array,
default: [],
},
refreshToken: {
type: [Session],
},
},
{ timestamps: true },
);
//Remove refreshToken from the response
userSchema.set('toJSON', {
transform: function (_doc, ret) {

5
api/models/index.js
View file

@ -7,8 +7,13 @@ const {
} = require('./Message');
const { getConvoTitle, getConvo, saveConvo } = require('./Conversation');
const { getPreset, getPresets, savePreset, deletePresets } = require('./Preset');
const User = require('./User');
const Key = require('./schema/keySchema');
module.exports = {
User,
Key,
getMessages,
saveMessage,
updateMessage,

25
api/models/schema/keySchema.js Normal file
View file

@ -0,0 +1,25 @@
const mongoose = require('mongoose');
const keySchema = mongoose.Schema({
userId: {
type: mongoose.Schema.Types.ObjectId,
ref: 'User',
required: true,
},
name: {
type: String,
required: true,
},
value: {
type: String,
required: true,
},
expiresAt: {
type: Date,
expires: 0,
},
});
keySchema.index({ expiresAt: 1 }, { expireAfterSeconds: 0 });
module.exports = mongoose.model('Key', keySchema);

88
api/models/schema/userSchema.js Normal file
View file

@ -0,0 +1,88 @@
const mongoose = require('mongoose');
const Session = mongoose.Schema({
refreshToken: {
type: String,
default: '',
},
});
const userSchema = mongoose.Schema(
{
name: {
type: String,
},
username: {
type: String,
lowercase: true,
default: '',
},
email: {
type: String,
required: [true, 'can\'t be blank'],
lowercase: true,
unique: true,
match: [/\S+@\S+\.\S+/, 'is invalid'],
index: true,
},
emailVerified: {
type: Boolean,
required: true,
default: false,
},
password: {
type: String,
trim: true,
minlength: 8,
maxlength: 128,
},
avatar: {
type: String,
required: false,
},
provider: {
type: String,
required: true,
default: 'local',
},
role: {
type: String,
default: 'USER',
},
googleId: {
type: String,
unique: true,
sparse: true,
},
facebookId: {
type: String,
unique: true,
sparse: true,
},
openidId: {
type: String,
unique: true,
sparse: true,
},
githubId: {
type: String,
unique: true,
sparse: true,
},
discordId: {
type: String,
unique: true,
sparse: true,
},
plugins: {
type: Array,
default: [],
},
refreshToken: {
type: [Session],
},
},
{ timestamps: true },
);
module.exports = userSchema;

4
api/package.json
View file

@ -35,6 +35,8 @@
"dotenv": "^16.0.3",
"eslint": "^8.41.0",
"express": "^4.18.2",
"express-mongo-sanitize": "^2.2.0",
"express-rate-limit": "^6.9.0",
"express-session": "^1.17.3",
"googleapis": "^118.0.0",
"handlebars": "^4.7.7",
@ -64,7 +66,7 @@
},
"devDependencies": {
"jest": "^29.5.0",
"nodemon": "^2.0.20",
"nodemon": "^3.0.1",
"path": "^0.12.7",
"supertest": "^6.3.3"
}

5
api/server/index.js
View file

@ -1,4 +1,5 @@
const express = require('express');
const mongoSanitize = require('express-mongo-sanitize');
const connectDb = require('../lib/db/connectDb');
const indexSync = require('../lib/db/indexSync');
const path = require('path');
@ -23,6 +24,7 @@ const startServer = async () => {
// Middleware
app.use(errorController);
app.use(express.json({ limit: '3mb' }));
app.use(mongoSanitize());
app.use(express.urlencoded({ extended: true, limit: '3mb' }));
app.use(express.static(path.join(projectPath, 'dist')));
app.use(express.static(path.join(projectPath, 'public')));
@ -38,7 +40,7 @@ const startServer = async () => {
// OAUTH
app.use(passport.initialize());
passport.use(await jwtLogin());
passport.use(await passportLogin());
passport.use(passportLogin());
if (process.env.ALLOW_SOCIAL_LOGIN === 'true') {
configureSocialLogins(app);
@ -47,6 +49,7 @@ const startServer = async () => {
app.use('/oauth', routes.oauth);
// API Endpoints
app.use('/api/auth', routes.auth);
app.use('/api/keys', routes.keys);
app.use('/api/user', routes.user);
app.use('/api/search', routes.search);
app.use('/api/ask', routes.ask);

4
api/server/middleware/abortMiddleware.js
View file

@ -1,3 +1,4 @@
const crypto = require('crypto');
const { saveMessage, getConvo, getConvoTitle } = require('../../models');
const { sendMessage, handleError } = require('../utils');
const abortControllers = require('./abortControllers');
@ -73,12 +74,13 @@ const handleAbortError = async (res, req, error, data) => {
const respondWithError = async () => {
const errorMessage = {
sender,
messageId,
messageId: messageId ?? crypto.randomUUID(),
conversationId,
parentMessageId,
unfinished: false,
cancelled: false,
error: true,
final: true,
text: error.message,
isCreatedByUser: false,
};

4
api/server/middleware/index.js
View file

@ -1,6 +1,8 @@
const abortMiddleware = require('./abortMiddleware');
const setHeaders = require('./setHeaders');
const loginLimiter = require('./loginLimiter');
const requireJwtAuth = require('./requireJwtAuth');
const registerLimiter = require('./registerLimiter');
const requireLocalAuth = require('./requireLocalAuth');
const validateEndpoint = require('./validateEndpoint');
const validateMessageReq = require('./validateMessageReq');
@ -10,7 +12,9 @@ const validateRegistration = require('./validateRegistration');
module.exports = {
...abortMiddleware,
setHeaders,
loginLimiter,
requireJwtAuth,
registerLimiter,
requireLocalAuth,
validateEndpoint,
validateMessageReq,

12
api/server/middleware/loginLimiter.js Normal file
View file

@ -0,0 +1,12 @@
const rateLimit = require('express-rate-limit');
const windowMs = (process.env?.LOGIN_WINDOW ?? 5) * 60 * 1000; // default: 5 minutes
const max = process.env?.LOGIN_MAX ?? 7; // default: limit each IP to 7 requests per windowMs
const windowInMinutes = windowMs / 60000;
const loginLimiter = rateLimit({
windowMs,
max,
message: `Too many login attempts from this IP, please try again after ${windowInMinutes} minutes.`,
});
module.exports = loginLimiter;

12
api/server/middleware/registerLimiter.js Normal file
View file

@ -0,0 +1,12 @@
const rateLimit = require('express-rate-limit');
const windowMs = (process.env?.REGISTER_WINDOW ?? 60) * 60 * 1000; // default: 1 hour
const max = process.env?.REGISTER_MAX ?? 5; // default: limit each IP to 5 registrations per windowMs
const windowInMinutes = windowMs / 60000;
const registerLimiter = rateLimit({
windowMs,
max,
message: `Too many accounts created from this IP, please try again after ${windowInMinutes} minutes`,
});
module.exports = registerLimiter;

4
api/server/routes/ask/anthropic.js
View file

@ -87,7 +87,7 @@ router.post(
getAbortData,
);
const { client } = initializeClient(req, endpointOption);
const { client } = await initializeClient(req, endpointOption);
let response = await client.sendMessage(text, {
getIds,
@ -135,7 +135,7 @@ router.post(
conversationId,
sender: getResponseSender(endpointOption),
messageId: responseMessageId,
parentMessageId: userMessageId,
parentMessageId: userMessageId ?? parentMessageId,
});
}
},

2
api/server/routes/ask/askChatGPTBrowser.js
View file

@ -38,7 +38,7 @@ router.post('/', requireJwtAuth, setHeaders, async (req, res) => {
// build endpoint option
const endpointOption = {
model: req.body?.model ?? 'text-davinci-002-render-sha',
token: req.body?.token ?? null,
key: req.body?.key ?? null,
};
// const availableModels = getChatGPTBrowserModels();

5
api/server/routes/ask/bingAI.js
View file

@ -45,7 +45,7 @@ router.post('/', requireJwtAuth, setHeaders, async (req, res) => {
systemMessage: req.body?.systemMessage ?? null,
context: req.body?.context ?? null,
toneStyle: req.body?.toneStyle ?? 'creative',
token: req.body?.token ?? null,
key: req.body?.key ?? null,
};
} else {
endpointOption = {
@ -56,7 +56,7 @@ router.post('/', requireJwtAuth, setHeaders, async (req, res) => {
clientId: req.body?.clientId ?? null,
invocationId: req.body?.invocationId ?? null,
toneStyle: req.body?.toneStyle ?? 'creative',
token: req.body?.token ?? null,
key: req.body?.key ?? null,
};
}
@ -139,6 +139,7 @@ const ask = async ({
try {
let response = await askBing({
text,
userId: req.user.id,
parentMessageId: userParentMessageId,
conversationId: bingConversationId ?? conversationId,
...endpointOption,

28
api/server/routes/ask/google.js
View file

@ -1,9 +1,10 @@
const express = require('express');
const router = express.Router();
const crypto = require('crypto');
const { titleConvo, GoogleClient } = require('../../../app');
const { GoogleClient } = require('../../../app');
const { saveMessage, getConvoTitle, saveConvo, getConvo } = require('../../../models');
const { handleError, sendMessage, createOnProgress } = require('../../utils');
const { getUserKey, checkUserKeyExpiry } = require('../../services/UserService');
const { requireJwtAuth, setHeaders } = require('../../middleware');
router.post('/', requireJwtAuth, setHeaders, async (req, res) => {
@ -19,7 +20,7 @@ router.post('/', requireJwtAuth, setHeaders, async (req, res) => {
const endpointOption = {
examples: req.body?.examples ?? [{ input: { content: '' }, output: { content: '' } }],
promptPrefix: req.body?.promptPrefix ?? null,
token: req.body?.token ?? null,
key: req.body?.key ?? null,
modelOptions: {
model: req.body?.model ?? 'chat-bison',
modelLabel: req.body?.modelLabel ?? null,
@ -88,17 +89,22 @@ const ask = async ({ text, endpointOption, parentMessageId = null, conversationI
const abortController = new AbortController();
const isUserProvided = process.env.PALM_KEY === 'user_provided';
let key;
if (endpointOption.token) {
key = JSON.parse(endpointOption.token);
delete endpointOption.token;
if (endpointOption.key && isUserProvided) {
checkUserKeyExpiry(
endpointOption.key,
'Your GOOGLE_TOKEN has expired. Please provide your token again.',
);
key = await getUserKey({ userId: req.user.id, name: 'google' });
key = JSON.parse(key);
delete endpointOption.key;
console.log('Using service account key provided by User for PaLM models');
}
try {
if (!key) {
key = require('../../../data/auth.json');
}
} catch (e) {
console.log('No \'auth.json\' file (service account key) found in /api/data/ for PaLM models');
}
@ -146,14 +152,6 @@ const ask = async ({ text, endpointOption, parentMessageId = null, conversationI
responseMessage: response,
});
res.end();
if (parentMessageId == '00000000-0000-0000-0000-000000000000') {
const title = await titleConvo({ text, response });
await saveConvo(req.user.id, {
conversationId,
title,
});
}
} catch (error) {
console.error(error);
const errorMessage = {

12
api/server/routes/ask/gptPlugins.js
View file

@ -158,7 +158,7 @@ router.post(
try {
endpointOption.tools = await validateTools(user, endpointOption.tools);
const { client, azure, openAIApiKey } = initializeClient(req, endpointOption);
const { client } = await initializeClient(req, endpointOption);
let response = await client.sendMessage(text, {
user,
@ -204,14 +204,14 @@ router.post(
responseMessage: response,
});
res.end();
if (parentMessageId == '00000000-0000-0000-0000-000000000000' && newConvo) {
addTitle(req, {
text,
newConvo,
response,
openAIApiKey,
parentMessageId,
azure: !!azure,
client,
});
}
} catch (error) {
const partialText = getPartialText();
handleAbortError(res, req, error, {
@ -219,7 +219,7 @@ router.post(
conversationId,
sender: getResponseSender(endpointOption),
messageId: responseMessageId,
parentMessageId: userMessageId,
parentMessageId: userMessageId ?? parentMessageId,
});
}
},

11
api/server/routes/ask/openAI.js
View file

@ -94,7 +94,7 @@ router.post(
);
try {
const { client, openAIApiKey } = initializeClient(req, endpointOption);
const { client } = await initializeClient(req, endpointOption);
let response = await client.sendMessage(text, {
user,
@ -136,14 +136,13 @@ router.post(
});
res.end();
if (parentMessageId == '00000000-0000-0000-0000-000000000000' && newConvo) {
addTitle(req, {
text,
newConvo,
response,
openAIApiKey,
parentMessageId,
azure: endpointOption.endpoint === 'azureOpenAI',
client,
});
}
} catch (error) {
const partialText = getPartialText();
handleAbortError(res, req, error, {
@ -151,7 +150,7 @@ router.post(
conversationId,
sender: getResponseSender(endpointOption),
messageId: responseMessageId,
parentMessageId: userMessageId,
parentMessageId: userMessageId ?? parentMessageId,
});
}
},

12
api/server/routes/auth.js
View file

@ -7,15 +7,21 @@ const {
} = require('../controllers/AuthController');
const { loginController } = require('../controllers/auth/LoginController');
const { logoutController } = require('../controllers/auth/LogoutController');
const { requireJwtAuth, requireLocalAuth, validateRegistration } = require('../middleware');
const {
loginLimiter,
registerLimiter,
requireJwtAuth,
requireLocalAuth,
validateRegistration,
} = require('../middleware');
const router = express.Router();
//Local
router.post('/logout', requireJwtAuth, logoutController);
router.post('/login', requireLocalAuth, loginController);
router.post('/login', loginLimiter, requireLocalAuth, loginController);
// router.post('/refresh', requireJwtAuth, refreshController);
router.post('/register', validateRegistration, registrationController);
router.post('/register', registerLimiter, validateRegistration, registrationController);
router.post('/requestPasswordReset', resetPasswordRequestController);
router.post('/resetPassword', resetPasswordController);

4
api/server/routes/edit/anthropic.js
View file

@ -87,7 +87,7 @@ router.post(
getAbortData,
);
const { client } = initializeClient(req, endpointOption);
const { client } = await initializeClient(req, endpointOption);
let response = await client.sendMessage(text, {
user: req.user.id,
@ -136,7 +136,7 @@ router.post(
conversationId,
sender: getResponseSender(endpointOption),
messageId: responseMessageId,
parentMessageId: userMessageId,
parentMessageId: userMessageId ?? parentMessageId,
});
}
},

4
api/server/routes/edit/gptPlugins.js
View file

@ -128,7 +128,7 @@ router.post(
try {
endpointOption.tools = await validateTools(user, endpointOption.tools);
const { client } = initializeClient(req, endpointOption);
const { client } = await initializeClient(req, endpointOption);
let response = await client.sendMessage(text, {
user,
@ -182,7 +182,7 @@ router.post(
conversationId,
sender: getResponseSender(endpointOption),
messageId: responseMessageId,
parentMessageId: userMessageId,
parentMessageId: userMessageId ?? parentMessageId,
});
}
},

4
api/server/routes/edit/openAI.js
View file

@ -90,7 +90,7 @@ router.post(
);
try {
const { client } = initializeClient(req, endpointOption);
const { client } = await initializeClient(req, endpointOption);
let response = await client.sendMessage(text, {
user: req.user.id,
@ -138,7 +138,7 @@ router.post(
conversationId,
sender: getResponseSender(endpointOption),
messageId: responseMessageId,
parentMessageId: userMessageId,
parentMessageId: userMessageId ?? parentMessageId,
});
}
},

10
api/server/routes/endpoints.js
View file

@ -8,9 +8,9 @@ const { addOpenAPISpecs } = require('../../app/clients/tools/util/addOpenAPISpec
const openAIApiKey = process.env.OPENAI_API_KEY;
const azureOpenAIApiKey = process.env.AZURE_API_KEY;
const useAzurePlugins = !!process.env.PLUGINS_USE_AZURE;
const userProvidedOpenAI = openAIApiKey
? openAIApiKey === 'user_provided'
: azureOpenAIApiKey === 'user_provided';
const userProvidedOpenAI = useAzurePlugins
? azureOpenAIApiKey === 'user_provided'
: openAIApiKey === 'user_provided';
const fetchOpenAIModels = async (opts = { azure: false, plugins: false }, _models = []) => {
let models = _models.slice() ?? [];
@ -81,9 +81,6 @@ const getOpenAIModels = async (opts = { azure: false, plugins: false }) => {
}
if (userProvidedOpenAI) {
console.warn(
`When setting OPENAI_API_KEY to 'user_provided', ${key} must be set manually or default values will be used`,
);
return models;
}
@ -161,6 +158,7 @@ router.get('/', async function (req, res) {
plugins,
availableAgents: ['classic', 'functions'],
userProvide: userProvidedOpenAI,
azure: useAzurePlugins,
}
: false;
const bingAI = process.env.BINGAI_TOKEN

18
api/server/routes/endpoints/anthropic/initializeClient.js
View file

@ -1,7 +1,21 @@
const { AnthropicClient } = require('../../../../app');
const { getUserKey, checkUserKeyExpiry } = require('../../../services/UserService');
const initializeClient = (req) => {
let anthropicApiKey = req.body?.token ?? process.env.ANTHROPIC_API_KEY;
const initializeClient = async (req) => {
const { ANTHROPIC_API_KEY } = process.env;
const { key: expiresAt } = req.body;
const isUserProvided = ANTHROPIC_API_KEY === 'user_provided';
let key = null;
if (expiresAt && isUserProvided) {
checkUserKeyExpiry(
expiresAt,
'Your ANTHROPIC_API_KEY has expired. Please provide your API key again.',
);
key = await getUserKey({ userId: req.user.id, name: 'anthropic' });
}
let anthropicApiKey = isUserProvided ? key : ANTHROPIC_API_KEY;
const client = new AnthropicClient(anthropicApiKey);
return {
client,

37
api/server/routes/endpoints/gptPlugins/initializeClient.js
View file

@ -1,22 +1,43 @@
const { PluginsClient } = require('../../../../app');
const { getAzureCredentials } = require('../../../../utils');
const { getUserKey, checkUserKeyExpiry } = require('../../../services/UserService');
const initializeClient = (req, endpointOption) => {
const initializeClient = async (req, endpointOption) => {
const { PROXY, OPENAI_API_KEY, AZURE_API_KEY, PLUGINS_USE_AZURE, OPENAI_REVERSE_PROXY } =
process.env;
const { key: expiresAt } = req.body;
const clientOptions = {
debug: true,
reverseProxyUrl: process.env.OPENAI_REVERSE_PROXY || null,
proxy: process.env.PROXY || null,
// debug: true,
reverseProxyUrl: OPENAI_REVERSE_PROXY ?? null,
proxy: PROXY ?? null,
...endpointOption,
};
let openAIApiKey = req.body?.token ?? process.env.OPENAI_API_KEY;
if (process.env.PLUGINS_USE_AZURE) {
clientOptions.azure = getAzureCredentials();
const isUserProvided = PLUGINS_USE_AZURE
? AZURE_API_KEY === 'user_provided'
: OPENAI_API_KEY === 'user_provided';
let key = null;
if (expiresAt && isUserProvided) {
checkUserKeyExpiry(
expiresAt,
'Your OpenAI API key has expired. Please provide your API key again.',
);
key = await getUserKey({
userId: req.user.id,
name: PLUGINS_USE_AZURE ? 'azureOpenAI' : 'openAI',
});
}
let openAIApiKey = isUserProvided ? key : OPENAI_API_KEY;
if (PLUGINS_USE_AZURE) {
clientOptions.azure = isUserProvided ? JSON.parse(key) : getAzureCredentials();
openAIApiKey = clientOptions.azure.azureOpenAIApiKey;
}
if (openAIApiKey && openAIApiKey.includes('azure') && !clientOptions.azure) {
clientOptions.azure = JSON.parse(req.body?.token) ?? getAzureCredentials();
clientOptions.azure = isUserProvided ? JSON.parse(key) : getAzureCredentials();
openAIApiKey = clientOptions.azure.azureOpenAIApiKey;
}
const client = new PluginsClient(openAIApiKey, clientOptions);

15
api/server/routes/endpoints/openAI/addTitle.js
View file

@ -1,22 +1,11 @@
const { titleConvo } = require('../../../../app');
const { saveConvo } = require('../../../../models');
const addTitle = async (
req,
{ text, azure, response, newConvo, parentMessageId, openAIApiKey },
) => {
if (parentMessageId == '00000000-0000-0000-0000-000000000000' && newConvo) {
const title = await titleConvo({
text,
azure,
response,
openAIApiKey,
});
const addTitle = async (req, { text, response, client }) => {
const title = await client.titleConvo({ text, responseText: response?.text });
await saveConvo(req.user.id, {
conversationId: response.conversationId,
title,
});
}
};
module.exports = addTitle;

27
api/server/routes/endpoints/openAI/initializeClient.js
View file

@ -1,19 +1,34 @@
const { OpenAIClient } = require('../../../../app');
const { getAzureCredentials } = require('../../../../utils');
const { getUserKey, checkUserKeyExpiry } = require('../../../services/UserService');
const initializeClient = (req, endpointOption) => {
const initializeClient = async (req, endpointOption) => {
const { PROXY, OPENAI_API_KEY, AZURE_API_KEY, OPENAI_REVERSE_PROXY } = process.env;
const { key: expiresAt, endpoint } = req.body;
const clientOptions = {
// debug: true,
// contextStrategy: 'refine',
reverseProxyUrl: process.env.OPENAI_REVERSE_PROXY || null,
proxy: process.env.PROXY || null,
reverseProxyUrl: OPENAI_REVERSE_PROXY ?? null,
proxy: PROXY ?? null,
...endpointOption,
};
let openAIApiKey = req.body?.token ?? process.env.OPENAI_API_KEY;
const isUserProvided =
endpoint === 'openAI' ? OPENAI_API_KEY === 'user_provided' : AZURE_API_KEY === 'user_provided';
if (process.env.AZURE_API_KEY && endpointOption.endpoint === 'azureOpenAI') {
clientOptions.azure = JSON.parse(req.body?.token) ?? getAzureCredentials();
let key = null;
if (expiresAt && isUserProvided) {
checkUserKeyExpiry(
expiresAt,
'Your OpenAI API key has expired. Please provide your API key again.',
);
key = await getUserKey({ userId: req.user.id, name: endpoint });
}
let openAIApiKey = isUserProvided ? key : OPENAI_API_KEY;
if (process.env.AZURE_API_KEY && endpoint === 'azureOpenAI') {
clientOptions.azure = isUserProvided ? JSON.parse(key) : getAzureCredentials();
openAIApiKey = clientOptions.azure.azureOpenAIApiKey;
}

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

@ -7,6 +7,7 @@ const prompts = require('./prompts');
const search = require('./search');
const tokenizer = require('./tokenizer');
const auth = require('./auth');
const keys = require('./keys');
const oauth = require('./oauth');
const { router: endpoints } = require('./endpoints');
const plugins = require('./plugins');
@ -22,6 +23,7 @@ module.exports = {
presets,
prompts,
auth,
keys,
oauth,
user,
tokenizer,

35
api/server/routes/keys.js Normal file
View file

@ -0,0 +1,35 @@
const express = require('express');
const router = express.Router();
const { updateUserKey, deleteUserKey, getUserKeyExpiry } = require('../services/UserService');
const { requireJwtAuth } = require('../middleware/');
router.put('/', requireJwtAuth, async (req, res) => {
await updateUserKey({ userId: req.user.id, ...req.body });
res.status(201).send();
});
router.delete('/:name', requireJwtAuth, async (req, res) => {
const { name } = req.params;
await deleteUserKey({ userId: req.user.id, name });
res.status(204).send();
});
router.delete('/', requireJwtAuth, async (req, res) => {
const { all } = req.query;
if (all !== 'true') {
return res.status(400).send({ error: 'Specify either all=true to delete.' });
}
await deleteUserKey({ userId: req.user.id, all: true });
res.status(204).send();
});
router.get('/', requireJwtAuth, async (req, res) => {
const { name } = req.query;
const response = await getUserKeyExpiry({ userId: req.user.id, name });
res.status(200).send(response);
});
module.exports = router;

6
api/server/routes/oauth.js
View file

@ -1,6 +1,7 @@
const passport = require('passport');
const express = require('express');
const router = express.Router();
const { loginLimiter } = require('../middleware');
const config = require('../../../config/loader');
const domains = config.domains;
const isProduction = config.isProduction;
@ -10,6 +11,7 @@ const isProduction = config.isProduction;
*/
router.get(
'/google',
loginLimiter,
passport.authenticate('google', {
scope: ['openid', 'profile', 'email'],
session: false,
@ -37,6 +39,7 @@ router.get(
router.get(
'/facebook',
loginLimiter,
passport.authenticate('facebook', {
scope: ['public_profile'],
profileFields: ['id', 'email', 'name'],
@ -66,6 +69,7 @@ router.get(
router.get(
'/openid',
loginLimiter,
passport.authenticate('openid', {
session: false,
}),
@ -91,6 +95,7 @@ router.get(
router.get(
'/github',
loginLimiter,
passport.authenticate('github', {
scope: ['user:email', 'read:user'],
session: false,
@ -118,6 +123,7 @@ router.get(
router.get(
'/discord',
loginLimiter,
passport.authenticate('discord', {
scope: ['identify', 'email'],
session: false,

65
api/server/services/UserService.js
View file

@ -1,19 +1,18 @@
const User = require('../../models/User');
const { User, Key } = require('../../models');
const { encrypt, decrypt } = require('../utils');
const updateUserPluginsService = async (user, pluginKey, action) => {
try {
if (action === 'install') {
const response = await User.updateOne(
return await User.updateOne(
{ _id: user._id },
{ $set: { plugins: [...user.plugins, pluginKey] } },
);
return response;
} else if (action === 'uninstall') {
const response = await User.updateOne(
return await User.updateOne(
{ _id: user._id },
{ $set: { plugins: user.plugins.filter((plugin) => plugin !== pluginKey) } },
);
return response;
}
} catch (err) {
console.log(err);
@ -21,4 +20,58 @@ const updateUserPluginsService = async (user, pluginKey, action) => {
}
};
module.exports = { updateUserPluginsService };
const getUserKey = async ({ userId, name }) => {
const keyValue = await Key.findOne({ userId, name }).lean();
if (!keyValue) {
throw new Error('User-provided key not found');
}
return decrypt(keyValue.value);
};
const getUserKeyExpiry = async ({ userId, name }) => {
const keyValue = await Key.findOne({ userId, name }).lean();
if (!keyValue) {
return { expiresAt: null };
}
return { expiresAt: keyValue.expiresAt };
};
const updateUserKey = async ({ userId, name, value, expiresAt }) => {
const encryptedValue = encrypt(value);
return await Key.findOneAndUpdate(
{ userId, name },
{
userId,
name,
value: encryptedValue,
expiresAt: new Date(expiresAt),
},
{ upsert: true, new: true },
).lean();
};
const deleteUserKey = async ({ userId, name, all = false }) => {
if (all) {
return await Key.deleteMany({ userId });
}
await Key.findOneAndDelete({ userId, name }).lean();
};
const checkUserKeyExpiry = (expiresAt, message) => {
const expiresAtDate = new Date(expiresAt);
if (expiresAtDate < new Date()) {
const expiryStr = `User-provided key expired at ${expiresAtDate.toLocaleString()}`;
const errorMessage = message ? `${message}\n${expiryStr}` : expiryStr;
throw new Error(errorMessage);
}
};
module.exports = {
updateUserPluginsService,
getUserKey,
getUserKeyExpiry,
updateUserKey,
deleteUserKey,
checkUserKeyExpiry,
};

1
client/package.json
View file

@ -39,6 +39,7 @@
"@radix-ui/react-slider": "^1.1.1",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.3",
"@radix-ui/react-tooltip": "^1.0.6",
"@tailwindcss/forms": "^0.5.3",
"@tanstack/react-query": "^4.28.0",
"@zattoo/use-double-click": "1.2.0",

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

@ -1,4 +1,4 @@
import { TConversation, TMessage, TPreset } from 'librechat-data-provider';
import type { TConversation, TMessage, TPreset, TMutation } from 'librechat-data-provider';
export type TSetOption = (param: number | string) => (newValue: number | string | boolean) => void;
export type TSetExample = (
@ -120,3 +120,29 @@ export type TDisplayProps = TText &
Pick<TAdditionalProps, 'isCreatedByUser' | 'message'> & {
showCursor?: boolean;
};
export type TConfigProps = {
userKey: string;
setUserKey: React.Dispatch<React.SetStateAction<string>>;
endpoint: string;
};
export type TDangerButtonProps = {
id: string;
confirmClear: boolean;
className?: string;
disabled?: boolean;
showText?: boolean;
mutation?: TMutation;
onClick: () => void;
infoTextCode: string;
actionTextCode: string;
dataTestIdInitial: string;
dataTestIdConfirm: string;
confirmActionTextCode?: string;
};
export type TDialogProps = {
open: boolean;
onOpenChange: (open: boolean) => void;
};

4
client/src/components/Auth/Login.tsx
View file

@ -30,7 +30,9 @@ function Login() {
className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
role="alert"
>
{localize('com_auth_error_login')}
{error?.includes('429')
? localize('com_auth_error_login_rl')
: localize('com_auth_error_login')}
</div>
)}
<LoginForm onSubmit={login} />

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

@ -3,7 +3,7 @@ import { useEffect } from 'react';
import filenamify from 'filenamify';
import exportFromJSON from 'export-from-json';
import { useSetRecoilState, useRecoilState, useRecoilValue } from 'recoil';
import { TEditPresetProps } from '~/common';
import type { TEditPresetProps } from '~/common';
import { useSetOptions, useLocalize } from '~/hooks';
import { Input, Label, Dropdown, Dialog, DialogClose, DialogButton } from '~/components/';
import DialogTemplate from '~/components/ui/DialogTemplate';

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

@ -1,4 +1,5 @@
import { TModelSelectProps, ESide } from '~/common';
import type { TModelSelectProps } from '~/common';
import { ESide } from '~/common';
import {
Switch,
SelectDropDown,

3
client/src/components/Endpoints/Settings/Anthropic.tsx
View file

@ -1,6 +1,7 @@
import React from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import { ESide, TModelSelectProps } from '~/common';
import type { TModelSelectProps } from '~/common';
import { ESide } from '~/common';
import {
Input,
Label,

3
client/src/components/Endpoints/Settings/Google.tsx
View file

@ -1,6 +1,7 @@
import React from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import { ESide, TModelSelectProps } from '~/common';
import type { TModelSelectProps } from '~/common';
import { ESide } from '~/common';
import {
SelectDropDown,
Input,

3
client/src/components/Endpoints/Settings/OpenAI.tsx
View file

@ -1,5 +1,6 @@
import TextareaAutosize from 'react-textarea-autosize';
import { ESide, TModelSelectProps } from '~/common';
import type { TModelSelectProps } from '~/common';
import { ESide } from '~/common';
import {
SelectDropDown,
Input,

3
client/src/components/Endpoints/Settings/Plugins.tsx
View file

@ -9,7 +9,8 @@ import {
HoverCardTrigger,
} from '~/components';
import OptionHover from './OptionHover';
import { ESide, TModelSelectProps } from '~/common';
import type { TModelSelectProps } from '~/common';
import { ESide } from '~/common';
import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils/';
import { useLocalize } from '~/hooks';

20
client/src/components/Input/EndpointMenu/EndpointItem.tsx
View file

@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
import { Settings } from 'lucide-react';
import { DropdownMenuRadioItem } from '~/components';
import { getIcon } from '~/components/Endpoints';
import { SetTokenDialog } from '../SetTokenDialog';
import { SetKeyDialog } from '../SetKeyDialog';
import { useLocalize } from '~/hooks';
import store from '~/store';
@ -18,7 +18,7 @@ export default function ModelItem({
value: string;
isSelected: boolean;
}) {
const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
const [isDialogOpen, setDialogOpen] = useState(false);
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const icon = getIcon({
@ -29,7 +29,7 @@ export default function ModelItem({
message: false,
});
const isUserProvided = endpointsConfig?.[endpoint]?.userProvide;
const userProvidesKey = endpointsConfig?.[endpoint]?.userProvide;
const localize = useLocalize();
// regular model
@ -52,7 +52,7 @@ export default function ModelItem({
</span>
)}
<div className="flex w-4 flex-1" />
{isUserProvided ? (
{userProvidesKey ? (
<button
className={cn(
'invisible m-0 mr-1 flex-initial rounded-md p-0 text-xs font-medium text-gray-400 hover:text-gray-700 group-hover:visible dark:font-normal dark:text-gray-400 dark:hover:text-gray-200',
@ -60,19 +60,17 @@ export default function ModelItem({
)}
onClick={(e) => {
e.preventDefault();
setSetTokenDialogOpen(true);
setDialogOpen(true);
}}
>
<Settings className="mr-1 inline-block w-[16px] items-center stroke-1" />
{localize('com_endpoint_config_token')}
{localize('com_endpoint_config_key')}
</button>
) : null}
</DropdownMenuRadioItem>
<SetTokenDialog
open={setTokenDialogOpen}
onOpenChange={setSetTokenDialogOpen}
endpoint={endpoint}
/>
{userProvidesKey && (
<SetKeyDialog open={isDialogOpen} onOpenChange={setDialogOpen} endpoint={endpoint} />
)}
</>
);
}

62
client/src/components/Input/EndpointMenu/EndpointMenu.jsx
View file

@ -17,20 +17,24 @@ import {
DropdownMenuTrigger,
Dialog,
DialogTrigger,
TooltipProvider,
Tooltip,
TooltipTrigger,
TooltipContent,
} from '~/components/ui/';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { cn, cleanupPreset, getDefaultConversation } from '~/utils';
import { useLocalize } from '~/hooks';
import { useLocalize, useLocalStorage } from '~/hooks';
import store from '~/store';
export default function NewConversationMenu() {
const localize = useLocalize();
const [menuOpen, setMenuOpen] = useState(false);
const [showPresets, setShowPresets] = useState(true);
const [showEndpoints, setShowEndpoints] = useState(true);
const [presetModelVisible, setPresetModelVisible] = useState(false);
const [preset, setPreset] = useState(false);
const [conversation, setConversation] = useRecoilState(store.conversation) || {};
const [conversation, setConversation] = useRecoilState(store.conversation) ?? {};
const [messages, setMessages] = useRecoilState(store.messages);
const availableEndpoints = useRecoilValue(store.availableEndpoints);
const endpointsConfig = useRecoilValue(store.endpointsConfig);
@ -71,24 +75,17 @@ export default function NewConversationMenu() {
}
}, [availableEndpoints]);
// save selected model to localStorage
// save states to localStorage
const [newUser, setNewUser] = useLocalStorage('newUser', true);
const [lastModel, setLastModel] = useLocalStorage('lastSelectedModel', {});
const setLastConvo = useLocalStorage('lastConversationSetup', {})[1];
const [lastBingSettings, setLastBingSettings] = useLocalStorage('lastBingSettings', {});
useEffect(() => {
if (endpoint) {
const lastSelectedModel = JSON.parse(localStorage.getItem('lastSelectedModel')) || {};
localStorage.setItem(
'lastSelectedModel',
JSON.stringify({ ...lastSelectedModel, [endpoint]: conversation.model }),
);
localStorage.setItem('lastConversationSetup', JSON.stringify(conversation));
}
if (endpoint === 'bingAI') {
const lastBingSettings = JSON.parse(localStorage.getItem('lastBingSettings')) || {};
if (endpoint && endpoint !== 'bingAI') {
setLastModel({ ...lastModel, [endpoint]: conversation?.model }), setLastConvo(conversation);
} else if (endpoint === 'bingAI') {
const { jailbreak, toneStyle } = conversation;
localStorage.setItem(
'lastBingSettings',
JSON.stringify({ ...lastBingSettings, jailbreak, toneStyle }),
);
setLastBingSettings({ ...lastBingSettings, jailbreak, toneStyle });
}
}, [conversation]);
@ -150,11 +147,19 @@ export default function NewConversationMenu() {
button: true,
});
const localize = useLocalize();
const onOpenChange = (open) => {
setMenuOpen(open);
if (newUser) {
setNewUser(false);
}
};
return (
<TooltipProvider delayDuration={300}>
<Tooltip>
<Dialog className="z-[100]">
<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
<DropdownMenu open={menuOpen} onOpenChange={onOpenChange}>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<Button
id="new-conversation-menu"
@ -165,14 +170,16 @@ export default function NewConversationMenu() {
}
>
{icon}
<span className="max-w-0 overflow-hidden whitespace-nowrap px-0 text-slate-600 transition-all group-data-[state=open]:max-w-[80px] group-data-[state=open]:px-2 dark:text-slate-300">
{localize('com_endpoint_new_topic')}
</span>
</Button>
</DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent forceMount={newUser} sideOffset={5}>
{localize('com_endpoint_open_menu')}
</TooltipContent>
<DropdownMenuContent
className="z-[100] w-[375px] dark:bg-gray-900 md:w-96"
onCloseAutoFocus={(event) => event.preventDefault()}
side="top"
>
<DropdownMenuLabel
className="cursor-pointer dark:text-gray-300"
@ -218,13 +225,8 @@ export default function NewConversationMenu() {
htmlFor="file-upload"
className="mr-1 flex h-[32px] h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
>
{/* <Button
type="button"
className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-red-700 hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-red-400 dark:hover:bg-gray-800 dark:hover:text-red-400"
> */}
<Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
{localize('com_ui_clear')} {localize('com_ui_all')}
{/* </Button> */}
</label>
</DialogTrigger>
<DialogTemplate
@ -269,5 +271,7 @@ export default function NewConversationMenu() {
preset={preset}
/>
</Dialog>
</Tooltip>
</TooltipProvider>
);
}

17
client/src/components/Input/EndpointMenu/FileUpload.tsx
View file

@ -51,6 +51,15 @@ const FileUpload: React.FC<FileUploadProps> = ({
reader.readAsText(file);
};
let statusText: string;
if (!status) {
statusText = text ?? localize('com_endpoint_import');
} else if (status === 'success') {
statusText = successText ?? localize('com_ui_upload_success');
} else {
statusText = invalidText ?? localize('com_ui_upload_invalid');
}
return (
<label
htmlFor={`file-upload-${id}`}
@ -60,13 +69,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
)}
>
<FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
<span className="flex text-xs ">
{!status
? text || localize('com_endpoint_import')
: status === localize('com_ui_succes')
? successText
: invalidText}
</span>
<span className="flex text-xs ">{statusText}</span>
<input
id={`file-upload-${id}`}
value=""

35
client/src/components/Input/SetKeyDialog/GoogleConfig.tsx Normal file
View file

@ -0,0 +1,35 @@
import React from 'react';
import { object, string } from 'zod';
import type { TConfigProps } from '~/common';
import FileUpload from '../EndpointMenu/FileUpload';
import { useLocalize } from '~/hooks';
const CredentialsSchema = object({
client_email: string().email().min(3),
project_id: string().min(3),
private_key: string().min(601),
});
const validateCredentials = (credentials: Record<string, unknown>) => {
const result = CredentialsSchema.safeParse(credentials);
return result.success;
};
const GoogleConfig = ({ setUserKey }: Pick<TConfigProps, 'setUserKey'>) => {
const localize = useLocalize();
return (
<FileUpload
id="googleKey"
className="w-full"
text={localize('com_endpoint_config_key_import_json_key')}
successText={localize('com_endpoint_config_key_import_json_key_success')}
invalidText={localize('com_endpoint_config_key_import_json_key_invalid')}
validator={validateCredentials}
onFileSelected={(data) => {
setUserKey(JSON.stringify(data));
}}
/>
);
};
export default GoogleConfig;

24
client/src/components/Input/SetTokenDialog/HelpText.tsx → client/src/components/Input/SetKeyDialog/HelpText.tsx
View file

@ -6,7 +6,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
const textMap = {
bingAI: (
<small className="break-all text-gray-600">
{localize('com_endpoint_config_token_get_edge_key')}{' '}
{localize('com_endpoint_config_key_get_edge_key')}{' '}
<a
target="_blank"
href="https://www.bing.com"
@ -16,21 +16,21 @@ function HelpText({ endpoint }: { endpoint: string }) {
https://www.bing.com
</a>
{'. '}
{localize('com_endpoint_config_token_get_edge_key_dev_tool')}{' '}
{localize('com_endpoint_config_key_get_edge_key_dev_tool')}{' '}
<a
target="_blank"
href="https://github.com/waylaidwanderer/node-chatgpt-api/issues/378#issuecomment-1559868368"
rel="noreferrer"
className="text-blue-600 underline"
>
{localize('com_endpoint_config_token_edge_instructions')}
{localize('com_endpoint_config_key_edge_instructions')}
</a>{' '}
{localize('com_endpoint_config_token_edge_full_token_string')}
{localize('com_endpoint_config_key_edge_full_token_string')}
</small>
),
chatGPTBrowser: (
<small className="break-all text-gray-600">
{localize('com_endpoint_config_token_chatgpt')}{' '}
{localize('com_endpoint_config_key_chatgpt')}{' '}
<a
target="_blank"
href="https://chat.openai.com"
@ -40,7 +40,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
https://chat.openai.com
</a>
{', '}
{localize('com_endpoint_config_token_chatgpt_then_visit')}{' '}
{localize('com_endpoint_config_key_chatgpt_then_visit')}{' '}
<a
target="_blank"
href="https://chat.openai.com/api/auth/session"
@ -50,31 +50,31 @@ function HelpText({ endpoint }: { endpoint: string }) {
https://chat.openai.com/api/auth/session
</a>
{'. '}
{localize('com_endpoint_config_token_chatgpt_copy_token')}
{localize('com_endpoint_config_key_chatgpt_copy_token')}
</small>
),
google: (
<small className="break-all text-gray-600">
{localize('com_endpoint_config_token_google_need_to')}{' '}
{localize('com_endpoint_config_key_google_need_to')}{' '}
<a
target="_blank"
href="https://console.cloud.google.com/vertex-ai"
rel="noreferrer"
className="text-blue-600 underline"
>
{localize('com_endpoint_config_token_google_vertex_ai')}
{localize('com_endpoint_config_key_google_vertex_ai')}
</a>{' '}
{localize('com_endpoint_config_token_google_vertex_api')}{' '}
{localize('com_endpoint_config_key_google_vertex_api')}{' '}
<a
target="_blank"
href="https://console.cloud.google.com/projectselector/iam-admin/serviceaccounts/create?walkthrough_id=iam--create-service-account#step_index=1"
rel="noreferrer"
className="text-blue-600 underline"
>
{localize('com_endpoint_config_token_google_service_account')}
{localize('com_endpoint_config_key_google_service_account')}
</a>
{'. '}
{localize('com_endpoint_config_token_google_vertex_api_role')}
{localize('com_endpoint_config_key_google_vertex_api_role')}
</small>
),
};

5
client/src/components/Input/SetTokenDialog/InputWithLabel.tsx → client/src/components/Input/SetKeyDialog/InputWithLabel.tsx
View file

@ -21,9 +21,10 @@ const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, id })
<Input
id={id}
value={value || ''}
data-testid={`input-${id}`}
value={value ?? ''}
onChange={onChange}
placeholder={`${localize('com_ui_enter')} ${label}`}
placeholder={`${localize('com_endpoint_config_value')} ${label}`}
className={cn(
defaultTextPropsLabel,
'flex h-10 max-h-10 w-full resize-none px-3 py-2',

58
client/src/components/Input/SetTokenDialog/OpenAIConfig.tsx → client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx
View file

@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
// import * as Checkbox from '@radix-ui/react-checkbox';
// import { CheckIcon } from '@radix-ui/react-icons';
import InputWithLabel from './InputWithLabel';
import store from '~/store';
import type { TConfigProps } from '~/common';
function isJson(str: string) {
try {
@ -15,56 +15,48 @@ function isJson(str: string) {
return true;
}
type OpenAIConfigProps = {
token: string;
setToken: React.Dispatch<React.SetStateAction<string>>;
endpoint: string;
};
const OpenAIConfig = ({ token, setToken, endpoint }: OpenAIConfigProps) => {
const OpenAIConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
const [showPanel, setShowPanel] = useState(endpoint === 'azureOpenAI');
const { getToken } = store.useToken(endpoint);
useEffect(() => {
const oldToken = getToken();
if (isJson(token)) {
if (isJson(userKey)) {
setShowPanel(true);
}
setToken(oldToken ?? '');
setUserKey('');
}, []);
useEffect(() => {
if (!showPanel && isJson(token)) {
setToken('');
if (!showPanel && isJson(userKey)) {
setUserKey('');
}
}, [showPanel]);
function getAzure(name: string) {
if (isJson(token)) {
const newToken = JSON.parse(token);
return newToken[name];
if (isJson(userKey)) {
const newKey = JSON.parse(userKey);
return newKey[name];
} else {
return '';
}
}
function setAzure(name: string, value: number | string | boolean) {
let newToken = {};
if (isJson(token)) {
newToken = JSON.parse(token);
let newKey = {};
if (isJson(userKey)) {
newKey = JSON.parse(userKey);
}
newToken[name] = value;
newKey[name] = value;
setToken(JSON.stringify(newToken));
setUserKey(JSON.stringify(newKey));
}
return (
<>
{!showPanel ? (
<>
<InputWithLabel
id={'chatGPTLabel'}
value={token || ''}
onChange={(e: { target: { value: string } }) => setToken(e.target.value || '')}
id={endpoint}
value={userKey ?? ''}
onChange={(e: { target: { value: string } }) => setUserKey(e.target.value ?? '')}
label={'OpenAI API Key'}
/>
</>
@ -72,36 +64,36 @@ const OpenAIConfig = ({ token, setToken, endpoint }: OpenAIConfigProps) => {
<>
<InputWithLabel
id={'instanceNameLabel'}
value={getAzure('azureOpenAIApiInstanceName') || ''}
value={getAzure('azureOpenAIApiInstanceName') ?? ''}
onChange={(e: { target: { value: string } }) =>
setAzure('azureOpenAIApiInstanceName', e.target.value || '')
setAzure('azureOpenAIApiInstanceName', e.target.value ?? '')
}
label={'Azure OpenAI Instance Name'}
/>
<InputWithLabel
id={'deploymentNameLabel'}
value={getAzure('azureOpenAIApiDeploymentName') || ''}
value={getAzure('azureOpenAIApiDeploymentName') ?? ''}
onChange={(e: { target: { value: string } }) =>
setAzure('azureOpenAIApiDeploymentName', e.target.value || '')
setAzure('azureOpenAIApiDeploymentName', e.target.value ?? '')
}
label={'Azure OpenAI Deployment Name'}
/>
<InputWithLabel
id={'versionLabel'}
value={getAzure('azureOpenAIApiVersion') || ''}
value={getAzure('azureOpenAIApiVersion') ?? ''}
onChange={(e: { target: { value: string } }) =>
setAzure('azureOpenAIApiVersion', e.target.value || '')
setAzure('azureOpenAIApiVersion', e.target.value ?? '')
}
label={'Azure OpenAI API Version'}
/>
<InputWithLabel
id={'apiKeyLabel'}
value={getAzure('azureOpenAIApiKey') || ''}
value={getAzure('azureOpenAIApiKey') ?? ''}
onChange={(e: { target: { value: string } }) =>
setAzure('azureOpenAIApiKey', e.target.value || '')
setAzure('azureOpenAIApiKey', e.target.value ?? '')
}
label={'Azure OpenAI API Key'}
/>

18
client/src/components/Input/SetKeyDialog/OtherConfig.tsx Normal file
View file

@ -0,0 +1,18 @@
import React from 'react';
import InputWithLabel from './InputWithLabel';
import type { TConfigProps } from '~/common';
import { useLocalize } from '~/hooks';
const OtherConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
const localize = useLocalize();
return (
<InputWithLabel
id={endpoint}
value={userKey ?? ''}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUserKey(e.target.value ?? '')}
label={localize('com_endpoint_config_key_name')}
/>
);
};
export default OtherConfig;

103
client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx Normal file
View file

@ -0,0 +1,103 @@
import React, { useState } from 'react';
import type { TDialogProps } from '~/common';
import { Dialog, Dropdown } from '~/components/ui';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { RevokeKeysButton } from '~/components/Nav';
import { cn, defaultTextProps, removeFocusOutlines, alternateName } from '~/utils';
import { useUserKey, useLocalize } from '~/hooks';
import GoogleConfig from './GoogleConfig';
import OpenAIConfig from './OpenAIConfig';
import OtherConfig from './OtherConfig';
import HelpText from './HelpText';
const endpointComponents = {
google: GoogleConfig,
openAI: OpenAIConfig,
azureOpenAI: OpenAIConfig,
gptPlugins: OpenAIConfig,
default: OtherConfig,
};
const EXPIRY = {
THIRTY_MINUTES: { display: 'in 30 minutes', value: 30 * 60 * 1000 },
TWO_HOURS: { display: 'in 2 hours', value: 2 * 60 * 60 * 1000 },
TWELVE_HOURS: { display: 'in 12 hours', value: 12 * 60 * 60 * 1000 },
ONE_DAY: { display: 'in 1 day', value: 24 * 60 * 60 * 1000 },
ONE_WEEK: { display: 'in 7 days', value: 7 * 24 * 60 * 60 * 1000 },
ONE_MONTH: { display: 'in 30 days', value: 30 * 24 * 60 * 60 * 1000 },
};
const SetKeyDialog = ({
open,
onOpenChange,
endpoint,
}: Pick<TDialogProps, 'open' | 'onOpenChange'> & {
endpoint: string;
}) => {
const [userKey, setUserKey] = useState('');
const [expiresAtLabel, setExpiresAtLabel] = useState(EXPIRY.TWELVE_HOURS.display);
const { getExpiry, saveUserKey } = useUserKey(endpoint);
const localize = useLocalize();
const expirationOptions = Object.values(EXPIRY);
const handleExpirationChange = (label: string) => {
setExpiresAtLabel(label);
};
const submit = () => {
const selectedOption = expirationOptions.find((option) => option.display === expiresAtLabel);
const expiresAt = Date.now() + (selectedOption ? selectedOption.value : 0);
saveUserKey(userKey, expiresAt);
onOpenChange(false);
setUserKey('');
};
const EndpointComponent = endpointComponents[endpoint] ?? endpointComponents['default'];
const expiryTime = getExpiry();
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate
title={`${localize('com_endpoint_config_key_for')} ${alternateName[endpoint] ?? endpoint}`}
className="w-full max-w-[650px] sm:w-3/4 md:w-3/4 lg:w-3/4"
main={
<div className="grid w-full items-center gap-2">
<small className="text-red-600">
{`${localize('com_endpoint_config_key_encryption')} ${
!expiryTime
? localize('com_endpoint_config_key_expiry')
: `${new Date(expiryTime).toLocaleString()}`
}`}
</small>
<Dropdown
label="Expires "
value={expiresAtLabel}
onChange={handleExpirationChange}
options={expirationOptions.map((option) => option.display)}
className={cn(
defaultTextProps,
'flex h-full w-full resize-none',
removeFocusOutlines,
)}
optionsClassName="max-h-72"
containerClassName="flex w-1/2 md:w-1/3 resize-none z-[51]"
/>
<EndpointComponent userKey={userKey} setUserKey={setUserKey} endpoint={endpoint} />
<HelpText endpoint={endpoint} />
</div>
}
selection={{
selectHandler: submit,
selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
selectText: localize('com_ui_submit'),
}}
leftButtons={
<RevokeKeysButton endpoint={endpoint} showText={false} disabled={!expiryTime} />
}
/>
</Dialog>
);
};
export default SetKeyDialog;

1
client/src/components/Input/SetKeyDialog/index.ts Normal file
View file

@ -0,0 +1 @@
export { default as SetKeyDialog } from './SetKeyDialog';

52
client/src/components/Input/SetTokenDialog/GoogleConfig.tsx
View file

@ -1,52 +0,0 @@
import React from 'react';
import FileUpload from '../EndpointMenu/FileUpload';
import { useLocalize } from '~/hooks';
const GoogleConfig = ({ setToken }: { setToken: React.Dispatch<React.SetStateAction<string>> }) => {
const localize = useLocalize();
return (
<FileUpload
id="googleKey"
className="w-full"
text={localize('com_endpoint_config_token_import_json_key')}
successText={localize('com_endpoint_config_token_import_json_key_succesful')}
invalidText={localize('com_endpoint_config_token_import_json_key_invalid')}
validator={(credentials) => {
if (!credentials) {
return false;
}
if (
!credentials.client_email ||
typeof credentials.client_email !== 'string' ||
credentials.client_email.length <= 2
) {
return false;
}
if (
!credentials.project_id ||
typeof credentials.project_id !== 'string' ||
credentials.project_id.length <= 2
) {
return false;
}
if (
!credentials.private_key ||
typeof credentials.private_key !== 'string' ||
credentials.private_key.length <= 600
) {
return false;
}
return true;
}}
onFileSelected={(data) => {
setToken(JSON.stringify(data));
}}
/>
);
};
export default GoogleConfig;

22
client/src/components/Input/SetTokenDialog/OtherConfig.tsx
View file

@ -1,22 +0,0 @@
import React from 'react';
import InputWithLabel from './InputWithLabel';
import { useLocalize } from '~/hooks';
type ConfigProps = {
token: string;
setToken: React.Dispatch<React.SetStateAction<string>>;
};
const OtherConfig = ({ token, setToken }: ConfigProps) => {
const localize = useLocalize();
return (
<InputWithLabel
id={'chatGPTLabel'}
value={token || ''}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setToken(e.target.value || '')}
label={localize('com_endpoint_config_token_name')}
/>
);
};
export default OtherConfig;

56
client/src/components/Input/SetTokenDialog/SetTokenDialog.tsx
View file

@ -1,56 +0,0 @@
import React, { useState } from 'react';
import HelpText from './HelpText';
import GoogleConfig from './GoogleConfig';
import OpenAIConfig from './OpenAIConfig';
import OtherConfig from './OtherConfig';
import { Dialog } from '~/components/ui';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { alternateName } from '~/utils';
import store from '~/store';
import { useLocalize } from '~/hooks';
const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
const localize = useLocalize();
const [token, setToken] = useState('');
const { saveToken } = store.useToken(endpoint);
const submit = () => {
saveToken(token);
onOpenChange(false);
};
const endpointComponents = {
google: GoogleConfig,
openAI: OpenAIConfig,
azureOpenAI: OpenAIConfig,
gptPlugins: OpenAIConfig,
default: OtherConfig,
};
const EndpointComponent = endpointComponents[endpoint] || endpointComponents['default'];
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate
title={`${localize('com_endpoint_config_token_for')} ${
alternateName[endpoint] ?? endpoint
}`}
className="w-full max-w-[650px] sm:w-3/4 md:w-3/4 lg:w-3/4"
main={
<div className="grid w-full items-center gap-2">
<EndpointComponent token={token} setToken={setToken} endpoint={endpoint} />
<small className="text-red-600">{localize('com_endpoint_config_token_server')}</small>
<HelpText endpoint={endpoint} />
</div>
}
selection={{
selectHandler: submit,
selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
selectText: localize('com_ui_submit'),
}}
/>
</Dialog>
);
};
export default SetTokenDialog;

1
client/src/components/Input/SetTokenDialog/index.ts
View file

@ -1 +0,0 @@
export { default as SetTokenDialog } from './SetTokenDialog';

57
client/src/components/Input/SubmitButton.jsx → client/src/components/Input/SubmitButton.tsx
View file

@ -1,33 +1,43 @@
import React, { useState } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { StopGeneratingIcon } from '~/components';
import { Settings } from 'lucide-react';
import { SetTokenDialog } from './SetTokenDialog';
import store from '~/store';
import { useLocalize } from '~/hooks';
import { SetKeyDialog } from './SetKeyDialog';
import { useUserKey, useLocalize } from '~/hooks';
export default function SubmitButton({
endpoint,
conversation,
submitMessage,
handleStopGenerating,
disabled,
isSubmitting,
endpointsConfig,
userProvidesKey,
}) {
const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
const { getToken } = store.useToken(endpoint);
const isTokenProvided = endpointsConfig?.[endpoint]?.userProvide ? !!getToken() : true;
const endpointsToHideSetTokens = new Set(['openAI', 'azureOpenAI', 'bingAI']);
const { endpoint } = conversation;
const [isDialogOpen, setDialogOpen] = useState(false);
const { checkExpiry } = useUserKey(endpoint);
const [isKeyProvided, setKeyProvided] = useState(userProvidesKey ? checkExpiry() : true);
const isKeyActive = checkExpiry();
const localize = useLocalize();
const clickHandler = (e) => {
useEffect(() => {
if (userProvidesKey) {
setKeyProvided(isKeyActive);
} else {
setKeyProvided(true);
}
}, [checkExpiry, endpoint, userProvidesKey, isKeyActive]);
const clickHandler = useCallback(
(e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
submitMessage();
};
},
[submitMessage],
);
const setToken = () => {
setSetTokenDialogOpen(true);
};
const setKey = useCallback(() => {
setDialogOpen(true);
}, []);
if (isSubmitting) {
return (
@ -41,26 +51,24 @@ export default function SubmitButton({
</div>
</button>
);
} else if (!isTokenProvided && !endpointsToHideSetTokens.has(endpoint)) {
} else if (!isKeyProvided) {
return (
<>
<button
onClick={setToken}
onClick={setKey}
type="button"
className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-auto items-center justify-center bg-transparent pr-1 text-gray-500"
>
<div className="flex items-center justify-center rounded-md text-xs group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
<div className="m-0 mr-0 flex items-center justify-center rounded-md p-2 sm:p-2">
<Settings className="mr-1 inline-block h-auto w-[18px]" />
{localize('com_endpoint_config_token_name_placeholder')}
{localize('com_endpoint_config_key_name_placeholder')}
</div>
</div>
</button>
<SetTokenDialog
open={setTokenDialogOpen}
onOpenChange={setSetTokenDialogOpen}
endpoint={endpoint}
/>
{userProvidesKey && (
<SetKeyDialog open={isDialogOpen} onOpenChange={setDialogOpen} endpoint={endpoint} />
)}
</>
);
} else {
@ -68,6 +76,7 @@ export default function SubmitButton({
<button
onClick={clickHandler}
disabled={disabled}
data-testid="submit-button"
className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
>
<div className="m-1 mr-0 rounded-md pb-[9px] pl-[9.5px] pr-[7px] pt-[11px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">

4
client/src/components/Input/TextChat.jsx
View file

@ -169,12 +169,12 @@ export default function TextChat({ isSearchView = false }) {
className="m-0 flex h-auto max-h-52 flex-1 resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-12 leading-6 placeholder:text-sm placeholder:text-gray-600 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder:text-gray-500 md:pl-2"
/>
<SubmitButton
conversation={conversation}
submitMessage={submitMessage}
handleStopGenerating={handleStopGenerating}
disabled={disabled || isNotAppendable}
isSubmitting={isSubmitting}
endpointsConfig={endpointsConfig}
endpoint={conversation?.endpoint}
userProvidesKey={endpointsConfig?.[conversation.endpoint]?.userProvide}
/>
</div>
</div>

2
client/src/components/Messages/Content/MessageContent.tsx
View file

@ -22,7 +22,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
<div
className={cn(
'markdown prose dark:prose-invert light w-full break-words',
isCreatedByUser ? 'whitespace-pre-wrap' : '',
isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
)}
>
{!isCreatedByUser ? (

2
client/src/components/Messages/Content/Plugin.tsx
View file

@ -96,7 +96,7 @@ const Plugin: React.FC<PluginProps> = ({ plugin }) => {
<>
<div
className={cn(
plugin.loading ? 'bg-green-100' : 'bg-[#ECECF1]',
plugin.loading ? 'bg-green-100' : 'bg-gray-20',
'flex items-center rounded p-3 text-xs text-gray-900',
)}
>

15
client/src/components/Messages/Message.tsx
View file

@ -11,6 +11,7 @@ import SiblingSwitch from './SiblingSwitch';
import { getIcon } from '~/components/Endpoints';
import { useMessageHandler } from '~/hooks';
import type { TMessageProps } from '~/common';
import { cn } from '~/utils';
import store from '~/store';
export default function Message({
@ -78,9 +79,14 @@ export default function Message({
}
};
const commonClasses =
'w-full border-b text-gray-800 group border-black/10 dark:border-gray-900/50 dark:text-gray-100';
const uniqueClasses = isCreatedByUser
? 'bg-white dark:bg-gray-800 dark:text-gray-20'
: 'bg-gray-50 dark:bg-gray-1000 dark:text-gray-70';
const props = {
className:
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800',
className: cn(commonClasses, uniqueClasses),
titleclass: '',
};
@ -90,11 +96,6 @@ export default function Message({
model: message?.model ?? conversation?.model,
});
if (!isCreatedByUser) {
props.className =
'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-gray-1000';
}
if (message?.bg && searchResult) {
props.className = message?.bg?.split('hover')[0];
props.titleclass = message?.bg?.split(props.className)[1] + ' cursor-pointer';

8
client/src/components/Nav/ExportConversation/ExportModel.jsx
View file

@ -119,7 +119,13 @@ export default function ExportModel({ open, onOpenChange }) {
};
const exportScreenshot = async () => {
const data = await captureScreenshot();
let data;
try {
data = await captureScreenshot();
} catch (err) {
console.error('Failed to capture screenshot');
return console.error(err);
}
download(data, `${filename}.png`, 'image/png');
};

88
client/src/components/Nav/Settings.jsx
View file

@ -1,88 +0,0 @@
import * as Tabs from '@radix-ui/react-tabs';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui';
import { General } from './SettingsTabs';
import { CogIcon } from '~/components/svg';
import { useEffect, useState } from 'react';
import { cn } from '~/utils/';
import { useRecoilValue } from 'recoil';
import { localize } from '~/localization/Translation';
import store from '~/store';
export default function Settings({ open, onOpenChange }) {
const [confirmClear, setConfirmClear] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const lang = useRecoilValue(store.lang);
// check if mobile dynamically and update
useEffect(() => {
const checkMobile = () => {
if (window.innerWidth <= 768) {
setIsMobile(true);
} else {
setIsMobile(false);
}
};
checkMobile();
window.addEventListener('resize', checkMobile);
}, []);
useEffect(() => {
// If the user clicks in the dialog when confirmClear is true, set it to false
const handleClick = (e) => {
if (confirmClear) {
if (e.target.id === 'clearConvosBtn' || e.target.id === 'clearConvosTxt') {
return;
}
setConfirmClear(false);
}
};
window.addEventListener('click', handleClick);
return () => window.removeEventListener('click', handleClick);
}, [confirmClear]);
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className={cn('shadow-2xl dark:bg-gray-900 dark:text-white md:w-[680px] ')}>
<DialogHeader>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
{localize(lang, 'com_nav_settings')}
</DialogTitle>
</DialogHeader>
<div className="px-6">
<Tabs.Root
defaultValue="general"
className="flex flex-col gap-6 md:flex-row"
orientation="vertical"
>
<Tabs.List
aria-label="Settings"
role="tablist"
aria-orientation="vertical"
className={cn(
'-ml-[8px] flex min-w-[180px] flex-shrink-0 flex-col',
isMobile && 'flex-row rounded-lg bg-gray-100 p-1 dark:bg-gray-800/30',
)}
style={{ outline: 'none' }}
>
<Tabs.Trigger
className={cn(
'flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm radix-state-active:bg-gray-800 radix-state-active:text-white',
isMobile &&
'group flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white',
)}
value="general"
>
<CogIcon />
{localize(lang, 'com_nav_setting_general')}
</Tabs.Trigger>
</Tabs.List>
<General />
</Tabs.Root>
</div>
</DialogContent>
</Dialog>
);
}

69
client/src/components/Nav/Settings.tsx Normal file
View file

@ -0,0 +1,69 @@
import * as Tabs from '@radix-ui/react-tabs';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui';
import { CogIcon, DataIcon } from '~/components/svg';
import { useMediaQuery, useLocalize } from '~/hooks';
import type { TDialogProps } from '~/common';
import { General, Data } from './SettingsTabs';
import { cn } from '~/utils';
export default function Settings({ open, onOpenChange }: TDialogProps) {
const isSmallScreen = useMediaQuery('(max-width: 768px)');
const localize = useLocalize();
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className={cn('shadow-2xl dark:bg-gray-900 dark:text-white md:w-[680px] ')}>
<DialogHeader>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
{localize('com_nav_settings')}
</DialogTitle>
</DialogHeader>
<div className="px-6">
<Tabs.Root
defaultValue="general"
className="flex flex-col gap-6 md:flex-row"
orientation="vertical"
>
<Tabs.List
aria-label="Settings"
role="tablist"
aria-orientation="vertical"
className={cn(
'-ml-[8px] flex min-w-[180px] flex-shrink-0 flex-col',
isSmallScreen ? 'flex-row rounded-lg bg-gray-100 p-1 dark:bg-gray-800/30' : '',
)}
style={{ outline: 'none' }}
>
<Tabs.Trigger
className={cn(
'group flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm radix-state-active:bg-gray-800 radix-state-active:text-white',
isSmallScreen
? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: '',
)}
value="general"
>
<CogIcon className="fill-gray-800" />
{localize('com_nav_setting_general')}
</Tabs.Trigger>
<Tabs.Trigger
className={cn(
'group flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm radix-state-active:bg-gray-800 radix-state-active:text-white',
isSmallScreen
? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: '',
)}
value="data"
>
<DataIcon />
{localize('com_nav_setting_data')}
</Tabs.Trigger>
</Tabs.List>
<General />
<Data />
</Tabs.Root>
</div>
</DialogContent>
</Dialog>
);
}

70
client/src/components/Nav/SettingsTabs/DangerButton.tsx Normal file
View file

@ -0,0 +1,70 @@
import { forwardRef } from 'react';
import type { ForwardedRef } from 'react';
import { CheckIcon } from 'lucide-react';
import { DialogButton } from '~/components/ui';
import { Spinner } from '~/components/svg';
import type { TDangerButtonProps } from '~/common';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
const DangerButton = (props: TDangerButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
const {
id,
onClick,
mutation,
disabled,
confirmClear,
infoTextCode,
actionTextCode,
className = '',
showText = true,
dataTestIdInitial,
dataTestIdConfirm,
confirmActionTextCode = 'com_ui_confirm_action',
} = props;
const localize = useLocalize();
const renderMutation = (node: React.ReactNode | string) => {
if (mutation && mutation.isLoading) {
return <Spinner className="h-5 w-5" />;
}
return node;
};
return (
<div className="flex items-center justify-between">
{showText && <div>{localize(infoTextCode)}</div>}
<DialogButton
id={id}
ref={ref}
disabled={disabled}
onClick={onClick}
className={cn(
' btn btn-danger relative border-none bg-red-700 text-white hover:bg-red-800 dark:hover:bg-red-800',
className,
)}
>
{confirmClear ? (
<div
className="flex w-full items-center justify-center gap-2"
id={`${id}-text`}
data-testid={dataTestIdConfirm}
>
{renderMutation(<CheckIcon className="h-5 w-5" />)}
{mutation && mutation.isLoading ? null : localize(confirmActionTextCode)}
</div>
) : (
<div
className="flex w-full items-center justify-center gap-2"
id={`${id}-text`}
data-testid={dataTestIdInitial}
>
{renderMutation(localize(actionTextCode))}
</div>
)}
</DialogButton>
</div>
);
};
export default forwardRef(DangerButton);

76
client/src/components/Nav/SettingsTabs/Data.tsx Normal file
View file

@ -0,0 +1,76 @@
import * as Tabs from '@radix-ui/react-tabs';
import { useRevokeAllUserKeysMutation, useRevokeUserKeyMutation } from 'librechat-data-provider';
import React, { useState, useCallback, useRef } from 'react';
import { useOnClickOutside } from '~/hooks';
import DangerButton from './DangerButton';
export const RevokeKeysButton = ({
showText = true,
endpoint = '',
all = false,
disabled = false,
}: {
showText?: boolean;
endpoint?: string;
all?: boolean;
disabled?: boolean;
}) => {
const [confirmClear, setConfirmClear] = useState(false);
const revokeKeyMutation = useRevokeUserKeyMutation(endpoint);
const revokeKeysMutation = useRevokeAllUserKeysMutation();
const contentRef = useRef(null);
useOnClickOutside(contentRef, () => confirmClear && setConfirmClear(false), []);
const revokeAllUserKeys = useCallback(() => {
if (confirmClear) {
revokeKeysMutation.mutate({});
setConfirmClear(false);
} else {
setConfirmClear(true);
}
}, [confirmClear, revokeKeysMutation]);
const revokeUserKey = useCallback(() => {
if (!endpoint) {
return;
} else if (confirmClear) {
revokeKeyMutation.mutate({});
setConfirmClear(false);
} else {
setConfirmClear(true);
}
}, [confirmClear, revokeKeyMutation, endpoint]);
const onClick = all ? revokeAllUserKeys : revokeUserKey;
return (
<DangerButton
ref={contentRef}
showText={showText}
onClick={onClick}
disabled={disabled}
confirmClear={confirmClear}
id={'revoke-all-user-keys'}
actionTextCode={'com_ui_revoke'}
infoTextCode={'com_ui_revoke_info'}
dataTestIdInitial={'revoke-all-keys-initial'}
dataTestIdConfirm={'revoke-all-keys-confirm'}
mutation={all ? revokeKeysMutation : revokeKeyMutation}
/>
);
};
function Data() {
return (
<Tabs.Content value="data" role="tabpanel" className="w-full md:min-h-[300px]">
<div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300">
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
<RevokeKeysButton all={true} />
</div>
</div>
</Tabs.Content>
);
}
export default React.memo(Data);

90
client/src/components/Nav/SettingsTabs/General.tsx
View file

@ -1,13 +1,11 @@
import * as Tabs from '@radix-ui/react-tabs';
import { CheckIcon } from 'lucide-react';
import { DialogButton } from '~/components/ui';
import React, { useState, useContext, useEffect, useCallback } from 'react';
import { useClearConversationsMutation } from 'librechat-data-provider';
import { useRecoilState } from 'recoil';
import * as Tabs from '@radix-ui/react-tabs';
import React, { useState, useContext, useEffect, useCallback, useRef } from 'react';
import { useClearConversationsMutation } from 'librechat-data-provider';
import { ThemeContext, useLocalize, useOnClickOutside } from '~/hooks';
import type { TDangerButtonProps } from '~/common';
import DangerButton from './DangerButton';
import store from '~/store';
import { ThemeContext } from '~/hooks';
import { cn } from '~/utils';
import { useLocalize } from '~/hooks';
export const ThemeSelector = ({
theme,
@ -38,53 +36,26 @@ export const ClearChatsButton = ({
confirmClear,
className = '',
showText = true,
mutation,
onClick,
}: {
confirmClear: boolean;
className?: string;
showText: boolean;
onClick: () => void;
}) => {
const localize = useLocalize();
}: Pick<
TDangerButtonProps,
'confirmClear' | 'mutation' | 'className' | 'showText' | 'onClick'
>) => {
return (
<div className="flex items-center justify-between">
{showText && <div>{localize('com_nav_clear_all_chats')}</div>}
<DialogButton
<DangerButton
id="clearConvosBtn"
mutation={mutation}
confirmClear={confirmClear}
className={className}
showText={showText}
infoTextCode="com_nav_clear_all_chats"
actionTextCode="com_ui_clear"
confirmActionTextCode="com_nav_confirm_clear"
dataTestIdInitial="clear-convos-initial"
dataTestIdConfirm="clear-convos-confirm"
onClick={onClick}
className={cn(
' btn btn-danger relative border-none bg-red-700 text-white hover:bg-red-800 dark:hover:bg-red-800',
className,
)}
>
{/* <button
className="btn mt-2 inline-flex h-10 items-center justify-center rounded-md relative bg-red-600 text-white hover:bg-red-800"
type="button"
id="clearConvosBtn"
onClick={onClick}
> */}
{confirmClear ? (
<div
className="flex w-full items-center justify-center gap-2"
id="clearConvosTxt"
data-testid="clear-convos-confirm"
>
<CheckIcon className="h-5 w-5" /> {localize('com_nav_confirm_clear')}
</div>
) : (
<div
className="flex w-full items-center justify-center gap-2"
id="clearConvosTxt"
data-testid="clear-convos-initial"
>
{localize('com_ui_clear')}
</div>
)}
{/* </button> */}
</DialogButton>
</div>
/>
);
};
@ -127,6 +98,9 @@ function General() {
const { newConversation } = store.useConversation();
const { refreshConversations } = store.useConversations();
const contentRef = useRef(null);
useOnClickOutside(contentRef, () => confirmClear && setConfirmClear(false), []);
useEffect(() => {
if (clearConvosMutation.isSuccess) {
newConversation();
@ -159,7 +133,12 @@ function General() {
);
return (
<Tabs.Content value="general" role="tabpanel" className="w-full md:min-h-[300px]">
<Tabs.Content
value="general"
role="tabpanel"
className="w-full md:min-h-[300px]"
ref={contentRef}
>
<div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300">
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
<ThemeSelector theme={theme} onChange={changeTheme} />
@ -168,7 +147,12 @@ function General() {
<LangSelector langcode={langcode} onChange={changeLang} />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
<ClearChatsButton confirmClear={confirmClear} onClick={clearConvos} showText={true} />
<ClearChatsButton
confirmClear={confirmClear}
onClick={clearConvos}
showText={true}
mutation={clearConvosMutation}
/>
</div>
</div>
</Tabs.Content>

2
client/src/components/Nav/SettingsTabs/index.ts
View file

@ -1,2 +1,4 @@
export { default as General } from './General';
export { ClearChatsButton } from './General';
export { default as Data } from './Data';
export { RevokeKeysButton } from './Data';

9
client/src/components/svg/CogIcon.tsx
View file

@ -1,13 +1,16 @@
import * as React from 'react';
import { cn } from '~/utils';
export default function CogIcon() {
export default function CogIcon({ className = '' }) {
return (
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
viewBox="0 0 20 20"
className="group-radix-state-active:fill-white h-4 h-5 w-4 w-5 fill-white dark:fill-gray-500"
className={cn(
'h-4 h-5 w-4 w-5 fill-white group-radix-state-active:fill-white dark:fill-gray-500',
className,
)}
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"

18
client/src/components/svg/DataIcon.tsx Normal file
View file

@ -0,0 +1,18 @@
export default function DataIcon() {
return (
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
viewBox="0 0 20 20"
className="h-4 h-5 w-4 w-5 fill-gray-800 group-radix-state-active:fill-white dark:fill-gray-500"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
<path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
<path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
</svg>
);
}

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

@ -2,6 +2,7 @@ export { default as Plugin } from './Plugin';
export { default as GPTIcon } from './GPTIcon';
export { default as EditIcon } from './EditIcon';
export { default as CogIcon } from './CogIcon';
export { default as DataIcon } from './DataIcon';
export { default as Panel } from './Panel';
export { default as Spinner } from './Spinner';
export { default as Clipboard } from './Clipboard';

21
client/src/components/ui/Dropdown.jsx
View file

@ -3,7 +3,15 @@ import CheckMark from '../svg/CheckMark';
import { Listbox } from '@headlessui/react';
import { cn } from '~/utils/';
function Dropdown({ value, onChange, options, className, containerClassName }) {
function Dropdown({
value,
label = '',
onChange,
options,
className,
containerClassName,
optionsClassName = '',
}) {
const currentOption =
options.find((element) => element === value || element?.value === value) ?? value;
return (
@ -18,7 +26,7 @@ function Dropdown({ value, onChange, options, className, containerClassName }) {
>
<span className="inline-flex w-full truncate">
<span className="flex h-6 items-center gap-1 truncate text-sm text-black dark:text-white">
{currentOption?.display ?? value}
{`${label}${currentOption?.display ?? value}`}
</span>
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@ -38,12 +46,17 @@ function Dropdown({ value, onChange, options, className, containerClassName }) {
</svg>
</span>
</Listbox.Button>
<Listbox.Options className="absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%] ">
<Listbox.Options
className={cn(
'absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%] ',
optionsClassName,
)}
>
{options.map((item, i) => (
<Listbox.Option
key={i}
value={item?.value ?? item}
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
>
<span className="flex items-center gap-1.5 truncate">
<span

3
client/src/components/ui/DropdownMenu.tsx
View file

@ -1,8 +1,7 @@
import * as React from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { Check, ChevronRight, Circle } from 'lucide-react';
import { cn } from '../../utils';
import { cn } from '~/utils';
const DropdownMenu = DropdownMenuPrimitive.Root;

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

@ -147,7 +147,7 @@ function MultiSelectDropDown({
<Listbox.Option
key={i}
value={option[optionValueKey]}
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
>
<span className="flex items-center gap-1.5 truncate">
{!option.isButton && (

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

@ -107,7 +107,7 @@ function SelectDropDown({
<Listbox.Option
key={i}
value={option}
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
>
<span className="flex items-center gap-1.5 truncate">
<span

45
client/src/components/ui/Tooltip.tsx Normal file
View file

@ -0,0 +1,45 @@
import * as React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { cn } from '~/utils';
const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
>((props, ref) => <TooltipPrimitive.Trigger ref={ref} {...props} />);
TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
const TooltipPortal = TooltipPrimitive.Portal;
const TooltipArrow = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Arrow>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
>((props, ref) => <TooltipPrimitive.Arrow ref={ref} {...props} />);
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className = '', forceMount, children, ...props }, ref) => (
<TooltipPortal forceMount={forceMount}>
<TooltipPrimitive.Content
className={cn(
'shadow-xs relative max-w-xs rounded-lg border border-black/10 bg-black p-1 transition-opacity',
className,
)}
ref={ref}
{...props}
>
<span className="flex items-center whitespace-pre-wrap px-2 py-1 text-center text-sm font-medium normal-case text-white">
{children}
<TooltipArrow className="TooltipArrow" />
</span>
</TooltipPrimitive.Content>
</TooltipPortal>
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
const TooltipProvider = TooltipPrimitive.Provider;
export { Tooltip, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, TooltipProvider };

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

@ -14,6 +14,7 @@ export * from './Switch';
export * from './Tabs';
export * from './Templates';
export * from './Textarea';
export * from './Tooltip';
export { default as Dropdown } from './Dropdown';
export { default as SelectDropDown } from './SelectDropDown';
export { default as MultiSelectDropDown } from './MultiSelectDropDown';

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

@ -2,11 +2,14 @@ export * from './AuthContext';
export * from './ThemeContext';
export * from './ScreenshotContext';
export * from './ApiErrorBoundaryContext';
export { default as useUserKey } from './useUserKey';
export { default as useDebounce } from './useDebounce';
export { default as useLocalize } from './useLocalize';
export { default as useMediaQuery } from './useMediaQuery';
export { default as useSetOptions } from './useSetOptions';
export { default as useGenerations } from './useGenerations';
export { default as useScrollToRef } from './useScrollToRef';
export { default as useLocalStorage } from './useLocalStorage';
export { default as useServerStream } from './useServerStream';
export { default as useOnClickOutside } from './useOnClickOutside';
export { default as useMessageHandler } from './useMessageHandler';

53
client/src/hooks/useLocalStorage.tsx Normal file
View file

@ -0,0 +1,53 @@
/* `useLocalStorage`
*
* Features:
* - JSON Serializing
* - Also value will be updated everywhere, when value updated (via `storage` event)
*/
import { useEffect, useState } from 'react';
export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (value: T) => void] {
const [value, setValue] = useState(defaultValue);
useEffect(() => {
const item = localStorage.getItem(key);
if (!item) {
localStorage.setItem(key, JSON.stringify(defaultValue));
}
setValue(item ? JSON.parse(item) : defaultValue);
function handler(e: StorageEvent) {
if (e.key !== key) {
return;
}
const lsi = localStorage.getItem(key);
setValue(JSON.parse(lsi ?? ''));
}
window.addEventListener('storage', handler);
return () => {
window.removeEventListener('storage', handler);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const setValueWrap = (value: T) => {
try {
setValue(value);
localStorage.setItem(key, JSON.stringify(value));
if (typeof window !== 'undefined') {
window.dispatchEvent(new StorageEvent('storage', { key }));
}
} catch (e) {
console.error(e);
}
};
return [value, setValueWrap];
}

6
client/src/hooks/useMessageHandler.ts
View file

@ -3,6 +3,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { parseConvo, getResponseSender } from 'librechat-data-provider';
import type { TMessage, TSubmission } from 'librechat-data-provider';
import type { TAskFunction } from '~/common';
import useUserKey from './useUserKey';
import store from '~/store';
const useMessageHandler = () => {
@ -16,7 +17,7 @@ const useMessageHandler = () => {
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const [messages, setMessages] = useRecoilState(store.messages);
const { endpoint } = currentConversation;
const { getToken } = store.useToken(endpoint ?? '');
const { getExpiry } = useUserKey(endpoint ?? '');
const ask: TAskFunction = (
{ text, parentMessageId = null, conversationId = null, messageId = null },
@ -49,14 +50,13 @@ const useMessageHandler = () => {
}
const isEditOrContinue = isEdited || isContinued;
const { userProvide } = endpointsConfig[endpoint] ?? {};
// set the endpoint option
const convo = parseConvo(endpoint, currentConversation);
const endpointOption = {
endpoint,
...convo,
token: userProvide ? getToken() : null,
key: getExpiry(),
};
const responseSender = getResponseSender(endpointOption);

1
client/src/hooks/useServerStream.ts
View file

@ -1,5 +1,6 @@
import { useEffect } from 'react';
import { useResetRecoilState, useSetRecoilState } from 'recoil';
/* @ts-ignore */
import { SSE, createPayload, tMessageSchema, tConversationSchema } from 'librechat-data-provider';
import type { TResPlugin, TMessage, TConversation, TSubmission } from 'librechat-data-provider';
import { useAuthContext } from '~/hooks/AuthContext';

58
client/src/hooks/useUserKey.ts Normal file
View file

@ -0,0 +1,58 @@
import { useRecoilValue } from 'recoil';
import { useMemo, useCallback } from 'react';
import { useUpdateUserKeysMutation, useUserKeyQuery } from 'librechat-data-provider';
import store from '~/store';
const useUserKey = (endpoint: string) => {
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const config = endpointsConfig[endpoint];
const { azure } = config ?? {};
let keyEndpoint = endpoint;
if (azure) {
keyEndpoint = 'azureOpenAI';
} else if (keyEndpoint === 'gptPlugins') {
keyEndpoint = 'openAI';
}
const updateKey = useUpdateUserKeysMutation();
const checkUserKey = useUserKeyQuery(keyEndpoint);
const getExpiry = useCallback(() => {
if (checkUserKey.data) {
return checkUserKey.data.expiresAt;
}
}, [checkUserKey.data]);
const checkExpiry = useCallback(() => {
const expiresAt = getExpiry();
if (!expiresAt) {
return false;
}
const expiresAtDate = new Date(expiresAt);
if (expiresAtDate < new Date()) {
return false;
}
return true;
}, [getExpiry]);
const saveUserKey = useCallback(
(value: string, expiresAt: number) => {
const dateStr = new Date(expiresAt).toISOString();
updateKey.mutate({
name: keyEndpoint,
value,
expiresAt: dateStr,
});
},
[updateKey, keyEndpoint],
);
return useMemo(
() => ({ getExpiry, checkExpiry, saveUserKey }),
[getExpiry, checkExpiry, saveUserKey],
);
};
export default useUserKey;

1
client/src/localization/languages/Br.tsx
View file

@ -84,6 +84,7 @@ export default {
com_auth_to_try_again: 'para tentar novamente.',
com_auth_submit_registration: 'Enviar registro',
com_auth_welcome_back: 'Bem-vindo(a) de volta',
com_endpoint_open_menu: 'Abrir Menu',
com_endpoint_bing_enable_sydney: 'Habilitar Sydney',
com_endpoint_bing_to_enable_sydney: 'Para habilitar Sydney',
com_endpoint_bing_jailbreak: 'Jailbreak',

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