From 5aaa6c6305cedbd5820862efdc7d23441a25d4cb Mon Sep 17 00:00:00 2001
From: Andrii Ieroshenko <ieroshenkoa@gmail.com>
Date: Thu, 16 Nov 2023 14:22:02 -0800
Subject: [PATCH] Make MD links in chat msgs open in new tabs

---
 .../jupyter-ai/src/components/chat-messages.tsx    | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/jupyter-ai/src/components/chat-messages.tsx b/packages/jupyter-ai/src/components/chat-messages.tsx
index 47e7c32f9..850d6a543 100644
--- a/packages/jupyter-ai/src/components/chat-messages.tsx
+++ b/packages/jupyter-ai/src/components/chat-messages.tsx
@@ -22,6 +22,11 @@ type ChatMessageHeaderProps = {
   sx?: SxProps<Theme>;
 };
 
+type NewTabLinkProps = {
+  children: React.ReactNode;
+  href?: string;
+};
+
 export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
   const collaborators = useCollaboratorsContext();
 
@@ -128,6 +133,14 @@ export function ChatMessages(props: ChatMessagesProps): JSX.Element {
     }
   }, [props.messages]);
 
+  function NewTabLink(props: NewTabLinkProps) {
+    return (
+      <a href={props.href ?? '#'} target="_blank" rel="noopener noreferrer">
+        {props.children}
+      </a>
+    );
+  }
+
   return (
     <Box
       sx={{
@@ -149,6 +162,7 @@ export function ChatMessages(props: ChatMessagesProps): JSX.Element {
             // markdown styling and then overriding any CSS to make it more compact.
             className="jp-RenderedHTMLCommon jp-ai-react-markdown"
             components={{
+              a: NewTabLink,
               code: ChatCodeView
             }}
             remarkPlugins={[remarkMath]}