Nelson Bot Chat - Copy this Angular, Tailwind Component to your project

Below-is-a-basic-design-outline-for-your-NelsonBot-application-that-emulates-a-ChatGPT-like-interface.-This-design-will-prioritize-a-clean,-user-friendly-experience-with-a-focus-on-conversation-and-accessibility.###-NelsonBot-Interface-Design-Overview####1.-**User-Interface-Layout**--**Header**:---A-simple,-eye-catching-header-at-the-top-with-the-"NelsonBot"-logo-and-title.---A-brief-tagline,-e.g.,-"Your-Pediatric-Knowledge-Companion".---Option-for-user-authentication-(Log-In-/-Sign-Up)-if-needed.--**Chat-Interface**:---**Chat-Window**:---The-main-area-where-the-chat-conversations-occur.---Messages-are-displayed-in-a-clear-dialogue-format,-alternating-between-user-input-and-bot-responses.---Use-speech-bubbles-to-differentiate-between-user-and-bot-messages.---**Input-Area**:---A-text-input-field-where-users-can-type-their-queries.---Placeholder-text-indicating-the-function-(e.g.,-"Ask-NelsonBot-about-your-child's-health...").---A-"Send"-button-to-submit-queries,-ensuring-it's-easily-accessible.--**Sidebar-(Optional)**:---A-sidebar-allowing-quick-navigation-to-other-app-sections,-such-as:---Home---FAQs---Resources---Settings####2.-**Message-Design**--**User-Messages**:---Displayed-on-the-right-side-of-the-chat-window.---Use-a-friendly-color-(e.g.,-light-blue)-with-rounded-corners.--**Bot-Messages**:---Displayed-on-the-left-side-of-the-chat-window.---A-contrasting-color-(e.g.,-light-green-or-white)-for-clarity.--**Timestamp**:---Include-a-timestamp-underneath-each-message-for-reference.####3.-**Additional-Features**--**Feedback-Mechanism**:---After-each-bot-response,-include-a-thumbs-up-and-thumbs-down-icon-to-let-users-rate-the-response,-aiding-further-refinement-of-the-bot's-knowledge.--**Loading-Spinner**:---A-loading-spinner-or-animation-when-the-bot-is-generating-a-response-to-enhance-user-engagement-and-anticipation.--**Mobile-Responsiveness**:---Ensure-the-layout-adapts-seamlessly-to-mobile-devices,-prioritizing-touch-friendly-elements.####4.-**Styling-and-Color-Scheme**--**Color-Palette**:---Use-soothing,-pediatric-friendly-colors-(e.g.,-pastel-blues,-greens,-and-yellows).--**Typography**:---Use-friendly-and-readable-fonts—-sans-serif-fonts-like-Open-Sans-or-Nunito-for-clarity.--**Button-Styles**:---Round-buttons-with-clear-labels-(e.g.,-"Send,"-"Clear,"-etc.)-for-accessibility-and-ease-of-use.--**Background**:---Use-a-light-background-to-maintain-focus-on-the-chat-area-without-overwhelming-users.###-Example-User-Interface-Sketch:```plaintext------------------------------------------------|-NelsonBot-||-Your-Pediatric-Knowledge-Companion-||----------------------------------------------||-Chat-Window-||----------------------------------------------||-|-User:-How-can-I-tell-if-my-child-is-sick?-|-||-|-Bot:-Look-for-symptoms-like-fever...-|-||----------------------------------------------||-||-Input-Area-||----------------------------------------------||-|-[-Type-your-message-here...-]-[SEND]-||----------------------------------------------|------------------------------------------------```###-ConclusionThis-design-outline-emulates-the-look-and-feel-of-a-ChatGPT-like-application-tailored-for-the-"NelsonBot."-It-emphasizes-user-engagement,-accessibility,-and-clarity-while-providing-pediatric-knowledge.-If-you-have-specific-design-elements-you-want-to-add-or-modify-or-need-help-with-implementation-details,-feel-free-to-ask!-Certainly!-Below-is-a-comprehensive-structure-for-your-"NelsonBot"-IPA-app,-which-incorporates-REST-API-functionality,-along-with-all-previously-mentioned-design-and-organizational-aspects.-This-structure-is-tailored-for-a-React-Native-mobile-application-focused-on-providing-pediatric-knowledge-through-a-chatbot-interface.-NelsonBot-iOS-IPA-App-StructureplaintextNelsonBot/├──-App/-Main-application-folder│-├──-assets/-Static-assets-like-images,-fonts,-etc.│-│-├──-images/-Images-used-in-the-app│-│-├──-fonts/-Custom-fonts-if-needed│-│-└──-icons/-Icons-for-UI-elements-(e.g.,-send-button)│-├──-components/-Reusable-components-for-mobile│-│-├──-ChatInterface.tsx-Main-chat-interface-component│-│-├──-Header.tsx-Header-component-with-logo-and-title│-│-├──-Footer.tsx-Footer-component,-if-applicable│-│-├──-Sidebar.tsx-Sidebar-for-navigation-(optional)│-│-├──-Chat.tsx-Chat-component-for-messages-display│-│-├──-ChatBox.tsx-Input-box-for-user-messages│-│-├──-SettingsPanel.tsx-Component-for-app-settings│-│-├──-LoadingSpinner.tsx-Loading-spinner-for-waiting-responses│-│-└──-FeedbackButton.tsx-Thumbs-up/down-buttons-for-feedback│-├──-features/-Feature-based-slices│-│-├──-chat/-Chat-specific-logic-and-components│-│-│-├──-ChatApi.ts-Chat-related-API-functions-(handling-REST-calls)│-│-│-├──-useChat.ts-Chat-related-custom-hooks│-│-│-└──-chatHelpers.ts-Helper-functions-for-the-chat-feature│-├──-hooks/-Custom-React-hooks│-│-├──-useAuth.ts-Authentication-hooks-for-mobile-(if-needed)│-│-└──-useTheme.ts-Hook-for-managing-themes-and-styles│-├──-navigation/-Navigation-components-and-setup│-│-└──-AppNavigator.tsx-Main-app-navigation-configuration-using-React-Navigation│-├──-screens/-Screen-level-components│-│-├──-HomeScreen.tsx-Home-screen-component│-│-├──-ChatScreen.tsx-Chat-feature-screen│-│-├──-SettingsScreen.tsx-Settings-screen-component│-│-└──-FAQsScreen.tsx-Screen-for-frequently-asked-questions-(if-needed)│-├──-styles/-Stylesheets-and-theming│-│-└──-globalStyles.ts-Global-styles-with-consistent-design│-├──-utils/-Utility-functions│-│-├──-loadData.js-Function-to-load-data-from-CSV-or-PDF│-│-├──-helpers.ts-General-purpose-helper-functions│-│-├──-constants.ts-App-wide-constants│-│-└──-parseResponse.ts-Parsing-utility-for-API-responses│-├──-App.tsx-Main-application-entry-point│-├──-api/-Folder-for-handling-REST-API-operations│-│-├──-index.js-API-configuration-and-base-URL│-│-└──-nelsonAPI.js-Functions-for-making-API-requests-to-the-NelsonBot-backend│-├──-app.json-Configuration-file-for-the-React-Native-app│-└──-index.js-Entry-point-for-React-Native-app├──-ios/-iOS-native-project-files│-├──-NelsonBot.xcodeproj-Xcode-project-file-for-iOS-compilation│-└──-NelsonBot/-Contains-iOS-specific-configuration-and-code├──-android/-Android-native-project-files-(if-applicable)│-└──-...-React-Native-would-generate-this-automatically├──-.env-Environment-variables-(e.g.,-API-keys)├──-package.json-Dependencies-and-scripts├──-babel.config.js-Babel-configuration-for-React-Native├──-tsconfig.json-TypeScript-configuration-(if-using-TypeScript)├──-README.md-Documentation-for-your-project├──-metro.config.js-Metro-bundler-configuration-for-React-Native└──-AppStore/-Optional:-Folder-for-any-App-Store-submission-files-Key-Components-Explained:--App/:-The-main-folder-containing-all-components,-assets,-navigation,-and-logic-for-the-main-application.--assets/:-Houses-your-static-assets,-including-images-and-fonts-used-throughout-the-app-interface.1.-Design-Layout-for-iOS-App-Welcome-Screen-(Splash-Screen)-•-Purpose:-Introduce-the-app-brand-and-ensure-a-smooth-entry-point.-•-Content:-•-App-Logo:-Prominently-displayed-in-the-center.-•-Tagline:-“Your-AI-Pediatric-Companion.”-•-Subtle-animation-(e.g.,-fade-in,-scale-up-effect-for-the-logo).-•-Background:-Professional-and-minimalist-(light-gradient-or-themed-pediatric-illustration).-Home-Screen-•-Components:-1.-Header:-•-App-name:-Displayed-prominently.-•-Hamburger-menu:-For-navigation-(e.g.,-Profile,-Settings,-Help).-•-Search-bar:-For-users-to-type-specific-queries.-3.-Bottom-Navigation-Bar:-•-Icons-for-major-sections:-•-Home-•-Knowledge-Base-•-Tools-(e.g.,-calculators)-•-Chat-•-Profile-•-Ensure-consistency-with-iOS-Human-Interface-Guidelines-(HIG).-Chat-Interface-•-Mimics-ChatGPT-with:-•-Fixed-input-field-at-the-bottom.-•-Placeholder-text:-“Ask-me-anything-about-pediatrics.”-•-Icons-for-voice-input,-attachments,-and-send.-•-Dynamic-response-layout:-•-AI-replies-with-expandable-content-(for-long-explanations).-•-Pediatric-references-(e.g.,-citation-links-for-textbook-sections).-Profile-Section-•-sign-in/up-User-information-and-settings.-•-Enable-role-selection-(e.g.,-Admin,-Resident,-Student).-•-Saved-searches,-queries,-and-reports.-2.-Animation-for-Welcome-Screen-Suggested-Animation-Flow:-1.-Fade-in-Effect:-•-App-logo-and-tagline-fade-in-from-the-center-of-the-screen.-2.-Pulse-Effect:-•-Subtle-pulsating-animation-for-the-logo-to-create-engagement.-3.-Slide-Transition:-•-Transition-to-the-home-screen-using-a-sliding-animation-(upwards-or-sideways).-4.-Loading-Indicator-(Optional):-•-A-rotating-stethoscope-or-book-icon-to-signal-loading-during-initialization.-Implementation-Tools:-•-Use-Lottie-animations-for-lightweight-JSON-based-animations.-•-Libraries-like-Core-Animation-or-SwiftUI-Animations.-3.-App-Icon-Design-•-Dimensions:-Follow-Apple’s-guidelines-(1024x1024-px-for-submission;-iOS-scales-it-automatically-for-other-sizes).-•-Content:-•-Icon-Theme:-Pediatric-focus.-•-Example:-A-baby-face-with-a-stethoscope-encircled-by-a-book.-•-Background:-Gradient-blue-green-tones-for-a-calming-medical-look.-•-Simplicity:-No-text,-just-a-clean-and-recognizable-logo.-•-Design-Tools:-•-Use-Sketch,-Figma,-or-Adobe-Illustrator-for-professional-design.-4.-Apple-App-Store-Requirements-UI/UX-Guidelines:-1.-Human-Interface-Guidelines:-•-Maintain-consistent-typography-(e.g.,-San-Francisco-font).-•-Use-clear-and-tappable-buttons-(44px-minimum-height).-•-Include-smooth-transitions-and-animations.-2.-Dark-Mode-Support:-•-Provide-a-dark-mode-theme-with-inverted-color-schemes.-3.-Accessibility:-•-Add-support-for-VoiceOver.-•-Ensure-all-interactive-elements-are-labeled-with-descriptive-text.-5.-Functional-Features-1.-Key-Functionalities:-•-Real-time-chat-with-AI-powered-responses.-•-Chapter-wise-search-from-the-textbook.-•-Interactive-tools-for-drug-and-calorie-calculations.-•-Offline-capability-for-saved-data.-2.-Push-Notifications:-•-Notify-users-about-updates,-saved-responses,-or-educational-content.-3.-User-Accounts:-•-Allow-users-to-create-accounts-for-personalized-experiences.