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

Build/Refactor: lint pre-commit hook and reformat repo to spec (#314)

Browse source 
* build/refactor: move lint/prettier packages to project root, install husky, add pre-commit hook

* refactor: reformat files

* build: put full eslintrc back with all rules
This commit is contained in:
Dan Orlando 2023-05-18 11:09:31 -07:00 • committed by GitHub
parent 8d75b25104
commit 7fdc862042
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
157 changed files with 4836 additions and 2403 deletions
Download patch file Download diff file Expand all files Collapse all files

113
.eslintrc.js Normal file
View file

@ -0,0 +1,113 @@
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
commonjs: true,
es6: true
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
plugins: ['react', 'react-hooks', '@typescript-eslint'],
rules: {
'@typescript-eslint/ban-ts-comment': ['error', { 'ts-ignore': 'allow-with-description' }],
indent: ['error', 2, { SwitchCase: 1 }],
'max-len': [
'error',
{
code: 150,
ignoreStrings: true,
ignoreTemplateLiterals: true,
ignoreComments: true
}
],
'linebreak-style': 0,
// "arrow-parens": [2, "as-needed", { requireForBlockBody: true }],
// 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
'no-console': 'off',
'import/extensions': 'off',
'no-use-before-define': [
'error',
{
functions: false
}
],
'no-promise-executor-return': 'off',
'no-param-reassign': 'off',
'no-continue': 'off',
'no-restricted-syntax': 'off',
'react/prop-types': ['off'],
'react/display-name': ['off']
},
overrides: [
{
files: ['**/*.ts', '**/*.tsx'],
rules: {
'no-unused-vars': 'off', // off because it conflicts with '@typescript-eslint/no-unused-vars'
'react/display-name': 'off',
'@typescript-eslint/no-unused-vars': 'warn'
}
},
{
files: ['rollup.config.js', '.eslintrc.js', 'jest.config.js'],
env: {
node: true
}
},
{
files: [
'**/*.test.js',
'**/*.test.jsx',
'**/*.test.ts',
'**/*.test.tsx',
'**/*.spec.js',
'**/*.spec.jsx',
'**/*.spec.ts',
'**/*.spec.tsx',
'setupTests.js'
],
env: {
jest: true,
node: true
},
rules: {
'react/display-name': 'off',
'react/prop-types': 'off',
'react/no-unescaped-entities': 'off'
}
},
{
files: '**/*.+(ts)',
parser: '@typescript-eslint/parser',
parserOptions: {
project: './client/tsconfig.json'
},
plugins: ['@typescript-eslint/eslint-plugin'],
extends: [
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended'
]
}
],
settings: {
react: {
createClass: 'createReactClass', // Regex for Component Factory to use,
// default to "createReactClass"
pragma: 'React', // Pragma to use, default to "React"
fragment: 'Fragment', // Fragment to use (may be a property of <pragma>), default to "Fragment"
version: 'detect' // React version. "detect" automatically picks the version you have installed.
}
}
};

5
.husky/pre-commit Executable file
View file

@ -0,0 +1,5 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged

19
.prettierrc.js Normal file
View file

@ -0,0 +1,19 @@
module.exports = {
printWidth: 100,
useTabs: false,
tabWidth: 2,
semi: true,
singleQuote: true,
// bracketSpacing: false,
trailingComma: 'none',
arrowParens: 'always',
embeddedLanguageFormatting: 'auto',
insertPragma: false,
proseWrap: 'preserve',
quoteProps: 'as-needed',
requirePragma: false,
rangeStart: 0,
endOfLine: 'auto',
jsxBracketSameLine: false,
jsxSingleQuote: false,
};

39
api/.eslintrc.js
View file

@ -1,39 +0,0 @@
module.exports = {
env: {
es2021: true,
node: true
},
extends: ['eslint:recommended'],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
indent: ['error', 2, { SwitchCase: 1 }],
'max-len': [
'error',
{
code: 150,
ignoreStrings: true,
ignoreTemplateLiterals: true,
ignoreComments: true
}
],
'linebreak-style': 0,
'arrow-parens': [2, 'as-needed', { requireForBlockBody: true }],
// 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
'no-console': 'off',
'import/extensions': 'off',
'no-use-before-define': [
'error',
{
functions: false
}
],
'no-promise-executor-return': 'off',
'no-param-reassign': 'off',
'no-continue': 'off',
'no-restricted-syntax': 'off'
}
};

22
api/.prettierrc
View file

@ -1,22 +0,0 @@
{
"arrowParens": "always",
"bracketSpacing": true,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"singleAttributePerLine": true,
"bracketSameLine": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 110,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "none",
"useTabs": false,
"vueIndentScriptAndStyle": false,
"parser": "babel"
}

3
api/app/clients/bingai.js
View file

@ -23,7 +23,8 @@ 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,
userToken:
process.env.BINGAI_TOKEN == 'user_provided' ? token : process.env.BINGAI_TOKEN ?? null,
// If the above doesn't work, provide all your cookies as a string instead
// cookies: '',
debug: false,

6
api/app/clients/chatgpt-browser.js
View file

@ -18,9 +18,11 @@ 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',
reverseProxyUrl:
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:
process.env.CHATGPT_TOKEN == 'user_provided' ? token : process.env.CHATGPT_TOKEN ?? null,
model: model,
debug: false,
proxy: process.env.PROXY || null,

6
api/app/clients/chatgpt-client.js
View file

