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

package/build/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAA;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAChF,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,0BAA0B,CAAC;IAClD,YAAY,EAAE,YAAY;IAC1B,OAAO,EAAE;QACP,aAAa,EAAE;YACb,MAAM,EAAE,mBAAmB;YAC3B,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;gBACnC,WAAW,EAAG,KAAK,CAAC,MAA6B,EAAE,KAAK,IAAI,MAAM;gBAClE,UAAU,EAAE,GAAG,EAAE,CAAC,CAChB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CACrC;YAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAC5D;UAAA,EAAE,iBAAiB,CAAC,CACrB;gBACD,WAAW,EAAE,GAAG,EAAE,CAAC,CACjB,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC3B,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAG,CAAC,EACrD,CACH;aACF,CAAC;SACH;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,kBAAkB;SAC3B;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE;gBACP,KAAK,EAAE,KAAK;aACb;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;SACF;KACF;CACF,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StaticParamList } from '@react-navigation/native'\nimport { createNativeStackNavigator } from '@react-navigation/native-stack'\nimport { NotFound } from '../screens/not_found'\nimport { ScreenLayout } from './screenLayout'\nimport { ConversationsScreen } from '../screens/conversations_screen'\nimport { ConversationScreen } from '../screens/conversation_screen'\nimport { HeaderBackButton, PlatformPressable } from '@react-navigation/elements'\nimport { Icon } from '../components'\n\nexport const ChatStack = createNativeStackNavigator({\n  screenLayout: ScreenLayout,\n  screens: {\n    Conversations: {\n      screen: ConversationsScreen,\n      options: ({ route, navigation }) => ({\n        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',\n        headerLeft: () => (\n          <PlatformPressable onPress={() => null}>\n            <Icon name=\"general.threeReducingHorizontalBars\" size={18} />\n          </PlatformPressable>\n        ),\n        headerRight: () => (\n          <HeaderBackButton\n            onPress={navigation.goBack}\n            backImage={() => <Icon name=\"general.x\" size={18} />}\n          />\n        ),\n      }),\n    },\n    Conversation: {\n      screen: ConversationScreen,\n    },\n    NotFound: {\n      screen: NotFound,\n      options: {\n        title: '404',\n      },\n      linking: {\n        path: '*',\n      },\n    },\n  },\n})\n\ntype ChatStackParamList = StaticParamList<typeof ChatStack>\n\ndeclare global {\n  namespace ReactNavigation {\n    interface RootParamList extends ChatStackParamList {}\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAA;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AAE5F,MAAM,CAAC,MAAM,SAAS,GAAG,0BAA0B,CAAC;IAClD,YAAY,EAAE,YAAY;IAC1B,OAAO,EAAE;QACP,aAAa,EAAE;YACb,MAAM,EAAE,mBAAmB;YAC3B,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;gBACnC,WAAW,EAAG,KAAK,CAAC,MAA6B,EAAE,KAAK,IAAI,MAAM;gBAClE,UAAU,EAAE,GAAG,EAAE,CAAC,CAChB,CAAC,YAAY,CACX;YAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAC5D;UAAA,EAAE,YAAY,CAAC,CAChB;gBACD,WAAW,EAAE,GAAG,EAAE,CAAC,CACjB,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC3B,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAG,CAAC,EACrD,CACH;aACF,CAAC;SACH;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,kBAAkB;SAC3B;QACD,cAAc,EAAE;YACd,MAAM,EAAE,oBAAoB;YAC5B,gEAAgE;YAChE,OAAO,EAAE,kBAAkB;SAC5B;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE;gBACP,KAAK,EAAE,KAAK;aACb;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;SACF;KACF;CACF,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StaticParamList } from '@react-navigation/native'\nimport { createNativeStackNavigator } from '@react-navigation/native-stack'\nimport { NotFound } from '../screens/not_found'\nimport { ScreenLayout } from './screenLayout'\nimport { ConversationsScreen } from '../screens/conversations_screen'\nimport { ConversationScreen } from '../screens/conversation_screen'\nimport { HeaderBackButton, HeaderButton } from '@react-navigation/elements'\nimport { Icon } from '../components'\nimport { MessageActionsScreen, ReactScreenOptions } from '../screens/message_actions_screen'\n\nexport const ChatStack = createNativeStackNavigator({\n  screenLayout: ScreenLayout,\n  screens: {\n    Conversations: {\n      screen: ConversationsScreen,\n      options: ({ route, navigation }) => ({\n        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',\n        headerLeft: () => (\n          <HeaderButton>\n            <Icon name=\"general.threeReducingHorizontalBars\" size={18} />\n          </HeaderButton>\n        ),\n        headerRight: () => (\n          <HeaderBackButton\n            onPress={navigation.goBack}\n            backImage={() => <Icon name=\"general.x\" size={18} />}\n          />\n        ),\n      }),\n    },\n    Conversation: {\n      screen: ConversationScreen,\n    },\n    MessageActions: {\n      screen: MessageActionsScreen,\n      // Something about sheetAllowedDetents declared inline breaks TS\n      options: ReactScreenOptions,\n    },\n    NotFound: {\n      screen: NotFound,\n      options: {\n        title: '404',\n      },\n      linking: {\n        path: '*',\n      },\n    },\n  },\n})\n\ntype ChatStackParamList = StaticParamList<typeof ChatStack>\n\ndeclare global {\n  namespace ReactNavigation {\n    interface RootParamList extends ChatStackParamList {}\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"conversation_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAAoB,MAAM,OAAO,CAAA;AAOxC,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;IACtD,eAAe,EAAE,MAAM,CAAA;IACvB,mBAAmB,EAAE,MAAM,CAAA;CAC5B,CAAC,CAAA;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE,uBAAuB,qBAkDpE"}
+{"version":3,"file":"conversation_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EAGlB,MAAM,0BAA0B,CAAA;AAEjC,OAAO,KAAoB,MAAM,OAAO,CAAA;AAUxC,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;IACtD,eAAe,EAAE,MAAM,CAAA;IACvB,mBAAmB,EAAE,MAAM,CAAA;CAC5B,CAAC,CAAA;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE,uBAAuB,qBA6CpE"}

package/build/screens/conversation_screen.js

@@ -1,12 +1,18 @@
-import { useNavigation } from '@react-navigation/native';
+import { PlatformPressable } from '@react-navigation/elements';
+import { useNavigation, useTheme as useNavigationTheme, } from '@react-navigation/native';
+import colorFunction from 'color';
 import React, { useEffect } from 'react';
-import { FlatList, SafeAreaView, StyleSheet, TextInput, View } from 'react-native';
-import { Text } from '../components/display';
-import { useSuspenseGet, useSuspensePaginator } from '../hooks/use_suspense_api';
+import { FlatList, StyleSheet, TextInput, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { MessageReaction } from '../components/conversation/message_reaction';
+import { Avatar, Text } from '../components/display';
 import { useTheme } from '../hooks';
+import { useConversationMessages } from '../hooks/use_conversation_messages';
+import { useSuspenseGet } from '../hooks/use_suspense_api';
 export function ConversationScreen({ route }) {
     const navigation = useNavigation();
     const { conversation_id } = route.params;
+    const styles = useStyles();
     const { data: conversation } = useSuspenseGet({
         url: `/me/conversations/${conversation_id}`,
         data: {
@@ -15,55 +21,103 @@ export function ConversationScreen({ route }) {
             },
         },
     });
-    const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator({
-        url: `/me/conversations/${conversation_id}/messages`,
-        data: {
-            perPage: 25,
-            fields: {
-                Message: ['text', 'mine'],
-            },
-        },
+    const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
+        conversation_id,
     });
     useEffect(() => {
         navigation.setOptions({ title: conversation?.title });
     }, [conversation, conversation_id, navigation]);
-    return (<SafeAreaView style={styles.container}>
-      <FlatList inverted contentContainerStyle={styles.listContainer} refreshing={isRefetching} onRefresh={refetch} data={data} keyExtractor={item => item.id} renderItem={({ item }) => <Message {...item}/>} onEndReached={() => fetchNextPage()}/>
+    return (<SafeAreaView style={styles.container} edges={['top', 'bottom', 'left', 'right']}>
+      <FlatList inverted contentContainerStyle={styles.listContainer} refreshing={isRefetching} onRefresh={refetch} data={messages} keyExtractor={item => item.id} renderItem={({ item }) => <Message {...item} conversation_id={conversation_id}/>} onEndReached={() => fetchNextPage()}/>
       <View style={styles.textInputContainer}>
         <TextInput aria-disabled={true} placeholder="Send a message" onChangeText={() => console.log('TODO: Implement sending a message')} value="" style={styles.textInput}/>
       </View>
     </SafeAreaView>);
 }
-function Message(message) {
-    const { text } = message;
-    const styles = useMessageStyles(message);
-    return <Text style={styles.message}>{text}</Text>;
+const useStyles = () => {
+    const navigationTheme = useNavigationTheme();
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            justifyContent: 'center',
+            backgroundColor: navigationTheme.colors.card,
+        },
+        listContainer: {
+            gap: 12,
+            paddingHorizontal: 16,
+            paddingVertical: 12,
+        },
+        textInputContainer: {
+            borderTopWidth: 1,
+            padding: 12,
+            backgroundColor: navigationTheme.colors.card,
+        },
+        textInput: { borderRadius: 16, borderWidth: 1, padding: 12 },
+    });
+};
+function Message(props) {
+    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" style={styles.authorName}>
+            {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 }) => {
     const { colors } = useTheme();
+    const activeColor = colorFunction(colors.interaction).alpha(0.2).string();
     return StyleSheet.create({
         message: {
-            alignSelf: mine ? 'flex-end' : 'flex-start',
-            backgroundColor: mine ? colors.fillColorNeutral040 : colors.fillColorNeutral050Base,
-            borderRadius: 16,
-            borderBottomLeftRadius: mine ? 16 : 0,
-            borderBottomRightRadius: mine ? 0 : 16,
-            padding: 12,
+            gap: 8,
+            flexDirection: mine ? 'row-reverse' : 'row',
+        },
+        messageContent: {
+            gap: 8,
+            flexShrink: 1,
+        },
+        messageAuthor: {
+            flexDirection: 'row',
+            gap: 8,
+        },
+        authorName: {},
+        authorAvatar: {},
+        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',
+        },
     });
 };
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-    },
-    listContainer: {
-        gap: 12,
-        paddingHorizontal: 16,
-        paddingTop: 12,
-    },
-    textInputContainer: { borderTopWidth: 1, padding: 12 },
-    textInput: { borderRadius: 16, borderWidth: 1, padding: 12 },
-});
 //# sourceMappingURL=conversation_screen.js.map

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 { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React, { useEffect } from 'react'\nimport { FlatList, SafeAreaView, StyleSheet, TextInput, View } from 'react-native'\nimport { Text } from '../components/display'\nimport { useSuspenseGet, useSuspensePaginator } from '../hooks/use_suspense_api'\nimport { ConversationResource, MessageResource } from '../types'\nimport { useTheme } from '../hooks'\n\nexport type ConversationScreenProps = StaticScreenProps<{\n  conversation_id: string\n  chat_group_graph_id: string\n}>\n\nexport function ConversationScreen({ route }: ConversationScreenProps) {\n  const navigation = useNavigation()\n  const { conversation_id } = route.params\n\n  const { data: conversation } = useSuspenseGet<ConversationResource>({\n    url: `/me/conversations/${conversation_id}`,\n    data: {\n      fields: {\n        Conversation: ['title'],\n      },\n    },\n  })\n\n  const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>({\n    url: `/me/conversations/${conversation_id}/messages`,\n    data: {\n      perPage: 25,\n      fields: {\n        Message: ['text', 'mine'],\n      },\n    },\n  })\n\n  useEffect(() => {\n    navigation.setOptions({ title: conversation?.title })\n  }, [conversation, conversation_id, navigation])\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <FlatList\n        inverted\n        contentContainerStyle={styles.listContainer}\n        refreshing={isRefetching}\n        onRefresh={refetch}\n        data={data}\n        keyExtractor={item => item.id}\n        renderItem={({ item }) => <Message {...item} />}\n        onEndReached={() => fetchNextPage()}\n      />\n      <View style={styles.textInputContainer}>\n        <TextInput\n          aria-disabled={true}\n          placeholder=\"Send a message\"\n          onChangeText={() => console.log('TODO: Implement sending a message')}\n          value=\"\"\n          style={styles.textInput}\n        />\n      </View>\n    </SafeAreaView>\n  )\n}\n\nfunction Message(message: MessageResource) {\n  const { text } = message\n  const styles = useMessageStyles(message)\n\n  return <Text style={styles.message}>{text}</Text>\n}\n\nconst useMessageStyles = ({ mine }: MessageResource) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    message: {\n      alignSelf: mine ? 'flex-end' : 'flex-start',\n      backgroundColor: mine ? colors.fillColorNeutral040 : colors.fillColorNeutral050Base,\n      borderRadius: 16,\n      borderBottomLeftRadius: mine ? 16 : 0,\n      borderBottomRightRadius: mine ? 0 : 16,\n      padding: 12,\n      color: colors.textColorDefaultPrimary,\n    },\n  })\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n  listContainer: {\n    gap: 12,\n    paddingHorizontal: 16,\n    paddingTop: 12,\n  },\n  textInputContainer: { borderTopWidth: 1, padding: 12 },\n  textInput: { borderRadius: 16, borderWidth: 1, padding: 12 },\n})\n"]}
+{"version":3,"file":"conversation_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAEL,aAAa,EACb,QAAQ,IAAI,kBAAkB,GAC/B,MAAM,0BAA0B,CAAA;AACjC,OAAO,aAAa,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAA;AAC7E,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAA;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAQ1D,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAA2B;IACnE,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,MAAM,CAAA;IACxC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,cAAc,CAAuB;QAClE,GAAG,EAAE,qBAAqB,eAAe,EAAE;QAC3C,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,YAAY,EAAE,CAAC,OAAO,CAAC;aACxB;SACF;KACF,CAAC,CAAA;IAEF,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,uBAAuB,CAAC;QACjF,eAAe;KAChB,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAA;IACvD,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAA;IAE/C,OAAO,CACL,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAC/E;MAAA,CAAC,QAAQ,CACP,QAAQ,CACR,qBAAqB,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAC5C,UAAU,CAAC,CAAC,YAAY,CAAC,CACzB,SAAS,CAAC,CAAC,OAAO,CAAC,CACnB,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,YAAY,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAC9B,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC,eAAe,CAAC,EAAG,CAAC,CAClF,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,EAEtC;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CACrC;QAAA,CAAC,SAAS,CACR,aAAa,CAAC,CAAC,IAAI,CAAC,CACpB,WAAW,CAAC,gBAAgB,CAC5B,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAC,CACrE,KAAK,CAAC,EAAE,CACR,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,EAE5B;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,YAAY,CAAC,CAChB,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAA;IAE5C,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,IAAI,EAAE,CAAC;YACP,cAAc,EAAE,QAAQ;YACxB,eAAe,EAAE,eAAe,CAAC,MAAM,CAAC,IAAI;SAC7C;QACD,aAAa,EAAE;YACb,GAAG,EAAE,EAAE;YACP,iBAAiB,EAAE,EAAE;YACrB,eAAe,EAAE,EAAE;SACpB;QACD,kBAAkB,EAAE;YAClB,cAAc,EAAE,CAAC;YACjB,OAAO,EAAE,EAAE;YACX,eAAe,EAAE,eAAe,CAAC,MAAM,CAAC,IAAI;SAC7C;QACD,SAAS,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;KAC7D,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,SAAS,OAAO,CAAC,KAAoD;IACnE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,cAAc,EAAE,GAAG,KAAK,CAAA;IACvD,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAA;IACtC,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,UAAU,CAAC,QAAQ,CAAC,gBAAgB,EAAE;YACpC,UAAU,EAAE,KAAK,CAAC,EAAE;YACpB,eAAe;SAChB,CAAC,CAAA;IACJ,CAAC,CAAA;IACD,qDAAqD;IACrD,MAAM,mBAAmB,GAAG,kBAAkB,CAAA;IAE9C,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IAEtB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;MAAA,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CACd,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAChC;UAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EACrD;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CACjC;QAAA,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CACd,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAChD;YAAA,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CACpB;UAAA,EAAE,IAAI,CAAC,CACR,CACD;QAAA,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,CAAC,kBAAkB,CAAC,CAC9E;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,CAC/C;QAAA,EAAE,iBAAiB,CACnB;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CACnC;UAAA,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAC9B,CAAC,eAAe,CACd,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACpB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,mBAAmB,CAAC,EAC7B,CACH,CAAC,CACJ;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,gBAAgB,GAAG,CAAC,EAAE,IAAI,EAAmB,EAAE,EAAE;IACrD,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAA;IAEzE,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,OAAO,EAAE;YACP,GAAG,EAAE,CAAC;YACN,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK;SAC5C;QACD,cAAc,EAAE;YACd,GAAG,EAAE,CAAC;YACN,UAAU,EAAE,CAAC;SACd;QACD,aAAa,EAAE;YACb,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,CAAC;SACP;QACD,UAAU,EAAE,EAAE;QACd,YAAY,EAAE,EAAE;QAChB,aAAa,EAAE;YACb,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,mBAAmB;YAChE,YAAY,EAAE,EAAE;YAChB,eAAe,EAAE,CAAC;YAClB,iBAAiB,EAAE,CAAC;SACrB;QACD,WAAW,EAAE;YACX,KAAK,EAAE,MAAM,CAAC,uBAAuB;SACtC;QACD,gBAAgB,EAAE;YAChB,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,CAAC;YACN,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;SACjD;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport {\n  StaticScreenProps,\n  useNavigation,\n  useTheme as useNavigationTheme,\n} from '@react-navigation/native'\nimport colorFunction from 'color'\nimport React, { useEffect } from 'react'\nimport { FlatList, StyleSheet, TextInput, View } from 'react-native'\nimport { SafeAreaView } from 'react-native-safe-area-context'\nimport { MessageReaction } from '../components/conversation/message_reaction'\nimport { Avatar, Text } from '../components/display'\nimport { useTheme } from '../hooks'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\nimport { useSuspenseGet } from '../hooks/use_suspense_api'\nimport { ConversationResource, MessageResource } from '../types'\n\nexport type ConversationScreenProps = StaticScreenProps<{\n  conversation_id: string\n  chat_group_graph_id: string\n}>\n\nexport function ConversationScreen({ route }: ConversationScreenProps) {\n  const navigation = useNavigation()\n  const { conversation_id } = route.params\n  const styles = useStyles()\n\n  const { data: conversation } = useSuspenseGet<ConversationResource>({\n    url: `/me/conversations/${conversation_id}`,\n    data: {\n      fields: {\n        Conversation: ['title'],\n      },\n    },\n  })\n\n  const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({\n    conversation_id,\n  })\n\n  useEffect(() => {\n    navigation.setOptions({ title: conversation?.title })\n  }, [conversation, conversation_id, navigation])\n\n  return (\n    <SafeAreaView style={styles.container} edges={['top', 'bottom', 'left', 'right']}>\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      <View style={styles.textInputContainer}>\n        <TextInput\n          aria-disabled={true}\n          placeholder=\"Send a message\"\n          onChangeText={() => console.log('TODO: Implement sending a message')}\n          value=\"\"\n          style={styles.textInput}\n        />\n      </View>\n    </SafeAreaView>\n  )\n}\n\nconst useStyles = () => {\n  const navigationTheme = useNavigationTheme()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n      backgroundColor: navigationTheme.colors.card,\n    },\n    listContainer: {\n      gap: 12,\n      paddingHorizontal: 16,\n      paddingVertical: 12,\n    },\n    textInputContainer: {\n      borderTopWidth: 1,\n      padding: 12,\n      backgroundColor: navigationTheme.colors.card,\n    },\n    textInput: { borderRadius: 16, borderWidth: 1, padding: 12 },\n  })\n}\n\nfunction Message(props: MessageResource & { conversation_id: string }) {\n  const { text, conversation_id, reactionCounts } = props\n  const styles = useMessageStyles(props)\n  const navigation = useNavigation()\n  const handleMessagePress = () => {\n    navigation.navigate('MessageActions', {\n      message_id: props.id,\n      conversation_id,\n    })\n  }\n  // TODO: open the reaction screen to show who reacted\n  const handleReactionPress = handleMessagePress\n\n  if (!text) return null\n\n  return (\n    <View style={styles.message}>\n      {!props.mine && (\n        <View style={styles.messageAuthor}>\n          <Avatar size={'md'} sourceUri={props.author.avatar} />\n        </View>\n      )}\n      <View style={styles.messageContent}>\n        {!props.mine && (\n          <Text variant=\"tertiary\" style={styles.authorName}>\n            {props.author.name}\n          </Text>\n        )}\n        <PlatformPressable style={styles.messageBubble} onLongPress={handleMessagePress}>\n          <Text style={styles.messageText}>{text}</Text>\n        </PlatformPressable>\n        <View style={styles.messageReactions}>\n          {reactionCounts.map(reaction => (\n            <MessageReaction\n              key={reaction.value}\n              reaction={reaction}\n              onPress={handleReactionPress}\n            />\n          ))}\n        </View>\n      </View>\n    </View>\n  )\n}\n\nconst useMessageStyles = ({ mine }: MessageResource) => {\n  const { colors } = useTheme()\n  const activeColor = colorFunction(colors.interaction).alpha(0.2).string()\n\n  return StyleSheet.create({\n    message: {\n      gap: 8,\n      flexDirection: mine ? 'row-reverse' : 'row',\n    },\n    messageContent: {\n      gap: 8,\n      flexShrink: 1,\n    },\n    messageAuthor: {\n      flexDirection: 'row',\n      gap: 8,\n    },\n    authorName: {},\n    authorAvatar: {},\n    messageBubble: {\n      backgroundColor: mine ? activeColor : colors.fillColorNeutral070,\n      borderRadius: 12,\n      paddingVertical: 6,\n      paddingHorizontal: 8,\n    },\n    messageText: {\n      color: colors.textColorDefaultPrimary,\n    },\n    messageReactions: {\n      flexDirection: 'row',\n      gap: 4,\n      justifyContent: mine ? 'flex-end' : 'flex-start',\n    },\n  })\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA8CvC,wBAAgB,kBAAkB,sBA6kBjC"}
+{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAuDvC,wBAAgB,kBAAkB,sBAgBjC"}