Language selection and suggestion UX improvements (#9067)

* 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 <[e-mail]>

* Make text crystal clear

* Handle multiple languages

---------

Co-authored-by: Elijah Seed-Arita <[e-mail]>
Co-authored-by: surfdude29 <[e-mail]>

src/state/persisted/schema.ts

···
     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

···
   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

···
 import {useModalControls} from '#/state/modals'
 import {useRequireAltTextEnabled} from '#/state/preferences'
 import {
+  fromPostLanguages,
   toPostLanguages,
   useLanguagePrefs,
   useLanguagePrefsApi,
···
   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,
     {
···
           thread,
           replyTo: replyTo?.uri,
           onStateChange: setPublishingStage,
-          langs: toPostLanguages(langPrefs.postLanguage),
+          langs: currentLanguages,
         })
       ).uris[0]
 
···
             isPartOfThread: thread.posts.length > 1,
             hasLink: !!post.embed.link,
             hasQuote: !!post.embed.quote,
-            langs: langPrefs.postLanguage,
+            langs: fromPostLanguages(currentLanguages),
             logContext: 'Composer',
           })
           index++
···
     thread,
     canPost,
     isPublishing,
-    langPrefs.postLanguage,
+    currentLanguages,
     onClose,
     onPost,
     onPostSuccess,
···
     <>
       <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}
···
             type: 'add_post',
           })
         }}
+        currentLanguages={currentLanguages}
+        onSelectLanguage={onSelectLanguage}
       />
     </>
   )
···
   onEmojiButtonPress,
   onSelectVideo,
   onAddPost,
+  currentLanguages,
+  onSelectLanguage,
 }: {
   post: PostDraft
   dispatch: (action: PostAction) => void
···
   onError: (error: string) => void
   onSelectVideo: (postId: string, asset: ImagePickerAsset) => void
   onAddPost: () => void
+  currentLanguages: string[]
+  onSelectLanguage?: (language: string) => void
 }) {
   const t = useTheme()
   const {_} = useLingui()
···
             <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

···
 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()
···
   const dedupedHistory = Array.from(
     new Set([...langPrefs.postLanguageHistory, langPrefs.postLanguage]),
   )
+
+  const currentLanguages =
+    currentLanguagesProp ?? toPostLanguages(langPrefs.postLanguage)
 
   if (
     dedupedHistory.length === 1 &&
···
     return (
       <>
         <LanguageBtn onPress={languageDialogControl.open} />
-        <PostLanguageSelectDialog control={languageDialogControl} />
+        <PostLanguageSelectDialog
+          control={languageDialogControl}
+          currentLanguages={currentLanguages}
+        />
       </>
     )
   }
···
     <>
       <Menu.Root>
         <Menu.Trigger label={_(msg`Select post language`)}>
-          {({props}) => <LanguageBtn {...props} />}
+          {({props}) => (
+            <LanguageBtn currentLanguages={currentLanguages} {...props} />
+          )}
         </Menu.Trigger>
         <Menu.Outer>
           <Menu.Group>
···
                 <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>
               )
···
         </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
···
       {({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={[
···
                 {maxWidth: 100},
               ]}
               numberOfLines={1}>
-              {postLanguagesPref
+              {currentLanguages
                 .map(lang => codeToLanguageName(lang, langPrefs.appLanguage))
                 .join(', ')}
             </Text>

src/view/com/composer/select-language/PostLanguageSelectDialog.tsx

···
 import {type Language, LANGUAGES, LANGUAGES_MAP_CODE2} from '#/locale/languages'
 import {isNative, isWeb} from '#/platform/detection'
 import {
+  toPostLanguages,
   useLanguagePrefs,
   useLanguagePrefsApi,
 } from '#/state/preferences/languages'
···
 
 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()
···
       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)
 
···
   }, [])
 
   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('')
 
···
         langsString = langPrefs.primaryLanguage
       }
       setLangPrefs.setPostLanguage(langsString)
+      onSelectLanguage?.(langsString)
     })
   }
 

src/view/com/composer/select-language/SuggestedLanguage.tsx

···
 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'
···
 
 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
···
     })
 
     return () => cancelIdle(idle)
-  }, [text, replyToLanguage])
+  }, [text])
+
+  /*
+   * 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 (
-    suggestedLanguage &&
-    !toPostLanguages(langPrefs.postLanguage).includes(suggestedLanguage)
-  ) {
+  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>
+  )
 }
 
 /**