fix: fix markdown embed image issue (#857)

* fix: fix markdown embed image issue

* fix urlTransform filter condition

* fix code format

* add image/gif filter

* Format code

---------

Co-authored-by: 饺子w (Yumechi) <35571479+eternal-flame-AD@users.noreply.github.com>

ui/src/common/Markdown.tsx

@@ -1,7 +1,21 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, {defaultUrlTransform} from 'react-markdown';
+import type {UrlTransform} from 'react-markdown';
 import gfm from 'remark-gfm';
 
+// Copy from mlflow/server/js/src/shared/web-shared/genai-markdown-renderer/GenAIMarkdownRenderer.tsx
+// Related PR: https://github.com/mlflow/mlflow/pull/16761
+const urlTransform: UrlTransform = (value) => {
+    if (
+        value.startsWith('data:image/png;') ||
+        value.startsWith('data:image/jpeg;') ||
+        value.startsWith('data:image/gif;')
+    ) {
+        return value;
+    }
+    return defaultUrlTransform(value);
+};
+
 export const Markdown = ({
     children,
     onImageLoaded = () => {},
@@ -11,7 +25,8 @@ export const Markdown = ({
 }) => (
     <ReactMarkdown
         components={{img: ({...props}) => <img onLoad={onImageLoaded} {...props} />}}
-        remarkPlugins={[gfm]}>
+        remarkPlugins={[gfm]}
+        urlTransform={urlTransform}>
         {children}
     </ReactMarkdown>
 );