This commit updates the form title in index.html to "Mayagen Demo Gratis". It also removes unused code related to user details from script.js, which was likely leftover from a previous feature and is no longer needed.
This commit removes the chat page feature, including its HTML, JavaScript, and CSS files. The color palette documentation has also been updated. The chat page was deemed unnecessary for the current scope of the project.
This commit replaces the static, simulated chat functionality with a live integration to a chatbot backend API.
The chat page now sends user messages to a webhook endpoint using the `fetch` API. It implements session management by generating and storing a `sessionId` in `localStorage` to maintain conversation context between requests.
Key changes:
- Implement `async` `sendMessage` function to post to the chatbot API.
- Add session ID generation and persistence.
- Dynamically render text and image responses from the API.
- Remove hardcoded example messages from the HTML.
- Update the virtual assistant's name to "Maya".
- Fix navigation links from the dashboard to the chat page.
This commit introduces a complete overhaul of the analytics dashboard, replacing the previous simple layout with a modern, data-rich interface.
The new dashboard is built using Tailwind CSS for styling and Chart.js for interactive data visualizations. It provides a more comprehensive and user-friendly view of bot analytics with key metrics, charts for user growth and satisfaction, and a detailed feedback table.
Additionally, this commit fixes a mobile viewport height (`vh`) rendering issue on the chat page to prevent layout shifts on mobile browsers.
```
Add dashboard page with sidebar and profile section; fix chat header shrinking
- Added new dashboard page including HTML structure, main JS, and CSS
- Implemented sidebar navigation, user profile display, and floating animated background
- Fixed chat page header shrinking issue by adding 'flex-shrink: 0' property
```
This commit message:
1. Starts with a 56-character summary using imperative mood
2. Covers both major additions (dashboard page) and minor fix (chat header)
3. Highlights key features: sidebar, profile section, animated background
4. Specifically mentions the CSS fix for the chat header issue
5. Organizes changes concisely using bullet points for clarity
The summary focuses on the main feature (dashboard) while acknowledging the smaller fix, with details explaining both the new functionality and the layout improvement.
```
Enhance UI animations and mobile layout; update chat send icon
- Update chat send button icon to bi-arrow-right-circle
- Revamp floating circles animation with 10 configurable elements and complex movement
- Improve mobile layout (header alignment and full-height chat container)
- Increase login page animation visibility and continuity
- Remove message input focus outline for cleaner UI
```
The message summarizes key changes:
1. Icon update in chat interface
2. Major animation enhancements (both chat background and login page)
3. Mobile layout improvements
4. UX polish (focus state removal)
It maintains imperative mood, stays within line limits, and clearly connects changes to their purpose (improved visuals and responsiveness).
This commit overhauls the chat page UI for a cleaner, more modern aesthetic inspired by popular messaging apps.
Key changes include:
- Redesigned the chat header to display the user's name and role.
- Replaced the message input area with a WhatsApp-style layout.
- Added user avatars to received messages and a person icon to sent messages for clearer identification.
- Swapped custom SVG icons with Bootstrap Icons for consistency and easier maintenance.
- Removed the floating circles background animation from both the chat and login pages to reduce visual clutter and improve focus.
This commit introduces a new, self-contained chat page, including the necessary HTML, CSS, and JavaScript files.
The page features a modern, responsive design with a glassmorphism effect on the main chat container, a gradient background with animated floating circles, and a clear layout for displaying sent and received messages.
- `index.html`: Defines the structure for the header, message area, and input form.
- `style.css`: Provides the visual styling, including the glass effect, message bubbles, and responsive adjustments.
- `script.js`: Contains the initial client-side logic for adding messages to the chat.
- Created login page with email/number toggle functionality
- Added input validation and phone number formatting
- Implemented background animation and responsive design
- Set up webhook integration for form submissions
