@blade-hq/agent-react 2610.0.1 → 2612.0.0-beta.1

package/dist/style.css

@@ -4,7 +4,7 @@
  * 这份文件只放 Tailwind 工具类表达不了的东西，其余视觉一律由组件上的 Tailwind
  * class 定义一次（R1：一个视觉效果只在一处定义）：
  *
- * - CSS 变量（主题、圆角、gutter）与 `:host` 尺寸默认值；
+ * - 布局变量（gutter、轮次间距）与 `:host` 尺寸默认值；
  * - 容器查询（`@container`）：按「容器宽度」而不是视口伸缩的内边距与断点；
  * - Markdown 排版：正文是 streamdown 生成的 HTML，没有类名可挂，只能在这里写；
  * - 无 Tailwind 预检时组件仍需要的少量 rest（按钮游标、textarea 去边框）；
@@ -52,11 +52,8 @@
  * blade-chat-context-title
  * blade-chat-empty
  * blade-chat-error-bar
- * blade-chat-error-block
  * blade-chat-error-row
  * blade-chat-file-card
- * blade-chat-file-card-icon
- * blade-chat-file-card-name
  * blade-chat-followup
  * blade-chat-followup-action
  * blade-chat-host
@@ -101,55 +98,9 @@
  * CSS 不分层，仍然赢过这里所有层。 */
 @layer properties, theme, base, components, utilities, blade-chat-overrides;
 
-/* 变量不分层：它是主题契约，接入方在页面或祖先元素上重设同名变量即可换肤，
- * 分层反而让"谁覆盖谁"取决于产物拼接顺序。 */
-:root,
-:host {
-  --background: 0 0% 100%;
-  --foreground: 215 13% 15%;
-  --card: 0 0% 100%;
-  --card-foreground: 215 13% 15%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 215 13% 15%;
-  --primary: 223 100% 54%;
-  --primary-foreground: 0 0% 100%;
-  --muted: 220 40% 95%;
-  --muted-foreground: 220 9% 52%;
-  --accent: 220 100% 92%;
-  --accent-foreground: 215 13% 15%;
-  --destructive: 0 100% 50%;
-  --destructive-foreground: 0 0% 100%;
-  --border: 220 20% 90%;
-  --input: 220 20% 96%;
-  --ring: 223 100% 54%;
-  --radius: 0.4rem;
-  --user-msg-bg: 220 9% 95%;
-  --user-msg-fg: 215 13% 15%;
-  --user-msg-border: 220 15% 88%;
-}
-
-[data-theme="dark"] {
-  --background: 222 22% 5%;
-  --foreground: 210 18% 88%;
-  --card: 222 20% 8%;
-  --card-foreground: 210 18% 88%;
-  --popover: 222 18% 10%;
-  --popover-foreground: 210 18% 88%;
-  --primary: 38 88% 60%;
-  --primary-foreground: 222 22% 6%;
-  --muted: 222 16% 11%;
-  --muted-foreground: 220 8% 48%;
-  --accent: 222 16% 13%;
-  --accent-foreground: 210 18% 88%;
-  --destructive: 0 65% 55%;
-  --destructive-foreground: 210 18% 95%;
-  --border: 222 12% 17%;
-  --input: 222 12% 13%;
-  --ring: 38 88% 60%;
-  --user-msg-bg: 38 22% 12%;
-  --user-msg-fg: 38 65% 80%;
-  --user-msg-border: 38 30% 19%;
-}
+/* 主题变量（--background、--primary 等）不在这里：唯一来源是 packages/ui/src/styles/tokens.css，
+ * 由两个 Tailwind 入口按挂载点编进产物——Shadow DOM 版只挂 :host（宿主在 blade-chat 元素上的
+ * 覆盖深浅主题都生效），npm 版挂 .blade-chat（不碰宿主的 :root）。 */
 
 @layer components {
   /* -------------------------------------------------------------- 布局骨架 */
@@ -167,6 +118,20 @@
     flex-direction: column;
   }
 
+  /* 弹层根：<blade-chat> 在 shadow root 顶层建的弹层挂载点（见 embed/blade-chat-element.tsx），
+   * 在聊天根节点外面，字体与文字色要单独给，弹层内容才和聊天区一致。 */
+  [data-blade-overlay-root] {
+    color: hsl(var(--foreground));
+    font-family:
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      Roboto,
+      "PingFang SC",
+      "Microsoft YaHei",
+      sans-serif;
+  }
+
   /* 聊天根容器。SDK 常被嵌进只有 300-400px 宽的侧栏，而宿主页面视口是全宽的，
    * 所以内边距一律按「容器宽度」伸缩，不能用视口断点——那会在窄容器里反向命中最大值。
    * container-type 建在这里（而不是消息区），是为了让消息区和输入区共享同一个 cqi
@@ -203,17 +168,6 @@
     }
   }
 
-  /* 滚动内容的内边距。左右按上面的 gutter 变量走，宿主没装 Tailwind 时消息也不会贴边；
-   * 底部那份补白是消息顶置功能的 spacer（--blade-chat-pin-spacer 由组件写行内变量）。 */
-  .blade-chat-messages-scroll {
-    padding: calc(var(--blade-chat-gutter) * 1.4) var(--blade-chat-gutter)
-      calc(var(--blade-chat-gutter) * 1.1 + var(--blade-chat-pin-spacer, 0px));
-  }
-
-  /* 轮次之间的间距用容器宽度算（见 .blade-chat 的说明），挂在内层容器上。 */
-  .blade-chat-messages-content > div {
-    gap: var(--blade-chat-turn-gap);
-  }
 
   .blade-chat-empty {
     display: flex;
@@ -277,6 +231,18 @@
 }
 
 @layer blade-chat-overrides {
+  /* 消息区的留白与轮次间距按容器宽度伸缩（见 .blade-chat 的说明）。消息列表组件上还带着内置 Web
+   * 用的 px-* / gap-* 工具类，这两条必须压过它们，所以归 blade-chat-overrides；
+   * 底部那份补白是消息顶置功能的 spacer（--blade-chat-pin-spacer）。 */
+  .blade-chat-messages-scroll {
+    padding: calc(var(--blade-chat-gutter) * 1.4) var(--blade-chat-gutter)
+      calc(var(--blade-chat-gutter) * 1.1 + var(--blade-chat-pin-spacer, 0px));
+  }
+
+  .blade-chat-messages-content > div {
+    gap: var(--blade-chat-turn-gap);
+  }
+
   /* ------------------------------------------------- 窄容器与移动端的手感 */
   /* 需要跳变而非连续伸缩的值才用 @container：窄容器里 72% 只剩 250px 左右，
    * 一句话就折三行。这条必须压过组件上的 max-w-[72%]，所以归 blade-chat-overrides。 */