From 4f783b911c9904db486f3f7e5e109d09994e68e9 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Fri, 2 Aug 2024 00:44:29 +0530
Subject: [PATCH] Update DOMPurify imports correctly to resolve compilation
 warnings

---
 .../web/app/components/chatMessage/chatMessage.tsx          | 6 +++---
 .../web/app/components/referencePanel/referencePanel.tsx    | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index a926afb9..b8187f4c 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -12,7 +12,7 @@ import { TeaserReferencesSection, constructAllReferences } from '../referencePan
 
 import { ThumbsUp, ThumbsDown, Copy, Brain, Cloud, Folder, Book, Aperture, SpeakerHigh, MagnifyingGlass, Pause, Palette } from '@phosphor-icons/react';
 
-import * as DomPurify from 'dompurify';
+import DOMPurify from 'dompurify';
 import { InlineLoading } from '../loading/loading';
 import { convertColorToTextClass } from '@/app/common/colorUtils';
 import { AgentData } from '@/app/agents/page';
@@ -197,7 +197,7 @@ export function TrainOfThought(props: TrainOfThoughtProps) {
     let header = extractedHeader ? extractedHeader[1] : "";
     const iconColor = props.primary ? convertColorToTextClass(props.agentColor) : 'text-gray-500';
     const icon = chooseIconFromHeader(header, iconColor);
-    let markdownRendered = DomPurify.sanitize(md.render(props.message));
+    let markdownRendered = DOMPurify.sanitize(md.render(props.message));
     return (
         <div className={`${styles.trainOfThoughtElement} items-center ${props.primary ? 'text-gray-400' : 'text-gray-300'} ${styles.trainOfThought} ${props.primary ? styles.primary : ''}`} >
             {icon}
@@ -245,7 +245,7 @@ export default function ChatMessage(props: ChatMessageProps) {
             .replace(/LEFTBRACKET/g, '\\[').replace(/RIGHTBRACKET/g, '\\]');
 
         // Sanitize and set the rendered markdown
-        setMarkdownRendered(DomPurify.sanitize(markdownRendered));
+        setMarkdownRendered(DOMPurify.sanitize(markdownRendered));
     }, [props.chatMessage.message]);
 
     useEffect(() => {
diff --git a/src/interface/web/app/components/referencePanel/referencePanel.tsx b/src/interface/web/app/components/referencePanel/referencePanel.tsx
index 17632bea..75345904 100644
--- a/src/interface/web/app/components/referencePanel/referencePanel.tsx
+++ b/src/interface/web/app/components/referencePanel/referencePanel.tsx
@@ -23,7 +23,7 @@ import {
     SheetTrigger,
 } from "@/components/ui/sheet";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import * as DomPurify from 'dompurify';
+import DOMPurify from 'dompurify';
 
 interface NotesContextReferenceData {
     title: string;
@@ -36,7 +36,7 @@ interface NotesContextReferenceCardProps extends NotesContextReferenceData {
 
 
 function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {
-    const snippet = props.showFullContent ? DomPurify.sanitize(md.render(props.content)) : DomPurify.sanitize(props.content);
+    const snippet = props.showFullContent ? DOMPurify.sanitize(md.render(props.content)) : DOMPurify.sanitize(props.content);
     const [isHovering, setIsHovering] = useState(false);
 
     return (