Chatbot Interface - Copy this React, Tailwind Component to your project
Design an interactive AI chatbot interface with a clean and intuitive layout, consisting of three key sections: Left Panel (Traits Section), Center Panel (Chat Interface), and Right Panel (Respondent Traits Analysis). The design should prioritize functionality, clarity, and aesthetics. Below are the detailed requirements: 1. Left Panel (Traits Section) This panel allows users to customize the bot’s behavior through adjustable traits. Components: Traits Adjustments (Without Sliders): Replace sliders with a box based system for adjusting trait values: Each trait is displayed with: Label: Indicating the trait name (e.g., csPassiveAggressive, Formal, etc.). A value box: Small, rectangular, with a white background and black text to show the current value. Increment/Decrement Buttons: On the right side of the value box, add: An up (▲) button to increase the value. A down (▼) button to decrease the value. Scroll Feature: If the number of traits exceeds the panel's visible area, implement a vertical scroll bar to allow users to access all traits seamlessly. Start Conversation Button: At the bottom of the Left Panel, add a blue button with a ">" arrow icon to start the conversation. Place the text below the button: "Click this to allow the bot to start the conversation, otherwise in order to initiate the conversation either switch the toggle to AI or type something in chat yourself and send it." 2. Center Panel (Chat Interface) This is the main area for interacting with the bot. Components: Chat Box: The chat area should display sequential messages from the bot and respondent in a speech bubble style design. Scrollable Chat Area: Include a vertical scroll bar for navigating through older messages. Input Section (Bottom of Chat): Add an input field for typing messages: Rounded corners for a modern look. The left side of the input field should have a Profile Button: Rounded, blue, and labeled "Profile." The right side of the input field should have a Send Button: Small, rounded, with a ">" arrow icon. Toggle Button: Place a bubble style toggle button to the right of the Send Button with two options: "You" and "AI". The toggle should look stylish, with a bubble effect transitioning between options when clicked. Suggestion Buttons: Add three suggestion buttons above the input field: Each button should be blue, rounded, and display possible bot responses. Buttons should be evenly spaced. 3. Right Panel (Respondent Traits Analysis) This section provides a dynamic analysis of the respondent's behavioral traits. Components: Traits Display: List key respondent traits such as: Human like Behavior Percentage csPassive Percentage csPassiveAggressive Percentage For each trait: Show a label with the trait name. Display a numerical percentage in bold. Add an optional progress bar (simple and clean design). Design Aesthetic: Use a minimalist layout, with traits stacked vertically for clarity. Ensure consistent spacing and alignment. General Design Guidelines: Left Panel Aesthetic: Use a light gray background with blue accents for buttons. Make the scroll bar thin and subtle, matching the color theme. Ensure value boxes for traits are aligned neatly with the up/down buttons. Center Panel Aesthetic: Chat bubbles should have a white background with gray borders for user messages and a blue background with white text for bot responses. Suggestion buttons should have rounded corners with consistent spacing. The input field, send button, and toggle button should have proper spacing to maintain a clean look. Right Panel Aesthetic: Keep the trait analysis section simple and easy to understand. Use consistent font sizes and colors. Overall Color Scheme: Background: Light gray or white for a clean look. Buttons and Highlights: Blue for important actions. Text: Black for high readability. Responsive Design: Ensure the interface is fully responsive and adapts to different screen sizes. Key Functional Elements: Left Panel: Users can dynamically adjust bot traits using increment/decrement buttons. A scroll bar allows access to additional traits. Center Panel: Allows smooth interaction between the user and the bot, with quick response options and easy message input. Right Panel: Displays respondent analysis in real time with clear and concise visualization.
