Message replies in chat (#10903)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/screens/Messages/components/MessagesList.tsx

@@ -35,6 +35,7 @@ import {
 } from '@atproto/api'
 import {useScrollEdgeEffectRef} from '@bsky.app/expo-scroll-edge-effect'
 
+import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {mergeRefs} from '#/lib/merge-refs'
 import {ScrollProvider} from '#/lib/ScrollContext'
 import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip'
@@ -62,6 +63,7 @@ import {atoms as a, platform, tokens, useTheme, web} from '#/alf'
 import {DateDivider} from '#/components/dms/DateDivider'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {MessageOverlays} from '#/components/dms/MessageOverlays'
+import {MessageRepliesProvider} from '#/components/dms/MessageReplies'
 import {NewMessagesPill} from '#/components/dms/NewMessagesPill'
 import {SystemMessageGroup} from '#/components/dms/SystemMessageGroup'
 import {SystemMessageItem} from '#/components/dms/SystemMessageItem'
@@ -72,7 +74,12 @@ import {IS_ANDROID, IS_NATIVE, IS_WEB} from '#/env'
 import {ChatStatusInfo} from './ChatStatusInfo'
 import {groupSystemMessages, type RenderItem} from './groupSystemMessages'
 import {InviteLinkDialogProvider} from './InviteLinkDialogProvider'
-import {MessageInputEmbed, useMessageEmbed} from './MessageInputEmbed'
+import {
+  type MessageEmbedState,
+  MessageInputEmbed,
+  useMessageEmbed,
+} from './MessageInputEmbed'
+import {MessageInputReply} from './MessageInputReply'
 import {MessagesListGroupInfoPanel} from './MessagesListGroupInfoPanel'
 import {MessagesListInfoPanel} from './MessagesListInfoPanel'
 import {KeyboardStickyView} from './vendor/KeyboardStickyView'
@@ -371,7 +378,7 @@ export function MessagesList({
 
   // -- Message sending
   const onSendMessage = useCallback(
-    async (text: string) => {
+    async (text: string, reply?: $Typed<ChatBskyConvoDefs.MessageView>) => {
       let rt = new RichText({text: text.trimEnd()}, {cleanNewlines: true})
 
       // detect facets without resolution first - this is used to see if there's
@@ -387,6 +394,7 @@ export function MessagesList({
         | $Typed<AppBskyEmbedRecord.View>
         | $Typed<ChatBskyEmbedJoinLink.View>
         | undefined
+      let replyTo: ChatBskyConvoDefs.ReplyRef | undefined
 
       // Find the embedded link facet and, if it's at the start or end of the
       // message, remove it from the text (the embed card replaces it).
@@ -455,6 +463,10 @@ export function MessagesList({
         stripLinkFacet(uri => getChatInviteCodeFromUrl(uri) === code)
       }
 
+      if (reply) {
+        replyTo = {messageId: reply.id}
+      }
+
       await rt.detectFacets(agent)
 
       rt = shortenLinks(rt)
@@ -469,10 +481,18 @@ export function MessagesList({
           text: rt.text,
           facets: rt.facets,
           embed,
+          replyTo,
         },
         embedView,
+        reply,
       )
 
+      if (replyTo) {
+        ax.metric('chat:message:reply:send', {
+          convoId: convoState.convo.view.id,
+          isGroup: convoState.convo.kind === 'group',
+        })
+      }
       if (convoState.convo.kind === 'group') {
         ax.metric('groupchat:message:send', {
           convoId: convoState.convo.view.id,
@@ -510,6 +530,29 @@ export function MessagesList({
     })
   }, [flatListRef])
 
+  // Scroll to a message by id, if it's currently loaded in the list. Per the
+  // feature scope, we don't fetch history to find unloaded messages - tapping a
+  // reply to an out-of-window message is a no-op. Returns whether the message
+  // was found, so the caller knows whether to flash it.
+  const scrollToMessage = useNonReactiveCallback((messageId: string) => {
+    const index = renderItems.findIndex(
+      item =>
+        (item.type === 'message' ||
+          item.type === 'pending-message' ||
+          item.type === 'deleted-message') &&
+        item.message.id === messageId,
+    )
+    if (index === -1) return false
+
+    ax.metric('chat:message:reply:tap', {convoId: convoState.convo.view.id})
+    flatListRef.current?.scrollToIndex({
+      index,
+      viewPosition: 0.3,
+      animated: true,
+    })
+    return true
+  })
+
   const renderItem = ({item, index}: {item: RenderItem; index: number}) => {
     if (item.type === 'message' || item.type === 'pending-message') {
       return (
@@ -561,138 +604,180 @@ export function MessagesList({
 
   return (
     <InviteLinkDialogProvider convo={convoState.convo}>
-      <MessageOverlays>
-        <KeyboardGestureArea
-          interpolator="ios"
-          // HACKFIX: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1419
-          offset={Math.round(inputHeightJS)}
-          // slightly too buggy unfortunately, enable when possible
-          // textInputNativeID={textInputId}
-          style={[a.flex_1]}>
-          {/* Custom scroll provider so that we can use the `onScroll` event in our custom List implementation */}
-          <Animated.View style={[a.flex_1, animatedListStyle]}>
-            <ScrollProvider onScroll={onScroll}>
-              <List
-                ref={flatListRef}
-                data={renderItems}
-                renderItem={renderItem}
-                keyExtractor={keyExtractor}
-                disableFullWindowScroll={true}
-                disableVirtualization={true}
-                // The extra two items account for the header and the footer components
-                initialNumToRender={IS_NATIVE ? 32 : 62}
-                maxToRenderPerBatch={IS_WEB ? 32 : 62}
-                keyboardDismissMode="interactive"
-                keyboardShouldPersistTaps="handled"
-                maintainVisibleContentPosition={{minIndexForVisible: 0}}
-                removeClippedSubviews={false}
-                sideBorders={false}
-                onContentSizeChange={onContentSizeChange}
-                onStartReached={onStartReached}
-                onScrollToIndexFailed={onScrollToIndexFailed}
-                showsVerticalScrollIndicator={!IS_ANDROID}
-                scrollEventThrottle={100}
-                ListHeaderComponent={
-                  <>
-                    <MaybeLoader isLoading={convoState.isFetchingHistory} />
-                    {convoState.hasAllHistory ? (
-                      convoState.convo?.kind === 'group' ? (
-                        <MessagesListGroupInfoPanel convo={convoState.convo} />
-                      ) : (
-                        <MessagesListInfoPanel convo={convoState.convo} />
-                      )
-                    ) : null}
-                  </>
-                }
-                // native only (prop is not supported on web)
-                renderScrollComponent={renderScrollComponent}
-                contentContainerStyle={{
-                  paddingBottom: platform({
-                    // ios is slightly larger as the input has no top padding
-                    ios: tokens.space.lg,
-                    android: tokens.space.md,
-                    web: 0, // web uses ListFooterComponent instead for scroll reasons
-                  }),
-                }}
-                ListFooterComponent={
-                  <View
-                    style={web({height: tokens.space.md + inputHeightJS})}
-                  />
-                }
-                style={[
-                  web({
-                    scrollbarWidth: 'thin',
-                    scrollbarColor: `${t.palette.contrast_100} transparent`,
-                    scrollbarGutter: 'stable',
-                  }),
-                ]}
-                pointerEvents={!hasScrolled ? 'none' : 'auto'}
-                contentInset={{top: transparentHeaderHeight}}
-                scrollIndicatorInsets={{top: transparentHeaderHeight}}
-              />
-            </ScrollProvider>
-          </Animated.View>
-          <KeyboardStickyView
-            style={[a.absolute, a.bottom_0, a.left_0, a.right_0]}
-            onLayout={onInputLayout}
-            minimumOffset={bottomInset}
-            offset={{
-              closed: platform({
-                ios: tokens.space.lg, // hide bottom padding when closed
-                default: 0,
-              }),
-              opened: 0,
-            }}>
-            {footer ?? (
-              <Animated.View entering={FadeIn.duration(200)}>
-                <ConversationFooter
-                  convoState={convoState}
-                  hasAcceptOverride={hasAcceptOverride}>
-                  {({loading}) =>
-                    ax.features.enabled(
-                      ax.features.DmsNewMessageComposerEnable,
-                    ) ? (
-                      <MessageComposer
-                        textInputId={textInputId}
-                        onSendMessage={(message: string) =>
-                          void onSendMessage(message)
-                        }
-                        hasEmbed={!!messageEmbed}
-                        setEmbed={setEmbed}
-                        loading={loading}>
-                        <MessageInputEmbed
-                          embed={messageEmbed}
-                          setEmbed={setEmbed}
-                        />
-                      </MessageComposer>
-                    ) : (
-                      <MessageInput
+      <MessageRepliesProvider scrollToMessage={scrollToMessage}>
+        <MessageOverlays>
+          <KeyboardGestureArea
+            interpolator="ios"
+            // HACKFIX: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1419
+            offset={Math.round(inputHeightJS)}
+            // slightly too buggy unfortunately, enable when possible
+            // textInputNativeID={textInputId}
+            style={[a.flex_1]}>
+            {/* Custom scroll provider so that we can use the `onScroll` event in our custom List implementation */}
+            <Animated.View style={[a.flex_1, animatedListStyle]}>
+              <ScrollProvider onScroll={onScroll}>
+                <List
+                  ref={flatListRef}
+                  data={renderItems}
+                  renderItem={renderItem}
+                  keyExtractor={keyExtractor}
+                  disableFullWindowScroll={true}
+                  disableVirtualization={true}
+                  // The extra two items account for the header and the footer components
+                  initialNumToRender={IS_NATIVE ? 32 : 62}
+                  maxToRenderPerBatch={IS_WEB ? 32 : 62}
+                  keyboardDismissMode="interactive"
+                  keyboardShouldPersistTaps="handled"
+                  maintainVisibleContentPosition={{minIndexForVisible: 0}}
+                  removeClippedSubviews={false}
+                  sideBorders={false}
+                  onContentSizeChange={onContentSizeChange}
+                  onStartReached={onStartReached}
+                  onScrollToIndexFailed={onScrollToIndexFailed}
+                  showsVerticalScrollIndicator={!IS_ANDROID}
+                  scrollEventThrottle={100}
+                  ListHeaderComponent={
+                    <>
+                      <MaybeLoader isLoading={convoState.isFetchingHistory} />
+                      {convoState.hasAllHistory ? (
+                        convoState.convo?.kind === 'group' ? (
+                          <MessagesListGroupInfoPanel
+                            convo={convoState.convo}
+                          />
+                        ) : (
+                          <MessagesListInfoPanel convo={convoState.convo} />
+                        )
+                      ) : null}
+                    </>
+                  }
+                  // native only (prop is not supported on web)
+                  renderScrollComponent={renderScrollComponent}
+                  contentContainerStyle={{
+                    paddingBottom: platform({
+                      // ios is slightly larger as the input has no top padding
+                      ios: tokens.space.lg,
+                      android: tokens.space.md,
+                      web: 0, // web uses ListFooterComponent instead for scroll reasons
+                    }),
+                  }}
+                  ListFooterComponent={
+                    <View
+                      style={web({height: tokens.space.md + inputHeightJS})}
+                    />
+                  }
+                  style={[
+                    web({
+                      scrollbarWidth: 'thin',
+                      scrollbarColor: `${t.palette.contrast_100} transparent`,
+                      scrollbarGutter: 'stable',
+                    }),
+                  ]}
+                  pointerEvents={!hasScrolled ? 'none' : 'auto'}
+                  contentInset={{top: transparentHeaderHeight}}
+                  scrollIndicatorInsets={{top: transparentHeaderHeight}}
+                />
+              </ScrollProvider>
+            </Animated.View>
+            <KeyboardStickyView
+              style={[a.absolute, a.bottom_0, a.left_0, a.right_0]}
+              onLayout={onInputLayout}
+              minimumOffset={bottomInset}
+              offset={{
+                closed: platform({
+                  ios: tokens.space.lg, // hide bottom padding when closed
+                  default: 0,
+                }),
+                opened: 0,
+              }}>
+              {footer ?? (
+                <Animated.View entering={FadeIn.duration(200)}>
+                  <ConversationFooter
+                    convoState={convoState}
+                    hasAcceptOverride={hasAcceptOverride}>
+                    {({loading}) => (
+                      <Composer
                         textInputId={textInputId}
                         onSendMessage={onSendMessage}
-                        hasEmbed={!!messageEmbed}
+                        messageEmbed={messageEmbed}
                         setEmbed={setEmbed}
-                        loading={loading}>
-                        <MessageInputEmbed
-                          embed={messageEmbed}
-                          setEmbed={setEmbed}
-                        />
-                      </MessageInput>
-                    )
-                  }
-                </ConversationFooter>
-              </Animated.View>
-            )}
-          </KeyboardStickyView>
-        </KeyboardGestureArea>
+                        loading={loading}
+                        useNewComposer={ax.features.enabled(
+                          ax.features.DmsNewMessageComposerEnable,
+                        )}
+                      />
+                    )}
+                  </ConversationFooter>
+                </Animated.View>
+              )}
+            </KeyboardStickyView>
+          </KeyboardGestureArea>
 
-        {newMessagesPill.show && (
-          <NewMessagesPill onPress={scrollToEndOnPress} />
-        )}
-      </MessageOverlays>
+          {newMessagesPill.show && (
+            <NewMessagesPill onPress={scrollToEndOnPress} />
+          )}
+        </MessageOverlays>
+      </MessageRepliesProvider>
     </InviteLinkDialogProvider>
   )
 }
 
+/**
+ * Picks the new vs legacy composer and mounts the reply preview alongside the
+ * existing embed preview in the composer's children slot. The staged reply
+ * itself is read and cleared inside the composer via `useMessageReplies`.
+ */
+function Composer({
+  textInputId,
+  onSendMessage,
+  messageEmbed,
+  setEmbed,
+  loading,
+  useNewComposer,
+}: {
+  textInputId: string
+  onSendMessage: (
+    message: string,
+    replyTo?: $Typed<ChatBskyConvoDefs.MessageView>,
+  ) => Promise<void>
+  messageEmbed: MessageEmbedState | undefined
+  setEmbed: (embedUrl: string | undefined) => void
+  loading?: boolean
+  useNewComposer: boolean
+}) {
+  const handleSendMessage = useNonReactiveCallback(
+    (message: string, replyTo?: $Typed<ChatBskyConvoDefs.MessageView>) => {
+      void onSendMessage(message, replyTo)
+    },
+  )
+
+  const previews = (
+    <>
+      <MessageInputReply />
+      <MessageInputEmbed embed={messageEmbed} setEmbed={setEmbed} />
+    </>
+  )
+
+  return useNewComposer ? (
+    <MessageComposer
+      textInputId={textInputId}
+      onSendMessage={handleSendMessage}
+      hasEmbed={!!messageEmbed}
+      setEmbed={setEmbed}
+      loading={loading}>
+      {previews}
+    </MessageComposer>
+  ) : (
+    <MessageInput
+      textInputId={textInputId}
+      onSendMessage={handleSendMessage}
+      hasEmbed={!!messageEmbed}
+      setEmbed={setEmbed}
+      loading={loading}>
+      {previews}
+    </MessageInput>
+  )
+}
+
 /** Note: native only */
 function ChatScrollComponent({
   ref,