feat(vscode): chat panel selected code path is clickable (#2621)

* feat(vscode): chat panel selected code path is clickable

* update

* clean

* update

* update

* remove abs_path, use workspace.findFiles

* update variable name

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

@@ -28,6 +28,10 @@ export interface ErrorMessage {
   content: string
 }
 
+export interface NavigateOpts {
+  openInEditor?: boolean
+}
+
 export interface ServerApi {
   init: (request: InitRequest) => void
   sendMessage: (message: ChatMessage) => void
@@ -36,7 +40,7 @@ export interface ServerApi {
 }
 
 export interface ClientApi {
-  navigate: (context: Context) => void
+  navigate: (context: Context, opts?: NavigateOpts) => void
   refresh: () => Promise<void>
   onSubmitMessage?: (msg: string) => Promise<void>
   onApplyInEditor?: (content: string) => void

clients/vscode/src/chat/ChatViewProvider.ts

@@ -8,8 +8,13 @@ import {
   LogOutputChannel,
   TextEditor,
   window,
+  Position,
+  Range,
+  Selection,
+  TextEditorRevealType,
+  ViewColumn,
 } from "vscode";
-import type { ServerApi, ChatMessage, Context } from "tabby-chat-panel";
+import type { ServerApi, ChatMessage, Context, NavigateOpts } from "tabby-chat-panel";
 import hashObject from "object-hash";
 import * as semver from "semver";
 import type { ServerInfo } from "tabby-agent";
@@ -91,7 +96,27 @@ export class ChatViewProvider implements WebviewViewProvider {
     };
 
     this.client = createClient(webviewView, {
-      navigate: async (context: Context) => {
+      navigate: async (context: Context, opts?: NavigateOpts) => {
+        if (opts?.openInEditor) {
+          const files = await workspace.findFiles(context.filepath, null, 1);
+          if (files[0]) {
+            const document = await workspace.openTextDocument(files[0].path);
+            const newEditor = await window.showTextDocument(document, {
+              viewColumn: ViewColumn.Active,
+              preview: false,
+              preserveFocus: true,
+            });
+
+            // Move the cursor to the specified line
+            const start = new Position(Math.max(0, context.range.start - 1), 0);
+            const end = new Position(context.range.end, 0);
+            newEditor.selection = new Selection(start, end);
+            newEditor.revealRange(new Range(start, end), TextEditorRevealType.InCenter);
+          }
+
+          return;
+        }
+
         if (context?.filepath && context?.git_url) {
           const serverInfo = await this.agent.fetchServerInfo();
 
@@ -162,7 +187,7 @@ export class ChatViewProvider implements WebviewViewProvider {
     const serverInfo = await this.agent.fetchServerInfo();
     this.renderChatPage(serverInfo.config.endpoint);
 
-    this.agent.on("didChangeStatus", async () => {
+    this.agent.on("didChangeStatus", () => {
       this.reloadChatPage();
     });
 

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

@@ -13,7 +13,8 @@ import type {
   Context,
   ErrorMessage,
   FetcherOptions,
-  InitRequest
+  InitRequest,
+  NavigateOpts
 } from 'tabby-chat-panel'
 import { useServer } from 'tabby-chat-panel/react'
 
@@ -41,7 +42,7 @@ const convertToHSLColor = (style: string) => {
 }
 
 const CLIENT_TO_HANDLE_MESSAGE_SUBMIT = ['vscode']
-const CLIENT_HAS_APPLT_IN_EDITOR = ['vscode']
+const CLIENT_HAS_APPLY_IN_EDITOR = ['vscode']
 
 export default function ChatPage() {
   const [isInit, setIsInit] = useState(false)
@@ -67,7 +68,7 @@ export default function ChatPage() {
   const isOnSubmitMessage = CLIENT_TO_HANDLE_MESSAGE_SUBMIT.includes(
     client || ''
   )
-  const isOnApplyInEditor = CLIENT_HAS_APPLT_IN_EDITOR.includes(client || '')
+  const isOnApplyInEditor = CLIENT_HAS_APPLY_IN_EDITOR.includes(client || '')
   const maxWidth = isFromVSCode ? '5xl' : undefined
 
   useEffect(() => {
@@ -166,8 +167,8 @@ export default function ChatPage() {
     setPendingMessages([])
   }
 
-  const onNavigateToContext = (context: Context) => {
-    server?.navigate(context)
+  const onNavigateToContext = (context: Context, opts?: NavigateOpts) => {
+    server?.navigate(context, opts)
   }
 
   const onCopyContent = (value: string) => {

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'ai'
 import { findIndex } from 'lodash-es'
-import type { Context } from 'tabby-chat-panel'
+import type { Context, NavigateOpts } from 'tabby-chat-panel'
 
 import { useDebounceCallback } from '@/lib/hooks/use-debounce'
 import { useLatest } from '@/lib/hooks/use-latest'
@@ -30,7 +30,7 @@ type ChatContextValue = {
     userMessageId: string,
     action: MessageActionType
   ) => void
-  onNavigateToContext?: (context: Context) => void
+  onNavigateToContext?: (context: Context, opts?: NavigateOpts) => void
   onClearMessages: () => void
   container?: HTMLDivElement
   onCopyContent?: (value: string) => void
@@ -112,7 +112,7 @@ interface ChatProps extends React.ComponentProps<'div'> {
   initialMessages?: QuestionAnswerPair[]
   onLoaded?: () => void
   onThreadUpdates: (messages: QuestionAnswerPair[]) => void
-  onNavigateToContext: (context: Context) => void
+  onNavigateToContext: (context: Context, opts?: NavigateOpts) => void
   container?: HTMLDivElement
   docQuery?: boolean
   generateRelevantQuestions?: boolean

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

@@ -156,10 +156,14 @@ function UserMessageCard(props: { message: UserMessage }) {
             <UserMessageCardActions {...props} />
           </div>
 
-          {selectCode && message.selectContext && client !== 'vscode' && (
+          {selectCode && message.selectContext && (
             <div
               className="flex cursor-pointer items-center gap-1 overflow-x-auto text-xs text-muted-foreground hover:underline"
-              onClick={() => onNavigateToContext?.(message.selectContext!)}
+              onClick={() =>
+                onNavigateToContext?.(message.selectContext!, {
+                  openInEditor: client === 'vscode'
+                })
+              }
             >
               <IconFile className="h-3 w-3" />
               <p className="flex-1 truncate pr-1">