:::note Stan wersji Opublikowane npm SDK 0.1.4 z widget.js v15 obsługuje teardown przez remove()/window.ChattyBox.destroy(). Headless sendMessage() nie ponawia automatycznie. :::

Integracja z asystentem programowania AI

Zalecaną integracją jest pakiet npm @openstaticfish/chattybox. Ładuje on utrzymywany pływający widżet z trwałego układu przeglądarki albo udostępnia klienta headless dla własnego UI.

Samodzielny skrypt widget.js opisano na końcu jako awaryjną opcję bez budowania dla witryn, które nie mogą instalować pakietów npm.

Zanim zaczniesz

Skonfiguruj chatbota, zanim poprosisz asystenta o edycję aplikacji:

• Zweryfikuj reprezentatywne odpowiedzi i cytowania w Test Chat.
• Utwórz klucz przeglądarkowy w Public Keys; ograniczenie dokładnych originów jest opcjonalne.
• Skopiuj klucz publiczny i adres URL API widoczne w Embed.
• Zdecyduj, w których trasach lub layoutach aplikacji ma być montowane rozwiązanie.

To publiczne dane uwierzytelniające używane w przeglądarce, ale nadal unikaj commitowania wartości zależnych od środowiska. Nigdy nie przekazuj tokenu wdrażania konfiguracji, danych administratora ani niezwiązanego pliku środowiskowego.

Zalecane: Zamontuj utrzymywany interfejs z npm

To domyślny prompt dla React, Next.js, Vite i innych pakietowych aplikacji przeglądarkowych.

Polecenie

Zintegruj pakiet npm ChattyBox

Zintegruj ChattyBox z tą aplikacją, używając pakietu npm @openstaticfish/chattybox.

Publiczna konfiguracja przeglądarki:
- Klucz API: [PASTE PUBLIC WIDGET KEY]
- Adres URL API: [PASTE WIDGET API URL]

Najpierw przeanalizuj framework, model routingu, menedżer pakietów, konwencje zmiennych środowiskowych i trwały layout aplikacji. Przed edycją powiedz mi, które pliki planujesz zmienić. Zapytaj mnie, jeśli nie jest jasne, na których trasach ChattyBox ma się pojawić.

Wymagania:
1. Zainstaluj @openstaticfish/chattybox za pomocą menedżera pakietów używanego już przez to repozytorium.
2. Przechowuj publiczny klucz API i adres URL API zgodnie z konwencją zmiennych środowiskowych dostępnych w przeglądarce dla tego frameworka. Dodaj nazwy zastępcze do przykładowego pliku środowiskowego, ale nie commituj prawdziwych wartości.
3. Zaimportuj Chattybox z @openstaticfish/chattybox i utwórz jednego klienta z apiKey i baseUrl.
4. Wywołaj client.mountWidget() po `document.body` z trwałego shella; widżet pływa pod body, nie w komponencie.
5. Zachowaj loader przy SPA. W opublikowanym SDK `0.1.4` identyczne montaże współdzielą referencję: `remove()` jest idempotentne i tylko ostatni handle uruchamia teardown v15; różne opcje są odrzucane, dopóki istnieją handle.
6. Nie wstrzykuj ręcznie widget.js, nie twórz proxy ani drugiego loadera; pierwszy oznaczony skrypt jest ponownie używany bez aktualizacji opcji.
7. Zachowaj istniejącą nawigację, granice renderowania, lokalizację, analitykę, zgody i style.
8. Wprowadź najmniejszą ukierunkowaną zmianę i nie wdrażaj jej.
9. Uruchom build, lint, sprawdzanie typów i odpowiednie testy repozytorium.
10. Podaj zmienione pliki, zmienne środowiskowe, które muszę ustawić, miejsce montowania interfejsu i sposób przetestowania go w wdrożonej witrynie.

Wynikowy kod aplikacji powinien mieć następującą postać:

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

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

const widget = client.mountWidget();

// Nie używaj remove() jako cleanupu UI.

Zbuduj niestandardowy interfejs

Wybierz tę opcję, gdy aplikacja ma samodzielnie zarządzać listą wiadomości, polem wprowadzania, stanami ładowania, błędami, cytowaniami i rozmieszczeniem zamiast montować utrzymywany interfejs.

Polecenie

Zbuduj headless interfejs ChattyBox

Zbuduj niestandardowy interfejs chatbota, używając pakietu npm @openstaticfish/chattybox i jego klienta headless.

Publiczna konfiguracja przeglądarki:
- Klucz API: [PASTE PUBLIC WIDGET KEY]
- Adres URL API: [PASTE WIDGET API URL]

Najpierw przeanalizuj framework aplikacji, system komponentów, wzorce zarządzania stanem, style, konwencje dostępności i konfigurację testów. Przed edycją zaproponuj granice komponentów i pliki.

