wanwu/deer-flow
1
0
Fork 0
mirror of https://gitee.com/wanwujie/deer-flow synced 2026-04-03 06:12:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: put all options into '+'

Browse Source
This commit is contained in:
Henry Li
2026-01-22 13:43:45 +08:00
parent 31bf49917c
commit 7d4d706738
7 changed files with 197 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/app/layout.tsx
View File

@@ -30,12 +30,7 @@ export default async function RootLayout({
suppressHydrationWarning
>
<body>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<ThemeProvider attribute="class" enableSystem disableTransitionOnChange>
<I18nProvider initialLocale={locale}>{children}</I18nProvider>
</ThemeProvider>
</body>

12
frontend/src/app/workspace/chats/[thread_id]/page.tsx
View File

@@ -147,21 +147,12 @@ export default function ChatPage() {
<div
className={cn(
"relative w-full",
isNewThread && "-translate-y-[calc(50vh-120px)]",
isNewThread && "-translate-y-[calc(50vh-160px)]",
isNewThread
? "max-w-(--container-width-sm)"
: "max-w-(--container-width-md)",
)}
>
{isNewThread && (
<div
className={cn(
"absolute right-0 bottom-[136px] left-0 flex",
)}
>
<Welcome />
</div>
)}
<div className="absolute -top-4 right-0 left-0 z-0">
<div className="absolute right-0 bottom-0 left-0">
<TodoList
@@ -183,6 +174,7 @@ export default function ChatPage() {
autoFocus={isNewThread}
status={thread.isLoading ? "streaming" : "ready"}
context={settings.context}
extraHeader={isNewThread && <Welcome />}
onContextChange={(context) =>
setSettings("context", context)
}

3
frontend/src/components/ai-elements/prompt-input.tsx
View File

@@ -44,6 +44,7 @@ import {
PaperclipIcon,
PlusIcon,
SquareIcon,
UploadIcon,
XIcon,
} from "lucide-react";
import { nanoid } from "nanoid";
@@ -422,7 +423,7 @@ export const PromptInputActionAddAttachments = ({
attachments.openFileDialog();
}}
>
<ImageIcon className="mr-2 size-4" /> {label}
<PaperclipIcon className="mr-2 size-4" /> {label}
</DropdownMenuItem>
);
};

260
frontend/src/components/workspace/input-box.tsx
View File

@@ -1,18 +1,36 @@
"use client";
import type { ChatStatus } from "ai";
import { CheckIcon, LightbulbIcon, ListTodoIcon } from "lucide-react";
import {
CheckIcon,
GraduationCapIcon,
LightbulbIcon,
ZapIcon,
} from "lucide-react";
import { useCallback, useMemo, useState, type ComponentProps } from "react";
import {
PromptInput,
PromptInputActionAddAttachments,
PromptInputActionMenu,
PromptInputActionMenuContent,
PromptInputActionMenuItem,
PromptInputActionMenuTrigger,
PromptInputAttachment,
PromptInputAttachments,
PromptInputBody,
PromptInputButton,
PromptInputFooter,
PromptInputSubmit,
PromptInputTextarea,
PromptInputTools,
type PromptInputMessage,
} from "@/components/ai-elements/prompt-input";
import {
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { useI18n } from "@/core/i18n/hooks";
import { useModels } from "@/core/models/hooks";
import type { AgentThreadContext } from "@/core/threads";
@@ -28,13 +46,12 @@ import {
ModelSelectorTrigger,
} from "../ai-elements/model-selector";
import { Tooltip } from "./tooltip";
export function InputBox({
className,
autoFocus,
status = "ready",
context,
extraHeader,
onContextChange,
onSubmit,
onStop,
@@ -55,6 +72,19 @@ export function InputBox({
() => models.find((m) => m.name === context.model_name),
[context.model_name, models],
);
const supportThinking = useMemo(
() => selectedModel?.supports_thinking ?? false,
[selectedModel],
);
const mode = useMemo(() => {
if (context.is_plan_mode) {
return "pro";
}
if (context.thinking_enabled) {
return "thinking";
}
return "flash";
}, [context.thinking_enabled, context.is_plan_mode]);
const handleModelSelect = useCallback(
(model_name: string) => {
const supports_thinking = selectedModel?.supports_thinking ?? false;
@@ -67,18 +97,30 @@ export function InputBox({
},
[selectedModel?.supports_thinking, onContextChange, context],
);
const handleThinkingToggle = useCallback(() => {
onContextChange?.({
...context,
thinking_enabled: !context.thinking_enabled,
});
}, [onContextChange, context]);
const handlePlanModeToggle = useCallback(() => {
onContextChange?.({
...context,
is_plan_mode: !context.is_plan_mode,
});
}, [onContextChange, context]);
const handleModeSelect = useCallback(
(mode: "flash" | "thinking" | "pro") => {
if (mode === "flash") {
onContextChange?.({
...context,
thinking_enabled: false,
is_plan_mode: false,
});
} else if (mode === "thinking") {
onContextChange?.({
...context,
thinking_enabled: true,
is_plan_mode: false,
});
} else if (mode === "pro") {
onContextChange?.({
...context,
thinking_enabled: true,
is_plan_mode: true,
});
}
},
[onContextChange, context],
);
const handleSubmit = useCallback(
async (message: PromptInputMessage) => {
if (status === "streaming") {
@@ -103,6 +145,16 @@ export function InputBox({
onSubmit={handleSubmit}
{...props}
>
{extraHeader && (
<div className="absolute top-0 right-0 left-0 z-10">
<div className="absolute right-0 bottom-0 left-0 flex items-center justify-center">
{extraHeader}
</div>
</div>
)}
<PromptInputAttachments>
{(attachment) => <PromptInputAttachment data={attachment} />}
</PromptInputAttachments>
<PromptInputBody className="absolute top-0 right-0 left-0 z-3">
<PromptInputTextarea
className={cn("size-full")}
@@ -111,91 +163,111 @@ export function InputBox({
/>
</PromptInputBody>
<PromptInputFooter className="flex">
<div className="flex items-center">
<Tooltip
content={
context.thinking_enabled ? (
<div className="tex-sm flex flex-col gap-1">
<div>{t.inputBox.thinkingEnabled}</div>
<div className="opacity-50">
{t.inputBox.clickToDisableThinking}
</div>
</div>
) : (
<div className="tex-sm flex flex-col gap-1">
<div>{t.inputBox.thinkingDisabled}</div>
<div className="opacity-50">
{t.inputBox.clickToEnableThinking}
</div>
</div>
)
}
>
{selectedModel?.supports_thinking && (
<PromptInputButton onClick={handleThinkingToggle}>
<>
{context.thinking_enabled ? (
<LightbulbIcon className="text-primary size-4" />
) : (
<LightbulbIcon className="size-4" />
)}
<span
<PromptInputTools>
<PromptInputActionMenu>
<PromptInputActionMenuTrigger />
<PromptInputActionMenuContent className="w-80">
<PromptInputActionAddAttachments
label={t.inputBox.addAttachments}
/>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel className="text-muted-foreground text-xs">
{t.inputBox.mode}
</DropdownMenuLabel>
<PromptInputActionMenu>
<PromptInputActionMenuItem
className={cn(
"text-xs font-normal",
context.thinking_enabled
? "text-primary"
: "text-muted-foreground",
mode === "flash"
? "text-accent-foreground"
: "text-muted-foreground/65",
)}
onSelect={() => handleModeSelect("flash")}
>
{t.inputBox.thinking}
</span>
</>
</PromptInputButton>
)}
</Tooltip>
<Tooltip
content={
context.is_plan_mode ? (
<div className="tex-sm flex flex-col gap-1">
<div>{t.inputBox.planMode}</div>
<div className="opacity-50">
{t.inputBox.clickToDisablePlanMode}
</div>
</div>
) : (
<div className="tex-sm flex flex-col gap-1">
<div>{t.inputBox.planMode}</div>
<div className="opacity-50">
{t.inputBox.clickToEnablePlanMode}
</div>
</div>
)
}
>
{selectedModel?.supports_thinking && (
<PromptInputButton onClick={handlePlanModeToggle}>
<>
{context.is_plan_mode ? (
<ListTodoIcon className="text-primary size-4" />
) : (
<ListTodoIcon className="size-4" />
<div className="flex flex-col gap-2">
<div className="flex items-center gap-1 font-bold">
<ZapIcon
className={cn(
"mr-2 size-4",
mode === "flash" && "text-accent-foreground",
)}
/>
{t.inputBox.flashMode}
</div>
<div className="pl-7 text-xs">
{t.inputBox.flashModeDescription}
</div>
</div>
{mode === "flash" ? (
<CheckIcon className="ml-auto size-4" />
) : (
<div className="ml-auto size-4" />
)}
</PromptInputActionMenuItem>
{supportThinking && (
<PromptInputActionMenuItem
className={cn(
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",
mode === "thinking" && "text-accent-foreground",
)}
/>
{t.inputBox.reasoningMode}
</div>
<div className="pl-7 text-xs">
{t.inputBox.reasoningModeDescription}
</div>
</div>
{mode === "thinking" ? (
<CheckIcon className="ml-auto size-4" />
) : (
<div className="ml-auto size-4" />
)}
</PromptInputActionMenuItem>
)}
<span
<PromptInputActionMenuItem
className={cn(
"text-xs font-normal",
context.is_plan_mode
? "text-primary"
: "text-muted-foreground",
mode === "pro"
? "text-accent-foreground"
: "text-muted-foreground/65",
)}
onSelect={() => handleModeSelect("pro")}
>
{t.inputBox.planMode}
</span>
</>
</PromptInputButton>
)}
</Tooltip>
</div>
<div className="flex items-center gap-2">
<div className="flex flex-col gap-2">
<div className="flex items-center gap-1 font-bold">
<GraduationCapIcon
className={cn(
"mr-2 size-4",
mode === "pro" && "text-accent-foreground",
)}
/>
{t.inputBox.proMode}
</div>
<div className="pl-7 text-xs">
{t.inputBox.proModeDescription}
</div>
</div>
{mode === "pro" ? (
<CheckIcon className="ml-auto size-4" />
) : (
<div className="ml-auto size-4" />
)}
</PromptInputActionMenuItem>
</PromptInputActionMenu>
</DropdownMenuGroup>
</PromptInputActionMenuContent>
</PromptInputActionMenu>
</PromptInputTools>
<PromptInputTools>
<ModelSelector
open={modelDialogOpen}
onOpenChange={setModelDialogOpen}
@@ -232,7 +304,7 @@ export function InputBox({
variant="outline"
status={status}
/>
</div>
</PromptInputTools>
</PromptInputFooter>
</PromptInput>
);

20
frontend/src/core/i18n/locales/en-US.ts
View File

@@ -39,16 +39,16 @@ export const enUS: Translations = {
// Input Box
inputBox: {
placeholder: "How can I assist you today?",
thinking: "Thinking",
thinkingEnabled: "Thinking is enabled",
thinkingDisabled: "Thinking is disabled",
clickToDisableThinking: "Click to disable thinking",
clickToEnableThinking: "Click to enable thinking",
planMode: "Plan mode",
planModeEnabled: "Plan mode is enabled",
planModeDisabled: "Plan mode is disabled",
clickToDisablePlanMode: "Click to disable plan mode",
clickToEnablePlanMode: "Click to enable plan mode",
addAttachments: "Add attachments",
mode: "Mode",
flashMode: "Flash",
flashModeDescription: "Fast and efficient",
reasoningMode: "Reasoning",
reasoningModeDescription:
"Reasoning before action, balance between time and accuracy",
proMode: "Pro",
proModeDescription:
"Reasoning, planning and executing, get more accurate results, may take more time",
searchModels: "Search models...",
},

18
frontend/src/core/i18n/locales/types.ts
View File

@@ -36,16 +36,14 @@ export interface Translations {
// Input Box
inputBox: {
placeholder: string;
thinking: string;
thinkingEnabled: string;
thinkingDisabled: string;
clickToDisableThinking: string;
clickToEnableThinking: string;
planMode: string;
planModeEnabled: string;
planModeDisabled: string;
clickToDisablePlanMode: string;
clickToEnablePlanMode: string;
addAttachments: string;
mode: string;
flashMode: string;
flashModeDescription: string;
reasoningMode: string;
reasoningModeDescription: string;
proMode: string;
proModeDescription: string;
searchModels: string;
};

18
frontend/src/core/i18n/locales/zh-CN.ts
View File

@@ -39,16 +39,14 @@ export const zhCN: Translations = {
// Input Box
inputBox: {
placeholder: "今天我能为你做些什么？",
thinking: "思考",
thinkingEnabled: "思考功能已启用",
thinkingDisabled: "思考功能已禁用",
clickToDisableThinking: "点击禁用思考功能",
clickToEnableThinking: "点击启用思考功能",
planMode: "To-do 模式",
planModeEnabled: "To-do 模式已启用",
planModeDisabled: "To-do 模式已禁用",
clickToDisablePlanMode: "点击禁用 To-do 模式",
clickToEnablePlanMode: "点击启用 To-do 模式",
addAttachments: "添加附件",
mode: "模式",
flashMode: "闪速",
flashModeDescription: "快速且高效的完成任务，但可能不够精准",
reasoningMode: "思考",
reasoningModeDescription: "思考后再行动，在时间与准确性之间取得平衡",
proMode: "专业",
proModeDescription: "思考、计划再执行，获得更精准的结果，可能需要更多时间",
searchModels: "搜索模型...",
},