🔧 fix(constants.tsx): import missing lucide-react icons to fix compilation errors

🔧 fix(chatMessage/index.tsx): import missing lucide-react icons to fix compilation errors
🔧 fix(formModal/index.tsx): import missing THOUGHTS_ICON constant to fix compilation errors

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.";
 

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 && (

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>