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

69
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,27 +275,32 @@ 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">
<Button variant="subtle" <Center>
className="settings-button" <Checkbox size="xs" label="Enter to send" checked={!isEnterToSend} onChange={(v) => setIsEnterToSend(!v.currentTarget.checked)}/>
size="xs" </Center>
compact <Group my="sm" spacing="xs">
onClick={onCustomizeSystemPromptClick}> <Button variant="subtle"
<span> className="settings-button"
<FormattedMessage defaultMessage={"Customize system prompt"} description="Label for the button that opens a modal for customizing the 'system prompt', a message used to customize and influence how the AI responds." /> size="xs"
</span> compact
</Button> onClick={onCustomizeSystemPromptClick}>
<Button variant="subtle" <span>
className="settings-button" <FormattedMessage defaultMessage={"Customize system prompt"} description="Label for the button that opens a modal for customizing the 'system prompt', a message used to customize and influence how the AI responds." />
size="xs" </span>
compact </Button>
onClick={onTemperatureClick}> <Button variant="subtle"
<span> className="settings-button"
<FormattedMessage defaultMessage="Temperature: {temperature, number, ::.0}" size="xs"
description="Label for the button that opens a modal for setting the 'temperature' (randomness) of AI responses" compact
values={{ temperature }} /> onClick={onTemperatureClick}>
</span> <span>
</Button> <FormattedMessage defaultMessage="Temperature: {temperature, number, ::.0}"
description="Label for the button that opens a modal for setting the 'temperature' (randomness) of AI responses"
values={{ temperature }} />
</span>
</Button>
</Group>
</div> </div>
</div> </div>
</Container>; </Container>;