ChatFTV

ChatFTV adalah aplikasi chat berbasis web yang terinspirasi dari ChatGPT. Pengguna dapat berbicara dengan asisten AI, mengelola banyak percakapan, dan menerima balasan secara streaming (kata demi kata) seperti pengalaman chat modern.

Aplikasi ini dikembangkan sebagai proyek frontend React dengan integrasi model AI Qwen dari Alibaba Cloud (DashScope).

---

Catatan Pengembangan

Proyek ini dikembangkan dengan pendekatan pair programming / vibe coding menggunakan:

Aspek	Detail
Editor	Qoder — text editor dengan dukungan AI untuk coding
Model AI (pengembangan)	Qwen3.6-Plus (Alibaba) — digunakan saat membangun fitur, komponen, dan logika aplikasi
Inspirasi UI/UX	ChatGPT — layout sidebar + area chat, bubble pesan, saran prompt awal

ChatFTV = Chat + inisial pengembang (FTV). Nama ini mencerminkan identitas personal proyek sekaligus nuansa asisten chat seperti ChatGPT.

---

Tech Stack

• React 18 + TypeScript
• Vite 6 — bundler & dev server
• Tailwind CSS — styling (tema gelap, komponen UI custom)
• react-markdown + remark-gfm — render Markdown pada balasan AI
• lucide-react — ikon
• Alibaba DashScope API (mode kompatibel OpenAI) — model qwen-plus

---

Alur Sistem

Diagram berikut menggambarkan alur data dari input pengguna hingga balasan AI:

flowchart TB
    subgraph UI["Frontend (React)"]
        WS[WelcomeScreen / Saran prompt]
        MI[MessageInput]
        APP[App.tsx - State & logika chat]
        SB[Sidebar - daftar percakapan]
        CA[ChatArea]
        MB[MessageBubble - Markdown]
        LS[(localStorage)]
    end

    subgraph API["Alibaba DashScope"]
        QWEN[Qwen API - stream SSE]
    end

    WS -->|klik saran| APP
    MI -->|kirim pesan| APP
    APP -->|simpan / baca| LS
    APP -->|streamChat| QWEN
    QWEN -->|token per chunk| APP
    APP -->|update pesan assistant| CA
    CA --> MB
    SB -->|pilih / hapus / rename| APP

Loading

Langkah utama saat pengguna mengirim pesan

1. MessageInput — pengguna mengetik dan menekan Enter (atau tombol kirim). Shift+Enter untuk baris baru.
2. App.tsx — membuat pesan user, lalu:
   • Jika belum ada percakapan aktif → buat Conversation baru (judul dari 40 karakter pertama pesan).
   • Menyimpan pesan ke state via useLocalStorage (otomatis persist ke localStorage).
3. api.ts (streamChat) — mengirim riwayat pesan ke endpoint DashScope dengan stream: true.
4. Parsing SSE — setiap chunk data: {...} di-parse; konten delta ditambahkan ke pesan assistant secara real-time.
5. ChatArea + MessageBubble — UI diperbarui; balasan AI dirender sebagai Markdown (tabel, list, code block, dll. via GFM).
6. Selesai / error — streaming berhenti; state final disimpan ke localStorage.

---

Struktur Proyek

chat-ftv/
├── public/
│   └── images/logo.png      # Logo aplikasi
├── src/
│   ├── App.tsx              # Orkestrasi state chat & streaming
│   ├── main.tsx             # Entry point React
│   ├── components/
│   │   ├── Sidebar.tsx      # Daftar percakapan, search, rename, delete
│   │   ├── ChatArea.tsx     # Daftar bubble + auto-scroll
│   │   ├── MessageBubble.tsx# Bubble user/AI + copy + Markdown
│   │   ├── MessageInput.tsx # Input + tombol stop/kirim
│   │   ├── WelcomeScreen.tsx# Layar awal + saran prompt
│   │   └── ui/              # Button, Input, Textarea (shadcn-style)
│   ├── hooks/
│   │   └── useLocalStorage.ts # CRUD percakapan di browser
│   ├── services/
│   │   └── api.ts           # Fetch streaming ke Qwen API
│   ├── types/
│   │   └── index.ts         # Message, Conversation
│   └── lib/utils.ts         # cn() helper (clsx + tailwind-merge)
├── .env.example
├── vite.config.ts
└── package.json

