@douyinfe/semi-foundation 2.88.0-beta.1 → 2.88.0

package/aiChatDialogue/dataAdapter/chatInputToChatCompletion.ts

@@ -39,10 +39,13 @@ export default function chatInputToChatCompletion(inputContent: any): ChatComple
 
     return {
         role: "user",
-        content: inputs,
-        // createdAt: created_at, // todo: 产生消息时给 createdat 还是发送时？
-        // model: model, // todo: inputContent 中未包含 model 信息
-        references
+        messages: [{
+            role: "user",
+            content: inputs,
+        }],
+        model: setup?.model,
+        references,
+        setup: setup ?? {}
     };
 
 }

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, getSkillSlotString, 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,7 +52,8 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
             skill: skill,
             skillVisible: false
         });
-        this._adapter.setContent(`<skill-slot data-value="${skill.label}"></skill-slot>`);
+        this._adapter.notifySkillChange(skill);
+        this._adapter.setContent(getSkillSlotString(skill));
         this._adapter.focusEditor();
     }
 
@@ -199,16 +201,25 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
         const { transformer } = this.getProps();
         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 (skill && !html.includes('</skill-slot>')) {
             this.setState({ 
-                skill: {} as BaseSkill,
+                skill: undefined,
                 templateVisible: false
             });
+            this._adapter.notifySkillChange(undefined);
+            this._adapter.notifyContentChange([]);
+            return;
+        } else if (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,
         });
