feat: [AIChatInput] Newly added sendHotKey API (#3099)

Author: YyumeiZhang

content/ai/aiChatInput/index-en-US.md

@@ -1501,6 +1501,7 @@ render(<CustomRichTextExtension />);
 | 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 |

content/ai/aiChatInput/index.md

@@ -1579,6 +1579,7 @@ render(<CustomRichTextExtension />);
 | 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 |

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 = {

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<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
@@ -338,6 +338,7 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
 
     handRichTextArealKeyDown = (view: any, event: KeyboardEvent) => {
         // 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<AIChatInputAda
         }
         const editor = this._adapter.getEditor() ?? {};
         const allowHotKeySend = get(editor, 'storage.SemiAIChatInput.allowHotKeySend');
-        if (event.key === 'Enter' && !event.shiftKey && allowHotKeySend) {
+        if (event.key === 'Enter' && (sendHotKey === strings.SEND_HOTKEY.ENTER ? !event.shiftKey : event.shiftKey) && allowHotKeySend) {
             this.handleSend();
             return true;
         }
-        if (event.key === 'Enter' && event.shiftKey) {
+        if (event.key === 'Enter' && (sendHotKey === strings.SEND_HOTKEY.ENTER ? event.shiftKey : !event.shiftKey)) {
             /**
              * Tiptap 默认情况下 Enter + Shift 时候是使用 <br /> 实现换行
              * 为保证自定义的一些逻辑生效（比如零宽字符的插入），Enter + Shift 希望实现通过新建 p 标签的方式完成换行

packages/semi-ui/aiChatInput/_story/aiChatInput.stories.jsx

@@ -679,3 +679,26 @@ export const SetContent = () => {
       >点我查看富文本区域内容</Button>
   </>);
 }
+
+export const SendHotkeyDemo = () => {
+  const [generating, setGenerating] = useState(false);
+
+  const onUploadChange = useCallback((fileList) => {
+    console.log('onUploadChange', fileList);
+  }, []);
+
+  const toggleGenerate = useCallback((props) => {
+    setGenerating(value => !value);
+  }, []);
+  
+  return (<AIChatInput
+    sendHotKey='shift+enter'
+    generating={generating}
+    placeholder={'输入内容或者上传内容'} 
+    uploadProps={uploadProps}
+    onUploadChange={onUploadChange}
+    style={outerStyle}
+    onMessageSend={toggleGenerate}
+    onStopGenerate={toggleGenerate}
+  />);
+}

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<AIChatInputProps, AIChatInputState> {
         dropdownMatchTriggerWidth: true,
         round: true,
         topSlotPosition: 'top',
+        sendHotKey: strings.SEND_HOTKEY.ENTER,
     }
 
     constructor(props: AIChatInputProps) {

packages/semi-ui/aiChatInput/interface.ts

@@ -78,7 +78,8 @@ export interface AIChatInputProps {
     // transformer
     transformer?: Map<string, (obj: any) => any>;
     // Popover related
-    popoverProps?: PopoverProps
+    popoverProps?: PopoverProps;
+    sendHotKey?: 'enter' | 'shift+enter'
 }
 
 export interface RenderSuggestionItemProps {