mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-05-30 08:15:31 +08:00
refactor: add primitives, plan mode display, and new session model selector
This commit is contained in:
simosmik
@@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import React, { useCallback, useMemo, useState } from "react";
|
||||
import { Check, ChevronDown } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import SessionProviderLogo from "../../../llm-logo-provider/SessionProviderLogo";
|
||||
import {
|
||||
CLAUDE_MODELS,
|
||||
@@ -10,6 +11,19 @@ import {
|
||||
} from "../../../../../shared/modelConstants";
|
||||
import type { ProjectSession, LLMProvider } from "../../../../types/app";
|
||||
import { NextTaskBanner } from "../../../task-master";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
Command,
|
||||
CommandInput,
|
||||
CommandList,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
Card,
|
||||
} from "../../../../shared/view/ui";
|
||||
|
||||
type ProviderSelectionEmptyStateProps = {
|
||||
selectedSession: ProjectSession | null;
|
||||
@@ -31,48 +45,17 @@ type ProviderSelectionEmptyStateProps = {
|
||||
setInput: React.Dispatch<React.SetStateAction<string>>;
|
||||
};
|
||||
|
||||
type ProviderDef = {
|
||||
interface ProviderGroup {
|
||||
id: LLMProvider;
|
||||
name: string;
|
||||
infoKey: string;
|
||||
accent: string;
|
||||
ring: string;
|
||||
check: string;
|
||||
};
|
||||
models: { value: string; label: string }[];
|
||||
}
|
||||
|
||||
const PROVIDERS: ProviderDef[] = [
|
||||
{
|
||||
id: "claude",
|
||||
name: "Claude Code",
|
||||
infoKey: "providerSelection.providerInfo.anthropic",
|
||||
accent: "border-primary",
|
||||
ring: "ring-primary/15",
|
||||
check: "bg-primary text-primary-foreground",
|
||||
},
|
||||
{
|
||||
id: "cursor",
|
||||
name: "Cursor",
|
||||
infoKey: "providerSelection.providerInfo.cursorEditor",
|
||||
accent: "border-violet-500 dark:border-violet-400",
|
||||
ring: "ring-violet-500/15",
|
||||
check: "bg-violet-500 text-white",
|
||||
},
|
||||
{
|
||||
id: "codex",
|
||||
name: "Codex",
|
||||
infoKey: "providerSelection.providerInfo.openai",
|
||||
accent: "border-emerald-600 dark:border-emerald-400",
|
||||
ring: "ring-emerald-600/15",
|
||||
check: "bg-emerald-600 dark:bg-emerald-500 text-white",
|
||||
},
|
||||
{
|
||||
id: "gemini",
|
||||
name: "Gemini",
|
||||
infoKey: "providerSelection.providerInfo.google",
|
||||
accent: "border-blue-500 dark:border-blue-400",
|
||||
ring: "ring-blue-500/15",
|
||||
check: "bg-blue-500 text-white",
|
||||
},
|
||||
const PROVIDER_GROUPS: ProviderGroup[] = [
|
||||
{ id: "claude", name: "Anthropic", models: CLAUDE_MODELS.OPTIONS },
|
||||
{ id: "cursor", name: "Cursor", models: CURSOR_MODELS.OPTIONS },
|
||||
{ id: "codex", name: "OpenAI", models: CODEX_MODELS.OPTIONS },
|
||||
{ id: "gemini", name: "Google", models: GEMINI_MODELS.OPTIONS },
|
||||
];
|
||||
|
||||
function getModelConfig(p: LLMProvider) {
|
||||
@@ -82,7 +65,7 @@ function getModelConfig(p: LLMProvider) {
|
||||
return CURSOR_MODELS;
|
||||
}
|
||||
|
||||
function getModelValue(
|
||||
function getCurrentModel(
|
||||
p: LLMProvider,
|
||||
c: string,
|
||||
cu: string,
|
||||
@@ -95,6 +78,13 @@ function getModelValue(
|
||||
return cu;
|
||||
}
|
||||
|
||||
function getProviderDisplayName(p: LLMProvider) {
|
||||
if (p === "claude") return "Claude";
|
||||
if (p === "cursor") return "Cursor";
|
||||
if (p === "codex") return "Codex";
|
||||
return "Gemini";
|
||||
}
|
||||
|
||||
export default function ProviderSelectionEmptyState({
|
||||
selectedSession,
|
||||
currentSessionId,
|
||||
@@ -115,34 +105,12 @@ export default function ProviderSelectionEmptyState({
|
||||
setInput,
|
||||
}: ProviderSelectionEmptyStateProps) {
|
||||
const { t } = useTranslation("chat");
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const nextTaskPrompt = t("tasks.nextTaskPrompt", {
|
||||
defaultValue: "Start the next task",
|
||||
});
|
||||
|
||||
const selectProvider = (next: LLMProvider) => {
|
||||
setProvider(next);
|
||||
localStorage.setItem("selected-provider", next);
|
||||
setTimeout(() => textareaRef.current?.focus(), 100);
|
||||
};
|
||||
|
||||
const handleModelChange = (value: string) => {
|
||||
if (provider === "claude") {
|
||||
setClaudeModel(value);
|
||||
localStorage.setItem("claude-model", value);
|
||||
} else if (provider === "codex") {
|
||||
setCodexModel(value);
|
||||
localStorage.setItem("codex-model", value);
|
||||
} else if (provider === "gemini") {
|
||||
setGeminiModel(value);
|
||||
localStorage.setItem("gemini-model", value);
|
||||
} else {
|
||||
setCursorModel(value);
|
||||
localStorage.setItem("cursor-model", value);
|
||||
}
|
||||
};
|
||||
|
||||
const modelConfig = getModelConfig(provider);
|
||||
const currentModel = getModelValue(
|
||||
const currentModel = getCurrentModel(
|
||||
provider,
|
||||
claudeModel,
|
||||
cursorModel,
|
||||
@@ -150,7 +118,42 @@ export default function ProviderSelectionEmptyState({
|
||||
geminiModel,
|
||||
);
|
||||
|
||||
/* ── New session — provider picker ── */
|
||||
const currentModelLabel = useMemo(() => {
|
||||
const config = getModelConfig(provider);
|
||||
const found = config.OPTIONS.find(
|
||||
(o: { value: string; label: string }) => o.value === currentModel,
|
||||
);
|
||||
return found?.label || currentModel;
|
||||
}, [provider, currentModel]);
|
||||
|
||||
const handleModelSelect = useCallback(
|
||||
(providerId: LLMProvider, modelValue: string) => {
|
||||
// Set provider
|
||||
setProvider(providerId);
|
||||
localStorage.setItem("selected-provider", providerId);
|
||||
|
||||
// Set model for the correct provider
|
||||
if (providerId === "claude") {
|
||||
setClaudeModel(modelValue);
|
||||
localStorage.setItem("claude-model", modelValue);
|
||||
} else if (providerId === "codex") {
|
||||
setCodexModel(modelValue);
|
||||
localStorage.setItem("codex-model", modelValue);
|
||||
} else if (providerId === "gemini") {
|
||||
setGeminiModel(modelValue);
|
||||
localStorage.setItem("gemini-model", modelValue);
|
||||
} else {
|
||||
setCursorModel(modelValue);
|
||||
localStorage.setItem("cursor-model", modelValue);
|
||||
}
|
||||
|
||||
setDialogOpen(false);
|
||||
setTimeout(() => textareaRef.current?.focus(), 100);
|
||||
},
|
||||
[setProvider, setClaudeModel, setCursorModel, setCodexModel, setGeminiModel, textareaRef],
|
||||
);
|
||||
|
||||
/* ── New session — provider + model picker ── */
|
||||
if (!selectedSession && !currentSessionId) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center px-4">
|
||||
@@ -165,96 +168,100 @@ export default function ProviderSelectionEmptyState({
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Provider cards — horizontal row, equal width */}
|
||||
<div className="mb-6 grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-2.5">
|
||||
{PROVIDERS.map((p) => {
|
||||
const active = provider === p.id;
|
||||
return (
|
||||
<button
|
||||
key={p.id}
|
||||
onClick={() => selectProvider(p.id)}
|
||||
className={`
|
||||
relative flex flex-col items-center gap-2.5 rounded-xl border-[1.5px] px-2
|
||||
pb-4 pt-5 transition-all duration-150
|
||||
active:scale-[0.97]
|
||||
${
|
||||
active
|
||||
? `${p.accent} ${p.ring} bg-card shadow-sm ring-2`
|
||||
: "border-border bg-card/60 hover:border-border/80 hover:bg-card"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Model selector trigger — hero card style */}
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Card
|
||||
className="group mx-auto max-w-sm cursor-pointer border-border/60 transition-all duration-150 hover:border-border hover:shadow-md active:scale-[0.99]"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div className="flex items-center gap-3 p-4">
|
||||
<SessionProviderLogo
|
||||
provider={p.id}
|
||||
className={`h-9 w-9 transition-transform duration-150 ${active ? "scale-110" : ""}`}
|
||||
provider={provider}
|
||||
className="h-8 w-8 shrink-0"
|
||||
/>
|
||||
<div className="text-center">
|
||||
<p className="text-[13px] font-semibold leading-none text-foreground">
|
||||
{p.name}
|
||||
</p>
|
||||
<p className="mt-1 text-[10px] leading-tight text-muted-foreground">
|
||||
{t(p.infoKey)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-sm font-semibold text-foreground">
|
||||
{getProviderDisplayName(provider)}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">·</span>
|
||||
<span className="truncate text-sm text-foreground">
|
||||
{currentModelLabel}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">
|
||||
{t("providerSelection.clickToChange", {
|
||||
defaultValue: "Click to change model",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
{/* Check badge */}
|
||||
{active && (
|
||||
<div
|
||||
className={`absolute -right-1 -top-1 h-[18px] w-[18px] rounded-full ${p.check} flex items-center justify-center shadow-sm`}
|
||||
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-y-0.5" />
|
||||
</div>
|
||||
</Card>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className="max-w-md overflow-hidden p-0">
|
||||
<DialogTitle>Model Selector</DialogTitle>
|
||||
<Command>
|
||||
<CommandInput placeholder={t("providerSelection.searchModels", { defaultValue: "Search models..." })} />
|
||||
<CommandList className="max-h-[350px]">
|
||||
<CommandEmpty>
|
||||
{t("providerSelection.noModelsFound", { defaultValue: "No models found." })}
|
||||
</CommandEmpty>
|
||||
{PROVIDER_GROUPS.map((group) => (
|
||||
<CommandGroup
|
||||
key={group.id}
|
||||
heading={
|
||||
<span className="flex items-center gap-1.5">
|
||||
<SessionProviderLogo provider={group.id} className="h-3.5 w-3.5 shrink-0" />
|
||||
{group.name}
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Check className="h-2.5 w-2.5" strokeWidth={3} />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{group.models.map((model) => {
|
||||
const isSelected =
|
||||
provider === group.id && currentModel === model.value;
|
||||
return (
|
||||
<CommandItem
|
||||
key={`${group.id}-${model.value}`}
|
||||
value={`${group.name} ${model.label}`}
|
||||
onSelect={() => handleModelSelect(group.id, model.value)}
|
||||
>
|
||||
<span className="flex-1 truncate">{model.label}</span>
|
||||
{isSelected && (
|
||||
<Check className="ml-auto h-4 w-4 shrink-0 text-primary" />
|
||||
)}
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandGroup>
|
||||
))}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Model picker — appears after provider is chosen */}
|
||||
<div
|
||||
className={`transition-all duration-200 ${provider ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-1 opacity-0"}`}
|
||||
>
|
||||
<div className="mb-5 flex items-center justify-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t("providerSelection.selectModel")}
|
||||
</span>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={currentModel}
|
||||
onChange={(e) => handleModelChange(e.target.value)}
|
||||
tabIndex={-1}
|
||||
className="cursor-pointer appearance-none rounded-lg border border-border/60 bg-muted/50 py-1.5 pl-3 pr-7 text-sm font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
>
|
||||
{modelConfig.OPTIONS.map(
|
||||
({ value, label }: { value: string; label: string }) => (
|
||||
<option key={value + label} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
),
|
||||
)}
|
||||
</select>
|
||||
<ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground/70">
|
||||
{/* Ready prompt */}
|
||||
<p className="mt-4 text-center text-sm text-muted-foreground/70">
|
||||
{
|
||||
{
|
||||
{
|
||||
claude: t("providerSelection.readyPrompt.claude", {
|
||||
model: claudeModel,
|
||||
}),
|
||||
cursor: t("providerSelection.readyPrompt.cursor", {
|
||||
model: cursorModel,
|
||||
}),
|
||||
codex: t("providerSelection.readyPrompt.codex", {
|
||||
model: codexModel,
|
||||
}),
|
||||
gemini: t("providerSelection.readyPrompt.gemini", {
|
||||
model: geminiModel,
|
||||
}),
|
||||
}[provider]
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
claude: t("providerSelection.readyPrompt.claude", {
|
||||
model: claudeModel,
|
||||
}),
|
||||
cursor: t("providerSelection.readyPrompt.cursor", {
|
||||
model: cursorModel,
|
||||
}),
|
||||
codex: t("providerSelection.readyPrompt.codex", {
|
||||
model: codexModel,
|
||||
}),
|
||||
gemini: t("providerSelection.readyPrompt.gemini", {
|
||||
model: geminiModel,
|
||||
}),
|
||||
}[provider]
|
||||
}
|
||||
</p>
|
||||
|
||||
{/* Task banner */}
|
||||
{provider && tasksEnabled && isTaskMasterInstalled && (
|
||||
|
||||
Reference in New Issue
Block a user