From 72d3550ce8500f8b46ee3360036ebe2996dc6930 Mon Sep 17 00:00:00 2001
From: Rajeev J Sebastian <rajeev@alokin.in>
Date: Tue, 4 Mar 2025 20:44:10 +0530
Subject: [PATCH] Replace custom HTML with a JSON view

---
 .../components/nodes/NodeOutputDisplay.tsx    | 29 +++----------------
 1 file changed, 4 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/nodes/NodeOutputDisplay.tsx b/frontend/src/components/nodes/NodeOutputDisplay.tsx
index eae00fac..dc3155ee 100644
--- a/frontend/src/components/nodes/NodeOutputDisplay.tsx
+++ b/frontend/src/components/nodes/NodeOutputDisplay.tsx
@@ -4,6 +4,9 @@ import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism'
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 import { Icon } from '@iconify/react'
 
+import JsonView from 'react18-json-view'
+import 'react18-json-view/src/style.css'
+
 interface NodeOutputDisplayProps {
     output: Record<string, any>
 }
@@ -143,31 +146,7 @@ const NodeOutputDisplay: React.FC<NodeOutputDisplayProps> = ({ output }) => {
     const renderJsonObject = (obj: Record<string, any>) => {
         return (
             <div style={{ width: '100%' }}>
-                {Object.entries(obj).map(([key, val]) => (
-                    <div
-                        key={key}
-                        className="group mb-2 ml-2 border-l-2 border-gray-200 dark:border-gray-700/50 pl-2"
-                    >
-                        <div className="text-lg font-semibold mb-1">{key}:</div>
-                        <div className="ml-2">{renderValue(val)}</div>
-                        <div className="flex justify-end mt-3">
-                            <button
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    copyToClipboard(val, key);
-                                }}
-                                className="px-3 py-1.5 rounded-md bg-white/10 dark:bg-gray-800/50 hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all flex items-center gap-2 border border-gray-200 dark:border-gray-700/50 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
-                                title="Copy to clipboard"
-                            >
-                                <Icon
-                                    icon={copiedKey === key ? 'solar:check-circle-bold' : 'solar:copy-linear'}
-                                    className={copiedKey === key ? 'text-green-500 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'}
-                                    width={16}
-                                />
-                            </button>
-                        </div>
-                    </div>
-                ))}
+                <JsonView src={obj} />
             </div>
         )
     }