jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

1
src/frontend/package-lock.json generated
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": {

87
src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
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>