feat: implement Anthropic API integration with simulation mode and a configurable admin dashboard

src/lib/api.js

@@ -2,47 +2,52 @@ import { storage } from './storage';
 
 /**
  * Anthropic API Service
- * Handles communication with the /v1/messages endpoint.
+ * Handles communication with the /v1/messages endpoint via Nginx proxy.
  */
 
-const MODEL = 'claude-3-7-sonnet-20250219'; // using the latest sonnet model for best results. Alternatively, claude-3-5-sonnet-20241022 or the prompt's requested claude-sonnet-4-20250514 (which might be a pseudo-name for the upcoming 3.7 or future version).
+const DEFAULT_MODEL = 'claude-sonnet-4-20250514';
 
 export const anthropicApi = {
-  /**
-   * Call the Anthropic API with a system prompt and user message.
-   * Includes a basic retry mechanism.
-   */
   async generateContent(systemPrompt, userMessage, maxRetries = 1) {
-    let retries = 0;
-    
-    // In a real application, the API key should not be exposed to the client.
-    // For this prototype, we'll assume it's passed or available in the environment,
-    // or proxied via a secure endpoint if deployed.
-    // Prioritize key from local storage (set via Admin Settings)
-    const apiKey = storage.get('admin:anthropic_key') || import.meta.env.VITE_ANTHROPIC_API_KEY || 'no-key-provided';
+    // Check if simulation mode is on
+    const useSimulation = storage.get('admin:use_simulation') === true;
+    if (useSimulation) {
+      console.log('[API] Simulatie mode actief. Mock data wordt geretourneerd.');
+      return await simulateResponse();
+    }
 
+    const apiKey = storage.get('admin:anthropic_key') || import.meta.env.VITE_ANTHROPIC_API_KEY;
+    if (!apiKey) {
+      throw new Error('Geen Anthropic API key gevonden. Ga naar Admin -> Settings.');
+    }
+
+    // Model is configurable from Admin > Settings, defaults to the original spec model
+    const model = storage.get('admin:model') || DEFAULT_MODEL;
+    console.log(`[API] Aanroep met model: ${model}`);
+
+    let retries = 0;
     while (retries <= maxRetries) {
       try {
-        const response = await fetch('https://api.anthropic.com/v1/messages', {
+        const response = await fetch('/api/anthropic/v1/messages', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
             'x-api-key': apiKey,
             'anthropic-version': '2023-06-01',
-            'anthropic-dangerous-direct-browser-access': 'true' // Required for client-side fetch
+            'anthropic-dangerous-direct-browser-access': 'true'
           },
           body: JSON.stringify({
-            model: MODEL,
+            model: model,
             max_tokens: 4000,
             system: systemPrompt,
-            messages: [
-              { role: 'user', content: userMessage }
-            ]
+            messages: [{ role: 'user', content: userMessage }]
           })
         });
 
         if (!response.ok) {
-          throw new Error(`API Error: ${response.status} ${response.statusText}`);
+          const errData = await response.json().catch(() => ({}));
+          console.error('[API] Error response:', errData);
+          throw new Error(`API Error: ${response.status} ${response.statusText} - ${JSON.stringify(errData)}`);
         }
 
         const data = await response.json();
@@ -50,12 +55,24 @@ export const anthropicApi = {
       } catch (error) {
         console.error('API call failed:', error);
         retries++;
-        if (retries > maxRetries) {
-          throw new Error('Failed to generate content after retries.');
-        }
-        // Small delay before retry
-        await new Promise(resolve => setTimeout(resolve, 1000));
+        if (retries > maxRetries) throw error;
+        await new Promise(r => setTimeout(r, 1000));
       }
     }
   }
 };
+
+async function simulateResponse() {
+  await new Promise(r => setTimeout(r, 2000));
+  return JSON.stringify({
+    topics: [
+      { id: "radicale-transparantie", label: "Radicale Transparantie", type: "concept", description: "De kernwaarde van Respellion waarbij alle informatie publiek toegankelijk is." },
+      { id: "kennisbeheer", label: "Kennisbeheer", type: "process", description: "Het proces van het vastleggen en ontsluiten van organisatiekennis." },
+      { id: "wekelijkse-sessie", label: "Wekelijkse Leersessie", type: "process", description: "Elke week leren medewerkers via AI-gegenereerde vragen en quizzen." }
+    ],
+    relations: [
+      { source: "kennisbeheer", target: "radicale-transparantie", type: "depends_on" },
+      { source: "wekelijkse-sessie", target: "kennisbeheer", type: "part_of" }
+    ]
+  });
+}