mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-18 09:20:15 +01:00
4d4a6b53f1
* 🎨 style: adjust padding and class names in UI components * 🎨 style: update ExportModal export button, update Export button hover style, refactor ChatForm style and fixed isRTL styles, update AttachFile position * 🎨 style: remove redundant border classes in SettingsTabs components for cleaner UI * 🎨 style: refactor Account component, extract DisplayUsernameMessages, and remove redundant border classes for cleaner layout * 🎨 style: conditionally render Dropdown in ForkSettings component for improved UI responsiveness * 🎨 style: replace DropdownNoState with Dropdown in voice selection components for consistency * 🎨 style: update Settings component layout for better responsivenes on large screens * 🎨 style: remove redundant margin-top classes for cleaner layout in various components
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { FileUpload, TooltipAnchor } from '~/components/ui';
|
|
import { AttachmentIcon } from '~/components/svg';
|
|
import { useLocalize } from '~/hooks';
|
|
import { cn } from '~/utils';
|
|
|
|
const AttachFile = ({
|
|
isRTL,
|
|
disabled,
|
|
handleFileChange,
|
|
}: {
|
|
isRTL: boolean;
|
|
disabled?: boolean | null;
|
|
handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
}) => {
|
|
const localize = useLocalize();
|
|
const isUploadDisabled = disabled ?? false;
|
|
|
|
return (
|
|
<FileUpload handleFileChange={handleFileChange} className="flex">
|
|
<TooltipAnchor
|
|
id="audio-recorder"
|
|
aria-label={localize('com_sidepanel_attach_files')}
|
|
disabled={isUploadDisabled}
|
|
className={cn(
|
|
'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover',
|
|
isRTL ? 'bottom-2 right-2' : 'bottom-2 left-1 md:left-2',
|
|
)}
|
|
description={localize('com_sidepanel_attach_files')}
|
|
>
|
|
<div className="flex w-full items-center justify-center gap-2">
|
|
<AttachmentIcon />
|
|
</div>
|
|
</TooltipAnchor>
|
|
</FileUpload>
|
|
);
|
|
};
|
|
|
|
export default React.memo(AttachFile);
|