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

ci(backend-review.yml): add linter step to the backend review workflow (#625)

Browse source 
* ci(backend-review.yml): add linter step to the backend review workflow

* chore(backend-review.yml): remove prettier from lint-action configuration

* chore: apply new linting workflow

* chore(lint-staged.config.js): reorder lint-staged tasks for JavaScript and TypeScript files

* chore(eslint): update ignorePatterns in .eslintrc.js
chore(lint-action): remove prettier option in backend-review.yml
chore(package.json): add lint and lint:fix scripts

* chore(lint-staged.config.js): remove prettier --write command for js, jsx, ts, tsx files

* chore(titleConvo.js): remove unnecessary console.log statement
chore(titleConvo.js): add missing comma in options object

* chore: apply linting to all files

* chore(lint-staged.config.js): update lint-staged configuration to include prettier formatting
This commit is contained in:
Danny Avila 2023-07-14 09:36:49 -04:00 • committed by GitHub
parent 637bb6bc11
commit e5336039fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
231 changed files with 1688 additions and 1526 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/src/components/Auth/LoginForm.tsx
View file

@ -14,7 +14,7 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
const {
register,
handleSubmit,
formState: { errors }
formState: { errors },
} = useForm<TLoginUser>();
return (
@ -35,16 +35,16 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
required: localize(lang, 'com_auth_email_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_email_min_length')
message: localize(lang, 'com_auth_email_min_length'),
},
maxLength: {
value: 120,
message: localize(lang, 'com_auth_email_max_length')
message: localize(lang, 'com_auth_email_max_length'),
},
pattern: {
value: /\S+@\S+\.\S+/,
message: localize(lang, 'com_auth_email_pattern')
}
message: localize(lang, 'com_auth_email_pattern'),
},
})}
aria-invalid={!!errors.email}
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"
@ -75,12 +75,12 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
required: localize(lang, 'com_auth_password_required'),
minLength: {
value: 8,
message: localize(lang, 'com_auth_password_min_length')
message: localize(lang, 'com_auth_password_min_length'),
},
maxLength: {
value: 40,
message: localize(lang, 'com_auth_password_max_length')
}
message: localize(lang, 'com_auth_password_max_length'),
},
})}
aria-invalid={!!errors.password}
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"

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

@ -7,7 +7,7 @@ import { localize } from '~/localization/Translation';
import {
useRegisterUserMutation,
TRegisterUser,
useGetStartupConfig
useGetStartupConfig,
} from '@librechat/data-provider';
import { GoogleIcon, OpenIDIcon, GithubIcon, DiscordIcon } from '~/components'
@ -21,7 +21,7 @@ function Registration() {
register,
watch,
handleSubmit,
formState: { errors }
formState: { errors },
} = useForm<TRegisterUser>({ mode: 'onChange' });
const [error, setError] = useState<boolean>(false);
@ -42,7 +42,7 @@ function Registration() {
//@ts-ignore - error is of type unknown
setErrorMessage(error.response?.data?.message);
}
}
},
});
};
@ -81,12 +81,12 @@ function Registration() {
required: localize(lang, 'com_auth_name_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_name_min_length')
message: localize(lang, 'com_auth_name_min_length'),
},
maxLength: {
value: 80,
message: localize(lang, 'com_auth_name_max_length')
}
message: localize(lang, 'com_auth_name_max_length'),
},
})}
aria-invalid={!!errors.name}
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"
@ -117,12 +117,12 @@ function Registration() {
required: localize(lang, 'com_auth_username_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_username_min_length')
message: localize(lang, 'com_auth_username_min_length'),
},
maxLength: {
value: 20,
message: localize(lang, 'com_auth_username_max_length')
}
message: localize(lang, 'com_auth_username_max_length'),
},
})}
aria-invalid={!!errors.username}
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"
@ -155,16 +155,16 @@ function Registration() {
required: localize(lang, 'com_auth_email_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_email_min_length')
message: localize(lang, 'com_auth_email_min_length'),
},
maxLength: {
value: 120,
message: localize(lang, 'com_auth_email_max_length')
message: localize(lang, 'com_auth_email_max_length'),
},
pattern: {
value: /\S+@\S+\.\S+/,
message: localize(lang, 'com_auth_email_pattern')
}
message: localize(lang, 'com_auth_email_pattern'),
},
})}
aria-invalid={!!errors.email}
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"
@ -196,12 +196,12 @@ function Registration() {
required: localize(lang, 'com_auth_password_required'),
minLength: {
value: 8,
message: localize(lang, 'com_auth_password_min_length')
message: localize(lang, 'com_auth_password_min_length'),
},
maxLength: {
value: 128,
message: localize(lang, 'com_auth_password_max_length')
}
message: localize(lang, 'com_auth_password_max_length'),
},
})}
aria-invalid={!!errors.password}
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"
@ -235,7 +235,7 @@ function Registration() {
// return false;
// }}
{...register('confirm_password', {
validate: (value) => value === password || localize(lang, 'com_auth_password_not_match')
validate: (value) => value === password || localize(lang, 'com_auth_password_not_match'),
})}
aria-invalid={!!errors.confirm_password}
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"

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

@ -6,7 +6,7 @@ import { localize } from '~/localization/Translation';
import {
useRequestPasswordResetMutation,
TRequestPasswordReset,
TRequestPasswordResetResponse
TRequestPasswordResetResponse,
} from '@librechat/data-provider';
function RequestPasswordReset() {
@ -14,7 +14,7 @@ function RequestPasswordReset() {
const {
register,
handleSubmit,
formState: { errors }
formState: { errors },
} = useForm<TRequestPasswordReset>();
const requestPasswordReset = useRequestPasswordResetMutation();
const [success, setSuccess] = useState<boolean>(false);
@ -32,7 +32,7 @@ function RequestPasswordReset() {
setTimeout(() => {
setRequestError(false);
}, 5000);
}
},
});
};
@ -78,16 +78,16 @@ function RequestPasswordReset() {
required: localize(lang, 'com_auth_email_required'),
minLength: {
value: 3,
message: localize(lang, 'com_auth_email_min_length')
message: localize(lang, 'com_auth_email_min_length'),
},
maxLength: {
value: 120,
message: localize(lang, 'com_auth_email_max_length')
message: localize(lang, 'com_auth_email_max_length'),
},
pattern: {
value: /\S+@\S+\.\S+/,
message: localize(lang, 'com_auth_email_pattern')
}
message: localize(lang, 'com_auth_email_pattern'),
},
})}
aria-invalid={!!errors.email}
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"

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

@ -12,7 +12,7 @@ function ResetPassword() {
register,
handleSubmit,
watch,
formState: { errors }
formState: { errors },
} = useForm<TResetPassword>();
const resetPassword = useResetPasswordMutation();
const [resetError, setResetError] = useState<boolean>(false);
@ -24,7 +24,7 @@ function ResetPassword() {
resetPassword.mutate(data, {
onError: () => {
setResetError(true);
}
},
});
};
@ -97,12 +97,12 @@ function ResetPassword() {
required: localize(lang, 'com_auth_password_required'),
minLength: {
value: 8,
message: localize(lang, 'com_auth_password_min_length')
message: localize(lang, 'com_auth_password_min_length'),
},
maxLength: {
value: 128,
message: localize(lang, 'com_auth_password_max_length')
}
message: localize(lang, 'com_auth_password_max_length'),
},
})}
aria-invalid={!!errors.password}
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"
@ -135,7 +135,7 @@ function ResetPassword() {
return false;
}}
{...register('confirm_password', {
validate: (value) => value === password || localize(lang, 'com_auth_password_not_match')
validate: (value) => value === password || localize(lang, 'com_auth_password_not_match'),
})}
aria-invalid={!!errors.confirm_password}
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"

22
client/src/components/Auth/__tests__/Login.spec.tsx
View file

@ -9,14 +9,14 @@ const setup = ({
useGetUserQueryReturnValue = {
isLoading: false,
isError: false,
data: {}
data: {},
},
useLoginUserReturnValue = {
isLoading: false,
isError: false,
mutate: jest.fn(),
data: {},
isSuccess: false
isSuccess: false,
},
useGetStartupCongfigReturnValue = {
isLoading: false,
@ -30,9 +30,9 @@ const setup = ({
discordLoginEnabled: true,
registrationEnabled: true,
socialLoginEnabled: true,
serverDomain: 'mock-server'
}
}
serverDomain: 'mock-server',
},
},
} = {}) => {
const mockUseLoginUser = jest
.spyOn(mockDataProvider, 'useLoginUserMutation')
@ -51,7 +51,7 @@ const setup = ({
...renderResult,
mockUseLoginUser,
mockUseGetUserQuery,
mockUseGetStartupConfig
mockUseGetStartupConfig,
};
};
@ -65,7 +65,7 @@ test('renders login form', () => {
expect(getByRole('link', { name: /Login with Google/i })).toBeInTheDocument();
expect(getByRole('link', { name: /Login with Google/i })).toHaveAttribute(
'href',
'mock-server/oauth/google'
'mock-server/oauth/google',
);
});
@ -76,8 +76,8 @@ test('calls loginUser.mutate on login', async () => {
useLoginUserReturnValue: {
isLoading: false,
mutate: mutate,
isError: false
}
isError: false,
},
});
const emailInput = getByLabelText(/email/i);
@ -98,8 +98,8 @@ test('Navigates to / on successful login', async () => {
isLoading: false,
mutate: jest.fn(),
isError: false,
isSuccess: true
}
isSuccess: true,
},
});
const emailInput = getByLabelText(/email/i);

24
client/src/components/Auth/__tests__/Registration.spec.tsx
View file

