diff --git a/src/apps/chat/components/composer/Composer.tsx b/src/apps/chat/components/composer/Composer.tsx index b98eb3106..430a581ff 100644 --- a/src/apps/chat/components/composer/Composer.tsx +++ b/src/apps/chat/components/composer/Composer.tsx @@ -178,8 +178,7 @@ export function Composer(props: { const theme = useTheme(); const { sendModeId, setSendModeId, sentMessages, appendSentMessage, clearSentMessages } = useComposerStore(); const stopTyping = useChatStore(state => state.stopTyping); - const modelMaxResponseTokens = useSettingsStore(state => state.modelMaxResponseTokens); - + const { enterToSend, modelMaxResponseTokens } = useSettingsStore(state => ({ enterToSend: state.enterToSend, modelMaxResponseTokens: state.modelMaxResponseTokens }), shallow); const { assistantTyping, chatModelId, tokenCount: conversationTokenCount } = useChatStore(state => { const conversation = state.conversations.find(conversation => conversation.id === props.conversationId); @@ -217,10 +216,13 @@ export function Composer(props: { const handleStopClicked = () => props.conversationId && stopTyping(props.conversationId); const handleKeyPress = (e: React.KeyboardEvent) => { - if (e.key === 'Enter' && !e.shiftKey && !e.altKey) { - if (!assistantTyping) - handleSendClicked(); - e.preventDefault(); + if (e.key === 'Enter') { + const shiftOrAlt = e.shiftKey || e.altKey; + if (enterToSend ? !shiftOrAlt : shiftOrAlt) { + if (!assistantTyping) + handleSendClicked(); + e.preventDefault(); + } } }; diff --git a/src/apps/settings/UISettings.tsx b/src/apps/settings/UISettings.tsx index 9fe20f5a5..7490934a6 100644 --- a/src/apps/settings/UISettings.tsx +++ b/src/apps/settings/UISettings.tsx @@ -4,6 +4,7 @@ import { shallow } from 'zustand/shallow'; import { Box, FormControl, FormHelperText, FormLabel, Option, Radio, RadioGroup, Select, Stack, Switch, Tooltip } from '@mui/joy'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import TelegramIcon from '@mui/icons-material/Telegram'; import WidthNormalIcon from '@mui/icons-material/WidthNormal'; import WidthWideIcon from '@mui/icons-material/WidthWide'; @@ -59,11 +60,13 @@ export function UISettings() { // external state const { centerMode, setCenterMode, + enterToSend, setEnterToSend, renderMarkdown, setRenderMarkdown, showPurposeFinder, setShowPurposeFinder, zenMode, setZenMode, } = useSettingsStore(state => ({ centerMode: state.centerMode, setCenterMode: state.setCenterMode, + enterToSend: state.enterToSend, setEnterToSend: state.setEnterToSend, renderMarkdown: state.renderMarkdown, setRenderMarkdown: state.setRenderMarkdown, showPurposeFinder: state.showPurposeFinder, setShowPurposeFinder: state.setShowPurposeFinder, zenMode: state.zenMode, setZenMode: state.setZenMode, @@ -71,6 +74,8 @@ export function UISettings() { const handleCenterModeChange = (event: React.ChangeEvent) => setCenterMode(event.target.value as 'narrow' | 'wide' | 'full' || 'wide'); + const handleEnterToSendChange = (event: React.ChangeEvent) => setEnterToSend(event.target.checked); + const handleZenModeChange = (event: React.ChangeEvent) => setZenMode(event.target.value as 'clean' | 'cleaner'); const handleRenderMarkdownChange = (event: React.ChangeEvent) => setRenderMarkdown(event.target.checked); @@ -105,6 +110,16 @@ export function UISettings() { + + + Enter key + {enterToSend ? <>Sends message : 'New line'} + + + + Markdown diff --git a/src/common/state/store-settings.ts b/src/common/state/store-settings.ts index 0b6e56fb5..950f41d93 100644 --- a/src/common/state/store-settings.ts +++ b/src/common/state/store-settings.ts @@ -14,6 +14,9 @@ interface SettingsStore { centerMode: 'narrow' | 'wide' | 'full'; setCenterMode: (centerMode: 'narrow' | 'wide' | 'full') => void; + enterToSend: boolean; + setEnterToSend: (enterToSend: boolean) => void; + renderMarkdown: boolean; setRenderMarkdown: (renderMarkdown: boolean) => void; @@ -97,6 +100,9 @@ export const useSettingsStore = create()( centerMode: 'wide', setCenterMode: (centerMode: 'narrow' | 'wide' | 'full') => set({ centerMode }), + enterToSend: false, + setEnterToSend: (enterToSend: boolean) => set({ enterToSend }), + renderMarkdown: false, setRenderMarkdown: (renderMarkdown: boolean) => set({ renderMarkdown }),