@astii/monaco-chat

inline AI chat tool for monaco-editor. with tool can use any model which response based on SSE

Install

$ npm install @astii/monaco-chat

Usage

import { registerChat } from "@astii/monaco-chat";

useEffect(() => {
  if (!monaco || !editor) return;
  const dispose = registerChat(monaco, editor, {
    language: "typescript",
    request: new Request("", {
      method: "POST",
      headers: {
        "x-dmo-provider": "",
        authorization: "Bearer ",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "",
        stream: true,
        temperature: 0.1,
      }),
    }),
    onAgree() {},
    onOppose() {},
  });
  return () => {
    dispose();
  };
}, [monaco, editor]);

with the Request params, developer can request custom model service

Options

| Name | Type | Default | Required | Description | | -------- | ---------------------------- | ------- | -------- | ------------------------ | | request | Request | - | ✅ | AI request | | tools | (keyof typeof TOOL_TYPE)[] | - | | inbuilt tools | | action | Record<string, Action> | - | | actions | | duration | number | 500ms | | duration of action bar |

Types

enum TOOL_TYPE {
  SPEAK = "SPEAK",
  COPY = "COPY",
  AGREE = "AGREE",
  OPPOSE = "OPPOSE",
  REFRESH = "REFRESH",
}

type Action = {
  key?: string;
  title: string;
  prompt: string;
  action?: (params: {
    event: monaco.IMouseEvent;
    target: monaco.editor.IMouseTarget;
    [key: string]: unknown;
  }) => void;
};

const defaultAction = {
  "code-explanation": {
    title: "代码解释",
    prompt: "请解释这段代码",
  },
  "code-optimization": {
    title: "代码优化",
    prompt: "请优化这段代码",
  },
  "code-comment": {
    title: "代码注释",
    prompt: "请给这段代码添加注释",
  },
};

LICENSE

MIT