mazadlive-chat

v1.10.7

Published

4 months ago

A beautiful, customizable AI chat component for Next.js and React with support for auctions, user profiles, and multilingual content

0High
0Medium
0Low

hamza-ennour

react nextjs chat ai-chat chatbot auction typescript ui-component mazadlive multilingual rtl

🎨 MazadLive Chat

A beautiful, highly customizable AI chat component for React and Next.js applications with built-in support for auctions, user profiles, and multilingual content (including RTL).

✨ Features

🎨 Beautiful UI - Modern, animated design with purple gradient theme
🌐 Multilingual - Built-in support for English, Arabic, and RTL languages
🔧 Highly Customizable - 60+ props to customize every aspect
📱 Responsive - Works perfectly on desktop, tablet, and mobile
⚡ TypeScript - Full type safety and IntelliSense support
🎯 Smart Cards - Built-in auction and user profile cards
🎭 Custom Renderers - Replace any component with your own
🔌 API Ready - Easy integration with your backend
🎪 Mock Mode - Built-in mock responses for testing
♿ Accessible - ARIA labels and keyboard shortcuts

📦 Installation

npm install mazadlive-chat
# or
yarn add mazadlive-chat
# or
pnpm add mazadlive-chat

🚀 Quick Start

React

import { MazadLiveChat } from "mazadlive-chat";
import "mazadlive-chat/dist/index.css";

function App() {
  return (
    <div>
      <h1>My App</h1>
      <MazadLiveChat locale="en" />
    </div>
  );
}

Next.js (App Router)

// app/layout.tsx
import { MazadLiveChat } from "mazadlive-chat";
import "mazadlive-chat/dist/index.css";

export default function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  return (
    <html lang={locale}>
      <body>
        {children}
        <MazadLiveChat locale={locale} />
      </body>
    </html>
  );
}

Next.js (Pages Router)

// pages/_app.tsx
import type { AppProps } from "next/app";
import { MazadLiveChat } from "mazadlive-chat";
import "mazadlive-chat/dist/index.css";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <MazadLiveChat locale="en" />
    </>
  );
}

📖 API Reference

Core Props

| Prop | Type | Default | Description | | -------------- | ------------------- | ------- | ----------------------------------------------------- | | locale | string | 'en' | Current locale/language (e.g., 'en', 'ar') | | translations | TranslationConfig | {} | Custom translations for UI text | | rtlSupport | boolean | true | Enable RTL support for Arabic and other RTL languages |

API & Data Handling

| Prop | Type | Default | Description | | ------------------ | ---------------- | ----------- | --------------------------------------------- | | apiEndpoint | string | undefined | API endpoint for sending messages | | apiConfig | APIConfig | {} | API configuration (headers, method, timeout) | | onSendMessage | MessageHandler | undefined | Custom message handler function | | generateResponse | MessageHandler | undefined | Custom response generator | | mockMode | boolean | true | Enable mock/demo mode with built-in responses |

Styling & Theme

| Prop | Type | Default | Description | | ------------ | ------------------ | --------- | ----------------------------------------- | | theme | ThemeConfig | {} | Theme configuration (colors, fonts, etc.) | | className | string | '' | Custom CSS class name | | style | CSSProperties | {} | Custom inline styles | | animations | AnimationConfig | {} | Animation configuration | | position | PositionConfig | {} | Position configuration | | width | string \| number | '440px' | Chat window width | | height | string \| number | '680px' | Chat window height |

Features & Behavior

| Prop | Type | Default | Description | | ----------------------- | --------------- | ------- | ------------------------------------------ | | initialMessages | ChatMessage[] | [...] | Initial messages to display | | showTimestamp | boolean | true | Show/hide timestamp in messages | | autoOpen | boolean | false | Auto-open chat on mount | | autoFocus | boolean | true | Auto-focus input when chat opens | | maxItemsBeforeSeeMore | number | 3 | Max items to show before "See More" button |

Custom Renderers

| Prop | Type | Description | | ----------------------- | -------------------------------- | --------------------------------- | | renderAuction | CustomRenderer | Custom renderer for auction items | | renderUser | CustomRenderer | Custom renderer for user items | | renderSeeMore | (onClick, locale) => ReactNode | Custom "See More" button | | renderTypingIndicator | () => ReactNode | Custom typing indicator | | renderMessage | (message, locale) => ReactNode | Custom message bubble |

Event Handlers

| Prop | Type | Description | | ------------------- | -------------------------------- | ---------------------------------------- | | onOpen | () => void | Callback when chat is opened | | onClose | () => void | Callback when chat is closed | | onMessageSent | (message: string) => void | Callback when a message is sent | | onMessageReceived | (message: ChatMessage) => void | Callback when a message is received | | onAuctionClick | (auction: any) => void | Callback when an auction card is clicked | | onUserClick | (user: any) => void | Callback when a user card is clicked |

🎨 Customization Examples

Custom Theme

<MazadLiveChat
  locale="en"
  theme={{
    primaryColor: "#ff6b6b",
    secondaryColor: "#ffe0e0",
    textColor: "#333",
    fontFamily: "Inter, sans-serif",
  }}
/>

Custom Position

