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

feat: add special effect for Ultra mode

Browse Source
This commit is contained in:
Henry Li
2026-02-08 23:22:51 +08:00
parent 2703eb0b22
commit 8a2351593c
2 changed files with 115 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
frontend/src/components/workspace/messages/subtask-card.tsx
View File

@@ -53,103 +53,113 @@ export function SubtaskCard({
className={cn("relative w-full gap-2 rounded-lg border py-0", className)}
open={!collapsed}
>
<div
className={cn(
"ambilight z-[-1]",
task.status === "in_progress" ? "enabled" : "",
)}
></div>
{task.status === "in_progress" && (
<ShineBorder
borderWidth={1.5}
shineColor={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
/>
<>
<ShineBorder
borderWidth={1.5}
shineColor={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
/>
</>
)}
<div className="flex w-full items-center justify-between p-0.5">
<Button
className="w-full items-start justify-start text-left"
variant="ghost"
onClick={() => setCollapsed(!collapsed)}
>
<div className="flex w-full items-center justify-between">
<ChainOfThoughtStep
className="font-normal"
label={
task.status === "in_progress" ? (
<Shimmer duration={3} spread={3}>
{task.description}
</Shimmer>
) : (
task.description
)
}
icon={<ClipboardListIcon />}
></ChainOfThoughtStep>
<div className="flex items-center gap-1">
{collapsed && (
<div
className={cn(
"text-muted-foreground flex items-center gap-1 text-xs font-normal",
task.status === "failed" ? "text-red-500 opacity-67" : "",
)}
>
{icon}
<FlipDisplay
className="pb-1"
uniqueKey={task.latestMessage?.id ?? ""}
<div className="bg-background/95 flex w-full flex-col rounded-lg">
<div className="flex w-full items-center justify-between p-0.5">
<Button
className="w-full items-start justify-start text-left"
variant="ghost"
onClick={() => setCollapsed(!collapsed)}
>
<div className="flex w-full items-center justify-between">
<ChainOfThoughtStep
className="font-normal"
label={
task.status === "in_progress" ? (
<Shimmer duration={3} spread={3}>
{task.description}
</Shimmer>
) : (
task.description
)
}
icon={<ClipboardListIcon />}
></ChainOfThoughtStep>
<div className="flex items-center gap-1">
{collapsed && (
<div
className={cn(
"text-muted-foreground flex items-center gap-1 text-xs font-normal",
task.status === "failed" ? "text-red-500 opacity-67" : "",
)}
>
{task.status === "in_progress" &&
task.latestMessage &&
hasToolCalls(task.latestMessage)
? explainLastToolCall(task.latestMessage, t)
: t.subtasks[task.status]}
</FlipDisplay>
</div>
)}
<ChevronUp
className={cn(
"text-muted-foreground size-4",
!collapsed ? "" : "rotate-180",
{icon}
<FlipDisplay
className="pb-1"
uniqueKey={task.latestMessage?.id ?? ""}
>
{task.status === "in_progress" &&
task.latestMessage &&
hasToolCalls(task.latestMessage)
? explainLastToolCall(task.latestMessage, t)
: t.subtasks[task.status]}
</FlipDisplay>
</div>
)}
/>
<ChevronUp
className={cn(
"text-muted-foreground size-4",
!collapsed ? "" : "rotate-180",
)}
/>
</div>
</div>
</div>
</Button>
</div>
<ChainOfThoughtContent className="px-4 pb-4">
{task.prompt && (
<ChainOfThoughtStep
label={
<Streamdown {...streamdownPluginsWithWordAnimation}>
{task.prompt}
</Streamdown>
}
></ChainOfThoughtStep>
)}
{task.status === "in_progress" &&
task.latestMessage &&
hasToolCalls(task.latestMessage) && (
<ChainOfThoughtStep
label={t.subtasks.in_progress}
icon={<Loader2Icon className="size-4 animate-spin" />}
>
{explainLastToolCall(task.latestMessage, t)}
</ChainOfThoughtStep>
)}
{task.status === "completed" && (
<>
<ChainOfThoughtStep
label={t.subtasks.completed}
icon={<CheckCircleIcon className="size-4" />}
></ChainOfThoughtStep>
</Button>
</div>
<ChainOfThoughtContent className="px-4 pb-4">
{task.prompt && (
<ChainOfThoughtStep
label={
<Streamdown {...streamdownPlugins}>{task.result}</Streamdown>
<Streamdown {...streamdownPluginsWithWordAnimation}>
{task.prompt}
</Streamdown>
}
></ChainOfThoughtStep>
</>
)}
{task.status === "failed" && (
<ChainOfThoughtStep
label={<div className="text-red-500">{task.error}</div>}
icon={<XCircleIcon className="size-4 text-red-500" />}
></ChainOfThoughtStep>
)}
</ChainOfThoughtContent>
)}
{task.status === "in_progress" &&
task.latestMessage &&
hasToolCalls(task.latestMessage) && (
<ChainOfThoughtStep
label={t.subtasks.in_progress}
icon={<Loader2Icon className="size-4 animate-spin" />}
>
{explainLastToolCall(task.latestMessage, t)}
</ChainOfThoughtStep>
)}
{task.status === "completed" && (
<>
<ChainOfThoughtStep
label={t.subtasks.completed}
icon={<CheckCircleIcon className="size-4" />}
></ChainOfThoughtStep>
<ChainOfThoughtStep
label={
<Streamdown {...streamdownPlugins}>{task.result}</Streamdown>
}
></ChainOfThoughtStep>
</>
)}
{task.status === "failed" && (
<ChainOfThoughtStep
label={<div className="text-red-500">{task.error}</div>}
icon={<XCircleIcon className="size-4 text-red-500" />}
></ChainOfThoughtStep>
)}
</ChainOfThoughtContent>
</div>
</ChainOfThought>
);
}

19
frontend/src/styles/globals.css
View File

@@ -316,9 +316,16 @@
}
}
.ambilight {
pointer-events: none;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.ambilight:before,
.ambilight:after {
content: "";
pointer-events: none;
position: absolute;
left: 0;
top: 0;
@@ -339,9 +346,17 @@
width: 100%;
height: 100%;
border-radius: 10px;
opacity: 0.75;
z-index: -1;
animation: ambilight 60s ease-in-out infinite;
animation: ambilight 40s ease-in-out infinite;
}
.ambilight.enabled {
opacity: 1;
}
.dark .ambilight:before,
.dark .ambilight:after {
opacity: 0.85;
}
@keyframes ambilight {