Implement Chatbot to Replace Nonresponsive Messaging System

Description:
This issue is focused on replacing the current unresponsive messaging system on the voting website with a new, fully functional chatbot. The project is built with Next.js, so the chatbot component will be integrated as part of the Next.js codebase. The new chatbot will utilize a generative language API to generate real-time responses, significantly improving user engagement and providing immediate guidance during the voting process.

Benefits:

Improved Responsiveness:
The chatbot will deliver real-time responses, ensuring users receive immediate feedback and clear guidance.

Enhanced User Engagement:
A conversational interface will simplify user interactions, making it easier for voters to ask questions and receive help, ultimately increasing user satisfaction.

Modular and Scalable:
Built as a standalone Next.js component, the chatbot can be easily enhanced with additional features (e.g., FAQs, vote reminders, multilingual support) as the project evolves.

Tasks:

Chatbot Component Development:

Create a Next.js component (e.g., under components/Chatbot.js) for the chatbot using the provided code.
Ensure the component is fully responsive and integrates seamlessly into the existing Next.js application.
API Integration & Error Handling:

Configure the generative language API integration, replacing the placeholder API key with a valid key.
Implement robust error handling to manage API failures and display appropriate messages to users.
UI/UX Enhancements:

Style the chatbot interface to clearly distinguish between user and bot messages (using distinct profile images and message bubble styles).
Add visual cues (like loading indicators) to show when the chatbot is fetching a response.
Documentation:

Update the project README and relevant documentation to include setup instructions for the new chatbot component.
Document any required environment variables (e.g., the API key) and how to test the component locally within the Next.js environment.
Expected Outcome:

A fully integrated, responsive chatbot component within the Next.js voting website.
Enhanced user experience with immediate, clear, and styled responses during the voting process.
Improved overall reliability and user engagement, reducing manual error review and support overhead.
Additional Notes:
The current messaging system is unresponsive and delays user interactions, which negatively impacts the voting experience. By integrating this Next.js chatbot, we not only solve the current issues but also lay a strong foundation for future enhancements. Feedback and suggestions for additional features are welcome.