PearAI Inventory and Overlay (#24)

* ported, inventory showing up

* PearAI Inventory theming fixes

* Fixed theming and css for Inventory at last

* Fix tab text color

* Overlay injection through PearInventoryPanel. index.css seems to be injected, but not index.js? Overlay opens with only color and nothing.

* using extensionUri

* Either overlay or sidepart currently working. Directly resolve from existing continue webview provider instead of new panels.

* Adding a sidebar2 temporarily so that right side bar at least loads

* Working chat switch by having 2 webviews

* Fix terminal bug

* Working overlay webview with multiple webview chats (on top of nang change)

* remove prompt

* Remove vscode utility

* Remove useless file and logs

* Cleanup

* chat view id

* added unique identifier for overlay webview

* Working overlay chat simultaneous with other chats + fixed some UI for inventory

---------

Co-authored-by: himanshu <himanshusinghc2001@gmail.com>

docs/static/schemas/config.json

@@ -1291,7 +1291,7 @@
                 "Write a custom slash command at your own HTTP endpoint. Set 'url' in the params object for the endpoint you have setup.",
                 "Generate a commit message for the current changes",
                 "Review code and give feedback",
-                "Generate a React component using v0"
+                "Generate a component using v0"
               ]
             },
             {

extensions/intellij/src/main/resources/config_schema.json

@@ -1291,7 +1291,7 @@
                 "Write a custom slash command at your own HTTP endpoint. Set 'url' in the params object for the endpoint you have setup.",
                 "Generate a commit message for the current changes",
                 "Review code and give feedback",
-                "Generate a React component using v0"
+                "Generate a component using v0"
               ]
             },
             {

extensions/vscode/continue_rc_schema.json

@@ -1427,7 +1427,7 @@
                 "Write a custom slash command at your own HTTP endpoint. Set 'url' in the params object for the endpoint you have setup.",
                 "Generate a commit message for the current changes",
                 "Review code and give feedback",
-                "Generate a React component using v0"
+                "Generate a component using v0"
               ]
             },
             {

extensions/vscode/package.json

@@ -529,7 +529,8 @@
           "type": "webview",
           "id": "pearai.pearAIChatView",
           "name": "",
-          "visibility": "visible"
+          "visibility": "visible",
+          "title": "PearAISidebar"
         }
       ]
     },
@@ -641,4 +642,4 @@
     "ws": "^8.13.0",
     "yarn": "^1.22.21"
   }
-}
+}

extensions/vscode/src/ContinueGUIWebviewViewProvider.ts

@@ -5,11 +5,13 @@ import * as vscode from "vscode";
 import { getExtensionVersion } from "./util/util";
 import { getExtensionUri, getNonce, getUniqueId } from "./util/vscode";
 import { VsCodeWebviewProtocol } from "./webviewProtocol";
