Added a NodeOutputs component for rendering the outputs

autogpt_platform/frontend/src/components/CustomNode.tsx

@@ -33,6 +33,7 @@ import { getPrimaryCategoryColor } from "@/lib/utils";
 import { FlowContext } from "./Flow";
 import { Badge } from "./ui/badge";
 import DataTable from "./DataTable";
+import NodeOutputs from "./NodeOutputs";
 import { IconCoin } from "./ui/icons";
 import * as Separator from "@radix-ui/react-separator";
 import * as ContextMenu from "@radix-ui/react-context-menu";
@@ -705,11 +706,16 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
             {(data.executionResults?.length ?? 0) > 0 ? (
               <div className="mt-0 rounded-b-xl bg-gray-100">
                 <Separator.Root className="h-[2px] w-full bg-gray-200"></Separator.Root>
-                <DataTable
+                <NodeOutputs
                   title="Latest Output"
                   truncateLongData
                   data={data.executionResults!.at(-1)?.data || {}}
                 />
+                {/* <DataTable
+                  title="Latest Output"
+                  truncateLongData
+                  data={data.executionResults!.at(-1)?.data || {}}
+                /> */}
                 <div className="flex justify-end">
                   <Button variant="ghost" onClick={handleOutputClick}>
                     View More
@@ -742,14 +748,14 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
                           data.status === "QUEUED",
                         "border-gray-600 bg-gray-600 font-black":
                           data.status === "INCOMPLETE",
-                      }
+                      },
                 )}
               >
                 {hasConfigErrors || hasOutputError
                   ? "Error"
                   : data.status
-                  ? beautifyString(data.status)
-                  : "Not Run"}
+                    ? beautifyString(data.status)
+                    : "Not Run"}
               </Badge>
             </div>
           </div>

autogpt_platform/frontend/src/components/NodeOutputs.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { ContentRenderer } from "./ui/render";
+import { beautifyString } from "@/lib/utils";
+import * as Separator from "@radix-ui/react-separator";
+
+type NodeOutputsProps = {
+  title?: string;
+  truncateLongData?: boolean;
+  data: { [key: string]: Array<any> };
+};
+
+export default function NodeOutputs({
+  title,
+  truncateLongData,
+  data,
+}: NodeOutputsProps) {
+  return (
+    <div className="m-4 space-y-4">
+      {title && <strong className="mt-2flex">{title}</strong>}
+      {Object.entries(data).map(([pin, dataArray]) => (
+        <div key={pin} className="">
+          <div className="flex items-center">
+            <strong className="mr-2">Pin:</strong>
+            <span>{beautifyString(pin)}</span>
+          </div>
+          <Separator.Root className="my-4 h-[1px] bg-gray-200" />
+          <div className="mt-2">
+            <strong className="mr-2">Data:</strong>
+            <div className="mt-1">
+              {dataArray.map((item, index) => (
+                <React.Fragment key={index}>
+                  <ContentRenderer
+                    value={item}
+                    truncateLongData={truncateLongData}
+                  />
+                  {index < dataArray.length - 1 && ", "}
+                </React.Fragment>
+              ))}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}