@memberjunction/ng-core-entity-forms 2.50.0 → 2.51.0

package/README.md

@@ -218,6 +218,192 @@ Each entity form typically follows this structure:
 | AI-related forms | Forms for AI models, prompts, and agents |
 | Content forms | Forms for content management |
 | Communication forms | Forms for messaging and notifications |
+| **Test Harness Components** | **Interactive testing interfaces for AI agents and prompts** |
+
+## AI Test Harness System
+
+This package includes a comprehensive test harness system for AI Agents and AI Prompts, providing developers with powerful tools for testing, debugging, and validating AI components.
+
+### Test Harness Components
+
+#### 1. AI Agent Test Harness (`AIAgentTestHarnessComponent`)
+
+A full-featured testing interface for AI agents with the following capabilities:
+
+**Core Features:**
+- **Interactive Chat Interface**: Real-time conversation with AI agents
+- **Streaming Support**: Live streaming of agent responses with elapsed time tracking
+- **Data Context Management**: Configure variables passed to agents during execution
+- **Template Data Management**: Manage template variables for agent prompts
+- **Conversation Persistence**: Save/load conversations with full state restoration
+- **Import/Export**: JSON-based conversation backup and sharing
+- **Content Formatting**: Automatic detection and rendering of Markdown, JSON, and plain text
+- **Raw Content Toggle**: View both processed and raw AI responses
+- **Error Handling**: Comprehensive error display and user feedback
+
+**Usage Example:**
+```html
+<mj-ai-agent-test-harness 
+  [aiAgent]="myAgent"
+  [isVisible]="true"
+  (visibilityChange)="onVisibilityChanged($event)">
+</mj-ai-agent-test-harness>
+```
+
+**Data Context Configuration:**
+```typescript
+// Configure variables passed to the agent
+this.testHarness.dataContextVariables = [
+  { name: 'userId', value: 'user-123', type: 'string' },
+  { name: 'department', value: 'Engineering', type: 'string' },
+  { name: 'priority', value: '1', type: 'number' }
+];
+```
+
+#### 2. AI Prompt Test Harness (`AIPromptTestHarnessComponent`)
+
+A specialized testing interface for AI prompts with template variable management:
+
+**Core Features:**
+- **Prompt Testing**: Execute prompts with different AI models
+- **Template Variable Management**: Configure and test prompt variables
+- **Model Selection**: Choose from available AI models for testing
+- **Rendered Prompt Preview**: View how templates render with current variables
+- **Conversation Management**: Similar conversation features as agent harness
+- **Variable Auto-Detection**: Automatically detect variables in prompt templates
+
+**Usage Example:**
+```html
+<mj-ai-prompt-test-harness 
+  [aiPrompt]="myPrompt"
+  [template]="promptTemplate"
+  [templateContent]="templateContent"
+  [isVisible]="true">
+</mj-ai-prompt-test-harness>
+```
+
+#### 3. Test Harness Dialog Service (`TestHarnessDialogService`)
+
+A centralized service for opening test harnesses in modal dialogs:
+
+**Features:**
+- **Configurable Dialogs**: Custom sizing, titles, and initial data
+- **Agent Loading**: Load agents by ID or use existing entities
+- **Dimension Support**: Viewport units (vw, vh) and pixel dimensions
+- **Initial Data Setup**: Pre-populate context and template variables
+
+**Usage Examples:**
+```typescript
+// Open AI Agent test harness
+const dialogRef = this.testHarnessService.openAgentTestHarness({
+  agentId: 'agent-123',
+  title: 'Test My Agent',
+  width: '90vw',
+  height: '80vh',
+  initialDataContext: { 
+    userId: 'user-456',
+    department: 'Engineering'
+  }
+});
+
+// Open AI Prompt test harness
+const dialogRef = this.testHarnessService.openPromptTestHarness({
+  promptId: 'prompt-789',
+  selectedModelId: 'gpt-4',
+  initialTemplateVariables: { 
+    name: 'Alice',
+    context: 'Customer support inquiry'
+  }
+});
+
+// Convenience methods
+await this.testHarnessService.openAgentById('agent-123');
+await this.testHarnessService.openPromptById('prompt-456');
+```
+
+### Enhanced AI Agent Form
+
+The AI Agent form (`AIAgentFormComponentExtended`) includes integrated test harness access:
+
+**Features:**
+- **Built-in Test Button**: Direct access to test harness from agent form
+- **Related Entity Management**: View sub-agents, prompts, actions, and execution history
+- **Status Indicators**: Visual status badges and execution mode icons
+- **Navigation Support**: Links to related entities
+- **Execution History**: Recent runs with timing and status information
+
+**Enhanced Capabilities:**
+```typescript
+// Open test harness from form
+this.openTestHarness(); // Validates agent is saved first
+
+// View execution status
+this.getExecutionStatusIcon(status); // Returns appropriate FontAwesome icon
+this.getExecutionStatusColor(status); // Returns status color
+
+// Format timing information
+this.formatExecutionTime(milliseconds); // Human-readable time format
+```
+
+### Conversation Management
+
+Both test harnesses include comprehensive conversation management:
+
+**Features:**
+- **Auto-Save**: Conversations automatically save during active sessions
+- **Manual Save**: Save conversations with custom names
+- **Load/Restore**: Restore complete conversation state including variables
+- **Export/Import**: JSON-based conversation portability
+- **Storage Limits**: Automatic cleanup (50 conversation limit)
+
+**Export Format:**
+```json
+{
+  "agent": {
+    "id": "agent-123",
+    "name": "Customer Service Agent",
+    "description": "Handles customer inquiries"
+  },
+  "messages": [...],
+  "dataContext": {
+    "userId": "user-456",
+    "department": "Support"
+  },
+  "templateData": {
+    "customerName": "John Doe"
+  },
+  "exportedAt": "2024-01-15T10:30:00.000Z"
+}
+```
+
+### Content Rendering System
+
+Advanced content formatting with automatic type detection:
+
+**Supported Formats:**
+- **Markdown**: Headers, lists, code blocks, links, emphasis
+- **JSON**: Syntax highlighting and pretty formatting
+- **Plain Text**: Clean text rendering with line breaks
+
+**Content Type Detection:**
+```typescript
+// Automatically detects content type
+const contentType = this.detectContentType(content);
+// Returns: 'markdown' | 'json' | 'text'
+
+// Renders content appropriately
+const safeHtml = this.getFormattedContent(message);
+```
+
+### Integration Points
+
+The test harness system integrates seamlessly with:
+
+- **MemberJunction Entity System**: Uses proper entity loading patterns
+- **GraphQL Data Provider**: Executes agents and prompts via GraphQL mutations
+- **Notification Service**: User feedback for actions and errors
+- **LocalStorage**: Conversation persistence across sessions
+- **Kendo UI Dialogs**: Professional modal interfaces
 
 ## Notes
 
