MGMT-21223 change buttons behaviour

libs/chatbot/lib/components/ChatBot/ChatBot.tsx

@@ -26,8 +26,6 @@ const ChatBot = ({ onApiCall, username }: ChatBotProps) => {
           setConversationId={setConversationId}
           onClose={() => {
             setChatbotVisible(false);
-            setMessages([]);
-            setConversationId(undefined);
           }}
           onApiCall={onApiCall}
           username={username}

libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx

@@ -26,6 +26,7 @@ import { ExternalLinkAltIcon } from '@patternfly-6/react-icons/dist/js/icons/ext
 import { PlusIcon, TimesIcon } from '@patternfly-6/react-icons';
 
 import BotMessage, { FeedbackRequest } from './BotMessage';
+import ConfirmNewChatModal from './ConfirmNewChatModal';
 import AIAvatar from '../../assets/rh-logo.svg';
 import UserAvatar from '../../assets/avatarimg.svg';
 
@@ -96,10 +97,22 @@ const ChatBotWindow = ({
   const [isAlertVisible, setIsAlertVisible] = React.useState(
     localStorage.getItem(CHAT_ALERT_LOCAL_STORAGE_KEY) !== 'true',
   );
+  const [isConfirmModalOpen, setIsConfirmModalOpen] = React.useState(false);
   const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
-  const handleNewChat = () => {
+
+  const startNewChat = () => {
     setConversationId(undefined);
     setMessages([]);
+    setIsConfirmModalOpen(false);
+  };
+
+  const handleNewChat = () => {
+    // Only show confirmation if there are existing messages
+    if (messages.length > 0) {
+      setIsConfirmModalOpen(true);
+    } else {
+      startNewChat();
+    }
   };
 
   const scrollToBottom = React.useCallback(() => {
@@ -362,6 +375,12 @@ const ChatBotWindow = ({
           }}
         />
       </ChatbotFooter>
+      {isConfirmModalOpen && (
+        <ConfirmNewChatModal
+          onConfirm={startNewChat}
+          onCancel={() => setIsConfirmModalOpen(false)}
+        />
+      )}
     </Chatbot>
   );
 };

libs/chatbot/lib/components/ChatBot/ConfirmNewChatModal.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly-6/react-core';
+
+const ConfirmNewChatModal = ({
+  onConfirm,
+  onCancel,
+}: {
+  onConfirm: VoidFunction;
+  onCancel: VoidFunction;
+}) => {
+  return (
+    <Modal variant={ModalVariant.small} isOpen onClose={onCancel}>
+      <ModalHeader title="Start a new chat?" />
+      <ModalBody>
+        Starting a new chat will permanently erase your current conversation. If you want to save
+        any information, please copy it before proceeding.
+      </ModalBody>
+      <ModalFooter>
+        <Button variant="link" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button variant="danger" onClick={onConfirm}>
+          Erase and start a new chat
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default ConfirmNewChatModal;