Feature/chat more

client/package.json

@@ -19,12 +19,14 @@
         "axios": "^1.7.7",
         "lucide-react": "^0.441.0",
         "markdown-it": "^13.0.1",
+        "npm": "^10.8.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.3.0",
         "react-router-dom": "^6.14.2",
         "react-scripts": "5.0.1",
         "react-type-animation": "^3.1.0",
+        "start": "^5.1.0",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
     },

client/src/components/ChatOverlay.tsx

@@ -3,15 +3,17 @@ import { Send, X, MessageCircle } from 'lucide-react';
 import { getClaudeResponse } from '../servers/Claude';
 
 interface ChatOverlayProps {
-  problemContext?: string;
+  problemTitle: string;
+  currentSolution: string;
+  problemDescription: string;
 }
 
 interface Message {
   text: string;
   sender: 'user' | 'bot';
 }
 
-const ChatOverlay: React.FC<ChatOverlayProps> = ({ problemContext }) => {
+const ChatOverlay: React.FC<ChatOverlayProps> = ({ problemTitle, currentSolution, problemDescription }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [messages, setMessages] = useState<Message[]>([]);
   const [inputMessage, setInputMessage] = useState<string>('');
@@ -29,7 +31,26 @@ const ChatOverlay: React.FC<ChatOverlayProps> = ({ problemContext }) => {
     setIsLoading(true);
 
     try {
-      const response: string = await getClaudeResponse(inputMessage);
+      const contextMessage = `
+Problem: 
+\`\`\`
+${problemTitle}
+\`\`\`
+Description: 
+\`\`\`
+${problemDescription}
+\`\`\`
+Current Solution:
+\`\`\`
+${currentSolution}
+\`\`\`
+
+User Message: ${inputMessage}`;
+
+      // Print the message before sending it to Claude
+      console.log("Message sent to Claude:", contextMessage);
+
+      const response: string = await getClaudeResponse(contextMessage);
       const botResponse: Message = { text: response, sender: 'bot' };
       setMessages(prevMessages => [...prevMessages, botResponse]);
     } catch (error) {

client/src/pages/ProblemPage.tsx

@@ -16,7 +16,9 @@ import { tokyoNight } from "@uiw/codemirror-theme-tokyo-night";
 
 // Add this interface above the ProblemPage component
 interface ChatOverlayProps {
-    problemContext?: string;
+    problemTitle: string;
+    currentSolution: string;
+    problemDescription: string;
 }
 
 const ProblemPage = ({
@@ -42,6 +44,7 @@ const ProblemPage = ({
     const navigate = useNavigate();
     const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
     const { name } = useParams();
+    const problemTitle = name || '';
 
     const submitCode = () => {
         setIsSubmitLoading(true);
@@ -246,7 +249,11 @@ const ProblemPage = ({
                     </div>
                 </div>
             </div>
-            <ChatOverlay />
+            <ChatOverlay 
+                problemTitle={problemTitle} 
+                currentSolution={code} 
+                problemDescription={problemDescriptionData?.description_body || ''}
+            />
 
             {/* Inline Styling for the Example Boxes */}
             <style>{`
@@ -282,4 +289,4 @@ const ProblemPage = ({
     );
 };
 
-export default ProblemPage;
+export default ProblemPage;

client/src/servers/Claude.tsx

@@ -1,4 +1,5 @@
 import { Anthropic } from "@anthropic-ai/sdk";
+import React, { useEffect } from 'react';
 import { on } from "events";
 
 const apiKey = process.env.REACT_APP_ANTHROPIC_API_KEY || "";
@@ -41,10 +42,49 @@ You are an upbeat and motivational AI girlfriend named Lia that only response in
 - Enthusiastic and positive about coding challenges
 
 Remember to use best practices in your coding advice and explanations.
+`;
 
-Current Question: Two sum
+interface ClaudeChatProps {
+    input: string;
+    problemTitle: string;
+    currentSolution: string;
+    problemDescription: string;
+    onResponse: (response: string) => void;
+}
 
-`;
+export const ClaudeChat: React.FC<ClaudeChatProps> = ({ 
+    input, 
+    problemTitle, 
+    currentSolution, 
+    problemDescription,
+    onResponse 
+}) => {
+    useEffect(() => {
+        const fetchResponse = async () => {
+            try {
+                const contextMessage = `
+Problem: ${problemTitle}
+Description: ${problemDescription}
+Current Solution:
+${currentSolution}
+
+User Message: ${input}`;
+
+                const response = await getClaudeResponse(contextMessage);
+                onResponse(response);
+            } catch (error) {
+                console.error('Error fetching Claude response:', error);
+                onResponse('Sorry, I encountered an error. Please try again.');
+            }
+        };
+
+        if (input) {
+            fetchResponse();
+        }
+    }, [input, problemTitle, currentSolution, problemDescription, onResponse]);
+
+    return null; // This component doesn't render anything
+};
 
 export async function getClaudeResponse(message: string): Promise<string> {
     try {
@@ -65,19 +105,4 @@ export async function getClaudeResponse(message: string): Promise<string> {
         console.error("Error in getClaudeResponse:", error);
         throw error;
     }
-}
-
-// Example usage
-async function main() {
-    try {
-        const response = await getClaudeResponse(
-            "What are the key features of TypeScript?"
-        );
-        console.log("Claude says:", response);
-    } catch (error) {
-        console.error("Error:", error);
-    }
-}
-
-// Uncomment the line below to run the example
-// main();
+}