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

refactor: tokenize Chat file-upload table and upload status colors

Browse source 
Tokenize TemplateTable th/td/border classes (surface-primary, border-light,
text-primary/secondary) and FileUpload status colors (text-text-secondary,
text-text-destructive, text-status-success) plus the import button hover.
This commit is contained in:
Marco Beretta 2026-06-20 00:04:42 +02:00
parent 2763e03dd3
commit 2c1a77df34
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
2 changed files with 16 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/src/components/Chat/Input/Files/FileUpload.tsx
View file

@ -24,7 +24,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
text = null,
id = '1',
}) => {
const [statusColor, setStatusColor] = useState<string>('text-gray-600');
const [statusColor, setStatusColor] = useState<string>('text-text-secondary');
const [status, setStatus] = useState<null | string>(null);
const localize = useLocalize();
@ -39,13 +39,13 @@ const FileUpload: React.FC<FileUploadProps> = ({
const jsonData = JSON.parse(e.target?.result as string);
if (validator && !validator(jsonData)) {
setStatus('invalid');
setStatusColor('text-red-600');
setStatusColor('text-text-destructive');
return;
}
if (validator) {
setStatus('success');
setStatusColor('text-green-500 dark:text-green-500');
setStatusColor('text-status-success');
}
onFileSelected(jsonData);
@ -75,7 +75,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
type="button"
onClick={handleClick}
className={cn(
'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-normal transition-colors hover:bg-gray-100 hover:text-green-600 focus:ring-ring dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-green-500',
'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-normal text-text-secondary transition-colors hover:bg-surface-hover hover:text-status-success focus:ring-ring',
statusColor,
containerClassName,
)}

24
client/src/components/Chat/Input/Files/Table/TemplateTable.tsx
View file

@ -2,22 +2,22 @@ import { DotsIcon, TrashIcon } from '@librechat/client';
export default function Template() {
return (
<div className="max-h-[28rem] overflow-y-auto rounded-md border border-black/10 dark:border-white/10">
<div className="max-h-[28rem] overflow-y-auto rounded-md border border-border-light">
<table className="w-full border-separate border-spacing-0">
<thead>
<tr>
<th className="sticky top-0 rounded-t border-b border-black/10 bg-white px-4 py-2 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-900 dark:text-gray-100">
<th className="sticky top-0 rounded-t border-b border-border-light bg-surface-primary px-4 py-2 text-left font-medium text-text-primary">
Name
</th>
<th className="sticky top-0 rounded-t border-b border-black/10 bg-white px-4 py-2 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-900 dark:text-gray-100">
<th className="sticky top-0 rounded-t border-b border-border-light bg-surface-primary px-4 py-2 text-left font-medium text-text-primary">
Date
</th>
<th className="sticky top-0 rounded-t border-b border-black/10 bg-white px-4 py-2 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-900 dark:text-gray-100">
<th className="sticky top-0 rounded-t border-b border-border-light bg-surface-primary px-4 py-2 text-left font-medium text-text-primary">
Size
</th>
<th className="sticky top-0 rounded-t border-b border-black/10 bg-white px-4 py-2 text-right font-medium text-gray-700 dark:border-white/10 dark:bg-gray-900 dark:text-gray-100">
<th className="sticky top-0 rounded-t border-b border-border-light bg-surface-primary px-4 py-2 text-right font-medium text-text-primary">
<button
className="text-gray-500 hover:text-gray-600 radix-state-open:text-gray-600 dark:hover:text-gray-400 dark:radix-state-open:text-gray-400"
className="text-text-secondary hover:text-text-primary radix-state-open:text-text-primary"
type="button"
id="radix-:r67:"
aria-haspopup="menu"
@ -31,18 +31,18 @@ export default function Template() {
</thead>
<tbody>
<tr className="">
<td 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">
<td className="border-b border-border-light text-left text-text-secondary [tr:last-child_&]:border-b-0">
<div className="px-4 py-2 [tr[data-disabled=true]_&]:opacity-50">
File Transfer: Node to FastAPI
</div>
</td>
<td 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">
<td className="border-b border-border-light text-left text-text-secondary [tr:last-child_&]:border-b-0">
<div className="px-4 py-2 [tr[data-disabled=true]_&]:opacity-50">June 11, 2023</div>
</td>
<td 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">
<td className="border-b border-border-light text-left text-text-secondary [tr:last-child_&]:border-b-0">
<div className="px-4 py-2 [tr[data-disabled=true]_&]:opacity-50">11 mb</div>
</td>
<td 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">
<td className="border-b border-border-light text-left text-text-secondary [tr:last-child_&]:border-b-0">
<div className="px-4 py-2 [tr[data-disabled=true]_&]:opacity-50">
<div className="flex items-center justify-end gap-2">
<span className="" data-state="closed">
@ -51,7 +51,7 @@ export default function Template() {
target="_blank"
rel="noreferrer"
aria-label="View source chat"
className="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
className="text-text-secondary hover:text-text-primary"
>
<svg
stroke="currentColor"
@ -72,7 +72,7 @@ export default function Template() {
<span className="" data-state="closed">
<button
aria-label="Delete shared link"
className="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
className="text-text-secondary hover:text-text-primary"
>
<TrashIcon />
</button>