@flowget/ai-chat 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to `@flowget/ai-chat` are documented here. This
 project adheres to [Semantic Versioning](https://semver.org/) (pre-1.0:
 minor = breaking).
 
+## [0.1.1]
+
+### Added
+
+- **`theme?: string` on `<WorkflowChat>`.** Stamps `data-theme={theme}` on the
+  chat **panel** portal root (`.fg-aichat-panel`), omitted entirely when unset.
+  The panel portals into `document.body` (via assistant-ui's
+  `AssistantModalPrimitive` → Radix Popover portal), outside any host wrapper,
+  so a scoped token override like `[data-theme="X"] { --flowget-*: … }` (the same
+  block a host writes for `<FlowgetBuilder theme="X">`) previously fell back to
+  `:root` inside the panel. Passing `theme` re-scopes the block so those tokens
+  cascade into the portaled panel. Only the panel portals — the launcher is
+  inline and already inherits the host theme, so it is untouched. Plain `string`
+  — builder-agnostic, not tied to any named-theme enum. **Additive and
+  non-breaking**: omitting `theme` keeps today's `:root`-token behavior
+  unchanged. Documented in the README "Theming" section.
+
 ## [0.1.0]
 
 Initial release — a builder-agnostic AI workflow-authoring chat.

package/README.md

