Skip to content

Commit 98f3894

Browse files
VeikkosuhonenVeikkosuhonen
committed
display what keycombination to send, in chatbox (like slack)
1 parent 6b93c32 commit 98f3894

File tree

4 files changed

+68
-37
lines changed

4 files changed

+68
-37
lines changed

‎src/client/components/ChatV2/ChatBox.tsx‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import ModelSelector from './ModelSelector'
1414
import { BlueButton, GrayButton, OutlineButtonBlack } from './general/Buttons'
1515
import { useIsEmbedded } from '../../contexts/EmbeddedContext'
1616
import useCurrentUser from '../../hooks/useCurrentUser'
17-
import { SendPreferenceConfiguratorModal } from './SendPreferenceConfigurator'
17+
import { SendPreferenceConfiguratorModal, ShiftEnterForNewline, ShiftEnterToSend } from './SendPreferenceConfigurator'
1818

1919
export const ChatBox = ({
2020
disabled,
@@ -68,8 +68,10 @@ export const ChatBox = ({
6868
const [sendPreferenceConfiguratorOpen, setSendPreferenceConfiguratorOpen] = useState<boolean>(false)
6969
const sendButtonRef = useRef<HTMLButtonElement>(null)
7070

71-
const [defaultMessage, setDefaultMessage] = useState<string>('') // <--- used to trigger re render only onSubmit to empty the textField, dont update this on every key press
7271
const textFieldRef = useRef<HTMLInputElement>(null)
72+
const [message, setMessage] = useState<string>('')
73+
74+
const acuallyDisabled = disabled || message.length === 0
7375

7476
const { t } = useTranslation()
7577

@@ -96,23 +98,20 @@ export const ChatBox = ({
9698
const onSubmit = (e: React.FormEvent) => {
9799
e.preventDefault()
98100

99-
const messageText = textFieldRef?.current ? textFieldRef.current.value : ''
100-
101101
// This is here to prevent the form from submitting on disabled.
102102
// It is done this way instead of explicitely disabling the textfield
103103
// so that it doesnt break the re-focus back on the text field after message is send
104-
if (disabled || !messageText.trim()) return
104+
if (acuallyDisabled) return
105105

106-
handleSubmit(messageText)
106+
handleSubmit(message)
107107
refetchStatus()
108-
setDefaultMessage('') //<--- just triggers the textField to go empty
108+
setMessage('')
109109

110110
if (user && user.preferences?.sendShortcutMode === undefined) {
111111
setSendPreferenceConfiguratorOpen(true)
112112
}
113113

114114
if (textFieldRef.current) {
115-
textFieldRef.current.value = ''
116115
textFieldRef.current.focus()
117116
}
118117
}
@@ -152,7 +151,7 @@ export const ChatBox = ({
152151
<GrayButton onClick={handleCancel} type="button">
153152
{t('common:cancel')}
154153
</GrayButton>
155-
<BlueButton onClick={() => handleContinue(textFieldRef.current ? textFieldRef.current.value : '')} color="primary" type="button">
154+
<BlueButton onClick={() => handleContinue(message)} color="primary" type="button">
156155
{t('common:continue')}
157156
</BlueButton>
158157
</Box>
@@ -189,7 +188,9 @@ export const ChatBox = ({
189188
<TextField
190189
inputRef={textFieldRef}
191190
autoFocus
192-
defaultValue={defaultMessage}
191+
value={message}
192+
onChange={(e) => setMessage(e.target.value)}
193+
defaultValue=""
193194
placeholder={t('chat:writeHere')}
194195
fullWidth
195196
multiline
@@ -271,6 +272,20 @@ export const ChatBox = ({
271272
</Tooltip>
272273
</Box>
273274

275+
<Typography
276+
sx={{
277+
display: { xs: 'none', lg: 'block' },
278+
ml: 'auto',
279+
opacity: acuallyDisabled ? 0 : 1,
280+
transition: 'opacity 0.2s ease-in-out',
281+
fontSize: '14px',
282+
}}
283+
variant="body1"
284+
color="textSecondary"
285+
>
286+
{user?.preferences?.sendShortcutMode === 'enter' ? <ShiftEnterForNewline t={t} /> : <ShiftEnterToSend t={t} />}
287+
</Typography>
288+
274289
{!isEmbedded && (
275290
<Tooltip
276291
arrow

‎src/client/components/ChatV2/SendPreferenceConfigurator.tsx‎

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,40 @@ import { UserPreferencesSchema } from '../../../shared/user'
88
import { useSnackbar } from 'notistack'
99
import { useState } from 'react'
1010

11+
export const ShiftEnterToSend = ({ t }) => (
12+
<Box display="flex" alignItems="center" gap={0.5}>
13+
<strong>{t('sendPreferenceConfigurator:shift')}</strong>
14+
<ArrowUpward fontSize="small" />+ <strong>{t('sendPreferenceConfigurator:return')}</strong>
15+
<KeyboardReturn fontSize="small" />
16+
{t('sendPreferenceConfigurator:toSend')}
17+
</Box>
18+
)
19+
20+
export const EnterToSend = ({ t }) => (
21+
<Box display="flex" alignItems="center" gap={0.5}>
22+
<strong>{t('sendPreferenceConfigurator:return')}</strong>
23+
<KeyboardReturn fontSize="small" />
24+
{t('sendPreferenceConfigurator:toSend')}
25+
</Box>
26+
)
27+
28+
export const ShiftEnterForNewline = ({ t }) => (
29+
<Box display="flex" alignItems="center" gap={0.5}>
30+
<strong>{t('sendPreferenceConfigurator:shift')}</strong>
31+
<ArrowUpward fontSize="small" />+ <strong>{t('sendPreferenceConfigurator:return')}</strong>
32+
<KeyboardReturn fontSize="small" />
33+
{t('sendPreferenceConfigurator:toNewline')}
34+
</Box>
35+
)
36+
37+
export const EnterForNewline = ({ t }) => (
38+
<Box display="flex" alignItems="center" gap={0.5}>
39+
<strong>{t('sendPreferenceConfigurator:return')}</strong>
40+
<KeyboardReturn fontSize="small" />
41+
{t('sendPreferenceConfigurator:toNewline')}
42+
</Box>
43+
)
44+
1145
export const SendPreferenceConfiguratorModal = ({ open, onClose, anchorEl, context }) => {
1246
const { user } = useCurrentUser()
1347
const preferenceUpdate = usePreferencesUpdateMutation()
@@ -68,42 +102,24 @@ export const SendPreferenceConfiguratorModal = ({ open, onClose, anchorEl, conte
68102
<Typography>{t('sendPreferenceConfigurator:title')}</Typography>
69103
<RadioGroup value={value} onChange={handleChange} name="sendPreferenceConfigurator">
70104
<FormControlLabel
71-
sx={{ my: 2 }}
105+
sx={{ my: 2, fontSize: 'small' }}
72106
value="shift+enter"
73107
control={<Radio />}
74108
label={
75109
<div>
76-
<Box display="flex" alignItems="center" gap={1}>
77-
<strong>{t('sendPreferenceConfigurator:shift')}</strong>
78-
<ArrowUpward fontSize="small" />+ <strong>{t('sendPreferenceConfigurator:return')}</strong>
79-
<KeyboardReturn fontSize="small" />
80-
{t('sendPreferenceConfigurator:toSend')}
81-
</Box>
82-
<Box display="flex" alignItems="center" gap={1}>
83-
<strong>{t('sendPreferenceConfigurator:return')}</strong>
84-
<KeyboardReturn fontSize="small" />
85-
{t('sendPreferenceConfigurator:toAddNewline')}
86-
</Box>
110+
<ShiftEnterToSend t={t} />
111+
<EnterForNewline t={t} />
87112
</div>
88113
}
89114
/>
90115
<FormControlLabel
91-
sx={{ mb: 2 }}
116+
sx={{ mb: 2, fontSize: 'small' }}
92117
value="enter"
93118
control={<Radio />}
94119
label={
95120
<div>
96-
<Box display="flex" alignItems="center" gap={1}>
97-
<strong>{t('sendPreferenceConfigurator:return')}</strong>
98-
<KeyboardReturn fontSize="small" />
99-
{t('sendPreferenceConfigurator:toSend')}
100-
</Box>
101-
<Box display="flex" alignItems="center" gap={1}>
102-
<strong>{t('sendPreferenceConfigurator:shift')}</strong>
103-
<ArrowUpward fontSize="small" />+ <strong>{t('sendPreferenceConfigurator:return')}</strong>
104-
<KeyboardReturn fontSize="small" />
105-
{t('sendPreferenceConfigurator:toAddNewline')}
106-
</Box>
121+
<EnterToSend t={t} />
122+
<ShiftEnterForNewline t={t} />
107123
</div>
108124
}
109125
/>

‎src/client/locales/en.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -311,12 +311,12 @@
311311
},
312312
"sendPreferenceConfigurator": {
313313
"success": "Preference updated.",
314-
"canChangeInSettings": "You can change the send shortcut in chat settings.",
314+
"canChangeInSettings": "You can change the send keyboard shortcut in chat settings.",
315315
"title": "What key combination would you like to use to send a message?",
316316
"shift": "Shift",
317317
"return": "Return",
318318
"toSend": "to send a message",
319-
"toAddNewline": "to add a new line",
319+
"toNewline": "to add a new line",
320320
"ok": "Ok",
321321
"openConfigurator": "Keyboard shortcut for sending a message"
322322
}

‎src/client/locales/fi.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,7 @@
316316
"shift": "Shift",
317317
"return": "Return",
318318
"toSend": "lähettää viestin",
319-
"toAddNewline": "lisää uuden rivin",
319+
"toNewline": "lisää uuden rivin",
320320
"ok": "Ok",
321321
"openConfigurator": "Viestin lähetyksen näppäinyhdistelmä"
322322
}

0 commit comments

Comments
 (0)