one-design-next 0.0.76 → 0.0.78

package/dist/composer/index.d.ts

@@ -66,8 +66,10 @@ export interface ComposerProps {
     value?: string;
     /** 输入框非受控默认值 */
     defaultValue?: string;
-    /** 输入框值变化回调 */
-    onChange?: (value: string) => void;
+    /** 与 defaultValue 配套，首次挂载时把 marker 还原成 chip。 */
+    defaultChips?: ChipData[];
+    /** 输入框值变化回调。第二参是当前 chip 快照，旧调用方忽略即可。 */
+    onChange?: (value: string, chips?: ChipData[]) => void;
     /**
      * 发送回调。
      *
@@ -176,6 +178,8 @@ export interface ComposerProps {
      * - 不传则非受控，组件内部自管，沿用 `URL.createObjectURL(f)` 生成 blob url 的旧行为（向后兼容）。
      */
     attachments?: Attachment[];
+    /** 非受控附件初始值，随组件挂载（如 `key` 切换会话）生效。 */
+    defaultAttachments?: Attachment[];
     /**
      * 附件数组变化时触发（新增、删除、外部回写都会调）。
      * 受控模式下与 `attachments` 配合形成 React 标准受控形态。
@@ -235,7 +239,8 @@ export interface ComposerProps {
      */
     fileRejectMessage?: (ext: string) => string;
     /**
-     * 参数面板内容渲染。提供后 invocation chip 可点击打开面板；
+     * 参数面板内容渲染。提供后，**待补充 / 已填参数** 的 invocation chip
+     * 可点击打开面板；无参数 skill 无 hover、不可点。
      * `SkillItem.initialState='pending'` 插入后会自动打开。
      */
     renderParamPanel?: (ctx: ComposerParamPanelContext) => React.ReactNode;

package/dist/composer/index.js

@@ -6,6 +6,7 @@ import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { SKILL_CATEGORY_ICON } from "../_genui-inline-ref";
 import useControlledState from "../_util/useControlledState";
 import Attachments from "../attachments";
 import HoverFill from "../hover-fill";
@@ -16,7 +17,7 @@ import Popover from "../popover";
 import SkillSlot from "../skill-slot";
 import Tooltip from "../tooltip";
 import { ComposerEditor } from "./editor";
-import { isMentionChip } from "./inline-ref";
+import { chipHasEditableParams, isMentionChip } from "./inline-ref";
 import { rawValueToSegments, segmentsHasContent } from "./segments";
 import "./style";
 function createInvocationChipData(skill) {
@@ -82,7 +83,7 @@ var DEFAULT_TOOL_CONFIGS = {
     tooltip: '联网搜索'
   },
   skill: {
-    icon: 'wand-sparkles',
+    icon: SKILL_CATEGORY_ICON,
     label: '技能',
     tooltip: '选择技能'
   }
@@ -99,6 +100,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
   var valueProp = _ref.value,
     _ref$defaultValue = _ref.defaultValue,
     defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    defaultChips = _ref.defaultChips,
     onChangeProp = _ref.onChange,
     onSend = _ref.onSend,
     onStop = _ref.onStop,
@@ -124,6 +126,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     submitType = _ref$submitType === void 0 ? 'enter' : _ref$submitType,
     onEnter = _ref.onEnter,
     attachmentsProp = _ref.attachments,
+    defaultAttachments = _ref.defaultAttachments,
     onAttachmentsChange = _ref.onAttachmentsChange,
     onAttachFiles = _ref.onAttachFiles,
     onAttachmentRemove = _ref.onAttachmentRemove,
@@ -153,7 +156,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     text = _useControlledState2[0],
     setText = _useControlledState2[1];
-  var _useControlledState3 = useControlledState([], attachmentsProp),
+  var _useControlledState3 = useControlledState(defaultAttachments !== null && defaultAttachments !== void 0 ? defaultAttachments : [], attachmentsProp),
     _useControlledState4 = _slicedToArray(_useControlledState3, 2),
     attachments = _useControlledState4[0],
     setAttachments = _useControlledState4[1];
@@ -248,14 +251,24 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     var chip = chips.find(function (c) {
       return c.id === chipId;
     });
-    if (!chip || isMentionChip(chip)) return;
+    if (!chip || !chipHasEditableParams(chip)) return;
+    var body = renderParamPanel({
+      chip: chip,
+      anchor: anchor,
+      onApply: function onApply(patch) {
+        var _editorRef$current4;
+        (_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 || _editorRef$current4.updateChipData(chip.id, patch);
+      },
+      onClose: closeParamPanel
+    });
+    if (body === null || body === undefined) return;
     setParamEdit(function (prev) {
       return (prev === null || prev === void 0 ? void 0 : prev.chipId) === chipId ? null : {
         chipId: chipId,
         anchor: anchor
       };
     });
-  }, [renderParamPanel]);
+  }, [closeParamPanel, renderParamPanel]);
 
   /* ---- ref 实例方法 ----
    * editor.clear() 内部已经会调 onChange('')，会经由 ComposerEditor 的
@@ -264,38 +277,39 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
   useImperativeHandle(ref, function () {
     return {
       focus: function focus(options) {
-        var _editorRef$current4;
-        return (_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 ? void 0 : _editorRef$current4.focus(options);
+        var _editorRef$current5;
+        return (_editorRef$current5 = editorRef.current) === null || _editorRef$current5 === void 0 ? void 0 : _editorRef$current5.focus(options);
       },
       blur: function blur() {
-        var _editorRef$current5;
-        return (_editorRef$current5 = editorRef.current) === null || _editorRef$current5 === void 0 ? void 0 : _editorRef$current5.blur();
+        var _editorRef$current6;
+        return (_editorRef$current6 = editorRef.current) === null || _editorRef$current6 === void 0 ? void 0 : _editorRef$current6.blur();
       },
       clear: function clear() {
-        var _editorRef$current6;
-        return (_editorRef$current6 = editorRef.current) === null || _editorRef$current6 === void 0 ? void 0 : _editorRef$current6.clear();
+        var _editorRef$current7;
+        return (_editorRef$current7 = editorRef.current) === null || _editorRef$current7 === void 0 ? void 0 : _editorRef$current7.clear();
       },
       insertSkill: function insertSkill(skill) {
-        var _editorRef$current7, _editorRef$current8;
+        var _editorRef$current8, _editorRef$current9;
         var data = createInvocationChipData(skill);
-        (_editorRef$current7 = editorRef.current) === null || _editorRef$current7 === void 0 || _editorRef$current7.insertChip(data);
-        (_editorRef$current8 = editorRef.current) === null || _editorRef$current8 === void 0 || _editorRef$current8.focus();
+        (_editorRef$current8 = editorRef.current) === null || _editorRef$current8 === void 0 || _editorRef$current8.insertChip(data);
+        (_editorRef$current9 = editorRef.current) === null || _editorRef$current9 === void 0 || _editorRef$current9.focus();
         if (skill.initialState === 'pending') openParamPanel(data.id);
         return data.id;
       },
       updateChipData: function updateChipData(id, patch) {
-        var _editorRef$current9;
-        return (_editorRef$current9 = editorRef.current) === null || _editorRef$current9 === void 0 ? void 0 : _editorRef$current9.updateChipData(id, patch);
+        var _editorRef$current10;
+        return (_editorRef$current10 = editorRef.current) === null || _editorRef$current10 === void 0 ? void 0 : _editorRef$current10.updateChipData(id, patch);
       },
       get nativeElement() {
-        var _editorRef$current$na, _editorRef$current10;
-        return (_editorRef$current$na = (_editorRef$current10 = editorRef.current) === null || _editorRef$current10 === void 0 ? void 0 : _editorRef$current10.nativeElement) !== null && _editorRef$current$na !== void 0 ? _editorRef$current$na : null;
+        var _editorRef$current$na, _editorRef$current11;
+        return (_editorRef$current$na = (_editorRef$current11 = editorRef.current) === null || _editorRef$current11 === void 0 ? void 0 : _editorRef$current11.nativeElement) !== null && _editorRef$current$na !== void 0 ? _editorRef$current$na : null;
       }
     };
   });
   var updateText = useCallback(function (v) {
+    var _editorRef$current$ge2, _editorRef$current12;
     setText(v);
-    onChangeProp === null || onChangeProp === void 0 || onChangeProp(v);
+    onChangeProp === null || onChangeProp === void 0 || onChangeProp(v, (_editorRef$current$ge2 = (_editorRef$current12 = editorRef.current) === null || _editorRef$current12 === void 0 ? void 0 : _editorRef$current12.getChips()) !== null && _editorRef$current$ge2 !== void 0 ? _editorRef$current$ge2 : []);
   }, [setText, onChangeProp]);
 
   /* ---- Attachments controlled writer ----
@@ -385,8 +399,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
    *   `onAttachmentsChange={setAttachments}` 直接回写。
    * - webSearch 无受控接口，直接清。 */
   var handleSend = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var _editorRef$current$ge2, _editorRef$current11;
