mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-15 14:00:57 -05:00
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { bsVersion } from '@/features/utils/bootstrap-5'
|
|
|
|
type MessageInputProps = {
|
|
resetUnreadMessages: () => void
|
|
sendMessage: (message: string) => void
|
|
}
|
|
|
|
function MessageInput({ resetUnreadMessages, sendMessage }: MessageInputProps) {
|
|
const { t } = useTranslation()
|
|
|
|
function handleKeyDown(event: React.KeyboardEvent) {
|
|
const selectingCharacter = event.nativeEvent.isComposing
|
|
if (event.key === 'Enter' && !selectingCharacter) {
|
|
event.preventDefault()
|
|
const target = event.target as HTMLInputElement
|
|
sendMessage(target.value)
|
|
// wrap the form reset in setTimeout so input sources have time to finish
|
|
// https://github.com/overleaf/internal/pull/9206
|
|
window.setTimeout(() => {
|
|
target.blur()
|
|
target.closest('form')?.reset()
|
|
target.focus()
|
|
}, 0)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form className="new-message">
|
|
<label
|
|
htmlFor="chat-input"
|
|
className={bsVersion({ bs3: 'sr-only', bs5: 'visually-hidden' })}
|
|
>
|
|
{t('your_message_to_collaborators')}
|
|
</label>
|
|
<textarea
|
|
id="chat-input"
|
|
placeholder={`${t('your_message_to_collaborators')}…`}
|
|
onKeyDown={handleKeyDown}
|
|
onClick={resetUnreadMessages}
|
|
/>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default MessageInput
|