From 8d5904d153210c7324a3db437651466975b06c8f Mon Sep 17 00:00:00 2001 From: "zhangyumei.0319" Date: Mon, 22 Jul 2024 16:41:48 +0800 Subject: [PATCH] fix: change API name for send hot key --- content/plus/chat/index-en-US.md | 2 +- content/plus/chat/index.md | 2 +- packages/semi-foundation/chat/constants.ts | 10 +++--- .../chat/inputboxFoundation.ts | 14 ++++---- packages/semi-ui/chat/_story/chat.stories.jsx | 12 +++---- packages/semi-ui/chat/index.tsx | 8 ++--- packages/semi-ui/chat/inputBox/index.tsx | 35 +++++++++---------- packages/semi-ui/chat/interface.ts | 4 +-- 8 files changed, 43 insertions(+), 44 deletions(-) diff --git a/content/plus/chat/index-en-US.md b/content/plus/chat/index-en-US.md index a1f8826af8..fa749ebc67 100644 --- 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 index 5ef0cc09e5..34447a4a36 100644 --- 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 index 08f6e629fe..83ff70a93e 100644 --- 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 index c156ae06c8..567b0b671e 100644 --- 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

, S = Record> extends DefaultAdapter { notifyInputChange: (props: { inputValue: string; attachment: any[]}) => void; @@ -50,7 +50,7 @@ export default class InputBoxFoundation

, S = Record { if (this.getDisableSend()) { - return + return; } const { content, attachment } = this.getStates(); this._adapter.setInputValue(''); @@ -60,20 +60,20 @@ export default class InputBoxFoundation

, S = Record { 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 index 6f4cdf302a..992c112b18 100644 --- 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 = () => { 按键发送策略： - + enter - shiftPlusEnter + shift+enter @@ -141,7 +141,7 @@ export const _Chat = () => { }} mode={mode} align={align} - keySendStrategy={keySendStrategy} + sendHotKey={sendHotKey} showClearContext={showClearContext} /> diff --git a/packages/semi-ui/chat/index.tsx b/packages/semi-ui/chat/index.tsx index 5dc335c18d..6f8ed9a6d8 100644 --- 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 { @@ -69,7 +69,7 @@ class Chat extends BaseComponent { 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 { 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 { renderInputArea={renderInputArea} uploadProps={uploadProps} uploadTipProps={uploadTipProps} - keySendStrategy={keySendStrategy} + sendHotKey={sendHotKey} /> {bottomSlot} diff --git a/packages/semi-ui/chat/inputBox/index.tsx b/packages/semi-ui/chat/inputBox/index.tsx index 4ff7e41063..5fe140e5e8 100644 --- 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 { @@ -68,30 +69,28 @@ class InputBox extends BaseComponent { 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 = - {children ? children : -