mirror of
https://gitee.com/wanwujie/deer-flow
synced 2026-04-19 04:14:46 +08:00
feat: hide model ID for safety reason, only show the display_name (#1410)
Co-authored-by: Henry Li <lixin.henry@bytedance.com>
This commit is contained in:
Henry Li
@@ -218,7 +218,14 @@ export function InputBox({
|
|||||||
onContextChange?.({
|
onContextChange?.({
|
||||||
...context,
|
...context,
|
||||||
mode: getResolvedMode(mode, supportThinking),
|
mode: getResolvedMode(mode, supportThinking),
|
||||||
reasoning_effort: mode === "ultra" ? "high" : mode === "pro" ? "medium" : mode === "thinking" ? "low" : "minimal",
|
reasoning_effort:
|
||||||
|
mode === "ultra"
|
||||||
|
? "high"
|
||||||
|
: mode === "pro"
|
||||||
|
? "medium"
|
||||||
|
: mode === "thinking"
|
||||||
|
? "low"
|
||||||
|
: "minimal",
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[onContextChange, context, supportThinking],
|
[onContextChange, context, supportThinking],
|
||||||
@@ -292,7 +299,9 @@ export function InputBox({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const current = (textInput.value ?? "").trim();
|
const current = (textInput.value ?? "").trim();
|
||||||
const next = current ? `${current}\n${pendingSuggestion}` : pendingSuggestion;
|
const next = current
|
||||||
|
? `${current}\n${pendingSuggestion}`
|
||||||
|
: pendingSuggestion;
|
||||||
textInput.setInput(next);
|
textInput.setInput(next);
|
||||||
setFollowupsHidden(true);
|
setFollowupsHidden(true);
|
||||||
setConfirmOpen(false);
|
setConfirmOpen(false);
|
||||||
@@ -405,7 +414,7 @@ export function InputBox({
|
|||||||
</PromptInputBody>
|
</PromptInputBody>
|
||||||
<PromptInputFooter className="flex">
|
<PromptInputFooter className="flex">
|
||||||
<PromptInputTools>
|
<PromptInputTools>
|
||||||
{/* TODO: Add more connectors here
|
{/* TODO: Add more connectors here
|
||||||
<PromptInputActionMenu>
|
<PromptInputActionMenu>
|
||||||
<PromptInputActionMenuTrigger className="px-2!" />
|
<PromptInputActionMenuTrigger className="px-2!" />
|
||||||
<PromptInputActionMenuContent>
|
<PromptInputActionMenuContent>
|
||||||
@@ -414,210 +423,135 @@ export function InputBox({
|
|||||||
/>
|
/>
|
||||||
</PromptInputActionMenuContent>
|
</PromptInputActionMenuContent>
|
||||||
</PromptInputActionMenu> */}
|
</PromptInputActionMenu> */}
|
||||||
<AddAttachmentsButton className="px-2!" />
|
<AddAttachmentsButton className="px-2!" />
|
||||||
<PromptInputActionMenu>
|
<PromptInputActionMenu>
|
||||||
<ModeHoverGuide
|
<ModeHoverGuide
|
||||||
mode={
|
mode={
|
||||||
context.mode === "flash" ||
|
context.mode === "flash" ||
|
||||||
context.mode === "thinking" ||
|
context.mode === "thinking" ||
|
||||||
context.mode === "pro" ||
|
context.mode === "pro" ||
|
||||||
context.mode === "ultra"
|
context.mode === "ultra"
|
||||||
? context.mode
|
? context.mode
|
||||||
: "flash"
|
: "flash"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<PromptInputActionMenuTrigger className="gap-1! px-2!">
|
<PromptInputActionMenuTrigger className="gap-1! px-2!">
|
||||||
<div>
|
<div>
|
||||||
{context.mode === "flash" && <ZapIcon className="size-3" />}
|
{context.mode === "flash" && <ZapIcon className="size-3" />}
|
||||||
{context.mode === "thinking" && (
|
{context.mode === "thinking" && (
|
||||||
<LightbulbIcon className="size-3" />
|
<LightbulbIcon className="size-3" />
|
||||||
)}
|
)}
|
||||||
{context.mode === "pro" && (
|
{context.mode === "pro" && (
|
||||||
<GraduationCapIcon className="size-3" />
|
<GraduationCapIcon className="size-3" />
|
||||||
)}
|
)}
|
||||||
{context.mode === "ultra" && (
|
{context.mode === "ultra" && (
|
||||||
<RocketIcon className="size-3 text-[#dabb5e]" />
|
<RocketIcon className="size-3 text-[#dabb5e]" />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={cn(
|
|
||||||
"text-xs font-normal",
|
|
||||||
context.mode === "ultra" ? "golden-text" : "",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{(context.mode === "flash" && t.inputBox.flashMode) ||
|
|
||||||
(context.mode === "thinking" && t.inputBox.reasoningMode) ||
|
|
||||||
(context.mode === "pro" && t.inputBox.proMode) ||
|
|
||||||
(context.mode === "ultra" && t.inputBox.ultraMode)}
|
|
||||||
</div>
|
|
||||||
</PromptInputActionMenuTrigger>
|
|
||||||
</ModeHoverGuide>
|
|
||||||
<PromptInputActionMenuContent className="w-80">
|
|
||||||
<DropdownMenuGroup>
|
|
||||||
<DropdownMenuLabel className="text-muted-foreground text-xs">
|
|
||||||
{t.inputBox.mode}
|
|
||||||
</DropdownMenuLabel>
|
|
||||||
<PromptInputActionMenu>
|
|
||||||
<PromptInputActionMenuItem
|
|
||||||
className={cn(
|
className={cn(
|
||||||
context.mode === "flash"
|
"text-xs font-normal",
|
||||||
? "text-accent-foreground"
|
context.mode === "ultra" ? "golden-text" : "",
|
||||||
: "text-muted-foreground/65",
|
|
||||||
)}
|
)}
|
||||||
onSelect={() => handleModeSelect("flash")}
|
|
||||||
>
|
>
|
||||||
<div className="flex flex-col gap-2">
|
{(context.mode === "flash" && t.inputBox.flashMode) ||
|
||||||
<div className="flex items-center gap-1 font-bold">
|
(context.mode === "thinking" &&
|
||||||
<ZapIcon
|
t.inputBox.reasoningMode) ||
|
||||||
className={cn(
|
(context.mode === "pro" && t.inputBox.proMode) ||
|
||||||
"mr-2 size-4",
|
(context.mode === "ultra" && t.inputBox.ultraMode)}
|
||||||
context.mode === "flash" &&
|
</div>
|
||||||
"text-accent-foreground",
|
</PromptInputActionMenuTrigger>
|
||||||
)}
|
</ModeHoverGuide>
|
||||||
/>
|
<PromptInputActionMenuContent className="w-80">
|
||||||
{t.inputBox.flashMode}
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-xs">
|
|
||||||
{t.inputBox.flashModeDescription}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{context.mode === "flash" ? (
|
|
||||||
<CheckIcon className="ml-auto size-4" />
|
|
||||||
) : (
|
|
||||||
<div className="ml-auto size-4" />
|
|
||||||
)}
|
|
||||||
</PromptInputActionMenuItem>
|
|
||||||
{supportThinking && (
|
|
||||||
<PromptInputActionMenuItem
|
|
||||||
className={cn(
|
|
||||||
context.mode === "thinking"
|
|
||||||
? "text-accent-foreground"
|
|
||||||
: "text-muted-foreground/65",
|
|
||||||
)}
|
|
||||||
onSelect={() => handleModeSelect("thinking")}
|
|
||||||
>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<div className="flex items-center gap-1 font-bold">
|
|
||||||
<LightbulbIcon
|
|
||||||
className={cn(
|
|
||||||
"mr-2 size-4",
|
|
||||||
context.mode === "thinking" &&
|
|
||||||
"text-accent-foreground",
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{t.inputBox.reasoningMode}
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-xs">
|
|
||||||
{t.inputBox.reasoningModeDescription}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{context.mode === "thinking" ? (
|
|
||||||
<CheckIcon className="ml-auto size-4" />
|
|
||||||
) : (
|
|
||||||
<div className="ml-auto size-4" />
|
|
||||||
)}
|
|
||||||
</PromptInputActionMenuItem>
|
|
||||||
)}
|
|
||||||
<PromptInputActionMenuItem
|
|
||||||
className={cn(
|
|
||||||
context.mode === "pro"
|
|
||||||
? "text-accent-foreground"
|
|
||||||
: "text-muted-foreground/65",
|
|
||||||
)}
|
|
||||||
onSelect={() => handleModeSelect("pro")}
|
|
||||||
>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<div className="flex items-center gap-1 font-bold">
|
|
||||||
<GraduationCapIcon
|
|
||||||
className={cn(
|
|
||||||
"mr-2 size-4",
|
|
||||||
context.mode === "pro" && "text-accent-foreground",
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{t.inputBox.proMode}
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-xs">
|
|
||||||
{t.inputBox.proModeDescription}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{context.mode === "pro" ? (
|
|
||||||
<CheckIcon className="ml-auto size-4" />
|
|
||||||
) : (
|
|
||||||
<div className="ml-auto size-4" />
|
|
||||||
)}
|
|
||||||
</PromptInputActionMenuItem>
|
|
||||||
<PromptInputActionMenuItem
|
|
||||||
className={cn(
|
|
||||||
context.mode === "ultra"
|
|
||||||
? "text-accent-foreground"
|
|
||||||
: "text-muted-foreground/65",
|
|
||||||
)}
|
|
||||||
onSelect={() => handleModeSelect("ultra")}
|
|
||||||
>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<div className="flex items-center gap-1 font-bold">
|
|
||||||
<RocketIcon
|
|
||||||
className={cn(
|
|
||||||
"mr-2 size-4",
|
|
||||||
context.mode === "ultra" && "text-[#dabb5e]",
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
context.mode === "ultra" && "golden-text",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{t.inputBox.ultraMode}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-xs">
|
|
||||||
{t.inputBox.ultraModeDescription}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{context.mode === "ultra" ? (
|
|
||||||
<CheckIcon className="ml-auto size-4" />
|
|
||||||
) : (
|
|
||||||
<div className="ml-auto size-4" />
|
|
||||||
)}
|
|
||||||
</PromptInputActionMenuItem>
|
|
||||||
</PromptInputActionMenu>
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
</PromptInputActionMenuContent>
|
|
||||||
</PromptInputActionMenu>
|
|
||||||
{supportReasoningEffort && context.mode !== "flash" && (
|
|
||||||
<PromptInputActionMenu>
|
|
||||||
<PromptInputActionMenuTrigger className="gap-1! px-2!">
|
|
||||||
<div className="text-xs font-normal">
|
|
||||||
{t.inputBox.reasoningEffort}:
|
|
||||||
{context.reasoning_effort === "minimal" && " " + t.inputBox.reasoningEffortMinimal}
|
|
||||||
{context.reasoning_effort === "low" && " " + t.inputBox.reasoningEffortLow}
|
|
||||||
{context.reasoning_effort === "medium" && " " + t.inputBox.reasoningEffortMedium}
|
|
||||||
{context.reasoning_effort === "high" && " " + t.inputBox.reasoningEffortHigh}
|
|
||||||
</div>
|
|
||||||
</PromptInputActionMenuTrigger>
|
|
||||||
<PromptInputActionMenuContent className="w-70">
|
|
||||||
<DropdownMenuGroup>
|
<DropdownMenuGroup>
|
||||||
<DropdownMenuLabel className="text-muted-foreground text-xs">
|
<DropdownMenuLabel className="text-muted-foreground text-xs">
|
||||||
{t.inputBox.reasoningEffort}
|
{t.inputBox.mode}
|
||||||
</DropdownMenuLabel>
|
</DropdownMenuLabel>
|
||||||
<PromptInputActionMenu>
|
<PromptInputActionMenu>
|
||||||
<PromptInputActionMenuItem
|
<PromptInputActionMenuItem
|
||||||
className={cn(
|
className={cn(
|
||||||
context.reasoning_effort === "minimal"
|
context.mode === "flash"
|
||||||
? "text-accent-foreground"
|
? "text-accent-foreground"
|
||||||
: "text-muted-foreground/65",
|
: "text-muted-foreground/65",
|
||||||
)}
|
)}
|
||||||
onSelect={() => handleReasoningEffortSelect("minimal")}
|
onSelect={() => handleModeSelect("flash")}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<div className="flex items-center gap-1 font-bold">
|
<div className="flex items-center gap-1 font-bold">
|
||||||
{t.inputBox.reasoningEffortMinimal}
|
<ZapIcon
|
||||||
|
className={cn(
|
||||||
|
"mr-2 size-4",
|
||||||
|
context.mode === "flash" &&
|
||||||
|
"text-accent-foreground",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{t.inputBox.flashMode}
|
||||||
</div>
|
</div>
|
||||||
<div className="pl-2 text-xs">
|
<div className="pl-7 text-xs">
|
||||||
{t.inputBox.reasoningEffortMinimalDescription}
|
{t.inputBox.flashModeDescription}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{context.reasoning_effort === "minimal" ? (
|
{context.mode === "flash" ? (
|
||||||
|
<CheckIcon className="ml-auto size-4" />
|
||||||
|
) : (
|
||||||
|
<div className="ml-auto size-4" />
|
||||||
|
)}
|
||||||
|
</PromptInputActionMenuItem>
|
||||||
|
{supportThinking && (
|
||||||
|
<PromptInputActionMenuItem
|
||||||
|
className={cn(
|
||||||
|
context.mode === "thinking"
|
||||||
|
? "text-accent-foreground"
|
||||||
|
: "text-muted-foreground/65",
|
||||||
|
)}
|
||||||
|
onSelect={() => handleModeSelect("thinking")}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<div className="flex items-center gap-1 font-bold">
|
||||||
|
<LightbulbIcon
|
||||||
|
className={cn(
|
||||||
|
"mr-2 size-4",
|
||||||
|
context.mode === "thinking" &&
|
||||||
|
"text-accent-foreground",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{t.inputBox.reasoningMode}
|
||||||
|
</div>
|
||||||
|
<div className="pl-7 text-xs">
|
||||||
|
{t.inputBox.reasoningModeDescription}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{context.mode === "thinking" ? (
|
||||||
|
<CheckIcon className="ml-auto size-4" />
|
||||||
|
) : (
|
||||||
|
<div className="ml-auto size-4" />
|
||||||
|
)}
|
||||||
|
</PromptInputActionMenuItem>
|
||||||
|
)}
|
||||||
|
<PromptInputActionMenuItem
|
||||||
|
className={cn(
|
||||||
|
context.mode === "pro"
|
||||||
|
? "text-accent-foreground"
|
||||||
|
: "text-muted-foreground/65",
|
||||||
|
)}
|
||||||
|
onSelect={() => handleModeSelect("pro")}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<div className="flex items-center gap-1 font-bold">
|
||||||
|
<GraduationCapIcon
|
||||||
|
className={cn(
|
||||||
|
"mr-2 size-4",
|
||||||
|
context.mode === "pro" &&
|
||||||
|
"text-accent-foreground",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{t.inputBox.proMode}
|
||||||
|
</div>
|
||||||
|
<div className="pl-7 text-xs">
|
||||||
|
{t.inputBox.proModeDescription}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{context.mode === "pro" ? (
|
||||||
<CheckIcon className="ml-auto size-4" />
|
<CheckIcon className="ml-auto size-4" />
|
||||||
) : (
|
) : (
|
||||||
<div className="ml-auto size-4" />
|
<div className="ml-auto size-4" />
|
||||||
@@ -625,65 +559,33 @@ export function InputBox({
|
|||||||
</PromptInputActionMenuItem>
|
</PromptInputActionMenuItem>
|
||||||
<PromptInputActionMenuItem
|
<PromptInputActionMenuItem
|
||||||
className={cn(
|
className={cn(
|
||||||
context.reasoning_effort === "low"
|
context.mode === "ultra"
|
||||||
? "text-accent-foreground"
|
? "text-accent-foreground"
|
||||||
: "text-muted-foreground/65",
|
: "text-muted-foreground/65",
|
||||||
)}
|
)}
|
||||||
onSelect={() => handleReasoningEffortSelect("low")}
|
onSelect={() => handleModeSelect("ultra")}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<div className="flex items-center gap-1 font-bold">
|
<div className="flex items-center gap-1 font-bold">
|
||||||
{t.inputBox.reasoningEffortLow}
|
<RocketIcon
|
||||||
|
className={cn(
|
||||||
|
"mr-2 size-4",
|
||||||
|
context.mode === "ultra" && "text-[#dabb5e]",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
context.mode === "ultra" && "golden-text",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t.inputBox.ultraMode}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="pl-2 text-xs">
|
<div className="pl-7 text-xs">
|
||||||
{t.inputBox.reasoningEffortLowDescription}
|
{t.inputBox.ultraModeDescription}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{context.reasoning_effort === "low" ? (
|
{context.mode === "ultra" ? (
|
||||||
<CheckIcon className="ml-auto size-4" />
|
|
||||||
) : (
|
|
||||||
<div className="ml-auto size-4" />
|
|
||||||
)}
|
|
||||||
</PromptInputActionMenuItem>
|
|
||||||
<PromptInputActionMenuItem
|
|
||||||
className={cn(
|
|
||||||
context.reasoning_effort === "medium" || !context.reasoning_effort
|
|
||||||
? "text-accent-foreground"
|
|
||||||
: "text-muted-foreground/65",
|
|
||||||
)}
|
|
||||||
onSelect={() => handleReasoningEffortSelect("medium")}
|
|
||||||
>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<div className="flex items-center gap-1 font-bold">
|
|
||||||
{t.inputBox.reasoningEffortMedium}
|
|
||||||
</div>
|
|
||||||
<div className="pl-2 text-xs">
|
|
||||||
{t.inputBox.reasoningEffortMediumDescription}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{context.reasoning_effort === "medium" || !context.reasoning_effort ? (
|
|
||||||
<CheckIcon className="ml-auto size-4" />
|
|
||||||
) : (
|
|
||||||
<div className="ml-auto size-4" />
|
|
||||||
)}
|
|
||||||
</PromptInputActionMenuItem>
|
|
||||||
<PromptInputActionMenuItem
|
|
||||||
className={cn(
|
|
||||||
context.reasoning_effort === "high"
|
|
||||||
? "text-accent-foreground"
|
|
||||||
: "text-muted-foreground/65",
|
|
||||||
)}
|
|
||||||
onSelect={() => handleReasoningEffortSelect("high")}
|
|
||||||
>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<div className="flex items-center gap-1 font-bold">
|
|
||||||
{t.inputBox.reasoningEffortHigh}
|
|
||||||
</div>
|
|
||||||
<div className="pl-2 text-xs">
|
|
||||||
{t.inputBox.reasoningEffortHighDescription}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{context.reasoning_effort === "high" ? (
|
|
||||||
<CheckIcon className="ml-auto size-4" />
|
<CheckIcon className="ml-auto size-4" />
|
||||||
) : (
|
) : (
|
||||||
<div className="ml-auto size-4" />
|
<div className="ml-auto size-4" />
|
||||||
@@ -693,75 +595,185 @@ export function InputBox({
|
|||||||
</DropdownMenuGroup>
|
</DropdownMenuGroup>
|
||||||
</PromptInputActionMenuContent>
|
</PromptInputActionMenuContent>
|
||||||
</PromptInputActionMenu>
|
</PromptInputActionMenu>
|
||||||
)}
|
{supportReasoningEffort && context.mode !== "flash" && (
|
||||||
</PromptInputTools>
|
<PromptInputActionMenu>
|
||||||
<PromptInputTools>
|
<PromptInputActionMenuTrigger className="gap-1! px-2!">
|
||||||
<ModelSelector
|
<div className="text-xs font-normal">
|
||||||
open={modelDialogOpen}
|
{t.inputBox.reasoningEffort}:
|
||||||
onOpenChange={setModelDialogOpen}
|
{context.reasoning_effort === "minimal" &&
|
||||||
>
|
" " + t.inputBox.reasoningEffortMinimal}
|
||||||
<ModelSelectorTrigger asChild>
|
{context.reasoning_effort === "low" &&
|
||||||
<PromptInputButton>
|
" " + t.inputBox.reasoningEffortLow}
|
||||||
<div className="flex min-w-0 flex-col items-start text-left">
|
{context.reasoning_effort === "medium" &&
|
||||||
<ModelSelectorName className="text-xs font-normal">
|
" " + t.inputBox.reasoningEffortMedium}
|
||||||
{selectedModel?.display_name}
|
{context.reasoning_effort === "high" &&
|
||||||
</ModelSelectorName>
|
" " + t.inputBox.reasoningEffortHigh}
|
||||||
{selectedModel?.model && (
|
</div>
|
||||||
<span className="text-muted-foreground w-full truncate text-[10px] leading-none">
|
</PromptInputActionMenuTrigger>
|
||||||
{selectedModel.model}
|
<PromptInputActionMenuContent className="w-70">
|
||||||
</span>
|
<DropdownMenuGroup>
|
||||||
)}
|
<DropdownMenuLabel className="text-muted-foreground text-xs">
|
||||||
</div>
|
{t.inputBox.reasoningEffort}
|
||||||
</PromptInputButton>
|
</DropdownMenuLabel>
|
||||||
</ModelSelectorTrigger>
|
<PromptInputActionMenu>
|
||||||
<ModelSelectorContent>
|
<PromptInputActionMenuItem
|
||||||
<ModelSelectorInput placeholder={t.inputBox.searchModels} />
|
className={cn(
|
||||||
<ModelSelectorList>
|
context.reasoning_effort === "minimal"
|
||||||
{models.map((m) => (
|
? "text-accent-foreground"
|
||||||
<ModelSelectorItem
|
: "text-muted-foreground/65",
|
||||||
key={m.name}
|
)}
|
||||||
value={m.name}
|
onSelect={() => handleReasoningEffortSelect("minimal")}
|
||||||
onSelect={() => handleModelSelect(m.name)}
|
>
|
||||||
>
|
<div className="flex flex-col gap-2">
|
||||||
<div className="flex min-w-0 flex-1 flex-col">
|
<div className="flex items-center gap-1 font-bold">
|
||||||
<ModelSelectorName>{m.display_name}</ModelSelectorName>
|
{t.inputBox.reasoningEffortMinimal}
|
||||||
<span className="text-muted-foreground truncate text-[10px]">
|
</div>
|
||||||
{m.model}
|
<div className="pl-2 text-xs">
|
||||||
</span>
|
{t.inputBox.reasoningEffortMinimalDescription}
|
||||||
</div>
|
</div>
|
||||||
{m.name === context.model_name ? (
|
</div>
|
||||||
<CheckIcon className="ml-auto size-4" />
|
{context.reasoning_effort === "minimal" ? (
|
||||||
) : (
|
<CheckIcon className="ml-auto size-4" />
|
||||||
<div className="ml-auto size-4" />
|
) : (
|
||||||
)}
|
<div className="ml-auto size-4" />
|
||||||
</ModelSelectorItem>
|
)}
|
||||||
))}
|
</PromptInputActionMenuItem>
|
||||||
</ModelSelectorList>
|
<PromptInputActionMenuItem
|
||||||
</ModelSelectorContent>
|
className={cn(
|
||||||
</ModelSelector>
|
context.reasoning_effort === "low"
|
||||||
<PromptInputSubmit
|
? "text-accent-foreground"
|
||||||
className="rounded-full"
|
: "text-muted-foreground/65",
|
||||||
disabled={disabled}
|
)}
|
||||||
variant="outline"
|
onSelect={() => handleReasoningEffortSelect("low")}
|
||||||
status={status}
|
>
|
||||||
/>
|
<div className="flex flex-col gap-2">
|
||||||
</PromptInputTools>
|
<div className="flex items-center gap-1 font-bold">
|
||||||
</PromptInputFooter>
|
{t.inputBox.reasoningEffortLow}
|
||||||
{isNewThread && searchParams.get("mode") !== "skill" && (
|
</div>
|
||||||
<div className="absolute right-0 -bottom-20 left-0 z-0 flex items-center justify-center">
|
<div className="pl-2 text-xs">
|
||||||
<SuggestionList />
|
{t.inputBox.reasoningEffortLowDescription}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
{!isNewThread && (
|
{context.reasoning_effort === "low" ? (
|
||||||
<div className="bg-background absolute right-0 -bottom-[17px] left-0 z-0 h-4"></div>
|
<CheckIcon className="ml-auto size-4" />
|
||||||
)}
|
) : (
|
||||||
|
<div className="ml-auto size-4" />
|
||||||
|
)}
|
||||||
|
</PromptInputActionMenuItem>
|
||||||
|
<PromptInputActionMenuItem
|
||||||
|
className={cn(
|
||||||
|
context.reasoning_effort === "medium" ||
|
||||||
|
!context.reasoning_effort
|
||||||
|
? "text-accent-foreground"
|
||||||
|
: "text-muted-foreground/65",
|
||||||
|
)}
|
||||||
|
onSelect={() => handleReasoningEffortSelect("medium")}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<div className="flex items-center gap-1 font-bold">
|
||||||
|
{t.inputBox.reasoningEffortMedium}
|
||||||
|
</div>
|
||||||
|
<div className="pl-2 text-xs">
|
||||||
|
{t.inputBox.reasoningEffortMediumDescription}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{context.reasoning_effort === "medium" ||
|
||||||
|
!context.reasoning_effort ? (
|
||||||
|
<CheckIcon className="ml-auto size-4" />
|
||||||
|
) : (
|
||||||
|
<div className="ml-auto size-4" />
|
||||||
|
)}
|
||||||
|
</PromptInputActionMenuItem>
|
||||||
|
<PromptInputActionMenuItem
|
||||||
|
className={cn(
|
||||||
|
context.reasoning_effort === "high"
|
||||||
|
? "text-accent-foreground"
|
||||||
|
: "text-muted-foreground/65",
|
||||||
|
)}
|
||||||
|
onSelect={() => handleReasoningEffortSelect("high")}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<div className="flex items-center gap-1 font-bold">
|
||||||
|
{t.inputBox.reasoningEffortHigh}
|
||||||
|
</div>
|
||||||
|
<div className="pl-2 text-xs">
|
||||||
|
{t.inputBox.reasoningEffortHighDescription}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{context.reasoning_effort === "high" ? (
|
||||||
|
<CheckIcon className="ml-auto size-4" />
|
||||||
|
) : (
|
||||||
|
<div className="ml-auto size-4" />
|
||||||
|
)}
|
||||||
|
</PromptInputActionMenuItem>
|
||||||
|
</PromptInputActionMenu>
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
</PromptInputActionMenuContent>
|
||||||
|
</PromptInputActionMenu>
|
||||||
|
)}
|
||||||
|
</PromptInputTools>
|
||||||
|
<PromptInputTools>
|
||||||
|
<ModelSelector
|
||||||
|
open={modelDialogOpen}
|
||||||
|
onOpenChange={setModelDialogOpen}
|
||||||
|
>
|
||||||
|
<ModelSelectorTrigger asChild>
|
||||||
|
<PromptInputButton>
|
||||||
|
<div className="flex min-w-0 flex-col items-start text-left">
|
||||||
|
<ModelSelectorName className="text-xs font-normal">
|
||||||
|
{selectedModel?.display_name}
|
||||||
|
</ModelSelectorName>
|
||||||
|
</div>
|
||||||
|
</PromptInputButton>
|
||||||
|
</ModelSelectorTrigger>
|
||||||
|
<ModelSelectorContent>
|
||||||
|
<ModelSelectorInput placeholder={t.inputBox.searchModels} />
|
||||||
|
<ModelSelectorList>
|
||||||
|
{models.map((m) => (
|
||||||
|
<ModelSelectorItem
|
||||||
|
key={m.name}
|
||||||
|
value={m.name}
|
||||||
|
onSelect={() => handleModelSelect(m.name)}
|
||||||
|
>
|
||||||
|
<div className="flex min-w-0 flex-1 flex-col">
|
||||||
|
<ModelSelectorName>{m.display_name}</ModelSelectorName>
|
||||||
|
<span className="text-muted-foreground truncate text-[10px]">
|
||||||
|
{m.model}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{m.name === context.model_name ? (
|
||||||
|
<CheckIcon className="ml-auto size-4" />
|
||||||
|
) : (
|
||||||
|
<div className="ml-auto size-4" />
|
||||||
|
)}
|
||||||
|
</ModelSelectorItem>
|
||||||
|
))}
|
||||||
|
</ModelSelectorList>
|
||||||
|
</ModelSelectorContent>
|
||||||
|
</ModelSelector>
|
||||||
|
<PromptInputSubmit
|
||||||
|
className="rounded-full"
|
||||||
|
disabled={disabled}
|
||||||
|
variant="outline"
|
||||||
|
status={status}
|
||||||
|
/>
|
||||||
|
</PromptInputTools>
|
||||||
|
</PromptInputFooter>
|
||||||
|
{isNewThread && searchParams.get("mode") !== "skill" && (
|
||||||
|
<div className="absolute right-0 -bottom-20 left-0 z-0 flex items-center justify-center">
|
||||||
|
<SuggestionList />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!isNewThread && (
|
||||||
|
<div className="bg-background absolute right-0 -bottom-[17px] left-0 z-0 h-4"></div>
|
||||||
|
)}
|
||||||
</PromptInput>
|
</PromptInput>
|
||||||
|
|
||||||
{!disabled &&
|
{!disabled &&
|
||||||
!isNewThread &&
|
!isNewThread &&
|
||||||
!followupsHidden &&
|
!followupsHidden &&
|
||||||
(followupsLoading || followups.length > 0) && (
|
(followupsLoading || followups.length > 0) && (
|
||||||
<div className="absolute right-0 -top-20 left-0 z-20 flex items-center justify-center">
|
<div className="absolute -top-20 right-0 left-0 z-20 flex items-center justify-center">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{followupsLoading ? (
|
{followupsLoading ? (
|
||||||
<div className="text-muted-foreground bg-background/80 rounded-full border px-4 py-2 text-xs backdrop-blur-sm">
|
<div className="text-muted-foreground bg-background/80 rounded-full border px-4 py-2 text-xs backdrop-blur-sm">
|
||||||
|
|||||||
Reference in New Issue
Block a user