:::note Stav verzí Vydané npm SDK a hostovaný skript widget.js jsou verzovány samostatně: vydané SDK má verzi 0.1.4, zatímco aktuální zdroj hostovaného widgetu je v16. remove() vyžaduje loader, který teardown podporuje — ověřte nasazenou verzi, zejména při vlastním hostování. SDK 0.1.4 nemá reaktivní API pro změnu locale; aktuální hostovaný v16 může při změně rozpoznaného locale obnovit produktové popisky, v souladu s pravidly projektu. Headless sendMessage() se automaticky neopakuje. Historický hostovaný v15 může naplánovat nejvýše 10 pokusů o chat během 30sekundového okna opakování; nejde o pevný časový limit pro již probíhající požadavek. :::

Integrujte s AI programovacím asistentem

Doporučenou integrací v kódu aplikace je npm balíček @openstaticfish/chattybox. Kód aplikace pomocí něj nakonfiguruje veřejný klíč a URL API, načte spravovaný plovoucí widget ChattyBoxu z trvalého layoutu v prohlížeči, 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 Otestovat chatbota.
• V části Instalace → Klíče a domény zkontrolujte nebo vytvořte veřejný klíč pro prohlížeč a jeho nastavení originů. Klíč připravený pro web už může být omezený; klíče vytvořené bez omezení fungují napříč originy. Omezení jsou volitelným zabezpečením navíc, nikoli ověřením návštěvníka.
• V části Instalace → Instalace na web vyberte vhodný klíč a zkopírujte vygenerovaný snippet. Pokud obsahuje data-api-url, použijte jej; jinak před integrací zjistěte správný HTTP endpoint widgetu v konfiguraci nasazení.
• Rozhodněte, zda aplikaci vyhovuje trvale plovoucí widget, nebo potřebujete vlastní rozhraní s umístěním a teardownem omezeným na konkrétní trasy.

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]

Klíč widgetu je veřejný a může být součástí kódu v prohlížeči; nejde o tajný údaj ani o ověření návštěvníka. Omezení originů je volitelným zabezpečením navíc, nikoli ověřením. Klíč připravený pro web už může být omezený: zkontrolujte jeho nastavení a v případě omezení povolte všechny požadované originy produkce, náhledu, stagingu a localhostu (přesné schéma, hostitele a port). Nikdy nežádejte o token pro nasazení konfigurace, přihlašovací údaje správce ani jiné tajné údaje a nevkládejte je do kódu prohlížeče.

Při ověřování klíče, nastavení originů a vygenerovaného snippetu vycházejte z aktuálních částí dashboardu **Otestovat chatbota**, **Instalace → Klíče a domény** a **Instalace → Instalace na web** a ujistěte se, že se vztahují ke správnému chatbotu.

Nejprve prozkoumejte framework, model routová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. Volání client.mountWidget() provádějte pouze v kódu prohlížeče, až bude existovat `document.body`, a to z trvalého aplikačního shellu. Widget se připojí pod `document.body`, nikoli dovnitř komponenty.
5. Během povolené navigace SPA zachovejte loader. SDK `0.1.4` počítá reference pouze pro shodné možnosti připojení; při záměrném teardownu zavolejte `remove()` u každého vráceného handle. U hostovaného `widget.js` v15 poslední handle odstraní vlastní UI a styly widgetu a zruší čekající inicializaci, opakování i probíhající chatový požadavek; `window.ChattyBox.destroy()` je ekvivalentem na straně hostovaného widgetu. Ověřte, že nasazený loader teardown podporuje. Widget nenačítejte před vyžadovaným souhlasem ani na citlivých/soukromých trasách; při vyloučení trasy SPA nebo odvolání souhlasu proveďte teardown. Pouhé skrytí UI nebo odstranění značky skriptu nestačí. Teardown nemůže vzít zpět požadavek, který už server zpracoval.
6. Nevkládejte ručně widget.js, nevytvářejte backendovou proxy ani druhý loader. SDK odmítne změněný klíč, URL API, URL skriptu, locale nebo volby debugování, dokud nebudou odstraněny všechny existující odpovídající handly; nikdy potichu neponechá staré volby.
7. Zachovejte stávající navigaci, hranice vykreslování, lokalizaci, analytiku, souhlasy a styly. Volba locale v SDK se řídí projektovou zásadou přepisování skriptu; SDK `0.1.4` nemá reaktivní API pro změnu locale ani promise připravenosti. Aktuální zdroj hostovaného `widget.js` v16 může obnovovat produktové popisky při změně rozpoznaného locale; než na tomto samostatně verzovaném chování začnete spoléhat, ověřte nasazenou verzi loaderu. Hostovaný v15 plánuje nejvýše 10 pokusů o chat během 30sekundového okna opakování, nikoli pevný časový limit pro již probíhající požadavek; headless sendMessage() se automaticky neopakuje. SDK `0.1.4` ověřuje baseUrl a obaluje chyby při čtení těla odpovědi.
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.

