:::note Versiooni olek Avaldatud npm-SDK 0.1.4 koos widget.js v15-ga toetab teardowni remove()/window.ChattyBox.destroy() abil. Headless sendMessage() ei korda automaatselt. :::

Integreerimine AI-koodiassistendiga

Soovitatav integratsioon on @openstaticfish/chattybox npm-pakett. Selle abil saab rakendusekood seadistada avaliku võtme ja API URL-i, laadida ChattyBoxi hallatava kasutajaliidese sinna, kus teie komponent asub, või kasutada täielikult kohandatud kasutajaliidese jaoks peata klienti.

Eraldiseisev widget.js-skript on dokumenteeritud viimasena ehituseta varuvariandina saitidele, kuhu ei saa npm-pakette installida.

Enne alustamist

Seadistage vestlusrobot enne, kui palute assistendil oma rakendust muuta:

• Kontrollige jaotises Test Chat tüüpilisi vastuseid ja allikaviiteid.
• Looge jaotises Public Keys brauserivõti. See töötab vaikimisi tootmises, eelvaates, testkeskkonnas ja localhostis; lisakaitseks võib jaotises Edit origins lubada täpse origin’i piirangu.
• Kopeerige jaotises Embed kuvatav avalik võti ja vidina API URL.
• Otsustage, kas püsiv ujuv vidin sobib või vajate marsruudipõhise paigutuse ja täieliku eemaldamisega kohandatud liidest.

Need on avalikud brauserimandaadid, kuid vältige siiski keskkonnaspetsiifiliste väärtuste commit’imist. Ärge andke kunagi kaasa konfiguratsiooni juurutustokenit, administraatori mandaati ega muud keskkonnafaili.

Soovitus: laadige hallatav kasutajaliides npm-ist

See on Reacti, Next.js-i, Vite’i ja teiste paketipõhiste brauserirakenduste vaikeprompt.

Juhis

Integreeri ChattyBoxi npm-pakett

Integreeri ChattyBox sellesse rakendusse, kasutades @openstaticfish/chattybox npm-paketti.

Avalik brauserikonfiguratsioon:
- API-võti: [PASTE PUBLIC WIDGET KEY]
- API URL: [PASTE WIDGET API URL]

Uuri esmalt raamistikku, marsruutimismudelit, paketihaldurit, keskkonnamuutujate tavasid ja rakenduse püsivat paigutust. Ütle mulle enne muutmist, milliseid faile kavatsed muuta. Küsi minult, kui marsruudid, kus ChattyBox peaks ilmuma, on ebaselged.

Nõuded:
1. Installi @openstaticfish/chattybox selle paketihalduriga, mida see repositoorium juba kasutab.
2. Salvesta avalik API-võti ja API URL raamistiku brauserile eksponeeritud keskkonnamuutujate tava kasutades. Lisa näidiskeskkonnafaili kohatäitjate nimed, kuid ära commit’i tegelikke väärtusi.
3. Impordi Chattybox paketist @openstaticfish/chattybox ja loo üks klient apiKey ja baseUrl-iga.
4. Kutsu client.mountWidget() välja ainult brauserikoodis pärast document.body olemasolu ja püsivast rakenduse kestast. See laadib ujuva vidina document.body alla, mitte komponendi sisse.
5. Hoia laadija tavapärase SPA-navigeerimise ajal alles. Avaldatud SDK-s `0.1.4` jagavad identsed mountid viidet: `remove()` on idempotentne ja ainult viimane käepide käivitab v15-teardowni; erinevad valikud lükatakse tagasi, kuni käepidemeid on.
6. Ära lisa widget.js-i käsitsi, loo backend-proksit ega lisa teist laadijat. mountWidget kasutab esimest märgistatud skripti selle võtit või valikuid muutmata.
7. Säilita olemasolev navigeerimine, renderduse piirid, lokaliseerimine, analüütika, nõusolekud ja stiilid. Lokaal määratakse ainult algkäivitamisel; locale’i valik toimib üksnes siis, kui projekt lubab skripti override’i. Ära väida reaktiivseid lokaadimuutusi ega ready-promise’i olemasolu.
8. Tee väikseim sihipärane muudatus ja ära juuruta seda.
9. Käivita repositooriumi build, lint, tüübikontroll ja asjakohased testid.
10. Teata muudetud failid, seadistatavad keskkonnamuutujad, kasutajaliidese laadimiskoht ja viis, kuidas seda juurutatud saidil testida.

Tulemuseks olev rakendusekood peaks järgima seda kuju:

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

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

const widget = client.mountWidget();

// Hoia laadija lehe eluea jooksul alles; remove() käivitab UI teardown’i.

Looge kohandatud kasutajaliides

Valige see, kui teie rakendus peab hallatava kasutajaliidese laadimise asemel ise haldama sõnumiloendit, sisendit, laadimisolekuid, vigu, allikaviiteid ja paigutust.

Juhis

Loo peata ChattyBoxi kasutajaliides

Loo kohandatud vestlusroboti kasutajaliides, kasutades @openstaticfish/chattybox npm-paketti ja selle peata klienti.

Avalik brauserikonfiguratsioon:
- API-võti: [PASTE PUBLIC WIDGET KEY]
- API URL: [PASTE WIDGET API URL]

Uuri esmalt rakenduse raamistikku, komponendisüsteemi, olekumustreid, stiile, juurdepääsetavuse tavasid ja testiseadistust. Paku komponendipiirid ja failid välja enne muutmist.

