feat(chat-panel): exchange methods during createServer and createClient by request built-in method in Thread

clients/tabby-chat-panel/package.json

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

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

@@ -362,8 +362,8 @@ export interface ClientApi extends ClientApiMethods {
   hasCapability: (method: keyof ClientApiMethods) => Promise<boolean>
 }
 
-export function createClient(target: HTMLIFrameElement, api: ClientApiMethods): ServerApi {
-  return createThreadFromIframe(target, {
+export async function createClient(target: HTMLIFrameElement, api: ClientApiMethods): Promise<ServerApi> {
+  const thread = createThreadFromIframe(target, {
     expose: {
       refresh: api.refresh,
       onApplyInEditor: api.onApplyInEditor,
@@ -382,10 +382,18 @@ export function createClient(target: HTMLIFrameElement, api: ClientApiMethods):
       readFileContent: api.readFileContent,
     },
   })
+
+  const serverMethods = await thread._requestMethods() as (keyof ServerApi)[]
+  const serverApi = {} as ServerApi
+  for (const method of serverMethods) {
+    serverApi[method] = thread[method]
+  }
+
+  return serverApi
 }
 
-export function createServer(api: ServerApi): ClientApi {
-  return createThreadFromInsideIframe({
+export async function createServer(api: ServerApi): Promise<ClientApi> {
+  const thread = createThreadFromInsideIframe({
     expose: {
       init: api.init,
       executeCommand: api.executeCommand,
@@ -396,4 +404,13 @@ export function createServer(api: ServerApi): ClientApi {
       updateActiveSelection: api.updateActiveSelection,
     },
   })
+  const clientMethods = await thread._requestMethods() as (keyof ClientApi)[]
+  const clientApi = {} as ClientApi
+  for (const method of clientMethods) {
+    clientApi[method] = thread[method]
+  }
+  // hasCapability is not exposed from client
+  clientApi.hasCapability = thread.hasCapability
+
+  return clientApi
 }

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

@@ -11,7 +11,7 @@ function useClient(iframeRef: RefObject<HTMLIFrameElement>, api: ClientApiMethod
   useEffect(() => {
     if (iframeRef.current && !isCreated) {
       isCreated = true
-      setClient(createClient(iframeRef.current!, api))
+      createClient(iframeRef.current!, api).then(setClient)
     }
   }, [iframeRef.current])
 
@@ -26,7 +26,7 @@ function useServer(api: ServerApi) {
     const isInIframe = window.self !== window.top
     if (isInIframe && !isCreated) {
       isCreated = true
-      setServer(createServer(api))
+      createServer(api).then(setServer)
     }
   }, [])
 

clients/tabby-threads/source/targets/target.ts

@@ -69,6 +69,7 @@ const RELEASE = 3;
 const FUNCTION_APPLY = 5;
 const FUNCTION_RESULT = 6;
 const CHECK_CAPABILITY = 7;
+const EXPOSE_LIST = 8;
 
 interface MessageMap {
   [CALL]: [string, string | number, any];
@@ -78,6 +79,7 @@ interface MessageMap {
   [FUNCTION_APPLY]: [string, string, any];
   [FUNCTION_RESULT]: [string, Error?, any?];
   [CHECK_CAPABILITY]: [string, string];
+  [EXPOSE_LIST]: [string];
 }
 
 type MessageData = {
@@ -121,7 +123,9 @@ export function createThread<
     ) => void
   >();
 
-  const call = createCallable<Thread<Target>>(handlerForCall, callable);
+  const call = createCallable<Thread<Target>>(handlerForCall, callable, {
+    _requestMethods,
+  });
 
   const encoderApi: ThreadEncoderApi = {
     functions: {
@@ -333,6 +337,18 @@ export function createThread<
         send(RESULT, [id, undefined, encoder.encode(hasMethod, encoderApi)[0]]);
         break;
       }
+
+      case EXPOSE_LIST: {
+        // return our list of exposed methods
+        const [id] = data[1];
+        const exposedMethods = Array.from(activeApi.keys());
+        send(RESULT, [
+          id,
+          undefined,
+          encoder.encode(exposedMethods, encoderApi)[0],
+        ]);
+        break;
+      }
     }
   }
 
@@ -410,6 +426,13 @@ export function createThread<
       callIdsToResolver.delete(callId);
     }
   }
+
+  async function _requestMethods() {
+    const id = uuid();
+    const done = waitForResult(id);
+    send(EXPOSE_LIST, [id]);
+    return done;
+  }
 }
 
 class ThreadTerminatedError extends Error {
@@ -430,7 +453,10 @@ function createCallable<T>(
   handlerForCall: (
     property: string | number | symbol
   ) => AnyFunction | undefined,
-  callable?: (keyof T)[]
+  callable?: (keyof T)[],
+  methods?: {
+    _requestMethods(): Promise<string[]>;
+  }
 ): T {
   let call: any;
 
@@ -447,6 +473,12 @@ function createCallable<T>(
       {},
       {
         get(_target, property) {
+          if (property === "then") {
+            return undefined;
+          }
+          if (property === "_requestMethods") {
+            return methods?._requestMethods;
+          }
           if (cache.has(property)) {
             return cache.get(property);
           }

clients/tabby-threads/source/types.ts

@@ -3,7 +3,7 @@ import type {
   RETAIN_METHOD,
   ENCODE_METHOD,
   RETAINED_BY,
-} from './constants.ts';
+} from "./constants.ts";
 
 /**
  * A thread represents a target JavaScript environment that exposes a set
@@ -18,6 +18,12 @@ export type Thread<Target> = {
       ? Target[K]
       : never
     : never;
+} & {
+
+  /**
+   * A method that used to get all exposed methods of the opposite thread.
+   */
+  _requestMethods(): Promise<string[]>;
 };
 
 /**