@myun/gimi-chat 0.9.65 → 0.9.67

package/dist/components/chat-input/extension/skill/ReferSlot.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Node, mergeAttributes } from '@tiptap/core';
+import { ReactNodeViewRenderer, NodeViewWrapper } from '@tiptap/react';
+import { AIChatInput } from '@douyinfe/semi-ui';
+
+// referSlot 的渲染组件
+function ReferSlotComponent(props) {
+  console.log('props', props);
+  var node = props.node,
+    deleteNode = props.deleteNode;
+  var info = node.attrs.info ? JSON.parse(node.attrs.info) || {} : {};
+  var onRemove = function onRemove(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    deleteNode && deleteNode();
+  };
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "ai-chat-input-refer-slot-wrapper"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "ai-chat-input-refer-slot-image",
+    src: "https://simg01.gaodunwangxiao.com/uploadfiles/tmp/upload/202608/27/50553_20260827090545.png",
+    alt: ""
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ai-chat-input-refer-slot"
+  }, info.toolName || ''));
+}
+
+// 创建 ReferSlot 扩展
+var ReferSlot = Node.create({
+  name: 'referSlot',
+  inline: true,
+  group: 'inline',
+  atom: true,
+  selectable: false,
+  addAttributes: function addAttributes() {
+    return {
+      value: {
+        default: '输入内容',
+        parseHTML: function parseHTML(element) {
+          return element.getAttribute('data-value');
+        },
+        renderHTML: function renderHTML(attributes) {
+          return {
+            'data-value': attributes.value
+          };
+        }
+      },
+      info: {
+        default: '',
+        parseHTML: function parseHTML(element) {
+          return element.getAttribute('data-info');
+        },
+        renderHTML: function renderHTML(attributes) {
+          return {
+            'data-info': attributes.info
+          };
+        }
+      },
+      type: {
+        default: 'text',
+        parseHTML: function parseHTML(element) {
+          return element.getAttribute('data-type');
+        },
+        renderHTML: function renderHTML(attributes) {
+          return {
+            'data-type': attributes.type
+          };
+        }
+      },
+      uniqueKey: {
+        default: '',
+        parseHTML: function parseHTML(element) {
+          return element.getAttribute('data-unique-key');
+        },
+        renderHTML: function renderHTML(attributes) {
+          return {
+            'data-unique-key': attributes.uniqueKey
+          };
+        }
+      },
+      // !!! Very important, affects the cursor size before and after custom nodes
+      // Please be sure to add this logic to custom nodes
+      isCustomSlot: AIChatInput.getCustomSlotAttribute()
+    };
+  },
+  parseHTML: function parseHTML() {
+    return [{
+      tag: 'refer-slot'
+    }];
+  },
+  renderHTML: function renderHTML(_ref) {
+    var HTMLAttributes = _ref.HTMLAttributes;
+    // 序列化时输出自定义标签，保留值到 data-value
+    return ['refer-slot', mergeAttributes(HTMLAttributes)];
+  },
+  addNodeView: function addNodeView() {
+    return ReactNodeViewRenderer(ReferSlotComponent);
+  }
+});
+export default ReferSlot;

package/dist/components/chat-input/extension/skill/data.d.ts

@@ -0,0 +1,10 @@
+export interface SkillItem {
+    icon?: string;
+    key: string;
+    type: string;
+    name: string;
+    path?: string;
+}
+export declare const TestAction: Record<string, SkillItem[]>;
+export declare const FirstLevel: string[];
+export declare const SkillList: SkillItem[];

