AI Agent / Chatbot AI

TanyaToko AI — Chatbot CS Toko Online (RAG)

Platform chatbot AI untuk toko online yang secara otomatis menjawab pertanyaan pembeli berdasarkan katalog produk, FAQ, dan kebijakan toko. Jika tidak dapat menjawab, chatbot akan menawarkan eskalasi ke CS manusia. Dilengkapi fitur batasan biaya AI harian dan riwayat percakapan untuk pemilik toko.

Pakai template

Chatbot CS Toko Online Bertenaga AI

Problem

Pemilik toko online kecil sering kewalahan membalas pertanyaan repetitif dari pembeli (harga, stok, kebijakan pengiriman) yang menghabiskan waktu dan tenaga, sehingga menghambat pertumbuhan bisnis atau respons CS menjadi lambat.

Goals

Menjawab 80% pertanyaan pembeli tentang produk dan kebijakan toko secara otomatis dengan akurat dalam waktu < 5 detik.
Mengurangi beban kerja CS pemilik toko hingga 50% untuk pertanyaan repetitif.
Memastikan biaya operasional AI tidak melebihi batas harian yang ditetapkan oleh pemilik.
Menyediakan riwayat percakapan yang bisa dicari dalam < 2 detik untuk 10.000 pesan.

Non-Goals

Dukungan multi-toko atau multi-bahasa.
Integrasi real-time dengan aplikasi CS manusia (hanya notifikasi via email/dashboard).
Fitur analisis sentimen atau rekomendasi produk dari percakapan.
Input suara atau output suara untuk chatbot.
Reset password manual, akan diimplementasikan self-service via email.

Target Users

Pemilik Toko Online Kecil — Mengotomatisasi jawaban pertanyaan pembeli, mengelola data toko, memantau biaya AI, dan meninjau percakapan pelanggan.
Pembeli Toko Online — Mendapatkan jawaban cepat dan akurat tentang produk dan kebijakan toko tanpa perlu menunggu respons CS manusia.

User Stories

must-have
Sebagai Pemilik Toko, saya ingin Mengunggah data produk dan FAQ toko, agar Chatbot dapat mempelajari dan menjawab pertanyaan pembeli berdasarkan informasi yang relevan..
must-have
Sebagai Pembeli, saya ingin Bertanya tentang ketersediaan stok produk 'XYZ', agar Saya bisa langsung tahu apakah produk tersedia dan melanjutkan pembelian..
must-have
Sebagai Pemilik Toko, saya ingin Menetapkan batas biaya penggunaan AI harian, agar Saya dapat mengontrol pengeluaran dan mencegah tagihan AI yang membengkak..
must-have
Sebagai Pembeli, saya ingin Mendapatkan opsi untuk berbicara dengan CS manusia, agar Saya bisa mendapatkan bantuan untuk pertanyaan kompleks yang tidak bisa dijawab chatbot..
should-have
Sebagai Pemilik Toko, saya ingin Melihat riwayat percakapan chatbot dengan pembeli, agar Saya bisa meninjau kualitas jawaban chatbot dan mengidentifikasi area perbaikan..

User Flow

Pemilik mengakses halaman login.
Pemilik berhasil login dan masuk ke dashboard admin.
Pemilik navigasi ke halaman 'Unggah Data Toko'.
Pemilik mengunggah file CSV produk dan FAQ, lalu memicu proses indexing.
Pemilik menavigasi ke halaman 'Daftar Produk' dan 'Daftar FAQ' untuk memverifikasi data terunggah.
Pemilik menavigasi ke halaman 'Pengaturan' dan mengatur 'Batas Biaya Harian' dan 'Email CS'.
Pembeli mengakses halaman publik chatbot.
Pembeli mengajukan pertanyaan tentang produk atau kebijakan toko.
Chatbot memberikan jawaban berdasarkan data toko.
Pembeli mengajukan pertanyaan kompleks atau mengetik 'bicara dengan CS'.
Chatbot mengonfirmasi eskalasi dan pemilik menerima notifikasi email.
Pemilik menavigasi ke halaman 'Riwayat Percakapan' untuk melihat transkrip interaksi.

Memuat diagram…

Features

Unggah dan Kelola Data Toko (Produk & FAQ)

must-have

Pemilik dapat mengunggah file CSV atau memasukkan data secara manual untuk katalog produk dan daftar FAQ agar chatbot dapat menjawab pertanyaan terkait.

