diff --git a/content/ai/aiChatInput/index-en-US.md b/content/ai/aiChatInput/index-en-US.md index d698d973c4..67403d17a6 100644 --- a/content/ai/aiChatInput/index-en-US.md +++ b/content/ai/aiChatInput/index-en-US.md @@ -1501,6 +1501,7 @@ render(); | onBlur | Callback when input blurs | (event: React.FocusEvent) => void | - | | onConfigureChange | Callback for configuration area changes | (value: LeftMenuChangeProps, changedValue: LeftMenuChangeProps) => void | - | | onFocus | Callback when input focused | (event: React.FocusEvent) => void | - | +| 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` | | showReference | Show reference area | boolean | true | | showTemplateButton | Show template button | boolean | false | | showUploadFile | Show upload file area | boolean | true | diff --git a/content/ai/aiChatInput/index.md b/content/ai/aiChatInput/index.md index f4d10e16b5..beced91e89 100644 --- a/content/ai/aiChatInput/index.md +++ b/content/ai/aiChatInput/index.md @@ -1579,6 +1579,7 @@ render(); | onBlur | 富文本输入框失焦的回调 | (event: React.FocusEvent) => void | - | | onConfigureChange | 配置区域发生变化的回调 | (value: LeftMenuChangeProps, changedValue: LeftMenuChangeProps) => void | - | | onFocus | 富文本输入框聚焦的回调 | (event: React.FocusEvent) => void | - | +| sendHotKey | 发送输入内容的键盘快捷键,支持 `enter` \| `shift+enter`。前者在单独按下 enter 将发送输入框中的消息, shift 和 enter 按键同时按下时,仅换行,不发送。后者相反 | string | `enter` | | showReference | 是否展示引用区域,用于配合 renderTopSlot 使用 | boolean | true | | showTemplateButton | 是否展示模板按钮,未设置时,将根据当前选中技能中的 hasTemplate 决定是否展示模版按钮 | boolean | false | | showUploadFile | 是否展示上传文件区域,用于配合 renderTopSlot 使用 | boolean | true | diff --git a/packages/semi-foundation/aiChatInput/constants.ts b/packages/semi-foundation/aiChatInput/constants.ts index 9e2f2f6ade..946f8709db 100644 --- a/packages/semi-foundation/aiChatInput/constants.ts +++ b/packages/semi-foundation/aiChatInput/constants.ts @@ -10,7 +10,11 @@ const strings = { ZERO_WIDTH_CHAR: '\uFEFF', PIC_PREFIX: 'image/', PIC_SUFFIX_ARRAY: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'], - DELETABLE: 'skipCustomTransactionPlugin' + DELETABLE: 'skipCustomTransactionPlugin', + SEND_HOTKEY: { + 'ENTER': 'enter' as const, + 'SHIFT_ENTER': 'shift+enter' as const, + } }; const numbers = { diff --git a/packages/semi-foundation/aiChatInput/foundation.ts b/packages/semi-foundation/aiChatInput/foundation.ts index 4bfd9d3ba6..095b060d0a 100644 --- a/packages/semi-foundation/aiChatInput/foundation.ts +++ b/packages/semi-foundation/aiChatInput/foundation.ts @@ -1,7 +1,7 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation'; import { Attachment, BaseSkill, Suggestion, Reference, Content, LeftMenuChangeProps, MessageContent } from './interface'; import { get, isNumber, isString } from 'lodash'; -import { cssClasses } from './constants'; +import { cssClasses, strings } from './constants'; import { findSkillSlotInString, getSkillSlotString, transformJSONResult } from './utils'; export interface AIChatInputAdapter

, S = Record> extends DefaultAdapter { @@ -338,6 +338,7 @@ export default class AIChatInputFoundation extends BaseFoundation { // console.log('outer key down handle'); + const { sendHotKey } = this.getProps(); const { suggestionVisible, skillVisible } = this.getStates(); /** * 当建议/技能面板可见时候,上下按键,enter 按键被用于操作面板选项的 active 项,或做选中操作的, @@ -351,11 +352,11 @@ export default class AIChatInputFoundation extends BaseFoundation 实现换行 * 为保证自定义的一些逻辑生效(比如零宽字符的插入),Enter + Shift 希望实现通过新建 p 标签的方式完成换行 diff --git a/packages/semi-ui/aiChatInput/_story/aiChatInput.stories.jsx b/packages/semi-ui/aiChatInput/_story/aiChatInput.stories.jsx index 61d40fe1b3..b7ac0d2c3b 100644 --- a/packages/semi-ui/aiChatInput/_story/aiChatInput.stories.jsx +++ b/packages/semi-ui/aiChatInput/_story/aiChatInput.stories.jsx @@ -679,3 +679,26 @@ export const SetContent = () => { >点我查看富文本区域内容 ); } + +export const SendHotkeyDemo = () => { + const [generating, setGenerating] = useState(false); + + const onUploadChange = useCallback((fileList) => { + console.log('onUploadChange', fileList); + }, []); + + const toggleGenerate = useCallback((props) => { + setGenerating(value => !value); + }, []); + + return (); +} \ No newline at end of file diff --git a/packages/semi-ui/aiChatInput/index.tsx b/packages/semi-ui/aiChatInput/index.tsx index 558a435a85..f4bfdefaa8 100644 --- a/packages/semi-ui/aiChatInput/index.tsx +++ b/packages/semi-ui/aiChatInput/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; import BaseComponent from '../_base/baseComponent'; import { AIChatInputProps, AIChatInputState, Skill, Attachment, Reference, Content, LeftMenuChangeProps } from './interface'; import { noop, isEqual } from 'lodash'; -import { cssClasses, numbers } from '@douyinfe/semi-foundation/aiChatInput/constants'; +import { cssClasses, numbers, strings } from '@douyinfe/semi-foundation/aiChatInput/constants'; import { Popover, Tooltip, Upload, Progress } from '../index'; import { IconSendMsgStroked, IconFile, IconCode, IconCrossStroked, IconPaperclip, IconArrowUp, IconStop, IconClose, IconTemplateStroked, @@ -54,6 +54,7 @@ class AIChatInput extends BaseComponent { dropdownMatchTriggerWidth: true, round: true, topSlotPosition: 'top', + sendHotKey: strings.SEND_HOTKEY.ENTER, } constructor(props: AIChatInputProps) { diff --git a/packages/semi-ui/aiChatInput/interface.ts b/packages/semi-ui/aiChatInput/interface.ts index f8b0d31e0a..62d5a9e8c7 100644 --- a/packages/semi-ui/aiChatInput/interface.ts +++ b/packages/semi-ui/aiChatInput/interface.ts @@ -75,7 +75,8 @@ export interface AIChatInputProps { // transformer transformer?: Map any>; // Popover related - popoverProps?: PopoverProps + popoverProps?: PopoverProps; + sendHotKey?: 'enter' | 'shift+enter' } export interface RenderSuggestionItemProps {