Prompt System Guide

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

@prompt-system Library Guide

The @prompt-system library provides a flexible, centralized prompt management system that can render in multiple modes to fit any UI pattern in your application.

Overview

Features

🎯 Global Modal Host: Single modal rendered at app root level
📱 Flexible Rendering Modes: Modal, inline, sidebar, and panel layouts
🔄 Seamless Integration: Drop-in components with minimal setup
⚡ Performance Optimized: Standalone components with Angular signals
🎨 Theme Compatible: Uses theme-system variables and styling

Architecture

@prompt-system/
├── services/
│   └── PromptModalService          # Global modal state management
├── components/
│   ├── PromptSystemComponent       # Global modal host
│   ├── PromptManagerInlineComponent # Embedded prompt browser
│   ├── PromptLabInlineComponent    # Embedded prompt creator
│   └── PromptFlexContainerComponent # Adaptive container
└── directives/
    ├── OpenPromptManagerDirective  # [openPromptManager]
    └── OpenPromptLabDirective      # [openPromptLab]

Quick Start

1. Add Global Host

Add the global prompt system host to your root app template:

<!-- app.component.html -->
<div class="app-container">
  <router-outlet></router-outlet>
</div>

<!-- Global prompt host (add once at root level) -->
<lib-prompt-system></lib-prompt-system>

2. Import in Component

// your-component.ts
import { Component } from '@angular/core';
import { OpenPromptManagerDirective, OpenPromptLabDirective } from '@prompt-system';

@Component({
  selector: 'app-your-component',
  standalone: true,
  imports: [OpenPromptManagerDirective, OpenPromptLabDirective],
  template: `
    <button openPromptManager>📚 Browse Prompts</button>
    <button openPromptLab>🔬 Create Prompt</button>
  `
})
export class YourComponent {}

Rendering Modes

The prompt system supports multiple rendering modes to fit different UI patterns:

Modal Mode (Global)

Best for: Focused prompt work without losing main interface context

<!-- Opens global modal overlay -->
<button openPromptManager>Open Prompt Manager</button>
<button openPromptLab>Create New Prompt</button>

Features:

✨ Global overlay with backdrop
🎯 Focused experience
📱 Mobile-responsive
⚡ Quick access via directives

Inline Mode (Embedded)

Best for: Seamless integration within existing interfaces

<!-- Embedded directly in your component -->
<lib-prompt-flex-container
  mode="inline"
  [initialView]="'manager'"
  title="My Prompts"
  [allowViewSwitch]="true"
  [maxHeight]="'400px'"
  [compact]="false"
  (promptSelected)="onPromptSelected($event)"
  (promptCreated)="onPromptCreated($event)">
</lib-prompt-flex-container>

Features:

🔄 Switchable views (Manager/Lab/Both)
📐 Flexible sizing
🎨 Inherits parent styling
⚙️ Highly configurable

Sidebar Mode (Companion)

Best for: Assistive workflows alongside main content

<div class="layout-with-sidebar">
  <div class="main-content">
    <!-- Your main interface -->
    <h2>Main Application</h2>
    <p>Your content here...</p>
  </div>
  
  <div class="prompt-sidebar">
    <lib-prompt-flex-container
      mode="sidebar"
      [initialView]="'manager'"
      title="Quick Prompts"
      [compact]="true"
      [maxHeight]="'500px'"
      (promptSelected)="usePrompt($event)">
    </lib-prompt-flex-container>
  </div>
</div>

Features:

📏 Compact design
🔀 Side-by-side layout
⚡ Quick prompt access
🎛️ Non-intrusive

Panel Mode (Floating)

Best for: Contextual prompt panels that can be repositioned

<!-- Floating panel that can be positioned anywhere -->
<lib-prompt-flex-container
  mode="panel"
  [initialView]="'lab'"
  title="Prompt Creator"
  [showClose]="true"
  [compact]="false"
  (closed)="closePanel()">
</lib-prompt-flex-container>

Component API Reference

PromptFlexContainerComponent

The main adaptive container that handles different rendering modes.

Inputs

Property	Type	Default	Description
`mode`	`'modal' \| 'inline' \| 'sidebar' \| 'panel'`	`'inline'`	Rendering mode
`initialView`	`'manager' \| 'lab' \| 'both'`	`'manager'`	Which view to show initially
`title`	`string`	`''`	Container title
`allowViewSwitch`	`boolean`	`true`	Enable view switching tabs
`maxHeight`	`string`	`'400px'`	Maximum container height
`compact`	`boolean`	`false`	Use compact spacing
`showClose`	`boolean`	`true`	Show close button

Outputs

Event	Type	Description
`promptSelected`	`PromptTemplate`	Fired when user selects a prompt
`promptCreated`	`PromptTemplate`	Fired when user creates a new prompt
`viewChanged`	`'manager' \| 'lab' \| 'both'`	Fired when view changes
`closed`	`void`	Fired when container is closed

PromptModalService

Global service for controlling the modal host.

Methods

// Open prompt manager in modal
service.openManager(context?: Record<string, unknown>): void

// Open prompt lab in modal  
service.openLab(context?: Record<string, unknown>): void

// Close modal
service.close(): void

// Check if modal is visible
service.isVisible(): boolean

// Get active view
service.activeView(): 'manager' | 'lab' | null

// Get current context
service.context(): Record<string, unknown> | null

// Get selected prompt
service.selectedPrompt(): PromptTemplate | null

Usage

import { PromptModalService } from '@prompt-system';

