Studio: link MCP Servers heading to its PR and fix composer pill cursors
Make the "MCP Servers" heading in the chat Configuration sheet link to the MCP PR, keeping the chevron as the toggle. The label and chevron are rendered as siblings so we don't nest an <a> inside a <button>. Also add cursor-pointer to the composer pills and the thinking pill so hovering a clickable pill shows the hand cursor instead of the default arrow.
This commit is contained in:
shimmyshimmer
parent
e56d69f528
commit
cbb92749a8
2 changed files with 57 additions and 23 deletions
|
|
@ -58,7 +58,7 @@ import {
|
|||
LayoutAlignRightIcon,
|
||||
} from "@hugeicons/core-free-icons";
|
||||
import { HugeiconsIcon } from "@hugeicons/react";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { ChevronDown, ExternalLink } from "lucide-react";
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||
import { Fragment, type ReactNode } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
|
|
@ -327,11 +327,14 @@ function saveCollapsibleOpen(label: string, open: boolean) {
|
|||
|
||||
function CollapsibleSection({
|
||||
label,
|
||||
labelHref,
|
||||
children,
|
||||
defaultOpen = false,
|
||||
first = false,
|
||||
}: {
|
||||
label: string;
|
||||
/** Optional link for the label (e.g. its PR); chevron still toggles. */
|
||||
labelHref?: string;
|
||||
children?: ReactNode;
|
||||
defaultOpen?: boolean;
|
||||
first?: boolean;
|
||||
|
|
@ -341,6 +344,17 @@ function CollapsibleSection({
|
|||
return Object.hasOwn(saved, label) ? saved[label] : defaultOpen;
|
||||
});
|
||||
|
||||
const toggle = () => {
|
||||
const next = !open;
|
||||
setOpen(next);
|
||||
saveCollapsibleOpen(label, next);
|
||||
};
|
||||
|
||||
const headerClasses = cn(
|
||||
"flex w-full items-center justify-between text-[12px] font-medium normal-case tracking-[0.04em] text-nav-fg-muted transition-colors focus-visible:outline-none focus-visible:ring-0",
|
||||
first ? "pt-4 pb-5" : "py-5",
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
|
|
@ -348,25 +362,42 @@ function CollapsibleSection({
|
|||
"border-t border-black/[0.13] dark:border-white/[0.09]",
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const next = !open;
|
||||
setOpen(next);
|
||||
saveCollapsibleOpen(label, next);
|
||||
}}
|
||||
className={cn(
|
||||
"flex w-full cursor-pointer items-center justify-between text-[12px] font-medium normal-case tracking-[0.04em] text-nav-fg-muted transition-colors hover:text-nav-fg focus-visible:outline-none focus-visible:ring-0",
|
||||
first ? "pt-4 pb-5" : "py-5",
|
||||
)}
|
||||
>
|
||||
<span className="leading-none">{label}</span>
|
||||
<span className="flex shrink-0 items-center leading-none">
|
||||
<ChevronDown
|
||||
className={cn("size-3.5", open ? "rotate-0" : "-rotate-90")}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
{labelHref ? (
|
||||
<div className={headerClasses}>
|
||||
<a
|
||||
href={labelHref}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex cursor-pointer items-center gap-1 leading-none transition-colors hover:text-nav-fg"
|
||||
>
|
||||
<span>{label}</span>
|
||||
<ExternalLink className="size-3" />
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
aria-label={open ? `Collapse ${label}` : `Expand ${label}`}
|
||||
className="flex shrink-0 cursor-pointer items-center leading-none transition-colors hover:text-nav-fg"
|
||||
>
|
||||
<ChevronDown
|
||||
className={cn("size-3.5", open ? "rotate-0" : "-rotate-90")}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
className={cn("cursor-pointer hover:text-nav-fg", headerClasses)}
|
||||
>
|
||||
<span className="leading-none">{label}</span>
|
||||
<span className="flex shrink-0 items-center leading-none">
|
||||
<ChevronDown
|
||||
className={cn("size-3.5", open ? "rotate-0" : "-rotate-90")}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
{open && <div className="pb-7">{children}</div>}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1345,7 +1376,10 @@ export function ChatSettingsPanel({
|
|||
) : null}
|
||||
|
||||
{!isExternalModel ? (
|
||||
<CollapsibleSection label="MCP Servers">
|
||||
<CollapsibleSection
|
||||
label="MCP Servers"
|
||||
labelHref="https://github.com/unslothai/unsloth/pull/5852"
|
||||
>
|
||||
<McpServersSection />
|
||||
</CollapsibleSection>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -795,7 +795,7 @@
|
|||
}
|
||||
|
||||
.composer-pill-btn {
|
||||
@apply flex items-center gap-1.5 rounded-full px-1.5 py-1.5 text-[14px] font-medium text-muted-foreground/70 transition-colors hover:bg-primary/10 dark:hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40;
|
||||
@apply flex cursor-pointer items-center gap-1.5 rounded-full px-1.5 py-1.5 text-[14px] font-medium text-muted-foreground/70 transition-colors hover:bg-primary/10 dark:hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40;
|
||||
}
|
||||
|
||||
.composer-pill-btn[data-active="true"] {
|
||||
|
|
@ -901,7 +901,7 @@
|
|||
|
||||
/* Right-side Thinking pill (toggle or dropdown). */
|
||||
.unsloth-thinking-pill {
|
||||
@apply inline-flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1.5 text-[14px] font-medium text-muted-foreground transition-colors hover:bg-muted-foreground/10 disabled:cursor-not-allowed disabled:opacity-40;
|
||||
@apply inline-flex shrink-0 cursor-pointer items-center gap-1 rounded-full px-2.5 py-1.5 text-[14px] font-medium text-muted-foreground transition-colors hover:bg-muted-foreground/10 disabled:cursor-not-allowed disabled:opacity-40;
|
||||
}
|
||||
|
||||
.unsloth-thinking-pill[data-active="true"] {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue