fix(frontend): Add text length limit when displaying Graph & Block name with different length in different places (#8746)

autogpt_platform/frontend/src/components/CustomNode.tsx

@@ -28,6 +28,7 @@ import {
 } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
+import { TextRenderer } from "@/components/ui/render";
 import { history } from "./history";
 import NodeHandle from "./NodeHandle";
 import {
@@ -564,9 +565,13 @@ export function CustomNode({
         <div className="flex w-full flex-col">
           <div className="flex flex-row items-center justify-between">
             <div className="font-roboto flex items-center px-3 text-lg font-semibold">
-              {beautifyString(
-                data.blockType?.replace(/Block$/, "") || data.title,
-              )}
+              <TextRenderer
+                value={beautifyString(
+                  data.blockType?.replace(/Block$/, "") || data.title,
+                )}
+                truncateLengthLimit={80}
+              />
+
               <div className="px-2 text-xs text-gray-500">
                 #{id.split("-")[0]}
               </div>

autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx

@@ -3,6 +3,7 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { TextRenderer } from "@/components/ui/render";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { beautifyString } from "@/lib/utils";
 import {
@@ -180,7 +181,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
           </CardHeader>
           <CardContent className="overflow-scroll border-t p-0">
             <ScrollArea
-              className="h-[60vh] w-fit w-full"
+              className="h-[60vh]"
               data-id="blocks-control-scroll-area"
             >
               {getFilteredBlockList().map((block) => (
@@ -202,13 +203,19 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
                         className="block truncate pb-1 text-sm font-semibold"
                         data-id={`block-name-${block.id}`}
                       >
-                        {beautifyString(block.name).replace(/ Block$/, "")}
+                        <TextRenderer
+                          value={beautifyString(block.name).replace(
+                            / Block$/,
+                            "",
+                          )}
+                          truncateLengthLimit={45}
+                        />
                       </span>
-                      <span className="block break-words text-xs font-normal text-gray-500">
-                        {/* Cap description at 100 characters max */}
-                        {block.description?.length > 100
-                          ? block.description.slice(0, 100) + "..."
-                          : block.description}
+                      <span className="block break-all text-xs font-normal text-gray-500">
+                        <TextRenderer
+                          value={block.description}
+                          truncateLengthLimit={165}
+                        />
                       </span>
                     </div>
                     <div

autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx

@@ -115,6 +115,7 @@ export const SaveControl = ({
                 value={agentName}
                 onChange={(e) => onNameChange(e.target.value)}
                 data-id="save-control-name-input"
+                maxLength={100}
               />
               <Label htmlFor="description">Description</Label>
               <Input
@@ -124,6 +125,7 @@ export const SaveControl = ({
                 value={agentDescription}
                 onChange={(e) => onDescriptionChange(e.target.value)}
                 data-id="save-control-description-input"
+                maxLength={500}
               />
               {agentMeta?.version && (
                 <>

autogpt_platform/frontend/src/components/monitor/AgentFlowList.tsx

@@ -2,6 +2,7 @@ import AutoGPTServerAPI, { GraphMeta } from "@/lib/autogpt-server-api";
 import React, { useEffect, useMemo, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { TextRenderer } from "@/components/ui/render";
 import Link from "next/link";
 import {
   Dialog,
@@ -94,7 +95,10 @@ export const AgentFlowList = ({
                             });
                         }}
                       >
-                        {template.name}
+                        <TextRenderer
+                          value={template.name}
+                          truncateLengthLimit={30}
+                        />
                       </DropdownMenuItem>
                     ))}
                   </>
@@ -162,7 +166,9 @@ export const AgentFlowList = ({
                   onClick={() => onSelectFlow(flow)}
                   data-state={selectedFlow?.id == flow.id ? "selected" : null}
                 >
-                  <TableCell>{flow.name}</TableCell>
+                  <TableCell>
+                    <TextRenderer value={flow.name} truncateLengthLimit={30} />
+                  </TableCell>
                   {/* <TableCell><FlowStatusBadge status={flow.status ?? "active"} /></TableCell> */}
                   {/* <TableCell>
                   {flow.updatedAt ?? "???"}

autogpt_platform/frontend/src/components/monitor/FlowRunInfo.tsx

@@ -71,7 +71,7 @@ export const FlowRunInfo: React.FC<
         result: result.output_data?.output || undefined,
       })),
     );
-  }, [api, flow.id, flow.version, flowRun.id]);
+  }, [api, flow.id, flowRun.id]);
 
   // Fetch graph and execution data
   useEffect(() => {
@@ -80,7 +80,7 @@ export const FlowRunInfo: React.FC<
     }
 
     fetchBlockResults();
-  }, [isOutputOpen, blockOutputs]);
+  }, [isOutputOpen, blockOutputs, fetchBlockResults]);
 
   if (flowRun.graphID != flow.id) {
     throw new Error(
@@ -90,7 +90,7 @@ export const FlowRunInfo: React.FC<
 
   const handleStopRun = useCallback(() => {
     api.stopGraphExecution(flow.id, flowRun.id);
-  }, [flow.id, flowRun.id]);
+  }, [api, flow.id, flowRun.id]);
 
   return (
     <>

autogpt_platform/frontend/src/components/monitor/FlowRunsList.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/table";
 import moment from "moment/moment";
 import { FlowRunStatusBadge } from "@/components/monitor/FlowRunStatusBadge";
+import { TextRenderer } from "../ui/render";
 
 export const FlowRunsList: React.FC<{
   flows: GraphMeta[];
@@ -43,7 +44,10 @@ export const FlowRunsList: React.FC<{
               data-state={selectedRun?.id == run.id ? "selected" : null}
             >
               <TableCell>
-                {flows.find((f) => f.id == run.graphID)!.name}
+                <TextRenderer
+                  value={flows.find((f) => f.id == run.graphID)!.name}
+                  truncateLengthLimit={30}
+                />
               </TableCell>
               <TableCell>{moment(run.startTime).format("HH:mm")}</TableCell>
               <TableCell>

autogpt_platform/frontend/src/components/monitor/scheduleTable.tsx

@@ -30,6 +30,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { TextRenderer } from "../ui/render";
 
 interface SchedulesTableProps {
   schedules: Schedule[];
@@ -111,7 +112,7 @@ export const SchedulesTable = ({
             <SelectContent>
               {agents.map((agent, i) => (
                 <SelectItem key={agent.id + i} value={agent.id}>
-                  {agent.name}
+                  <TextRenderer value={agent.name} truncateLengthLimit={30} />
                 </SelectItem>
               ))}
             </SelectContent>

autogpt_platform/frontend/src/components/ui/render.tsx

@@ -76,15 +76,14 @@ const AudioRenderer: React.FC<{ audioUrl: string }> = ({ audioUrl }) => (
   </div>
 );
 
-const TextRenderer: React.FC<{ value: any; truncateLongData?: boolean }> = ({
-  value,
-  truncateLongData,
-}) => {
-  const maxChars = 100;
+export const TextRenderer: React.FC<{
+  value: any;
+  truncateLengthLimit?: number;
+}> = ({ value, truncateLengthLimit }) => {
   const text =
     typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
-  return truncateLongData && text.length > maxChars
-    ? text.slice(0, maxChars) + "..."
+  return truncateLengthLimit && text.length > truncateLengthLimit
+    ? text.slice(0, truncateLengthLimit) + "..."
     : text;
 };
 
@@ -101,5 +100,10 @@ export const ContentRenderer: React.FC<{
       return <AudioRenderer audioUrl={value} />;
     }
   }
-  return <TextRenderer value={value} truncateLongData={truncateLongData} />;
+  return (
+    <TextRenderer
+      value={value}
+      truncateLengthLimit={truncateLongData ? 100 : undefined}
+    />
+  );
 };

autogpt_platform/frontend/src/components/ui/scroll-area.tsx

@@ -14,7 +14,10 @@ const ScrollArea = React.forwardRef<
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport
+      className="h-full w-full rounded-[inherit]"
+      style={{ overflow: "scroll" }}
+    >
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />