feat(dotAI): Caffeine cache migration and free-text image size input

core-web/libs/data-access/src/lib/dot-ai/dot-ai.service.ts

@@ -9,7 +9,6 @@ import {
     DotCMSContentlet,
     AiPluginResponse,
     DotAIImageContent,
-    DotAIImageOrientation,
     DotAIImageResponse,
     DotAiProviderConfig
 } from '@dotcms/dotcms-models';
@@ -80,7 +79,7 @@ export class DotAiService {
      */
     public generateAndPublishImage(
         prompt: string,
-        size: string = DotAIImageOrientation.HORIZONTAL
+        size = '1024x1024'
     ): Observable<DotAIImageContent> {
         return this.#http
             .post<DotAIImageResponse>(

core-web/libs/dotcms-models/src/lib/dot-ai.model.ts

@@ -49,7 +49,7 @@ export interface DotAIImageResponse {
 export interface AIImagePrompt {
     text: string;
     type: PromptType;
-    size: DotAIImageOrientation;
+    size: string;
 }
 
 /**

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/ai-image-prompt.component.html

@@ -15,7 +15,7 @@
             [isLoading]="store.isLoading()"
             [images]="store.images()"
             [activeImageIndex]="store.galleryActiveIndex()"
-            [orientation]="store.formValue()?.size" />
+            [size]="store.formValue()?.size" />
         @if (store.isLoading() || store.hasImages()) {
             <div class="flex gap-1 justify-end">
                 <p-button

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/ai-image-prompt.store.ts

@@ -11,7 +11,6 @@ import {
     ComponentStatus,
     AIImagePrompt,
     DotAIImageContent,
-    DotAIImageOrientation,
     DotGeneratedAIImage,
     PromptType
 } from '@dotcms/dotcms-models';
@@ -48,7 +47,7 @@ const initialState: DotAiImagePromptComponentState = {
     formValue: {
         text: '',
         type: DEFAULT_INPUT_PROMPT,
-        size: DotAIImageOrientation.HORIZONTAL
+        size: '1024x1024'
     }
 };
 

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/components/ai-image-prompt-form/ai-image-prompt-form.component.html

@@ -35,14 +35,15 @@
                     }
                 </div>
                 <div class="field flex flex-col gap-1">
-                    <label dotFieldRequired for="orientation">
-                        {{ 'block-editor.extension.ai-image.orientation' | dm }}
+                    <label dotFieldRequired for="size">
+                        {{ 'block-editor.extension.ai-image.size' | dm }}
                     </label>
-                    <p-select
-                        [options]="orientationOptions"
+                    <input
+                        pInputText
+                        id="size"
                         formControlName="size"
-                        inputId="orientation"
-                        styleClass="w-full" />
+                        placeholder="e.g. 1024x1024"
+                        class="w-full" />
                 </div>
             </p-accordion-content>
         </p-accordion-panel>

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/components/ai-image-prompt-form/ai-image-prompt-form.component.spec.ts

@@ -6,7 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { ButtonModule } from 'primeng/button';
 
 import { DotMessageService } from '@dotcms/data-access';
-import { DotAIImageOrientation, DotGeneratedAIImage, PromptType } from '@dotcms/dotcms-models';
+import { DotGeneratedAIImage, PromptType } from '@dotcms/dotcms-models';
 
 import { AiImagePromptFormComponent } from './ai-image-prompt-form.component';
 
@@ -17,7 +17,7 @@ import { DotCopyButtonComponent } from '../../../dot-copy-button/dot-copy-button
 const MOCK_FORM_VALUE = {
     text: 'Test',
     type: PromptType.INPUT,
-    size: DotAIImageOrientation.HORIZONTAL
+    size: '1024x1024'
 };
 
 const MOCK_AI_VALUE = {
@@ -61,9 +61,7 @@ describe('DotAiImagePromptFormComponent', () => {
         spectator.detectChanges();
         expect(spectator.component.form.get('text').value).toEqual('');
         expect(spectator.component.form.get('type').value).toEqual(PromptType.INPUT);
-        expect(spectator.component.form.get('size').value).toEqual(
-            DotAIImageOrientation.HORIZONTAL
-        );
+        expect(spectator.component.form.get('size').value).toEqual('1024x1024');
     });
 
     it('should emit value when form value change', () => {

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/components/ai-image-prompt-form/ai-image-prompt-form.component.ts

@@ -20,21 +20,15 @@ import {
 } from '@angular/forms';
 
 import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'primeng/accordion';
-import { SelectItem } from 'primeng/api';
 import { Button } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
 import { RadioButton } from 'primeng/radiobutton';
-import { Select } from 'primeng/select';
 import { Textarea } from 'primeng/textarea';
 
 import { filter } from 'rxjs/operators';
 
 import { DotMessageService } from '@dotcms/data-access';
-import {
-    AIImagePrompt,
-    DotAIImageOrientation,
-    DotGeneratedAIImage,
-    PromptType
-} from '@dotcms/dotcms-models';
+import { AIImagePrompt, DotGeneratedAIImage, PromptType } from '@dotcms/dotcms-models';
 
 import { DotCopyButtonComponent } from './../../../../components/dot-copy-button/dot-copy-button.component';
 import { DotFieldRequiredDirective } from './../../../../dot-field-required/dot-field-required.directive';
@@ -53,7 +47,7 @@ import { DotValidators } from './../../../../validators/dotValidators';
         RadioButton,
         ReactiveFormsModule,
         FormsModule,
-        Select,
+        InputTextModule,
         Textarea,
         DotFieldRequiredDirective,
         DotMessagePipe,
@@ -95,24 +89,6 @@ export class AiImagePromptFormComponent implements OnChanges {
     submitButtonLabel = 'block-editor.extension.ai-image.generate';
     requiredPrompt = true;
     tooltipText: string = null;
-    orientationOptions: SelectItem<DotAIImageOrientation>[] = [
-        {
-            value: DotAIImageOrientation.HORIZONTAL,
-            label: this.dotMessageService.get(
-                'block-editor.extension.ai-image.orientation.horizontal'
-            )
-        },
-        {
-            value: DotAIImageOrientation.SQUARE,
-            label: this.dotMessageService.get('block-editor.extension.ai-image.orientation.square')
-        },
-        {
-            value: DotAIImageOrientation.VERTICAL,
-            label: this.dotMessageService.get(
-                'block-editor.extension.ai-image.orientation.vertical'
-            )
-        }
-    ];
     private isUpdatingValidators = false;
     private destroyRef = inject(DestroyRef);
 
@@ -134,7 +110,10 @@ export class AiImagePromptFormComponent implements OnChanges {
         this.form = new FormGroup({
             text: new FormControl('', [Validators.required, DotValidators.noWhitespace]),
             type: new FormControl(PromptType.INPUT, Validators.required),
-            size: new FormControl(DotAIImageOrientation.HORIZONTAL, Validators.required)
+            size: new FormControl('1024x1024', [
+                Validators.required,
+                Validators.pattern(/^[1-9]\d{1,3}x[1-9]\d{1,3}$/)
+            ])
         });
 
         const typeControl = this.form.get('type');

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/components/ai-image-prompt-gallery/ai-image-prompt-gallery.component.html

@@ -1,6 +1,6 @@
 @if (!isLoading && !images?.length) {
     <div
-        [className]="'s' + orientation + ' ai-image-gallery__placeholder'"
+        [className]="'s' + size + ' ai-image-gallery__placeholder'"
         data-testid="ai-image-gallery__placeholder">
         <svg
             xmlns="http://www.w3.org/2000/svg"

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/components/ai-image-prompt-gallery/ai-image-prompt-gallery.component.scss

@@ -14,6 +14,7 @@
     align-items: center;
     border-radius: common.$border-radius-md;
     align-self: center;
+    aspect-ratio: 1/1;
 
     &.s1024x1792 {
         aspect-ratio: 1/1.25;
@@ -38,21 +39,47 @@ p-galleria {
 
 :host ::ng-deep {
     .ai-image-gallery__img {
-        width: 100%;
+        max-width: 100%;
         max-height: 32rem;
         border-radius: common.$border-radius-md;
     }
 
-    p-galleriacontent {
+    p-galleriacontent,
+    .p-galleria,
+    .p-galleria-content,
+    .p-galleria-items-container,
+    .p-galleria-items {
+        width: 100%;
+    }
+
+    .p-galleria-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
         width: 100%;
     }
 
-    dot-empty-container .message__icon {
-        color: colors.$red;
+    .p-image {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+    }
+
+    dot-empty-container {
+        width: 100%;
+        min-height: 20rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .pi {
+            width: inherit;
+        }
     }
 
     .message__principal-wrapper {
-        padding: 0 4.5rem;
+        padding: 0 2rem;
+        text-align: center;
     }
 
     .p-image-preview {

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/components/ai-image-prompt-gallery/ai-image-prompt-gallery.component.ts

@@ -14,7 +14,7 @@ import { ImageModule } from 'primeng/image';
 import { SkeletonModule } from 'primeng/skeleton';
 
 import { DotMessageService } from '@dotcms/data-access';
-import { DotAIImageOrientation, DotGeneratedAIImage } from '@dotcms/dotcms-models';
+import { DotGeneratedAIImage } from '@dotcms/dotcms-models';
 
 import {
     DotEmptyContainerComponent,
@@ -52,10 +52,10 @@ export class AiImagePromptGalleryComponent implements OnChanges {
     activeImageIndex = 0;
 
     /**
-     * The orientation of the images. helps to define the initial placeholder
+     * The image size string (e.g. "1024x1024"). Used to set the placeholder CSS class.
      */
     @Input()
-    orientation = DotAIImageOrientation.HORIZONTAL;
+    size = '1024x1024';
 
     /**
      * An event that is emitted when the active image index changes.

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/store/ai-image-prompt.store.spec.ts

@@ -5,7 +5,7 @@ import { of, throwError } from 'rxjs';
 import { TestBed } from '@angular/core/testing';
 
 import { DotAiService } from '@dotcms/data-access';
-import { ComponentStatus, DotAIImageOrientation, PromptType } from '@dotcms/dotcms-models';
+import { ComponentStatus, PromptType } from '@dotcms/dotcms-models';
 
 import { DotAiImagePromptStore } from './ai-image-prompt.store';
 
@@ -38,7 +38,7 @@ describe('DotAiImagePromptStore', () => {
             expect(store.formValue()).toEqual({
                 text: '',
                 type: PromptType.INPUT,
-                size: DotAIImageOrientation.HORIZONTAL
+                size: '1024x1024'
             });
         });
     });
@@ -80,7 +80,7 @@ describe('DotAiImagePromptStore', () => {
             const formValue = {
                 text: 'new text',
                 type: PromptType.INPUT,
-                size: DotAIImageOrientation.VERTICAL
+                size: '1024x1792'
             };
             store.setFormValue(formValue);
             expect(store.formValue()).toEqual(formValue);
@@ -92,13 +92,13 @@ describe('DotAiImagePromptStore', () => {
             store.setFormValue({
                 text: 'prompt',
                 type: PromptType.INPUT,
-                size: DotAIImageOrientation.HORIZONTAL
+                size: '1792x1024'
             });
             store.generateImage();
 
             expect(dotAiService.generateAndPublishImage).toHaveBeenCalledWith(
                 'prompt',
-                DotAIImageOrientation.HORIZONTAL
+                '1792x1024'
             );
             expect(store.status()).toBe(ComponentStatus.IDLE);
             expect(store.images().length).toBe(1);
@@ -110,13 +110,13 @@ describe('DotAiImagePromptStore', () => {
             store.setFormValue({
                 text: 'prompt',
                 type: PromptType.INPUT,
-                size: DotAIImageOrientation.HORIZONTAL
+                size: '1792x1024'
             });
             store.generateImage();
 
             expect(dotAiService.generateAndPublishImage).toHaveBeenCalledWith(
                 'prompt',
-                DotAIImageOrientation.HORIZONTAL
+                '1792x1024'
             );
             expect(store.status()).toBe(ComponentStatus.ERROR);
             expect(store.error()).toBe('error');

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/store/ai-image-prompt.store.ts

@@ -11,7 +11,6 @@ import { DotAiService } from '@dotcms/data-access';
 import {
     AIImagePrompt,
     ComponentStatus,
-    DotAIImageOrientation,
     DotGeneratedAIImage,
     PromptType
 } from '@dotcms/dotcms-models';
@@ -34,7 +33,7 @@ const initialState: AiImagePromptdState = {
     formValue: {
         text: '',
         type: PromptType.INPUT,
-        size: DotAIImageOrientation.HORIZONTAL
+        size: '1024x1024'
     }
 };