Requirements
Bounty Objective
Create a modern, production-ready chatbot UI using React.js that supports rich text responses, structured layouts, voice input/output, and advanced conversational UX. This is a frontend-only task.
Backend logic, AI/LLM integration, and payments are out of scope. Mock data or dummy APIs may be used.
Problem Statement
Most chatbot interfaces today are basic and text-only. The goal is to build a scalable, intelligent, and visually rich chatbot UI that can later be integrated with any AI backend.
Your task is to design and build the complete frontend UI based on the requirements below.
Scope of Work
- Chat Input Module
Text input field with placeholder: “Ask me anything…” Send button with enabled/disabled state Enter key support for submission Multi-line input for long queries Input character limit with live counter Microphone button (UI and mock behavior)
- Chat Output / Response Rendering Text Formatting
Bold, italic, headings (H1–H4) Bullet and numbered lists Code blocks with syntax highlighting Clickable inline links Structured Responses Tables (scrollable) Key-value cards Step-by-step layouts FAQ / accordion-style content Smart UI Components Cards Accordions Tabs Highlighted information callouts
- Conversation Experience
User messages aligned to the right Bot messages aligned to the left Loading or typing indicator Auto-scroll to latest message Clear chat option New conversation option Chat history using local or session storage
- Voice and VUI (UI with Mock Logic)
Voice input button with listening indicator Speech-to-text UI simulation Text-to-speech controls: Play and pause Speed control (0.75x, 1x, 1.25x) Voice selector (UI only)
- Advanced UX (Optional but Preferred)
Copy response to clipboard Regenerate response button (mock behavior) Expand and collapse long responses Suggested follow-up question chips Message reactions (like or dislike) Tech Stack Requirements React.js (latest stable version) Component-based architecture Tailwind CSS or CSS Modules State management using Context API, Redux, or Zustand Mock API or static JSON data
Out of Scope
AI or LLM backend implementation Model training or prompt engineering Authentication Payment integration
Deliverables
GitHub repository with clean and readable code Fully responsive UI (mobile and desktop) README file explaining: Project architecture Setup and run instructions Assumptions made Deployed demo link (Vercel or Netlify preferred)
Evaluation Criteria
UI and UX quality Code structure and component reusability Handling of rich and structured responses Overall chatbot experience Readability and maintainability of code
Bonus Considerations
Dark and light mode support Accessibility features such as keyboard navigation Smooth animations and transitions Clean response rendering logic
Bounty Type
Skill-based assessment bounty. Successful completion may lead to interview or paid opportunities on the RentPrompts platform.