@douyinfe/semi-foundation 2.88.0-alpha.4 → 2.88.0-alpha.7

package/aiChatInput/foundation.ts

@@ -2,7 +2,7 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { Attachment, BaseSkill, Suggestion, Reference, Content, LeftMenuChangeProps, MessageContent } from './interface';
 import { isNumber, isString } from 'lodash';
 import { cssClasses } from './constants';
-import { transformJSONResult } from './utils';
+import { findSkillSlotInString, transformJSONResult } from './utils';
 
 export interface AIChatInputAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     reposPopover: () => void;
@@ -16,6 +16,7 @@ export interface AIChatInputAdapter<P = Record<string, any>, S = Record<string,
     manualUpload: (files: File[]) => void;
     notifyMessageSend: (props: MessageContent) => void;
     notifyStopGenerate: () => void;
+    notifySkillChange: (skill: BaseSkill) => void;
     clearContent: () => void;
     clearAttachments: () => void;
     getRichTextDiv: () => HTMLDivElement | null;
@@ -51,6 +52,7 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
             skill: skill,
             skillVisible: false
         });
+        this._adapter.notifySkillChange(skill);
         this._adapter.setContent(`<skill-slot data-value="${skill.label}"></skill-slot>`);
         this._adapter.focusEditor();
     }
@@ -197,18 +199,27 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
 
     handleContentChange = (content: string) => {
         const { transformer } = this.getProps();
-        const { skill } = this.getStates();
+        const { skill = {} } = this.getStates();
         const editor = this._adapter.getEditor();
-        const jsonResult = editor.getJSON();
-        const finalResult = transformJSONResult(jsonResult, transformer);
-        this._adapter.notifyContentChange(finalResult);
         const html = editor.getHTML();
-        if (content === '' && Object.keys(skill).length && !html.includes('</skill-slot>')) {
+        if (Object.keys(skill).length && !html.includes('</skill-slot>')) {
             this.setState({ 
-                skill: {} as BaseSkill,
+                skill: undefined,
                 templateVisible: false
             });
+            this._adapter.notifySkillChange(undefined);
+            this._adapter.notifyContentChange([]);
+            return;
+        } else if ((Object.keys(skill).length === 0) && html.includes('</skill-slot>')) {
+            const newSkill = findSkillSlotInString(html);
+            if (newSkill?.value !== skill?.value) {
+                this.setState({ skill: newSkill });
+                this._adapter.notifySkillChange(newSkill);
+            }
         }
+        const jsonResult = editor.getJSON();
+        const finalResult = transformJSONResult(jsonResult, transformer);
+        this._adapter.notifyContentChange(finalResult);
         this.setState({
             content: jsonResult,
         });
@@ -338,6 +349,21 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
             this.handleSend();
             return true;
         }
+        if (event.key === 'Enter' && event.shiftKey) {
+            /**
+             * Tiptap 默认情况下 Enter + Shift 时候是使用 <br /> 实现换行，需要通过新建 p 标签的方式换行保证
+             * 自定义的一些逻辑生效（比如零宽字符的插入），因此拦截默认操作，使用新建 p 标签方式
+             */
+            event.preventDefault();
+            const editor = this._adapter.getEditor();
+            if (editor && editor.chain && editor.chain().splitBlock) {
+                editor.chain().focus().splitBlock().run();
+            } else if (editor && editor.view) {
+                const { state, view } = editor;
+                view.dispatch(state.tr.split(state.selection.from));
+            }
+            return true;
+        }
         if (event.key !== 'Backspace') return false;
         return false;
     }

package/aiChatInput/interface.ts

@@ -6,10 +6,10 @@ export interface RichTextJSON {
 }
 
 export interface BaseSkill {
-    icon: any;
-    value: string;
-    label: string;
-    hasTemplate: boolean;
+    icon?: any;
+    value?: string;
+    label?: string;
+    hasTemplate?: boolean;
     [key: string]: any
 }
 

package/aiChatInput/utils.ts

