Integrujte s AI programovacím asistentem

Doporučenou integrací je npm balíček @openstaticfish/chattybox. Kód aplikace pomocí něj nakonfiguruje veřejný klíč a URL API, připojí spravované rozhraní ChattyBoxu tam, kde patří komponenta, nebo použije headless klienta pro zcela vlastní rozhraní.

Samostatný skript widget.js je popsán až na konci jako nouzová možnost bez sestavení pro weby, na které nelze instalovat balíčky npm.

Než začnete

Než požádáte asistenta o úpravu aplikace, dokončete nastavení chatbota:

• Ověřte reprezentativní odpovědi a citace v části Test Chat.
• V části Public Keys vytvořte klíč pro prohlížeč a omezte jeho povolené originy.
• Zkopírujte veřejný klíč a URL API widgetu zobrazené v části Embed.
• Rozhodněte, ze kterých tras nebo layoutů má být rozhraní připojeno.

Jde o veřejné přihlašovací údaje pro prohlížeč, přesto se vyhněte ukládání hodnot specifických pro prostředí do repozitáře. Asistentovi nikdy neposílejte token pro nasazení konfigurace, přihlašovací údaje správce ani nesouvisející soubor prostředí.

Doporučeno: Připojte spravované rozhraní z npm

Toto je výchozí prompt pro React, Next.js, Vite a další aplikace pro prohlížeč založené na balíčcích.

Zadání

Integrujte npm balíček ChattyBox

Integrujte ChattyBox do této aplikace pomocí npm balíčku @openstaticfish/chattybox.

Veřejná konfigurace prohlížeče:
- Klíč API: [PASTE PUBLIC WIDGET KEY]
- URL API: [PASTE WIDGET API URL]

Nejprve prozkoumejte framework, model trasování, správce balíčků, konvence proměnných prostředí a trvalý layout aplikace. Před úpravami mi řekněte, které soubory plánujete změnit. Pokud není jasné, na kterých trasách se má ChattyBox zobrazit, zeptejte se mě.

Požadavky:
1. Nainstalujte @openstaticfish/chattybox pomocí správce balíčků, který tento repozitář již používá.
2. Uložte veřejný klíč API a URL API pomocí konvence proměnných prostředí zpřístupněných prohlížeči v daném frameworku. Do ukázkového souboru prostředí přidejte názvy zástupných proměnných, ale skutečné hodnoty necommitujte.
3. Importujte Chattybox z @openstaticfish/chattybox a vytvořte jednoho klienta s apiKey a baseUrl.
4. Připojte spravované rozhraní pomocí client.mountWidget() z příslušné komponenty nebo lifecycle hooku na straně klienta.
5. Připojte ho pouze na trasách nebo v layoutu, které určím, a podle potřeby při úklidu ve frameworku zavolejte vrácenou funkci remove().
6. Nevkládejte ručně widget.js, nevytvářejte backendovou proxy ani nezavádějte druhého klienta ChattyBox.
7. Zachovejte stávající navigaci, hranice vykreslování, lokalizaci, analytiku, souhlasy a styly.
8. Proveďte nejmenší cílenou změnu a nenasazujte ji.
9. Spusťte sestavení, lint, kontrolu typů a relevantní testy repozitáře.
10. Uveďte změněné soubory, proměnné prostředí, které musím nastavit, místo připojení rozhraní a způsob otestování na nasazeném webu.

Výsledný kód aplikace by měl mít tuto podobu:

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();

Vytvořte vlastní rozhraní

Tuto možnost zvolte, když má vaše aplikace spravovat seznam zpráv, vstup, stavy načítání, chyby, citace a umístění namísto připojení spravovaného rozhraní.

Zadání

Vytvořte headless rozhraní ChattyBox

Vytvořte vlastní rozhraní chatbota pomocí npm balíčku @openstaticfish/chattybox a jeho headless klienta.

Veřejná konfigurace prohlížeče:
- Klíč API: [PASTE PUBLIC WIDGET KEY]
- URL API: [PASTE WIDGET API URL]

Nejprve prozkoumejte framework aplikace, systém komponent, vzory práce se stavem, styly, konvence přístupnosti a nastavení testů. Před úpravami navrhněte hranice komponent a soubory.

