feat(chat-panel): add vscode bundle script (#2206)

* feat(chat-panel): add vscode bundle script * update * update * update iframe size * rename * update * update * update * add comment * clean * update lock * build
TabbyML · May 22, 2024 · 8b073ce · 8b073ce
1 parent a1cae7b
commit 8b073ce
Show file tree

Hide file tree

Showing 8 changed files with 531 additions and 21 deletions.
diff --git a/clients/tabby-chat-panel/build.config.ts b/clients/tabby-chat-panel/build.config.ts
@@ -1,5 +1,6 @@
 import { defineBuildConfig } from 'unbuild'
 
+// FIXME(wwayne): add build:vscode & dev:vscode
 export default defineBuildConfig({
   entries: [
     'src/index',

diff --git a/clients/tabby-chat-panel/eslint.config.js b/clients/tabby-chat-panel/eslint.config.js
@@ -1,3 +1,7 @@
 import antfu from '@antfu/eslint-config'
 
-export default antfu()
+export default antfu({
+  rules: {
+    curly: ['off', 'all'],
+  },
+})
diff --git a/clients/tabby-chat-panel/package.json b/clients/tabby-chat-panel/package.json
@@ -31,28 +31,33 @@
     "dist"
   ],
   "scripts": {
-    "build": "unbuild",
+    "build": "unbuild && pnpm build:vscode",
     "dev": "unbuild --stub",
-    "lint": "eslint . -f mo",
-    "lint:fix": "eslint . -f mo --fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "prepack": "nr build",
     "preview": "node --watch bin/index.js",
     "release": "bumpp && npm publish",
     "start": "tsx src/index.ts",
     "test": "vitest run",
     "test:watch": "vitest",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "build:vscode": "esbuild src/iframe.tsx --bundle --minify --outfile=../vscode/chat-panel/index.js --loader:.js=jsx",
+    "dev:vscode": "esbuild src/iframe.tsx --bundle --outfile=../vscode/chat-panel/index.js --loader:.js=jsx --watch"
   },
   "dependencies": {
     "@quilted/threads": "^2.1.2",
-    "react": "18.2.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.16.0",
     "@antfu/ni": "^0.21.12",
     "@types/node": "^20.12.7",
     "@types/react": "18.2.23",
+    "@types/react-dom": "18.2.23",
     "bumpp": "^9.4.0",
+    "esbuild": "^0.21.3",
     "eslint": "^9.1.1",
     "eslint-formatter-mo": "^1.2.0",
     "lint-staged": "^15.2.2",

diff --git a/clients/tabby-chat-panel/src/iframe.tsx b/clients/tabby-chat-panel/src/iframe.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+
+import { useClient } from './react'
+
+declare global {
+  interface Window {
+    token?: string
+    endpoint?: string
+  }
+}
+
+function ChatPanel() {
+  const [endpoint, setEndpoint] = React.useState('')
+  const [token, setToken] = React.useState('')
+  const iframeRef = React.useRef<HTMLIFrameElement>(null)
+
+  const client = useClient(iframeRef, {
+    navigate: () => {
+      // FIXME(wwayne): Send message to VSCode webview to invoke VSCode API
+    },
+  })
+
+  React.useEffect(() => {
+    setEndpoint(window.endpoint || '')
+    setToken(window.token || '')
+  }, [])
+
+  React.useEffect(() => {
+    if (iframeRef?.current && token) {
+      client?.init({
+        fetcherOptions: {
+          authorization: token,
+        },
+      })
+    }
+  }, [iframeRef?.current, client, token])
+
+  return (
+    <iframe
+      src={`${endpoint}/chat`}
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+      ref={iframeRef}
+    />
+  )
+}
+
+createRoot(document.getElementById('root') as HTMLElement).render(
+  <ChatPanel />,
+)
diff --git a/clients/tabby-chat-panel/src/react.ts b/clients/tabby-chat-panel/src/react.ts
@@ -8,8 +8,9 @@ function useClient(iframeRef: RefObject<HTMLIFrameElement>, api: ClientApi) {
   const clientRef = useRef<ServerApi | null>(null)
 
   useEffect(() => {
-    if (iframeRef.current && !clientRef.current)
+    if (iframeRef.current && !clientRef.current) {
       clientRef.current = createClient(iframeRef.current, api)
+    }
   }, [iframeRef.current])
 
   return clientRef.current
@@ -20,8 +21,9 @@ function useServer(api: ServerApi) {
 
   useEffect(() => {
     const isInIframe = window.self !== window.top
-    if (isInIframe && !serverRef.current)
+    if (isInIframe && !serverRef.current) {
       serverRef.current = createServer(api)
+    }
   }, [])
 
   return serverRef.current

diff --git a/clients/tabby-chat-panel/tsconfig.json b/clients/tabby-chat-panel/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "jsx": "react",
     "lib": ["ESNext", "DOM"],
     "module": "ESNext",
     "moduleResolution": "Bundler",

diff --git a/clients/vscode/.gitignore b/clients/vscode/.gitignore
@@ -5,3 +5,4 @@ generated
 .vscode-test/
 .vscode-test-web/
 *.vsix
+chat-panel/