pi-gui/ui/src/components/ThinkingSelector.tsx

import { reconcileThinkingLevel, thinkingLevelOptions } from "../model-catalog";
import type { Model } from "../workspace/types";
import "./ModelSelector.css";
import "./ThinkingSelector.css";

type ThinkingSelectorProps = {
    model?: Model;
    label?: string;
    value: string;
    disabled?: boolean;
    className?: string;
    controlClassName?: string;
    onChange: (level: string) => void;
};

export function ThinkingSelector({
    model,
    label = "Thinking",
    value,
    disabled = false,
    className,
    controlClassName,
    onChange,
}: ThinkingSelectorProps) {
    const options = thinkingLevelOptions(model);
    return (
        <label
            className={["thinking-selector", className]
                .filter(Boolean)
                .join(" ")}
        >
            <span>{label}</span>
            <select
                className={[
                    "model-trigger",
                    "thinking-trigger",
                    controlClassName,
                ]
                    .filter(Boolean)
                    .join(" ")}
                value={reconcileThinkingLevel(model, value)}
                disabled={disabled}
                onChange={(event) => onChange(event.currentTarget.value)}
            >
                {options.map((option) => (
                    <option value={option.value} key={option.value}>
                        {option.label}
                    </option>
                ))}
            </select>
        </label>
    );
}