diff --git a/clients/tabby-chat-panel/build.config.ts b/clients/tabby-chat-panel/build.config.ts index 8a9eff3b7345..de84db065d20 100644 --- 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 index 3b614a0df434..fe05ab72be8b 100644 --- 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 index ef4fccfec542..45481a256242 100644 --- 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 new file mode 100644 index 000000000000..2c26588419e0 --- /dev/null +++ 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(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 ( +