Fix issue #5716: [Feature Request]: Add the button to jump to file ed…

…its view

frontend/__tests__/components/chat-message.test.tsx

@@ -2,23 +2,31 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, test } from "vitest";
 import { ChatMessage } from "#/components/features/chat/chat-message";
+import { FilesProvider } from "#/context/files";
 
 describe("ChatMessage", () => {
+  const renderWithProvider = (ui: React.ReactElement) => {
+    return render(
+      <FilesProvider>
+        {ui}
+      </FilesProvider>
+    );
+  };
   it("should render a user message", () => {
-    render(<ChatMessage type="user" message="Hello, World!" />);
+    renderWithProvider(<ChatMessage type="user" message="Hello, World!" />);
     expect(screen.getByTestId("user-message")).toBeInTheDocument();
     expect(screen.getByText("Hello, World!")).toBeInTheDocument();
   });
 
   it("should render an assistant message", () => {
-    render(<ChatMessage type="assistant" message="Hello, World!" />);
+    renderWithProvider(<ChatMessage type="assistant" message="Hello, World!" />);
     expect(screen.getByTestId("assistant-message")).toBeInTheDocument();
     expect(screen.getByText("Hello, World!")).toBeInTheDocument();
   });
 
   it.skip("should support code syntax highlighting", () => {
     const code = "```js\nconsole.log('Hello, World!')\n```";
-    render(<ChatMessage type="user" message={code} />);
+    renderWithProvider(<ChatMessage type="user" message={code} />);
 
     // SyntaxHighlighter breaks the code blocks into "tokens"
     expect(screen.getByText("console")).toBeInTheDocument();
@@ -30,7 +38,7 @@ describe("ChatMessage", () => {
 
   it("should render the copy to clipboard button when the user hovers over the message", async () => {
     const user = userEvent.setup();
-    render(<ChatMessage type="user" message="Hello, World!" />);
+    renderWithProvider(<ChatMessage type="user" message="Hello, World!" />);
     const message = screen.getByText("Hello, World!");
 
     expect(screen.getByTestId("copy-to-clipboard")).not.toBeVisible();
@@ -42,7 +50,7 @@ describe("ChatMessage", () => {
 
   it("should copy content to clipboard", async () => {
     const user = userEvent.setup();
-    render(<ChatMessage type="user" message="Hello, World!" />);
+    renderWithProvider(<ChatMessage type="user" message="Hello, World!" />);
     const copyToClipboardButton = screen.getByTestId("copy-to-clipboard");
 
     await user.click(copyToClipboardButton);
@@ -63,7 +71,7 @@ describe("ChatMessage", () => {
     function Component() {
       return <div data-testid="custom-component">Custom Component</div>;
     }
-    render(
+    renderWithProvider(
       <ChatMessage type="user" message="Hello, World">
         <Component />
       </ChatMessage>,
@@ -72,7 +80,7 @@ describe("ChatMessage", () => {
   });
 
   it("should apply correct styles to inline code", () => {
-    render(<ChatMessage type="assistant" message="Here is some `inline code` text" />);
+    renderWithProvider(<ChatMessage type="assistant" message="Here is some `inline code` text" />);
     const codeElement = screen.getByText("inline code");
 
     expect(codeElement.tagName.toLowerCase()).toBe("code");

frontend/src/components/features/chat/chat-message.tsx

@@ -5,20 +5,25 @@ import { code } from "../markdown/code";
 import { cn } from "#/utils/utils";
 import { ul, ol } from "../markdown/list";
 import { CopyToClipboardButton } from "#/components/shared/buttons/copy-to-clipboard-button";
+import { JumpToFileButton } from "#/components/shared/buttons/jump-to-file-button";
 import { anchor } from "../markdown/anchor";
+import { useFiles } from "#/context/files";
 
 interface ChatMessageProps {
   type: "user" | "assistant";
   message: string;
+  filePath?: string;
 }
 
 export function ChatMessage({
   type,
   message,
+  filePath,
   children,
 }: React.PropsWithChildren<ChatMessageProps>) {
   const [isHovering, setIsHovering] = React.useState(false);
   const [isCopy, setIsCopy] = React.useState(false);
+  const { selectFile } = useFiles();
 
   const handleCopyToClipboard = async () => {
     await navigator.clipboard.writeText(message);
@@ -57,6 +62,13 @@ export function ChatMessage({
         onClick={handleCopyToClipboard}
         mode={isCopy ? "copied" : "copy"}
       />
+      {filePath && (
+        <JumpToFileButton
+          filePath={filePath}
+          onClick={() => selectFile(filePath)}
+          isDisabled={!filePath}
+        />
+      )}
       <Markdown
         className="text-sm overflow-auto"
         components={{

frontend/src/components/features/chat/messages.tsx

@@ -26,7 +26,7 @@ export function Messages({
     }
 
     return (
-      <ChatMessage key={index} type={message.sender} message={message.content}>
+      <ChatMessage key={index} type={message.sender} message={message.content} filePath={message.filePath}>
         {message.imageUrls && message.imageUrls.length > 0 && (
           <ImageCarousel size="small" images={message.imageUrls} />
         )}

frontend/src/components/shared/buttons/jump-to-file-button.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { VscGoToFile } from "react-icons/vsc";
+import { I18nKey } from "#/i18n/declaration";
+import { ActionTooltip } from "#/components/shared/action-tooltip";
+import { cn } from "#/utils/utils";
+
+interface JumpToFileButtonProps {
+  filePath: string;
+  onClick: () => void;
+  isDisabled?: boolean;
+}
+
+export function JumpToFileButton({
+  filePath,
+  onClick,
+  isDisabled = false,
+}: JumpToFileButtonProps) {
+  const { t } = useTranslation();
+
+  return (
+    <ActionTooltip
+      content={t(I18nKey.CHAT$JUMP_TO_FILE_TOOLTIP, { path: filePath })}
+      side="top"
+    >
+      <button
+        data-testid="jump-to-file-button"
+        onClick={onClick}
+        disabled={isDisabled}
+        className={cn(
+          "absolute top-2 right-12 p-2 rounded-lg",
+          "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-700",
+          "transition-colors duration-200",
+          isDisabled && "opacity-50 cursor-not-allowed"
+        )}
+      >
+        <VscGoToFile size={16} />
+      </button>
+    </ActionTooltip>
+  );
+}

frontend/src/i18n/translation.json

@@ -1544,6 +1544,20 @@
     "fr": "Inconnu",
     "tr": "Bilinmeyen"
   },
+  "CHAT$JUMP_TO_FILE_TOOLTIP": {
+    "en": "Jump to file: {{path}}",
+    "zh-CN": "跳转到文件：{{path}}",
+    "de": "Zur Datei springen: {{path}}",
+    "ko-KR": "파일로 이동: {{path}}",
+    "no": "Hopp til fil: {{path}}",
+    "zh-TW": "跳轉到文件：{{path}}",
+    "it": "Vai al file: {{path}}",
+    "pt": "Ir para o arquivo: {{path}}",
+    "es": "Ir al archivo: {{path}}",
+    "ar": "انتقل إلى الملف: {{path}}",
+    "fr": "Aller au fichier: {{path}}",
+    "tr": "Dosyaya git: {{path}}"
+  },
   "SECURITY_ANALYZER$UNKNOWN_RISK": {
     "en": "Unknown Risk",
     "de": "Unbekanntes Risiko",

frontend/src/message.d.ts

@@ -8,4 +8,5 @@ type Message = {
   pending?: boolean;
   translationID?: string;
   eventID?: number;
+  filePath?: string;
 };

frontend/src/state/chat-slice.ts

@@ -163,6 +163,7 @@ export const chatSlice = createSlice({
       } else if (observationID === "read" || observationID === "edit") {
         const { content } = observation.payload;
         causeMessage.content = `\`\`\`${observationID === "edit" ? "diff" : "python"}\n${content}\n\`\`\``; // Content is already truncated by the ACI
+        causeMessage.filePath = observation.payload.extras.path;
       } else if (observationID === "browse") {
         let content = `**URL:** ${observation.payload.extras.url}\n`;
         if (observation.payload.extras.error) {