@blade-hq/agent-react 1.2.1-beta.13 → 1.2.1-beta.15

package/README.md

@@ -13,7 +13,7 @@ pnpm add @blade-hq/agent-client @blade-hq/agent-react
 ```tsx
 import { BladeClient } from "@blade-hq/agent-client"
 import { BladeProvider, ChatView } from "@blade-hq/agent-react"
-import "@blade-hq/agent-react/style.css"
+import "@blade-hq/agent-react/style.full.css"
 
 const client = new BladeClient({ baseUrl: "https://blade.example.com" })
 
@@ -88,7 +88,11 @@ await session?.send("你好")
 
 全部 props 见 `ChatViewProps`。样式说明：
 
-- 必须引入 `@blade-hq/agent-react/style.css`。组件自带 `.blade-chat-*` 前缀的自包含样式，宿主没装 Tailwind 也开箱可用；颜色走 CSS 变量，可整体换肤/暗色。
+- 必须引入一份样式，按宿主有没有 Tailwind 二选一：
+  - **`style.full.css`**（默认选它）：布局兜底 + 编译好的 Tailwind 产物，自包含，宿主没装 Tailwind 也是完整视觉。
+  - **`style.css`**：只有 `.blade-chat-*` 布局兜底。宿主自己装了 Tailwind、且 `content` 配了扫描 `node_modules/@blade-hq/agent-react` 时用它，可以少一份重复 CSS。选错不会报错，只是工具块、思考块内部会退化成没有布局的裸 HTML。
+  - 两份都不含 Tailwind preflight 这类全局 reset，引入后不会影响宿主页面自己的排版；组件需要的那点重置限定在 `.blade-chat` 子树内（见 `src/scoped-preflight.css`）。Shadow DOM 版（`<blade-chat>`）不受此限，它注入的是带 preflight 的完整产物。
+- 颜色走 CSS 变量，可整体换肤；深色页面要在根元素上写 `data-theme="dark"`，否则拿到的是默认的浅色变量。
 - `renderers.toolCall` 返回 `null` 时回落到默认工具卡片。
 - **内边距按容器宽度伸缩**，嵌进窄侧栏（300–400px）时会自动收窄，不看浏览器视口。代价是聊天容器需要有确定宽度——放在 flex/grid 里被拉伸，或显式给宽度都可以；放进 `width: fit-content`、`inline-flex` 这类由内容决定宽度的父容器会塌缩。
 
@@ -118,17 +122,19 @@ SDK 的 ChatView / `<blade-chat>` 不内置模型选择器（默认用后端配
 
 ## 样式定制
 
-三个层次，按需选用：
+默认是浅色主题。四个层次，按需选用：
 
-1. **CSS 变量换肤**（React 与 `<blade-chat>` 通用）：所有颜色走 `--primary`、`--background`、`--muted` 等变量（完整清单见 style.css 开头）。页面直接覆盖即可穿透 Shadow DOM：
+1. **深浅主题**：`<ChatView theme="dark" />` / `<blade-chat theme="dark">` 切内置深色，不传或 `"light"` 为浅色。宿主已经在祖先元素上写了 `data-theme="dark"` 时不用传，`ChatView` 会跟着变。`<blade-chat>` 渲染在 Shadow DOM 内，页面上的 `data-theme` 对它无效，只认 `theme` 属性。
+
+2. **CSS 变量换肤**（React 与 `<blade-chat>` 通用）：所有颜色走 `--primary`、`--background`、`--muted` 等变量（完整清单见 style.css 开头）。页面直接覆盖即可穿透 Shadow DOM：
 
 ```css
 blade-chat { --primary: 262 83% 58%; height: 640px; }
 ```
 
-2. **classNames props**（React）：`ChatView` 的 `classNames` 把自定义 class（含你自己构建的 Tailwind 工具类）挂到根节点、消息区、输入区等关键节点上，见 `ChatViewClassNames`。
+3. **classNames props**（React）：`ChatView` 的 `classNames` 把自定义 class（含你自己构建的 Tailwind 工具类）挂到根节点、消息区、输入区等关键节点上，见 `ChatViewClassNames`。
 
-3. **内嵌 `<style>`（纯 HTML / Vue）**：`<blade-chat>` 的直接 `<style>` 子元素会被注入 Shadow DOM、排在内置样式之后，可用 `.blade-chat-*` 类名做任意深度定制：
+4. **内嵌 `<style>`（纯 HTML / Vue）**：`<blade-chat>` 的直接 `<style>` 子元素会被注入 Shadow DOM、排在内置样式之后，可用 `.blade-chat-*` 类名做任意深度定制：
 
 ```html
 <blade-chat base-url="...">

