Neidio i'r prif gynnwys

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 Profi'r sgwrsfot.
  • O dan Gosod → Allweddi a pharthau, adolygwch neu crëwch allwedd porwr gyhoeddus a gwiriwch ei gosodiadau tarddiad. Gall allwedd a baratowyd ar gyfer gwefan fod wedi’i chyfyngu eisoes; mae allweddi heb gyfyngiadau yn gweithio o bob tarddiad. Mae cyfyngiadau tarddiad yn fesur caledu dewisol ac nid ydynt yn dilysu ymwelwyr.
  • O dan Gosod → Gosod ar wefan, dewiswch allwedd addas a chopïwch y pyt gosod. Defnyddiwch ei werth data-api-url os yw ar gael; fel arall, ceisiwch yr endpoint HTTP widget cywir o ffurfweddiad y deployment.
  • Penderfynwch a yw widget arnofiol parhaus yn addas ar gyfer y rhaglen, neu a oes angen UI personol gyda lleoliad a teardown sy’n benodol 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]

Defnyddiwch y labeli cyfredol yn y dangosfwrdd: **Profi'r sgwrsfot**; **Gosod → Allweddi a pharthau** i adolygu neu greu allwedd a’i gosodiadau tarddiad; **Gosod → Gosod ar wefan** ar gyfer y pyt gosod. Mae cyfyngiadau tarddiad yn fesur caledu dewisol ac nid ydynt yn dilysu ymwelwyr; gall allwedd a baratowyd ar gyfer gwefan fod wedi’i chyfyngu eisoes. Peidiwch byth â darparu tocyn defnyddio ffurfweddiad, manylion gweinyddol na ffeil amgylchedd breifat.

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 dim ond ar ôl i `document.body` fodoli, o shell rhaglen barhaus. Mae’n llwytho widget arnofiol o dan `document.body`, nid y tu mewn i’r gydran.
5. Cadwch y loader drwy lywio SPA a ganiateir. Dim ond opsiynau mount unfath ar gyfer sgript sy’n eiddo i’r SDK ei hun y mae SDK cyhoeddedig `0.1.4` yn eu rhannu; mae `mountWidget()` yn gwrthod allwedd, URL API, scriptUrl, locale neu opsiwn debug sydd wedi newid tra bo handlenni presennol yn bodoli. Galwch `remove()` ar bob handlen a ddychwelir ar gyfer teardown bwriadol. Yng nghod ffynhonnell cyfredol y widget lletyol `widget.js` v16, mae’r handlen olaf yn dinistrio UI/arddulliau’r widget ac yn canslo cychwyn, ailgeisiau a sgwrs sydd ar waith; `window.ChattyBox.destroy()` yw’r cyfatebiaeth ar gyfer y widget lletyol. Gwiriwch fod fersiwn y loader a ddefnyddir yn cefnogi teardown cyn dibynnu ar hyn; nid yw cuddio’r UI na thynnu tag y sgript yn unig yn ddigon. Peidiwch â llwytho cyn y caniatâd gofynnol nac ar lwybrau sensitif/preifat; gwnewch teardown gweithredol pan fydd llwybr wedi’i eithrio neu ganiatâd wedi’i dynnu’n ôl. Ni all glanhau ddadwneud cais y mae’r gweinydd eisoes wedi’i brosesu.
6. Peidiwch â mewnosod `widget.js` â llaw, creu dirprwy backend na chyflwyno ail loader. Dim ond mountiau sy’n eiddo i’r SDK gydag opsiynau unfath y mae `mountWidget()` yn eu rhannu; gwrthodir allwedd, URL API, scriptUrl, locale neu opsiwn debug sydd wedi newid nes bod pob handlen bresennol wedi’i thynnu. Nid yw’n cadw hen opsiynau’n dawel.
7. Cadwch y llywio, ffiniau rendro, lleoleiddio, dadansoddeg, caniatâd a steilio presennol. Nid oes gan y SDK API locale adweithiol na ready promise; mae opsiwn locale y SDK yn dilyn polisi diystyru sgript y prosiect. Gall y widget lletyol yng nghod ffynhonnell cyfredol, `widget.js` v16, ddiweddaru labeli sy’n eiddo i’r cynnyrch pan fydd y locale a ddatryswyd yn newid; gwiriwch fersiwn y loader a ddefnyddir a pholisi locale y prosiect cyn dibynnu ar hyn. Mae’r widget lletyol yng nghod ffynhonnell cyfredol, `widget.js` v16, yn trefnu hyd at 10 ymgais sgwrs o fewn ffenestr amserlennu ailgeisio 30 eiliad; nid yw hyn yn derfyn amser caled ar gais sydd eisoes ar waith. Gwiriwch fersiwn y loader a ddefnyddir cyn dibynnu ar ymddygiad ailgeisio’r widget lletyol. Nid yw headless `sendMessage()` yn ailgeisio’n awtomatig; mae `getWidgetConfig()` y SDK yn gwneud un ymgais wrth gefn ar wahân ar ôl HTTP 400. Mae ailgeisiau GET cychwyn y widget lletyol yn fecanwaith ar wahân i’r ailgeisiau sgwrs hyn. Mae’r SDK yn dilysu `baseUrl` ac yn trin cyrff ymateb na ellir eu darllen.
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.

