I'll create a fully functional chatbot frontend using Next.js and Tailwind CSS with all the requested features. Let's build this step by step.

Features Implemented

This chatbot application includes all the requested features:

1. Chat Interface with Message History:

   • Messages are stored in local storage using Zustand's persist middleware
   • Clean UI with user and AI message bubbles
   • Timestamps for each message

2. Text Input with Send Button:

   • Textarea for multi-line input
   • Send button with icon
   • Support for Enter key to send messages

3. Speech-to-Text:

   • Custom useSpeechRecognition hook using the Web Speech API
   • Microphone button with recording indicator
   • Transcription displayed in the input field

4. Text-to-Speech:

   • Custom useSpeechSynthesis hook using the Web Speech API
   • Automatically reads AI responses
   • Support for different voices

5. Multiple AI Personas:

   • Selector for different AI modes (Casual Chat, Coding Assistant, Summarizer, Creative Writer)
   • Each persona has a different response style
   • Persona descriptions and system prompts

6. Typing Indicator:

   • Visual indicator when the AI is "typing"
   • Animated dots with CSS keyframes

7. File Upload Support:

   • Upload text files for AI analysis
   • Supports various file formats (.txt, .md, .csv, .json, etc.)
   • File content is added to the chat input

8. User Authentication:

   • Login and signup forms
   • JWT-based authentication (simulated for demo)
   • Persistent login state

9. Dark Mode:

   • Toggle between light and dark themes
   • Persists user preference in local storage
   • Tailwind dark mode classes

10. Responsive UI:

    • Works on both desktop and mobile
    • Sidebar collapses on mobile
    • Flexible layout with Tailwind CSS

11. State Management:

    • Zustand for state management
    • Separate stores for auth, chat, and settings
    • Persistent state with localStorage

12. API Integration:

    • Axios for API calls (commented code ready for real implementation)
    • Simulated API responses for demo purposes

How to Use

1. Authentication: Start by signing up or logging in
2. Chat: Type messages in the input box and press Enter or click Send
3. Voice Input: Click the microphone icon to start/stop voice recording
4. File Upload: Click the upload icon to analyze text files
5. Change Persona: Select different AI personas from the sidebar
6. Dark Mode: Toggle dark mode with the sun/moon icon in the header

This application provides a complete foundation that you can connect to any AI backend API by uncommenting and configuring the API calls in the chat store.