Let users change their API key and check that the key is valid

src/reachy_mini_conversation_app/console.py

@@ -217,6 +217,35 @@ class LocalStream:
             self._persist_api_key(key)
             return JSONResponse({"ok": True})
 
+        # POST /validate_api_key -> validate key without persisting it
+        @self._settings_app.post("/validate_api_key")
+        async def _validate_key(payload: ApiKeyPayload) -> JSONResponse:
+            key = (payload.openai_api_key or "").strip()
+            if not key:
+                return JSONResponse({"valid": False, "error": "empty_key"}, status_code=400)
+
+            # Try to validate by checking if we can fetch the models
+            try:
+                import httpx
+                headers = {
+                    "Authorization": f"Bearer {key}",
+                    "Content-Type": "application/json"
+                }
+                async with httpx.AsyncClient(timeout=10.0) as client:
+                    response = await client.get(
+                        "https://api.openai.com/v1/models",
+                        headers=headers
+                    )
+                    if response.status_code == 200:
+                        return JSONResponse({"valid": True})
+                    elif response.status_code == 401:
+                        return JSONResponse({"valid": False, "error": "invalid_api_key"}, status_code=401)
+                    else:
+                        return JSONResponse({"valid": False, "error": "validation_failed"}, status_code=response.status_code)
+            except Exception as e:
+                logger.warning(f"API key validation failed: {e}")
+                return JSONResponse({"valid": False, "error": "validation_error"}, status_code=500)
+
         self._settings_initialized = True
 
     def launch(self) -> None:

src/reachy_mini_conversation_app/static/index.html

@@ -28,6 +28,7 @@
           <span class="chip chip-ok">Connected</span>
         </div>
         <p class="muted">OpenAI API key is already configured. You can jump straight to personalities.</p>
+        <button id="change-key-btn" class="ghost">Change API key</button>
       </div>
 
       <div id="form-panel" class="panel hidden">

src/reachy_mini_conversation_app/static/main.js

@@ -57,6 +57,20 @@ async function waitForPersonalityData(timeoutMs = 15000) {
   }
 }
 
+async function validateKey(key) {
+  const body = { openai_api_key: key };
+  const resp = await fetch("/validate_api_key", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  const data = await resp.json().catch(() => ({}));
+  if (!resp.ok) {
+    throw new Error(data.error || "validation_failed");
+  }
+  return data;
+}
+
 async function saveKey(key) {
   const body = { openai_api_key: key };
   const resp = await fetch("/openai_api_key", {
@@ -170,6 +184,7 @@ async function init() {
   const configuredPanel = document.getElementById("configured");
   const personalityPanel = document.getElementById("personality-panel");
   const saveBtn = document.getElementById("save-btn");
+  const changeKeyBtn = document.getElementById("change-key-btn");
   const input = document.getElementById("api-key");
 
   // Personality elements
@@ -200,22 +215,55 @@ async function init() {
     show(configuredPanel, true);
   }
 
+  // Handler for "Change API key" button
+  changeKeyBtn.addEventListener("click", () => {
+    show(configuredPanel, false);
+    show(formPanel, true);
+    input.value = "";
+    statusEl.textContent = "";
+    statusEl.className = "status";
+  });
+
+  // Remove error styling when user starts typing
+  input.addEventListener("input", () => {
+    input.classList.remove("error");
+  });
+
   saveBtn.addEventListener("click", async () => {
     const key = input.value.trim();
     if (!key) {
       statusEl.textContent = "Please enter a valid key.";
       statusEl.className = "status warn";
+      input.classList.add("error");
       return;
     }
-    statusEl.textContent = "Saving...";
+    statusEl.textContent = "Validating API key...";
     statusEl.className = "status";
+    input.classList.remove("error");
     try {
+      // First validate the key
+      const validation = await validateKey(key);
+      if (!validation.valid) {
+        statusEl.textContent = "Invalid API key. Please check your key and try again.";
+        statusEl.className = "status error";
+        input.classList.add("error");
+        return;
+      }
+
+      // If valid, save it
+      statusEl.textContent = "Key valid! Saving...";
+      statusEl.className = "status ok";
       await saveKey(key);
       statusEl.textContent = "Saved. Reloading…";
       statusEl.className = "status ok";
       window.location.reload();
     } catch (e) {
-      statusEl.textContent = "Failed to save key.";
+      input.classList.add("error");
+      if (e.message === "invalid_api_key") {
+        statusEl.textContent = "Invalid API key. Please check your key and try again.";
+      } else {
+        statusEl.textContent = "Failed to validate/save key. Please try again.";
+      }
       statusEl.className = "status error";
     }
   });

src/reachy_mini_conversation_app/static/style.css

@@ -163,6 +163,10 @@ textarea:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(94, 240, 193, 0.15);
 }
+input.error {
+  border-color: var(--error);
+  box-shadow: 0 0 0 3px rgba(255, 92, 112, 0.15);
+}
 select option {
   background: #0b152a;
   color: var(--text);