Chat Interface - Copy this React, Tailwind Component to your project

###-**Complete-Prompt-for-AI-Chatbot-Interface-Design**-Design-an-**interactive-AI-chatbot-interface**-with-a-structured,-user-friendly-layout,-focusing-on-functionality-and-aesthetics.-The-interface-should-consist-of-**three-primary-sections**:-**Left-Panel-(Traits),-Center-Panel-(Conversation-Space),-and-Right-Panel-(Respondent-Traits)**.-Below-is-a-detailed-explanation-of-each-section:-----###-**1.-Left-Panel-(Bot-Traits-Customization):**-This-section-is-designed-to-**adjust-the-bot's-personality-and-conversational-traits**-dynamically.-####-**Components:**-1.-**10-Adjustable-Sliders:**---Each-slider-corresponds-to-a-specific-bot-trait-such-as:---`csPassiveAggressive`---`Formal`---`Interest`---`Human-like-Behavior`---**Slider-Layout:**---Each-slider-is-arranged-vertically-in-a-linear-stack.---On-the-**left-of-each-slider**,-display-the-trait-label-(e.g.,-`trait-1`,-`trait-2`,-etc.).---A-**slider-bar**-runs-horizontally-with-a-draggable-handle-to-adjust-values.---On-the-**right-side**,-include-small-**up-(▲)**-and-**down-(▼)**-arrow-buttons-for-incremental-adjustments.---**Spacing**:-Keep-consistent-vertical-spacing-between-sliders-for-clarity.-2.-**Bottom-Button-(Start-Button):**---Place-a-**blue-arrow-button**-(▶️)-at-the-**bottom-left-corner**.---**Text-Below-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."_-3.-**Design-Aesthetic:**---Use-a-**light-gray-background**-for-the-panel.---Add-**blue-accents**-for-the-slider-handles-and-the-bottom-button-for-consistency.-----###-**2.-Center-Panel-(Conversation-Space):**-This-section-acts-as-the-**main-chat-window**-for-interaction-between-the-user-and-the-bot.-####-**Components:**-1.-**Chat-Box:**---Display-sequential-messages-between-the-bot-and-respondent.---Use-speech-bubble-style-design-for-clarity.---**Top-Alignment**:-Older-messages-appear-at-the-top,-and-new-messages-stack-below.-2.-**Input-Section-(Bottom-of-Chat):**---Place-the-**input-field**-at-the-bottom-center-of-the-chat-box.-The-input-field-should-include:---**Rounded-Corners**-for-a-modern-look.---A-**"Profile-Button"**-(rounded-and-blue)-on-the-**left-side**-of-the-input-field-for-users-to-load-respondent-profiles.---A-**Send-Button**-on-the-**right-side**,-designed-as-a-small,-rounded-button-with-a-**">"-arrow-icon**-for-sending-messages.---**Toggle-Button**-slightly-to-the-**right-of-the-Send-Button**,-labeled-**"You"**-and-**"AI"**-for-toggling-who-initiates-the-next-response.-3.-**Suggestion-Buttons:**---Add-**three-blue-buttons**-positioned-above-the-input-field.---Each-button-represents-a-**suggested-bot-response**-for-the-user-to-select.---Use-rounded-corners-for-these-buttons-to-maintain-visual-consistency.-4.-**Spacing-and-Placement:**---Align-the-input-field,-profile-button,-send-button,-and-toggle-button-horizontally-with-proper-spacing-between-them.---Ensure-suggestion-buttons-are-evenly-spaced-and-aligned-directly-above-the-input-field.-----###-**3.-Right-Panel-(Respondent-Traits-Analysis):**-This-section-displays-the-**real-time-behavioral-analysis**-of-the-respondent,-based-on-the-bot's-interactions.-####-**Components:**-1.-**Traits-Analysis:**---Display-key-traits-such-as:---**Human-like-Behavior-Percentage**---**csPassive-Percentage**---**csPassiveAggressive-Percentage**---Each-trait-should-be-displayed-with:---A-**label**.---A-**numerical-percentage**.---Optional:-Add-a-progress-bar-or-visual-indicator-for-better-representation.-2.-**Design-Aesthetic:**---Use-a-**minimalist-design**-with-percentages-displayed-clearly.---Align-traits-vertically-for-easy-readability.-----###-**General-Design-Requirements:**-1.-**Color-Scheme:**---Use-a-**light-gray**-or-**white-background**-with-**blue-accents**-for-buttons,-sliders,-and-interactive-elements.---Ensure-text-is-clearly-visible-using-a-**dark-font-color**.-2.-**Layout:**---Divide-the-interface-into-three-distinct-sections-(Left,-Center,-Right)-with-proper-alignment-and-spacing.---Make-the-layout-**responsive**,-adapting-to-different-screen-sizes.-3.-**Interactivity:**---Ensure-all-sliders,-buttons,-and-toggles-are-functional-and-provide-real-time-feedback.---The-chatbot-should-update-dynamically-based-on-user-input.-4.-**Visual-Consistency:**---Use-rounded-corners-for-buttons-and-input-fields.---Maintain-consistent-spacing-and-alignment-across-all-components.-----###-**Expected-Functionality:**---Users-can-customize-bot-behavior-via-the-**Left-Panel**-sliders.---Engage-in-real-time-conversations-in-the-**Center-Panel**,-with-input,-toggle,-and-suggestions-available-for-ease.---Analyze-respondent-behavior-dynamically-via-the-**Right-Panel**.-This-design-should-provide-a-clean,-modern,-and-intuitive-user-experience-while-ensuring-functional-versatility.