npm package: @oolong2k/chat-widget
Description: A modern, customizable AI chat widget for React applications
Author: CTV Team
Latest version: 1.0.2

# 🤖 @ctv/chat-widget

A modern, customizable AI chat widget library for React applications. Built with TypeScript and Tailwind CSS, this package provides a beautiful, responsive chat interface that can be easily integrated into any React project.

## 🎯 What is @ctv/chat-widget?

**@ctv/chat-widget** is a modern React component library designed to easily integrate AI chat functionality into your React applications. It provides:

- **Floating Chat Widget**: Add a non-intrusive chat button that opens a popup window
- **Full-width Chat Interface**: Create dedicated chat pages with a full-screen interface
- **Template System**: Choose between popup and fullwidth templates with pre-configured settings
- **API Integration**: Connect with any AI backend through a simple callback function
- **Task Creation**: AI chatbot can help create and manage tasks through action responses
- **Customizable**: Easy to customize colors, themes, and positioning to match your brand
- **TypeScript Support**: Full type safety and IntelliSense for better developer experience

## 🛠️ Tech Stack

- **React 18+** - UI framework
- **TypeScript** - Type safety
- **Tailwind CSS** - Styling
- **Vite** - Build tool
- **react-markdown** - Markdown rendering
- **remark-gfm** - GitHub Flavored Markdown

## 🖼️ Demo

![Chat Widget Demo](./public/image/pagg-demo.png)

_Demo interface of @ctv/chat-widget with popup and fullwidth templates_

## 📦 Installation

```bash
# NPM
npm install @ctv/chat-widget

# Yarn
yarn add @ctv/chat-widget

# PNPM
pnpm add @ctv/chat-widget
```

## 🚀 Quick Start

### Basic Usage

```tsx
import { ChatWidget } from '@ctv/chat-widget'

function App() {
  // Định nghĩa API function
  const chatApi = async (data) => {
    const response = await fetch('http://localhost:4001/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        user_id: 1,
        conversation_id: 1,
        message: data.message,
        type: 'chat'
      })
    })
    return response.json()
  }

  return (
    <div>
      <h1>My Website</h1>

      {/* Popup Widget */}
      <ChatWidget
        chatApi={chatApi}
        templateId='popup'
        action={(data) => console.log('Action triggered:', data)}
      />
    </div>
  )
}
```

## 📖 API Reference

### Props

| Prop         | Type                                               | Required | Default | Description                   |
| ------------ | -------------------------------------------------- | -------- | ------- | ----------------------------- |
| `chatApi`    | `(data: ChatApiInput) => Promise<ChatApiResponse>` | ✅       | -       | Function to call AI API       |
| `templateId` | `"popup" \| "fullwidth"`                           | ✅       | -       | Widget template to use        |
| `action`     | `(data: unknown) => void`                          | ❌       | -       | Callback for action responses |

## 🎨 Template System

### Popup Template

```tsx
<ChatWidget chatApi={chatApi} templateId='popup' action={handleAction} />
```

**Features:**

- Floating button in screen corner
- Popup window on click
- Responsive design
- Customizable position (bottom-right, bottom-left, top-right, top-left)

### Fullwidth Template

```tsx
<ChatWidget chatApi={chatApi} templateId='fullwidth' action={handleAction} />
```

**Features:**

- Full-screen interface
- Perfect for dedicated chat pages
- Auto-open by default
- Optimized for desktop and mobile

## ⚙️ Template Configuration

### Popup Template Settings

```typescript
{
  title: 'CTV AI Assistant',
  primaryColor: '#3E63E0',
  welcomeMessage: 'Hello! What can I assist you with today?',
  buttonText: 'Chat with AI',
  placeholder: 'Type a message...',
  position: 'bottom-right',
  autoOpen: false,
  showTimestamp: false,
  backgroundColor: '#F6F8FE',
  aiBubbleColor: '#FFFFFF',
  userBubbleColor: '#3E63E0'
}
```

### Fullwidth Template Settings

```typescript
{
  title: 'CTV AI Assistant',
  primaryColor: '#3E63E0',
  welcomeMessage: 'Hello! What can I assist you with today?',
  buttonText: 'Chat with AI',
  placeholder: 'Type a message...',
  autoOpen: true,  // Khác với popup
  showTimestamp: false,
  backgroundColor: '#F6F8FE',
  aiBubbleColor: '#FFFFFF',
  userBubbleColor: '#3E63E0'
}
```

## 🖼️ Demo

![Chat Widget Demo](./public/image/pagg-demo.png)

_Demo interface of @ctv/chat-widget with popup and fullwidth templates_

## 📦 Build & Publish

### Build Commands

```bash
# Development
npm run dev

# Build library
npm run build:lib

# Build types
npm run build:types

# Preview build
npm run preview
```

### Publish to NPM

```bash
# 1. Login to NPM
npm login

# 2. Update version in package.json
npm version patch  # or minor, major

# 3. Build library
npm run build:lib

# 4. Publish package
npm publish

# Or publish with tag
npm publish --tag beta
```

## 🔄 Development Workflow

### Local Development

```bash
# 1. Clone repository
git clone <repository-url>
cd ctv-chatbox

# 2. Install dependencies
npm install

# 3. Start development server
npm run dev

# 4. Build library
npm run build:lib
```

### Testing

```bash
# Lint code
npm run lint

# Fix linting issues
npm run lint:fix

# Format code
npm run format

# Check formatting
npm run format:check
```

## 🤝 Contributing

1. Fork the repository
2. Create feature branch: `git checkout -b feature/amazing-feature`
3. Commit changes: `git commit -m 'Add amazing feature'`
4. Push to branch: `git push origin feature/amazing-feature`
5. Open Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🆘 Support

- **Issues**: [GitHub Issues](https://github.com/ctv/chat-widget/issues)
- **Discussions**: [GitHub Discussions](https://github.com/ctv/chat-widget/discussions)
- **Documentation**: [Wiki](https://github.com/ctv/chat-widget/wiki)

---

**Made with ❤️ by CTV Team**