@memberjunction/ng-core-entity-forms 2.75.0 → 2.77.0

package/README.md

@@ -252,3 +252,127 @@ Each entity form typically follows this structure:
 - @memberjunction/ng-notifications
 - @memberjunction/graphql-dataprovider
 
+## AI Agent Type UI Customization
+
+### Overview
+
+The AI Agent Type UI Customization feature allows AI Agent Types to define custom form sections or complete form overrides in the AI Agent form UI. This enables different agent types (like Flow, Analysis, Support, etc.) to have specialized UI components tailored to their specific configuration needs.
+
+### Database Schema
+
+The `AIAgentType` table includes three columns for UI customization (added in v2.76):
+
+- `UIFormSectionKey` (NVARCHAR(500) NULL) - Registration key for custom form section component
+- `UIFormKey` (NVARCHAR(500) NULL) - Registration key for complete form override component  
+- `UIFormSectionExpandedByDefault` (BIT NOT NULL DEFAULT 1) - Whether custom section starts expanded
+
+### Implementation Details
+
+#### Dynamic Component Loading
+
+The AI Agent form (`ai-agent-form.component.ts`) implements dynamic loading:
+- Loads the agent type when the form initializes
+- Checks for `UIFormSectionKey` on the agent type
+- Dynamically loads and instantiates the custom section component
+- Propagates `EditMode` changes to the custom section
+
+#### Component Registration
+
+Custom form sections must:
+- Extend `BaseFormSectionComponent`
+- Use `@RegisterClass` decorator with key pattern: `AI Agents.{SectionKey}`
+- Implement standard form section lifecycle
+
+Example:
+```typescript
+@RegisterClass(BaseFormSectionComponent, 'AI Agents.FlowAgentSection')
+export class FlowAgentFormSectionComponent extends BaseFormSectionComponent {
+    // Implementation
+}
+```
+
+#### Flow Agent Example
+
+The `FlowAgentFormSectionComponent` demonstrates a complete implementation:
+- Loads AIAgentStep and AIAgentStepPath entities for the agent
+- Displays workflow steps and paths in a structured view
+- Shows starting steps with special highlighting
+- Provides refresh functionality in edit mode
+- Includes status indicators (Active/Pending/Disabled)
+- Shows action input/output mappings
+
+### Usage Guide
+
+#### Creating a Custom Form Section
+
+1. **Create the Component**
+   ```typescript
+   @Component({
+       selector: 'mj-custom-agent-section',
+       template: `...`,
+       styles: [`...`]
+   })
+   @RegisterClass(BaseFormSectionComponent, 'AI Agents.CustomSection')
+   export class CustomAgentSectionComponent extends BaseFormSectionComponent {
+       // Access this.record for the current AIAgentEntity
+       // Use this.EditMode to determine read/write state
+   }
+   ```
+
+2. **Register in Module**
+   - Add to declarations and exports in `custom-forms.module.ts`
+   - Export from `public-api.ts` if needed externally
+
+3. **Update Agent Type**
+   ```sql
+   UPDATE AIAgentType
+   SET UIFormSectionKey = 'CustomSection',
+       UIFormSectionExpandedByDefault = 1
+   WHERE Name = 'YourAgentType';
+   ```
+
+#### Complete Form Override
+
+For complete form replacement (not just a section), use `UIFormKey`:
+```sql
+UPDATE AIAgentType
+SET UIFormKey = 'CustomCompleteForm'
+WHERE Name = 'YourAgentType';
+```
+
+The custom form component should extend `BaseFormComponent` instead.
+
+### Architecture
+
+#### Component Hierarchy
+```
+AIAgentFormComponent (generated)
+  └── AIAgentFormComponentExtended (custom)
+        └── Dynamic Custom Section (via ViewContainerRef)
+              └── FlowAgentFormSectionComponent (or other custom section)
+```
+
+#### Data Flow
+1. Form loads agent record
+2. Form queries agent type for UI customization keys
+3. Form uses MJGlobal.ClassFactory to resolve component class
+4. Form creates component instance in ViewContainerRef
+5. Form passes record and EditMode to custom component
+6. Custom component manages its own UI and data loading
+
+### Best Practices
+
+1. **Lazy Loading**: Custom sections should load their data only when needed
+2. **Error Handling**: Handle data loading errors gracefully with user feedback
+3. **Edit Mode**: Respect EditMode for read-only vs editable states
+4. **Performance**: Use batch queries (RunViews) for loading related data
+5. **Styling**: Follow existing MJ UI patterns and styles
+6. **Type Safety**: Always use proper entity types, never `any`
+
+### Future Enhancements
+
+1. **Visual Flow Editor**: Integrate a proper flow visualization library (when Angular 18 compatible)
+2. **Drag & Drop**: Allow visual workflow editing with drag and drop
+3. **Conditional UI**: Show/hide sections based on agent configuration
+4. **Template Library**: Pre-built custom sections for common agent types
+

