fix: change API name for send hot key

DouyinFE · Jul 22, 2024 · 8d5904d · 8d5904d
1 parent 6fc3c5f
commit 8d5904d
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 44 deletions.
diff --git a/content/plus/chat/index-en-US.md b/content/plus/chat/index-en-US.md
@@ -1536,7 +1536,7 @@ render(DefaultChat);
 | hintStyle | hint style | CSSProperties | - |
 | inputBoxStyle | Input box style | CSSProperties | - |
 | inputBoxCls | Input box className | string | - |
-| keySendStrategy | Key sending strategy, supports `enter` \| `shiftPlusEnter`. The former will send the message in the input box when you press enter alone. When the shift and enter keys are pressed at the same time, it will only wrap the line and not send it. The latter is the opposite | string | `enter` |
+| sendHotKey | Keyboard shortcut for sending content, supports `enter` \| `shift+enter`. The former will send the message in the input box when you press enter alone. When the shift and enter keys are pressed at the same time, it will only wrap the line and not send it. The latter is the opposite | string | `enter` |
 | mode | Conversation mode, support `bubble` \| `noBubble` \| `userBubble`  | string | `bubble` |
 | roleConfig | Role information configuration, see[RoleConfig](#RoleConfig) | RoleConfig | - |
 | renderHintBox | Custom rendering prompt information | (props: {content: string; index: number,onHintClick: () => void}) => React.ReactNode| - |

diff --git a/content/plus/chat/index.md b/content/plus/chat/index.md
@@ -1539,7 +1539,7 @@ render(DefaultChat);
 | hintStyle | 提示区最外层样式 | CSSProperties | - |
 | inputBoxStyle | 输入框样式 | CSSProperties | - |
 | inputBoxCls | 输入框类名 | string | - |
-| keySendStrategy | 按键发送的策略，支持 `enter` \| `shiftPlusEnter`。前者在单独按下 enter 将发送输入框中的消息， shift 和 enter 按键同时按下时，仅换行，不发送。后者相反 | string | `enter` |
+| sendHotKey | 发送输入内容的键盘快捷键，支持 `enter` \| `shift+enter`。前者在单独按下 enter 将发送输入框中的消息， shift 和 enter 按键同时按下时，仅换行，不发送。后者相反 | string | `enter` |
 | mode | 对话模式，支持 `bubble` \| `noBubble` \| `userBubble`  | string | `bubble` |
 | roleConfig | 角色信息配置，具体见[RoleConfig](#RoleConfig) | RoleConfig | - |
 | renderHintBox | 自定义渲染提示信息 | (props: {content: string; index: number,onHintClick: () => void}) => React.ReactNode| - |

diff --git a/packages/semi-foundation/chat/constants.ts b/packages/semi-foundation/chat/constants.ts
@@ -44,10 +44,10 @@ const MODE = {
     USER_BUBBLE: 'userBubble'
 };
 
-const KEY_SEND_STRATEGY ={
+const SEND_HOT_KEY = {
     ENTER: 'enter',
-    SHIFT_PLUS_ENTER: 'shiftPlusEnter'
-}
+    SHIFT_PLUS_ENTER: 'shift+enter'
+};
 
 const strings = {
     ROLE,
@@ -58,8 +58,8 @@ const strings = {
     SCROLL_ANIMATION_TIME,
     SHOW_SCROLL_GAP,
     MODE,
-    KEY_SEND_STRATEGY
-}
+    SEND_HOT_KEY,
+};
 
 
 export {

diff --git a/packages/semi-foundation/chat/inputboxFoundation.ts b/packages/semi-foundation/chat/inputboxFoundation.ts
@@ -2,7 +2,7 @@ import { handlePrevent } from "../utils/a11y";
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 import { strings } from './constants';
 
-const { KEY_SEND_STRATEGY } = strings;
+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;
@@ -50,7 +50,7 @@ export default class InputBoxFoundation <P = Record<string, any>, S = Record<str
 
     onSend = (e: any) => {
         if (this.getDisableSend()) {
-            return 
+            return; 
         }
         const { content, attachment } = this.getStates();
         this._adapter.setInputValue('');
@@ -60,20 +60,20 @@ export default class InputBoxFoundation <P = Record<string, any>, S = Record<str
 
     getDisableSend = () => {
         const { content, attachment } = this.getStates();
-        const { disableSend: disableSendInProps} = this.getProps();
+        const { disableSend: disableSendInProps } = this.getProps();
         const disabledSend = disableSendInProps || (content.length === 0 && attachment.length === 0);
         return disabledSend;
     }
 
     onEnterPress = (e: any) => {
-        const { keySendStrategy } = this.getProps();
-        if (keySendStrategy === KEY_SEND_STRATEGY.SHIFT_PLUS_ENTER && e.shiftKey === false) {
+        const { sendHotKey } = this.getProps();
+        if (sendHotKey === SEND_HOT_KEY.SHIFT_PLUS_ENTER && e.shiftKey === false) {
             return ;
-        } else if (keySendStrategy === KEY_SEND_STRATEGY.ENTER && e.shiftKey === true) {
+        } else if (sendHotKey === SEND_HOT_KEY.ENTER && e.shiftKey === true) {
             return ;
         }
         handlePrevent(e);
-        this.onSend(e)
+        this.onSend(e);
     };
 
     onPaste = (e: any) => {

diff --git a/packages/semi-ui/chat/_story/chat.stories.jsx b/packages/semi-ui/chat/_story/chat.stories.jsx
@@ -20,7 +20,7 @@ export const _Chat = () => {
     const [hints, setHints] = useState(hintsExample);
     const [mode, setMode] = useState('bubble');
     const [align, setAlign] = useState('leftRight');
-    const [keySendStrategy, setKeySendStrategy] = useState('enter');
+    const [sendHotKey, setSendHotKey] = useState('enter');
     const [key, setKey] = useState(1);
     const [showClearContext, setShowClearContext] = useState(false);
 
@@ -85,8 +85,8 @@ export const _Chat = () => {
         setShowClearContext((showClearContext) => !showClearContext);
     }, [])
 
-    const onKeySendStrategyChange = useCallback((e) => {
-        setKeySendStrategy(e.target.value);
+    const onSendHotKeyChange = useCallback((e) => {
+        setSendHotKey(e.target.value);
     }, []);
 
     return (
@@ -113,9 +113,9 @@ export const _Chat = () => {
                 </span>
                 <span style={{ display: 'flex', alignItems: 'center', columnGap: '10px'}}>
                     按键发送策略：
-                    <RadioGroup onChange={onKeySendStrategyChange} value={keySendStrategy} type="button">
+                    <RadioGroup onChange={onSendHotKeyChange} value={sendHotKey} type="button">
                         <Radio value={'enter'}>enter</Radio>
-                        <Radio value={'shiftPlusEnter'}>shiftPlusEnter</Radio>
+                        <Radio value={'shift+enter'}>shift+enter</Radio>
                     </RadioGroup>
                 </span>
             </div>
@@ -141,7 +141,7 @@ export const _Chat = () => {
                     }}
                     mode={mode} 
                     align={align}
-                    keySendStrategy={keySendStrategy} 
+                    sendHotKey={sendHotKey} 
                     showClearContext={showClearContext}
                 />
             </div>

diff --git a/packages/semi-ui/chat/index.tsx b/packages/semi-ui/chat/index.tsx
@@ -17,7 +17,7 @@ import { Locale } from "../locale/interface";
 import { Button, Upload } from '../index';
 
 const prefixCls = cssClasses.PREFIX;
-const { CHAT_ALIGN, MODE, KEY_SEND_STRATEGY } = strings;
+const { CHAT_ALIGN, MODE, SEND_HOT_KEY } = strings;
 
 class Chat extends BaseComponent<ChatProps, ChatState> {
 
@@ -69,7 +69,7 @@ class Chat extends BaseComponent<ChatProps, ChatState> {
         showStopGenerate: false,
         mode: MODE.BUBBLE,
         showClearContext: false,
-        keySendStrategy: KEY_SEND_STRATEGY.ENTER,
+        sendHotKey: SEND_HOT_KEY.ENTER,
     })
 
     constructor(props: ChatProps) {
@@ -269,7 +269,7 @@ class Chat extends BaseComponent<ChatProps, ChatState> {
             customMarkDownComponents, mode, showClearContext,
             placeholder, inputBoxCls, inputBoxStyle,
             hintStyle, hintCls, uploadProps, uploadTipProps,
-            keySendStrategy,
+            sendHotKey,
         } = this.props;
         const { backBottomVisible, chats, wheelScroll, uploadAreaVisible } = this.state;
         let showStopGenerateFlag = false;
@@ -370,7 +370,7 @@ class Chat extends BaseComponent<ChatProps, ChatState> {
                         renderInputArea={renderInputArea}
                         uploadProps={uploadProps}
                         uploadTipProps={uploadTipProps}
-                        keySendStrategy={keySendStrategy}
+                        sendHotKey={sendHotKey}
                     />
                     {bottomSlot}
                 </div>

diff --git a/packages/semi-ui/chat/inputBox/index.tsx b/packages/semi-ui/chat/inputBox/index.tsx
@@ -5,11 +5,12 @@ import { FileItem } from '../../upload/interface';
 import type { InputBoxProps, InputBoxState } from '../interface';
 import { BaseComponent, Button, Upload, Tooltip, TextArea } from '../../index';
 import { IconDeleteStroked, IconChainStroked, IconArrowUp } from '@douyinfe/semi-icons';
-import { cssClasses } from "@douyinfe/semi-foundation/chat/constants";
+import { cssClasses, strings } from "@douyinfe/semi-foundation/chat/constants";
 import InputBoxFoundation, { InputBoxAdapter } from '@douyinfe/semi-foundation/chat/inputboxFoundation';
 import Attachment from '../attachment';
 
 const { PREFIX_INPUT_BOX } = cssClasses;
+const { SEND_HOT_KEY } = strings;
 const textAutoSize = { minRows: 1, maxRows: 5 };
 
 class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
@@ -68,30 +69,28 @@ class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
         const { className, onChange, renderFileItem, children, ...rest } = uploadProps;
         const realUploadProps = {
             ...rest,
-            className: cls(`${PREFIX_INPUT_BOX}-upload`,{
+            className: cls(`${PREFIX_INPUT_BOX}-upload`, {
                 [className]: className
             }),
             onChange: this.foundation.onAttachmentAdd,
-        }
+        };
         const uploadNode = <Upload
             ref={uploadRef}
             fileList={attachment}
             {...realUploadProps}
         >
-            {children ? children : 
-                <Button 
-                    className={`${PREFIX_INPUT_BOX}-uploadButton`}
-                    icon={<IconChainStroked size="extra-large" />}
-                    theme='borderless'
-                />
-            }
-        </Upload>
+            {children ? children : <Button 
+                className={`${PREFIX_INPUT_BOX}-uploadButton`}
+                icon={<IconChainStroked size="extra-large" />}
+                theme='borderless'
+            />}
+        </Upload>;
         return (uploadTipProps ? <Tooltip {...uploadTipProps}><span>{uploadNode}</span></Tooltip> : uploadNode);
     }
 
     renderInputArea = () => {
         const { content, attachment } = this.state;
-        const { placeholder, keySendStrategy } = this.props;
+        const { placeholder, sendHotKey } = this.props;
         return (<div
             className={`${PREFIX_INPUT_BOX}-inputArea`}
         >
@@ -103,14 +102,14 @@ class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
                 ref={this.inputAreaRef}
                 className={`${PREFIX_INPUT_BOX}-textarea`}
                 autosize={textAutoSize} 
-                disabledEnterStartNewLine={keySendStrategy === 'enter' ? true : false}
+                disabledEnterStartNewLine={sendHotKey === SEND_HOT_KEY.ENTER ? true : false}
                 onPaste={this.foundation.onPaste as any}
             />
             <Attachment 
                 attachment={attachment as any} 
                 onClear={this.foundation.onAttachmentDelete}
             />
-        </div>)
+        </div>);
     }
 
     renderClearButton = () => {
@@ -122,7 +121,7 @@ class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
                 icon={<IconDeleteStroked />}
                 onClick={onClearContext}
             />
-        )
+        );
     }
 
     renderSendButton = () => {
@@ -134,10 +133,10 @@ class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
                 type='primary'
                 className={`${PREFIX_INPUT_BOX}-sendButton`}
                 // icon={<IconSend size="extra-large" className={`${PREFIX_INPUT_BOX}-sendButton-icon`} />}
-                icon={<IconArrowUp size="large"  className={`${PREFIX_INPUT_BOX}-sendButton-icon`} />}
+                icon={<IconArrowUp size="large" className={`${PREFIX_INPUT_BOX}-sendButton-icon`} />}
                 onClick={this.foundation.onSend}
             />
-        )
+        );
     }
 
     render() {
@@ -148,7 +147,7 @@ class InputBox extends BaseComponent<InputBoxProps, InputBoxState> {
                     className={`${PREFIX_INPUT_BOX}-inner`}
                     onClick={this.onClick}
                 >
-                   {showClearContext && this.renderClearButton()}
+                    {showClearContext && this.renderClearButton()}
                     <div className={`${PREFIX_INPUT_BOX}-container`}>
                         {this.renderUploadButton()}
                         {this.renderInputArea()}

diff --git a/packages/semi-ui/chat/interface.ts b/packages/semi-ui/chat/interface.ts
@@ -45,7 +45,7 @@ export interface ChatProps extends CommonChatsProps {
     uploadProps?: UploadProps;
     uploadTipProps?: TooltipProps;
     showClearContext?: boolean;
-    keySendStrategy?: 'enter' | 'shiftPlusEnter';
+    sendHotKey?: 'enter' | 'shift+enter'
 }
 
 export interface RenderInputAreaProps {
@@ -105,7 +105,7 @@ export interface ChatBoxProps extends Omit<CommonChatsProps, "chats"> {
 
 export interface InputBoxProps {
     showClearContext?: boolean;
-    keySendStrategy?: 'enter' | 'shiftPlusEnter';
+    sendHotKey?: 'enter' | 'shift+enter';
     placeholder: string;
     className?: string;
     style?: React.CSSProperties;