Maison > interface Web > js tutoriel > Gérer la configuration TOML à partir de l'extension VSCode - DBChat Partie 8

Gérer la configuration TOML à partir de l'extension VSCode - DBChat Partie 8

Mary-Kate Olsen
Libérer: 2025-01-22 04:32:11
original
976 Les gens l'ont consulté

Shrijith Venkatrama, fondateur d'Hexmos, développe LiveAPI, un outil très pratique qui rationalise les flux de travail d'ingénierie en générant une excellente documentation API à partir de votre code en quelques minutes seulement.

Dans cette série de tutoriels, je construis moi-même DBChat - un outil simple pour explorer et améliorer les bases de données à l'aide du chat AI.

Voir l'article précédent pour plus de contexte :

  1. Construire DBChat - Explorez et améliorez votre base de données avec un simple chat (Partie 1)
  2. DBChat : Lancement d'un jouet REPL dans Golang (Partie 2)
  3. DBChat Partie 3 - Configuration, connexion et vidage de la base de données
  4. Discutez avec votre base de données avec DBChat et Gemini (Partie 4)
  5. Protocole de serveur de langage - Création de DBChat (Partie 5)
  6. Création d'une extension DBChat VSCode - Interaction Ping-Pong avec le backend LSP (Partie 6)
  7. Lancement de l'interface utilisateur de l'extension VSCode pour DBChat (Partie 7)

Créer une interface utilisateur du gestionnaire de connexions TOML pour DBChat dans l'extension VSCode

Dans l'article précédent, nous avons créé un cadre pour une interface utilisateur de chat simple et un formulaire de connexion à la base de données dans l'extension DBChat VSCode.

Dans cet article, je vais démontrer comment l'extension DBChat manipule la section [connections] du fichier de configuration ~/.dbchat.toml pour ajouter/mettre à jour/supprimer des entrées.

Pour vous rafraîchir la mémoire, le fichier de configuration doit avoir la structure suivante :

<code># DBChat 示例配置文件
# 将此文件复制到 ~/.dbchat.toml 并根据需要修改

[connections]
# 格式:name = "connection_string"
local = "postgresql://postgres:postgres@localhost:5432/postgres"
liveapi = "postgresql://user:pwd@ip:5432/db_name" 

[llm]
gemini_key = "the_key"</code>
Copier après la connexion

Résultats

Liste des connexions DBChat :

Manage TOML Configuration From VSCode Extension - DBChat Part 8

DBChat Ajouter/Modifier une connexion :

Manage TOML Configuration From VSCode Extension - DBChat Part 8

Pour les modifications et les mises à jour, nous avons également une invite de confirmation pour éviter les erreurs.

Gérer la demande de connexion de création

Tout d'abord, installez l'extension toml :

<code> npm install @iarna/toml</code>
Copier après la connexion

Nous recevons de nouvelles importations :

<code>import * as fs from 'fs/promises';
import * as path from 'path';
import * as os from 'os';
import * as TOML from '@iarna/toml';</code>
Copier après la connexion

La structure clé est un gestionnaire de messages qui recevra les événements pour les trois opérations :

<code>        const messageHandler = this._view.webview.onDidReceiveMessage(
            async (message) => {
                console.log('Received message:', message);
                switch (message.command) {
                    case 'saveConnection':
                        console.log('Processing saveConnection command');
                        const success = await this._saveConnection(message.name, message.connectionString);
                        if (success) {
                            console.log('Connection saved successfully, closing form');
                            this._showingConnectionForm = false;
                            this._updateView();
                        } else {
                            console.log('Connection not saved, keeping form open');
                        }
                        break;
                    case 'cancel':
                        console.log('Processing cancel command');
                        this._showingConnectionForm = false;
                        this._updateView();
                        break;
                    case 'editConnection':
                        this._showingConnectionForm = true;
                        this._editingConnection = message.name;
                        // First update the view to show the form
                        await this._updateView();
                        // Then send the prefill message after a short delay to ensure the form exists
                        setTimeout(() => {
                            this._view.webview.postMessage({ 
                                command: 'prefillForm', 
                                name: message.name, 
                                connectionString: message.connectionString 
                            });
                        }, 100);
                        break;
                    case 'deleteConnection':
                        const choice = await vscode.window.showWarningMessage(
                            `Are you sure you want to delete connection "${message.name}"?`,
                            'Yes',
                            'No'
                        );
                        if (choice === 'Yes') {
                            const deleted = await this._deleteConnection(message.name);
                            if (deleted) {
                                await this._updateView();  // Update view after successful deletion
                                vscode.window.showInformationMessage(`Connection "${message.name}" deleted successfully.`);
                            }
                        }
                        break;
                }
            }
        );

        // Add message handler to subscriptions for cleanup
        context.subscriptions.push(messageHandler);</code>
