:::note Statws fersiwn Mae'r SDK npm 0.1.4 cyhoeddedig gyda widget.js v15 yn cefnogi teardown drwy remove()/window.ChattyBox.destroy(). Nid yw headless sendMessage() yn ailgeisio’n awtomatig. :::

Integreiddio â Chynorthwyydd Codio AI

Yr integreiddiad a argymhellir yw’r pecyn npm @openstaticfish/chattybox. Mae’n gadael i god y rhaglen ffurfweddu’r allwedd gyhoeddus a’r URL API, llwytho widget arnofiol ChattyBox a gynhelir o layout porwr parhaus, neu ddefnyddio’r cleient di-ben ar gyfer UI cwbl bersonol.

Dogfennir y sgript annibynnol widget.js ar y diwedd fel dewis wrth gefn heb adeiladu ar gyfer gwefannau na allant osod pecynnau npm.

Cyn Dechrau

Cwblhewch osodiad y chatbot cyn gofyn i gynorthwyydd olygu eich rhaglen:

• Gwiriwch atebion a dyfyniadau cynrychioliadol yn Test Chat.
• Crëwch allwedd porwr yn Public Keys. Mae'n gweithio ar draws production, preview, staging a localhost yn ddiofyn; cyfyngwch darddiadau union yn ddewisol yn Edit origins fel amddiffyniad mewn dyfnder.
• Copïwch yr allwedd gyhoeddus a’r URL API widget a ddangosir yn Embed.
• Penderfynwch a yw widget arnofiol parhaus yn ffitio'r rhaglen, neu a oes angen UI personol â lleoliad a teardown penodol i lwybr.

Manylion porwr cyhoeddus yw’r rhain, ond dylech osgoi ymrwymo gwerthoedd sy’n benodol i’r amgylchedd o hyd. Peidiwch byth â darparu tocyn defnyddio ffurfweddiad, manylyn gweinyddol, neu ffeil amgylchedd amherthnasol.

Argymhellir: Atodi’r UI a Gynhelir o npm

Dyma’r anogwr diofyn ar gyfer React, Next.js, Vite a rhaglenni porwr eraill sy’n seiliedig ar becynnau.

Anogiad

Integreiddio pecyn npm ChattyBox

Integreiddiwch ChattyBox i’r rhaglen hon gan ddefnyddio pecyn npm @openstaticfish/chattybox.

Ffurfweddiad porwr cyhoeddus:
- Allwedd API: [PASTE PUBLIC WIDGET KEY]
- URL API: [PASTE WIDGET API URL]

Archwiliwch y fframwaith, y model llywio, y rheolwr pecynnau, confensiynau newidynnau amgylchedd, a layout parhaus y rhaglen yn gyntaf. Dywedwch wrthyf pa ffeiliau rydych yn bwriadu eu newid cyn golygu. Gofynnwch imi os nad yw’r llwybrau lle dylai ChattyBox ymddangos yn glir.

Gofynion:
1. Gosodwch @openstaticfish/chattybox gyda’r rheolwr pecynnau a ddefnyddir eisoes gan y storfa hon.
2. Storiwch yr allwedd API gyhoeddus a’r URL API gan ddefnyddio confensiwn newidynnau amgylchedd y fframwaith a ddatgelir i’r porwr. Ychwanegwch enwau dalfan at ffeil amgylchedd enghreifftiol, ond peidiwch ag ymrwymo gwerthoedd go iawn.
3. Mewnforiwch Chattybox o @openstaticfish/chattybox a chrëwch un cleient gyda apiKey a baseUrl.
4. Galwch client.mountWidget() mewn cod porwr ar ôl i `document.body` fodoli, o shell parhaus; mae’r widget yn arnofio o dan body, nid yn y gydran.
5. Cadwch y loader drwy lywio SPA. Yn SDK cyhoeddedig `0.1.4`, mae mountiau unfath yn rhannu cyfeiriad: mae `remove()` yn idempotent a dim ond yr handlen olaf sy'n sbarduno teardown v15; gwrthodir opsiynau gwahanol tra bo handlenni'n bodoli.
6. Peidiwch â mewnosod widget.js â llaw, creu dirprwy na loader arall; caiff y sgript farciwyd gyntaf ei hailddefnyddio heb ddiweddaru opsiynau.
7. Cadwch y llywio, ffiniau rendro, lleoleiddio, dadansoddeg, caniatâd a steilio presennol. Dim ond wrth gychwyn y caiff locale ei ddatrys; mae locale option yn gweithio dim ond os caniateir diystyru'r sgript. Peidiwch â honni diweddariadau locale adweithiol na ready promise.
8. Gwnewch y newid â’r ffocws lleiaf a pheidiwch â’i gyflwyno.
9. Rhedwch adeilad, lint, gwiriad math a phrofion perthnasol y storfa.
10. Adroddwch y ffeiliau a newidiwyd, y newidynnau amgylchedd y mae’n rhaid imi eu gosod, ble mae’r UI yn cael ei atodi, a sut i’w brofi ar y wefan a ddefnyddir.

