@pactor-app/chat 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +145 -96
  2. package/dist/index.d.cts +5 -1
  3. package/dist/index.d.ts +5 -1
  4. package/dist/index.js +128 -79
  5. package/package.json +6 -6
  6. package/styles.css +61 -35
package/styles.css CHANGED
@@ -3,9 +3,13 @@
3
3
  *
4
4
  * 技术选型参考 DeepTutor web：语义 CSS 变量 + 语义 class，无 antd。
5
5
  *
6
- * 换肤契约（与 pactor-ui-radix 一致）：
7
- * 1. 覆盖 CSS 变量（在本样式表之后注入 `--pactor-chat-primary: …;` 等）；
6
+ * 换肤契约（与 @pactor-app/ui 一致）：
7
+ * 1. `--pactor-chat-*` 颜色令牌的默认值经 `var(--语义令牌, <chat 默认>)`
8
+ * 桥接 pactor-ui 语义令牌（--background/--primary/…）——皮肤 CSS 覆盖
9
+ * 语义令牌时 chat 结构件自动跟随；也可直接覆盖 `--pactor-chat-*` 精调；
8
10
  * 2. 内置暗色：`<html data-pactor-theme="dark">`（或挂在任意祖先容器上）；
11
+ * 不设置时跟随系统 prefers-color-scheme（三态：light / dark / 跟随系统）。
12
+ * 颜色令牌无需暗色覆盖块（语义令牌自动翻转），仅投影/遮罩有暗色覆盖；
9
13
  * 3. 直接覆盖 `.pactor-chat-*` class。
10
14
  *
11
15
  * 使用：import 'pactor-chat/styles.css';
@@ -21,21 +25,35 @@
21
25
  .pactor-chat-workspace,
22
26
  .pactor-chat-inspector,
