diff --git a/ui/litellm-dashboard/next.config.mjs b/ui/litellm-dashboard/next.config.mjs index 6e2924677c83..2d1f597c1407 100644 --- a/ui/litellm-dashboard/next.config.mjs +++ b/ui/litellm-dashboard/next.config.mjs @@ -2,6 +2,7 @@ const nextConfig = { output: 'export', basePath: process.env.UI_BASE_PATH || '/ui', + baseProxyUrl: process.env.PROXY_BASE_URL || '/', }; nextConfig.experimental = { diff --git a/ui/litellm-dashboard/src/components/admins.tsx b/ui/litellm-dashboard/src/components/admins.tsx index 2ea3e74bcbfd..e7b09b2fc0ab 100644 --- a/ui/litellm-dashboard/src/components/admins.tsx +++ b/ui/litellm-dashboard/src/components/admins.tsx @@ -106,11 +106,6 @@ const AdminPanel: React.FC = ({ Record >>(null); - const isLocal = process.env.NODE_ENV === "development"; - if (isLocal != true) { - console.log = function() {}; - } - const baseUrl = useBaseUrl(); const all_ip_address_allowed = "All IP Addresses Allowed"; diff --git a/ui/litellm-dashboard/src/components/chat_ui/llm_calls/responses_api.tsx b/ui/litellm-dashboard/src/components/chat_ui/llm_calls/responses_api.tsx index 7ebf53a2724e..5c9ff587eced 100644 --- a/ui/litellm-dashboard/src/components/chat_ui/llm_calls/responses_api.tsx +++ b/ui/litellm-dashboard/src/components/chat_ui/llm_calls/responses_api.tsx @@ -23,9 +23,6 @@ export async function makeOpenAIResponsesRequest( // Base URL should be the current base_url const isLocal = process.env.NODE_ENV === "development"; - if (isLocal !== true) { - console.log = function () {}; - } const proxyBaseUrl = isLocal ? "http://localhost:4000" diff --git a/ui/litellm-dashboard/src/components/create_user_button.tsx b/ui/litellm-dashboard/src/components/create_user_button.tsx index 90eae5eac9e5..423108577c2b 100644 --- a/ui/litellm-dashboard/src/components/create_user_button.tsx +++ b/ui/litellm-dashboard/src/components/create_user_button.tsx @@ -62,7 +62,6 @@ const Createuser: React.FC = ({ const [invitationLinkData, setInvitationLinkData] = useState(null); const router = useRouter(); - const isLocal = process.env.NODE_ENV === "development"; const [baseUrl, setBaseUrl] = useState("http://localhost:4000"); // get all models diff --git a/ui/litellm-dashboard/src/components/enter_proxy_url.tsx b/ui/litellm-dashboard/src/components/enter_proxy_url.tsx deleted file mode 100644 index ea43d4623518..000000000000 --- a/ui/litellm-dashboard/src/components/enter_proxy_url.tsx +++ /dev/null @@ -1,64 +0,0 @@ -"use client"; - -import React, { useState, ChangeEvent } from "react"; -import { Button, Col, Grid, TextInput } from "@tremor/react"; -import { Card, Text } from "@tremor/react"; - -const EnterProxyUrl: React.FC = () => { - const [proxyUrl, setProxyUrl] = useState(""); - const [isUrlSaved, setIsUrlSaved] = useState(false); - - const handleUrlChange = (event: ChangeEvent) => { - setProxyUrl(event.target.value); - // Reset the saved status when the URL changes - setIsUrlSaved(false); - }; - - const handleSaveClick = () => { - // You can perform any additional validation or actions here - // For now, let's just display the message - setIsUrlSaved(true); - }; - - // Construct the URL for clicking - const clickableUrl = `${window.location.href}?proxyBaseUrl=${proxyUrl}`; - - return ( -
- - Admin Configuration - - - - {/* Display message if the URL is saved */} - {isUrlSaved && ( -
- - -

- Proxy Admin UI (Save this URL): {clickableUrl} -

- - -

- Get Started with Proxy Admin UI 👉 - - {clickableUrl} - -

- -
-
- )} -
-
- ); -}; - -export default EnterProxyUrl; diff --git a/ui/litellm-dashboard/src/components/general_settings.tsx b/ui/litellm-dashboard/src/components/general_settings.tsx index d54092d1bf86..5da791a92a75 100644 --- a/ui/litellm-dashboard/src/components/general_settings.tsx +++ b/ui/litellm-dashboard/src/components/general_settings.tsx @@ -32,6 +32,7 @@ import { Icon, } from "@tremor/react"; import { + proxyBaseUrl, getCallbacksCall, setCallbacksCall, getGeneralSettingsCall, @@ -74,15 +75,7 @@ async function testFallbackModelResponse( selectedModel: string, accessToken: string ) { - // base url should be the current base_url - const isLocal = process.env.NODE_ENV === "development"; - if (isLocal != true) { - console.log = function() {}; - } - console.log("isLocal:", isLocal); - const proxyBaseUrl = isLocal - ? "http://localhost:4000" - : window.location.origin; + const client = new openai.OpenAI({ apiKey: accessToken, // Replace with your OpenAI API key baseURL: proxyBaseUrl, // Replace with your OpenAI API base URL diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index ba9d1cb34a50..e59e88cc50b5 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -8,11 +8,25 @@ import { Team } from "./key_team_helpers/key_list"; import { UserInfo } from "./view_users/types"; import { EmailEventSettingsResponse, EmailEventSettingsUpdateRequest } from "./email_events/types"; -const isLocal = process.env.NODE_ENV === "development"; -export const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; -if (isLocal != true) { - console.log = function() {}; +const stripStringFirstIf = (str: string, char: string): string => { + if (str.startsWith(char)) { + return str.slice(1); + } + return str; +} + +export const getProxyUrl = (): string => { + const isLocal = process.env.NODE_ENV === "development"; + if (isLocal) { + return "http://localhost:4000"; + } else if (process.env.PROXY_BASE_URL === undefined) { + return "/"; + } else { + return `/${stripStringFirstIf(process.env.PROXY_BASE_URL, "/")}`; + } + } +export const proxyBaseUrl = getProxyUrl(); export const DEFAULT_ORGANIZATION = "default_organization"; diff --git a/ui/litellm-dashboard/src/components/request_model_access.tsx b/ui/litellm-dashboard/src/components/request_model_access.tsx index 22fcafa4e418..c884d03b2c6a 100644 --- a/ui/litellm-dashboard/src/components/request_model_access.tsx +++ b/ui/litellm-dashboard/src/components/request_model_access.tsx @@ -12,11 +12,7 @@ interface RequestAccessProps { accessToken: string; userID: string; } -const isLocal = process.env.NODE_ENV === "development"; -const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; -if (isLocal != true) { - console.log = function() {}; -} + function onRequestAccess(formData: Record): void { // This function does nothing for now } diff --git a/ui/litellm-dashboard/src/components/settings.tsx b/ui/litellm-dashboard/src/components/settings.tsx index 4d9bcfe269de..50831adfdd66 100644 --- a/ui/litellm-dashboard/src/components/settings.tsx +++ b/ui/litellm-dashboard/src/components/settings.tsx @@ -35,11 +35,7 @@ import { Modal, Typography, Form, Input, Select, Button as Button2, message } fr import EmailSettings from "./email_settings"; const { Title, Paragraph } = Typography; -const isLocal = process.env.NODE_ENV === "development"; -const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; -if (isLocal != true) { - console.log = function() {}; -} + import { getCallbacksCall, setCallbacksCall, diff --git a/ui/litellm-dashboard/src/components/teams.tsx b/ui/litellm-dashboard/src/components/teams.tsx index b88971868780..0045725c66ed 100644 --- a/ui/litellm-dashboard/src/components/teams.tsx +++ b/ui/litellm-dashboard/src/components/teams.tsx @@ -56,11 +56,7 @@ import { import { CogIcon } from "@heroicons/react/outline"; import AvailableTeamsPanel from "@/components/team/available_teams"; import type { Team } from "./key_team_helpers/key_list"; -const isLocal = process.env.NODE_ENV === "development"; -const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; -if (isLocal != true) { - console.log = function() {}; -} + interface TeamProps { teams: Team[] | null; searchParams: any; diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index 0f4b46195aaa..2191a7ce23af 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -40,12 +40,6 @@ import { } from "./networking"; import { start } from "repl"; import TopKeyView from "./top_key_view"; -console.log("process.env.NODE_ENV", process.env.NODE_ENV); -const isLocal = process.env.NODE_ENV === "development"; -const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; -if (isLocal !== true) { - console.log = function() {}; -} interface UsagePageProps { accessToken: string | null; diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx index 6c1c6962d0de..9cf343603513 100644 --- a/ui/litellm-dashboard/src/components/user_dashboard.tsx +++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx @@ -1,6 +1,7 @@ "use client"; import React, { useState, useEffect } from "react"; import { + proxyBaseUrl, userInfoCall, modelAvailableCall, getTotalSpendCall, @@ -23,12 +24,6 @@ import { Team } from "./key_team_helpers/key_list"; import { jwtDecode } from "jwt-decode"; import { Typography } from "antd"; import { clearTokenCookies } from "@/utils/cookieUtils"; -const isLocal = process.env.NODE_ENV === "development"; -if (isLocal != true) { - console.log = function() {}; -} -console.log("isLocal:", isLocal); -const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; export interface ProxySettings { PROXY_BASE_URL: string | null; diff --git a/ui/litellm-dashboard/src/components/view_key_table.tsx b/ui/litellm-dashboard/src/components/view_key_table.tsx index c6f801b4911c..c1efc2f15c0c 100644 --- a/ui/litellm-dashboard/src/components/view_key_table.tsx +++ b/ui/litellm-dashboard/src/components/view_key_table.tsx @@ -73,12 +73,6 @@ import { AllKeysTable } from "./all_keys_table"; import { Team } from "./key_team_helpers/key_list"; import { Setter } from "@/types"; -const isLocal = process.env.NODE_ENV === "development"; -const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; -if (isLocal != true) { - console.log = function () {}; -} - interface EditKeyModalProps { visible: boolean; onCancel: () => void; diff --git a/ui/litellm-dashboard/src/components/view_user_spend.tsx b/ui/litellm-dashboard/src/components/view_user_spend.tsx index b734239f20cf..30a55a943ad2 100644 --- a/ui/litellm-dashboard/src/components/view_user_spend.tsx +++ b/ui/litellm-dashboard/src/components/view_user_spend.tsx @@ -23,11 +23,6 @@ import { } from "@tremor/react"; import { Statistic } from "antd" import { spendUsersCall, modelAvailableCall } from "./networking"; -const isLocal = process.env.NODE_ENV === "development"; -const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; -if (isLocal != true) { - console.log = function() {}; -} // Define the props type interface UserSpendData { diff --git a/ui/litellm-dashboard/src/components/view_user_team.tsx b/ui/litellm-dashboard/src/components/view_user_team.tsx index bc480af0878e..eb846f98f65a 100644 --- a/ui/litellm-dashboard/src/components/view_user_team.tsx +++ b/ui/litellm-dashboard/src/components/view_user_team.tsx @@ -21,11 +21,6 @@ import { } from "@tremor/react"; import { Statistic } from "antd" import { modelAvailableCall } from "./networking"; -const isLocal = process.env.NODE_ENV === "development"; -const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; -if (isLocal != true) { - console.log = function() {}; -} interface ViewUserTeamProps { userID: string | null; diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx index 8bf6fd3efedb..4d4ba3856a52 100644 --- a/ui/litellm-dashboard/src/components/view_users.tsx +++ b/ui/litellm-dashboard/src/components/view_users.tsx @@ -55,12 +55,6 @@ interface FilterState { sort_order: 'asc' | 'desc'; } -const isLocal = process.env.NODE_ENV === "development"; -const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; -if (isLocal != true) { - console.log = function() {}; -} - const DEFAULT_PAGE_SIZE = 25; const initialFilters: FilterState = {