diff --git a/src/view/com/composer/select-language/SuggestedLanguage.tsx b/src/view/com/composer/select-language/SuggestedLanguage.tsx index 46f60fccf5..eb4afbc8e8 100644 --- a/src/view/com/composer/select-language/SuggestedLanguage.tsx +++ b/src/view/com/composer/select-language/SuggestedLanguage.tsx @@ -1,5 +1,5 @@ import {useEffect, useState} from 'react' -import {View} from 'react-native' +import {Text as RNText, View} from 'react-native' import {parseLanguage} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -27,22 +27,20 @@ export function SuggestedLanguage({ currentLanguages: string[] onAcceptSuggestedLanguage: (language: string | null) => void }) { + const langPrefs = useLanguagePrefs() const replyToLanguage = cleanUpLanguage(replyToLanguageProp) + const [hasInteracted, setHasInteracted] = useState(false) const [suggestedLanguage, setSuggestedLanguage] = useState< string | undefined - >(text.length === 0 ? replyToLanguage : undefined) - const langPrefs = useLanguagePrefs() - const t = useTheme() - const {_} = useLingui() + >(undefined) useEffect(() => { - // For replies, suggest the language of the post being replied to if no text - // has been typed yet - if (replyToLanguage && text.length === 0) { - setSuggestedLanguage(replyToLanguage) - return + if (text.length > 0 && !hasInteracted) { + setHasInteracted(true) } + }, [text, hasInteracted]) + useEffect(() => { const textTrimmed = text.trim() // Don't run the language model on small posts, the results are likely @@ -57,52 +55,121 @@ export function SuggestedLanguage({ }) return () => cancelIdle(idle) - }, [text, replyToLanguage]) + }, [text]) - if (suggestedLanguage && !currentLanguages.includes(suggestedLanguage)) { + /* + * We've detected a language, and the user hasn't already selected it. + */ + const hasLanguageSuggestion = + suggestedLanguage && !currentLanguages.includes(suggestedLanguage) + /* + * We have not detected a different language, and the user has not already + * selected the language of the post they are replying to. + */ + const hasSuggestedReplyLanguage = + !hasInteracted && + !suggestedLanguage && + replyToLanguage && + !currentLanguages.includes(replyToLanguage) + + if (hasLanguageSuggestion) { const suggestedLanguageName = codeToLanguageName( suggestedLanguage, langPrefs.appLanguage, ) return ( + + + Are you writing in{' '} + {suggestedLanguageName}? + + + } + value={suggestedLanguage} + onAccept={onAcceptSuggestedLanguage} + /> + ) + } else if (hasSuggestedReplyLanguage) { + const suggestedLanguageName = codeToLanguageName( + replyToLanguage, + langPrefs.appLanguage, + ) + + return ( + + + The post you're replying to is written in {suggestedLanguageName}. + Would you like to reply in{' '} + {suggestedLanguageName}? + + + } + value={replyToLanguage} + onAccept={onAcceptSuggestedLanguage} + /> + ) + } else { + return null + } +} + +function LanguageSuggestionButton({ + label, + value, + onAccept, +}: { + label: React.ReactNode + value: string + onAccept: (language: string | null) => void +}) { + const t = useTheme() + const {_} = useLingui() + + return ( + - - - Are you writing in{' '} - {suggestedLanguageName}? - - + + + {label} + + - ) - } else { - return null - } + + ) } /**