feat: ai chat now has context of the active tab

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',

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>

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,
     });

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>
             </>
           )}