Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed as a chatbot interface for a college website. Its primary purpose is to provide users with fast and accurate information about the college, while ensuring that restricted data is not disclosed. The application aims to enhance user engagement and streamline information retrieval.

## CORE FEATURES
1. **Chatbot Interface**: A user-friendly chat window where visitors can input their questions and receive instant responses.
2. **Information Database**: A structured database containing frequently asked questions and answers related to the college, including courses, admission procedures, and campus facilities.
3. **Response Filtering**: Logic to restrict access to sensitive information, ensuring compliance with college management policies.
4. **User Feedback System**: A mechanism for users to rate responses and provide feedback, helping to improve the chatbot's performance over time.
5. **Search Functionality**: An integrated search feature that allows users to quickly find specific information.
6. **Responsive Design**: The chatbot should be accessible on various devices, including desktops, tablets, and mobile phones, providing a consistent experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Emphasizing a clean and simple design with ample white space to enhance readability and user focus. The design should avoid clutter and unnecessary elements.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and readability.
- **Layout**: A centered chat interface with a visible input field at the bottom and a scrollable message history above. The overall layout should be intuitive and straightforward, promoting ease of use.
- **Typography**: Use sans-serif fonts for a modern look. Main headings should be bold and larger (e.g., 24px), with body text sized around 16px for clarity. Consistent spacing should be applied to maintain visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design changes and responsiveness.
- **UI Components**: Utilize shadcn/ui components for a consistent and polished look.
- **State Management**: Implement React Context API or Zustand for managing shared state across components.

## IMPLEMENTATION STEPS
1. **Set Up Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Chatbot Component**: Develop the main chatbot component, including state management for messages and user input.
3. **Build Information Database**: Structure a JSON or similar format to house the frequently asked questions and responses.
4. **Implement Response Filtering**: Create logic to filter out restricted data based on predefined criteria established by college management.
5. **Add User Feedback System**: Integrate a feedback mechanism to collect user ratings and comments on the chatbot responses.
6. **Design Responsiveness**: Ensure the layout adapts well across different device sizes using Tailwind CSS breakpoints.
7. **Test Functionality**: Conduct thorough testing to ensure the chatbot responds accurately and swiftly to user queries.
8. **Deploy Application**: Prepare the application for deployment on a college server or cloud platform for public access.

## USER EXPERIENCE
Users will interact with the chatbot by typing their questions into the input field. The chatbot will display responses in a conversational format, with clear distinctions between user input and bot output. Users will have the option to provide feedback on each response, improving the chatbot's learning algorithm. The interface will be designed to be intuitive, ensuring that users can easily navigate and find information, facilitating a smooth and engaging experience.