Add Gemini chatbot test widget with floating button and /api/chat endpoint

app.py

@@ -97,6 +97,60 @@ async def list_modules():
     }
 
 
+# ==========================================
+# GEMINI CHATBOT TEST ENDPOINT
+# ==========================================
+from pydantic import BaseModel
+import os
+
+class ChatRequest(BaseModel):
+    message: str
+
+@app.post("/api/chat", tags=["Chat"])
+async def chat_with_gemini(request: ChatRequest):
+    """
+    Test Gemini API connectivity.
+    Uses GEMINI_API_KEY from environment.
+    """
+    import requests
+    
+    api_key = config.gemini_api_key or os.getenv("GEMINI_API_KEY")
+    if not api_key:
+        return {"error": "GEMINI_API_KEY not configured"}
+    
+    try:
+        # Use Gemini REST API directly
+        url = f"https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key={api_key}"
+        
+        payload = {
+            "contents": [{
+                "parts": [{"text": request.message}]
+            }]
+        }
+        
+        response = requests.post(url, json=payload, timeout=30)
+        
+        if response.status_code != 200:
+            return {"error": f"Gemini API error: {response.status_code} - {response.text[:200]}"}
+        
+        data = response.json()
+        
+        # Extract reply
+        candidates = data.get("candidates", [])
+        if candidates:
+            content = candidates[0].get("content", {})
+            parts = content.get("parts", [])
+            if parts:
+                reply = parts[0].get("text", "No response")
+                return {"reply": reply}
+        
+        return {"error": "No response from Gemini"}
+        
+    except Exception as e:
+        logger.error(f"Gemini chat error: {e}")
+        return {"error": str(e)}
+
+
 @app.get("/")
 async def read_root():
     """Serve the web UI"""

static/index.html

@@ -673,7 +673,195 @@
                 status.innerHTML = '❌ Error: ' + err.message;
             }
         });
+
+        // ==========================================
+        // GEMINI CHATBOT TEST
+        // ==========================================
+        const chatBtn = document.getElementById('chatBtn');
+        const chatModal = document.getElementById('chatModal');
+        const chatClose = document.getElementById('chatClose');
+        const chatForm = document.getElementById('chatForm');
+        const chatInput = document.getElementById('chatInput');
+        const chatMessages = document.getElementById('chatMessages');
+
+        chatBtn.addEventListener('click', () => {
+            chatModal.classList.toggle('hidden');
+        });
+
+        chatClose.addEventListener('click', () => {
+            chatModal.classList.add('hidden');
+        });
+
+        chatForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const message = chatInput.value.trim();
+            if (!message) return;
+
+            // Add user message
+            addMessage(message, 'user');
+            chatInput.value = '';
+
+            // Add loading
+            const loadingId = addMessage('⏳ Thinking...', 'bot');
+
+            try {
+                const res = await fetch('/api/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message })
+                });
+                const data = await res.json();
+
+                // Remove loading
+                document.getElementById(loadingId).remove();
+
+                if (data.reply) {
+                    addMessage(data.reply, 'bot');
+                } else if (data.error) {
+                    addMessage('❌ ' + data.error, 'bot');
+                }
+            } catch (err) {
+                document.getElementById(loadingId).remove();
+                addMessage('❌ Error: ' + err.message, 'bot');
+            }
+        });
+
+        function addMessage(text, type) {
+            const id = 'msg-' + Date.now();
+            const div = document.createElement('div');
+            div.id = id;
+            div.className = 'chat-message ' + type;
+            div.textContent = text;
+            chatMessages.appendChild(div);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            return id;
+        }
     </script>
+
+    <!-- Chat Widget Button -->
+    <button id="chatBtn" class="chat-float-btn">💬</button>
+
+    <!-- Chat Modal -->
+    <div id="chatModal" class="chat-modal hidden">
+        <div class="chat-header">
+            <span>🤖 Gemini Chat Test</span>
+            <button id="chatClose">✕</button>
+        </div>
+        <div id="chatMessages" class="chat-body"></div>
+        <form id="chatForm" class="chat-input-area">
+            <input type="text" id="chatInput" placeholder="Type a message..." autocomplete="off">
+            <button type="submit">Send</button>
+        </form>
+    </div>
+
+    <style>
+        .chat-float-btn {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #6366f1, #a855f7);
+            border: none;
+            font-size: 28px;
+            cursor: pointer;
+            box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
+            z-index: 9999;
+            transition: transform 0.2s;
+        }
+
+        .chat-float-btn:hover {
+            transform: scale(1.1);
+        }
+
+        .chat-modal {
+            position: fixed;
+            bottom: 100px;
+            right: 30px;
+            width: 380px;
+            height: 500px;
+            background: var(--bg-card);
+            border-radius: 16px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+            display: flex;
+            flex-direction: column;
+            z-index: 9998;
+            overflow: hidden;
+        }
+
+        .chat-modal.hidden {
+            display: none;
+        }
+
+        .chat-header {
+            padding: 15px 20px;
+            background: linear-gradient(135deg, #6366f1, #a855f7);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-weight: 600;
+        }
+
+        .chat-header button {
+            background: none;
+            border: none;
+            color: white;
+            font-size: 18px;
+            cursor: pointer;
+        }
+
+        .chat-body {
+            flex: 1;
+            padding: 15px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .chat-message {
+            padding: 10px 14px;
+            border-radius: 12px;
+            max-width: 85%;
+            word-wrap: break-word;
+        }
+
+        .chat-message.user {
+            background: var(--accent);
+            align-self: flex-end;
+        }
+
+        .chat-message.bot {
+            background: var(--bg-secondary);
+            align-self: flex-start;
+        }
+
+        .chat-input-area {
+            display: flex;
+            padding: 10px;
+            gap: 10px;
+            border-top: 1px solid var(--border);
+        }
+
+        .chat-input-area input {
+            flex: 1;
+            padding: 12px;
+            border-radius: 8px;
+            border: none;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+        }
+
+        .chat-input-area button {
+            padding: 12px 20px;
+            border-radius: 8px;
+            border: none;
+            background: var(--accent);
+            color: white;
+            cursor: pointer;
+        }
+    </style>
 </body>
 
 </html>