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

Design an enhanced dual column Essay Editor app that seamlessly integrates AI powered interactions and paragraph editing tools into a modern, user friendly interface. The app's right column will host an embedded chatbox assistant, similar to GPT, but tailored specifically for essay editing and rewriting. Below are the detailed requirements: General Design Overview Dual Column Layout: Left Column: Display and manage the essay structure, including draggable Body Paragraphs, a static Introduction, and a static Conclusion. Right Column: Host the AI powered chatbox assistant for dynamic interactions, alongside additional tools like rewrite templates and paragraph feedback. Aesthetic Design: Minimalistic and modern design using soft colors, gradients, and a professional palette (white, blue, gray, and subtle purple/green accents for action elements). Use shadow effects, rounded corners, and smooth transitions for a polished look. Responsiveness: Ensure full responsiveness for desktop and mobile devices. On smaller screens, the right column should collapse into a toggleable panel. Interactive Elements: Include hover effects, smooth drag and drop animations, and clear visual cues for actionable components. Functional Requirements 1. Left Column: Essay Structure Introduction Section: Static, non draggable section for the introduction paragraph. Display paragraph content and purpose. Body Paragraphs: Draggable sections to rearrange the essay flow. Use a drag and drop interface with visual placeholders and glowing borders to indicate valid drop areas. Each paragraph should display: Content. Purpose. Actions (e.g., Rewrite, History). Selected paragraphs are highlighted (e.g., with a bold border or background color). Conclusion Section: Static, non draggable section for the conclusion. Display paragraph content and purpose. 2. Right Column: Embedded Chatbox Assistant and Tools Integrated Chatbox Assistant: Host an AI chatbox in the right column, designed for dynamic interaction and essay assistance. Chatbox Features: Users can type questions about the essay (e.g., "How can I improve my thesis statement?" or "What evidence supports this argument?"). AI responds directly in the chat, providing actionable advice or suggestions. Allow users to highlight a paragraph in the left column and ask the AI for specific help (e.g., "Rewrite this to simplify language" or "Expand this idea with more examples"). Display a chat history for ongoing reference during the session. Predefined Action Buttons in Chatbox: Include quick access buttons for common AI actions like: Simplify Language Expand Ideas Explain This Summarize Improve Tone Proofread Clicking these buttons triggers AI powered paragraph rewrites or feedback. Rewrite Templates: Display pre defined rewrite templates in the right column, either embedded in the chatbox or as a separate collapsible panel. Templates include: Simplify Language. Expand Ideas. Explain This. Summarize. Improve Tone. Proofread. Live Feedback Tools: Provide real time AI powered feedback on: Readability score. Tone (formal, persuasive, conversational, etc.). Word count and structure. 3. Modal Enhancements Essay Planning Modal: Replace the "Essay Planning" section with a "View Essay Planning" button in the header. Clicking the button opens a modal showing the essay plan (e.g., thesis statement, main arguments). Include scrollable content with clean formatting. Rewrite Modal: Clicking "Rewrite" for a paragraph opens a modal with options to: Select a rewrite template (e.g., Simplify, Expand). Submit a custom rewrite request. Preview AI generated text before applying changes. Additional Features 1. Drag and Drop Improvements Restrict drag and drop functionality to Body Paragraphs only. Add visual indicators (e.g., dashed placeholders) to guide users during rearrangement. 2. Version History Track changes for each paragraph. Allow users to view and revert to previous versions via a "History" button. 3. Export Options Provide options to export the essay in: PDF Word Document Plain Text 4. Notifications Use toast notifications for user actions like saving changes or exporting essays (e.g., "Changes saved successfully!"). 5. Collaborative Editing Allow users to invite collaborators for commenting or suggesting edits. Use inline comment threads or side annotations for collaboration. User Experience Enhancements 1. Collapsible Right Column On smaller screens, the right column collapses into a toggleable panel for better usability. 2. Dynamic Highlights Highlight problematic areas (e.g., grammar issues, unclear arguments) using AI and provide inline suggestions. 3. Loading Indicators Use spinners or progress bars when AI is processing requests. 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": [ { "id": 1, "type": "body", "content": "First main point with supporting evidence.", "purpose": "Present first argument", "is_draggable": true, "versions": [] }, { "id": 2, "type": "body", "content": "Second main point with examples.", "purpose": "Develop second argument", "is_draggable": true, "versions": [] } ], "conclusion": { "content": "Summarize main points and reinforce thesis.", "purpose": "Conclude essay effectively", "is_draggable": false, "versions": [] } } } This prompt ensures a highly interactive, dual column layout with an embedded chatbox assistant in the right column. The design provides users with advanced AI powered tools for essay editing, rewriting, and feedback while maintaining a clean, modern, and responsive interface.