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

fix: translate into English

Browse Source
This commit is contained in:
Henry Li
2025-06-12 18:42:45 +08:00
parent d00682305f
commit cc7247d02a
1 changed files with 99 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
web/src/app/chat/components/message-list-view.tsx
View File

@@ -3,7 +3,13 @@
import { LoadingOutlined } from "@ant-design/icons"; import { LoadingOutlined } from "@ant-design/icons";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { Download, Headphones, ChevronDown, ChevronRight, Brain } from "lucide-react"; import {
Download,
Headphones,
ChevronDown,
ChevronRight,
Brain,
} from "lucide-react";
import React, { useCallback, useMemo, useRef, useState } from "react"; import React, { useCallback, useMemo, useRef, useState } from "react";
import { LoadingAnimation } from "~/components/deer-flow/loading-animation"; import { LoadingAnimation } from "~/components/deer-flow/loading-animation";
@@ -23,7 +29,11 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "~/components/ui/card"; } from "~/components/ui/card";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/components/ui/collapsible"; import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "~/components/ui/collapsible";
import type { Message, Option } from "~/core/messages"; import type { Message, Option } from "~/core/messages";
import { import {
closeResearch, closeResearch,
@@ -323,59 +333,63 @@ function ThoughtBlock({
} }
return ( return (
<div className={cn("w-full mb-6", className)}> <div className={cn("mb-6 w-full", className)}>
<Collapsible open={isOpen} onOpenChange={setIsOpen}> <Collapsible open={isOpen} onOpenChange={setIsOpen}>
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<Button <Button
variant="ghost" variant="ghost"
className={cn( className={cn(
"w-full justify-start px-6 py-4 h-auto text-left rounded-xl border transition-all duration-200", "h-auto w-full justify-start rounded-xl border px-6 py-4 text-left transition-all duration-200",
"hover:bg-accent hover:text-accent-foreground", "hover:bg-accent hover:text-accent-foreground",
isStreaming isStreaming
? "border-primary/20 bg-primary/5 shadow-sm" ? "border-primary/20 bg-primary/5 shadow-sm"
: "border-border bg-card" : "border-border bg-card",
)} )}
> >
<div className="flex items-center gap-3 w-full"> <div className="flex w-full items-center gap-3">
<Brain <Brain
size={18} size={18}
className={cn( className={cn(
"shrink-0 transition-colors duration-200", "shrink-0 transition-colors duration-200",
isStreaming ? "text-primary" : "text-muted-foreground" isStreaming ? "text-primary" : "text-muted-foreground",
)} )}
/> />
<span className={cn( <span
"font-semibold leading-none transition-colors duration-200", className={cn(
isStreaming ? "text-primary" : "text-foreground" "leading-none font-semibold transition-colors duration-200",
)}> isStreaming ? "text-primary" : "text-foreground",
深度思考过程 )}
>
Deep Thinking
</span> </span>
{isStreaming && ( {isStreaming && <LoadingAnimation className="ml-2 scale-75" />}
<LoadingAnimation className="ml-2 scale-75" />
)}
<div className="flex-grow" /> <div className="flex-grow" />
{isOpen ? ( {isOpen ? (
<ChevronDown size={16} className="text-muted-foreground transition-transform duration-200" /> <ChevronDown
size={16}
className="text-muted-foreground transition-transform duration-200"
/>
) : ( ) : (
<ChevronRight size={16} className="text-muted-foreground transition-transform duration-200" /> <ChevronRight
size={16}
className="text-muted-foreground transition-transform duration-200"
/>
)} )}
</div> </div>
</Button> </Button>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent className="mt-3 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-up-2 data-[state=open]:slide-down-2"> <CollapsibleContent className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-up-2 data-[state=open]:slide-down-2 mt-3">
<Card className={cn( <Card
"transition-all duration-200", className={cn(
isStreaming "transition-all duration-200",
? "border-primary/20 bg-primary/5" isStreaming ? "border-primary/20 bg-primary/5" : "border-border",
: "border-border" )}
)}> >
<CardContent className="py-6"> <CardContent className="py-6">
<Markdown <Markdown
className={cn( className={cn(
"prose dark:prose-invert max-w-none transition-colors duration-200", "prose dark:prose-invert max-w-none transition-colors duration-200",
isStreaming isStreaming ? "prose-primary" : "opacity-80",
? "prose-primary"
: "opacity-80"
)} )}
animated={isStreaming} animated={isStreaming}
> >
@@ -417,7 +431,9 @@ function PlanCard({
}, [message.content]); }, [message.content]);
const reasoningContent = message.reasoningContent; const reasoningContent = message.reasoningContent;
const hasMainContent = Boolean(message.content && message.content.trim() !== ""); const hasMainContent = Boolean(
message.content && message.content.trim() !== "",
);
// 判断是否正在思考：有推理内容但还没有主要内容 // 判断是否正在思考：有推理内容但还没有主要内容
const isThinking = Boolean(reasoningContent && !hasMainContent); const isThinking = Boolean(reasoningContent && !hasMainContent);
@@ -461,55 +477,61 @@ function PlanCard({
</Markdown> </Markdown>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Markdown className="opacity-80" animated={message.isStreaming}> <Markdown className="opacity-80" animated={message.isStreaming}>
{plan.thought} {plan.thought}
</Markdown> </Markdown>
{plan.steps && ( {plan.steps && (
<ul className="my-2 flex list-decimal flex-col gap-4 border-l-[2px] pl-8"> <ul className="my-2 flex list-decimal flex-col gap-4 border-l-[2px] pl-8">
{plan.steps.map((step, i) => ( {plan.steps.map((step, i) => (
<li key={`step-${i}`}> <li key={`step-${i}`}>
<h3 className="mb text-lg font-medium"> <h3 className="mb text-lg font-medium">
<Markdown animated={message.isStreaming}>{step.title}</Markdown> <Markdown animated={message.isStreaming}>
</h3> {step.title}
<div className="text-muted-foreground text-sm"> </Markdown>
<Markdown animated={message.isStreaming}>{step.description}</Markdown> </h3>
</div> <div className="text-muted-foreground text-sm">
</li> <Markdown animated={message.isStreaming}>
))} {step.description}
</ul> </Markdown>
)} </div>
</CardContent> </li>
<CardFooter className="flex justify-end"> ))}
{!message.isStreaming && interruptMessage?.options?.length && ( </ul>
<motion.div )}
className="flex gap-2" </CardContent>
initial={{ opacity: 0, y: 12 }} <CardFooter className="flex justify-end">
animate={{ opacity: 1, y: 0 }} {!message.isStreaming && interruptMessage?.options?.length && (
transition={{ duration: 0.3, delay: 0.3 }} <motion.div
> className="flex gap-2"
{interruptMessage?.options.map((option) => ( initial={{ opacity: 0, y: 12 }}
<Button animate={{ opacity: 1, y: 0 }}
key={option.value} transition={{ duration: 0.3, delay: 0.3 }}
variant={option.value === "accepted" ? "default" : "outline"} >
disabled={!waitForFeedback} {interruptMessage?.options.map((option) => (
onClick={() => { <Button
if (option.value === "accepted") { key={option.value}
void handleAccept(); variant={
} else { option.value === "accepted" ? "default" : "outline"
onFeedback?.({ }
option, disabled={!waitForFeedback}
}); onClick={() => {
} if (option.value === "accepted") {
}} void handleAccept();
> } else {
{option.text} onFeedback?.({
</Button> option,
))} });
</motion.div> }
)} }}
</CardFooter> >
</Card> {option.text}
</Button>
))}
</motion.div>
)}
</CardFooter>
</Card>
</motion.div> </motion.div>
)} )}
</div> </div>