diff --git a/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx b/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
index c1dc4fc6abf..ab15fa539fb 100644
--- a/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
@@ -1,12 +1,11 @@
import React, { useEffect, useState } from "react";
-import { Form, Table, Input } from "antd";
-import { Text, TextInput } from "@tremor/react";
-import { Row, Col } from "antd";
+import { Form, Table } from "antd";
+import { TextInput } from "@tremor/react";
+import { Tooltip } from "../atoms/index";
const ConditionalPublicModelName: React.FC = () => {
- // Access the form instance
const form = Form.useFormInstance();
- const [tableKey, setTableKey] = useState(0); // Add a key to force table re-render
+ const [tableKey, setTableKey] = useState(0);// Add a key to force table re-render
// Watch the 'model' field for changes and ensure it's always an array
const modelValue = Form.useWatch('model', form) || [];
@@ -14,7 +13,6 @@ const ConditionalPublicModelName: React.FC = () => {
const customModelName = Form.useWatch('custom_model_name', form);
const showPublicModelName = !selectedModels.includes('all-wildcard');
-
// Force table to re-render when custom model name changes
useEffect(() => {
if (customModelName && selectedModels.includes('custom')) {
@@ -71,9 +69,39 @@ const ConditionalPublicModelName: React.FC = () => {
if (!showPublicModelName) return null;
+ const publicNameTooltipContent = (
+ <>
+
+ The name you specify in your API calls to LiteLLM Proxy
+
+
+ Example: If you name your public model example-name
+ , and choose openai/qwen-plus-latest as the LiteLLM model
+
+
+ Usage: You make an API call to the LiteLLM proxy with model = "example-name"
+
+
+ Result: LiteLLM sends qwen-plus-latest to the provider
+
+
+ );
+
+ const liteLLMModelTooltipContent = (
+ The model name LiteLLM will send to the LLM API
+ );
+
const columns = [
{
- title: 'Public Name',
+ title: (
+
+ Public Model Name
+
+
+ ),
dataIndex: 'public_name',
key: 'public_name',
render: (text: string, record: any, index: number) => {
@@ -90,7 +118,15 @@ const ConditionalPublicModelName: React.FC = () => {
}
},
{
- title: 'LiteLLM Model',
+ title: (
+
+ LiteLLM Model Name
+
+
+ ),
dataIndex: 'litellm_model',
key: 'litellm_model',
}
diff --git a/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx b/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx
index 278456317bb..27dc5047539 100644
--- a/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx
@@ -70,7 +70,7 @@ const LiteLLMModelNameField: React.FC = ({
<>
= ({
-
+
- Actual model name used for making litellm.completion() call. We loadbalance models with the same public name
+ The model name LiteLLM will send to the LLM API
diff --git a/ui/litellm-dashboard/src/components/atoms/Tooltip.tsx b/ui/litellm-dashboard/src/components/atoms/Tooltip.tsx
new file mode 100644
index 00000000000..2c546f773d9
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/atoms/Tooltip.tsx
@@ -0,0 +1,70 @@
+import React, { useState, useRef } from "react"
+import { QuestionCircleOutlined } from "@ant-design/icons"
+
+interface TooltipProps {
+ content: React.ReactNode
+ children?: React.ReactNode
+ width?: string
+ className?: string
+}
+
+export const Tooltip: React.FC = ({ content, children, width = "auto", className = "" }) => {
+ const [showTooltip, setShowTooltip] = useState(false)
+ const [tooltipPosition, setTooltipPosition] = useState<"top" | "bottom">("top")
+ const tooltipRef = useRef(null)
+
+ // Function to check if tooltip would fit above
+ const checkTooltipPosition = () => {
+ if (tooltipRef.current) {
+ const rect = tooltipRef.current.getBoundingClientRect()
+ const tooltipHeight = 300 // Approximate height of the tooltip
+ const spaceAbove = rect.top
+ const spaceBelow = window.innerHeight - rect.bottom
+
+ if (spaceAbove < tooltipHeight && spaceBelow > tooltipHeight) {
+ setTooltipPosition("bottom")
+ } else {
+ setTooltipPosition("top")
+ }
+ }
+ }
+
+ return (
+
+ {children || (
+
{
+ checkTooltipPosition()
+ setShowTooltip(true)
+ }}
+ onMouseLeave={() => setShowTooltip(false)}
+ />
+ )}
+ {showTooltip && (
+
+ )}
+