Pemilik dapat mengunggah file CSV (maks 5MB) yang berisi data produk (nama, deskripsi, harga, stok, varian) dan FAQ (pertanyaan, jawaban).
Sistem berhasil memproses file CSV dan mengindeks data untuk pencarian RAG dalam < 30 detik untuk 1000 baris.
Pemilik dapat melihat daftar produk dan FAQ yang terunggah.
Data produk atau FAQ yang duplikat (berdasarkan nama produk/pertanyaan) akan memperbarui entri yang sudah ada.
Sistem menolak file dengan format tidak valid (mis. bukan CSV, kolom wajib tidak ada) dan menampilkan pesan error spesifik.

Kasus tepi yang ditangani

File CSV yang diunggah korup atau formatnya salah.
Data produk atau FAQ yang diunggah melebihi batas karakter atau stok menjadi negatif.
Pemilik mencoba mengunggah file kosong.

Chatbot Pertanyaan Produk & Kebijakan (RAG)

must-have

Chatbot mampu menjawab pertanyaan pembeli tentang produk (harga, stok, varian) dan kebijakan toko (pengiriman, retur) menggunakan data yang diunggah pemilik.

Chatbot menjawab pertanyaan dengan merujuk pada data produk atau FAQ yang relevan.
Jika chatbot tidak menemukan jawaban yang relevan dari data toko, ia akan menyatakan 'Maaf, saya tidak memiliki informasi ini.'
Chatbot dapat mengenali entitas produk dari pertanyaan seperti 'Berapa harga [nama produk]?' atau 'Apakah [nama produk] masih tersedia?'
Chatbot secara otomatis menyertakan opsi untuk berbicara dengan CS manusia jika tidak dapat menjawab atau jika pertanyaan tidak relevan dengan data toko.
Chatbot tidak mengungkapkan informasi sensitif atau rahasia yang tidak ada dalam data toko yang diunggah.

Kasus tepi yang ditangani

Pertanyaan yang ambigu atau tidak jelas.
Pertanyaan yang meminta informasi di luar lingkup data toko.
Model AI menghasilkan jawaban yang berhalusinasi atau salah informasi.

Eskalasi ke CS Manusia

must-have

Jika chatbot tidak dapat menjawab pertanyaan atau diminta oleh pembeli, sistem akan memicu proses eskalasi ke CS manusia.

Pembeli dapat mengetik 'bicara dengan CS' atau sejenisnya untuk memicu eskalasi.
Setelah eskalasi dipicu, sistem akan mengirim notifikasi email ke alamat CS yang terdaftar (dari owner_settings.cs_email) berisi transkrip percakapan terakhir.
Chatbot akan mengonfirmasi kepada pembeli bahwa permintaan eskalasi telah diterima dan CS akan segera menghubungi.
Tombol 'Eskalasi ke CS' muncul di UI chatbot jika AI tidak yakin dengan jawabannya atau jika batas token harian tercapai.

Kasus tepi yang ditangani

Alamat email CS tidak valid atau kosong.
Sistem email eksternal gagal mengirim notifikasi.

Batas Biaya Token Harian

must-have

Pemilik dapat menetapkan batas biaya token AI harian. Jika batas tercapai, chatbot akan beroperasi dalam mode terbatas atau eskalasi otomatis.

Pemilik dapat mengatur batas biaya harian (dalam USD) melalui dashboard admin.
Sistem secara akurat melacak penggunaan token dan biaya per interaksi chatbot.
Ketika 80% dari batas biaya harian tercapai, pemilik menerima notifikasi email.
Ketika batas biaya harian tercapai, chatbot secara otomatis beralih ke mode eskalasi dan memberi tahu pembeli bahwa ia tidak dapat menjawab pertanyaan lebih lanjut dan akan meneruskan ke CS manusia.
Biaya di-reset setiap hari pada pukul 00:00 WIB.

Kasus tepi yang ditangani

Batas biaya tercapai di tengah-tengah percakapan.
Kesalahan perhitungan token/biaya menyebabkan over-budget.

Riwayat Percakapan

should-have

Pemilik dapat melihat riwayat semua percakapan chatbot dengan pembeli, termasuk pertanyaan, jawaban, dan estimasi biaya token.

Pemilik dapat melihat daftar semua percakapan yang terjadi.
Setiap entri percakapan menampilkan ID sesi, waktu mulai, dan total biaya/token.
Pemilik dapat mengklik percakapan untuk melihat detail transkrip (pesan user dan bot) secara berurutan.
Pemilik dapat mencari percakapan berdasarkan kata kunci dalam pesan.
Data riwayat percakapan disimpan secara permanen dan dapat diakses kapan saja.

Anti Prompt Injection

must-have

