Add Proper Support for Voice Chats

[AdeebK1129]

Currently voice chats and OpenAI whisper integrations are not working. Investigate this issue and ensure audio can be recorded and transcribed into mandarin from user input so feedback can be given on speaking

[AdeebK1129]

Root Cause

The /api/transcribe endpoint exists in backend/src/server.ts:112-136 and the frontend transcribeAudio function in ChatPage.tsx:74-105 calls it correctly. The likely failure points are:

1. Missing OPENAI_API_KEY guard — The OpenAI client is initialized unconditionally on line 40:

   const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

   Unlike the Anthropic client (which checks for the key and sets anthropic = null if missing), there's no guard. If OPENAI_API_KEY is not set in the environment, calls to openai.audio.transcriptions.create will throw a 401 at runtime with no clear error surfaced to the user.

2. No check before using openai in /api/transcribe and /api/tts — Both endpoints use openai without verifying the key is present.

Fix

Add a null-safe init and guard checks, mirroring the Anthropic pattern:

// server.ts — replace line 40
const OPENAI_API_KEY = process.env.OPENAI_API_KEY?.trim();
const openai = OPENAI_API_KEY ? new OpenAI({ apiKey: OPENAI_API_KEY }) : null;

Then add a guard at the top of both /api/transcribe and /api/tts handlers:

if (!openai) {
  return res.status(503).json({ error: 'OpenAI key not set' });
}

Also ensure OPENAI_API_KEY is present in your deployment environment (Render/Railway/Vercel env vars). Without it, Whisper and TTS will both silently fail.