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

Refactor: add FileCardWrapper to prevent state sharing

Browse source
This commit is contained in:
igorrCarvalho 2024-06-05 21:43:45 -03:00
commit 0522195a49
2 changed files with 42 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx Normal file
View file

@ -0,0 +1,35 @@
import { useState } from "react";
import ForwardedIconComponent from "../../../../../../../components/genericIconComponent";
import formatFileName from "../../../filePreviewChat/utils/format-file-name";
import FileCard from "../../../fileComponent";
export default function FileCardWrapper({
index,
name,
type,
path,
}: {
index: number;
name: string;
type: string;
path: string;
}) {
const [show, setShow] = useState<boolean>(true);
return (
<div key={index} className="flex flex-col gap-2">
<span
onClick={() => setShow(!show)}
className="flex cursor-pointer gap-2 text-sm text-muted-foreground"
>
{formatFileName(name, 50)}
<ForwardedIconComponent name={show ? "ChevronDown" : "ChevronRight"} />
</span>
<FileCard
showFile={show}
fileName={name}
fileType={type}
content={path}
/>
</div>
);
}

24
src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
View file

@ -17,6 +17,7 @@ import { chatMessagePropsType } from "../../../../../types/components";
import { classNames, cn } from "../../../../../utils/utils";
import FileCard from "../fileComponent";
import formatFileName from "../filePreviewChat/utils/format-file-name";
import FileCardWrapper from "./components/fileCardWrapper";
export default function ChatMessage({
chat,
@ -325,23 +326,12 @@ dark:prose-invert"
<div className="my-2 flex flex-col gap-5">
{chat.files.map((file, index) => {
return (
<div key={index} className="flex flex-col gap-2">
<span
onClick={() => setShowFile(!showFile)}
className="flex cursor-pointer gap-2 text-sm text-muted-foreground"
>
{formatFileName(file.name, 50)}
<ForwardedIconComponent
name={showFile ? "ChevronDown" : "ChevronRight"}
/>
</span>
<FileCard
showFile={showFile}
fileName={file.name}
fileType={file.type}
content={file.path}
/>
</div>
<FileCardWrapper
index={index}
name={file.name}
type={file.type}
path={file.path}
/>
);
})}
</div>