@blade-hq/agent-react 1.2.1-beta.1 → 1.2.1-beta.10

package/dist/lib/media-tags.d.ts

@@ -0,0 +1,24 @@
+/**
+ * MEDIA 行处理。后端提示词要求智能体产出文件时单独写一行 `MEDIA:<绝对路径>`
+ * （见 host/src/blade_agent/host/orchestrator/prompt.py），界面必须把它折叠成文件卡片——
+ * 这是内部标记，直接摆给用户看就是 bug。
+ */
+export declare const FILE_CARD_TAG = "blade-file-card";
+/**
+ * 能不能拿这个路径去下载。绝对路径原样交给服务端解析（它会把工作区路径映射进沙盒、
+ * 并拒绝越界），所以这里只挡明显不该放过的：空路径和 `..`。
+ */
+export declare function isSafeMediaPath(path: string): boolean;
+/**
+ * 把 MEDIA 行折叠成文件卡片标签。
+ *
+ * `streaming` 时最后一行要特殊对待：MEDIA_LINE_RE 用 `$` 匹配行尾，而流式过程中最后一行
+ * 随时都是「行尾」，逐 token 折叠会依次闪出 `MEDIA:`、半截路径的卡片、再变成正确卡片。
+ * 所以正在写的那一行整行先不渲染，等它以换行结束、或消息转为 static 之后再折叠。
+ *
+ * 判据只能是 `streaming`，不能是「有没有尾随换行」：AssistantTurnBlock 传进来的文本是
+ * trim 过的，静态消息永远没有尾随换行，那样判断会导致 MEDIA 行永远不折叠。
+ */
+export declare function collapseMediaTags(text: string, options?: {
+    streaming?: boolean;
+}): string;

package/dist/style.css

@@ -69,12 +69,23 @@
   flex-direction: column;
 }
 
+/* 聊天根容器。SDK 常被嵌进只有 300-400px 宽的侧栏，而宿主页面视口是全宽的，
+ * 所以内边距一律按「容器宽度」伸缩，不能用视口断点——那会在窄容器里反向命中最大值。
+ * container-type 建在这里（而不是消息区），是为了让消息区和输入区共享同一个 cqi
+ * 基准，两者左右边缘才对得齐。代价是内部内容不再向外传递固有宽度，所以宿主需要给
+ * 容器一个确定宽度（flex/grid 拉伸或显式宽度都可以）。 */
 .blade-chat {
+  /* 具名容器：宿主或以后的子组件万一在中间又建了个匿名 query container，
+   * 下面的 @container 查询不会悄悄改成以那个为基准。 */
+  container: blade-chat / inline-size;
   display: flex;
   flex-direction: column;
   flex: 1 1 0%;
   min-height: 0;
+  min-width: 0;
   overflow: hidden;
+  --blade-chat-gutter: 1rem;
+  --blade-chat-turn-gap: 1.5rem;
   background: hsl(var(--background));
   color: hsl(var(--foreground));
   font-family:
@@ -87,12 +98,29 @@
     sans-serif;
 }
 
+/* 上面两个变量的兜底值必须留在 @supports 外面。不能靠「同一个变量写两遍、让浏览器
+ * 丢掉无效的那条」降级：自定义属性在声明处不做类型校验，带 cqi 的值在旧浏览器里同样是
+ * 合法 token、照样覆盖兜底值，失效发生在 padding: var(...) 的使用处——结果是整条 padding
+ * 作废变成 0，而不是回落到兜底值。 */
+@supports (container-type: inline-size) and (width: 1cqi) {
+  .blade-chat {
+    --blade-chat-gutter: clamp(0.875rem, 4cqi, 2.5rem);
+    --blade-chat-turn-gap: clamp(1.25rem, 3cqi, 2.25rem);
+  }
+}
+
 .blade-chat-messages {
   position: relative;
   flex: 1 1 0%;
   min-height: 0;
 }
 
+/* 滚动内容的内边距。这一层过去只有 Tailwind class，宿主没装 Tailwind 时消息完全贴边。 */
+.blade-chat-messages-scroll {
+  padding: calc(var(--blade-chat-gutter) * 1.4) var(--blade-chat-gutter)
+    calc(var(--blade-chat-gutter) * 1.1);
+}
+
 .blade-chat-messages-content {
   margin: 0 auto;
   max-width: 748px;
@@ -101,10 +129,22 @@
 .blade-chat-messages-content > div {
   display: flex;
   flex-direction: column;
-  gap: 2.25rem;
+  gap: var(--blade-chat-turn-gap);
   min-width: 0;
 }
 
+.blade-chat-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  /* 这里的双写是有效降级：cqi 出现在属性值里，旧浏览器会丢掉整条声明并回落到上一条。 */
+  padding: 4rem 0;
+  padding: clamp(2.5rem, 12cqi, 6rem) 0;
+  color: hsl(var(--muted-foreground));
+}
+
 .blade-chat-login,
 .blade-chat-version-mismatch {
   display: flex;
@@ -129,6 +169,18 @@
   max-width: 72%;
 }
 
