@icanbwell/baileyai-chat-ui 1.0.28 → 1.1.0

package/README.md

@@ -399,11 +399,23 @@ By default the note only renders in the empty state, before the first message. P
 
 ## Collecting feedback
 
-`BaileyFeedbackButtons` renders thumbs up/down on an assistant message, with an inline form (reason chips and a comment) after a thumbs-down or an "Add a comment" click. It is opt-in and never calls an API itself: your app owns auth and networking and passes `onSubmit`/`onClear`. No extra install or subpath; it is part of the base entry.
+`BaileyChatPanel` shows thumbs up/down on every completed assistant message by default, with an inline form (reason chips and a comment) after a thumbs-down or an "Add a comment" click. It works whenever `useBaileyChat` was given a `client` (the same `createBaileyClient` instance used for streaming and history): the hook exposes `chat.feedback` (`onSubmit`/`onClear`, bound to the client and the held conversation id) and the panel wires it up. Messages without a `serverMessageId` get no buttons. For the full list of options see [docs/configuration.md](docs/configuration.md#4-response-feedback).
+
+```tsx
+const client = createBaileyClient({ baseUrl, getHeaders });
+const chat = useBaileyChat({ transport: client, client, model, instructions });
+
+<BaileyChatPanel chat={chat} />                       {/* feedback on */}
+<BaileyChatPanel chat={chat} feedback={false} />      {/* feedback off */}
+<BaileyChatPanel chat={chat} feedback={{ reasonOptions: ['inaccurate', 'unhelpful'] }} />
+```
+
+Hosts without a Bailey client (own networking) can render `BaileyFeedbackButtons` themselves through `renderMessageActions`, passing `onSubmit`/`onClear`. The panel detects a host-rendered `BaileyFeedbackButtons` for a message and hides its default for that message, so there is no duplicate and `feedback={false}` is not needed.
 
 ```tsx
 <BaileyChatPanel
     chat={chat}
+    feedback={false}
     renderMessageActions={(message) =>
         message.serverMessageId ? (
             <BaileyFeedbackButtons
@@ -432,7 +444,7 @@ Pass a stable function for `renderMessageActions`. The control renders nothing w
 - The comment is PHI-capable. It is passed to `onSubmit` only, never to the console, the trace panel or any other callback. Do not log it in your handler either.
 - Strings are overridable through the `labels` prop (`BaileyFeedbackLabels`), merged shallowly with English defaults, like `BaileyChatPanel`'s labels.
 
-Minimum backend: the assistant `message_id` on `response.completed` (and `X-Message-Id` for non-streaming responses) and the feedback routes from BAI-1231 (baileyai, BAI-1234). On a backend without them the buttons simply do not appear. A `503` from the feedback API means feedback is disabled for that environment; hide the control from your side for the session.
+Minimum backend: the assistant `message_id` on `response.completed` (and `X-Message-Id` for non-streaming responses) and the feedback routes from BAI-1231 (baileyai, BAI-1234). On a backend without them the buttons simply do not appear. A `503` from the feedback API means feedback is disabled for that environment; with `chat.feedback` the panel then hides the buttons for the rest of that client's use. A host rendering its own `BaileyFeedbackButtons` should hide the control itself.
 
 ## Localization
 
@@ -456,25 +468,59 @@ need to supply the keys you're actually translating, the rest fall back to the E
 
 See the `BaileyChatPanelLabels` type for the full list of overridable strings.
 
-## Theming
-
-The package ships CSS custom properties with sensible defaults; override any of them from your app's own CSS to match your brand:
+## Styling
+
+Style the panel by setting CSS custom properties from your own CSS. Custom properties inherit through shadow roots, so the same approach works whether the panel renders in the page or inside a shadow DOM. Set them on `:root`, on a shadow host, or on any wrapper around the panel. Nothing is required: each token falls back to the default shown.
+
+**Do not select `.bailey-*` classes.** They are internal and can change in any release. If you need to change something the tokens below don't cover, ask for a token or a prop instead.
+
+Colors:
+
+| Token | Default | Used for |
+|---|---|---|
+| `--color-bailey-accent` | `#4f46e5` | links, selected states, focus ring, spinners |
+| `--color-bailey-bubble-bg` | `#ffffff` | user message bubble |
+| `--color-bailey-text` | `#000000` | primary text |
+| `--color-bailey-text-secondary` | `#6b6b6b` | secondary text, icons |
+| `--color-bailey-error` | `#d32f2f` | errors, stop button |
+| `--color-bailey-border` | `#e5e5e5` | borders |
+| `--color-bailey-surface` | `#ffffff` | cards, input row |
+| `--color-bailey-surface-muted` | `#f9fafb` | table headers, inline code, code blocks |
+| `--color-bailey-page-bg` | `#eceef4` | panel background |
+| `--color-bailey-heart` | `#16a34a` | send button |
+| `--color-bailey-tooltip-bg` | `#000000` | tooltip background |
+| `--color-bailey-tooltip-text` | `#ffffff` | tooltip text |
+
+Typography and shape (all optional):
+
+| Token | Default |
+|---|---|
+| `--bailey-font-sans` | `"Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif` |
+| `--bailey-input-radius` | `9999px` |
+| `--bailey-input-border-color` | `var(--color-bailey-border)` |
+| `--bailey-send-fg` | `var(--color-bailey-heart)` |
+| `--bailey-send-bg` | `transparent` |
+| `--bailey-send-bg-hover` | `--color-bailey-heart` at 10% |
+| `--bailey-stop-fg` | `var(--color-bailey-error)` |
+| `--bailey-stop-bg` | `transparent` |
+| `--bailey-stop-bg-hover` | `--color-bailey-error` at 10% |
+| `--bailey-suggestion-radius` | `1rem` |
+| `--bailey-suggestion-border` | `none` |
+| `--bailey-suggestion-font-weight` | `normal` |
 
 ```css
-:root {
-    --color-bailey-accent: #4f46e5;
-    --color-bailey-bubble-bg: #e8e8e8;
-    --color-bailey-text: #000000;
-    --color-bailey-error: #d32f2f;
-    --color-bailey-border: #e5e5e5;
-    --color-bailey-surface: #ffffff;
-    --color-bailey-surface-muted: #f9fafb;
-    --color-bailey-text-secondary: #6b6b6b;
-    --color-bailey-tooltip-bg: #000000;
-    --color-bailey-tooltip-text: #ffffff;
+.my-chat-wrapper {
+    --color-bailey-accent: #6d28d9;
+    --bailey-font-sans: 'Fraunces', serif;
+    --bailey-send-bg: #1f2937;
+    --bailey-send-fg: #ffffff;
 }
 ```
 
+`--bailey-font-sans` is separate from `--font-sans` on purpose: a Tailwind host defines its own `--font-sans`, and the panel must not pick it up by accident.
+
+Layout props on `BaileyChatPanel`: `suggestionsAlign` (`'start'` | `'end'`; `'end'` right-aligns the cards and anchors them to the bottom of the transcript, just above the input), an empty `labels.suggestionsTitle` (omits the title), and `hideMenuButton` (hides the "..." menu, including its "New chat" and history items, so supply your own entry points).
+
 The package's own `styles.css` deliberately skips Tailwind's Preflight reset, so it coexists with a host app's own base styles (e.g. MUI's `CssBaseline`) without a global collision.
 
 If your host app is itself built with Tailwind v4, import your own Tailwind stylesheet **before** `@icanbwell/baileyai-chat-ui/styles.css`: