refactor: extract link and image components for Markdown rendering (#119)

web/src/components/deer-flow/markdown.tsx

@@ -19,6 +19,19 @@ import { cn } from "~/lib/utils";
 import Image from "./image";
 import { Tooltip } from "./tooltip";
 
+const components: ReactMarkdownOptions["components"] = {
+  a: ({ href, children }) => (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  ),
+  img: ({ src, alt }) => (
+    <a href={src as string} target="_blank" rel="noopener noreferrer">
+      <Image className="rounded" src={src as string} alt={alt ?? ""} />
+    </a>
+  ),
+};
+
 export function Markdown({
   className,
   children,
@@ -49,18 +62,7 @@ export function Markdown({
       <ReactMarkdown
         remarkPlugins={[remarkGfm, remarkMath]}
         rehypePlugins={rehypePlugins}
-        components={{
+        components={components}
-          a: ({ href, children }) => (
-            <a href={href} target="_blank" rel="noopener noreferrer">
-              {children}
-            </a>
-          ),
-          img: ({ src, alt }) => (
-            <a href={src as string} target="_blank" rel="noopener noreferrer">
-              <Image className="rounded" src={src as string} alt={alt ?? ""} />
-            </a>
-          ),
-        }}
         {...props}
       >
         {autoFixMarkdown(