Integroi AI-koodausavustajan avulla

Suositeltu integraatio on @openstaticfish/chattybox-npm-paketti. Sen avulla sovelluskoodi voi määrittää julkisen avaimen ja API-URL:n, ladata ChattyBoxin ylläpitämän kelluvan widgetin pysyvästä selainlayoutista 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 kohdassa Testaa chatbottia.
• Tarkista tai luo julkinen selainavain kohdassa Asenna → Avaimet ja verkkotunnukset ja tarkista sen origin-asetukset. Verkkosivustoa varten valmisteltu avain voi olla jo rajoitettu; rajoittamattomat avaimet toimivat kaikista origineista. Origin-rajoitukset ovat valinnaista lisäsuojausta, eivät kävijän tunnistautumista.
• Valitse sopiva avain ja kopioi koodikatkelma kohdassa Asenna → Verkkosivuston asennus. Käytä sen data-api-url-arvoa, jos se on mukana; muussa tapauksessa selvitä oikea widgetin HTTP-endpoint käyttöönoton asetuksista.
• Päätä, sopiiko sovellukseen pysyvä kelluva widget vai tarvitsetko mukautetun käyttöliittymän, jonka sijoittelu ja purku rajataan reitin mukaan.

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]

Käytä nykyisiä hallintapaneelin nimiä: **Testaa chatbottia**; **Asenna → Avaimet ja verkkotunnukset** avaimen ja sen origin-asetusten tarkistamiseen tai luomiseen; **Asenna → Verkkosivuston asennus** asennuskatkelman kopioimiseen. Origin-rajoitukset ovat valinnaista lisäsuojausta, eivät kävijän tunnistautumista, ja verkkosivustoa varten valmisteltu avain voi olla jo rajoitettu. Älä koskaan luovuta konfiguraation deployment-tokenia, ylläpitäjän tunnuksia tai yksityistä ympäristötiedostoa.

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 sallittujen SPA-navigointien ajan. Julkaistu SDK `0.1.4` jakaa vain SDK:n itsensä omistaman skriptin identtisillä mount-asetuksilla; `mountWidget()` hylkää muuttuneen avaimen, API-URL:n, scriptUrl-arvon, localen tai debug-asetuksen, kun vanhoja handleja on vielä olemassa. Kutsu `remove()` jokaista palautettua handlea kohti, kun haluat tehdä tarkoituksellisen teardownin. Nykyisessä lähdekoodissa hostatun `widget.js` v16:n viimeinen handle poistaa widgetin UI:n/tyylit ja peruu odottavan alustuksen, retryt ja käynnissä olevan chatin; `window.ChattyBox.destroy()` on hostatun widgetin vastaava. Varmista, että käytössä oleva loader-versio tukee teardownia ennen kuin luotat tähän: UI:n piilottaminen tai pelkän skriptitagin poistaminen ei riitä. Älä lataa widgetiä ennen vaadittua suostumusta tai arkaluonteisille/yksityisille reiteille; tee aktiivinen teardown, kun reitti suljetaan pois tai suostumus perutaan. Teardown ei voi perua pyyntöä, jonka palvelin on jo käsitellyt.
6. Älä lisää `widget.js`:ää käsin, luo backend-välityspalvelinta tai lisää toista loaderia. `mountWidget()` jakaa vain SDK:n omistamia identtisin asetuksin tehtyjä mounteja; muuttunut avain, API-URL, scriptUrl, locale tai debug-asetus hylätään, kunnes kaikki olemassa olevat handlet poistetaan. Se ei koskaan säilytä vanhoja asetuksia hiljaisesti.
7. Säilytä nykyinen navigointi, renderöintirajat, lokalisointi, analytiikka, suostumukset ja tyylit. SDK:ssa ei ole reaktiivista locale-rajapintaa eikä ready promisea; SDK:n locale-asetus noudattaa projektin skriptiohituskäytäntöä. Nykyisen lähdekoodin hostattu `widget.js` v16 voi päivittää tuotteen omat käyttöliittymätekstit, kun ratkaistu locale vaihtuu; tarkista käytössä olevan loaderin versio ja projektin locale-käytäntö ennen tähän luottamista. Nykyisen lähdekoodin hostattu `widget.js` v16 ajoittaa enintään 10 chat-yritystä 30 sekunnin uudelleenyritysten ajoitusikkunassa; tämä ei ole käynnissä olevan pyynnön kova aikakatkaisu. Tarkista käytössä olevan loaderin versio ennen kuin luotat widgetin uudelleenyrityskäyttäytymiseen. Headless `sendMessage()` ei yritä automaattisesti uudelleen; SDK:n `getWidgetConfig()` tekee erikseen yhden fallback-yrityksen HTTP 400:n jälkeen. Hostatun widgetin startup-GET-uudelleenyritykset ovat erillinen mekanismi chat-yrityksistä. SDK validoi `baseUrl`-arvon ja käsittelee lukukelvottomat vastausrungot.
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.

Seuraava on esimerkki selaimen elinkaaren callbackista, ei palvelinrenderöinnin aikainen ylimmän tason kutsu. Kutsu sitä vasta, kun document.body on olemassa, ja säilytä handle tarkoituksellista teardownia varten:

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

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

function mountInBrowserLifecycle() {
  if (typeof document === 'undefined' || !document.body) return;
  return client.mountWidget();
}

// Kutsu vain selaimessa suoritettavasta effectistä tai elinkaarikäsittelijästä; säilytä handle teardownia varten.

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]

Käytä nykyisiä hallintapaneelin nimiä: **Testaa chatbottia**; **Asenna → Avaimet ja verkkotunnukset** avaimen ja sen origin-asetusten tarkistamiseen; **Asenna → Verkkosivuston asennus** asennuskatkelman kopioimiseen. Origin-rajoitukset ovat valinnaista lisäsuojausta, eivät kävijän tunnistautumista, ja verkkosivustoa varten valmisteltu avain voi olla jo rajoitettu. Älä koskaan luovuta konfiguraation deployment-tokenia, ylläpitäjän tunnuksia tai yksityistä ympäristötiedostoa.

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ä- ja istuntokohtaisessa tilassa; nollaa tunniste käyttäjän tai istunnon vaihtuessa. Älä koskaan jaa sitä toisiinsa liittymättömien kävijöiden kesken. Malli saa enintään 12 viimeisintä tallennettua viestiä, kukin katkaistuna 2 000 merkkiin, ei koko keskustelun tekstiä eikä pysyvää muistia. Julkinen avain, origin-rajoitukset ja keskustelutunnisteet eivät todenna kävijää eivätkä suojaa yksityisiä keskusteluja. Vältä arkaluonteisia tietoja: viestit voidaan tallentaa ja näyttää projektin omistajille; paikallisen tilan tyhjentäminen ei poista palvelimen tietueita.
4. Esitä vastaukset turvallisesti tekstinä tai puhdistettuna Markdownina ja HTTP(S)-lähteet saavutettavina linkkeinä niiden järjestys säilyttäen. Älä koskaan lisää epäluotettua raakaa HTML:ää tai turvattomia linkkiskeemoja.
5. Toteuta odotus-, tyhjä-, virhe- ja uudelleenyritystilat. Varavastauksella voi olla tyhjät lähteet; yleistä `wasAnswered`-lippua ei ole. Jos backend palauttaa `providerError`-kentän, rajaa se turvallisesti valinnaiseksi ja näytä yleinen palveluntarjoajavirhe normaalin vastauksen sijaan. Älä käsittele idempotenssiavaimella jo valmiiksi käsiteltyä vastausta siirtovirheenä äläkä toista sitä sokkona. Julkaistu SDK `0.1.4` ei välttämättä tyypitä nykyisen lähdekoodin merkintöjä, joten käsittele niiden puuttuminen. `productFallback` ja `providerError` ovat valinnaisia; älä keksi yleistä fallback-tilakenttää. Käsittele sekä ChattyboxError että käärimättömät verkkovirheet; code on valinnainen.
6. Hylkää tyhjät tai trimmauksen jälkeen yli 2 000 merkin viestit, estä kaksoislähetykset ja pidä näppäimistön sekä ruudunlukijan käyttö toimivana. Headless `sendMessage()` ei yritä automaattisesti uudelleen: käytä yhtä yksilöllistä `idempotencyKey`-avainta loogista viestiä kohden ja toista täsmälleen sama syöte; älä yritä sokkona uudelleen jokaisen HTTP 409:n jälkeen. SDK `0.1.4` yrittää erikseen `getWidgetConfig()`-pyyntöä uudelleen vain kerran HTTP 400:n jälkeen; hostatun widgetin startup-GET-uudelleenyritykset ovat erillinen mekanismi.
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: “Käytä pientä Client Componentia pysyvässä layoutissa ja kutsu mountWidget()-metodia vain selaimessa suoritettavasta effectistä, ei renderöinnin aikana.”
• React SPA: “Liitä ylläpidetty käyttöliittymä pysyvästä sovellusshellistä. Jos komponentti omistaa SDK-handlet, palauta jokaiselle handlelle `remove()` cleanupiksi tarkoituksellista teardownia varten; muussa tapauksessa säilytä yhteinen loader sallittujen reittimuutosten ajan.”
• Docusaurus: “Alusta selaimen koodissa src/theme/Root-tiedostosta ja säilytä loader sallittujen dokumentaatioreittien ajan. Tarkista käytössä olevan hostatun loaderin versio ja locale-käytös ennen kuin luotat kielenvaihtoihin asiakaspuolella; hallintapaneelin asetusten muutokset edellyttävät edelleen uudelleenalustusta.”
• 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 tekee aktiivisen teardownin `remove()`/`window.ChattyBox.destroy()`-kutsulla, kun SPA-reitti suljetaan pois tai suostumus perutaan; älä lataa sitä arkaluonteisille/yksityisille reiteille tai ennen vaadittua suostumusta. UI:n piilottaminen tai pelkän skriptitagin poistaminen ei riitä, eikä palvelimen jo käsittelemää pyyntöä voi perua. 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. Nykyiset hallintapaneelin polut ovat **Asenna → Avaimet ja verkkotunnukset** ja **Asenna → Verkkosivuston asennus**. Origin-rajoitukset ovat valinnaista lisäsuojausta, eivät kävijän tunnistautumista; verkkosivustoa varten valmisteltu avain voi olla jo rajoitettu. Rajoitettu avain tarvitsee sallitun pyynnön originin, eikä Node fetch lähetä selaimen Origin-/Referer-otsakkeita automaattisesti. Älä koskaan paljasta hallintasalaisuuksia tai konfiguraation deployment-tokenia.
7. 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 **Asenna → Verkkosivuston asennus** -näkymän tuottamaa skriptiä. Tarkista julkinen selainavain ja sen origin-asetukset kohdassa **Asenna → Avaimet ja verkkotunnukset**. Origin-rajoitukset ovat valinnaista lisäsuojausta, eivät kävijän tunnistautumista, ja verkkosivustoa varten valmisteltu avain voi olla jo rajoitettu. Älä koskaan sisällytä konfiguraation deployment-tokenia, ylläpitäjän tunnuksia tai yksityistä ympäristötiedostoa:

[PASTE COMPLETE WIDGET SCRIPT]

Tarkista sivusto ensin ja tunnista turvallisin julkisten sivujen lisäyskohta. Lataa muuttamaton skripti täsmälleen kerran ja vain, kun vaadittu suostumus on saatu; sulje yksityiset-, admin- ja kassareitit pois. SPA-reittimuutoksessa tai suostumuksen peruuntuessa tee alustetulle widgetille aktiivinen teardown ennen siirtymistä poissuljettuun tilaan ja alusta se uudelleen vain, kun se on sallittua. Varmista, että käytössä oleva loader-versio tukee teardownia; käyttöliittymän piilottaminen tai pelkän skriptitagin poistaminen ei riitä, eikä teardown voi perua jo käsiteltyjä pyyntöjä. Säilytä CSP-käytös, älä paljasta yksityisiä tunnistetietoja, ylläpitäjän salaisuuksia tai konfiguraation deployment-tokenia, ä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.