:::note Versiotila Julkaistu npm-SDK 0.1.4 ja widget.js v15 tukevat teardownia remove()/window.ChattyBox.destroy()-kutsulla. Headless-sendMessage() ei yritä automaattisesti uudelleen. :::

Integroi AI-koodausavustajan avulla

Suositeltu integraatio on @openstaticfish/chattybox-npm-paketti. Sen avulla sovelluskoodi voi määrittää julkisen avaimen ja API-URL:n, liittää ChattyBoxin ylläpidetyn käyttöliittymän komponentin yhteyteen tai käyttää headless-asiakasta täysin mukautettua käyttöliittymää varten.

Itsenäinen widget.js-skripti dokumentoidaan viimeisenä build-vaiheettomana varavaihtoehtona sivustoille, jotka eivät voi asentaa npm-paketteja.

Ennen kuin aloitat

Viimeistele chatbotin asetukset ennen kuin pyydät avustajaa muokkaamaan sovellustasi:

• Varmista edustavat vastaukset ja lähdeviitteet Test Chat -osiossa.
• Luo selainavain Public Keys -osiossa. Se toimii oletuksena tuotannossa, esikatseluissa, stagingissa ja localhostissa; ota Edit origins -kohdassa käyttöön tarkka origin-rajoitus vain valinnaisena lisäsuojana.
• Kopioi Embed-osiossa näkyvä julkinen avain ja widgetin API-URL.
• Päätä, mihin sovelluksen reitteihin tai layouteihin käyttökokemus liitetään.

Nämä ovat julkisia selainkäyttöön tarkoitettuja tunnistetietoja, mutta vältä silti ympäristökohtaisten arvojen committaamista. Älä koskaan anna määrityksen käyttöönottotunnusta, ylläpitäjän tunnuksia tai asiaankuulumatonta ympäristötiedostoa.

Suositus: Liitä ylläpidetty käyttöliittymä npm:stä

Tämä on oletusprompti React-, Next.js-, Vite- ja muille pakettipohjaisille selainohjelmille.

Kehote

Integroi ChattyBoxin npm-paketti

Integroi ChattyBox tähän sovellukseen käyttäen @openstaticfish/chattybox-npm-pakettia.

Julkinen selainmääritys:
- API-avain: [PASTE PUBLIC WIDGET KEY]
- API-URL: [PASTE WIDGET API URL]

Tutki ensin framework, reititysmalli, paketinhallinta, ympäristömuuttujien käytännöt ja sovelluksen pysyvä layout. Kerro ennen muokkaamista, mitä tiedostoja aiot muuttaa. Kysy minulta, jos reitit, joilla ChattyBoxin pitäisi näkyä, ovat epäselviä.

Vaatimukset:
1. Asenna @openstaticfish/chattybox tämän repositorion nykyisellä paketinhallinnalla.
2. Tallenna julkinen API-avain ja API-URL frameworkin selaimelle näkyvien ympäristömuuttujien käytännön mukaisesti. Lisää esimerkkiympäristötiedostoon paikkamerkkien nimet, mutta älä committaa oikeita arvoja.
3. Tuo Chattybox paketista @openstaticfish/chattybox ja luo yksi asiakas apiKey- ja baseUrl-arvoilla.
4. Liitä ylläpidetty käyttöliittymä kutsumalla client.mountWidget() vasta selaimessa, kun document.body on olemassa, pysyvästä sovellusshellistä.
5. Pidä loader normaalien SPA-navigointien ajan. Julkaistussa SDK:ssa `0.1.4` identtiset mountit jakavat viitteen: `remove()` on idempotentti ja vain viimeinen kahva käynnistää v15-teardownin; eri valinnat hylätään niin kauan kuin kahvoja on.
6. Älä lisää widget.js:ää käsin, luo backend-välityspalvelinta tai lisää toista ChattyBox-asiakasta.
7. Säilytä nykyinen navigointi, renderöintirajat, lokalisointi, analytiikka, suostumukset ja tyylit. Locale ratkaistaan vain alustuksessa, ja locale-optio toimii vain, kun projekti sallii skriptiohitukset.
8. Tee pienin kohdennettu muutos äläkä ota sitä käyttöön.
9. Suorita repositorion build, lint, tyyppitarkistus ja olennaiset testit.
10. Raportoi muuttuneet tiedostot, asetettavat ympäristömuuttujat, käyttöliittymän liittämiskohta ja tapa testata sitä käyttöön otetulla sivustolla.

