diff --git a/apps/remix-ide/src/app/plugins/openaigpt.tsx b/apps/remix-ide/src/app/plugins/openaigpt.tsx index 9d1e121722..78892c599c 100644 --- a/apps/remix-ide/src/app/plugins/openaigpt.tsx +++ b/apps/remix-ide/src/app/plugins/openaigpt.tsx @@ -19,7 +19,7 @@ export class OpenAIGpt extends Plugin { async message(prompt): Promise { this.call('layout', 'maximizeTerminal') - this.call('terminal', 'log', 'Waiting for GPT answer...') + this.call('terminal', 'log', { type: 'typewriterwarning', value: 'Waiting for GPT answer...'}) let result try { result = await ( diff --git a/apps/remix-ide/src/app/plugins/solcoderAI.tsx b/apps/remix-ide/src/app/plugins/solcoderAI.tsx index 58bc953b6a..aa99c74f3a 100644 --- a/apps/remix-ide/src/app/plugins/solcoderAI.tsx +++ b/apps/remix-ide/src/app/plugins/solcoderAI.tsx @@ -22,7 +22,7 @@ export class SolCoder extends Plugin { async code_generation(prompt): Promise { this.emit("aiInfering") this.call('layout', 'maximizeTerminal') - this.call('terminal', 'log', 'Waiting for Solcoder answer...') + this.call('terminal', 'log', { type: 'typewriterwarning', value: 'Waiting for Solcoder answer...'}) let result try { result = await( @@ -47,7 +47,7 @@ export class SolCoder extends Plugin { async solidity_answer(prompt): Promise { this.emit("aiInfering") this.call('layout', 'maximizeTerminal') - this.call('terminal', 'log', 'Waiting for Solcoder answer...') + this.call('terminal', 'log', { type: 'typewriterwarning', value: 'Waiting for Solcoder answer...'}) let result try { result = await( @@ -77,7 +77,7 @@ export class SolCoder extends Plugin { async code_explaining(prompt): Promise { this.emit("aiInfering") this.call('layout', 'maximizeTerminal') - this.call('terminal', 'log', 'Waiting for Solcoder answer...') + this.call('terminal', 'log', { type: 'typewriterwarning', value: 'Waiting for Solcoder answer...'}) let result try { result = await( diff --git a/apps/remix-ide/src/app/tabs/locales/en/remixUiTabs.json b/apps/remix-ide/src/app/tabs/locales/en/remixUiTabs.json index ed80235401..7826d29fa8 100644 --- a/apps/remix-ide/src/app/tabs/locales/en/remixUiTabs.json +++ b/apps/remix-ide/src/app/tabs/locales/en/remixUiTabs.json @@ -2,9 +2,10 @@ "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 explain with AI [BETA]", - "remixUiTabs.tooltipText5": "Explain the contract/s in current file [BETA]", - "remixUiTabs.tooltipText6": "AI Copilot [BETA]", + "remixUiTabs.tooltipText4": "Select .sol file to use AI tools [BETA]", + "remixUiTabs.tooltipText5": "Explain the contract(s) in current file [BETA]", + "remixUiTabs.tooltipText6": "Enable AI Copilot [BETA]. Note that the AI model is downloaded once to your browser's memory - approximately 50MB.", + "remixUiTabs.tooltipText7": "Disable AI Copilot [BETA]", "remixUiTabs.zoomOut": "Zoom out", "remixUiTabs.zoomIn": "Zoom in" } diff --git a/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css b/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css index 3ed6161e19..eac0b0f94f 100644 --- a/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css +++ b/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css @@ -10,6 +10,7 @@ * Copyright 2011-2020 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */:root { + --ai: #da2de4; --blue:#033c73; --indigo:#6610f2; --purple:#6f42c1; @@ -8373,6 +8374,9 @@ a.text-danger:focus,a.text-danger:hover { a.text-light:focus,a.text-light:hover { color:#cbd3da!important } +.text-ai { + color: #da2de4 !important; +} .text-dark { color:#343a40!important } diff --git a/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css b/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css index 47c7fa9b91..0c74e7f730 100644 --- a/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css +++ b/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css @@ -11,6 +11,7 @@ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap); :root { + --ai: #2de7f3; --blue:#2a9fd6; --indigo:#6610f2; --purple:#6f42c1; @@ -8375,6 +8376,9 @@ a.text-danger:focus,a.text-danger:hover { a.text-light:focus,a.text-light:hover { color:#000!important } +.text-dark { + color: #babbcc !important; +} .text-dark { color:#adafae!important } diff --git a/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css b/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css index e9b14b99af..45d3dfe8eb 100644 --- a/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css +++ b/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css @@ -10,7 +10,8 @@ * Copyright 2011-2020 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap);:root { - --blue:#2c3e50; + --ai: #da2de4; + --blue:#2c3e50; --indigo:#6610f2; --purple:#6f42c1; --pink:#e83e8c; @@ -7004,6 +7005,9 @@ a.text-danger:focus,a.text-danger:hover { a.text-light:focus,a.text-light:hover { color:#c0cdd1!important } +.text-ai { + color: #da2de4 !important; +} .text-dark { color:#7b8a8b!important } diff --git a/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css b/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css index 3129408286..dc4d761c61 100644 --- a/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css +++ b/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css @@ -11,6 +11,7 @@ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap); :root { + --ai: #da2de4; --blue:#446e9b; --indigo:#6610f2; --purple:#6f42c1; @@ -8375,6 +8376,9 @@ a.text-danger:focus,a.text-danger:hover { a.text-light:focus,a.text-light:hover { color:#c8c8c8!important } +.text-ai { + color: #da2de4 !important; +} .text-dark { color:#333!important } diff --git a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css index 103957dc53..8af0836f0b 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css +++ b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css @@ -1,5 +1,6 @@ @import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,600&display=swap'); :root { + --ai: #2de7f3; --blue: #90c3f6; --indigo: #6610f2; --purple: #9e77f6; @@ -8590,6 +8591,9 @@ a.text-light:hover { .text-dark { color: #babbcc !important; } +.text-ai { + color: #2de7f3 !important; +} a.text-dark:focus, a.text-dark:hover { color: #6f7087 !important; diff --git a/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css b/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css index 73574f8f5f..aba42e3ac6 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css +++ b/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css @@ -1,4 +1,5 @@ :root { + --ai: #da2de4; --blue: #007bff; --indigo: #6610f2; --purple: #6f42c1; @@ -9364,7 +9365,9 @@ a.text-light:hover, a.text-light:focus { color: #d9d9d9 !important; } - +.text-ai { + color: #da2de4 !important; +} .text-dark { color: #11556c !important; } diff --git a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css index de97d73757..1708371250 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css +++ b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css @@ -1,4 +1,5 @@ :root { + --ai: #2de7f3; --blue: #007aa6; --indigo: #6610f2; --purple: #9e77f6; @@ -8570,6 +8571,9 @@ a.text-info:hover { .text-warning { color: #c97539 !important; } +.text-ai { + color: #2de7f3 !important; +} a.text-warning:focus, a.text-warning:hover { color: #8f5227 !important; diff --git a/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css b/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css index 0ef4225d57..6c9ecb9534 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css +++ b/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css @@ -1,6 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400&display=swap'); :root { + --ai: #2de7f3; --blue: #2cc1f7; --indigo: #6610f2; --purple: #6f42c1; @@ -8604,6 +8605,9 @@ a.text-light:hover { .text-dark { color: #babbcc !important; } +.text-ai { + color: #2de7f3 !important; +} a.text-dark:focus, a.text-dark:hover { color: #6f7087 !important; diff --git a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css b/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css index b99025172c..3d47c2031c 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css +++ b/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css @@ -1,4 +1,5 @@ :root { + --ai: #da2de4; --blue: #007bff; --indigo: #6610f2; --purple: #7c47b9; @@ -9360,7 +9361,9 @@ a.text-light:hover, a.text-light:focus { color: #d9d9d9 !important; } - +.text-ai { + color: #da2de4 !important; +} .text-dark { color: #747B90 !important; } diff --git a/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css b/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css index f64bc8d01b..0b6cb171f4 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css +++ b/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css @@ -1,4 +1,5 @@ :root { + --ai: #da2de4; --blue: #007bff; --indigo: #6610f2; --purple: #6f42c1; @@ -9366,7 +9367,9 @@ a.text-light:hover, a.text-light:focus { color: #d9d9d9 !important; } - +.text-ai { + color: #da2de4 !important; +} .text-dark { color: #11556c !important; } diff --git a/apps/remix-ide/src/assets/css/themes/remix-unicorn.css b/apps/remix-ide/src/assets/css/themes/remix-unicorn.css index ebf508ff83..a7f4196f71 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-unicorn.css +++ b/apps/remix-ide/src/assets/css/themes/remix-unicorn.css @@ -1,4 +1,5 @@ :root { + --ai: #da2de4; --blue: #007bff; --indigo: #6610f2; --purple: #7c47b9; @@ -9360,7 +9361,9 @@ a.text-light:hover, a.text-light:focus { color: #d9d9d9 !important; } - +.text-ai { + color: #da2de4 !important; +} .text-dark { color: #747B90 !important; } diff --git a/apps/remix-ide/src/assets/css/themes/remix-violet.css b/apps/remix-ide/src/assets/css/themes/remix-violet.css index 275d0f0907..85b855c862 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-violet.css +++ b/apps/remix-ide/src/assets/css/themes/remix-violet.css @@ -1,4 +1,5 @@ :root { + --ai: #da2de4; --blue: #007bff; --indigo: #6610f2; --purple: #7c47b9; @@ -9356,7 +9357,9 @@ a.text-light:hover, a.text-light:focus { color: #d9d9d9 !important; } - +.text-ai { + color: #da2de4 !important; +} .text-dark { color: #747B90 !important; } diff --git a/libs/remix-ui/renderer/src/lib/renderer.tsx b/libs/remix-ui/renderer/src/lib/renderer.tsx index 433c91f7ae..b580995d01 100644 --- a/libs/remix-ui/renderer/src/lib/renderer.tsx +++ b/libs/remix-ui/renderer/src/lib/renderer.tsx @@ -101,7 +101,20 @@ export const Renderer = ({message, opt = {}, plugin}: RendererProps) => { - { askGtp() }}>ASK GPT + + AI + + { askGtp() }} + style={{borderColor: "var(--ai)"}} + > + ASK GPT + + )} diff --git a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx index ff41ef2cbc..51f365cefc 100644 --- a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx +++ b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx @@ -120,7 +120,11 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => { useEffect(() => { if (props.useMatomoAnalytics !== null) useMatomoAnalytics(props.config, props.useMatomoAnalytics, dispatch) - }, [props.useMatomoAnalytics]) + }, [props.useMatomoAnalytics]) + + useEffect(() => { + if (props.useCopilot !== null) copilotActivate(props.config, props.useCopilot, dispatch) + }, [props.useCopilot]) const onchangeGenerateContractMetadata = (event) => { generateContractMetadat(props.config, event.target.checked, dispatch) diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css index e769523822..8ecd601f66 100644 --- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css +++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css @@ -56,3 +56,26 @@ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } + +.loadingExplanation { + animation: fancy-spin 2000ms; + animation-iteration-count: infinite; +} + +@keyframes fancy-spin { + 0% { + transform: scale(1); + } + 25% { + transform: scale(1); + } + 50% { + transform: scale(1.3); + } + 75% { + transform: scale(1.3); + } + 100% { + transform: scale(1); + } +} \ No newline at end of file diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx index b2d24153c3..d95fe9d5fb 100644 --- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx +++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx @@ -60,6 +60,7 @@ const tabsReducer = (state: ITabsState, action: ITabsAction) => { export const TabsUI = (props: TabsUIProps) => { const [tabsState, dispatch] = useReducer(tabsReducer, initialTabsState) const currentIndexRef = useRef(-1) + const [explaining, setExplaining] = useState(false) const tabsRef = useRef({}) const tabsElement = useRef(null) const [ai_switch, setAI_switch] = useState(false) @@ -167,101 +168,119 @@ export const TabsUI = (props: TabsUIProps) => {
- - + + + {tabsState.currentExt === 'sol'? ( + + ) : ( + + )} + + } > - - {tabsState.currentExt === 'sol'? ( - - ) : ( - - )} - - } + - + + + { tabsState.currentExt === 'sol'? ( + !ai_switch ? ( + + ) : () + ) : ( + + )} + + } > - - - - } + + + + AI + + + }> props.onZoomOut()}> diff --git a/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts b/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts index c451abfbb8..760138fcd9 100644 --- a/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts +++ b/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts @@ -159,7 +159,7 @@ export const registerScriptRunnerReducer = (state, action) => { case TYPEWRITERWARNING: return { ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, typewriter: true, style: 'text-warning', provider: action.payload.provider }) + journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, typewriter: true, style: 'text-ai', provider: action.payload.provider }) } case TYPEWRITERSUCCESS: return { diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx index 768a8c67cf..1cea4662a0 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx +++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx @@ -44,7 +44,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { const [cmdHistory, cmdHistoryDispatch] = useReducer(addCommandHistoryReducer, initialState) const [, scriptRunnerDispatch] = useReducer(registerScriptRunnerReducer, initialState) const [toaster, setToaster] = useState(false) - const [aiLoading, setAILoading] = useState(false) const [toastProvider, setToastProvider] = useState({ show: false, fileName: '', @@ -104,14 +103,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { setIsVM(provider.startsWith('vm-')) }) - props.plugin.on('solcoder', 'aiInfering', () => { - setAILoading(true) - }) - - props.plugin.on('solcoder', 'aiInferingDone', () => { - setAILoading(false) - }) - props.onReady({ logHtml: (html) => { scriptRunnerDispatch({ @@ -658,11 +649,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { data-id="terminalInputSearch" />
- {aiLoading &&
- - AI Running ... -
} -