Add real file name to file_output frontend

elpassion · Oct 16, 2024 · 06035c5 · 06035c5
1 parent d4154f5
commit 06035c5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/apps/web-remix/app/components/pages/pipelines/Nodes/CustomNodes/FileOutput.tsx b/apps/web-remix/app/components/pages/pipelines/Nodes/CustomNodes/FileOutput.tsx
@@ -3,22 +3,25 @@ import { Download } from 'lucide-react';
 import { ItemList } from '~/components/list/ItemList';
 
 interface FileOutputProps {
-  files: Blob[];
+  files: {
+    content: Blob;
+    name: string;
+  }[];
 }
 
 export const FileOutput: React.FC<FileOutputProps> = ({ files }) => {
   return (
     <ItemList
       className="flex flex-col items-center gap-1 overflow-y-auto"
       itemClassName="w-full"
-      items={files.map((file, index) => ({ id: index, file }))}
+      items={files.map((file, index) => ({ id: index, file: file.content, name: file.name }))}
       renderItem={(file) => <FileOutputListItem file={file} />}
     />
   );
 };
 
 interface FileOutputListItemProps {
-  file: { id: number; file: Blob };
+  file: { id: number; file: Blob, name: string };
 }
 export function FileOutputListItem({ file }: FileOutputListItemProps) {
   return (
@@ -29,21 +32,21 @@ export function FileOutputListItem({ file }: FileOutputListItemProps) {
       <div className="flex gap-1 grow max-w-[90%]">
         <div className="flex flex-col w-full max-w-[95%]">
           <h6 className="whitespace-nowrap text-xs truncate">
-            {'foo file name'}
+            {file.name}
           </h6>
         </div>
       </div>
-      <DownloadButton blob={file.file} />
+      <DownloadButton blob={file.file} name={file.name} />
     </article>
   );
 }
 
-function DownloadButton({ blob }: { blob: Blob }) {
+function DownloadButton({ blob, name }: { blob: Blob, name: string }) {
   const downloadFile = () => {
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
-    a.download = 'file.txt';
+    a.download = name;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);

diff --git a/apps/web-remix/app/components/pages/pipelines/Nodes/CustomNodes/NodeFieldsOutput.tsx b/apps/web-remix/app/components/pages/pipelines/Nodes/CustomNodes/NodeFieldsOutput.tsx
@@ -99,7 +99,10 @@ function checkIfStringPayloads(events: IEvent[]) {
 // }
 
 function getFileOutput(event: IEvent) {
-  return new Blob([event.payload], { type: 'file' });
+  return {
+    content: new Blob([event.payload], { type: event.metadata.file_type }),
+    name: event.metadata.file_name,
+  };
 }
 
 interface TextOutputProps {

diff --git a/apps/web-remix/app/components/pages/pipelines/RunPipelineProvider.tsx b/apps/web-remix/app/components/pages/pipelines/RunPipelineProvider.tsx
@@ -20,6 +20,7 @@ export interface IEvent {
   block: string;
   output: string;
   payload: any;
+  metadata: any;
 }
 interface IRunPipelineContext {
   events: IEvent[];
@@ -65,8 +66,7 @@ export const RunPipelineProvider: React.FC<RunPipelineProviderProps> = ({
   );
 
   const onMessage = useCallback(
-    (block: string, output: string, payload: any) =>
-      setEvents((events) => [...events, { block, output, payload }]),
+    (block: string, output: string, payload: any, metadata: any) => setEvents((events) => [...events, { block, output, payload, metadata }]),
     [],
   );