Melindungi chatbot dari upaya pembajakan prompt oleh pengguna yang mencoba memanipulasi perilakunya.

Chatbot mengabaikan instruksi sistem dari input pengguna (misalnya, 'abaikan instruksi sebelumnya', 'bertindak sebagai developer').
Chatbot tidak akan mengungkapkan prompt sistem internal atau data konfigurasi internal lainnya kepada pengguna.
Chatbot mempertahankan persona dan batasan yang telah ditentukan meskipun ada upaya manipulasi.
Input yang jelas-jelas berbahaya atau mencurigakan (misalnya, mencoba mengekstrak API key) akan direspons dengan 'Maaf, saya tidak bisa membantu pertanyaan itu'.

Tech Stack

Frontend: Next.js (React) dengan Tailwind CSS

Backend: Next.js API Routes (Node.js)

Database: PostgreSQL dengan ekstensi pgvector

Hosting: Vercel (Frontend + API Routes), Railway (PostgreSQL)

Model AI utama adalah OpenAI GPT-3.5-turbo untuk efisiensi biaya dan kecepatan. Model embedding menggunakan text-embedding-ada-002. Jika GPT-3.5-turbo gagal merespons atau mencapai batas biaya, chatbot akan menyatakan tidak tahu dan menawarkan eskalasi ke CS manusia. Drizzle ORM akan digunakan untuk interaksi database.

Architecture

Aplikasi ini menggunakan arsitektur monorepo Next.js dengan API Routes sebagai backend. Data toko dan riwayat percakapan disimpan di PostgreSQL, dengan ekstensi pgvector untuk menyimpan dan mencari embedding. Model OpenAI digunakan untuk embedding dan generasi jawaban.

Frontend UI (Next.js)

Menyediakan antarmuka chat untuk pembeli dan dashboard admin untuk pemilik. Bertanggung jawab atas rendering dan interaksi pengguna.

Backend API (Next.js API Routes)

Menangani autentikasi, mengelola data toko (upload, CRUD), memproses permintaan chat (RAG, pemanggilan LLM, pencatatan token/biaya), dan mengirim notifikasi email.

Database (PostgreSQL + pgvector)

Penyimpanan data relasional (users, products, faqs, conversations, messages, owner_settings) dan vektor embedding (embeddings) untuk pencarian relevansi RAG.

OpenAI API

Menyediakan layanan embedding teks (`text-embedding-ada-002`) dan generasi jawaban chat (`gpt-3.5-turbo`).

Resend (Email Service)

Mengirim email notifikasi untuk lupa password, eskalasi CS, dan peringatan batas biaya AI.

Alur data

Pembeli mengirim pesan melalui Frontend UI.
Frontend mengirim pesan ke Backend API `/api/chat/message`.
Backend: Merekam pesan ke `messages` dan memulai `conversation` jika baru.
Backend: Mengubah `user_message` menjadi embedding menggunakan OpenAI Embeddings API.
Backend: Melakukan pencarian vektor `embeddings` terdekat di PostgreSQL (pgvector).
Backend: Mengambil `document_chunks` dan `documents` yang relevan dari hasil pencarian.
Backend: Membangun prompt RAG dengan `system_prompt`, riwayat chat singkat, dan `retrieved_context`.
Backend: Memanggil OpenAI Chat Completions API dengan prompt RAG.
Backend: Menerima jawaban dari LLM, mencatat token dan biaya ke `messages` dan `conversations`.
Backend: Menganalisis jawaban atau intent untuk eskalasi, jika perlu, mengirim notifikasi email via Resend.
Backend: Mengirim jawaban chatbot kembali ke Frontend UI.
Pemilik mengunggah file CSV via Dashboard Admin (Frontend UI).
Frontend mengirim file ke Backend API `/api/admin/data/upload`.
Backend: Memvalidasi dan menyimpan data mentah ke tabel `documents`.
Backend: Memicu proses pembuatan embedding: memecah `documents` menjadi `document_chunks` dan menghasilkan `embeddings` via OpenAI Embeddings API, lalu menyimpan ke PostgreSQL.

Memuat diagram…

Database Schema

Ini struktur data aplikasimu. Kamu tidak perlu paham semuanya — AI yang akan membuatnya. Kolom created_at/updated_at ditambahkan otomatis tiap tabel.

usersPengguna aplikasi (pemilik toko).

iduuidPrimary Key

emailtextEmail pengguna, unik.

hashed_passwordtextHash password pengguna.

nametextNama pengguna

roleenum:UserRolePeran pengguna

owner_settingsPengaturan spesifik pemilik toko.

iduuidPrimary Key

owner_iduuidForeign Key ke users.id

