@@ -5,6 +5,7 @@ import React, {useState, useRef, useEffect, useReducer} from 'react' // eslint-d
5
5
import { FormattedMessage } from 'react-intl'
6
6
import { Tab , Tabs , TabList , TabPanel } from 'react-tabs'
7
7
import './remix-ui-tabs.css'
8
+ import { values } from 'lodash'
8
9
const _paq = ( window . _paq = window . _paq || [ ] )
9
10
10
11
/* eslint-disable-next-line */
@@ -64,7 +65,6 @@ export const TabsUI = (props: TabsUIProps) => {
64
65
const tabsRef = useRef ( { } )
65
66
const tabsElement = useRef ( null )
66
67
const [ ai_switch , setAI_switch ] = useState < boolean > ( false )
67
-
68
68
const tabs = useRef ( props . tabs )
69
69
tabs . current = props . tabs // we do this to pass the tabs list to the onReady callbacks
70
70
@@ -77,6 +77,14 @@ export const TabsUI = (props: TabsUIProps) => {
77
77
}
78
78
} , [ tabsState . selectedIndex ] )
79
79
80
+ const getAI = async ( ) => {
81
+ try {
82
+ return await props . plugin . call ( 'settings' , 'getCopilotSetting' )
83
+ } catch ( e ) {
84
+ return false
85
+ }
86
+ }
87
+
80
88
const getFileDecorationClasses = ( tab : any ) => {
81
89
const fileDecoration = tabsState . fileDecorations . find ( ( fileDecoration : fileDecoration ) => {
82
90
if ( `${ fileDecoration . workspace . name } /${ fileDecoration . path } ` === tab . name ) return true
@@ -92,7 +100,6 @@ export const TabsUI = (props: TabsUIProps) => {
92
100
const classNameImg = 'my-1 mr-1 text-dark ' + tab . iconClass
93
101
const classNameTab = 'nav-item nav-link d-flex justify-content-center align-items-center px-2 py-1 tab' + ( index === currentIndexRef . current ? ' active' : '' )
94
102
const invert = props . themeQuality === 'dark' ? 'invert(1)' : 'invert(0)'
95
-
96
103
return (
97
104
< CustomTooltip tooltipId = "tabsActive" tooltipText = { tab . tooltip } placement = "bottom-start" >
98
105
< div
@@ -133,6 +140,7 @@ export const TabsUI = (props: TabsUIProps) => {
133
140
}
134
141
135
142
const setFileDecorations = ( fileStates : fileDecoration [ ] ) => {
143
+ getAI ( ) . then ( value => setAI_switch ( value ) ) . catch ( error => console . log ( error ) )
136
144
dispatch ( { type : 'SET_FILE_DECORATIONS' , payload : fileStates } )
137
145
}
138
146
@@ -185,7 +193,7 @@ export const TabsUI = (props: TabsUIProps) => {
185
193
>
186
194
< button
187
195
data-id = "play-editor"
188
- className = "btn text-success py-0"
196
+ className = "btn text-success pr-0 py-0 d-flex "
189
197
disabled = { ! ( tabsState . currentExt === 'js' || tabsState . currentExt === 'ts' || tabsState . currentExt === 'sol' || tabsState . currentExt === 'circom' || tabsState . currentExt === 'vy' ) }
190
198
onClick = { async ( ) => {
191
199
const path = active ( ) . substr ( active ( ) . indexOf ( '/' ) + 1 , active ( ) . length )
@@ -205,111 +213,82 @@ export const TabsUI = (props: TabsUIProps) => {
205
213
}
206
214
} }
207
215
>
208
- < i className = "fad fa-play" > </ i >
209
- </ button >
210
- </ CustomTooltip >
211
- < CustomTooltip
212
- placement = "bottom"
213
- tooltipId = "overlay-tooltip-explaination"
214
- tooltipText = {
215
- < span >
216
- { tabsState . currentExt === 'sol' ? (
217
- < FormattedMessage id = "remixUiTabs.tooltipText5" />
218
- ) : (
219
- < FormattedMessage id = "remixUiTabs.tooltipText4" />
220
- ) }
221
- </ span >
222
- }
223
- >
224
- < button
225
- data-id = "explain-editor"
226
- id = 'explain_btn'
227
- className = 'btn py-0 text-ai px-0 d-flex'
228
- disabled = { ! ( tabsState . currentExt === 'sol' ) || explaining }
229
- onClick = { async ( ) => {
230
- const path = active ( ) . substr ( active ( ) . indexOf ( '/' ) + 1 , active ( ) . length )
231
- const content = await props . plugin . call ( 'fileManager' , 'readFile' , path )
232
- if ( tabsState . currentExt === 'sol' ) {
233
- setExplaining ( true )
234
- await props . plugin . call ( 'solcoder' , 'code_explaining' , content )
235
- setExplaining ( false )
236
- _paq . push ( [ 'trackEvent' , 'ai' , 'solcoder' , 'explain_file' ] )
237
- }
238
- } }
239
- >
240
- < i className = { `fa-solid fa-user-robot ${ explaining ? 'loadingExplanation' : '' } ` } > </ i >
241
- < span
242
- className = "position-relative text-ai text-sm pl-1"
243
- style = { { fontSize : "x-small" , alignSelf : "end" } }
244
- >
245
- AI
246
- </ span >
216
+ < i className = "fas fa-play" > </ i >
247
217
</ button >
248
218
</ CustomTooltip >
249
- < CustomTooltip
250
- placement = "bottom"
251
- tooltipId = "overlay-tooltip-copilot"
252
- tooltipText = {
253
- < span >
254
- { tabsState . currentExt === 'sol' ? (
255
- ! ai_switch ? (
256
- < FormattedMessage id = "remixUiTabs.tooltipText6" />
257
- ) : ( < FormattedMessage id = "remixUiTabs.tooltipText7" /> )
258
- ) : (
259
- < FormattedMessage id = "remixUiTabs.tooltipText4" />
260
- ) }
261
- </ span >
262
- }
263
- >
264
- < button
265
- data-id = "remix_ai_switch"
266
- id = 'remix_ai_switch'
267
- className = "btn ai-switch text-ai pl-2 pr-0 py-0 d-flex"
268
- disabled = { ! ( tabsState . currentExt === 'sol' ) }
269
- onClick = { async ( ) => {
270
- await props . plugin . call ( 'settings' , 'updateCopilotChoice' , ! ai_switch )
271
- setAI_switch ( ! ai_switch )
272
- ai_switch ? _paq . push ( [ 'trackEvent' , 'ai' , 'solcoder' , 'copilot_enabled' ] ) : _paq . push ( [ 'trackEvent' , 'ai' , 'solcoder' , 'copilot_disabled' ] )
273
- } }
219
+
220
+ < div className = "d-flex border-left ml-2 align-items-center" style = { { height : "3em" } } >
221
+ < CustomTooltip
222
+ placement = "bottom"
223
+ tooltipId = "overlay-tooltip-explaination"
224
+ tooltipText = {
225
+ < span >
226
+ { tabsState . currentExt === 'sol' ? (
227
+ < FormattedMessage id = "remixUiTabs.tooltipText5" />
228
+ ) : (
229
+ < FormattedMessage id = "remixUiTabs.tooltipText4" />
230
+ ) }
231
+ </ span >
232
+ }
274
233
>
275
- < i
276
- className = { ai_switch ? "fa-solid fa-toggle-on" : "fa-solid fa-toggle-off" }
277
- > </ i >
278
- < span
279
- className = "position-relative text-ai text-sm pl-1"
280
- style = { { fontSize : "x-small" , alignSelf : "end" } }
234
+ < button
235
+ data-id = "explain-editor"
236
+ id = 'explain_btn'
237
+ className = 'btn text-ai pl-2 pr-0 py-0 d-flex'
238
+ disabled = { ! ( tabsState . currentExt === 'sol' ) || explaining }
239
+ onClick = { async ( ) => {
240
+ const path = active ( ) . substr ( active ( ) . indexOf ( '/' ) + 1 , active ( ) . length )
241
+ const content = await props . plugin . call ( 'fileManager' , 'readFile' , path )
242
+ if ( tabsState . currentExt === 'sol' ) {
243
+ setExplaining ( true )
244
+ await props . plugin . call ( 'solcoder' , 'code_explaining' , content )
245
+ setExplaining ( false )
246
+ _paq . push ( [ 'trackEvent' , 'ai' , 'solcoder' , 'explain_file' ] )
247
+ }
248
+ } }
281
249
>
282
- AI
283
- </ span >
284
- </ button >
285
- </ CustomTooltip >
286
- < CustomTooltip placement = "bottom" tooltipId = "overlay-tooltip-aiDocumentation" tooltipText = { < FormattedMessage id = "remixUiTabs.tooltipText8" /> } >
287
- < span
288
- data-id = "remix_ai_docs"
289
- id = "remix_ai_docs"
290
- className = "btn pl-2 pr-0 py-0 d-flex ai-docs"
291
- role = 'link'
292
- onClick = { ( ) => {
293
- window . open ( "https://remix-ide.readthedocs.io/en/latest/ai.html" )
294
- _paq . push ( [ 'trackEvent' , 'ai' , 'solcoder' , 'documentation' ] )
295
- } }
250
+ < i className = { `fas fa-user-robot ${ explaining ? 'loadingExplanation' : '' } ` } > </ i >
251
+ </ button >
252
+ </ CustomTooltip >
253
+ < CustomTooltip
254
+ placement = "bottom"
255
+ tooltipId = "overlay-tooltip-copilot"
256
+ tooltipText = {
257
+ < span >
258
+ { tabsState . currentExt === 'sol' ? (
259
+ ! ai_switch ? (
260
+ < FormattedMessage id = "remixUiTabs.tooltipText6" />
261
+ ) : ( < FormattedMessage id = "remixUiTabs.tooltipText7" /> )
262
+ ) : (
263
+ < FormattedMessage id = "remixUiTabs.tooltipTextDisabledCopilot" />
264
+ ) }
265
+ </ span >
266
+ }
296
267
>
297
- < i className = "fa-solid fa-book text-ai" > </ i >
298
- < span
299
- className = "position-relative text-ai text-sm pl-1"
300
- style = { { fontSize : "x-small" , alignSelf : "end" } }
268
+ < button
269
+ data-id = "remix_ai_switch"
270
+ id = 'remix_ai_switch'
271
+ className = "btn ai-switch text-ai pl-2 pr-0 py-0 d-flex"
272
+ disabled = { ! ( tabsState . currentExt === 'sol' ) }
273
+ onClick = { async ( ) => {
274
+ await props . plugin . call ( 'settings' , 'updateCopilotChoice' , ! ai_switch )
275
+ setAI_switch ( ! ai_switch )
276
+ ai_switch ? _paq . push ( [ 'trackEvent' , 'ai' , 'solcoder' , 'copilot_enabled' ] ) : _paq . push ( [ 'trackEvent' , 'ai' , 'solcoder' , 'copilot_disabled' ] )
277
+ } }
301
278
>
302
- AI
303
- </ span >
304
- </ span >
305
- </ CustomTooltip >
279
+ < i className = { ai_switch ? "fas fa-toggle-on fa-lg" : "fas fa-toggle-off fa-lg" } > </ i >
280
+ </ button >
281
+ </ CustomTooltip >
282
+ </ div >
306
283
307
- < CustomTooltip placement = "bottom" tooltipId = "overlay-tooltip-zoom-out" tooltipText = { < FormattedMessage id = "remixUiTabs.zoomOut" /> } >
308
- < span data-id = "tabProxyZoomOut" className = "btn btn-sm px-2 fas fa-search-minus text-dark" onClick = { ( ) => props . onZoomOut ( ) } > </ span >
309
- </ CustomTooltip >
310
- < CustomTooltip placement = "bottom" tooltipId = "overlay-tooltip-run-zoom-in" tooltipText = { < FormattedMessage id = "remixUiTabs.zoomIn" /> } >
311
- < span data-id = "tabProxyZoomIn" className = "btn btn-sm px-2 fas fa-search-plus text-dark" onClick = { ( ) => props . onZoomIn ( ) } > </ span >
312
- </ CustomTooltip >
284
+ < div className = "d-flex border-left ml-2 align-items-center" style = { { height : "3em" } } >
285
+ < CustomTooltip placement = "bottom" tooltipId = "overlay-tooltip-zoom-out" tooltipText = { < FormattedMessage id = "remixUiTabs.zoomOut" /> } >
286
+ < span data-id = "tabProxyZoomOut" className = "btn fas fa-search-minus text-dark pl-2 pr-0 py-0 d-flex" onClick = { ( ) => props . onZoomOut ( ) } > </ span >
287
+ </ CustomTooltip >
288
+ < CustomTooltip placement = "bottom" tooltipId = "overlay-tooltip-run-zoom-in" tooltipText = { < FormattedMessage id = "remixUiTabs.zoomIn" /> } >
289
+ < span data-id = "tabProxyZoomIn" className = "btn fas fa-search-plus text-dark pl-2 pr-0 py-0 d-flex" onClick = { ( ) => props . onZoomIn ( ) } > </ span >
290
+ </ CustomTooltip >
291
+ </ div >
313
292
</ div >
314
293
< Tabs
315
294
className = "tab-scroll"
0 commit comments