-    var chips, segments, hasAttachments, meta, hasMeta, result, _editorRef$current12;
+    var _editorRef$current$ge3, _editorRef$current13;
+    var chips, segments, hasAttachments, meta, hasMeta, result, _editorRef$current14;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -405,7 +419,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
           }
           return _context.abrupt("return");
         case 4:
-          chips = (_editorRef$current$ge2 = (_editorRef$current11 = editorRef.current) === null || _editorRef$current11 === void 0 ? void 0 : _editorRef$current11.getChips()) !== null && _editorRef$current$ge2 !== void 0 ? _editorRef$current$ge2 : [];
+          chips = (_editorRef$current$ge3 = (_editorRef$current13 = editorRef.current) === null || _editorRef$current13 === void 0 ? void 0 : _editorRef$current13.getChips()) !== null && _editorRef$current$ge3 !== void 0 ? _editorRef$current$ge3 : [];
           segments = rawValueToSegments(text, chips);
           hasAttachments = attachments.length > 0;
           if (!(!segmentsHasContent(segments) && !hasAttachments)) {
@@ -430,7 +444,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
         case 18:
           closeParamPanel();
           if (valueProp === undefined) {
-            (_editorRef$current12 = editorRef.current) === null || _editorRef$current12 === void 0 || _editorRef$current12.clear();
+            (_editorRef$current14 = editorRef.current) === null || _editorRef$current14 === void 0 || _editorRef$current14.clear();
           }
           if (attachmentsProp === undefined) {
             setAttachments([]);
@@ -540,7 +554,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     updateAttachments([].concat(_toConsumableArray(attachments), _toConsumableArray(accepted)));
   }, [accept, attachments, attachmentsDisabled, disabled, maxFileCount, maxFileSize, maxTotalSize, onAttachFiles, updateAttachments]);
   var handleFileChange = function handleFileChange(e) {
-    var _editorRef$current13;
+    var _editorRef$current15;
     var files = e.target.files;
     if (!files) return;
     addFilesFromList(Array.from(files));
@@ -548,7 +562,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     /* 文件框关闭后焦点回到 editor：
      * 键盘（Tab + Enter）唤起文件框的路径下按钮持有焦点，
      * 不夺回焦点时 Enter 会再次激活按钮而不是发送 */
-    (_editorRef$current13 = editorRef.current) === null || _editorRef$current13 === void 0 || _editorRef$current13.focus();
+    (_editorRef$current15 = editorRef.current) === null || _editorRef$current15 === void 0 || _editorRef$current15.focus();
   };
   var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
