diff --git a/ui/litellm-dashboard/src/components/object_permissions_view.tsx b/ui/litellm-dashboard/src/components/object_permissions_view.tsx index 8329731c40f..32f98496bc9 100644 --- a/ui/litellm-dashboard/src/components/object_permissions_view.tsx +++ b/ui/litellm-dashboard/src/components/object_permissions_view.tsx @@ -19,18 +19,80 @@ interface ObjectPermissionsViewProps { variant?: "card" | "inline"; className?: string; accessToken?: string | null; + premiumUser?: boolean; } export function ObjectPermissionsView({ objectPermission, variant = "card", className = "", - accessToken + accessToken, + premiumUser = false }: ObjectPermissionsViewProps) { const vectorStores = objectPermission?.vector_stores || []; const mcpServers = objectPermission?.mcp_servers || []; const [vectorStoreDetails, setVectorStoreDetails] = useState([]); + // Premium user check + if (!premiumUser) { + const mockContent = ( +
+ {/* Mock Vector Stores Section */} +
+
+ + ✨ Vector Stores + + 2 + +
+ +
+
+ ✨ premium-vector-store-1 +
+
+ ✨ premium-vector-store-2 +
+
+
+
+ ); + + if (variant === "card") { + return ( +
+
+
+ ✨ Object Permissions + + Access control for Vector Stores + +
+
+ {mockContent} +
+ + This is a LiteLLM Enterprise feature, and requires a valid key to use. Get a trial key here. + +
+
+ ); + } + + return ( +
+ ✨ Object Permissions + {mockContent} +
+ + This is a LiteLLM Enterprise feature, and requires a valid key to use. Get a trial key here. + +
+
+ ); + } + // Fetch vector store details when component mounts useEffect(() => { const fetchVectorStores = async () => {