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