فهرست منبع

feat: chat add allowsend

DaiQiangReal 5 ماه پیش
والد
کامیت
757fa38f30

+ 2 - 1
content/plus/chat/index-en-US.md

@@ -1641,6 +1641,7 @@ render(DefaultChat);
 | topSlot | top slot for chat | React.ReactNode | - |
 | uploadProps | Upload component properties, refer to details [Upload](/en-US/input/upload#API%20%E5%8F%82%E8%80%83) | UploadProps | - |
 | uploadTipProps | Upload component prompt attribute, refer to details [Tooltip](/en-US/show/tooltip#API%20%E5%8F%82%E8%80%83) | TooltipProps | - |
+| allowSend | Whether to allow sending text and files in the input box, controlled prop, default true | boolean | true |
 
 
 #### RoleConfig
@@ -1692,4 +1693,4 @@ render(DefaultChat);
 
 ## Design Token
 
-<DesignToken/>
+<DesignToken/>

+ 1 - 0
content/plus/chat/index.md

@@ -1632,6 +1632,7 @@ render(DefaultChat);
 | onInputChange | 输入区域信息变化时触发 | (props: { value?: string, attachment?: FileItem[] }) => void; | - |
 | onMessageBadFeedback | 消息负向反馈时触发 | (message: Message) => void | - |
 | onMessageCopy | 复制消息时触发 | (message: Message) => void | - |
+| allowSend | 是否允许输入框发送文本和文件,受控属性,默认 true | boolean | true |
 | onMessageDelete | 删除消息时触发 | (message: Message) => void | - |
 | onMessageGoodFeedback | 消息正向反馈时触发 | (message: Message) => void | - |
 | onMessageReset | 重置消息时触发 | (message: Message) => void | - |

+ 6 - 0
packages/semi-ui/chat/index.tsx

@@ -66,6 +66,11 @@ class Chat extends BaseComponent<ChatProps, ChatState> {
         uploadTipProps: PropTypes.object,
         mode: PropTypes.string,
         markdownRenderProps: PropTypes.object,
+        /**
+         * 是否允许输入框发送文字消息和文件
+         * 默认true,受控属性
+         */
+        allowSend: PropTypes.bool,
     };
 
     static defaultProps = getDefaultPropsFromGlobalConfig(Chat.__SemiComponentName__, {
@@ -386,6 +391,7 @@ class Chat extends BaseComponent<ChatProps, ChatState> {
                     </span>)}
                     {/* input area */}
                     <InputBox
+                        allowSend={this.props.allowSend}
                         showClearContext={showClearContext}
                         uploadRef={this.uploadRef}
                         manualUpload={this.adapter.manualUpload}

+ 8 - 4
packages/semi-ui/chat/inputBox/index.tsx

@@ -13,6 +13,7 @@ const { PREFIX_INPUT_BOX } = cssClasses;
 const { SEND_HOT_KEY } = strings;
 const textAutoSize = { minRows: 1, maxRows: 5 };
 
+// 新增 allowSend props,控制输入和发送
 class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
 
     inputAreaRef: React.RefObject<any>;
@@ -64,7 +65,7 @@ class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
     }
 
     renderUploadButton = () => {
-        const { uploadProps, uploadRef, uploadTipProps, clickUpload } = this.props;
+        const { uploadProps, uploadRef, uploadTipProps, clickUpload, allowSend = true } = this.props;
         if (!clickUpload) {
             return null;
         }
@@ -76,6 +77,7 @@ class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
                 [className]: className
             }),
             onChange: this.foundation.onAttachmentAdd,
+            disabled: !allowSend,
         };
         const uploadNode = <Upload
             ref={uploadRef}
@@ -86,6 +88,7 @@ class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
                 className={`${PREFIX_INPUT_BOX}-uploadButton`}
                 icon={<IconChainStroked size="extra-large" />}
                 theme='borderless'
+                disabled={!allowSend}
             />}
         </Upload>;
         return (uploadTipProps ? <Tooltip {...uploadTipProps}><span>{uploadNode}</span></Tooltip> : uploadNode);
@@ -129,9 +132,10 @@ class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
 
     renderSendButton = () => {
         const disabledSend = this.foundation.getDisableSend();
+        const { allowSend = true } = this.props;
         return (
             <Button
-                disabled={disabledSend}
+                disabled={disabledSend || !allowSend}
                 theme='solid'
                 type='primary'
                 className={`${PREFIX_INPUT_BOX}-sendButton`}
@@ -143,7 +147,7 @@ class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
     }
 
     render() {
-        const { onClearContext, renderInputArea, onSend, style, className, showClearContext } = this.props;
+        const { onClearContext, renderInputArea, onSend, style, className, showClearContext, allowSend = true } = this.props;
         const clearNode = this.renderClearButton();
         const uploadNode = this.renderUploadButton();
         const inputNode = this.renderInputArea();
@@ -181,4 +185,4 @@ class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
     }
 }
 
-export default InputBox;
+export default InputBox;

+ 10 - 1
packages/semi-ui/chat/interface.ts

@@ -38,6 +38,11 @@ export interface ChatProps extends CommonChatsProps {
     onClear?: () => void;
     onInputChange?: (props: { value?: string; attachment?: FileItem[] }) => void;
     onMessageSend?: (content: string, attachment: FileItem[]) => void;
+    /**
+     * 是否允许输入框发送文字消息和文件
+     * 默认true,受控属性
+     */
+    allowSend?: boolean;
     inputBoxStyle?: React.CSSProperties;
     inputBoxCls?: string;
     renderInputArea?: (props?: RenderInputAreaProps) => ReactNode;
@@ -173,7 +178,11 @@ export interface InputBoxProps {
     onClearContext?: (e: any) => void;
     onInputChange?: (props: {inputValue: string; attachment: FileItem[]}) => void;
     clickUpload?: boolean;
-    pasteUpload?: boolean
+    pasteUpload?: boolean;
+    /**
+     * 是否允许输入框发送文字消息和文件,默认true
+     */
+    allowSend?: boolean
 }
 
 export interface InputBoxState {