scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-06 02:48:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 103

fix(ui): restore the public model name tooltip layout in the add model flow (#37986)

Browse source 
The tooltip popup is an inline-flex row, so the four sibling blocks passed as a fragment laid out side by side in four columns. Wrap them in a single flex-col container instead.

The inline code samples also used bg-muted, which is defined against the page surface, not the inverted tooltip surface, so they rendered as near-white chips carrying near-white text. Tint them from the popup's own token instead.

(cherry picked from commit 6db5a5d660)
This commit is contained in:
yuneng-jiang 2026-08-24 10:12:46 -07:00 • committed by Yuneng Jiang
parent 5c3fa165c8
commit 6b29016987
No known key found for this signature in database
1 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
View file

@ -34,6 +34,8 @@ const modelMappingsRule = {
},
};
const tooltipCodeClassName = "rounded-sm bg-background/20 px-1 py-0.5 font-mono text-xs";
const ConditionalPublicModelName: React.FC = () => {
const form = useFormContext<MountedFormValues>();
@ -123,22 +125,22 @@ const ConditionalPublicModelName: React.FC = () => {
if (!showPublicModelName) return null;
const publicNameTooltipContent = (
<>
<div className="mb-2 font-normal">The name you specify in your API calls to LiteLLM Proxy</div>
<div className="mb-2 font-normal">
<div className="flex flex-col gap-2 text-left font-normal">
<div>The name you specify in your API calls to LiteLLM Proxy</div>
<div>
<strong>Example:</strong> If you name your public model{" "}
<code className="bg-muted px-1 py-0.5 rounded-sm text-xs">example-name</code>, and choose{" "}
<code className="bg-muted px-1 py-0.5 rounded-sm text-xs">openai/qwen-plus-latest</code> as the LiteLLM model
<code className={tooltipCodeClassName}>example-name</code>, and choose{" "}
<code className={tooltipCodeClassName}>openai/qwen-plus-latest</code> as the LiteLLM model
</div>
<div className="mb-2 font-normal">
<div>
<strong>Usage:</strong> You make an API call to the LiteLLM proxy with{" "}
<code className="bg-muted px-1 py-0.5 rounded-sm text-xs">model = &quot;example-name&quot;</code>
<code className={tooltipCodeClassName}>model = &quot;example-name&quot;</code>
</div>
<div className="font-normal">
<strong>Result:</strong> LiteLLM sends{" "}
<code className="bg-muted px-1 py-0.5 rounded-sm text-xs">qwen-plus-latest</code> to the provider
<div>
<strong>Result:</strong> LiteLLM sends <code className={tooltipCodeClassName}>qwen-plus-latest</code> to the
provider
</div>
</>
</div>
);
const liteLLMModelTooltipContent = <div>The model name LiteLLM will send to the LLM API</div>;