update

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

@@ -25,7 +25,7 @@ export interface InitRequest {
 export interface ServerApi {
   init: (request: InitRequest) => void
   sendMessage: (message: ChatMessage) => void
-  
+
 }
 
 export interface ClientApi {
@@ -41,8 +41,8 @@ export interface ChatMessage {
 export function createClient(target: HTMLIFrameElement, api: ClientApi): ServerApi {
   return createThreadFromIframe(target, {
     expose: {
-      navigate: api.navigate
-    }
+      navigate: api.navigate,
+    },
   })
 }
 

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

@@ -1,16 +1,15 @@
 import type { RefObject } from 'react'
 import { useEffect, useRef } from 'react'
 
-import type { ServerApi, ClientApi } from './index'
+import type { ClientApi, ServerApi } from './index'
 import { createClient, createServer } from './index'
 
 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
@@ -21,7 +20,8 @@ function useServer(api: ServerApi) {
 
   useEffect(() => {
     const isInIframe = window.self !== window.top
-    if (isInIframe && !serverRef.current) serverRef.current = createServer(api)
+    if (isInIframe && !serverRef.current)
+      serverRef.current = createServer(api)
   }, [])
 
   return serverRef.current

clients/tabby-chat-panel/src/vscode.tsx

@@ -1,38 +1,37 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
 
-import type { Context } from './index'
-import { useClient } from './react';
+import { useClient } from './react'
 
 declare global {
   interface Window {
-    token?: string;
-    endpoint?: string;
+    token?: string
+    endpoint?: string
   }
 }
 
-function ChatPanel () {
-  const [endpoint, setEndpoint] = React.useState("")
-  const [token, setToken] = React.useState("")
+function ChatPanel() {
+  const [endpoint, setEndpoint] = React.useState('')
+  const [token, setToken] = React.useState('')
   const iframeRef = React.useRef<HTMLIFrameElement>(null)
 
   const client = useClient(iframeRef, {
-    navigate: (context: Context) => {
+    navigate: () => {
       // FIXME(wwayne): Send message to VSCode webview to invoke VSCode API
-    }
+    },
   })
 
   React.useEffect(() => {
-    setEndpoint(window.endpoint || "")
-    setToken(window.token || "")
+    setEndpoint(window.endpoint || '')
+    setToken(window.token || '')
   }, [])
 
   React.useEffect(() => {
     if (iframeRef?.current && token) {
       client?.init({
         fetcherOptions: {
-          authorization: token
-        }
+          authorization: token,
+        },
       })
     }
   }, [iframeRef?.current, client, token])
@@ -42,12 +41,13 @@ function ChatPanel () {
       src={`${endpoint}/chat`}
       style={{
         width: '100vw',
-        height: '100vh'
+        height: '100vh',
       }}
-      ref={iframeRef} />
+      ref={iframeRef}
+    />
   )
 }
 
-createRoot(document.getElementById("root") as HTMLElement).render(
-  <ChatPanel />
-);
+createRoot(document.getElementById('root') as HTMLElement).render(
+  <ChatPanel />,
+)

clients/tabby-chat-panel/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "jsx": "react",
     "lib": ["ESNext", "DOM"],
     "module": "ESNext",
     "moduleResolution": "Bundler",
@@ -9,8 +10,7 @@
     "strictNullChecks": true,
     "esModuleInterop": true,
     "skipDefaultLibCheck": true,
-    "skipLibCheck": true,
-    "jsx": "react"
+    "skipLibCheck": true
   },
   "include": ["src", "test", "build.config.ts"]
 }