@planningcenter/chat-react-native 3.18.0-rc.7 → 3.18.0-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.18.0-rc.7",
+  "version": "3.18.0-rc.9",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -58,5 +58,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "6d7c028cd363cb5e85d262ff1e8f9df72f1cd9e7"
+  "gitHead": "1c8ef808381f80f84eba2890e1bbfc706574c69d"
 }

package/src/components/conversation/message.tsx

@@ -80,7 +80,6 @@ export function Message({
   const isReplyRootMessage = message.replyRootId === message.id
   const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt
 
-  const messageText = isDeletedReplyRootMessage ? 'Message deleted' : text
   const replyCountText = pluralize(message.replyCount, 'reply')
   const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'
   const replyRootAuthorName = message.replyRootId
@@ -118,6 +117,10 @@ export function Message({
     }
   }
 
+  const handleMessagePress = () => {
+    setShowMessageMetaToggle(!showMessageMetaToggle)
+  }
+
   const handleMessageLongPress = () => {
     if (!isPersisted) return
 
@@ -130,6 +133,7 @@ export function Message({
       reply_root_author_name: replyRootAuthorName,
     })
   }
+
   const handleReactionLongPress = (reaction: ReactionCountResource) => {
     Haptic.impactLight()
     navigation.navigate('Reactions', {
@@ -162,11 +166,12 @@ export function Message({
   return (
     <Pressable
       onLongPress={handleMessageLongPress}
-      onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}
+      onPress={handleMessagePress}
       onPressIn={handleMessagePressIn}
       onPressOut={handleMessagePressOut}
       android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
       accessibilityHint="Long press to view message actions like reacting and copying."
+      disabled={isDeletedReplyRootMessage}
     >
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
         {!message.mine && (
@@ -190,7 +195,7 @@ export function Message({
           </View>
         )}
         <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>
-          {renderAuthor && (
+          {renderAuthor && !isDeletedReplyRootMessage && (
             <Text variant="footnote" style={styles.authorName}>
               {message.author.name}
             </Text>
@@ -199,18 +204,26 @@ export function Message({
             style={styles.messageBubble}
             onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}
           >
-            <ErrorBoundary>
-              <MessageAttachments
-                attachments={message.attachments}
-                metaProps={metaProps}
-                onMessageAttachmentLongPress={handleMessageAttachmentLongPress}
-                onMessageLongPress={handleMessageLongPress}
-              />
-            </ErrorBoundary>
-            {messageText && (
+            {isDeletedReplyRootMessage ? (
               <View style={styles.messageText}>
-                <MessageMarkdown text={messageText} />
+                <Text style={styles.replyRootDeletedText}>Message deleted</Text>
               </View>
+            ) : (
+              <>
+                <ErrorBoundary>
+                  <MessageAttachments
+                    attachments={message.attachments}
+                    metaProps={metaProps}
+                    onMessageAttachmentLongPress={handleMessageAttachmentLongPress}
+                    onMessageLongPress={handleMessageLongPress}
+                  />
+                </ErrorBoundary>
+                {text && (
+                  <View style={styles.messageText}>
+                    <MessageMarkdown text={text} />
+                  </View>
+                )}
+              </>
             )}
           </View>
           {showReplyCountButton && (
@@ -224,7 +237,7 @@ export function Message({
               {replyCountText}
             </TextButton>
           )}
-          {hasReactions && (
+          {hasReactions && !isDeletedReplyRootMessage && (
             <View style={styles.messageReactions}>
               {reactionCounts.map(reaction => (
                 <MessageReaction
@@ -237,7 +250,7 @@ export function Message({
               ))}
             </View>
           )}
-          {showMessageMeta && (
+          {showMessageMeta && !isDeletedReplyRootMessage && (
             <View style={styles.messageMeta}>
               {message.mine && !pending && !error && (
                 <MessageReadReceipts
@@ -365,5 +378,9 @@ const useMessageStyles = ({ mine }: MessageResource) => {
     errorText: {
       color: colors.statusErrorText,
     },
+    replyRootDeletedText: {
+      color: colors.textColorDefaultSecondary,
+      fontStyle: 'italic',
+    },
   })
 }

package/src/components/conversation/message_form.tsx

@@ -1,9 +1,4 @@
-import {
-  RouteProp,
-  useNavigation,
-  useTheme as useNavigationTheme,
-  useRoute,
-} from '@react-navigation/native'
+import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'
 import React, { useCallback, useContext, useEffect, useState } from 'react'
 import {
   Platform,
@@ -319,9 +314,7 @@ function MessageFormInput() {
     React.useContext(MessageFormContext)
   const attachmentError = attachmentUploader?.errorMessage
 
-  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
-  const conversationId = route.params.conversation_id
-  const broadcastTypingStatus = useBroadcastTypingStatus(conversationId)
+  const broadcastTypingStatus = useBroadcastTypingStatus()
 
   const handleTextChange = (newText: string) => {
     setText(newText)

package/src/components/conversation/messages_disabled_banners.tsx

@@ -0,0 +1,69 @@
+import { StyleSheet, View, type ViewStyle } from 'react-native'
+import { useTheme } from '../../hooks'
+import { Text } from '../display'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useFeatures } from '../../hooks/use_features'
+import { availableFeatures } from '../../hooks/use_features'
+
+export const LeaderMessagesDisabledBanner = () => {
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
+
+  const description = repliesEnabled
+    ? 'Only leaders can send messages in this conversation.'
+    : 'Replies are frozen for everyone else.'
+
+  return <MessagesDisabledBanner description={description} />
+}
+
+export const MemberMessagesDisabledBanner = () => {
+  const styles = useStyles()
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
+
+  const description = repliesEnabled
+    ? 'Only leaders can send messages, but you can still add reactions.'
+    : 'Replies have been disabled by a leader, but you can still add reactions.'
+
+  return <MessagesDisabledBanner description={description} style={styles.memberBanner} />
+}
+
+interface MessagesDisabledBannerProps {
+  description: string
+  style?: ViewStyle
+}
+
+const MessagesDisabledBanner = ({ description, style }: MessagesDisabledBannerProps) => {
+  const styles = useStyles()
+
+  return (
+    <View style={[styles.baseBanner, style]}>
+      <Text style={styles.text} variant="tertiary">
+        {description}
+      </Text>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    baseBanner: {
+      paddingHorizontal: 16,
+      paddingVertical: 4,
+      backgroundColor: colors.statusNeutralComposedBackground,
+      borderTopWidth: 1,
+      borderTopColor: colors.borderColorDefaultBase,
+    },
+    text: {
+      textAlign: 'center',
+    },
+    memberBanner: {
+      paddingTop: 16,
+      paddingBottom: 16 + bottom,
+      marginBottom: -bottom,
+    },
+  })
+}

package/src/components/conversation/typing_indicator.tsx

@@ -41,16 +41,12 @@ const TypingDots = () => {
   )
 }
 
-interface TypingIndicatorProps {
-  conversationId: number
-}
-
 /**
  * Component to display typing indicators in a conversation
  * Shows "X is typing..." with animated dots
  */
-export const TypingIndicator = ({ conversationId }: TypingIndicatorProps) => {
-  const typingPeople = useTypingIndicators(conversationId)
+export const TypingIndicator = () => {
+  const typingPeople = useTypingIndicators()
   const styles = useStyles()
   const enabled = typingPeople.length > 0
 

package/src/contexts/conversation_context.tsx

@@ -0,0 +1,34 @@
+import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react'
+
+interface ConversationContextValue {
+  conversationId: number
+  currentPageReplyRootId: string | null
+}
+
+interface ConversationContextProviderProps extends PropsWithChildren {
+  conversationId: number
+  currentPageReplyRootId: string | null
+}
+
+const ConversationContext = createContext<ConversationContextValue>({
+  conversationId: 0,
+  currentPageReplyRootId: null,
+})
+
+export const ConversationContextProvider = ({
+  children,
+  conversationId,
+  currentPageReplyRootId,
+}: ConversationContextProviderProps) => {
+  const value = useMemo(
+    () => ({
+      conversationId,
+      currentPageReplyRootId,
+    }),
+    [conversationId, currentPageReplyRootId]
+  )
+
+  return <ConversationContext.Provider value={value}>{children}</ConversationContext.Provider>
+}
+
+export const useConversationContext = () => useContext(ConversationContext)

package/src/hooks/use_broadcast_typing_status.ts

@@ -1,5 +1,6 @@
 import { useCallback, useRef } from 'react'
 import { useApiClient } from './use_api_client'
+import { useConversationContext } from '../contexts/conversation_context'
 
 const THROTTLE_INTERVAL = 3000 // 3 seconds
 
@@ -10,7 +11,8 @@ const THROTTLE_INTERVAL = 3000 // 3 seconds
  * after receiving a typing event. This is how we can show a steady typing indicator even
  * if the user types once every 2.9 seconds.
  */
-export const useBroadcastTypingStatus = (conversationId: string | number) => {
+export const useBroadcastTypingStatus = () => {
+  const { conversationId, currentPageReplyRootId } = useConversationContext()
   const apiClient = useApiClient()
   const lastBroadcastTime = useRef<number>(0)
 
@@ -26,12 +28,14 @@ export const useBroadcastTypingStatus = (conversationId: string | number) => {
     apiClient.chat
       .post({
         url: `/me/conversations/${conversationId}/broadcast_typing_status`,
-        data: { data: { type: 'TypingStatus', attributes: {} } },
+        data: {
+          data: { type: 'TypingStatus', attributes: { reply_root_id: currentPageReplyRootId } },
+        },
       })
       .catch(error => {
         console.error('Failed to broadcast typing status:', error)
       })
-  }, [apiClient, conversationId])
+  }, [apiClient.chat, conversationId, currentPageReplyRootId])
 
   return broadcastTypingStatus
 }

package/src/hooks/use_typing_indicators.ts

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { PersonTyping } from './use_typing_status_cache'
 import { useCurrentPerson } from './use_current_person'
+import { useConversationContext } from '../contexts/conversation_context'
 
 /**
  * Hook for getting people currently typing in a conversation
@@ -9,9 +10,12 @@ import { useCurrentPerson } from './use_current_person'
  * The query function itself doesn't do anything, but we add to the cache
  * from useTypingStatusCache when we receive a typing event.
  */
-export const useTypingIndicators = (conversationId: number) => {
+export const useTypingIndicators = () => {
+  const { conversationId, currentPageReplyRootId } = useConversationContext()
   const cacheKey = useMemo(() => ['conversationTyping', String(conversationId)], [conversationId])
   const currentPerson = useCurrentPerson()
+  const isCurrentPerson = (authorId: number) => authorId === currentPerson?.id
+  const inMainConversationView = !currentPageReplyRootId
   const now = Date.now()
   const { data } = useQuery({
     queryKey: cacheKey,
@@ -19,8 +23,16 @@ export const useTypingIndicators = (conversationId: number) => {
     initialData: stableArray,
   })
 
-  // Filter out expired entries and the current user
-  return data.filter(person => person.expires > now && person.author_id !== currentPerson?.id)
+  return data.filter(({ author_id, expires, reply_root_id }) => {
+    if (isCurrentPerson(author_id)) return false
+    if (now > expires) return false
+
+    // If you are in the main conversation view, you will see any message sent
+    if (inMainConversationView) return true
+
+    // If you are in a reply view, you will only see messages sent in this reply thread
+    return reply_root_id === currentPageReplyRootId
+  })
 }
 
 /**

package/src/screens/conversation_details_screen.tsx

@@ -44,6 +44,8 @@ import { HeaderTextButton } from '../components/display/platform_modal_header_bu
 import { tokens } from '../vendor/tapestry/tokens'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { GroupResource } from '../types/resources/group_resource'
+import { useFeatures } from '../hooks/use_features'
+import { availableFeatures } from '../hooks/use_features'
 
 // =========================================
 // ====== Factory Constants & Types ========
@@ -93,6 +95,8 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const { repliesDisabled, setRepliesDisabled } = useConversationDisableReplies(route.params)
   const { mutate: saveTitle } = useConversationUpdate(route.params)
   const { mutate: deleteConversation } = useConversationDelete(route.params)
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
 
   const trimmedTitle = title.trim()
   const emptyTitle = trimmedTitle === '' || title === null
@@ -250,8 +254,8 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     {
       type: canUpdate ? SectionTypes.setting : SectionTypes.hidden,
       data: {
-        title: 'Freeze conversation',
-        subtitle: 'Disables replies for everyone except leaders.',
+        title: repliesEnabled ? 'Leader messages only' : 'Freeze conversation',
+        subtitle: repliesEnabled ? undefined : 'Disables replies for everyone except leaders.',
         rightItem: (
           <Switch value={repliesDisabled} onChange={() => setRepliesDisabled(!repliesDisabled)} />
         ),

package/src/screens/conversation_screen.tsx

@@ -14,9 +14,9 @@ import { FlatList, Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
 import {
-  LeaderDisabledRepliesBanner,
-  MemberDisabledRepliesBanner,
-} from '../components/conversation/disabled_replies_banners'
+  LeaderMessagesDisabledBanner,
+  MemberMessagesDisabledBanner,
+} from '../components/conversation/messages_disabled_banners'
 import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { Message } from '../components/conversation/message'
@@ -36,6 +36,7 @@ import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
 import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
+import { ConversationContextProvider } from '../contexts/conversation_context'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -53,6 +54,19 @@ export type ConversationRouteProps = {
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
 export function ConversationScreen({ route }: ConversationScreenProps) {
+  const { conversation_id, reply_root_id } = route.params
+
+  return (
+    <ConversationContextProvider
+      conversationId={conversation_id}
+      currentPageReplyRootId={reply_root_id ?? null}
+    >
+      <ConversationScreenContent route={route} />
+    </ConversationContextProvider>
+  )
+}
+
+function ConversationScreenContent({ route }: ConversationScreenProps) {
   const styles = useStyles()
   const navigation = useNavigation()
   const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
@@ -179,8 +193,8 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
           />
         )}
         <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
-        {!noMessages && <TypingIndicator conversationId={conversation_id} />}
-        {showLeaderDisabledReplyBanner && <LeaderDisabledRepliesBanner />}
+        {!noMessages && <TypingIndicator />}
+        {showLeaderDisabledReplyBanner && <LeaderMessagesDisabledBanner />}
         {canReply ? (
           <MessageForm.Root
             replyRootAuthorFirstName={replyRootAuthorFirstName}
@@ -201,7 +215,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
             <MessageForm.SubmitButton />
           </MessageForm.Root>
         ) : (
-          <MemberDisabledRepliesBanner />
+          <MemberMessagesDisabledBanner />
         )}
       </KeyboardView>
     </View>

package/src/types/jolt_events/typing_events.ts

@@ -13,4 +13,5 @@ export interface TypingBroadcastDataAttributes {
   author_id: number
   author_name: string
   id: string
+  reply_root_id: string | null
 }

package/build/components/conversation/disabled_replies_banners.d.ts

@@ -1,3 +0,0 @@
-export declare const LeaderDisabledRepliesBanner: () => import("react").JSX.Element;
-export declare const MemberDisabledRepliesBanner: () => import("react").JSX.Element;
-//# sourceMappingURL=disabled_replies_banners.d.ts.map

package/build/components/conversation/disabled_replies_banners.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"disabled_replies_banners.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/disabled_replies_banners.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,2BAA2B,mCAEvC,CAAA;AAED,eAAO,MAAM,2BAA2B,mCAQvC,CAAA"}

package/build/components/conversation/disabled_replies_banners.js

@@ -1,41 +0,0 @@
-import { StyleSheet, View } from 'react-native';
-import { useTheme } from '../../hooks';
-import { Text } from '../display';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-export const LeaderDisabledRepliesBanner = () => {
-    return <DisabledRepliesBanner description="Replies are frozen for everyone else."/>;
-};
-export const MemberDisabledRepliesBanner = () => {
-    const styles = useStyles();
-    return (<DisabledRepliesBanner description="Replies have been disabled by a leader, but you can still add reactions." style={styles.memberBanner}/>);
-};
-const DisabledRepliesBanner = ({ description, style }) => {
-    const styles = useStyles();
-    return (<View style={[styles.baseBanner, style]}>
-      <Text style={styles.text} variant="tertiary">
-        {description}
-      </Text>
-    </View>);
-};
-const useStyles = () => {
-    const { colors } = useTheme();
-    const { bottom } = useSafeAreaInsets();
-    return StyleSheet.create({
-        baseBanner: {
-            paddingHorizontal: 16,
-            paddingVertical: 4,
-            backgroundColor: colors.statusNeutralComposedBackground,
-            borderTopWidth: 1,
-            borderTopColor: colors.borderColorDefaultBase,
-        },
-        text: {
-            textAlign: 'center',
-        },
-        memberBanner: {
-            paddingTop: 16,
-            paddingBottom: 16 + bottom,
-            marginBottom: -bottom,
-        },
-    });
-};
-//# sourceMappingURL=disabled_replies_banners.js.map

package/build/components/conversation/disabled_replies_banners.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"disabled_replies_banners.js","sourceRoot":"","sources":["../../../src/components/conversation/disabled_replies_banners.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAElE,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,OAAO,CAAC,qBAAqB,CAAC,WAAW,CAAC,uCAAuC,EAAG,CAAA;AACtF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,OAAO,CACL,CAAC,qBAAqB,CACpB,WAAW,CAAC,0EAA0E,CACtF,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,EAC3B,CACH,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,qBAAqB,GAAG,CAAC,EAAE,WAAW,EAAE,KAAK,EAA8B,EAAE,EAAE;IACnF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CACtC;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,UAAU,CAC1C;QAAA,CAAC,WAAW,CACd;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE;YACV,iBAAiB,EAAE,EAAE;YACrB,eAAe,EAAE,CAAC;YAClB,eAAe,EAAE,MAAM,CAAC,+BAA+B;YACvD,cAAc,EAAE,CAAC;YACjB,cAAc,EAAE,MAAM,CAAC,sBAAsB;SAC9C;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,QAAQ;SACpB;QACD,YAAY,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,EAAE,GAAG,MAAM;YAC1B,YAAY,EAAE,CAAC,MAAM;SACtB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { StyleSheet, View, type ViewStyle } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Text } from '../display'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\n\nexport const LeaderDisabledRepliesBanner = () => {\n  return <DisabledRepliesBanner description=\"Replies are frozen for everyone else.\" />\n}\n\nexport const MemberDisabledRepliesBanner = () => {\n  const styles = useStyles()\n  return (\n    <DisabledRepliesBanner\n      description=\"Replies have been disabled by a leader, but you can still add reactions.\"\n      style={styles.memberBanner}\n    />\n  )\n}\n\ninterface DisabledRepliesBannerProps {\n  description: string\n  style?: ViewStyle\n}\n\nconst DisabledRepliesBanner = ({ description, style }: DisabledRepliesBannerProps) => {\n  const styles = useStyles()\n\n  return (\n    <View style={[styles.baseBanner, style]}>\n      <Text style={styles.text} variant=\"tertiary\">\n        {description}\n      </Text>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    baseBanner: {\n      paddingHorizontal: 16,\n      paddingVertical: 4,\n      backgroundColor: colors.statusNeutralComposedBackground,\n      borderTopWidth: 1,\n      borderTopColor: colors.borderColorDefaultBase,\n    },\n    text: {\n      textAlign: 'center',\n    },\n    memberBanner: {\n      paddingTop: 16,\n      paddingBottom: 16 + bottom,\n      marginBottom: -bottom,\n    },\n  })\n}\n"]}

package/src/components/conversation/disabled_replies_banners.tsx

@@ -1,58 +0,0 @@
-import { StyleSheet, View, type ViewStyle } from 'react-native'
-import { useTheme } from '../../hooks'
-import { Text } from '../display'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-
-export const LeaderDisabledRepliesBanner = () => {
-  return <DisabledRepliesBanner description="Replies are frozen for everyone else." />
-}
-
-export const MemberDisabledRepliesBanner = () => {
-  const styles = useStyles()
-  return (
-    <DisabledRepliesBanner
-      description="Replies have been disabled by a leader, but you can still add reactions."
-      style={styles.memberBanner}
-    />
-  )
-}
-
-interface DisabledRepliesBannerProps {
-  description: string
-  style?: ViewStyle
-}
-
-const DisabledRepliesBanner = ({ description, style }: DisabledRepliesBannerProps) => {
-  const styles = useStyles()
-
-  return (
-    <View style={[styles.baseBanner, style]}>
-      <Text style={styles.text} variant="tertiary">
-        {description}
-      </Text>
-    </View>
-  )
-}
-
-const useStyles = () => {
-  const { colors } = useTheme()
-  const { bottom } = useSafeAreaInsets()
-
-  return StyleSheet.create({
-    baseBanner: {
-      paddingHorizontal: 16,
-      paddingVertical: 4,
-      backgroundColor: colors.statusNeutralComposedBackground,
-      borderTopWidth: 1,
-      borderTopColor: colors.borderColorDefaultBase,
-    },
-    text: {
-      textAlign: 'center',
-    },
-    memberBanner: {
-      paddingTop: 16,
-      paddingBottom: 16 + bottom,
-      marginBottom: -bottom,
-    },
-  })
-}