Wymagania:
1. Zainstaluj @openstaticfish/chattybox za pomocą istniejącego menedżera pakietów repozytorium.
2. Skonfiguruj jednego klienta Chattybox z apiKey i baseUrl za pomocą zmiennych środowiskowych dostępnych w przeglądarce; nie commituj prawdziwych wartości.
3. Użyj sendMessage() i zachowuj conversationId tylko do grupowania; wcześniejsze tury nie trafiają obecnie do modelu.
4. Renderuj odpowiedź bezpiecznie i tylko źródła HTTP(S); fallback może mieć puste sources.
5. Zaimplementuj oczekiwanie, pusty, błąd i retry; nie ma pola wasAnswered/fallback-status.
6. Odrzucaj pusty lub dłuższy niż 2 000 znaków tekst; dla retry zachowaj ten sam unikalny idempotencyKey i nie retryuj ślepo 409.
7. Montuj interfejs tylko na trasach lub w layoucie, które wskażę.
8. Korzystaj z istniejących komponentów i stylów zamiast dodawać nowy system projektowy.
9. Nie ładuj widget.js ani nie wywołuj mountWidget().
10. Uruchom build, lint, sprawdzanie typów i odpowiednie testy, a następnie podaj zmienione pliki i plan weryfikacji.

Uwagi dotyczące frameworków

W razie potrzeby dodaj asystentowi jedno zdanie:

• Next.js App Router: „Umieść klienta Chattybox i wywołanie mountWidget() w małym Client Component renderowanym przez wskazany layout.”
• React SPA: „Montuj z trwałego shella aplikacji lub layoutu konkretnej trasy i sprzątaj w funkcji zwracanej przez efekt.”
• Docusaurus: „Utwórz komponent motywu działający tylko po stronie klienta i renderuj go z src/theme/Root; zachowaj nawigację dokumentacji i zmiany lokalizacji.”
• Vue, Nuxt, Svelte lub inny framework: „Użyj cyklu życia montowania po stronie klienta właściwego dla frameworka oraz odpowiadającego mu cyklu czyszczenia.”

Przejrzyj istniejącą integrację SDK

Polecenie

Przejrzyj moją integrację ChattyBox SDK

Przejrzyj tę integrację ChattyBox bez wdrażania i zmieniania niezwiązanego kodu.

Sprawdź, czy:
1. @openstaticfish/chattybox jest zainstalowany i zaimportowany zamiast powielania jego działania.
2. Jeden klient Chattybox otrzymuje właściwy publiczny klucz API i adres URL API.
3. Zmienne środowiskowe przeglądarki są zgodne z zasadami nazewnictwa publicznych zmiennych tego frameworka i nie ujawniają prywatnych danych uwierzytelniających.
4. mountWidget() lub niestandardowy interfejs pojawia się tylko na zamierzonych trasach i jest prawidłowo czyszczony.
5. Nawigacja po stronie klienta i ponowne montowanie podczas developmentu nie tworzą zduplikowanych instancji.
6. Istniejące granice renderowania, lokalizacja, analityka, zgody, dostępność i layout pozostają nienaruszone.
7. Implementacja ma odpowiednie testy i nie zawiera niezwiązanego refaktoringu.

Zwróć ustalenia według ważności, podając ścieżki plików i odwołania do wierszy. Zaproponuj tylko najmniejsze bezpieczne poprawki i podaj dokładne polecenia weryfikacji.

Brak npm lub etapu budowania?

Skorzystaj z instrukcji instalacji widget.js tylko wtedy, gdy witryna nie może używać pakietu npm — na przykład w zwykłym HTML-u, polu własnego kodu CMS lub Google Tag Managerze.

Polecenie

Zainstaluj awaryjny skrypt widżetu

Zainstaluj hostowany widżet ChattyBox w tej witrynie, używając dokładnego skryptu wygenerowanego na karcie Embed mojego ChattyBoxa:

[PASTE COMPLETE WIDGET SCRIPT]

Najpierw przeanalizuj witrynę i wskaż najbezpieczniejsze globalne miejsce wstawienia na publicznych stronach. Załaduj niezmieniony skrypt dokładnie raz, wyklucz trasy prywatne, administracyjne i płatności, zachowaj działanie zgód i CSP, nie ujawniaj prywatnych danych uwierzytelniających, nie wdrażaj zmiany i podaj zmienione miejsce oraz plan testów w przeglądarce.

Przetestuj wynik

1. Przejrzyj diff i potwierdź, że nie commitowano prawdziwych danych uwierzytelniających.
2. Uruchom zwykły build, lint, sprawdzanie typów i testy projektu.
3. Wdróż zmianę w ramach standardowego procesu przeglądu.
4. Zweryfikuj zamierzone trasy w prywatnym oknie przeglądarki, w tym nawigację po stronie klienta.
5. Zadaj obsługiwane pytanie, przejdź do cytowania i przetestuj zachowanie odpowiedzi awaryjnych.
6. Sprawdź układ mobilny, obsługę klawiatury i konsolę przeglądarki.

Kontynuuj w dokumentacji SDK i liście kontrolnej przed uruchomieniem.