@douyinfe/semi-foundation 2.92.2 → 2.93.0

package/aiChatDialogue/foundation.ts

@@ -185,6 +185,39 @@ export default class DialogueFoundation <P = Record<string, any>, S = Record<str
         this.animation.start();
     }
 
+    scrollToTopImmediately = () => {
+        const element = this._adapter.getContainerRef();
+        if (element) {
+            element.scrollTop = 0;
+        }
+    }
+
+    scrollToTopWithAnimation = () => {
+        const duration = strings.SCROLL_ANIMATION_TIME;
+        const element = this._adapter.getContainerRef();
+        if (!element) {
+            return;
+        }
+        const from = element.scrollTop;
+        const to = 0;
+        this.animation = new Animation(
+            {
+                from: { scrollTop: from },
+                to: { scrollTop: to },
+            },
+            {
+                duration,
+                easing: 'easeInOutCubic'
+            }
+        );
+
+        this.animation.on('frame', ({ scrollTop }: { scrollTop: number }) => {
+            element.scrollTop = scrollTop;
+        });
+
+        this.animation.start();
+    }
+
     containerScroll = (e: any) => {
         this._persistEvent(e);
         const update = () => {

package/aiChatInput/aiChatInput.scss

@@ -505,6 +505,20 @@ $module: #{$prefix}-aiChatInput;
                 height: 0;
                 pointer-events: none;
             }
+
+            // 当段落包含 skillSlot 时，用 ::after 让 placeholder 显示在 skill 后方
+            p.has-skill-slot.is-editor-empty:first-child::before {
+                content: none;
+            }
+            
+            p.has-skill-slot.is-editor-empty:first-child::after {
+                color: var(--semi-color-text-2);
+                content: attr(data-placeholder);
+                display: inline;
+                height: 0;
+                margin-left: $spacing-aiChatInput_skill_item-columnGap;
+                pointer-events: none;
+            }
     
             p {
                 margin: 0px;

package/input/textarea.scss

@@ -229,4 +229,56 @@ $module: #{$prefix}-input;
 
 }
 
+// Line number styles
+.#{$module}-textarea-wrapper-withLineNumber {
+    display: flex;
+    padding: 0;
+    align-items: flex-start;
+
+    .#{$module}-textarea-lineNumber {
+        flex-shrink: 0;
+        padding: $spacing-textarea-paddingY $spacing-textarea-paddingX;
+        background-color: var(--semi-color-fill-1);
+        border-right: 1px solid var(--semi-color-border);
+        color: var(--semi-color-text-2);
+        // Use common monospace font stack for better alignment
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        font-size: inherit;
+        line-height: 1.5;
+        text-align: right;
+        user-select: none;
+        min-width: 36px;
+        border-radius: $radius-input_wrapper 0 0 $radius-input_wrapper;
+        // Allow scrolling but hide scrollbar
+        overflow-y: auto;
+        overflow-x: hidden;
+        scrollbar-width: none; // Firefox
+        -ms-overflow-style: none; // IE 10+
+        &::-webkit-scrollbar {
+            display: none; // Chrome, Safari, Edge
+        }
+    }
+
+    // Content wrapper for textarea to participate in flex layout
+    .#{$module}-textarea-content {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .#{$module}-textarea-lineNumber-item {
+        display: flex;
+        // Align to the first visual line when soft-wrapping
+        align-items: flex-start;
+        justify-content: flex-end;
+        box-sizing: border-box;
+    }
+
+    .#{$module}-textarea {
+        border-radius: 0 $radius-input_wrapper $radius-input_wrapper 0;
+        line-height: 1.5;
+        flex: 1;
+    }
+}
+
 @import "./rtl.scss";

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

@@ -35,6 +35,8 @@ export default class DialogueFoundation<P = Record<string, any>, S = Record<stri
     onHintClick: (hint: string) => void;
     scrollToBottomImmediately: () => void;
     scrollToBottomWithAnimation: () => void;
+    scrollToTopImmediately: () => void;
+    scrollToTopWithAnimation: () => void;
     containerScroll: (e: any) => void;
     getScroll: import("lodash").DebouncedFunc<(target: any) => typeof scroll>;
 }

package/lib/cjs/aiChatDialogue/foundation.js

@@ -175,6 +175,39 @@ class DialogueFoundation extends _foundation.default {
       });
       this.animation.start();
     };
