Support Screen - Copy this React, Tailwind Component to your project

Screen Name: Support (AI-Driven) Purpose: This updated Support screen focuses on providing a seamless chat interface where an AI agent engages with the user. Instead of using traditional forms, the AI agent will handle everything through conversation, effectively collecting the necessary information and providing solutions in real-time, enhancing the user experience. Screen Components: Top Navigation Bar Sign-In / Sign-Up Button: If users aren’t logged in, they will be prompted to sign in or sign up. If signed in, their profile or account details are shown here. Search Bar: A quick search option for users to search across the platform, including within the support section. Main Support Section AI Support Chat: What it is: A seamless chat interface powered by an AI agent that interacts with users, gathers all the necessary information, and provides responses. Instead of filling out a form, the AI agent will guide the user through the process via conversation. How it works: Users will chat with the AI agent by typing their issue. The AI will ask follow-up questions to gather any required information (like problem description, error codes, or other details). It will automatically fill out the form in the background based on the conversation, and once the necessary details are collected, the AI will either provide a solution or escalate the issue if needed. Visual: The chat interface is interactive and intuitive. Each message from the AI will be a clear bubble, while the user’s messages will be shown as another distinct set of bubbles. The interface should feel conversational, personal, and straightforward. FAQ Bubbles Above Chat: What it is: A small set of clickable FAQ bubbles above the AI chat window. These bubbles represent frequently asked questions (e.g., “How do I list my product?” or “How do I track my earnings?”). Users can click them to view an immediate response. How it works: Users click on any of the FAQ bubbles, and the corresponding question expands, showing a quick answer from the AI. This provides additional help without interrupting the chat flow. Visual: Small, rounded bubbles with simple text (e.g., “How to track earnings?”). When clicked, they expand just below the bubble to reveal the answer. Human Support Escalation: What it is: If the AI agent cannot resolve the issue or the user requests it, the AI will automatically escalate the issue to human support. How it works: If the AI determines the issue is too complex or if the user requests a human touch, the AI will seamlessly transfer the case to a human representative. Visual: A button or prompt within the chat window that reads “Need Human Help?” It will be easy for users to click and escalate their issue if needed. Session End: What it is: A button to close the current chat session once the issue is resolved. How it works: After the user’s issue is addressed, the AI can ask if they need further help and, if not, provide the option to end the chat session. Visual: A simple button saying “End Chat” or “Finish Session” will appear at the end of the conversation. System Downtime Notification: What it is: A notification for the user if the AI system is temporarily unavailable or undergoing maintenance. How it works: If there’s a technical issue with the AI, the user will be notified via a soft-colored banner at the top of the chat interface, letting them know that the system is down or being fixed. Visual: A subtle, non-intrusive banner with a message like “We’re working on the system. Please check back shortly!” The user can either retry after a certain time or wait until the system is back. User Experience: AI Support Chat: The AI agent will take the lead in the chat, guiding the user step by step. It’ll ask for the necessary details (such as error descriptions, issues, or specific queries) and, once all relevant information is gathered, will either provide the answer or escalate the issue. For example, the AI might ask, “Can you please describe the error you’re facing?” and once the user responds, it will handle all data collection automatically. Natural Flow: The AI will keep the conversation light and engaging. For instance: “Hi! I’m your assistant. What’s the issue you need help with today?” After the user describes the issue, the AI will ask for specifics like, “Can you share the error message you saw on the screen?” The AI will then handle the rest of the form process without the user having to fill anything out manually. FAQ Bubbles: Small, clickable FAQ bubbles will appear above the AI chat. Users can click them to get quick answers without interrupting the chat. Once clicked, these will display the answers in a small, scrollable section right below the bubble. For example, the FAQ bubble might say, “How do I track my earnings?” and, upon clicking, it will show a brief, easy-to-read answer. Human Escalation: If the AI cannot resolve the issue or if the user requests a human representative, the AI will seamlessly escalate the issue to human support. The AI will inform the user that they’re being transferred, e.g., “I’m going to connect you with a human expert to assist you further.” End Session & Follow-Up: Once the issue is resolved, the AI will prompt the user with a simple “Is there anything else I can assist you with?” If the user says no, the chat will end with a friendly message like, “Thanks for reaching out! Have a great day!” If the user needs more help, they can continue chatting or ask follow-up questions. Mobile-First Design Considerations: Floating Chat Window: The chat interface will remain fixed at the bottom of the screen, ensuring that the user can continue the conversation while scrolling through other content or options. Expandable FAQ Bubbles: The FAQ bubbles will be mobile-optimized, displayed as small, clickable buttons above the chat window. They’ll be touch-friendly, and tapping them will expand the answers below the chat window, not blocking the screen but making it easy to view the responses. User Flow: User Opens Support: The user is greeted by the AI agent in the chat interface. The AI introduces itself and asks the user what issue they need help with. User Describes the Issue: The AI gathers details by asking questions like, “What problem are you facing today?” or “Can you describe the error message?” AI Collects Information: The AI agent processes the information, filling out a support request form automatically. The AI may also recommend solutions from the FAQ bubbles if relevant. User Gets Help: The AI either provides a solution directly or escalates the issue to human support if needed. End Chat: Once the issue is resolved, the AI will ask if the user needs more help and then close the chat session if no further issues are reported. System Downtime: If the system is down, users will be notified with a banner message and given the option to retry.