@@ -228,6 +414,7 @@ Each entity form typically follows this structure:
 
 ## Dependencies
 
+### Core Dependencies
 - @angular/common
 - @angular/core
 - @angular/forms
@@ -235,6 +422,8 @@ Each entity form typically follows this structure:
 - @memberjunction/core-entities
 - @memberjunction/ng-explorer-core
 - @memberjunction/ng-base-forms
+
+### UI Component Dependencies
 - @memberjunction/ng-form-toolbar
 - @memberjunction/ng-tabstrip
 - @memberjunction/ng-container-directives
@@ -242,4 +431,29 @@ Each entity form typically follows this structure:
 - @memberjunction/ng-timeline
 - @memberjunction/ng-join-grid
 - @progress/kendo-angular-grid
-- @progress/kendo-angular-dropdowns
+- @progress/kendo-angular-dropdowns
+- @progress/kendo-angular-dialog
+
+### AI & Notification Dependencies
+- @memberjunction/ai
+- @memberjunction/ng-notifications
+- @memberjunction/graphql-dataprovider
+
+### Test Harness Components
+
+The test harness system introduces several new components and services:
+
+| Component/Service | Purpose |
+|------------------|---------|
+| `AIAgentTestHarnessComponent` | Interactive chat interface for testing AI agents |
+| `AIPromptTestHarnessComponent` | Template variable testing for AI prompts |
+| `AIAgentTestHarnessDialogComponent` | Modal dialog wrapper for agent testing |
+| `AIPromptTestHarnessDialogComponent` | Modal dialog wrapper for prompt testing |
+| `TestHarnessDialogService` | Centralized service for opening test harness dialogs |
+| `AIAgentFormComponentExtended` | Enhanced AI agent form with integrated test harness |
+
+### New Dependencies Added for Test Harness:
+- **Angular DomSanitizer**: Safe HTML rendering for formatted content
+- **RxJS Subjects**: Component lifecycle and event management
+- **LocalStorage**: Conversation persistence across sessions
+- **File API**: Import/export functionality for conversations