@@ -590,14 +604,14 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
   var handleSelectSkill = useCallback(function (skill, source) {
     var data = createInvocationChipData(skill);
     if (source === 'trigger') {
-      var _editorRef$current14;
-      (_editorRef$current14 = editorRef.current) === null || _editorRef$current14 === void 0 || _editorRef$current14.replaceTriggerWithChip(data);
+      var _editorRef$current16;
+      (_editorRef$current16 = editorRef.current) === null || _editorRef$current16 === void 0 || _editorRef$current16.replaceTriggerWithChip(data);
       setTriggerInfo(null);
     } else {
-      var _editorRef$current15, _editorRef$current16;
-      (_editorRef$current15 = editorRef.current) === null || _editorRef$current15 === void 0 || _editorRef$current15.insertChip(data);
+      var _editorRef$current17, _editorRef$current18;
+      (_editorRef$current17 = editorRef.current) === null || _editorRef$current17 === void 0 || _editorRef$current17.insertChip(data);
       setToolMenuOpen(false);
-      (_editorRef$current16 = editorRef.current) === null || _editorRef$current16 === void 0 || _editorRef$current16.focus();
+      (_editorRef$current18 = editorRef.current) === null || _editorRef$current18 === void 0 || _editorRef$current18.focus();
     }
     if (skill.initialState === 'pending') openParamPanel(data.id);
   }, [openParamPanel]);
@@ -681,9 +695,9 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
       return true;
     }
     if (e.key === 'Escape') {
-      var _editorRef$current17;
+      var _editorRef$current19;
       e.preventDefault();
-      (_editorRef$current17 = editorRef.current) === null || _editorRef$current17 === void 0 || _editorRef$current17.cancelTrigger();
+      (_editorRef$current19 = editorRef.current) === null || _editorRef$current19 === void 0 || _editorRef$current19.cancelTrigger();
       setTriggerInfo(null);
       return true;
     }
