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

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}`;
         }

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`}

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