Požadavky:
1. Nainstalujte @openstaticfish/chattybox pomocí stávajícího správce balíčků repozitáře.
2. Nakonfigurujte jednoho klienta Chattybox s apiKey a baseUrl pomocí proměnných prostředí zpřístupněných prohlížeči; skutečné hodnoty necommitujte.
3. Použijte sendMessage() a uchovávejte conversationId pro navazující zprávy.
4. Zdroje odpovědi vykreslete jako přístupné odkazy a zachovejte jejich pořadí.
5. Implementujte stavy čekání, prázdný stav, chybu, opakování a nepodporovanou odpověď.
6. Zabraňte duplicitnímu odeslání a zachovejte použitelnost klávesnice i čteček obrazovky.
7. Rozhraní připojte pouze na trasách nebo v layoutu, které určím.
8. Řiďte se stávajícími komponentami a styly, místo abyste přidávali nový návrhový systém.
9. Nenačítejte widget.js ani nevolejte mountWidget().
10. Spusťte sestavení, lint, kontrolu typů a relevantní testy, poté uveďte změněné soubory a plán ověření.

Poznámky k frameworkům

V případě potřeby přidejte asistentovi jednu větu:

• Next.js App Router: „Klienta Chattybox a volání mountWidget() ponechte v malé Client Component vykreslované zamýšleným layoutem.“
• React SPA: „Připojte z trvalého shellu aplikace nebo konkrétního layoutu trasy a uklízejte ve vrácené funkci efektu.“
• Docusaurus: „Vytvořte komponentu motivu pouze pro klienta a vykreslete ji z src/theme/Root; zachovejte navigaci dokumentace a změny lokalizace.“
• Vue, Nuxt, Svelte nebo jiný framework: „Použijte lifecycle pro připojení pouze na straně klienta a odpovídající lifecycle pro úklid.“

Zkontrolujte existující integraci SDK

Zadání

Zkontrolujte moji integraci ChattyBox SDK

Zkontrolujte tuto integraci ChattyBox bez nasazení a bez změn nesouvisejícího kódu.

Ověřte, že:
1. @openstaticfish/chattybox je nainstalován a importován, místo aby se jeho chování duplikovalo.
2. Jeden klient Chattybox dostává zamýšlený veřejný klíč API a URL API.
3. Proměnné prostředí prohlížeče dodržují pravidla pojmenování veřejných proměnných tohoto frameworku a nezpřístupňují soukromé přihlašovací údaje.
4. mountWidget() nebo vlastní rozhraní se objevuje pouze na zamýšlených trasách a správně se uklízí.
5. Navigace na straně klienta a opětovné připojení během vývoje nevytvářejí duplicitní instance.
6. Stávající hranice vykreslování, lokalizace, analytika, souhlasy, přístupnost a layout zůstávají zachovány.
7. Implementace má odpovídající testy a neobsahuje nesouvisející refaktoring.

Vraťte nálezy podle závažnosti s cestami k souborům a odkazy na řádky. Navrhněte pouze nejmenší bezpečné opravy a uveďte přesné příkazy pro ověření.

Žádný npm ani krok sestavení?

Průvodce instalací widget.js použijte pouze tehdy, když web nemůže instalovat balíčky npm — například u obyčejného HTML, pole vlastního kódu v CMS nebo Google Tag Manageru.

Zadání

Nainstalujte záložní skript widgetu

Nainstalujte na tento web hostovaný widget ChattyBox pomocí přesného skriptu vygenerovaného na kartě Embed v mém ChattyBoxu:

[PASTE COMPLETE WIDGET SCRIPT]

Nejprve web prozkoumejte a určete nejbezpečnější globální místo pro vložení na veřejných stránkách. Načtěte nezměněný skript přesně jednou, vynechte soukromé, administrátorské a pokladní trasy, zachovejte chování souhlasů a CSP, nezpřístupněte soukromé přihlašovací údaje, změnu nenasazujte a uveďte změněné místo spolu s plánem testu v prohlížeči.

Otestujte výsledek

1. Projděte diff a ověřte, že nebyly commitnuty skutečné přihlašovací údaje.
2. Spusťte běžné sestavení, lint, kontrolu typů a testy projektu.
3. Nasazujte běžným procesem kontroly změn.
4. V soukromém okně ověřte zamýšlené trasy včetně navigace na straně klienta.
5. Položte podporovanou otázku, otevřete citaci a otestujte chování záložní odpovědi.
6. Zkontrolujte mobilní rozvržení, používání klávesnice a konzoli prohlížeče.

Pokračujte v referenci SDK a kontrolním seznamu před spuštěním.