feat(agenty&vscode): side panel

TabbyML · Apr 26, 2024 · 5f730d1 · 5f730d1
1 parent 19b9148
commit 5f730d1
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 4 deletions.
diff --git a/clients/vscode/package.json b/clients/vscode/package.json
@@ -28,7 +28,8 @@
     "Other"
   ],
   "activationEvents": [
-    "onStartupFinished"
+    "onStartupFinished",
+    "onView:myextension-sidebar"
   ],
   "main": "./dist/node/extension.js",
   "browser": "./dist/web/extension.js",
@@ -228,7 +229,27 @@
         "key": "escape",
         "when": "inlineSuggestionVisible"
       }
-    ]
+    ],
+    "viewsContainers": {
+			"activitybar": [
+				{
+					"id": "myextension-sidebar-view",
+					"title": "My Extension",
+					"icon": "assets/logo.png"
+				}
+			]
+		},
+		"views": {
+			"myextension-sidebar-view": [
+				{
+					"type": "webview",
+					"id": "tabby.myextension-sidebar",
+					"name": "MyExtension",
+					"icon": "assets/logo.png",
+					"contextualTitle": "MyExtension"
+				}
+			]
+		}
   },
   "scripts": {
     "prebuild": "cd ../tabby-agent && yarn build",
@@ -246,6 +267,8 @@
   "devDependencies": {
     "@types/mocha": "^10.0.1",
     "@types/node": "18.x",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@types/vscode": "^1.82.0",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",
@@ -264,6 +287,8 @@
   "dependencies": {
     "@orama/orama": "^2.0.15",
     "@xstate/fsm": "^2.0.1",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "tabby-agent": "1.5.0"
   }
 }
diff --git a/clients/vscode/src/App.tsx b/clients/vscode/src/App.tsx
@@ -0,0 +1,91 @@
+import * as vscode from "vscode";
+
+export default class SidebarProvider implements vscode.WebviewViewProvider {
+    _view?: vscode.WebviewView;
+    _doc?: vscode.TextDocument;
+
+    constructor(private readonly _extensionUri: vscode.Uri) { }
+
+    public resolveWebviewView(webviewView: vscode.WebviewView) {
+        this._view = webviewView;
+
+        webviewView.webview.options = {
+            // Allow scripts in the webview
+            enableScripts: true,
+
+            localResourceRoots: [this._extensionUri],
+        };
+
+        webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
+
+        // Listen for messages from the Sidebar component and execute action
+        webviewView.webview.onDidReceiveMessage(async (data) => {
+            switch (data.type) {
+                // case "onSomething: {
+                //     // code here...
+                //     break;
+                // }
+                case "onInfo": {
+                    if (!data.value) {
+                        return;
+                    }
+                    vscode.window.showInformationMessage(data.value);
+                    break;
+                }
+                case "onError": {
+                    if (!data.value) {
+                        return;
+                    }
+                    vscode.window.showErrorMessage(data.value);
+                    break;
+                }
+            }
+        });
+
+    }
+
+    public revive(panel: vscode.WebviewView) {
+        this._view = panel;
+    }
+
+    private _getHtmlForWebview(webview: vscode.Webview) {
+        const styleResetUri = webview.asWebviewUri(
+            vscode.Uri.joinPath(this._extensionUri, "media", "reset.css")
+        );
+        const styleVSCodeUri = webview.asWebviewUri(
+            vscode.Uri.joinPath(this._extensionUri, "media", "vscode.css")
+        );
+        const scriptUri = webview.asWebviewUri(
+            vscode.Uri.joinPath(this._extensionUri, "out", "compiled/sidebar.js")
+        );
+        const styleMainUri = webview.asWebviewUri(
+            vscode.Uri.joinPath(this._extensionUri, "out", "compiled/sidebar.css")
+        );
+
+        // Use a nonce to only allow a specific script to be run.
+        const nonce = getNonce();
+
+        return `<!DOCTYPE html>
+			<html lang="en">
+			<head>
+				<meta charset="UTF-8">
+
+				<meta name="viewport" content="width=device-width, initial-scale=1.0">
+				
+
+			</head>
+            <body>
+				<p>hahahha</p>
+			</body>
+			</html>`;
+    }
+}
+
+function getNonce() {
+    let text = '';
+    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    for (let i = 0; i < 32; i++) {
+        text += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
+    return text;
+}
diff --git a/clients/vscode/src/extension.ts b/clients/vscode/src/extension.ts
@@ -1,6 +1,8 @@
 // The module 'vscode' contains the VS Code extensibility API
 // Import the module and reference it with the alias vscode in your code below
-import { ExtensionContext, commands, languages, workspace } from "vscode";
+import { ExtensionContext, commands, languages, workspace, window, ViewColumn, Uri } from "vscode";
+import App from './App';
+import path from "path";
 import { logger } from "./logger";
 import { createAgentInstance, disposeAgentInstance } from "./agent";
 import { tabbyCommands } from "./commands";
@@ -16,6 +18,16 @@ export async function activate(context: ExtensionContext) {
   const completionProvider = new TabbyCompletionProvider();
   context.subscriptions.push(languages.registerInlineCompletionItemProvider({ pattern: "**" }, completionProvider));
 
+  // testing
+  // Register the Sidebar Panel
+	const sidebarProvider = new App(context.extensionUri);
+	context.subscriptions.push(
+		window.registerWebviewViewProvider(
+			"tabby.myextension-sidebar",
+			sidebarProvider
+		)
+	);
+
   const collectSnippetsFromRecentChangedFilesConfig =
     agent.getConfig().completion.prompt.collectSnippetsFromRecentChangedFiles;
   if (collectSnippetsFromRecentChangedFilesConfig.enabled) {

diff --git a/clients/vscode/tsconfig.json b/clients/vscode/tsconfig.json
@@ -3,6 +3,7 @@
     "module": "commonjs",
     "target": "ES2020",
     "lib": ["ES2020", "dom"],
+    "jsx": "react",
     "sourceMap": true,
     "strict": true,
     "noImplicitReturns": true,

diff --git a/clients/vscode/tsup.config.ts b/clients/vscode/tsup.config.ts
@@ -58,5 +58,5 @@ export default () => [
       }),
     ],
     clean: true,
-  }),
+  })
 ];
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,5 +58,5 @@ export default () => [ @@
           }),
         ],
         clean: true,
-      }),
+      })
     ];