From 4dcbfbbb894a13923c990ad9cc23ab6f1d5cf40c Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Fri, 7 Nov 2025 18:20:31 -0800
Subject: [PATCH] ui fix linting

---
 .../src/components/cache_settings/index.tsx   | 20 +++++++++----------
 .../components/chat_ui/ChatImageRenderer.tsx  |  9 ++++++---
 .../src/components/chat_ui/ChatUI.test.tsx    |  2 +-
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/cache_settings/index.tsx b/ui/litellm-dashboard/src/components/cache_settings/index.tsx
index d7581041ca8..126298b7725 100644
--- a/ui/litellm-dashboard/src/components/cache_settings/index.tsx
+++ b/ui/litellm-dashboard/src/components/cache_settings/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { Button, Accordion, AccordionHeader, AccordionBody } from "@tremor/react";
 import {
   getCacheSettingsCall,
@@ -24,14 +24,7 @@ const CacheSettings: React.FC<CacheSettingsProps> = ({ accessToken, userRole, us
   const [isTesting, setIsTesting] = useState<boolean>(false);
   const [isSaving, setIsSaving] = useState<boolean>(false);
 
-  useEffect(() => {
-    if (!accessToken) {
-      return;
-    }
-    loadCacheSettings();
-  }, [accessToken]);
-
-  const loadCacheSettings = async () => {
+  const loadCacheSettings = useCallback(async () => {
     try {
       const data = await getCacheSettingsCall(accessToken!);
       console.log("cache settings from API", data);
@@ -56,7 +49,14 @@ const CacheSettings: React.FC<CacheSettingsProps> = ({ accessToken, userRole, us
       console.error("Failed to load cache settings:", error);
       NotificationsManager.fromBackend("Failed to load cache settings");
     }
-  };
+  }, [accessToken]);
+
+  useEffect(() => {
+    if (!accessToken) {
+      return;
+    }
+    loadCacheSettings();
+  }, [accessToken, loadCacheSettings]);
 
   const handleTestConnection = async () => {
     if (!accessToken) {
diff --git a/ui/litellm-dashboard/src/components/chat_ui/ChatImageRenderer.tsx b/ui/litellm-dashboard/src/components/chat_ui/ChatImageRenderer.tsx
index 254bb26346d..49adaaed8c1 100644
--- a/ui/litellm-dashboard/src/components/chat_ui/ChatImageRenderer.tsx
+++ b/ui/litellm-dashboard/src/components/chat_ui/ChatImageRenderer.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import { MessageType } from "./types";
 import { shouldShowChatAttachedImage } from "./ChatImageUtils";
 import { FilePdfOutlined } from "@ant-design/icons";
@@ -21,11 +22,13 @@ const ChatImageRenderer: React.FC<ChatImageRendererProps> = ({ message }) => {
           <FilePdfOutlined style={{ fontSize: "48px", color: "#dc2626" }} />
         </div>
       ) : (
-        <img
-          src={message.imagePreviewUrl}
+        <Image
+          src={message.imagePreviewUrl || ""}
           alt="User uploaded image"
+          width={256}
+          height={200}
           className="max-w-64 rounded-md border border-gray-200 shadow-sm"
-          style={{ maxHeight: "200px" }}
+          style={{ maxHeight: "200px", width: "auto", height: "auto" }}
         />
       )}
     </div>
diff --git a/ui/litellm-dashboard/src/components/chat_ui/ChatUI.test.tsx b/ui/litellm-dashboard/src/components/chat_ui/ChatUI.test.tsx
index b01547de29c..6670395aad5 100644
--- a/ui/litellm-dashboard/src/components/chat_ui/ChatUI.test.tsx
+++ b/ui/litellm-dashboard/src/components/chat_ui/ChatUI.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, getByText, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import ChatUI from "./ChatUI";
 import * as fetchModelsModule from "./llm_calls/fetch_models";