From 75f87724bd38ceffd6bf48c7177598b2a28d922c Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Sat, 31 May 2025 12:01:51 -0700 Subject: [PATCH] chore - vector store permissions enterprise --- .../PremiumVectorStoreSelector.tsx | 50 +++++++++++++++++++ .../src/components/create_key_button.tsx | 6 ++- .../src/components/key_edit_view.tsx | 9 +++- .../src/components/team/team_info.tsx | 10 +++- ui/litellm-dashboard/src/components/teams.tsx | 8 ++- 5 files changed, 76 insertions(+), 7 deletions(-) create mode 100644 ui/litellm-dashboard/src/components/common_components/PremiumVectorStoreSelector.tsx diff --git a/ui/litellm-dashboard/src/components/common_components/PremiumVectorStoreSelector.tsx b/ui/litellm-dashboard/src/components/common_components/PremiumVectorStoreSelector.tsx new file mode 100644 index 00000000000..91348383426 --- /dev/null +++ b/ui/litellm-dashboard/src/components/common_components/PremiumVectorStoreSelector.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Text } from "@tremor/react"; +import VectorStoreSelector from "../vector_store_management/VectorStoreSelector"; + +interface PremiumVectorStoreSelectorProps { + onChange: (values: string[]) => void; + value: string[]; + accessToken: string; + placeholder?: string; + premiumUser?: boolean; +} + +export function PremiumVectorStoreSelector({ + onChange, + value, + accessToken, + placeholder = "Select vector stores", + premiumUser = false +}: PremiumVectorStoreSelectorProps) { + if (!premiumUser) { + return ( +
+
+
+ ✨ premium-vector-store-1 +
+
+ ✨ premium-vector-store-2 +
+
+
+ + Vector store access control is a LiteLLM Enterprise feature. Get a trial key here. + +
+
+ ); + } + + return ( + + ); +} + +export default PremiumVectorStoreSelector; \ No newline at end of file diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index 851bbc47940..2d05450298b 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -34,6 +34,7 @@ import { userFilterUICall, } from "./networking"; import VectorStoreSelector from "./vector_store_management/VectorStoreSelector"; +import PremiumVectorStoreSelector from "./common_components/PremiumVectorStoreSelector"; import { Team } from "./key_team_helpers/key_list"; import TeamDropdown from "./common_components/team_dropdown"; import { InfoCircleOutlined } from '@ant-design/icons'; @@ -55,6 +56,7 @@ interface CreateKeyProps { data: any[] | null; teams: Team[] | null; addKey: (data: any) => void; + premiumUser?: boolean; } interface User { @@ -152,6 +154,7 @@ const CreateKey: React.FC = ({ accessToken, data, addKey, + premiumUser = false, }) => { const [form] = Form.useForm(); const [isModalVisible, setIsModalVisible] = useState(false); @@ -699,11 +702,12 @@ const CreateKey: React.FC = ({ className="mt-4" help="Select vector stores this key can access. Leave empty for access to all vector stores" > - form.setFieldValue('allowed_vector_store_ids', values)} value={form.getFieldValue('allowed_vector_store_ids')} accessToken={accessToken} placeholder="Select vector stores (optional)" + premiumUser={premiumUser} /> diff --git a/ui/litellm-dashboard/src/components/key_edit_view.tsx b/ui/litellm-dashboard/src/components/key_edit_view.tsx index ed337cd5631..7c196b0f2d0 100644 --- a/ui/litellm-dashboard/src/components/key_edit_view.tsx +++ b/ui/litellm-dashboard/src/components/key_edit_view.tsx @@ -6,6 +6,7 @@ import { fetchTeamModels } from "../components/create_key_button"; import { modelAvailableCall } from "./networking"; import NumericalInput from "./shared/numerical_input"; import VectorStoreSelector from "./vector_store_management/VectorStoreSelector"; +import PremiumVectorStoreSelector from "./common_components/PremiumVectorStoreSelector"; interface KeyEditViewProps { keyData: KeyResponse; @@ -15,6 +16,7 @@ interface KeyEditViewProps { accessToken: string | null; userID: string | null; userRole: string | null; + premiumUser?: boolean; } // Add this helper function @@ -43,7 +45,9 @@ export function KeyEditView({ teams, accessToken, userID, - userRole }: KeyEditViewProps) { + userRole, + premiumUser = false +}: KeyEditViewProps) { const [form] = Form.useForm(); const [userModels, setUserModels] = useState([]); const team = teams?.find(team => team.team_id === keyData.team_id); @@ -169,11 +173,12 @@ export function KeyEditView({ - form.setFieldValue('vector_stores', values)} value={form.getFieldValue('vector_stores')} accessToken={accessToken || ""} placeholder="Select vector stores" + premiumUser={premiumUser} /> diff --git a/ui/litellm-dashboard/src/components/team/team_info.tsx b/ui/litellm-dashboard/src/components/team/team_info.tsx index a3544484ecf..b75721507d3 100644 --- a/ui/litellm-dashboard/src/components/team/team_info.tsx +++ b/ui/litellm-dashboard/src/components/team/team_info.tsx @@ -35,6 +35,7 @@ import { getModelDisplayName } from "../key_team_helpers/fetch_available_models_ import { isAdminRole } from "@/utils/roles"; import ObjectPermissionsView from "../object_permissions_view"; import VectorStoreSelector from "../vector_store_management/VectorStoreSelector"; +import PremiumVectorStoreSelector from "../common_components/PremiumVectorStoreSelector"; export interface TeamData { team_id: string; @@ -79,6 +80,7 @@ export interface TeamInfoProps { is_proxy_admin: boolean; userModels: string[]; editTeam: boolean; + premiumUser?: boolean; } const TeamInfoView: React.FC = ({ @@ -88,7 +90,8 @@ const TeamInfoView: React.FC = ({ is_team_admin, is_proxy_admin, userModels, - editTeam + editTeam, + premiumUser = false }) => { const [teamData, setTeamData] = useState(null); const [loading, setLoading] = useState(true); @@ -326,6 +329,7 @@ const TeamInfoView: React.FC = ({ objectPermission={info.object_permission} variant="card" accessToken={accessToken} + premiumUser={premiumUser} /> @@ -456,11 +460,12 @@ const TeamInfoView: React.FC = ({ - form.setFieldValue('vector_stores', values)} value={form.getFieldValue('vector_stores')} accessToken={accessToken || ""} placeholder="Select vector stores" + premiumUser={premiumUser} /> @@ -532,6 +537,7 @@ const TeamInfoView: React.FC = ({ variant="inline" className="pt-4 border-t border-gray-200" accessToken={accessToken} + premiumUser={premiumUser} /> )} diff --git a/ui/litellm-dashboard/src/components/teams.tsx b/ui/litellm-dashboard/src/components/teams.tsx index 23e5c180d17..6ad6b73b360 100644 --- a/ui/litellm-dashboard/src/components/teams.tsx +++ b/ui/litellm-dashboard/src/components/teams.tsx @@ -58,6 +58,7 @@ import { import { CogIcon } from "@heroicons/react/outline"; import AvailableTeamsPanel from "@/components/team/available_teams"; import VectorStoreSelector from "./vector_store_management/VectorStoreSelector"; +import PremiumVectorStoreSelector from "./common_components/PremiumVectorStoreSelector"; import type { KeyResponse, Team } from "./key_team_helpers/key_list"; const isLocal = process.env.NODE_ENV === "development"; const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; @@ -72,6 +73,7 @@ interface TeamProps { userID: string | null; userRole: string | null; organizations: Organization[] | null; + premiumUser?: boolean; } interface FilterState { @@ -134,7 +136,8 @@ const Teams: React.FC = ({ setTeams, userID, userRole, - organizations + organizations, + premiumUser = false }) => { const [lastRefreshed, setLastRefreshed] = useState(""); const [currentOrg, setCurrentOrg] = useState(null); @@ -1086,11 +1089,12 @@ const Teams: React.FC = ({ className="mt-8" help="Select vector stores this team can access. Leave empty for access to all vector stores" > - form.setFieldValue('allowed_vector_store_ids', values)} value={form.getFieldValue('allowed_vector_store_ids')} accessToken={accessToken || ''} placeholder="Select vector stores (optional)" + premiumUser={premiumUser} />