feat(dotAI): Dot AI LangChain4J - Custom UI for provider config

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-ai-config-detail/dot-ai-config-detail-resolver.service.ts

@@ -0,0 +1,15 @@
+import { inject } from '@angular/core';
+import { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
+
+import { take } from 'rxjs/operators';
+
+import { DotAppsService } from '@dotcms/data-access';
+import { DotApp } from '@dotcms/dotcms-models';
+
+const DOT_AI_APP_KEY = 'dotAI';
+
+export const dotAiConfigDetailResolver: ResolveFn<DotApp> = (route: ActivatedRouteSnapshot) => {
+    const id = route.paramMap.get('id');
+
+    return inject(DotAppsService).getConfiguration(DOT_AI_APP_KEY, id).pipe(take(1));
+};

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-ai-config-detail/dot-ai-config-detail.component.html

@@ -0,0 +1,38 @@
+@if (app(); as app) {
+    <div class="flex flex-col w-full overflow-y-auto bg-white shadow-md text-sm">
+        <div class="bg-white sticky top-0 z-[1]">
+            <dot-apps-configuration-header [app]="app" />
+            <div
+                class="border-b border-gray-300 text-black flex justify-between text-base font-semibold px-3 py-3">
+                <span class="inline-flex items-center">{{ app.sites?.[0]?.name }}</span>
+                <div class="flex gap-1">
+                    <p-button (click)="goToApps()" [label]="'Cancel' | dm" [outlined]="true" />
+                    <p-button (click)="onSubmit()" [label]="'Save' | dm" [loading]="saving()" />
+                </div>
+            </div>
+        </div>
+        <div class="grow overflow-y-auto">
+            <div class="m-4">
+                <div class="grid grid-cols-2 gap-4 items-start">
+                    <div class="flex flex-col gap-2">
+                        <h4 class="text-black text-sm font-semibold m-0">Provider Config</h4>
+                        <textarea
+                            pTextarea
+                            [ngModel]="configJson()"
+                            (ngModelChange)="configJson.set($event)"
+                            rows="20"
+                            class="font-mono text-xs resize-y w-full"
+                            spellcheck="false"></textarea>
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <h4 class="text-black text-sm font-semibold m-0">Example JSON</h4>
+                        <pre
+                            class="bg-gray-100 border border-gray-300 rounded text-gray-700 font-mono text-xs leading-relaxed m-0 overflow-auto p-3 whitespace-pre"
+                            >{{ exampleJson }}</pre
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-ai-config-detail/dot-ai-config-detail.component.ts

@@ -0,0 +1,157 @@
+import { Component, DestroyRef, OnInit, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+
+import { ButtonModule } from 'primeng/button';
+import { TextareaModule } from 'primeng/textarea';
+
+import { map } from 'rxjs/operators';
+
+import {
+    DotAiService,
+    DotMessageDisplayService,
+    DotMessageService,
+    DotRouterService
+} from '@dotcms/data-access';
+import { DotApp, DotMessageSeverity, DotMessageType } from '@dotcms/dotcms-models';
+import { DotMessagePipe } from '@dotcms/ui';
+
+import { DotAppsConfigurationHeaderComponent } from '../dot-apps-configuration-detail/components/dot-apps-configuration-header/dot-apps-configuration-header.component';
+
+const EXAMPLE_CONFIG = {
+    chat: {
+        provider: 'openai',
+        apiKey: 'sk-...',
+        model: 'gpt-4o',
+        maxTokens: 16384,
+        temperature: 1.0,
+        maxRetries: 3,
+        rolePrompt: 'You are dotCMSbot, an AI assistant to help content creators.',
+        textPrompt: 'Use Descriptive writing style.'
+    },
+    embeddings: {
+        provider: 'openai',
+        apiKey: 'sk-...',
+        model: 'text-embedding-ada-002',
+        listenerIndexer: { default: 'blog,news,webPageContent' }
+    },
+    image: {
+        provider: 'openai',
+        apiKey: 'sk-...',
+        model: 'dall-e-3',
+        size: '1792x1024',
+        imagePrompt: 'Use 16:9 aspect ratio.'
+    }
+};
+
+@Component({
+    selector: 'dot-ai-config-detail',
+    templateUrl: './dot-ai-config-detail.component.html',
+    host: { class: 'flex h-full p-4 bg-gray-200 shadow-md' },
+    imports: [
+        FormsModule,
+        ButtonModule,
+        TextareaModule,
+        DotAppsConfigurationHeaderComponent,
+        DotMessagePipe
+    ]
+})
+export class DotAiConfigDetailComponent implements OnInit {
+    private route = inject(ActivatedRoute);
+    private dotAiService = inject(DotAiService);
+    private dotRouterService = inject(DotRouterService);
+    private dotMessageDisplayService = inject(DotMessageDisplayService);
+    private dotMessageService = inject(DotMessageService);
+    private destroyRef = inject(DestroyRef);
+
+    readonly app = signal<DotApp | null>(null);
+    readonly configJson = signal('');
+    readonly saving = signal(false);
+    readonly exampleJson = JSON.stringify(EXAMPLE_CONFIG, null, 2);
+
+    ngOnInit(): void {
+        this.route.data
+            .pipe(
+                map((x) => x?.data),
+                takeUntilDestroyed(this.destroyRef)
+            )
+            .subscribe((app: DotApp) => {
+                this.app.set(app);
+            });
+
+        this.dotAiService
+            .getConfig()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+                next: (config) => {
+                    if (config?.providerConfig) {
+                        try {
+                            this.configJson.set(
+                                JSON.stringify(JSON.parse(config.providerConfig), null, 2)
+                            );
+                        } catch {
+                            this.configJson.set(config.providerConfig);
+                        }
+                    }
+                },
+                error: (err) => {
+                    const detail =
+                        err?.error?.error ?? err?.message ?? 'Failed to load AI configuration';
+                    this.dotMessageDisplayService.push({
+                        life: 5000,
+                        message: detail,
+                        severity: DotMessageSeverity.ERROR,
+                        type: DotMessageType.SIMPLE_MESSAGE
+                    });
+                }
+            });
+    }
+
+    onSubmit(): void {
+        try {
+            JSON.parse(this.configJson());
+        } catch {
+            this.dotMessageDisplayService.push({
+                life: 5000,
+                message: 'Invalid JSON — please check the provider configuration',
+                severity: DotMessageSeverity.ERROR,
+                type: DotMessageType.SIMPLE_MESSAGE
+            });
+
+            return;
+        }
+
+        this.saving.set(true);
+        this.dotAiService
+            .saveConfig(this.configJson())
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+                next: () => {
+                    this.saving.set(false);
+                    this.dotMessageDisplayService.push({
+                        life: 3000,
+                        message: this.dotMessageService.get('dot.common.message.saved'),
+                        severity: DotMessageSeverity.SUCCESS,
+                        type: DotMessageType.SIMPLE_MESSAGE
+                    });
+                },
+                error: (err) => {
+                    this.saving.set(false);
+                    const detail =
+                        err?.error?.error ?? err?.message ?? 'Failed to save AI configuration';
+                    this.dotMessageDisplayService.push({
+                        life: 5000,
+                        message: detail,
+                        severity: DotMessageSeverity.ERROR,
+                        type: DotMessageType.SIMPLE_MESSAGE
+                    });
+                }
+            });
+    }
+
+    goToApps(): void {
+        const key = this.app()?.key ?? 'dotAI';
+        this.dotRouterService.goToAppsConfiguration(key);
+    }
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps.routes.ts

@@ -2,6 +2,8 @@ import { Routes } from '@angular/router';
 
 import { DotAppsService } from '@dotcms/data-access';
 
+import { dotAiConfigDetailResolver } from './components/dot-ai-config-detail/dot-ai-config-detail-resolver.service';
+import { DotAiConfigDetailComponent } from './components/dot-ai-config-detail/dot-ai-config-detail.component';
 import { DotAppsConfigurationComponent } from './components/dot-apps-configuration/dot-apps-configuration.component';
 import { DotAppsConfigurationDetailComponent } from './components/dot-apps-configuration-detail/dot-apps-configuration-detail.component';
 import { DotAppsListComponent } from './dot-apps-list/dot-apps-list.component';
@@ -10,6 +12,14 @@ import { DotAppsConfigurationResolver } from './services/dot-apps-configuration-
 import { DotAppsListResolver } from './services/dot-apps-list-resolver/dot-apps-list-resolver.service';
 
 export const dotAppsRoutes: Routes = [
+    {
+        component: DotAiConfigDetailComponent,
+        path: 'dotAI/edit/:id',
+        resolve: {
+            data: dotAiConfigDetailResolver
+        },
+        providers: [DotAppsService]
+    },
     {
         component: DotAppsConfigurationDetailComponent,
         path: ':appKey/create/:id',

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

@@ -8,12 +8,14 @@ import { catchError, map, switchMap } from 'rxjs/operators';
 import {
     DotCMSContentlet,
     AiPluginResponse,
-    DotAICompletionsConfig,
     DotAIImageContent,
     DotAIImageOrientation,
-    DotAIImageResponse
+    DotAIImageResponse,
+    DotAiProviderConfig
 } from '@dotcms/dotcms-models';
 
+export { DotAiProviderConfig };
+
 export const AI_PLUGIN_KEY = {
     NOT_SET: 'NOT SET'
 };
@@ -105,17 +107,27 @@ export class DotAiService {
      */
     checkPluginInstallation(): Observable<boolean> {
         return this.#http
-            .get<DotAICompletionsConfig>(`${API_ENDPOINT}/completions/config`, {
+            .get<DotAiProviderConfig>(`${API_ENDPOINT}/completions/config`, {
                 observe: 'response'
             })
             .pipe(
-                map((res) => res.status === 200 && res?.body?.apiKey !== AI_PLUGIN_KEY.NOT_SET),
+                map((res) => res.status === 200 && !!res?.body?.providerConfig),
                 catchError(() => {
                     return of(false);
                 })
             );
     }
 
+    getConfig(): Observable<DotAiProviderConfig> {
+        return this.#http.get<DotAiProviderConfig>(`${API_ENDPOINT}/completions/config`);
+    }
+
+    saveConfig(json: string): Observable<DotAiProviderConfig> {
+        return this.#http.put<DotAiProviderConfig>(`${API_ENDPOINT}/completions/config`, json, {
+            headers
+        });
+    }
+
     createAndPublishContentlet(aiResponse: DotAIImageResponse): Observable<DotAIImageContent> {
         const { response, tempFileName } = aiResponse;
         const contentlets: Partial<DotCMSContentlet>[] = [

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

@@ -93,6 +93,11 @@ export interface DotAICompletionsConfig {
     textPrompt: string;
 }
 
+export interface DotAiProviderConfig {
+    providerConfig: string;
+    configHost: string;
+}
+
 export interface DotAiError {
     code: string;
     message: string;

dotCMS/src/main/java/com/dotcms/ai/app/AppConfig.java

@@ -52,6 +52,7 @@ public class AppConfig implements Serializable {
     private final String listenerIndexer;
     private final String providerConfig;
     private final String providerConfigHash;
+    private final transient JsonNode providerConfigRoot;
     private final Map<String, Secret> configValues;
 
     public AppConfig(final String host, final Map<String, Secret> secrets) {
@@ -67,22 +68,23 @@ public AppConfig(final String host, final Map<String, Secret> secrets) {
 
         if (StringUtils.isNotBlank(providerConfig)) {
             providerConfigHash = DigestUtils.sha256Hex(providerConfig);
-            final JsonNode providerConfigRoot = parseProviderConfig(providerConfig);
+            providerConfigRoot = parseProviderConfig(providerConfig);
             model = buildModelFromProviderConfigNode(providerConfigRoot, "chat", AIModelType.TEXT);
             imageModel = buildModelFromProviderConfigNode(providerConfigRoot, "image", AIModelType.IMAGE);
             embeddingsModel = buildModelFromProviderConfigNode(providerConfigRoot, "embeddings", AIModelType.EMBEDDINGS);
         } else {
             providerConfigHash = "no-config";
+            providerConfigRoot = MAPPER.createObjectNode();
             model = AIModel.NOOP_MODEL;
             imageModel = AIModel.NOOP_MODEL;
             embeddingsModel = AIModel.NOOP_MODEL;
         }
 
-        rolePrompt = aiAppUtil.discoverSecret(secrets, AppKeys.ROLE_PROMPT);
-        textPrompt = aiAppUtil.discoverSecret(secrets, AppKeys.TEXT_PROMPT);
-        imagePrompt = aiAppUtil.discoverSecret(secrets, AppKeys.IMAGE_PROMPT);
-        imageSize = aiAppUtil.discoverSecret(secrets, AppKeys.IMAGE_SIZE);
-        listenerIndexer = aiAppUtil.discoverSecret(secrets, AppKeys.LISTENER_INDEXER);
+        rolePrompt = getFromSection(providerConfigRoot, "chat", "rolePrompt", AppKeys.ROLE_PROMPT.defaultValue);
+        textPrompt = getFromSection(providerConfigRoot, "chat", "textPrompt", AppKeys.TEXT_PROMPT.defaultValue);
+        imagePrompt = getFromSection(providerConfigRoot, "image", "imagePrompt", AppKeys.IMAGE_PROMPT.defaultValue);
+        imageSize = getFromSection(providerConfigRoot, "image", "size", AppKeys.IMAGE_SIZE.defaultValue);
+        listenerIndexer = getFromSection(providerConfigRoot, "embeddings", "listenerIndexer", AppKeys.LISTENER_INDEXER.defaultValue);
 
         configValues = secrets.entrySet().stream().collect(Collectors.toMap(Map.Entry::getKey, Map.Entry::getValue));
 
@@ -327,7 +329,7 @@ public String getProviderConfig() {
     }
 
     /**
-     * Returns the SHA-256 hex digest of the {@code providerConfig} JSON, or {@code null} if not set.
+     * Returns the SHA-256 hex digest of the {@code providerConfig} JSON, or {@code "no-config"} if not set.
      * Computed once at construction time — safe to use as a cache key on every request.
      */
     public String getProviderConfigHash() {
@@ -353,6 +355,25 @@ public boolean isEnabled() {
         return true;
     }
 
+    private static String getFromSection(final JsonNode root, final String section,
+                                         final String field, final String defaultValue) {
+        try {
+            final JsonNode sectionNode = root.get(section);
+            if (sectionNode == null || sectionNode.isNull()) {
+                return defaultValue;
+            }
+            final JsonNode fieldNode = sectionNode.get(field);
+            if (fieldNode == null || fieldNode.isNull()) {
+                return defaultValue;
+            }
+            // Container nodes (object/array) are serialized back to a JSON string (e.g. listenerIndexer)
+            final String value = fieldNode.isContainerNode() ? fieldNode.toString() : fieldNode.asText();
+            return StringUtils.isNotBlank(value) ? value : defaultValue;
+        } catch (final Exception e) {
+            return defaultValue;
+        }
+    }
+
     @com.google.common.annotations.VisibleForTesting
     static JsonNode parseProviderConfig(final String json) {
         try {