fix(chat-panel&vscode): fix keyboard event handling. (#3219)

* fix(chat-panel&vscode): fix keyboard event handling.

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

clients/tabby-chat-panel/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tabby-chat-panel",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "keywords": [],
   "sideEffects": false,
   "exports": {

clients/tabby-chat-panel/src/index.ts

@@ -25,21 +25,16 @@ export interface FetcherOptions {
 
 export interface InitRequest {
   fetcherOptions: FetcherOptions
-  focusKey?: FocusKeybinding
+  // Workaround for vscode webview issue:
+  // shortcut (cmd+a, cmd+c, cmd+v, cmd+x) not work in nested iframe in vscode webview
+  // see https://github.com/microsoft/vscode/issues/129178
+  useMacOSKeyboardEventHandler?: boolean
 }
 
 export interface OnLoadedParams {
   apiVersion: string
 }
 
-export interface FocusKeybinding {
-  key: string
-  ctrlKey: boolean
-  metaKey: boolean
-  shiftKey: boolean
-  altKey: boolean
-}
-
 export interface ErrorMessage {
   title?: string
   content: string
@@ -72,7 +67,7 @@ export interface ClientApi {
   // On user copy content to clipboard.
   onCopy: (content: string) => void
 
-  focusOnEditor: () => void
+  onKeyboardEvent: (type: 'keydown' | 'keyup' | 'keypress', event: KeyboardEventInit) => void
 }
 
 export interface ChatMessage {
@@ -97,12 +92,13 @@ export function createClient(target: HTMLIFrameElement, api: ClientApi): ServerA
       onApplyInEditor: api.onApplyInEditor,
       onLoaded: api.onLoaded,
       onCopy: api.onCopy,
+      onKeyboardEvent: api.onKeyboardEvent,
     },
   })
 }
 
 export function createServer(api: ServerApi): ClientApi {
-  const clientApi: ClientApi = createThreadFromInsideIframe({
+  return createThreadFromInsideIframe({
     expose: {
       init: api.init,
       sendMessage: api.sendMessage,
@@ -112,6 +108,4 @@ export function createServer(api: ServerApi): ClientApi {
       updateTheme: api.updateTheme,
     },
   })
-
-  return clientApi
 }

clients/vscode/assets/chat-panel.css

@@ -1,6 +1,10 @@
 html,
 body {
   background: transparent;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 html,
 body,

clients/vscode/package.json

@@ -411,19 +411,25 @@
         "key": "ctrl+l",
         "mac": "cmd+l",
         "when": "!editorHasSelection && editorTextFocus && tabby.chatEnabled"
+      },
+      {
+        "command": "workbench.action.focusActiveEditorGroup",
+        "key": "ctrl+l",
+        "mac": "cmd+l",
+        "when": "!editorFocus && focusedView == 'tabby.chatView'"
       }
     ],
     "viewsContainers": {
       "activitybar": [
         {
-          "id": "chatView",
+          "id": "tabbyChatView",
           "title": "Tabby",
           "icon": "assets/chat.svg"
         }
       ]
     },
     "views": {
-      "chatView": [
+      "tabbyChatView": [
         {
           "type": "webview",
           "id": "tabby.chatView",

clients/vscode/src/chat/WebviewHelper.ts

@@ -13,30 +13,25 @@ import {
   ViewColumn,
   WorkspaceFolder,
   TextDocument,
-  commands,
   Webview,
   ColorThemeKind,
 } from "vscode";
-import type { ServerApi, ChatMessage, Context, NavigateOpts, FocusKeybinding, OnLoadedParams } from "tabby-chat-panel";
+import type { ServerApi, ChatMessage, Context, NavigateOpts, OnLoadedParams } from "tabby-chat-panel";
 import { TABBY_CHAT_PANEL_API_VERSION } from "tabby-chat-panel";
 import hashObject from "object-hash";
 import * as semver from "semver";
 import type { ServerInfo } from "tabby-agent";
 import type { AgentFeature as Agent } from "../lsp/AgentFeature";
 import { GitProvider } from "../git/GitProvider";
-import { getLogger } from "../logger";
-import { contributes } from "../../package.json";
-import { parseKeybinding, readUserKeybindingsConfig } from "../util/KeybindingParser";
 import { createClient } from "./chatPanel";
+import { isBrowser } from "../env";
 
 export class WebviewHelper {
   webview?: Webview;
   client?: ServerApi;
   private pendingMessages: ChatMessage[] = [];
   private pendingRelevantContexts: Context[] = [];
   private isChatPageDisplayed = false;
-  // FIXME: this check is not compatible with the environment of a browser in macOS
-  private isMac: boolean = env.appHost === "desktop" && process.platform === "darwin";
 
   constructor(
     private readonly context: ExtensionContext,
@@ -283,15 +278,11 @@ export class WebviewHelper {
                 }
                 
                 window.addEventListener("message", (event) => {
-                  if (!chatIframe) return
                   if (event.data) {
-                    if (event.data.action === 'sync-theme') {
-                      syncTheme();
-                      return;
-                    }
-
-                    if (event.data.data) {
-                      chatIframe.contentWindow.postMessage(event.data.data[0], "*");
+                    if (event.data.action === 'postMessageToChatPanel') {
+                      chatIframe.contentWindow.postMessage(event.data.message, "*");
+                    } else if (event.data.action === 'dispatchKeyboardEvent') {
+                      window.dispatchEvent(new KeyboardEvent(event.data.type, event.data.event));
                     } else {
                       vscode.postMessage(event.data);
                     }
@@ -318,19 +309,6 @@ export class WebviewHelper {
     }
   }
 
-  public async getFocusKeybinding(): Promise<FocusKeybinding | undefined> {
-    const focusCommand = "tabby.chatView.focus";
-    const defaultFocusKey = contributes.keybindings.find((cmd) => cmd.command === focusCommand);
-    const defaultKeybinding = defaultFocusKey
-      ? parseKeybinding(this.isMac && defaultFocusKey.mac ? defaultFocusKey.mac : defaultFocusKey.key)
-      : undefined;
-
-    const allKeybindings = await readUserKeybindingsConfig();
-    const userShortcut = allKeybindings?.find((keybinding) => keybinding.command === focusCommand);
-
-    return userShortcut ? parseKeybinding(userShortcut.key) : defaultKeybinding;
-  }
-
   public displayDisconnectedPage() {
     if (this.webview) {
       this.isChatPageDisplayed = false;
@@ -396,14 +374,14 @@ export class WebviewHelper {
     if (serverInfo.config.token) {
       this.client?.cleanError();
 
-      const focusKeybinding = await this.getFocusKeybinding();
-      getLogger().info("focus key binding: ", focusKeybinding);
-
+      const isMac = isBrowser
+        ? navigator.userAgent.toLowerCase().includes("mac")
+        : process.platform.toLowerCase().includes("darwin");
       this.client?.init({
         fetcherOptions: {
           authorization: serverInfo.config.token,
         },
-        focusKey: focusKeybinding,
+        useMacOSKeyboardEventHandler: isMac,
       });
     }
   }
@@ -578,12 +556,9 @@ export class WebviewHelper {
       onCopy: (content) => {
         env.clipboard.writeText(content);
       },
-      focusOnEditor: () => {
-        const editor = window.activeTextEditor;
-        if (editor) {
-          getLogger().info("Focus back to active editor");
-          commands.executeCommand("workbench.action.focusFirstEditorGroup");
-        }
+      onKeyboardEvent: (type: string, event: KeyboardEventInit) => {
+        this.logger.debug(`Dispatching keyboard event: ${type} ${JSON.stringify(event)}`);
+        this.webview?.postMessage({ action: "dispatchKeyboardEvent", type, event });
       },
     });
   }

clients/vscode/src/chat/chatPanel.ts

@@ -8,14 +8,11 @@ export function createThreadFromWebview<Self = Record<string, never>, Target = R
 ) {
   return createThread(
     {
-      send(...args) {
-        webview.postMessage({ data: args });
+      send(message) {
+        webview.postMessage({ action: "postMessageToChatPanel", message });
       },
-      listen(listen, { signal }) {
-        const { dispose } = webview.onDidReceiveMessage((data) => {
-          listen(data);
-        });
-
+      listen(listener, { signal }) {
+        const { dispose } = webview.onDidReceiveMessage(listener);
         signal?.addEventListener("abort", () => {
           dispose();
         });
@@ -34,7 +31,7 @@ export function createClient(webview: Webview, api: ClientApi): ServerApi {
       onApplyInEditor: api.onApplyInEditor,
       onCopy: api.onCopy,
       onLoaded: api.onLoaded,
-      focusOnEditor: api.focusOnEditor,
+      onKeyboardEvent: api.onKeyboardEvent,
     },
   });
 }

clients/vscode/src/chat/dom.d.ts

@@ -2,3 +2,5 @@
 
 // FIXME: This is required by `@quilted/threads` and `tabby-chat-panel`
 declare type HTMLIFrameElement = unknown;
+
+declare type KeyboardEventInit = unknown;

clients/vscode/src/env.ts

@@ -0,0 +1 @@
+export const isBrowser = !!process.env["IS_BROWSER"];

clients/vscode/src/extension.ts

@@ -15,8 +15,8 @@ import { ChatPanelViewProvider } from "./chat/ChatPanelViewProvider";
 import { Commands } from "./Commands";
 import { Status } from "tabby-agent";
 import { CodeActions } from "./CodeActions";
+import { isBrowser } from "./env";
 
-const isBrowser = !!process.env["IS_BROWSER"];
 const logger = getLogger();
 let client: Client | undefined = undefined;