New chat icon (#1766)

* New chat icon

* An empty commit to trigger Konflux build

Author: TamiTakamiya

aap_chatbot/package-lock.json

@@ -18,8 +18,8 @@
   ],
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
-    "@patternfly/chatbot": "^6.3.0-prerelease.25",
-    "@patternfly/react-table": "^6.1.0",
+    "@patternfly/chatbot": "^6.4.0-prerelease.22",
+    "@patternfly/react-table": "^6.3.1",
     "@types/jest": "^27.5.2",
     "@types/node": "^22.13.1",
     "@types/react": "^18.3.7",

aap_chatbot/package.json

@@ -10,6 +10,7 @@ import MessageBox from "@patternfly/chatbot/dist/dynamic/MessageBox";
 import Message from "@patternfly/chatbot/dist/dynamic/Message";
 import ChatbotHeader, {
   ChatbotHeaderActions,
+  ChatbotHeaderNewChatButton,
 } from "@patternfly/chatbot/dist/dynamic/ChatbotHeader";
 
 import "./AnsibleChatbot.scss";
@@ -233,6 +234,10 @@ export const AnsibleChatbot: React.FunctionComponent<ChatbotContext> = (
                       />
                     )}
                   </ChatbotHeaderActions>
+                  <ChatbotHeaderNewChatButton
+                    data-testid="header-new-chat-button"
+                    onClick={() => setCurrentConversation(undefined, [])}
+                  />
                 </ChatbotHeaderMain>
               </ChatbotHeader>
               {alertMessage && (

aap_chatbot/src/AnsibleChatbot/AnsibleChatbot.tsx

@@ -398,7 +398,7 @@ test("Basic chatbot interaction", async () => {
   assert(copiedString.includes("Create variables"));
   assert(copiedString.includes("https://"));
 
-  await page.getByLabelText("Toggle menu").click();
+  await page.getByLabelText("Chat history menu").click();
   const newChatButton = page
     .getByText("New chat")
     .element() as HTMLButtonElement;
@@ -426,9 +426,33 @@ test("Basic chatbot interaction", async () => {
     .toBeVisible();
   await expect.element(view.getByText("Create variables")).toBeVisible();
 
-  await page.getByLabelText("Toggle menu").click();
+  const newChatIcon = page.getByTestId("header-new-chat-button");
+  await newChatIcon.click();
 
-  const filterHistory = page.getByLabelText("Filter menu items");
+  await expect
+    .element(
+      page.getByText(
+        "In Ansible, the precedence of variables is determined by the order...",
+      ),
+    )
+    .not.toBeInTheDocument();
+  await expect
+    .element(view.getByText("Create variables"))
+    .not.toBeInTheDocument();
+
+  await sendMessage("Tell me about Ansible.");
+  await expect
+    .element(
+      view.getByText(
+        "In Ansible, the precedence of variables is determined by the order...",
+      ),
+    )
+    .toBeVisible();
+  await expect.element(view.getByText("Create variables")).toBeVisible();
+
+  await page.getByLabelText("Chat history menu").click();
+
+  const filterHistory = page.getByLabelText("Search previous conversations");
   await expect.element(filterHistory).toBeVisible();
 
   await filterHistory.fill("Some non-existent string");

aap_chatbot/src/App.test.tsx

@@ -48,6 +48,7 @@ The text version of the report is shown on the console,
 while the HTML version and the `lcov.info` file are saved
 in the `coverage` sub-directory.
 
+
 ## Test Chatbot in Local environment
 
 **Chatbot is enabled when all of