From b3fff43542727c035f42f0ec7d2d72b13898108c Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Tue, 22 Oct 2024 19:13:54 -0700
Subject: [PATCH] Sanitize user attached images. Constrain chat input width on
 home page

Set max combined images size to 20mb to allow multiple photos to be shared
---
 .../web/app/components/chatMessage/chatMessage.tsx    | 11 +++++++----
 src/interface/web/app/page.tsx                        |  2 +-
 src/khoj/routers/api_chat.py                          |  2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index a725bdaa..77eaf64a 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -343,10 +343,13 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
 
         if (props.chatMessage.images && props.chatMessage.images.length > 0) {
             const imagesInMd = props.chatMessage.images
-                .map(
-                    (image, index) =>
-                        `<div class="${styles.imageWrapper}"><img src="${image.startsWith("data%3Aimage") ? decodeURIComponent(image) : image}" alt="uploaded image ${index + 1}" /></div>`,
-                )
+                .map((image, index) => {
+                    const decodedImage = image.startsWith("data%3Aimage")
+                        ? decodeURIComponent(image)
+                        : image;
+                    const sanitizedImage = DOMPurify.sanitize(decodedImage);
+                    return `<div class="${styles.imageWrapper}"><img src="${sanitizedImage}" alt="uploaded image ${index + 1}" /></div>`;
+                })
                 .join("");
             message = `<div class="${styles.imagesContainer}">${imagesInMd}</div>${message}`;
         }
diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index 4bc97bf1..432787e0 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -225,7 +225,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     </div>
                 )}
             </div>
-            <div className={`mx-auto ${props.isMobileWidth ? "w-full" : "w-fit"}`}>
+            <div className={`mx-auto ${props.isMobileWidth ? "w-full" : "w-fit max-w-screen-md"}`}>
                 {!props.isMobileWidth && (
                     <div
                         className={`w-full ${styles.inputBox} shadow-lg bg-background align-middle items-center justify-center px-3 py-1 dark:bg-neutral-700 border-stone-100 dark:border-none dark:shadow-none rounded-2xl`}
diff --git a/src/khoj/routers/api_chat.py b/src/khoj/routers/api_chat.py
index 3cb24f52..09ea9eea 100644
--- a/src/khoj/routers/api_chat.py
+++ b/src/khoj/routers/api_chat.py
@@ -538,7 +538,7 @@ async def chat(
     rate_limiter_per_day=Depends(
         ApiUserRateLimiter(requests=600, subscribed_requests=6000, window=60 * 60 * 24, slug="chat_day")
     ),
-    image_rate_limiter=Depends(ApiImageRateLimiter(max_images=10, max_combined_size_mb=10)),
+    image_rate_limiter=Depends(ApiImageRateLimiter(max_images=10, max_combined_size_mb=20)),
 ):
     # Access the parameters from the body
     q = body.q