@qfei-design/make-ai-assistant 0.2.8 → 0.2.9

package/PUBLIC_API.md

@@ -69,11 +69,10 @@ Fetch SSE 实现时，从 `/sse` 入口导入 `createSseAssistantTransport`。
 - `ReactArtifactTemplateRegistry`
 - `formatArtifactValue`
 
-`MakeAiAssistant`、`AssistantPanel` 和 `ArtifactRenderer` 均支持 `theme?: MakeAiTheme`。标题栏、内容背景、正文、通用边框和用户消息的默认色固定，
-不会因宿主主题色变化：标题栏与承载面为白色，内容区为 `#f7f9fc`，正文为 `#15233d`，用户发送消息为
-`#2f6df6` 蓝底白字。主题色只用于竖线、圆点、图标、输入框焦点、发送按钮和标签等强调元素。`primary` 为必填，
+`MakeAiAssistant`、`AssistantPanel` 和 `ArtifactRenderer` 均支持 `theme?: MakeAiTheme`。标题栏、内容区背景与用户提问气泡默认跟随宿主主题色；输入承载面固定白色，正文、通用边框保持包内中性色。
+除标题栏、内容区背景与用户提问气泡外，主题色只用于竖线、圆点、图标、输入框焦点、发送按钮和标签等强调元素；Markdown 表格滚动条固定为中性灰。`primary` 为必填，
 `primaryHover` 与 `onPrimary` 可选；内置强调色依次读取 `theme` 属性、`--make-ai-theme-primary` 系列、
-`--make-ai-accent`、宿主 `--make-color-primary` 和包内默认值。`background`、`surface`、`surfaceStrong`、
+`--make-ai-accent`、宿主 `--make-color-primary` 和包内默认值。`background` 会控制内容区基础背景；`surface`、`surfaceStrong`、
 `text`、`textSecondary`、`border`、`overlay` 与 `onOverlay` 为兼容保留字段，不再改变内置默认样式，
 但会继续写入局部 `--make-ai-theme-*` 变量，供自定义 Artifact 模板通过
 `ArtifactTemplateRenderContext.theme` 与 `themeStyle` 自行使用。语义成功/告警/错误色保持独立。

package/README.md

@@ -73,9 +73,8 @@ AI transport；进度和可重试错误会显示在对应的 AI 回合中。
 
 ## Theme integration
 
