From d68bec491c94042a93082c8554461904bc102b04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=E1=BB=85n=20Ng=C3=B4=20Th=C6=B0=E1=BB=A3ng?=
 <83950837+nguyenngothuong@users.noreply.github.com>
Date: Wed, 1 Apr 2026 22:36:47 +0700
Subject: [PATCH] fix(chat): improve error message display with better styling
 and word-break (#767)

- Add error icon and colored background/border for error messages
- Add break-all and max-w-full to prevent long error text overflow
- CSS: word-break and overflow-wrap for inline code in error messages
---
 .../ui/src/components/chat/message/MessageBody.tsx    | 11 ++++++++---
 packages/ui/src/index.css                             |  2 ++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/chat/message/MessageBody.tsx b/packages/ui/src/components/chat/message/MessageBody.tsx
index 914369a7..93e1bb1f 100644
--- a/packages/ui/src/components/chat/message/MessageBody.tsx
+++ b/packages/ui/src/components/chat/message/MessageBody.tsx
@@ -14,7 +14,7 @@ import { isEmptyTextPart, extractTextContent } from './partUtils';
 import { FadeInOnReveal } from './FadeInOnReveal';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { RiCheckLine, RiFileCopyLine, RiChatNewLine, RiArrowGoBackLine, RiGitBranchLine, RiHourglassLine, RiTimeLine, RiVolumeUpLine, RiStopLine, RiImageDownloadLine, RiLoader4Line } from '@remixicon/react';
+import { RiCheckLine, RiFileCopyLine, RiChatNewLine, RiArrowGoBackLine, RiGitBranchLine, RiHourglassLine, RiTimeLine, RiVolumeUpLine, RiStopLine, RiImageDownloadLine, RiLoader4Line, RiErrorWarningLine } from '@remixicon/react';
 import { ArrowsMerge } from '@/components/icons/ArrowsMerge';
 import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
 
@@ -1482,8 +1482,13 @@ const AssistantMessageBody: React.FC<Omit<MessageBodyProps, 'isUser'>> = ({
                     {renderedParts}
                     {showErrorMessage && (
                         <FadeInOnReveal key="assistant-error">
-                            <div className="group/assistant-text relative break-words">
-                                <SimpleMarkdownRenderer content={errorMessage ?? ''} onShowPopup={onShowPopup} />
+                            <div className="group/assistant-text relative mt-3 p-3 rounded-lg border bg-[var(--status-error-background)] border-[var(--status-error-border)] break-all max-w-full">
+                                <div className="flex items-start gap-2">
+                                    <RiErrorWarningLine className="h-4 w-4 shrink-0 mt-0.5 text-[var(--status-error)]" />
+                                    <div className="break-all min-w-0 flex-1">
+                                        <SimpleMarkdownRenderer content={errorMessage ?? ''} onShowPopup={onShowPopup} />
+                                    </div>
+                                </div>
                             </div>
                         </FadeInOnReveal>
                     )}
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index 34e58868..9f5afaaa 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -847,6 +847,8 @@ html:not(.dark) .chat-scroll {
 .streamdown-content code[data-streamdown="inline-code"] {
   background-color: var(--markdown-inline-code-bg, var(--surface-muted)) !important;
   color: var(--markdown-inline-code, var(--foreground)) !important;
+  word-break: break-all;
+  overflow-wrap: break-word;
 }
 
 /* Markdown headings - use theme colors */