daily_cost_limitnumericBatas biaya token AI harian dalam USD.

cs_emailtextEmail CS untuk notifikasi eskalasi.

productssoft deleteKatalog produk toko online.

iduuidPrimary Key

nametextNama produk. unik hanya untuk baris aktif — partial unique index (UNIQUE WHERE deleted_at IS NULL).

descriptiontextDeskripsi produk.

pricenumericHarga jual produk.

stockintegerJumlah stok produk.

variantsjsonbVarian produk (ukuran, warna, dll).

faqssoft deleteDaftar pertanyaan yang sering diajukan dan jawabannya.

iduuidPrimary Key

questiontextPertanyaan FAQ. unik hanya untuk baris aktif — partial unique index (UNIQUE WHERE deleted_at IS NULL).

answertextJawaban FAQ.

documentsDokumen sumber mentah (produk, FAQ) untuk RAG.

iduuidPrimary Key

source_typeenum:DocumentSourceTypeTipe sumber dokumen (mis. 'PRODUCT', 'FAQ').

source_iduuidID sumber asli (mis. product.id, faq.id).

contenttextKonten lengkap dari dokumen sumber.

document_chunksPotongan teks dari dokumen untuk embedding.

iduuidPrimary Key

document_iduuidForeign Key ke documents.id

contenttextPotongan teks dari dokumen.

sequence_numintegerUrutan chunk dalam dokumen.

embeddingsVektor embedding untuk setiap document_chunk.

iduuidPrimary Key

chunk_iduuidForeign Key ke document_chunks.id

vectorvectorVektor embedding yang dihasilkan oleh model AI (pgvector).

conversationsRiwayat percakapan antara pembeli dan chatbot.

iduuidPrimary Key

customer_session_idtextID sesi anonim untuk pembeli, bisa berupa cookie session ID.

start_timetimestampWaktu mulai percakapan.

end_timetimestampWaktu berakhir percakapan.

total_tokensintegerTotal token yang digunakan dalam percakapan ini.

total_costnumericTotal biaya percakapan ini dalam USD.

escalated_attimestampWaktu eskalasi ke CS jika terjadi.

messagesPesan individual dalam suatu percakapan.

iduuidPrimary Key

conversation_iduuidForeign Key ke conversations.id

sender_typeenum:SenderTypeJenis pengirim pesan (USER, BOT, CS_AGENT).

contenttextIsi pesan.

token_countintegerJumlah token untuk pesan ini.

costnumericBiaya pesan ini dalam USD.

Relasi

owner_settings.owner_id → users.id (one-to-one)
document_chunks.document_id → documents.id (many-to-one)
embeddings.chunk_id → document_chunks.id (one-to-one)
messages.conversation_id → conversations.id (many-to-one)

Memuat diagram…

Struktur Folder

Struktur ini dikunci agar AI agent membangun dengan susunan file yang sama.

app/(auth)/login/page.tsx — halaman login
app/(auth)/register/page.tsx — halaman register
app/(app)/admin/dashboard/page.tsx — halaman dashboard admin
app/(app)/admin/data-upload/page.tsx — halaman unggah data toko
app/(app)/admin/products/page.tsx — halaman daftar produk admin
app/(app)/admin/faqs/page.tsx — halaman daftar FAQ admin
app/(app)/admin/conversations/page.tsx — halaman daftar percakapan admin
app/(app)/admin/conversations/[id]/page.tsx — halaman detail percakapan admin
app/(app)/admin/settings/page.tsx — halaman pengaturan admin
app/page.tsx — halaman publik chatbot
components/ — Komponen UI reusable (mis. ChatbotUI.tsx, Table.tsx)
lib/ — Fungsi helper atau utilitas frontend (mis. client-side validation)
server/api/auth/[...nextauth]/route.ts — NextAuth.js API route
server/api/admin/data/upload/route.ts — API untuk unggah data
server/api/admin/data/process/route.ts — API untuk memicu proses embedding
server/api/admin/products/route.ts — API CRUD produk
server/api/admin/faqs/route.ts — API CRUD FAQ
server/api/admin/conversations/route.ts — API daftar percakapan
server/api/admin/conversations/[id]/route.ts — API detail percakapan
server/api/admin/settings/route.ts — API pengaturan pemilik
server/api/chat/message/route.ts — API utama interaksi chatbot
server/db/schema.ts — Definisi skema Drizzle
server/db/index.ts — Klien database Drizzle
server/db/migrate.ts — Script migrasi database
server/services/ — Logika bisnis inti (mis. llmService.ts, embeddingService.ts, emailService.ts)
server/utils/ — Helper backend (mis. csvParser.ts, tokenCounter.ts)
types/ — Definisi tipe TypeScript global