@ -9,14 +9,14 @@ const setup = ({
useGetUserQueryReturnValue = {
isLoading: false,
isError: false,
data: {}
data: {},
},
useRegisterUserMutationReturnValue = {
isLoading: false,
isError: false,
mutate: jest.fn(),
data: {},
isSuccess: false
isSuccess: false,
},
useGetStartupCongfigReturnValue = {
isLoading: false,
@ -30,9 +30,9 @@ const setup = ({
discordLoginEnabled: true,
registrationEnabled: true,
socialLoginEnabled: true,
serverDomain: 'mock-server'
}
}
serverDomain: 'mock-server',
},
},
} = {}) => {
const mockUseRegisterUserMutation = jest
.spyOn(mockDataProvider, 'useRegisterUserMutation')
@ -53,7 +53,7 @@ const setup = ({
...renderResult,
mockUseRegisterUserMutation,
mockUseGetUserQuery,
mockUseGetStartupConfig
mockUseGetStartupConfig,
};
};
@ -72,7 +72,7 @@ test('renders registration form', () => {
expect(getByRole('link', { name: /Login with Google/i })).toBeInTheDocument();
expect(getByRole('link', { name: /Login with Google/i })).toHaveAttribute(
'href',
'mock-server/oauth/google'
'mock-server/oauth/google',
);
});
@ -84,8 +84,8 @@ test('calls registerUser.mutate on registration', async () => {
isLoading: false,
mutate: mutate,
isError: false,
isSuccess: true
}
isSuccess: true,
},
});
await userEvent.type(getByRole('textbox', { name: /Full name/i }), 'John Doe');
@ -126,8 +126,8 @@ test('shows error message when registration fails', async () => {
mutate: mutate,
error: new Error('Registration failed'),
data: {},
isSuccess: false
}
isSuccess: false,
},
});
await userEvent.type(getByRole('textbox', { name: /Full name/i }), 'John Doe');
@ -140,7 +140,7 @@ test('shows error message when registration fails', async () => {
waitFor(() => {
expect(screen.getByRole('alert')).toBeInTheDocument();
expect(screen.getByRole('alert')).toHaveTextContent(
/There was an error attempting to register your account. Please try again. Registration failed/i
/There was an error attempting to register your account. Please try again. Registration failed/i,
);
});
});

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

@ -72,7 +72,7 @@ export default function Conversation({ conversation, retainView }) {
if (conversationId == currentConversation?.conversationId) {
setCurrentConversation((prevState) => ({
...prevState,
title: titleInput
title: titleInput,
}));
}
}
@ -87,7 +87,7 @@ export default function Conversation({ conversation, retainView }) {
const aProps = {
className:
'animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800'
'animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800',
};
if (currentConversation?.conversationId !== conversationId) {

4
client/src/components/Endpoints/Anthropic/OptionHover.jsx
View file

@ -4,9 +4,9 @@ import { HoverCardPortal, HoverCardContent } from '~/components/ui/HoverCard.tsx
const types = {
temp: 'Ranges from 0 to 1. Use temp closer to 0 for analytical / multiple choice, and closer to 1 for creative and generative tasks. 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).",
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.'
' 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 }) {

26
client/src/components/Endpoints/Anthropic/Settings.jsx
View file

@ -27,7 +27,7 @@ function Settings(props) {
topP,
topK,
maxOutputTokens,
setOption
setOption,
} = props;
const endpointsConfig = useRecoilValue(store.endpointsConfig);
@ -43,7 +43,7 @@ function Settings(props) {
const models = endpointsConfig?.['anthropic']?.['availableModels'] || [];
return (
<div className={`h-[490px] overflow-y-auto md:h-[350px]`}>
<div className={'h-[490px] overflow-y-auto md:h-[350px]'}>
<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">
@ -54,7 +54,7 @@ function Settings(props) {
disabled={readonly}
className={cn(
defaultTextProps,
'z-50 flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'z-50 flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
containerClassName="flex w-full resize-none"
/>
@ -71,7 +71,7 @@ function Settings(props) {
placeholder="Set a custom name for Claude"
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
/>
</div>
@ -87,7 +87,7 @@ function Settings(props) {
placeholder="Set custom instructions or context. Ignored if empty."
className={cn(
defaultTextProps,
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 '
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 ',
)}
/>
</div>
@ -112,8 +112,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>
@ -149,8 +149,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>
@ -187,8 +187,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>
@ -224,8 +224,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>

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

@ -33,8 +33,8 @@ function Settings(props) {
{
onSuccess: (data) => {
setTokenCount(data.count);
}
}
},
},
);
};
@ -59,7 +59,7 @@ function Settings(props) {
disabled={readonly}
className={cn(
defaultTextProps,
'flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
containerClassName="flex w-full resize-none"
/>
@ -76,7 +76,7 @@ function Settings(props) {
placeholder="Bing can use up to 7k tokens for 'context', which it can reference for the conversation. The specific limit is not known but may run into errors exceeding 7k tokens"
className={cn(
defaultTextProps,
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2'
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2',
)}
/>
<small className="mb-5 text-black dark:text-white">{`Token count: ${tokenCount}`}</small>
@ -129,7 +129,7 @@ function Settings(props) {
placeholder="WARNING: Misuse of this feature can get you BANNED from using Bing! Click on 'System Message' for full instructions and the default message if omitted, which is the 'Sydney' preset that is considered safe."
className={cn(
defaultTextProps,
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 placeholder:text-red-400'
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 placeholder:text-red-400',
)}
/>
</div>

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

@ -16,7 +16,7 @@ import {
Dialog,
DialogClose,
DialogButton,
DialogTemplate
DialogTemplate,
} from '~/components/';
import { cn } from '~/utils/';
import cleanupPreset from '~/utils/cleanupPreset';
@ -42,10 +42,10 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
cleanupPreset({
preset: {
...prevState,
...update
...update,
},
endpointsConfig
})
endpointsConfig,
}),
);
};
@ -58,10 +58,10 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
cleanupPreset({
preset: {
...prevState,
agentOptions
agentOptions,
},
endpointsConfig
})
endpointsConfig,
}),
);
};
@ -76,10 +76,10 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
cleanupPreset({
preset: {
...prevState,
...update
...update,
},
endpointsConfig
})
endpointsConfig,
}),
);
};
@ -92,10 +92,10 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
cleanupPreset({
preset: {
...prevState,
...update
...update,
},
endpointsConfig
})
endpointsConfig,
}),
);
};
@ -108,10 +108,10 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
cleanupPreset({
preset: {
...prevState,
...update
...update,
},
endpointsConfig
})
endpointsConfig,
}),
);
return;
}
@ -121,10 +121,10 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
cleanupPreset({
preset: {
...prevState,
...update
...update,
},
endpointsConfig
})
endpointsConfig,
}),
);
};
@ -136,7 +136,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
method: 'post',
url: '/api/presets',
data: cleanupPreset({ preset, endpointsConfig }),
withCredentials: true
withCredentials: true,
}).then((res) => {
setPresets(res?.data);
});
@ -147,7 +147,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
exportFromJSON({
data: cleanupPreset({ preset, endpointsConfig }),
fileName,
exportType: exportFromJSON.types.json
exportType: exportFromJSON.types.json,
});
};
@ -183,7 +183,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
placeholder="Set a custom name, in case you can find this preset"
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
/>
</div>
@ -198,7 +198,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
options={availableEndpoints}
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex h-10 max-h-10 w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
containerClassName="flex w-full resize-none"
/>

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

@ -21,7 +21,7 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
update[param] = newValue;
setPreset((prevState) => ({
...prevState,
...update
...update,
}));
};
@ -33,7 +33,7 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
exportFromJSON({
data: cleanupPreset({ preset, endpointsConfig }),
fileName: `${preset?.title}.json`,
exportType: exportFromJSON.types.json
exportType: exportFromJSON.types.json,
});
};

4
client/src/components/Endpoints/EndpointOptionsPopover.jsx
View file

