one-design-next 0.0.13 → 0.0.15

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 (48) hide show
  1. package/dist/_genui-types.d.ts +72 -27
  2. package/dist/action-bar/style/index.css +2 -2
  3. package/dist/agent-step/style/index.css +1 -1
  4. package/dist/attachments/style/index.css +5 -5
  5. package/dist/chat-item/style/index.css +2 -2
  6. package/dist/composer/clipboard.d.ts +1 -1
  7. package/dist/composer/editor.d.ts +10 -2
  8. package/dist/composer/editor.js +199 -35
  9. package/dist/composer/hooks/useChipManager.d.ts +8 -3
  10. package/dist/composer/hooks/useChipManager.js +105 -10
  11. package/dist/composer/index.d.ts +17 -2
  12. package/dist/composer/index.js +136 -65
  13. package/dist/composer/inline-ref.d.ts +6 -2
  14. package/dist/composer/inline-ref.js +10 -3
  15. package/dist/composer/param-panel.d.ts +14 -0
  16. package/dist/composer/param-panel.js +1 -0
  17. package/dist/composer/segments.d.ts +29 -0
  18. package/dist/composer/segments.js +83 -0
  19. package/dist/composer/send-meta.d.ts +7 -4
  20. package/dist/composer/send-meta.js +12 -52
  21. package/dist/composer/style/index.css +27 -8
  22. package/dist/composer/utils.d.ts +35 -1
  23. package/dist/composer/utils.js +281 -36
  24. package/dist/fab/style/index.css +1 -1
  25. package/dist/index.d.ts +4 -2
  26. package/dist/index.js +4 -2
  27. package/dist/invocation/index.d.ts +7 -2
  28. package/dist/invocation/index.js +14 -8
  29. package/dist/invocation/param-popover.d.ts +21 -0
  30. package/dist/invocation/param-popover.js +113 -0
  31. package/dist/invocation/style/index.css +33 -9
  32. package/dist/mention/index.d.ts +1 -6
  33. package/dist/mention/index.js +11 -8
  34. package/dist/mention/style/index.css +30 -9
  35. package/dist/preview-panel/index.js +11 -1
  36. package/dist/preview-panel/style/index.css +11 -0
  37. package/dist/skill-slot/index.js +5 -5
  38. package/dist/skill-slot/style/index.css +51 -27
  39. package/dist/suggestions/index.js +1 -5
  40. package/dist/suggestions/style/index.css +6 -7
  41. package/dist/user-bubble/index.js +9 -4
  42. package/dist/user-bubble/render-segments.d.ts +9 -0
  43. package/dist/user-bubble/render-segments.js +42 -0
  44. package/dist/user-bubble/style/index.css +9 -0
  45. package/dist/welcome/style/index.css +1 -1
  46. package/package.json +4 -4
  47. package/dist/composer/chip.d.ts +0 -36
  48. package/dist/composer/chip.js +0 -49
@@ -54,24 +54,58 @@ export interface PreviewTab {
54
54
  content: string;
55
55
  type: string;
56
56
  }
57
- /** Composer 正文内 `/` 触发的内联引用(Invocation 组件数据契约)。 */
57
+ /**
58
+ * 内联引用三态:
59
+ * - complete:默认稳态(无参数 / 参数已填)
60
+ * - pending:邀请补充参数(业务自定,不强制)
61
+ * - active:参数面板打开(最高优先级,由组件内部根据 `active` prop 控制)
62
+ */
63
+ export type InlineRefState = 'pending' | 'complete';
64
+ /**
65
+ * Composer 正文内 `/` 触发的内联引用(Invocation 组件数据契约)。
66
+ *
67
+ * 库只关心 UI 渲染必需字段;业务字段(refId、参数、上下文等)放 `payload`,
68
+ * 库**不约定其内部结构**,发送时原样透传。
69
+ */
58
70
  export interface InvocationData {
71
+ /** chip 实例唯一 id(库内部 DOM 锚定、segments 去重用) */
59
72
  id: string;
60
- /** 业务类型:skill / command / 自定义 */
73
+ /** 业务子类型('skill' / 'command' / 自定义);当前仅 'skill' 使用,预留扩展 */
61
74
  kind: string;
62
- refId: string;
75
+ /** 显示文字 */
63
76
  label: string;
77
+ /** 图标 name(可选) */
64
78
  icon?: string;
65
- params?: Record<string, unknown>;
79
+ /** 视觉态。`active`(参数面板打开)由组件 prop 控制,不进 data。 */
80
+ state?: InlineRefState;
81
+ /** 业务自定义任意字段:refId / 参数 / 上下文等,库不消费 */
82
+ payload?: Record<string, unknown>;
66
83
  }
