From 311bf00b8e1350a0db6f2c75ce531350f8ac454a Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Date: Thu, 7 Nov 2024 10:26:24 -0300
Subject: [PATCH] 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>
---
 src/backend/base/langflow/schema/message.py   | 11 ++-
 src/frontend/package-lock.json                |  1 +
 .../chatView/chatMessage/newChatMessage.tsx   | 87 ++++++++++---------
 3 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/src/backend/base/langflow/schema/message.py b/src/backend/base/langflow/schema/message.py
index 706a5cc8d..39beb04d9 100644
--- a/src/backend/base/langflow/schema/message.py
+++ b/src/backend/base/langflow/schema/message.py
@@ -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)
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 57d6c22a2..6bd431769 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -835,6 +835,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
index 605504a00..c29889c9e 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
@@ -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>