Force links to open in new tab

src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx

@@ -1,14 +1,12 @@
 import React, { memo, forwardRef, useState } from "react";
 import { Warning, CaretDown } from "@phosphor-icons/react";
 import renderMarkdown from "@/utils/chat/markdown";
+import DOMPurify from "@/utils/chat/purify";
 import { embedderSettings } from "@/main";
 import { v4 } from "uuid";
-import createDOMPurify from "dompurify";
 import AnythingLLMIcon from "@/assets/anything-llm-icon.svg";
 import { formatDate } from "@/utils/date";
 
-const DOMPurify = createDOMPurify(window);
-
 const ThoughtBubble = ({ thought }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   if (!thought || !embedderSettings.settings.showThoughts) return null;

src/utils/chat/markdown.js

@@ -44,6 +44,13 @@ const markdown = markdownIt({
   // Enable <ol> and <ul> items to not assume an HTML structure so we can keep numbering from responses.
   .disable("list");
 
+// Custom renderer rule to make links open in new tab
+markdown.renderer.rules.link_open = (tokens, idx) => {
+  const token = tokens[idx];
+  const href = token.attrs.find((attr) => attr[0] === "href");
+  return `<a href="${href[1]}" target="_blank" rel="noopener noreferrer">`;
+};
+
 export default function renderMarkdown(text = "") {
   return markdown.render(text);
 }

src/utils/chat/purify.js

@@ -0,0 +1,8 @@
+import createDOMPurify from "dompurify";
+
+const DOMPurify = createDOMPurify(window);
+DOMPurify.setConfig({
+  ADD_ATTR: ["target", "rel"],
+});
+
+export default DOMPurify;