---

Fitur Utama

• 💬 Multi-conversation — banyak thread chat dengan judul otomatis
• 🔍 Pencarian percakapan di sidebar
• ✏️ Rename dan 🗑️ hapus percakapan
• 📅 Pengelompokan percakapan: Today, Yesterday, 7 hari, 30 hari, Older
• ⚡ Streaming response — balasan muncul bertahap
• 📝 Markdown + GFM pada balasan AI (code, tabel, dll.)
• 📋 Salin balasan AI ke clipboard
• 📱 Responsif — sidebar drawer di mobile
• 🌙 Tema gelap default
• 💾 Persistensi lokal — data tersimpan di browser (chatftv_conversations)

---

Cara Menjalankan

Prasyarat

• Node.js 18+
• API key Alibaba DashScope

Instalasi

npm install

Konfigurasi environment

Salin .env.example menjadi .env dan isi variabel berikut:

VITE_QWEN_API_URL=https://dashscope-intl.aliyuncs.com/compatible-mode/v1/chat/completions
VITE_QWEN_API_KEY=sk-your-api-key-here

Penting: Jangan commit file .env ke repository. API key hanya untuk development pribadi.

Development

npm run dev

Buka URL yang ditampilkan Vite (biasanya http://localhost:5173).

Build production

npm run build
npm run preview

---

Kelebihan

Kelebihan	Penjelasan
Arsitektur sederhana & mudah dipahami	Satu halaman (App.tsx) mengorkestrasi alur chat; pemisahan komponen, hook, dan service jelas.
UX mirip ChatGPT	Sidebar percakapan, welcome screen dengan saran, bubble chat, streaming — familiar bagi pengguna.
Streaming real-time	Implementasi manual SSE di api.ts tanpa library berat; respons terasa cepat.
Markdown kaya	Balasan AI mendukung format teknis (kode, list, tabel) lewat react-markdown + GFM.
Tanpa backend wajib	Deploy statis (Vite build) sudah cukup untuk prototipe/demo.
Persistensi offline	Riwayat chat tetap ada setelah refresh berkat localStorage.
Stack modern	React 18, TypeScript, Vite 6, Tailwind — mudah dikembangkan lebih lanjut.
Dikembangkan dengan AI-assisted coding	Workflow Qoder + Qwen mempercepat iterasi UI dan logika.

---

Kekurangan & Risiko

Kekurangan	Penjelasan
API key di frontend	Variabel VITE_* ikut ter-bundle; siapa pun bisa melihat key di DevTools. Untuk production sebaiknya ada backend proxy.
Tidak ada autentikasi	Semua pengguna browser yang sama berbagi data localStorage; tidak ada akun/login.
Data hanya lokal	Tidak ada sinkronisasi antar perangkat atau backup cloud.
Tombol Stop belum terhubung penuh	AbortController dideklarasikan di App.tsx tetapi belum diteruskan ke fetch di api.ts, sehingga menghentikan stream mungkin tidak memutus request API.
Tanpa batas konteks / token	Riwayat penuh dikirim setiap request; percakapan panjang bisa mahal atau gagal.
Settings dinonaktifkan	Modal pengaturan di-comment; tidak ada UI untuk ganti model/temperature.
react-router-dom terpasang tapi tidak dipakai	Dependency tambahan tanpa routing multi-halaman.
Endpoint API harus tepat	URL harus mengarah ke /chat/completions; salah konfigurasi .env menyebabkan error.
Tidak ada unit/e2e test	Regresi fitur bergantung pada testing manual.

---

Roadmap (Saran Pengembangan)

• Backend proxy untuk menyembunyikan API key
• Hubungkan AbortSignal ke streamChat agar tombol Stop benar-benar memutus stream
• Batasi jumlah pesan / token yang dikirim ke API
• Autentikasi & penyimpanan cloud (opsional)
• Aktifkan kembali Settings (model, system prompt, temperature)
• Export/import percakapan (JSON)
• Dukungan bahasa Indonesia penuh di UI

---

Lisensi

Proyek pribadi — hak cipta mengikuti kebijakan pemilik repositori.

---

Dibuat dengan ❤️ menggunakan React, Vite, Qoder, dan Qwen3.6-Plus — terinspirasi dari ChatGPT.