🐛 Add renderings of failed image and video loading #1872

Phinease · web-flow · commit d983012aabbc · 2025-11-27T12:20:10.000+08:00
diff --git a/frontend/app/[locale]/agents/components/agent/AgentConfigModal.tsx b/frontend/app/[locale]/agents/components/agent/AgentConfigModal.tsx
@@ -1071,13 +1071,13 @@ export default function AgentConfigModal({
                     const tooltipText = getButtonTitle();
                     return (
                       tooltipText ||
-                      t("businessLogic.config.button.saveToAgentPool")
+                      t("common.save")
                     );
                   }
-                  return t("businessLogic.config.button.saveToAgentPool");
+                  return t("common.save");
                 })()}
               >
-                {t("businessLogic.config.button.saveToAgentPool")}
+                {t("common.save")}
               </Button>
             ) : (
               <Button
diff --git a/frontend/components/homepage/AuthDialogs.tsx b/frontend/components/homepage/AuthDialogs.tsx
@@ -79,7 +79,7 @@ export function AuthDialogs({
           <div className="mt-4">
             <p className="text-base font-medium">
               <Trans i18nKey="page.loginPrompt.githubSupport">
-                ⭐️ Nexent is still growing, please help me by starring on{" "}
+                ⭐️ Nexent is still growing, please help me by starring on
                 <a
                   href="https://github.com/ModelEngine-Group/nexent"
                   target="_blank"
@@ -151,7 +151,7 @@ export function AuthDialogs({
           <div className="mt-4">
             <p className="text-base font-medium">
               <Trans i18nKey="page.adminPrompt.githubSupport">
-                ⭐️ Nexent is still growing, please help me by starring on{" "}
+                ⭐️ Nexent is still growing, please help me by starring on 
                 <a
                   href="https://github.com/ModelEngine-Group/nexent"
                   target="_blank"
@@ -165,15 +165,15 @@ export function AuthDialogs({
               <br />
               <br />
               <Trans i18nKey="page.adminPrompt.becomeAdmin">
-                💡 Want to become an administrator? Please visit the{" "}
+                💡 Want to become an administrator? Please visit the 
                 <a
                   href="http://nexent.tech/contact"
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-blue-600 hover:text-blue-700 font-bold"
                 >
                   official contact page
-                </a>{" "}
+                </a> 
                 to apply for an administrator account.
               </Trans>
             </p>
diff --git a/frontend/components/ui/markdownRenderer.tsx b/frontend/components/ui/markdownRenderer.tsx
@@ -12,6 +12,7 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 // @ts-ignore
 import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { visit } from "unist-util-visit";
 
 import { SearchResult } from "@/types/chat";
 import {
@@ -54,6 +55,47 @@ const isVideoUrl = (url?: string): boolean => {
   return VIDEO_EXTENSIONS.includes(extension);
 };
 
+// extract block level elements from <p>
+const rehypeUnwrapMedia = () => {
+  return (tree: any) => {
+    visit(tree, "element", (node, index, parent) => {
+      // find <p> tags containing video or figure
+      if (node.tagName === "p" && node.children) {
+        const mediaChildIndex = node.children.findIndex(
+          (child: any) =>
+            child.tagName === "video" || child.tagName === "figure"
+        );
+
+        if (mediaChildIndex !== -1) {
+          // extract media elements (video/figure)
+          const mediaChild = node.children.splice(mediaChildIndex, 1)[0];
+          
+          // if <p> has other content after extraction, keep <p>; otherwise remove empty <p>
+          if (node.children.length === 0) {
+            // replace original <p> node with media element
+            if (parent && index !== null) {
+              parent.children[index as number] = {
+                tagName: "div",
+                properties: { className: "markdown-media-container" },
+                children: [mediaChild],
+              };
+            }
+          } else {
+            // if <p> has other content after extraction, keep <p>; otherwise remove empty <p>
+            if (parent && index !== null) {
+              parent.children.splice((index as number) + 1, 0, {
+                tagName: "div",
+                properties: { className: "markdown-media-container" },
+                children: [mediaChild],
+              });
+            }
+          }
+        }
+      }
+    });
+  };
+};
+
 // Get background color for different tool signs
 const getBackgroundColor = (toolSign: string) => {
   switch (toolSign) {
@@ -381,6 +423,102 @@ const convertLatexDelimiters = (content: string): string => {
   );
 };
 
+// Video component with error handling - defined outside to prevent re-creation on each render
+interface VideoWithErrorHandlingProps {
+  src: string;
+  alt?: string | null;
+  props?: React.VideoHTMLAttributes<HTMLVideoElement>;
+}
+
+const VideoWithErrorHandling: React.FC<VideoWithErrorHandlingProps> = React.memo(({ src, alt, props = {} }) => {
+  const { t } = useTranslation("common");
+  const [hasError, setHasError] = React.useState(false);
+
+  if (hasError) {
+    return (
+      <div className="markdown-media-error">
+        <div className="markdown-media-error-message">
+          {t("chatStreamMessage.videoLinkUnavailable", {
+            defaultValue: "This video link is unavailable",
+          })}
+        </div>
+        {alt && (
+          <div className="markdown-media-error-caption">{alt}</div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <figure className="markdown-video-wrapper">
+      <video
+        className="markdown-video"
+        controls
+        preload="metadata"
+        playsInline
+        src={src}
+        onError={() => setHasError(true)}
+        {...props}
+      >
+        {t("chatStreamMessage.videoNotSupported", {
+          defaultValue: "Sorry, your browser does not support embedded videos.",
+        })}
+      </video>
+      {alt ? (
+        <figcaption className="markdown-video-caption">{alt}</figcaption>
+      ) : null}
+    </figure>
+  );
+}, (prevProps, nextProps) => {
+  // Custom comparison function to prevent unnecessary re-renders
+  // Only compare src and alt, props object reference may change but content is the same
+  return prevProps.src === nextProps.src && 
+         prevProps.alt === nextProps.alt;
+});
+
+VideoWithErrorHandling.displayName = "VideoWithErrorHandling";
+
+// Image component with error handling - defined outside to prevent re-creation on each render
+interface ImageWithErrorHandlingProps {
+  src: string;
+  alt?: string | null;
+}
+
+const ImageWithErrorHandling: React.FC<ImageWithErrorHandlingProps> = React.memo(({ src, alt }) => {
+  const { t } = useTranslation("common");
+  const [hasError, setHasError] = React.useState(false);
+
+  if (hasError) {
+    return (
+      <div className="markdown-media-error">
+        <div className="markdown-media-error-message">
+          {t("chatStreamMessage.imageLinkUnavailable", {
+            defaultValue: "This image link is unavailable",
+          })}
+        </div>
+        {alt && (
+          <div className="markdown-media-error-caption">{alt}</div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      alt={alt ?? undefined}
+      className="markdown-img"
+      onError={() => setHasError(true)}
+    />
+  );
+}, (prevProps, nextProps) => {
+  // Custom comparison function to prevent unnecessary re-renders
+  return prevProps.src === nextProps.src && 
+         prevProps.alt === nextProps.alt;
+});
+
+ImageWithErrorHandling.displayName = "ImageWithErrorHandling";
+
 export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
   content,
   className,
@@ -475,25 +613,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
       return renderMediaFallback(src, alt);
     }
 
-    return (
-      <figure className="markdown-video-wrapper">
-        <video
-          className="markdown-video"
-          controls
-          preload="metadata"
-          playsInline
-          src={src}
-          {...props}
-        >
-          {t("chatStreamMessage.videoNotSupported", {
-            defaultValue: "Sorry, your browser does not support embedded videos.",
-          })}
-        </video>
-        {alt ? (
-          <figcaption className="markdown-video-caption">{alt}</figcaption>
-        ) : null}
-      </figure>
-    );
+    return <VideoWithErrorHandling key={src} src={src} alt={alt} props={props} />;
   };
 
   // Modified processText function logic
@@ -612,6 +732,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
             remarkPlugins={[remarkGfm, remarkMath] as any}
             rehypePlugins={
               [
+                rehypeUnwrapMedia,
                 [
                   rehypeKatex,
                   {
@@ -786,7 +907,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
                   </code>
                 );
               },
-              // Image (also handles video previews emitted as image markdown)
+              // Image
               img: ({ src, alt }: any) => {
                 if (!enableMultimodal) {
                   return renderMediaFallback(src, alt);
@@ -796,8 +917,13 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
                   return renderVideoElement({ src, alt });
                 }
 
-                return <img src={src} alt={alt} className="markdown-img" />;
+                if (!src || typeof src !== "string") {
+                  return null;
+                }
+
+                return <ImageWithErrorHandling key={src} src={src} alt={alt} />;
               },
+              // Video
               video: ({ children, ...props }: any) => {
                 const directSrc = props?.src;
                 const childSource = React.Children.toArray(children)
@@ -828,6 +954,4 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
       </div>
     </>
   );
-};
-
-    
+};
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
@@ -188,6 +188,12 @@
   "chatStreamMessage.cancelDislike": "Cancel dislike",
   "chatStreamMessage.dislike": "Dislike",
   "chatStreamMessage.tts": "Text-to-Speech",
+  "chatStreamMessage.imageTextFallbackTitle": "Media (text view)",
+  "chatStreamMessage.videoNotSupported": "Sorry, your browser does not support embedded videos.",
+  "chatStreamMessage.imageLinkUnavailable": "This image link is unavailable",
+  "chatStreamMessage.videoLinkUnavailable": "This video link is unavailable",
+  "chatStreamMessage.imageLoadFailed": "Image failed to load",
+  "chatStreamMessage.videoLoadFailed": "Video failed to load",
 
   "chatRightPanel.imageLoadFailed": "Failed to load image",
   "chatRightPanel.imageProxyError": "Failed to request image proxy service:",
@@ -697,7 +703,6 @@
   "businessLogic.config.maxSteps": "Max Steps of Agent Run",
   "businessLogic.config.button.generatePrompt": "Generate",
   "businessLogic.config.button.generating": "Generating...",
-  "businessLogic.config.button.saveToAgentPool": "Save to Agent Pool",
   "businessLogic.config.modal.deleteTitle": "Confirm Delete",
   "businessLogic.config.modal.deleteContent": "Are you sure you want to delete this agent? This action cannot be undone.",
   "businessLogic.config.modal.button.cancel": "Cancel",
diff --git a/frontend/public/locales/zh/common.json b/frontend/public/locales/zh/common.json
@@ -188,6 +188,12 @@
   "chatStreamMessage.cancelDislike": "取消点踩",
   "chatStreamMessage.dislike": "点踩",
   "chatStreamMessage.tts": "语音播报",
+  "chatStreamMessage.imageTextFallbackTitle": "媒体（文本视图）",
+  "chatStreamMessage.videoNotSupported": "抱歉，您的浏览器不支持嵌入式视频。",
+  "chatStreamMessage.imageLinkUnavailable": "此图片链接不可用",
+  "chatStreamMessage.videoLinkUnavailable": "此视频链接不可用",
+  "chatStreamMessage.imageLoadFailed": "图片加载失败",
+  "chatStreamMessage.videoLoadFailed": "视频加载失败",
 
   "chatRightPanel.imageLoadFailed": "图片加载失败",
   "chatRightPanel.imageProxyError": "请求图片代理服务失败:",
@@ -697,7 +703,6 @@
   "businessLogic.config.maxSteps": "Agent运行最大步骤数",
   "businessLogic.config.button.generatePrompt": "生成智能体",
   "businessLogic.config.button.generating": "智能生成提示词中...",
-  "businessLogic.config.button.saveToAgentPool": "保存到Agent池",
   "businessLogic.config.modal.deleteTitle": "确认删除",
   "businessLogic.config.modal.deleteContent": "确定要删除Agent {{name}} 吗？此操作不可恢复。",
   "businessLogic.config.modal.button.cancel": "取消",
diff --git a/frontend/styles/react-markdown.css b/frontend/styles/react-markdown.css
@@ -277,6 +277,39 @@
   line-height: 1.4;
 }
 
+/* Media Error Styles */
+.markdown-media-error {
+  margin: 0.5rem 0;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background-color: #f9fafb;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  align-items: center;
+  justify-content: center;
+  min-height: 60px;
+  max-width: 800px;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.markdown-media-error-message {
+  font-size: 0.875rem;
+  color: #6b7280;
+  text-align: center;
+  font-weight: 500;
+}
+
+.markdown-media-error-caption {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  text-align: center;
+  font-style: italic;
+}
+
 /* Global markdown container */
 .task-message-content {
   color: hsl(var(--foreground)) !important;