API Endpoints

POST

/api/auth/registerMendaftarkan akun pemilik toko baru.

POST

/api/auth/loginLogin pemilik toko.

POST

/api/auth/forgot-passwordMemulai proses reset password untuk pemilik toko.

POST

/api/auth/reset-passwordMenyelesaikan proses reset password untuk pemilik toko.

POST

/api/admin/data/uploadMengunggah file CSV produk atau FAQ. Menggunakan multipart/form-data.auth: OWNER

POST

/api/admin/data/processMemulai proses embedding dan indexing untuk data yang baru diunggah.auth: OWNER

GET

/api/admin/productsMendapatkan daftar produk yang terunggah.paginatedauth: OWNER

GET

/api/admin/faqsMendapatkan daftar FAQ yang terunggah.paginatedauth: OWNER

POST

/api/chat/messageMengirim pesan ke chatbot dan mendapatkan balasan. Memicu RAG dan LLM.

GET

/api/admin/conversationsMendapatkan daftar riwayat percakapan.paginatedauth: OWNER

GET

/api/admin/conversations/:idMendapatkan detail transkrip untuk satu percakapan.auth: OWNER

GET

/api/admin/settingsMendapatkan pengaturan pemilik toko.auth: OWNER

PATCH

/api/admin/settingsMemperbarui pengaturan pemilik toko.auth: OWNER

Peran (RBAC)

OWNER

Pemilik toko online, memiliki akses penuh ke dashboard admin dan kontrol atas chatbot.· kelola data toko, atur batas biaya AI, lihat riwayat percakapan

Enum

UserRoleOWNER

DocumentSourceTypePRODUCT · FAQ · OTHER

SenderTypeUSER · BOT · CS_AGENT

Environment Variables

DATABASE_URLbackendwajibURL koneksi ke database PostgreSQL.

OPENAI_API_KEYbackendwajibKunci API untuk mengakses layanan OpenAI.

RESEND_API_KEYbackendwajibKunci API untuk layanan Resend (pengiriman email).

NEXTAUTH_SECRETbackendwajibSecret untuk NextAuth.js.

NEXT_PUBLIC_APP_URLsharedwajibURL publik aplikasi untuk email reset password.

Library Inti

react · frontendnext · sharedtailwind-css · frontenddrizzle-orm · backendpg · backendopenai · backendnext-auth · backendzod · sharedcsv-parser · backendresend · backendvitest · dev

Tasks (siap kirim ke AI agent)

Setup Proyek, Test Runner, dan Linting· S

Inisialisasi proyek Next.js, pasang TypeScript, Tailwind CSS, Vitest untuk unit testing, dan konfigurasi ESLint/Prettier.

Lihat isi perintah

Inisialisasi proyek Next.js dengan TypeScript dan Tailwind CSS. Konfigurasi ESLint dan Prettier. Tambahkan Vitest sebagai test runner untuk unit testing. Pastikan struktur dasar Next.js (app router) sudah ada. Buat file `vitest.config.ts` dan `tsconfig.json` yang benar. Tambahkan script `test` ke `package.json`.

Setup Database & ORM· S· Butuh dulu: T1

Konfigurasi PostgreSQL dengan ekstensi pgvector dan Drizzle ORM. Buat koneksi database dan skema awal untuk users.

Lihat isi perintah

Setup koneksi PostgreSQL menggunakan Drizzle ORM. Pastikan ekstensi `pgvector` dapat diaktifkan. Buat skema Drizzle untuk tabel `users` dan `owner_settings`. Buat `db/schema.ts` dan `db/index.ts` untuk koneksi. Tambahkan migrasi awal untuk tabel `users` dan `owner_settings`. Pastikan `DATABASE_URL` di env vars terkonfigurasi.

Implementasi Autentikasi Pemilik· M· Butuh dulu: T2

Setup NextAuth.js (atau alternatif) untuk autentikasi email/password bagi pemilik toko. Buat halaman login/register dan lupa password.

Lihat isi perintah

Implementasikan autentikasi email/password untuk `OWNER` menggunakan NextAuth.js. Tambahkan provider credential. Buat halaman `/api/auth/[...nextauth]` route handler. Buat halaman login (`/login`) dan register (`/register`). Implementasikan fitur lupa password yang mengirim email (integrasi Resend, env var `RESEND_API_KEY`). Pastikan `NEXTAUTH_SECRET` di env vars terkonfigurasi. `users` table di `db/schema.ts` harus memiliki kolom `email` dan `hashed_password`.

