@douyinfe/semi-foundation 2.62.0 → 2.63.0-beta.0

package/chat/constants.ts

@@ -0,0 +1,68 @@
+import {
+    BASE_CLASS_PREFIX
+} from '../base/constants';
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX}-chat`,
+    PREFIX_DIVIDER: `${BASE_CLASS_PREFIX}-chat-divider`,
+    PREFIX_CHAT_BOX: `${BASE_CLASS_PREFIX}-chat-chatBox`,
+    PREFIX_CHAT_BOX_ACTION: `${BASE_CLASS_PREFIX}-chat-chatBox-action`,
+    PREFIX_INPUT_BOX: `${BASE_CLASS_PREFIX}-chat-inputBox`,
+    PREFIX_ATTACHMENT: `${BASE_CLASS_PREFIX}-chat-attachment`,
+    PREFIX_HINT: `${BASE_CLASS_PREFIX}-chat-hint`,
+};
+
+const ROLE = {
+    USER: 'user',
+    ASSISTANT: 'assistant',
+    SYSTEM: 'system',
+    DIVIDER: 'divider',
+};
+
+const CHAT_ALIGN = {
+    LEFT_RIGHT: 'leftRight',
+    LEFT_ALIGN: 'leftAlign',
+};
+
+const MESSAGE_STATUS = {
+    LOADING: 'loading',
+    INCOMPLETE: 'incomplete',
+    COMPLETE: 'complete',
+    ERROR: 'error'
+};
+
+const PIC_SUFFIX_ARRAY = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'];
+
+const PIC_PREFIX = 'image/';
+
+const SCROLL_ANIMATION_TIME = 300;
+const SHOW_SCROLL_GAP = 100;
+
+const MODE = {
+    BUBBLE: 'bubble',
+    NO_BUBBLE: 'noBubble',
+    USER_BUBBLE: 'userBubble'
+};
+
+const SEND_HOT_KEY = {
+    ENTER: 'enter',
+    SHIFT_PLUS_ENTER: 'shift+enter'
+};
+
+const strings = {
+    ROLE,
+    CHAT_ALIGN,
+    MESSAGE_STATUS,
+    PIC_SUFFIX_ARRAY,
+    PIC_PREFIX,
+    SCROLL_ANIMATION_TIME,
+    SHOW_SCROLL_GAP,
+    MODE,
+    SEND_HOT_KEY,
+};
+
+
+export {
+    cssClasses,
+    strings,
+};

package/chat/foundation.ts

@@ -0,0 +1,306 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import { strings } from "./constants";
+import { Animation } from '@douyinfe/semi-animation';
+import { debounce } from "lodash";
+import { getUuidv4 } from "../utils/uuid";
+import { handlePrevent } from "../utils/a11y";
+
+const { PIC_PREFIX, PIC_SUFFIX_ARRAY, ROLE, 
+    SCROLL_ANIMATION_TIME, SHOW_SCROLL_GAP
+} = strings;
+
+export interface Content {
+    type: 'text' | 'image_url' | 'file_url';
+    text?: string;
+    image_url?: { 
+        url: string;
+        [x: string]: any
+    };
+    file_url?: {
+        url: string;
+        name: string;
+        size: string;
+        type: string;
+        [x: string]: any
+    }
+}
+
+export interface Message {
+    role?: string;
+    name?: string;
+    id?: string;
+    content?: string | Content[];
+    parentId?: string;
+    createAt?: number;
+    status?: 'loading' | 'incomplete' | 'complete' | 'error';
+    [x: string]: any
+}
+
+export interface ChatAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getContainerRef: () => React.RefObject<HTMLDivElement>;
+    setWheelScroll: (flag: boolean) => void;
+    notifyChatsChange: (chats: Message[]) => void;
+    notifyLikeMessage: (message: Message) => void;
+    notifyDislikeMessage: (message: Message) => void;
+    notifyCopyMessage: (message: Message) => void;
+    notifyClearContext: () => void;
+    notifyMessageSend: (content: string, attachment: any[]) => void;
+    notifyInputChange: (props: { inputValue: string; attachment: any[]}) => void;
+    setBackBottomVisible: (visible: boolean) => void;
+    registerWheelEvent: () => void;
+    unRegisterWheelEvent: () => void;
+    notifyStopGenerate: (e: any) => void;
+    notifyHintClick: (hint: string) => void;
+    setUploadAreaVisible: (visible: boolean) => void;
+    manualUpload: (e: any) => void;
+    getDropAreaElement: () => HTMLDivElement
+}
+
+
+export default class ChatFoundation <P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ChatAdapter<P, S>, P, S> {
+
+    animation: any;
+
+    constructor(adapter: ChatAdapter<P, S>) {
+        super({ ...adapter });
+    }
+
+    init = () => {
+        this.scrollToBottomImmediately();
+        this._adapter.registerWheelEvent();
+    }
+
+    destroy = () => {
+        this.animation && this.animation.destroy();
+        this._adapter.unRegisterWheelEvent();
+    }
+
+    stopGenerate = (e: any) => {
+        this._adapter.notifyStopGenerate(e);
+    }
+
+    scrollToBottomImmediately = () => {
+        const containerRef = this._adapter.getContainerRef();
+        const element = containerRef?.current;
+        if (element) {
+            element.scrollTop = element.scrollHeight;
+        } 
+    }
+
+    scrollToBottomWithAnimation = () => {
+        const duration = SCROLL_ANIMATION_TIME;
+        const containerRef = this._adapter.getContainerRef();
+        const element = containerRef?.current;
+        if (!element) {
+            return;
+        }
+        const from = element.scrollTop;
+        const to = element.scrollHeight;
+        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) => {
+        if (e.target !== e.currentTarget) {
+            return;
+        }
+        e.persist();
+        const update = () => {
+            this.getScroll(e.target);
+        };
+        requestAnimationFrame(update);
+    }
+
+    getScroll = debounce((target: any) => {
+        const scrollHeight = target.scrollHeight;
+        const clientHeight = target.clientHeight;
+        const scrollTop = target.scrollTop;
+        const { backBottomVisible } = this.getStates();
+        if (scrollHeight - scrollTop - clientHeight <= SHOW_SCROLL_GAP) {
+            if (backBottomVisible) {
+                this._adapter.setBackBottomVisible(false);
+            }
+        } else {
+            if (!backBottomVisible) {
+                this._adapter.setBackBottomVisible(true);
+            }
+        }
+        return scroll;
+    }, 100)
+
+    clearContext = (e: any) => {
+        const { chats } = this.getStates();
+        if (chats[chats.length - 1].role === ROLE.DIVIDER) {
+            return;
+        }
+        const dividerMessage = {
+            role: ROLE.DIVIDER,
+            id: getUuidv4(),
+            createAt: Date.now(),
+        };
+        const newChats = [...chats, dividerMessage];
+        this._adapter.notifyChatsChange(newChats);
+        this._adapter.notifyClearContext();
+    } 
+
+    onMessageSend = (input: string, attachment: any[]) => {
+        let content;
+        if (Boolean(attachment) && attachment.length === 0) {
+            content = input;
+        } else {
+            content = [];
+            input && content.push({ type: 'text', text: input });
+            (attachment ?? []).map(item => {
+                const { fileInstance, name = '', url, size } = item;
+                const suffix = name.split('.').pop();
+                const isImg = fileInstance?.type?.startsWith(PIC_PREFIX) || PIC_SUFFIX_ARRAY.includes(suffix);
+                if (isImg) {
+                    content.push({ 
+                        type: 'image_url', 
+                        image_url: { url: url } 
+                    });
+                } else {
+                    content.push({ 
+                        type: 'file_url', 
+                        file_url: {
+                            url: url,
+                            name: name,
+                            size: size,
+                            type: fileInstance?.type
+                        }
+                    });
+                }
+            });
+        }
+        if (content) {
+            const newMessage = {
+                role: ROLE.USER,
+                id: getUuidv4(),
+                createAt: Date.now(),
+                content,
+            };
+            this._adapter.notifyChatsChange([...this.getStates().chats, newMessage]);
+        }
+        this._adapter.setWheelScroll(false);
+        this._adapter.registerWheelEvent();
+        this._adapter.notifyMessageSend(input, attachment);
+    }
+
+    onHintClick = (hint: string) => {
+        const { chats } = this.getStates();
+        const newMessage = {
+            role: ROLE.USER,
+            id: getUuidv4(),
+            createAt: Date.now(),
+            content: hint,
+        };
+        const newChats = [...chats, newMessage];
+        this._adapter.notifyChatsChange(newChats);
+        this._adapter.notifyHintClick(hint);
+    }
+
+    onInputChange = (props: { inputValue: string; attachment: any[]}) => {
+        this._adapter.notifyInputChange(props as any);
+    }
+
+    deleteMessage = (message: Message) => {
+        const { onMessageDelete, onChatsChange } = this.getProps();
+        const { chats } = this.getStates();
+        onMessageDelete?.(message);
+        const newChats = chats.filter(item => item.id !== message.id);
+        onChatsChange?.(newChats);
+    }
+
+    likeMessage = (message: Message) => {
+        const { chats } = this.getStates();
+        this._adapter.notifyLikeMessage(message);
+        const index = chats.findIndex(item => item.id === message.id);
+        const newChat = {
+            ...chats[index],
+            like: !chats[index].like,
+            dislike: false,
+        };
+        const newChats = [...chats];
+        newChats.splice(index, 1, newChat);
+        this._adapter.notifyChatsChange(newChats);
+    }
+  
+    dislikeMessage = (message: Message) => {
+        const { chats } = this.getStates();
+        this._adapter.notifyDislikeMessage(message);
+        const index = chats.findIndex(item => item.id === message.id);
+        const newChat = {
+            ...chats[index],
+            like: false,
+            dislike: !chats[index].dislike,
+        };
+        const newChats = [...chats];
+        newChats.splice(index, 1, newChat);
+        this._adapter.notifyChatsChange(newChats);
+    }
+  
+    resetMessage = (message: Message) => {
+        const { chats } = this.getStates();
+        const lastMessage = chats[chats.length - 1];
+        const newLastChat = {
+            ...lastMessage,
+            status: 'loading',
+            content: '',
+            id: getUuidv4(),
+            createAt: Date.now(),
+        };
+        const newChats = chats.slice(0, -1).concat(newLastChat);
+        this._adapter.notifyChatsChange(newChats);
+        const { onMessageReset } = this.getProps();
+        onMessageReset?.(message);
+    }
+
+    handleDragOver = (e: any) => {
+        this._adapter.setUploadAreaVisible(true);
+    }
+
+    handleContainerDragOver = (e: any) => {
+        handlePrevent(e);
+    }
+
+    handleContainerDrop = (e) => {
+        this._adapter.setUploadAreaVisible(false);
+        this._adapter.manualUpload(e?.dataTransfer?.files);
+        // 禁用默认实现，防止文件被打开
+        //Disable the default implementation, preventing files from being opened
+        handlePrevent(e);
+    }
+    
+    handleContainerDragLeave = (e: any) => {
+        handlePrevent(e);
+        // 鼠标移动至 container 的子元素，则不做任何操作
+        // If the mouse moves to the child element of container, no operation will be performed.
+        const dropAreaElement = this._adapter.getDropAreaElement();
+        if (dropAreaElement !== e.target && dropAreaElement.contains(e.target)) {
+            return;
+        }
+        /**
+         * 延迟隐藏 container ，防止父元素的 mouseOver 被触发，导致 container 无法隐藏
+         * Delay hiding of the container to prevent the parent element's mouseOver from being triggered, 
+         * causing the container to be unable to be hidden.
+        */
+        setTimeout(() => {
+            this._adapter.setUploadAreaVisible(false);
+        });
+    }
+}
+

package/chat/inputboxFoundation.ts

@@ -0,0 +1,98 @@
+import { handlePrevent } from "../utils/a11y";
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import { strings } from './constants';
+
+const { SEND_HOT_KEY } = strings;
+
+export interface InputBoxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    notifyInputChange: (props: { inputValue: string; attachment: any[]}) => void;
+    setInputValue: (value: string) => void;
+    setAttachment: (attachment: any[]) => void;
+    notifySend: (content: string, attachment: any[]) => void
+}
+
+export default class InputBoxFoundation <P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<InputBoxAdapter<P, S>, P, S> {
+    constructor(adapter: InputBoxAdapter<P, S>) {
+        super({ ...adapter });
+    }
+
+    onInputAreaChange = (value: string) => {
+        const attachment = this.getState('attachment');
+        this._adapter.setInputValue(value);
+        this._adapter.notifyInputChange({ inputValue: value, attachment });
+    }
+
+    onAttachmentAdd = (props: any) => {
+        const { fileList } = props;
+        const { uploadProps } = this.getProps();
+        const { onChange } = uploadProps;
+        if (onChange) {
+            onChange(props);
+        }
+        const { content } = this.getStates();
+        let newFileList = [...fileList];
+        this._adapter.setAttachment(newFileList);
+        this._adapter.notifyInputChange({
+            inputValue: content,
+            attachment: newFileList
+        });
+    }
+    
+    onAttachmentDelete = (props: any) => {
+        const { content, attachment } = this.getStates();
+        const newAttachMent = attachment.filter(item => item.uid !== props.uid);
+        this._adapter.setAttachment(newAttachMent);
+        this._adapter.notifyInputChange({
+            inputValue: content,
+            attachment: newAttachMent
+        });
+    }
+    
+    onSend = (e: any) => {
+        if (this.getDisableSend()) {
+            return; 
+        }
+        const { content, attachment } = this.getStates();
+        this._adapter.setInputValue('');
+        this._adapter.setAttachment([]);
+        this._adapter.notifySend(content, attachment);
+    }
+
+    getDisableSend = () => {
+        const { content, attachment } = this.getStates();
+        const { disableSend: disableSendInProps } = this.getProps();
+        const disabledSend = disableSendInProps || (content.length === 0 && attachment.length === 0);
+        return disabledSend;
+    }
+
+    onEnterPress = (e: any) => {
+        const { sendHotKey } = this.getProps();
+        if (sendHotKey === SEND_HOT_KEY.SHIFT_PLUS_ENTER && e.shiftKey === false) {
+            return ;
+        } else if (sendHotKey === SEND_HOT_KEY.ENTER && e.shiftKey === true) {
+            return ;
+        }
+        handlePrevent(e);
+        this.onSend(e);
+    };
+
+    onPaste = (e: any) => {
+        const items = e.clipboardData?.items;
+        const { manualUpload } = this.getProps();
+        let files = [];
+        if (items) {
+            for (const it of items) {
+                const file = it.getAsFile();
+                file && files.push(it.getAsFile());
+            }
+            if (files.length) {
+                // 文件上传，则需要阻止默认粘贴行为
+                // File upload, you need to prevent the default paste behavior
+                manualUpload(files);
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+    }
+
+}

package/chat/rtl.scss

@@ -0,0 +1,22 @@
+
+$module: #{$prefix}-chat;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        &-hint-icon {
+            transform: scaleX(-1);
+        }
+
+        &-inputBox-sendButton-icon {
+            transform: rotate(225deg);
+        }
+
+        &-chatBox-action-icon-redo {
+            transform: scaleX(-1);
+        } 
+    }
+   
+}

package/chat/variables.scss

@@ -0,0 +1,125 @@
+// radius
+$radius-chat_chatBox_content: var(--semi-border-radius-large);  // 聊天框内容圆角
+$radius-chat_inputBox_container: 16px; // 输入框容器圆角
+$radius-chat_attachment_img: var(--semi-border-radius-medium); // 附件图片圆角
+$radius-chat_attachment_file: var(--semi-border-radius-medium); // 附件文件圆角
+$radius-chat_hint_item: var(--semi-border-radius-large); // 提示条圆角
+$radius-chat_chatBox_content_code: var(--semi-border-radius-large); // 代码块圆角
+$radius-chat_chatBox_content_code_topSlot_copy: var(--semi-border-radius-large); // 代码块顶部复制按钮圆角
+$radius-chat_dropArea: 16px; // 拖拽上传区域圆角
+
+//color
+$color-chat_action_content-bg: var(--semi-color-bg-0); // 返回按钮/停止生成内容按钮背景颜色
+$color-chat_action_content-border: var(--semi-color-border); // 返回按钮/停止生成按钮描边颜色
+$color-chat_divider: var(--semi-color-text-2); // 分割线颜色
+$color-chat_chatBox_title: var(--semi-color-text-0); //聊天框标题颜色
+$color-chat_chatBox_action_icon: var(--semi-color-text-2); // 聊天框操作区域按钮图标颜色
+$color-chat_chatBox_action_icon-hover: var(--semi-color-text-0); // 聊天框操作区域按钮图标hover颜色
+$color-chat_chatBox_action-bg-hover: transparent; // 聊天框操作区域按钮hover背景颜色
+$color-chat_chatBox_content_text: var(--semi-color-text-0); // 聊天框内容文字颜色
+$color-chat_chatBox_content_bg: var(--semi-color-fill-0); // 聊天框内容背景颜色
+$color-chat_chatBox_content_user-bg: var(--semi-color-primary); // 聊天框内容用户背景颜色
+$color-chat_chatBox_content_user-text: var(--semi-color-white); // 聊天框内容用户文字颜色
+$color-chat_chatBox_content_error-bg: var(--semi-color-danger-hover); // 聊天框内容错误背景颜色
+$color-chat_chatBox_content_error-text: var(--semi-color-white); // 聊天框内容错误文字颜色
+$color-chat_inputBottom_clearButton_icon: var(--semi-color-text-2); //清空按钮图标颜色
+$color-chat_inputBottom_uploadButton_icon: var(--semi-color-text-0); // 上传按钮图标颜色
+$color-chat_inputBottom_sendButton_icon-disable: var(--semi-color-primary-disabled); // 发送按钮禁用态图标颜色
+$color-chat_inputBox_container-border: var(--semi-color-border);  // 输入框容器边框颜色
+$color-chat_attachment_clear_icon: var(--semi-color-text-2);  // 附件清除图标颜色
+$color-chat_attachment_file-bg: var(--semi-color-fill-0); // 附件文件背景颜色
+$color-chat_chatBox_user_attachment_file-bg: var(--semi-color-bg-0); // 用户聊天框附件文件背景颜色
+$color-chat_chatBox_other_attachment_file-bg: var(--semi-color-fill-2); // 聊天框附件文件背景颜色
+$color-chat_attachment_file_icon: var(--semi-color-text-2); // 附件文件图标颜色
+$color-chat_attachment_file_title: var(--semi-color-text-0); // 附件文件标题颜色
+$color-chat_attachment_file_metadata_text: var(--semi-color-text-2); // 附件文件元数据文字颜色
+$color-chat_hint_item-border: var(--semi-color-border); // 提示条边框颜色
+$color-chat_hint_item-bg: transparent; // 提示条背景颜色
+$color-chat_hint_item-bg-hover: var(--semi-color-fill-0); // 提示条hover背景颜色
+$color-chat_hint_content_text: var(--semi-color-text-1); // 提示条文字颜色
+$color-chat_hint_icon: var(--semi-color-text-2); // 提示条图标颜色
+$color-chat_chatBox_loading-bg: var(--semi-color-text-0); // 聊天内容加载图标圆圈颜色
+$color-chat_chatBox_code_topSlot: rgba(var(--semi-white), 1);  // 代码块顶部字体颜色
+$color-chat_chatBox_code_topSlot-bg: rgba(var(--semi-grey-4), 1); //代码块顶部背景色
+$color-chat_chatBox_code_topSlot_toCopy-bg-hover: rgba(var(--semi-grey-5), 1); // 代码块顶部复制按钮hover背景色
+$color-chat_chatBox_code_content: var(--semi-color-bg-0); // 代码块内容背景色
+$color-chat_action_content-bg-hover: var(--semi-color-tertiary-light-hover); // 返回按钮/停止生成按钮hover背景颜色
+$color-chat_dropArea-bg: rgba(var(--semi-grey-2), 0.9); // 拖拽区域文字颜色
+$color-chat_dropArea-border: var(--semi-color-border); // 拖拽区域边框颜色
+
+// spacing
+$spacing-chat_paddingY: 12px; // chat组件上下内边距
+$spacing-chat_container-paddingX: 16px;  // 消息框水平内边距
+$spacing-chat_action_content-bottom: 0; // 返回按钮/停止生成按钮底部边距
+$spacing-chat_chatBox-marginY: 8px; // 聊天框上下外边距
+$spacing-chat_chatBox-columnGap: 12px; // 聊天框内容列间距
+$spacing-chat_chatBox_action-columnGap: 10px; // 聊天框操作区域按钮列间距
+$spacing-chat_chatBox_action-marginX: 10px; // 聊天框操作区域左右外边距
+$spacing-chat_chatBox_action_btn-padding: 0;  // 聊天框操作区域按钮内边距
+$spacing-chat_chatBox_content-paddingY: 8px;  // 聊天框内容上下内边距
+$spacing-chat_chatBox_content-paddingX: 12px;  // 聊天框内容左右内边距
+$spacing-chat_inputBox-paddingTop: 8px; // 输入框顶部内边距
+$spacing-chat_inputBox-paddingBottom: 8px; // 输入框底部内边距
+$spacing-chat_inputBox-paddingX: 16px; // 输入框左右内边距
+$spacing-chat_inputBox_container-padding: 11px; // 输入框容器内边距
+$spacing-chat_inputBox_inner-columnGap: 4px; // 输入框容器列间距
+// $spacing-chat_inputBox_textarea-marginX: 5px; // 输入框textArea左右内边距
+$spacing-chat_inputBox-marginY: 4px;
+$spacing-chat_attachment-columnGap: 10px; // 附件列间距
+$spacing-chat_attachment-RowGap: 5px; // 附件行间距
+$spacing-chat_attachment_clear-top: 8px;  // 附件清除图标顶部间距
+$spacing-chat_attachment_clear-right: 8px;  // 附件清除图标右内边距
+$spacing-chat_attachment_file-columnGap: 5px; // 文件附件列间距
+$spacing-chat_attachment_file-padding: 5px;  // 文件附件内边距
+$spacing-chat_chatBox_loading_item-gap: 15px; // 聊天内容加载图标间距 
+$spacing-chat_divider-marginY: 12px; // 分割线上下外边距
+$spacing-chat_chatBox_content_attachment-marginY: 4px; // 聊天框内容文件/图片上下外间距
+$spacing-chat_chatBox_content_code_topSlot-paddingX: 5px; // 聊天框代码块顶部上下内边距
+$spacing-chat_chatBox_content_code_topSlot-paddingY: 8px; // 聊天框代码块顶部左右内边距
+$spacing-chat_chatBox_content_code_topSlot_copy-columnGap: 5px; // 聊天框代码块顶部复制按钮列间距: 
+$spacing-chat_chatBox_content_code_topSlot_copy-padding: 5px; // 聊天框代码块顶部复制按钮列间距: 
+$spacing-chat_chatBox_wrap: 8px; // 聊天框外层间距
+$spacing-chat_hint-rowGap: 10px; // 提示条行间距
+$spacing-chat_hint-marginY: 12px; // 提示条容器上下外边距
+$spacing-chat_hint-marginLeft: 34px; // 提示条容器左外边距    
+$spacing-chat_hint_item-marginY: 8px; // 提示条上下外边距
+$spacing-chat_hint_item-marginX: 12px; // 提示条左右外边距
+$spacing-chat_hint_item-columnGap: 20px; // 提示条内容列间距
+$spacing-chat_chatBox_loading-item-marginX: 18px; // 聊天内容加载图标中心圆圈左右外边距
+$spacing-chat_chatBox_loading-item-marginY: 6px; // 聊天内容加载图标中心圆圈上下外边距
+
+// width
+$width-chat_backBottom_wrapper: 42px; // 返回按钮宽度
+$width-chat_action_content-border: 1px; // 返回按钮/停止生成按钮描边宽度
+$width-chat_inputBottom_clearButton: 48px; // 清空按钮宽度
+$width-chat_inputBottom_uploadButton: 32px; // 上传按钮宽度
+$width-chat_inputBottom_sendButton: 32px; // 发送按钮宽度
+$width-chat_inputBox_container-border: 1px; // 输入框容器边框宽度
+$width-chat_attachment_file: 50px; // 附件文件宽度
+$width-chat_hint_item-border: 1px; // 提示条边框宽度
+$width-chat_chatBox_loading: 8px; // 加载中单个圆圈图标宽度
+$width-chat_attachment_file_title: 90px; // 附件文件标题最大宽度
+$width-chat_max: 800px; // chat组件最大宽度
+$width-chat_dropArea-border: 5px; // 拖拽上传边框宽度
+$width-chat_chatBox_content_code_topSlot_copy: 150px; // 聊天框代码块顶部复制按钮最小宽度 
+// height
+$height-chat_action_stop: 42px; //停止生成按钮高度
+
+//font
+$font-chat_divider-fontWeight: $font-weight-regular; // 分割线字重
+$font-chat_divider-fontSize: $font-size-small; // 分割线字体大小
+$font-chat_chatBox_title-lineHeight: 20px; //聊天框标题行高
+$font-chat_chatBox_title-fontSize: $font-size-header-6; // 聊天框标题字体大小
+$font-chat_chatBox_title-fontWeight: $font-weight-regular; // 聊天框标题字重
+$font-chat_inputBottom_clearButton_icon-fontSize: 30px; // 输入区清空上下文按钮图标大小
+$font-chat_attachment_file_title-fontSize: $font-size-header-6; // 附件文件标题字体大小
+$font-chat_attachment_file_metadata-fontSize: $font-size-regular; // 附件文件元数据字体大小
+$font-chat_hint_content-fontSize: $font-size-regular; // 提示条文字大小
+// $font-chat_hint_icon: 20px; // 提示条图标大小
+$font-chat_chatBox_code_topSlot: 12px; // 代码块顶部字体大小
+$font-chat_chatBox_code_topSlot-lineHeight: 16px; //代码块顶部区域字体行高
+$font-chat_dropArea_text: 48px; // 拖拽上传区域文字大小
+
+//z-index
+$z-chat_dropArea: 10; // 拖拽上传区域z-index
+$z-chat_action: 1; // 返回按钮/停止生成按钮z-index

package/input/textareaFoundation.ts

@@ -171,6 +171,11 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
     }
 
     handleKeyDown(e: any) {
+        const { disabledEnterStartNewLine } = this.getProps();
+        if (disabledEnterStartNewLine && e.key === 'Enter' && !e.shiftKey) {
+            // Prevent default line wrapping behavior
+            e.preventDefault(); 
+        }
         this._adapter.notifyKeyDown(e);
         if (e.keyCode === 13) {
             this._adapter.notifyPressEnter(e);