refactor(chat-panel): clean up chat panel api (#3611)

* refactor(chat-panel): clean up chat panel api.

* fix: lint.

* fix: execute pending command with delay.

* fix: execute pending command with delay.

* fix: update naming for EditorContext.

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

---------

Co-authored-by: Meng Zhang <[email protected]>

clients/tabby-chat-panel/package.json

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

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

@@ -51,15 +51,35 @@ export interface LineRange {
  */
 export type Location = number | LineRange | Position | PositionRange
 
-export interface FileContext {
+/**
+ * Represents a client-side file context.
+ * This type should only be used for sending context from client to server.
+ */
+export interface EditorFileContext {
   kind: 'file'
-  range: LineRange
-  filepath: string
+
+  /**
+   * The filepath of the file.
+   */
+  filepath: Filepath
+
+  /**
+   * The range of the selected content in the file.
+   * If the range is not provided, the whole file is considered.
+   */
+  range?: LineRange | PositionRange
+
+  /**
+   * The content of the file context.
+   */
   content: string
-  git_url: string
 }
 
-export type Context = FileContext
+/**
+ * Represents a client-side context.
+ * This type should only be used for sending context from client to server.
+ */
+export type EditorContext = EditorFileContext
 
 export interface FetcherOptions {
   authorization: string
@@ -83,10 +103,6 @@ export interface ErrorMessage {
   content: string
 }
 
-export interface NavigateOpts {
-  openInEditor?: boolean
-}
-
 /**
  * Represents a filepath to identify a file.
  */
@@ -184,22 +200,34 @@ export interface GitRepository {
   url: string
 }
 
+/**
+ * Predefined commands.
+ * - 'explain': Explain the selected code.
+ * - 'fix': Fix bugs in the selected code.
+ * - 'generate-docs': Generate documentation for the selected code.
+ * - 'generate-tests': Generate tests for the selected code.
+ */
+export type ChatCommand = 'explain' | 'fix' | 'generate-docs' | 'generate-tests'
+
 export interface ServerApi {
   init: (request: InitRequest) => void
-  sendMessage: (message: ChatMessage) => void
+
+  /**
+   * Execute a predefined command.
+   * @param command The command to execute.
+   */
+  executeCommand: (command: ChatCommand) => Promise<void>
+
   showError: (error: ErrorMessage) => void
   cleanError: () => void
-  addRelevantContext: (context: Context) => void
+  addRelevantContext: (context: EditorContext) => void
   updateTheme: (style: string, themeClass: string) => void
-  updateActiveSelection: (context: Context | null) => void
+  updateActiveSelection: (context: EditorContext | null) => void
 }
 
 export interface ClientApiMethods {
-  navigate: (context: Context, opts?: NavigateOpts) => void
   refresh: () => Promise<void>
 
-  onSubmitMessage: (msg: string, relevantContext?: Context[]) => Promise<void>
-
   // apply content into active editor, version 1, not support smart apply
   onApplyInEditor: (content: string) => void
 
@@ -232,42 +260,37 @@ export interface ClientApiMethods {
    */
   openInEditor: (target: FileLocation) => Promise<boolean>
 
+  /**
+   * Open the target URL in the external browser.
+   * @param url The target URL to open.
+   */
+  openExternal: (url: string) => Promise<void>
+
   // Provide all repos found in workspace folders.
   readWorkspaceGitRepositories?: () => Promise<GitRepository[]>
 }
 
 export interface ClientApi extends ClientApiMethods {
-  // this is inner function cover by tabby-threads
-  // the function doesn't need to expose to client but can call by client
+  /**
+   * Checks if the client supports this capability.
+   * This method is designed to check capability across different clients (IDEs).
+   * Note: This method should not be used to ensure compatibility across different chat panel SDK versions.
+   */
   hasCapability: (method: keyof ClientApiMethods) => Promise<boolean>
 }
 
-export interface ChatMessage {
-  message: string
-
-  // Client side context - displayed in user message
-  selectContext?: Context
-
-  // Client side contexts - displayed in assistant message
-  relevantContext?: Array<Context>
-
-  // Client side active selection context - displayed in assistant message
-  activeContext?: Context
-}
-
 export function createClient(target: HTMLIFrameElement, api: ClientApiMethods): ServerApi {
   return createThreadFromIframe(target, {
     expose: {
-      navigate: api.navigate,
       refresh: api.refresh,
-      onSubmitMessage: api.onSubmitMessage,
       onApplyInEditor: api.onApplyInEditor,
       onApplyInEditorV2: api.onApplyInEditorV2,
       onLoaded: api.onLoaded,
       onCopy: api.onCopy,
       onKeyboardEvent: api.onKeyboardEvent,
       lookupSymbol: api.lookupSymbol,
       openInEditor: api.openInEditor,
+      openExternal: api.openExternal,
       readWorkspaceGitRepositories: api.readWorkspaceGitRepositories,
     },
   })
@@ -277,7 +300,7 @@ export function createServer(api: ServerApi): ClientApi {
   return createThreadFromInsideIframe({
     expose: {
       init: api.init,
-      sendMessage: api.sendMessage,
+      executeCommand: api.executeCommand,
       showError: api.showError,
       cleanError: api.cleanError,
       addRelevantContext: api.addRelevantContext,

clients/vscode/src/chat/ChatPanelViewProvider.ts

@@ -1,5 +1,5 @@
 import { ExtensionContext, window, WebviewPanel } from "vscode";
-import type { ServerApi, ChatMessage, Context } from "tabby-chat-panel";
+import type { ServerApi, ChatCommand, EditorContext } from "tabby-chat-panel";
 import { WebviewHelper } from "./WebviewHelper";
 import { Client } from "../lsp/Client";
 import { GitProvider } from "../git/GitProvider";
@@ -57,11 +57,11 @@ export class ChatPanelViewProvider {
     return this.webview;
   }
 
-  public sendMessage(message: ChatMessage) {
-    this.webviewHelper.sendMessage(message);
+  public executeCommand(command: ChatCommand) {
+    this.webviewHelper.executeCommand(command);
   }
 
-  public addRelevantContext(context: Context) {
+  public addRelevantContext(context: EditorContext) {
     this.webviewHelper.addRelevantContext(context);
   }
 }

clients/vscode/src/chat/ChatSideViewProvider.ts

@@ -1,5 +1,5 @@
 import { ExtensionContext, WebviewViewProvider, WebviewView, window } from "vscode";
-import type { ServerApi, ChatMessage, Context } from "tabby-chat-panel";
+import type { ServerApi, ChatCommand, EditorContext } from "tabby-chat-panel";
 import { WebviewHelper } from "./WebviewHelper";
 import { Client } from "../lsp/Client";
 import type { LogOutputChannel } from "../logger";
@@ -60,11 +60,11 @@ export class ChatSideViewProvider implements WebviewViewProvider {
     return this.webview;
   }
 
-  public sendMessage(message: ChatMessage) {
-    this.webviewHelper.sendMessage(message);
+  public executeCommand(command: ChatCommand) {
+    this.webviewHelper.executeCommand(command);
   }
 
-  public addRelevantContext(context: Context) {
+  public addRelevantContext(context: EditorContext) {
     this.webviewHelper.addRelevantContext(context);
   }
 }