From dd92c947888cd5e747d4cb40d34d5be979346b43 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 18 Apr 2024 19:22:34 -0700
Subject: [PATCH] ui - place litellm params in an accordion

---
 .../src/components/model_dashboard.tsx            | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx
index e8d05a43b..9735bb83c 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx
@@ -12,6 +12,9 @@ import {
   Metric,
   Text,
   Grid,
+  Accordion,
+  AccordionHeader,
+  AccordionBody,
 } from "@tremor/react";
 import { TabPanel, TabPanels, TabGroup, TabList, Tab, TextInput, Icon } from "@tremor/react";
 import { Select, SelectItem, MultiSelect, MultiSelectItem } from "@tremor/react";
@@ -220,7 +223,6 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
       max_tokens = model_info?.max_tokens;
     }
 
-    // let cleanedLitellmParams == litellm_params without model, api_base
     if (curr_model?.litellm_params) {
       cleanedLitellmParams = Object.fromEntries(
         Object.entries(curr_model?.litellm_params).filter(
@@ -460,9 +462,18 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
                   }
 
                   <TableCell>
-                    <pre>
+
+                <Accordion>
+                  <AccordionHeader>
+                    <Text>Litellm params</Text>
+                  </AccordionHeader>
+                  <AccordionBody>
+                  <pre>
                     {JSON.stringify(model.cleanedLitellmParams, null, 2)}
                     </pre>
+                  </AccordionBody>
+                </Accordion>
+                   
                   </TableCell>
 
                   <TableCell>{model.input_cost}</TableCell>