Refactor/enhance app security and maintainability

[abemscac]

I should've split these changes into separate commits, but since the code has changed significantly, I figured that wouldn't help much. 😬 Sorry about that!

But don't worry, the app flow is still the same:

1. Open the app.
2. Click the assistant button and say something.
3. Speech-to-text -> Generate completion via OpenAI.
4. Text-to-speech via ElevenLabs -> Play audio in the browser.

Here’s a breakdown of the changes I made. It's totally fine to apply any of these changes directly to the source repo if you'd rather skip my fork. 🙏 I also haven’t looked closely at other PRs, so some overlap is possible.

---

Changes

Security

1. Move speech-to-text API calls to the server-side.
   • Previously, the ElevenLabs API key was exposed in the client as a NEXT_PUBLIC_ELEVENLABS_API_KEY environment variable, which is unsafe. The call has been moved to the server to keep the key secure, as recommended here:

Do not show your API keys to anyone else. If someone gains access to one of your API keys, they can use your account as if they knew your password.

Functional

1. Update default voice ID for ElevenLabs.
   • Changed from nWM88eUzTWbyiJW1K8NX to cgSgspJ2msm6clMCkdW9 as the previous one no longer works and caused a 400 Bad Request error.
   • You can find more voices here.
2. Remove src/apps/favicon.ico.
   • This resolves a conflict with public/favicon.ico.
3. Update prompt for completion generation.
   • Changed from Your answer has to be as concise as possible. to Reply in the same language as the input. Keep it concise and friendly, like you're chatting with a friend.
   • This ensures the assistant responds in the user's language, making replies slightly longer and warmer compared to the previous short, English-only responses.

Maintainbility

1. Rename /api/chat to /api/completion.
   • I hope it better reflects the endpoint's purpose.
2. Add types for API interfaces (src/apiTypes) to align request & response interfaces between the client and server.
3. Replace base64 conversion with FormData for audio uploads for best practice.
4. Add a textToSpeech endpoint (src/app/api/textToSpeech/route.ts) for best practice.
5. Refactor AssistantButton.
   • Significantly improved readability and maintainability (well, I hope so 😅!)
6. Add response utilities on the server-side (src/utils/server/response.ts).
7. Set default styles for react-hot-toast (<Toaster toastOptions={...} />) to avoid duplication.

CI

1. Set up GitHub Actions for Prettier and TSC.
   • Added checks to ensure consistent code formatting and type safety before merging to main.

---

Suggestions

Server Side

1. Add request validation.
   • Validate requests before processing to return 400 Bad Request when necessary.

Client Side

1. Show text output after speech-to-text.
   • Let users see their converted text to confirm the app is working.
2. Improve assistant state feedback.
   • Update the assistant button animation to reflect states like "ready," "recording," and "thinking."
3. Display the assistant’s reply.
   • In addition to audio, also show the assistant's text response on the screen to enhance UX.

Maintainability

1. Add CI check for ESLint.

[vercel]

@abemscac is attempting to deploy a commit to the ntegrals' projects Team on Vercel.

A member of the Team first needs to authorize it.