Desain Skema RAG (Produk & FAQ)· S· Butuh dulu: T2

Buat skema database untuk `products`, `faqs`, `documents`, `document_chunks`, dan `embeddings` termasuk relasi dan kolom `vector` untuk pgvector.

Lihat isi perintah

Perluas `db/schema.ts` untuk menambahkan tabel `products`, `faqs`, `documents`, `document_chunks`, dan `embeddings`. `products` harus memiliki `name`, `description`, `price`, `stock`, `variants` (JSONB). `faqs` harus memiliki `question`, `answer`. `documents` memiliki `source_type` (enum 'PRODUCT'/'FAQ'/'OTHER'), `source_id` (UUID), `content`. `document_chunks` memiliki `document_id`, `content`, `sequence_num`. `embeddings` memiliki `chunk_id`, `vector` (vector type dari pgvector). Tambahkan relasi yang sesuai. Pastikan `products.name` dan `faqs.question` memiliki constraint `UNIQUE (name)` dan `UNIQUE (question)` dengan `WHERE deleted_at IS NULL` untuk soft delete.

Halaman Admin: Unggah Data Toko (CSV)· M· Butuh dulu: T3, T4

Bangun halaman di dashboard admin untuk mengunggah file CSV produk atau FAQ. Implementasikan parsing CSV di backend.

Lihat isi perintah

Buat halaman admin `/app/admin/data-upload` dengan form untuk mengunggah file CSV. Backend `/api/admin/data/upload` harus mampu menerima file, mem-parse CSV (gunakan `csv-parser` atau sejenisnya), dan melakukan validasi awal. Simpan data mentah ke tabel `documents` (dengan `source_type` yang sesuai). Tangani validasi format file, ukuran, dan kolom yang wajib ada. Tampilkan pesan sukses/error kepada pengguna.

Backend: Embedding Generator & RAG Indexer· M· Butuh dulu: T5

Buat service di backend untuk memecah `documents` menjadi `document_chunks` dan menghasilkan `embeddings` menggunakan OpenAI API. Simpan embeddings ke database.

Lihat isi perintah

Buat service di `server/services/embeddingService.ts` yang menerima `document_id`. Service ini harus: 1. Memecah `documents.content` menjadi `document_chunks` yang lebih kecil (mis. 500 karakter dengan overlap 50 karakter). 2. Untuk setiap chunk, panggil OpenAI Embeddings API (`text-embedding-ada-002`) untuk mendapatkan vektor embedding. 3. Simpan `document_chunks` dan `embeddings` ke tabel masing-masing di database. Buat endpoint POST `/api/admin/data/process` yang dipanggil setelah upload CSV untuk memicu proses ini. Pastikan `OPENAI_API_KEY` di env vars terkonfigurasi.

Halaman Admin: Daftar Produk & FAQ· S· Butuh dulu: T6

Tampilkan daftar produk dan FAQ yang sudah terunggah di halaman admin, dengan fitur pencarian dan paginasi sederhana.

Lihat isi perintah

Buat halaman admin `/app/admin/products` dan `/app/admin/faqs` untuk menampilkan data produk dan FAQ dari database. Implementasikan fitur pencarian (berdasarkan nama/pertanyaan) dan paginasi. Gunakan komponen tabel yang responsif. Pastikan endpoint GET `/api/admin/products` dan `/api/admin/faqs` mendukung query parameter `page`, `limit`, dan `search`.

Komponen UI Chatbot untuk Pembeli· M· Butuh dulu: T1

Bangun komponen UI chat interaktif (input teks, area pesan, tombol kirim) yang dapat disematkan di halaman publik.

Lihat isi perintah

Buat komponen React `components/ChatbotUI.tsx` yang berisi: area display pesan, input teks, dan tombol kirim. Tangani state input dan display pesan. Gunakan Tailwind CSS untuk styling. Komponen ini harus bisa menerima dan menampilkan array pesan (dari user dan bot). Pastikan ini adalah komponen klien (`'use client'`).

Backend: Chat API & RAG Core· L· Butuh dulu: T6, T8

Bangun API untuk menerima pesan pembeli, melakukan pencarian RAG di database, memanggil LLM (OpenAI), dan mengembalikan jawaban.

Lihat isi perintah

