feat(vscode): adding clickble symbol render in chat panel

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

@@ -53,7 +53,14 @@ export interface ServerApi {
   updateTheme: (style: string, themeClass: string) => void
   updateActiveSelection: (context: Context | null) => void
 }
-
+export interface SymbolInfo {
+  sourceFile: string
+  sourceLine: number
+  sourceCol: number
+  targetFile: string
+  targetLine: number
+  targetCol: number
+}
 export interface ClientApiMethods {
   navigate: (context: Context, opts?: NavigateOpts) => void
   refresh: () => Promise<void>
@@ -76,7 +83,11 @@ export interface ClientApiMethods {
   onCopy: (content: string) => void
 
   onKeyboardEvent: (type: 'keydown' | 'keyup' | 'keypress', event: KeyboardEventInit) => void
+  // navigate to lsp definition by symbol
+  onNavigateSymbol: (filepaths: string[], keyword: string) => void
 
+  // on hover symbol return symbol info if exist
+  onHoverSymbol: (filepaths: string[], keyword: string) => Promise<SymbolInfo | undefined>
 }
 
 export interface ClientApi extends ClientApiMethods {
@@ -119,6 +130,8 @@ export function createClient(target: HTMLIFrameElement, api: ClientApiMethods):
       onLoaded: api.onLoaded,
       onCopy: api.onCopy,
       onKeyboardEvent: api.onKeyboardEvent,
+      onNavigateSymbol: api.onNavigateSymbol,
+      onHoverSymbol: api.onHoverSymbol,
     },
   })
 }

clients/vscode/src/chat/WebviewHelper.ts

@@ -9,8 +9,14 @@ import {
   Webview,
   ColorThemeKind,
   ProgressLocation,
+  commands,
+  LocationLink,
+  workspace,
+  Range,
+  Position,
+  TextEditorRevealType,
 } from "vscode";
-import type { ServerApi, ChatMessage, Context, NavigateOpts, OnLoadedParams } from "tabby-chat-panel";
+import type { ServerApi, ChatMessage, Context, NavigateOpts, OnLoadedParams, SymbolInfo } from "tabby-chat-panel";
 import { TABBY_CHAT_PANEL_API_VERSION } from "tabby-chat-panel";
 import hashObject from "object-hash";
 import * as semver from "semver";
@@ -22,6 +28,7 @@ import { createClient } from "./chatPanel";
 import { ChatFeature } from "../lsp/ChatFeature";
 import { isBrowser } from "../env";
 import { getFileContextFromSelection, showFileContext } from "./fileContext";
