Feat: Create the first version of the eraser tool

src/frontend/src/modals/IOModal/components/chatView/index.tsx

@@ -18,6 +18,12 @@ import { chatViewProps } from "../../../../types/components";
 import { classNames } from "../../../../utils/utils";
 import ChatInput from "./chatInput";
 import ChatMessage from "./chatMessage";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "../../../../components/ui/select";
 
 export default function ChatView({
   sendMessage,
@@ -118,10 +124,21 @@ export default function ChatView({
     if (lockChat) setLockChat(false);
   }
 
+  function handleSelectChange(event: string): void {
+    switch (event) {
+      case "builds":
+        clearChat();
+        break;
+      case "buildsNSession":
+        console.log("delete build and session");
+        break;
+    }
+  }
+
   function updateChat(
     chat: ChatMessageType,
     message: string,
-    stream_url?: string
+    stream_url?: string,
   ) {
     // if (message === "") return;
     chat.message = message;
@@ -149,18 +166,44 @@ export default function ChatView({
     <div className="eraser-column-arrangement">
       <div className="eraser-size">
         <div className="eraser-position">
-          <button disabled={lockChat} onClick={() => clearChat()}>
+          <Select
-            <IconComponent
+            onValueChange={handleSelectChange}
-              name="Eraser"
+            value=""
-              className={classNames(
+            disabled={lockChat}
-                "h-5 w-5",
+          >
-                lockChat
+            <SelectTrigger className="">
-                  ? "animate-pulse text-primary"
+              <button className="flex gap-1">
-                  : "text-primary hover:text-gray-600"
+                <IconComponent
-              )}
+                  name="Eraser"
-              aria-hidden="true"
+                  className={classNames(
-            />
+                    "h-5 w-5 transition-all duration-100",
-          </button>
+                    lockChat ? "animate-pulse text-primary" : "text-primary",
+                  )}
+                  aria-hidden="true"
+                />
+              </button>
+            </SelectTrigger>
+            <SelectContent className="right-[9.5em]">
+              <SelectItem value="builds" className="cursor-pointer">
+                <div className="flex">
+                  <IconComponent
+                    name={"Trash2"}
+                    className={`relative top-0.5 mr-2 h-4 w-4`}
+                  />
+                  <span className="">Clear Builds</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="buildsNSession" className="cursor-pointer">
+                <div className="flex">
+                  <IconComponent
+                    name={"Trash2"}
+                    className={`relative top-0.5 mr-2 h-4 w-4`}
+                  />
+                  <span className="">Clear Builds & Session</span>
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
         </div>
         <div ref={messagesRef} className="chat-message-div">
           {chatHistory?.length > 0 ? (

src/frontend/src/types/components/index.ts

@@ -752,3 +752,17 @@ export type toolbarSelectItemProps = {
   dataTestId: string;
   ping?: boolean;
 };
+
+export type clearChatPropsType = {
+  lockChat: boolean;
+  setLockChat: (lock: boolean) => void;
+  setChatHistory: (chatHistory: ChatMessageType) => void;
+  method: string;
+};
+
+export type handleSelectPropsType = {
+  event: string;
+  lockChat: boolean;
+  setLockChat: (lock: boolean) => void;
+  setChatHistory: (chatHistory: ChatMessageType) => void;
+};