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 56fa3be059..b68480b78a 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 AIAvatar from '../../assets/rh-logo.svg'; import UserAvatar from '../../assets/avatarimg.svg'; @@ -39,11 +49,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; }; const ChatBotWindow = ({ @@ -52,6 +63,7 @@ const ChatBotWindow = ({ messages, setMessages, onApiCall, + onClose, username, }: ChatBotWindowProps) => { const [error, setError] = React.useState(); @@ -62,6 +74,10 @@ const ChatBotWindow = ({ localStorage.getItem(CHAT_ALERT_LOCAL_STORAGE_KEY) !== 'true', ); const scrollToBottomRef = React.useRef(null); + const handleNewChat = () => { + setConversationId(undefined); + setMessages([]); + }; const handleSend = async (message: string | number) => { setError(undefined); @@ -172,6 +188,37 @@ const ChatBotWindow = ({ return ( + + + + + +