#26519 include in 23.10.24

dotCMS · Feb 23, 2024 · 6fefa45 · 6fefa45
1 parent 1b11b43
commit 6fefa45
Show file tree

Hide file tree

Showing 24 changed files with 426 additions and 194 deletions.
diff --git a/core-web/libs/block-editor/src/lib/block-editor.module.ts b/core-web/libs/block-editor/src/lib/block-editor.module.ts
@@ -25,7 +25,7 @@ import { AssetFormModule } from './extensions/asset-form/asset-form.module';
 import { BubbleFormComponent } from './extensions/bubble-form/bubble-form.component';
 import { FloatingButtonComponent } from './extensions/floating-button/floating-button.component';
 import { ContentletBlockComponent } from './nodes';
-import { AiContentService, DotUploadFileService } from './shared';
+import { DotAiService, DotUploadFileService } from './shared';
 import { EditorDirective } from './shared/directives';
 import { PrimengModule } from './shared/primeng.module';
 import { SharedModule } from './shared/shared.module';
@@ -58,7 +58,7 @@ import { SharedModule } from './shared/shared.module';
         AIContentActionsComponent,
         AIImagePromptComponent
     ],
-    providers: [DotUploadFileService, LoggerService, StringUtils, AiContentService],
+    providers: [DotUploadFileService, LoggerService, StringUtils, DotAiService],
     exports: [
         EditorDirective,
         BubbleMenuComponent,

diff --git a/...bs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.stories.ts b/...bs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.stories.ts
@@ -22,7 +22,7 @@ import {
 } from '../../extensions';
 import { ContentletBlockComponent } from '../../nodes';
 import {
-    AiContentService,
+    DotAiService,
     ASSET_MOCK,
     CONTENTLETS_MOCK,
     DotLanguageService,
@@ -32,7 +32,7 @@ import {
     SuggestionsComponent,
     SuggestionsService
 } from '../../shared';
-import { AiContentServiceMock } from '../../shared/services/ai-content/ai-content.service.mock';
+import { DotAiServiceMock } from '../../shared/services/dot-ai/dot-ai-service.mock';
 
 export default {
     title: 'Library/Block Editor'
@@ -182,9 +182,8 @@ export const primary = () => ({
                 }
             },
             {
-                provide: AiContentService,
-                useClass:
-                    process.env.USE_MIDDLEWARE === 'true' ? AiContentService : AiContentServiceMock
+                provide: DotAiService,
+                useClass: process.env.USE_MIDDLEWARE === 'true' ? DotAiService : DotAiServiceMock
             }
         ],
         // We need these here because they are dynamically rendered

diff --git a/...libs/block-editor/src/lib/extensions/ai-content-actions/ai-content-actions.component.scss b/...libs/block-editor/src/lib/extensions/ai-content-actions/ai-content-actions.component.scss
@@ -18,13 +18,13 @@
             // regenerate option
             &:nth-child(2) {
                 padding: $spacing-3;
-                background-color: $white !important;
+                background-color: $white;
             }
 
             // delete option
             &:last-child {
                 border-top: 1px solid $color-palette-gray-300;
-                background-color: $white !important;
+                background-color: $white;
             }
 
             &:hover {

diff --git a/...s/block-editor/src/lib/extensions/ai-content-actions/ai-content-actions.component.spec.ts b/...s/block-editor/src/lib/extensions/ai-content-actions/ai-content-actions.component.spec.ts
@@ -4,7 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 
 import { AIContentActionsComponent } from './ai-content-actions.component';
 
-import { AiContentService } from '../../shared';
+import { DotAiService } from '../../shared';
 
 describe('AIContentActionsComponent', () => {
     let component: AIContentActionsComponent;
@@ -14,7 +14,7 @@ describe('AIContentActionsComponent', () => {
         await TestBed.configureTestingModule({
             imports: [ReactiveFormsModule, HttpClientTestingModule],
             declarations: [AIContentActionsComponent],
-            providers: [AiContentService]
+            providers: [DotAiService]
         }).compileComponents();
 
         fixture = TestBed.createComponent(AIContentActionsComponent);

diff --git a/...b/libs/block-editor/src/lib/extensions/ai-content-actions/ai-content-actions.component.ts b/...b/libs/block-editor/src/lib/extensions/ai-content-actions/ai-content-actions.component.ts
@@ -1,8 +1,4 @@
-import { Observable } from 'rxjs';
-
-import { Component, EventEmitter, Output, OnInit } from '@angular/core';
-
-import { AiContentService } from '../../shared/services/ai-content/ai-content.service';
+import { Component, EventEmitter, Output, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 interface ActionOption {
     label: string;
@@ -20,16 +16,15 @@ export enum ACTIONS {
 @Component({
     selector: 'dot-ai-content-actions',
     templateUrl: './ai-content-actions.component.html',
-    styleUrls: ['./ai-content-actions.component.scss']
+    styleUrls: ['./ai-content-actions.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AIContentActionsComponent implements OnInit {
     @Output() actionEmitter = new EventEmitter<ACTIONS>();
 
     actionOptions!: ActionOption[];
     tooltipContent = 'Describe the size, color palette, style, mood, etc.';
 
-    constructor(private aiContentService: AiContentService) {}
-
     ngOnInit() {
         this.actionOptions = [
             {
@@ -56,12 +51,4 @@ export class AIContentActionsComponent implements OnInit {
     private emitAction(action: ACTIONS) {
         this.actionEmitter.emit(action);
     }
-
-    getLatestContent(): string {
-        return this.aiContentService.getLatestContent();
-    }
-
-    getNewContent(contentType: string): Observable<string> {
-        return this.aiContentService.getNewContent(contentType);
-    }
 }
diff --git a/...b/libs/block-editor/src/lib/extensions/ai-content-actions/ai-content-actions.extension.ts b/...b/libs/block-editor/src/lib/extensions/ai-content-actions/ai-content-actions.extension.ts
@@ -17,7 +17,7 @@ export interface AIContentActionsOptions {
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         AIContentActions: {
-            openAIContentActions: () => ReturnType;
+            openAIContentActions: (nodeType: string) => ReturnType;
             closeAIContentActions: () => ReturnType;
         };
     }
@@ -40,11 +40,11 @@ export const AIContentActionsExtension = (viewContainerRef: ViewContainerRef) =>
         addCommands() {
             return {
                 openAIContentActions:
-                    () =>
+                    (nodeType) =>
                     ({ chain }) => {
                         return chain()
                             .command(({ tr }) => {
-                                tr.setMeta(AI_CONTENT_ACTIONS_PLUGIN_KEY, { open: true });
+                                tr.setMeta(AI_CONTENT_ACTIONS_PLUGIN_KEY, { open: true, nodeType });
 
                                 return true;
                             })

diff --git a/...s/block-editor/src/lib/extensions/ai-content-actions/plugins/ai-content-actions.plugin.ts b/...s/block-editor/src/lib/extensions/ai-content-actions/plugins/ai-content-actions.plugin.ts
@@ -10,6 +10,8 @@ import { takeUntil } from 'rxjs/operators';
 
 import { Editor } from '@tiptap/core';
 
+import { DOT_AI_TEXT_CONTENT_KEY } from '../../ai-content-prompt/ai-content-prompt.extension';
+import { AiContentPromptStore } from '../../ai-content-prompt/store/ai-content-prompt.store';
 import { ACTIONS, AIContentActionsComponent } from '../ai-content-actions.component';
 import { AI_CONTENT_ACTIONS_PLUGIN_KEY } from '../ai-content-actions.extension';
 import { TIPPY_OPTIONS } from '../utils';
@@ -23,6 +25,7 @@ interface AIContentActionsProps {
 }
 
 interface PluginState {
+    nodeType: string;
     open: boolean;
 }
 
@@ -47,6 +50,8 @@ export class AIContentActionsView {
 
     public component: ComponentRef<AIContentActionsComponent>;
 
+    private aiContentPromptStore: AiContentPromptStore;
+
     private destroy$ = new Subject<boolean>();
 
     constructor(props: AIContentActionsViewProps) {
@@ -62,6 +67,10 @@ export class AIContentActionsView {
         this.pluginKey = pluginKey;
         this.component = component;
 
+        // Reference of stores available ROOT through the Angular component.
+        //TODO: Add the reference of the image store.
+        this.aiContentPromptStore = this.component.injector.get(AiContentPromptStore);
+
         this.component.instance.actionEmitter.pipe(takeUntil(this.destroy$)).subscribe((action) => {
             switch (action) {
                 case ACTIONS.ACCEPT:
@@ -82,33 +91,27 @@ export class AIContentActionsView {
     }
 
     private acceptContent() {
+        const pluginState: PluginState = this.pluginKey?.getState(this.view.state);
         this.editor.commands.closeAIContentActions();
-        const content = this.component.instance.getLatestContent();
-        this.editor.commands.insertContent(content);
+        //TODO: add the image case to the add content.
+        switch (pluginState.nodeType) {
+            case DOT_AI_TEXT_CONTENT_KEY:
+                this.aiContentPromptStore.setAcceptContent(true);
+                break;
+        }
     }
 
     private generateContent() {
-        const nodeType = this.getNodeType();
+        const pluginState: PluginState = this.pluginKey?.getState(this.view.state);
 
         this.editor.commands.closeAIContentActions();
 
-        this.component.instance.getNewContent(nodeType).subscribe((newContent) => {
-            if (newContent) {
-                this.editor.commands.deleteSelection();
-                this.editor.commands.insertAINode(newContent);
-                this.editor.commands.openAIContentActions();
-            }
-        });
-    }
-
-    private getNodeType() {
-        const { state } = this.editor.view;
-        const { doc, selection } = state;
-        const { ranges } = selection;
-        const from = Math.min(...ranges.map((range) => range.$from.pos));
-        const node = doc?.nodeAt(from);
-
-        return node.type.name;
+        //TODO: add the image case to the re-generate content.
+        switch (pluginState.nodeType) {
+            case DOT_AI_TEXT_CONTENT_KEY:
+                this.aiContentPromptStore.reGenerateContent();
+                break;
+        }
     }
 
     private deleteContent() {
@@ -176,7 +179,8 @@ export const aiContentActionsPlugin = (options: AIContentActionsProps) => {
         state: {
             init(): PluginState {
                 return {
-                    open: false
+                    open: false,
+                    nodeType: null
                 };
             },
 
@@ -185,11 +189,11 @@ export const aiContentActionsPlugin = (options: AIContentActionsProps) => {
                 value: PluginState,
                 oldState: EditorState
             ): PluginState {
-                const { open } = transaction.getMeta(AI_CONTENT_ACTIONS_PLUGIN_KEY) || {};
+                const { open, nodeType } = transaction.getMeta(AI_CONTENT_ACTIONS_PLUGIN_KEY) || {};
                 const state = AI_CONTENT_ACTIONS_PLUGIN_KEY?.getState(oldState);
 
                 if (typeof open === 'boolean') {
-                    return { open };
+                    return { open, nodeType };
                 }
 
                 return state || value;

diff --git a/...b/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.html b/...b/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.html
@@ -1,27 +1,26 @@
-<form
-    id="ai-text-prompt"
-    *ngIf="form"
-    [formGroup]="form"
-    (ngSubmit)="onSubmit()"
-    autocomplete="off">
-    <span class="p-input-icon-right">
-        <input
-            #input
-            formControlName="textPrompt"
-            type="text"
-            pInputText
-            placeholder="Ask AI to write something" />
+<ng-container *ngIf="vm$ | async as vm">
+    <form id="ai-text-prompt" [formGroup]="form" (ngSubmit)="onSubmit()" autocomplete="off">
+        <span class="p-input-icon-right">
+            <input
+                #input
+                [disabled]="vm.loading"
+                formControlName="textPrompt"
+                type="text"
+                pInputText
+                autofocus
+                placeholder="Ask AI to write something" />
 
-        <ng-container *ngIf="isFormSubmitting; else submitButton">
-            <span class="pending-label">Pending</span>
-        </ng-container>
+            <ng-container *ngIf="vm.loading; else submitButton">
+                <span class="pending-label">Pending</span>
+            </ng-container>
 
-        <ng-template #submitButton>
-            <button
-                class="p-button-rounded p-button-text"
-                pButton
-                type="submit"
-                icon="pi pi-send"></button>
-        </ng-template>
-    </span>
-</form>
+            <ng-template #submitButton>
+                <button
+                    class="p-button-rounded p-button-text"
+                    pButton
+                    type="submit"
+                    icon="pi pi-send"></button>
+            </ng-template>
+        </span>
+    </form>
+</ng-container>
diff --git a/...ibs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.spec.ts b/...ibs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.spec.ts
@@ -4,7 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 
 import { AIContentPromptComponent } from './ai-content-prompt.component';
 
-import { AiContentService } from '../../shared';
+import { DotAiService } from '../../shared';
 
 describe('AIContentPromptComponent', () => {
     let component: AIContentPromptComponent;
@@ -14,7 +14,7 @@ describe('AIContentPromptComponent', () => {
         await TestBed.configureTestingModule({
             imports: [ReactiveFormsModule, HttpClientTestingModule],
             declarations: [AIContentPromptComponent],
-            providers: [AiContentService]
+            providers: [DotAiService]
         }).compileComponents();
 
         fixture = TestBed.createComponent(AIContentPromptComponent);