@planningcenter/chat-react-native 1.7.0-rc.0 → 2.0.0-rc.0

package/build/screens/message_actions_screen.js

@@ -1,15 +1,16 @@
+import { PlatformPressable } from '@react-navigation/elements';
 import { useNavigation } from '@react-navigation/native';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import colorFunction from 'color';
-import React, { useContext } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { TextButton } from '../components';
+import React, { useCallback, useContext } from 'react';
+import { Alert, Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Text, TextButton } from '../components';
+import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction';
 import { ChatContext } from '../contexts';
 import { useTheme } from '../hooks';
 import { getMessagesRequestArgs, useConversationMessages } from '../hooks/use_conversation_messages';
 import { updateRecordInPagesData } from '../utils';
-import { REACTION_EMOJIS } from '../components/conversation/message_reaction';
+import { Clipboard } from '../utils/native_adapters';
 export const ReactScreenOptions = {
     presentation: 'formSheet',
     headerShown: false,
@@ -22,14 +23,26 @@ export function MessageActionsScreen({ route }) {
     const { client } = useContext(ChatContext);
     const queryClient = useQueryClient();
     const styles = useStyles();
-    const { messages, queryKey } = useConversationMessages({ conversation_id }, { refetchOnMount: false });
+    const { messages, queryKey, refetch } = useConversationMessages({ conversation_id }, { refetchOnMount: false });
     const message = messages.find(m => m.id === message_id);
-    const reactionValues = message?.reactionCounts.filter(reaction => reaction.mine).map(reaction => reaction.value) || [];
-    const handleReactionPress = (value) => {
-        const present = reactionValues.includes(value);
+    const myReactions = message?.reactionCounts
+        .filter(reaction => reaction.mine)
+        .map(reaction => reaction.value);
+    const availableReactions = Object.entries(REACTION_EMOJIS).map(([value, emoji]) => {
+        return {
+            value: value,
+            emoji,
+            mine: myReactions?.includes(value),
+        };
+    });
+    const handleCopyPress = (text) => {
+        Clipboard.setStringAsync(text || '');
+        navigation.goBack();
+    };
+    const handleReactionPress = useCallback(({ value, mine }) => {
         const requestParams = getMessagesRequestArgs({ conversation_id });
         // Value has already been updated
-        const endpoint = !present ? 'react' : 'unreact';
+        const endpoint = !mine ? 'react' : 'unreact';
         const url = `/me/conversations/${conversation_id}/messages/${message_id}/${endpoint}`;
         const fieldsWithValueJoined = Object.fromEntries(Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')]));
         return client.post({
@@ -43,8 +56,12 @@ export function MessageActionsScreen({ route }) {
                 fields: fieldsWithValueJoined,
             },
         });
-    };
-    const { mutate, isPending } = useMutation({
+    }, [client, conversation_id, message_id]);
+    const deleteMessage = useCallback(() => {
+        const url = `/me/conversations/${conversation_id}/messages/${message_id}/`;
+        return client.delete({ url });
+    }, [client, conversation_id, message_id]);
+    const { mutate: handleReaction, isPending } = useMutation({
         mutationFn: handleReactionPress,
         onSuccess: (result) => {
             const updatedMessage = result.data;
@@ -54,63 +71,66 @@ export function MessageActionsScreen({ route }) {
             }));
             navigation.goBack();
         },
+        onError: () => {
+            Alert.alert('Oops', 'We were unable to react to this message. Please try again.');
+        },
     });
-    const myReactions = message?.reactionCounts
-        .filter(reaction => reaction.mine)
-        .map(reaction => reaction.value);
-    const availableReactions = Object.entries(REACTION_EMOJIS).map(([value, emoji]) => {
-        return {
-            value: value,
-            emoji,
-            mine: myReactions?.includes(value),
-        };
+    const { mutate: handleDeleteMessage } = useMutation({
+        mutationFn: deleteMessage,
+        onSuccess: () => {
+            refetch();
+            navigation.goBack();
+        },
+        onError: () => {
+            Alert.alert('Oops', 'We were unable to delete this message. Please try again.');
+        },
     });
-    return (<SafeAreaView style={styles.container} edges={['bottom']}>
+    return (<View style={styles.container}>
       <View style={styles.reactionList}>
-        {availableReactions.map(({ value, emoji, mine }, index) => (<TextButton key={index} onPress={() => mutate(value)} style={({ pressed }) => [
-                styles.reaction,
-                mine && styles.reactionActive,
-                pressed && styles.pressed,
-            ]} variant="plain" disabled={isPending}>
-            {emoji}
-          </TextButton>))}
+        {availableReactions.map((reaction, index) => (<Reaction key={index} reaction={reaction} onPress={() => handleReaction(reaction)}/>))}
       </View>
       <View style={styles.actions}>
         <View style={styles.actionButton}>
-          <TextButton onPress={() => navigation.goBack()} disabled={isPending}>
-            Copy
-          </TextButton>
-          <TextButton appearance="danger" onPress={() => navigation.goBack()} disabled={isPending}>
+          <TextButton onPress={() => handleCopyPress(message?.text)}>Copy</TextButton>
+          <TextButton appearance="danger" onPress={() => handleDeleteMessage()} disabled={isPending}>
             Delete
           </TextButton>
         </View>
       </View>
-    </SafeAreaView>);
+    </View>);
 }
+const Reaction = ({ reaction, onPress, }) => {
+    const styles = useStyles();
+    const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 });
+    return (<PlatformPressable key={reaction.value} style={[reactionStyles.reaction, styles.reaction]} onPress={onPress}>
+      <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
+    </PlatformPressable>);
+};
 const useStyles = () => {
     const theme = useTheme();
+    const { height } = useWindowDimensions();
+    const { bottom } = useSafeAreaInsets();
+    const btnBorderWidth = 1;
+    const baseSize = 44;
+    const reactionBtnSize = Platform.select({
+        ios: baseSize,
+        android: baseSize + btnBorderWidth * 2,
+    });
     return StyleSheet.create({
         container: {
             justifyContent: 'flex-start',
             paddingTop: 12,
+            paddingBottom: bottom,
             width: '100%',
             backgroundColor: theme.colors.fillColorNeutral100Inverted,
+            height,
         },
         reaction: {
-            padding: 12,
-            borderRadius: 24,
-            includeFontPadding: false,
-            textAlignVertical: 'center',
-            fontSize: 28,
-            color: '#ffffff',
-            backgroundColor: theme.colors.fillColorNeutral050Base,
-        },
-        reactionActive: {
-            borderColor: theme.colors.interaction,
-            backgroundColor: colorFunction(theme.colors.interaction).alpha(0.2).string(),
-        },
-        pressed: {
-            opacity: 0.5,
+            height: reactionBtnSize,
+            width: reactionBtnSize,
+            borderWidth: btnBorderWidth,
+            borderRadius: 32,
+            justifyContent: 'center',
         },
         reactionList: {
             justifyContent: 'center',
@@ -119,7 +139,6 @@ const useStyles = () => {
             flexDirection: 'row',
             borderBottomColor: theme.colors.fillColorNeutral040,
             borderBottomWidth: 1,
-            flex: 1,
         },
         actions: { flex: 1 },
         actionButton: { padding: 12, paddingBottom: 100, gap: 12 },

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 { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'\nimport colorFunction from 'color'\nimport React, { useContext } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { SafeAreaView } from 'react-native-safe-area-context'\nimport { TextButton } from '../components'\nimport { ChatContext } from '../contexts'\nimport { useTheme } from '../hooks'\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 { REACTION_EMOJIS } from '../components/conversation/message_reaction'\n\nexport const ReactScreenOptions: 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: string\n}>\n\nexport function MessageActionsScreen({ route }: ReactionScreenProps) {\n  const navigation = useNavigation()\n  const { conversation_id, message_id } = route.params\n\n  const { client } = useContext(ChatContext)\n  const queryClient = useQueryClient()\n  const styles = useStyles()\n\n  const { messages, queryKey } = useConversationMessages(\n    { conversation_id },\n    { refetchOnMount: false }\n  )\n  const message = messages.find(m => m.id === message_id)\n  const reactionValues =\n    message?.reactionCounts.filter(reaction => reaction.mine).map(reaction => reaction.value) || []\n\n  const handleReactionPress = (value: keyof typeof REACTION_EMOJIS) => {\n    const present = reactionValues.includes(value)\n    const requestParams = getMessagesRequestArgs({ conversation_id })\n\n    // Value has already been updated\n    const endpoint = !present ? '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 client.post({\n      url,\n      data: {\n        ...requestParams.data,\n        data: {\n          type: 'Message',\n          attributes: { value: value },\n        },\n        fields: fieldsWithValueJoined,\n      },\n    })\n  }\n\n  const { mutate, isPending } = useMutation({\n    mutationFn: handleReactionPress,\n    onSuccess: (result: ApiResource<MessageResource>) => {\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  })\n\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  return (\n    <SafeAreaView style={styles.container} edges={['bottom']}>\n      <View style={styles.reactionList}>\n        {availableReactions.map(({ value, emoji, mine }, index) => (\n          <TextButton\n            key={index}\n            onPress={() => mutate(value)}\n            style={({ pressed }) => [\n              styles.reaction,\n              mine && styles.reactionActive,\n              pressed && styles.pressed,\n            ]}\n            variant=\"plain\"\n            disabled={isPending}\n          >\n            {emoji}\n          </TextButton>\n        ))}\n      </View>\n      <View style={styles.actions}>\n        <View style={styles.actionButton}>\n          <TextButton onPress={() => navigation.goBack()} disabled={isPending}>\n            Copy\n          </TextButton>\n          <TextButton appearance=\"danger\" onPress={() => navigation.goBack()} disabled={isPending}>\n            Delete\n          </TextButton>\n        </View>\n      </View>\n    </SafeAreaView>\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  return StyleSheet.create({\n    container: {\n      justifyContent: 'flex-start',\n      paddingTop: 12,\n      width: '100%',\n      backgroundColor: theme.colors.fillColorNeutral100Inverted,\n    },\n    reaction: {\n      padding: 12,\n      borderRadius: 24,\n      includeFontPadding: false,\n      textAlignVertical: 'center',\n      fontSize: 28,\n      color: '#ffffff',\n      backgroundColor: theme.colors.fillColorNeutral050Base,\n    },\n    reactionActive: {\n      borderColor: theme.colors.interaction,\n      backgroundColor: colorFunction(theme.colors.interaction).alpha(0.2).string(),\n    },\n    pressed: {\n      opacity: 0.5,\n    },\n    reactionList: {\n      justifyContent: 'center',\n      gap: 24,\n      paddingVertical: 12,\n      flexDirection: 'row',\n      borderBottomColor: theme.colors.fillColorNeutral040,\n      borderBottomWidth: 1,\n      flex: 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, useContext } 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 { ChatContext } from '../contexts'\nimport { useTheme } from '../hooks'\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 ReactScreenOptions: 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: string\n}>\n\nexport function MessageActionsScreen({ route }: ReactionScreenProps) {\n  const navigation = useNavigation()\n  const { conversation_id, message_id } = route.params\n\n  const { client } = useContext(ChatContext)\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 client.post({\n        url,\n        data: {\n          ...requestParams.data,\n          data: {\n            type: 'Message',\n            attributes: { value: value },\n          },\n          fields: fieldsWithValueJoined,\n        },\n      })\n    },\n    [client, conversation_id, message_id]\n  )\n\n  const deleteMessage = useCallback(() => {\n    const url = `/me/conversations/${conversation_id}/messages/${message_id}/`\n\n    return client.delete({ url })\n  }, [client, conversation_id, message_id])\n\n  const { mutate: handleReaction, isPending } = useMutation({\n    mutationFn: handleReactionPress,\n    onSuccess: (result: ApiResource<MessageResource>) => {\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/utils/index.d.ts

@@ -5,4 +5,5 @@ export * from './space';
 export * from './client';
 export * from './uri';
 export * from './cache';
+export * from './native_adapters';
 //# sourceMappingURL=index.d.ts.map

package/build/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA"}

package/build/utils/index.js

@@ -5,4 +5,5 @@ export * from './space';
 export * from './client';
 export * from './uri';
 export * from './cache';
+export * from './native_adapters';
 //# sourceMappingURL=index.js.map

package/build/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA","sourcesContent":["export * from './session'\nexport * from './theme'\nexport * from './styles'\nexport * from './space'\nexport * from './client'\nexport * from './uri'\nexport * from './cache'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA","sourcesContent":["export * from './session'\nexport * from './theme'\nexport * from './styles'\nexport * from './space'\nexport * from './client'\nexport * from './uri'\nexport * from './cache'\nexport * from './native_adapters'\n"]}

package/build/utils/native_adapters/clipboard.d.ts

@@ -0,0 +1,6 @@
+export declare class ClipboardAdapter {
+    getStringAsync: () => Promise<string>;
+    setStringAsync: (_: string) => Promise<void>;
+    constructor(methods: ClipboardAdapter);
+}
+//# sourceMappingURL=clipboard.d.ts.map

package/build/utils/native_adapters/clipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.d.ts","sourceRoot":"","sources":["../../../src/utils/native_adapters/clipboard.ts"],"names":[],"mappings":"AAAA,qBAAa,gBAAgB;IAC3B,cAAc,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAA;IACrC,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;gBAEhC,OAAO,EAAE,gBAAgB;CAItC"}

package/build/utils/native_adapters/clipboard.js

@@ -0,0 +1,9 @@
+export class ClipboardAdapter {
+    getStringAsync;
+    setStringAsync;
+    constructor(methods) {
+        this.getStringAsync = methods.getStringAsync;
+        this.setStringAsync = methods.setStringAsync;
+    }
+}
+//# sourceMappingURL=clipboard.js.map

package/build/utils/native_adapters/clipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.js","sourceRoot":"","sources":["../../../src/utils/native_adapters/clipboard.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,gBAAgB;IAC3B,cAAc,CAAuB;IACrC,cAAc,CAA8B;IAE5C,YAAY,OAAyB;QACnC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,cAAc,CAAA;QAC5C,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,cAAc,CAAA;IAC9C,CAAC;CACF","sourcesContent":["export class ClipboardAdapter {\n  getStringAsync: () => Promise<string>\n  setStringAsync: (_: string) => Promise<void>\n\n  constructor(methods: ClipboardAdapter) {\n    this.getStringAsync = methods.getStringAsync\n    this.setStringAsync = methods.setStringAsync\n  }\n}\n"]}

package/build/utils/native_adapters/configuration.d.ts

@@ -0,0 +1,10 @@
+import { ClipboardAdapter } from './clipboard';
+type ChatConfigurations = {
+    clipboard: ClipboardAdapter;
+};
+export declare class ChatAdapters {
+    static configure(configurations: ChatConfigurations): void;
+}
+declare let Clipboard: ClipboardAdapter;
+export { Clipboard };
+//# sourceMappingURL=configuration.d.ts.map

package/build/utils/native_adapters/configuration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configuration.d.ts","sourceRoot":"","sources":["../../../src/utils/native_adapters/configuration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,gBAAgB,CAAA;CAC5B,CAAA;AAED,qBAAa,YAAY;IACvB,MAAM,CAAC,SAAS,CAAC,cAAc,EAAE,kBAAkB;CAGpD;AAMD,QAAA,IAAI,SAAS,EAAE,gBAMb,CAAA;AAEF,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/build/utils/native_adapters/configuration.js

@@ -0,0 +1,18 @@
+import { ClipboardAdapter } from './clipboard';
+export class ChatAdapters {
+    static configure(configurations) {
+        Clipboard = configurations.clipboard;
+    }
+}
+const methodMissing = () => {
+    console.warn('ChatAdapters.configure() must be called before using any adapters');
+};
+let Clipboard = new ClipboardAdapter({
+    getStringAsync: async () => {
+        methodMissing();
+        return '';
+    },
+    setStringAsync: async (_) => methodMissing(),
+});
+export { Clipboard };
+//# sourceMappingURL=configuration.js.map

package/build/utils/native_adapters/configuration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configuration.js","sourceRoot":"","sources":["../../../src/utils/native_adapters/configuration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAM9C,MAAM,OAAO,YAAY;IACvB,MAAM,CAAC,SAAS,CAAC,cAAkC;QACjD,SAAS,GAAG,cAAc,CAAC,SAAS,CAAA;IACtC,CAAC;CACF;AAED,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,OAAO,CAAC,IAAI,CAAC,mEAAmE,CAAC,CAAA;AACnF,CAAC,CAAA;AAED,IAAI,SAAS,GAAqB,IAAI,gBAAgB,CAAC;IACrD,cAAc,EAAE,KAAK,IAAI,EAAE;QACzB,aAAa,EAAE,CAAA;QACf,OAAO,EAAE,CAAA;IACX,CAAC;IACD,cAAc,EAAE,KAAK,EAAE,CAAS,EAAE,EAAE,CAAC,aAAa,EAAE;CACrD,CAAC,CAAA;AAEF,OAAO,EAAE,SAAS,EAAE,CAAA","sourcesContent":["import { ClipboardAdapter } from './clipboard'\n\ntype ChatConfigurations = {\n  clipboard: ClipboardAdapter\n}\n\nexport class ChatAdapters {\n  static configure(configurations: ChatConfigurations) {\n    Clipboard = configurations.clipboard\n  }\n}\n\nconst methodMissing = () => {\n  console.warn('ChatAdapters.configure() must be called before using any adapters')\n}\n\nlet Clipboard: ClipboardAdapter = new ClipboardAdapter({\n  getStringAsync: async () => {\n    methodMissing()\n    return ''\n  },\n  setStringAsync: async (_: string) => methodMissing(),\n})\n\nexport { Clipboard }\n"]}

package/build/utils/native_adapters/index.d.ts

@@ -0,0 +1,3 @@
+export * from './clipboard';
+export * from './configuration';
+//# sourceMappingURL=index.d.ts.map

package/build/utils/native_adapters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/native_adapters/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA"}

package/build/utils/native_adapters/index.js

@@ -0,0 +1,3 @@
+export * from './clipboard';
+export * from './configuration';
+//# sourceMappingURL=index.js.map

package/build/utils/native_adapters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/native_adapters/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA","sourcesContent":["export * from './clipboard'\nexport * from './configuration'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.7.0-rc.0",
+  "version": "2.0.0-rc.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -47,5 +47,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "45c925959fee223156aa61022952aaea6437c09a"
+  "gitHead": "c661342d905577c0c47d4a094bdf00ee2372471c"
 }

package/src/__tests__/utils/native_adapters/configuration.ts

@@ -0,0 +1,21 @@
+import { ChatAdapters } from '../../../utils/native_adapters/configuration'
+import { Clipboard, ClipboardAdapter } from '../../../utils/native_adapters'
+
+describe('ChatAdapters', () => {
+  const getStringAsync = jest.fn()
+  const setStringAsync = jest.fn()
+  const clipboard = new ClipboardAdapter({
+    getStringAsync,
+    setStringAsync,
+  })
+
+  it('should be defined', () => {
+    expect(ChatAdapters).toBeDefined()
+  })
+
+  it('should configure the clipboard', () => {
+    ChatAdapters.configure({ clipboard })
+
+    expect(Clipboard).toEqual(clipboard)
+  })
+})

package/src/components/conversation/message.tsx

@@ -0,0 +1,87 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import { useNavigation } from '@react-navigation/native'
+import colorFunction from 'color'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { MessageReaction } from '../../components/conversation/message_reaction'
+import { Avatar, Text } from '../../components/display'
+import { useTheme } from '../../hooks'
+import { MessageResource } from '../../types'
+
+/** Message
+ * Component for display of a message within a conversation list
+ */
+export function Message(props: MessageResource & { conversation_id: string }) {
+  const { text, conversation_id, reactionCounts } = props
+  const styles = useMessageStyles(props)
+  const navigation = useNavigation()
+  const handleMessagePress = () => {
+    navigation.navigate('MessageActions', {
+      message_id: props.id,
+      conversation_id,
+    })
+  }
+  // TODO: open the reaction screen to show who reacted
+  const handleReactionPress = handleMessagePress
+
+  if (!text) return null
+
+  return (
+    <View style={styles.message}>
+      {!props.mine && (
+        <View style={styles.messageAuthor}>
+          <Avatar size={'md'} sourceUri={props.author.avatar} />
+        </View>
+      )}
+      <View style={styles.messageContent}>
+        {!props.mine && <Text variant="tertiary">{props.author.name}</Text>}
+        <PlatformPressable style={styles.messageBubble} onLongPress={handleMessagePress}>
+          <Text style={styles.messageText}>{text}</Text>
+        </PlatformPressable>
+        <View style={styles.messageReactions}>
+          {reactionCounts.map(reaction => (
+            <MessageReaction
+              key={reaction.value}
+              reaction={reaction}
+              onPress={handleReactionPress}
+            />
+          ))}
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const useMessageStyles = ({ mine }: MessageResource) => {
+  const { colors } = useTheme()
+  const activeColor = colorFunction(colors.interaction).alpha(0.2).string()
+
+  return StyleSheet.create({
+    message: {
+      gap: 8,
+      flexDirection: mine ? 'row-reverse' : 'row',
+    },
+    messageContent: {
+      gap: 8,
+      flexShrink: 1,
+    },
+    messageAuthor: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    messageBubble: {
+      backgroundColor: mine ? activeColor : colors.fillColorNeutral070,
+      borderRadius: 12,
+      paddingVertical: 6,
+      paddingHorizontal: 8,
+    },
+    messageText: {
+      color: colors.textColorDefaultPrimary,
+    },
+    messageReactions: {
+      flexDirection: 'row',
+      gap: 4,
+      justifyContent: mine ? 'flex-end' : 'flex-start',
+    },
+  })
+}

package/src/components/conversation/message_form.tsx

@@ -0,0 +1,159 @@
+import { useTheme as useNavigationTheme } from '@react-navigation/native'
+import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'
+import React, { useContext } from 'react'
+import { StyleSheet, TextInput, View, ViewProps } from 'react-native'
+import { IconButton } from '../../components'
+import { ChatContext } from '../../contexts'
+import { useTheme } from '../../hooks'
+import { getMessagesQueryKey, getMessagesRequestArgs } from '../../hooks/use_conversation_messages'
+import { ApiCollection, ApiResource, ConversationResource, MessageResource } from '../../types'
+import { updateRecordInPagesData } from '../../utils'
+
+export const MessageForm = {
+  Root: MessageFormRoot,
+  TextInput: MessageFormInput,
+  SubmitButton: MessageFormSubmitBtn,
+  AttachmentPicker: MessageFormAttachmentPicker,
+  Commands: MessageFormCommands,
+}
+
+interface MessagesFormRootProps extends ViewProps {
+  conversation: ConversationResource
+}
+
+const MessageFormContext = React.createContext({
+  text: '',
+  setText: (_text: string) => {},
+  onSubmit: () => {},
+  disabled: false,
+})
+
+function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
+  const styles = useMessageFormStyles()
+  const [text, setText] = React.useState('')
+  const { client } = useContext(ChatContext)
+  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 client.post({
+        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 })
+
+      setText('')
+      queryClient.setQueryData<QueryData>(queryKey, data =>
+        updateRecordInPagesData({
+          data,
+          record: updatedMessage,
+        })
+      )
+    },
+  })
+
+  return (
+    <MessageFormContext.Provider
+      value={{ text, setText, onSubmit: () => mutate(), disabled: isPending }}
+    >
+      <View style={styles.textInputContainer}>{children}</View>
+    </MessageFormContext.Provider>
+  )
+}
+
+function MessageFormInput() {
+  const styles = useMessageFormStyles()
+  const { text, setText, onSubmit } = React.useContext(MessageFormContext)
+
+  return (
+    <TextInput
+      aria-disabled={true}
+      placeholder="Send a message"
+      onChangeText={setText}
+      value={text}
+      style={styles.textInput}
+      onSubmitEditing={onSubmit}
+    />
+  )
+}
+
+function MessageFormSubmitBtn() {
+  const styles = useMessageFormStyles()
+  const { onSubmit, disabled } = React.useContext(MessageFormContext)
+
+  return (
+    <IconButton
+      disabled={disabled}
+      accessibilityLabel="Send message"
+      size="md"
+      appearance="neutral"
+      style={styles.textInputSend}
+      name={'general.upArrow'}
+      onPress={onSubmit}
+    />
+  )
+}
+
+function MessageFormAttachmentPicker() {
+  return (
+    <IconButton
+      accessibilityLabel="Shazam"
+      size="md"
+      appearance="neutral"
+      name={'general.paperclip'}
+    />
+  )
+}
+
+function MessageFormCommands() {
+  return (
+    <IconButton accessibilityLabel="Shazam" size="md" appearance="neutral" name={'general.bolt'} />
+  )
+}
+
+const useMessageFormStyles = () => {
+  const theme = useTheme()
+  const navigationTheme = useNavigationTheme()
+
+  return StyleSheet.create({
+    textInputContainer: {
+      borderColor: theme.colors.fillColorNeutral050Base,
+      borderTopWidth: 1,
+      padding: 12,
+      backgroundColor: navigationTheme.colors.card,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+    },
+    textInput: {
+      borderRadius: 24,
+      borderWidth: 1,
+      padding: 12,
+      paddingHorizontal: 20,
+      borderColor: theme.colors.fillColorNeutral050Base,
+      flex: 1,
+    },
+    textInputSend: {
+      borderRadius: 24,
+      height: 36,
+      width: 36,
+      backgroundColor: theme.colors.fillColorNeutral040,
+    },
+  })
+}

package/src/components/conversation/message_reaction.tsx

@@ -31,7 +31,7 @@ export function MessageReaction({
   )
 }
 
-const useReactionStyles = ({ mine }: { mine: number }) => {
+export const useReactionStyles = ({ mine }: { mine: number }) => {
   const { colors } = useTheme()
   const activeBorderColor = colorFunction(colors.interaction).alpha(0.8).string()
   const activeColor = colorFunction(colors.interaction).alpha(0.2).string()
@@ -50,8 +50,5 @@ const useReactionStyles = ({ mine }: { mine: number }) => {
     },
     reactionEmoji: { fontSize: 12, paddingTop: 0 },
     reactionText: { fontSize: 12, color: colors.textColorDefaultPrimary },
-    pressed: {
-      opacity: 0.5,
-    },
   })
 }