From 9a3e0d2891e47ad4c5698907d627bdacedc58b71 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Sat, 8 Jul 2023 15:11:59 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(SanitizedDiv):=20add=20a=20new?=
 =?UTF-8?q?=20component=20to=20sanitize=20and=20render=20HTML=20content=20?=
 =?UTF-8?q?safely=20=F0=9F=94=A8=20refactor(chatMessage):=20replace=20the?=
 =?UTF-8?q?=20usage=20of=20DOMPurify=20with=20SanitizedHTMLWrapper=20compo?=
 =?UTF-8?q?nent=20in=20chatMessage=20component=20=F0=9F=94=A8=20refactor(f?=
 =?UTF-8?q?ormModal):=20replace=20the=20usage=20of=20DOMPurify=20with=20Sa?=
 =?UTF-8?q?nitizedHTMLWrapper=20component=20in=20formModal=20component=20?=
 =?UTF-8?q?=F0=9F=94=A8=20refactor(genericModal):=20replace=20the=20usage?=
 =?UTF-8?q?=20of=20DOMPurify=20with=20SanitizedHTMLWrapper=20component=20i?=
 =?UTF-8?q?n=20genericModal=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/SanitizedDiv/index.tsx     | 21 +++++++++++++++++++
 .../modals/chatModal/chatMessage/index.tsx    | 13 ++++++------
 .../modals/formModal/chatMessage/index.tsx    | 12 +++++------
 .../src/modals/genericModal/index.tsx         | 12 +++++------
 4 files changed, 38 insertions(+), 20 deletions(-)
 create mode 100644 src/frontend/src/components/SanitizedDiv/index.tsx

diff --git a/src/frontend/src/components/SanitizedDiv/index.tsx b/src/frontend/src/components/SanitizedDiv/index.tsx
new file mode 100644
index 000000000..e76105c00
--- /dev/null
+++ b/src/frontend/src/components/SanitizedDiv/index.tsx
@@ -0,0 +1,21 @@
+import DOMPurify from "dompurify";
+
+const SanitizedHTMLWrapper = ({
+  className,
+  content,
+  onClick,
+  suppressWarning = false,
+}) => {
+  const sanitizedHTML = DOMPurify.sanitize(content);
+
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
+      suppressContentEditableWarning={suppressWarning}
+      onClick={onClick}
+    />
+  );
+};
+
+export default SanitizedHTMLWrapper;
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index f90396198..3a9749b72 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -1,5 +1,4 @@
 import Convert from "ansi-to-html";
-import DOMPurify from "dompurify";
 import { MessageCircle, User2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
@@ -8,6 +7,7 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
 import AiIconStill from "../../../assets/froze-flow.png";
+import SanitizedHTMLWrapper from "../../../components/SanitizedDiv";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import { CodeBlock } from "../../formModal/chatMessage/codeBlock";
@@ -68,13 +68,12 @@ export default function ChatMessage({
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
-              <div
-                onClick={() => setHidden((prev) => !prev)}
+              <SanitizedHTMLWrapper
                 className=" chat-message-modal-thought"
-                dangerouslySetInnerHTML={{
-                  __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
-                }}
-              ></div>
+                content={convert.toHtml(chat.thought)}
+                suppressWarning={false}
+                onClick={() => setHidden((prev) => !prev)}
+              />
             )}
             {chat.thought && chat.thought !== "" && !hidden && <br></br>}
             <div className="chat-message-modal-markdown">
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 3e3cf2dd5..66981be5e 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -1,5 +1,4 @@
 import Convert from "ansi-to-html";
-import DOMPurify from "dompurify";
 import { ChevronDown } from "lucide-react";
 import { useState } from "react";
 import ReactMarkdown from "react-markdown";
@@ -8,6 +7,7 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import MaleTechnology from "../../../assets/male-technologist.png";
 import Robot from "../../../assets/robot.png";
+import SanitizedHTMLWrapper from "../../../components/SanitizedDiv";
 import { THOUGHTS_ICON } from "../../../constants";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
@@ -57,13 +57,11 @@ export default function ChatMessage({
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
-              <div
+              <SanitizedHTMLWrapper
+                className=" form-modal-chat-thought"
+                content={convert.toHtml(chat.thought)}
                 onClick={() => setHidden((prev) => !prev)}
-                className=" form-modal-chat-thought "
-                dangerouslySetInnerHTML={{
-                  __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
-                }}
-              ></div>
+              />
             )}
             {chat.thought && chat.thought !== "" && !hidden && <br></br>}
             <div className="w-full">
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 9eb714c9b..efd7dcd22 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -1,6 +1,6 @@
-import DOMPurify from "dompurify";
 import { FileText, Variable } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
+import SanitizedHTMLWrapper from "../../components/SanitizedDiv";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
@@ -15,7 +15,7 @@ import {
 } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
 import {
-  HIGHLIGH_CSS,
+  HIGHLIGHT_CSS,
   PROMPT_DIALOG_SUBTITLE,
   TEXT_DIALOG_SUBTITLE,
 } from "../../constants";
@@ -120,13 +120,13 @@ export default function GenericModal({
 
   const TextAreaContentView = () => {
     return (
-      <div
-        className={HIGHLIGH_CSS}
-        dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(coloredContent) }}
-        suppressContentEditableWarning={true}
+      <SanitizedHTMLWrapper
+        className={HIGHLIGHT_CSS}
+        content={coloredContent}
         onClick={() => {
           setIsEdit(true);
         }}
+        suppressWarning={true}
       />
     );
   };