Chatbot Component

[ArslanKamchybekov]

Task: Add a Chatbot Component

Objective:

Implement a small chatbot icon on the bottom-right corner of the screen that, when clicked, opens a chat window. The chat window should display a greeting message and allow users to start interacting with Tech Support.

---

Steps:

1. Add a Chatbot Icon
   • Design or use a chatbot icon (e.g., a speech bubble or chatbot image) and place it at the bottom-right corner of the screen.
   • Position it as fixed, ensuring it stays in place even when scrolling.
   • Style the icon to be unobtrusive but accessible (e.g., round with a background color and a shadow).

• Create the Chat Window Component
  • Create a ChatWindow component that contains:
    • A header with "Tech Support" as the title and an "X" icon to close the chat window.
    • A message area that displays the chatbot greeting message (e.g., "Hello! How can we assist you today?").
    • An input area for users to type their questions or messages.
• Implement the Chatbot Toggle Logic
  • Use React state to manage the visibility of the chat window.
  • Initially set the chat window to hidden and toggle it to visible when the chatbot icon is clicked.
  • Clicking the close button ("X") should hide the chat window.

Display Greeting Message in Chat Window

• When the chat window opens, display a greeting message in the message area.
• Ensure this message remains visible even when users type additional messages.

Style the Chat Window

• Style the chat window to appear as a pop-up with a simple design that includes:
  • A header bar with a close button.
  • A scrollable message area for the chat conversation.
  • A text input field and send button at the bottom.
• Ensure the chat window is responsive and looks good on both desktop and mobile devices.