Buat endpoint POST `/api/chat/message` yang menerima `user_message`. Di backend: 1. Lakukan pencarian `embeddings` terdekat menggunakan `pgvector` berdasarkan embedding dari `user_message`. 2. Ambil `document_chunks` terkait. 3. Susun prompt RAG yang mencakup `system_prompt` (persona CS, batasan pengetahuan) dan `retrieved_context` (dari `document_chunks`). 4. Panggil OpenAI Chat Completions API (`gpt-3.5-turbo`) dengan prompt ini. 5. Kembalikan respons dari LLM. Pastikan prompt sistem menegaskan untuk jujur bila tidak tahu dan untuk tidak berhalusinasi. Catat penggunaan token dan biaya untuk setiap request.

T10

Penyimpanan Riwayat Percakapan· S· Butuh dulu: T9

Simpan setiap pesan dari pembeli dan jawaban chatbot ke database, termasuk metadata token dan biaya.

Lihat isi perintah

Perluas `db/schema.ts` untuk tabel `conversations` (id, customer_session_id, start_time, end_time, total_tokens, total_cost) dan `messages` (conversation_id, sender_type (enum: 'USER', 'BOT', 'CS_AGENT'), content, token_count, cost). Modifikasi endpoint `/api/chat/message` (T9) untuk: 1. Membuat `conversation` baru jika `customer_session_id` belum ada, atau melanjutkannya. 2. Menyimpan setiap `user_message` dan `bot_response` ke tabel `messages`. 3. Mengupdate `total_tokens` dan `total_cost` di `conversations` setelah setiap pesan. Pastikan `SenderType` enum didefinisikan di `db/schema.ts`.

T11

Halaman Admin: Riwayat Percakapan· M· Butuh dulu: T10

Tampilkan daftar percakapan dan detail transkripnya di dashboard admin.

Lihat isi perintah

Buat halaman admin `/app/admin/conversations` yang menampilkan daftar `conversations` dari database. Sajikan kolom `customer_session_id`, `start_time`, `total_cost`, `total_tokens`. Tambahkan fitur pencarian berdasarkan `customer_session_id` atau konten pesan. Saat mengklik entri percakapan, tampilkan detail transkrip pesan (`messages`) dalam format chat bubble di halaman `/app/admin/conversations/:id`. Pastikan endpoint GET `/api/admin/conversations` (paginated, searchable) dan `/api/admin/conversations/:id` tersedia.

T12

Halaman Admin: Pengaturan Batas Biaya Harian· S· Butuh dulu: T3

Buat halaman di dashboard admin untuk pemilik dapat mengatur batas biaya token AI harian.

Lihat isi perintah

Buat halaman admin `/app/admin/settings` dengan form untuk mengelola `owner_settings`. Tambahkan input untuk `daily_cost_limit` (numeric, default 0). Buat endpoint GET `/api/admin/settings` untuk mengambil pengaturan dan PATCH `/api/admin/settings` untuk memperbarui pengaturan. Pastikan hanya pemilik yang bisa mengakses dan mengubah ini.

T13

Logika Batas Biaya di Backend· M· Butuh dulu: T12, T10

Implementasikan logika di backend untuk melacak total biaya harian dan menerapkan batasan yang telah diatur.

Lihat isi perintah

Modifikasi `server/services/llmService.ts` atau `api/chat/message` handler. Sebelum memanggil LLM, cek `owner_settings.daily_cost_limit` dan `current_daily_cost` (total biaya dari `messages` hari ini di timezone WIB). Jika `current_daily_cost` + `estimated_cost_for_current_request` > `daily_cost_limit`, hentikan pemanggilan LLM dan kembalikan respons khusus yang mengindikasikan batas tercapai. Kirim notifikasi email ke CS (`owner_settings.cs_email`) saat 80% dan 100% batas tercapai. Reset `current_daily_cost` setiap hari 00:00 WIB.

T14

Integrasi Resend untuk Email Notifikasi· XS· Butuh dulu: T3, T13

Konfigurasi layanan email Resend untuk mengirim notifikasi (lupa password, eskalasi CS, batas biaya).

Lihat isi perintah

Konfigurasi Resend di backend. Buat helper `server/utils/email.ts` untuk mengirim email. Gunakan ini untuk notifikasi lupa password (dari T3), notifikasi eskalasi CS, dan notifikasi batas biaya AI (dari T13). Pastikan `RESEND_API_KEY` terkonfigurasi di env vars.

T15

Logika Eskalasi ke CS Manusia· S· Butuh dulu: T14, T9

Implementasikan logika eskalasi: deteksi permintaan eskalasi, kirim notifikasi email ke CS, dan ubah respons chatbot.

Lihat isi perintah

