Merge pull request #29 from tidbcloud/chore/update-doc

doc: update README

README.md

@@ -2,28 +2,32 @@
 
 TiSQLEditor is a CodeMirror6 based SQL code editor which is used in TiDB Cloud Console.
 
-[Try Playground](https://tisqleditor-playground.netlify.app/)
+- [Try Playground](https://tisqleditor-playground.netlify.app/)
+- [Try Example](https://tisqleditor-playground.netlify.app/?example=all)
 
-![image](./packages/playground/public/playground.png)
+![image](./packages/playground/public/playground-2.png)
+
+https://github.com/tidbcloud/tisqleditor/assets/1284531/732b600f-5b4e-45d3-a3d2-26479bd59d11
 
 ## Features
 
 - Support edit multiple SQL files
 - Supply React component (Vue component wip)
 - Out of box extensions
-- AI Widget (wip)
+- AI Widget to chat with AI to help write or refine SQL
 
 ## Packages
 
 | package                                        | desc                                                                      |
 | ---------------------------------------------- | ------------------------------------------------------------------------- |
 | @tidbcloud/tisqleditor                         | SQLEditorInstance with pre-configured extensions                          |
 | @tidbcloud/tisqleditor-react                   | React component wrapper                                                   |
+| @tidbcloud/codemirror-extension-ai-widget      | a widget to chat with AI to help write or refine SQL by human language    |
 | @tidbcloud/codemirror-extension-sql-parser     | parse the editor content to SQL statements                                |
 | @tidbcloud/codemirror-extension-cur-sql        | get the selected SQL statements                                           |
 | @tidbcloud/codemirror-extension-cur-sql-gutter | show gutter for the selected SQL statements                               |
 | @tidbcloud/codemirror-extension-save-helper    | save the editor content if it changes                                     |
-| @tidbcloud/codemirror-extension-autocomplete   |                                                                           |
+| @tidbcloud/codemirror-extension-autocomplete   | refine the original @codemirror/autocomplete to provides better style     |
 | @tidbcloud/codemirror-extension-linters        |                                                                           |
 | @tidbcloud/codemirror-extension-events         |                                                                           |
 | @tidbcloud/codemirror-extension-themes         | 2 simple builtin themes, `bbedit` for light mode, `oneDark` for dark mode |
@@ -43,6 +47,10 @@ import {
   fullWidthCharLinter
 } from '@tidbcloud/codemirror-extension-linters'
 import { autoCompletion } from '@tidbcloud/codemirror-extension-autocomplete'
+import {
+  aiWidget,
+  isUnifiedMergeViewActive
+} from '@tidbcloud/codemirror-extension-ai-widget'
 
 export function Editor() {
   const {
@@ -57,6 +65,12 @@ export function Editor() {
     () => convertSchemaToSQLConfig(schema ?? []),
     [schema]
   )
+  const getDbListRef = useRef<() => string[]>()
+  getDbListRef.current = () => {
+    return schema?.map((d) => d.name) || []
+  }
+
+  const chatCtx = useChatContext()
 
   const activeFile = useMemo(
     () => openedFiles.find((f) => f.id === activeFileId),
@@ -72,9 +86,25 @@ export function Editor() {
           }
         }),
         autoCompletion(),
-        curSqlGutter(),
+        curSqlGutter({
+          whenHide: (view) => {
+            return isUnifiedMergeViewActive(view.state)
+          }
+        }),
         useDbLinter(),
-        fullWidthCharLinter()
+        fullWidthCharLinter(),
+        aiWidget({
+          chat(view, chatId, req) {
+            const db = getCurDatabase(view.state)
+            req['extra']['db'] = db
+            return chatCtx.chat(chatId, { ...req })
+          },
+          cancelChat: chatCtx.cancelChat,
+          onEvent(_view, type, payload) {
+            chatCtx.onEvent(type, payload)
+          },
+          getDbList: getDbListRef.current!
+        })
       ]
     }
     return []

packages/extensions/ai-widget/README.md

@@ -1,10 +1,15 @@
 # @tidbcloud/codemirror-extension-ai-widget
 
-// TODO: video
+This extension provides a widget to chat with AI to help you write or refine SQL by human language.
+
+https://github.com/tidbcloud/tisqleditor/assets/1284531/46684333-7efa-4925-bf58-9ab3fb45f692
 
 ## Features
 
-// TODO
+- 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
 
@@ -51,13 +56,13 @@ const editorView = new EditorView({
 type ChatReq = {
   prompt: string
   refContent: string
-  extra?: {}
+  extra?: any
 }
 
 type ChatRes = {
   status: 'success' | 'error'
   message: string
-  extra?: {}
+  extra?: any
 }
 
 type AiWidgetOptions = {
@@ -88,7 +93,7 @@ type AiWidgetOptions = {
   chat: (view: EditorView, chatId: string, req: ChatReq) => Promise<ChatRes>
   cancelChat: (chatId: string) => void
 
-  /* event call, for telemetry if you need */
+  /* event callback, for telemetry if you need */
   onEvent?: (view: EditorView, type: EventType, payload?: {}) => void
 
   /* for auto add `use {db};` statement if miss it */
@@ -99,8 +104,10 @@ 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,

packages/playground/src/examples/editor-example.tsx

@@ -10,7 +10,10 @@ import {
   fullWidthCharLinter
 } from '@tidbcloud/codemirror-extension-linters'
 import { autoCompletion } from '@tidbcloud/codemirror-extension-autocomplete'
-import { aiWidget } from '@tidbcloud/codemirror-extension-ai-widget'
+import {
+  aiWidget,
+  isUnifiedMergeViewActive
+} from '@tidbcloud/codemirror-extension-ai-widget'
 import { delay } from '@/lib/delay'
 
 const EXAMPLE_SQL = `
@@ -75,7 +78,11 @@ export function EditorExample({
         return autoCompletion()
       }
       if (item === 'cur-sql-gutter') {
-        return curSqlGutter()
+        return curSqlGutter({
+          whenHide(view) {
+            return isUnifiedMergeViewActive(view.state)
+          }
+        })
       }
       if (item === 'use-db-linter') {
         return useDbLinter()