23
27
  .pactor-chat-notice {
24
- --pactor-chat-bg: #f7f6f4;
25
- --pactor-chat-sidebar-bg: #efedea;
26
- --pactor-chat-fg: #1a1d26;
27
- --pactor-chat-muted: #f4f4f6;
28
- --pactor-chat-muted-fg: #6b7180;
29
- --pactor-chat-card: #ffffff;
30
- --pactor-chat-border: #e6e7eb;
31
- --pactor-chat-primary: #3c47dd;
32
- --pactor-chat-primary-fg: #ffffff;
33
- --pactor-chat-danger: #d4380d;
34
- --pactor-chat-danger-bg: #fff2f0;
35
- --pactor-chat-success: #389e0d;
36
- --pactor-chat-user-bubble-bg: #eef0fe;
37
- --pactor-chat-user-bubble-border: rgb(60 71 221 / 35%);
38
- --pactor-chat-code-bg: #f6f7f9;
28
+ /* 颜色令牌默认值桥接 pactor-ui 语义令牌（皮肤覆盖语义令牌时自动跟随），
29
+ 逗号后为 pactor-ui 缺席时的 chat 品牌默认 */
30
+ --pactor-chat-bg: var(--background, #f7f6f4);
31
+ --pactor-chat-sidebar-bg: var(--sidebar, #efedea);
32
+ --pactor-chat-fg: var(--foreground, #1a1d26);
33
+ --pactor-chat-muted: var(--muted, #f4f4f6);
34
+ --pactor-chat-muted-fg: var(--muted-foreground, #6b7180);
35
+ --pactor-chat-card: var(--card, #ffffff);
36
+ --pactor-chat-border: var(--border, #e6e7eb);
37
+ --pactor-chat-primary: var(--primary, #3c47dd);
38
+ --pactor-chat-primary-fg: var(--primary-foreground, #ffffff);
39
+ --pactor-chat-danger: var(--destructive, #d4380d);
40
+ --pactor-chat-danger-bg: color-mix(
41
+ in oklab,
42
+ var(--destructive, #d4380d) 8%,
43
+ var(--background, #fff)
44
+ );
45
+ --pactor-chat-success: var(--success, #389e0d);
46
+ --pactor-chat-user-bubble-bg: color-mix(
47
+ in oklab,
48
+ var(--primary, #3c47dd) 7%,
49
+ var(--background, #fff)
50
+ );
51
+ --pactor-chat-user-bubble-border: color-mix(
52
+ in oklab,
53
+ var(--primary, #3c47dd) 35%,
54
+ transparent
55
+ );
56
+ --pactor-chat-code-bg: var(--muted, #f6f7f9);
39
57
  /* 旧通用圆角令牌（保留兼容）；新组件改用下方圆角阶梯 */
40
58
  --pactor-chat-radius: 12px;
41
59
  /* 圆角阶梯：sm 控件 / md 卡片 / lg 气泡 / xl composer */
@@ -73,7 +91,8 @@
73
91
  }
74
92
 
75
93
  /* 暗色皮肤：data-pactor-theme="dark"（html 或任意祖先容器）。
76
- 只覆盖令牌（颜色/投影），组件规则不区分主题。 */
94
+ 颜色令牌经 var() 桥接 pactor-ui 语义令牌，暗色自动翻转，无需覆盖；
95
+ 这里只保留投影与遮罩的暗色值（组件规则不区分主题）。 */
77
96
  [data-pactor-theme='dark'] .pactor-chat-view,
78
97
  [data-pactor-theme='dark'] .pactor-chat-layout,
79
98
  [data-pactor-theme='dark'] .pactor-chat-shell,
@@ -84,28 +103,27 @@
84
103
  .pactor-chat-shell[data-pactor-theme='dark'],
85
104
  .pactor-chat-workspace[data-pactor-theme='dark'],
86
105
  .pactor-chat-notice[data-pactor-theme='dark'] {
87
- --pactor-chat-bg: #14161c;
88
- --pactor-chat-sidebar-bg: #1b1e26;
89
- --pactor-chat-fg: #e4e6ee;
90
- --pactor-chat-muted: #1e2129;
91
- --pactor-chat-muted-fg: #8b90a0;
92
- --pactor-chat-card: #1a1d24;
93
- --pactor-chat-border: #2c3038;
94
- --pactor-chat-primary: #5b66f0;
95
- --pactor-chat-primary-fg: #ffffff;
96
- --pactor-chat-danger: #e8690c;
97
- --pactor-chat-danger-bg: #2b1d16;
98
- --pactor-chat-success: #49aa19;
99
- --pactor-chat-user-bubble-bg: #262a45;
100
- --pactor-chat-user-bubble-border: rgb(91 102 240 / 45%);
101
- --pactor-chat-code-bg: #1e2129;
102
106
  --pactor-chat-shadow-sm: 0 1px 2px rgb(0 0 0 / 35%);
103
107
  --pactor-chat-shadow-composer:
104
108
  0 1px 2px rgb(0 0 0 / 4%),
105
109
  0 12px 32px -10px rgb(0 0 0 / 55%);
106
110
  --pactor-chat-shell-scrim: rgb(0 0 0 / 55%);
107
- --pactor-chat-font-display: 'Songti SC', 'Noto Serif SC', Georgia,
108
- 'Times New Roman', serif;
111
+ }
112
+
113
+ /* 系统偏好暗色兜底：未显式设置 data-pactor-theme 时跟随系统
114
+ （与上方 [data-pactor-theme='dark'] 块一致——仅投影与遮罩） */
115
+ @media (prefers-color-scheme: dark) {
116
+ :root:not([data-pactor-theme='light']):not([data-pactor-theme='dark']) .pactor-chat-view,
117
+ :root:not([data-pactor-theme='light']):not([data-pactor-theme='dark']) .pactor-chat-layout,
118
+ :root:not([data-pactor-theme='light']):not([data-pactor-theme='dark']) .pactor-chat-shell,
119
+ :root:not([data-pactor-theme='light']):not([data-pactor-theme='dark']) .pactor-chat-workspace,
120
+ :root:not([data-pactor-theme='light']):not([data-pactor-theme='dark']) .pactor-chat-notice {
121
+ --pactor-chat-shadow-sm: 0 1px 2px rgb(0 0 0 / 35%);
122
+ --pactor-chat-shadow-composer:
123
+ 0 1px 2px rgb(0 0 0 / 4%),
124
+ 0 12px 32px -10px rgb(0 0 0 / 55%);
125
+ --pactor-chat-shell-scrim: rgb(0 0 0 / 55%);
126
+ }
109
127
  }
110
128
 
111
129
  /* ------------------------------------------------------------
@@ -1085,6 +1103,14 @@ button.pactor-chat-trace__header:hover,
1085
1103
  color: var(--pactor-chat-muted-fg);
1086
1104
  }
1087
1105
 
1106
+ /* 流式期间的纯文本正文（结束后回切 markdown 渲染） */
1107
+ .pactor-chat-thinking__text {
1108
+ white-space: pre-wrap;
1109
+ word-break: break-word;
1110
+ font-size: 13px;
1111
+ line-height: 1.6;
1112
+ }
1113
+
1088
1114
  .pactor-chat-thinking__body .pactor-markdown > :first-child {
1089
1115
  margin-top: 0;
1090
1116
  }