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

General Improvements Restrict Drag and Drop to Body Paragraphs Only Allow drag and drop functionality exclusively for Body Paragraphs. Introduction and Conclusion sections should remain static. Use a flag in the JSON (e.g., is_draggable: true) to identify draggable sections, ensuring the app logic supports this restriction. Move Essay Planning to a Modal Replace the "Essay Planning" panel with a "View Essay Planning" button. Clicking the button opens a modal that displays the content of the essay_planning JSON field in a scrollable view. Key New Feature: Chatbox for AI Interaction Interactive Chatbox Placement: A collapsible or floating chatbox accessible via an icon (e.g., a speech bubble or "AI Assistant" button) positioned in the bottom right corner of the app. Functionality: Allow users to ask AI questions about the essay (e.g., "How can I improve my thesis statement?" or "What evidence can strengthen this argument?"). Let users highlight a specific paragraph and initiate questions or rewriting tasks through the chatbox (e.g., "Simplify this paragraph" or "Rewrite with expanded details"). Provide a dynamic AI response window for suggestions, explanations, or edits. Integration with Rewrite Options: Add buttons in the chatbox UI that allow users to select from predefined rewrite templates: Simplify Language Expand Ideas Explain This Summarize Improve Tone Proofread Clicking a template automatically sends a request to AI to rewrite the selected text, with the rewritten version returned in the chat interface. History Tracking: Store and display chat history for the session to allow users to reference previous interactions or edits. Rewrite Options Integration Dedicated Rewrite Panel Placement: Place a separate rewrite panel near the chatbox or include the options directly in the chatbox UI. Functionality: Users can highlight a paragraph and access rewrite templates directly from the panel or chatbox. Rewrite options include: Simplify Language: Rewrite the paragraph in simpler terms. Expand Ideas: Add more details or examples. 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. Display a modal or in panel text editor for users to preview and confirm AI generated rewrites before saving them. Other Enhancements Highlight Problematic Text Use AI to analyze the essay and highlight areas needing improvement (e.g., unclear sentences, weak arguments, or grammar issues). Provide inline suggestions or comments when the user hovers over the highlighted text. Live AI Powered Feedback Include real time feedback on: Word count. Readability score (e.g., Flesch Kincaid). Essay tone (formal, persuasive, etc.). Show suggestions in the chatbox or a feedback sidebar. Collaborative Features Allow users to invite collaborators to review, comment, or suggest edits on the essay. Collaborators can leave notes directly on paragraphs. Export Options Add export functionality for completed essays: PDF Word Document Plain Text User Experience Enhancements Collapsible Sections for Essay Parts Allow users to collapse/expand Introduction, Body Paragraphs, and Conclusion to reduce visual clutter and focus on specific sections. Chatbox Design Appearance: Minimalistic and unobtrusive, with a clean design. Expandable to full size for detailed interactions. Icons and Buttons: Include an "Ask AI" button for quick queries. "Rewrite" and "Proofread" buttons linked to the currently selected paragraph. Loading Indicators Show progress indicators when AI is processing requests (e.g., spinner or loading bar). Toast Notifications Use toast messages for actions like saving edits, applying rewrites, or exporting essays (e.g., "Changes saved successfully!"). Visual Enhancements Drag and Drop Animation Add placeholder indicators (e.g., dashed outlines) to visually guide drag and drop actions for Body Paragraphs. Highlight drop targets with glowing borders or color changes. Dynamic Highlighting Use subtle animations (e.g., pulsing effects) to draw attention to selected paragraphs or interactive elements. Consistent Layout Maintain padding, spacing, and color consistency across all components. Use collapsible sidebars for chatbox and feedback panels to optimize screen real estate.