+import path from "path";
 
 export class WebviewHelper {
   webview?: Webview;
@@ -394,6 +401,9 @@ export class WebviewHelper {
   }
 
   public createChatClient(webview: Webview) {
+    /*
+      utility functions for createClient
+    */
     const getIndentInfo = (document: TextDocument, selection: Selection) => {
       // Determine the indentation for the content
       // The calculation is based solely on the indentation of the first line
@@ -424,6 +434,61 @@ export class WebviewHelper {
       });
     };
 
+    const findSymbolInfo = async (filepaths: string[], keyword: string): Promise<SymbolInfo | undefined> => {
+      if (!keyword || !filepaths.length) {
+        this.logger.info("No keyword or filepaths provided");
+        return undefined;
+      }
+
+      try {
+        const workspaceRoot = workspace.workspaceFolders?.[0];
+        if (!workspaceRoot) {
+          this.logger.error("No workspace folder found");
+          return undefined;
+        }
+        const rootPath = workspaceRoot.uri;
+
+        for (const filepath of filepaths) {
+          const normalizedPath = filepath.startsWith("/") ? filepath.slice(1) : filepath;
+          const fullPath = path.join(rootPath.path, normalizedPath);
+          const fileUri = Uri.file(fullPath);
+          const document = await workspace.openTextDocument(fileUri);
+
+          const content = document.getText();
+          let pos = 0;
+
+          while ((pos = content.indexOf(keyword, pos)) !== -1) {
+            const position = document.positionAt(pos);
+            const locations = await commands.executeCommand<LocationLink[]>(
+              "vscode.executeDefinitionProvider",
+              fileUri,
+              position,
+            );
+
+            if (locations && locations.length > 0) {
+              const location = locations[0];
+              if (location) {
+                return {
+                  sourceFile: filepath,
+                  sourceLine: position.line + 1,
+                  sourceCol: position.character,
+                  targetFile: location.targetUri.fsPath,
+                  targetLine: location.targetRange.start.line + 1,
+                  targetCol: location.targetRange.start.character,
+                };
+              }
+            }
+
+            pos += keyword.length;
+          }
+        }
+      } catch (error) {
+        this.logger.error("Error in findSymbolInfo:", error);
+      }
+
+      return undefined;
+    };
+
     return createClient(webview, {
       navigate: async (context: Context, opts?: NavigateOpts) => {
         if (opts?.openInEditor) {
@@ -557,6 +622,37 @@ export class WebviewHelper {
         this.logger.debug(`Dispatching keyboard event: ${type} ${JSON.stringify(event)}`);
         this.webview?.postMessage({ action: "dispatchKeyboardEvent", type, event });
       },
+      onNavigateSymbol: async (filepath: string[], keyword: string) => {
+        const symbolInfo = await findSymbolInfo(filepath, keyword);
+
+        if (symbolInfo) {
+          try {
+            const targetUri = Uri.file(symbolInfo.targetFile);
+            const targetDocument = await workspace.openTextDocument(targetUri);
+            const editor = await window.showTextDocument(targetDocument);
+            editor.revealRange(
+              new Range(
+                new Position(symbolInfo.targetLine - 1, symbolInfo.targetCol),
+                new Position(symbolInfo.targetLine - 1, symbolInfo.targetCol),
+              ),
+              TextEditorRevealType.InCenter,
+            );
+
+            this.logger.info(`Navigated to symbol: ${keyword}`);
+          } catch (error) {
+            this.logger.error("Error navigating to symbol:", error);
+          }
+        } else {
+          this.logger.info(`Keyword "${keyword}" not found in provided filepaths`);
+        }
+      },
+      onHoverSymbol: async (filepaths: string[], keyword: string): Promise<SymbolInfo | undefined> => {
+        const symbolInfo = await findSymbolInfo(filepaths, keyword);
+        if (!symbolInfo) {
+          this.logger.info(`Keyword "${keyword}" not found in provided filepaths`);
+        }
+        return symbolInfo;
+      },
     });
   }
 }

clients/vscode/src/chat/chatPanel.ts

@@ -33,6 +33,8 @@ export function createClient(webview: Webview, api: ClientApiMethods): ServerApi
       onLoaded: api.onLoaded,
       onCopy: api.onCopy,
       onKeyboardEvent: api.onKeyboardEvent,
+      onNavigateSymbol: api.onNavigateSymbol,
+      onHoverSymbol: api.onHoverSymbol,
     },
   });
 }

ee/tabby-ui/app/chat/page.tsx

