File size: 3,094 Bytes
f59fbe2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | import { IconBulb, IconCheck } from "@tabler/icons-react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import type { ThinkingMode } from "shared/legacy-sdk";
interface ThinkingButtonProps {
mode: ThinkingMode;
effort: string;
efforts?: string[];
alwaysOn?: boolean;
disabled?: boolean;
/** When set, rendered as a muted wrapping note below the effort options
* (e.g. the mid-conversation switch cache-cost notice). */
cacheNote?: string;
onToggle: () => void;
onSelectEffort: (effort: string) => void;
}
function label(effort: string): string {
return effort.charAt(0).toUpperCase() + effort.slice(1);
}
export function ThinkingButton({ mode, effort, efforts = [], alwaysOn = false, disabled, cacheNote, onToggle, onSelectEffort }: ThinkingButtonProps) {
if (mode === "none") return null;
const active = effort !== "off" || alwaysOn;
const button = (
<button
type="button"
onClick={mode === "switch" && !disabled ? onToggle : undefined}
disabled={disabled || mode === "always"}
className={cn(
"flex items-center gap-0.5 justify-center h-6 min-w-6 px-1 rounded-md transition-all",
active ? "bg-blue-500/15 text-blue-500" : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground",
!disabled && mode !== "always" && "cursor-pointer hover:bg-blue-500/25",
(disabled || mode === "always") && "cursor-default",
)}
>
<IconBulb className="size-4" />
{mode === "effort" && <span className="text-[9px] font-medium leading-none">{label(effort)}</span>}
</button>
);
if (mode === "effort") {
const options = alwaysOn ? efforts : ["off", ...efforts];
return (
<DropdownMenu>
<Tooltip>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild disabled={disabled}>{button}</DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent>Thinking effort: {label(effort)}</TooltipContent>
</Tooltip>
<DropdownMenuContent align="start">
{options.map((option) => (
<DropdownMenuItem key={option} onClick={() => onSelectEffort(option)} className="text-xs gap-2">
<IconCheck className={cn("size-3", option !== effort && "opacity-0")} />
{label(option)}
</DropdownMenuItem>
))}
{cacheNote !== undefined && (
<div className="w-44 px-2 py-1.5 text-[10px] leading-snug whitespace-normal text-muted-foreground">
{cacheNote}
</div>
)}
</DropdownMenuContent>
</DropdownMenu>
);
}
const tooltip = mode === "always" ? "Thinking is always enabled for this model" : active ? "Thinking enabled" : "Enable thinking";
return (
<Tooltip>
<TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent>{tooltip}</TooltipContent>
</Tooltip>
);
}
|