From 55496cd9de76c14fc6a76c6dca460dae0328acb2 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Mon, 17 Jun 2024 10:32:40 -0300
Subject: [PATCH] add empty text on empty value chat

---
 src/frontend/src/constants/constants.ts                      | 2 ++
 .../modals/IOModal/components/chatView/chatMessage/index.tsx | 5 ++++-
 .../src/modals/IOModal/components/chatView/index.tsx         | 5 ++---
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index a2c23f3f4..1c1ad8d82 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -858,3 +858,5 @@ export const ERROR_UPDATING_COMPONENT =
   "An unexpected error occurred while updating the Component. Please try again.";
 export const TITLE_ERROR_UPDATING_COMPONENT =
   "Error while updating the Component";
+
+  export const EMPTY_INPUT_SEND_MESSAGE = "No input message provided.";
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
index 020eff65d..5485cc69f 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@@ -14,6 +14,7 @@ import useFlowStore from "../../../../../stores/flowStore";
 import { chatMessagePropsType } from "../../../../../types/components";
 import { classNames, cn } from "../../../../../utils/utils";
 import FileCardWrapper from "./components/fileCardWrapper";
+import { EMPTY_INPUT_SEND_MESSAGE } from "../../../../../constants/constants";
 
 export default function ChatMessage({
   chat,
@@ -310,7 +311,9 @@ export default function ChatMessage({
             ) : (
               <div className="flex flex-col">
                 <span
-                  className="prose text-primary word-break-break-word dark:prose-invert"
+        className={`prose word-break-break-word dark:prose-invert ${
+          chatMessage === EMPTY_INPUT_SEND_MESSAGE ? "text-gray-400" : "text-primary"
+        }`}
                   data-testid={
                     "chat-message-" + chat.sender_name + "-" + chatMessage
                   }
diff --git a/src/frontend/src/modals/IOModal/components/chatView/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
index 8f2227c5a..287bb73ff 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
@@ -4,6 +4,7 @@ import { Button } from "../../../../components/ui/button";
 import {
   CHAT_FIRST_INITIAL_TEXT,
   CHAT_SECOND_INITIAL_TEXT,
+  EMPTY_INPUT_SEND_MESSAGE,
 } from "../../../../constants/constants";
 import { deleteFlowPool } from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
@@ -79,9 +80,7 @@ export default function ChatView({
           return {
             isSend: !is_ai,
             message:
-              message === "" || !message
-                ? "No input message provided."
-                : message,
+              message === "" || !message ? EMPTY_INPUT_SEND_MESSAGE : message,
             sender_name,
             componentId: output.id,
             stream_url: stream_url,