From e5cb76743275fb976f625c1c0844089abdf2542f Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 21 Mar 2025 14:56:57 -0300
Subject: [PATCH] feat: Add truncation notification for large outputs (#7212)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ (textOutputView/index.tsx): add support for displaying a message when the output is truncated due to its size
---
 .../components/textOutputView/index.tsx       | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/shared/components/textOutputView/index.tsx b/src/frontend/src/shared/components/textOutputView/index.tsx
index 57ad7feb0..4acd3e479 100644
--- a/src/frontend/src/shared/components/textOutputView/index.tsx
+++ b/src/frontend/src/shared/components/textOutputView/index.tsx
@@ -10,14 +10,25 @@ const TextOutputView = ({
   if (typeof value === "object" && Object.keys(value).includes("text")) {
     value = value.text;
   }
+
+  const isTruncated = value?.length > 20000;
+
   return (
-    <Textarea
-      className={`w-full custom-scroll ${left ? "min-h-32" : "h-full"}`}
-      placeholder={"Empty"}
-      readOnly
-      // update to real value on flowPool
-      value={value}
-    />
+    <>
+      {" "}
+      <Textarea
+        className={`w-full custom-scroll ${left ? "min-h-32" : "h-full"}`}
+        placeholder={"Empty"}
+        readOnly
+        // update to real value on flowPool
+        value={value}
+      />
+      {isTruncated && (
+        <div className="mt-2 text-xs text-muted-foreground">
+          This output has been truncated due to its size.
+        </div>
+      )}
+    </>
   );
 };