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

View file

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

View file

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