From 751d9a3005a7f8013cac172ba70bc642b76f1dd5 Mon Sep 17 00:00:00 2001
From: Akhileshrangani4 <akhileshrangani4@gmail.com>
Date: Mon, 14 Oct 2024 23:01:25 -0400
Subject: [PATCH] feat: ai chat now has context of the active tab

---
 backend/ai/src/index.ts                            | 6 ++++--
 frontend/components/editor/AIChat/index.tsx        | 9 ++++++---
 frontend/components/editor/AIChat/lib/chatUtils.ts | 4 +++-
 frontend/components/editor/index.tsx               | 5 ++++-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/backend/ai/src/index.ts b/backend/ai/src/index.ts
index c170aab..c3b82ca 100644
--- a/backend/ai/src/index.ts
+++ b/backend/ai/src/index.ts
@@ -21,9 +21,10 @@ export default {
     if (request.method !== "POST") {
       return new Response("Method Not Allowed", { status: 405 });
     }
-    const body = await request.json() as { messages: unknown; context: unknown };
+    const body = await request.json() as { messages: unknown; context: unknown; activeFileContent: string };
     const messages = body.messages;
     const context = body.context;
+    const activeFileContent = body.activeFileContent;
 
     if (!Array.isArray(messages)) {
       return new Response("Invalid messages format", { status: 400 });
@@ -37,7 +38,8 @@ print("Hello, World!")
 
 Provide a clear and concise explanation along with any code snippets. Keep your response brief and to the point.
 
-${context ? `Context:\n${context}\n` : ''}`;
+${context ? `Context:\n${context}\n` : ''}
+${activeFileContent ? `Active File Content:\n${activeFileContent}\n` : ''}`;
 
     const anthropicMessages = messages.map(msg => ({
       role: msg.role === 'human' ? 'user' : 'assistant',
diff --git a/frontend/components/editor/AIChat/index.tsx b/frontend/components/editor/AIChat/index.tsx
index 66576a0..a9778c4 100644
--- a/frontend/components/editor/AIChat/index.tsx
+++ b/frontend/components/editor/AIChat/index.tsx
@@ -11,7 +11,7 @@ interface Message {
   context?: string;
 }
 
-export default function AIChat() {
+export default function AIChat({ activeFileContent, activeFileName }: { activeFileContent: string, activeFileName: string }) {
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState('');
   const [isGenerating, setIsGenerating] = useState(false);
@@ -38,7 +38,10 @@ export default function AIChat() {
 
   return (
     <div className="flex flex-col h-screen w-full">
-      <span className="text-muted-foreground/50 font-medium p-2">CHAT</span>
+      <div className="flex justify-between items-center p-2 border-b">
+        <span className="text-muted-foreground/50 font-medium">CHAT</span>
+        <span className="text-muted-foreground/50 font-medium truncate max-w-[50%]" title={activeFileName}>{activeFileName}</span>
+      </div>
       <div ref={chatContainerRef} className="flex-grow overflow-y-auto p-4 space-y-4">
         {messages.map((message, messageIndex) => (
           <ChatMessage 
@@ -61,7 +64,7 @@ export default function AIChat() {
           input={input}
           setInput={setInput}
           isGenerating={isGenerating}
-          handleSend={() => handleSend(input, context, messages, setMessages, setInput, setIsContextExpanded, setIsGenerating, setIsLoading, abortControllerRef)}
+          handleSend={() => handleSend(input, context, messages, setMessages, setInput, setIsContextExpanded, setIsGenerating, setIsLoading, abortControllerRef, activeFileContent)}
           handleStopGeneration={() => handleStopGeneration(abortControllerRef)}
         />
       </div>
diff --git a/frontend/components/editor/AIChat/lib/chatUtils.ts b/frontend/components/editor/AIChat/lib/chatUtils.ts
index c7faa91..21f3004 100644
--- a/frontend/components/editor/AIChat/lib/chatUtils.ts
+++ b/frontend/components/editor/AIChat/lib/chatUtils.ts
@@ -63,7 +63,8 @@ export const handleSend = async (
   setIsContextExpanded: React.Dispatch<React.SetStateAction<boolean>>,
   setIsGenerating: React.Dispatch<React.SetStateAction<boolean>>,
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
-  abortControllerRef: React.MutableRefObject<AbortController | null>
+  abortControllerRef: React.MutableRefObject<AbortController | null>,
+  activeFileContent: string
 ) => {
   if (input.trim() === '' && !context) return;
 
@@ -95,6 +96,7 @@ export const handleSend = async (
       body: JSON.stringify({
         messages: anthropicMessages,
         context: context || undefined,
+        activeFileContent: activeFileContent,
       }),
       signal: abortControllerRef.current.signal,
     });
diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx
index d3baf21..5ff1a7c 100644
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@@ -1145,7 +1145,10 @@ export default function CodeEditor({
             <>
               <ResizableHandle />
               <ResizablePanel defaultSize={30} minSize={15}>
-                <AIChat />
+              <AIChat 
+                activeFileContent={activeFileContent} 
+                activeFileName={tabs.find(tab => tab.id === activeFileId)?.name || 'No file selected'}
+              />
               </ResizablePanel>
             </>
           )}