CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-08-04 14:57:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

refactor: tokenize Files and Auth surfaces, text, borders, and CTAs

Browse source
This commit is contained in:
Marco Beretta 2026-06-20 18:44:17 +02:00
parent d407859a4e
commit 29395381ea
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
25 changed files with 97 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/src/components/Auth/AuthLayout.tsx
View file

@ -57,7 +57,7 @@ function AuthLayout({
};
return (
<div className="relative flex min-h-screen flex-col bg-white dark:bg-gray-900">
<div className="relative flex min-h-screen flex-col bg-surface-primary">
<Banner />
<BlinkAnimation active={isFetching}>
<div className="mt-6 h-10 w-full bg-cover">
@ -74,10 +74,10 @@ function AuthLayout({
</div>
<main className="flex flex-grow items-center justify-center">
<div className="w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
<div className="w-authPageWidth overflow-hidden bg-surface-primary px-6 py-4 sm:max-w-md sm:rounded-lg">
{!hasStartupConfigError && !isFetching && header && (
<h1
className="mb-4 text-center text-3xl font-semibold text-black dark:text-white"
className="mb-4 text-center text-3xl font-semibold text-text-primary"
style={{ userSelect: 'none' }}
>
{header}

2
client/src/components/Auth/Footer.tsx
View file

@ -37,7 +37,7 @@ function Footer({ startupConfig }: { startupConfig: TStartupConfig | null | unde
<div className="align-end m-4 flex justify-center gap-2" role="contentinfo">
{privacyPolicyRender}
{privacyPolicyRender && termsOfServiceRender && (
<div className="border-r-[1px] border-gray-300 dark:border-gray-600" />
<div className="border-r-[1px] border-border-medium" />
)}
{termsOfServiceRender}
</div>

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

@ -110,7 +110,7 @@ function Login() {
/>
)}
{startupConfig?.registrationEnabled === true && (
<p className="my-4 text-center text-sm font-light text-gray-700 dark:text-white">
<p className="my-4 text-center text-sm font-light text-text-secondary">
{' '}
{localize('com_auth_no_account')}{' '}
<a

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

@ -59,7 +59,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
const renderError = (fieldName: string) => {
const errorMessage = errors[fieldName]?.message;
return errorMessage ? (
<span role="alert" className="mt-1 text-sm text-red-600 dark:text-red-500">
<span role="alert" className="mt-1 text-sm text-text-destructive">
{String(errorMessage)}
</span>
) : null;
@ -76,7 +76,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
return (
<>
{showResendLink && (
<div className="mt-2 rounded-md border border-green-500 bg-green-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200">
<div className="mt-2 rounded-md border border-green-500 bg-green-500/10 px-3 py-2 text-sm text-text-secondary">
{localize('com_auth_email_verification_resend_prompt')}
<button
type="button"

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

@ -116,7 +116,7 @@ const Registration: React.FC = () => {
)}
</div>
{errors[id] && (
<span role="alert" className="mt-1 text-sm text-red-500">
<span role="alert" className="mt-1 text-sm text-text-destructive">
{String(errors[id]?.message) ?? ''}
</span>
)}
@ -133,7 +133,7 @@ const Registration: React.FC = () => {
)}
{registerUser.isSuccess && countdown > 0 && (
<div
className="rounded-md border border-green-500 bg-green-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
className="rounded-md border border-green-500 bg-green-500/10 px-3 py-2 text-sm text-text-secondary"
role="alert"
>
{localize(
@ -239,7 +239,7 @@ const Registration: React.FC = () => {
</div>
</form>
<p className="my-4 text-center text-sm font-light text-gray-700 dark:text-white">
<p className="my-4 text-center text-sm font-light text-text-secondary">
{localize('com_auth_already_have_account')}{' '}
<a
href={loginPage()}

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

@ -110,13 +110,13 @@ function RequestPasswordReset() {
/>
<label
htmlFor="email"
className="absolute -top-2 left-2 z-10 bg-white px-2 text-sm text-gray-600 transition-all peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:-top-2 peer-focus:text-sm peer-focus:text-green-600 dark:bg-gray-900 dark:text-gray-400 dark:peer-focus:text-green-500"
className="absolute -top-2 left-2 z-10 bg-surface-primary px-2 text-sm text-text-secondary transition-all peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-text-tertiary peer-focus:-top-2 peer-focus:text-sm peer-focus:text-green-600 dark:peer-focus:text-green-500"
>
{localize('com_auth_email_address')}
</label>
</div>
{errors.email && (
<p role="alert" className="text-sm font-medium text-red-600 dark:text-red-400">
<p role="alert" className="text-sm font-medium text-text-destructive">
{errors.email.message}
</p>
)}

6
client/src/components/Auth/SocialLoginRender.tsx
View file

@ -122,10 +122,8 @@ function SocialLoginRender({
<>
{startupConfig.emailLoginEnabled && (
<>
<div className="relative mt-6 flex w-full items-center justify-center border border-t border-gray-300 uppercase dark:border-gray-600">
<div className="absolute bg-white px-3 text-xs text-black dark:bg-gray-900 dark:text-white">
Or
</div>
<div className="relative mt-6 flex w-full items-center justify-center border border-t border-border-medium uppercase">
<div className="absolute bg-surface-primary px-3 text-xs text-text-primary">Or</div>
</div>
<div className="mt-8" />
</>

8
client/src/components/Auth/TwoFactorScreen.tsx
View file

@ -105,7 +105,9 @@ const TwoFactorScreen: React.FC = React.memo(() => {
</InputOTP>
)}
/>
{errors.token && <span className="text-sm text-red-500">{errors.token.message}</span>}
{errors.token && (
<span className="text-sm text-text-destructive">{errors.token.message}</span>
)}
</div>
)}
{useBackup && (
@ -134,7 +136,7 @@ const TwoFactorScreen: React.FC = React.memo(() => {
)}
/>
{errors.backupCode && (
<span className="text-sm text-red-500">{errors.backupCode.message}</span>
<span className="text-sm text-text-destructive">{errors.backupCode.message}</span>
)}
</div>
)}
@ -144,7 +146,7 @@ const TwoFactorScreen: React.FC = React.memo(() => {
aria-label={localize('com_auth_continue')}
data-testid="login-button"
disabled={isLoading}
className="w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-80 dark:bg-green-600 dark:hover:bg-green-700"
className="w-full rounded-2xl bg-surface-submit px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-surface-submit-hover disabled:opacity-80"
>
{isLoading ? localize('com_auth_email_verifying_ellipsis') : localize('com_ui_verify')}
</button>

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

@ -78,16 +78,14 @@ function RequestPasswordReset() {
const VerificationSuccess = () => (
<div className="flex flex-col items-center justify-center">
<h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
{headerText}
</h1>
<h1 className="mb-4 text-center text-3xl font-semibold text-text-primary">{headerText}</h1>
{countdown > 0 && (
<p className="text-center text-lg text-gray-600 dark:text-gray-400">
<p className="text-center text-lg text-text-secondary">
{localize('com_auth_email_verification_redirecting', { 0: countdown.toString() })}
</p>
)}
{showResendLink && countdown === 0 && (
<p className="text-center text-lg text-gray-600 dark:text-gray-400">
<p className="text-center text-lg text-text-secondary">
{localize('com_auth_email_verification_resend_prompt')}
<button
className="ml-2 text-link hover:underline"
@ -103,7 +101,7 @@ function RequestPasswordReset() {
const VerificationInProgress = () => (
<div className="flex flex-col items-center justify-center">
<h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
<h1 className="mb-4 text-center text-3xl font-semibold text-text-primary">
{localize('com_auth_email_verification_in_progress')}
</h1>
<div className="mt-4 flex justify-center">
@ -113,7 +111,7 @@ function RequestPasswordReset() {
);
return (
<div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
<div className="flex min-h-screen flex-col items-center justify-center bg-surface-primary pt-6 sm:pt-0">
<div className="absolute bottom-0 left-0 m-4">
<ThemeSelector />
</div>

2
client/src/components/Files/ActionButton.tsx
View file

@ -11,7 +11,7 @@ export default function ActionButton({ onClick }: ActionButtonProps) {
return (
<div className="w-32">
<Button
className="w-full rounded-md border border-black bg-white p-0 text-black hover:bg-black hover:text-white"
className="w-full rounded-md border border-text-primary bg-surface-primary p-0 text-text-primary hover:bg-primary hover:text-primary-foreground"
onClick={onClick}
>
{/* Action Button */}

5
client/src/components/Files/DeleteIconButton.tsx
View file

@ -8,7 +8,10 @@ type DeleteIconButtonProps = {
export default function DeleteIconButton({ onClick }: DeleteIconButtonProps) {
return (
<div className="w-fit">
<Button className="bg-red-400 p-3" onClick={onClick}>
<Button
className="bg-surface-destructive p-3 hover:bg-surface-destructive-hover"
onClick={onClick}
>
<TrashIcon />
</Button>
</div>

4
client/src/components/Files/FileDashboardView.tsx
View file

@ -7,7 +7,7 @@ const FileDashboardView = () => {
const params = useParams();
const navigate = useNavigate();
return (
<div className="bg-[#f9f9f9] p-0 lg:p-7">
<div className="bg-surface-primary p-0 lg:p-7">
<div className="ml-3 mt-3 flex flex-row justify-between">
{params.vectorStoreId && (
<Button
@ -22,7 +22,7 @@ const FileDashboardView = () => {
</Button>
)}
</div>
<div className="flex h-screen max-w-full flex-row divide-x bg-[#f9f9f9]">
<div className="flex h-screen max-w-full flex-row divide-x bg-surface-primary">
<div className={`w-full lg:w-1/3 ${params.vectorStoreId ? 'hidden lg:block' : ''}`}>
<VectorStoreSidePanel />
</div>

14
client/src/components/Files/FileList/DataTableFile.tsx
View file

@ -117,7 +117,7 @@ export default function DataTableFile<TData, TValue>({
{isDeleting ? (
<Spinner className="h-4 w-4" />
) : (
<TrashIcon className="h-4 w-4 text-red-400" />
<TrashIcon className="h-4 w-4 text-text-destructive" />
)}
{localize('com_ui_delete')}
</Button>
@ -132,7 +132,7 @@ export default function DataTableFile<TData, TValue>({
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="z-[1001] dark:border-gray-700 dark:bg-gray-850"
className="z-[1001] border-border-light bg-surface-dialog"
>
{table
.getAllColumns()
@ -141,7 +141,7 @@ export default function DataTableFile<TData, TValue>({
return (
<DropdownMenuCheckboxItem
key={column.id}
className="cursor-pointer capitalize dark:text-white dark:hover:bg-gray-800"
className="cursor-pointer capitalize text-text-primary hover:bg-surface-hover"
checked={column.getIsVisible()}
onCheckedChange={(value) => column.toggleVisibility(Boolean(value))}
>
@ -192,7 +192,7 @@ export default function DataTableFile<TData, TValue>({
return (
<TableHead
key={header.id}
className="align-start sticky top-0 rounded-t border-b border-black/10 bg-white px-2 py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-700 dark:text-gray-100 sm:px-4 sm:py-2"
className="align-start sticky top-0 rounded-t border-b border-black/10 bg-surface-secondary px-2 py-1 text-left font-medium text-text-secondary dark:border-white/10 sm:px-4 sm:py-2"
style={style}
>
{header.isPlaceholder
@ -210,7 +210,7 @@ export default function DataTableFile<TData, TValue>({
<TableRow
key={row.id}
data-state={row.getIsSelected() && 'selected'}
className="border-b border-black/10 text-left text-gray-600 dark:border-white/10 dark:text-gray-300 [tr:last-child_&]:border-b-0"
className="border-b border-black/10 text-left text-text-secondary dark:border-white/10 [tr:last-child_&]:border-b-0"
>
{row.getVisibleCells().map((cell, index) => {
const maxWidth =
@ -254,7 +254,7 @@ export default function DataTableFile<TData, TValue>({
})}
</div>
<Button
className="dark:border-gray-500 dark:hover:bg-gray-600"
className="border-border-medium hover:bg-surface-hover"
variant="outline"
size="sm"
onClick={() => table.previousPage()}
@ -263,7 +263,7 @@ export default function DataTableFile<TData, TValue>({
{localize('com_ui_prev')}
</Button>
<Button
className="dark:border-gray-500 dark:hover:bg-gray-600"
className="border-border-medium hover:bg-surface-hover"
variant="outline"
size="sm"
onClick={() => table.nextPage()}

8
client/src/components/Files/FileList/FileListItem.tsx
View file

@ -10,18 +10,18 @@ type FileListItemProps = {
export default function FileListItem({ file, deleteFile, width = '400px' }: FileListItemProps) {
return (
<div className="w-100 my-3 mr-2 flex cursor-pointer flex-row rounded-md border border-0 bg-white p-4 transition duration-300 ease-in-out hover:bg-slate-200">
<div className="w-100 my-3 mr-2 flex cursor-pointer flex-row rounded-md border border-0 bg-surface-secondary p-4 transition duration-300 ease-in-out hover:bg-surface-hover">
<div className="flex w-1/2 flex-col justify-around align-middle">
<strong>{file.filename}</strong>
<p className="text-sm text-gray-500">{file.object}</p>
<p className="text-sm text-text-tertiary">{file.object}</p>
</div>
<div className="w-2/6 text-gray-500">
<div className="w-2/6 text-text-tertiary">
<p>({file.bytes / 1000}KB)</p>
<p className="text-sm">{file.createdAt?.toString()}</p>
</div>
<div className="flex w-1/6 justify-around">
<Button
className="my-0 ml-3 bg-transparent p-0 text-[#666666] hover:bg-slate-200"
className="my-0 ml-3 bg-transparent p-0 text-text-destructive hover:bg-surface-hover"
onClick={() => deleteFile(file._id)}
>
<TrashIcon className="m-0 p-0" />

8
client/src/components/Files/FileList/FileListItem2.tsx
View file

@ -22,7 +22,7 @@ export default function FileListItem2({
onClick={() => {
navigate('file_id_abcdef');
}}
className="w-100 mt-2 flex h-fit cursor-pointer flex-row rounded-md border border-0 bg-white p-4 transition duration-300 ease-in-out hover:bg-slate-200"
className="w-100 mt-2 flex h-fit cursor-pointer flex-row rounded-md border border-0 bg-surface-secondary p-4 transition duration-300 ease-in-out hover:bg-surface-hover"
>
<div className="flex w-10/12 flex-col justify-around md:flex-row">
<div className="flex w-2/5 flex-row">
@ -31,7 +31,7 @@ export default function FileListItem2({
</div>
<div className="w-3/4 content-center">{file.filename}</div>
</div>
<div className="flex w-fit flex-row flex-wrap text-gray-500 md:w-3/5">
<div className="flex w-fit flex-row flex-wrap text-text-tertiary md:w-3/5">
{attachedVectorStores.map((vectorStore, index) => {
if (index === 4) {
return (
@ -60,11 +60,11 @@ export default function FileListItem2({
</div>
</div>
<div className="mr-0 flex w-2/12 flex-col items-center justify-evenly sm:mr-4 md:flex-row">
<Button className="w-min content-center bg-transparent text-gray-500 hover:bg-slate-200">
<Button className="w-min content-center bg-transparent text-text-tertiary hover:bg-surface-hover">
<DotsIcon className="text-grey-100" />
</Button>
<Button
className="w-min bg-transparent text-[#666666] hover:bg-slate-200"
className="w-min bg-transparent text-text-destructive hover:bg-surface-hover"
onClick={() => deleteFile(file._id)}
>
<TrashIcon className="" />

26
client/src/components/Files/FileList/FilePreview.tsx
View file

@ -44,7 +44,7 @@ export default function FilePreview() {
const params = useParams();
return (
<div className="m-3 bg-white p-2 sm:p-4 md:p-6 lg:p-10">
<div className="m-3 bg-surface-primary p-2 sm:p-4 md:p-6 lg:p-10">
<div className="flex flex-col justify-between md:flex-row">
<div className="flex flex-col">
<b className="hidden text-sm md:text-base lg:block lg:text-lg">FILE</b>
@ -73,18 +73,18 @@ export default function FilePreview() {
<div className="mt-3 flex flex-col">
<div className="flex flex-row">
<span className="flex w-1/2 flex-row items-center sm:w-1/4 md:w-2/5">
<InfoIcon className="size-4 text-gray-500" />
<InfoIcon className="size-4 text-text-tertiary" />
&nbsp; File ID
</span>
<span className="w-1/2 text-gray-500 sm:w-3/4 md:w-3/5">{file._id}</span>
<span className="w-1/2 text-text-tertiary sm:w-3/4 md:w-3/5">{file._id}</span>
</div>
<div className="mt-3 flex flex-row">
<span className="flex w-1/2 flex-row items-center sm:w-1/4 md:w-2/5">
<CircleIcon className="m-0 size-4 p-0 text-gray-500" />
<CircleIcon className="m-0 size-4 p-0 text-text-tertiary" />
&nbsp; Status
</span>
<div className="w-1/2 sm:w-3/4 md:w-3/5">
<span className="flex w-20 flex-row items-center justify-evenly rounded-full bg-[#f2f8ec] p-1 text-[#91c561]">
<span className="flex w-20 flex-row items-center justify-evenly rounded-full bg-status-success-subtle p-1 text-status-success">
<CheckMark className="m-0 p-0" />
<div>{file.object}</div>
</span>
@ -92,24 +92,24 @@ export default function FilePreview() {
</div>
<div className="mt-3 flex flex-row">
<span className="flex w-1/2 flex-row items-center sm:w-1/4 md:w-2/5">
<Clock3Icon className="m-0 size-4 p-0 text-gray-500" />
<Clock3Icon className="m-0 size-4 p-0 text-text-tertiary" />
&nbsp; Purpose
</span>
<span className="w-1/2 text-gray-500 sm:w-3/4 md:w-3/5">{file.message}</span>
<span className="w-1/2 text-text-tertiary sm:w-3/4 md:w-3/5">{file.message}</span>
</div>
<div className="mt-3 flex flex-row">
<span className="flex w-1/2 flex-row items-center sm:w-1/4 md:w-2/5">
<Clock3Icon className="m-0 size-4 p-0 text-gray-500" />
<Clock3Icon className="m-0 size-4 p-0 text-text-tertiary" />
&nbsp; Size
</span>
<span className="w-1/2 text-gray-500 sm:w-3/4 md:w-3/5">{file.bytes}</span>
<span className="w-1/2 text-text-tertiary sm:w-3/4 md:w-3/5">{file.bytes}</span>
</div>
<div className="mt-3 flex flex-row">
<span className="flex w-1/2 flex-row items-center sm:w-1/4 md:w-2/5">
<Clock3Icon className="m-0 size-4 p-0 text-gray-500" />
<Clock3Icon className="m-0 size-4 p-0 text-text-tertiary" />
&nbsp; Created At
</span>
<span className="w-1/2 text-gray-500 sm:w-3/4 md:w-3/5">
<span className="w-1/2 text-text-tertiary sm:w-3/4 md:w-3/5">
{file.createdAt?.toString()}
</span>
</div>
@ -133,7 +133,7 @@ export default function FilePreview() {
<div className="flex w-3/5 flex-row md:w-1/2 xl:w-1/3">
<div className="content-center text-nowrap">{vectors.created_at.toString()}</div>
<Button
className="m-0 ml-3 h-full bg-transparent p-0 text-[#666666] hover:bg-slate-200"
className="m-0 ml-3 h-full bg-transparent p-0 text-text-destructive hover:bg-surface-hover"
onClick={() => {
console.log('Remove from vector store');
}}
@ -161,7 +161,7 @@ export default function FilePreview() {
<div className="flex w-3/5 flex-row md:w-1/2 xl:w-1/3">
<div className="content-center text-nowrap">{thread.createdAt}</div>
<Button
className="m-0 ml-3 h-full bg-transparent p-0 text-[#666666] hover:bg-slate-200"
className="m-0 ml-3 h-full bg-transparent p-0 text-text-destructive hover:bg-surface-hover"
onClick={() => {
console.log('Remove from thread');
}}

4
client/src/components/Files/FileList/FileTableColumns.tsx
View file

@ -80,7 +80,7 @@ export const fileTableColumns: ColumnDef<TFileWithVectors>[] = [
return (
<span
key={index}
className="ml-2 mt-2 flex w-fit flex-row items-center rounded-full bg-[#f5f5f5] px-2 text-gray-500"
className="ml-2 mt-2 flex w-fit flex-row items-center rounded-full bg-surface-tertiary px-2 text-text-tertiary"
>
<PlusIcon className="h-3 w-3" />
&nbsp;
@ -119,7 +119,7 @@ export const fileTableColumns: ColumnDef<TFileWithVectors>[] = [
cell: () => {
return (
<>
<Button className="w-min content-center bg-transparent text-gray-500 hover:bg-slate-200">
<Button className="w-min content-center bg-transparent text-text-tertiary hover:bg-surface-hover">
<DotsIcon className="text-grey-100 m-0 size-5 p-0" />
</Button>
</>

2
client/src/components/Files/FileList/UploadFileButton.tsx
View file

@ -9,7 +9,7 @@ type UploadFileProps = {
export default function UploadFileButton({ onClick }: UploadFileProps) {
return (
<div className="w-full">
<Button className="w-full bg-black px-3 text-white" onClick={onClick}>
<Button className="w-full bg-primary px-3 text-primary-foreground" onClick={onClick}>
<PlusIcon className="h-4 w-4 font-bold" />
&nbsp; <span className="text-nowrap">Upload New File</span>
</Button>

12
client/src/components/Files/FileList/UploadFileModal.tsx
View file

@ -18,11 +18,11 @@ const UploadFileModal = ({ open, onOpenChange }) => {
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
className={cn(
'w-11/12 overflow-x-auto p-3 shadow-2xl dark:bg-gray-700 dark:text-white lg:w-2/3 xl:w-2/5',
'w-11/12 overflow-x-auto bg-surface-dialog p-3 text-text-primary shadow-2xl lg:w-2/3 xl:w-2/5',
)}
>
<DialogHeader>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
<DialogTitle className="text-lg font-medium leading-6 text-text-primary">
Upoad a File
</DialogTitle>
</DialogHeader>
@ -33,7 +33,7 @@ const UploadFileModal = ({ open, onOpenChange }) => {
</div>
<div className="flex w-full flex-col text-center sm:w-4/5 sm:text-left">
<div className="italic">Please upload square file, size less than 100KB</div>
<div className="mt-4 flex w-full flex-row items-center bg-[#f9f9f9] p-2">
<div className="mt-4 flex w-full flex-row items-center bg-surface-secondary p-2">
<div className="w-1/2 sm:w-1/3">
<Button>Choose File</Button>
</div>
@ -43,13 +43,15 @@ const UploadFileModal = ({ open, onOpenChange }) => {
</div>
<div className="mt-3 flex w-full flex-col">
<label htmlFor="name">Name</label>
<label className="hidden text-[#808080] sm:block">The name of the uploaded file</label>
<label className="hidden text-text-secondary sm:block">
The name of the uploaded file
</label>
<Input type="text" id="name" name="name" placeholder="Name" />
</div>
<div className="mt-3 flex w-full flex-col">
<label htmlFor="purpose">Purpose</label>
<label className="hidden text-[#808080] sm:block">
<label className="hidden text-text-secondary sm:block">
The purpose of the uploaded file
</label>
<Input type="text" id="purpose" name="purpose" placeholder="Purpose" />

2
client/src/components/Files/FilesListView.tsx
View file

@ -10,7 +10,7 @@ export default function FilesListView() {
const navigate = useNavigate();
const localize = useLocalize();
return (
<div className="bg-[#f9f9f9] p-0 lg:p-7">
<div className="bg-surface-primary p-0 lg:p-7">
<div className="m-4 flex w-full flex-row justify-between md:m-2">
<FilesSectionSelector />
{params.fileId != null && params.fileId && (

2
client/src/components/Files/FilesSectionSelector.tsx
View file

@ -18,7 +18,7 @@ export default function FilesSectionSelector() {
const lightButton = { backgroundColor: '#f9f9f9', color: 'black' };
return (
<div className="flex h-12 w-52 flex-row justify-center rounded border bg-white p-1">
<div className="flex h-12 w-52 flex-row justify-center rounded border bg-surface-secondary p-1">
<div className="flex w-2/3 items-center pr-1">
<Button
className="w-full rounded rounded-lg border"

2
client/src/components/Files/VectorStore/VectorStoreButton.tsx
View file

@ -9,7 +9,7 @@ type VectorStoreButtonProps = {
export default function VectorStoreButton({ onClick }: VectorStoreButtonProps) {
return (
<div className="w-full">
<Button className="w-full bg-black p-0 text-white" onClick={onClick}>
<Button className="w-full bg-primary p-0 text-primary-foreground" onClick={onClick}>
<PlusIcon className="h-4 w-4 font-bold" />
&nbsp; <span className="text-nowrap">Add Store</span>
</Button>

10
client/src/components/Files/VectorStore/VectorStoreListItem.tsx
View file

@ -20,13 +20,13 @@ export default function VectorStoreListItem({
onClick={() => {
navigate('vs_id_abcdef');
}}
className="w-100 mt-2 flex cursor-pointer flex-row justify-around rounded-md border border-0 bg-white p-4 transition duration-300 ease-in-out hover:bg-slate-200"
className="w-100 mt-2 flex cursor-pointer flex-row justify-around rounded-md border border-0 bg-surface-secondary p-4 transition duration-300 ease-in-out hover:bg-surface-hover"
>
<div className="flex w-1/2 flex-col justify-around align-middle">
<strong>{vectorStore.name}</strong>
<p className="text-sm text-gray-500">{vectorStore.object}</p>
<p className="text-sm text-text-tertiary">{vectorStore.object}</p>
</div>
<div className="w-2/6 text-gray-500">
<div className="w-2/6 text-text-tertiary">
<p>
{localize('com_ui_files_count_size', {
0: vectorStore.file_counts?.total ?? 0,
@ -36,11 +36,11 @@ export default function VectorStoreListItem({
<p className="text-sm">{vectorStore.created_at.toString()}</p>
</div>
<div className="flex w-1/6 flex-col justify-around sm:flex-row">
<Button className="m-0 w-full content-center bg-transparent p-0 text-gray-500 hover:bg-slate-200 sm:w-min">
<Button className="m-0 w-full content-center bg-transparent p-0 text-text-tertiary hover:bg-surface-hover sm:w-min">
<DotsIcon className="text-grey-100 m-0 p-0" />
</Button>
<Button
className="m-0 w-full bg-transparent p-0 text-[#666666] hover:bg-slate-200 sm:w-fit"
className="m-0 w-full bg-transparent p-0 text-text-destructive hover:bg-surface-hover sm:w-fit"
onClick={() => deleteVectorStore(vectorStore._id)}
>
<TrashIcon className="m-0 p-0" />

36
client/src/components/Files/VectorStore/VectorStorePreview.tsx
View file

@ -98,7 +98,7 @@ export default function VectorStorePreview() {
const params = useParams();
return (
<div className="m-3 ml-1 mr-7 bg-white p-2 sm:p-4 md:p-6 lg:p-10">
<div className="m-3 ml-1 mr-7 bg-surface-primary p-2 sm:p-4 md:p-6 lg:p-10">
<div className="flex flex-col justify-between md:flex-row">
<div className="flex flex-col">
<b className="hidden text-base md:text-lg lg:block lg:text-xl">VECTOR STORE</b>
@ -127,57 +127,59 @@ export default function VectorStorePreview() {
<div className="mt-3 flex flex-col">
<div className="flex flex-row">
<span className="flex w-1/2 flex-row items-center md:w-2/5">
<InfoIcon className="text-base text-gray-500 md:text-lg lg:text-xl" />
<InfoIcon className="text-base text-text-tertiary md:text-lg lg:text-xl" />
&nbsp; ID
</span>
<span className="w-1/2 break-words text-gray-500 md:w-3/5">{vectorStore._id}</span>
<span className="w-1/2 break-words text-text-tertiary md:w-3/5">{vectorStore._id}</span>
</div>
<div className="mt-3 flex flex-row">
<span className="flex w-1/2 flex-row items-center md:w-2/5">
<BarChart4Icon className="text-base text-gray-500 md:text-lg lg:text-xl" />
<BarChart4Icon className="text-base text-text-tertiary md:text-lg lg:text-xl" />
&nbsp;Usage this &nbsp;month
</span>
<div className="w-1/2 md:w-3/5">
<p className="text-gray-500">
<span className="text-[#91c561]">0 KB hours</span>
<p className="text-text-tertiary">
<span className="text-status-success">0 KB hours</span>
&nbsp; Free until end of 2024
</p>
</div>
</div>
<div className="mt-3 flex flex-row">
<span className="flex w-1/2 flex-row items-center md:w-2/5">
<InfoIcon className="text-base text-gray-500 md:text-lg lg:text-xl" />
<InfoIcon className="text-base text-text-tertiary md:text-lg lg:text-xl" />
&nbsp;Size
</span>
<span className="w-1/2 text-gray-500 md:w-3/5">{vectorStore.bytes} bytes</span>
<span className="w-1/2 text-text-tertiary md:w-3/5">{vectorStore.bytes} bytes</span>
</div>
<div className="mt-3 flex flex-row">
<span className="flex w-1/2 flex-row items-center md:w-2/5">
<Clock3 className="text-base text-gray-500 md:text-lg lg:text-xl" />
<Clock3 className="text-base text-text-tertiary md:text-lg lg:text-xl" />
&nbsp;Last active
</span>
<span className="w-1/2 text-gray-500 md:w-3/5">{vectorStore.lastActive}</span>
<span className="w-1/2 text-text-tertiary md:w-3/5">{vectorStore.lastActive}</span>
</div>
<div className="mt-3 flex flex-row">
<span className="flex w-1/2 flex-row items-center md:w-2/5">
<InfoIcon className="text-base text-gray-500 md:text-lg lg:text-xl" />
<InfoIcon className="text-base text-text-tertiary md:text-lg lg:text-xl" />
&nbsp;Expiration policy
</span>
<span className="w-1/2 text-gray-500 md:w-3/5">{vectorStore.expirationPolicy}</span>
<span className="w-1/2 text-text-tertiary md:w-3/5">{vectorStore.expirationPolicy}</span>
</div>
<div className="mt-3 flex flex-row">
<span className="flex w-1/2 flex-row items-center md:w-2/5">
<FileClock className="text-base text-gray-500 md:text-lg lg:text-xl" />
<FileClock className="text-base text-text-tertiary md:text-lg lg:text-xl" />
&nbsp;Expires
</span>
<span className="w-1/2 text-gray-500 md:w-3/5">{vectorStore.expires}</span>
<span className="w-1/2 text-text-tertiary md:w-3/5">{vectorStore.expires}</span>
</div>
<div className="mt-3 flex flex-row">
<span className="flex w-1/2 flex-row items-center md:w-2/5">
<Clock3 className="text-base text-gray-500 md:text-lg lg:text-xl" />
<Clock3 className="text-base text-text-tertiary md:text-lg lg:text-xl" />
&nbsp;Created At
</span>
<span className="w-1/2 text-gray-500 md:w-3/5">{vectorStore.createdAt.toString()}</span>
<span className="w-1/2 text-text-tertiary md:w-3/5">
{vectorStore.createdAt.toString()}
</span>
</div>
</div>
@ -200,7 +202,7 @@ export default function VectorStorePreview() {
<div className="flex w-1/2 flex-row lg:w-1/3">
<div className="content-center text-nowrap">{file.createdAt?.toString()}</div>
<Button
className="my-0 ml-3 h-min bg-transparent p-0 text-[#666666] hover:bg-slate-200"
className="my-0 ml-3 h-min bg-transparent p-0 text-text-destructive hover:bg-surface-hover"
onClick={() => console.log('click')}
>
<TrashIcon className="m-0 p-0" />

2
client/src/components/Files/VectorStoreView.tsx
View file

@ -8,7 +8,7 @@ export default function VectorStoreView() {
const params = useParams();
const navigate = useNavigate();
return (
<div className="max-h-[100vh] bg-[#f9f9f9] p-0 lg:p-7">
<div className="max-h-[100vh] bg-surface-primary p-0 lg:p-7">
<div className="m-4 flex max-h-[10vh] w-full flex-row justify-between md:m-2">
<FilesSectionSelector />
<Button