fix: resolve Enter event conflict during CJK IME (#253)

* fix: resolve Enter event conflict during CJK IME

* add

---------

Co-authored-by: Mckay Wrigley <mckaywrigley@gmail.com>
This commit is contained in:
Bryan Lee 2023-03-28 16:46:16 +08:00 committed by GitHub
parent 28c8bf0e0d
commit a73ef2b8cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 5 deletions

1
.env.local.example Normal file
View File

@ -0,0 +1 @@
OPENAI_API_KEY=YOUR_KEY

View File

@ -141,7 +141,7 @@ export const ChatInput: FC<Props> = ({
} else {
setActivePromptIndex(0);
}
} else if (e.key === 'Enter' && !isMobile() && !e.shiftKey) {
} else if (e.key === 'Enter' && !isTyping && !isMobile() && !e.shiftKey) {
e.preventDefault();
handleSend();
}

View File

@ -1,8 +1,7 @@
import { Message } from '@/types/chat';
import { IconEdit } from '@tabler/icons-react';
import { IconCheck, IconCopy, IconEdit } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { FC, memo, useEffect, useRef, useState } from 'react';
import { IconCheck, IconCopy } from '@tabler/icons-react';
import rehypeMathjax from 'rehype-mathjax';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
@ -19,6 +18,7 @@ export const ChatMessage: FC<Props> = memo(
({ message, messageIndex, onEditMessage }) => {
const { t } = useTranslation('chat');
const [isEditing, setIsEditing] = useState<boolean>(false);
const [isTyping, setIsTyping] = useState<boolean>(false);
const [messageContent, setMessageContent] = useState(message.content);
const [messagedCopied, setMessageCopied] = useState(false);
@ -46,7 +46,7 @@ export const ChatMessage: FC<Props> = memo(
};
const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
if (e.key === 'Enter' && !isTyping && !e.shiftKey) {
e.preventDefault();
handleEditMessage();
}
@ -80,7 +80,7 @@ export const ChatMessage: FC<Props> = memo(
style={{ overflowWrap: 'anywhere' }}
>
<div className="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="min-w-[40px] font-bold text-right">
<div className="min-w-[40px] text-right font-bold">
{message.role === 'assistant' ? t('AI') : t('You')}:
</div>
@ -95,6 +95,8 @@ export const ChatMessage: FC<Props> = memo(
value={messageContent}
onChange={handleInputChange}
onKeyDown={handlePressEnter}
onCompositionStart={() => setIsTyping(true)}
onCompositionEnd={() => setIsTyping(false)}
style={{
fontFamily: 'inherit',
fontSize: 'inherit',