Add editor UI with compile/run actions, and AI assistant controls

apps/remix-ide-e2e/src/tests/bottom-bar.test.ts

@@ -0,0 +1,33 @@
+'use strict'
+
+import { NightwatchBrowser } from 'nightwatch'
+import init from '../helpers/init'
+
+module.exports = {
+  '@disabled': true,
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done)
+  },
+  '@sources': function () {
+    return []
+  },
+
+  'Should toggle AI Copilot status in the bottom bar (Simplified)': function (browser: NightwatchBrowser) {
+    const statusTextSelector = '[data-id="remixui_status_bottom_bar"] span.small';
+    const toggleInputSelector = '[data-id="copilot_toggle"]';
+
+    browser
+      .waitForElementVisible('[data-id="remixui_status_bottom_bar"]', 5000)
+      .waitForElementContainsText(statusTextSelector, 'RemixAI Copilot', 1000)
+      .perform((done) => {
+        browser.getText(statusTextSelector, (result) => {
+          const currentStatusText = result.value as string
+          const isCurrentlyDisabled = currentStatusText.includes('(disabled)')
+          const expectedStatusAfterToggle = isCurrentlyDisabled ? '(enabled)' : '(disabled)'
+          browser.click(toggleInputSelector)
+            .waitForElementContainsText(statusTextSelector, expectedStatusAfterToggle, 10000)
+            done()
+        });
+      });
+  }
+}

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