67
- /** Composer 正文内 `@` 触发的内联引用(Mention 组件数据契约)。 */
84
+ /** Composer 正文内 `@` 触发的内联引用(Mention 组件数据契约)。结构同 Invocation。 */
68
85
  export interface MentionData {
69
86
  id: string;
70
87
  kind: string;
71
- refId: string;
72
88
  label: string;
73
89
  icon?: string;
74
- params?: Record<string, unknown>;
90
+ state?: InlineRefState;
91
+ payload?: Record<string, unknown>;
92
+ }
93
+ /**
94
+ * Composer 编辑器内 chip 实例数据(DOM host + Portal 渲染用)。
95
+ * 发送时经 `rawValueToSegments` 转为 `ComposerSegment` 的 invocation / mention。
96
+ */
97
+ export interface ChipData {
98
+ /** chip 实例唯一 id(与 value marker 中的 id 对应) */
99
+ id: string;
100
+ label: string;
101
+ icon?: string;
102
+ /**
103
+ * 'invocation' = `/` 或 Skill 按钮;'mention' = `@`(预留)。
104
+ * 其他值归 invocation。
105
+ */
106
+ kind?: 'invocation' | 'mention' | (string & {});
107
+ state?: InlineRefState;
108
+ payload?: Record<string, unknown>;
75
109
  }
