[UI] - Make AI Text Block Production-ready

[oidacra]

Parent Issue

#26495

User Story

As a user of the Block Editor, I want to have an AI Content Prompt Extension so that I can efficiently and effectively generate and create content with AI suggestions.

Endpoint: /api/v1/ai/text/generate

Acceptance Criteria

• The Block Editor should have an "AI Content " command in the list
• Users should be able to activate the AI suggestions with a single click or command.
• Users should have the option to accept, modify, or reject AI suggestions.
• Error handling of the AI endpoints are not in the scope of this task.

dotCMS Version

master

Proposed Objective

User Experience

Proposed Priority

Priority 2 - Important

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

Command Menu

Prompt Input

Content Generated

Assumptions & Initiation Needs

• Assuming the AI Image Prompt Extension has the necessary APIs and SDKs for integration.
• Users have a basic understanding of the Block Editor functionalities.

Quality Assurance Notes & Workarounds

• Ensure that the AI suggestions do not interfere with the normal functioning of the Block Editor.

Tasks

Beta Give feedback

1. [UI] Review AIContentPromptExtension #26519
   Merged QA : Not Needed Team : Falcon Type : Task dotCMS : AI +5
   
2. [UI] - Disable the input while is pending/loading #26665
   Merged QA : Not Needed Team : Falcon Type : Defect dotCMS : AI +5
   
3. [UI] When the BlockEditor lose the focus, and get it again the generated content is duplicated #26666
   Merged Team : Falcon Type : Defect dotCMS : AI +4
   
4. [UI] Add loading status when you click Regenerate content. #26667
   QA : Approved QA : Passed Internal Release : 23.12.21 Team : Falcon Type : Defect dotCMS : AI +6

[hmoreras]

QA notes:

1. Add the package com.barchart.udt in the Exported Packages button in the plugin portlet.
2. Install the last version of the AI plugin.
3. Add the token key in the apps configuration portlet.
4. Create a content that has a block editor on it, or use one that already have it like BLOG.
5. In the Editor type /ai, select the AI Content.
6. Type a prompt and hit enter, wait for the response.
7. Once the response is done, text should added to the editor, and a context menu should show.
8. All functions of the context menu should work.

Use the images in the description as reference.

[dsilvam]

Passed Internal QA: Working as described in the QA Notes. Used token key provided by @hmoreras and the three options in the context menu working as expected.

[josemejias11]

Approved: Tested on master_5973727, Docker, macOS 13.0, FF v121.0.1