co:here codecrush

About

Proyecto hecho para la hackaton de midudev en colaboración con co:here.

Usando mi propio editor de código llamado codecrush que ahora mismo esta en la versión 0.0.5 y decidí poner a prueba el sistema de plugins. Entonces a contnuación voy a explicar como lo hice.

La idea es extender el autocompletado que trae el editor por defecto que es bastante limitado.

Extendiendo el editor

Para crear una extensión del editor tenemos que importar Component desde el core package de codecrush y crear una clase extendiéndola con el Component

AiAutocompletion.ts

import { Component } from "codecrush-core";
export class CohereAutoCompletion extends Component {
  constructor() {
    super("cohere-autocompletion");
  }
}

Petición a co:here

Creamos la función que se va a encargar de hacer el fetching de datos. La misma recibe como parámetro la palabra actual sobre la cual está posicionado el cursor del editor. Lo cual es algo que el mismo editor nos lo da.

AiAutocompletion.ts

import { Component } from "codecrush-core";
export class CohereAutoCompletion extends Component {
  signal: AbortController | null;
  constructor() {
    super("cohere-autocompletion");
    this.signal = null;
  }
  async fetchAutoCompletions(currentWord: string) {
    this.signal = new AbortController();
    return fetch("https://api.cohere.ai/generate", {
      method: "POST",
      headers: {
        "Cohere-Version": "2022-12-06",
        accept: "application/json",
        authorization: `Bearer ${process.env.NEXT_PUBLIC_COHERE_TOKEN}`,
        "content-type": "application/json",
      },
      signal: this.signal.signal,
      body: JSON.stringify({
        max_tokens: 100,
        return_likelihoods: "NONE",
        truncate: "END",
        prompt: `this program returns text autocompletions for code editor, it can have multiple autocompletions and should only return javascript code like this
  --
  input:spl
  autocompletion:splice,slice
  --
  input:con
  autocompletion:const,console,continue
  --
  input:for
  autocompletion:for(let i = 0; i < array.length, i++),forEach,for(const a in array)
  --
  input:${currentWord}
  autocompletion:`,
        temperature: 0.2,
        k: 0,
        p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
        stop_sequences: ["--"],
      }),
    });
  }
}

Accediendo a los componentes por defecto del editor

En este ejemplo vamos a tener que usar dos componentes del editor

autocompletion: Para añadir los resultados cuando co:here nos traiga los datos.
activity-bar: Para añadir el evento a la barra de actividades y dar feedback al usuario de cuando se esta haciendo la petición a co:here

El editor tiene una función llamada getComponent con la que accederemos a esos componentes. Así como el siguiente ejemplo en el que registraremos algo en la barra de actividades.

import { ActivityBarComponent } from "codecrush-core";
const activityBar = this.editor.getComponent<ActivityBarComponent>("activity-bar");
activityBar.registerActivity(
        "cohere-activity", // -> Id para la actividad
        `co:here -> (${completion.currentWord})`, // -> Texto que deseamos poner
        true // -> True si queremos que aparezca un spinner
      );

Importamos desde el core package ActivityBarComponent para tener autocompletado sobre las funciones que ya trae activityBar.

En nuestro componente lo haremos creando una función init que va a ser la que va inicializar getResultsFromAi usando debounce y la que va añadir los resultados al editor también.

AiAutocompletion.ts

import {
  ActivityBarComponent,
  AutocompletionComponent,
  Component,
} from "codecrush-core";
import debounce from "@/utils/debounce";
export class CohereAutoCompletion extends Component {
  getResultsFromAi: () => void | null;
  signal: AbortController | null;
  constructor() {
    super("cohere-autocompletion");
    this.signal = null;
    this.getResultsFromAi = () => {}
    this.init();
  }
  init() {
    this.getResultsFromAi = debounce(() => {
      if (!process.env.NEXT_PUBLIC_COHERE_TOKEN) return;
      const completion =
        this.editor.getComponent<AutocompletionComponent>("autocompletion");
      const activityBar =
        this.editor.getComponent<ActivityBarComponent>("activity-bar");
      if (this.signal) {
        this.signal.abort();
        this.signal = null;
      }
      activityBar.registerActivity(
        "cohere-activity",
        `co:here -> (${completion.currentWord})`,
        true
      );
      this.fetchAutoCompletions(completion.currentWord)
        .then((res) => res.json())
        .then((data) => {
          const suggestions = data.generations[0].text
            .replace("\n", "")
            .replace("--", "")
            .split(",")
            .map((x: string) => x.trim())
            .filter((x: string) => x !== "");
          suggestions.forEach((item: string) => {
            completion.results.push({ suggestion: item, owner: "co:here" });
          });
          completion.render();
          activityBar.removeActivity("cohere-activity");
        })
        .catch(() => {
          activityBar.removeActivity("cohere-activity");
        });
    }, 500);
  }
  async fetchAutoCompletions(currentWord: string) {
    ...
  }
}

Editor events

Gracias a que estamos extendiendo la clase con Component, tenemos los dos eventos que vamos a ejecutar para pedir los resultados o en su defecto para cancelar la petición con el AbortController

AiAutocompletion.ts

import {
  ActivityBarComponent,
  AutocompletionComponent,
  Component,
} from "codecrush-core";
import debounce from "@/utils/debounce";
export class CohereAutoCompletion extends Component {
  getResultsFromAi: () => void | null;
  signal: AbortController | null;
  constructor() {
    super("cohere-autocompletion");
    this.signal = null;
    this.getResultsFromAi = () => {}
    this.init();
  }
  init() {
   ...
  }
  async fetchAutoCompletions(currentWord: string) {
    ...
  }
  onSearchSuggestions(): void {
    this.getResultsFromAi();
  }
  onAutoCompletionCancel(): void {
    if (this.signal) {
      this.signal.abort();
      this.signal = null;
    }
  }
}

Y con eso tendriamos un autocompletado extendido con co:here gracias a el sistema de plugins del editor.

React component

Para usar el componente que acabamos de crear simplemente se lo pasamos al Editor como prop.

YourComponent.tsx

import { CohereAutoCompletion } from "@/editorPlugins/AiAutocompletion";
import { Editor } from "codecrush-react";
export const EditorWrapper = () => {
  return (
    <Editor
      height={400}
      id="js-editor"
      theme="material-ocean"
      components={[CohereAutoCompletion]}
    />
  );
};