@planningcenter/chat-react-native 3.2.0-rc.4 → 3.2.0-rc.5

package/build/screens/conversation_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'\nimport {\n  StaticScreenProps,\n  useNavigation,\n  useTheme as useNavigationTheme,\n  useRoute,\n} from '@react-navigation/native'\nimport React, { useCallback, useEffect } from 'react'\nimport { FlatList, Platform, StyleSheet, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Badge, Icon } from '../components'\nimport { Message } from '../components/conversation/message'\nimport { MessageForm } from '../components/conversation/message_form'\nimport { KeyboardView } from '../components/display/keyboard_view'\nimport { useConversation } from '../hooks/use_conversation'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\n\ntype ConversationRouteProps = {\n  conversation_id: number\n  chat_group_graph_id?: string\n}\n\nexport type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>\n\nexport function ConversationScreen({ route }: ConversationScreenProps) {\n  const styles = useStyles()\n  const navigation = useNavigation()\n\n  const { conversation_id } = route.params\n  const { data: conversation } = useConversation(route.params)\n  const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({\n    conversation_id,\n  })\n\n  // Seems to be necessary to define this way so we get the route picked up\n  const headerTitle = useCallback(\n    (props: HeaderTitleProps) => <PressableHeaderTitle {...props} />,\n    []\n  )\n\n  useEffect(() => {\n    navigation.setOptions({ headerTitle, title: conversation?.title })\n  }, [conversation, conversation_id, navigation, headerTitle, conversation?.title])\n\n  return (\n    <View style={styles.container}>\n      <KeyboardView style={styles.keyboardView}>\n        <FlatList\n          inverted\n          contentContainerStyle={styles.listContainer}\n          refreshing={isRefetching}\n          onRefresh={refetch}\n          data={messages}\n          keyExtractor={item => item.id}\n          renderItem={({ item }) => <Message {...item} conversation_id={conversation_id} />}\n          onEndReached={() => fetchNextPage()}\n        />\n        <MessageForm.Root conversation={conversation}>\n          {/* <MessageForm.AttachmentPicker /> */}\n          {/* <MessageForm.Commands /> */}\n          <MessageForm.TextInput />\n          <MessageForm.SubmitButton />\n        </MessageForm.Root>\n      </KeyboardView>\n    </View>\n  )\n}\n\nconst PressableHeaderTitle = ({ style, children }: HeaderTitleProps) => {\n  const styles = usePressableHeaderStyle()\n  const navigation = useNavigation()\n\n  const route = useRoute() as ConversationScreenProps['route']\n\n  const { data: conversation } = useConversation(route.params)\n  const badge = conversation.badges?.[0]\n  const resourceType = badge?.pcoResourceType || ''\n  const productName = badge?.appName\n  const name = badge?.text || undefined\n\n  return (\n    <PlatformPressable\n      style={styles.container}\n      onPress={() =>\n        navigation.navigate('ConversationDetails', { conversation_id: conversation?.id })\n      }\n    >\n      <View style={styles.titleWrapper}>\n        <HeaderTitle style={[styles.title, style]}>{children}</HeaderTitle>\n        <Icon name=\"general.downChevron\" size={12} />\n      </View>\n      <Badge\n        variant=\"metaSubtle\"\n        productLogoName={productName}\n        label={resourceType}\n        metaLabel={name}\n        style={styles.badge}\n      />\n    </PlatformPressable>\n  )\n}\n\nconst usePressableHeaderStyle = () => {\n  return StyleSheet.create({\n    container: {\n      alignItems: Platform.select({ android: 'flex-start', default: 'center' }),\n    },\n    titleWrapper: {\n      alignItems: 'center',\n      columnGap: 4,\n      flexDirection: 'row',\n    },\n    title: {\n      padding: 0,\n      margin: 0,\n    },\n    badge: {\n      alignSelf: Platform.select({ android: 'flex-start', default: 'center' }),\n      marginTop: 2,\n    },\n  })\n}\n\nconst useStyles = () => {\n  const navigationTheme = useNavigationTheme()\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n      backgroundColor: navigationTheme.colors.card,\n      paddingBottom: bottom,\n    },\n    keyboardView: {\n      flex: 1,\n    },\n    listContainer: {\n      gap: 12,\n      paddingHorizontal: 16,\n      paddingVertical: 12,\n    },\n  })\n}\n"]}
+{"version":3,"file":"conversation_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'\nimport {\n  StaticScreenProps,\n  useNavigation,\n  useTheme as useNavigationTheme,\n  useRoute,\n} from '@react-navigation/native'\nimport React, { useCallback, useEffect } from 'react'\nimport { FlatList, Platform, StyleSheet, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Badge, Icon } from '../components'\nimport { Message } from '../components/conversation/message'\nimport { MessageForm } from '../components/conversation/message_form'\nimport { KeyboardView } from '../components/display/keyboard_view'\nimport { useConversation } from '../hooks/use_conversation'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\n\ntype ConversationRouteProps = {\n  conversation_id: number\n  chat_group_graph_id?: string\n  clear_input?: boolean\n}\n\nexport type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>\n\nexport function ConversationScreen({ route }: ConversationScreenProps) {\n  const styles = useStyles()\n  const navigation = useNavigation()\n\n  const { conversation_id } = route.params\n  const { data: conversation } = useConversation(route.params)\n  const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({\n    conversation_id,\n  })\n\n  // Seems to be necessary to define this way so we get the route picked up\n  const headerTitle = useCallback(\n    (props: HeaderTitleProps) => <PressableHeaderTitle {...props} />,\n    []\n  )\n\n  useEffect(() => {\n    navigation.setOptions({ headerTitle, title: conversation?.title })\n  }, [conversation, conversation_id, navigation, headerTitle, conversation?.title])\n\n  return (\n    <View style={styles.container}>\n      <KeyboardView style={styles.keyboardView}>\n        <FlatList\n          inverted\n          contentContainerStyle={styles.listContainer}\n          refreshing={isRefetching}\n          onRefresh={refetch}\n          data={messages}\n          keyExtractor={item => item.id}\n          renderItem={({ item }) => <Message {...item} conversation_id={conversation_id} />}\n          onEndReached={() => fetchNextPage()}\n        />\n        <MessageForm.Root conversation={conversation}>\n          {/* <MessageForm.AttachmentPicker /> */}\n          <MessageForm.Commands />\n          <MessageForm.TextInput />\n          <MessageForm.SubmitButton />\n        </MessageForm.Root>\n      </KeyboardView>\n    </View>\n  )\n}\n\nconst PressableHeaderTitle = ({ style, children }: HeaderTitleProps) => {\n  const styles = usePressableHeaderStyle()\n  const navigation = useNavigation()\n\n  const route = useRoute() as ConversationScreenProps['route']\n\n  const { data: conversation } = useConversation(route.params)\n  const badge = conversation.badges?.[0]\n  const resourceType = badge?.pcoResourceType || ''\n  const productName = badge?.appName\n  const name = badge?.text || undefined\n\n  return (\n    <PlatformPressable\n      style={styles.container}\n      onPress={() =>\n        navigation.navigate('ConversationDetails', { conversation_id: conversation?.id })\n      }\n    >\n      <View style={styles.titleWrapper}>\n        <HeaderTitle style={[styles.title, style]}>{children}</HeaderTitle>\n        <Icon name=\"general.downChevron\" size={12} />\n      </View>\n      <Badge\n        variant=\"metaSubtle\"\n        productLogoName={productName}\n        label={resourceType}\n        metaLabel={name}\n        style={styles.badge}\n      />\n    </PlatformPressable>\n  )\n}\n\nconst usePressableHeaderStyle = () => {\n  return StyleSheet.create({\n    container: {\n      alignItems: Platform.select({ android: 'flex-start', default: 'center' }),\n    },\n    titleWrapper: {\n      alignItems: 'center',\n      columnGap: 4,\n      flexDirection: 'row',\n    },\n    title: {\n      padding: 0,\n      margin: 0,\n    },\n    badge: {\n      alignSelf: Platform.select({ android: 'flex-start', default: 'center' }),\n      marginTop: 2,\n    },\n  })\n}\n\nconst useStyles = () => {\n  const navigationTheme = useNavigationTheme()\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n      backgroundColor: navigationTheme.colors.card,\n      paddingBottom: bottom,\n    },\n    keyboardView: {\n      flex: 1,\n    },\n    listContainer: {\n      gap: 12,\n      paddingHorizontal: 16,\n      paddingVertical: 12,\n    },\n  })\n}\n"]}

