Essay Editor - Copy this React, Tailwind Component to your project

Enhanced-Prompt-for-the-Essay-Editor-App-Design-a-modern,-AI-powered-Essay-Editor-app-that-allows-users-to-edit,-rewrite,-and-enhance-essays-with-precision-and-efficiency.-The-app-must-integrate-dynamic-AI-interactions,-including-a-chatbox-assistant,-rewrite-templates,-and-drag-and-drop-features,-all-while-maintaining-a-user-friendly,-clean,-and-professional-design.-Below-are-the-comprehensive-requirements:-General-Design-Requirements-Aesthetic:-A-clean,-minimalistic-design-with-soft-gradients,-white-space,-and-a-professional-color-palette-(e.g.,-white-backgrounds-with-blue-and-gray-accents).-Use-subtle-animations-for-transitions,-drag-and-drop-actions,-and-interactive-elements.-Typography:-Clear-and-readable-sans-serif-fonts-like-Open-Sans,-Roboto,-or-similar.-Maintain-consistent-font-sizes-for-headings,-body-text,-and-buttons.-Responsiveness:-Ensure-a-fully-responsive-design-that-adapts-seamlessly-to-desktop,-tablet,-and-mobile-devices.-Interactivity:-Incorporate-hover-effects,-tooltips,-and-animations-to-guide-users-and-improve-usability.-Key-Features-and-Functionalities-1.-Essay-Structure-The-app-should-follow-a-structured-layout:-Introduction:-Static-and-non-draggable-section-for-presenting-the-essay-topic,-context,-and-thesis-statement.-Body-Paragraphs:-Draggable-sections-that-users-can-rearrange-to-modify-the-essay-flow.-Conclusion:-Static-and-non-draggable-section-for-summarizing-the-essay-and-restating-the-thesis.-2.-Drag-and-Drop-Functionality-Restrict-drag-and-drop-to-Body-Paragraphs-only.-Introduction-and-Conclusion-sections-remain-fixed.-Use-a-visual-placeholder-(e.g.,-a-dashed-outline)-to-show-where-a-paragraph-can-be-dropped.-Highlight-active-drop-areas-with-glowing-borders-or-color-changes.-3.-Essay-Planning-Replace-the-static-Essay-Planning-section-with-a-"View-Essay-Planning"-button.-Clicking-the-button-opens-a-modal-that-displays-the-essay-planning-content,-sourced-from-the-JSON-(essay_planning).-The-modal-should:-Include-scrollable-content.-Use-a-clean,-uncluttered-design-with-a-close-button.-4.-Chatbox-Assistant-Add-a-floating-or-collapsible-chatbox-in-the-bottom-right-corner-for-AI-interactions.-The-chatbox-should-allow-users-to:-Ask-Questions:-Engage-the-AI-for-suggestions-about-the-essay,-such-as-improving-arguments,-strengthening-the-thesis,-or-brainstorming-examples.-Rewrite-Paragraphs:-Select-a-specific-paragraph-or-text-to-rewrite.-Proofread:-Request-grammar,-spelling,-or-tone-corrections.-Generate-Ideas:-Ask-for-additional-arguments-or-examples-to-expand-on-a-topic.-Chatbox-Features:-Show-dynamic-chat-history-for-the-session-to-allow-users-to-revisit-previous-AI-interactions.-Include-a-loading-indicator-(e.g.,-spinner-or-progress-bar)-when-processing-user-requests.-Provide-quick-access-to-rewrite-templates-as-buttons-within-the-chatbox.-5.-Rewrite-Templates-Add-a-dedicated-rewrite-panel-or-integrate-options-directly-into-the-chatbox.-Users-can-highlight-text-or-select-a-paragraph-to-rewrite-using-predefined-templates:-Simplify-Language:-Rewrite-the-paragraph-in-simpler-terms.-Expand-Ideas:-Add-more-details-or-examples-to-the-text.-Explain-This:-Rewrite-to-clarify-complex-ideas.-Summarize:-Condense-the-content-into-a-concise-version.-Improve-Tone:-Adjust-the-tone-to-formal,-persuasive,-or-conversational.-Proofread:-Correct-grammar,-spelling,-and-punctuation-errors.-Modal-Rewrite-Editor:-Allow-users-to-preview-and-approve-AI-generated-rewrites-in-a-modal-or-inline-editor-before-applying-changes.-6.-AI-Powered-Feedback-Provide-real-time-essay-feedback,-including:-Word-Count:-Live-word-count-displayed-at-the-top-of-the-editor.-Readability-Score:-Display-a-score-(e.g.,-Flesch-Kincaid)-for-the-essay.-Tone-Analysis:-Analyze-and-report-whether-the-tone-is-formal,-conversational,-persuasive,-etc.-Use-visual-highlights-for-problematic-areas:-Repeated-words-or-phrases.-Awkward-sentences.-Weak-arguments-or-unclear-ideas.-Add-inline-suggestions-or-tooltips-for-each-highlight.-7.-Version-History-Add-a-version-control-feature-to-track-changes-made-to-paragraphs.-Users-can-view-previous-versions-and-revert-edits-if-needed.-8.-Export-Options-Allow-users-to-export-the-completed-essay-in-various-formats:-PDF-Word-Document-Plain-Text-9.-Collaborative-Features-Introduce-a-collaborative-editing-mode-where-users-can-invite-others-to-review-and-comment-on-the-essay.-Use-inline-comment-threads-or-side-annotations-for-feedback.-User-Experience-Enhancements-1.-Collapsible-Sections-Allow-users-to-collapse/expand-the-Introduction,-Body-Paragraphs,-and-Conclusion-to-focus-on-specific-sections.-2.-Visual-Indicators-for-Selected-Sections-Highlight-the-currently-selected-paragraph-with-a-bold-border,-background-color,-or-animation-to-provide-visual-feedback.-3.-Dynamic-Animations-Add-smooth-animations-for-drag-and-drop-actions,-chatbox-interactions,-and-opening-modals.-4.-Notifications-Use-toast-notifications-for-actions-like-saving-changes,-applying-rewrites,-or-exporting-the-essay.-Examples:-"Changes-saved-successfully!"-"Paragraph-rewritten-using-'Simplify-Language'-template."-5.-Accessible-Design-Ensure-the-app-meets-accessibility-standards-(e.g.,-ARIA-roles-for-screen-readers,-keyboard-navigation).-Visual-and-Functional-Design-1.-Drag-and-Drop-Animation-Use-placeholders-(e.g.,-dashed-outlines)-to-indicate-valid-drop-targets.-Highlight-drop-targets-with-glowing-borders-or-subtle-color-changes.-2.-Chatbox-Design-Appearance:-Minimalistic-and-unobtrusive-when-collapsed.-Expandable-to-full-size-for-detailed-interactions.-Icons-and-Buttons:-Include-icons-for-common-actions-(e.g.,-rewriting,-proofreading).-Use-clear-labels-and-tooltips-to-guide-users.-3.-Layout-Consistency-Maintain-consistent-spacing,-padding,-and-alignment-across-all-components.-Use-grid-layouts-or-flexbox-to-ensure-responsive-alignment.-JSON-Placeholders-Use-the-following-JSON-structure-for-dynamic-content:-json-Copy-code-{-"essay_planning":-"Analyzing-the-topic-and-context:-The-topic-is-'Test-topic'-which-is-quite-broad-and-can-be-approached-from-various-angles.-The-context-is-'Test-context',-which-gives-a-general-idea-of-a-scenario-or-situation-to-discuss.-Develop-a-clear-thesis-statement:-'Understanding-and-addressing-the-Test-topic-can-lead-to-improvements-in-the-Test-context.'",-"essay_structure":-{-"introduction":-{-"content":-"The-introduction-will-present-the-topic,-the-context,-and-the-thesis-statement.",-"purpose":-"To-introduce-the-topic,-provide-context,-and-state-the-thesis."-},-"body_paragraphs":-[-{-"paragraph_number":-1,-"content":-"This-paragraph-will-discuss-the-importance-of-understanding-the-'Test-topic'-with-supporting-evidence-from-the-'Test-context'.",-"purpose":-"To-provide-the-first-main-argument-and-evidence-asserting-the-importance-of-understanding-the-'Test-topic'.",-"is_draggable":-true-},-{-"paragraph_number":-2,-"content":-"This-paragraph-will-delve-into-how-the-'Test-topic'-impacts-the-'Test-context'.",-"purpose":-"To-provide-the-second-main-argument-and-evidence,-demonstrating-the-influence-of-the-'Test-topic'-on-the-'Test-context'.",-"is_draggable":-true-},-{-"paragraph_number":-3,-"content":-"This-paragraph-will-suggest-ways-to-address-the-'Test-topic'-to-improve-the-'Test-context'.",-"purpose":-"To-provide-the-third-main-argument-and-evidence,-suggesting-solutions-for-improvement.",-"is_draggable":-true-}-],-"conclusion":-{-"content":-"The-conclusion-will-summarize-the-main-points,-restate-the-thesis,-and-discuss-potential-future-implications-of-the-'Test-topic'-on-the-'Test-context'.",-"purpose":-"To-wrap-up-the-essay-by-summarizing-the-main-points,-restating-the-thesis,-and-providing-a-closing-thought."-}-}-}-This-prompt-provides-a-comprehensive-guide-for-building-a-modern,-AI-powered-essay-editor-with-advanced-interactivity,-a-chatbox-assistant,-and-dynamic-rewriting-features.-Let-me-know-if-you-need-further-refinements!