Feature: AI Node and AI Actions extension

core-web/libs/block-editor/src/lib/block-editor.module.ts

@@ -11,6 +11,7 @@ import { DotBlockEditorComponent } from './components/dot-block-editor/dot-block
 import { DotEditorCountBarComponent } from './components/dot-editor-count-bar/dot-editor-count-bar.component';
 import {
     AIContentPromptComponent,
+    AIContentActionsComponent,
     BubbleLinkFormComponent,
     BubbleMenuButtonComponent,
     BubbleMenuComponent,
@@ -52,7 +53,8 @@ import { SharedModule } from './shared/shared.module';
         DotBlockEditorComponent,
         DotEditorCountBarComponent,
         FloatingButtonComponent,
-        AIContentPromptComponent
+        AIContentPromptComponent,
+        AIContentActionsComponent
     ],
     providers: [DotUploadFileService, LoggerService, StringUtils, AiContentService],
     exports: [
@@ -63,7 +65,8 @@ import { SharedModule } from './shared/shared.module';
         SharedModule,
         BubbleFormComponent,
         DotBlockEditorComponent,
-        AIContentPromptComponent
+        AIContentPromptComponent,
+        AIContentActionsComponent
     ]
 })
 export class BlockEditorModule {}

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

@@ -306,6 +306,13 @@
                 }
             }
         }