@@ -53,11 +53,10 @@ export function transformSelectSlot(obj: any) {
 
 export function transformSkillSlot(obj: any) {
     const { type, attrs } = obj;
-    const { value, info } = attrs;
+    const { value } = attrs;
     return {
         type,
-        value,
-        ...(JSON.parse(info) ?? {}),
+        value
     };
 }
 
@@ -71,14 +70,18 @@ export function transformInputSlot(obj: any) {
 }
 
 export function transformText(obj: any) {
-    return { ...obj };
+    const { text } = obj;
+    return { 
+        type: 'text',
+        text: text !== strings.ZERO_WIDTH_CHAR ? text : ''
+    };
 }
 
-export const transformMap = new Map([
+export const transformMap = new Map<string, any>([
     ['text', transformText],
     ['selectSlot', transformSelectSlot],
     ['inputSlot', transformInputSlot],
-    ['toolSlot', transformSkillSlot],
+    ['skillSlot', transformSkillSlot],
 ]);
 
 export function transformJSONResult(input: any, customTransformObj: Map<string, (obj: any) => any> = new Map()) {
@@ -116,7 +119,7 @@ export function transformJSONResult(input: any, customTransformObj: Map<string,
                 const lastItem = output[output.length - 1];
                 if (lastItem && lastItem.type === 'text') {
                     lastItem.text += result.text;
-                } else {
+                } else if (result.text.length) {
                     output.push(result);
                 }
             } else {
@@ -137,4 +140,29 @@ export function getCustomSlotAttribute() {
             'data-custom-slot': attributes.isCustomSlot ? 'true' : undefined,
         }),
     };
+}
+
+export function findSkillSlotInString(content: string) {
+    const reg = /<skill-slot\s+([^>]*)><\/skill-slot>/i;
+    const attrReg = /([\w-]+)=["']?([^"'\s>]+)["']?/g;
+    const match = reg.exec(content);
+    if (match) {
+        const attrsStr = match[1];
+        let attrMatch;
+        let attrs = {};
+        while ((attrMatch = attrReg.exec(attrsStr)) !== null) {
+            attrs[attrMatch[1]] = attrMatch[2];
+        }
+        if (attrs['data-value']) {
+            const obj = {
+                label: attrs['data-label'],
+                value: attrs['data-value'],
+                hasTemplate: attrs['data-template'] ? attrs['data-template'] === 'true' : undefined
+            };
+            return Object.fromEntries(
+                Object.entries(obj).filter(([key, value]) => value !== undefined)
+            );
+        }
+    }
+    return undefined;
 }

package/lib/cjs/aiChatInput/foundation.d.ts

@@ -12,6 +12,7 @@ export interface AIChatInputAdapter<P = Record<string, any>, S = Record<string,
     manualUpload: (files: File[]) => void;
     notifyMessageSend: (props: MessageContent) => void;
     notifyStopGenerate: () => void;
+    notifySkillChange: (skill: BaseSkill) => void;
     clearContent: () => void;
     clearAttachments: () => void;
     getRichTextDiv: () => HTMLDivElement | null;

package/lib/cjs/aiChatInput/foundation.js

@@ -24,6 +24,7 @@ class AIChatInputFoundation extends _foundation.default {
         skill: skill,
         skillVisible: false
       });
+      this._adapter.notifySkillChange(skill);
       this._adapter.setContent(`<skill-slot data-value="${skill.label}"></skill-slot>`);
       this._adapter.focusEditor();
     };
@@ -167,19 +168,30 @@ class AIChatInputFoundation extends _foundation.default {
         transformer
       } = this.getProps();
       const {
-        skill
+        skill = {}
       } = this.getStates();
       const editor = this._adapter.getEditor();
-      const jsonResult = editor.getJSON();
-      const finalResult = (0, _utils.transformJSONResult)(jsonResult, transformer);
-      this._adapter.notifyContentChange(finalResult);
       const html = editor.getHTML();
-      if (content === '' && Object.keys(skill).length && !html.includes('</skill-slot>')) {
+      if (Object.keys(skill).length && !html.includes('</skill-slot>')) {
         this.setState({
-          skill: {},
+          skill: undefined,
           templateVisible: false
         });
+        this._adapter.notifySkillChange(undefined);
+        this._adapter.notifyContentChange([]);
+        return;
+      } else if (Object.keys(skill).length === 0 && html.includes('</skill-slot>')) {
+        const newSkill = (0, _utils.findSkillSlotInString)(html);
+        if ((newSkill === null || newSkill === void 0 ? void 0 : newSkill.value) !== (skill === null || skill === void 0 ? void 0 : skill.value)) {
+          this.setState({
+            skill: newSkill
+          });
+          this._adapter.notifySkillChange(newSkill);
+        }
       }
+      const jsonResult = editor.getJSON();
+      const finalResult = (0, _utils.transformJSONResult)(jsonResult, transformer);
+      this._adapter.notifyContentChange(finalResult);
       this.setState({
         content: jsonResult
       });
@@ -323,6 +335,24 @@ class AIChatInputFoundation extends _foundation.default {
         this.handleSend();
         return true;
       }
+      if (event.key === 'Enter' && event.shiftKey) {
+        /**
+         * Tiptap 默认情况下 Enter + Shift 时候是使用 <br /> 实现换行，需要通过新建 p 标签的方式换行保证
+         * 自定义的一些逻辑生效（比如零宽字符的插入），因此拦截默认操作，使用新建 p 标签方式
+         */
+        event.preventDefault();
+        const editor = this._adapter.getEditor();
+        if (editor && editor.chain && editor.chain().splitBlock) {
+          editor.chain().focus().splitBlock().run();
+        } else if (editor && editor.view) {
+          const {
+            state,
+            view
+          } = editor;
+          view.dispatch(state.tr.split(state.selection.from));
+        }
+        return true;
+      }
       if (event.key !== 'Backspace') return false;
       return false;
     };