<MazadLiveChat
  locale="en"
  position={{
    position: "bottom-right",
    offsetX: 20,
    offsetY: 20,
    zIndex: 9999,
  }}
/>

Custom Translations

<MazadLiveChat
  locale="ar"
  translations={{
    title: "مساعد خاص",
    status: "متاح الآن",
    placeholder: "اكتب سؤالك...",
    greeting: "أهلاً! كيف يمكنني مساعدتك؟",
  }}
/>

API Integration

<MazadLiveChat
  locale="en"
  mockMode={false}
  apiEndpoint="https://api.example.com/chat"
  apiConfig={{
    method: "POST",
    headers: {
      Authorization: "Bearer YOUR_TOKEN",
      "Content-Type": "application/json",
    },
  }}
  onError={(error) => console.error("Chat error:", error)}
/>

Custom Message Handler

<MazadLiveChat
  locale="en"
  onSendMessage={async (message, locale) => {
    const response = await fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify({ message, locale }),
    });
    const data = await response.json();

    return {
      id: Date.now().toString(),
      role: "assistant",
      content: data.content,
      timestamp: new Date(),
      data: data.cards
        ? {
            type: "auctions",
            items: data.cards,
            showMore: true,
          }
        : undefined,
    };
  }}
/>

Custom Auction Renderer

<MazadLiveChat
  locale="en"
  renderAuction={(auction, locale) => (
    <div className="my-custom-auction-card">
      <h3>{auction.title}</h3>
      <p>{auction.description}</p>
      <span>
        {auction.startingPrice} {auction.currency}
      </span>
    </div>
  )}
/>

Event Handlers

<MazadLiveChat
  locale="en"
  onOpen={() => console.log("Chat opened")}
  onClose={() => console.log("Chat closed")}
  onMessageSent={(message) => console.log("Sent:", message)}
  onAuctionClick={(auction) => {
    window.location.href = `/auctions/${auction.id}`;
  }}
  onUserClick={(user) => {
    window.location.href = `/users/${user.id}`;
  }}
/>

🎯 TypeScript Support

Full TypeScript support with comprehensive type definitions:

import { MazadLiveChat, MazadLiveChatProps, ChatMessage } from "mazadlive-chat";

const chatProps: MazadLiveChatProps = {
  locale: "en",
  mockMode: false,
  onMessageReceived: (message: ChatMessage) => {
    console.log(message.content);
  },
};

<MazadLiveChat {...chatProps} />;

🌐 Internationalization

Supported Languages

English (en)
Arabic (ar) with RTL support
Easily extendable for other languages

Adding Custom Languages

const frenchTranslations = {
  title: "Assistant IA",
  status: "En ligne",
  placeholder: "Tapez votre message...",
  greeting: "Bonjour! Comment puis-je vous aider?",
  seeMore: "Voir plus",
  sendButton: "Envoyer",
};

<MazadLiveChat locale="fr" translations={frenchTranslations} />;

🎨 CSS Variables

Customize the theme using CSS variables:

:root {
  --mazad-primary-color: #your-color;
  --mazad-secondary-color: #your-color;
  --mazad-white-color: #ffffff;
  --mazad-black-color: #1a1a1a;
  --mazad-light-gray: #f8f9fa;
  --mazad-medium-gray: #6c757d;
  --mazad-font-main: "Your Font", sans-serif;
}

🔧 Advanced Usage

Disable Default Styles

<MazadLiveChat
  locale="en"
  disableDefaultStyles={true}
  className="my-custom-chat"
/>

Keyboard Shortcuts

<MazadLiveChat
  locale="en"
  enableKeyboardShortcuts={true}
  keyboardShortcuts={{
    Escape: () => console.log("Close chat"),
    "/": () => console.log("Focus input"),
  }}
/>

Custom CSS Variables

<MazadLiveChat
  locale="en"
  cssVariables={{
    "primary-color": "#ff6b6b",
    "font-main": "Comic Sans MS",
  }}
/>

📱 Responsive Design

The component is fully responsive and adapts to:

Desktop (1024px+)
Tablet (768px - 1023px)
Mobile (< 768px)

♿ Accessibility

ARIA labels for all interactive elements
Keyboard navigation support
Screen reader friendly
Focus management

🤝 Contributing

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

📄 License

🔗 Links

💬 Support

For support, email [email protected] or open an issue on GitHub.

Made with ❤️ by MazadLive

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

🎨 MazadLive Chat

✨ Features

📦 Installation

🚀 Quick Start

React

Next.js (App Router)

Next.js (Pages Router)

📖 API Reference

Core Props

API & Data Handling

Styling & Theme

Features & Behavior

Custom Renderers

Event Handlers

🎨 Customization Examples

Custom Theme

Custom Position

Custom Translations

API Integration

Custom Message Handler

Custom Auction Renderer

Event Handlers

🎯 TypeScript Support

🌐 Internationalization

Supported Languages

Adding Custom Languages

🎨 CSS Variables

🔧 Advanced Usage

Disable Default Styles

Keyboard Shortcuts

Custom CSS Variables

📱 Responsive Design

♿ Accessibility

🤝 Contributing

📄 License

🔗 Links

💬 Support