Studio: model picker search placeholder, Search Hub tooltip, list polish (#6592)

Polish for the in-chat model picker popover and its guided-tour step.

- Search box placeholder reads Search Unsloth models, matching the Unsloth-only listing.
- Search Hub button shows a Search all models tooltip on hover.
- Floating Eject pill moves 1px lower so it sits closer to the bottom edge.
- Results list max height trimmed by 1px (21rem to 335px) from the bottom only.
- Chat guided tour Two tabs step updated to describe Unsloth-scoped search plus Search Hub for all of Hugging Face.
This commit is contained in:
Michael Han 2026-06-22 22:11:45 -07:00 committed by GitHub
commit 45c01c09bc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 15 deletions

View file

@ -2336,7 +2336,7 @@ export function HubModelPicker({
<Input
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Search models"
placeholder="Search Unsloth models"
data-model-picker-search-input={true}
className="field-soft h-9 border-0 pl-8 pr-8"
/>
@ -2345,15 +2345,20 @@ export function HubModelPicker({
)}
</div>
{onBrowseHub ? (
<button
type="button"
onClick={onBrowseHub}
aria-label="Search more models on the Hub"
className="hub-tab-toggle-pill flex h-9 w-[110px] shrink-0 items-center justify-center gap-[5px] rounded-full border-0 text-xs text-foreground transition-colors"
>
<HugeiconsIcon icon={DashboardCircleIcon} className="size-4" />
Search Hub
</button>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onBrowseHub}
aria-label="Search more models on the Hub"
className="hub-tab-toggle-pill flex h-9 w-[110px] shrink-0 items-center justify-center gap-[5px] rounded-full border-0 text-xs text-foreground transition-colors"
>
<HugeiconsIcon icon={DashboardCircleIcon} className="size-4" />
Search Hub
</button>
</TooltipTrigger>
<TooltipContent>Search all models</TooltipContent>
</Tooltip>
) : null}
</div>
@ -2386,7 +2391,7 @@ export function HubModelPicker({
// Height tracks the content up to the cap, so short lists do not
// leave white space. scroll-py + symmetric px keep the focus ring off
// the overflow clip edges during keyboard nav.
"model-list-scroll max-h-[21rem] overflow-y-auto scroll-py-1.5 px-0.5 mr-1",
"model-list-scroll max-h-[335px] overflow-y-auto scroll-py-1.5 px-0.5 mr-1",
listScrolled && "is-scrolled",
listMoreBelow && "is-bottom-faded",
)}
@ -3362,7 +3367,7 @@ export function HubModelPicker({
{/* Floating eject pill: overlaid on the list bottom, outside the scroll
so the edge fade never touches it. Only the pill catches clicks. */}
{onEject ? (
<div className="pointer-events-none absolute inset-x-0 bottom-0 flex justify-end pr-3.5 pb-5">
<div className="pointer-events-none absolute inset-x-0 bottom-0 flex justify-end pr-3.5 pb-[19px]">
<button
type="button"
onClick={onEject}

View file

@ -38,9 +38,10 @@ export function buildChatTourSteps({
title: "Two tabs",
body: (
<>
Hub: search Hugging Face models. Fine-tuned: local Unsloth outputs youve
trained or exported. If results look off, compare base vs fine-tuned
outputs to see what changed.
Hub: search Unsloths models here, or hit Search Hub to browse all of
Hugging Face. Fine-tuned: local Unsloth outputs youve trained or
exported. If results look off, compare base vs fine-tuned outputs to
see what changed.
</>
),
onEnter: openModelSelector,