package/lib/cjs/aiChatInput/interface.d.ts

@@ -4,10 +4,10 @@ export interface RichTextJSON {
     [key: string]: any;
 }
 export interface BaseSkill {
-    icon: any;
-    value: string;
-    label: string;
-    hasTemplate: boolean;
+    icon?: any;
+    value?: string;
+    label?: string;
+    hasTemplate?: boolean;
     [key: string]: any;
 }
 export type Suggestion = string[] | {

package/lib/cjs/aiChatInput/utils.d.ts

@@ -6,13 +6,19 @@ export declare function transformSelectSlot(obj: any): {
     type: string;
     text: any;
 };
-export declare function transformSkillSlot(obj: any): any;
+export declare function transformSkillSlot(obj: any): {
+    type: any;
+    value: any;
+};
 export declare function transformInputSlot(obj: any): {
     type: string;
     text: any;
 };
-export declare function transformText(obj: any): any;
-export declare const transformMap: Map<string, typeof transformText>;
+export declare function transformText(obj: any): {
+    type: string;
+    text: any;
+};
+export declare const transformMap: Map<string, any>;
 export declare function transformJSONResult(input: any, customTransformObj?: Map<string, (obj: any) => any>): any[];
 export declare function getCustomSlotAttribute(): {
     default: boolean;
@@ -21,3 +27,6 @@ export declare function getCustomSlotAttribute(): {
         'data-custom-slot': string;
     };
 };
+export declare function findSkillSlotInString(content: string): {
+    [k: string]: any;
+};

package/lib/cjs/aiChatInput/utils.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.findSkillSlotInString = findSkillSlotInString;
 exports.getAttachmentType = getAttachmentType;
 exports.getContentType = getContentType;
 exports.getCustomSlotAttribute = getCustomSlotAttribute;
@@ -69,19 +70,17 @@ function transformSelectSlot(obj) {
   };
 }
 function transformSkillSlot(obj) {
-  var _a;
   const {
     type,
     attrs
   } = obj;
   const {
-    value,
-    info
+    value
   } = attrs;
-  return Object.assign({
+  return {
     type,
     value
-  }, (_a = JSON.parse(info)) !== null && _a !== void 0 ? _a : {});
+  };
 }
 function transformInputSlot(obj) {
   var _a, _b;
@@ -96,9 +95,15 @@ function transformInputSlot(obj) {
   };
 }
 function transformText(obj) {
-  return Object.assign({}, obj);
+  const {
+    text
+  } = obj;
+  return {
+    type: 'text',
+    text: text !== _constants.strings.ZERO_WIDTH_CHAR ? text : ''
+  };
 }
-const transformMap = exports.transformMap = new Map([['text', transformText], ['selectSlot', transformSelectSlot], ['inputSlot', transformInputSlot], ['toolSlot', transformSkillSlot]]);
+const transformMap = exports.transformMap = new Map([['text', transformText], ['selectSlot', transformSelectSlot], ['inputSlot', transformInputSlot], ['skillSlot', transformSkillSlot]]);
 function transformJSONResult(input) {
   let customTransformObj = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Map();
   const output = [];
@@ -141,7 +146,7 @@ function transformJSONResult(input) {
         const lastItem = output[output.length - 1];
         if (lastItem && lastItem.type === 'text') {
           lastItem.text += result.text;
-        } else {
+        } else if (result.text.length) {
           output.push(result);
         }
       } else {
@@ -160,4 +165,29 @@ function getCustomSlotAttribute() {
       'data-custom-slot': attributes.isCustomSlot ? 'true' : undefined
     })
   };