Následující kód je ukázkou callbacku životního cyklu v prohlížeči, nikoli voláním na nejvyšší úrovni během vykreslování na serveru. Vyvolejte jej až po vytvoření document.body a pro záměrný teardown si ponechte handle:

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

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

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

// Vyvolejte v povoleném životním cyklu prohlížeče a ponechte si vrácený handle.

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]

Klíč widgetu je veřejný; omezení originů je volitelným zabezpečením navíc, nikoli ověřením návštěvníka. Klíč připravený pro web už může být omezený — zkontrolujte jeho nastavení v části **Instalace → Klíče a domény**. Vygenerovaný snippet a URL API najdete v části **Instalace → Instalace na web**.

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 ve stavu omezeném na návštěvníka či relaci, abyste seskupovali zprávy; při změně uživatele nebo relace jej resetujte. Nikdy ID nesdílejte mezi nesouvisejícími návštěvníky. Při stejném ID dostane model až 12 posledních uložených zpráv, každou zkrácenou na 2 000 znaků — nikoli celý přepis nebo trvalou paměť modelu. Veřejný klíč, omezení originů ani conversationId neověřují návštěvníky a nechrání soukromé konverzace. Neposílejte citlivé údaje: zprávy mohou být uloženy a viditelné vlastníkům projektu; vymazání místního stavu nesmaže záznamy na serveru.
4. Odpovědi bezpečně vykreslujte jako text nebo sanitizovaný Markdown. Zdroje HTTP(S) zobrazujte jako přístupné odkazy a zachovejte jejich pořadí. Nikdy nevkládejte nedůvěryhodné surové HTML ani nebezpečná schémata odkazů.
5. Implementujte stavy čekání, prázdný stav, chybu a opakování. Záložní odpovědi mohou mít prázdné sources; obecný příznak wasAnswered neexistuje. Pokud backend vrátí providerError, bezpečně jej zúžte jako volitelné pole a zobrazte obecnou chybu poskytovatele, nikoli běžnou odpověď; dokončený požadavek s klíčem idempotence neopakujte bez rozmyslu. Vydané SDK 0.1.4 nemusí typovat pole odpovědi z aktuálního zdroje, proto počítejte s jejich nepřítomností. Ošetřete ChattyboxError i neobalené síťové chyby; code je volitelné.
6. Odmítejte prázdné zprávy a zprávy delší než 2 000 znaků po oříznutí; zabraňte duplicitnímu odeslání a zachovejte použitelnost klávesnice i čteček obrazovky. Headless sendMessage() se automaticky neopakuje: pro každou logickou zprávu použijte jedinečný idempotencyKey a při opakování znovu použijte přesně stejný vstup. Neopakujte bez rozmyslu každou odpověď 409. SDK 0.1.4 zopakuje getWidgetConfig() po HTTP 400 pouze jednou; hostovaný v15 samostatně opakuje počáteční požadavky GET.
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: „Použijte malou Client Component v trvalém layoutu a mountWidget() volejte z efektu pouze v prohlížeči, nikoli během vykreslování.“
• React SPA: „Připojujte z trvalého aplikačního shellu. Pokud komponenta vlastní poslední handle SDK 0.1.4, vraťte remove() pro záměrný teardown; jinak ponechte sdílený loader při změnách tras.“
• Docusaurus: „Inicializujte v kódu prohlížeče z src/theme/Root a zachovejte loader při povolené navigaci dokumentace. Než se spolehnete na změny jazyka na straně klienta, ověřte nasazenou verzi hostovaného loaderu a jeho chování locale; změny konfigurace v dashboardu stále vyžadují novou inicializaci.“
• 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. Hostovaný widget používá trvalý shell a remove() používá pouze při záměrném teardownu UI, vyloučení trasy po navigaci SPA nebo odvolání souhlasu. Vlastní rozhraní má skutečné čištění komponenty.
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. Omezení originů jsou volitelná, nejde o ověření návštěvníka; klíč připravený pro web už může být omezený. Omezený klíč vyžaduje povolený origin požadavku; Node fetch automaticky neposílá hlavičky prohlížeče. Ověřte, že jsou citlivé trasy vyloučené a že odvolání souhlasu aktivně provede teardown inicializovaného widgetu, nikoli jen jeho skrytí.
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 v části „Instalace na web“ v mém ChattyBoxu:

[PASTE COMPLETE WIDGET SCRIPT]

Nejprve web prozkoumejte a určete nejbezpečnější místo vložení na veřejných stránkách. Nezměněný skript načtěte přesně jednou, a to až po získání vyžadovaného souhlasu; vynechte soukromé, administrátorské a pokladní trasy. Při změně trasy SPA nebo odvolání souhlasu proveďte teardown již inicializovaného widgetu ještě před vstupem do vyloučeného stavu a znovu jej inicializujte, pouze pokud je to povoleno. Ověřte, že nasazený loader teardown podporuje; pouhé skrytí UI nebo odstranění značky skriptu nestačí a teardown nemůže vzít zpět již zpracované požadavky. Zachovejte CSP, nezpřístupňujte soukromé přihlašovací údaje ani token pro nasazení konfigurace, 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.