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

Feat: Implement download file on chat function

Browse source
This commit is contained in:
igorrCarvalho 2024-05-30 16:52:50 -03:00
commit 7e09131800
2 changed files with 38 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,7 @@ import useFlowStore from "../../../../../stores/flowStore";
import { chatMessagePropsType } from "../../../../../types/components";
import { classNames, cn } from "../../../../../utils/utils";
import FileCard from "../fileComponent";
import formatFileName from "../filePreviewChat/utils/format-file-name";
export default function ChatMessage({
chat,
@ -329,7 +330,7 @@ dark:prose-invert"
onClick={() => setShowFile(!showFile)}
className="flex cursor-pointer gap-2 text-sm text-muted-foreground"
>
{file.name}
{formatFileName(file.name, 50)}
<ForwardedIconComponent
name={showFile ? "ChevronDown" : "ChevronRight"}
/>

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

@ -16,7 +16,26 @@ export default function FileCard({
fileType,
showFile = true,
}: fileCardPropsType): JSX.Element | undefined {
const handleDownload = (): void => {};
const handleDownload = async (): Promise<void> => {
try {
const response = await fetch(
`${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}${BASE_URL_API}files/download/${content}`,
);
const blob = await response.blob();
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", fileName); // Set the filename
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url); // Clean up the URL object
} catch (error) {
console.error("Failed to download file:", error);
}
};
const [isHovered, setIsHovered] = useState(false);
const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
function handleMouseEnter(): void {
@ -37,7 +56,7 @@ export default function FileCard({
onMouseLeave={handleMouseLeave}
style={{ display: "inline-block" }}
>
<div className="relative w-[80%] rounded-lg border border-border">
<div className="relative w-[50%] rounded-lg border border-border">
<img
src={imgSrc}
alt="generated image"
@ -45,7 +64,7 @@ export default function FileCard({
/>
{isHovered && (
<div
className={`absolute right-0 top-0 rounded-bl-lg bg-muted px-1 text-sm font-bold text-foreground `}
className={`absolute right-1 top-1 rounded-bl-lg bg-muted text-sm font-bold text-foreground `}
>
<button
className="px-2 py-1 text-ring "
@ -69,6 +88,8 @@ export default function FileCard({
isHovered ? "shadow-md" : ""
}`}
onClick={handleDownload}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div className="ml-3 flex h-full w-full items-center gap-2 text-sm">
<ForwardedIconComponent name="File" className="h-8 w-8" />
@ -77,10 +98,18 @@ export default function FileCard({
<span>File</span>
</div>
</div>
<IconComponent
name="DownloadCloud"
className="absolute right-2 top-2 ml-auto h-6 w-6 text-current"
/>
{isHovered && (
<div
className={`absolute right-0 top-1 rounded-bl-lg bg-muted px-1 text-sm font-bold text-foreground `}
>
<button className="px-2 py-1 text-ring " onClick={handleDownload}>
<IconComponent
name="DownloadCloud"
className="h-5 w-5 text-current hover:scale-110"
/>
</button>
</div>
)}
</div>
);
}