76
110
  export interface SkillItem {
77
111
  id: string;
@@ -79,32 +113,38 @@ export interface SkillItem {
79
113
  icon: string;
80
114
  description?: string;
81
115
  /**
82
- * 禁用态。设为 true 时按钮不可点击、不会触发 onSelect,视觉降级。
83
- * 用于"该 Skill 处于灰度未开放 / 当前会话不支持"等场景,
84
- * 既保留入口可见性,又避免误触;与 active 互斥(active 不会同时禁用)。
116
+ * 插入后的默认视觉态。`'pending'` 时若 Composer 提供 `renderParamPanel`,
117
+ * 插入后会自动打开参数面板。
118
+ */
119
+ initialState?: InlineRefState;
120
+ /**
121
+ * 禁用态。true 时按钮不可点击、不会触发 onSelect、视觉降级。
122
+ * 典型场景:技能灰度未开放 / 当前会话不支持。
85
123
  */
86
124
  disabled?: boolean;
87
125
  }
126
+ /**
127
+ * Composer 发送时的有序内容 IR(与编辑器内出现顺序一致)。
128
+ *
129
+ * 这是 `onSend` 的**主出口**:业务按此数组顺序自定义拼后端(可选用
130
+ * `segmentsToReadableText` 工具函数兜底拼成一句话)。
131
+ */
132
+ export type ComposerSegment = {
133
+ type: 'text';
134
+ data: {
135
+ text: string;
136
+ };
137
+ } | {
138
+ type: 'invocation';
139
+ data: InvocationData;
140
+ } | {
141
+ type: 'mention';
142
+ data: MentionData;
143
+ };
144
+ /** `onSend(segments, meta?)` 第二参数:非正文的附加数据。 */
88
145
  export interface SendMeta {
89
146
  attachments?: Attachment[];
90
147
  webSearch?: boolean;
91
- /** `/` 内联引用列表(Invocation),按编辑器内出现顺序。 */
92
- invocations?: InvocationData[];
93
- /** `@` 内联引用列表(Mention),按编辑器内出现顺序。 */
94
- mentions?: MentionData[];
95
- /**
96
- * @deprecated 请改用 `invocations` / `mentions`。本字段仍双写一版,便于旧业务迁移。
97
- * 编辑器内 chip 列表(按出现顺序);`kind: 'skill'` 对应 invocation。
98
- */
99
- chips?: ComposerChipMeta[];
100
- }
101
- /** SendMeta.chips 的元素结构;与 components/composer/chip.tsx ChipData 对齐。 */
102
- export interface ComposerChipMeta {
103
- id: string;
104
- skillId: string;
105
- label: string;
106
- icon: string;
107
- kind?: 'skill' | 'invocation' | 'mention' | (string & {});
108
148
  }
109
149
  export type AgentEvent = {
110
150
  kind: 'thinking';
@@ -140,6 +180,11 @@ export interface ChatMessage {
140
180
  id: string;
141
181
  role: 'user' | 'assistant' | 'system';
142
182
  content: string;
183
+ /**
184
+ * 有序内容 IR(与 Composer `onSend` 的 segments 同构)。
185
+ * UserBubble 优先用此字段渲染正文;`content` 仍可保留给 LLM / 日志(如 readableText)。
186
+ */
187
+ segments?: ComposerSegment[];
143
188
  timestamp: number;
144
189
  isStreaming?: boolean;
145
190
  toolCalls?: ToolCall[];
@@ -43,7 +43,7 @@
43
43
  }
44
44
  [data-odn-action-bar-toolbar-btn] [data-odn-button]:focus-visible {
45
45
  outline: none;
46
- box-shadow: 0 0 0 2px var(--odn-color-cyan-5);
46
+ box-shadow: 0 0 0 2px var(--odn-color-brand-6);
47
47
  }
48
48
 
49
49
  [data-odn-action-bar-toolbar-btn] [data-odn-action-bar-feedback=positive][aria-pressed=true] {
@@ -85,7 +85,7 @@
85
85
  }
86
86
  [data-odn-action-bar-pager-btn]:focus-visible {
87
87
  outline: none;
88
- box-shadow: 0 0 0 2px var(--odn-color-cyan-5);
88
+ box-shadow: 0 0 0 2px var(--odn-color-brand-6);
89
89
  }
90
90
 
91
91
  [data-odn-action-bar-pager-text] {
@@ -33,7 +33,7 @@
33
33
  }
34
34
  [data-odn-agent-step-group-trigger]:focus-visible, [data-odn-agent-step-trigger]:focus-visible {
35
35
  outline: none;
36
- box-shadow: 0 0 0 2px var(--odn-color-cyan-5);
36
+ box-shadow: 0 0 0 2px var(--odn-color-brand-6);
37
37
  }
38
38
 
39
39
  [data-odn-agent-step] {
@@ -244,7 +244,7 @@
244
244
  padding: 20px 20px 20px 24px;
245
245
  border-radius: var(--odn-attachments-report-border-radius);
246
246
  border: none;
247
- background: radial-gradient(ellipse 60% 50% at 0% 0%, color-mix(in srgb, var(--odn-color-cyan-5) 4%, transparent) 0%, transparent 60%), var(--odn-color-bg-elevated);
247
+ background: radial-gradient(ellipse 60% 50% at 0% 0%, color-mix(in srgb, var(--odn-color-brand-6) 4%, transparent) 0%, transparent 60%), var(--odn-color-bg-elevated);
248
248
  box-sizing: border-box;
249
249
  font: inherit;
250
250
  color: inherit;
@@ -285,8 +285,8 @@
285
285
  width: var(--odn-attachments-report-icon-size);
286
286
  height: var(--odn-attachments-report-icon-size);
287
287
  border-radius: 10px;
288
- background: var(--odn-color-cyan-1);
289
- color: var(--odn-color-cyan-5);
288
+ background: var(--odn-color-brand-1);
289
+ color: var(--odn-color-brand-6);
290
290
  flex-shrink: 0;
291
291
  }
292
292
 
@@ -294,7 +294,7 @@
294
294
  position: absolute;
295
295
  top: 8px;
296
296
  right: 8px;
297
- color: var(--odn-color-cyan-5);
297
+ color: var(--odn-color-brand-6);
298
298
  }
299
299
 
300
300
  [data-odn-attachments-report-body] {
@@ -342,7 +342,7 @@
342
342
  [data-odn-attachments-report-thumb-placeholder] {
343
343
  position: absolute;
344
344
  inset: 0;
345
- background: linear-gradient(180deg, var(--odn-color-bg-elevated) 0%, var(--odn-color-cyan-1) 100%);
345
+ background: linear-gradient(180deg, var(--odn-color-bg-elevated) 0%, var(--odn-color-brand-1) 100%);
346
346
  }
347
347
  [data-odn-attachments-report-thumb-placeholder]::before, [data-odn-attachments-report-thumb-placeholder]::after {
348
348
  content: "";
@@ -56,7 +56,7 @@
56
56
  box-shadow: none;
57
57
  }
58
58
  [data-odn-chat-item-rename-input]::selection {
59
- background: var(--odn-color-cyan-3, rgba(0, 160, 200, 0.25));
59
+ background: var(--odn-color-brand-3, rgba(0, 160, 200, 0.25));
60
60
  }
61
61
 
62
62
  [data-odn-chat-item-btn] {
@@ -125,7 +125,7 @@
125
125
  width: 6px;
126
126
  height: 6px;
127
127
  border-radius: 50%;
128
- background: var(--odn-color-cyan-5);
128
+ background: var(--odn-color-brand-6);
129
129
  flex-shrink: 0;
130
130
  }
131
131
 
@@ -1,4 +1,4 @@
1
- import type { ChipData } from './chip';
1
+ import type { ChipData } from '../_genui-types';
2
2
  import type { ManagedChip } from './hooks/useChipManager';
3
3
  export declare const COMPOSER_CLIPBOARD_MIME = "application/x-odn-composer-chips";
4
4
  export interface ComposerClipboardPayload {
@@ -13,11 +13,11 @@
13
13
  *
14
14
  * chip 模型(hybrid):
15
15
  * - DOM 由 contenteditable 自治:每个 chip 是 contentEditable=false 的 span(host),带 data-mention-id
16
- * - 视觉由 React Portal 注入到 host 内:chip.tsx 负责
16
+ * - 视觉由 React Portal 注入到 host 内:ComposerInlineRef 负责
17
17
  * - chip 状态(id ↔ host)由 useChipManager 维护
18
18
  */
19
19
  /// <reference types="react" />
20
- import type { ChipData } from './chip';
20
+ import type { ChipData } from '../_genui-types';
21
21
  /** Composer editor 触发态对外信号——告诉父组件该弹浮层选 skill 了。 */
22
22
  export interface ComposerEditorTriggerInfo {
23
23
  /** 触发字符(@ 或 /) */
@@ -88,6 +88,10 @@ export interface ComposerEditorProps {
88
88
  onPasteFiles?: (files: File[]) => void;
89
89
  /** 复制 / 剪切时回调(选区含 chip 时触发)。 */
90
90
  onCopyChips?: (chips: ChipData[]) => void;
91
+ /** 当前打开参数面板的 chip id(驱动 Invocation active 态)。 */
92
+ paramEditChipId?: string | null;
93
+ /** 内联引用(/ skill)被点击;由 Composer 决定是否打开参数面板。 */
94
+ onInlineRefClick?: (chipId: string, anchor: HTMLElement) => void;
91
95
  /**
92
96
  * 禁用:contenteditable 关闭,editor 不接受输入 / 聚焦 / 粘贴。
93
97
  * 已有的文本与 chip 仍渲染(仅冻结,不清空),便于"等接通后继续编辑"。
@@ -121,6 +125,10 @@ export interface ComposerEditorRef {
121
125
  * 父组件 onSend 时用,避免自行 parse value marker。
122
126
  */
123
127
  getChips: () => ChipData[];
128
+ /** 更新 chip 数据(参数面板保存)。 */
129
+ updateChipData: (id: string, patch: Partial<ChipData>) => void;
130
+ /** 取 chip host 元素(参数面板 anchor)。 */
131
+ getChipHost: (id: string) => HTMLSpanElement | null;
124
132
  /** 底层 contenteditable 元素 */
125
133
  nativeElement: HTMLDivElement | null;
126
134
  }