added initial AI toggle button

apps/remix-ide/src/app/tabs/locales/en/remixUiTabs.json

@@ -2,8 +2,9 @@
   "remixUiTabs.tooltipText1": "Run script (CTRL + SHIFT + S)",
   "remixUiTabs.tooltipText2": "Compile CTRL + S",
   "remixUiTabs.tooltipText3": "Select .sol or .yul file to compile or a .ts or .js file and run it",
-  "remixUiTabs.tooltipText4": "Select .sol file",
+  "remixUiTabs.tooltipText4": "Select .sol file to explain with AI",
   "remixUiTabs.tooltipText5": "Explain the contract/s in current file",
+  "remixUiTabs.tooltipText6": "AI Copilot",
   "remixUiTabs.zoomOut": "Zoom out",
   "remixUiTabs.zoomIn": "Zoom in"
 }

apps/remix-ide/src/app/tabs/settings-tab.tsx

@@ -15,7 +15,7 @@ const _paq = (window._paq = window._paq || [])
 const profile = {
   name: 'settings',
   displayName: 'Settings',
-  methods: ['get'],
+  methods: ['get', 'updateCopilotChoice'],
   events: [],
   icon: 'assets/img/settings.webp',
   description: 'Remix-IDE settings',
@@ -36,6 +36,7 @@ module.exports = class SettingsTab extends ViewPlugin {
   }
   element: HTMLDivElement
   public useMatomoAnalytics: any
+  public useCopilot: any
   dispatch: React.Dispatch<any> = () => {}
   constructor(config, editor) {
     super(profile)
@@ -51,6 +52,7 @@ module.exports = class SettingsTab extends ViewPlugin {
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'settingsTab')
     this.useMatomoAnalytics = null
+    this.useCopilot = null
   }
 
   setDispatch(dispatch: React.Dispatch<any>) {
@@ -74,6 +76,7 @@ module.exports = class SettingsTab extends ViewPlugin {
         editor={state.editor}
         _deps={state._deps}
         useMatomoAnalytics={state.useMatomoAnalytics}
+        useCopilot={state.useCopilot}
         themeModule={state._deps.themeModule}
         localeModule={state._deps.localeModule}
       />
@@ -88,6 +91,14 @@ module.exports = class SettingsTab extends ViewPlugin {
     return this.config.get(key)
   }
 
+  updateCopilotChoice(isChecked) {
+    this.config.set('settings/copilot/suggest/activate', isChecked)
+    this.useCopilot = isChecked
+    this.dispatch({
+      ...this
+    })
+  }
+
   updateMatomoAnalyticsChoice(isChecked) {
     this.config.set('settings/matomo-analytics', isChecked)
     this.useMatomoAnalytics = isChecked

libs/remix-ui/settings/src/lib/remix-ui-settings.tsx

@@ -36,6 +36,7 @@ export interface RemixUiSettingsProps {
   editor: any
   _deps: any
   useMatomoAnalytics: boolean
+  useCopilot: boolean
   themeModule: ThemeModule
   localeModule: LocaleModule
 }

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -62,6 +62,7 @@ export const TabsUI = (props: TabsUIProps) => {
   const currentIndexRef = useRef(-1)
   const tabsRef = useRef({})
   const tabsElement = useRef(null)
+  const [ai_switch, setAI_switch] = useState<boolean>(true)
 
   const tabs = useRef(props.tabs)
   tabs.current = props.tabs // we do this to pass the tabs list to the onReady callbacks
@@ -206,7 +207,7 @@ export const TabsUI = (props: TabsUIProps) => {
           <button
             data-id="explain-editor"
             id='explain_btn'
-            className="btn text-success py-0"
+            className="btn py-0"
             disabled={!(tabsState.currentExt === 'sol' )}
             onClick={async () => {
               const path = active().substr(active().indexOf('/') + 1, active().length)
@@ -222,7 +223,7 @@ export const TabsUI = (props: TabsUIProps) => {
           >
             <CustomTooltip
               placement="bottom"
-              tooltipId="overlay-tooltip-run-script"
+              tooltipId="overlay-tooltip-explaination"
               tooltipText={
                 <span>
                   {tabsState.currentExt === 'sol'? (
@@ -236,6 +237,28 @@ export const TabsUI = (props: TabsUIProps) => {
               <i className="fa-solid fa-message-exclamation"></i>
             </CustomTooltip>
           </button>
+          <button
+            data-id="remix_ai_switch"
+            id='remix_ai_switch'
+            className="btn ai-switch py-0"
+            disabled={!(tabsState.currentExt === 'sol' )}
+            onClick={async () => {
+              await props.plugin.call('settings', 'updateCopilotChoice', ai_switch)
+              setAI_switch(!ai_switch)
+            }}
+          >
+            <CustomTooltip
+              placement="bottom"
+              tooltipId="overlay-tooltip-copilot"
+              tooltipText={
+                <span>
+                  <FormattedMessage id="remixUiTabs.tooltipText6" />
+                </span>
+              }
+            >
+              <i className= {ai_switch ? "fa-solid fa-toggle-on" :"fa-solid fa-toggle-off"}></i>
+            </CustomTooltip>
+          </button>
           <script>
             const button = document.querySelector('#button');