:::note Status versi SDK npm 0.1.4 yang dipublikasikan bersama widget.js v15 mendukung teardown melalui remove()/window.ChattyBox.destroy(). sendMessage() headless tidak mencoba ulang otomatis. :::

Integrasikan dengan Asisten Coding AI

Integrasi kode aplikasi yang direkomendasikan adalah paket npm @openstaticfish/chattybox. Paket ini memungkinkan kode aplikasi mengonfigurasi kunci publik dan URL API, memuat widget mengambang terkelola ChattyBox dari layout browser yang persisten, 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. Secara default kunci ini bekerja di produksi, pratinjau, staging, dan localhost; aktifkan pembatasan origin tepat di Edit origins hanya jika Anda membutuhkan pertahanan tambahan.
• Salin kunci publik dan URL API widget yang ditampilkan di Embed.
• Tentukan apakah widget mengambang persisten sesuai untuk aplikasi atau Anda memerlukan UI khusus dengan penempatan serta teardown per rute.

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. Panggil `client.mountWidget()` hanya dalam kode browser setelah `document.body` tersedia, dari shell aplikasi yang persisten. Fungsi ini memuat widget mengambang di bawah `document.body`, bukan di dalam komponen.
5. Pertahankan loader selama navigasi SPA normal. Dalam SDK `0.1.4` yang dipublikasikan, mount identik berbagi referensi: `remove()` idempoten dan hanya handle terakhir yang memicu teardown v15; opsi berbeda ditolak selama masih ada handle.
6. Jangan menyisipkan `widget.js` secara manual, membuat proxy backend, atau menambahkan loader kedua. `mountWidget` menggunakan kembali skrip bertanda pertama tanpa memperbarui kunci atau opsinya.
7. Pertahankan navigasi, batas rendering, lokalisasi, analitik, persetujuan, dan styling yang ada. Locale ditentukan hanya saat inisialisasi; opsi locale hanya berlaku jika proyek mengizinkan override skrip. Jangan mengklaim pembaruan locale reaktif atau promise kesiapan.
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();

// Pertahankan loader ini selama masa hidup halaman; remove() memicu teardown UI.

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 simpan `conversationId` dalam state khusus pengunjung untuk mengelompokkan pesan. Jalur pembuatan publik saat ini tidak meneruskan giliran sebelumnya ke model, jadi jangan mengasumsikan memori percakapan.
4. Render jawaban dengan aman sebagai teks atau Markdown yang disanitasi, serta render sumber HTTP(S) sebagai tautan aksesibel sambil mempertahankan urutannya. Jangan pernah menyisipkan HTML mentah tak tepercaya atau skema tautan tidak aman.
5. Implementasikan state pending, kosong, error, dan retry. Jawaban fallback dapat memiliki sumber kosong; hasil publik tidak memiliki bidang wasAnswered atau status fallback terpisah. Tangani ChattyboxError dan error jaringan yang tidak dibungkus; code bersifat opsional.
6. Tolak pesan setelah trim yang kosong atau melebihi 2.000 karakter, cegah pengiriman duplikat, dan pertahankan perilaku keyboard serta pembaca layar agar dapat digunakan. SDK tidak melakukan retry otomatis: gunakan satu `idempotencyKey` unik untuk setiap pesan logis dan gunakan kembali input persis untuk retry; jangan membuta melakukan retry atas setiap 409.
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: “Gunakan Client Component kecil dalam layout persisten dan panggil mountWidget() dari effect khusus browser, bukan saat rendering.”
• React SPA: “Pasang dari app shell persisten; kembalikan remove() sebagai cleanup effect jika memerlukan teardown UI yang disengaja.”
• Docusaurus: “Inisialisasi dari src/theme/Root dalam kode browser dan pertahankan loader selama navigasi docs; verifikasi transisi locale satu halaman penuh karena perubahan bahasa sisi klien tidak mengonfigurasinya ulang.”
• Vue, Nuxt, Svelte, atau framework lain: “Gunakan lifecycle pemasangan khusus klien dalam layout persisten; pilih UI headless jika memerlukan teardown 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. Widget ter-host menggunakan shell persisten dan menggunakan remove() untuk teardown UI, pengecualian rute setelah navigasi SPA, atau pencabutan persetujuan. Antarmuka khusus memiliki cleanup komponen yang nyata.
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. Pembatasan origin bersifat opsional; kunci yang dibatasi memerlukan origin permintaan yang diizinkan, dan fetch Node tidak otomatis mengirim header browser.
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.