Update AI Helper syntax #3710 (#3711)

* Update AI Helper syntax #3710
enonic · Sep 18, 2024 · 49e7ead · 49e7ead
1 parent cea6b59
commit 49e7ead
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 119 deletions.
diff --git a/...ces/assets/admin/common/js/ai/AIHelper.ts → ...ces/assets/admin/common/js/ai/AiHelper.ts b/...ces/assets/admin/common/js/ai/AIHelper.ts → ...ces/assets/admin/common/js/ai/AiHelper.ts
@@ -1,10 +1,11 @@
 import {PropertyPath} from '../data/PropertyPath';
 import {Element} from '../dom/Element';
-import {AIActionButton} from './ui/AIActionButton';
-import {AI_HELPER_STATE} from './AIHelperState';
+import {Store} from '../store/Store';
 import {i18n} from '../util/Messages';
+import {AiHelperState} from './AiHelperState';
+import {AiActionButton} from './ui/AiActionButton';
 
-export interface AIHelperConfig {
+export interface AiHelperConfig {
     dataPathElement: Element;
     getPathFunc: () => PropertyPath;
     icon?: {
@@ -14,17 +15,20 @@ export interface AIHelperConfig {
     setValueFunc?: (value: string) => void;
 }
 
-export class AIHelper {
+const AI_HELPERS_KEY = 'AiHelpers';
+Store.instance().set(AI_HELPERS_KEY, []);
+
+export class AiHelper {
 
     public static DATA_ATTR = 'data-path';
 
-    private readonly config: AIHelperConfig;
+    private readonly config: AiHelperConfig;
 
-    private readonly sagaIcon?: AIActionButton;
+    private readonly aiIcon?: AiActionButton;
 
-    private state: AI_HELPER_STATE = AI_HELPER_STATE.DEFAULT;
+    private state: AiHelperState = AiHelperState.DEFAULT;
 
-    constructor(config: AIHelperConfig) {
+    constructor(config: AiHelperConfig) {
         this.config = config;
 
         const updatePathCall = setInterval(() => {
@@ -33,42 +37,43 @@ export class AIHelper {
 
         this.config.dataPathElement.onRemoved(() => {
             clearInterval(updatePathCall);
-            AI_HELPER_REGISTRY.get().remove(this);
+            const helper: AiHelper[] = Store.instance().get(AI_HELPERS_KEY) ?? [];
+            Store.instance().set(AI_HELPERS_KEY, helper.filter(h => h !== this));
         });
 
-        AI_HELPER_REGISTRY.get().add(this);
+        Store.instance().get(AI_HELPERS_KEY).push(this);
 
         if (config.icon?.container) {
-            this.sagaIcon = new AIActionButton();
-            this.config.icon.container.appendChild(this.sagaIcon);
+            this.aiIcon = new AiActionButton();
+            this.config.icon.container.appendChild(this.aiIcon);
         }
     }
 
     private updateInputElDataPath(): void {
-        const dataPath = AIHelper.convertToPath(this.config.getPathFunc());
-        this.config.dataPathElement.getEl().setAttribute(AIHelper.DATA_ATTR, dataPath);
-        this.sagaIcon?.setDataPath(dataPath);
+        const dataPath = AiHelper.convertToPath(this.config.getPathFunc());
+        this.config.dataPathElement.getEl().setAttribute(AiHelper.DATA_ATTR, dataPath);
+        this.aiIcon?.setDataPath(dataPath);
     }
 
-    setState(state: AI_HELPER_STATE): this {
+    setState(state: AiHelperState): this {
         if (state === this.state) {
             return this;
         }
 
         this.state = state;
-        this.sagaIcon?.setState(state);
+        this.aiIcon?.setState(state);
 
-        if (state === AI_HELPER_STATE.COMPLETED || state === AI_HELPER_STATE.FAILED) {
+        if (state === AiHelperState.COMPLETED || state === AiHelperState.FAILED) {
             setTimeout(() => {
-                if (this.state === AI_HELPER_STATE.COMPLETED || this.state === AI_HELPER_STATE.FAILED) {
-                    this.setState(AI_HELPER_STATE.DEFAULT);
+                if (this.state === AiHelperState.COMPLETED || this.state === AiHelperState.FAILED) {
+                    this.setState(AiHelperState.DEFAULT);
                 }
             }, 1000);
 
             this.config.dataPathElement.getEl().setDisabled(false);
             this.config.dataPathElement.removeClass('ai-helper-mask');
             this.resetTitle();
-        } else if (state === AI_HELPER_STATE.PROCESSING) {
+        } else if (state === AiHelperState.PROCESSING) {
             this.config.dataPathElement.getEl().setDisabled(true);
             this.config.dataPathElement.addClass('ai-helper-mask');
             this.updateTitle();
@@ -83,15 +88,15 @@ export class AIHelper {
     }
 
     getDataPath(): string {
-        return this.config.dataPathElement.getEl().getAttribute(AIHelper.DATA_ATTR);
+        return this.config.dataPathElement.getEl().getAttribute(AiHelper.DATA_ATTR);
     }
 
     public static convertToPath(path: PropertyPath): string {
         return path?.toString().replace(/\./g, '/') || '';
     }
 
-    public static getAIHelperByPath(dataPath: string): AIHelper | undefined {
-        return AI_HELPER_REGISTRY.get().find(dataPath);
+    public static getAiHelperByPath(dataPath: string): AiHelper | undefined {
+        return Store.instance().get(AI_HELPERS_KEY).find(helper => helper.getDataPath() === dataPath);
     }
 
     private updateTitle(): void {
@@ -101,7 +106,7 @@ export class AIHelper {
             parent.setAttribute('data-title', parent.getTitle());
         }
 
-        parent.setTitle(i18n('ai.assistant.processing', this.config.label));
+        parent.setTitle(i18n('ai.field.processing', this.config.label));
     }
 
     private resetTitle(): void {
@@ -113,28 +118,3 @@ export class AIHelper {
         }
     }
 }
-
-class AI_HELPER_REGISTRY {
-
-    private registry: AIHelper[];
-
-    private constructor() {
-        this.registry = [];
-    }
-
-    static get(): AI_HELPER_REGISTRY {
-        return window['AI_HELPER_REGISTRY'] ?? (window['AI_HELPER_REGISTRY'] = new AI_HELPER_REGISTRY());
-    }
-
-    add(helper: AIHelper): void {
-        this.registry.push(helper);
-    }
-
-    remove(helper: AIHelper): void {
-        this.registry = this.registry.filter(h => h !== helper);
-    }
-
-    find(dataPath: string): AIHelper | undefined {
-        return this.registry.find(helper => helper.getDataPath() === dataPath);
-    }
-}
diff --git a/...ssets/admin/common/js/ai/AIHelperState.ts → ...ssets/admin/common/js/ai/AiHelperState.ts b/...ssets/admin/common/js/ai/AIHelperState.ts → ...ssets/admin/common/js/ai/AiHelperState.ts
@@ -1,4 +1,4 @@
-export enum AI_HELPER_STATE {
+export enum AiHelperState {
     DEFAULT = 'default',
     PROCESSING = 'processing',
     COMPLETED = 'completed',

diff --git a/...on/js/ai/event/EnonicAiOpenDialogEvent.ts → ...EnonicAiContentOperatorOpenDialogEvent.ts b/...on/js/ai/event/EnonicAiOpenDialogEvent.ts → ...EnonicAiContentOperatorOpenDialogEvent.ts
@@ -1,7 +1,7 @@
 import {ClassHelper} from '../../ClassHelper';
 import {Event} from '../../event/Event';
 
-export class EnonicAiOpenDialogEvent
+export class EnonicAiContentOperatorOpenDialogEvent
     extends Event {
 
     private readonly sourceDataPath?: string;
@@ -16,11 +16,11 @@ export class EnonicAiOpenDialogEvent
         return this.sourceDataPath;
     }
 
-    static on(handler: (event: EnonicAiOpenDialogEvent) => void) {
+    static on(handler: (event: EnonicAiContentOperatorOpenDialogEvent) => void) {
         Event.bind(ClassHelper.getFullName(this), handler);
     }
 
-    static un(handler?: (event: EnonicAiOpenDialogEvent) => void) {
+    static un(handler?: (event: EnonicAiContentOperatorOpenDialogEvent) => void) {
         Event.unbind(ClassHelper.getFullName(this), handler);
     }
 

diff --git a/...s/admin/common/js/ai/ui/AIActionButton.ts → ...s/admin/common/js/ai/ui/AiActionButton.ts b/...s/admin/common/js/ai/ui/AIActionButton.ts → ...s/admin/common/js/ai/ui/AiActionButton.ts
@@ -1,14 +1,14 @@
+import * as Q from 'q';
+import {DivEl} from '../../dom/DivEl';
 import {Button} from '../../ui/button/Button';
 import {i18n} from '../../util/Messages';
-import {EnonicAiOpenDialogEvent} from '../event/EnonicAiOpenDialogEvent';
-import {DivEl} from '../../dom/DivEl';
-import * as Q from 'q';
-import {AI_HELPER_STATE} from '../AIHelperState';
+import {AiHelperState} from '../AiHelperState';
+import {EnonicAiContentOperatorOpenDialogEvent} from '../event/EnonicAiContentOperatorOpenDialogEvent';
 
-export class AIActionButton
+export class AiActionButton
     extends DivEl {
 
-    private static baseClass = 'ai-button-container';
+    private static readonly BASE_CLASS = 'ai-button-container';
 
     private dataPath?: string;
 
@@ -24,19 +24,19 @@ export class AIActionButton
     }
 
     protected initElements(): void {
-        this.button = new Button().addClass(`${AIActionButton.baseClass}-icon icon-ai`) as Button;
-        this.loader = new DivEl(`${AIActionButton.baseClass}-loader`);
-        this.setTitle(i18n('action.saga'));
-        this.setState(AI_HELPER_STATE.DEFAULT);
+        this.button = new Button().addClass(`${AiActionButton.BASE_CLASS}-icon icon-ai`) as Button;
+        this.loader = new DivEl(`${AiActionButton.BASE_CLASS}-loader`);
+        this.setTitle(i18n('ai.action.contentOperator.use'));
+        this.setState(AiHelperState.DEFAULT);
     }
 
-    setState(state: AI_HELPER_STATE): this {
-        this.setClass(`${AIActionButton.baseClass} ${state}`);
+    setState(state: AiHelperState): this {
+        this.setClass(`${AiActionButton.BASE_CLASS} ${state}`);
 
         return this;
     }
 
-    setDataPath(dataPath: string): AIActionButton {
+    setDataPath(dataPath: string): AiActionButton {
         this.dataPath = dataPath;
         return this;
     }
@@ -48,7 +48,7 @@ export class AIActionButton
     protected initListeners(): void {
         this.button.onClicked(() => {
             if (this.dataPath) {
-                new EnonicAiOpenDialogEvent(this.dataPath).fire();
+                new EnonicAiContentOperatorOpenDialogEvent(this.dataPath).fire();
             }
         });
     }

diff --git a/src/main/resources/assets/admin/common/js/form/FormItemOccurrenceView.ts b/src/main/resources/assets/admin/common/js/form/FormItemOccurrenceView.ts
@@ -1,11 +1,9 @@
 import * as Q from 'q';
-import {DivEl} from '../dom/DivEl';
 import {PropertyPath} from '../data/PropertyPath';
+import {DivEl} from '../dom/DivEl';
 import {FormItemOccurrence} from './FormItemOccurrence';
 import {HelpTextContainer} from './HelpTextContainer';
 import {RemoveButtonClickedEvent} from './RemoveButtonClickedEvent';
-import {AIHelper} from '../ai/AIHelper';
-import {Element} from '../dom/Element';
 
 export interface FormItemOccurrenceViewConfig {
     className: string;

diff --git a/src/main/resources/assets/admin/common/js/form/inputtype/support/InputOccurrenceView.ts b/src/main/resources/assets/admin/common/js/form/inputtype/support/InputOccurrenceView.ts
@@ -1,16 +1,16 @@
 import * as Q from 'q';
+import {AiHelper} from '../../../ai/AiHelper';
 import {Property} from '../../../data/Property';
+import {PropertyPath} from '../../../data/PropertyPath';
 import {PropertyValueChangedEvent} from '../../../data/PropertyValueChangedEvent';
-import {FormItemOccurrenceView, FormItemOccurrenceViewConfig} from '../../FormItemOccurrenceView';
-import {Element} from '../../../dom/Element';
-import {DivEl} from '../../../dom/DivEl';
 import {Value} from '../../../data/Value';
-import {PropertyPath} from '../../../data/PropertyPath';
-import {InputOccurrence} from './InputOccurrence';
-import {BaseInputTypeNotManagingAdd} from './BaseInputTypeNotManagingAdd';
 import {ButtonEl} from '../../../dom/ButtonEl';
+import {DivEl} from '../../../dom/DivEl';
+import {Element} from '../../../dom/Element';
+import {FormItemOccurrenceView, FormItemOccurrenceViewConfig} from '../../FormItemOccurrenceView';
+import {BaseInputTypeNotManagingAdd} from './BaseInputTypeNotManagingAdd';
+import {InputOccurrence} from './InputOccurrence';
 import {OccurrenceValidationRecord} from './OccurrenceValidationRecord';
-import {AIHelper} from '../../../ai/AIHelper';
 
 export interface InputOccurrenceViewConfig
     extends FormItemOccurrenceViewConfig {
@@ -195,7 +195,7 @@ export class InputOccurrenceView
         this.property.onPropertyValueChanged(this.propertyValueChangedHandler);
 
         if (this.inputTypeView.getContext()?.formContext?.isAiEditable() && this.inputTypeView.isEditableByAI()) {
-            new AIHelper({
+            new AiHelper({
                 dataPathElement: this.inputElement,
                 getPathFunc: () => this.getDataPath(),
                 icon: {

diff --git a/src/main/resources/assets/admin/common/js/form/set/FormSetOccurrenceView.ts b/src/main/resources/assets/admin/common/js/form/set/FormSetOccurrenceView.ts
@@ -1,40 +1,40 @@
 import * as Q from 'q';
-import {PropertySet} from '../../data/PropertySet';
+import {AiHelper} from '../../ai/AiHelper';
+import {Property} from '../../data/Property';
+import {PropertyAddedEvent} from '../../data/PropertyAddedEvent';
 import {PropertyArray} from '../../data/PropertyArray';
+import {PropertyPath} from '../../data/PropertyPath';
+import {PropertyRemovedEvent} from '../../data/PropertyRemovedEvent';
+import {PropertySet} from '../../data/PropertySet';
 import {PropertyValueChangedEvent} from '../../data/PropertyValueChangedEvent';
-import {i18n} from '../../util/Messages';
 import {Value} from '../../data/Value';
+import {ValueType} from '../../data/ValueType';
+import {ValueTypes} from '../../data/ValueTypes';
 import {DivEl} from '../../dom/DivEl';
-import {PropertyPath} from '../../data/PropertyPath';
+import {Element} from '../../dom/Element';
+import {ObjectHelper} from '../../ObjectHelper';
+import {Action} from '../../ui/Action';
+import {MoreButton} from '../../ui/button/MoreButton';
+import {KeyBinding} from '../../ui/KeyBinding';
+import {KeyBindings} from '../../ui/KeyBindings';
+import {ConfirmationMask} from '../../ui/mask/ConfirmationMask';
+import {i18n} from '../../util/Messages';
+import {FormContext} from '../FormContext';
+import {FormItem} from '../FormItem';
+import {FormItemLayer} from '../FormItemLayer';
+import {FormItemOccurrence} from '../FormItemOccurrence';
 import {FormItemOccurrenceView, FormItemOccurrenceViewConfig} from '../FormItemOccurrenceView';
 import {FormItemView} from '../FormItemView';
-import {RecordingValidityChangedEvent} from '../RecordingValidityChangedEvent';
 import {FormOccurrenceDraggableLabel} from '../FormOccurrenceDraggableLabel';
+import {Input} from '../Input';
+import {RadioButton} from '../inputtype/radiobutton/RadioButton';
+import {RecordingValidityChangedEvent} from '../RecordingValidityChangedEvent';
 import {ValidationRecording} from '../ValidationRecording';
-import {FormItemLayer} from '../FormItemLayer';
 import {ValidationRecordingPath} from '../ValidationRecordingPath';
 import {FormSet} from './FormSet';
-import {FormItem} from '../FormItem';
-import {FormContext} from '../FormContext';
-import {Action} from '../../ui/Action';
-import {MoreButton} from '../../ui/button/MoreButton';
-import {ConfirmationMask} from '../../ui/mask/ConfirmationMask';
-import {Element} from '../../dom/Element';
-import {KeyBindings} from '../../ui/KeyBindings';
-import {KeyBinding} from '../../ui/KeyBinding';
-import {Property} from '../../data/Property';
-import {ValueType} from '../../data/ValueType';
-import {ValueTypes} from '../../data/ValueTypes';
-import {PropertyAddedEvent} from '../../data/PropertyAddedEvent';
-import {PropertyRemovedEvent} from '../../data/PropertyRemovedEvent';
+import {FormItemSet} from './itemset/FormItemSet';
 import {FormOptionSet} from './optionset/FormOptionSet';
 import {FormOptionSetOption} from './optionset/FormOptionSetOption';
-import {FormItemSet} from './itemset/FormItemSet';
-import {Input} from '../Input';
-import {RadioButton} from '../inputtype/radiobutton/RadioButton';
-import {ObjectHelper} from '../../ObjectHelper';
-import {FormItemOccurrence} from '../FormItemOccurrence';
-import {AIHelper} from '../../ai/AIHelper';
 
 export interface FormSetOccurrenceViewConfig<V extends FormSetOccurrenceView> {
     context: FormContext;
@@ -236,7 +236,7 @@ export abstract class FormSetOccurrenceView
             }
         });
 
-        new AIHelper({
+        new AiHelper({
             dataPathElement: this,
             getPathFunc: () => this.getDataPath(),
         });