AssistantWidget

Przycisk, który otwiera okno dialogowe z polem na pytanie, rozmową i notatką o AI. Strona przekazuje adapter z funkcją ask, modelem, dostawcą i linkiem do tego, co jest wysyłane. Każda etykieta jest propem. Ten przykład używa udawanego adaptera z gotowymi odpowiedziami.

AssistantWidget

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: AssistantWidget

Noc, podgląd: AssistantWidget

Wysoki kontrast, podgląd: AssistantWidget

UżycieLink do sekcji Użycie

tsx

import { AssistantWidget } from '@skribly/ui/assistant'

tsx

const adapter = {
  model: 'Example model 1',
  provider: 'Example provider',
  sentHref: '/privacy#ai',
  ask: async (question, { signal }) => ({ text: await callYourService(question, signal) })
}

<AssistantWidget adapter={adapter} labels={labels} />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Przycisk jest prawdziwym przyciskiem, który otwiera prawdziwe okno dialogowe: fokus przechodzi do pola pytania, zostaje w oknie, dopóki jest otwarte, i wraca na przycisk po zamknięciu.
Escape zamyka okno.
Rozmowa jest regionem dziennika, więc każda odpowiedź jest odczytywana, gdy się pojawi; wysyłanie, puste pytanie i błąd ogłasza region statusu.
Ograniczony ruch i przełącznik ruchu w panelu zatrzymują animację otwarcia.
Działa przy 320 px.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.