fix(vscode): chat panel updates (TabbyML#2252)

* html script * fix vscode copy paste bug * [autofix.ci] apply automated fixes * update * rebase and fix * clean --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Louis-udm · May 28, 2024 · 8f64753 · 8f64753
1 parent cbb7a41
commit 8f64753
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 40 deletions.
diff --git a/clients/vscode/assets/chat-panel.css b/clients/vscode/assets/chat-panel.css
@@ -0,0 +1,17 @@
+html,
+body {
+  background: transparent;
+}
+html,
+body,
+iframe {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+iframe {
+  border-width: 0;
+  width: 100%;
+  height: 100vh;
+}
diff --git a/clients/vscode/src/chat/ChatViewProvider.ts b/clients/vscode/src/chat/ChatViewProvider.ts
@@ -58,37 +58,29 @@ export class ChatViewProvider implements WebviewViewProvider {
   }
 
   private _getWebviewContent(server: ServerConfig) {
+    const styleUri = this.webview?.webview.asWebviewUri(
+      Uri.joinPath(this.context.extensionUri, "assets", "chat-panel.css"),
+    );
     return `
       <!DOCTYPE html>
       <html lang="en">
         <!--hash: ${hashObject(server)}-->
         <head>
           <meta charset="UTF-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-          <title>Tabby</title>     
-        </head>
-        <style>
-          html, body {
-            background: transparent;
-          }
-          html, body, iframe {
-            padding: 0;
-            margin: 0;
-            box-sizing: border-box;
-            overflow: hidden;
-          }
-          iframe {
-            border-width: 0;
-            width: 100%;
-            height: 100vh;
-          }
-        </style>
-        <body>
-          <script>const vscode = acquireVsCodeApi();</script>
+          <title>Tabby</title>
+          <link href="${server.endpoint}" rel="preconnect">
+          <link href="${styleUri}" rel="stylesheet">
           <script defer>
+            const vscode = acquireVsCodeApi();
+          
+            function iframeLoaded () {
+              vscode.postMessage({ action: 'rendered' });
+            }
+
             window.onload = function () {
               const chatIframe = document.getElementById("chat");
-
+        
               const syncTheme = () => {
                 const parentHtmlStyle = document.documentElement.getAttribute('style');
                 chatIframe.contentWindow.postMessage({ style: parentHtmlStyle }, "${server.endpoint}");
@@ -97,7 +89,7 @@ export class ChatViewProvider implements WebviewViewProvider {
                 themeClass += ' vscode'
                 chatIframe.contentWindow.postMessage({ themeClass: themeClass }, "${server.endpoint}");
               }
-
+        
               window.addEventListener("message", (event) => {
                 if (event.data) {
                   if (event.data.action === 'sync-theme') {
@@ -114,14 +106,11 @@ export class ChatViewProvider implements WebviewViewProvider {
               });
             }
           </script>
-          <script>
-            function iframeLoaded () {
-              vscode.postMessage({ action: 'rendered' });
-            }
-          </script>
+        </head>
+        <body>
           <iframe
             id="chat"
-            src="${server.endpoint}/chat?max-width=5xl"
+            src="${server.endpoint}/chat?from=vscode"
             onload="iframeLoaded(this)" />
         </body>
       </html>

diff --git a/clients/vscode/src/extension.ts b/clients/vscode/src/extension.ts
@@ -58,22 +58,22 @@ export async function activate(context: ExtensionContext) {
 
   await client.start();
 
-  const issues = new Issues(client, config);
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ /* @ts-expect-error noUnusedLocals */
-  const contextVariables = new ContextVariables(client, config);
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ /* @ts-expect-error noUnusedLocals */
-  const statusBarItem = new StatusBarItem(context, client, config, issues, inlineCompletionProvider);
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ /* @ts-expect-error noUnusedLocals */
-  const commands = new Commands(context, client, config, inlineCompletionProvider, gitProvider);
-
   // Register chat panel
   const chatViewProvider = new ChatViewProvider(context, config);
   context.subscriptions.push(
     window.registerWebviewViewProvider("tabby.chatView", chatViewProvider, {
-      webviewOptions: { retainContextWhenHidden: true }, // FIXME(wwayne): necessary?
+      webviewOptions: { retainContextWhenHidden: true },
     }),
   );
 
+  const issues = new Issues(client, config);
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ /* @ts-expect-error noUnusedLocals */
+  const contextVariables = new ContextVariables(client, config);
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ /* @ts-expect-error noUnusedLocals */
+  const statusBarItem = new StatusBarItem(context, client, config, issues, inlineCompletionProvider);
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ /* @ts-expect-error noUnusedLocals */
+  const commands = new Commands(context, client, config, inlineCompletionProvider, chatViewProvider, gitProvider);
+
   logger.info("Tabby extension activated.");
 }
 

diff --git a/ee/tabby-ui/app/chat/page.tsx b/ee/tabby-ui/app/chat/page.tsx
@@ -35,11 +35,21 @@ export default function ChatPage() {
   const [pendingMessages, setPendingMessages] = useState<ChatMessage[]>([])
 
   const chatRef = useRef<ChatRef>(null)
+
   const searchParams = useSearchParams()
-  const maxWidth = searchParams.get('max-width') || undefined
+  const from = searchParams.get('from') || undefined
+  const isFromVSCode = from === 'vscode'
+  const maxWidth = isFromVSCode ? '5xl' : undefined
 
   useEffect(() => {
-    window.addEventListener('message', ({ data }) => {
+    const onMessage = ({
+      data
+    }: {
+      data: {
+        style?: string
+        themeClass?: string
+      }
+    }) => {
       // Sync with VSCode CSS variable
       if (data.style) {
         const styleWithHslValue = data.style
@@ -62,7 +72,35 @@ export default function ChatPage() {
       if (data.themeClass) {
         document.documentElement.className = data.themeClass
       }
-    })
+    }
+
+    window.addEventListener('message', onMessage)
+    return () => {
+      window.removeEventListener('message', onMessage)
+    }
+  }, [])
+
+  // VSCode bug: not support shortcuts like copy/paste
+  // @see - https://github.com/microsoft/vscode/issues/129178
+  useEffect(() => {
+    if (!isFromVSCode) return
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.code === 'KeyC') {
+        document.execCommand('copy')
+      } else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyX') {
+        document.execCommand('cut')
+      } else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyV') {
+        document.execCommand('paste')
+      } else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyA') {
+        document.execCommand('selectAll')
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+    }
   }, [])
 
   const sendMessage = (message: ChatMessage) => {