Skip to content

Commit

Permalink
show compile button for .nr files
Browse files Browse the repository at this point in the history
  • Loading branch information
ioedeveloper committed Jan 20, 2025
1 parent 548cc38 commit 9f7017b
Show file tree
Hide file tree
Showing 7 changed files with 185 additions and 66 deletions.
14 changes: 14 additions & 0 deletions apps/noir-compiler/src/app/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,20 @@ function App() {
plugin.on('locale', 'localeChanged', (locale: any) => {
setLocale(locale)
})
plugin.on('fileManager', 'currentFileChanged', (filePath) => {
if (filePath.endsWith('.nr')) {
dispatch({ type: 'SET_FILE_PATH', payload: filePath })
plugin.parse(filePath)
}
})
// @ts-ignore
plugin.on('editor', 'contentChanged', async (path: string, content: string) => {
setIsContentChanged(true)
// check if autoCompile is enabled
// if (path.endsWith('.nr')) {
// plugin.parse(path, content)
// }
})
setIsPluginActivated(true)
})
}, [])
Expand Down
113 changes: 54 additions & 59 deletions apps/noir-compiler/src/app/components/container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,17 @@ export function Container () {
}
}

// const handleOpenErrorLocation = async (location: string, startRange: string) => {
// if (location) {
// const fullPathLocation = await circuitApp.plugin.resolveReportPath(location)
const handleOpenErrorLocation = async (location: string, startRange: string) => {
if (location) {
const fullPathLocation = await circuitApp.plugin.resolveReportPath(location)

// await circuitApp.plugin.call('fileManager', 'open', fullPathLocation)
// // @ts-ignore
// const startPosition: { lineNumber: number; column: number } = await circuitApp.plugin.call('editor', 'getPositionAt', startRange)
// // @ts-ignore
// await circuitApp.plugin.call('editor', 'gotoLine', startPosition.lineNumber - 1, startPosition.column)
// }
// }

// const handlePrimeChange = (value: PrimeValue) => {
// circuitApp.plugin.compilerPrime = value
// circuitApp.dispatch({ type: 'SET_PRIME_VALUE', payload: value as PrimeValue })
// }
await circuitApp.plugin.call('fileManager', 'open', fullPathLocation)
// @ts-ignore
const startPosition: { lineNumber: number; column: number } = await circuitApp.plugin.call('editor', 'getPositionAt', startRange)
// @ts-ignore
await circuitApp.plugin.call('editor', 'gotoLine', startPosition.lineNumber - 1, startPosition.column)
}
}

