ngx-t-forms 2.0.24 → 2.0.26

package/fesm2022/ngx-t-forms-pipeline-generator.component-QE-I58e4.mjs

@@ -0,0 +1,637 @@
+import * as i2$4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component, inject, Injectable, ElementRef, ViewChild, HostBinding, Optional, Self } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Subscription, BehaviorSubject, switchMap, map, take, catchError, finalize, throwError, tap, combineLatest, filter, Subject, takeUntil, distinctUntilChanged } from 'rxjs';
+import PipelineBuilder from 'db-aggregation-pipeline-builder';
+import { M as MatModulesModule, J as JsonEditorComponent, N as NGX_T_FORMS_CONFIG_TOKEN, b as TDynamicDataViewComponent, D as DaysAgoPipe } from './ngx-t-forms-ngx-t-forms-CD9InaXz.mjs';
+import * as i2 from '@angular/material/autocomplete';
+import * as i2$1 from '@angular/material/button';
+import * as i3 from '@angular/material/card';
+import * as i4 from '@angular/material/divider';
+import * as i2$2 from '@angular/material/icon';
+import * as i2$3 from '@angular/material/select';
+import * as i8 from '@angular/material/tooltip';
+import { TWorkflowPickerComponent } from './ngx-t-forms-t-workflow-picker.component-xvX8t0pu.mjs';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { HttpClient } from '@angular/common/http';
+import * as i10$1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i5 from '@angular/material/expansion';
+import * as i7 from '@angular/material/list';
+import * as i3$1 from '@angular/material/progress-spinner';
+import * as i10 from '@angular/material/toolbar';
+
+class AggregateStageEditorComponent {
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    constructor() {
+        this.subscription = new Subscription();
+        this.isRunningPipeline = false;
+        this.saveStage = new EventEmitter();
+        this.deleteStage = new EventEmitter();
+        this.activeStage = undefined; // Define the type appropriately if possible
+        this.allowedStages = [];
+    }
+    ngOnInit() {
+        // Debounce the config change to optimize performance
+        this.allowedStages = PipelineBuilder.getViewOnlyStages();
+    }
+    handleChange(event) {
+        const selectedStage = event.value;
+        if (this.activeStage === undefined) {
+            this.activeStage = {
+                stage: selectedStage,
+                ...this.selectedStage || {},
+            };
+        }
+        else {
+            this.activeStage = {
+                config: this.activeStage?.config || this.selectedStage?.config,
+                stage: selectedStage
+            };
+        }
+        { }
+        if (this.activeStage?.config && !!this.activeStage?.stage) {
+            this.validateConfig();
+        }
+    }
+    handleConfigChange(event) {
+        if (!this.activeStage) {
+            this.activeStage = {
+                ...this.selectedStage || {},
+            };
+        }
+        this.activeStage = {
+            stage: this.activeStage?.stage || this.selectedStage?.name,
+            config: event.value
+        };
+        this.validateConfig();
+    }
+    validateConfig() {
+        this.configValidationError = undefined;
+        const { config, stage } = this.activeStage || {};
+        // Check if config and stage are defined
+        if (!config && config !== 0 || !stage) {
+            console.error('Config or stage is not defined', config, stage);
+            this.activeStage.valid = false;
+            return; // Early exit if validation fails
+        }
+        try {
+            const valid = PipelineBuilder.validateStageConfig(stage, config);
+            this.activeStage.valid = valid;
+            // Set error message if config is invalid
+            if (!valid) {
+                this.configValidationError = undefined;
+                return;
+            }
+        }
+        catch (error) {
+            // Catch and handle errors from validation
+            this.configValidationError = error.message || JSON.stringify(error) || 'An unknown error occurred';
+            this.activeStage.valid = false;
+            console.error('Validation Error:', this.configValidationError);
+        }
+    }
+    canSaveConfig() {
+        return !!this.activeStage && !this.configValidationError;
+    }
+    saveConfiguration() {
+        // Logic for saving the configuration
+        if (this.canSaveConfig()) {
+            this.saveStage.emit(this.activeStage);
+        }
+    }
+    trackByStage(index, stage) {
+        return stage.stage;
+    }
+    get allowedStageNames() {
+        return this.allowedStages.map(stage => stage.stage);
+    }
+    get activeDescription() {
+        return this.allowedStages.find(stage => stage.stage === this.activeStage?.stage)?.description;
+    }
+    deleteActive() {
+        this.deleteStage.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AggregateStageEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AggregateStageEditorComponent, isStandalone: true, selector: "app-aggregate-stage-editor", inputs: { selectedStage: "selectedStage", isRunningPipeline: "isRunningPipeline" }, outputs: { saveStage: "saveStage", deleteStage: "deleteStage" }, ngImport: i0, template: "<mat-card style=\"margin-bottom:8px\">\n  <mat-card-content>\n\n    <h5>\n      Aggregate Pipeline Stage Configuration\n    </h5>\n\n\n\n    <mat-form-field style=\"  margin-bottom: 8px;\" appearance=\"outline\" subscriptSizing=\"dynamic\" >\n      <mat-label>Select Aggregate Stage</mat-label>\n      <mat-select matNativeControl [value]=\"selectedStage?.name\" (selectionChange)=\"handleChange($event)\"\n        placeholder=\"ChooseFunctionToRun\">\n        <mat-option *ngFor=\"let stage of allowedStages; trackBy: trackByStage\" [value]=\"stage.stage\">\n          {{stage.stage}}</mat-option>\n\n\n\n      </mat-select>\n      <mat-hint>\n        {{activeDescription ?\n        'Hover over the info icon to view stage details .'\n        : 'Please select an aggregation function from the list.'}}\n      </mat-hint>\n      <mat-hint *ngIf=\"activeDescription\" align=\"end\">\n        <mat-icon matTooltipHideDelay=\"1000\" [matTooltip]=\"activeDescription\" matSuffix>info</mat-icon>\n      </mat-hint>\n    </mat-form-field>\n\n\n\n    <div class=\"tree-instructions\" style=\"background: cornsilk;\" *ngIf=\"configValidationError\">\n      <mat-icon style=\"margin-top: 4px;margin-bottom:auto\" class=\"info-icon\" color=\"warn\">warning</mat-icon>\n      <span>{{ configValidationError }}</span>\n    </div>\n\n\n\n\n\n    <div class=\"config-container\" *ngIf=\"activeStage ||selectedStage?.config\">\n      <app-json-editor [value]=\"selectedStage?.config\" (valueChange)=\"handleConfigChange($event)\"></app-json-editor>\n    </div>\n\n    <br>\n\n\n\n  </mat-card-content>\n  <mat-divider>\n  </mat-divider>\n  <mat-card-actions>\n\n    <span class=\"spacer\"></span>\n    <button  color=\"warn\" [disabled]=\"isRunningPipeline\" mat-button (click)=\"deleteActive()\">\n      Delete\n      <mat-icon >delete</mat-icon>\n    </button>\n    <button style=\"margin-left:8px;\" color=\"primary\" mat-flat-button (click)=\"saveConfiguration()\"\n      [disabled]=\"isRunningPipeline ||!activeStage?.valid \">\n      Save\n      <mat-icon> save</mat-icon>\n    </button>\n  </mat-card-actions>\n</mat-card>", styles: [".title-icon{margin-right:8px;vertical-align:middle}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px!important;display:block}mat-form-field{min-width:100%;background:azure}.stageDescription{background:azure}.stage-button-container{display:flex;gap:4px;width:fit-content;align-items:center}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px;margin:8px auto auto}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: JsonEditorComponent, selector: "app-json-editor", inputs: ["value"], outputs: ["valueChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AggregateStageEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-aggregate-stage-editor', standalone: true, imports: [
+                        MatModulesModule,
+                        CommonModule,
+                        FormsModule,
+                        JsonEditorComponent
+                    ], template: "<mat-card style=\"margin-bottom:8px\">\n  <mat-card-content>\n\n    <h5>\n      Aggregate Pipeline Stage Configuration\n    </h5>\n\n\n\n    <mat-form-field style=\"  margin-bottom: 8px;\" appearance=\"outline\" subscriptSizing=\"dynamic\" >\n      <mat-label>Select Aggregate Stage</mat-label>\n      <mat-select matNativeControl [value]=\"selectedStage?.name\" (selectionChange)=\"handleChange($event)\"\n        placeholder=\"ChooseFunctionToRun\">\n        <mat-option *ngFor=\"let stage of allowedStages; trackBy: trackByStage\" [value]=\"stage.stage\">\n          {{stage.stage}}</mat-option>\n\n\n\n      </mat-select>\n      <mat-hint>\n        {{activeDescription ?\n        'Hover over the info icon to view stage details .'\n        : 'Please select an aggregation function from the list.'}}\n      </mat-hint>\n      <mat-hint *ngIf=\"activeDescription\" align=\"end\">\n        <mat-icon matTooltipHideDelay=\"1000\" [matTooltip]=\"activeDescription\" matSuffix>info</mat-icon>\n      </mat-hint>\n    </mat-form-field>\n\n\n\n    <div class=\"tree-instructions\" style=\"background: cornsilk;\" *ngIf=\"configValidationError\">\n      <mat-icon style=\"margin-top: 4px;margin-bottom:auto\" class=\"info-icon\" color=\"warn\">warning</mat-icon>\n      <span>{{ configValidationError }}</span>\n    </div>\n\n\n\n\n\n    <div class=\"config-container\" *ngIf=\"activeStage ||selectedStage?.config\">\n      <app-json-editor [value]=\"selectedStage?.config\" (valueChange)=\"handleConfigChange($event)\"></app-json-editor>\n    </div>\n\n    <br>\n\n\n\n  </mat-card-content>\n  <mat-divider>\n  </mat-divider>\n  <mat-card-actions>\n\n    <span class=\"spacer\"></span>\n    <button  color=\"warn\" [disabled]=\"isRunningPipeline\" mat-button (click)=\"deleteActive()\">\n      Delete\n      <mat-icon >delete</mat-icon>\n    </button>\n    <button style=\"margin-left:8px;\" color=\"primary\" mat-flat-button (click)=\"saveConfiguration()\"\n      [disabled]=\"isRunningPipeline ||!activeStage?.valid \">\n      Save\n      <mat-icon> save</mat-icon>\n    </button>\n  </mat-card-actions>\n</mat-card>", styles: [".title-icon{margin-right:8px;vertical-align:middle}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px!important;display:block}mat-form-field{min-width:100%;background:azure}.stageDescription{background:azure}.stage-button-container{display:flex;gap:4px;width:fit-content;align-items:center}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px;margin:8px auto auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedStage: [{
+                type: Input
+            }], isRunningPipeline: [{
+                type: Input
+            }], saveStage: [{
+                type: Output
+            }], deleteStage: [{
+                type: Output
+            }] } });
+
+class PipelineService {
+    constructor() {
+        //LOADING INDICATORS
+        this.isRunningPipeline = false;
+        this.aiIsGeneratingPipeline = false;
+        this.isLoadingAllowedStages = false;
+        this.isLoadingWorkflowSchema = false;
+        //States 
+        this.workflowId$ = new BehaviorSubject(undefined);
+        this.activeStage$ = new BehaviorSubject(undefined);
+        this.prompt$ = new BehaviorSubject(undefined);
+        this.schemaLoadError$ = new BehaviorSubject(undefined);
+        this.pipeline$ = new BehaviorSubject([]);
+        this.threadId$ = new BehaviorSubject(undefined);
+        this.schema$ = new BehaviorSubject(undefined);
+        this.allowedStages$ = new BehaviorSubject([]);
+        this.pipeLineResult$ = new BehaviorSubject([]);
+        this.chatHistory$ = new BehaviorSubject([]);
+        this.http = inject(HttpClient);
+        //Set local storage threadId
+        const threadId = localStorage.getItem('threadId');
+        if (threadId) {
+            this.threadId$.next(threadId);
+        }
+    }
+    get config$() {
+        return this.workflowId$.pipe(switchMap(workflowId => this.pipeline$.pipe(switchMap(pipeline => this.pipeLineResult$.pipe(map(responseBody => ({ workflowId, pipeline, responseBody })))))));
+    }
+    /**
+     * Fetch available pipeline stages for the user to select and generate pipelines.
+     * Ideally, this could be static or fetched from a backend.
+     */
+    runPipeLine(pipeline, workflowId) {
+        const url = "http://localhost:5000/api/v1/pipelineBuilder/runPipeline";
+        // For now, returning a static list of pipeline stages. In a real application, you can fetch from an API.
+        this.isRunningPipeline = true;
+        return this.http.post(url, { pipeline, workflowId }).pipe(take(1), catchError(this.handleError), // Error handling for the HTTP request,
+        finalize(() => this.isRunningPipeline = false));
+    }
+    /**
+     * Generate a MongoDB pipeline based on the given user prompt.
+     *
+     * @param prompt The user's input or description of the desired pipeline.
+     */
+    generatePipeline(query, schema, threadId, existingPipeline, previousError) {
+        if (!schema) {
+            throw new Error("Schema is required");
+        }
+        const payload = { query, schema, threadId, existingPipeline, previousError };
+        const url = "http://localhost:5000/api/v1/pipelineBuilder/generatePipeline";
+        this.aiIsGeneratingPipeline = true;
+        return this.http.post(`${url}`, payload)
+            .pipe(take(1), catchError(this.handleError), // Error handling for the HTTP request,
+        finalize(() => this.aiIsGeneratingPipeline = false));
+    }
+    /**
+     * Handle any errors from the HTTP request.
+     *
+     * @param error The error response from the HTTP request
+     */
+    handleError(error) {
+        console.error('An error occurred', error);
+        // Return an observable with a user-facing error message
+        return throwError(() => new Error('Something went wrong with the pipeline generation; please try again later.'));
+    }
+    getSchema(workflowId) {
+        if (!workflowId) {
+            throw new Error("WorkflowId is required");
+        }
+        const url = "http://localhost:5000/api/v1/pipelineBuilder/getSchema";
+        return this.http.get(`${url}`, { params: { workflowId: workflowId } }).pipe(take(1), catchError(this.handleError) // Error handling for the HTTP request
+        );
+    }
+    /** OPERATIONS */
+    isSchemaEmpty(object) {
+    }
+    workflowChanged(event) {
+        this.workflowId$.next(event);
+        if (!event) {
+            return;
+        }
+        this.getSchema(event).pipe(take(1), tap(({ schema }) => {
+            this.schema$.next(schema);
+            const isEmptySchema = Object.keys(schema)[0] === "" && Object.values(schema)[0] === "Array<>";
+            const error = isEmptySchema
+                ? "Document schema is missing. Please ensure at least one document exists for the selected workflow."
+                : undefined;
+            this.schemaLoadError$.next(error);
+            console.log("Workflow schema loaded,run pipeline");
+            this.runActivePipeline();
+        }), catchError((error) => {
+            this.schemaLoadError$.next("Error loading schema");
+            return this.handleError(error);
+        })).subscribe();
+    }
+    setActiveStage(i) {
+        const index = this.activeStage$.getValue();
+        if (index === i) {
+            this.activeStage$.next(undefined);
+            return;
+        }
+        this.activeStage$.next(i);
+    }
+    addStage() {
+        const newPipeline = this.pipeline$.getValue().concat({});
+        this.pipeline$.next(newPipeline);
+    }
+    onTextChange(event) {
+        this.prompt$.next(event);
+        console.log(event);
+    }
+    promptSubmit() {
+        // Use combineLatest to fetch the latest values from multiple sources
+        combineLatest([this.schema$, this.threadId$, this.pipeline$, this.prompt$, this.chatHistory$])
+            .pipe(take(1), tap(([schema, threadId, pipeline, prompt, history]) => {
+            if (!schema || !prompt) {
+                console.warn(`Missing values: schema ${schema} prompt ${prompt}`);
+            }
+        }), filter(([schema, , , prompt]) => !!schema && !!prompt), switchMap(([schema, threadId, pipeline, prompt, history]) => {
+            // Use a shallow copy of the pipeline
+            const previousError = history[history.length - 1]?.assistance?.error;
+            const pipelineCopy = pipeline.map(stage => JSON.parse(JSON.stringify(stage))) || [];
+            console.info('Generating pipeline with prompt:', prompt, 'schema:', schema, 'threadId:', threadId, 'pipeline:', pipeline);
+            return this.generatePipeline(prompt, schema, threadId, pipelineCopy, previousError).pipe(map((response) => ({ ...response, history, prompt })));
+        }), tap((response) => {
+            const { pipeline, threadId, history, prompt } = response;
+            const historyRecord = {
+                user: prompt,
+                assistance: response,
+                date: new Date()
+            };
+            // Use next with a concatenated value for chat history
+            this.chatHistory$.next([...(history || []), historyRecord]);
+            this.pipeline$.next(pipeline);
+            this.threadId$.next(threadId);
+            // Store threadID locally
+            localStorage.setItem('threadId', threadId);
+            // Run the active pipeline after all state updates are complete
+            console.log("prompt submitted run pipeline");
+            this.runActivePipeline();
+        }), catchError((error) => {
+            console.error('Error response:', error.message || error);
+            return this.handleError(error);
+        })).subscribe();
+    }
+    runActivePipeline() {
+        const pipeline = [...(this.pipeline$.getValue().map(stage => (JSON.parse(JSON.stringify(stage)))) || [])];
+        const someAreNotValid = pipeline.some(stage => Object.keys(stage).length === 0);
+        if (pipeline.length === 0 || someAreNotValid) {
+            return;
+        }
+        try {
+            PipelineBuilder.validatePipeline(pipeline);
+        }
+        catch (error) {
+            console.error(error, pipeline);
+            return;
+        }
+        const workflowId = this.workflowId$.getValue();
+        if (!workflowId) {
+            return;
+        }
+        this.runPipeLine(pipeline, workflowId).pipe(take(1), tap(({ results }) => {
+            this.pipeLineResult$.next(results);
+        }), catchError((error) => {
+            console.error('Error response:', error);
+            const err = JSON.parse(JSON.stringify(error));
+            const errorMessage = err.error;
+            if (errorMessage) {
+                this.pipelineErrorLogAndRetry(errorMessage);
+            }
+            return this.handleError(error);
+        })).subscribe();
+    }
+    pipelineErrorLogAndRetry(message) {
+        const history = this.chatHistory$.getValue();
+        const prompt = this.prompt$.getValue();
+        const historyRecord = {
+            user: prompt,
+            assistance: {
+                message
+            },
+            date: new Date()
+        };
+        this.chatHistory$.next([...(history || []), historyRecord]);
+    }
+    get activeStage() {
+        return this.pipeline$.asObservable().pipe(switchMap(pipeline => this.activeStage$.pipe(map(activeIndex => activeIndex === undefined ? undefined : {
+            name: Object.keys(pipeline[activeIndex] || {})[0] || '',
+            config: pipeline[activeIndex][Object.keys(pipeline[activeIndex] || {})?.[0] || '']
+        }))));
+    }
+    saveStage(index, stage) {
+        const pipeline = this.pipeline$.getValue();
+        if (index === undefined) {
+            return;
+        }
+        const newPipeline = pipeline.map((s, i) => {
+            if (i === index) {
+                return stage ? {
+                    [stage.stage]: stage.config
+                } : s;
+            }
+            return s;
+        });
+        console.log("newPipeline", newPipeline);
+        this.pipeline$.next(newPipeline);
+        this.activeStage$.next(undefined);
+        console.log("stage saved run pipeline");
+        this.runActivePipeline();
+    }
+    deleteStage(index) {
+        const pipeline = this.pipeline$.getValue();
+        if (index === undefined) {
+            return;
+        }
+        const newPipeline = pipeline.filter((s, i) => i !== index);
+        console.log("newPipeline", newPipeline);
+        this.pipeline$.next(newPipeline);
+        this.activeStage$.next(undefined);
+        console.log("stage deleted run pipeline");
+        this.runActivePipeline();
+    }
+    get pipelineGeneralValid() {
+        return this.pipeline$.asObservable().pipe(map(pipeline => {
+            const allHaveTypes = pipeline.every(stage => Object.keys(stage).length === 1);
+            if (!allHaveTypes) {
+                return {
+                    valid: false,
+                    message: "All stages must be a valid pipeline stage"
+                };
+            }
+            const AllStagesMustHaveConfig = pipeline.every((stage) => stage[Object.keys(stage)?.[0] || ''] !== undefined);
+            if (!AllStagesMustHaveConfig) {
+                return {
+                    valid: false,
+                    message: "All stages must have a configuration"
+                };
+            }
+            return {
+                valid: true
+            };
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PipelineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PipelineService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PipelineService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class PipelineGeneratorComponent {
+    static { this.nextId = 0; }
+    constructor(ngControl, _elementRef) {
+        this.ngControl = ngControl;
+        this._elementRef = _elementRef;
+        this.stateChanges = new Subject();
+        this.NGX_T_FORMS_CONFIG = inject(NGX_T_FORMS_CONFIG_TOKEN);
+        this.id = `app-pipeline-generator-${PipelineGeneratorComponent.nextId++}`;
+        this.placeholder = '';
+        this.focused = false;
+        this.required = false;
+        this.disabled = false;
+        this.touched = false;
+        this.onTouched = () => { };
+        this.valueChanged = new EventEmitter();
+        this.errors = [];
+        this.destroy$ = new Subject();
+        this.pipeline = new PipelineService();
+        this.initiated = false;
+        this.initiateSubscription = () => {
+            this.pipeline.config$.pipe(takeUntil(this.destroy$), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))).subscribe(config => {
+                if (!this.initiated) {
+                    this.initiated = true;
+                    return;
+                }
+                const newConfig = {
+                    ...this._value,
+                    ...config,
+                    name: this._workflowName || 'Unnamed Pipeline',
+                    "source": "mongoPipeline",
+                };
+                console.log('Pipeline config changed', newConfig);
+                this.valueChanged.emit(newConfig);
+            });
+        };
+        this.cursorPosition = 0;
+        this.showSuggestions = false;
+        this.optionsSearch = '';
+        this.trackById = (index, stage) => index;
+    }
+    get empty() {
+        return !this.value;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get errorState() {
+        const hasError = !!this.ngControl?.control?.errors || (this.errors || []).length > 0 && this.touched;
+        return !this.value && !!this.required || hasError;
+    }
+    setDescribedByIds(ids) {
+        // Ensure the component view is initialized
+        if (this._elementRef && this._elementRef.nativeElement) {
+            const controlElement = this._elementRef.nativeElement.querySelector('.app-pipeline-generator');
+            // Check if the controlElement exists before attempting to set its attribute
+            if (controlElement) {
+                controlElement.setAttribute('aria-describedby', ids.join(' '));
+            }
+        }
+    }
+    onContainerClick(event) {
+        this.markAsTouched();
+        this.stateChanges.next();
+    }
+    markAsTouched() {
+        console.log('markAsTouched');
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    set value(value) {
+        const workflowIdChanged = this._value?.workflowId !== value?.workflowId;
+        const pipelineLengthChanged = this._value?.pipeline?.length !== value?.pipeline?.length;
+        const pipeLineContentChanged = JSON.stringify(this._value?.pipeline) !== JSON.stringify(value?.pipeline);
+        if (workflowIdChanged || pipelineLengthChanged || pipeLineContentChanged) {
+            this._value = value;
+            if (value?.workflowId) {
+                this.workflowChanged(value?.workflowId);
+            }
+            console.log('Pipeline value changed', value, this.pipeline.pipeline$.value);
+            if (value?.pipeline) {
+                this.pipeline.pipeline$.next(value?.pipeline || []);
+            }
+        }
+    }
+    set getWorkflowOptions(options$) {
+        this.workflows$ = options$;
+    }
+    ngOnInit() {
+        this.initiateSubscription();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    workflowChanged(event) {
+        this.pipeline.workflowChanged(event);
+    }
+    workflowNameChanged(event) {
+        this._workflowName = event;
+    }
+    get workflowId() {
+        return this.pipeline.workflowId$.asObservable();
+    }
+    get stages() {
+        return this.pipeline.pipeline$.asObservable().pipe(map(stages => stages.map(stage => ({
+            name: Object.keys(stage)[0],
+            stage: Object.keys(stage)[0],
+            config: stage[Object.keys(stage)?.[0] || ''],
+            valid: !!Object.keys(stage)[0] && !!stage[Object.keys(stage)?.[0] || '']
+        }))));
+    }
+    get pipeLineResults() {
+        return this.pipeline.pipeLineResult$.asObservable();
+    }
+    get prompt() {
+        return this.pipeline.prompt$.asObservable();
+    }
+    get aiIsGeneratingPipeline() {
+        return this.pipeline.aiIsGeneratingPipeline;
+    }
+    get activeStageIndex() {
+        return this.pipeline.activeStage$.asObservable();
+    }
+    get activeStage() {
+        console.log(this.pipeline.activeStage);
+        return this.pipeline.activeStage;
+    }
+    get isRunningPipeline() {
+        return this.pipeline.isRunningPipeline;
+    }
+    get cannotAddStage() {
+        return this.pipeline.pipelineGeneralValid.pipe(map(valid => !valid));
+    }
+    get schemaLoadError$() {
+        return this.pipeline.schemaLoadError$.asObservable();
+    }
+    get chatHistory() {
+        return this.pipeline.chatHistory$.asObservable();
+    }
+    onTextChange(event) {
+        if (!this.textareaElementRef?.nativeElement) {
+            return;
+        }
+        console.log('onTextChange', event);
+        const newValue = event.target.value;
+        const textarea = this.textareaElementRef.nativeElement;
+        this.cursorPosition = textarea.selectionStart || 0;
+        const lastChar = newValue[this.cursorPosition - 1];
+        const match = newValue.slice(0, this.cursorPosition).match(/\$(\w*)$/);
+        if (lastChar === '$' || (match && match[1] !== undefined)) {
+            this.showSuggestions = true;
+            this.optionsSearch = match ? match?.[1] || '' : '';
+        }
+        else {
+            this.showSuggestions = false;
+            this.optionsSearch = '';
+        }
+        this.pipeline.onTextChange(newValue);
+    }
+    selectSuggestionInput(suggestion) {
+        this.pipeline.prompt$.asObservable().pipe(take(1), tap(prompt => {
+            const match = prompt?.slice(0, this.cursorPosition).match(/\$(\w*)$/);
+            const beforeCursor = prompt?.slice(0, match ? match.index : this.cursorPosition - 1);
+            const afterCursor = prompt?.slice(this.cursorPosition);
+            prompt = beforeCursor + suggestion + ' ' + afterCursor;
+            this.pipeline.prompt$.next(prompt);
+            this.applyNewValueToPrompt(suggestion);
+        })).subscribe();
+    }
+    applyNewValueToPrompt(suggestion) {
+        this.showSuggestions = false;
+        const textarea = this.textareaElementRef.nativeElement;
+        textarea.focus();
+        const newCursorPosition = this.cursorPosition + suggestion.length;
+        setTimeout(() => {
+            textarea.setSelectionRange(newCursorPosition, newCursorPosition);
+        }, 0);
+    }
+    onSearchChange(event) {
+        this.optionsSearch = event.detail.value;
+    }
+    promptSubmit() {
+        this.pipeline.promptSubmit();
+        console.log('promptSubmit');
+    }
+    setActiveStage(index) {
+        this.pipeline.setActiveStage(index);
+    }
+    addStage() {
+        this.pipeline.addStage();
+    }
+    get getSchemaProperties() {
+        return this.pipeline.schema$.asObservable().pipe(map(schema => Object.keys(schema || {}).map(key => ({ label: key, value: key, })).filter(key => this.optionsSearch ? key.label.toLowerCase().includes(this.optionsSearch.toLowerCase()) : true)));
+    }
+    deleteStage(index) {
+        this.pipeline.deleteStage(index);
+    }
+    saveStage(index, stage) {
+        this.pipeline.saveStage(index, stage);
+        this.setActiveStage(undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PipelineGeneratorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: PipelineGeneratorComponent, isStandalone: true, selector: "app-pipeline-generator", inputs: { disabled: "disabled", value: "value", getWorkflowOptions: "getWorkflowOptions", userName: "userName", errors: "errors" }, outputs: { valueChanged: "valueChanged" }, host: { properties: { "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: PipelineGeneratorComponent }], viewQueries: [{ propertyName: "textareaElementRef", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], ngImport: i0, template: "\r\n\r\n\r\n<section class=\"ion-margin\">\r\n  <p>MongoDB aggregation pipeline builder for selected workflows. </p>\r\n</section>\r\n<lib-t-workflow-picker \r\n(valueChanged)=\"workflowChanged($event)\"\r\n(workflowNameChanged)=\"workflowNameChanged($event)\" \r\n[getWorkflowOptions]=\" workflows$\"\r\n  [value]=\"(workflowId|async)||undefined\">\r\n</lib-t-workflow-picker>\r\n<mat-accordion multi *ngIf=\"workflowId|async\">\r\n  <!-- Pipeline Accordion -->\r\n  <mat-expansion-panel value=\"pipeline\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <mat-spinner color=\"accent\" *ngIf=\"isRunningPipeline\" class=\"header-spinner\"></mat-spinner>\r\n        <mat-icon class=\"title-icon\">\r\n          dynamic_form\r\n        </mat-icon>\r\n        {{isRunningPipeline?'Executing current Data pipeline...':'Data retrieval pipeline'}}\r\n      </mat-panel-title>\r\n\r\n    </mat-expansion-panel-header>\r\n    <div class=\"content\">\r\n      <!-- Mongodb aggregate pipelione stages management  and edit start-->\r\n      <div *ngIf=\"((stages | async)?.length || 0) ===0\" class=\"tree-instructions\">\r\n        <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n        <span>\r\n          Add stages to the pipeline below.<br>\r\n          Each stage processes input documents by filtering, grouping, or calculating values. The output documents from\r\n          one stage are passed to the next stage in the pipeline.\r\n        </span>\r\n      </div>\r\n\r\n      <mat-nav-list style=\"    background: var(--mat-tree-container-background-color);padding:0px;border-radius:8px\">\r\n\r\n\r\n        <ng-container *ngFor=\"let stage of stages | async; trackBy: trackById;index as $index;last as isLast\">\r\n          <mat-list-item [style.margin-top]=\"(activeStageIndex|async) ===$index?'4px':'0px'\"\r\n            [class.mat-elevation-z8]=\"(activeStageIndex|async) ===$index\" class=\"stage-item\"\r\n            (click)=\"setActiveStage($index)\" [activated]=\" (activeStageIndex|async) ===$index\">\r\n            <span class=\"stage-index\" matListItemAvatar>{{$index + 1}} </span>\r\n            <div matListItemTitle>\r\n              <div style=\"line-height: normal;\">\r\n                {{ stage.name || 'Stage ' }}\r\n              </div>\r\n              <div class=\"stage-inner-message\" *ngIf=\"!stage.name && (activeStageIndex|async) !==$index \">\r\n                Incomplete , click to edit\r\n              </div>\r\n\r\n            </div>\r\n\r\n            <button *ngIf=\"(activeStageIndex|async) ===$index||!stage.valid && (activeStageIndex|async) !==$index\"\r\n              mat-icon-button matListItemMeta>\r\n              <mat-icon color=\"primary\" *ngIf=\"(activeStageIndex|async) ===$index\">check_circle</mat-icon>\r\n\r\n              <mat-icon color=\"warn\" *ngIf=\"!stage.valid && (activeStageIndex|async) !==$index\">\r\n                warning\r\n              </mat-icon>\r\n            </button>\r\n          </mat-list-item>\r\n          <mat-divider></mat-divider>\r\n\r\n          <app-aggregate-stage-editor [selectedStage]=\"stage\" [isRunningPipeline]=\"isRunningPipeline\"\r\n            (deleteStage)=\"deleteStage($index)\" (saveStage)=\"saveStage($index,$event)\"\r\n            *ngIf=\"(activeStageIndex|async) ===$index\"></app-aggregate-stage-editor>\r\n\r\n\r\n        </ng-container>\r\n\r\n        <mat-toolbar style=\"padding: 0px;\">\r\n\r\n          <span class=\"spacer\"></span>\r\n          <button class=\"stage-button\" [disabled]=\"isRunningPipeline\" color=\"primary\" (click)=\"addStage()\"\r\n            mat-raised-button>\r\n            Add\r\n            <mat-icon>add</mat-icon>\r\n          </button>\r\n        </mat-toolbar>\r\n      </mat-nav-list>\r\n\r\n      <!-- Mongodb aggregate pipelione stages management  and edit end -->\r\n    </div>\r\n  </mat-expansion-panel>\r\n\r\n  <!-- Results Accordion -->\r\n  <mat-expansion-panel value=\"results\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <mat-spinner color=\"accent\" *ngIf=\"isRunningPipeline\" class=\"header-spinner\"></mat-spinner>\r\n        <mat-icon class=\"title-icon\">dataset</mat-icon>\r\n        {{isRunningPipeline?'Running pipeline...':'Data Results'}}\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <div class=\"content\">\r\n      <ng-container *ngIf=\"pipeLineResults | async as results; else noResults\">\r\n\r\n        <lib-t-dynamic-data-view *ngIf=\"results\" [data]=\"results\"></lib-t-dynamic-data-view>\r\n        <p *ngIf=\"!results\" color=\"medium\">\r\n\r\n          No results available\r\n\r\n        </p>\r\n\r\n      </ng-container>\r\n      <ng-template #noResults>\r\n        <p color=\"medium\">No results available</p>\r\n      </ng-template>\r\n    </div>\r\n  </mat-expansion-panel>\r\n\r\n  <!-- AI Agent Accordion -->\r\n  <mat-expansion-panel value=\"ai\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <mat-spinner *ngIf=\" aiIsGeneratingPipeline \" style=\"position: absolute;\" class=\"header-spinner\"></mat-spinner>\r\n        <mat-icon class=\"title-icon\">tips_and_updates</mat-icon>\r\n        {{ aiIsGeneratingPipeline ? 'Agent busy ...' : 'AI AGENT prompt' }}\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div class=\"content\">\r\n      @if( schemaLoadError$ | async){\r\n        <div class=\"tree-instructions\" style=\"background: antiquewhite !important;\">\r\n          <mat-icon class=\"info-icon\" color=\"warn\">error</mat-icon>\r\n          <span> {{ schemaLoadError$ | async }}</span>\r\n        </div>\r\n  \r\n      }\r\n      <mat-list *ngFor=\"let chat of chatHistory|async;\">\r\n\r\n        <mat-list-item class=\"chatContent chatItem\">\r\n          <div class=\"chat\" style=\"background:bisque;text-align:end;\r\n          border-radius: 18px 18px 0px 18px;\" matListItemTitle>\r\n            <div>\r\n              {{chat.user}}\r\n            </div>\r\n            <div style=\"opacity:0.6;line-height: normal;display: flex;align-items: center;justify-content: flex-end;\">\r\n              {{chat.date|daysAgo}}\r\n              <mat-icon class=\"sent-icon\">\r\n                done_all\r\n              </mat-icon>\r\n            </div>\r\n          </div>\r\n        </mat-list-item>\r\n\r\n        <mat-list-item style=\"margin-top: 16px;\" class=\"chatContent chatItem\" color=\"light\" lines=\"full\">\r\n          <mat-icon style=\"    margin-left: 0px;\r\n    margin-top: 16px;\r\n    margin-bottom: auto;\" matListItemIcon>smart_toy</mat-icon>\r\n          <div class=\"chat\" style=\"text-align: left; \r\n          padding-left: 16px;  \r\n    background: azure;\r\n    border-radius: 0px 18px 18px 18px;\" *ngIf=\"!chat.assistance?.error\" matListItemTitle>\r\n            <pre>\r\n                {{chat. assistance.pipeline |json}}\r\n              </pre>\r\n          </div>\r\n          <div *ngIf=\"chat.assistance?.error\" matListItemTitle>\r\n            {{chat.assistance.error}}\r\n          </div>\r\n        </mat-list-item>\r\n\r\n\r\n      </mat-list>\r\n      <mat-list>\r\n        <mat-list-item class=\"chatContent chatItem\">\r\n          <textarea matListItemTitle #textarea style=\"    width: calc(100% - 13px);\r\n    border-radius: 14px;\r\n    padding-right: 3px;\r\n    padding-left: 8px;\" class=\"chat\" [value]=\" prompt|async\" (input)=\"onTextChange($event)\"\r\n            placeholder=\"Provide a pipeline generation prompt\"></textarea>\r\n          <button matListItemMeta style=\"    margin-left: 4px;\r\n    margin-right: 0px;\" color=\"primary\" mat-mini-fab [disabled]=\"aiIsGeneratingPipeline\" (click)=\"promptSubmit()\">\r\n\r\n            <mat-icon style=\"margin: 0px !important;color:white\">send</mat-icon>\r\n            <mat-spinner color=\"accent\" *ngIf=\" aiIsGeneratingPipeline \" \r\n            class=\"submit-spinner\" ></mat-spinner>\r\n          </button>\r\n         \r\n        </mat-list-item>\r\n\r\n      </mat-list>\r\n\r\n\r\n      <section *ngIf=\"showSuggestions\" class=\"showSuggestionContainer\">\r\n        <!-- <mat-toolbar class=\"search-container\" style=\"background: inherit;\">\r\n\r\n\r\n          <input type=\"search\" placeholder=\"Search options\" class=\"search-field\" (change)=\"onSearchChange($event)\">\r\n\r\n          <mat-icon>\r\n            search\r\n          </mat-icon>\r\n        </mat-toolbar> -->\r\n        <mat-divider></mat-divider>\r\n        <div style=\"padding: 8px;\">\r\n          <div class=\"suggestion-container\">\r\n            <div class=\"suggestion-column\">\r\n              <h5>Collection document properties</h5>\r\n              <div class=\"button-container\">\r\n                <button *ngFor=\"let method of getSchemaProperties | async;trackBy: trackById\"\r\n                  (click)=\"selectSuggestionInput(method.value)\" color=\"accent\" mat-flat-button\r\n                  class=\"suggestion-button\">\r\n                  {{ method.label | titlecase }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n\r\n\r\n        </div>\r\n      </section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    </div>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n\r\n\r\n\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOpen]=\"disabled\"\r\n>\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);\">\r\n\r\n\r\n</div>\r\n</ng-template>\r\n", styles: ["ion-card{margin:0 auto}.head{font-weight:500;font-size:.9rem;padding-left:8px}.chat{margin-top:0;padding-bottom:8px;padding-top:9px;padding-right:16px;white-space:normal;font-size:.8rem}.icon{margin-top:auto;margin-bottom:auto;margin-right:16px}.container{max-width:600px;margin:0 auto}ion-accordion-group{margin:16px}ion-icon{margin-right:16PX}.suggestion-container{display:flex;width:100%;gap:14px}.suggestion-column{flex:1;min-width:0}.button-container{display:flex;flex-wrap:wrap}.suggestion-button{height:auto;text-transform:capitalize;margin:2px;padding:8px;line-height:normal;text-align:left;font-size:.8em}h5{margin-bottom:8px;font-size:1em}mat-expansion-panel-header{padding-left:16px;padding-right:16px}mat-expansion-panel{background:var(--mat-sys-surface-container, var(--mat-app-surface))}mat-form-field{width:100%;background:azure}.chatItem{padding:0}.chatItem mat-icon{margin-left:16px;margin-right:16px}.chatContent{height:fit-content!important}.stage-button{margin:4px}.stage-index{font-size:.875em;display:flex;width:28px;height:28px;justify-content:center;background:azure;align-items:center;border:solid var(--mat-divider-color, var(--mat-app-outline)) 1px}.stage-inner-message{font-size:.875em;display:flex;line-height:normal;opacity:.6}.stage-item{height:54px!important}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px!important;display:block}.title-icon{margin-right:8px;vertical-align:middle}.header-spinner{position:absolute;width:24px!important;height:24px!important}.sent-icon{font-size:.875em;height:14px;margin-right:0!important;margin-left:0!important}.submit-spinner{position:absolute;width:40px!important;right:-8px;top:-20px;height:40px!important;--mdc-circular-progress-size: 40px !important;--mdc-circular-progress-active-indicator-width: 40px !important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$4.JsonPipe, name: "json" }, { kind: "pipe", type: i2$4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: TWorkflowPickerComponent, selector: "lib-t-workflow-picker", inputs: ["disabled", "errors", "required", "value", "placeholder", "getWorkflowOptions"], outputs: ["valueChange", "valueChanged", "workflowNameChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TDynamicDataViewComponent, selector: "lib-t-dynamic-data-view", inputs: ["data"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i7.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i7.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i7.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i7.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i7.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i7.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i10$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: AggregateStageEditorComponent, selector: "app-aggregate-stage-editor", inputs: ["selectedStage", "isRunningPipeline"], outputs: ["saveStage", "deleteStage"] }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }, { kind: "ngmodule", type: OverlayModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PipelineGeneratorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-pipeline-generator', standalone: true, imports: [
+                        CommonModule,
+                        TWorkflowPickerComponent,
+                        FormsModule,
+                        TDynamicDataViewComponent,
+                        MatModulesModule,
+                        AggregateStageEditorComponent,
+                        DaysAgoPipe,
+                        OverlayModule
+                    ], providers: [{ provide: MatFormFieldControl, useExisting: PipelineGeneratorComponent }], template: "\r\n\r\n\r\n<section class=\"ion-margin\">\r\n  <p>MongoDB aggregation pipeline builder for selected workflows. </p>\r\n</section>\r\n<lib-t-workflow-picker \r\n(valueChanged)=\"workflowChanged($event)\"\r\n(workflowNameChanged)=\"workflowNameChanged($event)\" \r\n[getWorkflowOptions]=\" workflows$\"\r\n  [value]=\"(workflowId|async)||undefined\">\r\n</lib-t-workflow-picker>\r\n<mat-accordion multi *ngIf=\"workflowId|async\">\r\n  <!-- Pipeline Accordion -->\r\n  <mat-expansion-panel value=\"pipeline\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <mat-spinner color=\"accent\" *ngIf=\"isRunningPipeline\" class=\"header-spinner\"></mat-spinner>\r\n        <mat-icon class=\"title-icon\">\r\n          dynamic_form\r\n        </mat-icon>\r\n        {{isRunningPipeline?'Executing current Data pipeline...':'Data retrieval pipeline'}}\r\n      </mat-panel-title>\r\n\r\n    </mat-expansion-panel-header>\r\n    <div class=\"content\">\r\n      <!-- Mongodb aggregate pipelione stages management  and edit start-->\r\n      <div *ngIf=\"((stages | async)?.length || 0) ===0\" class=\"tree-instructions\">\r\n        <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n        <span>\r\n          Add stages to the pipeline below.<br>\r\n          Each stage processes input documents by filtering, grouping, or calculating values. The output documents from\r\n          one stage are passed to the next stage in the pipeline.\r\n        </span>\r\n      </div>\r\n\r\n      <mat-nav-list style=\"    background: var(--mat-tree-container-background-color);padding:0px;border-radius:8px\">\r\n\r\n\r\n        <ng-container *ngFor=\"let stage of stages | async; trackBy: trackById;index as $index;last as isLast\">\r\n          <mat-list-item [style.margin-top]=\"(activeStageIndex|async) ===$index?'4px':'0px'\"\r\n            [class.mat-elevation-z8]=\"(activeStageIndex|async) ===$index\" class=\"stage-item\"\r\n            (click)=\"setActiveStage($index)\" [activated]=\" (activeStageIndex|async) ===$index\">\r\n            <span class=\"stage-index\" matListItemAvatar>{{$index + 1}} </span>\r\n            <div matListItemTitle>\r\n              <div style=\"line-height: normal;\">\r\n                {{ stage.name || 'Stage ' }}\r\n              </div>\r\n              <div class=\"stage-inner-message\" *ngIf=\"!stage.name && (activeStageIndex|async) !==$index \">\r\n                Incomplete , click to edit\r\n              </div>\r\n\r\n            </div>\r\n\r\n            <button *ngIf=\"(activeStageIndex|async) ===$index||!stage.valid && (activeStageIndex|async) !==$index\"\r\n              mat-icon-button matListItemMeta>\r\n              <mat-icon color=\"primary\" *ngIf=\"(activeStageIndex|async) ===$index\">check_circle</mat-icon>\r\n\r\n              <mat-icon color=\"warn\" *ngIf=\"!stage.valid && (activeStageIndex|async) !==$index\">\r\n                warning\r\n              </mat-icon>\r\n            </button>\r\n          </mat-list-item>\r\n          <mat-divider></mat-divider>\r\n\r\n          <app-aggregate-stage-editor [selectedStage]=\"stage\" [isRunningPipeline]=\"isRunningPipeline\"\r\n            (deleteStage)=\"deleteStage($index)\" (saveStage)=\"saveStage($index,$event)\"\r\n            *ngIf=\"(activeStageIndex|async) ===$index\"></app-aggregate-stage-editor>\r\n\r\n\r\n        </ng-container>\r\n\r\n        <mat-toolbar style=\"padding: 0px;\">\r\n\r\n          <span class=\"spacer\"></span>\r\n          <button class=\"stage-button\" [disabled]=\"isRunningPipeline\" color=\"primary\" (click)=\"addStage()\"\r\n            mat-raised-button>\r\n            Add\r\n            <mat-icon>add</mat-icon>\r\n          </button>\r\n        </mat-toolbar>\r\n      </mat-nav-list>\r\n\r\n      <!-- Mongodb aggregate pipelione stages management  and edit end -->\r\n    </div>\r\n  </mat-expansion-panel>\r\n\r\n  <!-- Results Accordion -->\r\n  <mat-expansion-panel value=\"results\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <mat-spinner color=\"accent\" *ngIf=\"isRunningPipeline\" class=\"header-spinner\"></mat-spinner>\r\n        <mat-icon class=\"title-icon\">dataset</mat-icon>\r\n        {{isRunningPipeline?'Running pipeline...':'Data Results'}}\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <div class=\"content\">\r\n      <ng-container *ngIf=\"pipeLineResults | async as results; else noResults\">\r\n\r\n        <lib-t-dynamic-data-view *ngIf=\"results\" [data]=\"results\"></lib-t-dynamic-data-view>\r\n        <p *ngIf=\"!results\" color=\"medium\">\r\n\r\n          No results available\r\n\r\n        </p>\r\n\r\n      </ng-container>\r\n      <ng-template #noResults>\r\n        <p color=\"medium\">No results available</p>\r\n      </ng-template>\r\n    </div>\r\n  </mat-expansion-panel>\r\n\r\n  <!-- AI Agent Accordion -->\r\n  <mat-expansion-panel value=\"ai\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <mat-spinner *ngIf=\" aiIsGeneratingPipeline \" style=\"position: absolute;\" class=\"header-spinner\"></mat-spinner>\r\n        <mat-icon class=\"title-icon\">tips_and_updates</mat-icon>\r\n        {{ aiIsGeneratingPipeline ? 'Agent busy ...' : 'AI AGENT prompt' }}\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div class=\"content\">\r\n      @if( schemaLoadError$ | async){\r\n        <div class=\"tree-instructions\" style=\"background: antiquewhite !important;\">\r\n          <mat-icon class=\"info-icon\" color=\"warn\">error</mat-icon>\r\n          <span> {{ schemaLoadError$ | async }}</span>\r\n        </div>\r\n  \r\n      }\r\n      <mat-list *ngFor=\"let chat of chatHistory|async;\">\r\n\r\n        <mat-list-item class=\"chatContent chatItem\">\r\n          <div class=\"chat\" style=\"background:bisque;text-align:end;\r\n          border-radius: 18px 18px 0px 18px;\" matListItemTitle>\r\n            <div>\r\n              {{chat.user}}\r\n            </div>\r\n            <div style=\"opacity:0.6;line-height: normal;display: flex;align-items: center;justify-content: flex-end;\">\r\n              {{chat.date|daysAgo}}\r\n              <mat-icon class=\"sent-icon\">\r\n                done_all\r\n              </mat-icon>\r\n            </div>\r\n          </div>\r\n        </mat-list-item>\r\n\r\n        <mat-list-item style=\"margin-top: 16px;\" class=\"chatContent chatItem\" color=\"light\" lines=\"full\">\r\n          <mat-icon style=\"    margin-left: 0px;\r\n    margin-top: 16px;\r\n    margin-bottom: auto;\" matListItemIcon>smart_toy</mat-icon>\r\n          <div class=\"chat\" style=\"text-align: left; \r\n          padding-left: 16px;  \r\n    background: azure;\r\n    border-radius: 0px 18px 18px 18px;\" *ngIf=\"!chat.assistance?.error\" matListItemTitle>\r\n            <pre>\r\n                {{chat. assistance.pipeline |json}}\r\n              </pre>\r\n          </div>\r\n          <div *ngIf=\"chat.assistance?.error\" matListItemTitle>\r\n            {{chat.assistance.error}}\r\n          </div>\r\n        </mat-list-item>\r\n\r\n\r\n      </mat-list>\r\n      <mat-list>\r\n        <mat-list-item class=\"chatContent chatItem\">\r\n          <textarea matListItemTitle #textarea style=\"    width: calc(100% - 13px);\r\n    border-radius: 14px;\r\n    padding-right: 3px;\r\n    padding-left: 8px;\" class=\"chat\" [value]=\" prompt|async\" (input)=\"onTextChange($event)\"\r\n            placeholder=\"Provide a pipeline generation prompt\"></textarea>\r\n          <button matListItemMeta style=\"    margin-left: 4px;\r\n    margin-right: 0px;\" color=\"primary\" mat-mini-fab [disabled]=\"aiIsGeneratingPipeline\" (click)=\"promptSubmit()\">\r\n\r\n            <mat-icon style=\"margin: 0px !important;color:white\">send</mat-icon>\r\n            <mat-spinner color=\"accent\" *ngIf=\" aiIsGeneratingPipeline \" \r\n            class=\"submit-spinner\" ></mat-spinner>\r\n          </button>\r\n         \r\n        </mat-list-item>\r\n\r\n      </mat-list>\r\n\r\n\r\n      <section *ngIf=\"showSuggestions\" class=\"showSuggestionContainer\">\r\n        <!-- <mat-toolbar class=\"search-container\" style=\"background: inherit;\">\r\n\r\n\r\n          <input type=\"search\" placeholder=\"Search options\" class=\"search-field\" (change)=\"onSearchChange($event)\">\r\n\r\n          <mat-icon>\r\n            search\r\n          </mat-icon>\r\n        </mat-toolbar> -->\r\n        <mat-divider></mat-divider>\r\n        <div style=\"padding: 8px;\">\r\n          <div class=\"suggestion-container\">\r\n            <div class=\"suggestion-column\">\r\n              <h5>Collection document properties</h5>\r\n              <div class=\"button-container\">\r\n                <button *ngFor=\"let method of getSchemaProperties | async;trackBy: trackById\"\r\n                  (click)=\"selectSuggestionInput(method.value)\" color=\"accent\" mat-flat-button\r\n                  class=\"suggestion-button\">\r\n                  {{ method.label | titlecase }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n\r\n\r\n        </div>\r\n      </section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    </div>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n\r\n\r\n\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOpen]=\"disabled\"\r\n>\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);\">\r\n\r\n\r\n</div>\r\n</ng-template>\r\n", styles: ["ion-card{margin:0 auto}.head{font-weight:500;font-size:.9rem;padding-left:8px}.chat{margin-top:0;padding-bottom:8px;padding-top:9px;padding-right:16px;white-space:normal;font-size:.8rem}.icon{margin-top:auto;margin-bottom:auto;margin-right:16px}.container{max-width:600px;margin:0 auto}ion-accordion-group{margin:16px}ion-icon{margin-right:16PX}.suggestion-container{display:flex;width:100%;gap:14px}.suggestion-column{flex:1;min-width:0}.button-container{display:flex;flex-wrap:wrap}.suggestion-button{height:auto;text-transform:capitalize;margin:2px;padding:8px;line-height:normal;text-align:left;font-size:.8em}h5{margin-bottom:8px;font-size:1em}mat-expansion-panel-header{padding-left:16px;padding-right:16px}mat-expansion-panel{background:var(--mat-sys-surface-container, var(--mat-app-surface))}mat-form-field{width:100%;background:azure}.chatItem{padding:0}.chatItem mat-icon{margin-left:16px;margin-right:16px}.chatContent{height:fit-content!important}.stage-button{margin:4px}.stage-index{font-size:.875em;display:flex;width:28px;height:28px;justify-content:center;background:azure;align-items:center;border:solid var(--mat-divider-color, var(--mat-app-outline)) 1px}.stage-inner-message{font-size:.875em;display:flex;line-height:normal;opacity:.6}.stage-item{height:54px!important}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px!important;display:block}.title-icon{margin-right:8px;vertical-align:middle}.header-spinner{position:absolute;width:24px!important;height:24px!important}.sent-icon{font-size:.875em;height:14px;margin-right:0!important;margin-left:0!important}.submit-spinner{position:absolute;width:40px!important;right:-8px;top:-20px;height:40px!important;--mdc-circular-progress-size: 40px !important;--mdc-circular-progress-active-indicator-width: 40px !important}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }], propDecorators: { id: [{
+                type: HostBinding
+            }], disabled: [{
+                type: Input
+            }], textareaElementRef: [{
+                type: ViewChild,
+                args: ['textarea', { read: ElementRef, static: false }]
+            }], value: [{
+                type: Input
+            }], getWorkflowOptions: [{
+                type: Input
+            }], userName: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }], errors: [{
+                type: Input
+            }] } });
+
+export { PipelineGeneratorComponent };
+//# sourceMappingURL=ngx-t-forms-pipeline-generator.component-QE-I58e4.mjs.map