stephtech-ui

Beautiful interactive UI components for Baileys WhatsApp Bot. Create stunning carousels, buttons, and lists with ease!

✨ Features

• 🎠 Carousels - Beautiful image galleries with interactive buttons
• 🔘 Buttons - Quick reply and URL buttons
• 📋 Lists - Interactive selection lists
• 🌍 i18n Support - Built-in translation support
• 🎯 Type Safe - Full TypeScript definitions (coming soon)
• 🚀 Easy to Use - Simple, intuitive API

📦 Installation

npm install stephtech-ui

🚀 Quick Start

Class Style (Recommended)

const makeWASocket = require('@whiskeysockets/baileys');
const StephUI = require('stephtech-ui');

const sock = makeWASocket(/* your config */);
const ui = new StephUI(sock);

// Send carousel
await ui.carousel(jid, {
    header: "🎵 Search Results",
    cards: [
        {
            title: "Amazing Video",
            body: "👤 Creator\n⏱️ 2:30\n❤️ 100K likes",
            image: "https://example.com/image.jpg",
            buttons: [
                { id: ".download", text: "📥 Download" },
                { id: "", text: "🔗 View", type: "url", url: "https://youtube.com" }
            ]
        }
    ]
});

// Send buttons
await ui.buttons(jid, {
    text: "Choose an option:",
    footer: "My Awesome Bot",
    buttons: [
        { id: ".option1", text: "✅ Option 1" },
        { id: ".option2", text: "⭐ Option 2" }
    ],
    image: "https://example.com/header.jpg"
});

// Send list
await ui.list(jid, {
    text: "Select a category",
    buttonText: "📋 View Options",
    sections: [
        {
            title: "🎮 Entertainment",
            rows: [
                { id: ".music", title: "Music", description: "Play music" },
                { id: ".video", title: "Videos", description: "Watch videos" }
            ]
        }
    ]
});

Functional Style

const { sendCarousel, sendButtons, sendList } = require('stephtech-ui');

await sendCarousel(sock, jid, { /* options */ });
await sendButtons(sock, jid, { /* options */ });
await sendList(sock, jid, { /* options */ });

📚 API Reference

Carousel

await ui.carousel(jid, {
    header: string,           // Header text
    cards: [                  // Array of cards (max 6)
        {
            title: string,    // Card title
            body: string,     // Card description
            image: string,    // Image URL (optional)
            buttons: [        // Array of buttons
                {
                    id: string,      // Button ID
                    text: string,    // Button text
                    type: "quick_reply" | "cta_url", // Button type
                    url: string      // URL (for cta_url type)
                }
            ]
        }
    ],
    quoted: object,          // Quoted message (optional)
    maxCards: number         // Max cards to display (default: 6)
});

Buttons

await ui.buttons(jid, {
    text: string,            // Message text
    footer: string,          // Footer text (optional)
    buttons: [               // Array of buttons
        {
            id: string,      // Button ID
            text: string     // Button text
        }
    ],
    image: string,           // Header image URL (optional)
    video: string,           // Header video URL (optional)
    quoted: object           // Quoted message (optional)
});

URL Buttons

await ui.urlButtons(jid, {
    text: string,
    footer: string,
    buttons: [
        {
            text: string,    // Button text
            url: string      // Button URL
        }
    ],
    image: string,
    quoted: object
});

Mixed Buttons

await ui.mixedButtons(jid, {
    text: string,
    footer: string,
    buttons: [
        { id: ".cmd", text: "Quick Reply" },
        { text: "Visit", url: "https://...", type: "url" }
    ]
});

List

await ui.list(jid, {
    text: string,
    title: string,           // List title (optional)
    buttonText: string,      // Button text
    footer: string,          // Footer (optional)
    sections: [              // Array of sections
        {
            title: string,   // Section title
            rows: [          // Array of rows
                {
                    id: string,         // Row ID
                    title: string,      // Row title
                    description: string // Row description (optional)
                }
            ]
        }
    ],
    quoted: object
});

🌍 Translation Support

await ui.carousel(jid, {
    header: "Results",
    phoneNumber: "1234567890",
    userConfigManager: yourConfigManager,
    translationKey: "search.results",
    translationVars: { count: 5 },
    cards: [/* ... */]
});

🎯 Examples

Check out the examples folder for more detailed examples.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

MIT © StephDev

🔗 Links

• GitHub
• npm
• Issues

⭐ Show your support

Give a ⭐️ if this project helped you!