# 🤖 AI Writing Assistant - Hướng dẫn cài đặt và sử dụng

## Cài đặt API Key

### 1. Lấy Claude AI API Key
- Truy cập: https://console.anthropic.com/
- Đăng nhập/tạo tài khoản
- Vào "API Keys" và tạo key mới
- Copy API key

### 2. Cập nhật file .env
Mở file `.env` và cập nhật các dòng sau:
```env
ANTHROPIC_API_KEY=your-actual-api-key-here
ANTHROPIC_MODEL=claude-3-sonnet-20240229
ANTHROPIC_MAX_TOKENS_STRUCTURE=3000
ANTHROPIC_MAX_TOKENS_ARTICLE=8000
```

**Model options có thể dùng:**
- `claude-3-sonnet-20240229` (recommended - cân bằng tốc độ và chất lượng)
- `claude-3-opus-20240229` (chất lượng cao nhất nhưng chậm hơn)
- `claude-3-haiku-20240307` (nhanh nhất nhưng chất lượng thấp hơn)

**Token limits:**
- `ANTHROPIC_MAX_TOKENS_STRUCTURE`: 3000 (cho việc tạo cấu trúc)
- `ANTHROPIC_MAX_TOKENS_ARTICLE`: 8000 (cho việc viết bài - có thể tăng lên 8000+ cho bài dài)

## Cách sử dụng AI Writing Assistant

### 🚀 Khởi động tính năng AI
1. Vào trang tạo bài viết: `/admin/mattock/articles/create`
2. Nhấn vào nút **🧠 AI Assistant** (màu xanh lá)

### 📝 Step 1: Nhập thông tin bài viết
- **Title**: Nhập tiêu đề bài viết (có thể copy từ form chính nếu đã nhập)
- **Description**: Mô tả ngắn gọn nội dung bài viết muốn viết
- Nhấn **"Generate Structure"** để AI phân tích và tạo cấu trúc

### 🏗️ Step 2: Xem cấu trúc & SEO Tags
AI sẽ tạo ra:
- **SEO Tags**: 5-8 từ khóa để tối ưu SEO
- **Article Structure**: Cấu trúc chi tiết các phần của bài viết

**Các thao tác:**
- **Back**: Quay lại step 1
- **Apply Changes**: Nếu nhập thêm yêu cầu chỉnh sửa
- **Write Article**: Bắt đầu viết bài
- **Close**: Đóng dialog

### ✍️ Step 3: AI viết bài
- AI sẽ viết bài **realtime** dựa trên cấu trúc đã duyệt
- Có thể xem nội dung được viết từng phần
- **Modification Request**: Nhập yêu cầu chỉnh sửa nếu cần
- **Apply Changes**: Áp dụng chỉnh sửa
- **Save to Article**: Lưu nội dung vào editor chính

## ✨ Tính năng nổi bật

### 🎯 AI thông minh
- Phân tích chuyên sâu về chủ đề công nghệ
- Tối ưu SEO tự động
- Cấu trúc bài viết logic, dễ đọc

### 🔄 Tương tác linh hoạt
- Chỉnh sửa cấu trúc trước khi viết
- Sửa nội dung theo yêu cầu cụ thể  
- Lưu lịch sử conversation

### 💾 Tích hợp hoàn hảo
- Nội dung HTML tự động điền vào TipTap editor
- Tags SEO tự động thêm vào form
- Title/description sync với form chính
- HTML format tương thích 100% với TipTap

## 🔧 Troubleshooting

### Lỗi thường gặp:

**"Network error occurred"**
- Kiểm tra kết nối internet
- Đảm bảo API key đã được cấu hình đúng

**"Failed to generate structure"**  
- API key có thể đã hết quota hoặc không hợp lệ
- Kiểm tra console browser để xem lỗi chi tiết

**Dialog không mở được**
- Đảm bảo có quyền tạo bài viết
- Refresh trang và thử lại

### Debug:
- Mở DevTools > Console để xem lỗi chi tiết
- Kiểm tra Network tab xem request/response

## 📊 Database Structure

System tự động lưu:
- **conversations**: Lịch sử chat với AI
- **messages**: Từng tin nhắn trong conversation  
- **ai_responses**: Kết quả AI tạo ra (structure, content)

## ⚡ Streaming Realtime Technology

### 🔍 Cách hoạt động:
- **Server-Sent Events (SSE)**: Laravel `StreamedResponse` → Browser `EventSource`
- **KHÔNG dùng Socket.IO**: Không cần WebSocket cho use case này
- **Flow**: Claude API Stream → Laravel → Browser (realtime)

### 🎯 Trải nghiệm người dùng:
- ✅ **Từng từ xuất hiện**: AI viết realtime như "đánh máy"
- ✅ **Không đợi hoàn thành**: Thấy nội dung ngay lập tức 
- ✅ **Progressive rendering**: Bài viết hiện dần từng phần

### 🛠️ Technical Details:
- `Content-Type: text/event-stream`
- Streaming chunks từ Claude API
- Real-time DOM updates với Vue.js
- Auto-scroll để follow nội dung mới

## 🚀 Performance Tips

1. **Chuẩn bị thông tin**: Có sẵn title và description rõ ràng
2. **Yêu cầu cụ thể**: Đưa ra hướng dẫn chi tiết trong modification request
3. **Kiểm tra trước**: Review structure kỹ trước khi viết bài

---

## 🆘 Hỗ trợ

Nếu gặp vấn đề, vui lòng:
1. Kiểm tra file log: `storage/logs/laravel.log`  
2. Kiểm tra browser console
3. Liên hệ developer với thông tin lỗi chi tiết

**Chúc bạn viết bài hiệu quả với AI! 🎉**