🐛 Unify Agent save icon #1883

Author: WMC001

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

frontend/components/ui/markdownRenderer.tsx

@@ -423,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,
@@ -517,47 +613,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
       return renderMediaFallback(src, alt);
     }
 
-    const VideoWithErrorHandling = () => {
-      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>
-      );
-    };
-
-    return <VideoWithErrorHandling />;
+    return <VideoWithErrorHandling key={src} src={src} alt={alt} props={props} />;
   };
 
   // Modified processText function logic
@@ -861,35 +917,11 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
                   return renderVideoElement({ src, alt });
                 }
 
-                const ImageWithErrorHandling = () => {
-                  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>
-                    );
-                  }
+                if (!src || typeof src !== "string") {
+                  return null;
+                }
 
-                  return (
-                    <img
-                      src={src}
-                      alt={alt}
-                      className="markdown-img"
-                      onError={() => setHasError(true)}
-                    />
-                  );
-                };
-
-                return <ImageWithErrorHandling />;
+                return <ImageWithErrorHandling key={src} src={src} alt={alt} />;
               },
               // Video
               video: ({ children, ...props }: any) => {

frontend/public/locales/en/common.json

@@ -690,7 +690,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",

frontend/public/locales/zh/common.json

@@ -690,7 +690,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": "取消",