JACoB PR for Issue Send Filename to Chat via button on Codebase Details

src/app/dashboard/[org]/[repo]/chat/ChatPage.tsx

@@ -5,6 +5,7 @@ import React, { useMemo } from "react";
 import { Chat } from "./components/Chat";
 import { api } from "~/trpc/react";
 import LoadingIndicator from "../components/LoadingIndicator";
+import { useSearchParams } from 'next/navigation';
 
 interface ChatPageProps {
   org: string;
@@ -21,6 +22,10 @@ const ChatPage: React.FC<ChatPageProps> = ({ org, repo }) => {
     repo,
   });
 
+  const searchParams = useSearchParams();
+  const filePath = searchParams.get('file_path');
+  const selectedFilePath = filePath ? decodeURIComponent(filePath) : undefined;
+
   const memoizedContextItems = useMemo(
     () => contextItems ?? [],
     [contextItems],
@@ -40,6 +45,7 @@ const ChatPage: React.FC<ChatPageProps> = ({ org, repo }) => {
         contextItems={memoizedContextItems}
         org={org}
         repo={repo}
+        selectedFilePath={selectedFilePath}
       />
     </div>
   );

src/app/dashboard/[org]/[repo]/chat/components/Chat.tsx

@@ -22,6 +22,7 @@ interface ChatProps {
   contextItems: ContextItem[];
   org: string;
   repo: string;
+  selectedFilePath?: string;
 }
 
 export interface CodeFile {
@@ -44,7 +45,7 @@ const STARTING_MESSAGE = {
     "Hi, I'm JACoB. I can answer questions about your codebase. Ask me anything!",
 };
 
-export function Chat({ contextItems, org, repo }: ChatProps) {
+export function Chat({ contextItems, org, repo, selectedFilePath }: ChatProps) {
   const [artifactContent, setArtifactContent] = useState<string | null>(null);
   const [artifactFileName, setArtifactFileName] = useState<string>("");
   const [artifactLanguage, setArtifactLanguage] = useState<string>("");
@@ -163,6 +164,18 @@ export function Chat({ contextItems, org, repo }: ChatProps) {
     }
   }, [codeContent]);
 
+  useEffect(() => {
+    if (selectedFilePath) {
+      const selectedFile = contextItems.find(item => item.file === selectedFilePath);
+      if (selectedFile) {
+        setSelectedFiles([selectedFilePath]);
+        void refetchCodeContent();
+      } else {
+        toast.error("Selected file not found in the codebase context.");
+      }
+    }
+  }, [selectedFilePath, contextItems, refetchCodeContent]);
+
   const handleSearchResultSelect = (filePath: string) => {
     setSelectedFiles([filePath]);
     void refetchCodeContent();

src/app/dashboard/[org]/[repo]/code-visualizer/codebase/CodebaseDetails.tsx

@@ -10,6 +10,7 @@ import {
   faChevronDown,
   faCopy,
   faCheck,
+  faComment,
 } from "@fortawesome/free-solid-svg-icons";
 import Mermaid from "./Mermaid";
 import Markdown, { type Components } from "react-markdown";
@@ -25,6 +26,7 @@ import {
 } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { faClipboard } from "@fortawesome/free-solid-svg-icons";
 import { toast } from "react-toastify";
+import { useRouter } from 'next/navigation';
 
 interface CodebaseDetailsProps {
   item: ContextItem;
@@ -105,6 +107,7 @@ const CodebaseDetails: React.FC<CodebaseDetailsProps> = ({
   theme,
 }) => {
   const [copyStatus, setCopyStatus] = useState(false);
+  const router = useRouter();
 
   const handleCopy = () => {
     navigator.clipboard
@@ -118,6 +121,15 @@ const CodebaseDetails: React.FC<CodebaseDetailsProps> = ({
       });
   };
 
+  const handleSendToChat = () => {
+    if (item.file) {
+      const encodedFilePath = encodeURIComponent(item.file);
+      router.push(`/dashboard/${item.org}/${item.repo}/chat?file_path=${encodedFilePath}`);
+    } else {
+      toast.error("No file selected. Please select a file before sending to chat.");
+    }
+  };
+
   return (
     <div className="details hide-scrollbar h-full overflow-scroll bg-white text-left text-sm text-gray-800 dark:bg-gray-900 dark:text-white">
       <div className="sticky top-0 z-10 flex h-12 items-center justify-between bg-gradient-to-r from-aurora-50 to-aurora-100/70 px-4 shadow-sm dark:from-gray-800 dark:to-gray-700">
@@ -187,6 +199,16 @@ const CodebaseDetails: React.FC<CodebaseDetailsProps> = ({
           <CodeSection code={item.code} theme={theme} />
         ) : null}
       </div>
+
+      <div className="sticky bottom-0 left-0 right-0 bg-white p-4 dark:bg-gray-900">
+        <button
+          onClick={handleSendToChat}
+          className="flex w-full items-center justify-center rounded-lg bg-aurora-500 px-4 py-2 text-white transition-colors hover:bg-aurora-600 dark:bg-aurora-600 dark:hover:bg-aurora-700"
+        >
+          <FontAwesomeIcon icon={faComment} className="mr-2" />
+          Send Filename to Chat
+        </button>
+      </div>
     </div>
   );
 };
@@ -236,4 +258,4 @@ export const Section: React.FC<{
   );
 };
 
-export default CodebaseDetails;
+export default CodebaseDetails;