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

FIX/Adapt message box to handle long text in frontend (#466)

Browse Source 
* fix:ui

* fix:ui bug

---------

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
This commit is contained in:
道心坚定韩道友
2025-08-21 10:31:54 +08:00
committed by GitHub
parent db6c1bf7cb
commit f17e5bd6c8
3 changed files with 53 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -185,7 +185,7 @@ function MessageListItem({
)} )}
> >
<MessageBubble message={message}> <MessageBubble message={message}>
<div className="flex w-full flex-col text-wrap break-words"> <div className="flex w-full flex-col break-words">
<Markdown <Markdown
className={cn( className={cn(
message.role === "user" && message.role === "user" &&
@@ -233,11 +233,12 @@ function MessageBubble({
return ( return (
<div <div
className={cn( className={cn(
`group flex w-fit max-w-[85%] flex-col rounded-2xl px-4 py-3 text-nowrap shadow`, "group flex w-auto max-w-[90vw] flex-col rounded-2xl px-4 py-3 break-words",
message.role === "user" && "bg-brand rounded-ee-none", message.role === "user" && "bg-brand rounded-ee-none",
message.role === "assistant" && "bg-card rounded-es-none", message.role === "assistant" && "bg-card rounded-es-none",
className, className,
)} )}
style={{ wordBreak: "break-all" }}
> >
{children} {children}
</div> </div>
@@ -492,27 +493,46 @@ function PlanCard({
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Markdown className="opacity-80" animated={message.isStreaming}> <div style={{ wordBreak: 'break-all', whiteSpace: 'normal' }}>
{plan.thought} <Markdown className="opacity-80" animated={message.isStreaming}>
</Markdown> {plan.thought}
{plan.steps && ( </Markdown>
<ul className="my-2 flex list-decimal flex-col gap-4 border-l-[2px] pl-8"> {plan.steps && (
{plan.steps.map((step, i) => ( <ul className="my-2 flex list-decimal flex-col gap-4 border-l-[2px] pl-8">
<li key={`step-${i}`}> {plan.steps.map((step, i) => (
<h3 className="mb text-lg font-medium"> <li key={`step-${i}`} style={{ wordBreak: 'break-all', whiteSpace: 'normal' }}>
<Markdown animated={message.isStreaming}> <div className="flex items-start gap-2">
{step.title} <div className="flex-1">
</Markdown> <h3 className="mb flex items-center gap-2 text-lg font-medium">
</h3> <Markdown animated={message.isStreaming}>
<div className="text-muted-foreground text-sm"> {step.title}
<Markdown animated={message.isStreaming}> </Markdown>
{step.description} {step.tools && step.tools.length > 0 && (
</Markdown> <Tooltip
</div> title={`Uses ${step.tools.length} MCP tool${step.tools.length > 1 ? "s" : ""}`}
</li> >
))} <div className="flex items-center gap-1 rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-800">
</ul> <Wrench size={12} />
)} <span>{step.tools.length}</span>
</div>
</Tooltip>
)}
</h3>
<div className="text-muted-foreground text-sm" style={{ wordBreak: 'break-all', whiteSpace: 'normal' }}>
<Markdown animated={message.isStreaming}>
{step.description}
</Markdown>
</div>
{step.tools && step.tools.length > 0 && (
<ToolsDisplay tools={step.tools} />
)}
</div>
</div>
</li>
))}
</ul>
)}
</div>
</CardContent> </CardContent>
<CardFooter className="flex justify-end"> <CardFooter className="flex justify-end">
{!message.isStreaming && interruptMessage?.options?.length && ( {!message.isStreaming && interruptMessage?.options?.length && (

2
web/src/components/deer-flow/message-input.tsx
View File

@@ -185,7 +185,7 @@ const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
<EditorContent <EditorContent
immediatelyRender={false} immediatelyRender={false}
extensions={extensions} extensions={extensions}
className="border-muted h-full w-full overflow-auto" className="border-muted h-full w-full overflow-auto break-words"
editorProps={{ editorProps={{
attributes: { attributes: {
class: class:

9
web/src/styles/prosemirror.css
View File

@@ -304,3 +304,12 @@ span[style] > strong {
mark[style] > strong { mark[style] > strong {
color: inherit; color: inherit;
} }
.prose ol, .prose ul {
margin-left: 1.2em;
color: #b0b0b0;
font-size: 0.98em;
}
.prose ol > li::marker, .prose ul > li::marker {
color: #b0b0b0;
}