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 ning piirake selle lubatud origin’e.
• Kopeerige jaotises Embed kuvatav avalik võti ja vidina API URL.
• Otsustage, millistel rakenduse marsruutidel või paigutustel kasutajaliides laadida.

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. Laadi hallatav kasutajaliides funktsiooni client.mountWidget() abil sobivast kliendipoolsest komponendist või lifecycle-hook’ist.
5. Laadi see ainult minu määratud marsruutidel või paigutuses ning kutsu vajaduse korral raamistiku puhastuse ajal välja tagastatud funktsioon remove().
6. Ära lisa widget.js-i käsitsi, loo backend-proksit ega lisa teist ChattyBoxi klienti.
7. Säilita olemasolev navigeerimine, renderduse piirid, lokaliseerimine, analüütika, nõusolekud ja stiilid.
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();

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

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 järgnevate sõnumite jaoks conversationId.
4. Renderda vastuse allikad juurdepääsetavate linkidena ja säilita nende järjestus.
5. Rakenda ooteloleku, tühja, vea, kordusproovi ja toetamata vastuse olekud.
6. Väldi topeltesitamist ning hoia klaviatuuri ja ekraanilugeja kasutuskogemus toimivana.
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: „Hoidke Chattyboxi klient ja mountWidget()-i kutse väikeses Client Component’is, mida renderdab soovitud paigutus.“
• React SPA: „Laadige püsivast rakenduse kestast või konkreetse marsruudi paigutusest ning puhastage effect’i tagastusfunktsioonis.“
• Docusaurus: „Looge ainult kliendipoolne teema komponent ja renderdage see src/theme/Root-ist; säilitage dokumentatsiooni navigeerimine ja lokaadi muutused.“
• Vue, Nuxt, Svelte või muu raamistik: „Kasutage raamistiku kliendipoolset laadimise lifecycle’it ja sobivat puhastamise lifecycle’it.“

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. mountWidget() või kohandatud kasutajaliides ilmub ainult soovitud marsruutidel ja puhastatakse õigesti.
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.
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.