+/* 窄容器里 72% 只剩 250px 左右，一句话就折三行，这里放宽。
+ * 这类需要跳变而非连续伸缩的值才用 @container 查询。 */
+@container blade-chat (max-width: 480px) {
+  .blade-chat-user-col {
+    max-width: 88%;
+  }
+
+  .blade-chat-scroll-bottom-label {
+    display: none;
+  }
+}
+
 .blade-chat-user-bubble {
   max-width: 100%;
   border: 1px solid hsl(var(--user-msg-border));
@@ -180,9 +232,10 @@
 
 /* ---------------------------------------------------------------- 输入区 */
 
+/* 左右内边距和消息区共用同一个 gutter，否则输入框与消息文字左边缘对不齐。 */
 .blade-chat-input {
   border-top: 1px solid hsl(var(--border));
-  padding: 0.75rem 1rem;
+  padding: 0.75rem var(--blade-chat-gutter);
 }
 
 .blade-chat-input-inner {
@@ -217,6 +270,69 @@
   border: 0;
 }
 
+/* ------------------------------------------------------------ 文件下载卡片 */
+
+.blade-chat-file-card {
+  display: inline-flex;
+  max-width: 100%;
+  margin: 0.25rem 0.5rem 0.25rem 0;
+  align-items: center;
+  gap: 0.5rem;
+  vertical-align: middle;
+}
+
+.blade-chat-file-card button {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.375rem;
+  cursor: pointer;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  text-align: left;
+}
+
+.blade-chat-file-card button:hover:not(:disabled) {
+  background: hsl(var(--accent) / 0.45);
+  border-color: hsl(var(--primary) / 0.45);
+}
+
+.blade-chat-file-card button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.blade-chat-file-card-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: hsl(var(--primary));
+}
+
+/* 窄容器里文件名不能写死上限，否则短名字留白、长名字仍然顶宽。 */
+.blade-chat-file-card-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 15rem;
+  max-width: min(15rem, 60cqi);
+}
+
+.blade-chat-file-card-action {
+  flex-shrink: 0;
+  color: hsl(var(--muted-foreground));
+}
+
+.blade-chat-file-card-error {
+  font-size: 0.6875rem;
+  color: hsl(var(--destructive));
+}
+
 /* ---------------------------------------------------------------- 工具块 */
 
 .blade-chat-tool,
@@ -241,6 +357,34 @@
 
 .blade-chat-markdown {
   overflow-wrap: break-word;
+  min-width: 0;
+}
+
+/* 窄容器里真正把版面撑破的是内容而不是内边距：宽表格、大图、超长 URL 都会把整个
+ * 消息区顶宽，然后出现一条横向滚动条。表格自己滚，图片自己缩，长 token 强制断行。 */
+.blade-chat-markdown [data-streamdown="table-wrapper"] {
+  max-width: 100%;
+  min-width: 0;
+}
+
+/* 横向滚动发生在 table 的父层。streamdown 用 Tailwind 的 overflow-x-auto 实现它，
+ * 宿主没装 Tailwind 时那个类是空的，所以这里用普通 CSS 兜住。 */
+.blade-chat-markdown [data-streamdown="table-wrapper"] > div:last-child {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.blade-chat-markdown img,
+.blade-chat-markdown video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* 长 URL 和长内联代码是撑宽的另外两个常见肇事者。用 anywhere 而不是 break-word：
+ * 只有 anywhere 参与 min-content 计算，break-word 挡不住 flex item 被顶宽。 */
+.blade-chat-markdown :not(pre) > code,
+.blade-chat-markdown a {
+  overflow-wrap: anywhere;
 }
 
 .blade-chat-prose p {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blade-hq/agent-react",
-  "version": "1.2.1-beta.1",
+  "version": "1.2.1-beta.10",
   "description": "Blade Agent React 绑定：BladeProvider、useAgentSession、开箱即用的 ChatView 聊天界面。",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@blade-hq/agent-client": "1.2.1-beta.1"
+    "@blade-hq/agent-client": "1.2.1-beta.10"
   },
   "bundledDependencies": [],
   "peerDependencies": {

package/public-api.md

@@ -593,7 +593,7 @@ user: { id?: string; username?: string; display_name?: string; } | undefined
 ## `MarkdownContent` (function)
 
 ```ts
-MarkdownContent: ({ children, className, mode }: MarkdownContentProps) => JSX.Element
+MarkdownContent: ({ children, className, mode, sessionId }: MarkdownContentProps) => JSX.Element
 ```
 
 ## `MarkdownContentProps` (interface)
@@ -602,6 +602,7 @@ MarkdownContent: ({ children, className, mode }: MarkdownContentProps) => JSX.El
 children: string
 className: string | undefined
 mode: "streaming" | "static" | undefined
+sessionId: string | undefined
 ```
 
 ## `MemoryRef` (interface)