@filigran/chatbot 3.22.0 → 3.23.0

package/CHANGELOG.md

@@ -8,6 +8,36 @@ the versions follow [semantic versioning](https://semver.org/spec/v2.0.0.html).
 This file starts at 3.10.0; earlier releases are on the
 [releases page](https://github.com/FiligranHQ/filigran-ui/releases).
 
+## 3.23.0 — 2026-11-11
+
+### Changed
+
+- The composer draws its border as the design system's Textarea: none at
+  rest, `theme.inputBorderHover` (`--filigran-chat-input-border-hover`, the
+  panel border unset) under the pointer. Dictation keeps its red border and
+  the focus keeps its 2 px ring.
+- The panel's own look (no host theme) is the design system's palette: dark
+  surfaces grayblue 850 / 700 / 600 instead of three ad-hoc navy shades, the
+  tooltip, scrollbar and context usage colours from its scale, and every
+  floating surface (menus, the floating panel, the reasoning dialog, the row
+  actions bar) takes its one elevation shadow, `--shadow-global-shadow`. Host
+  tokens still win. The code colours stay GitHub's (the design system has no
+  syntax palette). A stylesheet test refuses any other colour literal and any
+  hand-written shadow in a component.
+- Every chat text uses the design system's type scale: meta lines, labels,
+  chips and counts are `text-content-compact` (12 px, was 9.6 to 12 px in
+  seven ad-hoc sizes), titles, rows, the composer and the message text
+  `text-content-base` (14 px, was 13 px), the welcome emoji
+  `text-title-jumbo`. Host tokens still win. A stylesheet test refuses any
+  arbitrary `text-[..rem]` or `text-[..px]` in a component.
+- Every error, warning and success colour reads the panel's feedback tones
+  instead of a Tailwind red, amber or emerald: the approval card and its
+  verdict badge, the context and quota gauges, the trace steps, the agent
+  list warnings, the voice call error ring, the delete confirmation. New theme
+  entry `theme.success` (`--filigran-chat-success`, a green unset) beside
+  `danger` and `warning`. A stylesheet test refuses any Tailwind palette shade
+  in a component.
+
 ## 3.22.0 — 2026-11-11
 
 ### Added

package/README.md

@@ -445,7 +445,7 @@ import { ChatToggleButton } from '@filigran/chatbot';
 | `label`       | `string`                  | built-in     | Button text, already translated by the host; omit for `t('Ask Assistant')` |
 | `t`           | `(key: string) => string` | —            | The host's translations; the panel's catalog in `locale` answers the rest  |
 | `locale`      | `string`                  | browser's    | The default label's language, by the panel's rule (see Internationalization) |
-| `accentColor` | `string`                  | `'#7b5cff'`  | Button background color                                                    |
+| `accentColor` | `string`                  | ignored      | Deprecated since 3.23.0: the toggle is the design system's secondary Button |
 | `icon`        | `React.ReactNode`         | default icon | Custom icon                                                                |
 
 ## API Contract
@@ -1289,10 +1289,12 @@ both. The same variables may be set in CSS on an ancestor instead.
 | `surfaceHover`     | `--filigran-chat-surface-hover`     | A row or a button under the pointer |
 | `inputSurface`     | `--filigran-chat-input-surface`     | A text field: the composer (no fill unless set), a rename field, the feedback and approval comments |
 | `inputRadius`      | `--filigran-chat-input-radius`      | The composer's corners (0.75rem unset) |
+| `inputBorderHover` | `--filigran-chat-input-border-hover` | The composer's border under the pointer; none at rest, as the design system's Textarea (`border` unset) |
 | `inputMinHeight`   | `--filigran-chat-input-min-height`  | The composer field's height at rest, before it grows with the text (two lines unset) |
 | `focusRing`        | `--filigran-chat-focus-ring`        | The 2 px ring around the composer while it has the focus (the accent unset) |
 | `danger`           | `--filigran-chat-danger`            | The tone of every error state: error notices, a failed upload, dictation, stop (a red unset, e.g. `var(--color-error)`) |
 | `warning`          | `--filigran-chat-warning`           | The tone of every warning notice (an amber unset, e.g. `var(--color-warning)`) |
+| `success`          | `--filigran-chat-success`           | The tone of an approved tool call and a successful trace step (a green unset, e.g. `var(--color-success)`) |
 | `headerBackground` | `--filigran-chat-header-background` | The header's background, a colour or an image (`none` for the surface alone) |
 | `text`             | `--filigran-chat-text`              | Text |
 | `textMuted`        | `--filigran-chat-text-muted`        | Times, labels, hints and placeholders |

package/dist/index.d.ts

@@ -394,6 +394,8 @@ interface ChatPanelTheme {
     inputSurface?: string;
     /** The composer's corners, as the host's text fields draw theirs (`--filigran-chat-input-radius`, `radiusMd` unset). */
     inputRadius?: string;
+    /** The composer's border under the pointer, the design system's `--border-input-hover`; none at rest (`--filigran-chat-input-border-hover`, `border` unset). */
+    inputBorderHover?: string;
     /** The small corner of every control, chip and avatar tile, the design system's `--radius-sm` (`--filigran-chat-radius-sm`, 4px unset). */
     radiusSm?: string;
     /** The card corner of every card, bubble, status indicator, menu and dialog, the design system's `--radius-md` (`--filigran-chat-radius-md`, 12px unset). */
@@ -406,6 +408,8 @@ interface ChatPanelTheme {
     danger?: string;
     /** The warning tone of every warning notice (`--filigran-chat-warning`, an amber unset). */
     warning?: string;
+    /** The success tone of an approved tool call and a successful trace step (`--filigran-chat-success`, a green unset). */
+    success?: string;
     /** The header's background, a colour or an image; `none` for the surface alone (`--filigran-chat-header-background`). */
     headerBackground?: string;
     /** Text (`--filigran-chat-text`). */
@@ -663,6 +667,13 @@ interface ChatPanelProps {
     readOnly?: boolean;
     /** Shown in place of the composer while `readOnly`. */
     readOnlyNotice?: React.ReactNode;
+    /**
+     * A tip shown at the top of a voice call (for example which models answer
+     * fast enough to talk to), in an info notice the user can close. Once
+     * closed it stays closed for the browser session (`sessionStorage`, under
+     * `storageKeyPrefix`). Without it the call shows no tip.
+     */
+    voiceCallNotice?: React.ReactNode;
     /**
      * Fields merged into every REST message body, read at send time: the host's
      * own per-message options (tool selection, run mode). They never override
@@ -1117,6 +1128,11 @@ interface ChatToggleButtonProps {
     t?: Translate;
     /** BCP 47 tag of the label's language when the host does not translate it (see `ChatPanelProps.locale`). */
     locale?: string;
+    /**
+     * @deprecated since 3.23.0: the toggle is the design system's secondary
+     * Button and takes its colours from the host's design-system tokens; the
+     * value is ignored. Kept so a host that passes it still compiles.
+     */
     accentColor?: string;
     icon?: React.ReactNode;
 }
@@ -1460,6 +1476,13 @@ interface XtmAgent {
  */
 declare const ChatPanel: react.ForwardRefExoticComponent<ChatPanelProps & react.RefAttributes<ChatPanelHandle>>;
 
+/**
+ * The host's button that opens and closes the panel: the design system's
+ * secondary Button (its border, hover, focus ring and pressed state come from
+ * the host's design-system tokens). `accentColor` is no longer painted on it
+ * (chatbot 3.23.0): the button follows the design system like every other
+ * control of the panel.
+ */
 declare const ChatToggleButton: FunctionComponent<ChatToggleButtonProps>;
 
 interface TransferredAgent {