🤖 @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

Demo interface of @ctv/chat-widget with popup and fullwidth templates

📦 Installation

# NPM
npm install @ctv/chat-widget

# Yarn
yarn add @ctv/chat-widget

# PNPM
pnpm add @ctv/chat-widget

🚀 Quick Start

Basic Usage

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

<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

<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

{
  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

{
  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

Demo interface of @ctv/chat-widget with popup and fullwidth templates

📦 Build & Publish

Build Commands

# Development
npm run dev

# Build library
npm run build:lib

# Build types
npm run build:types

# Preview build
npm run preview

Publish to NPM

# 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

# 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

# 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 file for details.

🆘 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Documentation: Wiki

Made with ❤️ by CTV Team