@pactor-app/chat 1.16.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/chat",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "Pactor chat: AI message rendering protocol (message model, streaming reducer, safe registry, capability action) and chat runtime view (ChatView / MessageBubble / PartRenderer / Composer / chat layout)",
   "keywords": [
     "pactor",
@@ -49,11 +49,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@pactor-app/core": "1.16.0",
-    "@pactor-app/permission": "1.16.0",
-    "@pactor-app/runtime": "1.16.0",
-    "@pactor-app/markdown": "1.16.0",
-    "@pactor-app/ui": "1.16.0"
+    "@pactor-app/core": "1.17.0",
+    "@pactor-app/runtime": "1.17.0",
+    "@pactor-app/markdown": "1.17.0",
+    "@pactor-app/permission": "1.17.0",
+    "@pactor-app/ui": "1.17.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles.css

@@ -54,6 +54,17 @@
     transparent
   );
   --pactor-chat-code-bg: var(--muted, #f6f7f9);
+  /* 产出物卡片图标盒 tone 配色（表格 green / 数据 amber / 代码 blue /
+     图片 violet；文档与兜底走 --pactor-chat-muted(-fg) 不入列）。
+     暗色值见下方 [data-pactor-theme='dark'] 载体块 */
+  --pactor-chat-artifact-tone-green-fg: #16a34a;
+  --pactor-chat-artifact-tone-green-bg: #dcfce7;
+  --pactor-chat-artifact-tone-blue-fg: #2563eb;
+  --pactor-chat-artifact-tone-blue-bg: #dbeafe;
+  --pactor-chat-artifact-tone-amber-fg: #d97706;
+  --pactor-chat-artifact-tone-amber-bg: #fef3c7;
+  --pactor-chat-artifact-tone-violet-fg: #7c3aed;
+  --pactor-chat-artifact-tone-violet-bg: #ede9fe;
   /* 旧通用圆角令牌（保留兼容）；新组件改用下方圆角阶梯 */
   --pactor-chat-radius: 12px;
   /* 圆角阶梯：sm 控件 / md 卡片 / lg 气泡 / xl composer */
@@ -77,10 +88,10 @@
   --pactor-chat-shell-scrim: rgb(0 0 0 / 40%);
   /* 产出物面板（spec: chat-artifact-panel）：桌面固定宽右栏。
      默认宽与对话列一致（--pactor-chat-content-width），
-     拖拽调宽下限为 --pactor-chat-inspector-min-width；
+     宽度夹取 [--pactor-chat-inspector-min-width, host 宽 2/3]；
      背景略深于聊天区底色，视觉上与消息流区分 */
   --pactor-chat-inspector-width: var(--pactor-chat-content-width);
-  --pactor-chat-inspector-min-width: 320px;
+  --pactor-chat-inspector-min-width: 480px;
   --pactor-chat-inspector-bg: color-mix(
     in srgb,
     var(--pactor-chat-bg) 96%,
@@ -115,6 +126,15 @@
     0 1px 2px rgb(0 0 0 / 4%),
     0 12px 32px -10px rgb(0 0 0 / 55%);
   --pactor-chat-shell-scrim: rgb(0 0 0 / 55%);
+  /* 产出物卡片图标盒 tone 配色（暗色） */
+  --pactor-chat-artifact-tone-green-fg: #4ade80;
+  --pactor-chat-artifact-tone-green-bg: #14532d;
+  --pactor-chat-artifact-tone-blue-fg: #93c5fd;
+  --pactor-chat-artifact-tone-blue-bg: #1e3a8a;
+  --pactor-chat-artifact-tone-amber-fg: #fbbf24;
+  --pactor-chat-artifact-tone-amber-bg: #451a03;
+  --pactor-chat-artifact-tone-violet-fg: #c4b5fd;
+  --pactor-chat-artifact-tone-violet-bg: #2e1065;
 }
 
 /* 系统偏好暗色兜底：未显式设置 data-pactor-theme 时跟随系统
@@ -127,6 +147,15 @@
       0 1px 2px rgb(0 0 0 / 4%),
       0 12px 32px -10px rgb(0 0 0 / 55%);
     --pactor-chat-shell-scrim: rgb(0 0 0 / 55%);
+    /* 产出物卡片图标盒 tone 配色（暗色） */
+    --pactor-chat-artifact-tone-green-fg: #4ade80;
+    --pactor-chat-artifact-tone-green-bg: #14532d;
+    --pactor-chat-artifact-tone-blue-fg: #93c5fd;
+    --pactor-chat-artifact-tone-blue-bg: #1e3a8a;
+    --pactor-chat-artifact-tone-amber-fg: #fbbf24;
+    --pactor-chat-artifact-tone-amber-bg: #451a03;
+    --pactor-chat-artifact-tone-violet-fg: #c4b5fd;
+    --pactor-chat-artifact-tone-violet-bg: #2e1065;
   }
 }
 