package/build/screens/message_actions_screen.d.ts

@@ -2,9 +2,9 @@ import { StaticScreenProps } from '@react-navigation/native';
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import React from 'react';
 export declare const MessageActionsScreenOptions: NativeStackNavigationOptions;
-export type ReactionScreenProps = StaticScreenProps<{
+export type MessageActionsScreenProps = StaticScreenProps<{
     message_id: string;
     conversation_id: number;
 }>;
-export declare function MessageActionsScreen({ route }: ReactionScreenProps): React.JSX.Element;
+export declare function MessageActionsScreen({ route }: MessageActionsScreenProps): React.JSX.Element;
 //# sourceMappingURL=message_actions_screen.d.ts.map

package/build/screens/message_actions_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message_actions_screen.d.ts","sourceRoot":"","sources":["../../src/screens/message_actions_screen.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAE7E,OAAO,KAAsB,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,2BAA2B,EAAE,4BAKzC,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;IAClD,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,qBAiHlE"}
+{"version":3,"file":"message_actions_screen.d.ts","sourceRoot":"","sources":["../../src/screens/message_actions_screen.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAE7E,OAAO,KAAsB,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,2BAA2B,EAAE,4BAKzC,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,CAAC;IACxD,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,yBAAyB,qBAiHxE"}

package/build/screens/message_actions_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"message_actions_screen.js","sourceRoot":"","sources":["../../src/screens/message_actions_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'\nimport React, { useCallback } from 'react'\nimport { Alert, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Text, TextButton } from '../components'\nimport { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'\nimport { useTheme } from '../hooks'\nimport { useApiClient } from '../hooks/use_api_client'\nimport { getMessagesRequestArgs, useConversationMessages } from '../hooks/use_conversation_messages'\nimport { ApiCollection, ApiResource, MessageResource } from '../types'\nimport { ReactionCountResource } from '../types/resources/reaction'\nimport { updateRecordInPagesData } from '../utils'\nimport { Clipboard } from '../utils/native_adapters'\n\nexport const MessageActionsScreenOptions: NativeStackNavigationOptions = {\n  presentation: 'formSheet',\n  headerShown: false,\n  sheetAllowedDetents: [0.25],\n  sheetGrabberVisible: true,\n}\n\nexport type ReactionScreenProps = StaticScreenProps<{\n  message_id: string\n  conversation_id: number\n}>\n\nexport function MessageActionsScreen({ route }: ReactionScreenProps) {\n  const navigation = useNavigation()\n  const { conversation_id, message_id } = route.params\n\n  const apiClient = useApiClient()\n  const queryClient = useQueryClient()\n  const styles = useStyles()\n\n  const { messages, queryKey, refetch } = useConversationMessages(\n    { conversation_id },\n    { refetchOnMount: false }\n  )\n  const message = messages.find(m => m.id === message_id)\n  const myReactions = message?.reactionCounts\n    .filter(reaction => reaction.mine)\n    .map(reaction => reaction.value)\n\n  const availableReactions = Object.entries(REACTION_EMOJIS).map(([value, emoji]) => {\n    return {\n      value: value as ReactionCountResource['value'],\n      emoji,\n      mine: myReactions?.includes(value as ReactionCountResource['value']),\n    }\n  })\n\n  const handleCopyPress = (text?: string) => {\n    Clipboard.setStringAsync(text || '')\n    navigation.goBack()\n  }\n\n  const handleReactionPress = useCallback(\n    ({ value, mine }: { value: keyof typeof REACTION_EMOJIS; mine?: boolean }) => {\n      const requestParams = getMessagesRequestArgs({ conversation_id })\n\n      // Value has already been updated\n      const endpoint = !mine ? 'react' : 'unreact'\n      const url = `/me/conversations/${conversation_id}/messages/${message_id}/${endpoint}`\n      const fieldsWithValueJoined = Object.fromEntries(\n        Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])\n      )\n\n      return apiClient.chat.post<ApiResource<MessageResource>>({\n        url,\n        data: {\n          ...requestParams.data,\n          data: {\n            type: 'Message',\n            attributes: { value: value },\n          },\n          fields: fieldsWithValueJoined,\n        },\n      })\n    },\n    [apiClient, conversation_id, message_id]\n  )\n\n  const deleteMessage = useCallback(() => {\n    const url = `/me/conversations/${conversation_id}/messages/${message_id}/`\n\n    return apiClient.chat.delete({ url })\n  }, [apiClient, conversation_id, message_id])\n\n  const { mutate: handleReaction, isPending } = useMutation({\n    mutationFn: handleReactionPress,\n    onSuccess: result => {\n      const updatedMessage = result.data\n      type QueryData = InfiniteData<ApiCollection<MessageResource>>\n\n      queryClient.setQueryData<QueryData>(queryKey, data =>\n        updateRecordInPagesData({\n          data,\n          record: updatedMessage,\n        })\n      )\n      navigation.goBack()\n    },\n    onError: () => {\n      Alert.alert('Oops', 'We were unable to react to this message. Please try again.')\n    },\n  })\n\n  const { mutate: handleDeleteMessage } = useMutation({\n    mutationFn: deleteMessage,\n    onSuccess: () => {\n      refetch()\n      navigation.goBack()\n    },\n    onError: () => {\n      Alert.alert('Oops', 'We were unable to delete this message. Please try again.')\n    },\n  })\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.reactionList}>\n        {availableReactions.map((reaction, index) => (\n          <Reaction key={index} reaction={reaction} onPress={() => handleReaction(reaction)} />\n        ))}\n      </View>\n      <View style={styles.actions}>\n        <View style={styles.actionButton}>\n          <TextButton onPress={() => handleCopyPress(message?.text)}>Copy</TextButton>\n          <TextButton\n            appearance=\"danger\"\n            onPress={() => handleDeleteMessage()}\n            disabled={isPending}\n          >\n            Delete\n          </TextButton>\n        </View>\n      </View>\n    </View>\n  )\n}\n\nconst Reaction = ({\n  reaction,\n  onPress,\n}: {\n  reaction: { value: ReactionCountResource['value']; emoji: string; mine: boolean | undefined }\n  onPress: () => void\n}) => {\n  const styles = useStyles()\n  const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })\n\n  return (\n    <PlatformPressable\n      key={reaction.value}\n      style={[reactionStyles.reaction, styles.reaction]}\n      onPress={onPress}\n    >\n      <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>\n    </PlatformPressable>\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  const { height } = useWindowDimensions()\n  const { bottom } = useSafeAreaInsets()\n  const btnBorderWidth = 1\n  const baseSize = 44\n  const reactionBtnSize = Platform.select({\n    ios: baseSize,\n    android: baseSize + btnBorderWidth * 2,\n  })\n\n  return StyleSheet.create({\n    container: {\n      justifyContent: 'flex-start',\n      paddingTop: 12,\n      paddingBottom: bottom,\n      width: '100%',\n      backgroundColor: theme.colors.fillColorNeutral100Inverted,\n      height,\n    },\n    reaction: {\n      height: reactionBtnSize,\n      width: reactionBtnSize,\n      borderWidth: btnBorderWidth,\n      borderRadius: 32,\n      justifyContent: 'center',\n    },\n    reactionList: {\n      justifyContent: 'center',\n      gap: 24,\n      paddingVertical: 12,\n      flexDirection: 'row',\n      borderBottomColor: theme.colors.fillColorNeutral040,\n      borderBottomWidth: 1,\n    },\n    actions: { flex: 1 },\n    actionButton: { padding: 12, paddingBottom: 100, gap: 12 },\n  })\n}\n"]}
+{"version":3,"file":"message_actions_screen.js","sourceRoot":"","sources":["../../src/screens/message_actions_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'\nimport React, { useCallback } from 'react'\nimport { Alert, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Text, TextButton } from '../components'\nimport { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'\nimport { useTheme } from '../hooks'\nimport { useApiClient } from '../hooks/use_api_client'\nimport { getMessagesRequestArgs, useConversationMessages } from '../hooks/use_conversation_messages'\nimport { ApiCollection, ApiResource, MessageResource } from '../types'\nimport { ReactionCountResource } from '../types/resources/reaction'\nimport { updateRecordInPagesData } from '../utils'\nimport { Clipboard } from '../utils/native_adapters'\n\nexport const MessageActionsScreenOptions: NativeStackNavigationOptions = {\n  presentation: 'formSheet',\n  headerShown: false,\n  sheetAllowedDetents: [0.25],\n  sheetGrabberVisible: true,\n}\n\nexport type MessageActionsScreenProps = StaticScreenProps<{\n  message_id: string\n  conversation_id: number\n}>\n\nexport function MessageActionsScreen({ route }: MessageActionsScreenProps) {\n  const navigation = useNavigation()\n  const { conversation_id, message_id } = route.params\n\n  const apiClient = useApiClient()\n  const queryClient = useQueryClient()\n  const styles = useStyles()\n\n  const { messages, queryKey, refetch } = useConversationMessages(\n    { conversation_id },\n    { refetchOnMount: false }\n  )\n  const message = messages.find(m => m.id === message_id)\n  const myReactions = message?.reactionCounts\n    .filter(reaction => reaction.mine)\n    .map(reaction => reaction.value)\n\n  const availableReactions = Object.entries(REACTION_EMOJIS).map(([value, emoji]) => {\n    return {\n      value: value as ReactionCountResource['value'],\n      emoji,\n      mine: myReactions?.includes(value as ReactionCountResource['value']),\n    }\n  })\n\n  const handleCopyPress = (text?: string) => {\n    Clipboard.setStringAsync(text || '')\n    navigation.goBack()\n  }\n\n  const handleReactionPress = useCallback(\n    ({ value, mine }: { value: keyof typeof REACTION_EMOJIS; mine?: boolean }) => {\n      const requestParams = getMessagesRequestArgs({ conversation_id })\n\n      // Value has already been updated\n      const endpoint = !mine ? 'react' : 'unreact'\n      const url = `/me/conversations/${conversation_id}/messages/${message_id}/${endpoint}`\n      const fieldsWithValueJoined = Object.fromEntries(\n        Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])\n      )\n\n      return apiClient.chat.post<ApiResource<MessageResource>>({\n        url,\n        data: {\n          ...requestParams.data,\n          data: {\n            type: 'Message',\n            attributes: { value: value },\n          },\n          fields: fieldsWithValueJoined,\n        },\n      })\n    },\n    [apiClient, conversation_id, message_id]\n  )\n\n  const deleteMessage = useCallback(() => {\n    const url = `/me/conversations/${conversation_id}/messages/${message_id}/`\n\n    return apiClient.chat.delete({ url })\n  }, [apiClient, conversation_id, message_id])\n\n  const { mutate: handleReaction, isPending } = useMutation({\n    mutationFn: handleReactionPress,\n    onSuccess: result => {\n      const updatedMessage = result.data\n      type QueryData = InfiniteData<ApiCollection<MessageResource>>\n\n      queryClient.setQueryData<QueryData>(queryKey, data =>\n        updateRecordInPagesData({\n          data,\n          record: updatedMessage,\n        })\n      )\n      navigation.goBack()\n    },\n    onError: () => {\n      Alert.alert('Oops', 'We were unable to react to this message. Please try again.')\n    },\n  })\n\n  const { mutate: handleDeleteMessage } = useMutation({\n    mutationFn: deleteMessage,\n    onSuccess: () => {\n      refetch()\n      navigation.goBack()\n    },\n    onError: () => {\n      Alert.alert('Oops', 'We were unable to delete this message. Please try again.')\n    },\n  })\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.reactionList}>\n        {availableReactions.map((reaction, index) => (\n          <Reaction key={index} reaction={reaction} onPress={() => handleReaction(reaction)} />\n        ))}\n      </View>\n      <View style={styles.actions}>\n        <View style={styles.actionButton}>\n          <TextButton onPress={() => handleCopyPress(message?.text)}>Copy</TextButton>\n          <TextButton\n            appearance=\"danger\"\n            onPress={() => handleDeleteMessage()}\n            disabled={isPending}\n          >\n            Delete\n          </TextButton>\n        </View>\n      </View>\n    </View>\n  )\n}\n\nconst Reaction = ({\n  reaction,\n  onPress,\n}: {\n  reaction: { value: ReactionCountResource['value']; emoji: string; mine: boolean | undefined }\n  onPress: () => void\n}) => {\n  const styles = useStyles()\n  const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })\n\n  return (\n    <PlatformPressable\n      key={reaction.value}\n      style={[reactionStyles.reaction, styles.reaction]}\n      onPress={onPress}\n    >\n      <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>\n    </PlatformPressable>\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  const { height } = useWindowDimensions()\n  const { bottom } = useSafeAreaInsets()\n  const btnBorderWidth = 1\n  const baseSize = 44\n  const reactionBtnSize = Platform.select({\n    ios: baseSize,\n    android: baseSize + btnBorderWidth * 2,\n  })\n\n  return StyleSheet.create({\n    container: {\n      justifyContent: 'flex-start',\n      paddingTop: 12,\n      paddingBottom: bottom,\n      width: '100%',\n      backgroundColor: theme.colors.fillColorNeutral100Inverted,\n      height,\n    },\n    reaction: {\n      height: reactionBtnSize,\n      width: reactionBtnSize,\n      borderWidth: btnBorderWidth,\n      borderRadius: 32,\n      justifyContent: 'center',\n    },\n    reactionList: {\n      justifyContent: 'center',\n      gap: 24,\n      paddingVertical: 12,\n      flexDirection: 'row',\n      borderBottomColor: theme.colors.fillColorNeutral040,\n      borderBottomWidth: 1,\n    },\n    actions: { flex: 1 },\n    actionButton: { padding: 12, paddingBottom: 100, gap: 12 },\n  })\n}\n"]}

package/build/screens/send_giphy_screen.d.ts

@@ -0,0 +1,10 @@
+import { StaticScreenProps } from '@react-navigation/native';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
+import React from 'react';
+export declare const SendGiphyScreenOptions: NativeStackNavigationOptions;
+export type SendGiphyScreenProps = StaticScreenProps<{
+    conversation_id: number;
+    search_term: string;
+}>;
+export declare function SendGiphyScreen({ route }: SendGiphyScreenProps): React.JSX.Element | null;
+//# sourceMappingURL=send_giphy_screen.d.ts.map

package/build/screens/send_giphy_screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"send_giphy_screen.d.ts","sourceRoot":"","sources":["../../src/screens/send_giphy_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AACzF,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,eAAO,MAAM,sBAAsB,EAAE,4BAKpC,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD,eAAe,EAAE,MAAM,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;CACpB,CAAC,CAAA;AAEF,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,oBAAoB,4BA+F9D"}

package/build/screens/send_giphy_screen.js

@@ -0,0 +1,98 @@
+import { StackActions, useNavigation } from '@react-navigation/native';
+import React from 'react';
+import { Image as NativeImage, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '../hooks';
+import { useGiphy } from '../hooks/use_giphy';
+import { useMessageCreate } from '../hooks/use_message_create';
+import { Button, IconButton } from '../components';
+import { MAX_FONT_SIZE_MULTIPLIER } from '../utils';
+import { DefaultLoading } from '../components/page/loading';
+export const SendGiphyScreenOptions = {
+    presentation: 'formSheet',
+    headerShown: false,
+    sheetAllowedDetents: [0.75],
+    sheetGrabberVisible: true,
+};
+export function SendGiphyScreen({ route }) {
+    const { conversation_id, search_term } = route.params;
+    const styles = useStyles();
+    const navigation = useNavigation();
+    const { isPending, mutate } = useMessageCreate({ conversationId: conversation_id });
+    const { isSearching, result, nextResult, prevResult } = useGiphy(search_term);
+    const disabled = isPending || isSearching;
+    const { width } = useWindowDimensions();
+    const size = width - 24;
+    if (!result)
+        return null;
+    const gif = result.giphy.fixed_width;
+    const { url } = gif;
+    function goBack({ clearInput = false }) {
+        if (clearInput) {
+            const routes = navigation.getState()?.routes || [];
+            const conversationParams = routes.find(r => r.name === 'Conversation')?.params || {};
+            navigation.dispatch(StackActions.popTo('Conversation', {
+                ...conversationParams,
+                conversation_id,
+                clear_input: true,
+            }));
+        }
+        else {
+            navigation.goBack();
+        }
+    }
+    function sendGiphy() {
+        if (disabled)
+            return;
+        mutate({ text: '', attachments: [result] });
+        goBack({ clearInput: true });
+    }
+    return (<View style={styles.container}>
+      <NativeImage alt="Powered by Giphy" style={styles.powered_by_giphy} source={require('../../assets/images/powered_by_giphy.png')}/>
+      <View style={styles.control_stack}>
+        <View style={styles.button_group}>
+          <IconButton name="general.leftArrow" accessibilityLabel={'Previous GIF'} size="md" appearance="neutral" onPress={prevResult} disabled={disabled}/>
+          <IconButton name="general.rightArrow" accessibilityLabel={'Next GIF'} size="md" appearance="neutral" onPress={nextResult} disabled={disabled}/>
+        </View>
+        <View style={styles.button_group}>
+          <Button onPress={() => goBack({ clearInput: false })} title="Cancel" variant="outline" size="sm" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+          <Button onPress={sendGiphy} title="Send" size="sm" disabled={disabled} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
+        </View>
+      </View>
+      {isSearching ? (<DefaultLoading />) : (<NativeImage source={{ uri: url }} alt={result.title} style={[styles.image, { width: size, height: size }]}/>)}
+    </View>);
+}
+const useStyles = () => {
+    const theme = useTheme();
+    const { height } = useWindowDimensions();
+    const { bottom } = useSafeAreaInsets();
+    return StyleSheet.create({
+        container: {
+            justifyContent: 'flex-start',
+            paddingTop: 24,
+            paddingHorizontal: 12,
+            paddingBottom: bottom,
+            width: '100%',
+            backgroundColor: theme.colors.fillColorNeutral100Inverted,
+            height,
+            gap: 12,
+        },
+        powered_by_giphy: {
+            width: 200,
+            height: 22,
+        },
+        control_stack: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        },
+        button_group: {
+            flexDirection: 'row',
+            gap: 12,
+        },
+        image: {
+            borderRadius: 8,
+        },
+    });
+};
+//# sourceMappingURL=send_giphy_screen.js.map

package/build/screens/send_giphy_screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"send_giphy_screen.js","sourceRoot":"","sources":["../../src/screens/send_giphy_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport React from 'react'\nimport { Image as NativeImage, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { useTheme } from '../hooks'\nimport { useGiphy } from '../hooks/use_giphy'\nimport { useMessageCreate } from '../hooks/use_message_create'\nimport { Button, IconButton } from '../components'\nimport { MAX_FONT_SIZE_MULTIPLIER } from '../utils'\nimport { DefaultLoading } from '../components/page/loading'\n\nexport const SendGiphyScreenOptions: NativeStackNavigationOptions = {\n  presentation: 'formSheet',\n  headerShown: false,\n  sheetAllowedDetents: [0.75],\n  sheetGrabberVisible: true,\n}\n\nexport type SendGiphyScreenProps = StaticScreenProps<{\n  conversation_id: number\n  search_term: string\n}>\n\nexport function SendGiphyScreen({ route }: SendGiphyScreenProps) {\n  const { conversation_id, search_term } = route.params\n  const styles = useStyles()\n  const navigation = useNavigation()\n\n  const { isPending, mutate } = useMessageCreate({ conversationId: conversation_id })\n  const { isSearching, result, nextResult, prevResult } = useGiphy(search_term)\n  const disabled = isPending || isSearching\n\n  const { width } = useWindowDimensions()\n  const size = width - 24\n\n  if (!result) return null\n\n  const gif = result.giphy.fixed_width\n  const { url } = gif\n\n  function goBack({ clearInput = false }) {\n    if (clearInput) {\n      const routes = navigation.getState()?.routes || []\n      const conversationParams = routes.find(r => r.name === 'Conversation')?.params || {}\n\n      navigation.dispatch(\n        StackActions.popTo('Conversation', {\n          ...conversationParams,\n          conversation_id,\n          clear_input: true,\n        })\n      )\n    } else {\n      navigation.goBack()\n    }\n  }\n\n  function sendGiphy() {\n    if (disabled) return\n\n    mutate({ text: '', attachments: [result] })\n    goBack({ clearInput: true })\n  }\n\n  return (\n    <View style={styles.container}>\n      <NativeImage\n        alt=\"Powered by Giphy\"\n        style={styles.powered_by_giphy}\n        source={require('../../assets/images/powered_by_giphy.png')}\n      />\n      <View style={styles.control_stack}>\n        <View style={styles.button_group}>\n          <IconButton\n            name=\"general.leftArrow\"\n            accessibilityLabel={'Previous GIF'}\n            size=\"md\"\n            appearance=\"neutral\"\n            onPress={prevResult}\n            disabled={disabled}\n          />\n          <IconButton\n            name=\"general.rightArrow\"\n            accessibilityLabel={'Next GIF'}\n            size=\"md\"\n            appearance=\"neutral\"\n            onPress={nextResult}\n            disabled={disabled}\n          />\n        </View>\n        <View style={styles.button_group}>\n          <Button\n            onPress={() => goBack({ clearInput: false })}\n            title=\"Cancel\"\n            variant=\"outline\"\n            size=\"sm\"\n            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n          />\n          <Button\n            onPress={sendGiphy}\n            title=\"Send\"\n            size=\"sm\"\n            disabled={disabled}\n            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n          />\n        </View>\n      </View>\n      {isSearching ? (\n        <DefaultLoading />\n      ) : (\n        <NativeImage\n          source={{ uri: url }}\n          alt={result.title}\n          style={[styles.image, { width: size, height: size }]}\n        />\n      )}\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  const { height } = useWindowDimensions()\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    container: {\n      justifyContent: 'flex-start',\n      paddingTop: 24,\n      paddingHorizontal: 12,\n      paddingBottom: bottom,\n      width: '100%',\n      backgroundColor: theme.colors.fillColorNeutral100Inverted,\n      height,\n      gap: 12,\n    },\n    powered_by_giphy: {\n      width: 200,\n      height: 22,\n    },\n    control_stack: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n    },\n    button_group: {\n      flexDirection: 'row',\n      gap: 12,\n    },\n    image: {\n      borderRadius: 8,\n    },\n  })\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.2.0-rc.4",
+  "version": "3.2.0-rc.5",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -54,5 +54,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "42cbdf97b47051e3f61aaaf79e000a01a2100612"
+  "gitHead": "cdfce65ff2c68dc79c0e40439ea2109a1105cb3f"
 }

package/src/components/conversation/message_form.tsx

@@ -1,13 +1,12 @@
-import { useTheme as useNavigationTheme } from '@react-navigation/native'
-import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'
-import React from 'react'
+import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'
+import React, { useContext, useEffect, useState } from 'react'
 import { StyleSheet, TextInput, View, ViewProps } from 'react-native'
-import { IconButton } from '../../components'
+import { IconButton, Text } from '../../components'
 import { useTheme } from '../../hooks'
-import { useApiClient } from '../../hooks/use_api_client'
-import { getMessagesQueryKey, getMessagesRequestArgs } from '../../hooks/use_conversation_messages'
-import { ApiCollection, ApiResource, ConversationResource, MessageResource } from '../../types'
-import { updateOrCreateRecordInPagesData } from '../../utils'
+import { ConversationResource } from '../../types'
+import { useMessageCreate } from '../../hooks/use_message_create'
+import { ConversationScreenProps } from '../../screens/conversation_screen'
+import { ChatContext } from '../../contexts/chat_context'
 
 export const MessageForm = {
   Root: MessageFormRoot,
@@ -26,51 +25,77 @@ const MessageFormContext = React.createContext({
   setText: (_text: string) => {},
   onSubmit: () => {},
   disabled: false,
+  canGiphy: false,
+  usingGiphy: false,
+  setUsingGiphy: (_usingGiphy: boolean) => {},
 })
 
 function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
+  const { giphyApiKey } = useContext(ChatContext)
+  const canGiphy = !!giphyApiKey
   const styles = useMessageFormStyles()
   const [text, setText] = React.useState('')
-  const apiClient = useApiClient()
-  const queryClient = useQueryClient()
-
-  const { mutate, isPending } = useMutation({
-    mutationFn: async () => {
-      const requestParams = getMessagesRequestArgs({ conversation_id: conversation.id })
-      const fieldsWithValueJoined = Object.fromEntries(
-        Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
-      )
-
-      return apiClient.chat.post<ApiResource<MessageResource>>({
-        url: `/me/conversations/${conversation.id}/messages`,
-        data: {
-          ...requestParams.data,
-          data: {
-            type: 'Message',
-            attributes: { text },
-          },
-          fields: fieldsWithValueJoined,
-        },
-      })
-    },
-    onSuccess: (result: ApiResource<MessageResource>) => {
-      const updatedMessage = result.data
-      type QueryData = InfiniteData<ApiCollection<MessageResource>>
-      const queryKey = getMessagesQueryKey({ conversation_id: conversation.id })
-
+  const [usingGiphy, setUsingGiphy] = useState(false)
+  const navigation = useNavigation()
+  const route = useRoute() as ConversationScreenProps['route']
+  const { status, isPending, reset, mutate } = useMessageCreate({ conversationId: conversation.id })
+
+  useEffect(() => {
+    if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {
+      setUsingGiphy(true)
       setText('')
-      queryClient.setQueryData<QueryData>(queryKey, data =>
-        updateOrCreateRecordInPagesData({
-          data,
-          record: updatedMessage,
-        })
-      )
-    },
-  })
+    }
+  }, [canGiphy, text, usingGiphy])
+
+  useEffect(() => {
+    switch (status) {
+      case 'success':
+        setText('')
+        reset()
+        break
+    }
+  }, [reset, status])
+
+  useEffect(() => {
+    if (route.params.clear_input) {
+      setText('')
+      setUsingGiphy(false)
+      navigation.setParams({ ...route.params, clear_input: false })
+    }
+  }, [navigation, route.params])
+
+  const canSubmit = (() => {
+    if (isPending) return false
+    if (text.length > 0) return true
+    return false
+  })()
+  const disabled = !canSubmit
+
+  const handleSubmit = () => {
+    if (!canSubmit) return
+
+    if (canGiphy && usingGiphy) {
+      TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())
+      navigation.navigate('SendGiphy', {
+        conversation_id: conversation.id,
+        search_term: text,
+      })
+    } else {
+      mutate({ text })
+    }
+  }
 
   return (
     <MessageFormContext.Provider
-      value={{ text, setText, onSubmit: () => mutate(), disabled: isPending }}
+      value={{
+        text,
+        setText,
+        onSubmit: handleSubmit,
+        disabled,
+        canGiphy,
+        usingGiphy,
+        setUsingGiphy,
+      }}
     >
       <View style={styles.textInputContainer}>{children}</View>
     </MessageFormContext.Provider>
@@ -79,38 +104,51 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
 
 function MessageFormInput() {
   const styles = useMessageFormStyles()
-  const { text, setText, onSubmit } = React.useContext(MessageFormContext)
+  const { text, setText, onSubmit, usingGiphy } = React.useContext(MessageFormContext)
 
   return (
-    <TextInput
-      aria-disabled={true}
-      placeholder="Send a message"
-      onChangeText={setText}
-      value={text}
-      style={styles.textInput}
-      onSubmitEditing={onSubmit}
-    />
+    <View style={styles.textInput}>
+      {usingGiphy ? (
+        <View style={styles.giphyBadge}>
+          <Text>/Giphy</Text>
+        </View>
+      ) : null}
+
+      <TextInput
+        aria-disabled={true}
+        placeholder="Send a message"
+        onChangeText={setText}
+        value={text}
+        onSubmitEditing={onSubmit}
+      />
+    </View>
   )
 }
 
 function MessageFormSubmitBtn() {
   const styles = useMessageFormStyles()
-  const { onSubmit, disabled } = React.useContext(MessageFormContext)
+  const { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext)
 
   return (
     <IconButton
       disabled={disabled}
-      accessibilityLabel="Send message"
+      accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'}
       size="md"
       appearance="neutral"
       style={styles.textInputSend}
-      name={'general.upArrow'}
+      name={usingGiphy ? 'general.search' : 'general.upArrow'}
       onPress={onSubmit}
     />
   )
 }
 
 function MessageFormAttachmentPicker() {
+  const { usingGiphy } = React.useContext(MessageFormContext)
+
+  if (usingGiphy) {
+    return null
+  }
+
   return (
     <IconButton
       accessibilityLabel="Shazam"
@@ -122,8 +160,32 @@ function MessageFormAttachmentPicker() {
 }
 
 function MessageFormCommands() {
+  const { canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)
+
+  if (!canGiphy) {
+    return null
+  }
+
+  if (usingGiphy) {
+    return (
+      <IconButton
+        accessibilityLabel="Exit Giphy Search"
+        size="md"
+        appearance="neutral"
+        name={'general.x'}
+        onPress={() => setUsingGiphy(false)}
+      />
+    )
+  }
+
   return (
-    <IconButton accessibilityLabel="Shazam" size="md" appearance="neutral" name={'general.bolt'} />
+    <IconButton
+      accessibilityLabel="Search Giphy"
+      size="md"
+      appearance="neutral"
+      name={'general.bolt'}
+      onPress={() => setUsingGiphy(true)}
+    />
   )
 }
 
@@ -148,12 +210,19 @@ const useMessageFormStyles = () => {
       paddingHorizontal: 20,
       borderColor: theme.colors.fillColorNeutral050Base,
       flex: 1,
+      flexDirection: 'row',
+      gap: 12,
+    },
+    giphyBadge: {
+      backgroundColor: theme.colors.fillColorNeutral050Base,
+      borderRadius: 24,
+      padding: 8,
+      paddingHorizontal: 12,
     },
     textInputSend: {
       borderRadius: 24,
       height: 36,
       width: 36,
-      backgroundColor: theme.colors.fillColorNeutral040,
     },
   })
 }

package/src/contexts/chat_context.tsx

@@ -11,6 +11,7 @@ export type ChatContextValue = {
   theme: ChatTheme
   env?: ENV
   session: Session
+  giphyApiKey?: string
 }
 
 export interface ChatProviderProps extends Omit<ChatContextValue, 'client' | 'theme' | 'session'> {
@@ -23,10 +24,11 @@ export const ChatContext = createContext<ChatContextValue>({
   env: undefined,
   onUnauthorizedResponse: () => {},
   session: new Session(),
+  giphyApiKey: undefined,
 })
 
 export function ChatProvider({ children, value }: { children: any; value: ChatProviderProps }) {
-  const { env, token, onUnauthorizedResponse } = value
+  const { env, token, onUnauthorizedResponse, giphyApiKey } = value
   const theme = useCreateChatTheme(value.theme || {})
   const session = useMemo(() => new Session({ token, env }), [env, token])
 
@@ -36,6 +38,7 @@ export function ChatProvider({ children, value }: { children: any; value: ChatPr
     onUnauthorizedResponse,
     session,
     theme,
+    giphyApiKey,
   }
 
   return <ChatContext.Provider value={contextValue}>{children}</ChatContext.Provider>