Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix AI icons on home tab #4792

Merged
merged 13 commits into from
May 16, 2024
Merged

fix AI icons on home tab #4792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0653357
removed doc icon
Aniket-Engg May 10, 2024
9c5a8a8
consistent icons
Aniket-Engg May 10, 2024
2eac8ad
doc icon in settings
Aniket-Engg May 10, 2024
e77b0c0
icon tooltips
Aniket-Engg May 10, 2024
50a52bf
separation of icons
Aniket-Engg May 10, 2024
474e221
fix linting
Aniket-Engg May 10, 2024
04981b4
removed AI label
Aniket-Engg May 10, 2024
470ea8f
Update remix-ui-tabs.tsx
LianaHus May 10, 2024
667ef9d
Update remix-ui-tabs.tsx
LianaHus May 10, 2024
c420ac4
border in div
Aniket-Engg May 14, 2024
c86f494
increase size of switch
Aniket-Engg May 14, 2024
3e3e6a3
fix linting
Aniket-Engg May 14, 2024
462a9fc
Merge branch 'master' into AIicons
LianaHus May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 4 additions & 3 deletions apps/remix-ide/src/app/tabs/locales/en/remixUiTabs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
{
"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 to use AI tools [BETA]",
"remixUiTabs.tooltipText3": "Select .sol or .yul file to compile OR a .ts or .js file to run",
"remixUiTabs.tooltipText4": "To explain a contract, choose a .sol file",
"remixUiTabs.tooltipText5": "Explain the contract(s) in current file [BETA]",
"remixUiTabs.tooltipText6": "Enable Remix AI Copilot [BETA]",
"remixUiTabs.tooltipText7": "Disable Remix AI Copilot [BETA]",
"remixUiTabs.tooltipText8": "Remix AI Tools Documentation [BETA]",
"remixUiTabs.tooltipText8": "Remix AI Tools Documentation",
"remixUiTabs.tooltipTextDisabledCopilot": "To use Remix AI Copilot, choose a .sol file",
"remixUiTabs.zoomOut": "Zoom out",
"remixUiTabs.zoomIn": "Zoom in"
}
18 changes: 17 additions & 1 deletion libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { ViewPlugin } from '@remixproject/engine-web'
import React, {useState, useRef, useReducer, useEffect, useCallback} from 'react' // eslint-disable-line
import { CustomTooltip } from '@remix-ui/helper'
const _paq = (window._paq = window._paq || [])