@@ -60,6 +60,7 @@ function BuilderChat() {
 | `endpoint?` | `string` | endpoint for the default SSE transport (`/api/chat`) |
 | `heading?` | `string` | panel heading (default `"Workflow AI"`) |
 | `subtitle?` | `string` | panel subtitle (default `"Draft & edit with a prompt"`) |
+| `theme?` | `string` | stamp `data-theme` on the body-portaled panel so a scoped `[data-theme]` token override reaches it (see [Theming](#theming)) |
 | `examples?` | `readonly string[]` | empty-state suggestion chips; `[]` hides them |
 | `layout?` | `WorkflowLayout` | lay a proposal out before apply (default `layoutProposal`) — see below |
 | `actor?` | `ChatActor` | caller-identity hint — **untrusted on the wire** (see [Security](#security)) |
@@ -212,6 +213,31 @@ Two package-owned knobs control placement (class prefix: `fg-aichat-`):
 | `--fg-aichat-z` | `200` | stacking order of the launcher + panel |
 | `--fg-aichat-launcher-offset` | `24px` | gap from the bottom-right corner |
 
+### ⚠️ Scoped theme overrides and the body portal
+
+The chat **panel portals into `document.body`** — outside your builder wrapper.
+(The launcher is inline and already inherits your theme; only the panel
+portals.) So a token override you *scope* to a selector on that wrapper doesn't
+cascade into the panel. If you theme the builder with a scoped block like
+
+```css
+[data-theme="midnight"] { --flowget-color-accent: #22d3ee; /* … */ }
+```
+
+(the same block `<FlowgetBuilder theme="midnight">` stamps `data-theme` for),
+those tokens fall back to `:root` inside the portaled panel unless you pass the
+matching `theme`:
+
+```tsx
+<WorkflowChat currentGraph={graph} applyGraph={setGraph} theme="midnight" />
+```
+
+`theme` stamps `data-theme="midnight"` on the panel root (`.fg-aichat-panel`), so
+the scoped block now matches and the tokens cascade into the panel. It's a
+**plain string** (builder-agnostic — not tied to any named-theme enum) and is
+**omitted entirely when unset**, so unscoped (`:root`-defined) tokens keep
+working with no change.
+
 ## How it fits together
 
 ```

package/dist/react.cjs

@@ -479,6 +479,7 @@ function WorkflowChat({
   endpoint,
   heading = DEFAULT_HEADING,
   subtitle = DEFAULT_SUBTITLE,
+  theme,
   examples,
   layout,
   actor,
@@ -547,6 +548,7 @@ function WorkflowChat({
               side: "top",
               align: "end",
               sideOffset: 12,
+              ...theme !== void 0 ? { "data-theme": theme } : {},
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ChatHeader, { heading, subtitle }),
                 /* @__PURE__ */ jsxRuntime.jsx(Thread, { ...examples !== void 0 ? { examples } : {} })

package/dist/react.d.cts

@@ -164,6 +164,17 @@ type WorkflowChatProps = {
     heading?: string;
     /** Panel subtitle. Default `"Draft & edit with a prompt"`. */
     subtitle?: string;
+    /**
+     * Stamps `data-theme={theme}` on the chat **panel** portal root (the
+     * `.fg-aichat-panel` node; omitted when unset). The panel portals into
+     * `document.body`, outside any host wrapper — so a scoped override like
+     * `[data-theme="X"] { --flowget-*: … }` (the same block you wrote for
+     * `<FlowgetBuilder theme="X">`) otherwise can't reach it. Set this to the
+     * host's active theme so those tokens cascade into the panel. Plain `string`
+     * — builder-agnostic; not tied to any named-theme enum. (The launcher renders
+     * inline and already inherits the host theme, so it is left untouched.)
+     */
+    theme?: string;
     /** Empty-state suggestion chips. Pass `[]` to hide them. */
     examples?: readonly string[];
     /**
@@ -182,7 +193,7 @@ type WorkflowChatProps = {
     /** Opaque continuity payload forwarded to the model with each request. */
     context?: unknown;
 };
-declare function WorkflowChat({ currentGraph, applyGraph, transport, endpoint, heading, subtitle, examples, layout, actor, context, }: WorkflowChatProps): react.JSX.Element;
+declare function WorkflowChat({ currentGraph, applyGraph, transport, endpoint, heading, subtitle, theme, examples, layout, actor, context, }: WorkflowChatProps): react.JSX.Element;
 
 /**
  * The assistant-ui `ChatModelAdapter` for workflow authoring.

package/dist/react.d.ts

@@ -164,6 +164,17 @@ type WorkflowChatProps = {
     heading?: string;
     /** Panel subtitle. Default `"Draft & edit with a prompt"`. */
     subtitle?: string;
+    /**
+     * Stamps `data-theme={theme}` on the chat **panel** portal root (the
+     * `.fg-aichat-panel` node; omitted when unset). The panel portals into
+     * `document.body`, outside any host wrapper — so a scoped override like
+     * `[data-theme="X"] { --flowget-*: … }` (the same block you wrote for
+     * `<FlowgetBuilder theme="X">`) otherwise can't reach it. Set this to the
+     * host's active theme so those tokens cascade into the panel. Plain `string`
+     * — builder-agnostic; not tied to any named-theme enum. (The launcher renders
+     * inline and already inherits the host theme, so it is left untouched.)
+     */
+    theme?: string;
     /** Empty-state suggestion chips. Pass `[]` to hide them. */
     examples?: readonly string[];
     /**
@@ -182,7 +193,7 @@ type WorkflowChatProps = {
     /** Opaque continuity payload forwarded to the model with each request. */
     context?: unknown;
 };
-declare function WorkflowChat({ currentGraph, applyGraph, transport, endpoint, heading, subtitle, examples, layout, actor, context, }: WorkflowChatProps): react.JSX.Element;
+declare function WorkflowChat({ currentGraph, applyGraph, transport, endpoint, heading, subtitle, theme, examples, layout, actor, context, }: WorkflowChatProps): react.JSX.Element;
 
 /**
  * The assistant-ui `ChatModelAdapter` for workflow authoring.

package/dist/react.js

@@ -477,6 +477,7 @@ function WorkflowChat({
   endpoint,
   heading = DEFAULT_HEADING,
   subtitle = DEFAULT_SUBTITLE,
+  theme,
   examples,
   layout,
   actor,
@@ -545,6 +546,7 @@ function WorkflowChat({
               side: "top",
               align: "end",
               sideOffset: 12,
+              ...theme !== void 0 ? { "data-theme": theme } : {},
               children: [
                 /* @__PURE__ */ jsx(ChatHeader, { heading, subtitle }),
                 /* @__PURE__ */ jsx(Thread, { ...examples !== void 0 ? { examples } : {} })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowget/ai-chat",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Builder-agnostic AI workflow-authoring chat for Flowget — an assistant-ui chat panel (./react) + an SSE BFF helper (./server) over @flowget/ai's streaming author(). Bring your own builder via the currentGraph/applyGraph seam.",
   "keywords": [
     "flowget",
@@ -73,10 +73,12 @@
     "@assistant-ui/react": "^0.14.26",
     "@eslint/js": "^9.39.4",
     "@flowget/ai": "^0.1.0",
+    "@testing-library/react": "^16.3.0",
     "@types/node": "^22.19.21",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "eslint": "^9.39.4",
+    "happy-dom": "^15.11.7",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "tsup": "^8.5.1",