finish askGpt implementation. cleanup

apps/vyper/src/app/app.tsx

@@ -170,7 +170,7 @@ const App = () => {
               <VyperResult output={output} plugin={remixClient} />
             </>
           ) : output.status === 'failed' ? (
-            <CompileErrorCard output={output} askGpt={remixClient.askGpt} />
+            <CompileErrorCard output={output} plugin={remixClient} />
           ) : null}
         </article>
       </section>

apps/vyper/src/app/components/CompileErrorCard.tsx

@@ -1,7 +1,8 @@
 import {CopyToClipboard} from '@remix-ui/clipboard'
 import Reaact from 'react'
+import { RemixClient } from '../utils'
 
-export function CompileErrorCard(props: any) {
+export function CompileErrorCard(props: { output: any, plugin: RemixClient }) {
   return (
     <div
       id="vyperErrorResult"
@@ -18,16 +19,16 @@ export function CompileErrorCard(props: any) {
       >
         {props.output.message.trim()}
       </span>
-      {/* <div className="d-flex flex-column pt-3 align-items-end mb-2">
+      <div className="d-flex flex-column pt-3 align-items-end mb-2">
         <div>
-          <span className="border border-success text-success btn-sm" onClick={() => props.askGpt(props.output.message)}>
+          <span className="border border-success text-success btn-sm" onClick={async () => await props.plugin.askGpt(props.output.message)}>
             Ask GPT
           </span>
           <span className="ml-3 pt-1 py-1">
             <CopyToClipboard content={props.output.message} className={`p-0 m-0 far fa-copy alert alert-danger`} direction={'top'} />
           </span>
         </div>
-      </div> */}
+      </div>
     </div>
   )
 }

apps/vyper/src/app/utils/compiler.tsx

@@ -50,12 +50,10 @@ function parseErrorString(errorString) {
   // Split the string into lines
   let lines = errorString.trim().split('\n')
   // Extract the line number and message
-  console.log(lines)
   let message = errorString.trim()
   let targetLine = lines[2].split(',')
   let tline = lines[2].trim().split(' ')[1].split(':')
 
-  console.log('tline', tline)
   const errorObject = {
     status: 'failed',
     message: message,
@@ -192,7 +190,6 @@ export async function compile(url: string, contract: Contract): Promise<any> {
       method: 'Get'
     })).data
     result = parseErrorString(intermediate[0])
-    console.log('error payload', intermediate)
     return result
   }
   await new Promise((resolve) => setTimeout(() => resolve({}), 3000))
@@ -273,7 +270,6 @@ export async function compileContract(contract: string, compilerUrl: string, set
     // try {
     output = await compile(compilerUrl, _contract)
     if (output.status === 'failed') {
-      console.log('possible error', output)
       remixClient.changeStatus({
         key: 'failed',
         type: 'error',

apps/vyper/src/app/utils/remix-client.tsx

@@ -61,8 +61,16 @@ export class RemixClient extends PluginClient {
   }
 
   async askGpt(message: string) {
+    if (message.length === 0) {
+      this.client.call('terminal', 'log', { type: 'log', value: 'kindly send a proper message so I can respond please' })
+      return
+    }
     try {
-      await this.client.call('openaigpt', 'message', message)
+      const formattedMessage = `
+        ${message}
+        can you explain why this error occurred and how to fix it?
+      `
+      await this.client.call('openaigpt' as any, 'message', formattedMessage)
     } catch (err) {
       console.error('unable to askGpt')
       console.error(err)
@@ -153,4 +161,3 @@ export class RemixClient extends PluginClient {
 }
 
 export const remixClient = new RemixClient()
-// export const RemixClientContext = React.createContext(new RemixClient())