Nõuded:
1. Installi @openstaticfish/chattybox repositooriumi olemasoleva paketihalduriga.
2. Seadista üks Chattyboxi klient apiKey ja baseUrl-iga, kasutades brauserile eksponeeritud keskkonnamuutujaid; ära commit’i tegelikke väärtusi.
3. Kasuta sendMessage() ja säilita conversationId külastajapõhises olekus. Praegune avalik genereerimistee ei saada varasemaid käike mudelile, seega ära eelda vestlusmälu.
4. Renderda vastus turvalise tekstina või sanitiseeritud Markdownina ning HTTP(S)-allikad juurdepääsetavate linkidena, säilitades järjestuse.
5. Rakenda ootel-, tühja-, vea- ja kordusproovi olekud. Varuvastusel võivad allikad puududa ning avalik vastus ei sisalda eraldi wasAnswered- ega fallback-oleku välja.
6. Keeldu tühjadest või üle 2 000 tähemärgi pikkustest kärbitud sõnumitest, väldi topeltesitamist ning hoia klaviatuuri ja ekraanilugeja kasutuskogemus toimivana. Kasuta ühe loogilise sõnumi jaoks üht idempotencyKey’d ja korda retry’l täpselt sama sisendit; ära korda pimesi iga 409-vastust.
7. Laadi kasutajaliides ainult minu määratud marsruutidel või paigutuses.
8. Järgi olemasolevaid komponente ja stiile, selle asemel et lisada uus disainisüsteem.
9. Ära laadi widget.js-i ega kutsu mountWidget().
10. Käivita build, lint, tüübikontroll ja asjakohased testid, seejärel teata muudetud failid ja kontrolliplaan.

Märkused raamistike kohta

Lisage assistendile vajaduse korral üks täiendav lause:

• Next.js App Router: „Kasutage püsivas paigutuses väikest Client Component’i ja kutsuge mountWidget() välja ainult brauseri effectist, mitte renderdamisel.“
• React SPA: „Laadige püsivast rakenduse kestast; tagastage remove() effecti cleanupina, kui vajate sihipärast UI teardown’i.“
• Docusaurus: „Algväärtustage brauserikoodist src/theme/Root-is ja hoidke laadija dokumentatsiooni navigeerimise ajal alles; kontrollige täislehe lokaadivahetusi, sest kliendipoolne keelemuutus seda ümber ei seadista.“
• Vue, Nuxt, Svelte või muu raamistik: „Kasutage püsivas paigutuses ainult kliendipoolset mount-lifecycle’it; täieliku teardown’i vajadusel valige peata liides.“

Vaadake olemasolev SDK-integratsioon üle

Juhis

Vaata minu ChattyBoxi SDK-integratsioon üle

Vaata see ChattyBoxi integratsioon üle ilma juurutamata ja sõltumatut koodi muutmata.

Kontrolli, et:
1. @openstaticfish/chattybox on installitud ja imporditud, mitte selle käitumist dubleerivalt uuesti loodud.
2. Üks Chattyboxi klient saab soovitud avaliku API-võtme ja API URL-i.
3. Brauseri keskkonnamuutujad järgivad selle raamistiku avalike muutujate nimekonventsioone ega paljasta privaatseid mandaate.
4. Hostitud vidin kasutab püsivat kesta ja kasutab remove()-i sihipärase UI teardown’i, SPA-navigatsioonijärgsete marsruudivälistuste või nõusoleku tagasivõtu jaoks; kohandatud liidesel on päris komponendi cleanup.
5. Kliendipoolne navigeerimine ja arendusaegne uuesti ühendamine ei loo duplikaatinstantsse.
6. Olemasolevad renderduspiirid, lokaliseerimine, analüütika, nõusolekud, juurdepääsetavus ja paigutus jäävad alles. Origin’i piirangud on valikulised; piiratud võti vajab lubatud request-origin’it ning Node’i fetch ei lisa brauseri päiseid automaatselt.
7. Implementatsioonil on sobivad testid ja see ei sisalda sõltumatut refaktoreerimist.

Tagasta leiud raskusastme järgi koos failiteede ja reaviidetega. Paku ainult väikseimaid ohutuid parandusi ja anna täpsed kontrollikäsud.

Pole npm-i ega build-etappi?

Kasutage juhendit widget.js installimiseks ainult siis, kui sait ei saa npm-pakette kasutada — näiteks tavalise HTML-i, CMS-i kohandatud koodi välja või Google Tag Manageri puhul.

Juhis

Installi varuvidina skript

Installi sellele saidile hostitud ChattyBoxi vidin, kasutades täpselt seda skripti, mille minu ChattyBoxi Embed-kaart genereeris:

[PASTE COMPLETE WIDGET SCRIPT]

Uuri esmalt saiti ja tuvasta kõige turvalisem globaalne avalike lehtede sisestuskoht. Laadi muutmata skript täpselt ühe korra, jäta privaatsed, administraatori ja checkout’i marsruudid välja, säilita nõusoleku- ja CSP-käitumine, ära paljasta privaatseid mandaate, ära juuruta muudatust ning teata muudetud kohast koos brauseritestimise plaaniga.

Testige tulemust

1. Vaadake diff üle ja kinnitage, et tegelikke mandaate ei commit’itud.
2. Käivitage projekti tavaline build, lint, tüübikontroll ja testid.
3. Juurutage tavapärase ülevaatusprotsessi kaudu.
4. Kontrollige soovitud marsruute privaatses brauseriaknas, sealhulgas kliendipoolset navigeerimist.
5. Esitage toetatud küsimus, avage allikaviide ja testige varukäitumist.
6. Kontrollige mobiilipaigutust, klaviatuuri kasutamist ja brauserikonsooli.

Jätkake SDK viitega ja käivituseelse kontrollnimekirjaga.