KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env.local.example Normal file
View File

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

2
components/Chat/ChatInput.tsx
View File

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

10
components/Chat/ChatMessage.tsx
View File

@ -1,8 +1,7 @@
import { Message } from '@/types/chat'; 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 { useTranslation } from 'next-i18next';
import { FC, memo, useEffect, useRef, useState } from 'react'; import { FC, memo, useEffect, useRef, useState } from 'react';
import { IconCheck, IconCopy } from '@tabler/icons-react';
import rehypeMathjax from 'rehype-mathjax'; import rehypeMathjax from 'rehype-mathjax';
import remarkGfm from 'remark-gfm'; import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math'; import remarkMath from 'remark-math';
@ -19,6 +18,7 @@ export const ChatMessage: FC<Props> = memo(
({ message, messageIndex, onEditMessage }) => { ({ message, messageIndex, onEditMessage }) => {
const { t } = useTranslation('chat'); const { t } = useTranslation('chat');
const [isEditing, setIsEditing] = useState<boolean>(false); const [isEditing, setIsEditing] = useState<boolean>(false);
const [isTyping, setIsTyping] = useState<boolean>(false);
const [messageContent, setMessageContent] = useState(message.content); const [messageContent, setMessageContent] = useState(message.content);
const [messagedCopied, setMessageCopied] = useState(false); const [messagedCopied, setMessageCopied] = useState(false);
@ -46,7 +46,7 @@ export const ChatMessage: FC<Props> = memo(
}; };
const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => { const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !isTyping && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
handleEditMessage(); handleEditMessage();
} }
@ -80,7 +80,7 @@ export const ChatMessage: FC<Props> = memo(
style={{ overflowWrap: 'anywhere' }} 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="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')}: {message.role === 'assistant' ? t('AI') : t('You')}:
</div> </div>
@ -95,6 +95,8 @@ export const ChatMessage: FC<Props> = memo(
value={messageContent} value={messageContent}
onChange={handleInputChange} onChange={handleInputChange}
onKeyDown={handlePressEnter} onKeyDown={handlePressEnter}
onCompositionStart={() => setIsTyping(true)}
onCompositionEnd={() => setIsTyping(false)}
style={{ style={{
fontFamily: 'inherit', fontFamily: 'inherit',
fontSize: 'inherit', fontSize: 'inherit',