package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-diagram.component.d.ts

@@ -0,0 +1,109 @@
+import { OnInit, OnDestroy, ElementRef, SimpleChanges, OnChanges, AfterViewInit, EventEmitter } from '@angular/core';
+import { AIAgentStepEntity, AIAgentStepPathEntity } from '@memberjunction/core-entities';
+import { DialogService } from '@progress/kendo-angular-dialog';
+import * as i0 from "@angular/core";
+export declare class FlowAgentDiagramComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
+    private dialogService;
+    reteContainer: ElementRef<HTMLDivElement>;
+    constructor(dialogService: DialogService);
+    agentId: string | null;
+    steps: AIAgentStepEntity[];
+    paths: AIAgentStepPathEntity[];
+    EditMode: boolean;
+    stepsChanged: EventEmitter<void>;
+    pathsChanged: EventEmitter<void>;
+    loading: boolean;
+    error: string | null;
+    selectedItem: {
+        type: 'step' | 'path';
+        id: string;
+    } | null;
+    selectedStep: AIAgentStepEntity | null;
+    selectedPath: AIAgentStepPathEntity | null;
+    connectionMode: boolean;
+    connectionSourceStepId: string | null;
+    tempConnection: {
+        path: string;
+    } | null;
+    contextMenu: {
+        visible: boolean;
+        x: number;
+        y: number;
+        type: "path" | "step" | null;
+        targetId: string | null;
+    };
+    stepTypes: string[];
+    stepStatuses: string[];
+    panZoom: {
+        scale: number;
+        translateX: number;
+        translateY: number;
+        isPanning: boolean;
+        startX: number;
+        startY: number;
+    };
+    private destroy$;
+    private nodeElements;
+    private connectionElements;
+    private positionChanges$;
+    private dragState;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private initializeDiagram;
+    private createNodeElement;
+    private createConnectionElement;
+    private createNodesAndConnections;
+    private arrangeNodes;
+    private updateConnections;
+    private fitToView;
+    private truncateText;
+    private cleanup;
+    private onNodeMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private saveStepPosition;
+    addNewStep(): Promise<void>;
+    autoArrange(): Promise<void>;
+    private onNodeClick;
+    private onPathClick;
+    private selectStep;
+    private selectPath;
+    private clearSelection;
+    closeProperties(): void;
+    connectFromStep(): void;
+    cancelConnectionMode(): void;
+    private handleConnectionCreation;
+    onSvgClick(event: MouseEvent): void;
+    onSvgContextMenu(event: MouseEvent): void;
+    onDocumentClick(event: MouseEvent): void;
+    onDocumentMouseMove(event: MouseEvent): void;
+    private updateTempConnection;
+    saveStepProperties(): Promise<void>;
+    savePathProperties(): Promise<void>;
+    private showConfirmDialog;
+    deleteSelectedStep(): Promise<void>;
+    deleteSelectedPath(): Promise<void>;
+    getStepName(stepId: string): string;
+    zoomIn(): void;
+    zoomOut(): void;
+    resetZoom(): void;
+    onWheel(event: WheelEvent): void;
+    onSvgMouseDown(event: MouseEvent): void;
+    onSvgMouseMove(event: MouseEvent): void;
+    onSvgMouseUp(event: MouseEvent): void;
+    private updateTransform;
+    private onNodeContextMenu;
+    private onPathContextMenu;
+    connectFromContextMenu(): void;
+    deleteFromContextMenu(): void;
+    deletePathFromContextMenu(): void;
+    private onSocketMouseDown;
+    private onSocketMouseEnter;
+    private onSocketMouseLeave;
+    private onSocketMouseUp;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlowAgentDiagramComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlowAgentDiagramComponent, "mj-flow-agent-diagram", never, { "agentId": { "alias": "agentId"; "required": false; }; "steps": { "alias": "steps"; "required": false; }; "paths": { "alias": "paths"; "required": false; }; "EditMode": { "alias": "EditMode"; "required": false; }; }, { "stepsChanged": "stepsChanged"; "pathsChanged": "pathsChanged"; }, never, never, false, never>;
+}
+//# sourceMappingURL=flow-agent-diagram.component.d.ts.map

package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-diagram.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-agent-diagram.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/custom/AIAgents/FlowAgentType/flow-agent-diagram.component.ts"],"names":[],"mappings":"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"}