DocsSQL Editor ExtensionsExtension - AIWidget

@tidbcloud/codemirror-extension-ai-widget

A codemirror extension provides a widget to chat with AI to help you write or refine SQL. (will support to work with other languages later)

Features

  • Show placeholder when doc is empty or starting write a new SQL statement
  • Show tooltip hint when select content
  • Easy to use prompt input widget to chat with AI
  • Show diff view to compare the result and the original content

Installation

npm install @tidbcloud/codemirror-extension-ai-widget

You need to install its peer dependencies as well:

npm install @codemirror/view @codemirror/state @codemirror/merge @codemirror/lang-sql @tidbcloud/codemirror-extension-sql-parser @tidbcloud/codemirror-extension-cur-sql

Usage

import { sql, MySQL } from '@codemirror/lang-sql'
import { sqlParser } from '@tidbcloud/codemirror-extension-sql-parser'
import { curSql } from '@tidbcloud/codemirror-extension-cur-sql'
import { aiWidget } from '@tidbcloud/codemirror-extension-ai-widget'
 
// add extensions to your editor created by getting started
const extensions = [
  // ...other extensions,
  sql({ dialect: MySQL }),
  sqlParser(),
  curSql(),
  aiWidget({
    chat: async () => {
      // replace it by yourself chat to AI api in production
      await delay(2000)
      return { status: 'success', message: 'select * from test;' }
    },
    cancelChat: () => {},
    getDbList: () => {
      return ['test1', 'test2']
    }
  })
]

API

type ChatReq = {
  prompt: string
  refContent: string
  extra?: any
}
 
type ChatRes = {
  status: 'success' | 'error'
  message: string
  extra?: any
}
 
type AiWidgetOptions = {
  // hotkey to trigger ai widget, default is 'Mod-i'
  hotkey?: string
 
  // prompt input configuration
  // default: 'AI results may be incorrect'
  promptInputTipsNormal?: string
  // default: 'Fetching results...'
  promptInputTipsRequesting?: string
  // default: 'Ask AI to write anything...'
  promptInputPlaceholderNormal?: string
  // default: 'Error occurred. Please try to regenerate or input another instruction.'
  promptInputPlaceholderError?: string
 
  // placeholder configuration
  // default: 'Press 'Command + I' or <span>click here</span> to use AI'
  placeholderEmptyDocElement?: string
  // default: 'Press 'Command + I' to use AI'
  placeholderNormalElement?: string
 
  // tooltip hint configuration
  // default: 'Press <code><b>Command</b> + <b>I</b></code> to rewrite SQL by AI'
  tooltipHintElement?: string
 
  /* chat with AI */
  chat: (view: EditorView, chatId: string, req: ChatReq) => Promise<ChatRes>
  cancelChat: (chatId: string) => void
 
  /* event callback, for telemetry if you need */
  onEvent?: (view: EditorView, type: EventType, payload?: {}) => void
 
  /* for auto add `use {db};` statement if miss it */
  getDbList: () => string[]
}
 
function aiWidget(options: AiWidgetOptions): Extension
 
/* check whether prompt input widget is active */
function isPromptInputActive(state: EditorState): boolean
 
/* check whether diff view is active */
function isUnifiedMergeViewActive(state: EditorState): boolean
 
/* trigger the prompt input widget to show */
function activePromptInput(
  view: EditorView,
  defPrompt?: string,
  immediate?: boolean,
  /**
  Where is this method called from,
  the value maybe: 'hotkey', 'placeholder', 'fix_sql_button', ...
  default value is 'hotkey'
  */
  source?: string,
  pos?: Pos
): void

demo

demo video

Try it

You can try all the extensions playground at here & the AI-widget extension at here.