+import { PEARAI_CHAT_VIEW_ID } from "./extension/VsCodeExtension";
+
 
 export class ContinueGUIWebviewViewProvider
   implements vscode.WebviewViewProvider
 {
-  public static readonly viewType = "pearai.pearAIChatView";
+  public static readonly viewType = PEARAI_CHAT_VIEW_ID;
   public webviewProtocol: VsCodeWebviewProtocol;
   private _webview?: vscode.Webview;
   private _webviewView?: vscode.WebviewView;
@@ -29,7 +31,7 @@ export class ContinueGUIWebviewViewProvider
   // Show or hide the output channel on enableDebugLogs
   private setupDebugLogsListener() {
     vscode.workspace.onDidChangeConfiguration((event) => {
-      if (event.affectsConfiguration('pearai.enableDebugLogs')) {
+      if (event.affectsConfiguration("pearai.enableDebugLogs")) {
         const settings = vscode.workspace.getConfiguration("pearai");
         const enableDebugLogs = settings.get<boolean>("enableDebugLogs", false);
         if (enableDebugLogs) {
@@ -42,37 +44,36 @@ export class ContinueGUIWebviewViewProvider
   }
 
   private async handleWebviewMessage(message: any) {
-  if (message.messageType === "log") {
-    const settings = vscode.workspace.getConfiguration("pearai");
-    const enableDebugLogs = settings.get<boolean>("enableDebugLogs", false);
+    if (message.messageType === "log") {
+      const settings = vscode.workspace.getConfiguration("pearai");
+      const enableDebugLogs = settings.get<boolean>("enableDebugLogs", false);
 
-    if (message.level === "debug" && !enableDebugLogs) {
-      return; // Skip debug logs if enableDebugLogs is false
-    }
+      if (message.level === "debug" && !enableDebugLogs) {
+        return; // Skip debug logs if enableDebugLogs is false
+      }
 
-    const timestamp = new Date().toISOString().split(".")[0];
-    const logMessage = `[${timestamp}] [${message.level.toUpperCase()}] ${message.text}`;
-    this.outputChannel.appendLine(logMessage);
+      const timestamp = new Date().toISOString().split(".")[0];
+      const logMessage = `[${timestamp}] [${message.level.toUpperCase()}] ${message.text}`;
+      this.outputChannel.appendLine(logMessage);
+    }
   }
-}
 
   resolveWebviewView(
     webviewView: vscode.WebviewView,
     _context: vscode.WebviewViewResolveContext,
     _token: vscode.CancellationToken,
   ): void | Thenable<void> {
     this._webview = webviewView.webview;
-    this._webview.onDidReceiveMessage((message) =>
-      this.handleWebviewMessage(message),
-    );
+
+    this._webview.onDidReceiveMessage((message) => {
+      return this.handleWebviewMessage(message);
+    });
     webviewView.webview.html = this.getSidebarContent(
       this.extensionContext,
       webviewView,
     );
   }
 
-
-
   get isVisible() {
     return this._webviewView?.visible;
   }
@@ -97,13 +98,12 @@ export class ContinueGUIWebviewViewProvider
     });
   }
 
-
   constructor(
     private readonly configHandlerPromise: Promise<ConfigHandler>,
     private readonly windowId: string,
     private readonly extensionContext: vscode.ExtensionContext,
   ) {
-    this.outputChannel = vscode.window.createOutputChannel("Continue");
+    this.outputChannel = vscode.window.createOutputChannel("PearAI");
     this.enableDebugLogs = false;
     this.updateDebugLogsStatus();
     this.setupDebugLogsListener();
@@ -123,6 +123,7 @@ export class ContinueGUIWebviewViewProvider
     edits: FileEdit[] | undefined = undefined,
     isFullScreen = false,
   ): string {
+    const isOverlay = panel?.title === "PearAIOverlay"; // defined in pearai-app PearOverlayPart.ts
     const extensionUri = getExtensionUri();
     let scriptUri: string;
     let styleMainUri: string;
@@ -166,21 +167,27 @@ export class ContinueGUIWebviewViewProvider
       if (e.affectsConfiguration("workbench.colorTheme")) {
         // Send new theme to GUI to update embedded Monaco themes
         this.webviewProtocol?.request("setTheme", { theme: getTheme() });
-        this.webviewProtocol?.request("setThemeType", { themeType: getThemeType() });
+        this.webviewProtocol?.request("setThemeType", {
+          themeType: getThemeType(),
+        });
       }
     });
 
-    this.webviewProtocol.addWebview(panel.viewType, panel.webview);
+    // weview / panel's PearAIOverlay title is defined in pearai-app's PearOverlayParts.ts
+    // A unique identifier is needed for protocol to distinguish the webviews.
+    this.webviewProtocol.addWebview(panel?.title === "PearAIOverlay" ? panel.title : panel.viewType, panel.webview);
 
     return `<!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script>const vscode = acquireVsCodeApi();</script>
+        <script>
+          const vscode = acquireVsCodeApi();
+        </script>
         <link href="${styleMainUri}" rel="stylesheet">
 
-        <title>Continue</title>
+        <title>PearAI</title>
       </head>
       <body>
         <div id="root"></div>
@@ -229,6 +236,7 @@ export class ContinueGUIWebviewViewProvider
           ) || [],
         )}</script>
         <script>window.isFullScreen = ${isFullScreen}</script>
+        <script>window.isOverlayPearAI = ${isOverlay}</script>
 
         ${
           edits

extensions/vscode/src/extension.ts

@@ -32,11 +32,9 @@ async function dynamicImportAndActivate(context: vscode.ExtensionContext) {
   }
 }
 
-
-
 export function activate(context: vscode.ExtensionContext) {
   setupCa();
-  return dynamicImportAndActivate(context);
+  dynamicImportAndActivate(context);
 }
 
 export function deactivate() {

extensions/vscode/src/extension/VsCodeExtension.ts

@@ -33,6 +33,8 @@ import { TabAutocompleteModel } from "../util/loadAutocompleteModel";
 import type { VsCodeWebviewProtocol } from "../webviewProtocol";
 import { VsCodeMessenger } from "./VsCodeMessenger";
 
+export const PEARAI_CHAT_VIEW_ID = "pearai.pearAIChatView"
+
 export class VsCodeExtension {
   // Currently some of these are public so they can be used in testing (test/test-suites)
 
@@ -77,16 +79,17 @@ export class VsCodeExtension {
     const configHandlerPromise = new Promise<ConfigHandler>((resolve) => {
       resolveConfigHandler = resolve;
     });
+
     this.sidebar = new ContinueGUIWebviewViewProvider(
       configHandlerPromise,
       this.windowId,
       this.extensionContext,
     );
 
-    // Sidebar
+    // Sidebar + Overlay
     context.subscriptions.push(
       vscode.window.registerWebviewViewProvider(
-        "pearai.pearAIChatView",
+        PEARAI_CHAT_VIEW_ID,
         this.sidebar,
         {
           webviewOptions: { retainContextWhenHidden: true },
@@ -96,9 +99,7 @@ export class VsCodeExtension {
     resolveWebviewProtocol(this.sidebar.webviewProtocol);
 
     // Config Handler with output channel
-    const outputChannel = vscode.window.createOutputChannel(
-      "PearAI",
-    );
+    const outputChannel = vscode.window.createOutputChannel("PearAI");
     const inProcessMessenger = new InProcessMessenger<
       ToCoreProtocol,
       FromCoreProtocol
@@ -249,15 +250,20 @@ export class VsCodeExtension {
     });
 
     // Create a file system watcher
-    const watcher = vscode.workspace.createFileSystemWatcher('**/*', false, false, false);
+    const watcher = vscode.workspace.createFileSystemWatcher(
+      "**/*",
+      false,
+      false,
+      false,
+    );
 
     // Handle file creation
-    watcher.onDidCreate(uri => {
+    watcher.onDidCreate((uri) => {
       this.refreshContextProviders();
     });
 
     // Handle file deletion
-    watcher.onDidDelete(uri => {
+    watcher.onDidDelete((uri) => {
       this.refreshContextProviders();
     });
 
@@ -285,10 +291,7 @@ export class VsCodeExtension {
         }
       }
 
-      if (
-        filepath.endsWith(".pearairc.json") ||
-        filepath.endsWith(".prompt")
-      ) {
+      if (filepath.endsWith(".pearairc.json") || filepath.endsWith(".prompt")) {
         this.configHandler.reloadConfig();
       } else if (
         filepath.endsWith(".continueignore") ||
@@ -382,4 +385,4 @@ export class VsCodeExtension {
   registerCustomContextProvider(contextProvider: IContextProvider) {
     this.configHandler.registerCustomContextProvider(contextProvider);
   }
-}
+}

gui/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}