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 styled from '@emotion/styled';
import { Button, ActionIcon, Textarea, Loader, Popover } from '@mantine/core'; import { Button, ActionIcon, Textarea, Loader, Popover, Checkbox, Center, Group } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks'; import { useLocalStorage, useMediaQuery } from '@mantine/hooks';
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
@ -24,8 +24,19 @@ const Container = styled.div`
text-align: right; 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 { .settings-button {
margin: 0.5rem -0.4rem 0.5rem 1rem;
font-size: 0.7rem; font-size: 0.7rem;
color: #999; color: #999;
} }
@ -45,6 +56,7 @@ export default function MessageInput(props: MessageInputProps) {
const hasVerticalSpace = useMediaQuery('(min-height: 1000px)'); const hasVerticalSpace = useMediaQuery('(min-height: 1000px)');
const useOpenAIWhisper = useAppSelector(selectUseOpenAIWhisper); const useOpenAIWhisper = useAppSelector(selectUseOpenAIWhisper);
const openAIApiKey = useAppSelector(selectOpenAIApiKey); const openAIApiKey = useAppSelector(selectOpenAIApiKey);
const [isEnterToSend, setIsEnterToSend] = useLocalStorage({ key: 'isEnterToSend', defaultValue: false})
const [initialMessage, setInitialMessage] = useState(''); const [initialMessage, setInitialMessage] = useState('');
const { const {
@ -180,11 +192,11 @@ export default function MessageInput(props: MessageInputProps) {
}, [initialMessage, transcript, recording, transcribing, useOpenAIWhisper, dispatch]); }, [initialMessage, transcript, recording, transcribing, useOpenAIWhisper, dispatch]);
const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => { 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(); e.preventDefault();
onSubmit(); onSubmit();
} }
}, [onSubmit, props.disabled]); }, [isEnterToSend, onSubmit, props.disabled]);
const rightSection = useMemo(() => { const rightSection = useMemo(() => {
return ( return (
@ -263,7 +275,11 @@ export default function MessageInput(props: MessageInputProps) {
rightSection={rightSection} rightSection={rightSection}
rightSectionWidth={context.generating ? 100 : 55} rightSectionWidth={context.generating ? 100 : 55}
onKeyDown={onKeyDown} /> 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" <Button variant="subtle"
className="settings-button" className="settings-button"
size="xs" size="xs"
@ -284,6 +300,7 @@ export default function MessageInput(props: MessageInputProps) {
values={{ temperature }} /> values={{ temperature }} />
</span> </span>
</Button> </Button>
</Group>
</div> </div>
</div> </div>
</Container>; </Container>;