mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-09-22 06:00:56 +02:00
Build/Refactor: lint pre-commit hook and reformat repo to spec (#314)
* 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
GitHub
parent
8d75b25104
commit
7fdc862042
157 changed files with 4836 additions and 2403 deletions
113
.eslintrc.js
Normal file
113
.eslintrc.js
Normal 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
5
.husky/pre-commit
Executable file
|
|
@ -0,0 +1,5 @@
|
|||
#!/usr/bin/env sh
|
||||
. "$(dirname -- "$0")/_/husky.sh"
|
||||
|
||||
npx lint-staged
|
||||
|
||||
19
.prettierrc.js
Normal file
19
.prettierrc.js
Normal 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,
|
||||
};
|
||||
|
|
@ -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'
|
||||
}
|
||||
};
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
||||
|
|
@ -77,16 +77,16 @@ const askClient = async ({
|
|||
const res = await client.sendMessage(text, { ...options, userId });
|
||||
// return res;
|
||||
// create a new response object that includes the token counts
|
||||
const newRes = {
|
||||
const newRes = {
|
||||
...res,
|
||||
usage: {
|
||||
prompt_tokens: prompt_tokens.length,
|
||||
completion_tokens: text_tokens.length,
|
||||
total_tokens: prompt_tokens.length + text_tokens.length
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
return newRes;
|
||||
return newRes;
|
||||
};
|
||||
|
||||
module.exports = { askClient };
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.');
|
||||
|
|
|
|||
|
|
@ -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' };
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -3,28 +3,26 @@ 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)
|
||||
if(user) {
|
||||
const user = await loginUser(req.user);
|
||||
if (user) {
|
||||
res.cookie('token', token, {
|
||||
expires: new Date(Date.now() + eval(process.env.SESSION_EXPIRY)),
|
||||
httpOnly: false,
|
||||
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 });
|
||||
}
|
||||
|
|
@ -106,14 +96,12 @@ const resetPasswordController = async (req, res) => {
|
|||
req.body.token,
|
||||
req.body.password
|
||||
);
|
||||
if(resetPasswordService instanceof Error) {
|
||||
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
|
||||
};
|
||||
|
|
@ -30,13 +30,13 @@ const projectPath = path.join(__dirname, '..', '..', 'client');
|
|||
app.use(passport.initialize());
|
||||
require('../strategies/jwtStrategy');
|
||||
require('../strategies/localStrategy');
|
||||
if(process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET) {
|
||||
if (process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET) {
|
||||
require('../strategies/googleStrategy');
|
||||
}
|
||||
if(process.env.FACEBOOK_CLIENT_ID && process.env.FACEBOOK_CLIENT_SECRET) {
|
||||
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}`);
|
||||
});
|
||||
})();
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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, {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const {
|
|||
loginController,
|
||||
logoutController,
|
||||
refreshController,
|
||||
registrationController,
|
||||
registrationController
|
||||
} = require('../controllers/auth.controller');
|
||||
const requireJwtAuth = require('../../middleware/requireJwtAuth');
|
||||
const requireLocalAuth = require('../../middleware/requireLocalAuth');
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -19,5 +19,5 @@ module.exports = {
|
|||
auth,
|
||||
oauth,
|
||||
tokenizer,
|
||||
endpoints,
|
||||
endpoints
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -65,4 +65,3 @@ function log({ title, parameters }) {
|
|||
DebugControl.log.parameters(parameters);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = {
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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}`;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,28 +3,27 @@ const Preset = require('../models/schema/presetSchema');
|
|||
|
||||
const migrateConversations = async (userId) => {
|
||||
try {
|
||||
return await Conversation.updateMany({ user: null }, { $set: { user: userId }}).exec();
|
||||
return await Conversation.updateMany({ user: null }, { $set: { user: userId } }).exec();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return { message: 'Error saving conversation' };
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const migratePresets = async (userId) => {
|
||||
try {
|
||||
return await Preset.updateMany({ user: null }, { $set: { user: userId }}).exec();
|
||||
return await Preset.updateMany({ user: null }, { $set: { user: userId } }).exec();
|
||||
} catch (error) {
|
||||
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;
|
||||
|
|
@ -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
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
}
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -100,8 +103,8 @@ function RequestPasswordReset() {
|
|||
<div className="mt-6">
|
||||
<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"
|
||||
disabled={!!errors.email}
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState, useRef, useEffect} from 'react';
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { useRecoilState, useSetRecoilState } from 'recoil';
|
||||
import { useUpdateConversationMutation } from '~/data-provider';
|
||||
import RenameButton from './RenameButton';
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default function DeleteButton({ conversationId, renaming, cancelHandler,
|
|||
const deleteConvoMutation = useDeleteConversationMutation(conversationId);
|
||||
|
||||
useEffect(() => {
|
||||
if(deleteConvoMutation.isSuccess) {
|
||||
if (deleteConvoMutation.isSuccess) {
|
||||
if (currentConversation?.conversationId == conversationId) newConversation();
|
||||
|
||||
refreshConversations();
|
||||
|
|
@ -22,18 +22,14 @@ export default function DeleteButton({ conversationId, renaming, cancelHandler,
|
|||
}
|
||||
}, [deleteConvoMutation.isSuccess]);
|
||||
|
||||
|
||||
const clickHandler = () => {
|
||||
deleteConvoMutation.mutate({conversationId, source: 'button' });
|
||||
deleteConvoMutation.mutate({ conversationId, source: 'button' });
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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={
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 }) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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 => ({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ function GoogleOptions() {
|
|||
setSaveAsDialogShow(true);
|
||||
};
|
||||
|
||||
const setOption = param => newValue => {
|
||||
const setOption = param => (newValue) => {
|
||||
let update = {};
|
||||
update[param] = newValue;
|
||||
setConversation(prevState => ({
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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=""
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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 => ({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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.');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 }) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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,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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function ScrollToBottom({ scrollHandler}) {
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,58 @@
|
|||
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;
|
||||
) : null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 ? (
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function BingIcon({ size=25 }) {
|
||||
export default function BingIcon({ size = 25 }) {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
|
|
@ -42,39 +42,15 @@ export default function BingIcon({ size=25 }) {
|
|||
y2="38.1597"
|
||||
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 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" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_36_2239"
|
||||
|
|
@ -84,39 +60,15 @@ export default function BingIcon({ size=25 }) {
|
|||
y2="45.3798"
|
||||
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 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" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_36_2239"
|
||||
|
|
@ -126,23 +78,11 @@ export default function BingIcon({ size=25 }) {
|
|||
y2="1.52914"
|
||||
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 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" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint3_linear_36_2239"
|
||||
|
|
@ -152,48 +92,18 @@ export default function BingIcon({ size=25 }) {
|
|||
y2="32.6475"
|
||||
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="1"/>
|
||||
<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="1" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint4_linear_36_2239"
|
||||
|
|
@ -203,56 +113,21 @@ export default function BingIcon({ size=25 }) {
|
|||
y2="47.9822"
|
||||
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="1"/>
|
||||
<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="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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function GPTIcon({ button = false, menu = false, size=25 }) {
|
||||
export default function GPTIcon({ button = false, menu = false, size = 25 }) {
|
||||
let unit = '41';
|
||||
let height = size;
|
||||
let width = size;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue