From e5bffcf594a401d228d2d2fe411573a4a9dce092 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 18 Feb 2025 15:39:31 -0800
Subject: [PATCH 1/2] add md support to appearance custom messages

---
 frontend/src/components/ChatBubble/index.jsx   | 18 +++++++++++++-----
 .../src/components/EditingChatBubble/index.jsx | 16 +++++++++++++---
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/ChatBubble/index.jsx b/frontend/src/components/ChatBubble/index.jsx
index 4ffc3d085ea..436d21a894c 100644
--- a/frontend/src/components/ChatBubble/index.jsx
+++ b/frontend/src/components/ChatBubble/index.jsx
@@ -1,6 +1,13 @@
 import React from "react";
 import UserIcon from "../UserIcon";
 import { userFromStorage } from "@/utils/request";
+import renderMarkdown from "@/utils/chat/markdown";
+import createDOMPurify from "dompurify";
+
+const DOMPurify = createDOMPurify(window);
+DOMPurify.setConfig({
+  ADD_ATTR: ["target", "rel"],
+});
 
 export default function ChatBubble({ message, type, popMsg }) {
   const isUser = type === "user";
@@ -16,11 +23,12 @@ export default function ChatBubble({ message, type, popMsg }) {
             role={type}
           />
 
-          <span
-            className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-          >
-            {message}
-          </span>
+          <div
+            className={`markdown whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(renderMarkdown(message)),
+            }}
+          />
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/EditingChatBubble/index.jsx b/frontend/src/components/EditingChatBubble/index.jsx
index feabd4c6ee1..952c6306894 100644
--- a/frontend/src/components/EditingChatBubble/index.jsx
+++ b/frontend/src/components/EditingChatBubble/index.jsx
@@ -1,6 +1,13 @@
 import React, { useState } from "react";
 import { X } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
+import renderMarkdown from "@/utils/chat/markdown";
+import createDOMPurify from "dompurify";
+
+const DOMPurify = createDOMPurify(window);
+DOMPurify.setConfig({
+  ADD_ATTR: ["target", "rel"],
+});
 
 export default function EditingChatBubble({
   message,
@@ -57,9 +64,12 @@ export default function EditingChatBubble({
             />
           ) : (
             tempMessage && (
-              <p className=" font-[500] md:font-semibold text-sm md:text-base break-words light:invert">
-                {tempMessage}
-              </p>
+              <div
+                className="markdown font-[500] md:font-semibold text-sm md:text-base break-words light:invert"
+                dangerouslySetInnerHTML={{
+                  __html: DOMPurify.sanitize(renderMarkdown(tempMessage)),
+                }}
+              />
             )
           )}
         </div>

From e3c9092ac932d1f62960fe56e8b7e8bec7b13ff1 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 18 Feb 2025 15:46:25 -0800
Subject: [PATCH 2/2] break out dompurify to util

---
 frontend/src/components/ChatBubble/index.jsx              | 7 +------
 frontend/src/components/EditingChatBubble/index.jsx       | 7 +------
 .../ChatContainer/ChatHistory/HistoricalMessage/index.jsx | 7 +------
 frontend/src/utils/chat/purify.js                         | 8 ++++++++
 4 files changed, 11 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/utils/chat/purify.js

diff --git a/frontend/src/components/ChatBubble/index.jsx b/frontend/src/components/ChatBubble/index.jsx
index 436d21a894c..7b37cd5d17e 100644
--- a/frontend/src/components/ChatBubble/index.jsx
+++ b/frontend/src/components/ChatBubble/index.jsx
@@ -2,12 +2,7 @@ import React from "react";
 import UserIcon from "../UserIcon";
 import { userFromStorage } from "@/utils/request";
 import renderMarkdown from "@/utils/chat/markdown";
-import createDOMPurify from "dompurify";
-
-const DOMPurify = createDOMPurify(window);
-DOMPurify.setConfig({
-  ADD_ATTR: ["target", "rel"],
-});
+import DOMPurify from "@/utils/chat/purify";
 
 export default function ChatBubble({ message, type, popMsg }) {
   const isUser = type === "user";
diff --git a/frontend/src/components/EditingChatBubble/index.jsx b/frontend/src/components/EditingChatBubble/index.jsx
index 952c6306894..652297c7914 100644
--- a/frontend/src/components/EditingChatBubble/index.jsx
+++ b/frontend/src/components/EditingChatBubble/index.jsx
@@ -2,12 +2,7 @@ import React, { useState } from "react";
 import { X } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import renderMarkdown from "@/utils/chat/markdown";
-import createDOMPurify from "dompurify";
-
-const DOMPurify = createDOMPurify(window);
-DOMPurify.setConfig({
-  ADD_ATTR: ["target", "rel"],
-});
+import DOMPurify from "@/utils/chat/purify";
 
 export default function EditingChatBubble({
   message,
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
index a5d60db4e07..5a5454bb283 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -6,7 +6,7 @@ import renderMarkdown from "@/utils/chat/markdown";
 import { userFromStorage } from "@/utils/request";
 import Citations from "../Citation";
 import { v4 } from "uuid";
-import createDOMPurify from "dompurify";
+import DOMPurify from "@/utils/chat/purify";
 import { EditMessageForm, useEditMessage } from "./Actions/EditMessage";
 import { useWatchDeleteMessage } from "./Actions/DeleteMessage";
 import TTSMessage from "./Actions/TTSButton";
@@ -17,11 +17,6 @@ import {
   ThoughtChainComponent,
 } from "../ThoughtContainer";
 
-const DOMPurify = createDOMPurify(window);
-DOMPurify.setConfig({
-  ADD_ATTR: ["target", "rel"],
-});
-
 const HistoricalMessage = ({
   uuid = v4(),
   message,
diff --git a/frontend/src/utils/chat/purify.js b/frontend/src/utils/chat/purify.js
new file mode 100644
index 00000000000..a6cf8520660
--- /dev/null
+++ b/frontend/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;