Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions content/ai/aiChatInput/index-en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
1 change: 1 addition & 0 deletions content/ai/aiChatInput/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
6 changes: 5 additions & 1 deletion packages/semi-foundation/aiChatInput/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
7 changes: 4 additions & 3 deletions packages/semi-foundation/aiChatInput/foundation.ts
Original file line number Diff line number Diff line change
@@ -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> {
Expand Down Expand Up @@ -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 项,或做选中操作的,
Expand All @@ -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 标签的方式完成换行
Expand Down
23 changes: 23 additions & 0 deletions packages/semi-ui/aiChatInput/_story/aiChatInput.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>);
}
3 changes: 2 additions & 1 deletion packages/semi-ui/aiChatInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -54,6 +54,7 @@ class AIChatInput extends BaseComponent<AIChatInputProps, AIChatInputState> {
dropdownMatchTriggerWidth: true,
round: true,
topSlotPosition: 'top',
sendHotKey: strings.SEND_HOTKEY.ENTER,
}

constructor(props: AIChatInputProps) {
Expand Down
3 changes: 2 additions & 1 deletion packages/semi-ui/aiChatInput/interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ export interface AIChatInputProps {
// transformer
transformer?: Map<string, (obj: any) => any>;
// Popover related
popoverProps?: PopoverProps
popoverProps?: PopoverProps;
sendHotKey?: 'enter' | 'shift+enter'
}

export interface RenderSuggestionItemProps {
Expand Down
Loading