feat: Add truncation notification for large outputs (#7212)

✨ (textOutputView/index.tsx): add support for displaying a message when the output is truncated due to its size

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"}
+      <Textarea
-      readOnly
+        className={`w-full custom-scroll ${left ? "min-h-32" : "h-full"}`}
-      // update to real value on flowPool
+        placeholder={"Empty"}
-      value={value}
+        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>
+      )}
+    </>
   );
 };