AssistantWidget

A button that opens a dialog with a question field, the conversation and the AI note. The page passes an adapter with an ask function, the model, the provider and the link to what is sent. Every label is a prop. This demo uses a fake adapter with canned answers.

AssistantWidget

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, AssistantWidget

Dark theme, AssistantWidget

High contrast theme, AssistantWidget

UsageLink to the section Usage

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} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The button is a real button that opens a real dialog: focus moves to the question field, stays inside while the dialog is open, and returns to the button on close.
Escape closes it.
The conversation is a log region, so each answer is read out as it arrives; sending, an empty question and an error are announced in a status region.
Reduced motion and the panel's motion switch stop the opening animation.
It works at 320 px.

This demo runs through axe in all three themes on every test run. See what the tests check.