diff --git a/libs/chatbot/lib/components/ChatBot/ChatBot.tsx b/libs/chatbot/lib/components/ChatBot/ChatBot.tsx index 4fa798d928..d381352ace 100644 --- a/libs/chatbot/lib/components/ChatBot/ChatBot.tsx +++ b/libs/chatbot/lib/components/ChatBot/ChatBot.tsx @@ -24,6 +24,11 @@ const ChatBot = ({ onApiCall, username }: ChatBotProps) => { messages={messages} conversationId={conversationId} setConversationId={setConversationId} + onClose={() => { + setChatbotVisible(false); + setMessages([]); + setConversationId(undefined); + }} onApiCall={onApiCall} username={username} /> diff --git a/libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx b/libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx index 4a07daed8e..38e2b474b5 100644 --- a/libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx +++ b/libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx @@ -7,13 +7,23 @@ import { ChatbotDisplayMode, ChatbotFooter, ChatbotFootnote, + ChatbotHeader, + ChatbotHeaderTitle, ChatbotWelcomePrompt, Message, MessageBar, MessageBox, } from '@patternfly-6/chatbot'; -import { Alert, AlertActionCloseButton, Button } from '@patternfly-6/react-core'; +import { + Alert, + AlertActionCloseButton, + Button, + Flex, + FlexItem, + Tooltip, +} from '@patternfly-6/react-core'; import { ExternalLinkAltIcon } from '@patternfly-6/react-icons/dist/js/icons/external-link-alt-icon'; +import { PlusIcon, TimesIcon } from '@patternfly-6/react-icons'; import BotMessage, { FeedbackRequest } from './BotMessage'; import AIAvatar from '../../assets/rh-logo.svg'; @@ -43,11 +53,12 @@ type MsgProps = React.ComponentProps; export type ChatBotWindowProps = { conversationId: string | undefined; - setConversationId: (id: string) => void; + setConversationId: (id: string | undefined) => void; setMessages: React.Dispatch>; messages: MsgProps[]; onApiCall: typeof fetch; username: string; + onClose: () => void; }; // Helper function to get the user question for a bot message @@ -75,6 +86,7 @@ const ChatBotWindow = ({ messages, setMessages, onApiCall, + onClose, username, }: ChatBotWindowProps) => { const [error, setError] = React.useState(); @@ -85,6 +97,10 @@ const ChatBotWindow = ({ localStorage.getItem(CHAT_ALERT_LOCAL_STORAGE_KEY) !== 'true', ); const scrollToBottomRef = React.useRef(null); + const handleNewChat = () => { + setConversationId(undefined); + setMessages([]); + }; const scrollToBottom = React.useCallback(() => { scrollToBottomRef.current?.scrollIntoView({ behavior: 'smooth' }); @@ -230,6 +246,37 @@ const ChatBotWindow = ({ return ( + + + + + +