acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Language selection and suggestion UX improvements (#9067)

Browse Source 
* feat: don't retain accepted language suggestion after finishing or exiting post (#8886)

* feat: don't retain accepted language suggestion after finishing or exiting post

* fix: rebase fixes

* fix: rebase fixes

* chore: lint

* Rename onChange for clarity

* Improve logic in composer

* Handle user override more explicitly

* Drill in onSelectLanguage callback into dialog too

* Fix typo

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Make text crystal clear

* Handle multiple languages

---------

Co-authored-by: Elijah Seed-Arita <elijaharita@gmail.com>
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
This commit is contained in:
Eric Bailey
2025-10-02 09:18:52 -05:00
committed by GitHub
parent 5fd52b3d30
commit 02b189a40e
6 changed files with 241 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/state/persisted/schema.ts
+1 -1
View File
@@ -71,7 +71,7 @@ const schema = z.object({
contentLanguages: z.array(z.string()),
/**
* The language(s) the user is currently posting in, configured within the
* composer. Multiple languages are psearate by commas.
* composer. Multiple languages are separated by commas.
*
* BCP-47 2-letter language code without region.
*/
src/state/preferences/languages.tsx
+4
View File
@@ -156,6 +156,10 @@ export function toPostLanguages(postLanguage: string): string[] {
return postLanguage.split(',').filter(Boolean)
}
export function fromPostLanguages(languages: string[]): string {
return languages.filter(Boolean).join(',')
}
export function hasPostLanguage(postLanguage: string, code2: string): boolean {
return toPostLanguages(postLanguage).includes(code2)
}
src/view/com/composer/Composer.tsx
+55 -6
View File
@@ -88,6 +88,7 @@ import {
import {useModalControls} from '#/state/modals'
import {useRequireAltTextEnabled} from '#/state/preferences'
import {
fromPostLanguages,
toPostLanguages,
useLanguagePrefs,
useLanguagePrefsApi,
@@ -197,6 +198,44 @@ export const ComposePost = ({
const [publishingStage, setPublishingStage] = useState('')
const [error, setError] = useState('')
/**
* A temporary local reference to a language suggestion that the user has
* accepted. This overrides the global post language preference, but is not
* stored permanently.
*/
const [acceptedLanguageSuggestion, setAcceptedLanguageSuggestion] = useState<
string | null
>(null)
/**
* The language(s) of the post being replied to.
*/
const [replyToLanguages, setReplyToLanguages] = useState<string[]>(
replyTo?.langs || [],
)
/**
* The currently selected languages of the post. Prefer local temporary
* language suggestion over global lang prefs, if available.
*/
const currentLanguages = useMemo(
() =>
acceptedLanguageSuggestion
? [acceptedLanguageSuggestion]
: toPostLanguages(langPrefs.postLanguage),
[acceptedLanguageSuggestion, langPrefs.postLanguage],
)
/**
* When the user selects a language from the composer language selector,
* clear any temporary language suggestions they may have selected
* previously, and any we might try to suggest to them.
*/
const onSelectLanguage = () => {
setAcceptedLanguageSuggestion(null)
setReplyToLanguages([])
}
const [composerState, composerDispatch] = useReducer(
composerReducer,
{
@@ -414,7 +453,7 @@ export const ComposePost = ({
thread,
replyTo: replyTo?.uri,
onStateChange: setPublishingStage,
langs: toPostLanguages(langPrefs.postLanguage),
langs: currentLanguages,
})
).uris[0]
@@ -490,7 +529,7 @@ export const ComposePost = ({
isPartOfThread: thread.posts.length > 1,
hasLink: !!post.embed.link,
hasQuote: !!post.embed.quote,
langs: langPrefs.postLanguage,
langs: fromPostLanguages(currentLanguages),
logContext: 'Composer',
})
index++
@@ -557,7 +596,7 @@ export const ComposePost = ({
thread,
canPost,
isPublishing,
langPrefs.postLanguage,
currentLanguages,
onClose,
onPost,
onPostSuccess,
@@ -654,8 +693,9 @@ export const ComposePost = ({
<>
<SuggestedLanguage
text={activePost.richtext.text}
// NOTE(@elijaharita): currently just choosing the first language if any exists
replyToLanguage={replyTo?.langs?.[0]}
replyToLanguages={replyToLanguages}
currentLanguages={currentLanguages}
onAcceptSuggestedLanguage={setAcceptedLanguageSuggestion}
/>
<ComposerPills
isReply={!!replyTo}
@@ -678,6 +718,8 @@ export const ComposePost = ({
type: 'add_post',
})
}}
currentLanguages={currentLanguages}
onSelectLanguage={onSelectLanguage}
/>
</>
)
@@ -1289,6 +1331,8 @@ function ComposerFooter({
onEmojiButtonPress,
onSelectVideo,
onAddPost,
currentLanguages,
onSelectLanguage,
}: {
post: PostDraft
dispatch: (action: PostAction) => void
@@ -1297,6 +1341,8 @@ function ComposerFooter({
onError: (error: string) => void
onSelectVideo: (postId: string, asset: ImagePickerAsset) => void
onAddPost: () => void
currentLanguages: string[]
onSelectLanguage?: (language: string) => void
}) {
const t = useTheme()
const {_} = useLingui()
@@ -1450,7 +1496,10 @@ function ComposerFooter({
<PlusIcon size="lg" />
</Button>
)}
<PostLanguageSelect />
<PostLanguageSelect
currentLanguages={currentLanguages}
onSelectLanguage={onSelectLanguage}
/>
<CharProgress
count={post.shortenedGraphemeLength}
style={{width: 65}}
src/view/com/composer/select-language/PostLanguageSelect.tsx
+35 -9
View File
@@ -17,7 +17,13 @@ import * as Menu from '#/components/Menu'
import {Text} from '#/components/Typography'
import {PostLanguageSelectDialog} from './PostLanguageSelectDialog'
export function PostLanguageSelect() {
export function PostLanguageSelect({
currentLanguages: currentLanguagesProp,
onSelectLanguage,
}: {
currentLanguages?: string[]
onSelectLanguage?: (language: string) => void
}) {
const {_} = useLingui()
const langPrefs = useLanguagePrefs()
const setLangPrefs = useLanguagePrefsApi()
@@ -27,6 +33,9 @@ export function PostLanguageSelect() {
new Set([...langPrefs.postLanguageHistory, langPrefs.postLanguage]),
)
const currentLanguages =
currentLanguagesProp ?? toPostLanguages(langPrefs.postLanguage)
if (
dedupedHistory.length === 1 &&
dedupedHistory[0] === langPrefs.postLanguage
@@ -34,7 +43,10 @@ export function PostLanguageSelect() {
return (
<>
<LanguageBtn onPress={languageDialogControl.open} />
<PostLanguageSelectDialog control={languageDialogControl} />
<PostLanguageSelectDialog
control={languageDialogControl}
currentLanguages={currentLanguages}
/>
</>
)
}
@@ -43,7 +55,9 @@ export function PostLanguageSelect() {
<>
<Menu.Root>
<Menu.Trigger label={_(msg`Select post language`)}>
{({props}) => <LanguageBtn {...props} />}
{({props}) => (
<LanguageBtn currentLanguages={currentLanguages} {...props} />
)}
</Menu.Trigger>
<Menu.Outer>
<Menu.Group>
@@ -56,10 +70,13 @@ export function PostLanguageSelect() {
<Menu.Item
key={historyItem}
label={_(msg`Select ${langName}`)}
onPress={() => setLangPrefs.setPostLanguage(historyItem)}>
onPress={() => {
setLangPrefs.setPostLanguage(historyItem)
onSelectLanguage?.(historyItem)
}}>
<Menu.ItemText>{langName}</Menu.ItemText>
<Menu.ItemRadio
selected={historyItem === langPrefs.postLanguage}
selected={currentLanguages.includes(historyItem)}
/>
</Menu.Item>
)
@@ -77,17 +94,26 @@ export function PostLanguageSelect() {
</Menu.Outer>
</Menu.Root>
<PostLanguageSelectDialog control={languageDialogControl} />
<PostLanguageSelectDialog
control={languageDialogControl}
currentLanguages={currentLanguages}
onSelectLanguage={onSelectLanguage}
/>
</>
)
}
function LanguageBtn(props: Omit<ButtonProps, 'label' | 'children'>) {
function LanguageBtn(
props: Omit<ButtonProps, 'label' | 'children'> & {
currentLanguages?: string[]
},
) {
const {_} = useLingui()
const langPrefs = useLanguagePrefs()
const t = useTheme()
const postLanguagesPref = toPostLanguages(langPrefs.postLanguage)
const currentLanguages = props.currentLanguages ?? postLanguagesPref
return (
<Button
@@ -106,7 +132,7 @@ function LanguageBtn(props: Omit<ButtonProps, 'label' | 'children'>) {
{({pressed, hovered}) => {
const color =
pressed || hovered ? t.palette.primary_300 : t.palette.primary_500
if (postLanguagesPref.length > 0) {
if (currentLanguages.length > 0) {
return (
<Text
style={[
@@ -117,7 +143,7 @@ function LanguageBtn(props: Omit<ButtonProps, 'label' | 'children'>) {
{maxWidth: 100},
]}
numberOfLines={1}>
{postLanguagesPref
{currentLanguages
.map(lang => codeToLanguageName(lang, langPrefs.appLanguage))
.join(', ')}
</Text>
src/view/com/composer/select-language/PostLanguageSelectDialog.tsx
+25 -3
View File
@@ -8,6 +8,7 @@ import {languageName} from '#/locale/helpers'
import {type Language, LANGUAGES, LANGUAGES_MAP_CODE2} from '#/locale/languages'
import {isNative, isWeb} from '#/platform/detection'
import {
toPostLanguages,
useLanguagePrefs,
useLanguagePrefsApi,
} from '#/state/preferences/languages'
@@ -23,8 +24,16 @@ import {Text} from '#/components/Typography'
export function PostLanguageSelectDialog({
control,
/**
* Optionally can be passed to show different values than what is saved in
* langPrefs.
*/
currentLanguages,
onSelectLanguage,
}: {
control: Dialog.DialogControlProps
currentLanguages?: string[]
onSelectLanguage?: (language: string) => void
}) {
const {height} = useWindowDimensions()
const insets = useSafeAreaInsets()
@@ -40,13 +49,22 @@ export function PostLanguageSelectDialog({
nativeOptions={{minHeight: height - insets.top}}>
<Dialog.Handle />
<ErrorBoundary renderError={renderErrorBoundary}>
<DialogInner />
<DialogInner
currentLanguages={currentLanguages}
onSelectLanguage={onSelectLanguage}
/>
</ErrorBoundary>
</Dialog.Outer>
)
}
export function DialogInner() {
export function DialogInner({
currentLanguages,
onSelectLanguage,
}: {
currentLanguages?: string[]
onSelectLanguage?: (language: string) => void
}) {
const control = Dialog.useDialogContext()
const [headerHeight, setHeaderHeight] = useState(0)
@@ -63,8 +81,11 @@ export function DialogInner() {
}, [])
const langPrefs = useLanguagePrefs()
const postLanguagesPref =
currentLanguages ?? toPostLanguages(langPrefs.postLanguage)
const [checkedLanguagesCode2, setCheckedLanguagesCode2] = useState<string[]>(
langPrefs.postLanguage.split(',') || [langPrefs.primaryLanguage],
postLanguagesPref || [langPrefs.primaryLanguage],
)
const [search, setSearch] = useState('')
@@ -79,6 +100,7 @@ export function DialogInner() {
langsString = langPrefs.primaryLanguage
}
setLangPrefs.setPostLanguage(langsString)
onSelectLanguage?.(langsString)
})
}
src/view/com/composer/select-language/SuggestedLanguage.tsx
+121 -44
View File
@@ -1,16 +1,12 @@
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'
import lande from 'lande'
import {code3ToCode2Strict, codeToLanguageName} from '#/locale/helpers'
import {
toPostLanguages,
useLanguagePrefs,
useLanguagePrefsApi,
} from '#/state/preferences/languages'
import {useLanguagePrefs} from '#/state/preferences/languages'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {Earth_Stroke2_Corner2_Rounded as EarthIcon} from '#/components/icons/Globe'
@@ -22,28 +18,42 @@ const cancelIdle = globalThis.cancelIdleCallback || clearTimeout
export function SuggestedLanguage({
text,
replyToLanguage: replyToLanguageProp,
replyToLanguages: replyToLanguagesProp,
currentLanguages,
onAcceptSuggestedLanguage,
}: {
text: string
replyToLanguage?: string
/**
* All languages associated with the post being replied to.
*/
replyToLanguages: string[]
/**
* All languages currently selected for the post being composed.
*/
currentLanguages: string[]
/**
* Called when the user accepts a suggested language. We only pass a single
* language here. If the post being replied to has multiple languages, we
* only suggest the first one.
*/
onAcceptSuggestedLanguage: (language: string | null) => void
}) {
const replyToLanguage = cleanUpLanguage(replyToLanguageProp)
const langPrefs = useLanguagePrefs()
const replyToLanguages = replyToLanguagesProp
.map(lang => cleanUpLanguage(lang))
.filter(Boolean) as string[]
const [hasInteracted, setHasInteracted] = useState(false)
const [suggestedLanguage, setSuggestedLanguage] = useState<
string | undefined
>(text.length === 0 ? replyToLanguage : undefined)
const langPrefs = useLanguagePrefs()
const setLangPrefs = useLanguagePrefsApi()
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
@@ -58,55 +68,122 @@ export function SuggestedLanguage({
})
return () => cancelIdle(idle)
}, [text, replyToLanguage])
}, [text])
if (
suggestedLanguage &&
!toPostLanguages(langPrefs.postLanguage).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 is not already
* using or has not already selected one of the languages of the post they
* are replying to.
*/
const hasSuggestedReplyLanguage =
!hasInteracted &&
!suggestedLanguage &&
replyToLanguages.length &&
!replyToLanguages.some(l => currentLanguages.includes(l))
if (hasLanguageSuggestion) {
const suggestedLanguageName = codeToLanguageName(
suggestedLanguage,
langPrefs.appLanguage,
)
return (
<LanguageSuggestionButton
label={
<RNText>
<Trans>
Are you writing in{' '}
<Text style={[a.font_bold]}>{suggestedLanguageName}</Text>?
</Trans>
</RNText>
}
value={suggestedLanguage}
onAccept={onAcceptSuggestedLanguage}
/>
)
} else if (hasSuggestedReplyLanguage) {
const suggestedLanguageName = codeToLanguageName(
replyToLanguages[0],
langPrefs.appLanguage,
)
return (
<LanguageSuggestionButton
label={
<RNText>
<Trans>
The post you're replying to was marked as being written in{' '}
{suggestedLanguageName} by its author. Would you like to reply in{' '}
<Text style={[a.font_bold]}>{suggestedLanguageName}</Text>?
</Trans>
</RNText>
}
value={replyToLanguages[0]}
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 (
<View style={[a.px_lg, a.py_sm]}>
<View
style={[
t.atoms.border_contrast_low,
a.gap_sm,
a.gap_md,
a.border,
a.flex_row,
a.align_center,
a.rounded_sm,
a.px_lg,
a.py_md,
a.mx_md,
a.my_sm,
a.p_md,
a.pl_lg,
t.atoms.bg,
t.atoms.border_contrast_low,
]}>
<EarthIcon />
<Text style={[a.flex_1]}>
<Trans>
Are you writing in{' '}
<Text style={[a.font_semi_bold]}>{suggestedLanguageName}</Text>?
</Trans>
</Text>
<View style={[a.flex_1]}>
<Text
style={[
a.flex_1,
a.leading_snug,
{
maxWidth: 400,
},
]}>
{label}
</Text>
</View>
<Button
color="secondary"
size="small"
variant="solid"
onPress={() => setLangPrefs.setPostLanguage(suggestedLanguage)}
label={_(msg`Change post language to ${suggestedLanguageName}`)}>
color="secondary"
onPress={() => onAccept(value)}
label={_(msg`Accept this language suggestion`)}>
<ButtonText>
<Trans>Yes</Trans>
</ButtonText>
</Button>
</View>
)
} else {
return null
}
</View>
)
}
/**