+}
+function findSkillSlotInString(content) {
+  const reg = /<skill-slot\s+([^>]*)><\/skill-slot>/i;
+  const attrReg = /([\w-]+)=["']?([^"'\s>]+)["']?/g;
+  const match = reg.exec(content);
+  if (match) {
+    const attrsStr = match[1];
+    let attrMatch;
+    let attrs = {};
+    while ((attrMatch = attrReg.exec(attrsStr)) !== null) {
+      attrs[attrMatch[1]] = attrMatch[2];
+    }
+    if (attrs['data-value']) {
+      const obj = {
+        label: attrs['data-label'],
+        value: attrs['data-value'],
+        hasTemplate: attrs['data-template'] ? attrs['data-template'] === 'true' : undefined
+      };
+      return Object.fromEntries(Object.entries(obj).filter(_ref => {
+        let [key, value] = _ref;
+        return value !== undefined;
+      }));
+    }
+  }
+  return undefined;
 }

package/lib/es/aiChatInput/foundation.d.ts

@@ -12,6 +12,7 @@ export interface AIChatInputAdapter<P = Record<string, any>, S = Record<string,
     manualUpload: (files: File[]) => void;
     notifyMessageSend: (props: MessageContent) => void;
     notifyStopGenerate: () => void;
+    notifySkillChange: (skill: BaseSkill) => void;
     clearContent: () => void;
     clearAttachments: () => void;
     getRichTextDiv: () => HTMLDivElement | null;

package/lib/es/aiChatInput/foundation.js

@@ -2,7 +2,7 @@ import _isString from "lodash/isString";
 import _isNumber from "lodash/isNumber";
 import BaseFoundation from '../base/foundation';
 import { cssClasses } from './constants';
-import { transformJSONResult } from './utils';
+import { findSkillSlotInString, transformJSONResult } from './utils';
 const prefixCls = cssClasses.PREFIX;
 export default class AIChatInputFoundation extends BaseFoundation {
   constructor(adapter) {
@@ -17,6 +17,7 @@ export default class AIChatInputFoundation extends BaseFoundation {
         skill: skill,
         skillVisible: false
       });
+      this._adapter.notifySkillChange(skill);
       this._adapter.setContent(`<skill-slot data-value="${skill.label}"></skill-slot>`);
       this._adapter.focusEditor();
     };
@@ -160,19 +161,30 @@ export default class AIChatInputFoundation extends BaseFoundation {
         transformer
       } = this.getProps();
       const {
-        skill
+        skill = {}
       } = this.getStates();
       const editor = this._adapter.getEditor();
-      const jsonResult = editor.getJSON();
-      const finalResult = transformJSONResult(jsonResult, transformer);
-      this._adapter.notifyContentChange(finalResult);
       const html = editor.getHTML();
-      if (content === '' && Object.keys(skill).length && !html.includes('</skill-slot>')) {
+      if (Object.keys(skill).length && !html.includes('</skill-slot>')) {
         this.setState({
-          skill: {},
+          skill: undefined,
           templateVisible: false
         });
+        this._adapter.notifySkillChange(undefined);
+        this._adapter.notifyContentChange([]);
+        return;
+      } else if (Object.keys(skill).length === 0 && html.includes('</skill-slot>')) {
+        const newSkill = findSkillSlotInString(html);
+        if ((newSkill === null || newSkill === void 0 ? void 0 : newSkill.value) !== (skill === null || skill === void 0 ? void 0 : skill.value)) {
+          this.setState({
+            skill: newSkill
+          });
+          this._adapter.notifySkillChange(newSkill);
+        }
       }
+      const jsonResult = editor.getJSON();
+      const finalResult = transformJSONResult(jsonResult, transformer);
+      this._adapter.notifyContentChange(finalResult);
       this.setState({
         content: jsonResult
       });
@@ -316,6 +328,24 @@ export default class AIChatInputFoundation extends BaseFoundation {
         this.handleSend();
         return true;
       }
+      if (event.key === 'Enter' && event.shiftKey) {
+        /**
+         * Tiptap 默认情况下 Enter + Shift 时候是使用 <br /> 实现换行，需要通过新建 p 标签的方式换行保证
+         * 自定义的一些逻辑生效（比如零宽字符的插入），因此拦截默认操作，使用新建 p 标签方式
+         */
+        event.preventDefault();
+        const editor = this._adapter.getEditor();
+        if (editor && editor.chain && editor.chain().splitBlock) {
+          editor.chain().focus().splitBlock().run();
+        } else if (editor && editor.view) {
+          const {
+            state,
+            view
+          } = editor;
+          view.dispatch(state.tr.split(state.selection.from));
+        }
+        return true;
+      }
       if (event.key !== 'Backspace') return false;
       return false;
     };

package/lib/es/aiChatInput/interface.d.ts