@@ -191,7 +220,8 @@
 
 /* ------------------------------------------------------------
  * ChatWorkspace（spec: chat-dsl-page）：createChatWorkspace 工厂
- * 返回组件的外层容器 = 可选头部（title + headerExtra）+ ChatView。
+ * 返回组件的外层容器 = 对话列（ChatView）；工作区头部（header）
+ * 上移为全宽容器的直接子级，不随对话列限宽。
  * ------------------------------------------------------------ */
 
 .pactor-chat-workspace {
@@ -212,6 +242,20 @@
   line-height: 1.6;
 }
 
+/* header 承载容器（无产物面板路径）：header 通栏 + 主区填满剩余高度 */
+.pactor-chat-with-header {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.pactor-chat-with-header > .pactor-chat-shell,
+.pactor-chat-with-header > .pactor-chat-workspace {
+  flex: 1;
+  min-height: 0;
+}
+
 .pactor-chat-workspace__header {
   display: flex;
   align-items: center;
@@ -313,10 +357,12 @@
  * 面板关闭 / 未配置时不渲染 DOM（组合层保证）。
  * ------------------------------------------------------------ */
 
-/* 面板打开时的同行容器：workspace（或 AppShell）与面板 flex 并排，
- * host 在 shell content 内撑满剩余高度与宽度 */
+/* 面板打开时的容器：header 通栏（host 直接子级）+ 行内容器
+ * （workspace / AppShell 与面板 flex 并排）；host 在 shell content
+ * 内撑满剩余高度与宽度 */
 .pactor-chat-inspector-host {
   display: flex;
+  flex-direction: column;
   flex: 1;
   width: 100%;
   min-height: 0;
@@ -324,14 +370,23 @@
   background: var(--pactor-chat-bg);
 }
 
-/* 面板打开时 host 内的直子：AppShell 填满剩余空间；workspace 只缩不伸，
+/* host 行内容器：对话列与面板的 flex 行（gutter 契约挂在行上——
+ * host padding 会同时作用于通栏 header） */
+.pactor-chat-inspector-host__row {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+}
+
+/* 面板打开时行内直子：AppShell 填满剩余空间；workspace 只缩不伸，
  * 宽度受 --pactor-chat-content-width 限宽，margin auto 在剩余空间内居中 */
-.pactor-chat-inspector-host > .pactor-chat-shell {
+.pactor-chat-inspector-host__row > .pactor-chat-shell {
   flex: 1;
   min-width: 0;
 }
 
-.pactor-chat-inspector-host > .pactor-chat-workspace {
+.pactor-chat-inspector-host__row > .pactor-chat-workspace {
   flex: 0 1 auto;
   min-width: 0;
 }
@@ -339,13 +394,13 @@
 /* 对话列左右最小内间距（gutter 契约，spec: chat-artifact-panel / 拖拽调宽）：
  * 对话列自身的 calc 宽度在 flex 行内会把面板宽度一并计入 100% 基准，
  * shrink 后 margin auto 塌到 0；因此面板打开时的 gutter 由容器侧保证——
- * 左：host padding-left；右：面板 margin-left（对话列与分隔线的间距）。
- * 面板关闭（:has 不命中）时不加 host padding，避免与对话列 calc 重复计算 */
-.pactor-chat-inspector-host:has(> .pactor-chat-inspector) {
+ * 左：row padding-left；右：面板 margin-left（对话列与分隔线的间距）。
+ * 面板关闭（:has 不命中）时不加 row padding，避免与对话列 calc 重复计算 */
+.pactor-chat-inspector-host__row:has(> .pactor-chat-inspector) {
   padding-left: var(--pactor-chat-content-gutter);
 }
 
-.pactor-chat-inspector-host > .pactor-chat-inspector {
+.pactor-chat-inspector-host__row > .pactor-chat-inspector {
   margin-left: var(--pactor-chat-content-gutter);
 }
 
@@ -353,8 +408,8 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  /* 默认宽对齐对话列；上限 70% host（与拖拽夹取一致），下限 min-width 令牌 */
-  width: min(var(--pactor-chat-inspector-width), 70%);
+  /* 默认宽对齐对话列；上限 host 宽 2/3（与拖拽夹取一致），下限 min-width 令牌 */
+  width: min(var(--pactor-chat-inspector-width), calc(100% * 2 / 3));
   min-width: var(--pactor-chat-inspector-min-width);
   flex-shrink: 0;
   border-left: 1px solid var(--pactor-chat-border);
@@ -398,9 +453,8 @@
   font-weight: 600;
 }
 
-/* kind 角标（与产出物卡片角标同款） */
-.pactor-chat-inspector__kind,
-.pactor-chat-artifact-card__kind {
+/* kind 角标 */
+.pactor-chat-inspector__kind {
   flex-shrink: 0;
   padding: 0 6px;
   border-radius: 999px;
@@ -418,47 +472,32 @@
   flex-shrink: 0;
 }
 
-/* 多产物 tab 条（spec: chat-artifact-panel / 多产物切换）：
- * header 下沿横向滚动条；激活 tab 以底色 + 底部分隔反色标识 */
-.pactor-chat-inspector__tabs {
+/* 产物切换下拉（spec: chat-artifact-panel / 多产物切换）：
+ * header 文件名处触发器（图标 + 名称 + chevron），占用标题区剩余宽度 */
+.pactor-chat-inspector__header .dropdown-menu-trigger-wrap {
+  flex: 1;
+  min-width: 0;
   display: flex;
-  gap: 2px;
-  padding: 4px 8px 0;
-  border-bottom: 1px solid var(--pactor-chat-border);
-  overflow-x: auto;
-  flex-shrink: 0;
 }
 
-.pactor-chat-inspector__tab {
-  display: flex;
+.pactor-chat-inspector__menu-trigger {
+  display: inline-flex;
   align-items: center;
   gap: 6px;
-  max-width: 180px;
-  padding: 6px 10px;
-  border: none;
-  border-bottom: 2px solid transparent;
-  background: transparent;
-  color: var(--pactor-chat-muted-fg);
-  font-size: 12px;
-  line-height: 18px;
+  min-width: 0;
+  max-width: 100%;
+  padding: 3px 6px;
+  border-radius: var(--pactor-chat-radius-sm);
   cursor: pointer;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.pactor-chat-inspector__tab:hover {
   color: var(--pactor-chat-fg);
 }
 
-.pactor-chat-inspector__tab[data-active='true'] {
-  color: var(--pactor-chat-fg);
-  border-bottom-color: var(--pactor-chat-primary);
-  font-weight: 600;
+.pactor-chat-inspector__menu-trigger:hover {
+  background: var(--pactor-chat-muted);
 }
 
-.pactor-chat-inspector__tab-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.pactor-chat-inspector__menu-trigger .pactor-chat-inspector__title {
+  min-width: 0;
 }
 
 /* 产物目录列表视图（spec: chat-artifact-panel / 产物目录）：
@@ -605,23 +644,79 @@
 
 /* ------------------------------------------------------------
  * 产出物卡片（spec: chat-artifact-panel / artifact 消息 part）：
- * 消息流内 artifact part 的内联呈现——标题 + kind 角标 + 打开按钮。
+ * 消息流内 artifact part 的内联呈现——整卡可点击：着色图标盒
+ * （按文件类型 tone 取色）+ 标题 + 元信息行（尺寸 · 类型）+
+ * 右上箭头。结构与 ChatArtifactCard 内部组件一一对应。
  * ------------------------------------------------------------ */
 
 .pactor-chat-artifact-card {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  box-sizing: border-box;
+  width: 100%;
   margin: 8px 0;
-  padding: 10px 12px;
+  padding: 12px 14px;
   border: 1px solid var(--pactor-chat-border);
   border-radius: var(--pactor-chat-radius-md);
   background: var(--pactor-chat-card);
+  color: var(--pactor-chat-fg);
   box-shadow: var(--pactor-chat-shadow-sm);
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.15s ease;
+}
+
+.pactor-chat-artifact-card:hover {
+  background: var(--pactor-chat-muted);
+}
+
+/* 着色图标盒（36px 圆角盒；tone 着色，暗色值见下方覆盖块） */
+.pactor-chat-artifact-card__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--pactor-chat-radius-sm);
+  background: var(--pactor-chat-muted);
+  color: var(--pactor-chat-muted-fg);
+}
+
+/* 按文件类型着色（tone 见 artifact.ts resolveArtifactIcon；色值走
+ * --pactor-chat-artifact-tone-* 令牌，暗色经载体块覆盖、皮肤可精调）：
+ * 表格 green / 数据 amber / 代码 blue / 图片 violet / 文档与兜底 slate */
+.pactor-chat-artifact-card--green .pactor-chat-artifact-card__icon {
+  color: var(--pactor-chat-artifact-tone-green-fg);
+  background: var(--pactor-chat-artifact-tone-green-bg);
+}
+
+.pactor-chat-artifact-card--blue .pactor-chat-artifact-card__icon {
+  color: var(--pactor-chat-artifact-tone-blue-fg);
+  background: var(--pactor-chat-artifact-tone-blue-bg);
+}
+
+.pactor-chat-artifact-card--amber .pactor-chat-artifact-card__icon {
+  color: var(--pactor-chat-artifact-tone-amber-fg);
+  background: var(--pactor-chat-artifact-tone-amber-bg);
+}
+
+.pactor-chat-artifact-card--violet .pactor-chat-artifact-card__icon {
+  color: var(--pactor-chat-artifact-tone-violet-fg);
+  background: var(--pactor-chat-artifact-tone-violet-bg);
+}
+
+.pactor-chat-artifact-card__text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 .pactor-chat-artifact-card__title {
-  flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -630,23 +725,45 @@
   font-size: 13px;
 }
 
-.pactor-chat-artifact-card__open {
-  flex-shrink: 0;
+/* 元信息行（尺寸 · 类型标签） */
+.pactor-chat-artifact-card__meta {
+  font-size: 11px;
+  color: var(--pactor-chat-muted-fg);
+}
+
+/* 右上箭头（打开面板暗示） */
+.pactor-chat-artifact-card__arrow {
+  flex: none;
+  color: var(--pactor-chat-muted-fg);
+}
+
+/* 连续产物卡片组（spec: chat-artifact-panel / 卡片区收起）：
+ * 同一消息内连续 artifact part 合组；超 4 个收起，footer 右端
+ * 「展开 / 收起」+「查看所有产物(n) ›」（打开面板产物目录视图） */
+.pactor-chat-artifact-group__footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  margin: -2px 0 8px;
+}
+
+.pactor-chat-artifact-group__toggle,
+.pactor-chat-artifact-group__all {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  white-space: nowrap;
-  padding: 4px 10px;
-  border: 1px solid var(--pactor-chat-border);
+  gap: 3px;
+  padding: 2px 4px;
+  border: none;
   border-radius: var(--pactor-chat-radius-sm);
   background: transparent;
   color: var(--pactor-chat-primary);
   font-size: 12px;
   cursor: pointer;
-  transition: background 0.15s ease;
 }
 
-.pactor-chat-artifact-card__open:hover {
+.pactor-chat-artifact-group__toggle:hover,
+.pactor-chat-artifact-group__all:hover {
   background: var(--pactor-chat-muted);
 }
 
@@ -948,6 +1065,7 @@
 .pactor-chat-message__actions {
   display: flex;
   gap: 4px;
+
   opacity: 0;
   transition: opacity 0.15s ease;
 }
@@ -962,6 +1080,20 @@
   opacity: 1;
 }
 
+/* assistant 终态消息底部行：操作条 + 常显时间戳 */
+.pactor-chat-message__footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pactor-chat-message__time {
+  flex-shrink: 0;
+  color: var(--pactor-chat-muted-fg);
+  font-size: 11px;
+  line-height: 18px;
+}
+
 /* user 消息内联编辑框（编辑重发） */
 .pactor-chat-message__edit {
   display: flex;