From 2f18622dd300c92f60b5b7150f79909959769938 Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Tue, 6 May 2025 13:00:21 -0700
Subject: [PATCH] Open markdown links externally (#100)

---
 src/components/chat/DyadMarkdownParser.tsx | 24 ++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/DyadMarkdownParser.tsx b/src/components/chat/DyadMarkdownParser.tsx
index f2bc499..0e4f449 100644
--- a/src/components/chat/DyadMarkdownParser.tsx
+++ b/src/components/chat/DyadMarkdownParser.tsx
@@ -12,6 +12,7 @@ import { useAtomValue } from "jotai";
 import { isStreamingAtom } from "@/atoms/chatAtoms";
 import { CustomTagState } from "./stateTypes";
 import { DyadOutput } from "./DyadOutput";
+import { IpcClient } from "@/ipc/ipc_client";
 
 interface DyadMarkdownParserProps {
   content: string;
@@ -29,11 +30,27 @@ type ContentPiece =
   | { type: "markdown"; content: string }
   | { type: "custom-tag"; tagInfo: CustomTagInfo };
 
+const customLink = ({ node, ...props }: { node?: any; [key: string]: any }) => (
+  <a
+    {...props}
+    onClick={(e) => {
+      const url = props.href;
+      if (url) {
+        e.preventDefault();
+        IpcClient.getInstance().openExternalUrl(url);
+      }
+    }}
+  />
+);
+
 export const VanillaMarkdownParser = ({ content }: { content: string }) => {
   return (
     <ReactMarkdown
       rehypePlugins={[rehypeRaw]}
-      components={{ code: CodeHighlight } as any}
+      components={{
+        code: CodeHighlight,
+        a: customLink,
+      }}
     >
       {content}
     </ReactMarkdown>
@@ -60,7 +77,10 @@ export const DyadMarkdownParser: React.FC<DyadMarkdownParserProps> = ({
             ? piece.content && (
                 <ReactMarkdown
                   rehypePlugins={[rehypeRaw]}
-                  components={{ code: CodeHighlight } as any}
+                  components={{
+                    code: CodeHighlight,
+                    a: customLink,
+                  }}
                 >
                   {piece.content}
                 </ReactMarkdown>