Démarrage d'une interface utilisateur d'extension VSCode pour DBChat (partie 7)

Ce tutoriel poursuit le développement de DBChat, une extension VSCode utilisant le chat AI pour interagir avec les bases de données. Les parties précédentes couvraient la configuration d'un REPL, d'une connexion à une base de données et de l'intégration LSP. Cet épisode se concentre sur la création d'une interface utilisateur (UI) dans VSCode pour gérer les connexions à la base de données.

L'objectif est d'ajouter un bouton dans la barre latérale gauche lançant une vue de discussion pour l'exploration de la base de données. Puisque le curseur occupe la barre latérale droite, DBChat résidera à gauche. La vue chat nécessite des connexions à la base de données, gérées via un fichier de configuration ~/.dbchat.toml (introduit dans la partie 4). Cette partie crée une interface utilisateur pour modifier ce fichier.

L'interface utilisateur comprendra :

1. Une liste des connexions à la base de données existantes.
2. Un bouton " " pour ajouter de nouvelles connexions, ouvrant un formulaire "Ajouter une connexion".

Le package.json mis à jour enregistre les composants nécessaires :

1. viewsContainers : Définit le bouton de la barre latérale dans la barre d'activité.
2. views : Définit le panneau (webview) associé au bouton.
3. menus : Ajoute un bouton " " à la barre de titre du panneau.

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

L'interface de l'extension (HTML, CSS et JavaScript) est structurée comme suit : une vue principale vide, un formulaire de connexion et un sélecteur pour afficher l'une ou l'autre vue. Le code utilise l'API VSCode pour gérer la communication entre l'extension et la vue Web. Une classe DBChatPanel gère la vue et interagit avec l'API VSCode. Actuellement, la fonction _saveConnection est un espace réservé.

Une simple image de démonstration montre l'interface utilisateur initiale. Les étapes futures consistent à rendre l'interface utilisateur de connexion dynamique, à mettre à jour ~/.dbchat.toml et à acheminer les requêtes de discussion via le backend LSP.

Suivez @shrsv23 pour les mises à jour.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!