Dyma enghraifft callback cylch bywyd porwr, nid galwad lefel uchaf wrth rendro ar y gweinydd. Galwch hi dim ond ar ôl i document.body fodoli a chadwch ei handlen ar gyfer teardown bwriadol:

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

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

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

// Cadwch yr handlen a ddychwelwyd ar gyfer llywio a ganiateir a teardown 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]

Defnyddiwch y labeli cyfredol yn y dangosfwrdd: **Profi'r sgwrsfot**; **Gosod → Allweddi a pharthau** i wirio’r allwedd a’i gosodiadau tarddiad; **Gosod → Gosod ar wefan** ar gyfer y pyt gosod. Mae cyfyngiadau tarddiad yn fesur caledu dewisol ac nid ydynt yn dilysu ymwelwyr; gall allwedd a baratowyd ar gyfer gwefan fod wedi’i chyfyngu eisoes. Peidiwch byth â darparu tocyn defnyddio ffurfweddiad, manylion gweinyddol na ffeil amgylchedd breifat.

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` mewn cyflwr cwmpas-ymwelydd a chwmpas-sesiwn; ailosodwch ef pan fydd y defnyddiwr neu’r sesiwn yn newid. Peidiwch byth â rhannu ID rhwng ymwelwyr nad ydynt yn gysylltiedig. Mae’r model yn derbyn hyd at 12 neges ddiweddar a gedwir, pob un wedi’i byrhau i 2,000 nod, nid y trawsgrifiad llawn na chof parhaol. Nid yw allwedd gyhoeddus, cyfyngiadau tarddiad na IDs sgwrs yn dilysu ymwelwyr nac yn diogelu sgyrsiau preifat. Osgowch wybodaeth sensitif: gall negeseuon gael eu cadw a’u gweld gan berchnogion y prosiect; nid yw clirio cyflwr lleol yn dileu cofnodion gweinydd.
4. Rendrwch atebion yn ddiogel fel testun neu Markdown wedi’i lanweithio, a rendrwch ffynonellau HTTP(S) fel dolenni hygyrch gan gadw eu trefn. Peidiwch byth â mewnosod HTML crai na ellir ymddiried ynddo na chynlluniau dolenni anniogel.
5. Gweithredwch gyflyrau aros, gwag, gwall ac ailgeisio. Gall atebion wrth gefn fod heb ffynonellau; nid oes baner gyffredinol `wasAnswered`. Os bydd y backend yn darparu `providerError`, cyfyngwch ef yn ddiogel i faes dewisol a dangoswch fethiant darparwr cyffredinol yn hytrach nag ateb arferol. Peidiwch ag ailchwarae’n ddall ymateb wedi’i gwblhau gydag allwedd idempotency. Efallai na fydd SDK cyhoeddedig `0.1.4` yn teipio meysydd ymateb y cod ffynhonnell cyfredol, felly dylech oddef eu habsenoldeb. Mae `productFallback` a `providerError` yn ddewisol; peidiwch â dyfeisio maes statws wrth gefn cyffredinol. Triniwch ChattyboxError a gwallau rhwydwaith heb eu lapio; mae code yn ddewisol.
6. Gwrthodwch negeseuon sy’n wag neu dros 2,000 nod ar ôl trimio, atalwch gyflwyniadau dyblyg a chadwch ymddygiad bysellfwrdd a darllenydd sgrin yn ddefnyddiadwy. Nid yw headless `sendMessage()` yn ailgeisio’n awtomatig: defnyddiwch un `idempotencyKey` unigryw fesul neges resymegol ac ail-ddefnyddiwch yr union fewnbwn wrth ailgeisio; peidiwch ag ailgeisio’n ddall ar bob HTTP 409. Mae SDK `0.1.4` yn ailgeisio `getWidgetConfig()` unwaith yn unig ar ôl HTTP 400; mae ailgeisiau GET cychwyn y widget lletyol yn fecanwaith ar wahân.
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: “Defnyddiwch Gydran Client fach mewn layout parhaus, a galwch mountWidget() o effect sy’n rhedeg yn y porwr yn unig, nid wrth rendro.”
  • React SPA: “Atodwch o’r plisgyn ap parhaus. Os yw’r gydran yn berchen ar handlenni SDK, dychwelwch remove() fel cleanup ar gyfer pob handlen wrth wneud teardown bwriadol; fel arall cadwch y loader a rennir drwy newidiadau llwybr a ganiateir.”
  • Docusaurus: “Cychwynnwch o src/theme/Root mewn cod porwr a chadwch y loader drwy lywio docs a ganiateir. Gwiriwch fersiwn y loader lletyol a ddefnyddir a’i ymddygiad locale cyn dibynnu ar ddiweddariadau iaith ochr-cleient; mae newidiadau ffurfweddiad y dangosfwrdd yn dal i olygu bod angen ailgychwyn.”
  • 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 gwneud teardown gweithredol gyda `remove()`/`window.ChattyBox.destroy()` pan fydd llwybr SPA wedi’i eithrio neu ganiatâd wedi’i dynnu’n ôl; peidiwch â’i lwytho ar lwybrau sensitif/preifat na chyn y caniatâd gofynnol. Nid yw cuddio’r UI na thynnu tag y sgript yn unig yn ddigon, ac ni ellir dadwneud cais sydd eisoes wedi’i brosesu gan y gweinydd. 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. Y llwybrau cyfredol yn y dangosfwrdd yw **Gosod → Allweddi a pharthau** ac **Gosod → Gosod ar wefan**. Mae cyfyngiadau tarddiad yn fesur caledu dewisol ac nid ydynt yn dilysu ymwelwyr; gall allwedd a baratowyd ar gyfer gwefan fod wedi’i chyfyngu eisoes. Mae angen tarddiad cais a ganiateir ar allweddi cyfyngedig, ac nid yw Node fetch yn darparu penawdau Origin/Referer porwr yn awtomatig. Peidiwch byth â datgelu cyfrinachau gweinyddol na thocyn defnyddio ffurfweddiad.
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 olwg **Gosod → Gosod ar wefan** ChattyBox. Gwiriwch allwedd gyhoeddus y porwr a’i gosodiadau o dan **Gosod → Allweddi a pharthau**. Mae cyfyngiadau tarddiad yn fesur caledu dewisol ac nid ydynt yn dilysu ymwelwyr; gall allwedd a baratowyd ar gyfer gwefan fod wedi’i chyfyngu eisoes. Peidiwch byth â chynnwys tocyn defnyddio ffurfweddiad, manylion gweinyddol na ffeil amgylchedd breifat:

[PASTE COMPLETE WIDGET SCRIPT]

Archwiliwch y wefan yn gyntaf a nodwch y pwynt mewnosod mwyaf diogel ar gyfer tudalennau cyhoeddus. Llwythwch y sgript ddigyfnewid yn union unwaith a dim ond pan fo’r caniatâd gofynnol wedi’i roi; eithriwch lwybrau preifat/gweinyddol/talu. Ar newid llwybr SPA neu dynnu caniatâd yn ôl, gwnewch teardown gweithredol o unrhyw widget sydd wedi’i gychwyn cyn mynd i gyflwr wedi’i eithrio, ac ailgychwynnwch dim ond pan ganiateir hynny. Gwiriwch fod y fersiwn loader a ddefnyddir yn cefnogi teardown; nid yw cuddio’r UI na thynnu tag y sgript yn unig yn ddigon, ac ni all teardown ddadwneud ceisiadau a broseswyd eisoes. Cadwch ymddygiad CSP, peidiwch â datgelu manylion preifat, cyfrinachau gweinyddol na thocyn defnyddio ffurfweddiad, 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.