@@ -37,7 +37,7 @@ module.exports = {
       .waitForElementVisible('[data-path="Semaphore - 1/circuits/simple.circom"]')
       .waitForElementPresent('[data-id="verticalIconsKindcircuit-compiler"]')
       .waitForElementVisible('[data-id="verticalIconsKindcircuit-compiler"]')
-      .click('[data-id="play-editor"]')
+      .click('[data-id="compile-action"]')
       .waitForElementContainsText('*[data-id="terminalJournal"]', 'Everything went okay')
       .waitForElementPresent('[data-id="treeViewLitreeViewItemcircuits/.bin/simple_js"]')
       .openFile('circuits/.bin/simple_js')
@@ -204,7 +204,7 @@ module.exports = {
       .waitForElementVisible('[data-path="Hash Checker - 1/scripts/groth16/groth16_trusted_setup.ts"]')
       .waitForElementPresent('[data-id="verticalIconsKindcircuit-compiler"]')
       .waitForElementVisible('[data-id="verticalIconsKindcircuit-compiler"]')
-      .click('[data-id="play-editor"]')
+      .click('[data-id="compile-action"]')
       .pause(10000)
       .journalLastChildIncludes('newZkey')
       .pause(25000)
@@ -218,7 +218,7 @@ module.exports = {
       .waitForElementVisible('[data-path="Hash Checker - 1/scripts/groth16/groth16_zkproof.ts"]')
       .waitForElementPresent('[data-id="verticalIconsKindcircuit-compiler"]')
       .waitForElementVisible('[data-id="verticalIconsKindcircuit-compiler"]')
-      .click('[data-id="play-editor"]')
+      .click('[data-id="compile-action"]')
       .pause(2000)
       .journalLastChildIncludes('Compiling circuits/calculate_hash.circom')
       .pause(5000)
@@ -238,7 +238,7 @@ module.exports = {
       .waitForElementVisible('[data-path="Hash Checker - 1/scripts/plonk/plonk_trusted_setup.ts"]')
       .waitForElementPresent('[data-id="verticalIconsKindcircuit-compiler"]')
       .waitForElementVisible('[data-id="verticalIconsKindcircuit-compiler"]')
-      .click('[data-id="play-editor"]')
+      .click('[data-id="compile-action"]')
       .pause(7000)
       .journalLastChildIncludes('plonk setup')
       .pause(10000)
@@ -252,7 +252,7 @@ module.exports = {
       .waitForElementVisible('[data-path="Hash Checker - 1/scripts/plonk/plonk_zkproof.ts"]')
       .waitForElementPresent('[data-id="verticalIconsKindcircuit-compiler"]')
       .waitForElementVisible('[data-id="verticalIconsKindcircuit-compiler"]')
-      .click('[data-id="play-editor"]')
+      .click('[data-id="compile-action"]')
       .pause(2000)
       .journalLastChildIncludes('Compiling circuits/calculate_hash.circom')
       .pause(5000)

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

@@ -0,0 +1,61 @@
+'use strict'
+
+import { NightwatchBrowser } from 'nightwatch'
+import init from '../helpers/init'
+
+module.exports = {
+  '@disabled': true,
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done)
+  },
+  '@sources': function () {
+    return []
+  },
+
+  'Compile using the widget #group1': function (browser: NightwatchBrowser) {
+    browser
+      .openFile('contracts/3_Ballot.sol')
+      .click('[data-id="compile-action"]')
+      .waitForElementVisible('[data-id="compile_group"] i.fa-check', 10000)
+      .verifyContracts(['Ballot'])
+  },
+
+  'Run script using the widget #group2': function (browser: NightwatchBrowser) {
+    browser
+      .openFile('scripts/deploy_with_web3.ts')
+      .click('[data-id="compile-action"]')
+      .waitForElementVisible('[data-id="compile_group"] i.fa-check', 10000)
+  },
+
+  'Should activate Solidity Static Analysis and show "Solidity Analyzers" title from compile dropdown #group3': function (browser: NightwatchBrowser) {
+    browser
+      .openFile('contracts/3_Ballot.sol')
+      .click('[data-id="compile-dropdown-trigger"]')
+      .waitForElementVisible('[data-id="compile-dropdown-panel"]', 5000)
+      .click('[data-id="compile-run-analysis-menu-item"]')
+      .waitForElementVisible('[data-id="compile-run-analysis-menu-item-panel"]', 5000)
+      .click('[data-id="run-remix-analysis-submenu-item"]')
+      .waitForElementVisible('#icon-panel div[plugin="solidityStaticAnalysis"]', 10000)
+      .waitForElementVisible('[data-id="sidePanelSwapitTitle"]', 5000)
+      .assert.textContains('[data-id="sidePanelSwapitTitle"]', 'SOLIDITY ANALYZERS', 'Solidity Analyzers title should be visible.')
+      .waitForElementVisible('#side-panel', 5000)
+      .verifyContracts(['Ballot'])
+  },
+
+  'Should run Solidity Scan and display results in terminal #group4': function (browser: NightwatchBrowser) {
+    browser
+      .openFile('contracts/3_Ballot.sol')
+      .click('[data-id="compile-dropdown-trigger"]')
+      .waitForElementVisible('[data-id="compile-dropdown-panel"]', 5000) 
+      .click('[data-id="compile-run-analysis-menu-item"]')
+      .waitForElementVisible('[data-id="compile-run-analysis-menu-item-panel"]', 5000)
+      .click('[data-id="run-solidity-scan-submenu-item"]')
+      .waitForElementVisible('[data-id="SolidityScanPermissionHandlerModalDialogModalTitle-react"]', 10000)
+      .waitForElementVisible('[data-id="SolidityScanPermissionHandler-modal-footer-ok-react"]', 5000)
+      .click('[data-id="SolidityScanPermissionHandler-modal-footer-ok-react"]')
+      .waitForElementContainsText('*[data-id="terminalJournal"]', 'Scan Summary:', 30000)
+      .verifyContracts(['Ballot'])
+  }
+
+
+}

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

@@ -53,7 +53,7 @@ const tests = {
         .frameParent()
         .clickLaunchIcon('filePanel')
         .addFile('receiptStatusScript.ts', { content: receiptStatusScript })
-        .click('*[data-id="play-editor"]') // run the script
+        .click('*[data-id="compile-action"]') // run the script
         .waitForElementContainsText('*[data-id="terminalJournal"]', 'Already Verified', 60000)
       }
 }

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

@@ -16,7 +16,7 @@ module.exports = {
             .openFile('contracts/3_Ballot.sol')
             .addFile('scripts/decorators.ts', { content: testScriptSet })
             .pause(2000)
-            .click('[data-id="play-editor"]')
+            .click('[data-id="compile-action"]')
             .pause(4000)
             .useXpath()
             .waitForElementContainsText('//*[@id="fileExplorerView"]//*[@data-id="file-decoration-error-contracts/2_Owner.sol"]', '2')
@@ -37,15 +37,15 @@ module.exports = {
             .useCss()
             .addFile('scripts/clearballot.ts', { content: testScriptClearBallot })
             .pause(2000)
-            .click('[data-id="play-editor"]')
+            .click('[data-id="compile-action"]')
             .pause(4000)
             .waitForElementNotPresent('[data-id="file-decoration-custom-contracts/3_Ballot.sol"]', 10000)
     },
     'clear all decorators': function (browser: NightwatchBrowser) {
         browser
             .addFile('scripts/clearall.ts', { content: testScriptClear })
             .pause(2000)
-            .click('[data-id="play-editor"]')
+            .click('[data-id="compile-action"]')
             .pause(4000)
             .waitForElementNotPresent('[data-id="file-decoration-error-contracts/2_Owner.sol"]', 10000)
             .waitForElementNotPresent('[data-id="file-decoration-warning-contracts/1_Storage.sol"]', 10000)

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

@@ -25,7 +25,7 @@ module.exports = {
   'Should compile a simple circuit using editor play button #group1': '' + function (browser: NightwatchBrowser) {
     browser
       .openFile('src/main.nr')
-      .click('[data-id="play-editor"]')
+      .click('[data-id="compile-action"]')
       .clickLaunchIcon('noir-compiler')
       .waitForElementPresent('[data-id="view-noir-compilation-result"]')
       .click('[data-id="view-noir-compilation-result"]')
@@ -37,7 +37,7 @@ module.exports = {
     browser
       .clickLaunchIcon('filePanel')
       .openFile('tests/multiplier.test.ts')
-      .click('[data-id="play-editor"]')
+      .click('[data-id="compile-action"]')
       .waitForElementContainsText('*[data-id="terminalJournal"]', ' CHECK PROOF ', 60000)      
   }
 }

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

@@ -81,8 +81,8 @@ module.exports = {
       .addFile('testScript.ts', { content: testScript })
       .clearConsole()
       .pause(10000)
-      .waitForElementVisible('*[data-id="play-editor"]')
-      .click('*[data-id="play-editor"]')
+      .waitForElementVisible('*[data-id="compile-action"]')
+      .click('*[data-id="compile-action"]')
       .waitForElementVisible({
         locateStrategy: 'xpath',
         selector: "//span[@class='text-danger' and contains(., 'exceed maximum block range')]"

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

@@ -168,7 +168,7 @@ module.exports = {
       .click('*[data-id="treeViewLitreeViewItemscripts"]')
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]')
       .openFile('scripts/deploy_with_web3.ts')
-      .click('[data-id="play-editor"]')
+      .click('[data-id="compile-action"]')
       .waitForElementContainsText('*[data-id="terminalJournal"]', 'address:')
       .openFile('.states/vm-london/state.json')
       .waitForElementPresent('[data-id="treeViewDivDraggableItem.states/vm-london/state.json"]')

apps/remix-ide/src/app/components/bottom-bar.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react'
+import { Plugin } from '@remixproject/engine'
+import './styles/bottom-bar.css'
+
+interface BottomBarProps {
+  plugin: Plugin
+}
+
+export const BottomBar = ({ plugin }: BottomBarProps) => {
+  const [explaining, setExplaining] = useState(false)
+  const [aiSwitch, setAiSwitch] = useState(true)
+  const [currentExt, setCurrentExt] = useState('')
+
+  useEffect(() => {
+    const getAI = async () => {
+      try {
+        const initState = await plugin.call('settings', 'getCopilotSetting')
+        setAiSwitch(initState ?? true)
+      } catch (err) {
+        console.error('Failed to get copilot setting', err)
+      }
+    }
+
+    const getCurrentExt = async () => {
+      try {
+        const path = await plugin.call('fileManager', 'getCurrentFile')
+        const ext = path?.split('.').pop()?.toLowerCase() || ''
+        setCurrentExt(ext)
+      } catch (err) {
+        console.error('Failed to get current file', err)
+        setCurrentExt('')
+      }
+    }
+
+    getAI()
+    getCurrentExt()
+
+    plugin.on('fileManager', 'currentFileChanged', getCurrentExt)
+
+    return () => {
+      plugin.off('fileManager', 'currentFileChanged')
+    }
+
+  }, [plugin])
+
+  const handleExplain = async () => {
+    setExplaining(true)
+    try {
+      await plugin.call('menuicons', 'select', 'remixaiassistant')
+      await new Promise(resolve => setTimeout(resolve, 500))
+      const path = await plugin.call('fileManager', 'getCurrentFile')
+      const content = await plugin.call('fileManager', 'readFile', path)
+      await plugin.call('remixAI', 'chatPipe', 'code_explaining', content)
+
+    } catch (err) {
+      console.error("Explain failed:", err)
+    }
+    setExplaining(false)
+  }
+
+  const toggleAI = async () => {
+    try {
+      await plugin.call('settings', 'updateCopilotChoice', !aiSwitch)
+      setAiSwitch(!aiSwitch)
+    } catch (err) {
+      console.error('Failed to toggle AI copilot', err)
+    }
+  }
+
+  const getExplainLabel = () => {
+    if (['sol', 'vy', 'circom'].includes(currentExt)) return 'Explain contract'
+    if (['js', 'ts'].includes(currentExt)) return 'Explain script'
+    return ''
+  }
+
+  return (
+    <div className="bottom-bar border-top border-bottom">
+      {getExplainLabel() && (
+        <button
+          className="btn explain-btn"
+          onClick={handleExplain}
+          disabled={explaining}
+        >
+          <img src="assets/img/remixAI_small.svg" alt="Remix AI" className="explain-icon" />
+          <span>{getExplainLabel()}</span>
+        </button>
+      )}
+      <div className="copilot-toggle">
+        <span className={aiSwitch ? "on" : ""}>AI copilot</span>
+        <label className="switch" data-id="copilot_toggle" >
+          <input type="checkbox" checked={aiSwitch} onChange={toggleAI}/>
+          <span className="slider"></span>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+export default BottomBar