jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Refactor: enhance upload file button UI and enhance File and Image preview UI

Browse source
This commit is contained in:
igorrCarvalho 2024-05-29 17:48:38 -03:00
commit 40eaa0903b
6 changed files with 50 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
View file

@ -42,10 +42,10 @@ const TextAreaWrapper = ({
const fileClass =
files.length > 0
? "rounded-b-md border-t-0 border-border focus:border-t-0 focus:border-ring"
? "rounded-b-lg rounded-t-none border-t-0 border-border focus:border-t-0 focus:border-ring"
: "rounded-md border-t-2 border-border focus:border-ring";
const additionalClassNames = "form-modal-lockchat pl-10";
const additionalClassNames = "form-modal-lockchat pl-14";
return (
<Textarea

6
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
View file

@ -1,3 +1,5 @@
import ForwardedIconComponent from "../../../../../../../components/genericIconComponent";
const UploadFileButton = ({
fileInputRef,
handleFileChange,
@ -12,10 +14,10 @@ const UploadFileButton = ({
onChange={handleFileChange}
/>
<button
className="absolute rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
className="font-bold text-white transition-all hover:text-muted-foreground"
onClick={handleButtonClick}
>
Upload File
<ForwardedIconComponent name="PaperclipIcon" />
</button>
</div>
);

2
src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts
View file

@ -1,5 +1,5 @@
export const getClassNamesFilePreview = (inputFocus) => {
return `flex w-full items-center gap-2 rounded-t-md bg-background px-10 py-5 ${
return `flex w-full items-center gap-4 rounded-t-lg bg-background px-14 py-5 overflow-auto custom-scroll ${
inputFocus
? "border-2 border-b-0 border-ring"
: "border border-b-0 border-border"

13
src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
View file

@ -92,7 +92,6 @@ export default function ChatInput({
files={files}
isDragging={isDragging}
/>
<div className="form-modal-send-icon-position">
<ButtonSendWrapper
send={send}
@ -103,11 +102,13 @@ export default function ChatInput({
/>
</div>
<UploadFileButton
fileInputRef={fileInputRef}
handleFileChange={handleFileChange}
handleButtonClick={handleButtonClick}
/>
<div className="absolute bottom-2 left-4">
<UploadFileButton
fileInputRef={fileInputRef}
handleFileChange={handleFileChange}
handleButtonClick={handleButtonClick}
/>
</div>
</div>
{files.length > 0 && (
<div className={classNameFilePreview}>

43
src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx
View file

@ -1,5 +1,7 @@
import { useState } from "react";
import IconComponent from "../../../../../components/genericIconComponent";
import IconComponent, {
ForwardedIconComponent,
} from "../../../../../components/genericIconComponent";
export default function FilePreview({
error,
@ -12,12 +14,23 @@ export default function FilePreview({
error: boolean;
onDelete: () => void;
}) {
const isImage = file.type.toLowerCase().includes("image");
const [isHovered, setIsHovered] = useState(false);
const formatFileName = (name) => {
const fileExtension = name.split(".").pop(); // Get the file extension
const baseName = name.slice(0, name.lastIndexOf(".")); // Get the base name without the extension
if (baseName.length > 6) {
return `${baseName.slice(0, 10)}...${fileExtension}`;
}
return name;
};
return (
<div className="relative inline-block">
{loading ? (
<div className="flex h-24 w-24 items-center justify-center rounded-md border border-ring bg-background ">
<div className="flex h-20 w-20 items-center justify-center rounded-md border border-ring bg-background ">
<svg
aria-hidden="true"
className={`h-10 w-10 animate-spin fill-black text-muted`}
@ -39,19 +52,31 @@ export default function FilePreview({
<div>Error...</div>
) : (
<div
className={`relative h-24 w-24 rounded-md border border-ring bg-background transition duration-300 ${
className={`relative ${isImage ? "h-20 w-20" : "h-20 w-48"} cursor-pointer rounded-lg border border-ring bg-background transition duration-300 ${
isHovered ? "shadow-md" : ""
}`}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<img
src={URL.createObjectURL(file)}
alt="file"
className="block h-full w-full rounded-md border border-border"
/>
{isImage ? (
<img
src={URL.createObjectURL(file)}
alt="file"
className="block h-full w-full rounded-md border border-border"
/>
) : (
<div className="ml-3 flex h-full w-full items-center gap-2 text-sm">
<ForwardedIconComponent name="File" className="h-8 w-8" />
<div className="flex flex-col">
<span className="font-bold">{formatFileName(file.name)}</span>
<span>File</span>
</div>
</div>
)}
{isHovered && (
<div className="absolute bottom-20 left-20 flex h-5 w-5 items-center justify-center bg-black bg-opacity-30">
<div
className={`absolute ${isImage ? "bottom-16 left-16" : "bottom-16 left-44"} flex h-5 w-5 items-center justify-center`}
>
<div
className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 p-2 transition-all"
onClick={onDelete}

2
src/frontend/src/utils/styleUtils.ts
View file

@ -143,6 +143,7 @@ import {
X,
XCircle,
Zap,
PaperclipIcon,
} from "lucide-react";
import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
import { AWSIcon } from "../icons/AWS";
@ -526,4 +527,5 @@ export const nodeIconsLucide: iconsType = {
FolderPlusIcon,
FolderIcon,
Discord: FaDiscord,
PaperclipIcon,
};