Implement AI-Powered Debate Bots with Dynamic Personalities, Skill Levels, and AI-Driven Scoring

# Implement AI-Powered Debate Bots with Dynamic Personalities, Skill Levels, and AI-Driven Scoring

## Problem Statement
The "Play vs Bot" feature does not currently function, as clicking the button leads to a blank page. There is no system in place for:
- Routing users to a debate interface.
- Handling bot interactions with varying difficulty levels and personalities.
- Providing an engaging and interactive debate experience with speech recognition, timers, and AI-driven judgments.
- Processing debates in the backend with context-aware responses and phase-based scoring.

## Proposed Solution
Develop a seamless "Play vs Bot" experience with a dedicated debate interface and AI-driven scoring system.

### Bot Personalities and Interaction
- Support multiple types of bots with varied personalities, ranging from **beginner-friendly** to **expert-level challengers**.
- Introduce an AI-driven response system to make interactions more dynamic.
- Implement real-time feedback mechanisms to improve user engagement.

### Debate Interface
- Enable an interactive debate flow with structured phases.
- Provide a visually engaging and responsive UI.
- Implement speech recognition for a more natural debate experience.
- Introduce a dynamic timer system to manage response durations effectively.

### AI-Driven Debate Judgments
- Develop an AI-based scoring system that evaluates arguments based on coherence, logic, and persuasiveness.
- Provide context-aware feedback to help users improve their debating skills.
- Display real-time scoring updates and final results at the end of the debate.

## Implementation Details

### User Flow
- Implement routing using React Router to automatically direct users to the "Play vs Bot" debate interface.
- Ensure a seamless transition from selecting the bot to starting the debate.

### Bot Selection UI
- Create a `` component that allows users to choose from different bot personalities and skill levels.
- Display bot details, including their debating style and difficulty level.

### Debate UI
- Develop a `` component to handle real-time interactions.
- Implement a speech recognition feature for voice-based arguments.
- Include a dynamic timer to manage debate rounds effectively.

### AI Judging System
- Create a `` component to provide real-time feedback.
- Use natural language processing (NLP) to analyze arguments and assign scores.
- Display a results screen at the end of the debate.

### Enhancements
- Add robust error handling and fallback UI components.
- Improve accessibility with proper ARIA labels and keyboard navigation support.
- Optimize performance using memoization and lazy loading where applicable.

## Expected Impact
- **Enhanced Navigation:** A structured Play vs Bot flow will improve user onboarding.
- **Increased Engagement:** The variety of bot personalities and interactive features will create a more immersive debate experience.
- **Improved Learning:** AI-driven scoring and feedback will enhance user comprehension.
- **Scalability:** This solution lays a strong foundation for future upgrades such as personalized bot recommendations, leaderboard integration, and advanced AI analysis.

## Current Problem Demonstration
Watch the video below to understand the current issue:

https://github.com/user-attachments/assets/8ebbc19f-2119-46c9-bd49-99445cb418de

## Additional Notes
This enhancement aims to significantly improve the user experience for DebateAI by providing clear navigation and essential features for engaging in debates against AI-driven bots. Feedback is welcome, and modifications can be made as necessary.