A I Writing Assistant - Copy this React, Tailwind Component to your project

Design-Prompt-for-a-Dual-Column-AI-Powered-Web-Application-Front-End-Objective:-Design-a-functional-and-intuitive-dual-column-web-application-that-serves-as-an-AI-powered-writing-assistant.-The-application-should-enable-users-to-manage-and-edit-documents-interactively,-leveraging-AI-tools-for-enhancing-content.-The-design-should-prioritize-simplicity-and-usability.-1.-Overall-Layout-Structure:-Header:-Positioned-at-the-top,-spanning-the-full-width.-Main-Content-Area:-Divided-into-two-vertical-columns—left-and-right.-Footer:-Located-at-the-bottom,-containing-essential-links-and-information.-2.-Header-Elements:-Logo:-Positioned-on-the-far-left,-representing-the-application-brand.-Title:-Next-to-the-logo,-clearly-indicating-the-application's-purpose.-User-Profile-Icon:-Located-on-the-far-right,-providing-access-to-user-settings.-Help/Support-Icon:-Adjacent-to-the-user-profile,-linking-to-help-resources.-Functionality:-Logo:-Clickable,-redirecting-to-the-home-or-main-dashboard.-User-Profile-Icon:-Opens-a-dropdown-or-modal-with-account-options.-Help/Support-Icon:-Opens-a-help-center-or-support-modal-with-FAQs-and-contact-options.-3.-Footer-Elements:-Version-Information:-Displays-the-current-version-of-the-application.-Legal-Links:-Includes-links-to-the-Privacy-Policy-and-Terms-of-Service.-Feedback-Button:-Allows-users-to-submit-feedback-or-report-issues.-Functionality:-Feedback-Button:-Opens-a-feedback-form-modal-where-users-can-input-their-comments-or-concerns.-4.-Left-Column:-Document-Viewer-and-Editor-Layout:-Occupies-the-left-portion-of-the-main-content-area.-Displays-the-document-as-a-series-of-individual-paragraphs.-Components:-Paragraph-Blocks:-Appearance:-Each-paragraph-is-contained-within-a-distinct-box.-Interactivity:-Selection:-Clicking-a-paragraph-highlights-it.-Drag-and-Drop:-Users-can-reorder-paragraphs-by-dragging-them-to-new-positions.-Inline-Editing:-Double-clicking-a-paragraph-or-clicking-an-edit-icon-allows-direct-text-modification.-Add-Paragraph-Button:-Placement:-Positioned-at-the-end-or-between-existing-paragraphs.-Functionality:-Inserts-a-new-editable-paragraph-block-when-clicked.-Delete-Paragraph-Option:-Placement:-Within-each-paragraph-block,-accessible-via-a-delete-icon.-Functionality:-Prompts-a-confirmation-modal-to-prevent-accidental-deletions-when-clicked.-Modal-Components:-Edit-Paragraph-Modal:-Elements:-Large-text-area-for-editing,-formatting-options-(e.g.,-bold,-italics),-and-Save/Cancel-buttons.-Functionality:-Enables-comprehensive-editing-of-the-selected-paragraph.-Add/Edit-Source-Modal:-Elements:-Input-fields-for-source-URLs-or-references,-and-a-list-displaying-current-sources-with-edit/delete-options.-Functionality:-Allows-users-to-associate-sources-with-specific-paragraphs.-5.-Right-Column:-AI-Tools-and-Document-Options-Layout:-Occupies-the-right-portion-of-the-main-content-area.-Displays-tools-and-options-based-on-user-interactions-in-the-left-column.-Components:-Context-Sensitive-Action-Panel:-When-a-Paragraph-is-Selected:-Edit-Button:-Opens-the-Edit-Paragraph-Modal.-Rewrite-Button:-Initiates-AI-assisted-rewriting-of-the-selected-paragraph.-Summarize-Button:-Generates-a-summary-of-the-selected-paragraph.-Analyze-Sentiment-Button:-Displays-the-emotional-tone-of-the-paragraph.-Add-Source-Button:-Opens-the-Add/Edit-Source-Modal.-View-Sources-Button:-Lists-all-sources-linked-to-the-paragraph.-Feedback-Option:-Allows-users-to-rate-or-provide-feedback-on-AI-generated-suggestions.-When-No-Paragraph-is-Selected-(Whole-Document):-Global-Edit-Button:-Opens-a-comprehensive-editor-for-the-entire-document.-Summarize-Document-Button:-Generates-a-summary-of-the-entire-document.-Analyze-Sentiment-Button:-Provides-an-overall-sentiment-analysis-of-the-document.-Export-Options:-Buttons-for-Different-Formats:-PDF,-DOCX,-Markdown,-Plain-Text.-Include-Sources-Option:-Toggle-to-include-or-exclude-sources-in-the-export.-Version-Control-Options:-View-History-Button:-Displays-a-history-of-changes-made-to-the-document.-Restore-Version-Button:-Allows-users-to-revert-to-previous-versions-of-the-document.-Additional-Tools:-Thesaurus-Button:-Suggests-synonyms-for-selected-words-or-phrases.-Grammar-Check-Button:-Highlights-grammatical-errors-and-offers-corrections.-Style-Suggestions-Button:-Provides-recommendations-to-improve-writing-style-(e.g.,-converting-passive-voice-to-active-voice).-Collaboration-Tools-Button:-Offers-options-to-share-the-document,-enable-real-time-collaborative-editing,-and-access-a-commenting-system.-Modal-Components:-AI-Suggestion-Modal:-Elements:-Displays-AI-generated-content-(e.g.,-rewritten-paragraph)-with-Accept,-Reject,-and-Modify-buttons.-Functionality:-Allows-users-to-review-and-incorporate-AI-generated-enhancements.-Summary-Modal:-Elements:-Shows-the-generated-summary-with-options-to-copy-or-export-the-text.-Functionality:-Provides-users-with-concise-summaries-of-their-content.-Sentiment-Analysis-Modal:-Elements:-Visual-charts-or-graphs-representing-sentiment-data,-along-with-detailed-textual-analysis.-Functionality:-Offers-insights-into-the-emotional-tone-of-the-content.-6.-Modals-and-Overlays-Design:-Overlays-the-main-content-with-a-clear-distinction-to-focus-attention-on-modal-content.-Includes-a-close-button-for-easy-dismissal.-Types-of-Modals:-Edit-Paragraph-Modal-Add/Edit-Source-Modal-AI-Suggestion-Modal-Summary-Modal-Sentiment-Analysis-Modal-Feedback-Modal:-Contains-a-text-area-for-user-input-and-Submit/Cancel-buttons.-7.-Notifications-and-Alerts-Toast-Notifications:-Appearance:-Small-messages-that-appear-temporarily-on-the-screen.-Content:-Inform-users-of-actions-such-as-successful-saves,-completed-AI-processes,-or-errors.-Behavior:-Automatically-disappear-after-a-short-duration-but-can-also-be-manually-closed.-Alert-Modals:-Appearance:-Prominent-pop-ups-that-require-user-acknowledgment.-Content:-Display-critical-alerts,-such-as-confirmation-prompts-for-deleting-a-paragraph-or-warnings-about-unsaved-changes.-Behavior:-Users-must-interact-with-the-alert-(e.g.,-click-"OK"-or-"Cancel")-to-proceed.-8.-User-Interaction-and-Workflow-Selecting-and-Editing-Paragraphs:-Action:-Clicking-a-paragraph-highlights-it-and-reveals-relevant-tools-in-the-right-column.-Editing:-Users-can-either-inline-edit-by-double-clicking-or-open-the-Edit-Paragraph-Modal-for-more-extensive-changes.-Reordering-Paragraphs:-Action:-Users-click-and-hold-a-paragraph-block-to-drag-it-to-a-new-position.-Visual-Feedback:-A-placeholder-indicates-the-potential-drop-location-during-dragging.-Utilizing-AI-Tools:-Rewrite-and-Summarize:-Users-can-click-respective-buttons-to-generate-AI-assisted-content,-which-appears-in-the-AI-Suggestion-Modal-or-Summary-Modal.-Sentiment-Analysis:-Users-can-view-the-emotional-tone-of-specific-paragraphs-or-the-entire-document-through-the-Sentiment-Analysis-Modal.-Managing-Sources:-Adding-Sources:-Users-can-associate-sources-with-paragraphs-via-the-Add/Edit-Source-Modal.-Viewing-Sources:-Users-can-review-all-linked-sources-through-the-View-Sources-Button,-accessing-details-in-the-modal.-Exporting-and-Version-Control:-Exporting:-Users-choose-the-desired-format-and-export-options,-initiating-a-download-of-the-document-in-the-selected-format.-Version-Control:-Users-can-view-the-history-of-document-changes-and-restore-previous-versions-as-needed.-9.-Accessibility-and-Responsiveness-Accessibility:-Keyboard-Navigation:-Ensure-all-interactive-elements-are-accessible-via-keyboard-shortcuts-and-tab-navigation.-ARIA-Labels:-Implement-appropriate-labels-for-assistive-technologies-to-describe-elements-and-functionalities.-High-Contrast:-Maintain-clear-distinctions-between-interactive-elements-to-aid-usability.-Responsiveness:-Adaptable-Layout:-The-application-should-gracefully-adjust-its-layout-for-various-screen-sizes,-including-desktops,-tablets,-and-mobile-devices.-Touch-Friendly-Elements:-Ensure-buttons-and-interactive-components-are-adequately-sized-and-spaced-for-touch-interactions-on-smaller-screens.