[Feat] Add @gauzy/plugin-integration-ai-ui Package

apps/gauzy/src/app/pages/integrations/integrations.module.ts

@@ -94,8 +94,8 @@ export class IntegrationsModule {
 			location: 'integrations',
 			// Register the path 'gauzy-ai'
 			path: 'gauzy-ai',
-			// Register the loadChildren function to load the GauzyAIModule lazy module
-			loadChildren: () => import('./gauzy-ai/gauzy-ai.module').then((m) => m.GauzyAIModule)
+			// Register the loadChildren function to load the IntegrationAiUiModule lazy module
+			loadChildren: () => import('@gauzy/plugin-integration-ai-ui').then((m) => m.IntegrationAiUiModule)
 		});
 
 		// Register the routes for github integration

packages/plugins/integration-ai-ui/package.json

@@ -29,6 +29,12 @@
 		"@angular/core": "^16.2.12"
 	},
 	"dependencies": {
+		"@angular/forms": "^16.2.12",
+		"@angular/router": "^16.2.12",
+		"@gauzy/contracts": "^0.1.0",
+		"@nebular/theme": "^12.0.0",
+		"@ngneat/until-destroy": "^9.2.0",
+		"@ngx-translate/core": "^15.0.0",
 		"ngx-permissions": "^13.0.1",
 		"rxjs": "^7.4.0",
 		"tslib": "^2.6.2"

apps/gauzy/src/app/pages/integrations/gauzy-ai/components/authorization/authorization.component.spec.ts → packages/plugins/integration-ai-ui/src/lib/components/authorization/authorization.component.spec.ts

@@ -1,19 +1,19 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { GauzyAIAuthorizationComponent } from './authorization.component';
+import { IntegrationAIAuthorizationComponent } from './authorization.component';
 
-describe('GauzyAIAuthorizationComponent', () => {
-	let component: GauzyAIAuthorizationComponent;
-	let fixture: ComponentFixture<GauzyAIAuthorizationComponent>;
+describe('IntegrationAIAuthorizationComponent', () => {
+	let component: IntegrationAIAuthorizationComponent;
+	let fixture: ComponentFixture<IntegrationAIAuthorizationComponent>;
 
 	beforeEach(waitForAsync(() => {
 		TestBed.configureTestingModule({
-			declarations: [GauzyAIAuthorizationComponent],
+			declarations: [IntegrationAIAuthorizationComponent],
 			teardown: { destroyAfterEach: false }
 		}).compileComponents();
 	}));
 
 	beforeEach(() => {
-		fixture = TestBed.createComponent(GauzyAIAuthorizationComponent);
+		fixture = TestBed.createComponent(IntegrationAIAuthorizationComponent);
 		component = fixture.componentInstance;
 		fixture.detectChanges();
 	});

apps/gauzy/src/app/pages/integrations/gauzy-ai/components/authorization/authorization.component.ts → packages/plugins/integration-ai-ui/src/lib/components/authorization/authorization.component.ts

@@ -15,13 +15,13 @@ import { ReplacePipe } from '@gauzy/ui-core/shared';
 	styleUrls: ['./authorization.component.scss'],
 	providers: []
 })
-export class GauzyAIAuthorizationComponent implements AfterViewInit, OnInit, OnDestroy {
+export class IntegrationAIAuthorizationComponent implements AfterViewInit, OnInit, OnDestroy {
 	public organization: IOrganization;
 
 	/**
 	 * The form property is a readonly FormGroup that is built using the buildForm static method.
 	 */
-	readonly form: UntypedFormGroup = GauzyAIAuthorizationComponent.buildForm(this._formBuilder);
+	readonly form: UntypedFormGroup = IntegrationAIAuthorizationComponent.buildForm(this._formBuilder);
 
 	/**
 	 * Static method to build the Angular FormGroup using the FormBuilder.
@@ -161,7 +161,7 @@ export class GauzyAIAuthorizationComponent implements AfterViewInit, OnInit, OnD
 				.subscribe();
 		} catch (error) {
 			// Log any errors that occur during the process
-			console.log('Error while creating new integration for Gauzy AI', error);
+			console.log('Error while creating new integration for Integration AI', error);
 		}
 	}
 

apps/gauzy/src/app/pages/integrations/gauzy-ai/components/view/view.component.html → packages/plugins/integration-ai-ui/src/lib/components/view/view.component.html

@@ -36,14 +36,14 @@ <h5>
 					<ngx-integration-setting-card
 						[title]="'INTEGRATIONS.GAUZY_AI_PAGE.CONSUMER_KEYS' | translate"
 						[items]="settings"
-						(saved)="updateIntegrationSettings($event)"
+						(saved)="updateIntegrationSettings()"
 					></ngx-integration-setting-card>
 				</ng-container>
 				<ng-container *ngIf="openAISettings$ | async as openAISettings">
 					<ngx-integration-setting-card
 						[title]="'INTEGRATIONS.GAUZY_AI_PAGE.OPEN_AI_API_KEYS' | translate"
 						[items]="openAISettings"
-						(saved)="updateIntegrationSettings($event)"
+						(saved)="updateIntegrationSettings()"
 					></ngx-integration-setting-card>
 				</ng-container>
 			</nb-tab>

apps/gauzy/src/app/pages/integrations/gauzy-ai/components/view/view.component.ts → packages/plugins/integration-ai-ui/src/lib/components/view/view.component.ts

@@ -31,7 +31,7 @@ import { SettingTitlesEnum } from '../integration-setting-card/integration-setti
 	templateUrl: './view.component.html',
 	providers: [TitleCasePipe]
 })
-export class GauzyAIViewComponent extends TranslationBaseComponent implements OnInit {
+export class IntegrationAIViewComponent extends TranslationBaseComponent implements OnInit {
 	public organization: IOrganization;
 	public organization$: Observable<IOrganization>; // Observable to hold the selected organization
 	public settings$: Observable<IIntegrationSetting[]>;

packages/plugins/integration-ai-ui/src/lib/integration-ai-ui.module.ts

@@ -1,9 +1,95 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { filter, merge } from 'rxjs';
+import {
+	NbButtonModule,
+	NbCardModule,
+	NbIconModule,
+	NbInputModule,
+	NbTabsetModule,
+	NbToggleModule,
+	NbTooltipModule
+} from '@nebular/theme';
+import { NgxPermissionsModule, NgxPermissionsService } from 'ngx-permissions';
+import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { LanguagesEnum } from '@gauzy/contracts';
+import { distinctUntilChange } from '@gauzy/ui-core/common';
+import { Store } from '@gauzy/ui-core/core';
+import { HttpLoaderFactory, I18nService } from '@gauzy/ui-core/i18n';
+import { SharedModule, WorkInProgressModule, getBrowserLanguage } from '@gauzy/ui-core/shared';
+import { IntegrationAiRoutes } from './integration-ai.routes';
+import { IntegrationAILayoutComponent } from './integration-ai.layout.component';
+import { IntegrationAIAuthorizationComponent } from './components/authorization/authorization.component';
+import { IntegrationAIViewComponent } from './components/view/view.component';
+import { IntegrationSettingCardComponent } from './components/integration-setting-card/integration-setting-card.component';
 
 @NgModule({
-	declarations: [],
-	imports: [CommonModule],
-	exports: []
+	declarations: [
+		IntegrationAILayoutComponent,
+		IntegrationAIAuthorizationComponent,
+		IntegrationAIViewComponent,
+		IntegrationSettingCardComponent
+	],
+	imports: [
+		NbButtonModule,
+		NbCardModule,
+		NbIconModule,
+		NbInputModule,
+		NbTabsetModule,
+		NbToggleModule,
+		NbToggleModule,
+		NbTooltipModule,
+		NgxPermissionsModule.forRoot(),
+		TranslateModule.forRoot({
+			defaultLanguage: getBrowserLanguage(), // Get the browser language and fall back to a default if needed
+			loader: {
+				provide: TranslateLoader,
+				useFactory: HttpLoaderFactory,
+				deps: [HttpClient]
+			}
+		}),
+		IntegrationAiRoutes,
+		WorkInProgressModule,
+		SharedModule
+	]
 })
-export class IntegrationAiUiModule {}
+@UntilDestroy()
+export class IntegrationAiUiModule {
+	constructor(
+		readonly _translateService: TranslateService,
+		readonly _ngxPermissionsService: NgxPermissionsService,
+		readonly _store: Store,
+		readonly _i18nService: I18nService
+	) {
+		this.initializeUiPermissions(); // Initialize UI permissions
+		this.initializeUiLanguagesAndLocale(); // Initialize UI languages and Update Locale
+	}
+
+	/**
+	 * Initialize UI permissions
+	 */
+	private initializeUiPermissions() {
+		// Load permissions
+		const permissions = this._store.userRolePermissions.map(({ permission }) => permission);
+		this._ngxPermissionsService.flushPermissions(); // Flush permissions
+		this._ngxPermissionsService.loadPermissions(permissions); // Load permissions
+	}
+
+	/**
+	 * Initialize UI languages and Update Locale
+	 */
+	private initializeUiLanguagesAndLocale() {
+		// Observable that emits when preferred language changes.
+		const preferredLanguage$ = merge(this._store.preferredLanguage$, this._i18nService.preferredLanguage$).pipe(
+			distinctUntilChange(),
+			filter((lang: LanguagesEnum) => !!lang),
+			untilDestroyed(this)
+		);
+
+		// Subscribe to preferred language changes
+		preferredLanguage$.subscribe((lang: string | LanguagesEnum) => {
+			this._translateService.use(lang);
+		});
+	}
+}

packages/plugins/integration-ai-ui/src/lib/integration-ai.layout.component.ts

@@ -0,0 +1,8 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	template: ` <router-outlet></router-outlet> `
+})
+export class IntegrationAILayoutComponent implements OnInit {
+	ngOnInit() {}
+}