@@ -1009,9 +1023,9 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     "data-odn-composer-file-input": true,
     onChange: handleFileChange
   });
-  var paramPanelNode = function (_editorRef$current$ge3, _editorRef$current18, _boxRef$current) {
+  var paramPanelNode = function (_editorRef$current$ge4, _editorRef$current20, _boxRef$current) {
     if (!paramEdit || !renderParamPanel) return null;
-    var chips = (_editorRef$current$ge3 = (_editorRef$current18 = editorRef.current) === null || _editorRef$current18 === void 0 ? void 0 : _editorRef$current18.getChips()) !== null && _editorRef$current$ge3 !== void 0 ? _editorRef$current$ge3 : [];
+    var chips = (_editorRef$current$ge4 = (_editorRef$current20 = editorRef.current) === null || _editorRef$current20 === void 0 ? void 0 : _editorRef$current20.getChips()) !== null && _editorRef$current$ge4 !== void 0 ? _editorRef$current$ge4 : [];
     var chip = chips.find(function (c) {
       return c.id === paramEdit.chipId;
     });
@@ -1021,18 +1035,20 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
       chip: chip,
       anchor: paramEdit.anchor,
       onApply: function onApply(patch) {
-        var _editorRef$current19;
-        (_editorRef$current19 = editorRef.current) === null || _editorRef$current19 === void 0 || _editorRef$current19.updateChipData(chip.id, patch);
+        var _editorRef$current21;
+        (_editorRef$current21 = editorRef.current) === null || _editorRef$current21 === void 0 || _editorRef$current21.updateChipData(chip.id, patch);
       },
       onClose: closeParamPanel
     };
+    var body = renderParamPanel(ctx);
+    if (body === null || body === undefined) return null;
     return /*#__PURE__*/React.createElement(InvocationParamPopover, {
       anchor: paramEdit.anchor,
       label: chip.label,
       icon: chip.icon,
       width: boxWidth,
       onClose: closeParamPanel
-    }, renderParamPanel(ctx));
+    }, body);
   }();
   var editorNode = /*#__PURE__*/React.createElement(ComposerEditor, {
     ref: editorRef,
@@ -1042,6 +1058,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     },
     placeholder: placeholder,
     value: text,
+    defaultChips: defaultChips,
     onChange: updateText,
     disabled: disabled,
     paramEditChipId: (_paramEdit$chipId = paramEdit === null || paramEdit === void 0 ? void 0 : paramEdit.chipId) !== null && _paramEdit$chipId !== void 0 ? _paramEdit$chipId : null,
@@ -1086,8 +1103,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     visible: triggerMenuVisible,
     onVisibleChange: function onVisibleChange(v) {
       if (!v) {
-        var _editorRef$current20;
-        (_editorRef$current20 = editorRef.current) === null || _editorRef$current20 === void 0 || _editorRef$current20.cancelTrigger();
+        var _editorRef$current22;
+        (_editorRef$current22 = editorRef.current) === null || _editorRef$current22 === void 0 || _editorRef$current22.cancelTrigger();
         setTriggerInfo(null);
       }
     },

package/dist/composer/inline-ref.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import type { ChipData } from '../_genui-types';
 export declare function isMentionChip(chip: ChipData): boolean;
+/** 仅待补充 / 已填参数的 invocation 可点开面板；无参数 skill 无 hover、不可点。 */
+export declare function chipHasEditableParams(chip: ChipData): boolean;
 export interface ComposerInlineRefProps {
     data: ChipData;
     /** 参数面板打开时高亮 */

package/dist/composer/inline-ref.js

@@ -4,6 +4,17 @@ import { chipToInvocationData, chipToMentionData } from "./send-meta";
 export function isMentionChip(chip) {
   return chip.kind === 'mention';
 }
+
+/** 仅待补充 / 已填参数的 invocation 可点开面板；无参数 skill 无 hover、不可点。 */
+export function chipHasEditableParams(chip) {
+  if (isMentionChip(chip)) return false;
+  if (chip.state === 'pending') return true;
+  var payload = chip.payload;
+  if (!payload) return false;
+  return Object.values(payload).some(function (v) {
+    return v !== null && v !== undefined && v !== '';
+  });
+}
 /** Composer 内联引用视觉：按 kind 派发 Invocation（/）或 Mention（@）。 */
 export function ComposerInlineRef(_ref) {
   var data = _ref.data,

package/dist/composer/send-meta.js

@@ -8,7 +8,7 @@ export function chipToInvocationData(chip) {
   return {
     id: chip.id,
     refId: chip.refId,
-    kind: chip.kind === 'mention' || !chip.kind ? 'skill' : chip.kind,
+    kind: chip.kind === 'mention' || !chip.kind || chip.kind === 'invocation' ? 'skill' : chip.kind,
     label: chip.label,
     icon: chip.icon,
     state: chip.state,

package/dist/composer/style/index.css

@@ -272,7 +272,8 @@
   white-space: nowrap;
 }
 
-/* 内联引用 host：Portal 注入 Invocation / Mention，视觉由组件自带样式承担 */
+/* 内联引用 host：Portal 注入 Invocation / Mention。
+ * 必须 inline（不能 inline-block），让内部文字参与同一行基线。 */
 [data-odn-composer] [data-odn-composer-chip-host] {
   display: inline;
   vertical-align: baseline;
@@ -301,31 +302,25 @@
   display: inline;
 }
 
-/* editor 内跟随正文 inherit，避免与外层 14/24 双写冲突。
- * chip 与正文按同一文本节奏排版：
- * - 移除额外 margin / padding，不再制造视觉“假空白”
- * - 间距由真实输入空格控制（插入 chip 后会自动补一个可删除空格） */
+/* editor 内跟随正文字号 / 行高，蓝字与「请用」同一套行盒。
+ * 与正文间距仍由真实输入空格控制。 */
 [data-odn-composer] [data-odn-composer-editor] [data-odn-invocation],
 [data-odn-composer] [data-odn-composer-editor] [data-odn-mention] {
-  margin-inline: 0;
-  padding-left: 0;
-  padding-right: 0;
-  border-radius: 0;
   font-size: inherit;
   line-height: inherit;
 }
 
-/* 键盘输入模态：鼠标会被隐藏，此时不应沿用旧鼠标位置触发 hover 态。 */
-[data-odn-composer] [data-odn-composer-editor][data-odn-input-modality=keyboard] [data-odn-invocation]:hover:not([data-state=active]),
-[data-odn-composer] [data-odn-composer-editor][data-odn-input-modality=keyboard] [data-odn-mention]:hover:not([data-state=active]) {
-  background: transparent;
+/* 键盘输入模态：鼠标会被隐藏，此时不应沿用旧鼠标位置触发 hover 加深。
+ * 回到常驻浅底，而不是透明（否则视觉锚点会丢）。 */
+[data-odn-composer] [data-odn-composer-editor][data-odn-input-modality=keyboard] [data-odn-invocation][data-hoverable]:hover:not([data-state=active]),
+[data-odn-composer] [data-odn-composer-editor][data-odn-input-modality=keyboard] [data-odn-mention][data-hoverable]:hover:not([data-state=active]) {
+  background: var(--odn-inline-ref-bg);
 }
 
 /* chip 在 contentEditable=false 下无原生 selection 高亮，自绘选中态 */
 [data-odn-composer] [data-odn-composer-chip-host][data-selected] [data-odn-invocation],
 [data-odn-composer] [data-odn-composer-chip-host][data-selected] [data-odn-mention] {
   background: color-mix(in srgb, var(--odn-color-solid-black-12) 12%, transparent);
-  border-radius: 0;
   transition: none;
 }
 

package/dist/index.d.ts

@@ -55,7 +55,7 @@ export { default as ActionBar, type ActionBarProps } from './action-bar';
 export { default as AgentStep, type AgentStepGroupProps, type AgentStepProps, } from './agent-step';
 export { default as AgentThink, type AgentThinkProps } from './agent-think';
 export { APPROVAL_DEFAULT_ACTIONS_HINT, default as Approval, type ApprovalDecision, type ApprovalProps, type ApprovalResolvePayload, type ApprovalSpec, type ApprovalSummaryItem, } from './approval';
-export { ARTIFACT_DEDICATED_FILE_ICON_TYPES, ARTIFACT_FILE_GLOW_COLORS, ARTIFACT_FILE_ICON_TYPES, default as Artifact, ArtifactFileIcon, getArtifactActionFromKind, getArtifactGlowColor, type ArtifactAction, type ArtifactActionKind, type ArtifactFileIconProps, type ArtifactFileIconSize, type ArtifactFileIconType, type ArtifactProps, type ArtifactSize, } from './artifact';
+export { ARTIFACT_DEDICATED_FILE_ICON_TYPES, ARTIFACT_FILE_GLOW_COLORS, ARTIFACT_FILE_ICON_TYPES, default as Artifact, ArtifactFileIcon, getArtifactAction, getArtifactActionFromKind, getArtifactGlowColor, type ArtifactAction, type ArtifactActionKind, type ArtifactFileIconProps, type ArtifactFileIconSize, type ArtifactFileIconType, type ArtifactProps, type ArtifactSize, } from './artifact';
 export { default as Attachments, type AttachmentsProps } from './attachments';
 export { default as ChatItem, formatRelativeTime, type ChatItemProps, } from './chat-item';
 export { default as ChatList, matchChatListFilterTime, matchChatListFilterType, type ChatListFilterTime, type ChatListFilterType, type ChatListItem, type ChatListProps, } from './chat-list';
@@ -68,7 +68,7 @@ export { default as Fab, type FabProps } from './fab';
 export { default as Invocation, InvocationParamPopover, type InvocationParamPopoverProps, type InvocationProps, } from './invocation';
 export { default as Mention, type MentionProps } from './mention';
 export { default as MessageImage, type MessageImageItem, type MessageImageProps, } from './message-image';
-export { default as PreviewPanel, type PreviewPanelActionTooltips, type PreviewPanelProps, } from './preview-panel';
+export { default as PreviewPanel, type PreviewPanelActionTooltips, type PreviewPanelArtifact, type PreviewPanelProps, } from './preview-panel';
 export { default as Provenance, type ProvenanceProps, type ProvenanceType, } from './provenance';
 export { default as SkillSlot, type SkillSlotHandle, type SkillSlotProps, } from './skill-slot';
 export { default as Sources, type SourcesProps } from './sources';
@@ -78,6 +78,6 @@ export { default as Suggestions, type SuggestionsProps } from './suggestions';
 export { default as UserBubble, type UserBubbleProps } from './user-bubble';
 export { default as Welcome, type WelcomeProps } from './welcome';
 export { ComposerSegmentType } from './_genui-types';
-export type { AgentEvent, Attachment, ChatMessage, ComposerInvocationSegment, ComposerMentionSegment, ComposerSegment, ComposerTextSegment, Conversation, InlineRefState, InvocationData, MentionData, MessageSnapshot, PreviewTab, PreviewTarget, SendMeta, SkillGroup, SkillItem, Source, TextData, ToolCall, ToolStatus, } from './_genui-types';
+export type { AgentEvent, Attachment, ChatMessage, ChipData, ComposerInvocationSegment, ComposerMentionSegment, ComposerSegment, ComposerTextSegment, Conversation, InlineRefState, InvocationData, MentionData, MessageSnapshot, PreviewTab, PreviewTarget, SendMeta, SkillGroup, SkillItem, Source, TextData, ToolCall, ToolStatus, } from './_genui-types';
 export type { InterruptBase, InterruptIntent, InterruptStatus, } from './_interrupt-types';
 export { isInvocationSegment, isMentionSegment, isTextSegment, rawValueToSegments, segmentsHasContent, segmentsToReadableText, type SegmentsToReadableTextOptions, } from './composer/segments';

package/dist/index.js

@@ -61,7 +61,7 @@ export { default as ActionBar } from "./action-bar";
 export { default as AgentStep } from "./agent-step";
 export { default as AgentThink } from "./agent-think";
 export { APPROVAL_DEFAULT_ACTIONS_HINT, default as Approval } from "./approval";
-export { ARTIFACT_DEDICATED_FILE_ICON_TYPES, ARTIFACT_FILE_GLOW_COLORS, ARTIFACT_FILE_ICON_TYPES, default as Artifact, ArtifactFileIcon, getArtifactActionFromKind, getArtifactGlowColor } from "./artifact";
+export { ARTIFACT_DEDICATED_FILE_ICON_TYPES, ARTIFACT_FILE_GLOW_COLORS, ARTIFACT_FILE_ICON_TYPES, default as Artifact, ArtifactFileIcon, getArtifactAction, getArtifactActionFromKind, getArtifactGlowColor } from "./artifact";
 export { default as Attachments } from "./attachments";
 export { default as ChatItem, formatRelativeTime } from "./chat-item";
 export { default as ChatList, matchChatListFilterTime, matchChatListFilterType } from "./chat-list";

package/dist/invocation/index.js

@@ -1,4 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { resolveInvocationCategoryIcon } from "../_genui-inline-ref";
+import Icon from "../icon";
 import Popover from "../popover";
 import "./style";
 function formatPayloadSummary(payload) {
@@ -6,7 +8,7 @@ function formatPayloadSummary(payload) {
   var entries = Object.entries(payload).filter(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       v = _ref2[1];
-    return v != null && v !== '';
+    return v !== null && v !== undefined && v !== '';
   });
   if (entries.length === 0) return null;
   return entries.map(function (_ref3) {
@@ -16,17 +18,40 @@ function formatPayloadSummary(payload) {
     return "".concat(k, ": ").concat(String(v));
   }).join(' · ');
 }
-export function Invocation(_ref5) {
+function InvocationHoverPopup(_ref5) {
+  var label = _ref5.label,
+    icon = _ref5.icon,
+    summary = _ref5.summary;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-invocation-popover-inner": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-invocation-popover-title": true
+  }, icon ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-invocation-icon": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 12
+  })) : null, label), summary ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-invocation-popover-summary": true
+  }, summary) : /*#__PURE__*/React.createElement("div", {
+    "data-odn-invocation-popover-empty": true
+  }, "\u672A\u586B\u53C2\u6570"));
+}
+export function Invocation(_ref6) {
   var _data$state;
-  var data = _ref5.data,
-    _ref5$interactive = _ref5.interactive,
-    interactive = _ref5$interactive === void 0 ? false : _ref5$interactive,
-    _ref5$active = _ref5.active,
-    active = _ref5$active === void 0 ? false : _ref5$active,
-    onClick = _ref5.onClick;
+  var data = _ref6.data,
+    _ref6$interactive = _ref6.interactive,
+    interactive = _ref6$interactive === void 0 ? false : _ref6$interactive,
+    _ref6$active = _ref6.active,
+    active = _ref6$active === void 0 ? false : _ref6$active,
+    onClick = _ref6.onClick;
   var clickable = interactive && !!onClick;
   /** 状态优先级：active > data.state > 'complete' */
   var state = active ? 'active' : (_data$state = data.state) !== null && _data$state !== void 0 ? _data$state : 'complete';
+  var categoryIcon = resolveInvocationCategoryIcon(data.kind, data.icon);
+  var summary = formatPayloadSummary(data.payload);
+  var hasHoverPopup = !interactive && (!!summary || data.state === 'pending');
+  var hoverable = clickable || hasHoverPopup;
   var handleClick = clickable ? function (e) {
     e.preventDefault();
     e.stopPropagation();
@@ -40,18 +65,18 @@ export function Invocation(_ref5) {
     "data-odn-invocation": true,
     "data-state": state,
     "data-clickable": clickable || undefined,
+    "data-hoverable": hoverable || undefined,
     onClick: handleClick,
     onMouseDown: handleMouseDown
-  }, /*#__PURE__*/React.createElement("span", {
-    "data-odn-invocation-slash": true,
-    "aria-hidden": true
-  }, "/"), /*#__PURE__*/React.createElement("span", {
+  }, categoryIcon ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-invocation-icon": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: categoryIcon,
+    size: 14
+  })) : null, /*#__PURE__*/React.createElement("span", {
     "data-odn-invocation-label": true
   }, data.label));
