Feat(Builder): Add Video and Image Rendering to Block outputs (#8167)

Co-authored-by: Zamil Majdy <zamil.majdy@agpt.co>

autogpt_platform/frontend/src/components/DataTable.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { beautifyString } from "@/lib/utils";
 import { Button } from "./ui/button";
 import {
@@ -10,6 +11,7 @@ import {
 } from "./ui/table";
 import { Clipboard } from "lucide-react";
 import { useToast } from "./ui/use-toast";
+import { ContentRenderer } from "./ui/render";
 
 type DataTableProps = {
   title?: string;
@@ -72,17 +74,15 @@ export default function DataTable({
                   >
                     <Clipboard size={18} />
                   </Button>
-                  {value
-                    .map((i) => {
-                      const text =
-                        typeof i === "object"
-                          ? JSON.stringify(i, null, 2)
-                          : String(i);
-                      return truncateLongData && text.length > maxChars
-                        ? text.slice(0, maxChars) + "..."
-                        : text;
-                    })
-                    .join(", ")}
+                  {value.map((item, index) => (
+                    <React.Fragment key={index}>
+                      <ContentRenderer
+                        value={item}
+                        truncateLongData={truncateLongData}
+                      />
+                      {index < value.length - 1 && ", "}
+                    </React.Fragment>
+                  ))}
                 </div>
               </TableCell>
             </TableRow>

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

@@ -0,0 +1,82 @@
+"use client";
+
+import * as React from "react";
+import Image from "next/image";
+
+const getYouTubeVideoId = (url: string) => {
+  const regExp =
+    /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  const match = url.match(regExp);
+  return match && match[7].length === 11 ? match[7] : null;
+};
+
+const isValidVideoUrl = (url: string): boolean => {
+  const videoExtensions = /\.(mp4|webm|ogg)$/i;
+  const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/;
+  return videoExtensions.test(url) || youtubeRegex.test(url);
+};
+
+const isValidImageUrl = (url: string): boolean => {
+  const imageExtensions = /\.(jpeg|jpg|gif|png|svg|webp)$/i;
+  return imageExtensions.test(url);
+};
+
+const VideoRenderer: React.FC<{ videoUrl: string }> = ({ videoUrl }) => {
+  const videoId = getYouTubeVideoId(videoUrl);
+  return (
+    <div className="w-full p-2">
+      {videoId ? (
+        <iframe
+          width="100%"
+          height="315"
+          src={`https://www.youtube.com/embed/${videoId}`}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        ></iframe>
+      ) : (
+        <video controls width="100%" height="315">
+          <source src={videoUrl} type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      )}
+    </div>
+  );
+};
+
+const ImageRenderer: React.FC<{ imageUrl: string }> = ({ imageUrl }) => (
+  <div className="w-full p-2">
+    <img
+      src={imageUrl}
+      alt="Image"
+      className="h-auto max-w-full"
+      width="100%"
+      height="auto"
+    />
+  </div>
+);
+
+const TextRenderer: React.FC<{ value: any; truncateLongData?: boolean }> = ({
+  value,
+  truncateLongData,
+}) => {
+  const maxChars = 100;
+  const text =
+    typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
+  return truncateLongData && text.length > maxChars
+    ? text.slice(0, maxChars) + "..."
+    : text;
+};
+
+export const ContentRenderer: React.FC<{
+  value: any;
+  truncateLongData?: boolean;
+}> = ({ value, truncateLongData }) => {
+  if (typeof value === "string") {
+    if (isValidVideoUrl(value)) {
+      return <VideoRenderer videoUrl={value} />;
+    } else if (isValidImageUrl(value)) {
+      return <ImageRenderer imageUrl={value} />;
+    }
+  }
+  return <TextRenderer value={value} truncateLongData={truncateLongData} />;
+};