added matomo events for accepted completions

Author: STetsing

libs/remix-ui/editor/src/lib/providers/inlineCompletionProvider.ts

@@ -4,6 +4,7 @@ import { CompletionTimer } from './completionTimer';
 
 import axios, { AxiosResponse } from 'axios'
 import { slice } from 'lodash';
+import { activateService } from '@remixproject/plugin-utils';
 const _paq = (window._paq = window._paq || [])
 
 const controller = new AbortController();
@@ -14,6 +15,9 @@ export class RemixInLineCompletionProvider implements monacoTypes.languages.Inli
   props: EditorUIProps
   monaco: any
   completionEnabled: boolean
+  task: string
+  currentCompletion
+
   constructor(props: any, monaco: any) {
     this.props = props
     this.monaco = monaco
@@ -28,6 +32,7 @@ export class RemixInLineCompletionProvider implements monacoTypes.languages.Inli
       const lineRange = model.getFullModelRange().setStartPosition(lineNumber, 1).setEndPosition(lineNumber + 1, 1);
       return model.getValueInRange(lineRange);
     }
+
     // get text before the position of the completion
     const word = model.getValueInRange({
       startLineNumber: 1,
@@ -65,6 +70,7 @@ export class RemixInLineCompletionProvider implements monacoTypes.languages.Inli
         // use the code generation model, only take max 1000 word as context
         this.props.plugin.call('terminal', 'log', { type: 'aitypewriterwarning', value: 'Solcoder - generating code for following comment: ' + ask.replace('///', '') })
 
+        this.task = 'code_generation'
         const data = await this.props.plugin.call('solcoder', 'code_generation', word)
 
         const parsedData = data[0].trimStart() //JSON.parse(data).trimStart()
@@ -103,15 +109,16 @@ export class RemixInLineCompletionProvider implements monacoTypes.languages.Inli
     if (word.replace(/ +$/, '').endsWith('\n')){
       // Code insertion
       try {
+        this.task = 'code_insertion'
         const output = await this.props.plugin.call('solcoder', 'code_insertion', word, word_after)
         const generatedText = output[0] // no need to clean it. should already be
-
+        console.log('generatedText', generatedText)
         const item: monacoTypes.languages.InlineCompletion = {
           insertText: generatedText
         };
 
         this.completionEnabled = false
-        const handleCompletionTimer = new CompletionTimer(5000, () => { this.completionEnabled = true });
+        const handleCompletionTimer = new CompletionTimer(1000, () => { this.completionEnabled = true });
         handleCompletionTimer.start()
 
         return {
@@ -127,6 +134,7 @@ export class RemixInLineCompletionProvider implements monacoTypes.languages.Inli
     let result
     try {
       // Code completion
+      this.task = 'code_completion'
       const output = await this.props.plugin.call('solcoder', 'code_completion', word)
       const generatedText = output[0]
       let clean = generatedText
@@ -168,14 +176,15 @@ export class RemixInLineCompletionProvider implements monacoTypes.languages.Inli
   }
 
   handleItemDidShow?(completions: monacoTypes.languages.InlineCompletions<monacoTypes.languages.InlineCompletion>, item: monacoTypes.languages.InlineCompletion, updatedInsertText: string): void {
-
+    this.currentCompletion = { 'item':item, 'task':this.task }
+    _paq.push(['trackEvent', 'ai', 'solcoder', this.task + '_did_show'])
   }
   handlePartialAccept?(completions: monacoTypes.languages.InlineCompletions<monacoTypes.languages.InlineCompletion>, item: monacoTypes.languages.InlineCompletion, acceptedCharacters: number): void {
-
+    _paq.push(['trackEvent', 'ai', 'solcoder', this.task + '_partial_accept'])
   }
   freeInlineCompletions(completions: monacoTypes.languages.InlineCompletions<monacoTypes.languages.InlineCompletion>): void {
-
   }
+
   groupId?: string;
   yieldsToGroupIds?: string[];
   toString?(): string {

libs/remix-ui/editor/src/lib/remix-ui-editor.tsx

@@ -354,6 +354,8 @@ export const EditorUI = (props: EditorUIProps) => {
     }
   }, [props.currentFile])
 
+  const inlineCompletionProvider = new RemixInLineCompletionProvider(props, monacoRef.current)
+
   const convertToMonacoDecoration = (decoration: lineText | sourceAnnotation | sourceMarker, typeOfDecoration: string) => {
     if (typeOfDecoration === 'sourceAnnotationsPerFile') {
       decoration = decoration as sourceAnnotation
@@ -618,6 +620,12 @@ export const EditorUI = (props: EditorUIProps) => {
     }
   }
 
+  function handleAcceptedCompletion(completion, type: 'full' | 'partial') {
+    // Handle the accepted completion here
+    // For example, you might want to send analytics, update UI, etc.
+    console.log(`Handling ${type} completion:`, completion);
+  }
+
   function handleEditorDidMount(editor) {
     editorRef.current = editor
     defineAndSetTheme(monacoRef.current)
@@ -674,6 +682,17 @@ export const EditorUI = (props: EditorUIProps) => {
       }
     })
 
+    editor.onDidChangeModelContent((e) => {
+      if (inlineCompletionProvider.currentCompletion) {
+        const changes = e.changes;
+        // Check if the change matches the current completion
+        if (changes.some(change => change.text === inlineCompletionProvider.currentCompletion.item.insertText)) {
+          _paq.push(['trackEvent', 'ai', 'solcoder', inlineCompletionProvider.currentCompletion.task + '_accepted'])
+          inlineCompletionProvider.currentCompletion = null;
+        }
+      }
+    });
+
     // add context menu items
     const zoominAction = {
       id: 'zoomIn',
@@ -977,7 +996,7 @@ export const EditorUI = (props: EditorUIProps) => {
     monacoRef.current.languages.registerReferenceProvider('remix-solidity', new RemixReferenceProvider(props, monaco))
     monacoRef.current.languages.registerHoverProvider('remix-solidity', new RemixHoverProvider(props, monaco))
     monacoRef.current.languages.registerCompletionItemProvider('remix-solidity', new RemixCompletionProvider(props, monaco))
-    monacoRef.current.languages.registerInlineCompletionsProvider('remix-solidity', new RemixInLineCompletionProvider(props, monaco))
+    monacoRef.current.languages.registerInlineCompletionsProvider('remix-solidity', inlineCompletionProvider)
     monaco.languages.registerCodeActionProvider('remix-solidity', new RemixCodeActionProvider(props, monaco))
 
     loadTypes(monacoRef.current)