-`MakeAiAssistant`、`AssistantPanel` 和 `ArtifactRenderer` 都支持同一个 `theme` 属性。标题栏、内容背景、正文、通用边框和用户消息的默认色固定，
-不会因宿主主题色变化：标题栏与承载面为白色，内容区为 `#f7f9fc`，正文为 `#15233d`，用户发送消息为
-`#2f6df6` 蓝底白字。主题色只用于竖线、圆点、图标、输入框焦点、发送按钮和标签等强调元素；成功、告警和错误仍使用独立语义色。
+`MakeAiAssistant`、`AssistantPanel` 和 `ArtifactRenderer` 都支持同一个 `theme` 属性。标题栏、内容区背景与用户提问气泡默认跟随宿主主题色；输入承载面固定白色，正文、通用边框保持包内中性色。
+除标题栏、内容区背景与用户提问气泡外，主题色只用于竖线、圆点、图标、输入框焦点、发送按钮和标签等强调元素；成功、告警和错误仍使用独立语义色。Markdown 表格滚动条固定为中性灰，不跟随主题色。
 
 ```tsx
 import type { MakeAiTheme } from "@qfei-design/make-ai-assistant/react";
@@ -92,12 +91,12 @@ const hostTheme: MakeAiTheme = {
 `primary` 为必填项，`primaryHover` 与 `onPrimary` 可选；若主色偏浅，请传入具有足够对比度的
 `onPrimary`。内置 UI 的强调色优先级为 `theme` 属性 > `--make-ai-theme-primary`、
 `--make-ai-theme-primary-hover`、`--make-ai-theme-on-primary` > `--make-ai-accent` >
-宿主 `--make-color-primary` > 包内默认值。`background`、`surface`、`text` 等中性色字段为兼容保留，
+宿主 `--make-color-primary` > 包内默认值。`background` 会控制内容区基础背景；`surface`、`text` 等其余中性色字段为兼容保留，
 不会改变内置默认样式；它们仍会写入 `renderContext.themeStyle`，供自定义 Artifact 模板自行使用。
 
 桌面端抽屉默认宽度为 480px，且该初始宽度是用户拖拽时的最小宽度。最大宽度默认是 `min(1024px, 72vw)`，宿主可通过 `maxDrawerWidth` 传入像素值覆盖；小于最小宽度的配置会回退至最小宽度。鼠标移至抽屉左边缘的 12px 热区时才会显示 2px 主题色拖拽提示线（可通过 `--make-ai-drawer-resize-line` 覆盖），可向左拖宽；获得焦点后也可用左、右方向键以 16px 调整宽度。不大于 560px 的视口保持全宽展示，不显示拖拽手柄。
 
-面板使用容器查询而非页面视口响应宽度：回答区、结构化结果、代码块和 Markdown 表格会随抽屉可用宽度扩展；达到 760px 时，表格优先按可用宽度分列并换行，长段落和列表仍限制在 96ch 内以保障阅读性。窄容器中的 Markdown 表格保留横向滚动保护，并使用细窄、跟随主题色的滚动条。宿主可通过 `--make-ai-panel-gutter-wide` 覆盖扩展抽屉的内边距。
+面板使用容器查询而非页面视口响应宽度：回答区、结构化结果、代码块和 Markdown 表格会随抽屉可用宽度扩展；达到 760px 时，表格优先按可用宽度分列并换行，长段落和列表仍限制在 96ch 内以保障阅读性。窄容器中的 Markdown 表格保留横向滚动保护，并使用细窄的中性灰滚动条。宿主可通过 `--make-ai-panel-gutter-wide` 覆盖扩展抽屉的内边距。
 
 成功的 AI 回答会显示仅含图标的复制按钮，鼠标悬浮或键盘聚焦时显示“复制”提示，按钮保留
 “复制回答”的无障碍名称；复制只处理该回答的文本内容，失败时会在本地 UI 内提示，不会把回答正文写入日志。AI 回答正文会按标题、

package/dist/react/theme.d.ts

@@ -9,7 +9,7 @@ export interface MakeAiTheme {
     primaryHover?: string;
     /** 主色背景上的前景色；主色偏浅时应显式传入深色。 */
     onPrimary?: string;
-    /** 内置中性色不读取此字段；保留并透传给自定义 Artifact 模板。 */
+    /** 对话内容区的基础背景色。 */
     background?: string;
     /** 内置中性色不读取此字段；保留并透传给自定义 Artifact 模板。 */
     surface?: string;

package/dist/styles.css

@@ -3,14 +3,14 @@
   --make-ai-internal-accent-strong: var(--make-ai-theme-primary-hover, var(--make-ai-accent-strong, var(--make-color-primary-hover, color-mix(in srgb, var(--make-ai-internal-accent) 84%, var(--make-ai-internal-text)))));
   --make-ai-internal-on-accent: var(--make-ai-theme-on-primary, var(--make-ai-on-accent, #fcfcff));
   --make-ai-internal-accent-soft: var(--make-ai-accent-soft, color-mix(in srgb, var(--make-ai-internal-accent) 10%, var(--make-ai-internal-bg)));
-  --make-ai-internal-bg: #f7f9fc;
+  --make-ai-internal-bg: var(--make-ai-theme-bg, var(--make-ai-bg, var(--make-color-bg, color-mix(in srgb, var(--make-ai-internal-accent) 2%, #fcfcff))));
   --make-ai-internal-surface: #fff;
   --make-ai-internal-surface-strong: #f1f4f9;
   --make-ai-internal-text: #15233d;
   --make-ai-internal-text-secondary: #738096;
   --make-ai-internal-border: #dbe3ef;
-  --make-ai-internal-user-message-bg: #2f6df6;
-  --make-ai-internal-user-message-text: #fff;
+  --make-ai-internal-scrollbar-thumb: #9aa0a8;
+  --make-ai-internal-scrollbar-thumb-hover: #7b8490;
   --make-ai-internal-success: var(--make-ai-success, var(--make-color-success, #1a9a61));
   --make-ai-internal-warning: var(--make-ai-warning, var(--make-color-warning, #c77b00));
   --make-ai-internal-danger: var(--make-ai-danger, var(--make-color-danger, #d04444));
@@ -280,7 +280,7 @@
 
 .make-ai-assistant__header {
   align-items: center;
-  background: var(--make-ai-internal-surface);
+  background: var(--make-ai-internal-bg);
   border-bottom: 1px solid var(--make-ai-internal-border);
   display: grid;
   gap: 8px;
@@ -682,10 +682,10 @@
 }
 
 .make-ai-assistant__message--user .make-ai-assistant__bubble {
-  background: var(--make-ai-internal-user-message-bg);
-  border: 1px solid var(--make-ai-internal-user-message-bg);
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 4%, var(--make-ai-internal-bg));
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 7%, var(--make-ai-internal-border));
   border-radius: 16px 5px 16px 16px;
-  color: var(--make-ai-internal-user-message-text);
+  color: color-mix(in srgb, var(--make-ai-internal-text) 82%, var(--make-ai-internal-accent));
   font-size: var(--make-ai-internal-font-size-heading);
   line-height: var(--make-ai-internal-line-height-heading);
   padding: 10px 13px;
@@ -803,7 +803,7 @@
   max-width: 100%;
   overflow-x: auto;
   overscroll-behavior-inline: contain;
-  scrollbar-color: color-mix(in srgb, var(--make-ai-internal-accent) 46%, var(--make-ai-internal-border)) transparent;
+  scrollbar-color: var(--make-ai-internal-scrollbar-thumb) transparent;
   scrollbar-width: thin;
 }
 
@@ -817,7 +817,7 @@
 }
 
 .make-ai-assistant__markdown-table-scroll::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--make-ai-internal-accent) 46%, var(--make-ai-internal-border));
+  background: var(--make-ai-internal-scrollbar-thumb);
   background-clip: padding-box;
   border: 1px solid transparent;
   border-radius: 999px;
@@ -825,7 +825,7 @@
 
 .make-ai-assistant__markdown-table-scroll:hover::-webkit-scrollbar-thumb,
 .make-ai-assistant__markdown-table-scroll:focus-within::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--make-ai-internal-accent) 64%, var(--make-ai-internal-border));
+  background: var(--make-ai-internal-scrollbar-thumb-hover);
 }
 
 .make-ai-assistant__markdown-table {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qfei-design/make-ai-assistant",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Platform-wide Make AI Assistant contracts, React shell, and context-aware artifact templates.",
   "type": "module",
   "sideEffects": [