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}
/>