Option to download the output Node content

frontend/src/OutputNode.css

@@ -76,3 +76,38 @@
   border-radius: 3px;
   background: rgba(0,0,0,0.1);
 }
+/* Add these styles to your existing OutputNode.css file */
+
+.download-button {
+  background-color: #1a73e8;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 12px;
+  margin-top: 10px;
+  cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.download-button:hover {
+  background-color: #0d5bdd;
+}
+
+.download-button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
+.download-button svg {
+  margin-right: 5px;
+}
+
+.output-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 15px 10px 15px;
+}

frontend/src/OutputNode.js

@@ -8,6 +8,85 @@ const OutputNode = ({ data, isConnectable }) => {
   // Log the props received by the component for debugging
   console.log(`[OutputNode: ${label}] Received data:`, data);
 
+  // Function to download the output content
+  const downloadOutput = () => {
+    if (!result) return;
+    
+    let filename = `${label || 'output'}-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}`;
+    let blob, url, content;
+    
+    switch (connectedType) {
+      case 'textbox':
+      case 'markdown':
+      case 'json':
+        // For text/JSON content
+        content = typeof result === 'object' ? JSON.stringify(result, null, 2) : String(result);
+        blob = new Blob([content], { type: 'text/plain' });
+        filename = `${filename}.txt`;
+        break;
+        
+      case 'image':
+        // For image content - handle if it's a URL
+        let imageUrl = '';
+        if (typeof result === 'string') {
+          imageUrl = result;
+        } else if (Array.isArray(result) && typeof result[0] === 'string') {
+          imageUrl = result[0];
+        } else if (typeof result === 'object' && result !== null && result.url) {
+          imageUrl = result.url;
+        }
+        
+        if (imageUrl) {
+          // For a URL, open in a new tab for direct download
+          window.open(imageUrl, '_blank');
+          return;
+        }
+        return; // Can't download if no URL
+        
+      case 'audio':
+      case 'video':
+      case 'file':
+        // For file content - handle if it's a URL
+        let fileUrl = '';
+        if (typeof result === 'string') {
+          fileUrl = result;
+        } else if (Array.isArray(result) && typeof result[0] === 'string') {
+          fileUrl = result[0];
+        } else if (typeof result === 'object' && result !== null && result.url) {
+          fileUrl = result.url;
+        }
+        
+        if (fileUrl) {
+          // For a URL, open in a new tab for direct download
+          window.open(fileUrl, '_blank');
+          return;
+        }
+        return; // Can't download if no URL
+        
+      default:
+        // Default case - try to stringify any content
+        content = typeof result === 'object' ? JSON.stringify(result, null, 2) : String(result);
+        blob = new Blob([content], { type: 'text/plain' });
+        filename = `${filename}.txt`;
+    }
+    
+    // Create download link and trigger it
+    if (blob) {
+      url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      
+      // Clean up
+      setTimeout(() => {
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      }, 100);
+    }
+  };
+
   const renderContent = () => {
     // Use a more robust check for the existence of a result.
     // Checks for null, undefined. Allows 0, false, and empty strings to be displayed.
@@ -87,6 +166,15 @@ const OutputNode = ({ data, isConnectable }) => {
     }
   };
 
+  // Download button icon (simple SVG)
+  const DownloadIcon = () => (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 16L12 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+      <path d="M9 13L12 16L15 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+      <path d="M3 20H21" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+    </svg>
+  );
+
   return (
     <div className={`output-node ${data.status || ''}`}>
       <Handle
@@ -100,6 +188,18 @@ const OutputNode = ({ data, isConnectable }) => {
         {data.status && <span className="node-status">{data.status}</span>}
       </div>
       {renderContent()}
+      {/* Only show download button when there's a result */}
+      {result !== null && result !== undefined && (
+        <div className="output-actions">
+          <button 
+            className="download-button" 
+            onClick={downloadOutput}
+            title="Download this output"
+          >
+            <DownloadIcon /> Download
+          </button>
+        </div>
+      )}
       <Handle
         type="source"
         position={Position.Right}
@@ -110,4 +210,4 @@ const OutputNode = ({ data, isConnectable }) => {
   );
 };
 
-export default OutputNode;
+export default OutputNode;