From 257e73059f68ff5dca922cba69a0ddda6ad33e42 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 7 Jul 2023 14:57:21 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix(constants.tsx):=20import=20m?=
 =?UTF-8?q?issing=20lucide-react=20icons=20to=20fix=20compilation=20errors?=
 =?UTF-8?q?=20=F0=9F=94=A7=20fix(chatMessage/index.tsx):=20import=20missin?=
 =?UTF-8?q?g=20lucide-react=20icons=20to=20fix=20compilation=20errors=20?=
 =?UTF-8?q?=F0=9F=94=A7=20fix(formModal/index.tsx):=20import=20missing=20T?=
 =?UTF-8?q?HOUGHTS=5FICON=20constant=20to=20fix=20compilation=20errors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/constants.tsx                |  4 ++++
 .../modals/formModal/chatMessage/index.tsx    | 19 ++++++++++++-------
 src/frontend/src/modals/formModal/index.tsx   |  4 ++--
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 601b2ba23..c823abc1d 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -1,8 +1,10 @@
 // src/constants.tsx
 
+import { MessageSquareDashed } from "lucide-react";
 import { FlowType } from "./types/flow";
 import { TabsState } from "./types/tabs";
 import { buildInputs, buildTweaks } from "./utils";
+import { MessageSquare } from "lucide-react";
 
 /**
  * The base text for subtitle of Export Dialog (Toolbar)
@@ -57,6 +59,8 @@ export const CHAT_CANNOT_OPEN_DESCRIPTION = "This is not a chat flow.";
 
 export const FLOW_NOT_BUILT_TITLE = "Flow not built";
 
+export const THOUGHTS_ICON = MessageSquare;
+
 export const FLOW_NOT_BUILT_DESCRIPTION =
   "Please build the flow before chatting.";
 
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index dfd04a585..b6d62b900 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -10,7 +10,13 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import { CodeBlock } from "./codeBlock";
 import Convert from "ansi-to-html";
-import { User2, MessageSquare, ChevronDown } from "lucide-react";
+import {
+  User2,
+  MessageSquare,
+  ChevronDown,
+  MessageCircle,
+  MessageSquareDashed,
+} from "lucide-react";
 import {
   Accordion,
   AccordionContent,
@@ -18,6 +24,7 @@ import {
   AccordionTrigger,
 } from "../../../components/ui/accordion";
 import { Badge } from "../../../components/ui/badge";
+import { THOUGHTS_ICON } from "../../../constants";
 
 export default function ChatMessage({
   chat,
@@ -45,26 +52,24 @@ export default function ChatMessage({
             <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#afe6ef] p-5 text-2xl ">
               🤖
             </div>
-            <span className="text-xs">Chatbot</span>
           </div>
         ) : (
           <div className="flex flex-col items-center gap-1">
             <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#aface9] p-5 text-2xl ">
               👨‍💻
             </div>
-            <span className="text-xs">User</span>
           </div>
         )}
       </div>
       {!chat.isSend ? (
-        <div className="flex w-full flex-1 items-center text-start">
+        <div className="flex w-full flex-1 text-start">
           <div className="relative inline-block w-full text-start text-sm font-normal text-muted-foreground">
-            {hidden && (
+            {hidden && chat.thought && chat.thought !== "" && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className="absolute -left-8 -top-5 cursor-pointer"
+                className="absolute -left-8 -top-3 cursor-pointer"
               >
-                <MessageSquare className="h-5 w-5 animate-bounce dark:text-white" />
+                <THOUGHTS_ICON className="h-4 w-4 animate-bounce dark:text-white" />
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index eee866bb0..a6633265b 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -18,7 +18,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants";
+import { CHAT_FORM_DIALOG_SUBTITLE, THOUGHTS_ICON } from "../../constants";
 import { TabsContext } from "../../contexts/tabsContext";
 import {
   Accordion,
@@ -535,7 +535,7 @@ export default function FormModal({
                         <span className="text-base text-gray-500">
                           Start a conversation and click the agent's thoughts{" "}
                           <span>
-                            <MessageSquare className="mx-1 inline h-5 w-5 animate-bounce " />
+                            <THOUGHTS_ICON className="mx-1 inline h-5 w-5 animate-bounce " />
                           </span>{" "}
                           to inspect the chaining process.
                         </span>