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, atodi rhyngwyneb ChattyBox a gynhelir lle mae eich cydran yn perthyn, 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 a chyfyngwch ei tharddiadau a ganiateir.
• Copïwch yr allwedd gyhoeddus a’r URL API widget a ddangosir yn Embed.
• Penderfynwch pa lwybrau neu layoutau rhaglen ddylai atodi’r profiad.

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. Atodwch y rhyngwyneb a gynhelir gyda client.mountWidget() o’r gydran ochr cleient neu’r bachyn cylch bywyd priodol.
5. Atodwch ef ar y llwybrau neu’r layout a nodaf yn unig, a galwch y ffwythiant remove() a ddychwelir wrth lanhau pan fo’r fframwaith yn gofyn am hynny.
6. Peidiwch â mewnosod widget.js â llaw, creu dirprwy ôl-wyneb, na chyflwyno ail gleient ChattyBox.
7. Cadwch y llywio, ffiniau rendro, lleoleiddio, dadansoddeg, caniatâd a steilio presennol.
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();

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

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 ar gyfer negeseuon dilynol.
4. Rendrwch ffynonellau atebion fel dolenni hygyrch a chadwch eu trefn.
5. Gweithredwch gyflyrau aros, gwag, gwall, ailgeisio ac ateb heb gefnogaeth.
6. Ataliwch gyflwyniadau dyblyg a chadwch ymddygiad bysellfwrdd a darllenydd sgrin yn ddefnyddiadwy.
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 neu’r layout llwybr penodol, a glanhewch yn ffwythiant dychwelyd yr effaith.”
• Docusaurus: “Crëwch gydran thema ochr cleient a’i rendro o src/theme/Root; cadwch lywio dogfennaeth a newidiadau locale.”
• 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 mountWidget() neu’r rhyngwyneb personol yn ymddangos ar y llwybrau bwriadedig yn unig ac yn glanhau’n gywir.
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.