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

feat: Refactor chatMessage component for improved readability and performance Co-authored-by: anovazzi1 <[email protected]>
langflow-ai · Sep 10, 2024 · 6f8beb8 · 6f8beb8
1 parent 96f0ea9
commit 6f8beb8
Showing 1 changed file with 20 additions and 31 deletions.
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@@ -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} />
     </>
   );
 }