DBChat 用の VSCode 拡張 UI の開始 (パート 7)

このチュートリアルでは、AI チャットを使用してデータベースと対話する VSCode 拡張機能である DBChat の開発を続けます。 前のパートでは、REPL、データベース接続、LSP 統合のセットアップについて説明しました。この記事では、データベース接続を管理するための VSCode 内でのユーザー インターフェイス (UI) の作成に焦点を当てます。

目標は、データベース探索用のチャット ビューを起動する左側のサイドバー ボタンを追加することです。 Cursor は右側のサイドバーを占めるため、DBChat は左側に表示されます。 チャット ビューには、~/.dbchat.toml 構成ファイル (パート 4 で紹介) によって管理されるデータベース接続が必要です。 この部分は、このファイルを編集するための UI を構築します。

UI は次のもので構成されます:

1. 既存のデータベース接続のリスト。
2. 新しい接続を追加するための「 」ボタン。「接続の追加」フォームが開きます。

更新された package.json は、必要なコンポーネントを登録します:

1. viewsContainers: アクティビティ バーのサイドバー ボタンを定義します。
2. views: ボタンに関連付けられたパネル (Web ビュー) を定義します。
3. menus: パネルのタイトル バーに「 」ボタンを追加します。

<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>

拡張機能のフロントエンド (HTML、CSS、および JavaScript) は次のように構成されています: 空のメイン ビュー、接続フォーム、およびいずれかのビューを表示するスイッチャー。 このコードは、VSCode API を使用して、拡張機能と Web ビュー間の通信を処理します。 DBChatPanel クラスはビューを管理し、VSCode API と対話します。 現在、_saveConnection 関数はプレースホルダーです。

簡単なデモ画像は初期 UI を示しています。 今後の手順には、接続 UI の動的化、~/.dbchat.toml の更新、LSP バックエンドを介したチャット クエリのルーティングが含まれます。

@shrsv23 をフォローして最新情報を入手してください。

以上がDBChat 用の VSCode 拡張 UI の開始 (パート 7)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。