npm package: @kmalek101/chatana
Description: A lightweight and customizable React chat UI component library.
Author: Malek Kaouche
Latest version: 1.0.1

# 💬 Chatana — A Lightweight Chat UI Library for React

> Elegant, responsive, and fully customizable chat components built with React + Tailwind CSS.

## 📷 Screenshots

<p align="center">
  <img src="public/screenshots/blue.png" width="45%" alt="Blue theme" />
  <img src="public/screenshots/red.png" width="45%" alt="Red theme" />
</p>

<p align="center">
  <img src="public/screenshots/light.png" width="45%" alt="Light theme" />
  <img src="public/screenshots/dark.png" width="45%" alt="Dark theme" />
</p>

<p align="center">
  <img src="public/screenshots/purple.png" width="45%" alt="Purple theme" />
  <img src="public/screenshots/pink.png" width="45%" alt="Pink theme" />
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@kmalek101/chatana">
    <img src="https://img.shields.io/npm/v/@kmalek101/chatana.svg?color=cb3837&logo=npm" alt="npm version" />
  </a>
  <a href="https://www.npmjs.com/package/@kmalek101/chatana">
    <img src="https://img.shields.io/npm/dm/@kmalek101/chatana.svg?color=blue" alt="npm downloads" />
  </a>
  <a href="https://github.com/KMalek101/Chatana/blob/main/LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license" />
  </a>
  <a href="https://github.com/KMalek101/Chatana/stargazers">
    <img src="https://img.shields.io/github/stars/KMalek101/Chatana?style=social" alt="GitHub stars" />
  </a>
</p>

---

## 🚀 Features

- ⚡ **Lightweight and fast** — built with Vite and React
- 🎨 **Fully customizable themes** — light, dark, blue and others ... or your own custom CSS variables
- 💬 **Beautiful UI** — includes message bubbles, avatars, file previews, and typing indicators
- 🧠 **Smart layout** — responsive and adaptive to any parent container
- ⚙️ **Easy integration** — plug and play in any React project
- 💾 **Optional utilities** — message statuses, emoji picker, custom headers, and more
- 🧩 **TypeScript ready** — full type definitions included

---

## 📦 Installation

```bash
npm install @kmalek101/chatana
# or
yarn add @kmalek101/chatana
```

Make sure you also have `react` and `react-dom` installed.

## 💻 Basic Usage :

```javascript
import { ChatContainer } from "@kmalek101/chatana";
import "@kmalek101/chatana/dist/style.css";

export default function App() {
  const currentUserId = "user-1";

  const initialMessages = [
    {
      id: 1,
      content: "Hello there 👋",
      senderId: "user-2",
      timestamp: Date.now(),
      status: "delivered",
    },
  ];

  return (
    <ChatContainer
      currentUserId={currentUserId}
      initialMessages={initialMessages}
      onSendMessage={(msg) => console.log("Sent:", msg)}
      showHeader
      showInput
      autoScroll
    />
  );
}
```

## 🎨Theming :

Chatana comes with a pre built in themes which are :
light - dark - blue - purple - pink - red

but you can always add yours by either creating a theme and passing it through the prop **theme** we'll see it later in the docs ... or by creating your own theme in your css file like so :

```css
[data-theme="your_theme_name"] {

--chat-bg: #ffffff; <---- your colors

--chat-text: #0f172a;

--chat-primary: #2563eb;

--chat-primary-hover: #1e40af;

--chat-primary-text: #ffffff;



--chat-header-bg: #f9fafb;

--chat-header-title: #0f172a;

--chat-header-subtext: #6b7280;



--chat-bubble-user-bg: #2563eb;

--chat-bubble-other-bg: #f1f5f9;

--chat-bubble-other-text: #1e293b;



--chat-btn-filled-bg: var(--chat-primary);

--chat-btn-filled-hover: var(--chat-primary-hover);

--chat-btn-filled-text: #ffffff;



--chat-btn-ghost-text: #64748b;

--chat-btn-ghost-hover-bg: #f8fafc;



--chat-border: #e2e8f0;

--chat-radius: 9999px;



--chat-icon: #64748b;

--chat-icon-color: #94a3b8;

--chat-icon-hover-color: #334155;

--chat-icon-hover-bg: #f1f5f9;



--chat-input-bg: #f8fafc;

--chat-input-text: #0f172a;

--chat-input-placeholder: #94a3b8;

--chat-input-border: #cbd5e1;

--chat-input-border-focus: var(--chat-primary);

--chat-input-bg-focus: #ffffff;



--chat-send-bg: var(--chat-primary);

--chat-send-hover-bg: var(--chat-primary-hover);

--chat-send-text: #ffffff;

--chat-send-disabled-bg: #e2e8f0;

--chat-send-disabled-text: #94a3b8;



--chat-timestamp-text: #64748b;

--chat-timestamp-line: #e2e8f0;



--chat-scrollbar-thumb: #cbd5e1;

--chat-scrollbar-track: transparent;



--chat-timestamp-margin: 0.5rem;

}
```

