Make MD links in chat msgs open in new tabs

jupyterlab · Nov 16, 2023 · 5aaa6c6 · 5aaa6c6
1 parent 2c89d13
commit 5aaa6c6
Showing 1 changed file with 14 additions and 0 deletions.
diff --git 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]}