const handleCircuitAutoCompile = (value: boolean) => {
noirApp.dispatch({ type: 'SET_AUTO_COMPILE', payload: value })
Expand All @@ -46,48 +41,48 @@ export function Container () {
noirApp.dispatch({ type: 'SET_HIDE_WARNINGS', payload: value })
}

// const askGPT = async (report: CompilerReport) => {
// if (report.labels.length > 0) {
// const location = circuitApp.appState.filePathToId[report.labels[0].file_id]
// const error = report.labels[0].message
const askGPT = async (report: CompilerReport) => {
if (report.labels.length > 0) {
const location = circuitApp.appState.filePathToId[report.labels[0].file_id]
const error = report.labels[0].message

// if (location) {
// const fullPathLocation = await circuitApp.plugin.resolveReportPath(location)
// const content = await circuitApp.plugin.call('fileManager', 'readFile', fullPathLocation)
// const message = `
// circom code: ${content}
// error message: ${error}
// full circom error: ${JSON.stringify(report, null, 2)}
// explain why the error occurred and how to fix it.
// `
// await circuitApp.plugin.call('popupPanel' as any, 'showPopupPanel', true)
// setTimeout(async () => {
// await circuitApp.plugin.call('remixAI' as any, 'chatPipe', 'error_explaining', message)
// }, 500)
// } else {
// const message = `
// error message: ${error}
// full circom error: ${JSON.stringify(report, null, 2)}
// explain why the error occurred and how to fix it.
// `
// await circuitApp.plugin.call('popupPanel' as any, 'showPopupPanel', true)
// setTimeout(async () => {
// await circuitApp.plugin.call('remixAI' as any, 'chatPipe', 'error_explaining', message)
// }, 500)
// }
// } else {
// const error = report.message
// const message = `
// error message: ${error}
// full circom error: ${JSON.stringify(report, null, 2)}
// explain why the error occurred and how to fix it.
// `
// await circuitApp.plugin.call('popupPanel' as any, 'showPopupPanel', true)
// setTimeout(async () => {
// await circuitApp.plugin.call('remixAI' as any, 'chatPipe', 'error_explaining', message)
// }, 500)
// }
// }
if (location) {
const fullPathLocation = await circuitApp.plugin.resolveReportPath(location)
const content = await circuitApp.plugin.call('fileManager', 'readFile', fullPathLocation)
const message = `
circom code: ${content}
error message: ${error}
full circom error: ${JSON.stringify(report, null, 2)}
explain why the error occurred and how to fix it.
`
await circuitApp.plugin.call('popupPanel' as any, 'showPopupPanel', true)
setTimeout(async () => {
await circuitApp.plugin.call('remixAI' as any, 'chatPipe', 'error_explaining', message)
}, 500)
} else {
const message = `
error message: ${error}
full circom error: ${JSON.stringify(report, null, 2)}
explain why the error occurred and how to fix it.
`
await circuitApp.plugin.call('popupPanel' as any, 'showPopupPanel', true)
setTimeout(async () => {
await circuitApp.plugin.call('remixAI' as any, 'chatPipe', 'error_explaining', message)
}, 500)
}
} else {
const error = report.message
const message = `
error message: ${error}
full circom error: ${JSON.stringify(report, null, 2)}
explain why the error occurred and how to fix it.
`
await circuitApp.plugin.call('popupPanel' as any, 'showPopupPanel', true)
setTimeout(async () => {
await circuitApp.plugin.call('remixAI' as any, 'chatPipe', 'error_explaining', message)
}, 500)
}
}

const handleCompileClick = () => {
compileNoirCircuit(noirApp.plugin, noirApp.appState)
Expand All @@ -113,9 +108,9 @@ export function Container () {
<div className="pb-2">
<CompileBtn id="noir" plugin={noirApp.plugin} appState={noirApp.appState} compileAction={handleCompileClick} />
</div>
{/* <RenderIf condition={circuitApp.appState.status !== 'compiling'}>
<CompilerFeedback feedback={circuitApp.appState.compilerFeedback} filePathToId={circuitApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={circuitApp.appState.hideWarnings} askGPT={askGPT} />
</RenderIf> */}
<RenderIf condition={noirApp.appState.status !== 'compiling'}>
<CompilerFeedback feedback={noirApp.appState.compilerFeedback} filePathToId={noirApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={noirApp.appState.hideWarnings} askGPT={askGPT} />
</RenderIf>
</div>
</div>
</article>
Expand Down
11 changes: 6 additions & 5 deletions apps/noir-compiler/src/app/reducers/state.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import { Actions, AppState } from '../types'

export interface ActionPayloadTypes {
SET_AUTO_COMPILE: boolean,
SET_HIDE_WARNINGS: boolean
}

export const appInitialState: AppState = {
filePath: '',
filePathToId: {},
Expand All @@ -28,6 +23,12 @@ export const appReducer = (state = appInitialState, action: Actions): AppState =
hideWarnings: action.payload
}

case 'SET_FILE_PATH':
return {
...state,
filePath: action.payload
}

default:
throw new Error()
}
Expand Down
6 changes: 5 additions & 1 deletion apps/noir-compiler/src/app/types/index.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { compiler_list } from 'circom_wasm'
import { Dispatch } from 'react'
import type { NoirPluginClient } from '../services/noirPluginClient'
import { ActionPayloadTypes } from '../reducers/state'

export type CompilerStatus = "compiling" | "idle" | "errored" | "warning"
export interface INoirAppContext {
Expand All @@ -18,6 +17,11 @@ export interface AppState {
status: CompilerStatus
}

export interface ActionPayloadTypes {
SET_AUTO_COMPILE: boolean,
SET_HIDE_WARNINGS: boolean,
SET_FILE_PATH: string
}
export interface Action<T extends keyof ActionPayloadTypes> {
type: T
payload: ActionPayloadTypes[T]
Expand Down
72 changes: 72 additions & 0 deletions libs/remix-ui/helper/src/lib/components/feedback.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import { useState } from 'react'
import { CompilerFeedbackProps, CompilerReport } from '../types'
import { RenderIf } from '@remix-ui/helper'
import { CopyToClipboard } from '@remix-ui/clipboard'
import { FeedbackAlert } from './feedbackAlert'

export function CompilerFeedback ({ feedback, filePathToId, hideWarnings, openErrorLocation, askGPT }: CompilerFeedbackProps) {
const [showException, setShowException] = useState<boolean>(true)

const handleCloseException = () => {
setShowException(false)
}

const handleOpenError = (report: CompilerReport) => {
if (report.labels.length > 0) {
openErrorLocation(filePathToId[report.labels[0].file_id], report.labels[0].range.start)
}
}

const handleAskGPT = (report: CompilerReport) => {
askGPT(report)
}

return (
<div>
{
(feedback && typeof feedback === 'string') || (Array.isArray(feedback) && feedback.length > 0) ? (
<div className="circuit_errors_box">
<RenderIf condition={ (typeof feedback === "string") && showException }>
<div className="circuit_feedback error alert alert-danger" data-id="circuit_feedback">
<span> <>{ feedback }</> </span>
<div className="close" data-id="renderer" onClick={handleCloseException}>
<i className="fas fa-times"></i>
</div>
<div className="d-flex pt-1 flex-row-reverse">
<span className="ml-3 pt-1 py-1" >
<CopyToClipboard content={feedback} className="p-0 m-0 far fa-copy error" direction={'top'} />
</span>
</div>
</div>
</RenderIf>
<RenderIf condition={ Array.isArray(feedback) }>
<>
{
Array.isArray(feedback) && feedback.map((response, index) => (
<div key={index} onClick={() => handleOpenError(response)}>
<RenderIf condition={response.type === 'Error'}>
<div className={`circuit_feedback ${response.type.toLowerCase()} alert alert-danger`} data-id="circuit_feedback">
<FeedbackAlert
message={response.message + (response.labels[0] ? ": " + response.labels[0].message + ` ${filePathToId[response.labels[0].file_id]}:${response.labels[0].range.start}:${response.labels[0].range.end}` : '')}
askGPT={ () => handleAskGPT(response) } />
</div>
</RenderIf>
<RenderIf condition={(response.type === 'Warning') && !hideWarnings}>
<div className={`circuit_feedback ${response.type.toLowerCase()} alert alert-warning`} data-id="circuit_feedback">
<FeedbackAlert
message={response.message}
askGPT={() => { handleAskGPT(response) }} />
</div>
</RenderIf>
</div>
)
)
}
</>
</RenderIf>
</div>
) : <></>
}
</div>
)
}
32 changes: 32 additions & 0 deletions libs/remix-ui/helper/src/lib/components/feedbackAlert.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { useState } from 'react'
import { FeedbackAlertProps } from '../types'
import { RenderIf } from '@remix-ui/helper'
import {CopyToClipboard} from '@remix-ui/clipboard'

export function FeedbackAlert ({ message, askGPT }: FeedbackAlertProps) {
const [ showAlert, setShowAlert] = useState<boolean>(true)

const handleCloseAlert = () => {
setShowAlert(false)
}

return (
<RenderIf condition={showAlert}>
<>
<span> { message } </span>
<div className="close" data-id="renderer" onClick={handleCloseAlert}>
<i className="fas fa-times"></i>
</div>
<div className="d-flex pt-1 flex-row-reverse">
<span className="ml-3 pt-1 py-1" >
<CopyToClipboard content={message} className="p-0 m-0 far fa-copy error" direction={'top'} />
</span>
<span className="border border-success text-success btn-sm" onClick={(e) => {
e.stopPropagation()
askGPT()
}}>Ask RemixAI</span>
</div>
</>
</RenderIf>
)
}
3 changes: 2 additions & 1 deletion libs/remix-ui/helper/src/lib/remix-ui-helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,8 @@ export const getPathIcon = (path: string) => {
? 'fad fa-brackets-curly' : path.endsWith('.cairo')
? 'small fa-kit fa-cairo' : path.endsWith('.circom')
? 'fa-kit fa-circom' : path.endsWith('.nr')
? 'fa-kit fa-noir' : 'far fa-file'
? 'fa-kit fa-noir' : path.endsWith('.toml')
? 'fad fa-cog': 'far fa-file'
}

export const isNumeric = (value) => {
Expand Down

0 comments on commit 9f7017b

Please sign in to comment.