package/dist/lib/custom/AIAgents/agent-execution-monitor.component.d.ts

@@ -0,0 +1,244 @@
+import { OnChanges, SimpleChanges, OnDestroy, ElementRef, AfterViewInit, ChangeDetectorRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents a node in the execution tree with all necessary display information
+ */
+export interface ExecutionTreeNode {
+    id: string;
+    name: string;
+    type: 'validation' | 'prompt' | 'action' | 'sub-agent' | 'decision' | 'chat';
+    status: 'pending' | 'running' | 'completed' | 'failed';
+    startTime?: Date;
+    endTime?: Date;
+    duration?: number;
+    agentPath: string[];
+    inputPreview?: string;
+    outputPreview?: string;
+    error?: string;
+    children?: ExecutionTreeNode[];
+    expanded?: boolean;
+    depth: number;
+    tokensUsed?: number;
+    cost?: number;
+    detailsMarkdown?: string;
+    detailsExpanded?: boolean;
+    promptCount?: number;
+}
+/**
+ * Mode for the execution monitor component
+ */
+export type ExecutionMonitorMode = 'live' | 'historical';
+/**
+ * Execution statistics for display
+ */
+export interface ExecutionStats {
+    totalSteps: number;
+    completedSteps: number;
+    failedSteps: number;
+    totalTokens: number;
+    totalCost: number;
+    stepsByType: Record<string, number>;
+    totalDuration?: number;
+    totalPrompts: number;
+}
+/**
+ * AgentExecutionMonitor Component
+ *
+ * A reusable component for visualizing AI agent execution flow in real-time or historically.
+ * Displays a hierarchical tree of execution steps with status, timing, and preview information.
+ *
+ * Features:
+ * - Real-time updates for live executions
+ * - Historical playback for completed executions
+ * - Collapsible tree structure
+ * - Step status indicators with animations
+ * - Execution statistics
+ * - Token usage and cost tracking
+ * - Error display
+ * - Input/output preview
+ */
+export declare class AgentExecutionMonitorComponent implements OnChanges, OnDestroy, AfterViewInit {
+    private cdr;
+    mode: ExecutionMonitorMode;
+    executionData: any;
+    autoExpand: boolean;
+    executionTreeContainer: ElementRef<HTMLDivElement>;
+    executionNodesContainer: ViewContainerRef;
+    executionTree: ExecutionTreeNode[];
+    currentStep: ExecutionTreeNode | null;
+    private nodeComponentMap;
+    stats: ExecutionStats;
+    private userHasInteracted;
+    private userHasScrolled;
+    private isAutoScrolling;
+    private lastScrollPosition;
+    private scrollThreshold;
+    private viewInitialized;
+    private processedStepIds;
+    private newlyAddedNodeIds;
+    private destroy$;
+    private updateSubscription?;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Clear all dynamically created components
+     */
+    private clearNodeComponents;
+    /**
+     * Process execution data based on mode
+     */
+    private processExecutionData;
+    /**
+     * Build tree from historical execution data
+     */
+    private buildTreeFromHistoricalData;
+    /**
+     * Render the execution tree using dynamic components
+     */
+    private renderTree;
+    /**
+     * Create a component for a node and its children
+     */
+    private createNodeComponent;
+    /**
+     * Convert new execution tree format to display nodes
+     */
+    private convertExecutionTree;
+    /**
+     * Convert legacy step format to tree nodes
+     */
+    private convertLegacySteps;
+    /**
+     * Map step type strings to our type enum
+     */
+    private mapStepType;
+    /**
+     * Map status strings to our status enum
+     */
+    private mapStepStatus;
+    /**
+     * Create a preview string from data
+     */
+    private createPreview;
+    /**
+     * Extract token count from output data
+     */
+    private extractTokens;
+    /**
+     * Extract cost from output data
+     */
+    private extractCost;
+    /**
+     * Calculate duration from timestamps
+     */
+    private calculateDuration;
+    /**
+     * Set up live updates for real-time execution
+     */
+    private setupLiveUpdates;
+    /**
+     * Convert live steps format to execution tree format
+     */
+    private convertLiveStepsToTree;
+    /**
+     * Update current step indicator
+     */
+    private updateCurrentStep;
+    /**
+     * Mark previously new nodes as completed
+     */
+    private markPreviouslyNewNodesAsComplete;
+    /**
+     * Find a node by ID in the tree
+     */
+    private findNodeById;
+    /**
+     * Calculate execution statistics
+     */
+    private calculateStats;
+    /**
+     * Toggle node expansion
+     */
+    toggleNode(node: ExecutionTreeNode): void;
+    /**
+     * Check if node has expandable content
+     */
+    private hasExpandableContent;
+    /**
+     * Handle scroll events
+     */
+    onScroll(event: Event): void;
+    /**
+     * Handle user clicks (interaction detection)
+     */
+    onUserInteraction(): void;
+    /**
+     * Check if scroll is at bottom
+     */
+    private isScrolledToBottom;
+    /**
+     * Check if user is at bottom (for initial setup)
+     */
+    private checkIfUserAtBottom;
+    /**
+     * Auto-scroll to bottom if user hasn't interacted
+     */
+    private autoScrollToBottom;
+    /**
+     * Format agent path for display
+     */
+    formatAgentPath(path: string[]): string;
+    /**
+     * Format duration for display
+     */
+    formatDuration(ms: number): string;
+    /**
+     * Get step types for display
+     */
+    getStepTypes(): string[];
+    /**
+     * Format markdown content for display
+     */
+    formatMarkdown(markdown: string): string;
+    /**
+     * Append new live steps without re-rendering entire tree
+     */
+    private appendNewLiveSteps;
+    /**
+     * Generate a stable ID for a step based on its content
+     */
+    private generateStepId;
+    /**
+     * Find parent node based on depth
+     */
+    private findParentNode;
+    /**
+     * Build a map of nodes by ID for quick lookup
+     */
+    private buildNodeMap;
+    /**
+     * Create a single node from a live step
+     */
+    private createNodeFromLiveStep;
+    /**
+     * Collect all node IDs in the tree
+     */
+    private collectNodeIds;
+    /**
+     * Preserve expanded state of all nodes
+     */
+    private preserveExpandedState;
+    /**
+     * Restore expanded state of all nodes
+     */
+    private restoreExpandedState;
+    /**
+     * Append a node to its parent based on depth
+     */
+    private appendToParent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AgentExecutionMonitorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AgentExecutionMonitorComponent, "mj-agent-execution-monitor", never, { "mode": { "alias": "mode"; "required": false; }; "executionData": { "alias": "executionData"; "required": false; }; "autoExpand": { "alias": "autoExpand"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=agent-execution-monitor.component.d.ts.map

package/dist/lib/custom/AIAgents/agent-execution-monitor.component.d.ts.map

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