From d553000e6668ec793f065eb47ce738978ffe3584 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 23 Apr 2026 08:20:18 +0000 Subject: [PATCH] feat(ui): migrate key_value_input + email_settings to shadcn - key_value_input: antd Button/Space + @tremor TextInput + @ant-design/icons MinusCircle/Plus \u2192 shadcn Input/Button + lucide MinusCircle/Plus. Plain Tailwind flex layout replaces antd Space. - email_settings: @tremor Card/Text/Grid/Button/TextInput/TableCell + antd Typography \u2192 shadcn Card/Input/Label/Button + plain Tailwind grid. Inline help text uses semantic muted-foreground / destructive tokens. Inputs preserve type=password for sensitive SMTP fields. Gates: TS \u2713 | Build \u2713. Co-authored-by: yuneng-jiang --- .../src/components/email_settings.tsx | 225 ++++++++++-------- .../src/components/key_value_input.tsx | 48 +++- 2 files changed, 162 insertions(+), 111 deletions(-) diff --git a/ui/litellm-dashboard/src/components/email_settings.tsx b/ui/litellm-dashboard/src/components/email_settings.tsx index 53d08ad64f5..df2627c2e78 100644 --- a/ui/litellm-dashboard/src/components/email_settings.tsx +++ b/ui/litellm-dashboard/src/components/email_settings.tsx @@ -1,44 +1,44 @@ import React from "react"; -import { Card, Text, Grid, Button, TextInput, TableCell } from "@tremor/react"; -import { Typography } from "antd"; +import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; import NotificationManager from "./molecules/notifications_manager"; import { serviceHealthCheck, setCallbacksCall } from "./networking"; import { EmailEventSettings } from "./email_events"; -const { Title } = Typography; - interface EmailSettingsProps { accessToken: string | null; premiumUser: boolean; + // eslint-disable-next-line @typescript-eslint/no-explicit-any alerts: any[]; } -const EmailSettings: React.FC = ({ accessToken, premiumUser, alerts }) => { +const EmailSettings: React.FC = ({ + accessToken, + premiumUser, + alerts, +}) => { const handleSaveEmailSettings = async () => { - if (!accessToken) { - return; - } + if (!accessToken) return; - let updatedVariables: Record = {}; + const updatedVariables: Record = {}; alerts .filter((alert) => alert.name === "email") .forEach((alert) => { - Object.entries(alert.variables ?? {}).forEach(([key, value]) => { - const inputElement = document.querySelector(`input[name="${key}"]`) as HTMLInputElement; + Object.entries(alert.variables ?? {}).forEach(([key]) => { + const inputElement = document.querySelector( + `input[name="${key}"]`, + ) as HTMLInputElement; if (inputElement && inputElement.value) { - updatedVariables[key] = inputElement?.value; + updatedVariables[key] = inputElement.value; } }); }); - console.log("updatedVariables", updatedVariables); - //filter out null / undefined values for updatedVariables - const payload = { - general_settings: { - alerting: ["email"], - }, + general_settings: { alerting: ["email"] }, environment_variables: updatedVariables, }; try { @@ -54,125 +54,154 @@ const EmailSettings: React.FC = ({ accessToken, premiumUser,
- - Email Server Settings - - - {" "} + +

Email Server Settings

+

+ LiteLLM Docs: email alerts - {" "} -
- + +

-
+
{alerts .filter((alert) => alert.name === "email") .map((alert, index) => ( - -
    - - {Object.entries(alert.variables ?? {}).map(([key, value]) => ( -
  • - {premiumUser != true && (key === "EMAIL_LOGO_URL" || key === "EMAIL_SUPPORT_CONTACT") ? ( +
    +
    + {Object.entries(alert.variables ?? {}).map( + ([key, value]) => ( +
    + {premiumUser !== true && + (key === "EMAIL_LOGO_URL" || + key === "EMAIL_SUPPORT_CONTACT") ? ( ) : (
    - {key} - {key} +
    )} - {/* Added descriptions for input fields */} -

    +

    {key === "SMTP_HOST" && ( -

    - Enter the SMTP host address, e.g. `smtp.resend.com` - Required * -
    + + Enter the SMTP host address, e.g.{" "} + smtp.resend.com + + {" "} + Required * + + )} - {key === "SMTP_PORT" && ( -
    - Enter the SMTP port number, e.g. `587` - Required * -
    + + Enter the SMTP port number, e.g. 587 + + {" "} + Required * + + )} - {key === "SMTP_USERNAME" && ( -
    - Enter the SMTP username, e.g. `username` - Required * -
    + + Enter the SMTP username, e.g. username + + {" "} + Required * + + + )} + {key === "SMTP_PASSWORD" && ( + + {" "} + Required * + )} - - {key === "SMTP_PASSWORD" && Required * } - {key === "SMTP_SENDER_EMAIL" && ( -
    - Enter the sender email address, e.g. `sender@berri.ai` - Required * -
    + + Enter the sender email address, e.g.{" "} + sender@berri.ai + + {" "} + Required * + + )} - {key === "TEST_EMAIL_ADDRESS" && ( -
    - Email Address to send `Test Email Alert` to. example: `info@berri.ai` - Required * -
    + + Email Address to send Test Email Alert{" "} + to. example: info@berri.ai + + {" "} + Required * + + )} {key === "EMAIL_LOGO_URL" && ( -
    - (Optional) Customize the Logo that appears in the email, pass a url to your logo -
    + + (Optional) Customize the Logo that appears in the + email, pass a url to your logo + )} {key === "EMAIL_SUPPORT_CONTACT" && ( -
    - (Optional) Customize the support email address that appears in the email. Default is - support@berri.ai -
    + + (Optional) Customize the support email address that + appears in the email. Default is support@berri.ai + )}

    -
    • - ))} -     -
- +
+ ), + )} +
+ ))} - - +
+ + +
); diff --git a/ui/litellm-dashboard/src/components/key_value_input.tsx b/ui/litellm-dashboard/src/components/key_value_input.tsx index db814f84037..d725c09469d 100644 --- a/ui/litellm-dashboard/src/components/key_value_input.tsx +++ b/ui/litellm-dashboard/src/components/key_value_input.tsx @@ -1,15 +1,20 @@ import React, { useState } from "react"; -import { Button, Space } from "antd"; -import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"; -import { TextInput } from "@tremor/react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { MinusCircle, Plus } from "lucide-react"; interface KeyValueInputProps { value?: Record; onChange?: (value: Record) => void; } -const KeyValueInput: React.FC = ({ value = {}, onChange }) => { - const [pairs, setPairs] = useState<[string, string][]>(Object.entries(value)); +const KeyValueInput: React.FC = ({ + value = {}, + onChange, +}) => { + const [pairs, setPairs] = useState<[string, string][]>( + Object.entries(value), + ); const handleAdd = () => { setPairs([...pairs, ["", ""]]); @@ -31,19 +36,36 @@ const KeyValueInput: React.FC = ({ value = {}, onChange }) = return (
{pairs.map(([key, val], index) => ( - - handleChange(index, e.target.value, val)} /> - + handleChange(index, e.target.value, val)} + /> + handleChange(index, key, e.target.value)} /> -
- handleRemove(index)} style={{ cursor: "pointer" }} /> -
- + +
))} -