@ -10,7 +10,7 @@ function EndpointOptionsPopover({
visible,
saveAsPreset,
switchToSimpleMode,
additionalButton = null
additionalButton = null,
}) {
const cardStyle =
'shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
@ -42,7 +42,7 @@ function EndpointOptionsPopover({
{additionalButton && (
<Button
type="button"
className={cn(additionalButton.buttonClass, "ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0")}
className={cn(additionalButton.buttonClass, 'ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0')}
onClick={additionalButton.handler}
>
{additionalButton.icon}

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

@ -33,7 +33,7 @@ function Examples({ readonly, examples, setExample, addExample, removeExample, e
placeholder="Set example input. Example is ignored if empty."
className={cn(
defaultTextProps,
'flex max-h-[300px] min-h-[75px] w-full resize-none px-3 py-2 '
'flex max-h-[300px] min-h-[75px] w-full resize-none px-3 py-2 ',
)}
/>
</div>
@ -54,10 +54,10 @@ function Examples({ readonly, examples, setExample, addExample, removeExample, e
disabled={readonly}
value={example?.output?.content || ''}
onChange={(e) => setExample(idx, 'output', e.target.value || null)}
placeholder={`Set example output. Example is ignored if empty.`}
placeholder={'Set example output. Example is ignored if empty.'}
className={cn(
defaultTextProps,
'flex max-h-[300px] min-h-[75px] w-full resize-none px-3 py-2 '
'flex max-h-[300px] min-h-[75px] w-full resize-none px-3 py-2 ',
)}
/>
</div>

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

@ -4,9 +4,9 @@ import { HoverCardPortal, HoverCardContent } from '~/components/ui/HoverCard.tsx
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).",
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.'
' 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 }) {

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

@ -27,7 +27,7 @@ function Settings(props) {
topP,
topK,
maxOutputTokens,
setOption
setOption,
} = props;
const endpointsConfig = useRecoilValue(store.endpointsConfig);
@ -44,7 +44,7 @@ function Settings(props) {
const codeChat = model.startsWith('codechat-');
return (
<div className={`md:h-[350px] h-[490px] overflow-y-auto`}>
<div className={'md:h-[350px] h-[490px] 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">
@ -55,7 +55,7 @@ function Settings(props) {
disabled={readonly}
className={cn(
defaultTextProps,
'flex w-full z-50 resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex w-full z-50 resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
containerClassName="flex w-full resize-none"
/>
@ -74,7 +74,7 @@ function Settings(props) {
placeholder="Set a custom name for PaLM2"
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
/>
</div>
@ -90,7 +90,7 @@ function Settings(props) {
placeholder="Set custom instructions or context. Ignored if empty."
className={cn(
defaultTextProps,
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 '
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 ',
)}
/>
</div>
@ -117,8 +117,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>
@ -156,8 +156,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>
@ -194,8 +194,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>
@ -234,8 +234,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>

6
client/src/components/Endpoints/OpenAI/OptionHover.jsx
View file

@ -3,10 +3,10 @@ import { HoverCardPortal, HoverCardContent } from '~/components/ui/HoverCard.tsx
const types = {
temp: 'Higher values = more random, while lower values = more focused and deterministic. We recommend altering this or Top P but not both.',
max: "The max tokens to generate. The total length of input tokens and generated tokens is limited by the model's context length.",
max: 'The max tokens to generate. The total length of input tokens and generated tokens is limited by the model\'s context length.',
topp: 'An alternative to sampling with temperature, called nucleus sampling, where the model considers the results of the tokens with top_p probability mass. So 0.1 means only the tokens comprising the top 10% probability mass are considered. We recommend altering this or temperature but not both.',
freq: "Number between -2.0 and 2.0. Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model's likelihood to repeat the same line verbatim.",
pres: "Number between -2.0 and 2.0. Positive values penalize new tokens based on whether they appear in the text so far, increasing the model's likelihood to talk about new topics."
freq: 'Number between -2.0 and 2.0. Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model\'s likelihood to repeat the same line verbatim.',
pres: 'Number between -2.0 and 2.0. Positive values penalize new tokens based on whether they appear in the text so far, increasing the model\'s likelihood to talk about new topics.',
};
function OptionHover({ type, side }) {

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

@ -26,7 +26,7 @@ function Settings(props) {
topP,
freqP,
presP,
setOption
setOption,
} = props;
const endpoint = props.endpoint || 'openAI';
const isOpenAI = endpoint === 'openAI' || endpoint === 'azureOpenAI';
@ -55,7 +55,7 @@ function Settings(props) {
disabled={readonly}
className={cn(
defaultTextProps,
'flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
containerClassName="flex w-full resize-none"
/>
@ -74,7 +74,7 @@ function Settings(props) {
placeholder="Set a custom name for ChatGPT"
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
/>
</div>
@ -90,7 +90,7 @@ function Settings(props) {
placeholder="Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'"
className={cn(
defaultTextProps,
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 '
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 ',
)}
/>
</div>
@ -120,8 +120,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>
@ -157,8 +157,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>
@ -195,8 +195,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>
@ -233,8 +233,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>

9
client/src/components/Endpoints/Plugins/AgentSettings.jsx
View file

@ -7,7 +7,7 @@ import {
Slider,
InputNumber,
HoverCard,
HoverCardTrigger
HoverCardTrigger,
} from '~/components';
import OptionHover from './OptionHover';
const defaultTextProps =
@ -41,7 +41,6 @@ function Settings(props) {
const onCheckedChangeSkip = (checked) => {
setSkipCompletion(checked);
};
const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
@ -58,7 +57,7 @@ function Settings(props) {
disabled={readonly}
className={cn(
defaultTextProps,
'flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
containerClassName="flex w-full resize-none"
/>
@ -110,8 +109,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>

6
client/src/components/Endpoints/Plugins/OptionHover.jsx
View file

@ -4,10 +4,10 @@ const types = {
temp: 'Higher values = more random, while lower values = more focused and deterministic. We recommend altering this or Top P but not both.',
func: 'Enable use of Plugins as OpenAI Functions',
skip: 'Enable skipping the completion step, which reviews the final answer and generated steps',
max: "The max tokens to generate. The total length of input tokens and generated tokens is limited by the model's context length.",
max: 'The max tokens to generate. The total length of input tokens and generated tokens is limited by the model\'s context length.',
topp: 'An alternative to sampling with temperature, called nucleus sampling, where the model considers the results of the tokens with top_p probability mass. So 0.1 means only the tokens comprising the top 10% probability mass are considered. We recommend altering this or temperature but not both.',
freq: "Number between -2.0 and 2.0. Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model's likelihood to repeat the same line verbatim.",
pres: "Number between -2.0 and 2.0. Positive values penalize new tokens based on whether they appear in the text so far, increasing the model's likelihood to talk about new topics."
freq: 'Number between -2.0 and 2.0. Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model\'s likelihood to repeat the same line verbatim.',
pres: 'Number between -2.0 and 2.0. Positive values penalize new tokens based on whether they appear in the text so far, increasing the model\'s likelihood to talk about new topics.',
};
function OptionHover({ type, side }) {

28
client/src/components/Endpoints/Plugins/Settings.jsx
View file

@ -8,7 +8,7 @@ import {
Slider,
InputNumber,
HoverCard,
HoverCardTrigger
HoverCardTrigger,
} from '~/components';
import OptionHover from './OptionHover';
const defaultTextProps =
@ -30,7 +30,7 @@ function Settings(props) {
freqP,
presP,
setOption,
tools
tools,
} = props;
const endpoint = 'gptPlugins';
@ -59,7 +59,7 @@ function Settings(props) {
disabled={readonly}
className={cn(
defaultTextProps,
'flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
containerClassName="flex w-full resize-none"
/>
@ -79,7 +79,7 @@ function Settings(props) {
}
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
/>
</div>
@ -95,11 +95,11 @@ function Settings(props) {
placeholder={
toolsSelected
? 'Disabled with Tools Selected'
: "Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'"
: 'Set custom instructions. Defaults to: \'You are ChatGPT, a large language model trained by OpenAI.\''
}
className={cn(
defaultTextProps,
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 '
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 ',
)}
/>
</div>
@ -125,8 +125,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>
@ -162,8 +162,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>
@ -200,8 +200,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>
@ -238,8 +238,8 @@ function Settings(props) {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
),
)}
/>
</div>

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

@ -18,9 +18,9 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {
const _preset = cleanupPreset({
preset: {
...preset,
title
title,
},
endpointsConfig
endpointsConfig,
});
createPresetMutation.mutate(_preset);
};
@ -46,7 +46,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {
placeholder="Set a custom name for this preset"
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
/>
</div>
@ -54,7 +54,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {
selection={{
selectHandler: submitPreset,
selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
selectText: 'Save'
selectText: 'Save',
}}
/>
</Dialog>

6
client/src/components/Input/AnthropicOptions/index.jsx
View file

@ -40,7 +40,7 @@ function AnthropicOptions() {
update[param] = newValue;
setConversation((prevState) => ({
...prevState,
...update
...update,
}));
};
@ -63,14 +63,14 @@ function AnthropicOptions() {
showLabel={false}
className={cn(
cardStyle,
'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600',
)}
/>
<Button
type="button"
className={cn(
cardStyle,
'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600',
)}
onClick={triggerAdvancedMode}
>

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

@ -36,7 +36,7 @@ function BingAIOptions({ show }) {
update[param] = newValue;
setConversation((prevState) => ({
...prevState,
...update
...update,
}));
};
@ -46,7 +46,7 @@ function BingAIOptions({ show }) {
'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'
'font-medium data-[state=active]:text-white text-xs text-white',
);
const selectedClass = (val) => val + '-tab ' + defaultSelected;
@ -69,7 +69,7 @@ function BingAIOptions({ show }) {
className={cn(
cardStyle,
'min-w-36 z-50 flex h-[40px] w-36 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600',
show ? 'hidden' : null
show ? 'hidden' : null,
)}
/>
@ -113,7 +113,7 @@ function BingAIOptions({ show }) {
className={cn(
cardStyle,
'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600',
show ? 'hidden' : null
show ? 'hidden' : null,
)}
onClick={triggerAdvancedMode}
>

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

@ -21,7 +21,7 @@ function ChatGPTOptions() {
update[param] = newValue;
setConversation((prevState) => ({
...prevState,
...update
...update,
}));
};
@ -38,7 +38,7 @@ function ChatGPTOptions() {
showLabel={false}
className={cn(
cardStyle,
'z-50 flex h-[40px] w-[260px] min-w-[260px] flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
'z-50 flex h-[40px] w-[260px] min-w-[260px] flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600',
)}
/>
</div>

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

@ -44,7 +44,7 @@ function GoogleOptions() {
update[param] = newValue;
setConversation((prevState) => ({
...prevState,
...update
...update,
}));
};
@ -57,7 +57,7 @@ function GoogleOptions() {
update.examples = current;
setConversation((prevState) => ({
...prevState,
...update
...update,
}));
};
@ -68,7 +68,7 @@ function GoogleOptions() {
update.examples = current;
setConversation((prevState) => ({
...prevState,
...update
...update,
}));
};
@ -79,7 +79,7 @@ function GoogleOptions() {
update.examples = [{ input: { content: '' }, output: { content: '' } }];
setConversation((prevState) => ({
...prevState,
...update
...update,
}));
return;
}
@ -87,7 +87,7 @@ function GoogleOptions() {
update.examples = current;
setConversation((prevState) => ({
...prevState,
...update
...update,
}));
};
@ -111,14 +111,14 @@ function GoogleOptions() {
showLabel={false}
className={cn(
cardStyle,
'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600',
)}
/>
<Button
type="button"
className={cn(
cardStyle,
'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600',
)}
onClick={triggerAdvancedMode}
>
@ -156,7 +156,7 @@ function GoogleOptions() {
label: (showExamples ? 'Hide' : 'Show') + ' Examples',
buttonClass: isCodeChat ? 'disabled' : '',
handler: triggerExamples,
icon: <MessagesSquared className="mr-1 w-[14px]" />
icon: <MessagesSquared className="mr-1 w-[14px]" />,
}}
/>
<SaveAsPresetDialog

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

@ -17,7 +17,7 @@ export default function ModelItem({ endpoint, value, isSelected }) {
endpoint,
error: false,
className: 'mr-2',
message: false
message: false,
});
const isUserProvided = endpointsConfig?.[endpoint]?.userProvide;
@ -29,7 +29,7 @@ export default function ModelItem({ endpoint, value, isSelected }) {
value={value}
className={cn(
'group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800',
isSelected && 'dark:bg-gray-800 bg-gray-50 active'
isSelected && 'dark:bg-gray-800 bg-gray-50 active',
)}
id={endpoint}
>
@ -45,7 +45,7 @@ export default function ModelItem({ endpoint, value, isSelected }) {
<button
className={cn(
'invisible m-0 mr-1 flex-initial rounded-md p-0 text-xs font-medium text-gray-400 hover:text-gray-700 group-hover:visible dark:font-normal dark:text-gray-400 dark:hover:text-gray-200',
isSelected && 'visible text-gray-700 dark:text-gray-200'
isSelected && 'visible text-gray-700 dark:text-gray-200',
)}
onClick={(e) => {
e.preventDefault();

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

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

4
client/src/components/Input/NewConversationMenu/FileUpload.tsx
View file

@ -19,7 +19,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
invalidText = null,
validator = null,
text = null,
id = '1'
id = '1',
}) => {
const [statusColor, setStatusColor] = useState<string>('text-gray-600');
const [status, setStatus] = useState<null | string>(null);
@ -52,7 +52,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
htmlFor={`file-upload-${id}`}
className={cn(
'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500',
statusColor
statusColor,
)}
>
<FileUp className="mr-1 flex w-[22px] items-center stroke-1" />

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

@ -11,7 +11,7 @@ export default function PresetItem({ preset = {}, value, onChangePreset, onDelet
endpoint: preset?.endpoint,
model: preset?.model,
error: false,
className: 'mr-2'
className: 'mr-2',
});
const getPresetTitle = () => {
@ -28,7 +28,7 @@ export default function PresetItem({ preset = {}, value, onChangePreset, onDelet
} else if (endpoint === 'bingAI') {
const { jailbreak, toneStyle } = preset;
if (toneStyle) _title += `: ${toneStyle}`;
if (jailbreak) _title += ` as Sydney`;
if (jailbreak) _title += ' as Sydney';
} else if (endpoint === 'chatGPTBrowser') {
const { model } = preset;
if (model) _title += `: ${model}`;

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

@ -20,7 +20,7 @@ import {
DropdownMenuTrigger,
DialogTemplate,
Dialog,
DialogTrigger
DialogTrigger,
} from '../../ui/';
import { cn } from '~/utils/';
@ -54,8 +54,8 @@ export default function NewConversationMenu() {
},
onError: (error) => {
console.error('Error uploading the preset:', error);
}
}
},
},
);
};
@ -79,7 +79,7 @@ export default function NewConversationMenu() {
const lastSelectedModel = JSON.parse(localStorage.getItem('lastSelectedModel')) || {};
localStorage.setItem(
'lastSelectedModel',
JSON.stringify({ ...lastSelectedModel, [endpoint]: conversation.model })
JSON.stringify({ ...lastSelectedModel, [endpoint]: conversation.model }),
);
localStorage.setItem('lastConversationSetup', JSON.stringify(conversation));
}
@ -89,7 +89,7 @@ export default function NewConversationMenu() {
const { jailbreak, toneStyle } = conversation;
localStorage.setItem(
'lastBingSettings',
JSON.stringify({ ...lastBingSettings, jailbreak, toneStyle })
JSON.stringify({ ...lastBingSettings, jailbreak, toneStyle }),
);
}
}, [conversation]);
@ -112,7 +112,7 @@ export default function NewConversationMenu() {
const currentConvo = getDefaultConversation({
conversation,
endpointsConfig,
preset: newPreset
preset: newPreset,
});
setConversation(currentConvo);
@ -145,7 +145,7 @@ export default function NewConversationMenu() {
...conversation,
isCreatedByUser: false,
error: false,
button: true
button: true,
});
return (
@ -155,7 +155,7 @@ export default function NewConversationMenu() {
<Button
id="new-conversation-menu"
variant="outline"
className={`group relative mb-[-12px] ml-0 mt-[-8px] items-center rounded-md border-0 p-1 outline-none focus:ring-0 focus:ring-offset-0 dark:data-[state=open]:bg-opacity-50 md:left-1 md:ml-[-12px] md:pl-1`}
className={'group relative mb-[-12px] ml-0 mt-[-8px] items-center rounded-md border-0 p-1 outline-none focus:ring-0 focus:ring-offset-0 dark:data-[state=open]:bg-opacity-50 md:left-1 md:ml-[-12px] md:pl-1'}
>
{icon}
<span className="max-w-0 overflow-hidden whitespace-nowrap px-0 text-slate-600 transition-all group-hover:max-w-[80px] group-hover:px-2 group-data-[state=open]:max-w-[80px] group-data-[state=open]:px-2 dark:text-slate-300">
@ -224,7 +224,7 @@ export default function NewConversationMenu() {
selection={{
selectHandler: clearAllPresets,
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
selectText: 'Clear'
selectText: 'Clear',
}}
/>
</Dialog>
@ -234,7 +234,7 @@ export default function NewConversationMenu() {
onValueChange={onSelectPreset}
className={cn(
'overflow-y-auto overflow-x-hidden',
showEndpoints ? 'max-h-[210px]' : 'max-h-[315px]'
showEndpoints ? 'max-h-[210px]' : 'max-h-[315px]',
)}
>
{showPresets &&

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

@ -23,7 +23,7 @@ function OpenAIOptions() {
temperature,
top_p,
presence_penalty,
frequency_penalty
frequency_penalty,
} = conversation;
const endpointsConfig = useRecoilValue(store.endpointsConfig);
@ -49,7 +49,7 @@ function OpenAIOptions() {
update[param] = newValue;
setConversation((prevState) => ({
...prevState,
...update
...update,
}));
};
@ -72,14 +72,14 @@ function OpenAIOptions() {
showLabel={false}
className={cn(
cardStyle,
'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600',
)}
/>
<Button
type="button"
className={cn(
cardStyle,
'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600',
)}
onClick={triggerAdvancedMode}
>

16
client/src/components/Input/PluginsOptions/index.jsx
View file

@ -6,7 +6,7 @@ import {
PluginStoreDialog,
MultiSelectDropDown,
Button,
GPTIcon
GPTIcon,
} from '~/components';
import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover';
import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
@ -83,7 +83,7 @@ function PluginsOptions() {
update[param] = newValue;
setConversation((prevState) => ({
...prevState,
...update
...update,
}));
};
@ -94,7 +94,7 @@ function PluginsOptions() {
agentOptions[param] = newValue;
setConversation((prevState) => ({
...prevState,
agentOptions
agentOptions,
}));
};
@ -115,7 +115,7 @@ function PluginsOptions() {
localStorage.setItem('lastSelectedTools', JSON.stringify(update.tools));
setConversation((prevState) => ({
...prevState,
...update
...update,
}));
};
@ -143,14 +143,14 @@ function PluginsOptions() {
type="button"
className={cn(
cardStyle,
'min-w-4 z-40 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-white focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-700'
'min-w-4 z-40 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-white focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-700',
)}
onClick={() => setVisibility((prev) => !prev)}
>
<ChevronDownIcon
className={cn(
!visibile ? 'rotate-180 transform' : '',
'w-4 text-gray-600 dark:text-white'
'w-4 text-gray-600 dark:text-white',
)}
/>
</Button>
@ -175,7 +175,7 @@ function PluginsOptions() {
className={cn(
cardStyle,
'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600',
!visibile && 'hidden'
!visibile && 'hidden',
)}
onClick={triggerAdvancedMode}
>
@ -220,7 +220,7 @@ function PluginsOptions() {
additionalButton={{
label: `Show ${showAgentSettings ? 'Completion' : 'Agent'} Settings`,
handler: triggerAgentSettings,
icon: <GPTIcon className="mr-1 mt-[2px] w-[14px]" size={14} />
icon: <GPTIcon className="mr-1 mt-[2px] w-[14px]" size={14} />,
}}
/>
<SaveAsPresetDialog

2
client/src/components/Input/SetTokenDialog/HelpText.tsx
View file

@ -72,7 +72,7 @@ function HelpText({ endpoint } : { endpoint: string }) {
{`. 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>
)
),
};

2
client/src/components/Input/SetTokenDialog/InputWithLabel.tsx
View file

@ -27,7 +27,7 @@ const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, id })
placeholder={`Enter ${label}`}
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
/>
</>

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

@ -21,7 +21,7 @@ const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
'openAI': OpenAIConfig,
'azureOpenAI': OpenAIConfig,
'gptPlugins': OpenAIConfig,
'default': OtherConfig
'default': OtherConfig,
};
const EndpointComponent = endpointComponents[endpoint] || endpointComponents['default'];
@ -42,7 +42,7 @@ const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
selection={{
selectHandler: submit,
selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
selectText: 'Submit'
selectText: 'Submit',
}}
/>
</Dialog>

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

@ -10,7 +10,7 @@ export default function SubmitButton({
handleStopGenerating,
disabled,
isSubmitting,
endpointsConfig
endpointsConfig,
}) {
const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
const { getToken } = store.useToken(endpoint);

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

@ -26,9 +26,9 @@ export default function MessageHandler() {
parentMessageId: message?.overrideParentMessageId,
messageId: message?.overrideParentMessageId + '_',
plugin: plugin ? plugin : null,
submitting: true
submitting: true,
// unfinished: true
}
},
]);
} else {
setMessages([
@ -40,9 +40,9 @@ export default function MessageHandler() {
parentMessageId: message?.messageId,
messageId: message?.messageId + '_',
plugin: plugin ? plugin : null,
submitting: true
submitting: true,
// unfinished: true
}
},
]);
}
};
@ -74,7 +74,7 @@ export default function MessageHandler() {
setConversation((prevState) => ({
...prevState,
...conversation
...conversation,
}));
};
@ -88,8 +88,8 @@ export default function MessageHandler() {
...initialResponse,
parentMessageId: message?.overrideParentMessageId,
messageId: message?.overrideParentMessageId + '_',
submitting: true
}
submitting: true,
},
]);
else
setMessages([
@ -99,14 +99,14 @@ export default function MessageHandler() {
...initialResponse,
parentMessageId: message?.messageId,
messageId: message?.messageId + '_',
submitting: true
}
submitting: true,
},
]);
const { conversationId } = message;
setConversation((prevState) => ({
...prevState,
conversationId
conversationId,
}));
resetLatestMessage();
};
@ -138,7 +138,7 @@ export default function MessageHandler() {
setConversation((prevState) => ({
...prevState,
...conversation
...conversation,
}));
};
@ -149,7 +149,7 @@ export default function MessageHandler() {
const errorResponse = {
...data,
error: true,
parentMessageId: message?.messageId
parentMessageId: message?.messageId,
};
setIsSubmitting(false);
setMessages([...messages, message, errorResponse]);
@ -164,11 +164,11 @@ export default function MessageHandler() {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
abortKey: conversationId
})
abortKey: conversationId,
}),
})
.then((response) => response.json())
.then((data) => {
@ -193,7 +193,7 @@ 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) => {
@ -206,7 +206,7 @@ export default function MessageHandler() {
if (data.created) {
message = {
...data.message,
overrideParentMessageId: message?.overrideParentMessageId
overrideParentMessageId: message?.overrideParentMessageId,
};
createdHandler(data, { ...submission, message });
console.log('created', message);

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

@ -62,10 +62,10 @@ const Content = React.memo(({ content, message }) => {
{
detect: true,
ignoreMissing: true,
subset: langSubset
}
subset: langSubset,
},
],
[rehypeRaw]
[rehypeRaw],
];
if (!isInitializing || !isLatestMessage) {
@ -79,7 +79,7 @@ const Content = React.memo(({ content, message }) => {
linkTarget="_new"
components={{
code,
p
p,
}}
>
{isLatestMessage && isSubmitting && !isInitializing ? (content ?? '') + cursor : content}

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

@ -12,7 +12,7 @@ export default function HoverButtons({
conversation,
isSubmitting,
message,
regenerate
regenerate,
}) {
const { endpoint } = conversation;
const [isCopied, setIsCopied] = React.useState(false);
@ -20,7 +20,7 @@ export default function HoverButtons({
const branchingSupported =
// azureOpenAI, openAI, chatGPTBrowser support branching, so edit enabled // 5/21/23: Bing is allowing editing and Message regenerating
!!['azureOpenAI', 'openAI', 'chatGPTBrowser', 'google', 'bingAI', 'gptPlugins', 'anthropic'].find(
(e) => e === endpoint
(e) => e === endpoint,
);
// Sydney in bingAI supports branching, so edit enabled
@ -68,7 +68,7 @@ export default function HoverButtons({
<button
className={cn(
'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',
message?.isCreatedByUser ? '' : 'active'
message?.isCreatedByUser ? '' : 'active',
)}
onClick={() => copyToClipboard(setIsCopied)}
type="button"

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

@ -23,7 +23,7 @@ export default function Message({
setCurrentEditId,
siblingIdx,
siblingCount,
setSiblingIdx
setSiblingIdx,
}) {
const { text, searchResult, isCreatedByUser, error, submitting, unfinished } = message;
const isSubmitting = useRecoilValue(store.isSubmitting);
@ -36,7 +36,7 @@ export default function Message({
const { switchToConversation } = store.useConversation();
const blinker = submitting && isSubmitting;
const getConversationQuery = useGetConversationByIdQuery(message.conversationId, {
enabled: false
enabled: false,
});
// debugging
@ -69,13 +69,13 @@ export default function Message({
const props = {
className:
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800'
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800',
};
const icon = getIcon({
...conversation,
...message,
model: message?.model || conversation?.model
model: message?.model || conversation?.model,
});
if (!isCreatedByUser)
@ -93,7 +93,7 @@ export default function Message({
ask({
text,
parentMessageId: message?.parentMessageId,
conversationId: message?.conversationId
conversationId: message?.conversationId,
});
setSiblingIdx(siblingCount - 1);
@ -185,7 +185,7 @@ export default function Message({
<div
className={cn(
'flex min-h-[20px] flex-grow flex-col items-start gap-4 ',
isCreatedByUser ? 'whitespace-pre-wrap' : ''
isCreatedByUser ? 'whitespace-pre-wrap' : '',
)}
>
{/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
@ -209,7 +209,7 @@ export default function Message({
{!isSubmitting && unfinished ? (
<div className="flex flex min-h-[20px] flex-grow flex-col items-start gap-2 gap-4 text-red-500">
<div className="rounded-md border border-blue-400 bg-blue-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-100">
{`This is an unfinished message. The AI may still be generating a response or it was aborted. Refresh or visit later to see more updates.`}
{'This is an unfinished message. The AI may still be generating a response or it was aborted. Refresh or visit later to see more updates.'}
</div>
</div>
) : null}

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

@ -63,7 +63,7 @@ const MessageHeader = ({ isSearchView = false }) => {
<div
className={cn(
'dark:text-gray-450 w-full gap-1 border-b border-black/10 bg-gray-50 text-sm text-gray-500 transition-all hover:bg-gray-100 hover:bg-opacity-30 dark:border-gray-900/50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:hover:bg-opacity-100 dark:text-gray-500',
isNotClickable ? '' : 'cursor-pointer '
isNotClickable ? '' : 'cursor-pointer ',
)}
onClick={() => (isNotClickable ? null : setSaveAsDialogShow(true))}
>

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

@ -10,7 +10,7 @@ export default function MultiMessage({
scrollToBottom,
currentEditId,
setCurrentEditId,
isSearchView
isSearchView,
}) {
// const [siblingIdx, setSiblingIdx] = useState(0);

4
client/src/components/Messages/Plugin.jsx
View file

@ -35,7 +35,7 @@ export default function Plugin({ plugin }) {
if (!loading && plugin.latest === 'Self Reflection') {
return 'Finished';
} else if (plugin.latest === 'Self Reflection') {
return "I'm thinking...";
return 'I\'m thinking...';
} else {
return (
<>
@ -54,7 +54,7 @@ export default function Plugin({ plugin }) {
<div
className={cn(
loading ? 'bg-green-100' : 'bg-[#ECECF1]',
'flex items-center rounded p-3 text-sm text-gray-900'
'flex items-center rounded p-3 text-sm text-gray-900',
)}
>
<div>

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

@ -63,9 +63,9 @@ export default function Messages({ isSearchView = false }) {
setShowScrollButton(false);
},
750,
{ leading: true }
{ leading: true },
),
[messagesEndRef]
[messagesEndRef],
);
let timeoutId = null;

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

@ -28,7 +28,7 @@ export default function ExportModel({ open, onOpenChange }) {
({ snapshot }) =>
async (messageId) =>
await snapshot.getPromise(store.messagesSiblingIdxFamily(messageId)),
[]
[],
);
const typeOptions = [
@ -36,7 +36,7 @@ export default function ExportModel({ open, onOpenChange }) {
{ value: 'text', display: 'text (.txt)' },
{ value: 'markdown', display: 'markdown (.md)' },
{ value: 'json', display: 'json (.json)' },
{ value: 'csv', display: 'csv (.csv)' }
{ value: 'csv', display: 'csv (.csv)' },
]; //,, 'webpage'];
useEffect(() => {
@ -67,7 +67,7 @@ export default function ExportModel({ open, onOpenChange }) {
message,
messages,
branches = false,
recursive = false
recursive = false,
}) => {
let children = [];
if (messages?.length)
@ -79,8 +79,8 @@ export default function ExportModel({ open, onOpenChange }) {
message: message,
messages: message?.children,
branches,
recursive
})
recursive,
}),
);
else {
let message = messages[0];
@ -95,8 +95,8 @@ export default function ExportModel({ open, onOpenChange }) {
message: message,
messages: message?.children,
branches,
recursive
})
recursive,
}),
];
}
@ -126,7 +126,7 @@ export default function ExportModel({ open, onOpenChange }) {
message: null,
messages: messagesTree,
branches: exportBranches,
recursive: false
recursive: false,
});
for (const message of messages) {
@ -141,51 +141,51 @@ export default function ExportModel({ open, onOpenChange }) {
beforeTableEncode: (entries) => [
{
fieldName: 'sender',
fieldValues: entries.find((e) => e.fieldName == 'sender').fieldValues
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
fieldValues: entries.find((e) => e.fieldName == 'isCreatedByUser').fieldValues,
},
{
fieldName: 'error',
fieldValues: entries.find((e) => e.fieldName == 'error').fieldValues
fieldValues: entries.find((e) => e.fieldName == 'error').fieldValues,
},
{
fieldName: 'unfinished',
fieldValues: entries.find((e) => e.fieldName == 'unfinished').fieldValues
fieldValues: entries.find((e) => e.fieldName == 'unfinished').fieldValues,
},
{
fieldName: 'cancelled',
fieldValues: entries.find((e) => e.fieldName == 'cancelled').fieldValues
fieldValues: entries.find((e) => e.fieldName == 'cancelled').fieldValues,
},
{
fieldName: 'messageId',
fieldValues: entries.find((e) => e.fieldName == 'messageId').fieldValues
fieldValues: entries.find((e) => e.fieldName == 'messageId').fieldValues,
},
{
fieldName: 'parentMessageId',
fieldValues: entries.find((e) => e.fieldName == 'parentMessageId').fieldValues
fieldValues: entries.find((e) => e.fieldName == 'parentMessageId').fieldValues,
},
{
fieldName: 'createdAt',
fieldValues: entries.find((e) => e.fieldName == 'createdAt').fieldValues
}
]
fieldValues: entries.find((e) => e.fieldName == 'createdAt').fieldValues,
},
],
});
};
const exportMarkdown = async () => {
let data =
`# Conversation\n` +
'# Conversation\n' +
`- conversationId: ${conversation?.conversationId}\n` +
`- endpoint: ${conversation?.endpoint}\n` +
`- title: ${conversation?.title}\n` +
`- exportAt: ${new Date().toTimeString()}\n`;
if (includeOptions) {
data += `\n## Options\n`;
data += '\n## Options\n';
const options = cleanupPreset({ preset: conversation, endpointsConfig });
for (const key of Object.keys(options)) {
@ -198,15 +198,15 @@ export default function ExportModel({ open, onOpenChange }) {
message: null,
messages: messagesTree,
branches: false,
recursive: false
recursive: false,
});
data += `\n## History\n`;
data += '\n## History\n';
for (const message of messages) {
data += `**${message?.sender}:**\n${message?.text}\n`;
if (message.error) data += `*(This is an error message)*\n`;
if (message.unfinished) data += `*(This is an unfinished message)*\n`;
if (message.cancelled) data += `*(This is a cancelled message)*\n`;
if (message.error) data += '*(This is an error message)*\n';
if (message.unfinished) data += '*(This is an unfinished message)*\n';
if (message.cancelled) data += '*(This is a cancelled message)*\n';
data += '\n\n';
}
@ -214,21 +214,21 @@ export default function ExportModel({ open, onOpenChange }) {
data: data,
fileName: filename,
extension: 'md',
exportType: exportFromJSON.types.text
exportType: exportFromJSON.types.text,
});
};
const exportText = async () => {
let data =
`Conversation\n` +
`########################\n` +
'Conversation\n' +
'########################\n' +
`conversationId: ${conversation?.conversationId}\n` +
`endpoint: ${conversation?.endpoint}\n` +
`title: ${conversation?.title}\n` +
`exportAt: ${new Date().toTimeString()}\n`;
if (includeOptions) {
data += `\nOptions\n########################\n`;
data += '\nOptions\n########################\n';
const options = cleanupPreset({ preset: conversation, endpointsConfig });
for (const key of Object.keys(options)) {
@ -241,15 +241,15 @@ export default function ExportModel({ open, onOpenChange }) {
message: null,
messages: messagesTree,
branches: false,
recursive: false
recursive: false,
});
data += `\nHistory\n########################\n`;
data += '\nHistory\n########################\n';
for (const message of messages) {
data += `>> ${message?.sender}:\n${message?.text}\n`;
if (message.error) data += `(This is an error message)\n`;
if (message.unfinished) data += `(This is an unfinished message)\n`;
if (message.cancelled) data += `(This is a cancelled message)\n`;
if (message.error) data += '(This is an error message)\n';
if (message.unfinished) data += '(This is an unfinished message)\n';
if (message.cancelled) data += '(This is a cancelled message)\n';
data += '\n\n';
}
@ -257,7 +257,7 @@ export default function ExportModel({ open, onOpenChange }) {
data: data,
fileName: filename,
extension: 'txt',
exportType: exportFromJSON.types.text
exportType: exportFromJSON.types.text,
});
};
@ -268,7 +268,7 @@ export default function ExportModel({ open, onOpenChange }) {
title: conversation?.title,
exportAt: new Date().toTimeString(),
branches: exportBranches,
recursive: recursive
recursive: recursive,
};
if (includeOptions) data.options = cleanupPreset({ preset: conversation, endpointsConfig });
@ -278,7 +278,7 @@ export default function ExportModel({ open, onOpenChange }) {
message: null,
messages: messagesTree,
branches: exportBranches,
recursive: recursive
recursive: recursive,
});
if (recursive) data.messagesTree = messages.children;
@ -288,7 +288,7 @@ export default function ExportModel({ open, onOpenChange }) {
data: data,
fileName: filename,
extension: 'json',
exportType: exportFromJSON.types.json
exportType: exportFromJSON.types.json,
});
};
@ -322,7 +322,7 @@ export default function ExportModel({ open, onOpenChange }) {
placeholder="Set the filename"
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
/>
</div>
@ -337,7 +337,7 @@ export default function ExportModel({ open, onOpenChange }) {
options={typeOptions}
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
'flex h-10 max-h-10 w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0',
)}
containerClassName="flex w-full resize-none"
/>

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

@ -26,7 +26,7 @@ const ExportConversation = forwardRef(() => {
<button
className={cn(
'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'
exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-gray-400',
)}
onClick={clickHandler}
>

2
client/src/components/Nav/NavLink.jsx
View file

@ -7,7 +7,7 @@ const NavLink = forwardRef((props, ref) => {
defaultProps.className = cn(
'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',
className
className,
);
if (clickHandler) {

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

@ -41,7 +41,7 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
<Menu.Button
className={cn(
'group-ui-open:bg-gray-800 flex w-full items-center gap-2.5 rounded-md px-3 py-3 text-sm transition-colors duration-200 hover:bg-gray-800',
open ? 'bg-gray-800' : ''
open ? 'bg-gray-800' : '',
)}
>
<div className="-ml-0.5 h-5 w-5 flex-shrink-0">
@ -80,7 +80,7 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
<NavLink
className={cn(
'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 rounded-none',
exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-white/50'
exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-white/50',
)}
svg={() => <Download size={16} />}
text="Export conversation"

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

@ -29,7 +29,6 @@ const SearchBar = forwardRef((props, ref) => {
setShowClearIcon(true);
}
}, [searchQuery])
return (
<div

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

@ -71,7 +71,7 @@ export default function Settings({ open, onOpenChange }) {
aria-orientation="vertical"
className={cn(
'-ml-[8px] flex min-w-[180px] flex-shrink-0 flex-col',
isMobile && 'flex-row rounded-lg bg-gray-100 p-1 dark:bg-gray-800/30'
isMobile && 'flex-row rounded-lg bg-gray-100 p-1 dark:bg-gray-800/30',
)}
style={{ outline: 'none' }}
>
@ -79,7 +79,7 @@ export default function Settings({ open, onOpenChange }) {
className={cn(
'radix-state-active:bg-gray-800 radix-state-active:text-white flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm',
isMobile &&
'dark:radix-state-active:text-white group flex-1 items-center justify-center text-sm dark:text-gray-500'
'dark:radix-state-active:text-white group flex-1 items-center justify-center text-sm dark:text-gray-500',
)}
value="general"
>

6
client/src/components/Nav/SettingsTabs/ClearChatsButton.spec.tsx
View file

@ -12,7 +12,7 @@ describe('ClearChatsButton', () => {
it('renders correctly', () => {
const { getByText } = render(
<ClearChatsButton confirmClear={false} showText={true} onClick={mockOnClick} />
<ClearChatsButton confirmClear={false} showText={true} onClick={mockOnClick} />,
);
expect(getByText('Clear all chats')).toBeInTheDocument();
@ -21,7 +21,7 @@ describe('ClearChatsButton', () => {
it('renders confirm clear when confirmClear is true', () => {
const { getByText } = render(
<ClearChatsButton confirmClear={true} showText={true} onClick={mockOnClick} />
<ClearChatsButton confirmClear={true} showText={true} onClick={mockOnClick} />,
);
expect(getByText('Confirm Clear')).toBeInTheDocument();
@ -29,7 +29,7 @@ describe('ClearChatsButton', () => {
it('calls onClick when the button is clicked', () => {
const { getByText } = render(
<ClearChatsButton confirmClear={false} showText={true} onClick={mockOnClick} />
<ClearChatsButton confirmClear={false} showText={true} onClick={mockOnClick} />,
);
fireEvent.click(getByText('Clear'));

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

@ -6,7 +6,7 @@ import { useClearConversationsMutation } from '@librechat/data-provider';
export const ThemeSelector = ({
theme,
onChange
onChange,
}: {
theme: string;
onChange: (value: string) => void;
@ -28,7 +28,7 @@ export const ThemeSelector = ({
export const ClearChatsButton = ({
confirmClear,
showText = true,
onClick
onClick,
}: {
confirmClear: boolean;
showText: boolean;
@ -74,7 +74,7 @@ function General() {
(value: string) => {
setTheme(value);
},
[setTheme]
[setTheme],
);
return (

4
client/src/components/Nav/SettingsTabs/ThemeSelector.spec.tsx
View file

@ -12,7 +12,7 @@ describe('ThemeSelector', () => {
it('renders correctly', () => {
const { getByText, getByDisplayValue } = render(
<ThemeSelector theme="system" onChange={mockOnChange} />
<ThemeSelector theme="system" onChange={mockOnChange} />,
);
expect(getByText('Theme')).toBeInTheDocument();
@ -21,7 +21,7 @@ describe('ThemeSelector', () => {
it('calls onChange when the select value changes', () => {
const { getByDisplayValue } = render(
<ThemeSelector theme="system" onChange={mockOnChange} />
<ThemeSelector theme="system" onChange={mockOnChange} />,
);
fireEvent.change(getByDisplayValue('System'), { target: { value: 'dark' } });

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

@ -67,7 +67,7 @@ export default function Nav({ navVisible, setNavVisible }) {
const debouncedSearchTerm = useDebounce(searchQuery, 750);
const searchQueryFn = useSearchQuery(debouncedSearchTerm, pageNumber, {
enabled:
!!debouncedSearchTerm && debouncedSearchTerm.length > 0 && isSearchEnabled && isSearching
!!debouncedSearchTerm && debouncedSearchTerm.length > 0 && isSearchEnabled && isSearching,
});
const onSearchSuccess = (data, expectedPage) => {
@ -127,7 +127,7 @@ export default function Nav({ navVisible, setNavVisible }) {
} else {
if (!isSearching) {
conversations = conversations.sort(
(a, b) => new Date(b.createdAt) - new Date(a.createdAt)
(a, b) => new Date(b.createdAt) - new Date(a.createdAt),
);
}
setConversations(conversations);

8
client/src/components/Plugins/Store/PluginAuthForm.tsx
View file

@ -14,7 +14,7 @@ function PluginAuthForm({ plugin, onSubmit }: TPluginAuthFormProps) {
const {
register,
handleSubmit,
formState: { errors, isDirty, isValid, isSubmitting }
formState: { errors, isDirty, isValid, isSubmitting },
} = useForm();
return (
@ -24,7 +24,7 @@ function PluginAuthForm({ plugin, onSubmit }: TPluginAuthFormProps) {
className="col-span-1 flex w-full flex-col items-start justify-start gap-2"
method="POST"
onSubmit={handleSubmit((auth) =>
onSubmit({ pluginKey: plugin!.pluginKey, action: 'install', auth })
onSubmit({ pluginKey: plugin!.pluginKey, action: 'install', auth }),
)}
>
{plugin!.authConfig?.map((config: TPluginAuthConfig, i: number) => (
@ -49,8 +49,8 @@ function PluginAuthForm({ plugin, onSubmit }: TPluginAuthFormProps) {
required: `${config.label} is required.`,
minLength: {
value: 10,
message: `${config.label} must be at least 10 characters long`
}
message: `${config.label} must be at least 10 characters long`,
},
})}
className="flex h-10 max-h-10 w-full resize-none rounded-md border border-gray-200 bg-transparent px-3 py-2 text-sm text-gray-700 shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:border-slate-400 focus:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-opacity-0 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 focus:dark:bg-gray-600 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0"
/>

2
client/src/components/Plugins/Store/PluginPagination.tsx
View file

@ -9,7 +9,7 @@ type TPluginPaginationProps = {
const PluginPagination: React.FC<TPluginPaginationProps> = ({
currentPage,
maxPage,
onChangePage
onChangePage,
}) => {
const pages = [...Array(maxPage).keys()].map((i) => i + 1);

12
client/src/components/Plugins/Store/PluginStoreDialog.tsx
View file

@ -7,7 +7,7 @@ import { PluginStoreItem, PluginPagination, PluginAuthForm } from '.';
import {
useAvailablePluginsQuery,
useUpdateUserPluginsMutation,
TPlugin
TPlugin,
} from '@librechat/data-provider';
import { useAuthContext } from '~/hooks/AuthContext';
@ -51,7 +51,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
updateUserPlugins.mutate(pluginAction, {
onError: (error) => {
handleInstallError(error);
}
},
});
setShowPluginAuthForm(false);
};
@ -72,10 +72,10 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
localStorage.setItem('lastSelectedTools', JSON.stringify(tools));
setConversation((prevState: any) => ({
...prevState,
tools
tools,
}));
}
}
},
},
);
};
@ -119,7 +119,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
resizeObserver.observe(node);
}
},
[itemsPerPage]
[itemsPerPage],
);
useEffect(() => {

42
client/src/components/Plugins/Store/__tests__/PluginStoreDialog.spec.tsx
View file

@ -29,9 +29,9 @@ const pluginsQueryResult = [
{
authField: 'GOOGLE_CSE_ID',
label: 'Google CSE ID',
description: 'This is your Google Custom Search Engine ID.'
}
]
description: 'This is your Google Custom Search Engine ID.',
},
],
},
{
name: 'Wolfram',
@ -43,66 +43,66 @@ const pluginsQueryResult = [
{
authField: 'WOLFRAM_APP_ID',
label: 'Wolfram App ID',
description: 'An AppID must be supplied in all calls to the Wolfram|Alpha API.'
}
]
description: 'An AppID must be supplied in all calls to the Wolfram|Alpha API.',
},
],
},
{
name: 'Calculator',
pluginKey: 'calculator',
description: 'A simple calculator plugin',
icon: 'https://i.imgur.com/SMmVkNB.png',
authConfig: []
authConfig: [],
},
{
name: 'Plugin 1',
pluginKey: 'plugin1',
description: 'description for Plugin 1.',
icon: 'mock-icon',
authConfig: []
authConfig: [],
},
{
name: 'Plugin 2',
pluginKey: 'plugin2',
description: 'description for Plugin 2.',
icon: 'mock-icon',
authConfig: []
authConfig: [],
},
{
name: 'Plugin 3',
pluginKey: 'plugin3',
description: 'description for Plugin 3.',
icon: 'mock-icon',
authConfig: []
authConfig: [],
},
{
name: 'Plugin 4',
pluginKey: 'plugin4',
description: 'description for Plugin 4.',
icon: 'mock-icon',
authConfig: []
authConfig: [],
},
{
name: 'Plugin 5',
pluginKey: 'plugin5',
description: 'description for Plugin 5.',
icon: 'mock-icon',
authConfig: []
authConfig: [],
},
{
name: 'Plugin 6',
pluginKey: 'plugin6',
description: 'description for Plugin 6.',
icon: 'mock-icon',
authConfig: []
authConfig: [],
},
{
name: 'Plugin 7',
pluginKey: 'plugin7',
description: 'description for Plugin 7.',
icon: 'mock-icon',
authConfig: []
}
authConfig: [],
},
];
const setup = ({
@ -110,20 +110,20 @@ const setup = ({
isLoading: false,
isError: false,
data: {
plugins: ['wolfram']
}
plugins: ['wolfram'],
},
},
useAvailablePluginsQueryReturnValue = {
isLoading: false,
isError: false,
data: pluginsQueryResult
data: pluginsQueryResult,
},
useUpdateUserPluginsMutationReturnValue = {
isLoading: false,
isError: false,
mutate: jest.fn(),
data: {}
}
data: {},
},
} = {}) => {
const mockUseAvailablePluginsQuery = jest
.spyOn(mockDataProvider, 'useAvailablePluginsQuery')
@ -145,7 +145,7 @@ const setup = ({
mockUseGetUserQuery,
mockUseAvailablePluginsQuery,
mockUseUpdateUserPluginsMutation,
mockSetIsOpen
mockSetIsOpen,
};
};

4
client/src/components/svg/AnthropicIcon.jsx
View file

@ -4,7 +4,7 @@ export default function AnthropicIcon({ size = 25 }) {
<g
style={{
transform: 'translateX(13px) rotateZ(0deg)',
transformorigin: '4.775px 7.73501px'
transformorigin: '4.775px 7.73501px',
}}
// eslint-disable-next-line react/no-unknown-property
transformorigin="4.7750020027160645px 7.735011100769043px"
@ -19,7 +19,7 @@ export default function AnthropicIcon({ size = 25 }) {
<g
style={{
transform: 'none',
transformorigin: '7.935px 7.73501px'
transformorigin: '7.935px 7.73501px',
}}
opacity="1"
// eslint-disable-next-line react/no-unknown-property

46
client/src/components/svg/GoogleIcon.jsx
View file

@ -1,29 +1,29 @@
import React from 'react';
export default function GoogleIcon() {
return (
<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>
return (
<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>
);
}

10
client/src/components/ui/AlertDialog.tsx
View file

@ -29,7 +29,7 @@ const AlertDialogOverlay = React.forwardRef<
<AlertDialogPrimitive.Overlay
className={cn(
'animate-in fade-in fixed inset-0 z-50 bg-gray-500/90 dark:bg-gray-800/90 transition-opacity',
className
className,
)}
{...props}
ref={ref}
@ -48,7 +48,7 @@ const AlertDialogContent = React.forwardRef<
className={cn(
'animate-in fade-in-90 slide-in-from-bottom-10 sm:zoom-in-90 sm:slide-in-from-bottom-0 fixed z-50 grid w-full max-w-lg scale-100 gap-4 bg-white p-6 opacity-100 sm:rounded-lg md:w-full',
'dark:bg-slate-900',
className
className,
)}
{...props}
/>
@ -101,7 +101,7 @@ const AlertDialogAction = React.forwardRef<
ref={ref}
className={cn(
'inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900',
className
className,
)}
{...props}
/>
@ -116,7 +116,7 @@ const AlertDialogCancel = React.forwardRef<
ref={ref}
className={cn(
'mt-2 inline-flex h-10 items-center justify-center rounded-md border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0',
className
className,
)}
{...props}
/>
@ -132,5 +132,5 @@ export {
AlertDialogTitle,
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel
AlertDialogCancel,
};

14
client/src/components/ui/Button.tsx
View file

@ -16,19 +16,19 @@ const buttonVariants = cva(
'bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-gray-900 dark:text-slate-100',
ghost:
'bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent',
link: 'bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent'
link: 'bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent',
},
size: {
default: 'h-10 py-2 px-4',
sm: 'h-9 px-2 rounded-md',
lg: 'h-11 px-8 rounded-md'
}
lg: 'h-11 px-8 rounded-md',
},
},
defaultVariants: {
variant: 'default',
size: 'default'
}
}
size: 'default',
},
},
);
export interface ButtonProps
@ -40,7 +40,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
return (
<button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
);
}
},
);
Button.displayName = 'Button';

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

@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
ref={ref}
className={cn(
'peer h-4 w-4 shrink-0 rounded-sm border border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900',
className
className,
)}
{...props}
>

12
client/src/components/ui/Dialog.tsx
View file

@ -25,7 +25,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
className={cn(
'data-[state=closed]:animate-out data-[state=open]:fade-in data-[state=closed]:fade-out fixed inset-0 z-[999] bg-gray-500/90 dark:bg-gray-800/90 transition-all duration-100',
className
className,
)}
{...props}
ref={ref}
@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
className={cn(
'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 sm:rounded-lg md:w-[680px] overflow-y-auto',
'dark:bg-slate-900',
className
className,
)}
{...props}
>
@ -62,7 +62,7 @@ const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
<div
className={cn(
'flex flex-col space-y-2 border-b border-black/10 p-6 text-center dark:border-white/10 sm:text-left',
className
className,
)}
{...props}
/>
@ -109,7 +109,7 @@ const DialogClose = React.forwardRef<
ref={ref}
className={cn(
'mt-2 inline-flex h-10 items-center justify-center rounded-md border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0',
className
className,
)}
{...props}
/>
@ -125,7 +125,7 @@ const DialogButton = React.forwardRef<
variant="outline"
className={cn(
'mt-2 inline-flex h-10 items-center justify-center rounded-md border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0',
className
className,
)}
{...props}
/>
@ -141,5 +141,5 @@ export {
DialogTitle,
DialogDescription,
DialogClose,
DialogButton
DialogButton,
};

10
client/src/components/ui/DialogTemplate.spec.tsx
View file

@ -20,9 +20,9 @@ describe('DialogTemplate', () => {
main={<div>Main Content</div>}
buttons={<button>Button</button>}
leftButtons={<button>Left Button</button>}
selection={{ selectHandler: mockSelectHandler, selectText: "Select" }}
selection={{ selectHandler: mockSelectHandler, selectText: 'Select' }}
/>
</Dialog>
</Dialog>,
);
expect(getByText('Test Dialog')).toBeInTheDocument();
@ -40,7 +40,7 @@ describe('DialogTemplate', () => {
<DialogTemplate
title="Test Dialog"
/>
</Dialog>
</Dialog>,
);
expect(getByText('Test Dialog')).toBeInTheDocument();
@ -57,9 +57,9 @@ describe('DialogTemplate', () => {
<Dialog open onOpenChange={() => {}}>
<DialogTemplate
title="Test Dialog"
selection={{ selectHandler: mockSelectHandler, selectText: "Select" }}
selection={{ selectHandler: mockSelectHandler, selectText: 'Select' }}
/>
</Dialog>
</Dialog>,
);
fireEvent.click(getByText('Select'));

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

@ -5,7 +5,7 @@ import {
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle
DialogTitle,
} from './';
import { cn } from '~/utils/';

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

@ -13,7 +13,7 @@ function Dropdown({ value, onChange, options, className, containerClassName }) {
<Listbox.Button
className={cn(
'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
className || ''
className || '',
)}
>
<span className="inline-flex w-full truncate">
@ -49,7 +49,7 @@ function Dropdown({ value, onChange, options, className, containerClassName }) {
<span
className={cn(
'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100',
value === (item?.value ?? item) ? 'font-semibold' : ''
value === (item?.value ?? item) ? 'font-semibold' : '',
)}
>
{item?.display ?? item}

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

@ -29,7 +29,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
className={cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-gray-900 dark:data-[state=open]:bg-gray-900',
inset && 'pl-8',
className
className,
)}
{...props}
>
@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
ref={ref}
className={cn(
'animate-in slide-in-from-left-1 z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400',
className
className,
)}
{...props}
/>
@ -64,7 +64,7 @@ const DropdownMenuContent = React.forwardRef<
sideOffset={sideOffset}
className={cn(
'animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400',
className
className,
)}
{...props}
/>
@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
className={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-900',
inset && 'pl-8',
className
className,
)}
{...props}
/>
@ -98,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-900',
className
className,
)}
checked={checked}
{...props}
@ -121,7 +121,7 @@ const DropdownMenuRadioItem = React.forwardRef<
ref={ref}
className={cn(
className,
'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-800'
'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-800',
)}
{...props}
>
@ -146,7 +146,7 @@ const DropdownMenuLabel = React.forwardRef<
className={cn(
'px-2 py-1.5 text-sm font-semibold text-slate-900 dark:text-slate-300',
inset && 'pl-8',
className
className,
)}
{...props}
/>
@ -187,5 +187,5 @@ export {
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuRadioGroup
DropdownMenuRadioGroup,
};

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

@ -21,7 +21,7 @@ const HoverCardContent = React.forwardRef<
sideOffset={sideOffset}
className={cn(
'animate-in fade-in-0 z-50 w-64 rounded-md border border-gray-100 bg-white p-4 shadow-md outline-none dark:border-gray-800 dark:bg-gray-800',
className
className,
)}
{...props}
/>

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

@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...pr
<input
className={cn(
'flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900',
className
className,
)}
ref={ref}
{...props}

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

@ -21,7 +21,7 @@ const InputNumber = React.forwardRef<
<RCInputNumber
className={cn(
'flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900',
className
className,
)}
ref={ref}
{...props}

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

@ -11,7 +11,7 @@ const Label = React.forwardRef<
ref={ref}
className={cn(
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-200',
className
className,
)}
{...props}
/>

2
client/src/components/ui/ModelSelect.jsx
View file

@ -7,7 +7,7 @@ import {
DropdownMenuRadioGroup,
DropdownMenuSeparator,
DropdownMenuTrigger,
DropdownMenuRadioItem
DropdownMenuRadioItem,
} from './DropdownMenu.tsx';
import store from '~/store';
import { useRecoilValue } from 'recoil';

8
client/src/components/ui/MultiSelectDropDown.jsx
View file

@ -16,7 +16,7 @@ function MultiSelectDropDown({
containerClassName,
isSelected,
className,
optionValueKey = 'value'
optionValueKey = 'value',
}) {
const [isOpen, setIsOpen] = useState(false);
const menuRef = useRef(null);
@ -37,7 +37,7 @@ function MultiSelectDropDown({
<Listbox.Button
className={cn(
'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
className
className,
)}
id={excludeIds[0]}
onClick={() => setIsOpen((prev) => !prev)}
@ -57,7 +57,7 @@ function MultiSelectDropDown({
<span
className={cn(
'flex h-6 items-center gap-1 truncate text-sm text-gray-900 dark:text-white',
!showLabel ? 'text-xs' : ''
!showLabel ? 'text-xs' : '',
)}
>
{!showLabel && title.length > 0 && (
@ -148,7 +148,7 @@ function MultiSelectDropDown({
<span
className={cn(
'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100',
selected ? 'font-semibold' : ''
selected ? 'font-semibold' : '',
)}
>
{option.name}

10
client/src/components/ui/SelectDropDown.jsx
View file

@ -13,18 +13,18 @@ function SelectDropDown({
showLabel = true,
containerClassName,
subContainerClassName,
className
className,
}) {
return (
<div className={cn('flex items-center justify-center gap-2', containerClassName)}>
<div className={cn("relative w-full", subContainerClassName)}>
<div className={cn('relative w-full', subContainerClassName)}>
<Listbox value={value} onChange={setValue} disabled={disabled}>
{({ open }) => (
<>
<Listbox.Button
className={cn(
'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
className
className,
)}
>
{' '}
@ -41,7 +41,7 @@ function SelectDropDown({
<span
className={cn(
'flex h-6 items-center gap-1 truncate text-sm text-gray-900 dark:text-white',
!showLabel ? 'text-xs' : ''
!showLabel ? 'text-xs' : '',
)}
>
{!showLabel && (
@ -87,7 +87,7 @@ function SelectDropDown({
<span
className={cn(
'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100',
option === value ? 'font-semibold' : ''
option === value ? 'font-semibold' : '',
)}
>
{option}

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

@ -26,7 +26,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
className="block h-4 w-4 rounded-full border-2 border-gray-400 bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-100 dark:bg-gray-400 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900"
/>
</SliderPrimitive.Root>
)
),
);
Slider.displayName = SliderPrimitive.Root.displayName;

12
client/src/components/ui/Switch.tsx
View file

@ -1,5 +1,5 @@
import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"
import * as React from 'react'
import * as SwitchPrimitives from '@radix-ui/react-switch'
import { cn } from '../../utils';
@ -9,19 +9,19 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-600 data-[state=unchecked]:bg-gray-200",
className
'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-600 data-[state=unchecked]:bg-gray-200',
className,
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.45)] transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.45)] transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
)}
/>
</SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName
export { Switch }

4
client/src/components/ui/Tabs.tsx
View file

@ -15,7 +15,7 @@ const TabsList = React.forwardRef<
ref={ref}
className={cn(
'inline-flex items-center justify-center rounded-md bg-gray-100 p-1 dark:bg-gray-800',
className
className,
)}
{...props}
/>
@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger
className={cn(
'inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5 text-sm font-medium text-gray-700 transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm dark:text-gray-200 dark:data-[state=active]:bg-gray-700 dark:data-[state=active]:text-gray-100',
className
className,
)}
{...props}
ref={ref}