Copier après la connexion

Enregistrer une connexion est simple :

<code>    private async _saveConnection(name: string, connectionString: string): Promise<boolean> {
        console.log('Starting _saveConnection with:', { name, connectionString });
        try {
            const configPath = path.join(os.homedir(), 'dbchat.toml');
            console.log('Config path:', configPath);

            let config: any = {
                connections: {},
                llm: {}
            };
            console.log('Initial config structure:', config);

            // Read existing config if it exists
            try {
                console.log('Attempting to read existing config file...');
                const fileContent = await fs.readFile(configPath, 'utf-8');
                console.log('Existing file content:', fileContent);

                console.log('Parsing TOML content...');
                config = TOML.parse(fileContent);
                console.log('Parsed config:', config);

                // Ensure connections section exists
                config.connections = config.connections || {};
                console.log('Config after ensuring connections exist:', config);
            } catch (error: any) {
                console.log('Error reading config:', error);
                if (error.code !== 'ENOENT') {
                    console.error('Unexpected error reading config:', error);
                    throw error;
                }
                console.log('Config file does not exist, will create new one');
            }

            // Check if connection already exists
            if (config.connections[name]) {
                console.log(`Connection "${name}" already exists, showing confirmation dialog`);
                const choice = await vscode.window.showWarningMessage(
                    `Connection "${name}" already exists. Do you want to overwrite it?`,
                    'Yes',
                    'No'
                );
                console.log('User choice for overwrite:', choice);

                if (choice !== 'Yes') {
                    console.log('User declined to overwrite, returning false');
                    return false;
                }
            }

            // Update the connection
            config.connections[name] = connectionString;
            console.log('Updated config:', config);

            // Convert config to TOML and write back to file
            console.log('Converting config to TOML...');
            const tomlContent = TOML.stringify(config);
            console.log('Generated TOML content:', tomlContent);

            // Preserve the header comments
            const finalContent = `# DBChat Sample Configuration File
# Copy this file to ~/.dbchat.toml and modify as needed

${tomlContent}`;
            console.log('Final content to write:', finalContent);

            console.log('Writing to file...');
            await fs.writeFile(configPath, finalContent, 'utf-8');
            console.log('File written successfully');

            // Update view immediately after successful file write
            this._showingConnectionForm = false;
            console.log('Form hidden, updating view');
            this._updateView();

            await vscode.window.showInformationMessage(`Connection "${name}" saved successfully!`, { modal: false });
            return true;
        } catch (error) {
            console.error('Error in _saveConnection:', error);
            if (error instanceof Error) {
                console.error('Error stack:', error.stack);
            }
            await vscode.window.showErrorMessage(`Failed to save connection: ${error}`);
            return false;
        }
    }
</boolean></code>
Copier après la connexion

Liste des connexions

<code>    private async _getConnections(): Promise {
        try {
            const configPath = path.join(os.homedir(), 'dbchat.toml');
            const fileContent = await fs.readFile(configPath, 'utf-8');
            const config = TOML.parse(fileContent);
            return config.connections || {};
        } catch (error) {
            console.error('Error reading connections:', error);
            return {};
        }
    }</code>
Copier après la connexion

Supprimer la connexion

<code>    private async _deleteConnection(name: string): Promise<boolean> {
        try {
            const configPath = path.join(os.homedir(), 'dbchat.toml');
            const fileContent = await fs.readFile(configPath, 'utf-8');
            const config = TOML.parse(fileContent);

            if (!config.connections || !config.connections[name]) {
                await vscode.window.showErrorMessage(`Connection "${name}" not found.`);
                return false;
            }

            delete config.connections[name];

            const tomlContent = TOML.stringify(config);
            const finalContent = `# DBChat Sample Configuration File
# Copy this file to ~/.dbchat.toml and modify as needed

${tomlContent}`;

            await fs.writeFile(configPath, finalContent, 'utf-8');
            // Show message after file operations are complete
            vscode.window.showInformationMessage(`Connection "${name}" deleted successfully.`);
            return true;
        } catch (error) {
            console.error('Error deleting connection:', error);
            vscode.window.showErrorMessage(`Failed to delete connection: ${error}`);
            return false;
        }
    }
</boolean></code>
Copier après la connexion

C’est tout pour ce post. Grâce à cette structure, nous implémentons une liste de connexions à la base de données de base, des opérations d'ajout, de suppression et de mise à jour.

Prochaines étapes

Puisque nous disposons d'un mécanisme de configuration de base de données de base, nous travaillerons ensuite sur la possibilité de se connecter à des configurations spécifiques, d'obtenir des schémas, de discuter avec la base de données, etc. - en utilisant Golang LSP.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal