UI: Add baseUrl for openAI provider

This commit is contained in:
ArtemDzhereleiko 2025-09-30 09:47:30 +03:00
parent e688a8af0f
commit 22dc482b9e
4 changed files with 38 additions and 14 deletions

View File

@ -116,14 +116,24 @@
<input matInput formControlName="serviceVersion">
</mat-form-field>
}
@if (providerFieldsList.includes('baseUrl')) {
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.baseurl</mat-label>
<input required matInput formControlName="baseUrl">
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.baseUrl').hasError('required') ||
aiModelForms.get('configuration.providerConfig.baseUrl').hasError('pattern')">
{{ 'ai-models.baseurl-required' | translate }}
</mat-error>
</mat-form-field>
}
@if (providerFieldsList.includes('apiKey')) {
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.api-key</mat-label>
<input type="password" required matInput formControlName="apiKey" autocomplete="new-password">
<input type="password" matInput formControlName="apiKey" autocomplete="new-password">
<tb-toggle-password matSuffix></tb-toggle-password>
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.apiKey').hasError('required') ||
aiModelForms.get('configuration.providerConfig.apiKey').hasError('pattern')">
{{ 'ai-models.api-key-required' | translate }}
{{ ( provider === aiProvider.OPENAI ? 'ai-models.api-key-open-ai-required' : 'ai-models.api-key-required') | translate }}
</mat-error>
</mat-form-field>
}
@ -158,16 +168,6 @@
</mat-error>
</mat-form-field>
}
@if (providerFieldsList.includes('baseUrl')) {
<mat-form-field class="mat-block flex-1" appearance="outline">
<mat-label translate>ai-models.baseurl</mat-label>
<input required matInput formControlName="baseUrl">
<mat-error *ngIf="aiModelForms.get('configuration.providerConfig.baseUrl').hasError('required') ||
aiModelForms.get('configuration.providerConfig.baseUrl').hasError('pattern')">
{{ 'ai-models.baseurl-required' | translate }}
</mat-error>
</mat-form-field>
}
@if (provider === aiProvider.OLLAMA) {
<div class="tb-form-panel stroked no-gap no-padding-bottom mb-4" formGroupName="auth">
<div class="flex flex-row items-center justify-between xs:flex-col xs:items-start xs:gap-3">

View File

@ -74,6 +74,8 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
authenticationHint: string;
private readonly openAiDefaultBaseUrl = 'https://api.openai.com/v1';
constructor(protected store: Store<AppState>,
protected router: Router,
protected dialogRef: MatDialogRef<AIModelDialogComponent, AiModel>,
@ -107,7 +109,7 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
region: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.region : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
accessKeyId: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.accessKeyId : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
secretAccessKey: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.secretAccessKey : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
baseUrl: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.baseUrl : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
baseUrl: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.baseUrl : this.openAiDefaultBaseUrl, [Validators.required, Validators.pattern(/.*\S.*/)]],
auth: this.fb.group({
type: [this.data.AIModel?.configuration?.providerConfig?.auth?.type ?? AuthenticationType.NONE],
username: [this.data.AIModel?.configuration?.providerConfig?.auth?.username ?? '', [Validators.required, Validators.pattern(/.*\S.*/)]],
@ -133,6 +135,18 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
this.aiModelForms.get('configuration.modelId').reset('');
this.aiModelForms.get('configuration.providerConfig').reset({});
this.updateValidation(provider);
if (provider === AiProvider.OPENAI) {
this.aiModelForms.get('configuration.providerConfig.baseUrl').patchValue(this.openAiDefaultBaseUrl, {emitEvent: false});
this.updateApiKeyValidatorForOpenAIProvider(this.openAiDefaultBaseUrl);
}
});
this.aiModelForms.get('configuration.providerConfig.baseUrl').valueChanges.pipe(
takeUntilDestroyed()
).subscribe((url: string) => {
if (this.provider === AiProvider.OPENAI) {
this.updateApiKeyValidatorForOpenAIProvider(url);
}
});
this.aiModelForms.get('configuration.providerConfig.auth.type').valueChanges.pipe(
@ -161,6 +175,15 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
);
}
private updateApiKeyValidatorForOpenAIProvider(url: string) {
if (url !== this.openAiDefaultBaseUrl) {
this.aiModelForms.get('configuration.providerConfig.apiKey').removeValidators(Validators.required);
} else {
this.aiModelForms.get('configuration.providerConfig.apiKey').addValidators(Validators.required);
}
this.aiModelForms.get('configuration.providerConfig.apiKey').updateValueAndValidity({emitEvent: false});
}
private getAuthenticationHint(type: AuthenticationType) {
if (type === AuthenticationType.BASIC) {
this.authenticationHint = this.translate.instant('ai-models.authentication-basic-hint');

View File

@ -116,7 +116,7 @@ export const AiModelMap = new Map<AiProvider, { modelList: string[], providerFie
'gpt-4o',
'gpt-4o-mini',
],
providerFieldsList: ['apiKey'],
providerFieldsList: ['baseUrl', 'apiKey'],
modelFieldsList: ['temperature', 'topP', 'frequencyPenalty', 'presencePenalty', 'maxOutputTokens'],
},
],

View File

@ -1120,6 +1120,7 @@
"provider": "Provider",
"api-key": "API key",
"api-key-required": "API key is required.",
"api-key-open-ai-required": "API key is required when using the official OpenAI API.",
"project-id": "Project ID",
"project-id-required": "Project ID is required",
"location": "Location",