add relative time in my_agent block using react-timeago library

autogpt_platform/frontend/package.json

@@ -80,6 +80,7 @@
     "react-markdown": "^9.0.3",
     "react-modal": "^3.16.3",
     "react-shepherd": "^6.1.8",
+    "react-timeago": "^8.2.0",
     "recharts": "^2.15.3",
     "tailwind-merge": "^2.6.0",
     "tailwind-scrollbar": "^4.0.2",

autogpt_platform/frontend/src/components/builder/block-menu/UGCAgentBlock.tsx

@@ -5,6 +5,7 @@ import { Plus } from "lucide-react";
 import Image from "next/image";
 import React, { ButtonHTMLAttributes } from "react";
 import { highlightText } from "./IntegrationBlock";
+import TimeAgo from "react-timeago";
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   title?: string;
@@ -60,8 +61,7 @@ const UGCAgentBlock: UGCAgentBlockComponent = ({
               "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
             )}
           >
-            {/* BLOCK MENU TODO: We need to create a utility to convert the edit time into relative time (e.g., "2 hours ago") */}
-            Edited on {edited_time?.toLocaleString()}
+            Edited {edited_time && <TimeAgo date={edited_time} />}
           </span>
 
           <span className="font-sans text-zinc-400">•</span>

autogpt_platform/frontend/yarn.lock

@@ -10310,6 +10310,11 @@ react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
     get-nonce "^1.0.0"
     tslib "^2.0.0"
 
+react-timeago@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-8.2.0.tgz#a6c9c81f1ed8565f87d297d012c467944a0176be"
+  integrity sha512-RWDlG3Jj+iwv+yNEDweA/Qk1mxE8i/Oc4oW8Irp29ZfBp+eNpqqYPMLPYQJyfRMJcGB8CmWkEGMYhB4fW8eZlQ==
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"