@ -1,7 +1,7 @@
require('dotenv').config();
const { KeyvFile } = require('keyv-file');
const { genAzureEndpoint } = require('../../utils/genAzureEndpoints');
const tiktoken = require("@dqbd/tiktoken");
const tiktoken = require('@dqbd/tiktoken');
const encoding_for_model = tiktoken.encoding_for_model;
const askClient = async ({
@ -27,7 +27,7 @@ const askClient = async ({
const azure = process.env.AZURE_OPENAI_API_KEY ? true : false;
if (promptPrefix == null) {
promptText = "You are ChatGPT, a large language model trained by OpenAI.";
promptText = 'You are ChatGPT, a large language model trained by OpenAI.';
} else {
promptText = promptPrefix;
}
@ -45,7 +45,7 @@ const askClient = async ({
},
chatGptLabel,
promptPrefix,
proxy: process.env.PROXY || null,
proxy: process.env.PROXY || null
// debug: true
};

13
api/app/google/GoogleClient.js
View file

@ -3,7 +3,10 @@ const TextStream = require('../stream');
const { google } = require('googleapis');
const { Agent, ProxyAgent } = require('undici');
const { getMessages, saveMessage, saveConvo } = require('../../models');
const { encoding_for_model: encodingForModel, get_encoding: getEncoding } = require('@dqbd/tiktoken');
const {
encoding_for_model: encodingForModel,
get_encoding: getEncoding
} = require('@dqbd/tiktoken');
const tokenizersCache = {};
@ -65,7 +68,8 @@ class GoogleAgent {
// The max prompt tokens is determined by the max context tokens minus the max response tokens.
// Earlier messages will be dropped until the prompt is within the limit.
this.maxResponseTokens = this.modelOptions.maxOutputTokens || 1024;
this.maxPromptTokens = this.options.maxPromptTokens || this.maxContextTokens - this.maxResponseTokens;
this.maxPromptTokens =
this.options.maxPromptTokens || this.maxContextTokens - this.maxResponseTokens;
if (this.maxPromptTokens + this.maxResponseTokens > this.maxContextTokens) {
throw new Error(
@ -291,7 +295,10 @@ class GoogleAgent {
try {
const result = await this.getCompletion(message, messages, opts.abortController);
blocked = result?.predictions?.[0]?.safetyAttributes?.blocked;
reply = result?.predictions?.[0]?.candidates?.[0]?.content || result?.predictions?.[0]?.content || '';
reply =
result?.predictions?.[0]?.candidates?.[0]?.content ||
result?.predictions?.[0]?.content ||
'';
if (blocked === true) {
reply = `Google blocked a proper response to your message:\n${JSON.stringify(
result.predictions[0].safetyAttributes

5
api/app/stream.js
View file

@ -16,10 +16,7 @@ class TextStream extends Readable {
if (this.currentIndex < this.text.length) {
setTimeout(() => {
const remainingChars = this.text.length - this.currentIndex;
const chunkSize = Math.min(
this.randomInt(minChunkSize, maxChunkSize + 1),
remainingChars
);
const chunkSize = Math.min(this.randomInt(minChunkSize, maxChunkSize + 1), remainingChars);
const chunk = this.text.slice(this.currentIndex, this.currentIndex + chunkSize);
this.push(chunk);

2
api/lib/parse/getCitations.js
View file

@ -7,7 +7,7 @@ const getCitations = (res) => {
if (!textBlocks) return '';
let links = textBlocks[textBlocks.length - 1]?.text.match(regex);
if (links?.length === 0 || !links) return '';
links = links.map((link) => link.trim());
links = links.map(link => link.trim());
return links.join('\n');
};

2
api/middleware/requireLocalAuth.js
View file

@ -19,7 +19,7 @@ const requireLocalAuth = (req, res, next) => {
}
if (!user) {
log({
title: '(requireLocalAuth) Error: No user',
title: '(requireLocalAuth) Error: No user'
});
return res.status(422).send(info);
}

4
api/models/Message.js
View file

@ -41,7 +41,6 @@ module.exports = {
text,
isCreatedByUser
};
} catch (err) {
console.error(`Error saving message: ${err}`);
throw new Error('Failed to save message.');
@ -57,7 +56,6 @@ module.exports = {
.deleteMany({ createdAt: { $gt: message.createdAt } })
.exec();
}
} catch (err) {
console.error(`Error deleting messages: ${err}`);
throw new Error('Failed to delete messages.');
@ -67,7 +65,6 @@ module.exports = {
async getMessages(filter) {
try {
return await Message.find(filter).sort({ createdAt: 1 }).exec();
} catch (err) {
console.error(`Error getting messages: ${err}`);
throw new Error('Failed to get messages.');
@ -77,7 +74,6 @@ module.exports = {
async deleteMessages(filter) {
try {
return await Message.deleteMany(filter).exec();
} catch (err) {
console.error(`Error deleting messages: ${err}`);
throw new Error('Failed to delete messages.');

15
api/models/Prompt.js
View file

@ -1,6 +1,7 @@
const mongoose = require('mongoose');
const promptSchema = mongoose.Schema({
const promptSchema = mongoose.Schema(
{
title: {
type: String,
required: true
@ -10,9 +11,11 @@ const promptSchema = mongoose.Schema({
required: true
},
category: {
type: String,
type: String
}
},
}, { timestamps: true });
{ timestamps: true }
);
const Prompt = mongoose.models.Prompt || mongoose.model('Prompt', promptSchema);
@ -31,7 +34,7 @@ module.exports = {
},
getPrompts: async (filter) => {
try {
return await Prompt.find(filter).exec()
return await Prompt.find(filter).exec();
} catch (error) {
console.error(error);
return { prompt: 'Error getting prompts' };
@ -39,10 +42,10 @@ module.exports = {
},
deletePrompts: async (filter) => {
try {
return await Prompt.deleteMany(filter).exec()
return await Prompt.deleteMany(filter).exec();
} catch (error) {
console.error(error);
return { prompt: 'Error deleting prompts' };
}
}
}
};

1
api/models/User.js
View file

@ -142,7 +142,6 @@ userSchema.methods.comparePassword = function (candidatePassword, callback) {
};
module.exports.hashPassword = async (password) => {
const hashedPassword = await new Promise((resolve, reject) => {
bcrypt.hash(password, 10, function (err, hash) {
if (err) reject(err);

7
api/models/plugins/mongoMeili.js
View file

@ -19,10 +19,7 @@ const createMeiliMongooseModel = function ({ index, indexName, client, attribute
static async clearMeiliIndex() {
await index.delete();
// await index.deleteAllDocuments();
await this.collection.updateMany(
{ _meiliIndex: true },
{ $set: { _meiliIndex: false } }
);
await this.collection.updateMany({ _meiliIndex: true }, { $set: { _meiliIndex: false } });
}
static async resetIndex() {
@ -67,7 +64,7 @@ const createMeiliMongooseModel = function ({ index, indexName, client, attribute
return { ...results, [key]: 1 };
},
{ _id: 1 }
),
)
);
// Add additional data from mongodb into Meili search hits

12
api/models/schema/tokenSchema.js
View file

@ -1,22 +1,22 @@
const mongoose = require("mongoose");
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const tokenSchema = new Schema({
userId: {
type: Schema.Types.ObjectId,
required: true,
ref: "user",
ref: 'user'
},
token: {
type: String,
required: true,
required: true
},
createdAt: {
type: Date,
required: true,
default: Date.now,
expires: 900,
},
expires: 900
}
});
module.exports = mongoose.model("Token", tokenSchema);
module.exports = mongoose.model('Token', tokenSchema);

46
api/server/controllers/auth.controller.js
View file

@ -3,15 +3,15 @@ const {
logoutUser,
registerUser,
requestPasswordReset,
resetPassword,
} = require("../services/auth.service");
resetPassword
} = require('../services/auth.service');
const isProduction = process.env.NODE_ENV === 'production';
const loginController = async (req, res) => {
try {
const token = req.user.generateToken();
const user = await loginUser(req.user)
const user = await loginUser(req.user);
if (user) {
res.cookie('token', token, {
expires: new Date(Date.now() + eval(process.env.SESSION_EXPIRY)),
@ -19,12 +19,10 @@ const loginController = async (req, res) => {
secure: isProduction
});
res.status(200).send({ token, user });
}
else {
} else {
return res.status(400).json({ message: 'Invalid credentials' });
}
}
catch (err) {
} catch (err) {
console.log(err);
return res.status(500).json({ message: err.message });
}
@ -35,22 +33,20 @@ const logoutController = async (req, res) => {
const { refreshToken } = signedCookies;
try {
const logout = await logoutUser(req.user, refreshToken);
console.log(logout)
console.log(logout);
const { status, message } = logout;
if (status === 200) {
res.clearCookie('token');
res.clearCookie('refreshToken');
res.status(status).send({ message });
}
else {
} else {
res.status(status).send({ message });
}
}
catch (err) {
} catch (err) {
console.log(err);
return res.status(500).json({ message: err.message });
}
}
};
const registrationController = async (req, res) => {
try {
@ -65,13 +61,11 @@ const registrationController = async (req, res) => {
secure: isProduction
});
res.status(status).send({ user });
}
else {
} else {
const { status, message } = response;
res.status(status).send({ message });
}
}
catch (err) {
} catch (err) {
console.log(err);
return res.status(500).json({ message: err.message });
}
@ -83,17 +77,13 @@ const getUserController = async (req, res) => {
const resetPasswordRequestController = async (req, res) => {
try {
const resetService = await requestPasswordReset(
req.body.email
);
const resetService = await requestPasswordReset(req.body.email);
if (resetService.link) {
return res.status(200).json(resetService);
}
else {
} else {
return res.status(400).json(resetService);
}
}
catch (e) {
} catch (e) {
console.log(e);
return res.status(400).json({ message: e.message });
}
@ -108,12 +98,10 @@ const resetPasswordController = async (req, res) => {
);
if (resetPasswordService instanceof Error) {
return res.status(400).json(resetPasswordService);
}
else {
} else {
return res.status(200).json(resetPasswordService);
}
}
catch (e) {
} catch (e) {
console.log(e);
return res.status(400).json({ message: e.message });
}
@ -176,5 +164,5 @@ module.exports = {
refreshController,
registrationController,
resetPasswordRequestController,
resetPasswordController,
resetPasswordController
};

7
api/server/index.js
View file

@ -36,7 +36,7 @@ const projectPath = path.join(__dirname, '..', '..', 'client');
if (process.env.FACEBOOK_CLIENT_ID && process.env.FACEBOOK_CLIENT_SECRET) {
require('../strategies/facebookStrategy');
}
app.use('/oauth', routes.oauth)
app.use('/oauth', routes.oauth);
// api endpoint
app.use('/api/auth', routes.auth);
app.use('/api/search', routes.search);
@ -48,8 +48,6 @@ const projectPath = path.join(__dirname, '..', '..', 'client');
app.use('/api/tokenizer', routes.tokenizer);
app.use('/api/endpoints', routes.endpoints);
// static files
app.get('/*', function (req, res) {
res.sendFile(path.join(projectPath, 'dist', 'index.html'));
@ -60,7 +58,8 @@ const projectPath = path.join(__dirname, '..', '..', 'client');
console.log(
`Server listening on all interface at port ${port}. Use http://localhost:${port} to access it`
);
else console.log(`Server listening at http://${host == '0.0.0.0' ? 'localhost' : host}:${port}`);
else
console.log(`Server listening at http://${host == '0.0.0.0' ? 'localhost' : host}:${port}`);
});
})();

21
api/server/routes/ask/askBingAI.js
View file

@ -147,11 +147,13 @@ const ask = async ({
const newConversationId = endpointOption?.jailbreak
? response.jailbreakConversationId
: response.conversationId || conversationId;
const newUserMassageId = response.parentMessageId || response.details.requestId || userMessageId;
const newUserMassageId =
response.parentMessageId || response.details.requestId || userMessageId;
const newResponseMessageId = response.messageId || response.details.messageId;
// STEP1 generate response message
response.text = response.response || response.details.spokenText || '**Bing refused to answer.**';
response.text =
response.response || response.details.spokenText || '**Bing refused to answer.**';
let responseMessage = {
conversationId: newConversationId,
@ -161,7 +163,8 @@ const ask = async ({
sender: endpointOption?.jailbreak ? 'Sydney' : 'BingAI',
text: await handleText(response, true),
suggestions:
response.details.suggestedResponses && response.details.suggestedResponses.map((s) => s.text),
response.details.suggestedResponses &&
response.details.suggestedResponses.map(s => s.text),
unfinished: false,
cancelled: false,
error: false
@ -215,7 +218,11 @@ const ask = async ({
// If response has parentMessageId, the fake userMessage.messageId should be updated to the real one.
if (!overrideParentMessageId)
await saveMessage({ ...userMessage, messageId: userMessageId, newMessageId: newUserMassageId });
await saveMessage({
...userMessage,
messageId: userMessageId,
newMessageId: newUserMassageId
});
userMessageId = newUserMassageId;
sendMessage(res, {
@ -228,7 +235,11 @@ const ask = async ({
res.end();
if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
const title = await titleConvo({ endpoint: endpointOption?.endpoint, text, response: responseMessage });
const title = await titleConvo({
endpoint: endpointOption?.endpoint,
text,
response: responseMessage
});
await saveConvo(req.user.id, {
conversationId: conversationId,

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

@ -39,7 +39,7 @@ router.post('/', requireJwtAuth, async (req, res) => {
};
const availableModels = getChatGPTBrowserModels();
if (availableModels.find((model) => model === endpointOption.model) === undefined)
if (availableModels.find(model => model === endpointOption.model) === undefined)
return handleError(res, { text: 'Illegal request: model' });
console.log('ask log', {
@ -180,7 +180,11 @@ const ask = async ({
// If response has parentMessageId, the fake userMessage.messageId should be updated to the real one.
if (!overrideParentMessageId)
await saveMessage({ ...userMessage, messageId: userMessageId, newMessageId: newUserMassageId });
await saveMessage({
...userMessage,
messageId: userMessageId,
newMessageId: newUserMassageId
});
userMessageId = newUserMassageId;
sendMessage(res, {

13
api/server/routes/ask/askOpenAI.js
View file

@ -238,7 +238,11 @@ const ask = async ({
// If response has parentMessageId, the fake userMessage.messageId should be updated to the real one.
if (!overrideParentMessageId)
await saveMessage({ ...userMessage, messageId: userMessageId, newMessageId: newUserMassageId });
await saveMessage({
...userMessage,
messageId: userMessageId,
newMessageId: newUserMassageId
});
userMessageId = newUserMassageId;
sendMessage(res, {
@ -251,7 +255,12 @@ const ask = async ({
res.end();
if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
const title = await titleConvo({ endpoint: endpointOption?.endpoint, text, response: responseMessage, oaiApiKey });
const title = await titleConvo({
endpoint: endpointOption?.endpoint,
text,
response: responseMessage,
oaiApiKey
});
await saveConvo(req.user.id, {
conversationId: conversationId,
title

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

@ -6,7 +6,7 @@ const {
loginController,
logoutController,
refreshController,
registrationController,
registrationController
} = require('../controllers/auth.controller');
const requireJwtAuth = require('../../middleware/requireJwtAuth');
const requireLocalAuth = require('../../middleware/requireLocalAuth');

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

@ -36,11 +36,12 @@ router.get('/', async function (req, res) {
}
const google =
key || palmUser ? { userProvide: palmUser, availableModels: ['chat-bison', 'text-bison'] } : false;
key || palmUser
? { userProvide: palmUser, availableModels: ['chat-bison', 'text-bison'] }
: false;
const azureOpenAI = !!process.env.AZURE_OPENAI_KEY;
const apiKey = process.env.OPENAI_KEY || process.env.AZURE_OPENAI_API_KEY;
const openAI =
apiKey
const openAI = apiKey
? { availableModels: getOpenAIModels(), userProvide: apiKey === 'user_provided' }
: false;
const bingAI = process.env.BINGAI_TOKEN

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

@ -19,5 +19,5 @@ module.exports = {
auth,
oauth,
tokenizer,
endpoints,
endpoints
};

14
api/server/routes/search.js
View file

@ -27,7 +27,9 @@ router.get('/', requireJwtAuth, async function (req, res) {
console.log('cache hit', key);
const cached = cache.get(key);
const { pages, pageSize, messages } = cached;
res.status(200).send({ conversations: cached[pageNumber], pages, pageNumber, pageSize, messages });
res
.status(200)
.send({ conversations: cached[pageNumber], pages, pageNumber, pageSize, messages });
return;
} else {
cache.clear();
@ -44,7 +46,7 @@ router.get('/', requireJwtAuth, async function (req, res) {
},
true
)
).hits.map(message => {
).hits.map((message) => {
const { _formatted, ...rest } = message;
return {
...rest,
@ -95,12 +97,12 @@ router.get('/clear', async function (req, res) {
router.get('/test', async function (req, res) {
const { q } = req.query;
const messages = (await Message.meiliSearch(q, { attributesToHighlight: ['text'] }, true)).hits.map(
message => {
const messages = (
await Message.meiliSearch(q, { attributesToHighlight: ['text'] }, true)
).hits.map((message) => {
const { _formatted, ...rest } = message;
return { ...rest, searchResult: true, text: _formatted.text };
}
);
});
res.send(messages);
});

9
api/server/services/auth.service.js
View file

@ -78,7 +78,7 @@ const registerUser = async (user) => {
}
//determine if this is the first registered user (not counting anonymous_user)
const isFirstRegisteredUser = await User.countDocuments({}) === 0;
const isFirstRegisteredUser = (await User.countDocuments({})) === 0;
try {
const newUser = await new User({
@ -88,7 +88,7 @@ const registerUser = async (user) => {
username,
name,
avatar: null,
role: isFirstRegisteredUser ? 'ADMIN' : 'USER',
role: isFirstRegisteredUser ? 'ADMIN' : 'USER'
});
// todo: implement refresh token
@ -104,7 +104,7 @@ const registerUser = async (user) => {
newUser.save();
});
});
console.log('newUser', newUser)
console.log('newUser', newUser);
if (isFirstRegisteredUser) {
migrateDataToFirstUser(newUser);
// console.log(migrate);
@ -186,12 +186,11 @@ const resetPassword = async (userId, token, password) => {
return { message: 'Password reset was successful' };
};
module.exports = {
// signup,
registerUser,
loginUser,
logoutUser,
requestPasswordReset,
resetPassword,
resetPassword
};

2
api/strategies/facebookStrategy.js
View file

@ -11,7 +11,7 @@ const facebookLogin = new FacebookStrategy(
clientID: process.env.FACEBOOK_APP_ID,
clientSecret: process.env.FACEBOOK_SECRET,
callbackURL: `${serverUrl}${process.env.FACEBOOK_CALLBACK_URL}`,
proxy: true,
proxy: true
// profileFields: [
// 'id',
// 'email',

1
api/strategies/localStrategy.js
View file

@ -65,4 +65,3 @@ function log({ title, parameters }) {
DebugControl.log.parameters(parameters);
}
}

18
api/utils/LoggingSystem.js
View file

@ -3,7 +3,8 @@ const pino = require('pino');
const logger = pino({
level: 'info',
redact: {
paths: [ // List of Paths to redact from the logs (https://getpino.io/#/docs/redaction)
paths: [
// List of Paths to redact from the logs (https://getpino.io/#/docs/redaction)
'env.OPENAI_KEY',
'env.BINGAI_TOKEN',
'env.CHATGPT_TOKEN',
@ -11,13 +12,15 @@ const logger = pino({
'env.GOOGLE_CLIENT_SECRET',
'env.JWT_SECRET_DEV',
'env.JWT_SECRET_PROD',
'newUser.password'], // See example to filter object class instances
censor: '***', // Redaction character
},
'newUser.password'
], // See example to filter object class instances
censor: '***' // Redaction character
}
});
// Sanitize outside the logger paths. This is useful for sanitizing variables directly with Regex and patterns.
const redactPatterns = [ // Array of regular expressions for redacting patterns
const redactPatterns = [
// Array of regular expressions for redacting patterns
/api[-_]?key/i,
/password/i,
/token/i,
@ -57,13 +60,11 @@ const levels = {
FATAL: 60
};
let level = levels.INFO;
module.exports = {
levels,
setLevel: (l) => (level = l),
setLevel: l => (level = l),
log: {
trace: (msg) => {
if (level <= levels.TRACE) return;
@ -122,4 +123,3 @@ module.exports = {
}
}
};

6
api/utils/genAzureEndpoints.js
View file

@ -1,4 +1,8 @@
function genAzureEndpoint({ azureOpenAIApiInstanceName, azureOpenAIApiDeploymentName, azureOpenAIApiVersion }) {
function genAzureEndpoint({
azureOpenAIApiInstanceName,
azureOpenAIApiDeploymentName,
azureOpenAIApiVersion
}) {
return `https://${azureOpenAIApiInstanceName}.openai.azure.com/openai/deployments/${azureOpenAIApiDeploymentName}/chat/completions?api-version=${azureOpenAIApiVersion}`;
}

7
api/utils/migrateDataToFirstUser.js
View file

@ -8,7 +8,7 @@ const migrateConversations = async (userId) => {
console.log(error);
return { message: 'Error saving conversation' };
}
}
};
const migratePresets = async (userId) => {
try {
@ -17,14 +17,13 @@ const migratePresets = async (userId) => {
console.log(error);
return { message: 'Error saving conversation' };
}
}
};
const migrateDataToFirstUser = async (user) => {
const conversations = await migrateConversations(user.id);
console.log(conversations);
const presets = await migratePresets(user.id);
console.log(presets);
}
};
module.exports = migrateDataToFirstUser;

18
api/utils/sendEmail.js
View file

@ -1,7 +1,7 @@
const nodemailer = require("nodemailer");
const handlebars = require("handlebars");
const fs = require("fs");
const path = require("path");
const nodemailer = require('nodemailer');
const handlebars = require('handlebars');
const fs = require('fs');
const path = require('path');
const sendEmail = async (email, subject, payload, template) => {
try {
@ -11,18 +11,18 @@ const sendEmail = async (email, subject, payload, template) => {
port: 465,
auth: {
user: process.env.EMAIL_USERNAME,
pass: process.env.EMAIL_PASSWORD,
},
pass: process.env.EMAIL_PASSWORD
}
});
const source = fs.readFileSync(path.join(__dirname, template), "utf8");
const source = fs.readFileSync(path.join(__dirname, template), 'utf8');
const compiledTemplate = handlebars.compile(source);
const options = () => {
return {
from: process.env.FROM_EMAIL,
to: email,
subject: subject,
html: compiledTemplate(payload),
html: compiledTemplate(payload)
};
};
@ -32,7 +32,7 @@ const sendEmail = async (email, subject, payload, template) => {
return error;
} else {
return res.status(200).json({
success: true,
success: true
});
}
});

31
client/.eslintrc.js
View file

@ -1,31 +0,0 @@
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true,
"commonjs": true,
"es6": true,
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended"
],
"overrides": [
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
'react/prop-types': ['off'],
'react/display-name': ['off'],
"no-debugger":"off",
}
}

22
client/.prettierrc
View file

@ -1,22 +0,0 @@
{
"arrowParens": "avoid",
"bracketSpacing": true,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"singleAttributePerLine": true,
"bracketSameLine": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 110,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "none",
"useTabs": false,
"vueIndentScriptAndStyle": false,
"parser": "babel"
}

8
client/package.json
View file

@ -98,18 +98,10 @@
"babel-plugin-root-import": "^6.6.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^6.7.3",
"eslint": "^8.33.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"path": "^0.12.7",
"postcss": "^8.4.21",
"postcss-loader": "^7.1.0",
"postcss-preset-env": "^8.2.0",
"prettier": "^2.8.3",
"prettier-plugin-tailwindcss": "^0.2.2",
"source-map-loader": "^1.1.3",
"style-loader": "^3.3.1",
"tailwindcss": "^3.2.6",

9
client/src/App.jsx
View file

@ -44,12 +44,7 @@ const router = createBrowserRouter([
children: [
{
index: true,
element: (
<Navigate
to="/chat/new"
replace={true}
/>
)
element: <Navigate to="/chat/new" replace={true} />
},
{
path: 'chat/:conversationId?',
@ -70,7 +65,7 @@ const App = () => {
const queryClient = new QueryClient({
queryCache: new QueryCache({
onError: error => {
onError: (error) => {
if (error?.response?.status === 401) {
setError(error);
}

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

@ -1,50 +1,48 @@
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { TLoginUser } from "~/data-provider";
import { useAuthContext } from "~/hooks/AuthContext";
import { useNavigate } from "react-router-dom";
import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { TLoginUser } from '~/data-provider';
import { useAuthContext } from '~/hooks/AuthContext';
import { useNavigate } from 'react-router-dom';
function Login() {
const { login, error, isAuthenticated } = useAuthContext();
const {
register,
handleSubmit,
formState: { errors },
formState: { errors }
} = useForm<TLoginUser>();
const navigate = useNavigate();
useEffect(() => {
if (isAuthenticated) {
navigate("/chat/new");
navigate('/chat/new');
}
}, [isAuthenticated, navigate])
}, [isAuthenticated, navigate]);
const SERVER_URL = import.meta.env.DEV
? import.meta.env.VITE_SERVER_URL_DEV
: import.meta.env.VITE_SERVER_URL_PROD;
const showGoogleLogin =
import.meta.env.VITE_SHOW_GOOGLE_LOGIN_OPTION === "true";
const showGoogleLogin = import.meta.env.VITE_SHOW_GOOGLE_LOGIN_OPTION === 'true';
return (
<div className="flex min-h-screen flex-col items-center pt-6 justify-center sm:pt-0 bg-white">
<div className="mt-6 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg w-96">
<h1 className="text-center text-3xl font-semibold mb-4">Welcome back</h1>
<div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
<div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
<h1 className="mb-4 text-center text-3xl font-semibold">Welcome back</h1>
{error && (
<div
className="mt-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
role="alert"
>
Unable to login with the information provided. Please check your
credentials and try again.
Unable to login with the information provided. Please check your credentials and try
again.
</div>
)}
<form
className="mt-6"
aria-label="Login form"
method="POST"
onSubmit={handleSubmit((data) => login(data))}
onSubmit={handleSubmit(data => login(data))}
>
<div className="mb-2">
<div className="relative">
@ -53,28 +51,28 @@ function Login() {
id="email"
autoComplete="email"
aria-label="Email"
{...register("email", {
required: "Email is required",
{...register('email', {
required: 'Email is required',
minLength: {
value: 3,
message: "Email must be at least 6 characters",
message: 'Email must be at least 6 characters'
},
maxLength: {
value: 120,
message: "Email should not be longer than 120 characters",
message: 'Email should not be longer than 120 characters'
},
pattern: {
value: /\S+@\S+\.\S+/,
message: "You must enter a valid email address",
},
message: 'You must enter a valid email address'
}
})}
aria-invalid={!!errors.email}
className="block rounded-t-md px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-green-500 peer"
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
placeholder=" "
></input>
<label
htmlFor="email"
className="absolute text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
Email address
</label>
@ -93,24 +91,24 @@ function Login() {
id="password"
autoComplete="current-password"
aria-label="Password"
{...register("password", {
required: "Password is required",
{...register('password', {
required: 'Password is required',
minLength: {
value: 8,
message: "Password must be at least 8 characters",
message: 'Password must be at least 8 characters'
},
maxLength: {
value: 40,
message: "Password must be less than 40 characters",
},
message: 'Password must be less than 40 characters'
}
})}
aria-invalid={!!errors.password}
className="block rounded-t-md px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-green-500 peer"
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
placeholder=" "
></input>
<label
htmlFor="password"
className="absolute text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
Password
</label>
@ -123,10 +121,7 @@ function Login() {
</span>
)}
</div>
<a
href="/forgot-password"
className="text-sm text-green-500 hover:underline"
>
<a href="/forgot-password" className="text-sm text-green-500 hover:underline">
Forgot Password?
</a>
<div className="mt-6">
@ -140,27 +135,46 @@ function Login() {
</div>
</form>
<p className="my-4 text-center text-sm font-light text-gray-700">
{" "}
Don't have an account?{" "}
<a
href="/register"
className="p-1 text-green-500 hover:underline"
>
{' '}
Don't have an account?{' '}
<a href="/register" className="p-1 text-green-500 hover:underline">
Sign up
</a>
</p>
{showGoogleLogin && (
<>
<div className="relative mt-6 flex w-full items-center justify-center border border-t uppercase">
<div className="absolute text-xs bg-white px-3">Or</div>
<div className="absolute bg-white px-3 text-xs">Or</div>
</div>
<div className="mt-4 flex gap-x-2">
<a
aria-label="Login with Google"
className="flex w-full items-center justify-left space-x-3 rounded-md border border-gray-300 py-3 px-5 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1 hover:bg-gray-50"
className="justify-left flex w-full items-center space-x-3 rounded-md border border-gray-300 px-5 py-3 hover:bg-gray-50 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1"
href={`${SERVER_URL}/oauth/google`}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="google" className="w-5 h-5"><path fill="#fbbb00" d="M113.47 309.408 95.648 375.94l-65.139 1.378C11.042 341.211 0 299.9 0 256c0-42.451 10.324-82.483 28.624-117.732h.014L86.63 148.9l25.404 57.644c-5.317 15.501-8.215 32.141-8.215 49.456.002 18.792 3.406 36.797 9.651 53.408z"></path><path fill="#518ef8" d="M507.527 208.176C510.467 223.662 512 239.655 512 256c0 18.328-1.927 36.206-5.598 53.451-12.462 58.683-45.025 109.925-90.134 146.187l-.014-.014-73.044-3.727-10.338-64.535c29.932-17.554 53.324-45.025 65.646-77.911h-136.89V208.176h245.899z"></path><path fill="#28b446" d="m416.253 455.624.014.014C372.396 490.901 316.666 512 256 512c-97.491 0-182.252-54.491-225.491-134.681l82.961-67.91c21.619 57.698 77.278 98.771 142.53 98.771 28.047 0 54.323-7.582 76.87-20.818l83.383 68.262z"></path><path fill="#f14336" d="m419.404 58.936-82.933 67.896C313.136 112.246 285.552 103.82 256 103.82c-66.729 0-123.429 42.957-143.965 102.724l-83.397-68.276h-.014C71.23 56.123 157.06 0 256 0c62.115 0 119.068 22.126 163.404 58.936z"></path></svg>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
id="google"
className="h-5 w-5"
>
<path
fill="#fbbb00"
d="M113.47 309.408 95.648 375.94l-65.139 1.378C11.042 341.211 0 299.9 0 256c0-42.451 10.324-82.483 28.624-117.732h.014L86.63 148.9l25.404 57.644c-5.317 15.501-8.215 32.141-8.215 49.456.002 18.792 3.406 36.797 9.651 53.408z"
></path>
<path
fill="#518ef8"
d="M507.527 208.176C510.467 223.662 512 239.655 512 256c0 18.328-1.927 36.206-5.598 53.451-12.462 58.683-45.025 109.925-90.134 146.187l-.014-.014-73.044-3.727-10.338-64.535c29.932-17.554 53.324-45.025 65.646-77.911h-136.89V208.176h245.899z"
></path>
<path
fill="#28b446"
d="m416.253 455.624.014.014C372.396 490.901 316.666 512 256 512c-97.491 0-182.252-54.491-225.491-134.681l82.961-67.91c21.619 57.698 77.278 98.771 142.53 98.771 28.047 0 54.323-7.582 76.87-20.818l83.383 68.262z"
></path>
<path
fill="#f14336"
d="m419.404 58.936-82.933 67.896C313.136 112.246 285.552 103.82 256 103.82c-66.729 0-123.429 42.957-143.965 102.724l-83.397-68.276h-.014C71.23 56.123 157.06 0 256 0c62.115 0 119.068 22.126 163.404 58.936z"
></path>
</svg>
<p>Login with Google</p>
</a>

148
client/src/components/Auth/Registration.tsx
View file

@ -1,65 +1,61 @@
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useForm } from "react-hook-form";
import { useRegisterUserMutation, TRegisterUser } from "~/data-provider";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFacebook } from "@fortawesome/free-brands-svg-icons";
import { faGoogle } from "@fortawesome/free-brands-svg-icons";
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { useRegisterUserMutation, TRegisterUser } from '~/data-provider';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebook } from '@fortawesome/free-brands-svg-icons';
import { faGoogle } from '@fortawesome/free-brands-svg-icons';
function Registration() {
const SERVER_URL = import.meta.env.DEV
? import.meta.env.VITE_SERVER_URL_DEV
: import.meta.env.VITE_SERVER_URL_PROD;
const showGoogleLogin =
import.meta.env.VITE_SHOW_GOOGLE_LOGIN_OPTION === "true";
const showGoogleLogin = import.meta.env.VITE_SHOW_GOOGLE_LOGIN_OPTION === 'true';
const navigate = useNavigate();
const {
register,
watch,
handleSubmit,
formState: { errors },
} = useForm<TRegisterUser>({ mode: "onChange" });
formState: { errors }
} = useForm<TRegisterUser>({ mode: 'onChange' });
const [error, setError] = useState<boolean>(false);
const [errorMessage, setErrorMessage] = useState<string>("");
const [errorMessage, setErrorMessage] = useState<string>('');
const registerUser = useRegisterUserMutation();
const password = watch("password");
const password = watch('password');
const onRegisterUserFormSubmit = (data: TRegisterUser) => {
registerUser.mutate(data, {
onSuccess: () => {
navigate("/chat/new");
navigate('/chat/new');
},
onError: (error) => {
setError(true);
if (error.response?.data?.message) {
setErrorMessage(error.response?.data?.message);
}
},
}
});
};
return (
<div className="flex min-h-screen flex-col items-center pt-6 justify-center sm:pt-0 bg-white">
<div className="mt-6 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg w-96">
<h1 className="text-center text-3xl font-semibold mb-4">
Create your account
</h1>
<div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
<div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
<h1 className="mb-4 text-center text-3xl font-semibold">Create your account</h1>
{error && (
<div
className="mt-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
role="alert"
>
There was an error attempting to register your account. Please try
again. {errorMessage}
There was an error attempting to register your account. Please try again. {errorMessage}
</div>
)}
<form
className="mt-6"
aria-label="Registration form"
method="POST"
onSubmit={handleSubmit((data) => onRegisterUserFormSubmit(data))}
onSubmit={handleSubmit(data => onRegisterUserFormSubmit(data))}
>
<div className="mb-2">
<div className="relative">
@ -73,24 +69,24 @@ function Registration() {
e.preventDefault();
return false;
}}
{...register("name", {
required: "Name is required",
{...register('name', {
required: 'Name is required',
minLength: {
value: 3,
message: "Name must be at least 3 characters",
message: 'Name must be at least 3 characters'
},
maxLength: {
value: 80,
message: "Name must be less than 80 characters",
},
message: 'Name must be less than 80 characters'
}
})}
aria-invalid={!!errors.name}
className="block rounded-t-md px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-green-500 peer"
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
placeholder=" "
></input>
<label
htmlFor="name"
className="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
Full Name
</label>
@ -109,25 +105,25 @@ function Registration() {
type="text"
id="username"
aria-label="Username"
{...register("username", {
required: "Username is required",
{...register('username', {
required: 'Username is required',
minLength: {
value: 3,
message: "Username must be at least 3 characters",
message: 'Username must be at least 3 characters'
},
maxLength: {
value: 20,
message: "Username must be less than 20 characters",
},
message: 'Username must be less than 20 characters'
}
})}
aria-invalid={!!errors.username}
className="block rounded-t-md px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-green-500 peer"
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
placeholder=" "
autoComplete="off"
></input>
<label
htmlFor="username"
className="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
Username
</label>
@ -147,28 +143,28 @@ function Registration() {
id="email"
autoComplete="email"
aria-label="Email"
{...register("email", {
required: "Email is required",
{...register('email', {
required: 'Email is required',
minLength: {
value: 3,
message: "Email must be at least 6 characters",
message: 'Email must be at least 6 characters'
},
maxLength: {
value: 120,
message: "Email should not be longer than 120 characters",
message: 'Email should not be longer than 120 characters'
},
pattern: {
value: /\S+@\S+\.\S+/,
message: "You must enter a valid email address",
},
message: 'You must enter a valid email address'
}
})}
aria-invalid={!!errors.email}
className="block rounded-t-md px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-green-500 peer"
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
placeholder=" "
></input>
<label
htmlFor="email"
className="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
Email
</label>
@ -187,24 +183,24 @@ function Registration() {
id="password"
autoComplete="current-password"
aria-label="Password"
{...register("password", {
required: "Password is required",
{...register('password', {
required: 'Password is required',
minLength: {
value: 8,
message: "Password must be at least 8 characters",
message: 'Password must be at least 8 characters'
},
maxLength: {
value: 40,
message: "Password must be less than 40 characters",
},
message: 'Password must be less than 40 characters'
}
})}
aria-invalid={!!errors.password}
className="block rounded-t-md px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-green-500 peer"
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
placeholder=" "
></input>
<label
htmlFor="password"
className="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
Password
</label>
@ -228,17 +224,16 @@ function Registration() {
e.preventDefault();
return false;
}}
{...register("confirm_password", {
validate: (value) =>
value === password || "Passwords do not match",
{...register('confirm_password', {
validate: value => value === password || 'Passwords do not match'
})}
aria-invalid={!!errors.confirm_password}
className="block rounded-t-md px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-green-500 peer"
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
placeholder=" "
></input>
<label
htmlFor="confirm_password"
className="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
Confirm Password
</label>
@ -269,28 +264,47 @@ function Registration() {
</div>
</form>
<p className="my-4 text-center text-sm font-light text-gray-700">
{" "}
Already have an account?{" "}
<a
href="/login"
className="font-medium text-green-500 p-1 hover:underline"
>
{' '}
Already have an account?{' '}
<a href="/login" className="p-1 font-medium text-green-500 hover:underline">
Login
</a>
</p>
{showGoogleLogin && (
<>
<div className="relative mt-6 flex w-full items-center justify-center border border-t uppercase">
<div className="absolute text-xs bg-white px-3">Or</div>
<div className="absolute bg-white px-3 text-xs">Or</div>
</div>
<div className="mt-4 flex gap-x-2">
<a
aria-label="Login with Google"
href={`${SERVER_URL}/oauth/google`}
className="flex w-full items-center justify-left space-x-3 rounded-md border border-gray-300 py-3 px-5 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1 hover:bg-gray-50"
className="justify-left flex w-full items-center space-x-3 rounded-md border border-gray-300 px-5 py-3 hover:bg-gray-50 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="google" className="w-5 h-5"><path fill="#fbbb00" d="M113.47 309.408 95.648 375.94l-65.139 1.378C11.042 341.211 0 299.9 0 256c0-42.451 10.324-82.483 28.624-117.732h.014L86.63 148.9l25.404 57.644c-5.317 15.501-8.215 32.141-8.215 49.456.002 18.792 3.406 36.797 9.651 53.408z"></path><path fill="#518ef8" d="M507.527 208.176C510.467 223.662 512 239.655 512 256c0 18.328-1.927 36.206-5.598 53.451-12.462 58.683-45.025 109.925-90.134 146.187l-.014-.014-73.044-3.727-10.338-64.535c29.932-17.554 53.324-45.025 65.646-77.911h-136.89V208.176h245.899z"></path><path fill="#28b446" d="m416.253 455.624.014.014C372.396 490.901 316.666 512 256 512c-97.491 0-182.252-54.491-225.491-134.681l82.961-67.91c21.619 57.698 77.278 98.771 142.53 98.771 28.047 0 54.323-7.582 76.87-20.818l83.383 68.262z"></path><path fill="#f14336" d="m419.404 58.936-82.933 67.896C313.136 112.246 285.552 103.82 256 103.82c-66.729 0-123.429 42.957-143.965 102.724l-83.397-68.276h-.014C71.23 56.123 157.06 0 256 0c62.115 0 119.068 22.126 163.404 58.936z"></path></svg>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
id="google"
className="h-5 w-5"
>
<path
fill="#fbbb00"
d="M113.47 309.408 95.648 375.94l-65.139 1.378C11.042 341.211 0 299.9 0 256c0-42.451 10.324-82.483 28.624-117.732h.014L86.63 148.9l25.404 57.644c-5.317 15.501-8.215 32.141-8.215 49.456.002 18.792 3.406 36.797 9.651 53.408z"
></path>
<path
fill="#518ef8"
d="M507.527 208.176C510.467 223.662 512 239.655 512 256c0 18.328-1.927 36.206-5.598 53.451-12.462 58.683-45.025 109.925-90.134 146.187l-.014-.014-73.044-3.727-10.338-64.535c29.932-17.554 53.324-45.025 65.646-77.911h-136.89V208.176h245.899z"
></path>
<path
fill="#28b446"
d="m416.253 455.624.014.014C372.396 490.901 316.666 512 256 512c-97.491 0-182.252-54.491-225.491-134.681l82.961-67.91c21.619 57.698 77.278 98.771 142.53 98.771 28.047 0 54.323-7.582 76.87-20.818l83.383 68.262z"
></path>
<path
fill="#f14336"
d="m419.404 58.936-82.933 67.896C313.136 112.246 285.552 103.82 256 103.82c-66.729 0-123.429 42.957-143.965 102.724l-83.397-68.276h-.014C71.23 56.123 157.06 0 256 0c62.115 0 119.068 22.126 163.404 58.936z"
></path>
</svg>
<p>Login with Google</p>
</a>
{/* <button

49
client/src/components/Auth/RequestPasswordReset.tsx
View file

@ -1,17 +1,17 @@
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useRequestPasswordResetMutation, TRequestPasswordReset } from "~/data-provider";
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { useRequestPasswordResetMutation, TRequestPasswordReset } from '~/data-provider';
function RequestPasswordReset() {
const {
register,
handleSubmit,
formState: { errors },
formState: { errors }
} = useForm<TRequestPasswordReset>();
const requestPasswordReset = useRequestPasswordResetMutation();
const [success, setSuccess] = useState<boolean>(false);
const [requestError, setRequestError] = useState<boolean>(false);
const [resetLink, setResetLink] = useState<string>("");
const [resetLink, setResetLink] = useState<string>('');
const onSubmit = (data: TRequestPasswordReset) => {
requestPasswordReset.mutate(data, {
@ -29,26 +29,29 @@ function RequestPasswordReset() {
};
return (
<div className="flex min-h-screen flex-col items-center pt-6 justify-center sm:pt-0 bg-white">
<div className="mt-6 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg w-96">
<h1 className="text-center text-3xl font-semibold mb-4">
Reset your password
</h1>
<div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
<div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
<h1 className="mb-4 text-center text-3xl font-semibold">Reset your password</h1>
{success && (
<div
className="mt-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative"
className="relative mt-4 rounded border border-green-400 bg-green-100 px-4 py-3 text-green-700"
role="alert"
>
Click <a className="text-green-600 hover:underline" href={resetLink}>HERE</a> to reset your password.
Click{' '}
<a className="text-green-600 hover:underline" href={resetLink}>
HERE
</a>{' '}
to reset your password.
{/* An email has been sent with instructions on how to reset your password. */}
</div>
)}
{requestError && (
<div
className="mt-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
role="alert"
>
There was a problem resetting your password. There was no user found with the email address provided. Please try again.
There was a problem resetting your password. There was no user found with the email
address provided. Please try again.
</div>
)}
<form
@ -64,28 +67,28 @@ function RequestPasswordReset() {
id="email"
autoComplete="off"
aria-label="Email"
{...register("email", {
required: "Email is required",
{...register('email', {
required: 'Email is required',
minLength: {
value: 3,
message: "Email must be at least 6 characters",
message: 'Email must be at least 6 characters'
},
maxLength: {
value: 120,
message: "Email should not be longer than 120 characters",
message: 'Email should not be longer than 120 characters'
},
pattern: {
value: /\S+@\S+\.\S+/,
message: "You must enter a valid email address",
},
message: 'You must enter a valid email address'
}
})}
aria-invalid={!!errors.email}
className="block rounded-t-md px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-green-500 peer"
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
placeholder=" "
></input>
<label
htmlFor="email"
className="absolute text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
Email address
</label>
@ -101,7 +104,7 @@ function RequestPasswordReset() {
<button
type="submit"
disabled={!!errors.email}
className="w-full py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none active:bg-green-500"
className="w-full rounded-sm border border-transparent bg-green-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-green-600 focus:outline-none active:bg-green-500"
>
Continue
</button>

91
client/src/components/Auth/ResetPassword.tsx
View file

@ -1,20 +1,20 @@
import { useState } from "react";
import { useForm } from "react-hook-form";
import {useResetPasswordMutation, TResetPassword} from "~/data-provider";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { useResetPasswordMutation, TResetPassword } from '~/data-provider';
import { useNavigate, useSearchParams } from 'react-router-dom';
function ResetPassword() {
const {
register,
handleSubmit,
watch,
formState: { errors },
formState: { errors }
} = useForm<TResetPassword>();
const resetPassword = useResetPasswordMutation();
const [resetError, setResetError] = useState<boolean>(false);
const [params] = useSearchParams();
const navigate = useNavigate();
const password = watch("password");
const password = watch('password');
const onSubmit = (data: TResetPassword) => {
resetPassword.mutate(data, {
@ -26,19 +26,17 @@ function ResetPassword() {
if (resetPassword.isSuccess) {
return (
<div className="flex min-h-screen flex-col items-center pt-6 justify-center sm:pt-0 bg-white">
<div className="mt-6 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg w-96">
<h1 className="text-center text-3xl font-semibold mb-4">
Password Reset Success
</h1>
<div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
<div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
<h1 className="mb-4 text-center text-3xl font-semibold">Password Reset Success</h1>
<div
className="mt-4 bg-green-100 border border-green-400 text-center mb-8 text-green-700 px-4 py-3 rounded relative"
className="relative mb-8 mt-4 rounded border border-green-400 bg-green-100 px-4 py-3 text-center text-green-700"
role="alert"
>
You may now login with your new password.
</div>
<button
onClick={() => navigate("/login")}
onClick={() => navigate('/login')}
aria-label="Sign in"
className="w-full transform rounded-sm bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-none"
>
@ -46,21 +44,22 @@ function ResetPassword() {
</button>
</div>
</div>
)
}
else {
);
} else {
return (
<div className="flex min-h-screen flex-col items-center pt-6 justify-center sm:pt-0 bg-white">
<div className="mt-6 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg w-96">
<h1 className="text-center text-3xl font-semibold mb-4">
Reset your password
</h1>
<div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
<div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
<h1 className="mb-4 text-center text-3xl font-semibold">Reset your password</h1>
{resetError && (
<div
className="mt-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
role="alert"
>
This password reset token is no longer valid. <a className="font-semibold hover:underline text-green-600" href="/forgot-password">Click here</a> to try again.
This password reset token is no longer valid.{' '}
<a className="font-semibold text-green-600 hover:underline" href="/forgot-password">
Click here
</a>{' '}
to try again.
</div>
)}
<form
@ -71,31 +70,41 @@ function ResetPassword() {
>
<div className="mb-2">
<div className="relative">
<input type="hidden" id="token" value={params.get("token")} {...register("token", { required: "Unable to process: No valid reset token" })} />
<input type="hidden" id="userId" value={params.get("userId")} {...register("userId", { required: "Unable to process: No valid user id" })} />
<input
type="hidden"
id="token"
value={params.get('token')}
{...register('token', { required: 'Unable to process: No valid reset token' })}
/>
<input
type="hidden"
id="userId"
value={params.get('userId')}
{...register('userId', { required: 'Unable to process: No valid user id' })}
/>
<input
type="password"
id="password"
autoComplete="current-password"
aria-label="Password"
{...register("password", {
required: "Password is required",
{...register('password', {
required: 'Password is required',
minLength: {
value: 8,
message: "Password must be at least 8 characters",
message: 'Password must be at least 8 characters'
},
maxLength: {
value: 40,
message: "Password must be less than 40 characters",
},
message: 'Password must be less than 40 characters'
}
})}
aria-invalid={!!errors.password}
className="block rounded-t-md px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-green-500 peer"
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
placeholder=" "
></input>
<label
htmlFor="password"
className="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
Password
</label>
@ -119,17 +128,16 @@ function ResetPassword() {
e.preventDefault();
return false;
}}
{...register("confirm_password", {
validate: (value) =>
value === password || "Passwords do not match",
{...register('confirm_password', {
validate: value => value === password || 'Passwords do not match'
})}
aria-invalid={!!errors.confirm_password}
className="block rounded-t-md px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-green-500 peer"
className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
placeholder=" "
></input>
<label
htmlFor="confirm_password"
className="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-green-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
>
Confirm Password
</label>
@ -155,10 +163,7 @@ function ResetPassword() {
</div>
<div className="mt-6">
<button
disabled={
!!errors.password ||
!!errors.confirm_password
}
disabled={!!errors.password || !!errors.confirm_password}
type="submit"
aria-label="Submit registration"
className="w-full transform rounded-sm bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-none"
@ -169,8 +174,8 @@ function ResetPassword() {
</form>
</div>
</div>
)
);
}
}
};
export default ResetPassword;

15
client/src/components/Conversations/Conversation.jsx
View file

@ -38,7 +38,7 @@ export default function Conversation({ conversation, retainView }) {
switchToConversation(conversation);
};
const renameHandler = e => {
const renameHandler = (e) => {
e.preventDefault();
setTitleInput(title);
setRenaming(true);
@ -47,12 +47,12 @@ export default function Conversation({ conversation, retainView }) {
}, 25);
};
const cancelHandler = e => {
const cancelHandler = (e) => {
e.preventDefault();
setRenaming(false);
};
const onRename = e => {
const onRename = (e) => {
e.preventDefault();
setRenaming(false);
if (titleInput === title) {
@ -73,7 +73,7 @@ export default function Conversation({ conversation, retainView }) {
}
}, [updateConvoMutation.isSuccess]);
const handleKeyDown = e => {
const handleKeyDown = (e) => {
if (e.key === 'Enter') {
onRename(e);
}
@ -90,10 +90,7 @@ export default function Conversation({ conversation, retainView }) {
}
return (
<a
onClick={() => clickHandler()}
{...aProps}
>
<a onClick={() => clickHandler()} {...aProps}>
<ConvoIcon />
<div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis break-all">
{renaming === true ? (
@ -126,7 +123,7 @@ export default function Conversation({ conversation, retainView }) {
/>
</div>
) : (
<div className="absolute inset-y-0 right-0 z-10 w-8 bg-gradient-to-l from-gray-900 group-hover:from-[#2A2B32] rounded-r-md" />
<div className="absolute inset-y-0 right-0 z-10 w-8 rounded-r-md bg-gradient-to-l from-gray-900 group-hover:from-[#2A2B32]" />
)}
</a>
);

6
client/src/components/Conversations/DeleteButton.jsx
View file

@ -22,7 +22,6 @@ export default function DeleteButton({ conversationId, renaming, cancelHandler,
}
}, [deleteConvoMutation.isSuccess]);
const clickHandler = () => {
deleteConvoMutation.mutate({ conversationId, source: 'button' });
};
@ -30,10 +29,7 @@ export default function DeleteButton({ conversationId, renaming, cancelHandler,
const handler = renaming ? cancelHandler : clickHandler;
return (
<button
className="p-1 hover:text-white"
onClick={handler}
>
<button className="p-1 hover:text-white" onClick={handler}>
{renaming ? <CrossIcon /> : <TrashIcon />}
</button>
);

4
client/src/components/Conversations/Pages.jsx
View file

@ -1,13 +1,13 @@
import React from 'react';
export default function Pages({ pageNumber, pages, nextPage, previousPage }) {
const clickHandler = func => async e => {
const clickHandler = func => async (e) => {
e.preventDefault();
await func();
};
return pageNumber == 1 && pages == 1 ? null : (
<div className="m-auto mt-4 mb-2 flex items-center justify-center gap-2">
<div className="m-auto mb-2 mt-4 flex items-center justify-center gap-2">
<button
onClick={clickHandler(previousPage)}
className={

2
client/src/components/Conversations/RenameButton.jsx
View file

@ -4,7 +4,7 @@ import CheckMark from '../svg/CheckMark';
export default function RenameButton({ renaming, renameHandler, onRename, twcss }) {
const handler = renaming ? onRename : renameHandler;
const classProp = { className: "p-1 hover:text-white" };
const classProp = { className: 'p-1 hover:text-white' };
if (twcss) {
classProp.className = twcss;
}

8
client/src/components/Conversations/index.jsx
View file

@ -6,13 +6,9 @@ export default function Conversations({ conversations, conversationId, moveToTop
<>
{conversations &&
conversations.length > 0 &&
conversations.map(convo => {
conversations.map((convo) => {
return (
<Conversation
key={convo.conversationId}
conversation={convo}
retainView={moveToTop}
/>
<Conversation key={convo.conversationId} conversation={convo} retainView={moveToTop} />
);
})}
</>

27
client/src/components/Endpoints/BingAI/Settings.jsx
View file

@ -27,27 +27,26 @@ function Settings(props) {
return;
}
const handleTextChange = context => {
updateTokenCountMutation.mutate({ text: context }, {
onSuccess: data => {
const handleTextChange = (context) => {
updateTokenCountMutation.mutate(
{ text: context },
{
onSuccess: (data) => {
setTokenCount(data.count);
}
});
}
);
};
handleTextChange(debouncedContext);
}, [debouncedContext]);
return (
<div className="max-h-[350px] overflow-y-auto">
<div className="grid gap-6 sm:grid-cols-2">
<div className="col-span-1 flex flex-col items-center justify-start gap-6">
<div className="grid w-full items-center gap-2">
<Label
htmlFor="toneStyle-dropdown"
className="text-left text-sm font-medium"
>
<Label htmlFor="toneStyle-dropdown" className="text-left text-sm font-medium">
Tone Style <small className="opacity-40">(default: fast)</small>
</Label>
<SelectDropDown
@ -65,10 +64,7 @@ function Settings(props) {
/>
</div>
<div className="grid w-full items-center gap-2">
<Label
htmlFor="context"
className="text-left text-sm font-medium"
>
<Label htmlFor="context" className="text-left text-sm font-medium">
Context <small className="opacity-40">(default: blank)</small>
</Label>
<TextareaAutosize
@ -87,10 +83,7 @@ function Settings(props) {
</div>
<div className="col-span-1 flex flex-col items-center justify-start gap-6">
<div className="grid w-full items-center gap-2">
<Label
htmlFor="jailbreak"
className="text-left text-sm font-medium"
>
<Label htmlFor="jailbreak" className="text-left text-sm font-medium">
Enable Sydney <small className="opacity-40">(default: false)</small>
</Label>
<div className="flex h-[40px] w-full items-center space-x-3">

32
client/src/components/Endpoints/EditPresetDialog.jsx
View file

@ -29,7 +29,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
const triggerExamples = () => setShowExamples(prev => !prev);
const setOption = param => newValue => {
const setOption = param => (newValue) => {
let update = {};
update[param] = newValue;
setPreset(prevState =>
@ -115,7 +115,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
url: '/api/presets',
data: cleanupPreset({ preset, endpointsConfig }),
withCredentials: true
}).then(res => {
}).then((res) => {
setPresets(res?.data);
});
};
@ -134,10 +134,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
}, [open]);
return (
<Dialog
open={open}
onOpenChange={onOpenChange}
>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate
title={`${title || 'Edit Preset'} - ${preset?.title}`}
className="max-w-full sm:max-w-4xl"
@ -145,10 +142,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
<div className="flex w-full flex-col items-center gap-2">
<div className="grid w-full gap-6 sm:grid-cols-2">
<div className="col-span-1 flex flex-col items-start justify-start gap-2">
<Label
htmlFor="chatGptLabel"
className="text-left text-sm font-medium"
>
<Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
Preset Name
</Label>
<Input
@ -163,10 +157,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
/>
</div>
<div className="col-span-1 flex flex-col items-start justify-start gap-2">
<Label
htmlFor="endpoint"
className="text-left text-sm font-medium"
>
<Label htmlFor="endpoint" className="text-left text-sm font-medium">
Endpoint
</Label>
<Dropdown
@ -194,11 +185,9 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
</div>
<div className="my-4 w-full border-t border-gray-300 dark:border-gray-500" />
<div className="w-full p-0">
{((preset?.endpoint === 'google' && !showExamples) || preset?.endpoint !== 'google') && (
<Settings
preset={_preset}
setOption={setOption}
/>
{((preset?.endpoint === 'google' && !showExamples) ||
preset?.endpoint !== 'google') && (
<Settings preset={_preset} setOption={setOption} />
)}
{preset?.endpoint === 'google' && showExamples && (
<Examples
@ -224,10 +213,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
}
leftButtons={
<>
<DialogButton
onClick={exportPreset}
className="dark:hover:gray-400 border-gray-700"
>
<DialogButton onClick={exportPreset} className="dark:hover:gray-400 border-gray-700">
Export
</DialogButton>
</>

18
client/src/components/Endpoints/EndpointOptionsDialog.jsx
View file

@ -22,7 +22,7 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
setEndpointName('PaLM');
}
const setOption = param => newValue => {
const setOption = param => (newValue) => {
let update = {};
update[param] = newValue;
setPreset(prevState => ({
@ -49,21 +49,14 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
return (
<>
<Dialog
open={open}
onOpenChange={onOpenChange}
>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate
title={`${title || 'View Options'} - ${endpointName}`}
className="max-w-full sm:max-w-4xl"
main={
<div className="flex w-full flex-col items-center gap-2">
<div className="w-full p-0">
<Settings
preset={preset}
readonly={true}
setOption={setOption}
/>
<Settings preset={preset} readonly={true} setOption={setOption} />
</div>
</div>
}
@ -79,10 +72,7 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
}
leftButtons={
<>
<DialogButton
onClick={exportPreset}
className="dark:hover:gray-400 border-gray-700"
>
<DialogButton onClick={exportPreset} className="dark:hover:gray-400 border-gray-700">
Export
</DialogButton>
</>

15
client/src/components/Endpoints/Google/Examples.jsx
View file

@ -12,10 +12,7 @@ function Examples({ readonly, examples, setExample, addExample, removeExample, e
return (
<>
<div className={`${maxHeight} overflow-y-auto`}>
<div
id="examples-grid"
className="grid gap-6 sm:grid-cols-2"
>
<div id="examples-grid" className="grid gap-6 sm:grid-cols-2">
{examples.map((example, idx) => (
<React.Fragment key={idx}>
{/* Input */}
@ -25,10 +22,7 @@ function Examples({ readonly, examples, setExample, addExample, removeExample, e
} flex flex-col items-center justify-start gap-6 sm:col-span-1`}
>
<div className="grid w-full items-center gap-2">
<Label
htmlFor={`input-${idx}`}
className="text-left text-sm font-medium"
>
<Label htmlFor={`input-${idx}`} className="text-left text-sm font-medium">
Input <small className="opacity-40">(default: blank)</small>
</Label>
<TextareaAutosize
@ -52,10 +46,7 @@ function Examples({ readonly, examples, setExample, addExample, removeExample, e
} flex flex-col items-center justify-start gap-6 sm:col-span-1`}
>
<div className="grid w-full items-center gap-2">
<Label
htmlFor={`output-${idx}`}
className="text-left text-sm font-medium"
>
<Label htmlFor={`output-${idx}`} className="text-left text-sm font-medium">
Output <small className="opacity-40">(default: blank)</small>
</Label>
<TextareaAutosize

3
client/src/components/Endpoints/Google/OptionHover.jsx
View file

@ -5,7 +5,8 @@ const types = {
temp: 'Higher values = more random, while lower values = more focused and deterministic. We recommend altering this or Top P but not both.',
topp: 'Top-p changes how the model selects tokens for output. Tokens are selected from most K (see topK parameter) probable to least until the sum of their probabilities equals the top-p value.',
topk: "Top-k changes how the model selects tokens for output. A top-k of 1 means the selected token is the most probable among all tokens in the model's vocabulary (also called greedy decoding), while a top-k of 3 means that the next token is selected from among the 3 most probable tokens (using temperature).",
maxoutputtokens: " Maximum number of tokens that can be generated in the response. Specify a lower value for shorter responses and a higher value for longer responses."
maxoutputtokens:
' Maximum number of tokens that can be generated in the response. Specify a lower value for shorter responses and a higher value for longer responses.'
};
function OptionHover({ type, side }) {

63
client/src/components/Endpoints/Google/Settings.jsx
View file

@ -17,7 +17,18 @@ const optionText =
import store from '~/store';
function Settings(props) {
const { readonly, model, modelLabel, promptPrefix, temperature, topP, topK, maxOutputTokens, setOption, edit = false } = props;
const {
readonly,
model,
modelLabel,
promptPrefix,
temperature,
topP,
topK,
maxOutputTokens,
setOption,
edit = false
} = props;
const maxHeight = edit ? 'max-h-[233px]' : 'max-h-[350px]';
const endpointsConfig = useRecoilValue(store.endpointsConfig);
@ -49,10 +60,7 @@ function Settings(props) {
/>
</div>
<div className="grid w-full items-center gap-2">
<Label
htmlFor="modelLabel"
className="text-left text-sm font-medium"
>
<Label htmlFor="modelLabel" className="text-left text-sm font-medium">
Custom Name <small className="opacity-40">(default: blank)</small>
</Label>
<Input
@ -68,10 +76,7 @@ function Settings(props) {
/>
</div>
<div className="grid w-full items-center gap-2">
<Label
htmlFor="promptPrefix"
className="text-left text-sm font-medium"
>
<Label htmlFor="promptPrefix" className="text-left text-sm font-medium">
Prompt Prefix <small className="opacity-40">(default: blank)</small>
</Label>
<TextareaAutosize
@ -91,10 +96,7 @@ function Settings(props) {
<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
<div className="flex justify-between">
<Label
htmlFor="temp-int"
className="text-left text-sm font-medium"
>
<Label htmlFor="temp-int" className="text-left text-sm font-medium">
Temperature <small className="opacity-40">(default: 0.2)</small>
</Label>
<InputNumber
@ -126,18 +128,12 @@ function Settings(props) {
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover
type="temp"
side="left"
/>
<OptionHover type="temp" side="left" />
</HoverCard>
<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
<div className="flex justify-between">
<Label
htmlFor="top-p-int"
className="text-left text-sm font-medium"
>
<Label htmlFor="top-p-int" className="text-left text-sm font-medium">
Top P <small className="opacity-40">(default: 0.95)</small>
</Label>
<InputNumber
@ -169,19 +165,13 @@ function Settings(props) {
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover
type="topp"
side="left"
/>
<OptionHover type="topp" side="left" />
</HoverCard>
<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
<div className="flex justify-between">
<Label
htmlFor="top-k-int"
className="text-left text-sm font-medium"
>
<Label htmlFor="top-k-int" className="text-left text-sm font-medium">
Top K <small className="opacity-40">(default: 40)</small>
</Label>
<InputNumber
@ -213,19 +203,13 @@ function Settings(props) {
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover
type="topk"
side="left"
/>
<OptionHover type="topk" side="left" />
</HoverCard>
<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
<div className="flex justify-between">
<Label
htmlFor="max-tokens-int"
className="text-left text-sm font-medium"
>
<Label htmlFor="max-tokens-int" className="text-left text-sm font-medium">
Max Output Tokens <small className="opacity-40">(default: 1024)</small>
</Label>
<InputNumber
@ -257,10 +241,7 @@ function Settings(props) {
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover
type="maxoutputtokens"
side="left"
/>
<OptionHover type="maxoutputtokens" side="left" />
</HoverCard>
</div>
</div>

62
client/src/components/Endpoints/OpenAI/Settings.jsx
View file

@ -17,7 +17,17 @@ const optionText =
import store from '~/store';
function Settings(props) {
const { readonly, model, chatGptLabel, promptPrefix, temperature, topP, freqP, presP, setOption } = props;
const {
readonly,
model,
chatGptLabel,
promptPrefix,
temperature,
topP,
freqP,
presP,
setOption
} = props;
const endpointsConfig = useRecoilValue(store.endpointsConfig);
@ -49,10 +59,7 @@ function Settings(props) {
/>
</div>
<div className="grid w-full items-center gap-2">
<Label
htmlFor="chatGptLabel"
className="text-left text-sm font-medium"
>
<Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
Custom Name <small className="opacity-40">(default: blank)</small>
</Label>
<Input
@ -68,10 +75,7 @@ function Settings(props) {
/>
</div>
<div className="grid w-full items-center gap-2">
<Label
htmlFor="promptPrefix"
className="text-left text-sm font-medium"
>
<Label htmlFor="promptPrefix" className="text-left text-sm font-medium">
Prompt Prefix <small className="opacity-40">(default: blank)</small>
</Label>
<TextareaAutosize
@ -91,10 +95,7 @@ function Settings(props) {
<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
<div className="flex justify-between">
<Label
htmlFor="temp-int"
className="text-left text-sm font-medium"
>
<Label htmlFor="temp-int" className="text-left text-sm font-medium">
Temperature <small className="opacity-40">(default: 1)</small>
</Label>
<InputNumber
@ -126,18 +127,12 @@ function Settings(props) {
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover
type="temp"
side="left"
/>
<OptionHover type="temp" side="left" />
</HoverCard>
<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
<div className="flex justify-between">
<Label
htmlFor="top-p-int"
className="text-left text-sm font-medium"
>
<Label htmlFor="top-p-int" className="text-left text-sm font-medium">
Top P <small className="opacity-40">(default: 1)</small>
</Label>
<InputNumber
@ -169,19 +164,13 @@ function Settings(props) {
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover
type="topp"
side="left"
/>
<OptionHover type="topp" side="left" />
</HoverCard>
<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
<div className="flex justify-between">
<Label
htmlFor="freq-penalty-int"
className="text-left text-sm font-medium"
>
<Label htmlFor="freq-penalty-int" className="text-left text-sm font-medium">
Frequency Penalty <small className="opacity-40">(default: 0)</small>
</Label>
<InputNumber
@ -213,19 +202,13 @@ function Settings(props) {
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover
type="freq"
side="left"
/>
<OptionHover type="freq" side="left" />
</HoverCard>
<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
<div className="flex justify-between">
<Label
htmlFor="pres-penalty-int"
className="text-left text-sm font-medium"
>
<Label htmlFor="pres-penalty-int" className="text-left text-sm font-medium">
Presence Penalty <small className="opacity-40">(default: 0)</small>
</Label>
<InputNumber
@ -257,10 +240,7 @@ function Settings(props) {
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover
type="pres"
side="left"
/>
<OptionHover type="pres" side="left" />
</HoverCard>
</div>
</div>

10
client/src/components/Endpoints/SaveAsPresetDialog.jsx
View file

@ -33,18 +33,12 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {
}, [open]);
return (
<Dialog
open={open}
onOpenChange={onOpenChange}
>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate
title="Save As Preset"
main={
<div className="grid w-full items-center gap-2">
<Label
htmlFor="chatGptLabel"
className="text-left text-sm font-medium"
>
<Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
Preset Name
</Label>
<Input

6
client/src/components/Input/AdjustToneButton.jsx
View file

@ -1,16 +1,16 @@
import React from 'react';
import { Settings2 } from 'lucide-react';
export default function AdjustButton({ onClick }) {
const clickHandler = e => {
const clickHandler = (e) => {
e.preventDefault();
onClick();
};
return (
<button
onClick={clickHandler}
className="group absolute bottom-11 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500 lg:bottom-0 lg:-right-11"
className="group absolute bottom-11 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500 lg:-right-11 lg:bottom-0"
>
<div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] 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-1 mr-0 rounded-md p-2 pb-[10px] pt-[10px] 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">
<Settings2 size="1em" />
</div>
</button>

7
client/src/components/Input/BingAIOptions/index.jsx
View file

@ -31,7 +31,7 @@ function BingAIOptions({ show }) {
setSaveAsDialogShow(true);
};
const setOption = param => newValue => {
const setOption = param => (newValue) => {
let update = {};
update[param] = newValue;
setConversation(prevState => ({
@ -44,7 +44,10 @@ function BingAIOptions({ show }) {
'transition-colors shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 hover:border-black/10 focus:border-black/10 dark:border-black/10 dark:hover:border-black/10 dark:focus:border-black/10 border dark:bg-gray-700 text-black dark:text-white';
const defaultClasses =
'p-2 rounded-md min-w-[75px] font-normal bg-white/[.60] dark:bg-gray-700 text-black text-xs';
const defaultSelected = cn(defaultClasses, 'font-medium data-[state=active]:text-white text-xs text-white');
const defaultSelected = cn(
defaultClasses,
'font-medium data-[state=active]:text-white text-xs text-white'
);
const selectedClass = val => val + '-tab ' + defaultSelected;
return (

2
client/src/components/Input/ChatGPTOptions/index.jsx
View file

@ -17,7 +17,7 @@ function ChatGPTOptions() {
const models = endpointsConfig?.['chatGPTBrowser']?.['availableModels'] || [];
const setOption = param => newValue => {
const setOption = param => (newValue) => {
let update = {};
update[param] = newValue;
setConversation(prevState => ({

8
client/src/components/Input/Footer.jsx
View file

@ -2,17 +2,17 @@ import React from 'react';
export default function Footer() {
return (
<div className="hidden px-3 pt-2 pb-1 text-center text-xs text-black/50 dark:text-white/50 md:block md:px-4 md:pt-3 md:pb-4">
<div className="hidden px-3 pb-1 pt-2 text-center text-xs text-black/50 dark:text-white/50 md:block md:px-4 md:pb-4 md:pt-3">
<a
href="https://github.com/danny-avila/chatgpt-clone"
target="_blank"
rel="noreferrer"
className="underline"
>
{import.meta.env.VITE_APP_TITLE || "ChatGPT Clone"}
{import.meta.env.VITE_APP_TITLE || 'ChatGPT Clone'}
</a>
. Serves and searches all conversations reliably. All AI convos under one house. Pay per call and not
per month (cents compared to dollars).
. Serves and searches all conversations reliably. All AI convos under one house. Pay per call
and not per month (cents compared to dollars).
</div>
);
}

2
client/src/components/Input/GoogleOptions/index.jsx
View file

@ -40,7 +40,7 @@ function GoogleOptions() {
setSaveAsDialogShow(true);
};
const setOption = param => newValue => {
const setOption = param => (newValue) => {
let update = {};
update[param] = newValue;
setConversation(prevState => ({

6
client/src/components/Input/NewConversationMenu/EndpointItem.jsx
View file

@ -12,8 +12,8 @@ const alternateName = {
azureOpenAI: 'Azure OpenAI',
bingAI: 'Bing',
chatGPTBrowser: 'ChatGPT',
google: 'PaLM',
}
google: 'PaLM'
};
export default function ModelItem({ endpoint, value, onSelect }) {
const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
@ -42,7 +42,7 @@ export default function ModelItem({ endpoint, value, onSelect }) {
{isUserProvided ? (
<button
className="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"
onClick={e => {
onClick={(e) => {
e.preventDefault();
setSetTokenDialogOpen(true);
}}

7
client/src/components/Input/NewConversationMenu/EndpointItems.jsx
View file

@ -5,12 +5,7 @@ export default function EndpointItems({ endpoints, onSelect }) {
return (
<>
{endpoints.map(endpoint => (
<EndpointItem
key={endpoint}
value={endpoint}
onSelect={onSelect}
endpoint={endpoint}
/>
<EndpointItem key={endpoint} value={endpoint} onSelect={onSelect} endpoint={endpoint} />
))}
</>
);

17
client/src/components/Input/NewConversationMenu/FileUpload.jsx
View file

@ -2,16 +2,23 @@ import { useState } from 'react';
import { FileUp } from 'lucide-react';
import { cn } from '~/utils/';
const FileUpload = ({ onFileSelected, successText = null, invalidText = null, validator = null, text = null, id = '1' }) => {
const FileUpload = ({
onFileSelected,
successText = null,
invalidText = null,
validator = null,
text = null,
id = '1'
}) => {
const [statusColor, setStatusColor] = useState('text-gray-600');
const [status, setStatus] = useState(null);
const handleFileChange = event => {
const handleFileChange = (event) => {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = e => {
reader.onload = (e) => {
const jsonData = JSON.parse(e.target.result);
if (validator && !validator(jsonData)) {
setStatus('invalid');
@ -38,7 +45,9 @@ const FileUpload = ({ onFileSelected, successText = null, invalidText = null, va
)}
>
<FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
<span className="flex text-xs ">{!status ? text || 'Import' : (status === 'success' ? successText : invalidText)}</span>
<span className="flex text-xs ">
{!status ? text || 'Import' : status === 'success' ? successText : invalidText}
</span>
<input
id={`file-upload-${id}`}
value=""

12
client/src/components/Input/NewConversationMenu/PresetItem.jsx
View file

@ -4,7 +4,13 @@ import EditIcon from '../../svg/EditIcon.jsx';
import TrashIcon from '../../svg/TrashIcon.jsx';
import getIcon from '~/utils/getIcon';
export default function PresetItem({ preset = {}, value, onSelect, onChangePreset, onDeletePreset }) {
export default function PresetItem({
preset = {},
value,
onSelect,
onChangePreset,
onDeletePreset
}) {
const { endpoint } = preset;
const icon = getIcon({
@ -53,7 +59,7 @@ export default function PresetItem({ preset = {}, value, onSelect, onChangePrese
<div className="flex w-4 flex-1" />
<button
className="invisible m-0 mr-1 rounded-md p-2 text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200 "
onClick={e => {
onClick={(e) => {
e.preventDefault();
onChangePreset(preset);
}}
@ -62,7 +68,7 @@ export default function PresetItem({ preset = {}, value, onSelect, onChangePrese
</button>
<button
className="invisible m-0 rounded-md text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200 "
onClick={e => {
onClick={(e) => {
e.preventDefault();
onDeletePreset(preset);
}}

35
client/src/components/Input/NewConversationMenu/index.jsx
View file

@ -39,21 +39,21 @@ export default function NewConversationMenu() {
const deletePresetsMutation = useDeletePresetMutation();
const createPresetMutation = useCreatePresetMutation();
const importPreset = jsonData => {
const importPreset = (jsonData) => {
createPresetMutation.mutate(
{ ...jsonData },
{
onSuccess: data => {
onSuccess: (data) => {
setPresets(data);
},
onError: error => {
onError: (error) => {
console.error('Error uploading the preset:', error);
}
}
);
};
const onFileSelected = jsonData => {
const onFileSelected = (jsonData) => {
const jsonPreset = { ...cleanupPreset({ preset: jsonData, endpointsConfig }), presetId: null };
importPreset(jsonPreset);
};
@ -80,7 +80,7 @@ export default function NewConversationMenu() {
}, [conversation]);
// set the current model
const onSelectEndpoint = newEndpoint => {
const onSelectEndpoint = (newEndpoint) => {
setMenuOpen(false);
if (!newEndpoint) return;
@ -90,7 +90,7 @@ export default function NewConversationMenu() {
};
// set the current model
const onSelectPreset = newPreset => {
const onSelectPreset = (newPreset) => {
setMenuOpen(false);
if (!newPreset) return;
else {
@ -98,7 +98,7 @@ export default function NewConversationMenu() {
}
};
const onChangePreset = preset => {
const onChangePreset = (preset) => {
setPresetModelVisible(true);
setPreset(preset);
};
@ -107,7 +107,7 @@ export default function NewConversationMenu() {
deletePresetsMutation.mutate({ arg: {} });
};
const onDeletePreset = preset => {
const onDeletePreset = (preset) => {
deletePresetsMutation.mutate({ arg: preset });
};
@ -121,10 +121,7 @@ export default function NewConversationMenu() {
return (
<Dialog>
<DropdownMenu
open={menuOpen}
onOpenChange={setMenuOpen}
>
<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
@ -148,22 +145,18 @@ export default function NewConversationMenu() {
className="overflow-y-auto"
>
{availableEndpoints.length ? (
<EndpointItems
endpoints={availableEndpoints}
onSelect={onSelectEndpoint}
/>
<EndpointItems endpoints={availableEndpoints} onSelect={onSelectEndpoint} />
) : (
<DropdownMenuLabel className="dark:text-gray-300">No endpoint available.</DropdownMenuLabel>
<DropdownMenuLabel className="dark:text-gray-300">
No endpoint available.
</DropdownMenuLabel>
)}
</DropdownMenuRadioGroup>
<div className="mt-6 w-full" />
<DropdownMenuLabel className="flex items-center dark:text-gray-300">
<span
className="cursor-pointer"
onClick={() => setShowPresets(prev => !prev)}
>
<span className="cursor-pointer" onClick={() => setShowPresets(prev => !prev)}>
{showPresets ? 'Hide ' : 'Show '} Presets
</span>
<div className="flex-1" />

13
client/src/components/Input/OpenAIOptions/index.jsx
View file

@ -16,8 +16,15 @@ function OpenAIOptions() {
const [conversation, setConversation] = useRecoilState(store.conversation) || {};
const { endpoint, conversationId } = conversation;
const { model, chatGptLabel, promptPrefix, temperature, top_p, presence_penalty, frequency_penalty } =
conversation;
const {
model,
chatGptLabel,
promptPrefix,
temperature,
top_p,
presence_penalty,
frequency_penalty
} = conversation;
const endpointsConfig = useRecoilValue(store.endpointsConfig);
@ -36,7 +43,7 @@ function OpenAIOptions() {
setSaveAsDialogShow(true);
};
const setOption = param => newValue => {
const setOption = param => (newValue) => {
let update = {};
update[param] = newValue;
setConversation(prevState => ({

5
client/src/components/Input/SetTokenDialog/InputWithLabel.jsx
View file

@ -9,10 +9,7 @@ function InputWithLabel({ value, onChange, label, id }) {
return (
<>
<Label
htmlFor={id}
className="text-left text-sm font-medium"
>
<Label htmlFor={id} className="text-left text-sm font-medium">
{label}
<br />
</Label>

21
client/src/components/Input/SetTokenDialog/index.jsx
View file

@ -49,8 +49,8 @@ const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
const helpText = {
bingAI: (
<small className="break-all text-gray-600">
The Bing Access Token is the "_U" cookie from bing.com. Use dev tools or an extension while logged
into the site to view it.
The Bing Access Token is the "_U" cookie from bing.com. Use dev tools or an extension while
logged into the site to view it.
</small>
),
chatGPTBrowser: (
@ -96,8 +96,8 @@ const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
>
Create a Service Account
</a>
. Make sure to click 'Create and Continue' to give at least the 'Vertex AI User' role. Lastly, create
a JSON key to import here.
. Make sure to click 'Create and Continue' to give at least the 'Vertex AI User' role.
Lastly, create a JSON key to import here.
</small>
)
};
@ -122,10 +122,7 @@ const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
}
return (
<Dialog
open={open}
onOpenChange={onOpenChange}
>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate
title={`Set Token of ${endpoint}`}
main={
@ -137,7 +134,7 @@ const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
text="Import Service Account JSON Key"
successText="Successfully Imported Service Account JSON Key"
invalidText="Invalid Service Account JSON Key, Did you import the correct file?"
validator={credentials => {
validator={(credentials) => {
if (!credentials) {
return false;
}
@ -168,7 +165,7 @@ const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
return true;
}}
onFileSelected={data => {
onFileSelected={(data) => {
setToken(JSON.stringify(data));
}}
/>
@ -244,7 +241,9 @@ const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
/>
</>
)}
<small className="text-red-600">Your token will be sent to the server, but not saved.</small>
<small className="text-red-600">
Your token will be sent to the server, but not saved.
</small>
{helpText?.[endpoint]}
</div>
}

9
client/src/components/Input/SubmitButton.jsx
View file

@ -17,7 +17,7 @@ export default function SubmitButton({
const isTokenProvided = endpointsConfig?.[endpoint]?.userProvide ? !!getToken() : true;
const clickHandler = e => {
const clickHandler = (e) => {
e.preventDefault();
submitMessage();
};
@ -101,12 +101,7 @@ export default function SubmitButton({
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="22"
y1="2"
x2="11"
y2="13"
/>
<line x1="22" y1="2" x2="11" y2="13" />
<polygon points="22 2 15 22 11 13 2 9 22 2" />
</svg>
</div>

10
client/src/components/Input/index.jsx
View file

@ -34,7 +34,7 @@ export default function TextChat({ isSearchView = false }) {
// const bingStylesRef = useRef(null);
const [showBingToneSetting, setShowBingToneSetting] = useState(false);
const isNotAppendable = (latestMessage?.unfinished & !isSubmitting) || latestMessage?.error;
const isNotAppendable = latestMessage?.unfinished & !isSubmitting || latestMessage?.error;
// auto focus to input, when enter a conversation.
useEffect(() => {
@ -64,12 +64,12 @@ export default function TextChat({ isSearchView = false }) {
setText('');
};
const handleStopGenerating = e => {
const handleStopGenerating = (e) => {
e.preventDefault();
stopGenerating();
};
const handleKeyDown = e => {
const handleKeyDown = (e) => {
if (e.key === 'Enter' && isSubmitting) {
return;
}
@ -83,7 +83,7 @@ export default function TextChat({ isSearchView = false }) {
}
};
const handleKeyUp = e => {
const handleKeyUp = (e) => {
if (e.keyCode === 8 && e.target.value.trim() === '') {
setText(e.target.value);
}
@ -105,7 +105,7 @@ export default function TextChat({ isSearchView = false }) {
isComposing.current = false;
};
const changeHandler = e => {
const changeHandler = (e) => {
const { value } = e.target;
setText(value);

19
client/src/components/MessageHandler/index.jsx
View file

@ -27,7 +27,7 @@ export default function MessageHandler() {
text: data,
parentMessageId: message?.overrideParentMessageId,
messageId: message?.overrideParentMessageId + '_',
submitting: true,
submitting: true
// unfinished: true
}
]);
@ -40,7 +40,7 @@ export default function MessageHandler() {
text: data,
parentMessageId: message?.messageId,
messageId: message?.messageId + '_',
submitting: true,
submitting: true
// unfinished: true
}
]);
@ -153,7 +153,7 @@ export default function MessageHandler() {
return;
};
const abortConversation = conversationId => {
const abortConversation = (conversationId) => {
console.log(submission);
const { endpoint } = submission?.conversation || {};
@ -161,18 +161,18 @@ export default function MessageHandler() {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
Authorization: `Bearer ${token}`
},
body: JSON.stringify({
abortKey: conversationId
})
})
.then(response => response.json())
.then(data => {
.then((data) => {
console.log('aborted', data);
cancelHandler(data, submission);
})
.catch(error => {
.catch((error) => {
console.error('Error aborting request');
console.error(error);
// errorHandler({ text: 'Error aborting request' }, { ...submission, message });
@ -190,10 +190,10 @@ export default function MessageHandler() {
const events = new SSE(server, {
payload: JSON.stringify(payload),
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`}
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
});
events.onmessage = e => {
events.onmessage = (e) => {
const data = JSON.parse(e.data);
if (data.final) {
@ -219,7 +219,8 @@ export default function MessageHandler() {
events.onopen = () => console.log('connection is opened');
events.oncancel = () => abortConversation(message?.conversationId || submission?.conversationId);
events.oncancel = () =>
abortConversation(message?.conversationId || submission?.conversationId);
events.onerror = function (e) {
console.log('error in opening conn.');

10
client/src/components/Messages/Content/CodeBlock.jsx
View file

@ -7,15 +7,9 @@ const CodeBlock = ({ lang, codeChildren }) => {
return (
<div className="rounded-md bg-black">
<CodeBar
lang={lang}
codeRef={codeRef}
/>
<CodeBar lang={lang} codeRef={codeRef} />
<div className="overflow-y-auto p-4">
<code
ref={codeRef}
className={`hljs !whitespace-pre language-${lang}`}
>
<code ref={codeRef} className={`hljs !whitespace-pre language-${lang}`}>
{codeChildren}
</code>
</div>

15
client/src/components/Messages/Content/Content.jsx
View file

@ -4,7 +4,7 @@ import rehypeKatex from 'rehype-katex';
import rehypeHighlight from 'rehype-highlight';
import remarkMath from 'remark-math';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw'
import rehypeRaw from 'rehype-raw';
import CodeBlock from './CodeBlock';
import { langSubset } from '~/utils/languages.mjs';
@ -19,7 +19,7 @@ const Content = React.memo(({ content }) => {
subset: langSubset
}
],
[rehypeRaw],
[rehypeRaw]
];
return (
@ -29,7 +29,7 @@ const Content = React.memo(({ content }) => {
linkTarget="_new"
components={{
code,
p,
p
// em,
}}
>
@ -46,17 +46,12 @@ const code = React.memo((props) => {
if (inline) {
return <code className={className}>{children}</code>;
} else {
return (
<CodeBlock
lang={lang || 'text'}
codeChildren={children}
/>
);
return <CodeBlock lang={lang || 'text'} codeChildren={children} />;
}
});
const p = React.memo((props) => {
return <p className="whitespace-pre-wrap mb-2">{props?.children}</p>;
return <p className="mb-2 whitespace-pre-wrap">{props?.children}</p>;
});
// const blinker = ({ node }) => {

6
client/src/components/Messages/Content/SubRow.jsx
View file

@ -3,7 +3,11 @@ import React from 'react';
export default function SubRow({ children, classes = '', subclasses = '', onClick }) {
return (
<div className={`flex justify-between ${classes}`} onClick={onClick}>
<div className={`flex items-center justify-center gap-1 self-center pt-2 text-xs ${subclasses}`}>{children}</div>
<div
className={`flex items-center justify-center gap-1 self-center pt-2 text-xs ${subclasses}`}
>
{children}
</div>
</div>
);
}

8
client/src/components/Messages/HoverButtons.jsx
View file

@ -32,10 +32,14 @@ export default function HoverButtons({
// for now, once branching is supported, regerate will be enabled
const regenerateEnabled =
// !message?.error &&
!message?.isCreatedByUser && !message?.searchResult && !isEditting && !isSubmitting && branchingSupported;
!message?.isCreatedByUser &&
!message?.searchResult &&
!isEditting &&
!isSubmitting &&
branchingSupported;
return (
<div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:top-0 lg:right-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
<div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:right-0 lg:top-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
{editEnabled ? (
<button
className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"

22
client/src/components/Messages/Message.jsx
View file

@ -41,7 +41,9 @@ export default function Message({
const { ask, regenerate } = useMessageHandler();
const { switchToConversation } = store.useConversation();
const blinker = submitting && isSubmitting;
const getConversationQuery = useGetConversationByIdQuery(message.conversationId, { enabled: false });
const getConversationQuery = useGetConversationByIdQuery(message.conversationId, {
enabled: false
});
// debugging
// useEffect(() => {
@ -71,9 +73,9 @@ export default function Message({
}
};
const getError = text => {
const getError = (text) => {
const match = text.match(/\{[^{}]*\}/);
var json = match ? match[0] : ''
var json = match ? match[0] : '';
if (isJson(json)) {
json = JSON.parse(json);
if (json.code === 'invalid_api_key') {
@ -124,7 +126,7 @@ export default function Message({
if (!isSubmitting && !message?.isCreatedByUser) regenerate(message);
};
const copyToClipboard = setIsCopied => {
const copyToClipboard = (setIsCopied) => {
setIsCopied(true);
copy(message?.text);
@ -135,17 +137,14 @@ export default function Message({
const clickSearchResult = async () => {
if (!searchResult) return;
getConversationQuery.refetch(message.conversationId).then(response => {
getConversationQuery.refetch(message.conversationId).then((response) => {
switchToConversation(response.data);
});
};
return (
<>
<div
{...props}
onWheel={handleWheel}
>
<div {...props} onWheel={handleWheel}>
<div className="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="relative flex h-[30px] w-[30px] flex-col items-end text-right text-xs md:text-sm">
{typeof icon === 'string' && icon.match(/[^\\x00-\\x7F]+/) ? (
@ -197,10 +196,7 @@ export default function Message({
>
Save & Submit
</button>
<button
className="btn btn-neutral relative"
onClick={() => enterEdit(true)}
>
<button className="btn btn-neutral relative" onClick={() => enterEdit(true)}>
Cancel
</button>
</div>

6
client/src/components/Messages/MessageHeader.jsx
View file

@ -6,7 +6,7 @@ import { Button } from '../ui/Button.tsx';
import store from '~/store';
const clipPromptPrefix = str => {
const clipPromptPrefix = (str) => {
if (typeof str !== 'string') {
return null;
} else if (str.length > 10) {
@ -61,7 +61,9 @@ const MessageHeader = ({ isSearchView = false }) => {
)}
onClick={() => (endpoint === 'chatGPTBrowser' ? null : setSaveAsDialogShow(true))}
>
<div className="d-block flex w-full items-center justify-center p-3">{getConversationTitle()}</div>
<div className="d-block flex w-full items-center justify-center p-3">
{getConversationTitle()}
</div>
</div>
<EndpointOptionsDialog

2
client/src/components/Messages/MultiMessage.jsx
View file

@ -17,7 +17,7 @@ export default function MultiMessage({
const [siblingIdx, setSiblingIdx] = useRecoilState(store.messagesSiblingIdxFamily(messageId));
const setSiblingIdxRev = value => {
const setSiblingIdxRev = (value) => {
setSiblingIdx(messagesTree?.length - value - 1);
};

10
client/src/components/Messages/ScrollToBottom.jsx
View file

@ -1,11 +1,10 @@
import React from 'react';
export default function ScrollToBottom({ scrollHandler }) {
return (
<button
onClick={scrollHandler}
className="absolute right-6 bottom-[124px] z-10 cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200 md:bottom-[120px]"
className="absolute bottom-[124px] right-6 z-10 cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200 md:bottom-[120px]"
>
<svg
stroke="currentColor"
@ -19,12 +18,7 @@ export default function ScrollToBottom({ scrollHandler}) {
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="12"
y1="5"
x2="12"
y2="19"
/>
<line x1="12" y1="5" x2="12" y2="19" />
<polyline points="19 12 12 19 5 12" />
</svg>
</button>

56
client/src/components/Messages/SiblingSwitch.jsx
View file

@ -1,25 +1,57 @@
import React from 'react';
export default function SiblingSwitch({
siblingIdx,
siblingCount,
setSiblingIdx
}) {
export default function SiblingSwitch({ siblingIdx, siblingCount, setSiblingIdx }) {
const previous = () => {
setSiblingIdx(siblingIdx - 1);
}
};
const next = () => {
setSiblingIdx(siblingIdx + 1);
}
};
return siblingCount > 1 ? (
<>
<button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={previous} disabled={siblingIdx==0}>
<svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="15 18 9 12 15 6"></polyline></svg>
<button
className="disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400"
onClick={previous}
disabled={siblingIdx == 0}
>
<svg
stroke="currentColor"
fill="none"
strokeWidth="1.5"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-3 w-3"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
<span className="flex-grow flex-shrink-0">{siblingIdx + 1}/{siblingCount}</span>
<button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={next} disabled={siblingIdx==siblingCount-1}>
<svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6"></polyline></svg>
<span className="flex-shrink-0 flex-grow">
{siblingIdx + 1}/{siblingCount}
</span>
<button
className="disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400"
onClick={next}
disabled={siblingIdx == siblingCount - 1}
>
<svg
stroke="currentColor"
fill="none"
strokeWidth="1.5"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-3 w-3"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</>
) : null;

7
client/src/components/Messages/index.jsx
View file

@ -76,7 +76,7 @@ export default function Messages({ isSearchView = false }) {
timeoutId = setTimeout(handleScroll, 100);
};
const scrollHandler = e => {
const scrollHandler = (e) => {
e.preventDefault();
scrollToBottom();
};
@ -87,10 +87,7 @@ export default function Messages({ isSearchView = false }) {
ref={scrollableRef}
onScroll={debouncedHandleScroll}
>
<div
className="dark:gpt-dark-gray mb-32 h-auto md:mb-48"
ref={screenshotTargetRef}
>
<div className="dark:gpt-dark-gray mb-32 h-auto md:mb-48" ref={screenshotTargetRef}>
<div className="dark:gpt-dark-gray flex h-auto flex-col items-center text-sm">
<MessageHeader isSearchView={isSearchView} />
{_messagesTree === null ? (

4
client/src/components/Nav/ClearConvos.jsx
View file

@ -25,9 +25,7 @@ export default function ClearConvos() {
return (
<Dialog>
<DialogTrigger asChild>
<button
className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
>
<button className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700">
<TrashIcon />
Clear conversations
</button>

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

@ -52,7 +52,7 @@ export default function ExportModel({ open, onOpenChange }) {
setRecursive(true);
}, [open]);
const _setType = newType => {
const _setType = (newType) => {
const exportBranchesSupport = newType === 'json' || newType === 'csv' || newType === 'webpage';
const exportOptionsSupport = newType !== 'csv' && newType !== 'screenshot';
@ -66,7 +66,13 @@ export default function ExportModel({ open, onOpenChange }) {
// return an object or an array based on branches and recursive option
// messageId is used to get siblindIdx from recoil snapshot
const buildMessageTree = async ({ messageId, message, messages, branches = false, recursive = false }) => {
const buildMessageTree = async ({
messageId,
message,
messages,
branches = false,
recursive = false
}) => {
let children = [];
if (messages?.length)
if (branches)
@ -137,21 +143,39 @@ export default function ExportModel({ open, onOpenChange }) {
extension: 'csv',
exportType: exportFromJSON.types.csv,
beforeTableEncode: entries => [
{ fieldName: 'sender', fieldValues: entries.find(e => e.fieldName == 'sender').fieldValues },
{
fieldName: 'sender',
fieldValues: entries.find(e => e.fieldName == 'sender').fieldValues
},
{ fieldName: 'text', fieldValues: entries.find(e => e.fieldName == 'text').fieldValues },
{
fieldName: 'isCreatedByUser',
fieldValues: entries.find(e => e.fieldName == 'isCreatedByUser').fieldValues
},
{ fieldName: 'error', fieldValues: entries.find(e => e.fieldName == 'error').fieldValues },
{ fieldName: 'unfinished', fieldValues: entries.find(e => e.fieldName == 'unfinished').fieldValues },
{ fieldName: 'cancelled', fieldValues: entries.find(e => e.fieldName == 'cancelled').fieldValues },
{ fieldName: 'messageId', fieldValues: entries.find(e => e.fieldName == 'messageId').fieldValues },
{
fieldName: 'error',
fieldValues: entries.find(e => e.fieldName == 'error').fieldValues
},
{
fieldName: 'unfinished',
fieldValues: entries.find(e => e.fieldName == 'unfinished').fieldValues
},
{
fieldName: 'cancelled',
fieldValues: entries.find(e => e.fieldName == 'cancelled').fieldValues
},
{
fieldName: 'messageId',
fieldValues: entries.find(e => e.fieldName == 'messageId').fieldValues
},
{
fieldName: 'parentMessageId',
fieldValues: entries.find(e => e.fieldName == 'parentMessageId').fieldValues
},
{ fieldName: 'createdAt', fieldValues: entries.find(e => e.fieldName == 'createdAt').fieldValues }
{
fieldName: 'createdAt',
fieldValues: entries.find(e => e.fieldName == 'createdAt').fieldValues
}
]
});
};
@ -284,10 +308,7 @@ export default function ExportModel({ open, onOpenChange }) {
'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
return (
<Dialog
open={open}
onOpenChange={onOpenChange}
>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate
title="Export conversation"
className="max-w-full sm:max-w-2xl"
@ -295,10 +316,7 @@ export default function ExportModel({ open, onOpenChange }) {
<div className="flex w-full flex-col items-center gap-6">
<div className="grid w-full gap-6 sm:grid-cols-2">
<div className="col-span-1 flex flex-col items-start justify-start gap-2">
<Label
htmlFor="filename"
className="text-left text-sm font-medium"
>
<Label htmlFor="filename" className="text-left text-sm font-medium">
Filename
</Label>
<Input
@ -313,10 +331,7 @@ export default function ExportModel({ open, onOpenChange }) {
/>
</div>
<div className="col-span-1 flex flex-col items-start justify-start gap-2">
<Label
htmlFor="type"
className="text-left text-sm font-medium"
>
<Label htmlFor="type" className="text-left text-sm font-medium">
Type
</Label>
<Dropdown
@ -335,10 +350,7 @@ export default function ExportModel({ open, onOpenChange }) {
<div className="grid w-full gap-6 sm:grid-cols-2">
<div className="col-span-1 flex flex-col items-start justify-start gap-2">
<div className="grid w-full items-center gap-2">
<Label
htmlFor="includeOptions"
className="text-left text-sm font-medium"
>
<Label htmlFor="includeOptions" className="text-left text-sm font-medium">
Include endpoint options
</Label>
<div className="flex h-[40px] w-full items-center space-x-3">
@ -359,10 +371,7 @@ export default function ExportModel({ open, onOpenChange }) {
</div>
</div>
<div className="grid w-full items-center gap-2">
<Label
htmlFor="exportBranches"
className="text-left text-sm font-medium"
>
<Label htmlFor="exportBranches" className="text-left text-sm font-medium">
Export all message branches
</Label>
<div className="flex h-[40px] w-full items-center space-x-3">
@ -383,10 +392,7 @@ export default function ExportModel({ open, onOpenChange }) {
</div>
{type === 'json' ? (
<div className="grid w-full items-center gap-2">
<Label
htmlFor="recursive"
className="text-left text-sm font-medium"
>
<Label htmlFor="recursive" className="text-left text-sm font-medium">
Recursive or sequential?
</Label>
<div className="flex h-[40px] w-full items-center space-x-3">

7
client/src/components/Nav/ExportConversation/index.jsx
View file

@ -25,7 +25,7 @@ export default function ExportConversation() {
<>
<button
className={cn(
'flex py-3 px-3 items-center gap-3 transition-colors duration-200 text-white cursor-pointer text-sm hover:bg-gray-700 w-full',
'flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700',
exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-gray-400'
)}
onClick={clickHandler}
@ -34,10 +34,7 @@ export default function ExportConversation() {
Export conversation
</button>
<ExportModel
open={open}
onOpenChange={setOpen}
/>
<ExportModel open={open} onOpenChange={setOpen} />
</>
);
}

4
client/src/components/Nav/Logout.jsx
View file

@ -6,13 +6,13 @@ export default function Logout() {
const { user, logout } = useAuthContext();
const handleLogout = () => {
logout()
logout();
window.location.reload();
};
return (
<button
className="flex py-3 px-3 items-center gap-3 transition-colors duration-200 text-white cursor-pointer text-sm hover:bg-gray-700 w-full"
className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
onClick={handleLogout}
>
<LogOutIcon />

43
client/src/components/Nav/MobileNav.jsx
View file

@ -9,7 +9,7 @@ export default function MobileNav({ setNavVisible }) {
const { title = 'New Chat' } = conversation || {};
return (
<div className="fixed top-0 left-0 right-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
<div className="fixed left-0 right-0 top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
<button
type="button"
className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:hover:text-white"
@ -28,32 +28,13 @@ export default function MobileNav({ setNavVisible }) {
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="3"
y1="12"
x2="21"
y2="12"
/>
<line
x1="3"
y1="6"
x2="21"
y2="6"
/>
<line
x1="3"
y1="18"
x2="21"
y2="18"
/>
<line x1="3" y1="12" x2="21" y2="12" />
<line x1="3" y1="6" x2="21" y2="6" />
<line x1="3" y1="18" x2="21" y2="18" />
</svg>
</button>
<h1 className="flex-1 text-center text-base font-normal">{title || 'New Chat'}</h1>
<button
type="button"
className="px-3"
onClick={() => newConversation()}
>
<button type="button" className="px-3" onClick={() => newConversation()}>
<svg
stroke="currentColor"
fill="none"
@ -66,18 +47,8 @@ export default function MobileNav({ setNavVisible }) {
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="12"
y1="5"
x2="12"
y2="19"
/>
<line
x1="5"
y1="12"
x2="19"
y2="12"
/>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</button>
</div>

19
client/src/components/Nav/NavLinks.jsx
View file

@ -12,10 +12,7 @@ import DotsIcon from '../svg/DotsIcon';
export default function NavLinks({ clearSearch, isSearchEnabled }) {
const { user, logout } = useAuthContext();
return (
<Menu
as="div"
className="group relative"
>
<Menu as="div" className="group relative">
{({ open }) => (
<>
<Menu.Button
@ -28,7 +25,9 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
<div className="relative flex">
<img
className="rounded-sm"
src={user?.avatar || `https://avatars.dicebear.com/api/initials/${user?.name}.svg`}
src={
user?.avatar || `https://avatars.dicebear.com/api/initials/${user?.name}.svg`
}
alt=""
/>
</div>
@ -54,17 +53,11 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
</Menu.Item>
<Menu.Item>{({}) => <ExportConversation />}</Menu.Item>
<div
className="my-1.5 h-px bg-white/20"
role="none"
></div>
<div className="my-1.5 h-px bg-white/20" role="none"></div>
<Menu.Item>{({}) => <DarkMode />}</Menu.Item>
<Menu.Item>{({}) => <ClearConvos />}</Menu.Item>
<div
className="my-1.5 h-px bg-white/20"
role="none"
></div>
<div className="my-1.5 h-px bg-white/20" role="none"></div>
<Menu.Item>
<Logout />
</Menu.Item>

16
client/src/components/Nav/NewChat.jsx
View file

@ -13,7 +13,7 @@ export default function NewChat() {
return (
<a
onClick={clickHandler}
className="mb-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
className="mb-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
>
<svg
stroke="currentColor"
@ -27,18 +27,8 @@ export default function NewChat() {
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="12"
y1="5"
x2="12"
y2="19"
/>
<line
x1="5"
y1="12"
x2="19"
y2="12"
/>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
New chat
</a>

5
client/src/components/Nav/SearchBar.jsx
View file

@ -3,10 +3,9 @@ import { useRecoilState } from 'recoil';
import store from '~/store';
export default function SearchBar({ clearSearch }) {
const [searchQuery, setSearchQuery] = useRecoilState(store.searchQuery);
const handleKeyUp = e => {
const handleKeyUp = (e) => {
const { value } = e.target;
if (e.keyCode === 8 && value === '') {
setSearchQuery('');
@ -15,7 +14,7 @@ export default function SearchBar({ clearSearch }) {
};
return (
<div className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10">
<div className="flex cursor-pointer items-center gap-3 rounded-md px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10">
{<Search className="h-4 w-4" />}
<input
type="text"

44
client/src/components/Nav/index.jsx
View file

@ -42,10 +42,8 @@ export default function Nav({ navVisible, setNavVisible }) {
const debouncedSearchTerm = useDebounce(searchQuery, 750);
const searchQueryFn = useSearchQuery(debouncedSearchTerm, pageNumber, {
enabled: !!debouncedSearchTerm &&
debouncedSearchTerm.length > 0 &&
isSearchEnabled &&
isSearching,
enabled:
!!debouncedSearchTerm && debouncedSearchTerm.length > 0 && isSearchEnabled && isSearching
});
const onSearchSuccess = (data, expectedPage) => {
@ -64,11 +62,10 @@ export default function Nav({ navVisible, setNavVisible }) {
//we use isInitialLoading here instead of isLoading because query is disabled by default
if (searchQueryFn.isInitialLoading) {
setIsFetching(true);
}
else if (searchQueryFn.data) {
} else if (searchQueryFn.data) {
onSearchSuccess(searchQueryFn.data);
}
}, [searchQueryFn.data, searchQueryFn.isInitialLoading])
}, [searchQueryFn.data, searchQueryFn.isInitialLoading]);
const clearSearch = () => {
setPageNumber(1);
@ -98,7 +95,9 @@ export default function Nav({ navVisible, setNavVisible }) {
setPageNumber(pages);
} else {
if (!isSearching) {
conversations = conversations.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
conversations = conversations.sort(
(a, b) => new Date(b.createdAt) - new Date(a.createdAt)
);
}
setConversations(conversations);
setPages(pages);
@ -119,7 +118,6 @@ export default function Nav({ navVisible, setNavVisible }) {
}
};
const toggleNavVisible = () => {
setNavVisible(prev => !prev);
};
@ -142,8 +140,8 @@ export default function Nav({ navVisible, setNavVisible }) {
}
>
<div className="flex h-full min-h-0 flex-col ">
<div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20 relative">
<nav className="flex h-full flex-1 flex-col space-y-1 p-2 relative">
<div className="scrollbar-trigger relative flex h-full w-full flex-1 items-start border-white/20">
<nav className="relative flex h-full flex-1 flex-col space-y-1 p-2">
<NewChat />
<div
className={`flex-1 flex-col overflow-y-auto ${
@ -171,10 +169,7 @@ export default function Nav({ navVisible, setNavVisible }) {
/>
</div>
</div>
<NavLinks
clearSearch={clearSearch}
isSearchEnabled={isSearchEnabled}
/>
<NavLinks clearSearch={clearSearch} isSearchEnabled={isSearchEnabled} />
</nav>
</div>
</div>
@ -196,25 +191,12 @@ export default function Nav({ navVisible, setNavVisible }) {
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="3"
y1="6"
x2="15"
y2="18"
/>
<line
x1="3"
y1="18"
x2="15"
y2="6"
/>
<line x1="3" y1="6" x2="15" y2="18" />
<line x1="3" y1="18" x2="15" y2="6" />
</svg>
</button>
</div>
<div
className={'nav-mask' + (navVisible ? ' active' : '')}
onClick={toggleNavVisible}
></div>
<div className={'nav-mask' + (navVisible ? ' active' : '')} onClick={toggleNavVisible}></div>
</>
);
}

7
client/src/components/svg/BingChatIcon.jsx
View file

@ -2,12 +2,7 @@ import React from 'react';
export default function BingChatIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="41"
height="41"
fill="none"
>
<svg xmlns="http://www.w3.org/2000/svg" width="41" height="41" fill="none">
<path
fill="#174AE4"
d="M8 0a8 8 0 1 1-3.613 15.14l-.121-.065-3.645.91a.5.5 0 0 1-.62-.441v-.082l.014-.083.91-3.644-.063-.12a7.95 7.95 0 0 1-.83-2.887l-.025-.382L0 8a8 8 0 0 1 8-8Zm.5 9h-3l-.09.008a.5.5 0 0 0 0 .984L5.5 10h3l.09-.008a.5.5 0 0 0 0-.984L8.5 9Zm2-3h-5l-.09.008a.5.5 0 0 0 0 .984L5.5 7h5l.09-.008a.5.5 0 0 0 0-.984L10.5 6Z"

207
client/src/components/svg/BingIcon.jsx
View file

@ -43,38 +43,14 @@ export default function BingIcon({ size=25 }) {
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#37BDFF" />
<stop
offset="0.1832"
stopColor="#33BFFD"
/>
<stop
offset="0.3576"
stopColor="#28C5F5"
/>
<stop
offset="0.528"
stopColor="#15D0E9"
/>
<stop
offset="0.5468"
stopColor="#12D1E7"
/>
<stop
offset="0.5903"
stopColor="#1CD2E5"
/>
<stop
offset="0.7679"
stopColor="#42D8DC"
/>
<stop
offset="0.9107"
stopColor="#59DBD6"
/>
<stop
offset="1"
stopColor="#62DCD4"
/>
<stop offset="0.1832" stopColor="#33BFFD" />
<stop offset="0.3576" stopColor="#28C5F5" />
<stop offset="0.528" stopColor="#15D0E9" />
<stop offset="0.5468" stopColor="#12D1E7" />
<stop offset="0.5903" stopColor="#1CD2E5" />
<stop offset="0.7679" stopColor="#42D8DC" />
<stop offset="0.9107" stopColor="#59DBD6" />
<stop offset="1" stopColor="#62DCD4" />
</linearGradient>
<linearGradient
id="paint1_linear_36_2239"
@ -85,38 +61,14 @@ export default function BingIcon({ size=25 }) {
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#39D2FF" />
<stop
offset="0.1501"
stopColor="#38CEFE"
/>
<stop
offset="0.2931"
stopColor="#35C3FA"
/>
<stop
offset="0.4327"
stopColor="#2FB0F3"
/>
<stop
offset="0.5468"
stopColor="#299AEB"
/>
<stop
offset="0.5827"
stopColor="#2692EC"
/>
<stop
offset="0.7635"
stopColor="#1A6CF1"
/>
<stop
offset="0.909"
stopColor="#1355F4"
/>
<stop
offset="1"
stopColor="#104CF5"
/>
<stop offset="0.1501" stopColor="#38CEFE" />
<stop offset="0.2931" stopColor="#35C3FA" />
<stop offset="0.4327" stopColor="#2FB0F3" />
<stop offset="0.5468" stopColor="#299AEB" />
<stop offset="0.5827" stopColor="#2692EC" />
<stop offset="0.7635" stopColor="#1A6CF1" />
<stop offset="0.909" stopColor="#1355F4" />
<stop offset="1" stopColor="#104CF5" />
</linearGradient>
<linearGradient
id="paint2_linear_36_2239"
@ -127,22 +79,10 @@ export default function BingIcon({ size=25 }) {
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#1B48EF" />
<stop
offset="0.1221"
stopColor="#1C51F0"
/>
<stop
offset="0.3212"
stopColor="#1E69F5"
/>
<stop
offset="0.5676"
stopColor="#2190FB"
/>
<stop
offset="1"
stopColor="#26B8F4"
/>
<stop offset="0.1221" stopColor="#1C51F0" />
<stop offset="0.3212" stopColor="#1E69F5" />
<stop offset="0.5676" stopColor="#2190FB" />
<stop offset="1" stopColor="#26B8F4" />
</linearGradient>
<linearGradient
id="paint3_linear_36_2239"
@ -153,46 +93,16 @@ export default function BingIcon({ size=25 }) {
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop
offset="0.3726"
stopColor="#FDFDFD"
/>
<stop
offset="0.5069"
stopColor="#F6F6F6"
/>
<stop
offset="0.6026"
stopColor="#EBEBEB"
/>
<stop
offset="0.68"
stopColor="#DADADA"
/>
<stop
offset="0.7463"
stopColor="#C4C4C4"
/>
<stop
offset="0.805"
stopColor="#A8A8A8"
/>
<stop
offset="0.8581"
stopColor="#888888"
/>
<stop
offset="0.9069"
stopColor="#626262"
/>
<stop
offset="0.9523"
stopColor="#373737"
/>
<stop
offset="0.9926"
stopColor="#090909"
/>
<stop offset="0.3726" stopColor="#FDFDFD" />
<stop offset="0.5069" stopColor="#F6F6F6" />
<stop offset="0.6026" stopColor="#EBEBEB" />
<stop offset="0.68" stopColor="#DADADA" />
<stop offset="0.7463" stopColor="#C4C4C4" />
<stop offset="0.805" stopColor="#A8A8A8" />
<stop offset="0.8581" stopColor="#888888" />
<stop offset="0.9069" stopColor="#626262" />
<stop offset="0.9523" stopColor="#373737" />
<stop offset="0.9926" stopColor="#090909" />
<stop offset="1" />
</linearGradient>
<linearGradient
@ -204,55 +114,20 @@ export default function BingIcon({ size=25 }) {
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop
offset="0.3726"
stopColor="#FDFDFD"
/>
<stop
offset="0.5069"
stopColor="#F6F6F6"
/>
<stop
offset="0.6026"
stopColor="#EBEBEB"
/>
<stop
offset="0.68"
stopColor="#DADADA"
/>
<stop
offset="0.7463"
stopColor="#C4C4C4"
/>
<stop
offset="0.805"
stopColor="#A8A8A8"
/>
<stop
offset="0.8581"
stopColor="#888888"
/>
<stop
offset="0.9069"
stopColor="#626262"
/>
<stop
offset="0.9523"
stopColor="#373737"
/>
<stop
offset="0.9926"
stopColor="#090909"
/>
<stop offset="0.3726" stopColor="#FDFDFD" />
<stop offset="0.5069" stopColor="#F6F6F6" />
<stop offset="0.6026" stopColor="#EBEBEB" />
<stop offset="0.68" stopColor="#DADADA" />
<stop offset="0.7463" stopColor="#C4C4C4" />
<stop offset="0.805" stopColor="#A8A8A8" />
<stop offset="0.8581" stopColor="#888888" />
<stop offset="0.9069" stopColor="#626262" />
<stop offset="0.9523" stopColor="#373737" />
<stop offset="0.9926" stopColor="#090909" />
<stop offset="1" />
</linearGradient>
<clipPath id="clip0_36_2239">
<rect
width="37"
height="56"
fill="white"
transform="translate(10)"
></rect>
<rect width="37" height="56" fill="white" transform="translate(10)"></rect>
</clipPath>
</defs>
</svg>

14
client/src/components/svg/CautionIcon.jsx
View file

@ -15,18 +15,8 @@ export default function CautionIcon() {
xmlns="http://www.w3.org/2000/svg"
>
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
<line
x1="12"
y1="9"
x2="12"
y2="13"
/>
<line
x1="12"
y1="17"
x2="12.01"
y2="17"
/>
<line x1="12" y1="9" x2="12" y2="13" />
<line x1="12" y1="17" x2="12.01" y2="17" />
</svg>
);
}

9
client/src/components/svg/Clipboard.jsx
View file

@ -15,14 +15,7 @@ export default function Clipboard() {
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
<rect
x="8"
y="2"
width="8"
height="4"
rx="1"
ry="1"
/>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
</svg>
);
}

14
client/src/components/svg/CrossIcon.jsx
View file

@ -14,18 +14,8 @@ export default function CrossIcon() {
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="18"
y1="6"
x2="6"
y2="18"
/>
<line
x1="6"
y1="6"
x2="18"
y2="18"
/>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
);
}

18
client/src/components/svg/DotsIcon.jsx
View file

@ -14,21 +14,9 @@ export default function DotsIcon() {
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="1"
/>
<circle
cx="19"
cy="12"
r="1"
/>
<circle
cx="5"
cy="12"
r="1"
/>
<circle cx="12" cy="12" r="1" />
<circle cx="19" cy="12" r="1" />
<circle cx="5" cy="12" r="1" />
</svg>
);
}

62
client/src/components/svg/LightModeIcon.jsx
View file

@ -14,59 +14,15 @@ export default function LightModeIcon() {
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="5"
/>
<line
x1="12"
y1="1"
x2="12"
y2="3"
/>
<line
x1="12"
y1="21"
x2="12"
y2="23"
/>
<line
x1="4.22"
y1="4.22"
x2="5.64"
y2="5.64"
/>
<line
x1="18.36"
y1="18.36"
x2="19.78"
y2="19.78"
/>
<line
x1="1"
y1="12"
x2="3"
y2="12"
/>
<line
x1="21"
y1="12"
x2="23"
y2="12"
/>
<line
x1="4.22"
y1="19.78"
x2="5.64"
y2="18.36"
/>
<line
x1="18.36"
y1="5.64"
x2="19.78"
y2="4.22"
/>
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
);
}

7
client/src/components/svg/LogOutIcon.jsx
View file

@ -16,12 +16,7 @@ export default function LogOutIcon() {
>
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
<polyline points="16 17 21 12 16 7" />
<line
x1="21"
y1="12"
x2="9"
y2="12"
/>
<line x1="21" y1="12" x2="9" y2="12" />
</svg>
);
}

56
client/src/components/svg/Spinner.jsx
View file

@ -14,54 +14,14 @@ export default function Spinner() {
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="12"
y1="2"
x2="12"
y2="6"
/>
<line
x1="12"
y1="18"
x2="12"
y2="22"
/>
<line
x1="4.93"
y1="4.93"
x2="7.76"
y2="7.76"
/>
<line
x1="16.24"
y1="16.24"
x2="19.07"
y2="19.07"
/>
<line
x1="2"
y1="12"
x2="6"
y2="12"
/>
<line
x1="18"
y1="12"
x2="22"
y2="12"
/>
<line
x1="4.93"
y1="19.07"
x2="7.76"
y2="16.24"
/>
<line
x1="16.24"
y1="7.76"
x2="19.07"
y2="4.93"
/>
<line x1="12" y1="2" x2="12" y2="6" />
<line x1="12" y1="18" x2="12" y2="22" />
<line x1="4.93" y1="4.93" x2="7.76" y2="7.76" />
<line x1="16.24" y1="16.24" x2="19.07" y2="19.07" />
<line x1="2" y1="12" x2="6" y2="12" />
<line x1="18" y1="12" x2="22" y2="12" />
<line x1="4.93" y1="19.07" x2="7.76" y2="16.24" />
<line x1="16.24" y1="7.76" x2="19.07" y2="4.93" />
</svg>
);
}

9
client/src/components/svg/StopGeneratingIcon.jsx
View file

@ -14,14 +14,7 @@ export default function StopGeneratingIcon() {
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="3"
y="3"
width="18"
height="18"
rx="2"
ry="2"
></rect>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
</svg>
);
}

62
client/src/components/svg/SunIcon.jsx
View file

@ -14,59 +14,15 @@ export default function SunIcon() {
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="5"
/>
<line
x1="12"
y1="1"
x2="12"
y2="3"
/>
<line
x1="12"
y1="21"
x2="12"
y2="23"
/>
<line
x1="4.22"
y1="4.22"
x2="5.64"
y2="5.64"
/>
<line
x1="18.36"
y1="18.36"
x2="19.78"
y2="19.78"
/>
<line
x1="1"
y1="12"
x2="3"
y2="12"
/>
<line
x1="21"
y1="12"
x2="23"
y2="12"
/>
<line
x1="4.22"
y1="19.78"
x2="5.64"
y2="18.36"
/>
<line
x1="18.36"
y1="5.64"
x2="19.78"
y2="4.22"
/>
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
);
}

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