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:
parent
ab5103b9d1
commit
311bf00b8e
3 changed files with 54 additions and 45 deletions
|
|
@ -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)
|
||||
|
|
|
|||
1
src/frontend/package-lock.json
generated
1
src/frontend/package-lock.json
generated
|
|
@ -835,6 +835,7 @@
|
|||
},
|
||||
"node_modules/@clack/prompts/node_modules/is-unicode-supported": {
|
||||
"version": "1.3.0",
|
||||
"extraneous": true,
|
||||
"inBundle": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue