added curated chatbot

[ShivanshPlays]

Add Chatbot Button with Toggle Functionality

Overview

This PR introduces a floating chatbot button at the bottom-right of the page. The button toggles the visibility of the chatbot when clicked. The button includes smooth hover and focus transitions for improved user interaction.

Changes

1. Button Styling

• A circular button with a purple background and a custom chef hat icon inside for a unique look.
• Styled with smooth hover and focus states for better interaction feedback:
  • Hover effect changes the background color to a darker shade of purple.
  • Focus ring for accessibility, ensuring the button is easy to interact with on all devices.

2. Chatbot Toggle

• When the button is clicked, it toggles the state of chatbotOpen using the toggleChatbotOpen function.
• If the chatbotOpen state is true, the Chatbot component is rendered below the button.
• The chatbot remains open until the user closes it by clicking the button again, providing a simple and intuitive flow.

3. Chatbot Flow

• The user clicks the floating chatbot button to open the chatbot.
• Once opened, the chatbot can display a welcome message, greet the user, and prompt them to ask questions and then continue with the curated flow according to the website's needs.
• The user can interact with the chatbot by typing questions or selecting options.
• To close the chatbot, the user clicks the button again, hiding the chatbot and returning to the original page view.

4. UI/UX Improvements

• Added smooth transition effects to make the button interactions feel responsive.
• Styled the button to ensure it's large enough and easy to interact with on both mobile and desktop devices.
• The chatbot button's positioning and responsiveness are optimized for seamless user experience.

Screenshots

1.mp4

Related Issues

• [FEAT] Intelligent Chatbot Solution with Dynamic, Curated Content Integration #256

Testing

• Test the button in both desktop and mobile views to ensure it is correctly positioned and responds to user interaction.
• Verify that the chatbot opens and closes correctly when the button is clicked.
• Test the chatbot flow to ensure it behaves as expected, including greeting the user and handling basic interactions.

[github-actions]

🚀 Thank you for contributing to this project, your support is much appreciated.

Stay awesome! 😎