package/dist/components/chat-input/extension/skill/data.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { IconFile, IconFolder, IconBranch, IconCode, IconGit } from '@douyinfe/semi-icons';
+// 面板选项（按分组组织）
+export var TestAction = {
+  'Files & Folders': [{
+    icon: /*#__PURE__*/React.createElement(IconFile, null),
+    key: '1-1',
+    type: 'file',
+    name: 'TagInput.scss',
+    path: 'package/semi-founctaion/TagInput.scss'
+  }, {
+    icon: /*#__PURE__*/React.createElement(IconFolder, null),
+    key: '1-2',
+    type: 'folder',
+    name: 'package',
+    path: '/package'
+  }, {
+    icon: /*#__PURE__*/React.createElement(IconFolder, null),
+    key: '1-3',
+    type: 'folder',
+    name: 'semi-ui',
+    path: '/package/semi-ui'
+  }],
+  Git: [{
+    icon: /*#__PURE__*/React.createElement(IconBranch, null),
+    key: '2-1',
+    type: 'branch',
+    name: 'fix/tag'
+  }, {
+    icon: /*#__PURE__*/React.createElement(IconCode, null),
+    key: '2-2',
+    type: 'code',
+    name: 'v2.86.0',
+    path: '/package'
+  }, {
+    icon: /*#__PURE__*/React.createElement(IconGit, null),
+    key: '2-3',
+    type: 'git',
+    name: 'chore: publish'
+  }]
+};
+
+// 第一级内容
+export var FirstLevel = Object.keys(TestAction);
+
+// 扁平化所有选项，用于单层面板直接展示
+export var SkillList = FirstLevel.reduce(function (acc, key) {
+  return acc.concat(TestAction[key] || []);
+}, []);

package/dist/components/chat-input/extension/skill/index.d.ts

@@ -0,0 +1,7 @@
+import ReferSlot from './ReferSlot';
+import SkillMention from './suggestion';
+export { ReferSlot, SkillMention };
+export { suggestion, setSkillContext } from './suggestion';
+export { TestAction, FirstLevel } from './data';
+export type { SkillItem } from './data';
+export type { SkillCommandProps } from './suggestion';

package/dist/components/chat-input/extension/skill/index.js

@@ -0,0 +1,5 @@
+import ReferSlot from "./ReferSlot";
+import SkillMention from "./suggestion";
+export { ReferSlot, SkillMention };
+export { suggestion, setSkillContext } from "./suggestion";
+export { TestAction, FirstLevel } from "./data";

package/dist/components/chat-input/extension/skill/index.less

