Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
"Convivencia Educativa" is a web application designed for Colegio República de Italia – Penco, providing an interactive chat-based interface that allows users to analyze school-related situations based on the internal regulations (RICE). The application aims to facilitate communication and offer structured responses to inquiries, ensuring a professional and respectful interaction.

## CORE FEATURES
1. **Chat Interface**: A clean and modern chat interface that mimics a conversational experience similar to ChatGPT.
2. **Student and Course Selection**: Dropdowns for selecting the student and course to tailor the analysis specific to the user's needs.
3. **Situation Description Input**: A text field for users to describe the situation, with the ability to analyze using a dedicated button or pressing Enter.
4. **Structured Assistant Responses**: Responses from the assistant will include an analysis, classification, relevant regulations, foundation, measures, and procedural steps based on the RICE.
5. **History Management**: Automatic saving of analysis results, including student, course, date, description, and outcomes, with easy access to historical data.
6. **Responsive Design**: An adaptive layout that ensures usability on desktops, tablets, and mobile devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The layout consists of a wide central chat area, a left sidebar with navigation options, and a bottom input field for user interactions. Messages will be visually differentiated between user and assistant using varying styles.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for managing the application state

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React project with TypeScript using Create React App.
2. **Install required packages**: Add Tailwind CSS and shadcn/ui for styling components.
3. **Create the main layout**: Implement the sidebar and chat interface structure using Tailwind CSS for responsive design.
4. **Develop the sidebar**: Include the logo, navigation for new queries, history, and a search bar.
5. **Implement chat functionality**: Create the chat area where the assistant's responses and user messages will be displayed. Use state management to handle messages.
6. **Develop input fields**: Create dropdowns for student and course selection, and a text input for situation description. Add the analyze button functionality.
7. **Response structure**: Code the assistant's response format to include analysis, classification, norms, foundations, measures, and procedures based on the input.
8. **Integrate history functionality**: Implement automatic saving of analysis results and create a method to retrieve historical data.
9. **Test responsiveness**: Ensure the application is fully responsive and functions correctly on various devices.
10. **Deploy the application**: Choose a hosting platform and deploy the completed application for user access.

## USER EXPERIENCE
Users will interact with the application by selecting a student and course from the sidebar, describing the situation in the provided text field, and clicking the analyze button or pressing Enter. The assistant will respond with a structured analysis based on the RICE regulations, allowing users to easily understand the classification and next steps. Users can also access their previous analyses through the history feature, enhancing their experience by providing a comprehensive view of past inquiries.