package/dist/components/ChatView.d.ts

@@ -33,6 +33,8 @@ export interface ChatViewProps {
     renderers?: ChatViewRenderers;
     slots?: ChatViewSlots;
     placeholder?: string;
+    /** 配色主题，默认浅色。宿主已经在祖先元素上写了 data-theme 时不用传。 */
+    theme?: "light" | "dark";
 }
 /**
  * 开箱即用的聊天界面：连接（或新建）一个会话，渲染消息流与输入框。

package/dist/embed/blade-chat-element.d.ts

@@ -1,6 +1,6 @@
 import { type AgentSession } from "@blade-hq/agent-client";
 /**
- * `<blade-chat base-url="https://..." session-id="可选">`
+ * `<blade-chat base-url="https://..." session-id="可选" theme="light|dark">`
  *
  * 纯静态页面的聊天入口：Shadow DOM 内渲染完整 ChatView，
  * 未登录时组件自带登录引导，不传 session-id 自动建会话。

package/dist/index.js

@@ -2223,6 +2223,9 @@ function PlanningDivider({ kind }) {
 
 // src/components/ChatView.tsx
 import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function themeAttr(theme) {
+  return theme === "dark" ? "dark" : void 0;
+}
 function isUnauthorizedError(error) {
   return error instanceof BladeApiError && error.status === 401;
 }
@@ -2263,16 +2266,23 @@ function ChatView(props) {
   const [attempt, setAttempt] = useState9(0);
   const [needLogin, setNeedLogin] = useState9(() => !client.hasToken());
   if (needLogin) {
-    return /* @__PURE__ */ jsx14("div", { className: cn("blade-chat flex min-h-0 flex-1 flex-col", props.classNames?.root), children: /* @__PURE__ */ jsx14(
-      LoginCard,
+    return /* @__PURE__ */ jsx14(
+      "div",
       {
-        client,
-        onLoggedIn: () => {
-          setNeedLogin(false);
-          setAttempt((value) => value + 1);
-        }
+        "data-theme": themeAttr(props.theme),
+        className: cn("blade-chat flex min-h-0 flex-1 flex-col", props.classNames?.root),
+        children: /* @__PURE__ */ jsx14(
+          LoginCard,
+          {
+            client,
+            onLoggedIn: () => {
+              setNeedLogin(false);
+              setAttempt((value) => value + 1);
+            }
+          }
+        )
       }
-    ) });
+    );
   }
   return /* @__PURE__ */ jsx14(ChatSessionView, { ...props, onUnauthorized: () => setNeedLogin(true) }, attempt);
 }
@@ -2286,6 +2296,7 @@ function ChatSessionView({
   renderers,
   slots,
   placeholder,
+  theme,
   onUnauthorized
 }) {
   const { session, state, error } = useAgentSession(sessionId, {
@@ -2344,6 +2355,7 @@ ${content}`);
   return /* @__PURE__ */ jsxs12(
     "div",
     {
+      "data-theme": themeAttr(theme),
       className: cn(
         "blade-chat flex min-h-0 flex-1 flex-col overflow-hidden",
         classNames?.root
@@ -2356,7 +2368,7 @@ ${content}`);
             className: classNames?.banner
           }
         ),
-        errorMessage && /* @__PURE__ */ jsxs12("div", { className: "blade-chat-error-bar flex items-start gap-2 border-b border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-800/30 dark:bg-red-950/30 dark:text-red-300", children: [
+        errorMessage && /* @__PURE__ */ jsxs12("div", { className: "blade-chat-error-bar flex items-start gap-2 border-b px-4 py-3 text-sm", children: [
           /* @__PURE__ */ jsx14(CircleAlert, { size: 16, className: "mt-0.5 shrink-0" }),
           /* @__PURE__ */ jsx14("span", { children: errorMessage })
         ] }),