@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
Try it
You can try all the extensions playground at here & the AI-widget extension at here.