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

feat: improve user chat input to display spacements (#3687)

Browse source 
feat: Refactor chatMessage component for improved readability and performance

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
This commit is contained in:
Cristhian Zanforlin Lousa 2024-09-10 16:43:09 -03:00 • committed by GitHub
commit 6f8beb894f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 20 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
View file

@ -126,18 +126,16 @@ export default function ChatMessage({
} }
}, [lastMessage]); }, [lastMessage]);
const decodedMessage = decodeURIComponent(chatMessage ?? "");
const isEmpty = decodedMessage?.trim() === "";
return ( return (
<> <>
<div <div className={cn("form-modal-chat-position", chat.isSend ? "" : " ")}>
className={classNames(
"form-modal-chat-position",
chat.isSend ? "" : " ",
)}
>
<div <div
className={classNames( className={
"mr-3 mt-1 flex w-24 flex-col items-center gap-1 overflow-hidden px-3 pb-3", "mr-3 mt-1 flex w-24 flex-col items-center gap-1 overflow-hidden px-3 pb-3"
)} }
> >
<div className="flex flex-col items-center gap-1"> <div className="flex flex-col items-center gap-1">
<div <div
@ -197,7 +195,7 @@ export default function ChatMessage({
> >
{useMemo( {useMemo(
() => () =>
chatMessage === "" && lockChat ? ( isEmpty && lockChat ? (
<IconComponent <IconComponent
name="MoreHorizontal" name="MoreHorizontal"
className="h-8 w-8 animate-pulse" className="h-8 w-8 animate-pulse"
@ -208,7 +206,7 @@ export default function ChatMessage({
rehypePlugins={[rehypeMathjax]} rehypePlugins={[rehypeMathjax]}
className={cn( className={cn(
"markdown prose flex flex-col word-break-break-word dark:prose-invert", "markdown prose flex flex-col word-break-break-word dark:prose-invert",
chatMessage === "" isEmpty
? "text-chat-trigger-disabled" ? "text-chat-trigger-disabled"
: "text-primary", : "text-primary",
)} )}
@ -269,7 +267,7 @@ export default function ChatMessage({
}, },
}} }}
> >
{chatMessage === "" && !chat.stream_url {isEmpty && !chat.stream_url
? EMPTY_OUTPUT_SEND_MESSAGE ? EMPTY_OUTPUT_SEND_MESSAGE
: chatMessage} : chatMessage}
</Markdown> </Markdown>
@ -294,18 +292,13 @@ export default function ChatMessage({
Display Prompt Display Prompt
<IconComponent <IconComponent
name="ChevronDown" name="ChevronDown"
className={ className={`h-3 w-3 transition-all ${promptOpen ? "rotate-180" : ""}`}
"h-3 w-3 transition-all " +
(promptOpen ? "rotate-180" : "")
}
/> />
</button> </button>
<span <span
className={cn( className={cn(
"prose word-break-break-word dark:prose-invert", "prose word-break-break-word dark:prose-invert",
chatMessage !== "" !isEmpty ? "text-primary" : "text-chat-trigger-disabled",
? "text-primary"
: "text-chat-trigger-disabled",
)} )}
> >
{promptOpen {promptOpen
@ -337,25 +330,21 @@ export default function ChatMessage({
} }
return <p>{parts}</p>; return <p>{parts}</p>;
}) })
: chatMessage === "" : isEmpty
? EMPTY_INPUT_SEND_MESSAGE ? EMPTY_INPUT_SEND_MESSAGE
: chatMessage} : chatMessage}
</span> </span>
</> </>
) : ( ) : (
<div className="flex flex-col"> <div className="flex flex-col">
<span <div
className={`prose word-break-break-word dark:prose-invert ${ className={`whitespace-pre-wrap break-words ${
chatMessage === "" isEmpty ? "text-chat-trigger-disabled" : "text-primary"
? "text-chat-trigger-disabled"
: "text-primary"
}`} }`}
data-testid={ data-testid={`chat-message-${chat.sender_name}-${chatMessage}`}
"chat-message-" + chat.sender_name + "-" + chatMessage
}
> >
{chatMessage === "" ? EMPTY_INPUT_SEND_MESSAGE : chatMessage} {isEmpty ? EMPTY_INPUT_SEND_MESSAGE : decodedMessage}
</span> </div>
{chat.files && ( {chat.files && (
<div className="my-2 flex flex-col gap-5"> <div className="my-2 flex flex-col gap-5">
{chat.files.map((file, index) => { {chat.files.map((file, index) => {
@ -375,7 +364,7 @@ export default function ChatMessage({
</div> </div>
)} )}
</div> </div>
<div id={lastMessage ? "last-chat-message" : ""}></div> <div id={lastMessage ? "last-chat-message" : undefined} />
</> </>
); );
} }