Dylai cod y rhaglen sy’n deillio o hyn ddilyn y siâp hwn:

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

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

const widget = client.mountWidget();

// Defnyddiwch remove() ar gyfer teardown UI bwriadol.

Adeiladu Rhyngwyneb Personol

Dewiswch hwn pan ddylai eich rhaglen fod yn berchen ar restr negeseuon, mewnbwn, cyflyrau llwytho, gwallau, dyfyniadau a lleoliad yn lle atodi’r rhyngwyneb a gynhelir.

Anogiad

Adeiladu rhyngwyneb ChattyBox di-ben

Adeiladwch ryngwyneb chatbot personol gan ddefnyddio pecyn npm @openstaticfish/chattybox a’i gleient di-ben.

Ffurfweddiad porwr cyhoeddus:
- Allwedd API: [PASTE PUBLIC WIDGET KEY]
- URL API: [PASTE WIDGET API URL]

Archwiliwch fframwaith, system gydrannau, patrymau cyflwr, steilio, confensiynau hygyrchedd a gosodiad profion y rhaglen yn gyntaf. Cynigiwch ffiniau’r cydrannau a’r ffeiliau cyn golygu.

Gofynion:
1. Gosodwch @openstaticfish/chattybox gyda rheolwr pecynnau presennol y storfa.
2. Ffurfweddwch un cleient Chattybox gyda apiKey a baseUrl gan ddefnyddio newidynnau amgylchedd a ddatgelir i’r porwr; peidiwch ag ymrwymo gwerthoedd go iawn.
3. Defnyddiwch sendMessage() a chadwch conversationId yng nghyflwr yr ymwelydd i grwpio negeseuon. Nid yw'r llwybr cyhoeddus cyfredol yn pasio troeon blaenorol i'r model.
4. Rendrwch atebion yn ddiogel fel testun neu Markdown wedi'i lanhau, a rendrwch ffynonellau HTTP(S) fel dolenni hygyrch gan gadw eu trefn.
5. Gweithredwch gyflyrau aros, gwag, gwall ac ailgeisio. Gall fallback fod heb ffynonellau; nid oes maes `wasAnswered` na fallback-status. Triniwch ChattyboxError a gwallau rhwydwaith heb eu lapio.
6. Gwrthodwch negeseuon gwag neu dros 2,000 nod ar ôl trimio, atalwch gyflwyniadau dyblyg a chadwch ymddygiad bysellfwrdd a darllenydd sgrin yn ddefnyddiadwy. Defnyddiwch un `idempotencyKey` unigryw fesul neges resymegol a'i ail-ddefnyddio wrth ailgeisio.
7. Atodwch y rhyngwyneb ar y llwybrau neu’r layout a nodaf yn unig.
8. Dilynwch gydrannau ac arddulliau presennol yn hytrach nag ychwanegu system ddylunio newydd.
9. Peidiwch â llwytho widget.js na galw mountWidget().
10. Rhedwch adeilad, lint, gwiriad math a phrofion perthnasol, yna adroddwch y ffeiliau a newidiwyd a chynllun dilysu.

Nodiadau Fframwaith

Rhowch un frawddeg ychwanegol i’r cynorthwyydd pan fo angen:

• Next.js App Router: “Cadwch y cleient Chattybox a’r alwad mountWidget() y tu mewn i Gydran Client fach a rendrir gan y layout bwriadedig.”
• React SPA: “Atodwch o’r plisgyn ap parhaus. Os yw’r gydran yn berchen ar handlen SDK 0.1.4 olaf, dychwelwch remove() ar gyfer teardown bwriadol; fel arall cadwch y loader a rennir drwy newidiadau llwybr.”
• Docusaurus: “Cychwynnwch o src/theme/Root mewn cod porwr a chadwch y loader drwy lywio docs; gwiriwch drawsnewidiadau locale tudalen lawn gan nad yw newid locale ochr-cleient yn ei ailffurfweddu.”
• Vue, Nuxt, Svelte neu fframwaith arall: “Defnyddiwch gylch bywyd atodi ochr cleient y fframwaith a’r cylch bywyd glanhau cyfatebol.”

Adolygu Integreiddiad SDK Presennol

Anogiad

Adolygu fy integreiddiad SDK ChattyBox

Adolygwch yr integreiddiad ChattyBox hwn heb ei ddefnyddio na newid cod amherthnasol.

Gwiriwch:
1. Mae @openstaticfish/chattybox wedi’i osod a’i fewnforio yn lle dyblygu ei ymddygiad.
2. Mae un cleient Chattybox yn derbyn yr allwedd API gyhoeddus a’r URL API bwriadedig.
3. Mae newidynnau amgylchedd porwr yn dilyn rheolau enwi newidynnau cyhoeddus y fframwaith hwn heb ddatgelu cymwysterau preifat.
4. Mae widget lletyol yn defnyddio shell parhaus ac yn defnyddio remove() dim ond ar gyfer teardown UI bwriadol, eithriadau llwybr ar ôl llywio SPA, neu ddiddymu caniatâd. Mae gan UI personol lanhau cydran go iawn.
5. Nid yw llywio ochr cleient ac ail-osodiadau datblygu yn creu enghreifftiau dyblyg.
6. Mae ffiniau rendro, lleoleiddio, dadansoddeg, caniatâd, hygyrchedd a layout presennol yn parhau’n gyfan.
7. Mae gan y gweithrediad brofion priodol a dim ailffactorio amherthnasol.

Dychwelwch ganfyddiadau yn ôl difrifoldeb gyda llwybrau ffeil a chyfeiriadau llinell. Cynigiwch y trwsiadau diogel lleiaf yn unig a rhowch yr union orchmynion dilysu imi.

Dim npm na Cham Adeiladu?

Defnyddiwch y canllaw gosod widget.js dim ond pan na all y wefan ddefnyddio’r pecyn npm—er enghraifft, HTML plaen, maes cod personol CMS, neu Google Tag Manager.

Anogiad

Gosod sgript widget wrth gefn

Gosodwch widget ChattyBox lletyol ar y wefan hon gan ddefnyddio’r union sgript a gynhyrchwyd gan dab Embed fy ChattyBox:

[PASTE COMPLETE WIDGET SCRIPT]

Archwiliwch y wefan yn gyntaf a nodwch y pwynt mewnosod byd-eang mwyaf diogel ar gyfer tudalennau cyhoeddus. Llwythwch y sgript ddigyfnewid yn union unwaith, eithriwch lwybrau preifat/gweinyddol/til, cadwch ymddygiad caniatâd a CSP, peidiwch â datgelu cymwysterau preifat, peidiwch â defnyddio’r newid, ac adroddwch y lleoliad a newidiwyd ynghyd â chynllun prawf porwr.

Profi’r Canlyniad

1. Adolygwch y diff a chadarnhewch na ymrwymwyd unrhyw gymwysterau go iawn.
2. Rhedwch adeilad, lint, gwiriad math a phrofion arferol y prosiect.
3. Defnyddiwch drwy’r broses adolygu arferol.
4. Gwiriwch y llwybrau bwriadedig mewn ffenestr porwr breifat, gan gynnwys llywio ochr cleient.
5. Gofynnwch gwestiwn a gefnogir, dilynwch ddyfyniad, a phrofwch yr ymddygiad wrth gefn.
6. Gwiriwch gynllun symudol, defnydd bysellfwrdd a chonsol y porwr.

Parhewch â’r cyfeirnod SDK a’r rhestr wirio lansio.