@@ -265,7 +276,7 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
     }
 
     handleSend = () => {
-        const { generating } = this.getProps();
+        const { generating, transformer } = this.getProps();
         if (generating) {
             this._adapter.notifyStopGenerate();
             return;
@@ -279,7 +290,7 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
             let richTextResult = [];
             if (editor) {
                 const json = editor.getJSON?.();
-                richTextResult = transformJSONResult(json);
+                richTextResult = transformJSONResult(json, transformer);
             }
             // close popup layer for template/skill/suggestion
             this.setState({
@@ -338,6 +349,26 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
             this.handleSend();
             return true;
         }
+        if (event.key === 'Enter' && event.shiftKey) {
+            /**
+             * Tiptap 默认情况下 Enter + Shift 时候是使用 <br /> 实现换行
+             * 为保证自定义的一些逻辑生效（比如零宽字符的插入），Enter + Shift 希望实现通过新建 p 标签的方式完成换行
+             * 此处拦截默认操作，使用新建 p 标签方式实现换行
+             * Tiptap, by default, uses <br /> to create a newline character when you press Enter + Shift.
+             * To ensure that some custom logic works (such as the insertion of zero-width characters), 
+             * we want Enter + Shift to create a new p tag to initiate a line break.
+             * This section intercepts the default operation and uses a newly created `<p>` tag to achieve line breaks.
+             */
+            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

@@ -1,4 +1,4 @@
-import { Attachment, Reference } from "./interface";
+import { Attachment, BaseSkill, Reference } from "./interface";
 import { strings } from './constants';
 
 export function getAttachmentType(item: Attachment | Reference) {
@@ -53,12 +53,8 @@ export function transformSelectSlot(obj: any) {
 
 export function transformSkillSlot(obj: any) {
     const { type, attrs } = obj;
-    const { value, info } = attrs;
-    return {
-        type,
-        value,
-        ...(JSON.parse(info) ?? {}),
-    };
+    const { value, label, hasTemplate } = attrs;
+    return omitUndefinedFromObj({ type, value, label, hasTemplate });
 }
 
 export function transformInputSlot(obj: any) {
@@ -71,14 +67,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,6 +116,10 @@ export function transformJSONResult(input: any, customTransformObj: Map<string,
                 const lastItem = output[output.length - 1];
                 if (lastItem && lastItem.type === 'text') {
                     lastItem.text += result.text;
+                } else if (typeof result.text === 'string') {
+                    // 如果 result.text 为空字符串（比如text 节点中只有单个的零宽字符），则无需作为 output 结果
+                    // if result.text is an empty string，then it does not need to be included in output result.
+                    result.text.length && output.push(result);
                 } else {
                     output.push(result);
                 }
@@ -134,7 +138,45 @@ export function getCustomSlotAttribute() {
         default: true,
         parseHTML: element => true,
         renderHTML: attributes => ({
-            'data-custom-slot': attributes.isCustomSlot ? 'true' : undefined,
+            '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 omitUndefinedFromObj(obj);
+        }
+    }
+    return undefined;
+}
+
+
+function omitUndefinedFromObj(obj: { [key: string]: any }) {
+    return Object.fromEntries(
+        Object.entries(obj).filter(([key, value]) => value !== undefined)
+    );
+}
+
+export function getSkillSlotString(skill: BaseSkill) {
+    let skillParams = '';
+    skill.label && (skillParams += ` data-label=${skill.label}`);
+    skill.value && (skillParams += ` data-value=${skill.value}`);
+    (typeof skill.hasTemplate === 'boolean') && (skillParams += ` data-template=${skill.hasTemplate}`);
+    return `<skill-slot ${skillParams}"></skill-slot>`;
 }

package/chat/foundation.ts

@@ -145,6 +145,10 @@ export default class ChatFoundation <P = Record<string, any>, S = Record<string,
         return scroll;
     }, 100)
 
+    handleScrollContainerResize = () => {
+        this.getScroll(this._adapter.getContainerRef());
+    }
+
     clearContext = (e: any) => {
         const { chats } = this.getStates();
         if (chats[chats.length - 1].role === ROLE.DIVIDER) {

package/cropper/cropper.scss

@@ -6,6 +6,11 @@ $half_corner_width: calc($width-cropper_box_corner / 2);
 .#{$module} {
     position: relative;
 
+    & img {
+      // To avoid the `max-Width` setting of `img` to 100% in `tailwindCSS` affecting the style of img in Cropper.
+      max-width: none;
+    }
+
     &-img {
       position: absolute;
       user-select: none;

package/image/image.scss

@@ -10,6 +10,15 @@ $module: #{$prefix}-image;
     display: inline-block;
     overflow: hidden;
 
+    img {
+        /**
+            * In tailwind, the max-width of img/video is set to 100%, 
+            * which will affect the amplification effect of the picture.
+            * So we need to set max-width to none.
+        */ 
+        max-width: none;
+    }
+
     &-img {
         vertical-align: top;
         border-radius: inherit;
@@ -204,12 +213,6 @@ $module: #{$prefix}-image;
             // transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
             z-index: 0;
             user-select: none;
-            /**
-             * In tailwind, the max-width of img/video is set to 100%, 
-             * which will affect the amplification effect of the picture.
-             * So we need to set max-width to none.
-            */
-            max-width: none;
         }
 
         &-spin {

package/lib/cjs/aiChatDialogue/dataAdapter/chatInputToChatCompletion.js

@@ -49,9 +49,12 @@ function chatInputToChatCompletion(inputContent) {
   }
   return {
     role: "user",
-    content: inputs,
-    // createdAt: created_at, // todo: 产生消息时给 createdat 还是发送时？
-    // model: model, // todo: inputContent 中未包含 model 信息
-    references
+    messages: [{
+      role: "user",
+      content: inputs
+    }],
+    model: setup === null || setup === void 0 ? void 0 : setup.model,
+    references,
+    setup: setup !== null && setup !== void 0 ? setup : {}
   };
 }

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,7 +24,8 @@ class AIChatInputFoundation extends _foundation.default {
         skill: skill,
         skillVisible: false
       });
-      this._adapter.setContent(`<skill-slot data-value="${skill.label}"></skill-slot>`);
+      this._adapter.notifySkillChange(skill);
+      this._adapter.setContent((0, _utils.getSkillSlotString)(skill));
       this._adapter.focusEditor();
     };
     this.changeTemplateVisible = value => {
@@ -170,16 +171,27 @@ class AIChatInputFoundation extends _foundation.default {
         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 (skill && !html.includes('</skill-slot>')) {
         this.setState({
-          skill: {},
+          skill: undefined,
           templateVisible: false
         });
+        this._adapter.notifySkillChange(undefined);
+        this._adapter.notifyContentChange([]);
+        return;
+      } else if (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
       });
@@ -245,7 +257,8 @@ class AIChatInputFoundation extends _foundation.default {
     this.handleSend = () => {
       var _a, _b;
       const {
-        generating
+        generating,
+        transformer
       } = this.getProps();
       if (generating) {
         this._adapter.notifyStopGenerate();
@@ -262,7 +275,7 @@ class AIChatInputFoundation extends _foundation.default {
         let richTextResult = [];
         if (editor) {
           const json = (_a = editor.getJSON) === null || _a === void 0 ? void 0 : _a.call(editor);
-          richTextResult = (0, _utils.transformJSONResult)(json);
+          richTextResult = (0, _utils.transformJSONResult)(json, transformer);
         }
         // close popup layer for template/skill/suggestion
         this.setState({
@@ -323,6 +336,29 @@ class AIChatInputFoundation extends _foundation.default {
         this.handleSend();
         return true;
       }
+      if (event.key === 'Enter' && event.shiftKey) {
+        /**
+         * Tiptap 默认情况下 Enter + Shift 时候是使用 <br /> 实现换行
+         * 为保证自定义的一些逻辑生效（比如零宽字符的插入），Enter + Shift 希望实现通过新建 p 标签的方式完成换行
+         * 此处拦截默认操作，使用新建 p 标签方式实现换行
+         * Tiptap, by default, uses <br /> to create a newline character when you press Enter + Shift.
+         * To ensure that some custom logic works (such as the insertion of zero-width characters),
+         * we want Enter + Shift to create a new p tag to initiate a line break.
+         * This section intercepts the default operation and uses a newly created `<p>` tag to achieve line breaks.
+         */
+        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

@@ -1,4 +1,4 @@
-import { Attachment, Reference } from "./interface";
+import { Attachment, BaseSkill, Reference } from "./interface";
 export declare function getAttachmentType(item: Attachment | Reference): any;
 export declare function isImageType(item: Attachment | Reference): any;
 export declare function getContentType(type: string): string;
@@ -6,18 +6,27 @@ export declare function transformSelectSlot(obj: any): {
     type: string;
     text: any;
 };
-export declare function transformSkillSlot(obj: any): any;
+export declare function transformSkillSlot(obj: any): {
+    [k: string]: 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;
     parseHTML: (element: any) => boolean;
     renderHTML: (attributes: any) => {
-        'data-custom-slot': string;
+        'data-custom-slot': boolean;
     };
 };
+export declare function findSkillSlotInString(content: string): {
+    [k: string]: any;
+};
+export declare function getSkillSlotString(skill: BaseSkill): string;

package/lib/cjs/aiChatInput/utils.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.findSkillSlotInString = findSkillSlotInString;
 exports.getAttachmentType = getAttachmentType;
 exports.getContentType = getContentType;
 exports.getCustomSlotAttribute = getCustomSlotAttribute;
+exports.getSkillSlotString = getSkillSlotString;
 exports.isImageType = isImageType;
 exports.transformInputSlot = transformInputSlot;
 exports.transformJSONResult = transformJSONResult;
@@ -69,19 +71,21 @@ function transformSelectSlot(obj) {
   };
 }
 function transformSkillSlot(obj) {
-  var _a;
   const {
     type,
     attrs
   } = obj;
   const {
     value,
-    info
+    label,
+    hasTemplate
   } = attrs;
-  return Object.assign({
+  return omitUndefinedFromObj({
     type,
-    value
-  }, (_a = JSON.parse(info)) !== null && _a !== void 0 ? _a : {});
+    value,
+    label,
+    hasTemplate
+  });
 }
 function transformInputSlot(obj) {
   var _a, _b;
@@ -96,9 +100,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,6 +151,10 @@ function transformJSONResult(input) {
         const lastItem = output[output.length - 1];
         if (lastItem && lastItem.type === 'text') {
           lastItem.text += result.text;
+        } else if (typeof result.text === 'string') {
+          // 如果 result.text 为空字符串（比如text 节点中只有单个的零宽字符），则无需作为 output 结果
+          // if result.text is an empty string，then it does not need to be included in output result.
+          result.text.length && output.push(result);
         } else {
           output.push(result);
         }
@@ -157,7 +171,42 @@ function getCustomSlotAttribute() {
     default: true,
     parseHTML: element => true,
     renderHTML: attributes => ({
-      'data-custom-slot': attributes.isCustomSlot ? 'true' : undefined
+      '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 omitUndefinedFromObj(obj);
+    }
+  }
+  return undefined;
+}
+function omitUndefinedFromObj(obj) {
+  return Object.fromEntries(Object.entries(obj).filter(_ref => {
+    let [key, value] = _ref;
+    return value !== undefined;
+  }));
+}
+function getSkillSlotString(skill) {
+  let skillParams = '';
+  skill.label && (skillParams += ` data-label=${skill.label}`);
+  skill.value && (skillParams += ` data-value=${skill.value}`);
+  typeof skill.hasTemplate === 'boolean' && (skillParams += ` data-template=${skill.hasTemplate}`);
+  return `<skill-slot ${skillParams}"></skill-slot>`;
 }

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

@@ -64,6 +64,7 @@ export default class ChatFoundation<P = Record<string, any>, S = Record<string,
     scrollToBottomWithAnimation: () => void;
     containerScroll: (e: any) => void;
     getScroll: import("lodash").DebouncedFunc<(target: any) => typeof scroll>;
+    handleScrollContainerResize: () => void;
     clearContext: (e: any) => void;
     onMessageSend: (input: string, attachment: any[]) => void;
     onHintClick: (hint: string) => void;

package/lib/cjs/chat/foundation.js

@@ -90,6 +90,9 @@ class ChatFoundation extends _foundation.default {
       }
       return scroll;
     }, 100);
+    this.handleScrollContainerResize = () => {
+      this.getScroll(this._adapter.getContainerRef());
+    };
     this.clearContext = e => {
       const {
         chats

package/lib/cjs/cropper/cropper.css

@@ -4,6 +4,9 @@
 .semi-cropper {
   position: relative;
 }
+.semi-cropper img {
+  max-width: none;
+}
 .semi-cropper-img {
   position: absolute;
   user-select: none;

package/lib/cjs/cropper/cropper.scss

@@ -6,6 +6,11 @@ $half_corner_width: calc($width-cropper_box_corner / 2);
 .#{$module} {
     position: relative;
 
+    & img {
+      // To avoid the `max-Width` setting of `img` to 100% in `tailwindCSS` affecting the style of img in Cropper.
+      max-width: none;
+    }
+
     &-img {
       position: absolute;
       user-select: none;

package/lib/cjs/image/image.css

@@ -7,6 +7,14 @@
   display: inline-block;
   overflow: hidden;
 }
+.semi-image img {
+  /**
+      * In tailwind, the max-width of img/video is set to 100%, 
+      * which will affect the amplification effect of the picture.
+      * So we need to set max-width to none.
+  */
+  max-width: none;
+}
 .semi-image-img {
   vertical-align: top;
   border-radius: inherit;
@@ -177,12 +185,6 @@
   transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
   z-index: 0;
   user-select: none;
-  /**
-   * In tailwind, the max-width of img/video is set to 100%, 
-   * which will affect the amplification effect of the picture.
-   * So we need to set max-width to none.
-  */
-  max-width: none;
 }
 .semi-image-preview-image-spin {
   position: absolute;

package/lib/cjs/image/image.scss

@@ -10,6 +10,15 @@ $module: #{$prefix}-image;
     display: inline-block;
     overflow: hidden;
 
+    img {
+        /**
+            * In tailwind, the max-width of img/video is set to 100%, 
+            * which will affect the amplification effect of the picture.
+            * So we need to set max-width to none.
+        */ 
+        max-width: none;
+    }
+
     &-img {
         vertical-align: top;
         border-radius: inherit;
@@ -204,12 +213,6 @@ $module: #{$prefix}-image;
             // transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
             z-index: 0;
             user-select: none;
-            /**
-             * In tailwind, the max-width of img/video is set to 100%, 
-             * which will affect the amplification effect of the picture.
-             * So we need to set max-width to none.
-            */
-            max-width: none;
         }
 
         &-spin {

package/lib/cjs/tag/tag.scss

@@ -139,7 +139,7 @@ $types: "ghost", "solid", "light";
     &-avatar-circle.#{$module}-small,
     &-avatar-circle.#{$module}-default {
         // when avatarShape=circle change tag border radius
-        border-radius: $height-tag_small * 0.5 + 1;
+        border-radius: $height-tag_small * 0.5 + 1px;
 
         .#{$prefix}-avatar {
             width: $width-tag_avatar_circle_small;
@@ -148,7 +148,7 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-circle.#{$module}-large {
-        border-radius: $height-tag_large * 0.5 + 1;
+        border-radius: $height-tag_large * 0.5 + 1px;
 
         .#{$prefix}-avatar {
             width: $width-tag_avatar_circle_large;
@@ -272,10 +272,10 @@ $types: "ghost", "solid", "light";
     }
 
     &-max.#{$module}-group-small {
-        height: ($height-tag_small + 2);
+        height: ($height-tag_small + 2px);
     }
     &-max.#{$module}-group-large {
-        height: ($height-tag_large + 2);
+        height: ($height-tag_large + 2px);
     }
     // &-small {
     //     height: ($height-tag_small + 2);

package/lib/es/aiChatDialogue/dataAdapter/chatInputToChatCompletion.js

@@ -43,9 +43,12 @@ export default function chatInputToChatCompletion(inputContent) {
   }
   return {
     role: "user",
-    content: inputs,
-    // createdAt: created_at, // todo: 产生消息时给 createdat 还是发送时？
-    // model: model, // todo: inputContent 中未包含 model 信息
-    references
+    messages: [{
+      role: "user",
+      content: inputs
+    }],
+    model: setup === null || setup === void 0 ? void 0 : setup.model,
+    references,
+    setup: setup !== null && setup !== void 0 ? setup : {}
   };
 }

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, getSkillSlotString, transformJSONResult } from './utils';
 const prefixCls = cssClasses.PREFIX;
 export default class AIChatInputFoundation extends BaseFoundation {
   constructor(adapter) {
@@ -17,7 +17,8 @@ export default class AIChatInputFoundation extends BaseFoundation {
         skill: skill,
         skillVisible: false
       });
-      this._adapter.setContent(`<skill-slot data-value="${skill.label}"></skill-slot>`);
+      this._adapter.notifySkillChange(skill);
+      this._adapter.setContent(getSkillSlotString(skill));
       this._adapter.focusEditor();
     };
     this.changeTemplateVisible = value => {
@@ -163,16 +164,27 @@ export default class AIChatInputFoundation extends BaseFoundation {
         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 (skill && !html.includes('</skill-slot>')) {
         this.setState({
-          skill: {},
+          skill: undefined,
           templateVisible: false
         });
+        this._adapter.notifySkillChange(undefined);
+        this._adapter.notifyContentChange([]);
+        return;
+      } else if (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
       });
@@ -238,7 +250,8 @@ export default class AIChatInputFoundation extends BaseFoundation {
     this.handleSend = () => {
       var _a, _b;
       const {
-        generating
+        generating,
+        transformer
       } = this.getProps();
       if (generating) {
         this._adapter.notifyStopGenerate();
@@ -255,7 +268,7 @@ export default class AIChatInputFoundation extends BaseFoundation {
         let richTextResult = [];
         if (editor) {
           const json = (_a = editor.getJSON) === null || _a === void 0 ? void 0 : _a.call(editor);
-          richTextResult = transformJSONResult(json);
+          richTextResult = transformJSONResult(json, transformer);
         }
         // close popup layer for template/skill/suggestion
         this.setState({
@@ -316,6 +329,29 @@ export default class AIChatInputFoundation extends BaseFoundation {
         this.handleSend();
         return true;
       }
+      if (event.key === 'Enter' && event.shiftKey) {
+        /**
+         * Tiptap 默认情况下 Enter + Shift 时候是使用 <br /> 实现换行
+         * 为保证自定义的一些逻辑生效（比如零宽字符的插入），Enter + Shift 希望实现通过新建 p 标签的方式完成换行
+         * 此处拦截默认操作，使用新建 p 标签方式实现换行
+         * Tiptap, by default, uses <br /> to create a newline character when you press Enter + Shift.
+         * To ensure that some custom logic works (such as the insertion of zero-width characters),
+         * we want Enter + Shift to create a new p tag to initiate a line break.
+         * This section intercepts the default operation and uses a newly created `<p>` tag to achieve line breaks.
+         */
+        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

@@ -1,4 +1,4 @@
-import { Attachment, Reference } from "./interface";
+import { Attachment, BaseSkill, Reference } from "./interface";
 export declare function getAttachmentType(item: Attachment | Reference): any;
 export declare function isImageType(item: Attachment | Reference): any;
 export declare function getContentType(type: string): string;
@@ -6,18 +6,27 @@ export declare function transformSelectSlot(obj: any): {
     type: string;
     text: any;
 };
-export declare function transformSkillSlot(obj: any): any;
+export declare function transformSkillSlot(obj: any): {
+    [k: string]: 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;
     parseHTML: (element: any) => boolean;
     renderHTML: (attributes: any) => {
-        'data-custom-slot': string;
+        'data-custom-slot': boolean;
     };
 };
+export declare function findSkillSlotInString(content: string): {
+    [k: string]: any;
+};
+export declare function getSkillSlotString(skill: BaseSkill): string;

package/lib/es/aiChatInput/utils.js

@@ -54,19 +54,21 @@ export function transformSelectSlot(obj) {
   };
 }
 export function transformSkillSlot(obj) {
-  var _a;
   const {
     type,
     attrs
   } = obj;
   const {
     value,
-    info
+    label,
+    hasTemplate
   } = attrs;
-  return Object.assign({
+  return omitUndefinedFromObj({
     type,
-    value
-  }, (_a = JSON.parse(info)) !== null && _a !== void 0 ? _a : {});
+    value,
+    label,
+    hasTemplate
+  });
 }
 export function transformInputSlot(obj) {
   var _a, _b;
@@ -81,9 +83,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,6 +134,10 @@ export function transformJSONResult(input) {
         const lastItem = output[output.length - 1];
         if (lastItem && lastItem.type === 'text') {
           lastItem.text += result.text;
+        } else if (typeof result.text === 'string') {
+          // 如果 result.text 为空字符串（比如text 节点中只有单个的零宽字符），则无需作为 output 结果
+          // if result.text is an empty string，then it does not need to be included in output result.
+          result.text.length && output.push(result);
         } else {
           output.push(result);
         }
@@ -142,7 +154,42 @@ export function getCustomSlotAttribute() {
     default: true,
     parseHTML: element => true,
     renderHTML: attributes => ({
-      'data-custom-slot': attributes.isCustomSlot ? 'true' : undefined
+      '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 omitUndefinedFromObj(obj);
+    }
+  }
+  return undefined;
+}
+function omitUndefinedFromObj(obj) {
+  return Object.fromEntries(Object.entries(obj).filter(_ref => {
+    let [key, value] = _ref;
+    return value !== undefined;
+  }));
+}
+export function getSkillSlotString(skill) {
+  let skillParams = '';
+  skill.label && (skillParams += ` data-label=${skill.label}`);
+  skill.value && (skillParams += ` data-value=${skill.value}`);
+  typeof skill.hasTemplate === 'boolean' && (skillParams += ` data-template=${skill.hasTemplate}`);
+  return `<skill-slot ${skillParams}"></skill-slot>`;
 }

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

@@ -64,6 +64,7 @@ export default class ChatFoundation<P = Record<string, any>, S = Record<string,
     scrollToBottomWithAnimation: () => void;
     containerScroll: (e: any) => void;
     getScroll: import("lodash").DebouncedFunc<(target: any) => typeof scroll>;
+    handleScrollContainerResize: () => void;
     clearContext: (e: any) => void;
     onMessageSend: (input: string, attachment: any[]) => void;
     onHintClick: (hint: string) => void;

package/lib/es/chat/foundation.js

@@ -83,6 +83,9 @@ export default class ChatFoundation extends BaseFoundation {
       }
       return scroll;
     }, 100);
+    this.handleScrollContainerResize = () => {
+      this.getScroll(this._adapter.getContainerRef());
+    };
     this.clearContext = e => {
       const {
         chats

package/lib/es/cropper/cropper.css

@@ -4,6 +4,9 @@
 .semi-cropper {
   position: relative;
 }
+.semi-cropper img {
+  max-width: none;
+}
 .semi-cropper-img {
   position: absolute;
   user-select: none;

package/lib/es/cropper/cropper.scss

@@ -6,6 +6,11 @@ $half_corner_width: calc($width-cropper_box_corner / 2);
 .#{$module} {
     position: relative;
 
+    & img {
+      // To avoid the `max-Width` setting of `img` to 100% in `tailwindCSS` affecting the style of img in Cropper.
+      max-width: none;
+    }
+
     &-img {
       position: absolute;
       user-select: none;

package/lib/es/image/image.css

@@ -7,6 +7,14 @@
   display: inline-block;
   overflow: hidden;
 }
+.semi-image img {
+  /**
+      * In tailwind, the max-width of img/video is set to 100%, 
+      * which will affect the amplification effect of the picture.
+      * So we need to set max-width to none.
+  */
+  max-width: none;
+}
 .semi-image-img {
   vertical-align: top;
   border-radius: inherit;
@@ -177,12 +185,6 @@
   transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
   z-index: 0;
   user-select: none;
-  /**
-   * In tailwind, the max-width of img/video is set to 100%, 
-   * which will affect the amplification effect of the picture.
-   * So we need to set max-width to none.
-  */
-  max-width: none;
 }
 .semi-image-preview-image-spin {
   position: absolute;

package/lib/es/image/image.scss

@@ -10,6 +10,15 @@ $module: #{$prefix}-image;
     display: inline-block;
     overflow: hidden;
 
+    img {
+        /**
+            * In tailwind, the max-width of img/video is set to 100%, 
+            * which will affect the amplification effect of the picture.
+            * So we need to set max-width to none.
+        */ 
+        max-width: none;
+    }
+
     &-img {
         vertical-align: top;
         border-radius: inherit;
@@ -204,12 +213,6 @@ $module: #{$prefix}-image;
             // transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
             z-index: 0;
             user-select: none;
-            /**
-             * In tailwind, the max-width of img/video is set to 100%, 
-             * which will affect the amplification effect of the picture.
-             * So we need to set max-width to none.
-            */
-            max-width: none;
         }
 
         &-spin {

package/lib/es/tag/tag.scss

@@ -139,7 +139,7 @@ $types: "ghost", "solid", "light";
     &-avatar-circle.#{$module}-small,
     &-avatar-circle.#{$module}-default {
         // when avatarShape=circle change tag border radius
-        border-radius: $height-tag_small * 0.5 + 1;
+        border-radius: $height-tag_small * 0.5 + 1px;
 
         .#{$prefix}-avatar {
             width: $width-tag_avatar_circle_small;
@@ -148,7 +148,7 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-circle.#{$module}-large {
-        border-radius: $height-tag_large * 0.5 + 1;
+        border-radius: $height-tag_large * 0.5 + 1px;
 
         .#{$prefix}-avatar {
             width: $width-tag_avatar_circle_large;
@@ -272,10 +272,10 @@ $types: "ghost", "solid", "light";
     }
 
     &-max.#{$module}-group-small {
-        height: ($height-tag_small + 2);
+        height: ($height-tag_small + 2px);
     }
     &-max.#{$module}-group-large {
-        height: ($height-tag_large + 2);
+        height: ($height-tag_large + 2px);
     }
     // &-small {
     //     height: ($height-tag_small + 2);

package/package.json

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

package/tag/tag.scss

@@ -139,7 +139,7 @@ $types: "ghost", "solid", "light";
     &-avatar-circle.#{$module}-small,
     &-avatar-circle.#{$module}-default {
         // when avatarShape=circle change tag border radius
-        border-radius: $height-tag_small * 0.5 + 1;
+        border-radius: $height-tag_small * 0.5 + 1px;
 
         .#{$prefix}-avatar {
             width: $width-tag_avatar_circle_small;
@@ -148,7 +148,7 @@ $types: "ghost", "solid", "light";
     }
 
     &-avatar-circle.#{$module}-large {
-        border-radius: $height-tag_large * 0.5 + 1;
+        border-radius: $height-tag_large * 0.5 + 1px;
 
         .#{$prefix}-avatar {
             width: $width-tag_avatar_circle_large;
@@ -272,10 +272,10 @@ $types: "ghost", "solid", "light";
     }
 
     &-max.#{$module}-group-small {
-        height: ($height-tag_small + 2);
+        height: ($height-tag_small + 2px);
     }
     &-max.#{$module}-group-large {
-        height: ($height-tag_large + 2);
+        height: ($height-tag_large + 2px);
     }
     // &-small {
     //     height: ($height-tag_small + 2);