dotCMS/core#26912 [UI] AI actions menu selection is not working as should.

core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.scss

@@ -278,6 +278,17 @@
                     }
                 }
             }
+
+            .ai-loading {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-width: 100%;
+                padding: $spacing-1;
+                border-radius: $spacing-1;
+                border: 1px solid $color-palette-gray-400;
+                color: $color-palette-primary;
+            }
         }
 
         .video-container {

core-web/libs/block-editor/src/lib/extensions/ai-content-actions/ai-content-actions.component.scss

@@ -7,24 +7,13 @@
         padding: $spacing-1;
         margin-left: $spacing-8;
 
-        li {
+        .p-listbox-list .p-listbox-item {
             padding: $spacing-2 $spacing-3;
+            border-bottom: 1px solid $color-palette-gray-300;
+            background-color: $white;
 
-            // accept option
-            &:first-child {
-                background-color: $color-palette-primary-200;
-            }
-
-            // regenerate option
-            &:nth-child(2) {
-                padding: $spacing-3;
-                background-color: $white;
-            }
-
-            // delete option
             &:last-child {
-                border-top: 1px solid $color-palette-gray-300;
-                background-color: $white;
+                border-bottom: none;
             }
 
             &:hover {

core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.html

@@ -6,7 +6,6 @@
                 [attr.disabled]="vm.status === 'loading' || null"
                 (keyup.escape)="handleScape($event)"
                 (keydown.escape)="$event.stopPropagation()"
-                autofocus
                 formControlName="textPrompt"
                 pInputText
                 placeholder="{{

core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/plugins/ai-content-prompt.plugin.ts

@@ -127,15 +127,13 @@ export class AIContentPromptView {
          * template in ai-content-prompt.component.html
          */
 
-        this.componentStore.status$
-            .pipe(
-                skip(1),
-                takeUntil(this.destroy$),
-                filter((status) => status === 'exit')
-            )
-            .subscribe(() => {
+        this.componentStore.status$.pipe(skip(1), takeUntil(this.destroy$)).subscribe((status) => {
+            if (status === 'exit') {
                 this.tippy?.hide();
-            });
+            } else if (status === 'loading') {
+                this.editor.commands.setLoadingAIContentNode(true);
+            }
+        });
 
         /**
          * Subscription to delete AI_CONTENT node.
@@ -169,8 +167,6 @@ export class AIContentPromptView {
         const prev = prevState ? this.pluginKey?.getState(prevState) : { open: false };
 
         if (next?.open === prev?.open) {
-            this.tippy?.popperInstance?.forceUpdate();
-
             return;
         }
 
@@ -231,6 +227,7 @@ export class AIContentPromptView {
      * @param notifyStore
      */
     hide(notifyStore = true) {
+        this.tippy?.hide();
         this.editor.setEditable(true);
 
         this.editor.view.focus();

core-web/libs/block-editor/src/lib/nodes/ai-content/ai-content.node.ts

@@ -7,17 +7,22 @@ declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         AIContentNode: {
             insertAINode: (content?: string) => ReturnType;
+            setLoadingAIContentNode: (loading: boolean) => ReturnType;
         };
     }
 }
 
+const AI_LOADING_CLASS = 'ai-loading';
 export const AIContentNode = Node.create({
     name: 'aiContent',
 
     addAttributes() {
         return {
             content: {
                 default: ''
+            },
+            loading: {
+                default: false
             }
         };
     },
@@ -70,7 +75,8 @@ export const AIContentNode = Node.create({
                     // If an AI_CONTENT node is found, replace its content.
                     if (nodeInformation) {
                         tr.setNodeMarkup(nodeInformation.from, undefined, {
-                            content: content
+                            content: content,
+                            loading: false
                         });
                         // Set the node selection to the beginning of the replaced content.
                         commands.setNodeSelection(nodeInformation.from);
@@ -83,6 +89,20 @@ export const AIContentNode = Node.create({
                         type: this.name,
                         attrs: { content: content }
                     });
+                },
+            setLoadingAIContentNode:
+                (loading: boolean) =>
+                ({ tr, editor }) => {
+                    const nodeInformation = findNodeByType(editor, NodeTypes.AI_CONTENT);
+                    // Set the loading attribute to the specified value.
+                    if (nodeInformation) {
+                        tr.setNodeMarkup(nodeInformation.from, undefined, {
+                            ...nodeInformation.node.attrs,
+                            loading: loading
+                        });
+                    }
+
+                    return true;
                 }
         };
     },
@@ -96,13 +116,18 @@ export const AIContentNode = Node.create({
             const dom = document.createElement('div');
             const div = document.createElement('div');
 
-            div.innerHTML = node.attrs.content || '';
+            div.innerHTML = node.attrs.loading
+                ? `<span class="pi pi-spin pi-spinner"></span>`
+                : node.attrs.content;
 
             dom.contentEditable = 'true';
-            dom.classList.add('ai-content-container');
+            dom.className = `ai-content-container ${node.attrs.loading ? AI_LOADING_CLASS : ''}`;
+
             dom.append(div);
 
-            return { dom };
+            return {
+                dom
+            };
         };
     }
 });

core-web/libs/block-editor/src/lib/shared/utils/prosemirror.utils.ts

@@ -1,4 +1,4 @@
-import { ResolvedPos } from 'prosemirror-model';
+import { ResolvedPos, Node } from 'prosemirror-model';
 import { SelectionRange, TextSelection } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';