scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-08-28 05:25:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 36

refactor(ui): migrate TokenFlow and JsonViewer to shadcn

Browse source 
Drops the antd Typography import from both. TokenFlow renders inside an antd
Descriptions.Item that already sets the colour, font size, line height and
wrapping the Text wrapper restated, so a bare span is pixel-identical there.
JsonViewer's placeholder moves onto the muted-foreground token.

The characterisation tests from the previous commit are unchanged and stay
green, which is what shows the markup swap did not move behaviour.
This commit is contained in:
Yuneng Jiang 2026-08-12 22:10:39 -07:00
parent 89d5037780
commit 214a476c3e
No known key found for this signature in database
3 changed files with 3 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/litellm-dashboard/eslint-suppressions.json
View file

@ -3873,11 +3873,6 @@
"count": 1
}
},
"src/components/view_logs/LogDetailsDrawer/JsonViewer.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx": {
"no-nested-ternary": {
"count": 3
@ -3927,11 +3922,6 @@
"count": 1
}
},
"src/components/view_logs/LogDetailsDrawer/TokenFlow.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"src/components/view_logs/LogDetailsDrawer/TruncatedValue.tsx": {
"no-restricted-imports": {
"count": 1

5
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/JsonViewer.tsx
View file

@ -1,10 +1,7 @@
import { Typography } from "antd";
import { JsonView, defaultStyles } from "react-json-view-lite";
import "react-json-view-lite/dist/index.css";
import { JSON_MAX_HEIGHT, COLOR_BG_LIGHT, SPACING_LARGE } from "./constants";
const { Text } = Typography;
interface JsonViewerProps {
data: any;
mode: "formatted";
@ -15,7 +12,7 @@ interface JsonViewerProps {
* Uses an interactive tree component for easy navigation.
*/
export function JsonViewer({ data }: JsonViewerProps) {
if (!data) return <Text type="secondary">No data</Text>;
if (!data) return <span className="text-muted-foreground">No data</span>;
return (
<div

8
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/TokenFlow.tsx
View file

@ -1,7 +1,3 @@
import { Typography } from "antd";
const { Text } = Typography;
interface TokenFlowProps {
prompt?: number;
completion?: number;
@ -14,9 +10,9 @@ interface TokenFlowProps {
*/
export function TokenFlow({ prompt = 0, completion = 0, total = 0 }: TokenFlowProps) {
return (
<Text>
<span>
{total.toLocaleString()} ({prompt.toLocaleString()} prompt tokens + {completion.toLocaleString()} completion
tokens)
</Text>
</span>
);
}