From 551e8bc2c79fb1473075d97d581a3869d28250dc Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 23 Apr 2026 22:00:56 +0000 Subject: [PATCH] chore(ui): bulk antd icons \u2192 lucide aliases (remaining 11 files) Final pass over all remaining @ant-design/icons usages. This covers the multi-line imports from: - view_logs/LogDetailsDrawer/RealtimePrettyView (RealtimeEvent/ Response icons: Volume2, MessageSquare, ShieldCheck, PlayCircle, etc.). - app/(dashboard)/components/Sidebar2, leftnav: Dashboard nav icons (LayoutGrid, Users, Key, BarChart3, Server, ShieldCheck, FlaskConical, Tags, ClipboardCheck, Bot, Wrench, Palette, Landmark, Book, Folder, LineChart, CreditCard, Plug, Square, PlayCircle). - bulk_create_users_button: UserPlus, CheckCircle2, AlertTriangle, XCircle. - chat/ConversationList, chat/ChatPage, playground/chat_ui/ChatUI, RealtimePlayground, AgentBuilderView: multiple chat icons (Send, MessageSquare, MessageCircle, PanelLeft/Close, Volume2, MicOff, ArrowUp, Eraser, FlaskConical, FileText, Tags, ShieldCheck). - guardrails/custom_code/CustomCodeModal: Code, FileWarning. - playground/compareUI/CompareUI: MessageSquare, PanelLeft etc. Followups: - ChatUI.tsx: 2 LoadingOutlined spin= props \u2192 className= 'animate-spin' (lucide has no spin prop). After this pass: @ant-design/icons usage drops from 11 \u2192 0 files! @heroicons/react usage is already 0. The packages can now be removed from package.json in a later cleanup commit. Gates: TS \u2713 | Build \u2713. Co-authored-by: yuneng-jiang --- .../app/(dashboard)/components/Sidebar2.tsx | 21 +------------- .../components/bulk_create_users_button.tsx | 9 +----- .../src/components/chat/ChatPage.tsx | 16 +---------- .../src/components/chat/ConversationList.tsx | 9 +----- .../custom_code/CustomCodeModal.tsx | 11 +------- .../src/components/leftnav.tsx | 28 +------------------ .../playground/chat_ui/AgentBuilderView.tsx | 2 +- .../components/playground/chat_ui/ChatUI.tsx | 26 ++--------------- .../playground/chat_ui/RealtimePlayground.tsx | 8 +----- .../playground/compareUI/CompareUI.tsx | 2 +- .../LogDetailsDrawer/RealtimePrettyView.tsx | 9 +----- 11 files changed, 13 insertions(+), 128 deletions(-) diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx index 27a6e6c13be..2412ac56cd1 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx @@ -1,26 +1,7 @@ "use client"; import { Layout, Menu, ConfigProvider } from "antd"; -import { - KeyOutlined, - PlayCircleOutlined, - BlockOutlined, - BarChartOutlined, - TeamOutlined, - BankOutlined, - UserOutlined, - SettingOutlined, - ApiOutlined, - AppstoreOutlined, - DatabaseOutlined, - FileTextOutlined, - LineChartOutlined, - SafetyOutlined, - ExperimentOutlined, - ToolOutlined, - TagsOutlined, - AuditOutlined, -} from "@ant-design/icons"; +import { Key as KeyOutlined, PlayCircle as PlayCircleOutlined, Square as BlockOutlined, BarChart3 as BarChartOutlined, Users as TeamOutlined, Landmark as BankOutlined, User as UserOutlined, Settings as SettingOutlined, Plug as ApiOutlined, LayoutGrid as AppstoreOutlined, Database as DatabaseOutlined, FileText as FileTextOutlined, LineChart as LineChartOutlined, ShieldCheck as SafetyOutlined, FlaskConical as ExperimentOutlined, Wrench as ToolOutlined, Tags as TagsOutlined, ClipboardCheck as AuditOutlined } from "lucide-react"; // import { // all_admin_roles, // rolesWithWriteAccess, diff --git a/ui/litellm-dashboard/src/components/bulk_create_users_button.tsx b/ui/litellm-dashboard/src/components/bulk_create_users_button.tsx index eab563f2249..35721f40c28 100644 --- a/ui/litellm-dashboard/src/components/bulk_create_users_button.tsx +++ b/ui/litellm-dashboard/src/components/bulk_create_users_button.tsx @@ -2,14 +2,7 @@ import React, { useState, useEffect } from "react"; import { Text } from "@tremor/react"; import { Button, Modal, Table, Upload, Typography } from "antd"; -import { - UploadOutlined, - DownloadOutlined, - WarningOutlined, - FileTextOutlined, - DeleteOutlined, - FileExclamationOutlined, -} from "@ant-design/icons"; +import { Upload as UploadOutlined, Download as DownloadOutlined, AlertTriangle as WarningOutlined, FileText as FileTextOutlined, Trash2 as DeleteOutlined, FileWarning as FileExclamationOutlined } from "lucide-react"; import { userCreateCall, invitationCreateCall, getProxyUISettings } from "./networking"; import Papa from "papaparse"; import { CheckCircle2 as CheckCircleIcon, XCircle as XCircleIcon, AlertTriangle as ExclamationIcon } from "lucide-react"; diff --git a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx index b547f749175..8a21d0d92ae 100644 --- a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx +++ b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx @@ -3,21 +3,7 @@ import React, { useCallback, useEffect, useRef, useState, useLayoutEffect } from "react"; import { Tooltip, Skeleton, Popover } from "antd"; import MessageManager from "@/components/molecules/message_manager"; -import { - SettingOutlined, - PlusOutlined, - EditOutlined, - MenuFoldOutlined, - MenuUnfoldOutlined, - SearchOutlined, - MessageOutlined, - AppstoreOutlined, - KeyOutlined, - ArrowLeftOutlined, - DownOutlined, - CloseOutlined, - CheckOutlined, -} from "@ant-design/icons"; +import { Settings as SettingOutlined, Plus as PlusOutlined, Pencil as EditOutlined, PanelLeftClose as MenuFoldOutlined, PanelLeft as MenuUnfoldOutlined, Search as SearchOutlined, MessageSquare as MessageOutlined, LayoutGrid as AppstoreOutlined, Key as KeyOutlined, ArrowLeft as ArrowLeftOutlined, ChevronDown as DownOutlined, X as CloseOutlined, Check as CheckOutlined } from "lucide-react"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import { useRouter, useSearchParams } from "next/navigation"; diff --git a/ui/litellm-dashboard/src/components/chat/ConversationList.tsx b/ui/litellm-dashboard/src/components/chat/ConversationList.tsx index 1b9cdfc7939..e0c535f20e1 100644 --- a/ui/litellm-dashboard/src/components/chat/ConversationList.tsx +++ b/ui/litellm-dashboard/src/components/chat/ConversationList.tsx @@ -10,14 +10,7 @@ import { Avatar, Typography, } from "antd"; -import { - EditOutlined, - DeleteOutlined, - PlusOutlined, - SearchOutlined, - UserOutlined, - MessageOutlined, -} from "@ant-design/icons"; +import { Pencil as EditOutlined, Trash2 as DeleteOutlined, Plus as PlusOutlined, Search as SearchOutlined, User as UserOutlined, MessageSquare as MessageOutlined } from "lucide-react"; import dayjs from "dayjs"; import { Conversation } from "./types"; diff --git a/ui/litellm-dashboard/src/components/guardrails/custom_code/CustomCodeModal.tsx b/ui/litellm-dashboard/src/components/guardrails/custom_code/CustomCodeModal.tsx index 125ca70d75e..d6e96c4d0cd 100644 --- a/ui/litellm-dashboard/src/components/guardrails/custom_code/CustomCodeModal.tsx +++ b/ui/litellm-dashboard/src/components/guardrails/custom_code/CustomCodeModal.tsx @@ -2,16 +2,7 @@ import React, { useState, useRef, useEffect } from "react"; import { Modal, Select, Switch, Collapse, Input, Divider } from "antd"; // eslint-disable-next-line litellm-ui/no-banned-ui-imports import { Button, TextInput } from "@tremor/react"; -import { - CodeOutlined, - PlayCircleOutlined, - CheckCircleOutlined, - CloseCircleOutlined, - CaretRightOutlined, - SaveOutlined, - UsergroupAddOutlined, - ExportOutlined, -} from "@ant-design/icons"; +import { Code as CodeOutlined, PlayCircle as PlayCircleOutlined, CheckCircle2 as CheckCircleOutlined, XCircle as CloseCircleOutlined, ChevronRight as CaretRightOutlined, Save as SaveOutlined, UserRoundPlus as UsergroupAddOutlined, Upload as ExportOutlined } from "lucide-react"; import { createGuardrailCall, updateGuardrailCall, testCustomCodeGuardrail } from "../../networking"; import NotificationsManager from "../../molecules/notifications_manager"; diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx index ef0806c9594..e5f73cefcf9 100644 --- a/ui/litellm-dashboard/src/components/leftnav.tsx +++ b/ui/litellm-dashboard/src/components/leftnav.tsx @@ -1,33 +1,7 @@ import { useOrganizations } from "@/app/(dashboard)/hooks/organizations/useOrganizations"; import { useTeams } from "@/app/(dashboard)/hooks/teams/useTeams"; import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; -import { - ApiOutlined, - AppstoreOutlined, - AuditOutlined, - BankOutlined, - BarChartOutlined, - BgColorsOutlined, - BlockOutlined, - BookOutlined, - CreditCardOutlined, - DatabaseOutlined, - ExperimentOutlined, - ExportOutlined, - FileTextOutlined, - FolderOutlined, - KeyOutlined, - LineChartOutlined, - PlayCircleOutlined, - RobotOutlined, - SafetyOutlined, - SearchOutlined, - SettingOutlined, - TagsOutlined, - TeamOutlined, - ToolOutlined, - UserOutlined, -} from "@ant-design/icons"; +import { Plug as ApiOutlined, LayoutGrid as AppstoreOutlined, ClipboardCheck as AuditOutlined, Landmark as BankOutlined, BarChart3 as BarChartOutlined, Palette as BgColorsOutlined, Square as BlockOutlined, Book as BookOutlined, CreditCard as CreditCardOutlined, Database as DatabaseOutlined, FlaskConical as ExperimentOutlined, Upload as ExportOutlined, FileText as FileTextOutlined, Folder as FolderOutlined, Key as KeyOutlined, LineChart as LineChartOutlined, PlayCircle as PlayCircleOutlined, Bot as RobotOutlined, ShieldCheck as SafetyOutlined, Search as SearchOutlined, Settings as SettingOutlined, Tags as TagsOutlined, Users as TeamOutlined, Wrench as ToolOutlined, User as UserOutlined } from "lucide-react"; import type { MenuProps } from "antd"; import { ConfigProvider, Layout, Menu } from "antd"; import { useMemo } from "react"; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/AgentBuilderView.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/AgentBuilderView.tsx index c47c201d074..df42cadd7ae 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/AgentBuilderView.tsx +++ b/ui/litellm-dashboard/src/components/playground/chat_ui/AgentBuilderView.tsx @@ -1,6 +1,6 @@ "use client"; -import { CommentOutlined, DeleteOutlined, ExperimentOutlined, LinkOutlined, PlusOutlined, RobotOutlined, SaveOutlined } from "@ant-design/icons"; +import { MessageCircle as CommentOutlined, Trash2 as DeleteOutlined, FlaskConical as ExperimentOutlined, Link as LinkOutlined, Plus as PlusOutlined, Bot as RobotOutlined, Save as SaveOutlined } from "lucide-react"; import { Button, Input, Modal, Select, Spin, Tabs } from "antd"; import React, { useCallback, useEffect, useState } from "react"; import CodeBlock from "@/app/(dashboard)/api-reference/components/CodeBlock"; diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx index 2e87fe71c88..77dfc1bbb0e 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx +++ b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx @@ -1,26 +1,6 @@ "use client"; -import { - ApiOutlined, - ArrowUpOutlined, - ClearOutlined, - CodeOutlined, - DatabaseOutlined, - DeleteOutlined, - FilePdfOutlined, - InfoCircleOutlined, - KeyOutlined, - LinkOutlined, - LoadingOutlined, - PictureOutlined, - RobotOutlined, - SafetyOutlined, - SettingOutlined, - SoundOutlined, - TagsOutlined, - ToolOutlined, - UserOutlined, -} from "@ant-design/icons"; +import { Plug as ApiOutlined, ArrowUp as ArrowUpOutlined, Eraser as ClearOutlined, Code as CodeOutlined, Database as DatabaseOutlined, Trash2 as DeleteOutlined, FileText as FilePdfOutlined, Info as InfoCircleOutlined, Key as KeyOutlined, Link as LinkOutlined, Loader2 as LoadingOutlined, Image as PictureOutlined, Bot as RobotOutlined, ShieldCheck as SafetyOutlined, Settings as SettingOutlined, Volume2 as SoundOutlined, Tags as TagsOutlined, Wrench as ToolOutlined, User as UserOutlined } from "lucide-react"; // eslint-disable-next-line litellm-ui/no-banned-ui-imports import { Card, Text, TextInput, Title, Button as TremorButton } from "@tremor/react"; import { Button, Input, Modal, Popover, Select, Spin, Tooltip, Typography, Upload } from "antd"; @@ -1037,7 +1017,7 @@ const ChatUI: React.FC = ({ return !model.mode || model.mode === "chat"; }; - const antIcon = ; + const antIcon = ; return (
@@ -1940,7 +1920,7 @@ const ChatUI: React.FC = ({
{isLoading ? ( <> - + Running Python code... ) : ( diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/RealtimePlayground.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/RealtimePlayground.tsx index a3dd864b894..d6a11616226 100644 --- a/ui/litellm-dashboard/src/components/playground/chat_ui/RealtimePlayground.tsx +++ b/ui/litellm-dashboard/src/components/playground/chat_ui/RealtimePlayground.tsx @@ -1,12 +1,6 @@ "use client"; -import { - AudioMutedOutlined, - AudioOutlined, - CloseCircleOutlined, - SendOutlined, - SoundOutlined, -} from "@ant-design/icons"; +import { MicOff as AudioMutedOutlined, Mic as AudioOutlined, XCircle as CloseCircleOutlined, Send as SendOutlined, Volume2 as SoundOutlined } from "lucide-react"; import { Button, Input, Select, Typography } from "antd"; import React, { useCallback, useEffect, useRef, useState } from "react"; import { getProxyBaseUrl } from "../../networking"; diff --git a/ui/litellm-dashboard/src/components/playground/compareUI/CompareUI.tsx b/ui/litellm-dashboard/src/components/playground/compareUI/CompareUI.tsx index fa68851d690..4556ce7efe3 100644 --- a/ui/litellm-dashboard/src/components/playground/compareUI/CompareUI.tsx +++ b/ui/litellm-dashboard/src/components/playground/compareUI/CompareUI.tsx @@ -1,7 +1,7 @@ "use client"; import NotificationsManager from "@/components/molecules/notifications_manager"; -import { ClearOutlined, DeleteOutlined, FilePdfOutlined, PlusOutlined } from "@ant-design/icons"; +import { Eraser as ClearOutlined, Trash2 as DeleteOutlined, FileText as FilePdfOutlined, Plus as PlusOutlined } from "lucide-react"; import { Button, Input, Select, Tooltip } from "antd"; import { useEffect, useMemo, useState } from "react"; import { v4 as uuidv4 } from "uuid"; diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/RealtimePrettyView.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/RealtimePrettyView.tsx index 4029fbdb835..1365fdcf0be 100644 --- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/RealtimePrettyView.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/RealtimePrettyView.tsx @@ -6,14 +6,7 @@ import { useState } from 'react'; import { Typography, Tag, Tooltip } from 'antd'; -import { - SoundOutlined, - MessageOutlined, - SettingOutlined, - AudioOutlined, - DownOutlined, - UpOutlined, -} from '@ant-design/icons'; +import { Volume2 as SoundOutlined, MessageSquare as MessageOutlined, Settings as SettingOutlined, Mic as AudioOutlined, ChevronDown as DownOutlined, ChevronUp as UpOutlined } from "lucide-react"; import { SectionHeader } from './SectionHeader'; const { Text } = Typography;