import { AppModal, AlertModal, ModalTypes } from '@remix-ui/app'
import { labels, textDark, textSecondary } from './constants'
Expand Down Expand Up @@ -450,9 +452,23 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
const copilotSettings = () => (
<div className="border-top">
<div className="card-body pt-3 pb-2">
<h6 className="card-title">
<h6 className="card-title d-inline">
<FormattedMessage id="settings.copilot" />
</h6>
<CustomTooltip placement="bottom" tooltipId="overlay-tooltip-aiDocumentation" tooltipText={<FormattedMessage id="remixUiTabs.tooltipText8" />}>
<span
data-id="remix_ai_docs"
id="remix_ai_docs"
className="btn pl-2 pr-0 py-0 d-inline ai-docs"
role='link'
onClick={()=>{
window.open("https://remix-ide.readthedocs.io/en/latest/ai.html")
_paq.push(['trackEvent', 'ai', 'solcoder', 'documentation'])
}}
>
<i aria-hidden="true" className="fas fa-book"></i>
</span>
</CustomTooltip>

<div className="pt-2 mb-0">
<div className="text-secondary mb-0 h6">
Expand Down
168 changes: 69 additions & 99 deletions libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export const TabsUI = (props: TabsUIProps) => {
>
<button
data-id="play-editor"
className="btn text-success py-0"
className="btn text-success pr-0 py-0 d-flex"
disabled={!(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts' || tabsState.currentExt === 'sol' || tabsState.currentExt === 'circom' || tabsState.currentExt === 'vy')}
onClick={async () => {
const path = active().substr(active().indexOf('/') + 1, active().length)
Expand All @@ -205,111 +205,81 @@ export const TabsUI = (props: TabsUIProps) => {
}
}}
>
<i className="fad fa-play"></i>
<i className="fas fa-play"></i>
</button>
</CustomTooltip>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-explaination"
tooltipText={
<span>
{tabsState.currentExt === 'sol'? (
<FormattedMessage id="remixUiTabs.tooltipText5" />
) : (
<FormattedMessage id="remixUiTabs.tooltipText4" />
)}
</span>
}
>
<button
data-id="explain-editor"
id='explain_btn'
className='btn py-0 text-ai px-0 d-flex'
disabled={!(tabsState.currentExt === 'sol') || explaining}
onClick={async () => {
const path = active().substr(active().indexOf('/') + 1, active().length)
const content = await props.plugin.call('fileManager', 'readFile', path)
if (tabsState.currentExt === 'sol') {
setExplaining(true)
await props.plugin.call('solcoder', 'code_explaining', content)
setExplaining(false)
_paq.push(['trackEvent', 'ai', 'solcoder', 'explain_file'])
}
}}
>
<i className={`fa-solid fa-user-robot ${explaining ? 'loadingExplanation' : ''}`}></i>
<span
className="position-relative text-ai text-sm pl-1"
style={{ fontSize: "x-small", alignSelf: "end" }}
>
AI
</span>
</button>
</CustomTooltip>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-copilot"
tooltipText={
<span>
{ tabsState.currentExt === 'sol'? (
!ai_switch ? (
<FormattedMessage id="remixUiTabs.tooltipText6" />
) : (<FormattedMessage id="remixUiTabs.tooltipText7" />)
) : (
<FormattedMessage id="remixUiTabs.tooltipText4" />
)}
</span>
}
>
<button
data-id="remix_ai_switch"
id='remix_ai_switch'
className="btn ai-switch text-ai pl-2 pr-0 py-0 d-flex"
disabled={!(tabsState.currentExt === 'sol' )}
onClick={async () => {
await props.plugin.call('settings', 'updateCopilotChoice', !ai_switch)
setAI_switch(!ai_switch)
ai_switch ? _paq.push(['trackEvent', 'ai', 'solcoder', 'copilot_enabled']) : _paq.push(['trackEvent', 'ai', 'solcoder', 'copilot_disabled'])
}}
<div className= "d-flex border-left ml-2 align-items-center" style={{ height: "3em" }}>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-explaination"
tooltipText={
<span>
{tabsState.currentExt === 'sol'? (
<FormattedMessage id="remixUiTabs.tooltipText5" />
) : (
<FormattedMessage id="remixUiTabs.tooltipText4" />
)}
</span>
}
>
<i
className={ai_switch ? "fa-solid fa-toggle-on" : "fa-solid fa-toggle-off"}
></i>
<span
className="position-relative text-ai text-sm pl-1"
style={{ fontSize: "x-small", alignSelf: "end" }}
<button
data-id="explain-editor"
id='explain_btn'
className='btn text-ai pl-2 pr-0 py-0 d-flex'
disabled={!(tabsState.currentExt === 'sol') || explaining}
onClick={async () => {
const path = active().substr(active().indexOf('/') + 1, active().length)
const content = await props.plugin.call('fileManager', 'readFile', path)
if (tabsState.currentExt === 'sol') {
setExplaining(true)
await props.plugin.call('solcoder', 'code_explaining', content)
setExplaining(false)
_paq.push(['trackEvent', 'ai', 'solcoder', 'explain_file'])
}
}}
>
AI
</span>
</button>
</CustomTooltip>
<CustomTooltip placement="bottom" tooltipId="overlay-tooltip-aiDocumentation" tooltipText={<FormattedMessage id="remixUiTabs.tooltipText8" />}>
<span
data-id="remix_ai_docs"
id="remix_ai_docs"
className="btn pl-2 pr-0 py-0 d-flex ai-docs"
role='link'
onClick={()=>{
window.open("https://remix-ide.readthedocs.io/en/latest/ai.html")
_paq.push(['trackEvent', 'ai', 'solcoder', 'documentation'])
}}
<i className={`fas fa-user-robot ${explaining ? 'loadingExplanation' : ''}`}></i>
</button>
</CustomTooltip>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-copilot"
tooltipText={
<span>
{ tabsState.currentExt === 'sol'? (
!ai_switch ? (
<FormattedMessage id="remixUiTabs.tooltipText6" />
) : (<FormattedMessage id="remixUiTabs.tooltipText7" />)
) : (
<FormattedMessage id="remixUiTabs.tooltipTextDisabledCopilot" />
)}
</span>
}
>
<i className="fa-solid fa-book text-ai"></i>
<span
className="position-relative text-ai text-sm pl-1"
style={{ fontSize: "x-small", alignSelf: "end" }}
<button
data-id="remix_ai_switch"
id='remix_ai_switch'
className="btn ai-switch text-ai pl-2 pr-0 py-0 d-flex"
disabled={!(tabsState.currentExt === 'sol' )}
onClick={async () => {
await props.plugin.call('settings', 'updateCopilotChoice', !ai_switch)
setAI_switch(!ai_switch)
ai_switch ? _paq.push(['trackEvent', 'ai', 'solcoder', 'copilot_enabled']) : _paq.push(['trackEvent', 'ai', 'solcoder', 'copilot_disabled'])
}}
>
AI
</span>
</span>
</CustomTooltip>
<i className={ai_switch ? "fas fa-toggle-on fa-lg" : "fas fa-toggle-off fa-lg"}></i>
</button>
</CustomTooltip>
</div>

<CustomTooltip placement="bottom" tooltipId="overlay-tooltip-zoom-out" tooltipText={<FormattedMessage id="remixUiTabs.zoomOut" />}>
<span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" onClick={() => props.onZoomOut()}></span>
</CustomTooltip>
<CustomTooltip placement="bottom" tooltipId="overlay-tooltip-run-zoom-in" tooltipText={<FormattedMessage id="remixUiTabs.zoomIn" />}>
<span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" onClick={() => props.onZoomIn()}></span>
</CustomTooltip>
<div className= "d-flex border-left ml-2 align-items-center" style={{ height: "3em" }}>
<CustomTooltip placement="bottom" tooltipId="overlay-tooltip-zoom-out" tooltipText={<FormattedMessage id="remixUiTabs.zoomOut" />}>
<span data-id="tabProxyZoomOut" className="btn fas fa-search-minus text-dark pl-2 pr-0 py-0 d-flex" onClick={() => props.onZoomOut()}></span>
</CustomTooltip>
<CustomTooltip placement="bottom" tooltipId="overlay-tooltip-run-zoom-in" tooltipText={<FormattedMessage id="remixUiTabs.zoomIn" />}>
<span data-id="tabProxyZoomIn" className="btn fas fa-search-plus text-dark pl-2 pr-0 py-0 d-flex" onClick={() => props.onZoomIn()}></span>
</CustomTooltip>
</div>
</div>
<Tabs
className="tab-scroll"
Expand Down