@@ -0,0 +1,117 @@
+.ai-chat-input-custom-extension-dropdown-menu {
+    background: #fff;
+    border: 1px solid #E3E3E1;
+    border-radius: 20px;
+    box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.10);
+    padding: 10px;
+    max-height: 300px;
+    box-sizing: border-box;
+    .ai-chat-input-custom-extension-dropdown-wrap {
+        overflow-y: auto;
+        max-height: 240px;
+        padding-right: 14px;
+
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: #EDEDEB;
+            border-radius: 4px;
+        }
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+    }
+    .optionItem {
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        cursor: pointer;
+        font-size: 14px;
+        height: 30px;
+        border-radius: 10px;
+        margin-bottom: 6px;
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        &:hover,
+        &.is-selected {
+            background: var(--theme-lightNeutral, #EDEDEB);
+        }
+        .name {
+            flex-shrink: 0;
+        }
+
+    }
+
+    .skillTitle {
+        color: var(--theme-mediumNeutral, #B3B2B2);
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 21px;
+        margin-bottom: 3px;
+        padding-left: 5px;
+    }
+    .skillItem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        overflow: hidden;
+        .icon {
+            width: 14px;
+            height: 14px;
+            margin-right: 8px;
+            flex-shrink: 0;
+        }
+        .name {
+            font-size: 14px;
+            margin-right: 4px;
+            color: var(--theme-deepNeutral, #221813);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .toolDesc {
+            font-size: 12px;
+            color: var(--theme-dustyNeutral, #878786);
+            flex: 1;
+            min-width: 0;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .item {
+        padding: 20px 12px;
+        color: var(--theme-dustyNeutral, #878786);
+        font-size: 14px;
+        text-align: center;
+    }
+}
+
+.ai-chat-input-refer-slot-wrapper {
+    display: inline-block;
+    border-radius: 10px;
+    background:#E3E3E1;
+    padding: 0 8px;
+    line-height: 23px;
+    margin-right: 6px;
+    margin-bottom: 4px;
+    .ai-chat-input-refer-slot {
+        font-size: 14px;
+        color: var(--theme-deepNeutral, #221813);
+        font-weight: 500;
+        vertical-align: middle;
+
+    }
+    .ai-chat-input-refer-slot-image {
+        width: 14px;
+        height: 14px;
+        margin-right: 4px;
+        flex-shrink: 0;
+        vertical-align: middle;
+
+    }
+}

package/dist/components/chat-input/extension/skill/suggestion.d.ts

@@ -0,0 +1,16 @@
+import { SkillItem } from './MentionList';
+import type { IUseApi } from '../../../../apis/useApi';
+export interface SkillCommandProps {
+    item?: SkillItem;
+    allowHotKeySend?: boolean;
+}
+declare let skillContext: {
+    getAgentId?: () => number | undefined;
+    getApiService?: () => IUseApi | null;
+    getSkillDisplay?: () => number | undefined;
+    getCurrentTextLength?: () => number;
+};
+export declare const setSkillContext: (ctx: Partial<typeof skillContext>) => void;
+export declare const suggestion: any;
+declare const SkillMention: import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>;
+export default SkillMention;

package/dist/components/chat-input/extension/skill/suggestion.js

@@ -0,0 +1,228 @@
+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); }
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+import { ReactRenderer } from '@tiptap/react';
+import Mention from '@tiptap/extension-mention';
+import { SkillList } from "./data";
+import MentionList from "./MentionList";
+
+// 选中后面板回传给 command 的结构
+
+// 面板预期最大高度，用于估算下方空间是否足够
+var PANEL_MAX_HEIGHT = 300;
+// 面板与输入框的间距
+var PANEL_GAP = 0;
+
+// 把面板定位到 AIChatInput 输入框正下方，宽度与输入框一致；
+// 若下方空间不足则翻转到输入框上方显示。
+var positionPanel = function positionPanel(editor, element) {
+  var _editor$view;
+  if (!element) return null;
+  var triggerEl = editor === null || editor === void 0 || (_editor$view = editor.view) === null || _editor$view === void 0 || (_editor$view = _editor$view.dom) === null || _editor$view === void 0 ? void 0 : _editor$view.closest('.semi-aiChatInput');
+  if (!triggerEl) return null;
+  var rect = triggerEl.getBoundingClientRect();
+  var _window = window,
+    scrollX = _window.scrollX,
+    scrollY = _window.scrollY,
+    innerHeight = _window.innerHeight;
+  // 下方剩余空间（视口高度 - 输入框底部）
+  var spaceBelow = innerHeight - rect.bottom;
+  // 渲染后的实际面板高度，未知时用预期最大高度估算
+  var panelHeight = element.offsetHeight || PANEL_MAX_HEIGHT;
+  // 下方放得下就放下方，否则翻到上方（输入框顶部之上）
+  var placeBelow = spaceBelow >= panelHeight + PANEL_GAP;
+  element.style.position = 'absolute';
+  element.style.left = "".concat(rect.left + scrollX, "px");
+  element.style.width = "".concat(rect.width, "px");
+  element.style.boxSizing = 'border-box';
+  if (placeBelow) {
+    element.style.transform = '';
+    element.style.top = "".concat(rect.bottom + scrollY + PANEL_GAP, "px");
+    element.style.maxHeight = "".concat(PANEL_MAX_HEIGHT, "px");
+  } else {
+    // 翻到上方：底部贴输入框顶部（留 GAP）。用 translateY(-100%) 让面板向上偏移自身高度，
+    // 不依赖 JS 读取 offsetHeight，避免高度测量不准导致盖到输入框
+    var aboveSpace = rect.top - PANEL_GAP;
+    element.style.maxHeight = "".concat(Math.min(PANEL_MAX_HEIGHT, aboveSpace), "px");
+    element.style.top = "".concat(rect.top + scrollY - PANEL_GAP, "px");
+    element.style.transform = 'translateY(-100%)';
+  }
+  return triggerEl;
+};
+
+// suggestion 配置
+// v3 的 SuggestionOptions 签名与官方 v2 示例有差异（items 为
+// ({query,editor,signal}) => I[]，command 的 props 为泛型 TSelected），
+// 因此用 SkillCommandProps 作为 TSelected，并在 Mention.configure 处用 as any 适配。
+// 面板不跟随光标，而是贴在 AIChatInput 输入框下方、与输入框等宽，模拟官方 skillHotKey 面板效果。
+// skill 面板由 tiptap ReactRenderer 渲染，脱离 ChatContext/Redux 树，
+// 故通过此 setter 注入当前 agentId 与 apiService 供 MentionList 拉取接口数据
+var skillContext = {};
+export var setSkillContext = function setSkillContext(ctx) {
+  skillContext = _objectSpread(_objectSpread({}, skillContext), ctx);
+};
+export var suggestion = {
+  char: '/',
+  items: function items() {
+    return SkillList;
+  },
+  command: function command(_ref) {
+    var editor = _ref.editor,
+      range = _ref.range,
+      props = _ref.props;
+    var item = props.item,
+      allowHotKeySend = props.allowHotKeySend;
+    if (typeof allowHotKeySend === 'boolean') {
+      var _editor$storage;
+      // statusExtension（SemiAIChatInput）默认加载，storage 一定存在
+      if ((_editor$storage = editor.storage) !== null && _editor$storage !== void 0 && _editor$storage.SemiAIChatInput) {
+        editor.storage.SemiAIChatInput.allowHotKeySend = allowHotKeySend;
+      }
+    }
+    item && editor.chain().focus().insertContentAt(range, {
+      type: 'referSlot',
+      attrs: {
+        type: 'skill',
+        value: item.toolName || '',
+        info: JSON.stringify({
+          toolName: item.toolName || '',
+          toolId: item.toolId || '',
+          imageUrl: item.imageUrl || '',
+          toolType: item.toolCategoryDesc || ''
+        }),
+        uniqueKey: item.toolId || ''
+      }
+    }).run();
+  },
+  render: function render() {
+    var component;
+    var reposition = null;
+    var outsideClickHandler = null;
+    var currentEditor = null;
+    var currentRange = null;
+    var isVisible = true; // 面板当前可见状态
+
+    // 统一的清理和退出逻辑
+    var cleanup = function cleanup() {
+      var _component, _component2;
+      if (reposition) {
+        window.removeEventListener('resize', reposition);
+        window.removeEventListener('scroll', reposition, true);
+        reposition = null;
+      }
+      if (outsideClickHandler) {
+        document.removeEventListener('mousedown', outsideClickHandler, true);
+        outsideClickHandler = null;
+      }
+      currentEditor = null;
+      currentRange = null;
+      (_component = component) === null || _component === void 0 || (_component = _component.element) === null || _component === void 0 || _component.remove();
+      (_component2 = component) === null || _component2 === void 0 || _component2.destroy();
+    };
+
+    // MentionList 通知可见性变化
+    var handleVisibilityChange = function handleVisibilityChange(visible) {
+      var _component3;
+      if (!((_component3 = component) !== null && _component3 !== void 0 && _component3.element)) return;
+      isVisible = visible;
+      if (visible) {
+        component.element.style.display = '';
+        positionPanel(currentEditor, component.element);
+      } else {
+        component.element.style.display = 'none';
+      }
+    };
+    return {
+      onStart: function onStart(props) {
+        var _skillContext$getSkil, _skillContext;
+        console.log('[skill] onStart triggered, query=', props.query);
+        // 当前智能体未开启技能（skillDisplay !== 1）时不弹出技能选择面板
+        if (((_skillContext$getSkil = (_skillContext = skillContext).getSkillDisplay) === null || _skillContext$getSkil === void 0 ? void 0 : _skillContext$getSkil.call(_skillContext)) !== 1) {
+          return;
+        }
+        try {
+          var _skillContext$getAgen, _skillContext2, _skillContext$getApiS, _skillContext$getApiS2, _skillContext3;
+          var agentId = (_skillContext$getAgen = (_skillContext2 = skillContext).getAgentId) === null || _skillContext$getAgen === void 0 ? void 0 : _skillContext$getAgen.call(_skillContext2);
+          var apiService = (_skillContext$getApiS = (_skillContext$getApiS2 = (_skillContext3 = skillContext).getApiService) === null || _skillContext$getApiS2 === void 0 ? void 0 : _skillContext$getApiS2.call(_skillContext3)) !== null && _skillContext$getApiS !== void 0 ? _skillContext$getApiS : null;
+          var getCurrentTextLength = skillContext.getCurrentTextLength;
+          currentEditor = props.editor;
+          currentRange = props.range;
+          component = new ReactRenderer(MentionList, {
+            props: _objectSpread(_objectSpread({}, props), {}, {
+              agentId: agentId,
+              apiService: apiService,
+              getCurrentTextLength: getCurrentTextLength,
+              onVisibilityChange: handleVisibilityChange
+            }),
+            editor: props.editor
+          });
+          component.element.style.position = 'absolute';
+          component.element.style.zIndex = '1031';
+          document.body.appendChild(component.element);
+          positionPanel(props.editor, component.element);
+          // 首帧高度可能为 0，下一帧用实测高度二次校正翻转
+          requestAnimationFrame(function () {
+            return positionPanel(props.editor, component.element);
+          });
+          // 滚动/resize 时让面板跟随输入框位置
+          reposition = function reposition() {
+            return positionPanel(props.editor, component.element);
+          };
+          window.addEventListener('resize', reposition);
+          window.addEventListener('scroll', reposition, true);
+          outsideClickHandler = function outsideClickHandler(e) {
+            var _component4;
+            if (!((_component4 = component) !== null && _component4 !== void 0 && _component4.element)) return;
+            if (component.element.contains(e.target)) return;
+            e.stopPropagation();
+            // 手动移除面板 DOM，再通过内容变更让 suggestion plugin 退出
+            component.element.remove();
+            if (currentEditor && currentRange) {
+              var insertPos = currentRange.from;
+              currentEditor.chain().focus().deleteRange(currentRange).insertContentAt(insertPos, '/').run();
+            }
+          };
+          document.addEventListener('mousedown', outsideClickHandler, true);
+        } catch (e) {
+          console.error('[skill] onStart render error:', e);
+        }
+      },
+      onUpdate: function onUpdate(props) {
+        if (!component) return;
+        currentRange = props.range;
+        component.updateProps(props);
+        // query 变化导致面板高度变化，只在可见时重新定位
+        if (isVisible) {
+          positionPanel(props.editor, component.element);
+        }
+      },
+      onKeyDown: function onKeyDown(props) {
+        var _component5, _component5$onKeyDown;
+        function onExit() {
+          cleanup();
+        }
+        return (_component5 = component) === null || _component5 === void 0 || (_component5 = _component5.ref) === null || _component5 === void 0 || (_component5$onKeyDown = _component5.onKeyDown) === null || _component5$onKeyDown === void 0 ? void 0 : _component5$onKeyDown.call(_component5, _objectSpread(_objectSpread({}, props), {}, {
+          exitCb: onExit
+        }));
+      },
+      onExit: function onExit() {
+        cleanup();
+      },
+      focusEditor: function focusEditor(props) {
+        props.editor.commands.focus();
+      }
+    };
+  }
+};
+
+// 配置好的 Mention 扩展（/ 触发）
+var SkillMention = Mention.configure({
+  HTMLAttributes: {
+    class: 'mention'
+  },
+  suggestion: suggestion
+});
+export default SkillMention;