@Component({...})
export class MyComponent {
  private promptModal = inject(PromptModalService);
  
  openPrompts() {
    this.promptModal.openManager({ section: 'ai-chat' });
  }
  
  createPrompt() {
    this.promptModal.openLab({ category: 'custom' });
  }
}

Directives

OpenPromptManagerDirective

<!-- Basic usage -->
<button openPromptManager>Open Prompts</button>

<!-- With context -->
<button [openPromptManager]="{ section: 'development' }">Dev Prompts</button>

OpenPromptLabDirective

<!-- Basic usage -->
<button openPromptLab>Create Prompt</button>

<!-- With context -->
<button [openPromptLab]="{ category: 'custom' }">New Custom Prompt</button>

Styling and Theming

The prompt system uses CSS custom properties for theming:

:root {
  --ux-surface: #0f1020;           // Background color
  --ux-on-surface: #ffffff;        // Text color
  --ux-border: rgba(255,255,255,0.1); // Border color
}

// Customize specific components
.prompt-system-modal {
  --modal-backdrop: rgba(0,0,0,0.8);
  --modal-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.prompt-manager-inline {
  --card-bg: rgba(255,255,255,0.08);
  --card-border: rgba(255,255,255,0.12);
  --card-hover: rgba(255,255,255,0.12);
}

Integration Examples

Chat Interface Integration

@Component({
  selector: 'app-ai-chat',
  template: `
    <div class="chat-container">
      <div class="chat-messages">
        <!-- Messages here -->
      </div>
      
      <div class="chat-input-area">
        <div class="prompt-sidebar">
          <lib-prompt-flex-container
            mode="sidebar"
            [initialView]="'manager'"
            [compact]="true"
            [maxHeight]="'300px'"
            (promptSelected)="usePrompt($event)">
          </lib-prompt-flex-container>
        </div>
        
        <div class="input-section">
          <textarea [(ngModel)]="message" placeholder="Type message..."></textarea>
          <button (click)="send()">Send</button>
          <button openPromptLab>+ Create</button>
        </div>
      </div>
    </div>
  `
})
export class AiChatComponent {
  message = '';
  
  usePrompt(prompt: PromptTemplate) {
    this.message = prompt.content;
  }
  
  send() {
    // Send logic
  }
}

Dashboard Widget

@Component({
  selector: 'app-prompt-widget',
  template: `
    <div class="dashboard-widget">
      <div class="widget-header">
        <h3>Quick Prompts</h3>
        <button openPromptLab class="add-btn">+</button>
      </div>
      
      <lib-prompt-flex-container
        mode="inline"
        [initialView]="'manager'"
        [showHeader]="false"
        [compact]="true"
        [maxHeight]="'250px'"
        (promptSelected)="handlePromptSelection($event)">
      </lib-prompt-flex-container>
    </div>
  `
})
export class PromptWidgetComponent {
  handlePromptSelection(prompt: PromptTemplate) {
    // Handle prompt selection
    console.log('Selected prompt:', prompt.title);
  }
}

Best Practices

1. Choose the Right Mode

Modal: Use for focused prompt work (browsing library, creating complex prompts)
Inline: Use when prompts are core to the workflow
Sidebar: Use for quick access alongside main content
Panel: Use for contextual prompt creation/editing

2. Performance Optimization

// Use OnPush change detection with signals
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  // ...
})
export class MyComponent {
  // All prompt system components use signals internally
  // for optimal performance
}

3. Context Passing

// Pass meaningful context for better UX
openPrompts() {
  this.promptModal.openManager({
    section: 'ai-chat',
    currentModel: 'gpt-4',
    userRole: 'developer'
  });
}

4. Error Handling

// Listen for prompt events and handle errors
onPromptSelected(prompt: PromptTemplate) {
  try {
    this.applyPrompt(prompt);
  } catch (error) {
    console.error('Failed to apply prompt:', error);
    // Show user feedback
  }
}

Migration Guide

From Scattered Components

Before:

<!-- Multiple instances across components -->
<lib-prompt-manager [isVisible]="showPrompts" (visibilityChange)="showPrompts = $event">
</lib-prompt-manager>

After:

<!-- Global host (add once) -->
<lib-prompt-system></lib-prompt-system>

<!-- Use directives or inline components -->
<button openPromptManager>Open Prompts</button>
<!-- OR -->
<lib-prompt-flex-container mode="inline"></lib-prompt-flex-container>

Benefits of Migration

✅ No Duplication: Single modal host instead of multiple instances
✅ Better Performance: Shared state and lazy loading
✅ Consistent UX: Unified behavior across all prompt interfaces
✅ Flexible Integration: Multiple rendering modes for different use cases
✅ Simplified Maintenance: Centralized component and service

Troubleshooting

Common Issues

Modal not appearing: Ensure <lib-prompt-system> is added to root template
Directive not working: Check component imports include the directive
Styling issues: Verify theme variables are defined
Performance problems: Use OnPush change detection and avoid frequent re-renders

Debug Tools

// Enable debug logging
import { PromptModalService } from '@prompt-system';

// Service logs all interactions to console
// Check browser dev tools for prompt system logs

Future Enhancements

🚀 Drag & Drop: Reorder prompts within categories
📊 Analytics: Track prompt usage and effectiveness
🔍 Advanced Search: Filter by tags, category, and content
🎯 Smart Suggestions: AI-powered prompt recommendations
🌐 Collaboration: Share prompts across team members
📱 Mobile Optimization: Touch-friendly mobile interface

For more information, see the add-new-library.md guide for general Nx library patterns.