Skip to main content
Introducing packages.sweber.dev
Documentation menuReact

React

AiNotice, AiLabel, AiContent and useAiDisclosure from @sweberdev/witness-react.

pnpm add @sweberdev/witness @sweberdev/witness-react

import "@sweberdev/witness/styles.css";
import { AiContent, AiLabel, AiNotice, WitnessProvider } from "@sweberdev/witness-react";

export function Chat() {
  return (
    <WitnessProvider locale="de">
      <AiNotice id="support-chat" href="/ki-einsatz" onEvent={log} />
      {messages.map((m) => (m.role === "assistant" ? <AiContent key={m.id} marking={{ generator: "Aria" }} labelPosition="none">{m.text}</AiContent> : …))}
    </WitnessProvider>
  );
}
Export
WitnessProviderlocale (tag or list) and messages (overrides) for everything below
AiNoticeThe chatbot notice. Props like the element: kind, id, version, href, storage, onEvent, children
AiLabelThe badge with details. kind, generator, generatorVersion, createdAt, reviewed, href, variant
AiContentWraps content with data-ai-* attributes and a label. marking, as, labelPosition (top, bottom, overlay, none)
useAiDisclosureState for your own notice UI
useWitnessMessagesThe active wording

The server render always contains the full notice; it collapses after hydration for people who already acknowledged it. So the notice is in the HTML from the first byte, and nobody sees a chat without it.

The components are client components ("use client" is set). Use @sweberdev/witness/styles.css or style the witness-* classes yourself.