fix: update error message structure in ChatMessage component (#4445)

* refactor: Update error message structure in ChatMessage component for clarity

* update error message format and content

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-11-07 10:26:24 -03:00 committed by GitHub
commit 311bf00b8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 54 additions and 45 deletions

View file

@ -350,18 +350,17 @@ class ErrorMessage(Message):
flow_id: str | None = None,
) -> None:
# Get the error reason
reason = f"**{exception.__class__.__name__}**\n"
reason = ""
if hasattr(exception, "body") and "message" in exception.body:
reason += f" - **{exception.body.get('message')}**\n"
reason += f"{exception.body.get('message')}\n"
elif hasattr(exception, "code"):
reason += f" - **Code: {exception.code}**\n"
elif hasattr(exception, "args") and exception.args:
reason += f" - **Details: {exception.args[0]}**\n"
reason += f"**{exception.args[0]}**\n"
elif isinstance(exception, ValidationError):
reason += f" - **Details:**\n\n```python\n{exception!s}\n```\n"
reason += f"```python\n{exception!s}\n```\n"
else:
reason += " - **An unknown error occurred.**\n"
reason += f"**{exception.__class__.__name__}**\n"
# Get the sender ID
if trace_name:
match = re.search(r"\((.*?)\)", trace_name)

View file

@ -835,6 +835,7 @@
},
"node_modules/@clack/prompts/node_modules/is-unicode-supported": {
"version": "1.3.0",
"extraneous": true,
"inBundle": true,
"license": "MIT",
"engines": {

View file

@ -243,45 +243,54 @@ export default function ChatMessage({
className="flex w-full gap-4 rounded-md p-2"
>
<LogoIcon />
<div className="w-full rounded-xl border border-error-red-border bg-error-red p-4 text-[14px] text-foreground">
<div className="mb-2 flex items-center gap-2">
<ForwardedIconComponent
className="h-[18px] w-[18px] text-destructive"
name="OctagonAlert"
/>
<span className="">An error stopped your flow.</span>
</div>
{blocks.map((block, blockIndex) => (
<div key={blockIndex} className="mb-4">
<h3 className="pb-3 font-semibold">{block.title}:</h3>
{block.contents.map((content, contentIndex) => {
if (content.type === "error") {
return (
<div key={contentIndex}>
{blocks.map((block, blockIndex) => (
<div
key={blockIndex}
className="w-full rounded-xl border border-error-red-border bg-error-red p-4 text-[14px] text-foreground"
>
{block.contents.map((content, contentIndex) => {
if (content.type === "error") {
return (
<div className="" key={contentIndex}>
<div className="mb-2 flex items-center">
<ForwardedIconComponent
className="mr-2 h-[18px] w-[18px] text-destructive"
name="OctagonAlert"
/>
{content.component && (
<p className="pb-1">
Component:{" "}
<span
className={cn(
closeChat ? "cursor-pointer underline" : "",
)}
onClick={() => {
fitViewNode(
chat.properties?.source?.id ?? "",
);
closeChat?.();
}}
>
{content.component}
<>
<span>
An error occured in the{" "}
<span
className={cn(
closeChat
? "cursor-pointer hover:underline"
: "",
)}
onClick={() => {
fitViewNode(
chat.properties?.source?.id ?? "",
);
closeChat?.();
}}
>
<strong>{content.component}</strong>
</span>{" "}
Component, stopping your flow. See below for
more details.
</span>
</p>
</>
)}
</div>
<div>
<h3 className="pb-3 font-semibold">
Error details:
</h3>
{content.field && (
<p className="pb-1">Field: {content.field}</p>
)}
{content.reason && (
<span className="">
Reason:{" "}
<Markdown
linkTarget="_blank"
remarkPlugins={[remarkGfm]}
@ -356,7 +365,7 @@ export default function ChatMessage({
</span>
)}
{content.solution && (
<div>
<div className="mt-4">
<h3 className="pb-3 font-semibold">
Steps to fix:
</h3>
@ -368,13 +377,13 @@ export default function ChatMessage({
</div>
)}
</div>
);
}
return null;
})}
</div>
))}
</div>
</div>
);
}
return null;
})}
</div>
))}
</motion.div>
)}
</AnimatePresence>