-  if (interactive) return core;
-  var summary = formatPayloadSummary(data.payload);
-  /** 只读态：有 payload 摘要 → hover；pending 但无 payload → 「未填参数」；否则不弹 */
-  if (!summary && data.state !== 'pending') return core;
+  if (!hasHoverPopup) return core;
   return /*#__PURE__*/React.createElement(Popover, {
     trigger: "hover",
     placement: "top",
@@ -61,25 +86,10 @@ export function Invocation(_ref5) {
     mouseLeaveDelay: 0.1,
     popup: /*#__PURE__*/React.createElement(InvocationHoverPopup, {
       label: data.label,
+      icon: categoryIcon,
       summary: summary
     })
   }, core);
 }
-function InvocationHoverPopup(_ref6) {
-  var label = _ref6.label,
-    summary = _ref6.summary;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-odn-invocation-popover-inner": true
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-odn-invocation-popover-title": true
-  }, /*#__PURE__*/React.createElement("span", {
-    "data-odn-invocation-popover-slash": true,
-    "aria-hidden": true
-  }, "/"), label), summary ? /*#__PURE__*/React.createElement("div", {
-    "data-odn-invocation-popover-summary": true
-  }, summary) : /*#__PURE__*/React.createElement("div", {
-    "data-odn-invocation-popover-empty": true
-  }, "\u672A\u586B\u53C2\u6570"));
-}
 export { InvocationParamPopover } from "./param-popover";
 export default Invocation;

