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

Create-a-Chat-Agent-page-UI-that-is-100%-identical-to-the-ChatGPT-interface,-ensuring-full-functionality-and-visual-fidelity-within-the-CropGenius-app.-Implement-the-following-with-exact-accuracy:-1.-Header-Bar:-Fixed-at-the-top-with-a-clean,-minimalist-design.-Display-the-app-name-“CropGenius”.-Include-essential-navigation-icons-or-text-(e.g.,-settings,-home)-with-no-extra-features.-2.-Chat-Area-(Message-Display):-Central-and-scrollable.-User-Messages:-Right-aligned,-displayed-in-rounded-message-bubbles-with-soft-blue-or-light-gray-background.-Text:-Sans-serif-font-(Roboto-or-Arial).-AI-Messages:-Left-aligned,-in-rounded-bubbles-with-white-or-light-gray-background.-Text:-Same-sans-serif-font.-Maintain-proper-spacing-between-messages.-Message-Overflow:-Automatically-wrap-long-messages-within-the-bubble.-Smooth-Scroll:-New-messages-must-automatically-scroll-the-chat-window.-3.-Message-Input-Field:-Fixed-at-the-bottom-with-a-soft,-rounded-text-input-box.-Placeholder-text:-"Ask-anything-about-Agriculture..."-Send-Button:-A-paper-plane-icon-on-the-right,-appearing-only-after-typing.-Enable-multiline-input-with-automatic-expansion-as-users-type.-Message-Clear:-Input-box-clears-once-a-message-is-sent.-4.-Typing-Indicator:-Position:-Appears-under-the-user’s-last-message.-Show-as-"thinking..."-with-3-animated-dots-or-a-subtle-pulsating-animation-while-the-AI-is-processing-the-response.-5.-Loading-State:-A-small,-unobtrusive-loading-spinner-or-animation-at-the-top-when-waiting-for-a-response.-Clear-Error-Handling:-Show-“Failed-to-load,-try-again”-when-there's-an-issue,-appearing-at-the-top-or-within-the-chat.-6.-Animations:-Smooth,-fluid-transitions-when-sending-and-receiving-messages.-Slight-bounce/fade-effect-for-message-bubbles-as-they-appear.-Automatically-scroll-to-the-newest-message-unless-the-user-is-manually-scrolling.-7.-Responsiveness:-Mobile-View:-Adapt-the-UI-to-a-vertical-stack,-ensuring-the-chat-area-is-scrollable-and-the-message-input-is-fixed-at-the-bottom.-Desktop-View:-Make-use-of-wider-screen-space,-keeping-the-input-fixed-at-the-bottom,-with-the-chat-area-expanding-to-fit-the-screen.-8.-Styling-&-Theme:-Background:-White-or-light-gray-background-for-the-entire-app.-Message-Bubbles:-User’s-messages-in-light-blue/green;-AI’s-in-white/light-gray.-Text:-Dark-gray-for-easy-readability.-Font-Size:-16px-for-message-text,-14px-for-the-input-field.-9.-Real-Time-Messaging:-WebSocket-Integration:-Enable-real-time-message-exchange-with-minimal-delay.-Message-Entry:-Input-text-should-be-immediately-sent-when-the-user-presses-the-send-button-or-hits-Enter.-Typing-Indicator:-Show-while-the-AI-is-preparing-the-response-and-hide-once-the-message-is-delivered.-10.-Optional-Elements:-Bottom-Bar:-Include-minimal-icons-for-additional-features-(emoji,-file-attachment)-only-when-the-input-field-is-focused.-Text-and-Message-Handling:-Ensure-no-text-truncation-or-overlap-in-message-bubbles.-Deliver-this-UI-with-100%-matching-features,-functionality,-and-design-to-the-ChatGPT-interface-for-a-seamless,-professional,-and-user-friendly-chat-experience-within-the-CropGenius-app."----