From 85c229dd6c42eecffae3f8daeec01d0032d8b083 Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Wed, 28 Jan 2026 00:50:13 -0600
Subject: [PATCH] fix(frontend): exclude video refs from image rendering in
 chat

Video workspace references (video_url, video_out, etc.) were being
incorrectly rendered as <img> tags. Added video keyword check to
exclude them before defaulting to image rendering.

TODO: Replace keyword matching with MIME type encoded in workspace ref
(e.g., workspace://abc123#video/mp4) for robust media type detection.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/ToolResponseMessage/helpers.ts    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/helpers.ts b/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/helpers.ts
index d6667c96de..e886e1a28c 100644
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/helpers.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/helpers.ts
@@ -48,10 +48,23 @@ function isWorkspaceRef(value: unknown): value is string {
  * Check if a workspace reference appears to be an image based on common patterns.
  * Since workspace refs don't have extensions, we check the context or assume image
  * for certain block types.
+ *
+ * TODO: Replace keyword matching with MIME type encoded in workspace ref.
+ * e.g., workspace://abc123#image/png or workspace://abc123#video/mp4
+ * This would let frontend render correctly without fragile keyword matching.
  */
 function isLikelyImageRef(value: string, outputKey?: string): boolean {
   if (!isWorkspaceRef(value)) return false;
 
+  // Check output key name for video-related hints (these are NOT images)
+  const videoKeywords = ["video", "mp4", "mov", "avi", "webm", "movie", "clip"];
+  if (outputKey) {
+    const lowerKey = outputKey.toLowerCase();
+    if (videoKeywords.some((kw) => lowerKey.includes(kw))) {
+      return false;
+    }
+  }
+
   // Check output key name for image-related hints
   const imageKeywords = [
     "image",
@@ -62,9 +75,6 @@ function isLikelyImageRef(value: string, outputKey?: string): boolean {
     "avatar",
     "icon",
     "screenshot",
-    "output",
-    "result",
-    "generated",
   ];
   if (outputKey) {
     const lowerKey = outputKey.toLowerCase();