AskGPT

apps/circuit-compiler/src/app/components/container.tsx

@@ -58,6 +58,29 @@ export function Container () {
     circuitApp.dispatch({ type: 'SET_HIDE_WARNINGS', payload: value })
   }
 
+  const askGPT = async (error: string, location?: string) => {
+    if (location) {
+      const fullPathLocation = await circuitApp.plugin.resolveReportPath(location)
+      const content = await circuitApp.plugin.call('fileManager', 'readFile', fullPathLocation)
+      const message = `
+        solidity code: ${content}
+        error message: ${error}
+        explain why the error occurred and how to fix it.
+        `
+      // @ts-ignore
+      await circuitApp.plugin.call('openaigpt', 'message', message)
+    } else if(error) {
+      const message = `
+        error message: ${error}
+        explain why the error occurred and how to fix it.
+        `
+      // @ts-ignore
+      await circuitApp.plugin.call('openaigpt', 'message', message)
+    } else {
+      console.error('unable to askGtp, no message provided')
+    }
+  }
+
   return (
     <section>
       <article>
@@ -86,7 +109,7 @@ export function Container () {
               </WitnessToggler>
             </RenderIf>
             <RenderIf condition={(circuitApp.appState.status !== 'compiling') && (circuitApp.appState.status !== 'computing') && (circuitApp.appState.status !== 'generating')}>
-              <CompilerFeedback feedback={circuitApp.appState.feedback} filePathToId={circuitApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={circuitApp.appState.hideWarnings} />
+              <CompilerFeedback feedback={circuitApp.appState.feedback} filePathToId={circuitApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={circuitApp.appState.hideWarnings} askGPT={askGPT} />
             </RenderIf>
           </div>
         </div>

apps/circuit-compiler/src/app/components/feedback.tsx

@@ -4,7 +4,7 @@ import { RenderIf } from '@remix-ui/helper'
 import {CopyToClipboard} from '@remix-ui/clipboard'
 import { FeedbackAlert } from './feedbackAlert'
 
-export function CompilerFeedback ({ feedback, filePathToId, hideWarnings, openErrorLocation }: CompilerFeedbackProps) {
+export function CompilerFeedback ({ feedback, filePathToId, hideWarnings, openErrorLocation, askGPT }: CompilerFeedbackProps) {
   const [ showException, setShowException ] = useState<boolean>(true)
 
   const handleCloseException = () => {
@@ -17,6 +17,10 @@ export function CompilerFeedback ({ feedback, filePathToId, hideWarnings, openEr
     }
   }
 
+  const handleAskGPT = (message: string, location?: string) => {
+    askGPT(message, location)
+  }
+
   return (
     <div>
       <div className="circuit_errors_box py-4">
@@ -40,12 +44,18 @@ export function CompilerFeedback ({ feedback, filePathToId, hideWarnings, openEr
                 <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} location={ response.labels[0] ? response.labels[0].message + ` ${filePathToId[response.labels[0].file_id]}:${response.labels[0].range.start}:${response.labels[0].range.end}` : null} />
+                      <FeedbackAlert
+                        message={response.message}
+                        location={ response.labels[0] ? response.labels[0].message + ` ${filePathToId[response.labels[0].file_id]}:${response.labels[0].range.start}:${response.labels[0].range.end}` : null}
+                        askGPT={ () => handleAskGPT(filePathToId[response.labels[0].file_id], filePathToId[response.labels[0].message]) } />
                     </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} location={null} />
+                      <FeedbackAlert
+                        message={response.message}
+                        location={null}
+                        askGPT={() => { handleAskGPT(response.message) }} />
                     </div>
                   </RenderIf>
                 </div>

apps/circuit-compiler/src/app/components/feedbackAlert.tsx

@@ -3,7 +3,7 @@ import { FeedbackAlertProps } from '../types'
 import { RenderIf } from '@remix-ui/helper'
 import {CopyToClipboard} from '@remix-ui/clipboard'
 
-export function FeedbackAlert ({ message, location }: FeedbackAlertProps) {
+export function FeedbackAlert ({ message, location, askGPT }: FeedbackAlertProps) {
   const [ showAlert, setShowAlert] = useState<boolean>(true)
 
   const handleCloseAlert = () => {
@@ -24,6 +24,7 @@ export function FeedbackAlert ({ message, location }: FeedbackAlertProps) {
           <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={askGPT}>ASK GPT</span>
         </div>
       </>
     </RenderIf>

apps/circuit-compiler/src/app/services/circomPluginClient.ts

@@ -124,7 +124,7 @@ export class CircomPluginClient extends PluginClient {
   async compile(path: string, compilationConfig?: CompilationConfig): Promise<void> {
     this.internalEvents.emit('circuit_compiling_start')
     // @ts-ignore
-    this.call('terminal', 'log', { type: 'info', value: 'Compiling ' + path })
+    this.call('terminal', 'log', { type: 'log', value: 'Compiling ' + path })
     const [parseErrors, filePathToId] = await this.parse(path)
 
     if (parseErrors && (parseErrors.length > 0)) {
@@ -172,7 +172,6 @@ export class CircomPluginClient extends PluginClient {
       } else {
         this.internalEvents.emit('circuit_compiling_done', [])
       }
-      // @ts-ignore
       circuitApi.log().map(log => {
         log && this.call('terminal', 'log', { type: 'log', value: log })  
       })
@@ -184,7 +183,7 @@ export class CircomPluginClient extends PluginClient {
   async generateR1cs (path: string, compilationConfig?: CompilationConfig): Promise<void> {
     this.internalEvents.emit('circuit_generating_r1cs_start')
     // @ts-ignore
-    this.call('terminal', 'log', { type: 'info', value: 'Generating R1CS for ' + path })
+    this.call('terminal', 'log', { type: 'log', value: 'Generating R1CS for ' + path })
     const [parseErrors, filePathToId] = await this.parse(path)
 
     if (parseErrors && (parseErrors.length > 0)) {
@@ -221,7 +220,6 @@ export class CircomPluginClient extends PluginClient {
   
       // @ts-ignore
       await this.call('fileManager', 'writeFile', writePath, r1csProgram, true)
-      // @ts-ignore
       r1csApi.log().map(log => {
         log && this.call('terminal', 'log', { type: 'log', value: log })  
       })

apps/circuit-compiler/src/app/types/index.ts

@@ -1,6 +1,6 @@
 import { compiler_list } from 'circom_wasm'
 import {Dispatch} from 'react'
-import { CircomPluginClient } from '../services/circomPluginClient'
+import type { CircomPluginClient } from '../services/circomPluginClient'
 
 export type CompilerStatus = "compiling" | "generating" | "computing" | "idle" | "errored" | "warning"
 export interface ICircuitAppContext {
@@ -51,7 +51,8 @@ export type CompilerFeedbackProps = {
   feedback: string | CompilerReport[],
   filePathToId: Record<string, string>,
   openErrorLocation: (location: string, startRange: string) => void,
-  hideWarnings: boolean
+  hideWarnings: boolean,
+  askGPT: (message: string, location?: string) => void
 }
 
 export type CompilerReport = {
@@ -71,7 +72,8 @@ export type CompilerReport = {
 
 export type FeedbackAlertProps = {
   message: string,
-  location: string
+  location: string,
+  askGPT: () => void
 }
 
 export type ConfigurationsProps = {

yarn.lock

@@ -10539,7 +10539,7 @@ circom_runtime@0.1.22:
 
 "circom_wasm@https://github.com/ioedeveloper/circom_wasm.git":
   version "0.2.0"
-  resolved "https://github.com/ioedeveloper/circom_wasm.git#68473f2c1166d96e73513b0a2aac1afcd30b0111"
+  resolved "https://github.com/ioedeveloper/circom_wasm.git#e558f8a449ac12151e735c6923c65f33b9b953ff"
 
 circular-json@^0.3.0:
   version "0.3.3"