@icanbwell/baileyai-chat-ui 1.0.29 → 1.1.1

package/README.md

@@ -444,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; 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.
+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, and a `405` means the route does not accept the method; with `chat.feedback` the panel then hides the buttons for the rest of that client's use. A `404` is one message not found, so the buttons stay. A host rendering its own `BaileyFeedbackButtons` should hide the control itself.
 
 ## Localization
 
@@ -468,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`: