fix ai e2e

Author: joeizang

apps/remix-ide-e2e/src/tests/ai_panel.test.ts

@@ -21,15 +21,15 @@ module.exports = {
     browser
       .addFile('Untitled.sol', sources[0]['Untitled.sol'])
   },
-
+  // Conversation starter button with data id 'explain-editor' doesn't exist anymore
   'Should explain the contract #group1': function (browser: NightwatchBrowser) {
     browser
-      .waitForElementVisible('*[data-id="explain-editor"]')
-      .click('*[data-id="explain-editor"]')
+      .waitForElementVisible('*[data-id="remix-ai-assistant-suggestion-Explain-what-a-modifier-is"]')
+      .click('*[data-id="remix-ai-assistant-suggestion-Explain-what-a-modifier-is"]')
       .waitForElementVisible('*[data-id="remix-ai-assistant"]')
       .waitForElementVisible({
         locateStrategy: 'xpath',
-        selector: '//div[contains(@class,"chat-bubble") and contains(.,"Explain the current code")]'
+        selector: '//div[contains(@class,"chat-bubble") and contains(.,"Explain what a modifier is")]'
       })
       .waitForElementPresent({
         locateStrategy: 'xpath',
@@ -80,7 +80,6 @@ module.exports = {
         locateStrategy: 'xpath',
         timeout: 120000
       })
-      .waitForElementVisible('*[data-id="remix-ai-assistant"]')
       .waitForElementPresent('*[data-id="remix-ai-assistant-ready"]')
       .assistantAddContext('currentFile')
       .waitForElementVisible({
@@ -171,7 +170,6 @@ module.exports = {
         locateStrategy: 'xpath',
         timeout: 120000
       })
-      .waitForElementVisible('*[data-id="remix-ai-assistant"]')
       .waitForElementVisible('*[data-id="composer-ai-workspace-generate"]')
       .click('*[data-id="composer-ai-workspace-generate"]')
       .waitForElementVisible('*[data-id="generate-workspaceModalDialogModalBody-react"]')
@@ -229,8 +227,6 @@ module.exports = {
         locateStrategy: 'xpath',
         selector: "//*[@data-id='remix-ai-streaming' and @data-streaming='false']"
       })
-
-
   },
   'Generate new workspaces code with all AI assistant providers #group1': function (browser: NightwatchBrowser) {
     browser
@@ -250,8 +246,6 @@ module.exports = {
         locateStrategy: 'xpath',
         selector: "//*[@data-id='remix-ai-streaming' and @data-streaming='false']"
       })
-
-
       .assistantClearChat()
 
       .clickLaunchIcon('remixaiassistant')
@@ -269,7 +263,6 @@ module.exports = {
   },
   "Should close the AI assistant #group1": function (browser: NightwatchBrowser) {
     browser
-      .waitForElementVisible('*[data-id="remix-ai-assistant"]')
       .click('*[data-id="movePluginToLeft"]')
       .clickLaunchIcon('filePanel')
       .waitForElementNotVisible('*[data-id="remix-ai-assistant"]', 5000)

libs/remix-ui/remix-ai-assistant/src/components/chat.tsx

@@ -42,6 +42,7 @@ export const ChatHistoryComponent: React.FC<ChatHistoryComponentProps> = ({
           {DEFAULT_SUGGESTIONS.map(s => (
             <button
               key={s}
+              data-id={`remix-ai-assistant-suggestion-${s.replace(/\s+/g, '-')}`}
               className="btn btn-secondary mb-2 w-100 text-left"
               onClick={() => sendPrompt(s)}
             >
@@ -66,7 +67,7 @@ export const ChatHistoryComponent: React.FC<ChatHistoryComponentProps> = ({
               )}
 
               {/* Bubble */}
-              <div data-region="chat-bubble-section" className="flex-grow-1 w-25 mr-1">
+              <div data-id="ai-response-chat-bubble-section" className="flex-grow-1 w-25 mr-1">
                 <div className={`chat-bubble p-2 rounded ${bubbleClass}`}>
                   {msg.role === 'user' && (
                     <small className="text-uppercase fw-bold text-secondary d-block mb-1">