JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 313
  • Score
    100M100P100Q92056F
  • License MIT

AI-powered prompt components for Creaditor integration

Package Exports

  • @creaditor/ai-prompt-textbox
  • @creaditor/ai-prompt-textbox/ai-prompt.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@creaditor/ai-prompt-textbox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Creaditor AI Prompt Components

A collection of modern, customizable web components for AI-powered prompt input and newsletter generation, built with Lit and TypeScript.

🚀 Features

  • AI Prompt Input: Modern, accessible prompt input component with API integration
  • Rich Text Editor: TipTap-powered editor with auto-typing placeholders
  • Loading Animations: Beautiful Lottie animations for loading states
  • TypeScript Support: Full TypeScript definitions and type safety
  • Customizable Styling: CSS custom properties for easy theming
  • Accessibility: ARIA labels and keyboard navigation support
  • RTL Support: Right-to-left language support
  • Newsletter Generation: Built-in integration with Creaditor's newsletter API

📦 Components

<ai-prompt>

A customizable AI prompt input component with modern styling and API integration.

Features:

  • Single-line or multi-line input support
  • Character count with warnings
  • Loading states with Lottie animations
  • API integration for newsletter generation
  • Customizable styling via CSS custom properties
  • Event-driven architecture

<cdtr-ai-prompt-editor>

A rich text editor powered by TipTap with auto-typing placeholders and image support.

Features:

  • TipTap editor integration
  • Auto-typing placeholder suggestions
  • Image support (inline, base64)
  • Loading overlays with animations
  • Content change events
  • RTL/LTR direction support

<auto-typing-placeholder>

An animated placeholder component that cycles through text suggestions with typing effects.

Features:

  • Configurable typing/deleting speeds
  • Pause durations between cycles
  • Smooth animations with blinking cursor
  • Customizable suggestion arrays

<cdtr-submit-button>

A circular submit button with up arrow icon and loading states.

Features:

  • Circular design with hover effects
  • Loading state support
  • Accessibility features
  • Customizable aria labels

🛠 Installation

NPM

npm install cdtr-ai-prompt

CDN

<script type="module" src="https://unpkg.com/cdtr-ai-prompt@latest/ai-prompt.js"></script>

📖 Usage

Basic AI Prompt

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://unpkg.com/cdtr-ai-prompt@latest/ai-prompt.js"></script>
  <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
</head>
<body>
  <ai-prompt 
    placeholder="Enter your prompt here..."
    button-text="Generate"
    @api-success="${this.handleSuccess}"
    @api-error="${this.handleError}">
  </ai-prompt>

  <script>
    document.addEventListener('newsletter-generated', (event) => {
      console.log('Newsletter generated:', event.detail.response);
    });
  </script>
</body>
</html>

Rich Text Editor

<cdtr-ai-prompt-editor 
  id="editor"
  direction="ltr"
  .placeholderSuggestions="${suggestions}">
</cdtr-ai-prompt-editor>

<script>
  const editor = document.getElementById('editor');
  
  editor.addEventListener('content-changed', (event) => {
    console.log('Content changed:', event.detail);
  });
  
  editor.addEventListener('submit-success', (event) => {
    console.log('Newsletter generated:', event.detail.data);
  });
</script>

Auto-typing Placeholder

<auto-typing-placeholder 
  .suggestions="${['Type something...', 'Another suggestion...']}"
  typing-speed="100"
  deleting-speed="50">
</auto-typing-placeholder>

🎨 Styling

All components support CSS custom properties for easy theming:

ai-prompt {
  --ai-prompt-primary: #007bff;
  --ai-prompt-primary-hover: #0056b3;
  --ai-prompt-border: #ced4da;
  --ai-prompt-border-focus: #007bff;
  --ai-prompt-background: #ffffff;
  --ai-prompt-text: #212529;
  --ai-prompt-placeholder: #6c757d;
  --ai-prompt-disabled: #e9ecef;
  --ai-prompt-border-radius: 8px;
  --ai-prompt-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --ai-prompt-shadow-focus: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

📡 API Integration

The components integrate with Creaditor's newsletter generation API:

Endpoint

  • URL: https://agent.creaditor.ai/api/v1/generate/generate-newsletter
  • Method: POST
  • Content-Type: application/json

Request Format

{
  "prompt": "Your newsletter prompt here"
}

Response Format

interface NewsletterGenerationResponse {
  topCoverImage: string | null;
  goal: string;
  description: string;
  subject: string;
  cta: NewsletterCta;
  type: string;
  language: string;
  tone: string;
  length: number;
  direction: string;
  textAlign: string;
  style: string;
  bussinessName: string;
  bussinessType: string;
  authorName: string;
  authorEmail: string;
  authorPhone: string;
  authorWebsite: string;
  socialMedia: unknown | null;
  urlsToTrain: unknown | null;
  countdown: unknown | null;
  logo: NewsletterLogo;
  backgroundColor: string | null;
  fontColor: string | null;
  fontFamily: string;
  status: string;
  result: string;
  stats: NewsletterStats;
  template: NewsletterTemplateElement[];
}

🎯 Events

Component Events

  • input - Fired when input value changes
  • submit - Fired when form is submitted (backward compatibility)
  • api-success - Fired when API request succeeds
  • api-error - Fired when API request fails

Document Events (External Access)

  • newsletter-generated - Newsletter generation success
  • newsletter-error - Newsletter generation failure

Window Events (Global Access)

  • newsletter-api-success - API success event
  • newsletter-api-error - API error event

🔧 Development

Prerequisites

  • Node.js 16+
  • npm or yarn

Setup

# Install dependencies
npm install

# Build the project
npm run build

# Watch for changes
npm run build:watch

Development Server

# Start dev server
npm run serve

# Start with production mode
npm run serve:prod

Testing

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests in production mode
npm run test:prod

Linting & Formatting

# Lint code
npm run lint

# Format code
npm run format

Documentation

# Build documentation
npm run docs

# Serve documentation locally
npm run docs:serve

# Watch documentation changes
npm run docs:gen:watch

📁 Project Structure

src/
├── ai-prompt.ts              # Main AI prompt component
├── my-element.ts             # Rich text editor component
├── auto-typing-placeholder.ts # Auto-typing placeholder
├── submit-button.ts          # Submit button component
└── test/                     # Test files

dev/                          # Development examples
docs/                         # Generated documentation
docs-src/                     # Documentation source

🌐 Browser Support

  • Chrome 80+
  • Firefox 78+
  • Safari 13+
  • Edge 80+

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests if applicable
  5. Submit a pull request

📞 Support

For support and questions:

  • Lit - Web components library
  • TipTap - Rich text editor
  • Lottie - Animation library
  • Creaditor - AI-powered content creation platform