Memulakan UI Sambungan VSCode Untuk DBChat (Bahagian 7)

Tutorial ini meneruskan pembangunan DBChat, sambungan VSCode menggunakan sembang AI untuk berinteraksi dengan pangkalan data. Bahagian sebelumnya meliputi penyediaan REPL, sambungan pangkalan data dan penyepaduan LSP. Ansuran ini memfokuskan pada mencipta antara muka pengguna (UI) dalam VSCode untuk mengurus sambungan pangkalan data.

Matlamatnya adalah untuk menambah butang bar sisi kiri melancarkan paparan sembang untuk penerokaan pangkalan data. Memandangkan Kursor menduduki bar sisi kanan, DBChat akan berada di sebelah kiri. Paparan sembang memerlukan sambungan pangkalan data, diuruskan melalui fail konfigurasi ~/.dbchat.toml (diperkenalkan dalam Bahagian 4). Bahagian ini membina UI untuk mengedit fail ini.

UI akan terdiri daripada:

1. Senarai sambungan pangkalan data sedia ada.
2. Butang " " untuk menambah sambungan baharu, membuka borang "Tambah sambungan".

package.json yang dikemas kini mendaftarkan komponen yang diperlukan:

1. viewsContainers: Mentakrifkan butang bar sisi dalam bar aktiviti.
2. views: Mentakrifkan panel (pandangan web) yang dikaitkan dengan butang.
3. menus: Menambah butang " " pada bar tajuk panel.

<code class="language-json">{
  "name": "dbchat",
  "displayName": "DBChat",
  "description": "Explore and Evolve Databases With Simple AI Chat",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.96.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:dbchat.ping",
    "onView:dbchat.chatPanel"
  ],
  "main": "./dist/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "dbchat.ping",
        "title": "DBChat: Ping"
      },
      {
        "command": "dbchat.addConnection",
        "title": "Add Database Connection",
        "icon": "$(add)"
      }
    ],
    "viewsContainers": {
      "activitybar": [
        {
          "id": "dbchat-sidebar",
          "title": "DB Chat",
          "icon": "resources/database.svg"
        }
      ]
    },
    "views": {
      "dbchat-sidebar": [
        {
          "type": "webview",
          "id": "dbchat.chatPanel",
          "name": "DB Chat",
          "icon": "resources/database.svg"
        }
      ]
    },
    "menus": {
      "view/title": [
        {
          "command": "dbchat.addConnection",
          "when": "view == dbchat.chatPanel",
          "group": "navigation"
        }
      ]
    }
  },
  "scripts": {
    "vscode:prepublish": "npm run package",
    "compile": "npm run check-types && npm run lint && node esbuild.js",
    "watch": "npm-run-all -p watch:*",
    "watch:esbuild": "node esbuild.js --watch",
    "watch:tsc": "tsc --noEmit --watch --project tsconfig.json",
    "package": "npm run check-types && npm run lint && node esbuild.js --production",
    "compile-tests": "tsc -p . --outDir out",
    "watch-tests": "tsc -p . -w --outDir out",
    "pretest": "npm run compile-tests && npm run compile && npm run lint",
    "check-types": "tsc --noEmit",
    "lint": "eslint src",
    "test": "vscode-test"
  },
  "devDependencies": {
    "@types/vscode": "^1.96.0",
    "@types/mocha": "^10.0.10",
    "@types/node": "20.x",
    "@typescript-eslint/eslint-plugin": "^8.17.0",
    "@typescript-eslint/parser": "^8.17.0",
    "eslint": "^9.16.0",
    "esbuild": "^0.24.0",
    "npm-run-all": "^4.1.5",
    "typescript": "^5.7.2",
    "@vscode/test-cli": "^0.0.10",
    "@vscode/test-electron": "^2.4.1"
  }
}</code>

Halaman hadapan sambungan (HTML, CSS dan JavaScript) distrukturkan seperti berikut: Paparan utama kosong, borang sambungan dan penukar untuk memaparkan mana-mana paparan. Kod ini menggunakan API VSCode untuk mengendalikan komunikasi antara sambungan dan paparan web. Kelas DBChatPanel mengurus paparan dan berinteraksi dengan API VSCode. Pada masa ini, fungsi _saveConnection ialah pemegang tempat.

Imej demo ringkas menunjukkan UI awal. Langkah akan datang melibatkan menjadikan UI sambungan dinamik, mengemas kini ~/.dbchat.toml dan menghalakan pertanyaan sembang melalui bahagian belakang LSP.

Ikuti @shrsv23 untuk mendapatkan kemas kini.

Atas ialah kandungan terperinci Memulakan UI Sambungan VSCode Untuk DBChat (Bahagian 7). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!