scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-03 02:22:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 81

feat(ui): migrate vector_store_management and RouterSettingsAccordion tremor tabs to shadcn

Browse source 
Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-04-24 13:40:32 +00:00
parent 5afaf46f83
commit 2aefbb4129
No known key found for this signature in database
2 changed files with 65 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx
View file

@ -1,6 +1,10 @@
import React, { useEffect, useState, useImperativeHandle, forwardRef, useRef } from "react";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import { TabPanel, TabPanels, TabGroup, TabList, Tab } from "@tremor/react";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs";
import { getRouterSettingsCall } from "../networking";
import RouterSettingsForm, { RouterSettingsFormValue } from "../router_settings/RouterSettingsForm";
import { Fallbacks } from "../Settings/RouterSettings/Fallbacks/AddFallbacks";
@ -343,31 +347,29 @@ const RouterSettingsAccordion = forwardRef<RouterSettingsAccordionRef, RouterSet
return (
<div className="w-full">
<TabGroup className="w-full">
<TabList variant="line" defaultValue="1" className="px-8 pt-4">
<Tab value="1">Loadbalancing</Tab>
<Tab value="2">Fallbacks</Tab>
</TabList>
<TabPanels className="px-8 py-6">
<TabPanel>
<RouterSettingsForm
value={formValue}
onChange={setFormValue}
routerFieldsMetadata={routerFieldsMetadata}
availableRoutingStrategies={availableRoutingStrategies}
routingStrategyDescriptions={routingStrategyDescriptions}
/>
</TabPanel>
<TabPanel>
<FallbackSelectionForm
groups={fallbackGroups}
onGroupsChange={handleFallbackGroupsChange}
availableModels={availableModels}
maxGroups={5}
/>
</TabPanel>
</TabPanels>
</TabGroup>
<Tabs defaultValue="loadbalancing" className="w-full">
<TabsList className="px-8 pt-4 bg-transparent p-0 h-auto">
<TabsTrigger value="loadbalancing">Loadbalancing</TabsTrigger>
<TabsTrigger value="fallbacks">Fallbacks</TabsTrigger>
</TabsList>
<TabsContent value="loadbalancing" className="px-8 py-6">
<RouterSettingsForm
value={formValue}
onChange={setFormValue}
routerFieldsMetadata={routerFieldsMetadata}
availableRoutingStrategies={availableRoutingStrategies}
routingStrategyDescriptions={routingStrategyDescriptions}
/>
</TabsContent>
<TabsContent value="fallbacks" className="px-8 py-6">
<FallbackSelectionForm
groups={fallbackGroups}
onGroupsChange={handleFallbackGroupsChange}
availableModels={availableModels}
maxGroups={5}
/>
</TabsContent>
</Tabs>
</div>
);
});

73
ui/litellm-dashboard/src/components/vector_store_management/index.tsx
View file

@ -1,8 +1,12 @@
import React, { useCallback, useState, useEffect } from "react";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/react";
import { RefreshCcw } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs";
import {
vectorStoreListCall,
vectorStoreDeleteCall,
@ -157,46 +161,41 @@ const VectorStoreManagement: React.FC<VectorStoreProps> = ({ accessToken, userID
You can use vector stores to store and retrieve LLM embeddings.
</p>
<TabGroup>
<TabList className="mb-6">
<Tab>Create Vector Store</Tab>
<Tab>Manage Vector Stores</Tab>
<Tab>Test Vector Store</Tab>
</TabList>
<Tabs defaultValue="create">
<TabsList className="mb-6">
<TabsTrigger value="create">Create Vector Store</TabsTrigger>
<TabsTrigger value="manage">Manage Vector Stores</TabsTrigger>
<TabsTrigger value="test">Test Vector Store</TabsTrigger>
</TabsList>
<TabPanels>
{/* Tab 1: Create Vector Store */}
<TabPanel>
<CreateVectorStore accessToken={accessToken} onSuccess={handleVectorStoreCreated} />
</TabPanel>
<TabsContent value="create">
<CreateVectorStore accessToken={accessToken} onSuccess={handleVectorStoreCreated} />
</TabsContent>
{/* Tab 2: Manage Vector Stores */}
<TabPanel>
<Button
className="mb-4"
onClick={() => setIsCreateModalVisible(true)}
>
+ Add Vector Store
</Button>
<TabsContent value="manage">
<Button
className="mb-4"
onClick={() => setIsCreateModalVisible(true)}
>
+ Add Vector Store
</Button>
<div className="grid grid-cols-1 gap-2 pt-2 pb-2 w-full mt-2">
<div className="col-span-1">
<VectorStoreTable
data={vectorStores}
onView={handleView}
onEdit={handleEdit}
onDelete={handleDelete}
/>
</div>
<div className="grid grid-cols-1 gap-2 pt-2 pb-2 w-full mt-2">
<div className="col-span-1">
<VectorStoreTable
data={vectorStores}
onView={handleView}
onEdit={handleEdit}
onDelete={handleDelete}
/>
</div>
</TabPanel>
</div>
</TabsContent>
{/* Tab 3: Test Vector Store */}
<TabPanel>
<TestVectorStoreTab accessToken={accessToken} vectorStores={vectorStores} />
</TabPanel>
</TabPanels>
</TabGroup>
<TabsContent value="test">
<TestVectorStoreTab accessToken={accessToken} vectorStores={vectorStores} />
</TabsContent>
</Tabs>
{/* Create Vector Store Modal */}
<VectorStoreForm