@filigran/chatbot 3.15.2 → 3.16.1

package/CHANGELOG.md

@@ -8,7 +8,38 @@ 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.15.2 — unreleased
+## 3.16.1 — unreleased
+
+### Fixed
+
+- An empty workspace's hint shows the glyph of its New conversation button,
+  where it said `+`, a button the list does not have. Its key changed: a host
+  translating `Drop a conversation here, or start one with +.` translates
+  `Drop a conversation here, or start one with {icon}.` instead, keeping
+  `{icon}` where the glyph goes. Until then the panel's own catalog answers
+  for a `locale` it has one for (fr, es, ja), and English for any other.
+- A long conversation shown inline or fullscreen no longer lets the page
+  scroll the panel out of view: each message's screen-reader time, positioned
+  outside the transcript's scroll, laid the page out as tall as the whole
+  conversation.
+
+## 3.16.0 — 2026-10-28
+
+### Added
+
+- `theme`: the host's colours, type and shapes (surfaces, menus, subtle and
+  hover fills, text fields, text, secondary and muted text, borders, a user's message, an
+  answer's text size, code), set as `--filigran-chat-*` variables on the panel
+  root. Every entry left out keeps the panel's own look, light and dark, so a
+  host that sets nothing sees the same panel (#460).
+
+### Fixed
+
+- In dark mode, the hover and focus colours an element carries show as they do
+  in light mode (an accent border on hover, the composer's focus border); its
+  dark colour used to hide them (#460).
+
+## 3.15.2 — 2026-10-28
 
 ### Fixed
 

package/README.md

@@ -121,6 +121,7 @@ import { ChatPanel } from '@filigran/chatbot';
 | `waitingMessages`   | `string[]`                                | built-in     | The waiting panel's rotating messages, already translated |
 | `renderWaitingPanel` | `() => React.ReactNode`                  | —            | Replaces the waiting panel's content (its messages and the invitation to play) |
 | `fontFamily`        | `string`                                  | —            | Font of the panel's text |
+| `theme`             | `ChatPanelTheme`                          | —            | The host's colours, type and shapes; see [Custom Theme](#custom-theme) |
 | `agentMentions`     | `boolean`                                 | `false`      | `@` also mentions agents of the agent list; the message carries their ids as `mentioned_agent_ids` |
 | `steerAttachments`  | `boolean`                                 | `false`      | Uploaded files may steer the running turn (the steer route takes `file_ids`) |
 | `onReady`           | `() => void`                              | —            | Called once, when the panel has chosen its agent and read back the conversation on screen; handle calls made earlier wait for it and then run in order |
@@ -1211,6 +1212,44 @@ import { MyLogo } from './icons';
 />
 ```
 
+### Custom Theme
+
+`theme` gives the panel the host's design system. Each entry is a CSS value
+and sets the `--filigran-chat-*` variable named beside it on the panel root,
+where everything the panel renders (its dialogs and menus included) reads it;
+an entry left out keeps the panel's own look, light and dark. A host's own
+variables (`var(--x)`) follow its light and dark modes, so one value serves
+both. The same variables may be set in CSS on an ancestor instead.
+
+| Entry              | Variable                            | Styles |
+| ------------------ | ----------------------------------- | ------ |
+| `surface`          | `--filigran-chat-surface`           | The background inline and fullscreen |
+| `surfaceRaised`    | `--filigran-chat-surface-raised`    | The background as a sidebar or floating card, and of its dialogs and menus |
+| `surfaceSubtle`    | `--filigran-chat-surface-subtle`    | Cards, search boxes, a table's or a code block's header |
+| `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 |
+| `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 |
+| `textSecondary`    | `--filigran-chat-text-secondary`    | Table cells, chips, descriptions, notices |
+| `border`           | `--filigran-chat-border`            | Dividers, outlines, a gauge's track and the loading skeleton |
+| `textSize`         | `--filigran-chat-text-size`         | An answer's prose, its headings in proportion, and a user's message unless `userTextSize` |
+| `userBackground`, `userText`, `userRadius`, `userPadding`, `userTextSize` | `--filigran-chat-user-*` | A user's message |
+| `fontMono`, `codeSize`, `codeSurface` | `--filigran-chat-font-mono`, `-code-size`, `-code-surface` | Code, in a block or inline |
+
+```tsx
+<ChatPanel
+  theme={{
+    surface: 'var(--page-background)',
+    text: 'var(--text-primary)',
+    userBackground: 'color-mix(in oklab, var(--accent) 10%, transparent)',
+    userText: 'var(--text-primary)',
+    textSize: '1rem',
+  }}
+  // ...
+/>
+```
+
 ### Custom Prompt Suggestions
 
 ```tsx

package/dist/index.d.ts

@@ -374,6 +374,44 @@ interface ChatContextBreakdown {
     /** Output of tool calls still held verbatim in the context. */
     toolResults?: number;
 }
+/**
+ * What a host's design system sets on the panel (`ChatPanelProps.theme`):
+ * CSS values, each the `--filigran-chat-*` variable named beside it.
+ */
+interface ChatPanelTheme {
+    /** The panel's background inline and fullscreen (`--filigran-chat-surface`). */
+    surface?: string;
+    /** The panel's background as a sidebar or floating card, and its dialogs' (`--filigran-chat-surface-raised`). */
+    surfaceRaised?: string;
+    /** Cards, search boxes, a table's or a code block's header: a shade off the surface (`--filigran-chat-surface-subtle`). */
+    surfaceSubtle?: string;
+    /** A row or a button under the pointer (`--filigran-chat-surface-hover`). */
+    surfaceHover?: string;
+    /** A text field: the composer (no fill unless set), a rename field, the feedback and approval comments (`--filigran-chat-input-surface`). */
+    inputSurface?: 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`). */
+    text?: string;
+    /** Faint text: times, labels, hints, placeholders (`--filigran-chat-text-muted`). */
+    textMuted?: string;
+    /** Secondary text: table cells, chips, descriptions, notices (`--filigran-chat-text-secondary`). */
+    textSecondary?: string;
+    /** Dividers, outlines, a gauge's track and the loading skeleton (`--filigran-chat-border`). */
+    border?: string;
+    /** The size of an answer's prose, its headings in proportion, and of a user's message unless `userTextSize` (`--filigran-chat-text-size`). */
+    textSize?: string;
+    /** A user's message: background, text, corners, padding and size (`--filigran-chat-user-*`). */
+    userBackground?: string;
+    userText?: string;
+    userRadius?: string;
+    userPadding?: string;
+    userTextSize?: string;
+    /** Code: its font, size and background (`--filigran-chat-font-mono`, `-code-size`, `-code-surface`). */
+    fontMono?: string;
+    codeSize?: string;
+    codeSurface?: string;
+}
 interface ChatPanelProps {
     mode: ChatPanelMode;
     /** Shows the close button; inline mode has none. */
@@ -636,6 +674,13 @@ interface ChatPanelProps {
     renderWaitingPanel?: () => React.ReactNode;
     /** Font of the panel's text; the package's own otherwise. */
     fontFamily?: string;
+    /**
+     * The host's colours, type and shapes, as CSS values (a host's own
+     * variables, `var(--x)`, follow its light and dark modes); each one unset
+     * keeps the panel's own. The same `--filigran-chat-*` variables can be set
+     * in CSS on an ancestor instead.
+     */
+    theme?: ChatPanelTheme;
     /**
      * Called once, when the panel has chosen its agent and read back the
      * conversation on screen. Calls made through the handle before then wait
@@ -1150,4 +1195,4 @@ interface TransferredAgent {
 declare const voiceCallSupported: () => boolean;
 
 export { ChatPanel, ChatToggleButton, voiceCallSupported };
-export type { AgentStatusState, ApiEndpoints, BackendType, ChatAnsweredBy, ChatArtifact, ChatArtifactKind, ChatAttachment, ChatCodeBlockContext, ChatCodeBlockRenderer, ChatContextBreakdown, ChatContextUsage, ChatConversationRef, ChatConversationReferenceCandidate, ChatConversationSummary, ChatFile, ChatHeldOutcome, ChatMarkerContext, ChatMarkerRenderer, ChatMessage, ChatMessagePersistedFeedback, ChatMessageSlotContext, ChatMode, ChatPanelHandle, ChatPanelMode, ChatPanelProps, ChatPromptTemplate, ChatQuotaStatus, ChatSendDecision, ChatSendDraft, ChatSendOptions, ChatSendOutcome, ChatStreamEventInfo, ChatToggleButtonProps, ChatTurnEnd, ChatTurnOutcome, ChatWorkspace, MessageFeedback, ToolApprovalDecision, ToolApprovalProposal, ToolApprovalVerdict, TransferredAgent, Translate, XtmAgent };
+export type { AgentStatusState, ApiEndpoints, BackendType, ChatAnsweredBy, ChatArtifact, ChatArtifactKind, ChatAttachment, ChatCodeBlockContext, ChatCodeBlockRenderer, ChatContextBreakdown, ChatContextUsage, ChatConversationRef, ChatConversationReferenceCandidate, ChatConversationSummary, ChatFile, ChatHeldOutcome, ChatMarkerContext, ChatMarkerRenderer, ChatMessage, ChatMessagePersistedFeedback, ChatMessageSlotContext, ChatMode, ChatPanelHandle, ChatPanelMode, ChatPanelProps, ChatPanelTheme, ChatPromptTemplate, ChatQuotaStatus, ChatSendDecision, ChatSendDraft, ChatSendOptions, ChatSendOutcome, ChatStreamEventInfo, ChatToggleButtonProps, ChatTurnEnd, ChatTurnOutcome, ChatWorkspace, MessageFeedback, ToolApprovalDecision, ToolApprovalProposal, ToolApprovalVerdict, TransferredAgent, Translate, XtmAgent };