+    this.scrollToTopImmediately = () => {
+      const element = this._adapter.getContainerRef();
+      if (element) {
+        element.scrollTop = 0;
+      }
+    };
+    this.scrollToTopWithAnimation = () => {
+      const duration = _constants.strings.SCROLL_ANIMATION_TIME;
+      const element = this._adapter.getContainerRef();
+      if (!element) {
+        return;
+      }
+      const from = element.scrollTop;
+      const to = 0;
+      this.animation = new _semiAnimation.Animation({
+        from: {
+          scrollTop: from
+        },
+        to: {
+          scrollTop: to
+        }
+      }, {
+        duration,
+        easing: 'easeInOutCubic'
+      });
+      this.animation.on('frame', _ref2 => {
+        let {
+          scrollTop
+        } = _ref2;
+        element.scrollTop = scrollTop;
+      });
+      this.animation.start();
+    };
     this.containerScroll = e => {
       this._persistEvent(e);
       const update = () => {

package/lib/cjs/aiChatInput/aiChatInput.css

@@ -414,6 +414,17 @@
   height: 0;
   pointer-events: none;
 }
+.semi-aiChatInput-editor-content .tiptap p.has-skill-slot.is-editor-empty:first-child::before {
+  content: none;
+}
+.semi-aiChatInput-editor-content .tiptap p.has-skill-slot.is-editor-empty:first-child::after {
+  color: var(--semi-color-text-2);
+  content: attr(data-placeholder);
+  display: inline;
+  height: 0;
+  margin-left: 8px;
+  pointer-events: none;
+}
 .semi-aiChatInput-editor-content .tiptap p {
   margin: 0px;
   white-space: pre-wrap;

package/lib/cjs/aiChatInput/aiChatInput.scss

@@ -505,6 +505,20 @@ $module: #{$prefix}-aiChatInput;
                 height: 0;
                 pointer-events: none;
             }
+
+            // 当段落包含 skillSlot 时，用 ::after 让 placeholder 显示在 skill 后方
+            p.has-skill-slot.is-editor-empty:first-child::before {
+                content: none;
+            }
+            
+            p.has-skill-slot.is-editor-empty:first-child::after {
+                color: var(--semi-color-text-2);
+                content: attr(data-placeholder);
+                display: inline;
+                height: 0;
+                margin-left: $spacing-aiChatInput_skill_item-columnGap;
+                pointer-events: none;
+            }
     
             p {
                 margin: 0px;

package/lib/cjs/input/textarea.css

@@ -171,6 +171,49 @@
   color: var(--semi-color-warning);
 }
 
+.semi-input-textarea-wrapper-withLineNumber {
+  display: flex;
+  padding: 0;
+  align-items: flex-start;
+}
+.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber {
+  flex-shrink: 0;
+  padding: 5px 12px;
+  background-color: var(--semi-color-fill-1);
+  border-right: 1px solid var(--semi-color-border);
+  color: var(--semi-color-text-2);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: inherit;
+  line-height: 1.5;
+  text-align: right;
+  user-select: none;
+  min-width: 36px;
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber::-webkit-scrollbar {
+  display: none;
+}
+.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  box-sizing: border-box;
+}
+.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea {
+  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  line-height: 1.5;
+  flex: 1;
+}
+
 .semi-rtl .semi-input-wrapper,
 .semi-portal-rtl .semi-input-wrapper {
   direction: rtl;

package/lib/cjs/input/textarea.scss

@@ -229,4 +229,56 @@ $module: #{$prefix}-input;
 
 }
 
+// Line number styles
+.#{$module}-textarea-wrapper-withLineNumber {
+    display: flex;
+    padding: 0;
+    align-items: flex-start;
+
+    .#{$module}-textarea-lineNumber {
+        flex-shrink: 0;
+        padding: $spacing-textarea-paddingY $spacing-textarea-paddingX;
+        background-color: var(--semi-color-fill-1);
+        border-right: 1px solid var(--semi-color-border);
+        color: var(--semi-color-text-2);
+        // Use common monospace font stack for better alignment
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        font-size: inherit;
+        line-height: 1.5;
+        text-align: right;
+        user-select: none;
+        min-width: 36px;
+        border-radius: $radius-input_wrapper 0 0 $radius-input_wrapper;
+        // Allow scrolling but hide scrollbar
+        overflow-y: auto;
+        overflow-x: hidden;
+        scrollbar-width: none; // Firefox
+        -ms-overflow-style: none; // IE 10+
+        &::-webkit-scrollbar {
+            display: none; // Chrome, Safari, Edge
+        }
+    }
+
+    // Content wrapper for textarea to participate in flex layout
+    .#{$module}-textarea-content {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .#{$module}-textarea-lineNumber-item {
+        display: flex;
+        // Align to the first visual line when soft-wrapping
+        align-items: flex-start;
+        justify-content: flex-end;
+        box-sizing: border-box;
+    }
+
+    .#{$module}-textarea {
+        border-radius: 0 $radius-input_wrapper $radius-input_wrapper 0;
+        line-height: 1.5;
+        flex: 1;
+    }
+}
+
 @import "./rtl.scss";

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

@@ -35,6 +35,8 @@ export default class DialogueFoundation<P = Record<string, any>, S = Record<stri
     onHintClick: (hint: string) => void;
     scrollToBottomImmediately: () => void;
     scrollToBottomWithAnimation: () => void;
+    scrollToTopImmediately: () => void;
+    scrollToTopWithAnimation: () => void;
     containerScroll: (e: any) => void;
     getScroll: import("lodash").DebouncedFunc<(target: any) => typeof scroll>;
 }

package/lib/es/aiChatDialogue/foundation.js

@@ -168,6 +168,39 @@ export default class DialogueFoundation extends BaseFoundation {
       });
       this.animation.start();
     };
