Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to integrate a sophisticated chatbot into a financial management app. The chatbot will be capable of processing various types of documents and media, providing users with seamless assistance and insightful responses. It will feature a unique thought process display that allows users to see the chatbot's reasoning before it delivers an answer.

## CORE FEATURES
1. **Document and Media Processing**: Users can upload documents, images, and PDFs for the chatbot to analyze and respond to queries based on the content.
2. **Thought Process Display**: The chatbot will display its reasoning in real-time, allowing users to understand how it arrived at a particular response.
3. **Error Handling and User Feedback**: If the chatbot encounters an error, it will provide clear explanations to the user, ensuring transparency and a smoother experience.
4. **Integration with Sparky Button**: The chatbot will be accessible via the Sparky button in the application's taskbar, providing easy access to its features.
5. **Robust Authentication**: The app will implement secure authentication to prevent issues like failed logins or expired sessions.
6. **User-Friendly Interface**: The chatbot will feature a minimalist design focused on usability and clarity, enhancing the user experience.

## 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 main layout will be a single-page interface with a header, a chatbot interaction area, and a sidebar for document uploads and user feedback.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API (to manage chatbot state and user sessions)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui).
2. **Design Layout**: Create the main layout structure with a header, chatbot area, and sidebar using Tailwind CSS for styling.
3. **Implement Chatbot Functionality**: Develop the chatbot component to handle user input, process documents, and manage responses.
4. **Integrate Thought Process Display**: Add functionality to show the chatbot's reasoning before it responds.
5. **Error Handling Mechanism**: Implement a system to catch errors and display relevant messages to users.
6. **Connect Sparky Button**: Ensure the chatbot can be opened via the Sparky button in the taskbar.
7. **Testing**: Conduct thorough testing to ensure all features work as intended and address any bugs (especially login issues).
8. **Deploy**: Deploy the application to a hosting service for user access.

## USER EXPERIENCE
Users will interact with the chatbot through a clean and intuitive interface. They can easily upload documents and media for analysis, receive responses that include the chatbot's thought process, and get instant feedback in case of errors. The accessibility through the Sparky button ensures that users can engage with the chatbot whenever they need assistance, enhancing their overall experience with the financial management app.