Tuloksena olevan sovelluskoodin tulisi noudattaa tätä muotoa:

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

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

const widget = client.mountWidget();

// Pidä loader sivun elinkaaren ajan; remove() ei ole käyttöliittymän teardown.

Rakenna mukautettu käyttöliittymä

Valitse tämä, kun sovelluksesi omistaa viestiluettelon, syötteen, lataustilat, virheet, lähdeviitteet ja sijoittelun sen sijaan, että liittäisit ylläpidetyn käyttöliittymän.

Kehote

Rakenna headless ChattyBox -käyttöliittymä

Rakenna mukautettu chatbot-käyttöliittymä käyttäen @openstaticfish/chattybox-npm-pakettia ja sen headless-asiakasta.

Julkinen selainmääritys:
- API-avain: [PASTE PUBLIC WIDGET KEY]
- API-URL: [PASTE WIDGET API URL]

Tutki ensin sovelluksen framework, komponenttijärjestelmä, tilamallit, tyylit, saavutettavuuskäytännöt ja testiasetukset. Ehdota komponenttirajat ja tiedostot ennen muokkaamista.

Vaatimukset:
1. Asenna @openstaticfish/chattybox repositorion nykyisellä paketinhallinnalla.
2. Määritä yksi Chattybox-asiakas apiKey- ja baseUrl-arvoilla selaimelle näkyvien ympäristömuuttujien avulla; älä committaa oikeita arvoja.
3. Käytä `sendMessage()`-metodia ja säilytä `conversationId` kävijäkohtaisessa tilassa viestien ryhmittelyä varten. Aiemmat vuorot eivät tällä hetkellä välity mallille, joten tee jatkokysymyksistä omavaraisia.
4. Esitä vastauksen HTTP(S)-lähteet saavutettavina linkkeinä ja säilytä niiden järjestys. Älä lisää luottamatonta HTML:ää tai turvattomia linkkiskeemoja.
5. Toteuta odotus-, tyhjä-, virhe- ja uudelleenyritystilat. Varavastauksella voi olla tyhjät lähteet eikä julkisessa vastauksessa ole erillistä vastaus- tai fallback-tilakenttää.
6. Hylkää tyhjät tai yli 2 000 merkin viestit, estä kaksoislähetykset ja pidä näppäimistön sekä ruudunlukijan käyttö toimivana. Käytä yhtä yksilöllistä `idempotencyKey`-avainta loogista viestiä kohden ja käytä täsmälleen samaa syötettä uudelleenyrityksessä.
7. Liitä käyttöliittymä vain määrittämilleni reiteille tai layoutiin.
8. Noudata nykyisiä komponentteja ja tyylejä sen sijaan, että lisäisit uuden design-järjestelmän.
9. Älä lataa widget.js:ää äläkä kutsu mountWidget()-metodia.
10. Suorita build, lint, tyyppitarkistus ja olennaiset testit, raportoi sitten muuttuneet tiedostot ja varmennussuunnitelma.

Framework-kohtaiset huomautukset

Anna avustajalle tarvittaessa yksi lisälause:

• Next.js App Router: “Pidä Chattybox-asiakas ja mountWidget()-kutsu pienessä Client Componentissa, jonka aiottu layout renderöi.”
• React SPA: “Liitä ylläpidetty käyttöliittymä pysyvästä sovellusshellistä; palauta `remove()` effectin siivouksena, kun tarkoituksellinen käyttöliittymän teardown tarvitaan.”
• Docusaurus: “Luo vain asiakaspuolella toimiva teeman komponentti ja renderöi se src/theme/Root-tiedostosta; säilytä dokumentaation navigointi ja lokalisoinnin vaihtuminen.”
• Vue, Nuxt, Svelte tai muu framework: “Käytä asiakaspuolen liittämisen elinkaarta pysyvässä layoutissa; valitse headless-käyttöliittymä, jos tarvitset vastaavan teardownin.”

Tarkista olemassa oleva SDK-integraatio

Kehote

Tarkista ChattyBox SDK -integraationi

Tarkista tämä ChattyBox-integraatio ottamatta sitä käyttöön tai muuttamatta asiaankuulumatonta koodia.

Tarkista, että:
1. @openstaticfish/chattybox on asennettu ja tuotu käyttöön sen sijaan, että sen toimintaa olisi kopioitu.
2. Yksi Chattybox-asiakas saa tarkoitetun julkisen API-avaimen ja API-URL:n.
3. Selainympäristömuuttujat noudattavat tämän frameworkin julkisten muuttujien nimeämissääntöjä eivätkä paljasta yksityisiä tunnistetietoja.
4. Hostattu widget on pysyvässä shellissä ja käyttää `remove()`-kutsua vain tarkoitukselliseen käyttöliittymän teardowniin, reittien poissulkuun SPA-navigoinnin jälkeen tai suostumuksen peruutukseen. Mukautetulla käyttöliittymällä on oikea komponenttisiivous.
5. Asiakaspuolen navigointi ja kehityksen aikaiset uudelleenkiinnitykset eivät luo kaksoisinstansseja.
6. Nykyiset renderöintirajat, lokalisointi, analytiikka, suostumukset, saavutettavuus ja layout säilyvät.
7. Origin-rajoitus on valinnainen; rajoitettu avain tarvitsee sallitun pyynnön originin. Toteutuksella on asianmukaiset testit eikä asiaankuulumatonta refaktorointia ole tehty.

Palauta löydökset vakavuuden mukaan tiedostopolkuineen ja riviviitteineen. Ehdota vain pienimpiä turvallisia korjauksia ja anna tarkat varmennuskomennot.

Ei npm:ää tai build-vaihetta?

Käytä widget.js:n asennusopasta vain, kun sivusto ei voi käyttää npm-pakettia — esimerkiksi tavallisessa HTML:ssä, CMS:n mukautetun koodin kentässä tai Google Tag Managerissa.

Kehote

Asenna varawidgetin skripti

Asenna hostattu ChattyBox-widget tälle sivustolle käyttäen täsmälleen ChattyBoxin Embed-välilehden tuottamaa skriptiä:

[PASTE COMPLETE WIDGET SCRIPT]

Tutki sivusto ensin ja tunnista turvallisin julkisten sivujen globaali lisäyskohta. Lataa muuttamaton skripti täsmälleen kerran, sulje yksityiset-, ylläpito- ja kassareitit pois, säilytä suostumus- ja CSP-käytännöt, älä paljasta yksityisiä tunnistetietoja, älä ota muutosta käyttöön ja raportoi muutettu sijainti sekä selaintestaussuunnitelma.

Testaa tulos

1. Tarkista diff ja varmista, ettei oikeita tunnistetietoja committattu.
2. Suorita projektin tavallinen build, lint, tyyppitarkistus ja testit.
3. Ota käyttöön normaalin katselmointiprosessin kautta.
4. Varmista tarkoitetut reitit yksityisessä selainikkunassa, mukaan lukien asiakaspuolen navigointi.
5. Esitä tuettu kysymys, seuraa lähdeviitettä ja testaa varakäyttäytyminen.
6. Tarkista mobiililayout, näppäimistön käyttö ja selainkonsoli.

Jatka SDK-viitteeseen ja julkaisun tarkistuslistaan.