This tutorial continues the development of DBChat, a VSCode extension using AI chat to interact with databases. Previous parts covered setting up a REPL, database connection, and LSP integration. This installment focuses on creating a user interface (UI) within VSCode for managing database connections.

The goal is to add a left sidebar button launching a chat view for database exploration. Since Cursor occupies the right sidebar, DBChat will reside on the left. The chat view requires database connections, managed via a ~/.dbchat.toml configuration file (introduced in Part 4). This part builds a UI to edit this file.

The UI will consist of:

1. A list of existing database connections.
2. A " " button to add new connections, opening an "Add connection" form.

The updated package.json registers the necessary components:

1. viewsContainers: Defines the sidebar button in the activity bar.
2. views: Defines the panel (webview) associated with the button.
3. menus: Adds a " " button to the panel's title bar.

{
  "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"
  }
}

The extension's frontend (HTML, CSS, and JavaScript) is structured as follows: An empty main view, a connection form, and a switcher to display either view. The code uses the VSCode API to handle communication between the extension and the webview. A DBChatPanel class manages the view and interacts with the VSCode API. Currently, the _saveConnection function is a placeholder.

A simple demo image shows the initial UI. Future steps involve making the connection UI dynamic, updating ~/.dbchat.toml, and routing chat queries through the LSP backend.

Follow @shrsv23 for updates.

The above is the detailed content of Starting a VSCode Extension UI For DBChat (Part 7). For more information, please follow other related articles on the PHP Chinese website!