@@ -74,6 +74,9 @@ export default function ChatPage() {
   // server feature support check
   const [supportsOnApplyInEditorV2, setSupportsOnApplyInEditorV2] =
     useState(false)
+  const [supportsOnNavigateSymbol, setSupportsOnNavigateSymbol] =
+    useState(false)
+  const [supportsOnHoverSymbol, setSupportsOnHoverSymbol] = useState(false)
 
   const sendMessage = (message: ChatMessage) => {
     if (chatRef.current) {
@@ -236,6 +239,10 @@ export default function ChatPage() {
         server
           ?.hasCapability('onApplyInEditorV2')
           .then(setSupportsOnApplyInEditorV2)
+        server
+          ?.hasCapability('onNavigateSymbol')
+          .then(setSupportsOnNavigateSymbol)
+        server?.hasCapability('onHoverSymbol').then(setSupportsOnHoverSymbol)
       }
 
       checkCapabilities()
@@ -388,6 +395,14 @@ export default function ChatPage() {
             : server?.onApplyInEditor)
         }
         supportsOnApplyInEditorV2={supportsOnApplyInEditorV2}
+        onNavigateSymbol={
+          isInEditor &&
+          (supportsOnNavigateSymbol ? server?.onNavigateSymbol : undefined)
+        }
+        onHoverSymbol={
+          isInEditor &&
+          (supportsOnHoverSymbol ? server?.onHoverSymbol : undefined)
+        }
       />
     </ErrorBoundary>
   )

ee/tabby-ui/app/files/components/chat-side-bar.tsx

@@ -79,7 +79,11 @@ export const ChatSideBar: React.FC<ChatSideBarProps> = ({
     onApplyInEditor(_content) {},
     onLoaded() {},
     onCopy(_content) {},
-    onKeyboardEvent() {}
+    onKeyboardEvent() {},
+    onNavigateSymbol(_filepath, _keywords) {},
+    async onHoverSymbol(_filepath, _keyword) {
+      return undefined
+    }
   })
 
   const getPrompt = ({ action }: QuickActionEventPayload) => {

ee/tabby-ui/components/chat/chat.tsx

@@ -1,6 +1,11 @@
 import React, { RefObject } from 'react'
 import { compact, findIndex, isEqual, some, uniqWith } from 'lodash-es'
-import type { Context, FileContext, NavigateOpts } from 'tabby-chat-panel'
+import type {
+  Context,
+  FileContext,
+  NavigateOpts,
+  SymbolInfo
+} from 'tabby-chat-panel'
 
 import { ERROR_CODE_NOT_FOUND } from '@/lib/constants'
 import {
@@ -45,6 +50,11 @@ type ChatContextValue = {
   onApplyInEditor?:
     | ((content: string) => void)
     | ((content: string, opts?: { languageId: string; smart: boolean }) => void)
+  onNavigateSymbol?: (filepaths: string[], keyword: string) => void
+  onHoverSymbol?: (
+    filepaths: string[],
+    keyword: string
+  ) => Promise<SymbolInfo | undefined>
   relevantContext: Context[]
   activeSelection: Context | null
   removeRelevantContext: (index: number) => void
@@ -83,6 +93,11 @@ interface ChatProps extends React.ComponentProps<'div'> {
   onApplyInEditor?:
     | ((content: string) => void)
     | ((content: string, opts?: { languageId: string; smart: boolean }) => void)
+  onNavigateSymbol?: (filepaths: string[], keyword: string) => void
+  onHoverSymbol?: (
+    filepaths: string[],
+    keyword: string
+  ) => Promise<SymbolInfo | undefined>
   chatInputRef: RefObject<HTMLTextAreaElement>
   supportsOnApplyInEditorV2: boolean
 }
@@ -104,6 +119,8 @@ function ChatRenderer(
     onCopyContent,
     onSubmitMessage,
     onApplyInEditor,
+    onNavigateSymbol,
+    onHoverSymbol,
     chatInputRef,
     supportsOnApplyInEditorV2
   }: ChatProps,
@@ -529,6 +546,8 @@ function ChatRenderer(
         container,
         onCopyContent,
         onApplyInEditor,
+        onNavigateSymbol,
+        onHoverSymbol,
         relevantContext,
         removeRelevantContext,
         chatInputRef,

ee/tabby-ui/components/chat/question-answer.tsx

@@ -261,6 +261,8 @@ function AssistantMessageCard(props: AssistantMessageCardProps) {
     onNavigateToContext,
     onApplyInEditor,
     onCopyContent,
+    onNavigateSymbol,
+    onHoverSymbol,
     supportsOnApplyInEditorV2
   } = React.useContext(ChatContext)
   const [relevantCodeHighlightIndex, setRelevantCodeHighlightIndex] =
@@ -398,6 +400,9 @@ function AssistantMessageCard(props: AssistantMessageCardProps) {
               onCodeCitationMouseEnter={onCodeCitationMouseEnter}
               onCodeCitationMouseLeave={onCodeCitationMouseLeave}
               canWrapLongLines={!isLoading}
+              onNavigateSymbol={onNavigateSymbol}
+              onHoverSymbol={onHoverSymbol}
+              onNavigateToContext={onNavigateToContext}
               supportsOnApplyInEditorV2={supportsOnApplyInEditorV2}
             />
             {!!message.error && <ErrorMessageBlock error={message.error} />}