Integracja z asystentem programowania AI

Zalecaną integracją jest pakiet npm @openstaticfish/chattybox. Pozwala on kodowi aplikacji skonfigurować klucz publiczny i adres URL API, zamontować utrzymywany interfejs ChattyBox w miejscu komponentu albo użyć klienta headless do stworzenia w pełni niestandardowego interfejsu.

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 i ogranicz jego dozwolone originy.
• 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. Zamontuj utrzymywany interfejs za pomocą client.mountWidget() z odpowiedniego komponentu lub hooka cyklu życia po stronie klienta.
5. Montuj go tylko na trasach lub w layoucie, które wskażę, i wywołuj zwracaną funkcję remove() podczas czyszczenia, gdy wymaga tego framework.
6. Nie wstrzykuj ręcznie widget.js, nie twórz proxy backendowego ani nie wprowadzaj drugiego klienta ChattyBox.
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();

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

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 dla kolejnych wiadomości.
4. Renderuj źródła odpowiedzi jako dostępne linki i zachowaj ich kolejność.
5. Zaimplementuj stany oczekiwania, pusty, błędu, ponowienia i nieobsługiwanej odpowiedzi.
6. Zapobiegaj wielokrotnemu wysyłaniu i zachowaj użyteczność klawiatury oraz czytników ekranu.
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.