Talon
/
chat-with-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add enter to send checkbox

main
Bagas Wastu 2023-03-23 12:55:04 +07:00
parent 68147135f8
commit 2f7747295b
1 changed files with 43 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/src/components/input.tsx
View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { Button, ActionIcon, Textarea, Loader, Popover } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { Button, ActionIcon, Textarea, Loader, Popover, Checkbox, Center, Group } from '@mantine/core';
import { useLocalStorage, useMediaQuery } from '@mantine/hooks';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { useLocation } from 'react-router-dom';
@ -24,8 +24,19 @@ const Container = styled.div`
text-align: right;
}
.inner > .bottom {
display: flex;
justify-content: space-between;
}
@media (max-width: 600px) {
.inner > .bottom {
flex-direction: column;
align-items: flex-start;
}
}
.settings-button {
margin: 0.5rem -0.4rem 0.5rem 1rem;
font-size: 0.7rem;
color: #999;
}
@ -45,6 +56,7 @@ export default function MessageInput(props: MessageInputProps) {
const hasVerticalSpace = useMediaQuery('(min-height: 1000px)');
const useOpenAIWhisper = useAppSelector(selectUseOpenAIWhisper);
const openAIApiKey = useAppSelector(selectOpenAIApiKey);
const [isEnterToSend, setIsEnterToSend] = useLocalStorage({ key: 'isEnterToSend', defaultValue: false})
const [initialMessage, setInitialMessage] = useState('');
const {
@ -180,11 +192,11 @@ export default function MessageInput(props: MessageInputProps) {
}, [initialMessage, transcript, recording, transcribing, useOpenAIWhisper, dispatch]);
const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter' && e.shiftKey === false && !props.disabled) {
if(e.key === 'Enter' && e.shiftKey === false && !props.disabled && isEnterToSend) {
e.preventDefault();
onSubmit();
}
}, [onSubmit, props.disabled]);
}, [isEnterToSend, onSubmit, props.disabled]);
const rightSection = useMemo(() => {
return (
@ -263,7 +275,11 @@ export default function MessageInput(props: MessageInputProps) {
rightSection={rightSection}
rightSectionWidth={context.generating ? 100 : 55}
onKeyDown={onKeyDown} />
<div>
<div className="bottom">
<Center>
<Checkbox size="xs" label="Enter to send" checked={!isEnterToSend} onChange={(v) => setIsEnterToSend(!v.currentTarget.checked)}/>
</Center>
<Group my="sm" spacing="xs">
<Button variant="subtle"
className="settings-button"
size="xs"
@ -284,6 +300,7 @@ export default function MessageInput(props: MessageInputProps) {
values={{ temperature }} />
</span>
</Button>
</Group>
</div>
</div>
</Container>;