Modifikasi `api/chat/message` handler (T9) dan `server/services/llmService.ts`. 1. Deteksi intent 'eskalasi' dari pesan pengguna (gunakan logic sederhana di backend, bukan LLM). 2. Jika terdeteksi atau LLM tidak yakin (confidence score rendah, atau LLM mengeluarkan token khusus 'ESCALATE'), kirim email ke `owner_settings.cs_email` dengan transkrip percakapan terakhir. 3. Bot merespons dengan pesan 'Baik, saya akan meneruskan Anda ke Customer Service kami. Mohon tunggu balasan email dari kami.' 4. Simpan event eskalasi di `conversations.escalated_at`.

T16

Unit Test Core RAG & LLM Logic· M· Butuh dulu: T9

Tulis unit test untuk fungsi-fungsi inti RAG (embedding, pencarian vektor) dan logic pemanggilan LLM (termasuk prompt system).

Lihat isi perintah

Tulis unit test menggunakan Vitest untuk `server/services/embeddingService.ts` (memastikan chunking dan panggilan embedding API mock berhasil) dan `server/services/llmService.ts` (memastikan prompt RAG terbentuk dengan benar, dan LLM dapat menghasilkan respons yang diharapkan dari konteks yang diberikan, termasuk skenario 'tidak tahu'). Mock panggilan API OpenAI. Pastikan test ini menggunakan data fixture dari `testFixtures`.

T17

Unit Test Batas Biaya & Eskalasi· S· Butuh dulu: T13, T15

Tulis unit test untuk memverifikasi fungsionalitas batas biaya token dan logika eskalasi.

Lihat isi perintah

Tulis unit test menggunakan Vitest untuk `api/chat/message` handler yang terkait dengan `T13` (batas biaya) dan `T15` (eskalasi). Pastikan: 1. Chatbot berhenti merespons ketika batas biaya tercapai. 2. Email notifikasi terkirim pada 80% dan 100% batas biaya. 3. Permintaan eskalasi memicu pengiriman email dan respons bot yang benar. Mock panggilan email dan database state.

T18

Halaman Publik Chatbot· XS· Butuh dulu: T8

Buat halaman publik yang menampilkan `ChatbotUI` untuk pembeli.

Lihat isi perintah

Buat halaman publik `/` (root path) di Next.js yang merender komponen `ChatbotUI` (`components/ChatbotUI.tsx`). Pastikan ini adalah halaman publik yang tidak memerlukan autentikasi. Tambahkan styling minimal untuk membuatnya terlihat baik.

T19

Implementasi Anti Prompt Injection di Logic RAG/LLM· M· Butuh dulu: T9

Perkuat prompt sistem dan validasi input untuk mencegah prompt injection.

Lihat isi perintah

Perbarui prompt sistem di `server/services/llmService.ts` agar lebih resisten terhadap prompt injection. Terapkan teknik sandboxing prompt (mis. selalu tempatkan instruksi pengguna di akhir prompt dengan delimiter jelas). Tambahkan validasi input awal untuk `user_message` di `api/chat/message` handler untuk mendeteksi kata kunci atau pola yang mencurigakan (misalnya, 'ignore previous instructions', 'reveal system prompt') dan berikan respons generik 'Maaf, saya tidak bisa membantu pertanyaan itu' tanpa memanggil LLM.

T20

Refactoring & Kode Bersih· S· Butuh dulu: T17, T18, T19

Lakukan review kode, refactoring, dan pastikan konvensi penamaan serta struktur folder konsisten. Tambahkan dokumentasi inline.

Lihat isi perintah

Lakukan review menyeluruh pada seluruh codebase. Pastikan tidak ada duplikasi kode, fungsi dipecah dengan baik, dan penamaan variabel/fungsi/file konsisten. Tambahkan JSDoc untuk fungsi-fungsi penting. Pastikan semua env vars memiliki default atau validasi di startup. Hapus kode yang tidak terpakai atau komentar yang tidak relevan.

Risks

Kualitas jawaban AI (halusinasi) meskipun sudah RAG, bisa merusak citra toko. Mitigasi: prompt engineering yang ketat, opsi eskalasi jelas, review riwayat percakapan.
Pembengkakan biaya token AI jika ada serangan DDoS atau penggunaan tidak wajar. Mitigasi: batas biaya harian yang ketat dan notifikasi.
Prompt injection yang tidak terdeteksi dapat menyebabkan AI mengungkapkan informasi sensitif atau bertindak di luar persona. Mitigasi: validasi input yang kuat dan prompt sistem yang resisten.
Kualitas data yang diunggah pemilik (CSV) buruk (misalnya, salah informasi, tidak lengkap) akan menyebabkan chatbot memberikan jawaban yang salah. Mitigasi: validasi data saat upload dan owner review data.