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

``bash
npm install stephtech-ui
`

🚀 Quick Start

$3

`javascript
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" }
]
}
]
});
`

$3

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

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

📚 API Reference

$3

`javascript
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)
});
`

$3

`javascript
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)
});
`

$3

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

$3

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

$3

`javascript
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

`javascript
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!