@creaditor/ai-prompt-textbox

v1.0.15

Published

10 days ago

AI-powered prompt components for Creaditor integration

0High
0Medium
0Low

creaditor

web-components lit-element typescript lit ai prompt creaditor tiptap editor

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/[email protected]/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>

Complete Example with RTL Support

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://unpkg.com/cdtr-ai-prompt@latest/ai-prompt.js"></script>
</head>
<body>
  <cdtr-ai-prompt-editor id="editor"></cdtr-ai-prompt-editor>
  
  <script>
    const editor = document.getElementById('editor');
    
    // Set placeholder suggestions
    editor.placeholderSuggestions = [
      "Create a weekly product roundup newsletter...",
      "Build a tech tips newsletter for beginners...",
      "Design a curated content newsletter for your industry...",
      "Start a personal growth newsletter with actionable advice..."
    ];
    
    // Set direction (RTL/LTR support)
    editor.direction = "rtl";
    
    // Handle submit event
    editor.addEventListener('submit', (event) => {
      console.log('Submit event:', event.detail);
    });
    
    // Handle successful newsletter generation
    editor.addEventListener('submit-success', (event) => {
      console.log('Submit success event:', event.detail);
      document.getElementById('submit-result').textContent = JSON.stringify(event.detail.data, null, 2);
    });
    
    // Handle errors
    editor.addEventListener('submit-error', (event) => {
      console.log('Submit error event:', event.detail);
    });
  </script>
  
  <!-- Display results -->
  <div>
    <pre id="submit-result"></pre>
  </div>
</body>
</html>

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

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

📞 Support

For support and questions:

GitHub Issues: Create an issue
Documentation: View docs

🔗 Related Projects

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Creaditor AI Prompt Components

🚀 Features

📦 Components

<ai-prompt>

<cdtr-ai-prompt-editor>

<auto-typing-placeholder>

<cdtr-submit-button>

🛠 Installation

NPM

CDN

📖 Usage

Basic AI Prompt

Rich Text Editor

Complete Example with RTL Support

Auto-typing Placeholder

🎨 Styling

📡 API Integration

Endpoint

Request Format

Response Format

🎯 Events

Component Events

Document Events (External Access)

Window Events (Global Access)

🔧 Development

Prerequisites

Setup

Development Server

Testing

Linting & Formatting

Documentation

📁 Project Structure

🌐 Browser Support

📄 License

🤝 Contributing

📞 Support

🔗 Related Projects

`<ai-prompt>`

`<cdtr-ai-prompt-editor>`

`<auto-typing-placeholder>`

`<cdtr-submit-button>`