package/dist/invocation/style/index.css

@@ -1,17 +1,34 @@
 @charset "UTF-8";
-/* 默认排版与 Composer 输入区一致（14 / 24）；在 editor 内由下方 inherit 规则跟随正文 */
+/* Invocation / Mention 完成后 chip 共用皮：默认无底 + 品牌色字 + 品类 icon
+ *
+ * 必须是 inline，不能是 inline-flex / inline-block。
+ * 蓝字要和旁边正文走同一条基线、同一套行高；做成独立盒子后，
+ * 内部文字基线永远对不齐（1em 盒子贴基线时，字在盒子里还会再上浮一截）。
+ */
+/* 默认排版与 Composer 输入区一致（14 / 24）；在 editor / 气泡内跟随正文 inherit */
 [data-odn-invocation] {
-  display: inline-flex;
-  align-items: center;
+  display: inline;
+  vertical-align: baseline;
   white-space: nowrap;
   word-break: keep-all;
   overflow-wrap: normal;
   margin: 0;
-  padding: 0;
-  border-radius: 0;
-  background: transparent;
+  padding: 0 4px;
+  border-radius: 4px;
+  --odn-inline-ref-bg: transparent;
+  --odn-inline-ref-bg-hover: color-mix(
+    in srgb,
+    var(--odn-color-brand-6) 12%,
+    transparent
+  );
+  --odn-inline-ref-bg-active: color-mix(
+    in srgb,
+    var(--odn-color-brand-6) 16%,
+    transparent
+  );
+  background: var(--odn-inline-ref-bg);
   color: var(--odn-color-brand-7, var(--odn-color-brand-6));
-  font-weight: 500;
+  font-weight: 400;
   font-size: 14px;
   line-height: 24px;
   cursor: default;
@@ -22,22 +39,31 @@
 [data-odn-invocation][data-state=pending] {
   color: color-mix(in srgb, var(--odn-color-brand-7, var(--odn-color-brand-6)) 60%, transparent);
 }
-[data-odn-invocation][data-state=active], [data-odn-invocation]:hover {
-  background: color-mix(in srgb, var(--odn-color-brand-6) 12%, transparent);
+[data-odn-invocation][data-hoverable]:hover {
+  background: var(--odn-inline-ref-bg-hover);
 }
 [data-odn-invocation][data-state=active] {
+  background: var(--odn-inline-ref-bg-active);
   border-bottom: none;
 }
 [data-odn-invocation][data-clickable] {
   cursor: pointer;
 }
 
-[data-odn-invocation-slash] {
-  opacity: 0.7;
-}
-
-[data-odn-invocation][data-state=pending] [data-odn-invocation-slash] {
-  opacity: 1;
+[data-odn-invocation-icon] {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-inline-end: 2px;
+  /* 1em SVG 贴基线会整块落在字的上方，下移与汉字视觉中心对齐 */
+  vertical-align: -0.15em;
+  line-height: 0;
+  color: inherit;
+}
+[data-odn-invocation-icon] :where(svg) {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
 [data-odn-invocation-popover-inner] {
@@ -49,23 +75,19 @@
 [data-odn-invocation-popover-title] {
   display: inline-flex;
   align-items: center;
-  gap: 1px;
-  font-weight: 500;
+  gap: 2px;
+  font-weight: 400;
   color: var(--odn-color-brand-7, var(--odn-color-brand-6));
 }
 
-[data-odn-invocation-popover-slash] {
-  opacity: 0.7;
-}
-
 [data-odn-invocation-popover-summary],
 [data-odn-invocation-popover-empty] {
   display: inline-block;
   align-self: flex-start;
   padding: 2px 6px;
   border-radius: 4px;
-  background: color-mix(in srgb, var(--odn-color-brand-6) 10%, transparent);
-  color: var(--odn-color-brand-7, var(--odn-color-brand-6));
+  background: var(--odn-color-black-4);
+  color: var(--odn-color-solid-black-10);
   font-size: 12px;
   line-height: 1.4;
 }