Integrasikan dengan Asisten Coding AI

Integrasi yang direkomendasikan adalah paket npm @openstaticfish/chattybox. Paket ini memungkinkan kode aplikasi mengonfigurasi kunci publik dan URL API, memasang antarmuka ChattyBox terkelola di tempat komponen Anda berada, atau menggunakan klien headless untuk UI yang sepenuhnya khusus.

Skrip mandiri widget.js didokumentasikan terakhir sebagai fallback tanpa build untuk situs yang tidak dapat memasang paket npm.

Sebelum Memulai

Selesaikan penyiapan chatbot sebelum meminta asisten mengedit aplikasi Anda:

• Verifikasi jawaban dan sitasi representatif di Test Chat.
• Buat kunci browser di Public Keys dan batasi origin yang diizinkan.
• Salin kunci publik dan URL API widget yang ditampilkan di Embed.
• Tentukan rute atau layout aplikasi mana yang harus memasang pengalaman tersebut.

Ini adalah kredensial browser publik, tetapi Anda tetap harus menghindari commit nilai khusus lingkungan. Jangan pernah memberikan token deployment konfigurasi, kredensial admin, atau file lingkungan yang tidak terkait.

Direkomendasikan: Pasang UI Terkelola dari npm

Ini adalah prompt default untuk React, Next.js, Vite, dan aplikasi browser berbasis paket lainnya.

Instruksi

Integrasikan paket npm ChattyBox

Integrasikan ChattyBox ke dalam aplikasi ini menggunakan paket npm @openstaticfish/chattybox.

Konfigurasi browser publik:
- Kunci API: [PASTE PUBLIC WIDGET KEY]
- URL API: [PASTE WIDGET API URL]

Pertama, periksa framework, model routing, package manager, konvensi variabel lingkungan, dan layout aplikasi yang persisten. Beri tahu saya file yang akan Anda ubah sebelum mengedit. Tanyakan kepada saya jika rute tempat ChattyBox harus muncul tidak jelas.

Persyaratan:
1. Instal @openstaticfish/chattybox dengan package manager yang sudah digunakan repositori ini.
2. Simpan kunci API publik dan URL API menggunakan konvensi variabel lingkungan yang diekspos ke browser oleh framework. Tambahkan nama placeholder ke file lingkungan contoh, tetapi jangan commit nilai nyata.
3. Impor Chattybox dari @openstaticfish/chattybox dan buat satu klien dengan apiKey dan baseUrl.
4. Pasang antarmuka terkelola dengan client.mountWidget() dari komponen sisi klien atau lifecycle hook yang sesuai.
5. Pasang hanya pada rute atau layout yang saya tentukan, dan panggil fungsi remove() yang dikembalikan saat cleanup jika diwajibkan framework.
6. Jangan menyisipkan widget.js secara manual, membuat proxy backend, atau menambahkan klien ChattyBox kedua.
7. Pertahankan navigasi, batas rendering, lokalisasi, analitik, persetujuan, dan styling yang ada.
8. Buat perubahan terfokus sekecil mungkin dan jangan melakukan deployment.
9. Jalankan build, lint, type-check, dan tes yang relevan dari repositori.
10. Laporkan file yang diubah, variabel lingkungan yang harus saya atur, lokasi UI dipasang, dan cara mengujinya di situs yang di-deploy.

Kode aplikasi yang dihasilkan harus mengikuti bentuk ini:

import { Chattybox } from '@openstaticfish/chattybox';

const client = new Chattybox({
  apiKey: PUBLIC_CHATTYBOX_API_KEY,
  baseUrl: PUBLIC_CHATTYBOX_API_URL,
});

const widget = client.mountWidget();

// Use during component cleanup when appropriate.
// widget.remove();

Bangun Antarmuka Khusus

Pilih ini jika aplikasi Anda harus memiliki daftar pesan, input, state pemuatan, error, sitasi, dan penempatan sendiri alih-alih memasang antarmuka terkelola.

Instruksi

Bangun antarmuka ChattyBox headless

Bangun antarmuka chatbot khusus menggunakan paket npm @openstaticfish/chattybox dan klien headless-nya.

Konfigurasi browser publik:
- Kunci API: [PASTE PUBLIC WIDGET KEY]
- URL API: [PASTE WIDGET API URL]

Pertama, periksa framework aplikasi, sistem komponen, pola state, styling, konvensi aksesibilitas, dan penyiapan tes. Usulkan batas komponen dan file sebelum mengedit.

