Show code explanation in sidebar panel.

rubberduck-ai · Jan 26, 2023 · 8e82b12 · 8e82b12
1 parent ed6ea5a
commit 8e82b12
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 2 deletions.
diff --git a/app/vscode/asset/package.json b/app/vscode/asset/package.json
@@ -43,6 +43,24 @@
         "category": "Rubberduck",
         "icon": "$(comment-discussion)"
       }
-    ]
+    ],
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "rubberduck",
+          "title": "Rubberduck",
+          "icon": "media/extension-icon.png"
+        }
+      ]
+    },
+    "views": {
+      "rubberduck": [
+        {
+          "id": "rubberduck.chat",
+          "name": "Chat",
+          "type": "webview"
+        }
+      ]
+    }
   }
 }
diff --git a/lib/vscode-extension/src/extension.ts b/lib/vscode-extension/src/extension.ts
@@ -1,12 +1,26 @@
 import axios from "axios";
 import * as vscode from "vscode";
 import { ApiKeyManager } from "./ApiKeyManager";
+import { WebviewContainer } from "./webview/WebviewContainer";
 
 export const activate = async (context: vscode.ExtensionContext) => {
   const apiKeyManager = new ApiKeyManager({
     secretStorage: context.secrets,
   });
 
+  let webviewPanel: WebviewContainer | undefined;
+  const chatPanel: vscode.WebviewViewProvider = {
+    async resolveWebviewView(webviewView: vscode.WebviewView) {
+      webviewPanel = new WebviewContainer({
+        webview: webviewView.webview,
+      });
+    },
+  };
+
+  context.subscriptions.push(
+    vscode.window.registerWebviewViewProvider("rubberduck.chat", chatPanel)
+  );
+
   context.subscriptions.push(
     vscode.commands.registerCommand(
       "rubberduck.enterOpenAIApiKey",
@@ -64,7 +78,8 @@ export const activate = async (context: vscode.ExtensionContext) => {
 
       const completion = response.data.choices[0].text;
 
-      console.log(`Explanation: ${completion}`);
+      await vscode.commands.executeCommand("rubberduck.chat.focus");
+      await webviewPanel?.update(completion);
     })
   );
 };

diff --git a/lib/vscode-extension/src/webview/WebviewContainer.ts b/lib/vscode-extension/src/webview/WebviewContainer.ts
@@ -0,0 +1,24 @@
+import * as vscode from "vscode";
+
+export class WebviewContainer {
+  private readonly webview: vscode.Webview;
+
+  constructor({ webview }: { webview: vscode.Webview }) {
+    this.webview = webview;
+    this.update("");
+  }
+
+  async update(content: string) {
+    this.webview.html = `<!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none';" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </head>
+      <body>
+      ${content}
+      </body>
+    </html>`;
+  }
+}