+
+        .ai-content-container {
+            &.ProseMirror-selectednode {
+                background-color: $color-palette-primary-op-20;
+                border: 1px solid $color-palette-primary-300;
+            }
+        }
     }
 
     tiptap-editor {

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

@@ -50,10 +50,11 @@ import {
     FREEZE_SCROLL_KEY,
     AssetUploader,
     DotComands,
-    AIContentPromptExtension
+    AIContentPromptExtension,
+    AIContentActionsExtension
 } from '../../extensions';
 import { DotPlaceholder } from '../../extensions/dot-placeholder/dot-placeholder-plugin';
-import { ContentletBlock, ImageNode, VideoNode } from '../../nodes';
+import { ContentletBlock, ImageNode, VideoNode, AIContentNode } from '../../nodes';
 import {
     formatHTML,
     removeInvalidNodes,
@@ -109,7 +110,8 @@ export class DotBlockEditorComponent implements OnInit, OnDestroy {
         ['dotContent', ContentletBlock(this.injector)],
         ['image', ImageNode],
         ['video', VideoNode],
-        ['table', DotTableExtension()]
+        ['table', DotTableExtension()],
+        ['aiContent', AIContentNode]
     ]);
 
     private destroy$: Subject<boolean> = new Subject<boolean>();
@@ -381,6 +383,7 @@ export class DotBlockEditorComponent implements OnInit, OnDestroy {
             DotBubbleMenuExtension(this.viewContainerRef),
             BubbleFormExtension(this.viewContainerRef),
             AIContentPromptExtension(this.viewContainerRef),
+            AIContentActionsExtension(this.viewContainerRef),
             DotFloatingButton(this.injector, this.viewContainerRef),
             DotTableCellExtension(this.viewContainerRef),
             BubbleAssetFormExtension(this.viewContainerRef),

core-web/libs/block-editor/src/lib/extensions/action-button/actions-menu.extension.ts

@@ -173,7 +173,8 @@ function execCommand({
         subscript: () => editor.chain().setSubscript().focus().run(),
         superscript: () => editor.chain().setSuperscript().focus().run(),
         video: () => editor.commands.openAssetForm({ type: 'video' }),
-        aiContentPrompt: () => editor.commands.openAIPrompt()
+        aiContentPrompt: () => editor.commands.openAIPrompt(),
+        aiContent: () => editor.commands.insertAINode()
     };
 
     getCustomActions(customBlocks).forEach((option) => {

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

@@ -0,0 +1,8 @@
+<p-listbox [options]="actionOptions" (onClick)="$event.value.callback()">
+    <ng-template let-actionOption pTemplate="item">
+        <div class="action-content">
+            <i [class]="actionOption.icon"></i>
+            {{ actionOption.label }}
+        </div>
+    </ng-template>
+</p-listbox>

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

@@ -0,0 +1,47 @@
+@use "variables" as *;
+
+:host ::ng-deep {
+    .p-listbox {
+        display: block;
+        width: 12.5rem;
+        padding: $spacing-1;
+        margin-left: $spacing-8;
+
+        li {
+            padding: $spacing-2 $spacing-3;
+
+            // accept option
+            &:first-child {
+                background-color: $color-palette-primary-200;
+            }
+
+            // regenerate option
+            &:nth-child(2) {
+                padding: $spacing-3;
+                background-color: $white !important;
+            }
+
+            // delete option
+            &:last-child {
+                border-top: 1px solid $color-palette-gray-300;
+                background-color: $white !important;
+            }
+
+            &:hover {
+                background-color: $color-palette-primary-100;
+            }
+        }
+    }
+}
+
+.action-content {
+    display: flex;
+    align-items: center;
+    color: $black;
+
+    // list option icon
+    i {
+        margin-right: $spacing-0;
+        color: $color-palette-gray-600;
+    }
+}

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

@@ -0,0 +1,28 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { AIContentActionsComponent } from './ai-content-actions.component';
+
+import { AiContentService } from '../../shared';
+
+describe('AIContentActionsComponent', () => {
+    let component: AIContentActionsComponent;
+    let fixture: ComponentFixture<AIContentActionsComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [ReactiveFormsModule, HttpClientTestingModule],
+            declarations: [AIContentActionsComponent],
+            providers: [AiContentService]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(AIContentActionsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,72 @@
+import { Observable, of } from 'rxjs';
+
+import { Component, EventEmitter, Output, OnInit } from '@angular/core';
+
+import { AiContentService } from '../../shared/services/ai-content/ai-content.service';
+
+interface ActionOption {
+    label: string;
+    icon: string;
+    selectedOption: boolean;
+    callback: () => void;
+}
+
+export enum ACTIONS {
+    ACCEPT = 'ACCEPT',
+    DELETE = 'DELETE',
+    REGENERATE = 'REGENERATE'
+}
+
+@Component({
+    selector: 'dot-ai-content-actions',
+    templateUrl: './ai-content-actions.component.html',
+    styleUrls: ['./ai-content-actions.component.scss']
+})
+export class AIContentActionsComponent implements OnInit {
+    @Output() actionEmitter = new EventEmitter<ACTIONS>();
+
+    actionOptions!: ActionOption[];
+
+    constructor(private aiContentService: AiContentService) {}
+
+    ngOnInit() {
+        this.actionOptions = [
+            {
+                label: 'Accept',
+                icon: 'pi pi-check',
+                callback: () => this.emitAction(ACTIONS.ACCEPT),
+                selectedOption: true
+            },
+            {
+                label: 'Regenerate',
+                icon: 'pi pi-sync',
+                callback: () => this.emitAction(ACTIONS.REGENERATE),
+                selectedOption: false
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-trash',
+                callback: () => this.emitAction(ACTIONS.DELETE),
+                selectedOption: false
+            }
+        ];
+    }
+
+    private emitAction(action: ACTIONS) {
+        this.actionEmitter.emit(action);
+    }
+
+    getLatestContent() {
+        return this.aiContentService.getLastContentResponse();
+    }
+
+    getNewContent(): Observable<string> {
+        const promptToUse: string = this.aiContentService.getLastUsedPrompt();
+
+        if (promptToUse) {
+            return this.aiContentService.getIAContent(promptToUse);
+        }
+
+        return of('');
+    }
+}

core-web/libs/block-editor/src/lib/extensions/ai-content-actions/ai-content-actions.extension.ts

@@ -0,0 +1,84 @@
+import { PluginKey } from 'prosemirror-state';
+import { Props } from 'tippy.js';
+
+import { ViewContainerRef } from '@angular/core';
+
+import { Extension } from '@tiptap/core';
+
+import { AIContentActionsComponent } from './ai-content-actions.component';
+import { aiContentActionsPlugin } from './plugins/ai-content-actions.plugin';
+
+export interface AIContentActionsOptions {
+    pluginKey: PluginKey;
+    tippyOptions?: Partial<Props>;
+    element: HTMLElement | null;
+}
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        AIContentActions: {
+            openAIContentActions: () => ReturnType;
+            closeAIContentActions: () => ReturnType;
+        };
+    }
+}
+
+export const AI_CONTENT_ACTIONS_PLUGIN_KEY = new PluginKey('aiContentActions-form');
+
+export const AIContentActionsExtension = (viewContainerRef: ViewContainerRef) => {
+    return Extension.create<AIContentActionsOptions>({
+        name: 'aiContentActions',
+
+        addOptions() {
+            return {
+                element: null,
+                tippyOptions: {},
+                pluginKey: AI_CONTENT_ACTIONS_PLUGIN_KEY
+            };
+        },
+
+        addCommands() {
+            return {
+                openAIContentActions:
+                    () =>
+                    ({ chain }) => {
+                        return chain()
+                            .command(({ tr }) => {
+                                tr.setMeta(AI_CONTENT_ACTIONS_PLUGIN_KEY, { open: true });
+
+                                return true;
+                            })
+                            .freezeScroll(true)
+                            .run();
+                    },
+                closeAIContentActions:
+                    () =>
+                    ({ chain }) => {
+                        return chain()
+                            .command(({ tr }) => {
+                                tr.setMeta(AI_CONTENT_ACTIONS_PLUGIN_KEY, { open: false });
+
+                                return true;
+                            })
+                            .freezeScroll(false)
+                            .run();
+                    }
+            };
+        },
+
+        addProseMirrorPlugins() {
+            const component = viewContainerRef.createComponent(AIContentActionsComponent);
+            component.changeDetectorRef.detectChanges();
+
+            return [
+                aiContentActionsPlugin({
+                    pluginKey: this.options.pluginKey,
+                    editor: this.editor,
+                    element: component.location.nativeElement,
+                    tippyOptions: this.options.tippyOptions,
+                    component: component
+                })
+            ];
+        }
+    });
+};