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

[Chat] Centralize conversation report-subject resolution (#10754)

Browse Source 
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Samuel Newman
2026-06-08 20:07:35 +03:00
committed by GitHub
parent 0090285fc0
commit 9b5fc19613
7 changed files with 151 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dms/ConvoMenu.tsx
+57 -65
View File
@@ -1,6 +1,6 @@
import {memo, useCallback} from 'react'
import {Keyboard, View} from 'react-native'
import {ChatBskyConvoDefs, type ModerationCause} from '@atproto/api'
import {type ModerationCause} from '@atproto/api'
import {Trans, useLingui} from '@lingui/react/macro'
import {useNavigation} from '@react-navigation/native'
import {useQueryClient} from '@tanstack/react-query'
@@ -16,13 +16,18 @@ import {
unstableCacheProfileView,
useProfileBlockMutationQueue,
} from '#/state/queries/profile'
import {useSession} from '#/state/session'
import {type ViewStyleProp} from '#/alf'
import {atoms as a} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button'
import {AfterReportConversationDialog} from '#/components/dms/AfterReportConversationDialog'
import {AfterReportDialog} from '#/components/dms/AfterReportDialog'
import {BlockedByListDialog} from '#/components/dms/BlockedByListDialog'
import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
import {ReportConversationDialog} from '#/components/dms/ReportConversationDialog'
import {
type ConvoWithDetails,
getConvoReportSubject,
} from '#/components/dms/util'
import {ArrowBoxLeft_Stroke2_Corner0_Rounded as ArrowBoxLeftIcon} from '#/components/icons/ArrowBoxLeft'
import {Bubble_Stroke2_Corner2_Rounded as BubbleIcon} from '#/components/icons/Bubble'
import {DotGrid3x1_Stroke2_Corner0_Rounded as DotsHorizontalIcon} from '#/components/icons/DotGrid'
@@ -39,7 +44,6 @@ import {ReportDialog} from '#/components/moderation/ReportDialog'
import * as Prompt from '#/components/Prompt'
import * as Toast from '#/components/Toast'
import type * as bsky from '#/types/bsky'
import {AfterReportConversationDialog} from './AfterReportConversationDialog'
let ConvoMenu = ({
convo,
@@ -49,10 +53,9 @@ let ConvoMenu = ({
showMarkAsRead,
hideTrigger,
blockInfo,
latestReportableMessage,
style,
}: {
convo: ChatBskyConvoDefs.ConvoView
convo: ConvoWithDetails
profile: Shadow<bsky.profile.AnyProfileView>
control?: Menu.MenuControlProps
currentScreen: 'list' | 'conversation'
@@ -62,20 +65,21 @@ let ConvoMenu = ({
listBlocks: ModerationCause[]
userBlock?: ModerationCause
}
latestReportableMessage?: ChatBskyConvoDefs.MessageView
style?: ViewStyleProp['style']
}): React.ReactNode => {
const {t: l} = useLingui()
const queryClient = useQueryClient()
const {currentAccount} = useSession()
const leaveConvoControl = Prompt.usePromptControl()
const reportControl = Prompt.usePromptControl()
const blockedByListControl = Prompt.usePromptControl()
const blockOrDeleteControl = Prompt.usePromptControl()
const deleteControl = Prompt.usePromptControl()
const afterReportControl = Prompt.usePromptControl()
const {listBlocks} = blockInfo
const reportSubject = getConvoReportSubject(convo, currentAccount?.did)
return (
<>
<Menu.Root control={control}>
@@ -108,6 +112,7 @@ let ConvoMenu = ({
showMarkAsRead={showMarkAsRead}
blockInfo={blockInfo}
convo={convo}
canReport={!!reportSubject}
leaveConvoControl={leaveConvoControl}
reportControl={reportControl}
blockedByListControl={blockedByListControl}
@@ -116,54 +121,37 @@ let ConvoMenu = ({
</Menu.Root>
<LeaveConvoPrompt
control={leaveConvoControl}
convoId={convo.id}
convoId={convo.view.id}
currentScreen={currentScreen}
/>
{latestReportableMessage ? (
<>
<ReportDialog
subject={{
view: 'convo',
convoId: convo.id,
message: latestReportableMessage,
}}
control={reportControl}
onAfterSubmit={() => {
const sender = convo.members.find(
member => member.did === latestReportableMessage.sender.did,
)
if (sender) {
unstableCacheProfileView(queryClient, sender)
}
blockOrDeleteControl.open()
}}
/>
<AfterReportDialog
control={blockOrDeleteControl}
currentScreen={currentScreen}
params={{
convoId: convo.id,
did: latestReportableMessage.sender.did,
}}
/>
</>
{reportSubject && (
<ReportDialog
subject={reportSubject}
control={reportControl}
onAfterSubmit={() => {
unstableCacheProfileView(queryClient, profile)
afterReportControl.open()
}}
/>
)}
{convo.kind === 'group' ? (
<AfterReportConversationDialog
control={afterReportControl}
currentScreen={currentScreen}
params={{
convoId: convo.view.id,
did: profile.did,
}}
/>
) : (
<>
<ReportConversationDialog
control={reportControl}
convoId={convo.id}
did={profile.did}
onAfterSubmit={deleteControl.open}
/>
<AfterReportConversationDialog
control={deleteControl}
currentScreen={currentScreen}
params={{
convoId: convo.id,
did: profile.did,
}}
/>
</>
<AfterReportDialog
control={afterReportControl}
currentScreen={currentScreen}
params={{
convoId: convo.view.id,
did: profile.did,
}}
/>
)}
<BlockedByListDialog
control={blockedByListControl}
@@ -177,14 +165,16 @@ ConvoMenu = memo(ConvoMenu)
function MenuContent({
convo: initialConvo,
profile,
canReport,
showMarkAsRead,
blockInfo,
leaveConvoControl,
reportControl,
blockedByListControl,
}: {
convo: ChatBskyConvoDefs.ConvoView
convo: ConvoWithDetails
profile: Shadow<bsky.profile.AnyProfileView>
canReport: boolean
showMarkAsRead?: boolean
blockInfo: {
listBlocks: ModerationCause[]
@@ -201,9 +191,9 @@ function MenuContent({
const {listBlocks, userBlock} = blockInfo
const isBlocking = userBlock || !!listBlocks.length
const isDeletedAccount = profile.handle === 'missing.invalid'
const isGroupConvo = ChatBskyConvoDefs.isGroupConvo(initialConvo.kind)
const isGroupConvo = initialConvo.kind === 'group'
const convoId = initialConvo.id
const convoId = initialConvo.view.id
const {data: convo} = useConvoQuery({convoId})
const onNavigateToProfile = useCallback(() => {
@@ -299,15 +289,17 @@ function MenuContent({
</Menu.ItemText>
</Menu.Item>
)}
<Menu.Item
destructive
label={l`Report conversation`}
onPress={reportControl.open}>
<Menu.ItemIcon icon={Flag} />
<Menu.ItemText>
<Trans>Report conversation</Trans>
</Menu.ItemText>
</Menu.Item>
{canReport && (
<Menu.Item
destructive
label={l`Report conversation`}
onPress={reportControl.open}>
<Menu.ItemIcon icon={Flag} />
<Menu.ItemText>
<Trans>Report conversation</Trans>
</Menu.ItemText>
</Menu.Item>
)}
</Menu.Group>
<Menu.Divider />
<Menu.Group>
src/components/dms/MessagesListHeader.tsx
+2 -15
View File
@@ -1,10 +1,6 @@
import {useMemo} from 'react'
import {View} from 'react-native'
import {
ChatBskyConvoDefs,
moderateProfile,
type ModerationOpts,
} from '@atproto/api'
import {moderateProfile, type ModerationOpts} from '@atproto/api'
import {useLingui} from '@lingui/react/macro'
import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
@@ -12,7 +8,6 @@ import {makeProfileLink} from '#/lib/routes/links'
import {sanitizeHandle} from '#/lib/strings/handles'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useSession} from '#/state/session'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {useIsWithinSplitView} from '#/screens/Messages/components/splitView/context'
import {atoms as a, useTheme, web} from '#/alf'
@@ -88,7 +83,6 @@ function ProfileHeaderReady({
}) {
const t = useTheme()
const {t: l} = useLingui()
const {currentAccount} = useSession()
const profile = useProfileShadow(convo.primaryMember)
const moderation = moderateProfile(profile, moderationOpts)
@@ -110,12 +104,6 @@ function ProfileHeaderReady({
: createSanitizedDisplayName(profile, true, moderation.ui('displayName'))
const handle = isDeletedAccount ? null : sanitizeHandle(profile.handle, '@')
const latestReportableMessage =
ChatBskyConvoDefs.isMessageView(convo.view.lastMessage) &&
convo.view.lastMessage.sender?.did !== currentAccount?.did
? convo.view.lastMessage
: undefined
return (
<Wrapper
heading={
@@ -151,11 +139,10 @@ function ProfileHeaderReady({
}
settings={
<ConvoMenu
convo={convo.view}
convo={convo}
profile={profile}
currentScreen="conversation"
blockInfo={blockInfo}
latestReportableMessage={latestReportableMessage}
/>
}
/>
src/components/dms/util.ts
+39
View File
@@ -10,6 +10,7 @@ import {EMOJI_REACTION_LIMIT} from '#/lib/constants'
import {logger} from '#/logger'
import {type Shadow} from '#/state/cache/profile-shadow'
import {type ConvoState, ConvoStatus} from '#/state/messages/convo/types'
import {type ReportSubject} from '#/components/moderation/ReportDialog/types'
import * as bsky from '#/types/bsky'
export const MESSAGE_GAP_THRESHOLD_MS = 60 * 60 * 1000
@@ -240,3 +241,41 @@ export function parseConvoView(
return null
}
}
/**
* Resolves the report subject for a conversation-level "Report conversation"
* action (as opposed to reporting an individual message, which always reports
* that message + its sender).
*
* - group: always report the whole convo, targeting the owner. Returns null if
* the owner has left, in which case there is nothing to report against.
* - direct: report the last reportable message if there is one (i.e. the last
* message exists and wasn't sent by us), otherwise report the whole convo
* targeting the other user.
*/
export function getConvoReportSubject(
convo: ConvoWithDetails,
ownDid: string | undefined,
): ReportSubject | null {
if (convo.kind === 'group') {
if (!convo.primaryMember) return null
return {convoId: convo.view.id, did: convo.primaryMember.did}
}
const lastMessage = convo.view.lastMessage
const reportableMessage =
ChatBskyConvoDefs.isMessageView(lastMessage) &&
lastMessage.sender?.did !== ownDid
? lastMessage
: null
if (reportableMessage) {
return {
view: 'convo',
convoId: convo.view.id,
message: reportableMessage,
}
}
return {convoId: convo.view.id, did: convo.primaryMember.did}
}
src/screens/Messages/components/ChatListItem.tsx
+2 -12
View File
@@ -307,20 +307,13 @@ function BaseChatItem({
isDeletedAccount ||
(convo.kind === 'group' && convo.details.lockStatus !== 'unlocked')
const {
lastMessage,
LastMessageIcon,
lastMessageSentAt,
latestReportableMessage,
} = useMemo(() => {
const {lastMessage, LastMessageIcon, lastMessageSentAt} = useMemo(() => {
let lastMessage = l`No messages yet`
let LastMessageIcon: React.ComponentType<SVGIconProps> | null = null
let lastMessageSentAt: string | null = null
let latestReportableMessage: ChatBskyConvoDefs.MessageView | undefined
// Deleted message
if (ChatBskyConvoDefs.isDeletedMessageView(convo.view.lastMessage)) {
lastMessageSentAt = convo.view.lastMessage.sentAt
@@ -340,7 +333,6 @@ function BaseChatItem({
if (info) {
lastMessage = info.message ?? lastMessage
lastMessageSentAt = info.sentAt
latestReportableMessage = info.reportableMessage
}
}
@@ -385,7 +377,6 @@ function BaseChatItem({
lastMessage,
LastMessageIcon,
lastMessageSentAt,
latestReportableMessage,
}
}, [l, convo, currentAccount?.did, isDeletedAccount, i18n])
@@ -663,7 +654,7 @@ function BaseChatItem({
{/* TODO: Allow showing menu for groups where the owner has left! */}
{showMenu && primaryProfile && (
<ConvoMenu
convo={convo.view}
convo={convo}
profile={primaryProfile}
control={menuControl}
currentScreen="list"
@@ -681,7 +672,6 @@ function BaseChatItem({
!gtMobile || showActions || menuControl.isOpen ? 1 : 0,
},
]}
latestReportableMessage={latestReportableMessage}
/>
)}
src/screens/Messages/components/ChatStatusInfo.tsx
+3 -9
View File
@@ -1,7 +1,7 @@
import {useCallback, useMemo} from 'react'
import {View} from 'react-native'
import {LinearGradient} from 'expo-linear-gradient'
import {ChatBskyConvoDefs, moderateProfile} from '@atproto/api'
import {moderateProfile} from '@atproto/api'
import {Trans, useLingui} from '@lingui/react/macro'
import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
@@ -33,12 +33,6 @@ export function ChatStatusInfo({convoState}: {convoState: ActiveConvoStates}) {
// if we ever allow someone other than the owner to invite people, this will need to change
const otherUser = convoState.convo.primaryMember
const lastMessage = ChatBskyConvoDefs.isMessageView(
convoState.convo.view.lastMessage,
)
? convoState.convo.view.lastMessage
: null
if (!moderationOpts) {
return null
}
@@ -64,9 +58,9 @@ export function ChatStatusInfo({convoState}: {convoState: ActiveConvoStates}) {
<View style={[a.flex_row, a.gap_md, a.w_full, otherUser && a.pt_sm]}>
{otherUser && (
<RejectMenu
label={lastMessage ? l`Block or report` : l`Block`}
label={l`Block or report`}
icon={true}
convo={convoState.convo.view}
convo={convoState.convo}
profile={otherUser}
color="negative_subtle"
size="large"
src/screens/Messages/components/IncomingRequestListItem.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ export function IncomingRequestListItem({
<AcceptChatButton convo={convo.view} currentScreen="list" />
) : null}
<RejectMenu
convo={convo.view}
convo={convo}
profile={convo.primaryMember}
showDeleteConvo
currentScreen="list"
src/screens/Messages/components/RequestButtons.tsx
+47 -46
View File
@@ -14,6 +14,7 @@ import {
unstableCacheProfileView,
useProfileBlockMutationQueue,
} from '#/state/queries/profile'
import {useSession} from '#/state/session'
import {
Button,
ButtonIcon,
@@ -25,7 +26,12 @@ import {
EmailDialogScreenID,
useEmailDialogControl,
} from '#/components/dialogs/EmailDialog'
import {AfterReportConversationDialog} from '#/components/dms/AfterReportConversationDialog'
import {AfterReportDialog} from '#/components/dms/AfterReportDialog'
import {
type ConvoWithDetails,
getConvoReportSubject,
} from '#/components/dms/util'
import {ArrowBoxLeft_Stroke2_Corner0_Rounded as LeaveIcon} from '#/components/icons/ArrowBoxLeft'
import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
import {CircleX_Stroke2_Corner0_Rounded} from '#/components/icons/CircleX'
@@ -49,17 +55,18 @@ export function RejectMenu({
}: Omit<ButtonProps, 'onPress' | 'children' | 'label'> & {
label?: string
icon?: boolean
convo: ChatBskyConvoDefs.ConvoView
convo: ConvoWithDetails
profile: ChatBskyActorDefs.ProfileViewBasic
showDeleteConvo?: boolean
currentScreen: 'list' | 'conversation'
}) {
const {t: l} = useLingui()
const {currentAccount} = useSession()
const shadowedProfile = useProfileShadow(profile)
const navigation = useNavigation<NavigationProp>()
const queryClient = useQueryClient()
const {mutate: leaveConvo} = useLeaveConvo(convo.id, {
const {mutate: leaveConvo} = useLeaveConvo(convo.view.id, {
onMutate: () => {
if (currentScreen === 'conversation') {
navigation.dispatch(StackActions.pop())
@@ -110,9 +117,7 @@ export function RejectMenu({
const reportControl = useDialogControl()
const blockOrDeleteControl = useDialogControl()
const lastMessage = ChatBskyConvoDefs.isMessageView(convo.lastMessage)
? convo.lastMessage
: null
const reportSubject = getConvoReportSubject(convo, currentAccount?.did)
return (
<>
@@ -152,50 +157,46 @@ export function RejectMenu({
</Menu.ItemText>
<Menu.ItemIcon icon={PersonXIcon} />
</Menu.Item>
{/* note: last message will almost certainly be defined, since you can't
delete messages for other people and it's impossible for a convo on this
screen to have a message sent by you */}
{lastMessage && (
<Menu.Item
label={l`Report conversation`}
onPress={reportControl.open}>
<Menu.ItemText>
<Trans>Report conversation</Trans>
</Menu.ItemText>
<Menu.ItemIcon icon={FlagIcon} />
</Menu.Item>
)}
<Menu.Item
label={l`Report conversation`}
onPress={reportControl.open}>
<Menu.ItemText>
<Trans>Report conversation</Trans>
</Menu.ItemText>
<Menu.ItemIcon icon={FlagIcon} />
</Menu.Item>
</Menu.Group>
</Menu.Outer>
</Menu.Root>
{lastMessage && (
<>
<ReportDialog
subject={{
view: 'convo',
convoId: convo.id,
message: lastMessage,
}}
control={reportControl}
onAfterSubmit={() => {
const sender = convo.members.find(
member => member.did === lastMessage.sender.did,
)
if (sender) {
unstableCacheProfileView(queryClient, sender)
}
blockOrDeleteControl.open()
}}
/>
<AfterReportDialog
control={blockOrDeleteControl}
currentScreen={currentScreen}
params={{
convoId: convo.id,
did: lastMessage.sender.did,
}}
/>
</>
{reportSubject && (
<ReportDialog
subject={reportSubject}
control={reportControl}
onAfterSubmit={() => {
unstableCacheProfileView(queryClient, profile)
blockOrDeleteControl.open()
}}
/>
)}
{convo.kind === 'group' ? (
<AfterReportConversationDialog
control={blockOrDeleteControl}
currentScreen={currentScreen}
params={{
convoId: convo.view.id,
did: profile.did,
}}
/>
) : (
<AfterReportDialog
control={blockOrDeleteControl}
currentScreen={currentScreen}
params={{
convoId: convo.view.id,
did: profile.did,
}}
/>
)}
</>
)