chore(tests): add e2e tests for messaging suite (#387)

* feat(NewConversationMenu): add id to the new conversation menu button
refactor(EndpointItem): remove onSelect prop and setTokenDialogOpen state variable
test(messages.spec.js): add e2e test for messaging suite to check if textbox is focused after receiving message

* test(Input): add test id to input field for e2e testing
test(messages.spec.js): add endpoint variable and refactor test to check if textbox is focused after receiving message

* test(messages.spec.js): refactor test to use a variable for message content

Refactored the test to use a variable for message content instead of a hardcoded string.

e2e/specs/messages.spec.js

@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test';
+
+const endpoints = ['google', 'openAI', 'azureOpenAI', 'bingAI', 'chatGPTBrowser', 'gptPlugins'];
+
+test.describe('Messaging suite', () => {
+  let myBrowser;
+
+  test.beforeEach(async ({ browser }) => {
+    myBrowser = await browser.newContext({
+      storageState: 'e2e/auth.json'
+    });
+  });
+
+  test('textbox should be focused after receiving message', async () => {
+    test.setTimeout(120000);
+    const page = await myBrowser.newPage();
+    const message = 'hi';
+    const endpoint = endpoints[0];
+
+    await page.goto('http://localhost:3080/chat/new');
+    await page.locator('#new-conversation-menu').click();
+    await page.locator(`#${endpoint}`).click();
+    await page.locator('form').getByRole('textbox').click();
+    await page.locator('form').getByRole('textbox').fill(message);
+
+    const responsePromise = [
+      page.waitForResponse(async (response) => {
+        return response.url().includes(`/api/ask/${endpoint}`) && response.status() === 200;
+      }),
+      page.locator('form').getByRole('textbox').press('Enter')
+    ];
+
+    const [response] = await Promise.all(responsePromise);
+    const responseBody = await response.body();
+    const messageSuccess = responseBody.includes(`"final":true`);
+    expect(messageSuccess).toBe(true);
+
+    // Check if textbox is focused
+    await page.waitForTimeout(250);
+    const isTextboxFocused = await page.evaluate(() => {
+      return document.activeElement === document.querySelector('[data-testid="text-input"]');
+    });
+    expect(isTextboxFocused).toBeTruthy();
+  });
+});