+    this.scrollToTopImmediately = () => {
+      const element = this._adapter.getContainerRef();
+      if (element) {
+        element.scrollTop = 0;
+      }
+    };
+    this.scrollToTopWithAnimation = () => {
+      const duration = strings.SCROLL_ANIMATION_TIME;
+      const element = this._adapter.getContainerRef();
+      if (!element) {
+        return;
+      }
+      const from = element.scrollTop;
+      const to = 0;
+      this.animation = new Animation({
+        from: {
+          scrollTop: from
+        },
+        to: {
+          scrollTop: to
+        }
+      }, {
+        duration,
+        easing: 'easeInOutCubic'
+      });
+      this.animation.on('frame', _ref2 => {
+        let {
+          scrollTop
+        } = _ref2;
+        element.scrollTop = scrollTop;
+      });
+      this.animation.start();
+    };
     this.containerScroll = e => {
       this._persistEvent(e);
       const update = () => {

package/lib/es/aiChatInput/aiChatInput.css

@@ -414,6 +414,17 @@
   height: 0;
   pointer-events: none;
 }
+.semi-aiChatInput-editor-content .tiptap p.has-skill-slot.is-editor-empty:first-child::before {
+  content: none;
+}
+.semi-aiChatInput-editor-content .tiptap p.has-skill-slot.is-editor-empty:first-child::after {
+  color: var(--semi-color-text-2);
+  content: attr(data-placeholder);
+  display: inline;
+  height: 0;
+  margin-left: 8px;
+  pointer-events: none;
+}
 .semi-aiChatInput-editor-content .tiptap p {
   margin: 0px;
   white-space: pre-wrap;

package/lib/es/aiChatInput/aiChatInput.scss

@@ -505,6 +505,20 @@ $module: #{$prefix}-aiChatInput;
                 height: 0;
                 pointer-events: none;
             }
+
+            // 当段落包含 skillSlot 时，用 ::after 让 placeholder 显示在 skill 后方
+            p.has-skill-slot.is-editor-empty:first-child::before {
+                content: none;
+            }
+            
+            p.has-skill-slot.is-editor-empty:first-child::after {
+                color: var(--semi-color-text-2);
+                content: attr(data-placeholder);
+                display: inline;
+                height: 0;
+                margin-left: $spacing-aiChatInput_skill_item-columnGap;
+                pointer-events: none;
+            }
     
             p {
                 margin: 0px;

package/lib/es/input/textarea.css

@@ -171,6 +171,49 @@
   color: var(--semi-color-warning);
 }
 
+.semi-input-textarea-wrapper-withLineNumber {
+  display: flex;
+  padding: 0;
+  align-items: flex-start;
+}
+.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber {
+  flex-shrink: 0;
+  padding: 5px 12px;
+  background-color: var(--semi-color-fill-1);
+  border-right: 1px solid var(--semi-color-border);
+  color: var(--semi-color-text-2);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: inherit;
+  line-height: 1.5;
+  text-align: right;
+  user-select: none;
+  min-width: 36px;
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber::-webkit-scrollbar {
+  display: none;
+}
+.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  box-sizing: border-box;
+}
+.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea {
+  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  line-height: 1.5;
+  flex: 1;
+}
+
 .semi-rtl .semi-input-wrapper,
 .semi-portal-rtl .semi-input-wrapper {
   direction: rtl;

package/lib/es/input/textarea.scss

@@ -229,4 +229,56 @@ $module: #{$prefix}-input;
 
 }
 
+// Line number styles
+.#{$module}-textarea-wrapper-withLineNumber {
+    display: flex;
+    padding: 0;
+    align-items: flex-start;
+
+    .#{$module}-textarea-lineNumber {
+        flex-shrink: 0;
+        padding: $spacing-textarea-paddingY $spacing-textarea-paddingX;
+        background-color: var(--semi-color-fill-1);
+        border-right: 1px solid var(--semi-color-border);
+        color: var(--semi-color-text-2);
+        // Use common monospace font stack for better alignment
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        font-size: inherit;
+        line-height: 1.5;
+        text-align: right;
+        user-select: none;
+        min-width: 36px;
+        border-radius: $radius-input_wrapper 0 0 $radius-input_wrapper;
+        // Allow scrolling but hide scrollbar
+        overflow-y: auto;
+        overflow-x: hidden;
+        scrollbar-width: none; // Firefox
+        -ms-overflow-style: none; // IE 10+
+        &::-webkit-scrollbar {
+            display: none; // Chrome, Safari, Edge
+        }
+    }
+
+    // Content wrapper for textarea to participate in flex layout
+    .#{$module}-textarea-content {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .#{$module}-textarea-lineNumber-item {
+        display: flex;
+        // Align to the first visual line when soft-wrapping
+        align-items: flex-start;
+        justify-content: flex-end;
+        box-sizing: border-box;
+    }
+
+    .#{$module}-textarea {
+        border-radius: 0 $radius-input_wrapper $radius-input_wrapper 0;
+        line-height: 1.5;
+        flex: 1;
+    }
+}
+
 @import "./rtl.scss";