@@ -4,10 +4,10 @@ export interface RichTextJSON {
     [key: string]: any;
 }
 export interface BaseSkill {
-    icon: any;
-    value: string;
-    label: string;
-    hasTemplate: boolean;
+    icon?: any;
+    value?: string;
+    label?: string;
+    hasTemplate?: boolean;
     [key: string]: any;
 }
 export type Suggestion = string[] | {

package/lib/es/aiChatInput/utils.d.ts

@@ -6,13 +6,19 @@ export declare function transformSelectSlot(obj: any): {
     type: string;
     text: any;
 };
-export declare function transformSkillSlot(obj: any): any;
+export declare function transformSkillSlot(obj: any): {
+    type: any;
+    value: any;
+};
 export declare function transformInputSlot(obj: any): {
     type: string;
     text: any;
 };
-export declare function transformText(obj: any): any;
-export declare const transformMap: Map<string, typeof transformText>;
+export declare function transformText(obj: any): {
+    type: string;
+    text: any;
+};
+export declare const transformMap: Map<string, any>;
 export declare function transformJSONResult(input: any, customTransformObj?: Map<string, (obj: any) => any>): any[];
 export declare function getCustomSlotAttribute(): {
     default: boolean;
@@ -21,3 +27,6 @@ export declare function getCustomSlotAttribute(): {
         'data-custom-slot': string;
     };
 };
+export declare function findSkillSlotInString(content: string): {
+    [k: string]: any;
+};

package/lib/es/aiChatInput/utils.js

@@ -54,19 +54,17 @@ export function transformSelectSlot(obj) {
   };
 }
 export function transformSkillSlot(obj) {
-  var _a;
   const {
     type,
     attrs
   } = obj;
   const {
-    value,
-    info
+    value
   } = attrs;
-  return Object.assign({
+  return {
     type,
     value
-  }, (_a = JSON.parse(info)) !== null && _a !== void 0 ? _a : {});
+  };
 }
 export function transformInputSlot(obj) {
   var _a, _b;
@@ -81,9 +79,15 @@ export function transformInputSlot(obj) {
   };
 }
 export function transformText(obj) {
-  return Object.assign({}, obj);
+  const {
+    text
+  } = obj;
+  return {
+    type: 'text',
+    text: text !== strings.ZERO_WIDTH_CHAR ? text : ''
+  };
 }
-export const transformMap = new Map([['text', transformText], ['selectSlot', transformSelectSlot], ['inputSlot', transformInputSlot], ['toolSlot', transformSkillSlot]]);
+export const transformMap = new Map([['text', transformText], ['selectSlot', transformSelectSlot], ['inputSlot', transformInputSlot], ['skillSlot', transformSkillSlot]]);
 export function transformJSONResult(input) {
   let customTransformObj = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Map();
   const output = [];
@@ -126,7 +130,7 @@ export function transformJSONResult(input) {
         const lastItem = output[output.length - 1];
         if (lastItem && lastItem.type === 'text') {
           lastItem.text += result.text;
-        } else {
+        } else if (result.text.length) {
           output.push(result);
         }
       } else {
@@ -145,4 +149,29 @@ export function getCustomSlotAttribute() {
       'data-custom-slot': attributes.isCustomSlot ? 'true' : undefined
     })
   };
+}
+export function findSkillSlotInString(content) {
+  const reg = /<skill-slot\s+([^>]*)><\/skill-slot>/i;
+  const attrReg = /([\w-]+)=["']?([^"'\s>]+)["']?/g;
+  const match = reg.exec(content);
+  if (match) {
+    const attrsStr = match[1];
+    let attrMatch;
+    let attrs = {};
+    while ((attrMatch = attrReg.exec(attrsStr)) !== null) {
+      attrs[attrMatch[1]] = attrMatch[2];
+    }
+    if (attrs['data-value']) {
+      const obj = {
+        label: attrs['data-label'],
+        value: attrs['data-value'],
+        hasTemplate: attrs['data-template'] ? attrs['data-template'] === 'true' : undefined
+      };
+      return Object.fromEntries(Object.entries(obj).filter(_ref => {
+        let [key, value] = _ref;
+        return value !== undefined;
+      }));
+    }
+  }
+  return undefined;
 }

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.88.0-alpha.4",
+    "version": "2.88.0-alpha.7",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.88.0-alpha.4",
-        "@douyinfe/semi-json-viewer-core": "2.88.0-alpha.4",
+        "@douyinfe/semi-animation": "2.88.0-alpha.7",
+        "@douyinfe/semi-json-viewer-core": "2.88.0-alpha.7",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -29,7 +29,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "91c70597b32761e0cf07d832bbe77b2aeb32ab81",
+    "gitHead": "47f25be3aae3674564e030e0aec1daec2615abd8",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",