or you can just modify the exisitng themes to make them match your own personal preference .

## 📄 Docs :

## ⚙️ Props

| Prop                         | Type                                                                                                           | Default   | Description                                                         |
| ---------------------------- | -------------------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------- |
| **children**                 | `ReactNode`                                                                                                    | -         | Custom elements to render inside the chat container                 |
| **header**                   | `ReactNode`                                                                                                    | -         | Custom header component (e.g., user info, call buttons)             |
| **footer**                   | `ReactNode`                                                                                                    | -         | Custom footer element (e.g., "End of conversation")                 |
| **messageList**              | `ReactNode`                                                                                                    | -         | Custom message list component                                       |
| **messageBubble**            | `ReactElement`                                                                                                 | -         | Custom message bubble component                                     |
| **input**                    | `(params: { value: string; onChange: (e) => void; onKeyDown: (e) => void; onSend: () => void; }) => ReactNode` | -         | Fully customizable input component                                  |
| **initialMessages**          | `Message[]`                                                                                                    | `[]`      | Array of initial chat messages                                      |
| **currentUserId**            | `string`                                                                                                       | -         | ID of the current user (used to differentiate messages)             |
| **senderAvatar**             | `string`                                                                                                       | -         | Avatar URL of the sender (current user)                             |
| **autoScroll**               | `boolean`                                                                                                      | `true`    | Automatically scrolls to the latest message when a new one is added |
| **showHeader**               | `boolean`                                                                                                      | `true`    | Toggle visibility of the header                                     |
| **showInput**                | `boolean`                                                                                                      | `true`    | Toggle visibility of the input area                                 |
| **showScrollBar**            | `boolean`                                                                                                      | `false`   | Displays scrollbar in the message list                              |
| **showTypingIndicator**      | `boolean`                                                                                                      | `false`   | Displays typing indicator when active                               |
| **showMessagesStatus**       | `boolean`                                                                                                      | -         | Shows message statuses (e.g., sending, delivered, seen)             |
| **showActionsBar**           | `boolean`                                                                                                      | `false`   | Shows actions bar for messages (e.g., reactions, menu)              |
| **showActionsBarMethod**     | `"hover"` \| `"right-click"` \| `"left-click"`                                                                 | `"hover"` | Determines how the actions bar appears                              |
| **showHeaderIcons**          | `boolean`                                                                                                      | `true`    | Displays icons (call, video, menu) in the header                    |
| **showInputIcons**           | `boolean`                                                                                                      | `true`    | Displays icons (emoji, upload, etc.) in the input field             |
| **showTimestampCentered**    | `boolean`                                                                                                      | `true`    | Centers timestamps between grouped messages                         |
| **showTimeStamps**           | `boolean`                                                                                                      | `true`    | Displays timestamps for individual messages                         |
| **className**                | `string`                                                                                                       | `""`      | Custom CSS classes applied to the chat container                    |
| **previewFileModal**         | `ReactElement<FilePreviewModalProps>`                                                                          | -         | Custom file preview modal component                                 |
| **fileBubble**               | `ReactElement<fileBubbleProps>`                                                                                | -         | Custom file message bubble component                                |
| **showDownloadButton**       | `boolean`                                                                                                      | `true`    | Toggles visibility of download button in file bubbles               |
| **showEmojisButton**         | `boolean`                                                                                                      | `true`    | Toggles visibility of emoji button in the input bar                 |
| **theme**                    | `"light"` \| `"dark"` \| `string`                                                                              | `"light"` | Defines the current theme or custom theme name                      |
| **senderMessageClassName**   | `string`                                                                                                       | -         | Additional styles for messages sent by the current user             |
| **receiverMessageClassName** | `string`                                                                                                       | -         | Additional styles for messages received from others                 |
| **onSendMessage**            | `(message: string) => void`                                                                                    | -         | Callback triggered when a message is sent                           |
| **onUploadFile**             | `(file: File) => void`                                                                                         | -         | Callback triggered when a file is uploaded                          |
| **onDownloadFile**           | `(file: any) => void`                                                                                          | -         | Callback triggered when a file is downloaded                        |
| **onPreviewFile**            | `(file: any) => void`                                                                                          | -         | Callback triggered when a file is previewed                         |
| **onClickEmojisButton**      | `() => void`                                                                                                   | -         | Callback triggered when the emoji button is clicked                 |

## 🧑‍💻 Contributing

Contributions, issues, and feature requests are welcome!  
Feel free to fork this repository and submit a pull request.