one-design-next 0.0.18 → 0.0.20
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.
- package/README.md +7 -28
- package/dist/_genui-types.d.ts +11 -5
- package/dist/_genui-types.js +4 -4
- package/dist/artifact/index.d.ts +32 -0
- package/dist/artifact/index.js +136 -0
- package/dist/artifact/style/index.css +181 -0
- package/dist/artifact/style/index.d.ts +2 -0
- package/dist/artifact/style/index.js +2 -0
- package/dist/composer/index.d.ts +15 -2
- package/dist/composer/index.js +72 -36
- package/dist/composer/send-meta.d.ts +1 -1
- package/dist/composer/send-meta.js +3 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
通用业务控件 / 平台布局 / GenUI 对话组件 / AI Skill 工程化流水线
|
|
8
8
|
|
|
9
|
-
[](https://www.npmjs.com/package/one-design-next)
|
|
10
10
|
[](https://react.dev)
|
|
11
11
|
[](./LICENSE)
|
|
12
12
|
|
|
@@ -30,11 +30,10 @@ One Design Next 是腾讯 TAD / WXAD 团队维护的 React 组件库,提供 **
|
|
|
30
30
|
### 安装
|
|
31
31
|
|
|
32
32
|
```bash
|
|
33
|
-
|
|
34
|
-
npm install one-design-next --registry http://mirrors.tencent.com/npm/
|
|
33
|
+
npm install one-design-next
|
|
35
34
|
|
|
36
35
|
# 或使用 pnpm
|
|
37
|
-
pnpm add one-design-next
|
|
36
|
+
pnpm add one-design-next
|
|
38
37
|
```
|
|
39
38
|
|
|
40
39
|
### 使用
|
|
@@ -96,7 +95,7 @@ pnpm run docs:build
|
|
|
96
95
|
### 常用脚本
|
|
97
96
|
|
|
98
97
|
| 命令 | 说明 |
|
|
99
|
-
|
|
98
|
+
|:-----|:-----|·
|
|
100
99
|
| `pnpm run dev` | 启动本地开发文档站 |
|
|
101
100
|
| `pnpm run build` | 构建组件库(father + 样式) |
|
|
102
101
|
| `pnpm run docs:build` | 静态构建文档站(含 LLM 知识生成) |
|
|
@@ -178,11 +177,7 @@ bash skills/build.sh huxuan # 只构建互选
|
|
|
178
177
|
|
|
179
178
|
### 环境准备
|
|
180
179
|
|
|
181
|
-
|
|
182
|
-
npm config set registry http://mirrors.tencent.com/npm/
|
|
183
|
-
pnpm config set registry http://mirrors.tencent.com/npm/
|
|
184
|
-
# 在 ~/.npmrc 配置 mirrors 的 _authToken(发布权限)
|
|
185
|
-
```
|
|
180
|
+
在 `~/.npmrc` 中配置 npm 账号的 `_authToken`(需有 `one-design-next` 包的发布权限)。
|
|
186
181
|
|
|
187
182
|
### 发布流程
|
|
188
183
|
|
|
@@ -192,30 +187,14 @@ git checkout master && git pull origin master
|
|
|
192
187
|
# 更新 package.json 版本号后:
|
|
193
188
|
pnpm install
|
|
194
189
|
pnpm run build
|
|
195
|
-
npm publish
|
|
190
|
+
npm publish
|
|
196
191
|
```
|
|
197
192
|
|
|
198
193
|
提交信息遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范(通过 `commitlint` + `husky` 钩子校验)。
|
|
199
194
|
|
|
200
|
-
### 同步到 tad-universal-components
|
|
201
|
-
|
|
202
|
-
```bash
|
|
203
|
-
cd tad-universal-components
|
|
204
|
-
git checkout odn-update && git merge origin/main --no-edit
|
|
205
|
-
|
|
206
|
-
# 更新 packages/lib-od/package.json 中的 one-design-next 版本
|
|
207
|
-
pnpm install
|
|
208
|
-
git add packages/lib-od/package.json pnpm-lock.yaml
|
|
209
|
-
git commit -m "chore(od): update one-design-next to <版本号>"
|
|
210
|
-
git push origin odn-update
|
|
211
|
-
# 在工蜂创建 MR:odn-update → main
|
|
212
|
-
```
|
|
213
|
-
|
|
214
195
|
## 相关链接
|
|
215
196
|
|
|
216
|
-
-
|
|
217
|
-
- **tad-universal-components** — https://git.woa.com/tad-ag/tad-universal-components
|
|
218
|
-
- **npm 包** — `one-design-next` @ [mirrors.tencent.com/npm](http://mirrors.tencent.com/npm/)
|
|
197
|
+
- **npm 包** — [one-design-next](https://www.npmjs.com/package/one-design-next)
|
|
219
198
|
|
|
220
199
|
## 协议
|
|
221
200
|
|
package/dist/_genui-types.d.ts
CHANGED
|
@@ -55,21 +55,23 @@ export interface PreviewTab {
|
|
|
55
55
|
type: string;
|
|
56
56
|
}
|
|
57
57
|
/**
|
|
58
|
-
*
|
|
58
|
+
* 内联引用状态:
|
|
59
59
|
* - complete:默认稳态(无参数 / 参数已填)
|
|
60
60
|
* - pending:邀请补充参数(业务自定,不强制)
|
|
61
|
-
* - active:参数面板打开(最高优先级,由组件内部根据 `active` prop
|
|
61
|
+
* - active:参数面板打开(最高优先级,由组件内部根据 `active` prop 控制,不进 data)
|
|
62
62
|
*/
|
|
63
63
|
export type InlineRefState = 'pending' | 'complete';
|
|
64
64
|
/**
|
|
65
65
|
* Composer 正文内 `/` 触发的内联引用(Invocation 组件数据契约)。
|
|
66
66
|
*
|
|
67
|
-
* 库只关心 UI
|
|
68
|
-
*
|
|
67
|
+
* 库只关心 UI 渲染必需字段;业务方自行扩展 `payload` 以携带参数、上下文等。
|
|
68
|
+
* 库**不约定 payload 内部结构**,发送时原样透传。
|
|
69
69
|
*/
|
|
70
70
|
export interface InvocationData {
|
|
71
71
|
/** chip 实例唯一 id(库内部 DOM 锚定、segments 去重用) */
|
|
72
72
|
id: string;
|
|
73
|
+
/** 业务侧资源唯一 id(来自 SkillItem.id,原样透传至 onSend segments) */
|
|
74
|
+
refId?: string;
|
|
73
75
|
/** 业务子类型('skill' / 'command' / 自定义);当前仅 'skill' 使用,预留扩展 */
|
|
74
76
|
kind: string;
|
|
75
77
|
/** 显示文字 */
|
|
@@ -78,12 +80,14 @@ export interface InvocationData {
|
|
|
78
80
|
icon?: string;
|
|
79
81
|
/** 视觉态。`active`(参数面板打开)由组件 prop 控制,不进 data。 */
|
|
80
82
|
state?: InlineRefState;
|
|
81
|
-
/**
|
|
83
|
+
/** 业务自定义任意字段:参数、上下文等,库不消费 */
|
|
82
84
|
payload?: Record<string, unknown>;
|
|
83
85
|
}
|
|
84
86
|
/** Composer 正文内 `@` 触发的内联引用(Mention 组件数据契约)。结构同 Invocation。 */
|
|
85
87
|
export interface MentionData {
|
|
86
88
|
id: string;
|
|
89
|
+
/** 业务侧资源唯一 id,原样透传至 onSend segments */
|
|
90
|
+
refId?: string;
|
|
87
91
|
kind: string;
|
|
88
92
|
label: string;
|
|
89
93
|
icon?: string;
|
|
@@ -97,6 +101,8 @@ export interface MentionData {
|
|
|
97
101
|
export interface ChipData {
|
|
98
102
|
/** chip 实例唯一 id(与 value marker 中的 id 对应) */
|
|
99
103
|
id: string;
|
|
104
|
+
/** 业务侧资源唯一 id,透传至 InvocationData / MentionData */
|
|
105
|
+
refId?: string;
|
|
100
106
|
label: string;
|
|
101
107
|
icon?: string;
|
|
102
108
|
/**
|
package/dist/_genui-types.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* 内联引用状态:
|
|
3
3
|
* - complete:默认稳态(无参数 / 参数已填)
|
|
4
4
|
* - pending:邀请补充参数(业务自定,不强制)
|
|
5
|
-
* - active:参数面板打开(最高优先级,由组件内部根据 `active` prop
|
|
5
|
+
* - active:参数面板打开(最高优先级,由组件内部根据 `active` prop 控制,不进 data)
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Composer 正文内 `/` 触发的内联引用(Invocation 组件数据契约)。
|
|
10
10
|
*
|
|
11
|
-
* 库只关心 UI
|
|
12
|
-
*
|
|
11
|
+
* 库只关心 UI 渲染必需字段;业务方自行扩展 `payload` 以携带参数、上下文等。
|
|
12
|
+
* 库**不约定 payload 内部结构**,发送时原样透传。
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
15
|
/** Composer 正文内 `@` 触发的内联引用(Mention 组件数据契约)。结构同 Invocation。 */
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import './style';
|
|
3
|
+
export interface ArtifactShimmerOptions {
|
|
4
|
+
durationMs?: number;
|
|
5
|
+
/** 每秒扫光次数(优先级高于 durationMs)。 */
|
|
6
|
+
frequencyHz?: number;
|
|
7
|
+
angleDeg?: number;
|
|
8
|
+
bandSizePercent?: number;
|
|
9
|
+
baseOpacity?: number;
|
|
10
|
+
highlightOpacity?: number;
|
|
11
|
+
easing?: string;
|
|
12
|
+
}
|
|
13
|
+
export interface ArtifactProps {
|
|
14
|
+
title: string;
|
|
15
|
+
statRange: string;
|
|
16
|
+
createdAt?: string;
|
|
17
|
+
/** 预留字段:当前卡片不展示。 */
|
|
18
|
+
type?: string;
|
|
19
|
+
status?: 'Generating' | 'Done' | (string & {});
|
|
20
|
+
shimmer?: ArtifactShimmerOptions;
|
|
21
|
+
thumbnailUrl?: string;
|
|
22
|
+
onOpen?: () => void;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* 对话流内的单个产物摘要卡片。
|
|
26
|
+
* 本期聚焦单项展示,保留 `type` 字段以支持未来“报告 / 人群”等产物类型扩展。
|
|
27
|
+
*/
|
|
28
|
+
export declare function Artifact({ title, statRange, createdAt, status, shimmer, thumbnailUrl, onOpen, }: ArtifactProps): import("react").JSX.Element;
|
|
29
|
+
export declare namespace Artifact {
|
|
30
|
+
var displayName: string;
|
|
31
|
+
}
|
|
32
|
+
export default Artifact;
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
10
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
11
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
12
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
+
import { useState } from 'react';
|
|
14
|
+
import Icon from "../icon";
|
|
15
|
+
import "./style";
|
|
16
|
+
/**
|
|
17
|
+
* 对话流内的单个产物摘要卡片。
|
|
18
|
+
* 本期聚焦单项展示,保留 `type` 字段以支持未来“报告 / 人群”等产物类型扩展。
|
|
19
|
+
*/
|
|
20
|
+
export function Artifact(_ref) {
|
|
21
|
+
var _shimmer$durationMs, _shimmer$angleDeg, _shimmer$bandSizePerc, _shimmer$baseOpacity, _shimmer$highlightOpa, _shimmer$easing;
|
|
22
|
+
var title = _ref.title,
|
|
23
|
+
statRange = _ref.statRange,
|
|
24
|
+
createdAt = _ref.createdAt,
|
|
25
|
+
_ref$status = _ref.status,
|
|
26
|
+
status = _ref$status === void 0 ? 'Done' : _ref$status,
|
|
27
|
+
shimmer = _ref.shimmer,
|
|
28
|
+
thumbnailUrl = _ref.thumbnailUrl,
|
|
29
|
+
onOpen = _ref.onOpen;
|
|
30
|
+
var isGenerating = status === 'Generating';
|
|
31
|
+
var isInteractive = !!onOpen && !isGenerating;
|
|
32
|
+
var _useState = useState({
|
|
33
|
+
x: 208,
|
|
34
|
+
y: 60,
|
|
35
|
+
active: false
|
|
36
|
+
}),
|
|
37
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
38
|
+
spotlight = _useState2[0],
|
|
39
|
+
setSpotlight = _useState2[1];
|
|
40
|
+
var handleMouseMove = function handleMouseMove(event) {
|
|
41
|
+
var rect = event.currentTarget.getBoundingClientRect();
|
|
42
|
+
setSpotlight({
|
|
43
|
+
x: event.clientX - rect.left,
|
|
44
|
+
y: event.clientY - rect.top,
|
|
45
|
+
active: true
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
var handleMouseEnter = function handleMouseEnter(event) {
|
|
49
|
+
var rect = event.currentTarget.getBoundingClientRect();
|
|
50
|
+
setSpotlight({
|
|
51
|
+
x: event.clientX - rect.left,
|
|
52
|
+
y: event.clientY - rect.top,
|
|
53
|
+
active: true
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
var handleMouseLeave = function handleMouseLeave() {
|
|
57
|
+
setSpotlight(function (prev) {
|
|
58
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
|
59
|
+
active: false
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
var shimmerConfig = {
|
|
64
|
+
durationMs: (_shimmer$durationMs = shimmer === null || shimmer === void 0 ? void 0 : shimmer.durationMs) !== null && _shimmer$durationMs !== void 0 ? _shimmer$durationMs : 4200,
|
|
65
|
+
frequencyHz: shimmer === null || shimmer === void 0 ? void 0 : shimmer.frequencyHz,
|
|
66
|
+
angleDeg: (_shimmer$angleDeg = shimmer === null || shimmer === void 0 ? void 0 : shimmer.angleDeg) !== null && _shimmer$angleDeg !== void 0 ? _shimmer$angleDeg : 110,
|
|
67
|
+
bandSizePercent: (_shimmer$bandSizePerc = shimmer === null || shimmer === void 0 ? void 0 : shimmer.bandSizePercent) !== null && _shimmer$bandSizePerc !== void 0 ? _shimmer$bandSizePerc : 16,
|
|
68
|
+
baseOpacity: (_shimmer$baseOpacity = shimmer === null || shimmer === void 0 ? void 0 : shimmer.baseOpacity) !== null && _shimmer$baseOpacity !== void 0 ? _shimmer$baseOpacity : 0.42,
|
|
69
|
+
highlightOpacity: (_shimmer$highlightOpa = shimmer === null || shimmer === void 0 ? void 0 : shimmer.highlightOpacity) !== null && _shimmer$highlightOpa !== void 0 ? _shimmer$highlightOpa : 0.92,
|
|
70
|
+
easing: (_shimmer$easing = shimmer === null || shimmer === void 0 ? void 0 : shimmer.easing) !== null && _shimmer$easing !== void 0 ? _shimmer$easing : 'cubic-bezier(0.22, 1, 0.36, 1)'
|
|
71
|
+
};
|
|
72
|
+
var resolvedDurationMs = shimmerConfig.frequencyHz && shimmerConfig.frequencyHz > 0 ? 1000 / shimmerConfig.frequencyHz : shimmerConfig.durationMs;
|
|
73
|
+
var spotlightStyle = {
|
|
74
|
+
'--odn-artifact-spot-x': "".concat(spotlight.x, "px"),
|
|
75
|
+
'--odn-artifact-spot-y': "".concat(spotlight.y, "px"),
|
|
76
|
+
'--odn-artifact-spot-opacity': spotlight.active && !isGenerating ? 1 : 0,
|
|
77
|
+
'--odn-artifact-shimmer-duration': "".concat(Math.max(300, resolvedDurationMs), "ms"),
|
|
78
|
+
'--odn-artifact-shimmer-angle': "".concat(shimmerConfig.angleDeg, "deg"),
|
|
79
|
+
'--odn-artifact-shimmer-band': "".concat(Math.max(4, Math.min(40, shimmerConfig.bandSizePercent)), "%"),
|
|
80
|
+
'--odn-artifact-shimmer-base-color': "rgba(51, 55, 61, ".concat(Math.max(0, Math.min(1, shimmerConfig.baseOpacity)), ")"),
|
|
81
|
+
'--odn-artifact-shimmer-highlight-color': "rgba(13, 13, 13, ".concat(Math.max(0, Math.min(1, shimmerConfig.highlightOpacity)), ")"),
|
|
82
|
+
'--odn-artifact-shimmer-easing': shimmerConfig.easing
|
|
83
|
+
};
|
|
84
|
+
var thirdLineText = status === 'Generating' ? '生成中' : createdAt !== null && createdAt !== void 0 ? createdAt : '创建时间:--';
|
|
85
|
+
var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
86
|
+
"data-odn-artifact-spotlight": true,
|
|
87
|
+
"aria-hidden": true
|
|
88
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
89
|
+
"data-odn-artifact-copy": true
|
|
90
|
+
}, /*#__PURE__*/React.createElement("p", {
|
|
91
|
+
"data-odn-artifact-title": true
|
|
92
|
+
}, title), /*#__PURE__*/React.createElement("p", {
|
|
93
|
+
"data-odn-artifact-stat-range": true
|
|
94
|
+
}, statRange), /*#__PURE__*/React.createElement("p", {
|
|
95
|
+
"data-odn-artifact-created-at": true
|
|
96
|
+
}, thirdLineText)), /*#__PURE__*/React.createElement("div", {
|
|
97
|
+
"data-odn-artifact-visual-wrap": true
|
|
98
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
99
|
+
"data-odn-artifact-visual": true,
|
|
100
|
+
"aria-hidden": true
|
|
101
|
+
}, thumbnailUrl ? /*#__PURE__*/React.createElement("div", {
|
|
102
|
+
"data-odn-artifact-visual-inner": true
|
|
103
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
104
|
+
src: thumbnailUrl,
|
|
105
|
+
alt: "",
|
|
106
|
+
"data-odn-artifact-visual-image": true
|
|
107
|
+
})) : /*#__PURE__*/React.createElement("div", {
|
|
108
|
+
"data-odn-artifact-visual-inner": true,
|
|
109
|
+
"data-odn-artifact-visual-inner-placeholder": true
|
|
110
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
111
|
+
"data-odn-artifact-visual-placeholder": true
|
|
112
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
113
|
+
name: "file-text",
|
|
114
|
+
size: 18
|
|
115
|
+
}))))));
|
|
116
|
+
return isInteractive ? /*#__PURE__*/React.createElement("button", {
|
|
117
|
+
type: "button",
|
|
118
|
+
"data-odn-artifact": true,
|
|
119
|
+
"data-odn-artifact-clickable": true,
|
|
120
|
+
onClick: onOpen,
|
|
121
|
+
onMouseEnter: handleMouseEnter,
|
|
122
|
+
onMouseMove: handleMouseMove,
|
|
123
|
+
onMouseLeave: handleMouseLeave,
|
|
124
|
+
style: spotlightStyle,
|
|
125
|
+
"data-odn-artifact-status": status
|
|
126
|
+
}, content) : /*#__PURE__*/React.createElement("div", {
|
|
127
|
+
"data-odn-artifact": true,
|
|
128
|
+
onMouseEnter: !isGenerating ? handleMouseEnter : undefined,
|
|
129
|
+
onMouseMove: !isGenerating ? handleMouseMove : undefined,
|
|
130
|
+
onMouseLeave: !isGenerating ? handleMouseLeave : undefined,
|
|
131
|
+
style: spotlightStyle,
|
|
132
|
+
"data-odn-artifact-status": status
|
|
133
|
+
}, content);
|
|
134
|
+
}
|
|
135
|
+
Artifact.displayName = 'Artifact';
|
|
136
|
+
export default Artifact;
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
html {
|
|
2
|
+
--odn-artifact-padding-y: 20px;
|
|
3
|
+
--odn-artifact-padding-x: 24px;
|
|
4
|
+
--odn-artifact-radius: 12px;
|
|
5
|
+
--odn-artifact-content-gap: 24px;
|
|
6
|
+
--odn-artifact-copy-width: 280px;
|
|
7
|
+
--odn-artifact-copy-height: 120px;
|
|
8
|
+
--odn-artifact-visual-width: 136px;
|
|
9
|
+
--odn-artifact-visual-inner-width: 96px;
|
|
10
|
+
--odn-artifact-visual-height: 120px;
|
|
11
|
+
--odn-artifact-shimmer-duration: 1.8s;
|
|
12
|
+
--odn-artifact-shimmer-angle: 110deg;
|
|
13
|
+
--odn-artifact-shimmer-band: 16%;
|
|
14
|
+
--odn-artifact-shimmer-base-color: rgba(51, 55, 61, 0.42);
|
|
15
|
+
--odn-artifact-shimmer-highlight-color: rgba(13, 13, 13, 0.92);
|
|
16
|
+
--odn-artifact-shimmer-easing: cubic-bezier(0.22, 1, 0.36, 1);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
[data-odn-artifact] {
|
|
20
|
+
position: relative;
|
|
21
|
+
width: min(100%, 416px);
|
|
22
|
+
height: var(--odn-artifact-copy-height);
|
|
23
|
+
display: grid;
|
|
24
|
+
grid-template-columns: var(--odn-artifact-copy-width) var(--odn-artifact-visual-width);
|
|
25
|
+
align-items: stretch;
|
|
26
|
+
gap: 0;
|
|
27
|
+
text-align: left;
|
|
28
|
+
padding: 0;
|
|
29
|
+
border: 1px solid transparent;
|
|
30
|
+
border-radius: var(--odn-artifact-radius);
|
|
31
|
+
background: radial-gradient(91.56% 103.35% at 86.39% 100%, #deeaff 0%, #ecf4ff 100%);
|
|
32
|
+
background: radial-gradient(91.56% 103.35% at 86.39% 100%, color(display-p3 0.8789 0.9166 0.9924) 0%, color(display-p3 0.9319 0.9547 0.9956) 100%);
|
|
33
|
+
color: var(--odn-color-black-11);
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
button[data-odn-artifact] {
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
font: inherit;
|
|
41
|
+
height: 120px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
[data-odn-artifact][data-odn-artifact-clickable]:hover {
|
|
45
|
+
border-color: var(--odn-color-blue-2);
|
|
46
|
+
box-shadow: 0 4px 16px color-mix(in srgb, var(--odn-color-blue-2) 18%, transparent);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
[data-odn-artifact-copy] {
|
|
50
|
+
position: relative;
|
|
51
|
+
z-index: 1;
|
|
52
|
+
width: var(--odn-artifact-copy-width);
|
|
53
|
+
height: var(--odn-artifact-copy-height);
|
|
54
|
+
padding: var(--odn-artifact-padding-y) var(--odn-artifact-padding-x);
|
|
55
|
+
box-sizing: border-box;
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
justify-content: flex-start;
|
|
59
|
+
min-width: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
[data-odn-artifact-title] {
|
|
63
|
+
margin: 0;
|
|
64
|
+
font-size: var(--odn-font-size-headline-6);
|
|
65
|
+
line-height: var(--odn-font-leading-headline-6);
|
|
66
|
+
font-weight: 500;
|
|
67
|
+
color: var(--odn-color-black-12);
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
text-overflow: ellipsis;
|
|
70
|
+
white-space: nowrap;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
[data-odn-artifact-stat-range] {
|
|
74
|
+
margin: 0;
|
|
75
|
+
margin-top: 0;
|
|
76
|
+
font-size: var(--odn-font-size-text-sm);
|
|
77
|
+
line-height: var(--odn-font-leading-text-sm);
|
|
78
|
+
color: var(--odn-color-black-12);
|
|
79
|
+
white-space: nowrap;
|
|
80
|
+
overflow: hidden;
|
|
81
|
+
text-overflow: ellipsis;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
[data-odn-artifact-created-at] {
|
|
85
|
+
margin: 0;
|
|
86
|
+
margin-top: 14px;
|
|
87
|
+
font-size: var(--odn-font-size-text-mn);
|
|
88
|
+
line-height: var(--odn-font-leading-text-mn);
|
|
89
|
+
color: var(--odn-color-black-8);
|
|
90
|
+
white-space: nowrap;
|
|
91
|
+
overflow: hidden;
|
|
92
|
+
text-overflow: ellipsis;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
[data-odn-artifact-visual-wrap] {
|
|
96
|
+
position: relative;
|
|
97
|
+
z-index: 1;
|
|
98
|
+
width: var(--odn-artifact-visual-width);
|
|
99
|
+
height: var(--odn-artifact-visual-height);
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: stretch;
|
|
102
|
+
justify-content: center;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-odn-artifact-visual] {
|
|
106
|
+
width: var(--odn-artifact-visual-inner-width);
|
|
107
|
+
min-width: var(--odn-artifact-visual-inner-width);
|
|
108
|
+
height: var(--odn-artifact-visual-height);
|
|
109
|
+
margin-top: 20px;
|
|
110
|
+
margin-right: 0;
|
|
111
|
+
display: flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
justify-content: center;
|
|
114
|
+
border-radius: 8px;
|
|
115
|
+
border: 0;
|
|
116
|
+
background: #fff;
|
|
117
|
+
overflow: hidden;
|
|
118
|
+
transition: transform 0.2s ease;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
[data-odn-artifact][data-odn-artifact-clickable]:hover [data-odn-artifact-visual] {
|
|
122
|
+
transform: rotate(5deg) scale(1.05);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
[data-odn-artifact-spotlight] {
|
|
126
|
+
position: absolute;
|
|
127
|
+
inset: 0;
|
|
128
|
+
z-index: 0;
|
|
129
|
+
pointer-events: none;
|
|
130
|
+
opacity: var(--odn-artifact-spot-opacity, 0);
|
|
131
|
+
transition: opacity 0.2s ease;
|
|
132
|
+
background: radial-gradient(280px circle at var(--odn-artifact-spot-x, 50%) var(--odn-artifact-spot-y, 50%), color-mix(in srgb, var(--odn-color-blue-2) 42%, transparent) 0%, transparent 62%);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
[data-odn-artifact-visual-image] {
|
|
136
|
+
width: 100%;
|
|
137
|
+
height: 100%;
|
|
138
|
+
object-fit: cover;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
[data-odn-artifact-visual-placeholder] {
|
|
142
|
+
display: inline-flex;
|
|
143
|
+
flex-direction: column;
|
|
144
|
+
align-items: center;
|
|
145
|
+
gap: 4px;
|
|
146
|
+
font-size: var(--odn-font-size-text-sm);
|
|
147
|
+
line-height: var(--odn-font-leading-text-sm);
|
|
148
|
+
color: var(--odn-color-black-8);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
[data-odn-artifact][data-odn-artifact-status=Generating] p,
|
|
152
|
+
[data-odn-artifact][data-odn-artifact-status=Generating] [data-odn-artifact-visual-placeholder],
|
|
153
|
+
[data-odn-artifact][data-odn-artifact-status=Generating] [data-odn-artifact-visual-placeholder] span {
|
|
154
|
+
color: transparent !important;
|
|
155
|
+
background-image: linear-gradient(var(--odn-artifact-shimmer-angle), var(--odn-artifact-shimmer-base-color) calc(50% - var(--odn-artifact-shimmer-band)), var(--odn-artifact-shimmer-highlight-color) 50%, var(--odn-artifact-shimmer-base-color) calc(50% + var(--odn-artifact-shimmer-band)));
|
|
156
|
+
background-size: 260% 100%;
|
|
157
|
+
background-position: 120% 50%;
|
|
158
|
+
/* stylelint-disable-next-line property-no-vendor-prefix */
|
|
159
|
+
-webkit-background-clip: text;
|
|
160
|
+
background-clip: text;
|
|
161
|
+
/* stylelint-disable-next-line property-no-vendor-prefix */
|
|
162
|
+
-webkit-text-fill-color: transparent;
|
|
163
|
+
animation: odn-artifact-text-shimmer var(--odn-artifact-shimmer-duration) var(--odn-artifact-shimmer-easing) infinite alternate;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
@keyframes odn-artifact-text-shimmer {
|
|
167
|
+
0% {
|
|
168
|
+
background-position: 120% 50%;
|
|
169
|
+
}
|
|
170
|
+
100% {
|
|
171
|
+
background-position: -20% 50%;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
@media (prefers-reduced-motion: reduce) {
|
|
175
|
+
[data-odn-artifact][data-odn-artifact-status=Generating] p,
|
|
176
|
+
[data-odn-artifact][data-odn-artifact-status=Generating] [data-odn-artifact-visual-placeholder],
|
|
177
|
+
[data-odn-artifact][data-odn-artifact-status=Generating] [data-odn-artifact-visual-placeholder] span {
|
|
178
|
+
animation: none;
|
|
179
|
+
background-position: 50% 50%;
|
|
180
|
+
}
|
|
181
|
+
}
|
package/dist/composer/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { Attachment, ComposerSegment, SkillItem, SendMeta } from '../_genui-types';
|
|
3
|
+
import type { ChipData } from '../_genui-types';
|
|
3
4
|
import type { ComposerParamPanelContext } from './param-panel';
|
|
4
5
|
import './style';
|
|
5
6
|
export type { ComposerParamPanelContext } from './param-panel';
|
|
@@ -18,8 +19,15 @@ export interface ComposerRef {
|
|
|
18
19
|
* 用于"外部面板(Welcome Card / Suggestions)点 skill 后塞进 composer"等场景;
|
|
19
20
|
* 内部 toolbar 按钮 / `/` trigger 已自带插入路径,无需调用此方法。
|
|
20
21
|
* 调用后会自动 focus editor,光标停在 chip 之后。
|
|
22
|
+
*
|
|
23
|
+
* 返回插入的 chip 实例 id,可用于后续 `updateChipData` 更新状态。
|
|
24
|
+
*/
|
|
25
|
+
insertSkill: (skill: SkillItem) => string;
|
|
26
|
+
/**
|
|
27
|
+
* 更新编辑器内指定 chip 的数据(partial merge)。
|
|
28
|
+
* 典型用法:`updateChipData(chipId, { state: 'pending' })` 将 chip 置为待补充态。
|
|
21
29
|
*/
|
|
22
|
-
|
|
30
|
+
updateChipData: (id: string, patch: Partial<ChipData>) => void;
|
|
23
31
|
/**
|
|
24
32
|
* 底层输入区根元素。
|
|
25
33
|
* 注:composer 内部已从 textarea 迁移到 contenteditable 实现,类型由
|
|
@@ -42,8 +50,13 @@ export interface ComposerProps {
|
|
|
42
50
|
* `meta`:附件 / 联网搜索等非正文数据;为空时不传。
|
|
43
51
|
*
|
|
44
52
|
* 兼容旧链路(需要单串文本):业务可调 `segmentsToReadableText(segments)`。
|
|
53
|
+
*
|
|
54
|
+
* **返回值语义**:
|
|
55
|
+
* - 返回 `false` 或 `Promise<false>` → 发送失败,**不清空**输入框与附件。
|
|
56
|
+
* - 返回 `void` / `true` 或 `Promise<void | true>` → 发送成功,正常清空。
|
|
57
|
+
* - 不返回(旧用法)→ 视为成功,保持向后兼容。
|
|
45
58
|
*/
|
|
46
|
-
onSend: (segments: ComposerSegment[], meta?: SendMeta) => void
|
|
59
|
+
onSend: (segments: ComposerSegment[], meta?: SendMeta) => void | boolean | Promise<void | boolean>;
|
|
47
60
|
onStop?: () => void;
|
|
48
61
|
isGenerating?: boolean;
|
|
49
62
|
/**
|
package/dist/composer/index.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
1
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
3
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
3
4
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
5
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
5
6
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
6
7
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function (_e) { function e(_x) { return _e.apply(this, arguments); } e.toString = function () { return _e.toString(); }; return e; }(function (e) { throw e; }), f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function (_e2) { function e(_x2) { return _e2.apply(this, arguments); } e.toString = function () { return _e2.toString(); }; return e; }(function (e) { didErr = true; err = e; }), f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
8
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
9
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
10
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
7
11
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
12
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
13
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
@@ -31,9 +35,8 @@ function createInvocationChipData(skill) {
|
|
|
31
35
|
icon: skill.icon,
|
|
32
36
|
kind: 'invocation',
|
|
33
37
|
state: skill.initialState,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
38
|
+
refId: skill.id,
|
|
39
|
+
payload: {}
|
|
37
40
|
};
|
|
38
41
|
}
|
|
39
42
|
var TOOL_BTN_ACTIVE = 'color-mix(in srgb, var(--odn-color-brand-6) 10%, transparent)';
|
|
@@ -189,10 +192,15 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
|
|
|
189
192
|
(_editorRef$current6 = editorRef.current) === null || _editorRef$current6 === void 0 || _editorRef$current6.insertChip(data);
|
|
190
193
|
(_editorRef$current7 = editorRef.current) === null || _editorRef$current7 === void 0 || _editorRef$current7.focus();
|
|
191
194
|
if (skill.initialState === 'pending') openParamPanel(data.id);
|
|
195
|
+
return data.id;
|
|
196
|
+
},
|
|
197
|
+
updateChipData: function updateChipData(id, patch) {
|
|
198
|
+
var _editorRef$current8;
|
|
199
|
+
return (_editorRef$current8 = editorRef.current) === null || _editorRef$current8 === void 0 ? void 0 : _editorRef$current8.updateChipData(id, patch);
|
|
192
200
|
},
|
|
193
201
|
get nativeElement() {
|
|
194
|
-
var _editorRef$current$na, _editorRef$
|
|
195
|
-
return (_editorRef$current$na = (_editorRef$
|
|
202
|
+
var _editorRef$current$na, _editorRef$current9;
|
|
203
|
+
return (_editorRef$current$na = (_editorRef$current9 = editorRef.current) === null || _editorRef$current9 === void 0 ? void 0 : _editorRef$current9.nativeElement) !== null && _editorRef$current$na !== void 0 ? _editorRef$current$na : null;
|
|
196
204
|
}
|
|
197
205
|
};
|
|
198
206
|
});
|
|
@@ -260,24 +268,52 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
|
|
|
260
268
|
* - meta:attachments / webSearch 等非正文数据;都为空时不传
|
|
261
269
|
*
|
|
262
270
|
* 需要单串文本的业务方在 onSend 内自行调 segmentsToReadableText。
|
|
263
|
-
*
|
|
264
|
-
var handleSend = useCallback(function () {
|
|
265
|
-
var _editorRef$current$ge2, _editorRef$
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
271
|
+
* onSend 返回 false 或 Promise<false> 时视为发送失败,不清空;否则正常清空。 */
|
|
272
|
+
var handleSend = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
273
|
+
var _editorRef$current$ge2, _editorRef$current10, _editorRef$current11;
|
|
274
|
+
var chips, segments, hasAttachments, meta, hasMeta, result;
|
|
275
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
276
|
+
while (1) switch (_context.prev = _context.next) {
|
|
277
|
+
case 0:
|
|
278
|
+
if (!disabled) {
|
|
279
|
+
_context.next = 2;
|
|
280
|
+
break;
|
|
281
|
+
}
|
|
282
|
+
return _context.abrupt("return");
|
|
283
|
+
case 2:
|
|
284
|
+
chips = (_editorRef$current$ge2 = (_editorRef$current10 = editorRef.current) === null || _editorRef$current10 === void 0 ? void 0 : _editorRef$current10.getChips()) !== null && _editorRef$current$ge2 !== void 0 ? _editorRef$current$ge2 : [];
|
|
285
|
+
segments = rawValueToSegments(text, chips);
|
|
286
|
+
hasAttachments = attachments.length > 0;
|
|
287
|
+
if (!(!segmentsHasContent(segments) && !hasAttachments)) {
|
|
288
|
+
_context.next = 7;
|
|
289
|
+
break;
|
|
290
|
+
}
|
|
291
|
+
return _context.abrupt("return");
|
|
292
|
+
case 7:
|
|
293
|
+
meta = {};
|
|
294
|
+
if (hasAttachments) meta.attachments = attachments;
|
|
295
|
+
if (webSearch) meta.webSearch = true;
|
|
296
|
+
hasMeta = hasAttachments || webSearch;
|
|
297
|
+
_context.next = 13;
|
|
298
|
+
return onSend(segments, hasMeta ? meta : undefined);
|
|
299
|
+
case 13:
|
|
300
|
+
result = _context.sent;
|
|
301
|
+
if (!(result === false)) {
|
|
302
|
+
_context.next = 16;
|
|
303
|
+
break;
|
|
304
|
+
}
|
|
305
|
+
return _context.abrupt("return");
|
|
306
|
+
case 16:
|
|
307
|
+
closeParamPanel();
|
|
308
|
+
(_editorRef$current11 = editorRef.current) === null || _editorRef$current11 === void 0 || _editorRef$current11.clear();
|
|
309
|
+
setAttachments([]);
|
|
310
|
+
setWebSearch(false);
|
|
311
|
+
case 20:
|
|
312
|
+
case "end":
|
|
313
|
+
return _context.stop();
|
|
314
|
+
}
|
|
315
|
+
}, _callee);
|
|
316
|
+
})), [text, attachments, webSearch, onSend, disabled, closeParamPanel]);
|
|
281
317
|
|
|
282
318
|
/* ---- File upload ----
|
|
283
319
|
* 三入口(按钮 / 拖入 / 粘贴)共用此函数。先做内置校验(数量、单文件体积、重名),
|
|
@@ -399,14 +435,14 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
|
|
|
399
435
|
var handleSelectSkill = useCallback(function (skill, source) {
|
|
400
436
|
var data = createInvocationChipData(skill);
|
|
401
437
|
if (source === 'trigger') {
|
|
402
|
-
var _editorRef$
|
|
403
|
-
(_editorRef$
|
|
438
|
+
var _editorRef$current12;
|
|
439
|
+
(_editorRef$current12 = editorRef.current) === null || _editorRef$current12 === void 0 || _editorRef$current12.replaceTriggerWithChip(data);
|
|
404
440
|
setTriggerInfo(null);
|
|
405
441
|
} else {
|
|
406
|
-
var _editorRef$
|
|
407
|
-
(_editorRef$
|
|
442
|
+
var _editorRef$current13, _editorRef$current14;
|
|
443
|
+
(_editorRef$current13 = editorRef.current) === null || _editorRef$current13 === void 0 || _editorRef$current13.insertChip(data);
|
|
408
444
|
setToolMenuOpen(false);
|
|
409
|
-
(_editorRef$
|
|
445
|
+
(_editorRef$current14 = editorRef.current) === null || _editorRef$current14 === void 0 || _editorRef$current14.focus();
|
|
410
446
|
}
|
|
411
447
|
if (skill.initialState === 'pending') openParamPanel(data.id);
|
|
412
448
|
}, [openParamPanel]);
|
|
@@ -457,9 +493,9 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
|
|
|
457
493
|
return true;
|
|
458
494
|
}
|
|
459
495
|
if (e.key === 'Escape') {
|
|
460
|
-
var _editorRef$
|
|
496
|
+
var _editorRef$current15;
|
|
461
497
|
e.preventDefault();
|
|
462
|
-
(_editorRef$
|
|
498
|
+
(_editorRef$current15 = editorRef.current) === null || _editorRef$current15 === void 0 || _editorRef$current15.cancelTrigger();
|
|
463
499
|
setTriggerInfo(null);
|
|
464
500
|
return true;
|
|
465
501
|
}
|
|
@@ -698,9 +734,9 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
|
|
|
698
734
|
/* trigger 浮层渲染条件:editor 处于 `/` 触发态 + 业务方传了 skills。
|
|
699
735
|
* `@` 触发本轮不接(mention 数据源待业务接入),onTriggerChange 拿到也不弹。 */
|
|
700
736
|
var triggerMenuVisible = !!(triggerInfo && triggerInfo.trigger === '/' && skills && skills.length > 0);
|
|
701
|
-
var paramPanelNode = function (_editorRef$current$ge3, _editorRef$
|
|
737
|
+
var paramPanelNode = function (_editorRef$current$ge3, _editorRef$current16, _boxRef$current) {
|
|
702
738
|
if (!paramEdit || !renderParamPanel) return null;
|
|
703
|
-
var chips = (_editorRef$current$ge3 = (_editorRef$
|
|
739
|
+
var chips = (_editorRef$current$ge3 = (_editorRef$current16 = editorRef.current) === null || _editorRef$current16 === void 0 ? void 0 : _editorRef$current16.getChips()) !== null && _editorRef$current$ge3 !== void 0 ? _editorRef$current$ge3 : [];
|
|
704
740
|
var chip = chips.find(function (c) {
|
|
705
741
|
return c.id === paramEdit.chipId;
|
|
706
742
|
});
|
|
@@ -710,8 +746,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
|
|
|
710
746
|
chip: chip,
|
|
711
747
|
anchor: paramEdit.anchor,
|
|
712
748
|
onApply: function onApply(patch) {
|
|
713
|
-
var _editorRef$
|
|
714
|
-
(_editorRef$
|
|
749
|
+
var _editorRef$current17;
|
|
750
|
+
(_editorRef$current17 = editorRef.current) === null || _editorRef$current17 === void 0 || _editorRef$current17.updateChipData(chip.id, patch);
|
|
715
751
|
},
|
|
716
752
|
onClose: closeParamPanel
|
|
717
753
|
};
|
|
@@ -775,8 +811,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
|
|
|
775
811
|
visible: triggerMenuVisible,
|
|
776
812
|
onVisibleChange: function onVisibleChange(v) {
|
|
777
813
|
if (!v) {
|
|
778
|
-
var _editorRef$
|
|
779
|
-
(_editorRef$
|
|
814
|
+
var _editorRef$current18;
|
|
815
|
+
(_editorRef$current18 = editorRef.current) === null || _editorRef$current18 === void 0 || _editorRef$current18.cancelTrigger();
|
|
780
816
|
setTriggerInfo(null);
|
|
781
817
|
}
|
|
782
818
|
},
|
|
@@ -2,7 +2,7 @@ import type { ChipData, InvocationData, MentionData } from '../_genui-types';
|
|
|
2
2
|
/**
|
|
3
3
|
* Chip → Invocation/Mention 派发。
|
|
4
4
|
*
|
|
5
|
-
* 库只搬运 UI 字段(id/kind/label/icon/state)与业务字段(payload),
|
|
5
|
+
* 库只搬运 UI 字段(id/refId/kind/label/icon/state)与业务字段(payload),
|
|
6
6
|
* 不对 payload 内容做任何假设。
|
|
7
7
|
*/
|
|
8
8
|
export declare function chipToInvocationData(chip: ChipData): InvocationData;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Chip → Invocation/Mention 派发。
|
|
3
3
|
*
|
|
4
|
-
* 库只搬运 UI 字段(id/kind/label/icon/state)与业务字段(payload),
|
|
4
|
+
* 库只搬运 UI 字段(id/refId/kind/label/icon/state)与业务字段(payload),
|
|
5
5
|
* 不对 payload 内容做任何假设。
|
|
6
6
|
*/
|
|
7
7
|
export function chipToInvocationData(chip) {
|
|
8
8
|
return {
|
|
9
9
|
id: chip.id,
|
|
10
|
+
refId: chip.refId,
|
|
10
11
|
kind: chip.kind === 'mention' || !chip.kind ? 'skill' : chip.kind,
|
|
11
12
|
label: chip.label,
|
|
12
13
|
icon: chip.icon,
|
|
@@ -18,6 +19,7 @@ export function chipToMentionData(chip) {
|
|
|
18
19
|
var _chip$kind;
|
|
19
20
|
return {
|
|
20
21
|
id: chip.id,
|
|
22
|
+
refId: chip.refId,
|
|
21
23
|
kind: (_chip$kind = chip.kind) !== null && _chip$kind !== void 0 ? _chip$kind : 'mention',
|
|
22
24
|
label: chip.label,
|
|
23
25
|
icon: chip.icon,
|
package/dist/index.d.ts
CHANGED
|
@@ -56,6 +56,7 @@ export { default as VirtualList, type VirtualListProps } from './virtual-list';
|
|
|
56
56
|
export { default as ActionBar, type ActionBarProps } from './action-bar';
|
|
57
57
|
export { default as AgentStep, type AgentStepProps, type AgentStepGroupProps } from './agent-step';
|
|
58
58
|
export { default as AgentThink, type AgentThinkProps } from './agent-think';
|
|
59
|
+
export { default as Artifact, type ArtifactProps } from './artifact';
|
|
59
60
|
export { default as Attachments, type AttachmentsProps } from './attachments';
|
|
60
61
|
export { default as CodeBlock, type CodeBlockProps } from './code-block';
|
|
61
62
|
export { default as Composer, type ComposerProps, type ComposerRef } from './composer';
|
package/dist/index.js
CHANGED
|
@@ -62,6 +62,7 @@ export { default as VirtualList } from "./virtual-list";
|
|
|
62
62
|
export { default as ActionBar } from "./action-bar";
|
|
63
63
|
export { default as AgentStep } from "./agent-step";
|
|
64
64
|
export { default as AgentThink } from "./agent-think";
|
|
65
|
+
export { default as Artifact } from "./artifact";
|
|
65
66
|
export { default as Attachments } from "./attachments";
|
|
66
67
|
export { default as CodeBlock } from "./code-block";
|
|
67
68
|
export { default as Composer } from "./composer";
|