Persyaratan:
1. Instal @openstaticfish/chattybox dengan package manager yang sudah digunakan repositori.
2. Konfigurasikan satu klien Chattybox dengan apiKey dan baseUrl menggunakan variabel lingkungan yang diekspos ke browser; jangan commit nilai nyata.
3. Gunakan sendMessage() dan pertahankan conversationId untuk pesan lanjutan.
4. Render sumber jawaban sebagai tautan yang aksesibel dan pertahankan urutannya.
5. Implementasikan state pending, kosong, error, retry, dan jawaban yang tidak didukung.
6. Cegah pengiriman duplikat dan pertahankan perilaku keyboard serta pembaca layar agar tetap dapat digunakan.
7. Pasang antarmuka hanya pada rute atau layout yang saya tentukan.
8. Ikuti komponen dan gaya yang ada alih-alih menambahkan sistem desain baru.
9. Jangan memuat widget.js atau memanggil mountWidget().
10. Jalankan build, lint, type-check, dan tes yang relevan, lalu laporkan file yang diubah serta rencana verifikasi.

Catatan Framework

Berikan satu kalimat tambahan kepada asisten bila diperlukan:

• Next.js App Router: “Pertahankan klien Chattybox dan pemanggilan mountWidget() di dalam Client Component kecil yang dirender oleh layout yang dituju.”
• React SPA: “Pasang dari app shell persisten atau layout rute tertentu, dan lakukan cleanup dalam fungsi return effect.”
• Docusaurus: “Buat komponen tema khusus klien dan render dari src/theme/Root; pertahankan navigasi dokumentasi dan perubahan locale.”
• Vue, Nuxt, Svelte, atau framework lain: “Gunakan lifecycle pemasangan khusus klien dari framework dan lifecycle cleanup yang sesuai.”

Tinjau Integrasi SDK yang Sudah Ada

Instruksi

Tinjau integrasi SDK ChattyBox saya

Tinjau integrasi ChattyBox ini tanpa melakukan deployment atau mengubah kode yang tidak terkait.

Periksa bahwa:
1. @openstaticfish/chattybox terpasang dan diimpor, bukan perilakunya diduplikasi.
2. Satu klien Chattybox menerima kunci API publik dan URL API yang dimaksud.
3. Variabel lingkungan browser mengikuti aturan penamaan variabel publik framework ini tanpa mengekspos kredensial privat.
4. mountWidget() atau antarmuka khusus hanya muncul pada rute yang dituju dan melakukan cleanup dengan benar.
5. Navigasi sisi klien dan remount saat pengembangan tidak membuat instance duplikat.
6. Batas rendering, lokalisasi, analitik, persetujuan, aksesibilitas, dan layout yang ada tetap utuh.
7. Implementasi memiliki tes yang sesuai dan tidak ada refaktor yang tidak terkait.

Kembalikan temuan berdasarkan tingkat keparahan dengan jalur file dan referensi baris. Usulkan hanya perbaikan aman terkecil dan berikan perintah verifikasi yang tepat.

Tidak Ada npm atau Proses Build?

Gunakan panduan instalasi widget.js hanya jika situs tidak dapat menggunakan paket npm—misalnya HTML biasa, kolom kode kustom CMS, atau Google Tag Manager.

Instruksi

Pasang skrip widget fallback

Pasang widget ChattyBox ter-host di situs ini menggunakan skrip persis yang dibuat oleh tab Embed ChattyBox saya:

[PASTE COMPLETE WIDGET SCRIPT]

Periksa situs terlebih dahulu dan identifikasi titik penyisipan halaman publik global yang paling aman. Muat skrip yang tidak diubah tepat satu kali, kecualikan rute privat/admin/checkout, pertahankan perilaku persetujuan dan CSP, jangan mengekspos kredensial privat, jangan melakukan deployment perubahan, dan laporkan lokasi yang diubah beserta rencana pengujian browser.

Uji Hasilnya

1. Tinjau diff dan pastikan tidak ada kredensial nyata yang di-commit.
2. Jalankan build, lint, type-check, dan tes normal proyek.
3. Lakukan deployment melalui proses peninjauan normal.
4. Verifikasi rute yang dituju di jendela browser privat, termasuk navigasi sisi klien.
5. Ajukan pertanyaan yang didukung, ikuti sitasi, dan uji perilaku fallback.
6. Periksa tata letak seluler, penggunaan keyboard, dan konsol browser.

Lanjutkan dengan referensi SDK dan daftar periksa peluncuran.