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

package/build/components/conversation/attachments/image_attachment.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
-export declare function ImageAttachment({ attachment }: {
+export type MetaProps = {
+    authorName: string;
+    createdAt: string;
+};
+export declare function ImageAttachment({ attachment, metaProps, }: {
     attachment: any;
+    metaProps: MetaProps;
 }): React.JSX.Element;
 //# sourceMappingURL=image_attachment.d.ts.map

package/build/components/conversation/attachments/image_attachment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,wBAAgB,eAAe,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,GAAG,CAAA;CAAE,qBAelE"}
+{"version":3,"file":"image_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAgC7D,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,SAAS,GACV,EAAE;IACD,UAAU,EAAE,GAAG,CAAA;IACf,SAAS,EAAE,SAAS,CAAA;CACrB,qBAwDA"}

package/build/components/conversation/attachments/image_attachment.js

@@ -1,16 +1,81 @@
-import React from 'react';
-import { View, Image, StyleSheet } from 'react-native';
-export function ImageAttachment({ attachment }) {
+import React, { useCallback, useMemo, useState } from 'react';
+import { Image, StyleSheet, Modal, Pressable, useWindowDimensions, SafeAreaView, View, Linking, } from 'react-native';
+import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { tokens } from '../../../vendor/tapestry/tokens';
+import { IconButton, Heading, Text } from '../../display';
+import colorFunction from 'color';
+import { formatDatePreview } from '../../../utils/date';
+const PAN_THRESHOLD_PX = 300;
+export function ImageAttachment({ attachment, metaProps, }) {
     const styles = useStyles();
+    const [visible, setVisible] = useState(false);
+    // shared values run on the native UI thread and prevents clogging up the JS thread
+    const dismissY = useSharedValue(0);
+    const opacity = useSharedValue(1);
+    const resetAnimations = useCallback(() => {
+        dismissY.value = withTiming(0);
+        opacity.value = withTiming(1);
+    }, [dismissY, opacity]);
+    const handleCloseModal = useCallback(() => {
+        setVisible(false);
+        resetAnimations();
+    }, [setVisible, resetAnimations]);
+    const panGesture = Gesture.Pan()
+        .onUpdate(e => {
+        dismissY.value = e.translationY;
+        opacity.value = 1 - Math.abs(e.translationY) / PAN_THRESHOLD_PX;
+    })
+        .onEnd(() => {
+        runOnJS(handleCloseModal)(); // Ensures we can call a JS function
+    });
+    const animatedImageStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: dismissY.value }],
+        opacity: opacity.value,
+    }));
     const { attributes } = attachment;
     const { url, urlMedium, filename, metadata = {} } = attributes;
     const width = metadata.width || 100;
     const height = metadata.height || 100;
-    return (<View style={styles.container}>
-      <Image source={{ uri: urlMedium || url }} style={[styles.image, { aspectRatio: width / height }]} accessibilityLabel={filename}/>
-    </View>);
+    return (<>
+      <Pressable style={styles.container} onPress={() => setVisible(true)}>
+        <Image source={{ uri: urlMedium || url }} style={[styles.image, { aspectRatio: width / height }]} accessibilityLabel={filename}/>
+      </Pressable>
+      <LightboxModal visible={visible} handleCloseModal={handleCloseModal} uri={urlMedium || url} metaProps={metaProps} panGesture={panGesture} animatedImageStyle={animatedImageStyle}/>
+    </>);
 }
+const LightboxModal = ({ uri, visible, handleCloseModal, metaProps, panGesture, animatedImageStyle, }) => {
+    const styles = useStyles();
+    const { authorName, createdAt } = metaProps;
+    const handleOpenInBrowser = () => {
+        Linking.openURL(uri);
+    };
+    return (<Modal visible={visible} transparent animationType="fade" onRequestClose={handleCloseModal}>
+      <SafeAreaView style={styles.modal}>
+        <GestureHandlerRootView>
+          <GestureDetector gesture={panGesture}>
+            <Animated.Image source={{ uri }} style={[styles.lightboxImage, animatedImageStyle]} resizeMode="contain"/>
+          </GestureDetector>
+          <View style={styles.actionToolbar} accessibilityRole="toolbar">
+            <View style={styles.actionToolbarTextMeta}>
+              <Heading variant="h3" style={styles.actionToolbarTitle} numberOfLines={1}>
+                {authorName}
+              </Heading>
+              <Text variant="tertiary" style={styles.actionToolbarSubtitle}>
+                {formatDatePreview(createdAt)}
+              </Text>
+            </View>
+            <IconButton onPress={handleOpenInBrowser} name="general.newWindow" accessibilityRole="link" accessibilityLabel="Open image in browser" accessibilityHint="Image can be downloaded and shared through the browser." style={styles.actionButton} iconStyle={styles.actionButtonIcon} size="lg"/>
+            <IconButton onPress={handleCloseModal} name="general.x" accessibilityLabel="Close image" style={styles.actionButton} iconStyle={styles.actionButtonIcon}/>
+          </View>
+        </GestureHandlerRootView>
+      </SafeAreaView>
+    </Modal>);
+};
 const useStyles = () => {
+    const { width: windowWidth } = useWindowDimensions();
+    const backgroundColor = tokens.colorNeutral7;
+    const transparentBackgroundColor = useMemo(() => colorFunction(backgroundColor).alpha(0.8).toString(), [backgroundColor]);
     return StyleSheet.create({
         container: {
             maxWidth: '100%',
@@ -19,6 +84,50 @@ const useStyles = () => {
             borderRadius: 8,
             minWidth: 200,
         },
+        modal: {
+            flex: 1,
+            backgroundColor,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        lightboxImage: {
+            width: windowWidth,
+            height: '100%',
+        },
+        actionToolbar: {
+            width: '100%',
+            position: 'absolute',
+            top: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 20,
+            paddingHorizontal: 16,
+            paddingTop: 16,
+            paddingBottom: 8,
+            backgroundColor: transparentBackgroundColor,
+        },
+        actionToolbarTextMeta: {
+            flex: 1,
+        },
+        actionToolbarTitle: {
+            marginRight: 'auto',
+            flexShrink: 1,
+            color: tokens.colorNeutral88,
+        },
+        actionToolbarSubtitle: {
+            color: tokens.colorNeutral68,
+        },
+        actionButton: {
+            backgroundColor,
+            height: 40,
+            width: 40,
+            borderRadius: 50,
+            borderWidth: 1,
+            borderColor: tokens.colorNeutral24,
+        },
+        actionButtonIcon: {
+            color: tokens.colorNeutral88,
+        },
     });
 };
 //# sourceMappingURL=image_attachment.js.map

package/build/components/conversation/attachments/image_attachment.js.map

@@ -1 +1 @@
-{"version":3,"file":"image_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,UAAU,eAAe,CAAC,EAAE,UAAU,EAAuB;IACjE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IACjC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,UAAU,CAAA;IAC9D,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,GAAG,CAAA;IACnC,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,GAAG,CAAA;IACrC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,IAAI,GAAG,EAAE,CAAC,CAClC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,GAAG,MAAM,EAAE,CAAC,CAAC,CACvD,kBAAkB,CAAC,CAAC,QAAQ,CAAC,EAEjC;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,QAAQ,EAAE,MAAM;SACjB;QACD,KAAK,EAAE;YACL,YAAY,EAAE,CAAC;YACf,QAAQ,EAAE,GAAG;SACd;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { View, Image, StyleSheet } from 'react-native'\n\nexport function ImageAttachment({ attachment }: { attachment: any }) {\n  const styles = useStyles()\n  const { attributes } = attachment\n  const { url, urlMedium, filename, metadata = {} } = attributes\n  const width = metadata.width || 100\n  const height = metadata.height || 100\n  return (\n    <View style={styles.container}>\n      <Image\n        source={{ uri: urlMedium || url }}\n        style={[styles.image, { aspectRatio: width / height }]}\n        accessibilityLabel={filename}\n      />\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    container: {\n      maxWidth: '100%',\n    },\n    image: {\n      borderRadius: 8,\n      minWidth: 200,\n    },\n  })\n}\n"]}
+{"version":3,"file":"image_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo, useState } from 'react'\nimport {\n  Image,\n  StyleSheet,\n  Modal,\n  Pressable,\n  useWindowDimensions,\n  SafeAreaView,\n  View,\n  Linking,\n  ImageStyle,\n} from 'react-native'\nimport {\n  Gesture,\n  GestureDetector,\n  GestureHandlerRootView,\n  type PanGesture,\n} from 'react-native-gesture-handler'\nimport Animated, {\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n  type AnimatedStyle,\n} from 'react-native-reanimated'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { IconButton, Heading, Text } from '../../display'\nimport colorFunction from 'color'\nimport { formatDatePreview } from '../../../utils/date'\n\nconst PAN_THRESHOLD_PX = 300\n\nexport type MetaProps = {\n  authorName: string\n  createdAt: string\n}\n\nexport function ImageAttachment({\n  attachment,\n  metaProps,\n}: {\n  attachment: any\n  metaProps: MetaProps\n}) {\n  const styles = useStyles()\n  const [visible, setVisible] = useState(false)\n\n  // shared values run on the native UI thread and prevents clogging up the JS thread\n  const dismissY = useSharedValue(0)\n  const opacity = useSharedValue(1)\n\n  const resetAnimations = useCallback(() => {\n    dismissY.value = withTiming(0)\n    opacity.value = withTiming(1)\n  }, [dismissY, opacity])\n\n  const handleCloseModal = useCallback(() => {\n    setVisible(false)\n    resetAnimations()\n  }, [setVisible, resetAnimations])\n\n  const panGesture = Gesture.Pan()\n    .onUpdate(e => {\n      dismissY.value = e.translationY\n      opacity.value = 1 - Math.abs(e.translationY) / PAN_THRESHOLD_PX\n    })\n    .onEnd(() => {\n      runOnJS(handleCloseModal)() // Ensures we can call a JS function\n    })\n\n  const animatedImageStyle = useAnimatedStyle(() => ({\n    transform: [{ translateY: dismissY.value }],\n    opacity: opacity.value,\n  }))\n\n  const { attributes } = attachment\n  const { url, urlMedium, filename, metadata = {} } = attributes\n  const width = metadata.width || 100\n  const height = metadata.height || 100\n\n  return (\n    <>\n      <Pressable style={styles.container} onPress={() => setVisible(true)}>\n        <Image\n          source={{ uri: urlMedium || url }}\n          style={[styles.image, { aspectRatio: width / height }]}\n          accessibilityLabel={filename}\n        />\n      </Pressable>\n      <LightboxModal\n        visible={visible}\n        handleCloseModal={handleCloseModal}\n        uri={urlMedium || url}\n        metaProps={metaProps}\n        panGesture={panGesture}\n        animatedImageStyle={animatedImageStyle}\n      />\n    </>\n  )\n}\n\ninterface LightboxModalProps {\n  visible: boolean\n  handleCloseModal: () => void\n  uri: string\n  metaProps: MetaProps\n  panGesture: PanGesture\n  animatedImageStyle: AnimatedStyle<ImageStyle>\n}\n\nconst LightboxModal = ({\n  uri,\n  visible,\n  handleCloseModal,\n  metaProps,\n  panGesture,\n  animatedImageStyle,\n}: LightboxModalProps) => {\n  const styles = useStyles()\n\n  const { authorName, createdAt } = metaProps\n\n  const handleOpenInBrowser = () => {\n    Linking.openURL(uri)\n  }\n\n  return (\n    <Modal visible={visible} transparent animationType=\"fade\" onRequestClose={handleCloseModal}>\n      <SafeAreaView style={styles.modal}>\n        <GestureHandlerRootView>\n          <GestureDetector gesture={panGesture}>\n            <Animated.Image\n              source={{ uri }}\n              style={[styles.lightboxImage, animatedImageStyle]}\n              resizeMode=\"contain\"\n            />\n          </GestureDetector>\n          <View style={styles.actionToolbar} accessibilityRole=\"toolbar\">\n            <View style={styles.actionToolbarTextMeta}>\n              <Heading variant=\"h3\" style={styles.actionToolbarTitle} numberOfLines={1}>\n                {authorName}\n              </Heading>\n              <Text variant=\"tertiary\" style={styles.actionToolbarSubtitle}>\n                {formatDatePreview(createdAt)}\n              </Text>\n            </View>\n            <IconButton\n              onPress={handleOpenInBrowser}\n              name=\"general.newWindow\"\n              accessibilityRole=\"link\"\n              accessibilityLabel=\"Open image in browser\"\n              accessibilityHint=\"Image can be downloaded and shared through the browser.\"\n              style={styles.actionButton}\n              iconStyle={styles.actionButtonIcon}\n              size=\"lg\"\n            />\n            <IconButton\n              onPress={handleCloseModal}\n              name=\"general.x\"\n              accessibilityLabel=\"Close image\"\n              style={styles.actionButton}\n              iconStyle={styles.actionButtonIcon}\n            />\n          </View>\n        </GestureHandlerRootView>\n      </SafeAreaView>\n    </Modal>\n  )\n}\n\nconst useStyles = () => {\n  const { width: windowWidth } = useWindowDimensions()\n  const backgroundColor = tokens.colorNeutral7\n  const transparentBackgroundColor = useMemo(\n    () => colorFunction(backgroundColor).alpha(0.8).toString(),\n    [backgroundColor]\n  )\n\n  return StyleSheet.create({\n    container: {\n      maxWidth: '100%',\n    },\n    image: {\n      borderRadius: 8,\n      minWidth: 200,\n    },\n    modal: {\n      flex: 1,\n      backgroundColor,\n      justifyContent: 'center',\n      alignItems: 'center',\n    },\n    lightboxImage: {\n      width: windowWidth,\n      height: '100%',\n    },\n    actionToolbar: {\n      width: '100%',\n      position: 'absolute',\n      top: 0,\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 20,\n      paddingHorizontal: 16,\n      paddingTop: 16,\n      paddingBottom: 8,\n      backgroundColor: transparentBackgroundColor,\n    },\n    actionToolbarTextMeta: {\n      flex: 1,\n    },\n    actionToolbarTitle: {\n      marginRight: 'auto',\n      flexShrink: 1,\n      color: tokens.colorNeutral88,\n    },\n    actionToolbarSubtitle: {\n      color: tokens.colorNeutral68,\n    },\n    actionButton: {\n      backgroundColor,\n      height: 40,\n      width: 40,\n      borderRadius: 50,\n      borderWidth: 1,\n      borderColor: tokens.colorNeutral24,\n    },\n    actionButtonIcon: {\n      color: tokens.colorNeutral88,\n    },\n  })\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAM7C;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,eAAe,GAAG;IAAE,eAAe,EAAE,MAAM,CAAA;CAAE,qBAiD3E"}
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAM7C;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,eAAe,GAAG;IAAE,eAAe,EAAE,MAAM,CAAA;CAAE,qBAsD3E"}

package/build/components/conversation/message.js

@@ -29,6 +29,10 @@ export function Message(props) {
             reaction_value: reaction.value,
         });
     };
+    const metaProps = {
+        authorName: props.author.name,
+        createdAt: props.createdAt,
+    };
     return (<View style={styles.message}>
       {!props.mine && (<View style={styles.messageAuthor}>
           <Avatar size={'md'} sourceUri={props.author.avatar}/>
@@ -37,7 +41,7 @@ export function Message(props) {
         {!props.mine && <Text variant="tertiary">{props.author.name}</Text>}
         <PlatformPressable style={styles.messageBubble} onLongPress={handleMessagePress}>
           <ErrorBoundary>
-            <MessageAttachments attachments={props.attachments}/>
+            <MessageAttachments attachments={props.attachments} metaProps={metaProps}/>
           </ErrorBoundary>
           {text && (<View style={styles.messageText}>
               <MessageMarkdown text={text}/>

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

@@ -1 +1 @@
-{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { useNavigation } from '@react-navigation/native'\nimport colorFunction from 'color'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { MessageReaction } from '../../components/conversation/message_reaction'\nimport { Avatar, Text } from '../../components/display'\nimport { useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageAttachments } from './message_attachments'\nimport ErrorBoundary from '../page/error_boundary'\nimport { MessageMarkdown } from './message_markdown'\n\n/** Message\n * Component for display of a message within a conversation list\n */\nexport function Message(props: MessageResource & { conversation_id: number }) {\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  const handleReactionPress = (reaction: ReactionCountResource) => {\n    navigation.navigate('Reactions', {\n      message_id: props.id,\n      conversation_id,\n      reaction_value: reaction.value,\n    })\n  }\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 && <Text variant=\"tertiary\">{props.author.name}</Text>}\n        <PlatformPressable style={styles.messageBubble} onLongPress={handleMessagePress}>\n          <ErrorBoundary>\n            <MessageAttachments attachments={props.attachments} />\n          </ErrorBoundary>\n          {text && (\n            <View style={styles.messageText}>\n              <MessageMarkdown text={text} />\n            </View>\n          )}\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    messageBubble: {\n      backgroundColor: mine ? activeColor : colors.fillColorNeutral070,\n      borderRadius: 8,\n      maxWidth: 232,\n    },\n    messageText: {\n      paddingVertical: 6,\n      paddingHorizontal: 8,\n    },\n    messageReactions: {\n      flexDirection: 'row',\n      gap: 4,\n      justifyContent: mine ? 'flex-end' : 'flex-start',\n    },\n  })\n}\n"]}
+{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { useNavigation } from '@react-navigation/native'\nimport colorFunction from 'color'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { MessageReaction } from '../../components/conversation/message_reaction'\nimport { Avatar, Text } from '../../components/display'\nimport { useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageAttachments } from './message_attachments'\nimport ErrorBoundary from '../page/error_boundary'\nimport { MessageMarkdown } from './message_markdown'\n\n/** Message\n * Component for display of a message within a conversation list\n */\nexport function Message(props: MessageResource & { conversation_id: number }) {\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  const handleReactionPress = (reaction: ReactionCountResource) => {\n    navigation.navigate('Reactions', {\n      message_id: props.id,\n      conversation_id,\n      reaction_value: reaction.value,\n    })\n  }\n\n  const metaProps = {\n    authorName: props.author.name,\n    createdAt: props.createdAt,\n  }\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 && <Text variant=\"tertiary\">{props.author.name}</Text>}\n        <PlatformPressable style={styles.messageBubble} onLongPress={handleMessagePress}>\n          <ErrorBoundary>\n            <MessageAttachments attachments={props.attachments} metaProps={metaProps} />\n          </ErrorBoundary>\n          {text && (\n            <View style={styles.messageText}>\n              <MessageMarkdown text={text} />\n            </View>\n          )}\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    messageBubble: {\n      backgroundColor: mine ? activeColor : colors.fillColorNeutral070,\n      borderRadius: 8,\n      maxWidth: 232,\n    },\n    messageText: {\n      paddingVertical: 6,\n      paddingHorizontal: 8,\n    },\n    messageReactions: {\n      flexDirection: 'row',\n      gap: 4,\n      justifyContent: mine ? 'flex-end' : 'flex-start',\n    },\n  })\n}\n"]}

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource';
+import { type MetaProps } from './attachments/image_attachment';
 export declare function MessageAttachments(props: {
     attachments: DenormalizedAttachmentResource[];
+    metaProps: MetaProps;
 }): React.JSX.Element | null;
 //# sourceMappingURL=message_attachments.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"message_attachments.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_attachments.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,8BAA8B,EAAE,MAAM,wDAAwD,CAAA;AAQvG,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IAAE,WAAW,EAAE,8BAA8B,EAAE,CAAA;CAAE,4BAyB1F"}
+{"version":3,"file":"message_attachments.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_attachments.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,8BAA8B,EAAE,MAAM,wDAAwD,CAAA;AAMvG,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAEhF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,WAAW,EAAE,8BAA8B,EAAE,CAAA;IAC7C,SAAS,EAAE,SAAS,CAAA;CACrB,4BA+BA"}

package/build/components/conversation/message_attachments.js

@@ -8,14 +8,14 @@ import { ExpandedLink } from './attachments/expanded_link';
 import { ImageAttachment } from './attachments/image_attachment';
 export function MessageAttachments(props) {
     const styles = useStyles();
-    const { attachments } = props;
+    const { attachments, metaProps } = props;
     if (!attachments || attachments.length === 0)
         return null;
     return (<View style={styles.attachmentsContainer}>
       {attachments.map(attachment => {
             switch (attachment.type) {
                 case 'MessageAttachment':
-                    return <MessageAttachment key={attachment.id} attachment={attachment}/>;
+                    return (<MessageAttachment key={attachment.id} attachment={attachment} metaProps={metaProps}/>);
                 case 'giphy':
                     return (<GiphyAttachment key={attachment.id || attachment.titleLink} attachment={attachment}/>);
                 case 'ExpandedLink':
@@ -26,13 +26,13 @@ export function MessageAttachments(props) {
         })}
     </View>);
 }
-function MessageAttachment({ attachment }) {
+function MessageAttachment({ attachment, metaProps }) {
     const { attributes } = attachment;
     const contentType = attributes?.contentType;
     const basicType = contentType ? contentType.split('/')[0] : '';
     switch (basicType) {
         case 'image':
-            return <ImageAttachment attachment={attachment}/>;
+            return <ImageAttachment attachment={attachment} metaProps={metaProps}/>;
         case 'video':
             return <VideoAttachment attachment={attachment}/>;
         case 'audio':

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

@@ -1 +1 @@
-{"version":3,"file":"message_attachments.js","sourceRoot":"","sources":["../../../src/components/conversation/message_attachments.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAA;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAEhE,MAAM,UAAU,kBAAkB,CAAC,KAAwD;IACzF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAC7B,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IACzD,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CACvC;MAAA,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC5B,QAAQ,UAAU,CAAC,IAAI,EAAE,CAAC;gBACxB,KAAK,mBAAmB;oBACtB,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;gBAC1E,KAAK,OAAO;oBACV,OAAO,CACL,CAAC,eAAe,CACd,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,UAAU,CAAC,SAAS,CAAC,CAC3C,UAAU,CAAC,CAAC,UAAU,CAAC,EACvB,CACH,CAAA;gBACH,KAAK,cAAc;oBACjB,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;gBACrE;oBACE,OAAO,IAAI,CAAA;YACf,CAAC;QACH,CAAC,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,SAAS,iBAAiB,CAAC,EAAE,UAAU,EAAuB;IAC5D,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IACjC,MAAM,WAAW,GAAG,UAAU,EAAE,WAAW,CAAA;IAC3C,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9D,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,OAAO;YACV,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;QACpD,KAAK,OAAO;YACV,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;QACpD,KAAK,OAAO;YACV,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;QACpD;YACE,OAAO,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;IAC5D,CAAC;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,oBAAoB,EAAE;YACpB,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,CAAC;SACX;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport { AudioAttachment } from './attachments/audio_attachment'\nimport { VideoAttachment } from './attachments/video_attachment'\nimport { GiphyAttachment } from './attachments/giphy_attachment'\nimport { GenericFileAttachment } from './attachments/generic_file_attachment'\nimport { ExpandedLink } from './attachments/expanded_link'\nimport { ImageAttachment } from './attachments/image_attachment'\n\nexport function MessageAttachments(props: { attachments: DenormalizedAttachmentResource[] }) {\n  const styles = useStyles()\n  const { attachments } = props\n  if (!attachments || attachments.length === 0) return null\n  return (\n    <View style={styles.attachmentsContainer}>\n      {attachments.map(attachment => {\n        switch (attachment.type) {\n          case 'MessageAttachment':\n            return <MessageAttachment key={attachment.id} attachment={attachment} />\n          case 'giphy':\n            return (\n              <GiphyAttachment\n                key={attachment.id || attachment.titleLink}\n                attachment={attachment}\n              />\n            )\n          case 'ExpandedLink':\n            return <ExpandedLink key={attachment.id} attachment={attachment} />\n          default:\n            return null\n        }\n      })}\n    </View>\n  )\n}\n\nfunction MessageAttachment({ attachment }: { attachment: any }) {\n  const { attributes } = attachment\n  const contentType = attributes?.contentType\n  const basicType = contentType ? contentType.split('/')[0] : ''\n  switch (basicType) {\n    case 'image':\n      return <ImageAttachment attachment={attachment} />\n    case 'video':\n      return <VideoAttachment attachment={attachment} />\n    case 'audio':\n      return <AudioAttachment attachment={attachment} />\n    default:\n      return <GenericFileAttachment attachment={attachment} />\n  }\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    attachmentsContainer: {\n      gap: 4,\n      padding: 2,\n    },\n  })\n}\n"]}
+{"version":3,"file":"message_attachments.js","sourceRoot":"","sources":["../../../src/components/conversation/message_attachments.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAA;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAkB,MAAM,gCAAgC,CAAA;AAEhF,MAAM,UAAU,kBAAkB,CAAC,KAGlC;IACC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IACxC,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IACzD,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CACvC;MAAA,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC5B,QAAQ,UAAU,CAAC,IAAI,EAAE,CAAC;gBACxB,KAAK,mBAAmB;oBACtB,OAAO,CACL,CAAC,iBAAiB,CAChB,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,CACnB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,SAAS,CAAC,CAAC,SAAS,CAAC,EACrB,CACH,CAAA;gBACH,KAAK,OAAO;oBACV,OAAO,CACL,CAAC,eAAe,CACd,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,UAAU,CAAC,SAAS,CAAC,CAC3C,UAAU,CAAC,CAAC,UAAU,CAAC,EACvB,CACH,CAAA;gBACH,KAAK,cAAc;oBACjB,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;gBACrE;oBACE,OAAO,IAAI,CAAA;YACf,CAAC;QACH,CAAC,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,SAAS,iBAAiB,CAAC,EAAE,UAAU,EAAE,SAAS,EAA6C;IAC7F,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IACjC,MAAM,WAAW,GAAG,UAAU,EAAE,WAAW,CAAA;IAC3C,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9D,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,OAAO;YACV,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,EAAG,CAAA;QAC1E,KAAK,OAAO;YACV,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;QACpD,KAAK,OAAO;YACV,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;QACpD;YACE,OAAO,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;IAC5D,CAAC;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,oBAAoB,EAAE;YACpB,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,CAAC;SACX;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport { AudioAttachment } from './attachments/audio_attachment'\nimport { VideoAttachment } from './attachments/video_attachment'\nimport { GiphyAttachment } from './attachments/giphy_attachment'\nimport { GenericFileAttachment } from './attachments/generic_file_attachment'\nimport { ExpandedLink } from './attachments/expanded_link'\nimport { ImageAttachment, type MetaProps } from './attachments/image_attachment'\n\nexport function MessageAttachments(props: {\n  attachments: DenormalizedAttachmentResource[]\n  metaProps: MetaProps\n}) {\n  const styles = useStyles()\n  const { attachments, metaProps } = props\n  if (!attachments || attachments.length === 0) return null\n  return (\n    <View style={styles.attachmentsContainer}>\n      {attachments.map(attachment => {\n        switch (attachment.type) {\n          case 'MessageAttachment':\n            return (\n              <MessageAttachment\n                key={attachment.id}\n                attachment={attachment}\n                metaProps={metaProps}\n              />\n            )\n          case 'giphy':\n            return (\n              <GiphyAttachment\n                key={attachment.id || attachment.titleLink}\n                attachment={attachment}\n              />\n            )\n          case 'ExpandedLink':\n            return <ExpandedLink key={attachment.id} attachment={attachment} />\n          default:\n            return null\n        }\n      })}\n    </View>\n  )\n}\n\nfunction MessageAttachment({ attachment, metaProps }: { attachment: any; metaProps: MetaProps }) {\n  const { attributes } = attachment\n  const contentType = attributes?.contentType\n  const basicType = contentType ? contentType.split('/')[0] : ''\n  switch (basicType) {\n    case 'image':\n      return <ImageAttachment attachment={attachment} metaProps={metaProps} />\n    case 'video':\n      return <VideoAttachment attachment={attachment} />\n    case 'audio':\n      return <AudioAttachment attachment={attachment} />\n    default:\n      return <GenericFileAttachment attachment={attachment} />\n  }\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    attachmentsContainer: {\n      gap: 4,\n      padding: 2,\n    },\n  })\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"message_form.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAC3E,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAA;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAYlD,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAA;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,YAAY,EAAE,oBAAoB,CAAA;CACnC;AAqBD,iBAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,qBAkGzE;AAiCD,iBAAS,gBAAgB,sBA4BxB;AAED,iBAAS,oBAAoB,sBAe5B;AAED,iBAAS,2BAA2B,6BA8EnC;AAED,iBAAS,mBAAmB,6BA4B3B"}
+{"version":3,"file":"message_form.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAC3E,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAA;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAYlD,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAA;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,YAAY,EAAE,oBAAoB,CAAA;CACnC;AAwBD,iBAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,qBAkGzE;AAiCD,iBAAS,gBAAgB,sBAgCxB;AAED,iBAAS,oBAAoB,sBAe5B;AAED,iBAAS,2BAA2B,6BA8EnC;AAED,iBAAS,mBAAmB,6BA6B3B"}

package/build/components/conversation/message_form.js

@@ -24,6 +24,8 @@ const MessageFormContext = React.createContext({
     usingGiphy: false,
     setUsingGiphy: (_usingGiphy) => { },
 });
+const GIPHY_MAX_LENGTH = 50;
+const MAX_MESSAGE_LENGTH = 5000;
 function MessageFormRoot({ conversation, children }) {
     const { giphyApiKey } = useContext(ChatContext);
     const canGiphy = !!giphyApiKey;
@@ -132,12 +134,14 @@ function MessageFormInput() {
     const attachmentError = attachmentUploader?.errorMessage;
     return (<View style={styles.textInputBoundary}>
       <MessageFormAttachments />
-      <View style={styles.textInput}>
+      <View style={styles.textInputRow}>
         {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 style={styles.textInput}>
+          <TextInput multiline={true} aria-disabled={true} placeholder="Send a message" onChangeText={setText} value={text} maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH} onSubmitEditing={onSubmit}/>
+        </View>
       </View>
 
       {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}
@@ -200,14 +204,14 @@ function MessageFormAttachmentPicker() {
     </View>);
 }
 function MessageFormCommands() {
-    const { canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext);
+    const { text, 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="Search Giphy" size="md" appearance="neutral" name={'general.bolt'} onPress={() => setUsingGiphy(true)}/>);
+    return (<IconButton accessibilityLabel="Search Giphy" size="md" appearance="neutral" name={'general.bolt'} onPress={() => setUsingGiphy(true)} disabled={text.length > GIPHY_MAX_LENGTH}/>);
 }
 const useMessageFormStyles = () => {
     const theme = useTheme();
@@ -231,10 +235,14 @@ const useMessageFormStyles = () => {
             flex: 1,
             gap: 12,
         },
-        textInput: {
+        textInputRow: {
             flexDirection: 'row',
+            alignItems: 'center',
             gap: 12,
         },
+        textInput: {
+            flex: 1,
+        },
         giphyBadge: {
             backgroundColor: theme.colors.fillColorNeutral050Base,
             borderRadius: 24,

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

@@ -1 +1 @@
-{"version":3,"file":"message_form.js","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useContext, useEffect, useState } from 'react'\nimport { StyleSheet, TextInput, View, ViewProps } from 'react-native'\nimport { IconButton, Text } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { ConversationResource } from '../../types'\nimport { useMessageCreate } from '../../hooks/use_message_create'\nimport { ConversationScreenProps } from '../../screens/conversation_screen'\nimport { ChatContext } from '../../contexts/chat_context'\nimport { ImagePicker, ImagePickerResult } from '../../utils/native_adapters'\nimport { useAttachmentUploader } from '../../hooks/use_attachment_uploader'\nimport {\n  DenormalizedAttachmentResourceForCreate,\n  DenormalizedMessageAttachmentResourceForCreate,\n} from '../../types/resources/denormalized_attachment_resource'\nimport { MessageFormAttachmentImage } from './message_form/message_form_attachment_image'\n\nexport const MessageForm = {\n  Root: MessageFormRoot,\n  TextInput: MessageFormInput,\n  SubmitButton: MessageFormSubmitBtn,\n  AttachmentPicker: MessageFormAttachmentPicker,\n  Commands: MessageFormCommands,\n}\n\ninterface MessagesFormRootProps extends ViewProps {\n  conversation: ConversationResource\n}\n\nconst MessageFormContext = React.createContext<{\n  text: string\n  setText: (text: string) => void\n  onSubmit: () => void\n  disabled: boolean\n  canGiphy: boolean\n  usingGiphy: boolean\n  setUsingGiphy: (usingGiphy: boolean) => void\n  attachmentUploader?: ReturnType<typeof useAttachmentUploader>\n}>({\n  text: '',\n  setText: (_text: string) => {},\n  onSubmit: () => {},\n  disabled: false,\n  canGiphy: false,\n  usingGiphy: false,\n  setUsingGiphy: (_usingGiphy: boolean) => {},\n})\n\nfunction MessageFormRoot({ conversation, children }: MessagesFormRootProps) {\n  const { giphyApiKey } = useContext(ChatContext)\n  const canGiphy = !!giphyApiKey\n  const styles = useMessageFormStyles()\n  const [text, setText] = React.useState('')\n  const [usingGiphy, setUsingGiphy] = useState(false)\n  const navigation = useNavigation()\n  const route = useRoute() as ConversationScreenProps['route']\n  const {\n    status,\n    isPending,\n    reset: resetMutation,\n    mutate,\n  } = useMessageCreate({\n    conversationId: conversation.id,\n  })\n  const attachmentUploader = useAttachmentUploader({\n    conversationId: conversation.id,\n  })\n  const resetAttachmentUploader = attachmentUploader.reset\n\n  const reset = useCallback(() => {\n    resetAttachmentUploader()\n    resetMutation()\n    setText('')\n    setUsingGiphy(false)\n  }, [resetAttachmentUploader, resetMutation])\n\n  useEffect(() => {\n    if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {\n      setUsingGiphy(true)\n      setText('')\n    }\n  }, [canGiphy, text, usingGiphy])\n\n  useEffect(() => {\n    switch (status) {\n      case 'success':\n        reset()\n        break\n    }\n  }, [reset, status])\n\n  useEffect(() => {\n    if (route.params.clear_input) {\n      reset()\n      navigation.setParams({ ...route.params, clear_input: false })\n    }\n  }, [reset, navigation, route.params])\n\n  const canSubmit = (() => {\n    if (isPending) return false\n    if (attachmentUploader?.pendingUploads) return false\n    if (text.length > 0) return true\n    if (attachmentUploader?.attachments?.length) return true\n    return false\n  })()\n  const disabled = !canSubmit\n\n  const handleSubmit = () => {\n    if (!canSubmit) return\n\n    if (canGiphy && usingGiphy) {\n      TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())\n      navigation.navigate('SendGiphy', {\n        conversation_id: conversation.id,\n        search_term: text,\n      })\n    } else {\n      let attachmentsForSubmit: DenormalizedAttachmentResourceForCreate[] = []\n      if (attachmentUploader?.attachmentIds) {\n        attachmentsForSubmit = attachmentUploader.attachmentIds.map(\n          (id: string): DenormalizedMessageAttachmentResourceForCreate => ({\n            type: 'MessageAttachment',\n            id,\n          })\n        )\n      }\n      mutate({ text, attachments: attachmentsForSubmit })\n    }\n  }\n\n  return (\n    <MessageFormContext.Provider\n      value={{\n        text,\n        setText,\n        onSubmit: handleSubmit,\n        disabled,\n        canGiphy,\n        usingGiphy,\n        setUsingGiphy,\n        attachmentUploader,\n      }}\n    >\n      <View style={styles.textInputContainer}>{children}</View>\n    </MessageFormContext.Provider>\n  )\n}\n\nfunction MessageFormAttachments() {\n  const styles = useMessageFormStyles()\n  const { attachmentUploader } = React.useContext(MessageFormContext)\n  const numberOfAttachments = attachmentUploader?.attachments?.length || 0\n  const attachments = attachmentUploader?.attachments || []\n\n  if (numberOfAttachments === 0) {\n    return null\n  }\n\n  return (\n    <View style={styles.messageFormAttachments}>\n      {attachments.map(attachment => {\n        return (\n          <MessageFormAttachmentImage\n            key={attachment.file.uri}\n            uri={attachment.file.uri}\n            alt={attachment.file.name}\n            status={attachment.status}\n            width={attachment.file.width}\n            height={attachment.file.height}\n            removeAttachment={() => {\n              attachmentUploader?.removeAttachment(attachment)\n            }}\n          />\n        )\n      })}\n    </View>\n  )\n}\n\nfunction MessageFormInput() {\n  const styles = useMessageFormStyles()\n  const { text, setText, onSubmit, usingGiphy, attachmentUploader } =\n    React.useContext(MessageFormContext)\n  const attachmentError = attachmentUploader?.errorMessage\n\n  return (\n    <View style={styles.textInputBoundary}>\n      <MessageFormAttachments />\n      <View style={styles.textInput}>\n        {usingGiphy ? (\n          <View style={styles.giphyBadge}>\n            <Text>/Giphy</Text>\n          </View>\n        ) : null}\n\n        <TextInput\n          aria-disabled={true}\n          placeholder=\"Send a message\"\n          onChangeText={setText}\n          value={text}\n          onSubmitEditing={onSubmit}\n        />\n      </View>\n\n      {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}\n    </View>\n  )\n}\n\nfunction MessageFormSubmitBtn() {\n  const styles = useMessageFormStyles()\n  const { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext)\n\n  return (\n    <IconButton\n      disabled={disabled}\n      accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'}\n      size=\"md\"\n      appearance=\"neutral\"\n      style={styles.textInputSend}\n      name={usingGiphy ? 'general.search' : 'general.upArrow'}\n      onPress={onSubmit}\n    />\n  )\n}\n\nfunction MessageFormAttachmentPicker() {\n  const styles = useMessageFormStyles()\n  const { usingGiphy, attachmentUploader } = React.useContext(MessageFormContext)\n  const [isOpen, setIsOpen] = useState(false)\n\n  function uploadImagePickerResult(result: ImagePickerResult) {\n    if (result.canceled) {\n      return\n    }\n\n    const filteredAssets = result.assets\n      .filter(asset => {\n        return asset.fileSize && asset.fileName && asset.mimeType\n      })\n      .map(asset => {\n        return {\n          uri: asset.uri,\n          name: asset.fileName as string,\n          type: asset.mimeType as string,\n          size: asset.fileSize as number,\n          height: asset.height,\n          width: asset.width,\n        }\n      })\n\n    attachmentUploader?.handleFilesAttached(filteredAssets)\n  }\n\n  const openCamera = async () => {\n    setIsOpen(false)\n    let result = await ImagePicker.openCameraAsync()\n    if (!result.canceled) {\n      uploadImagePickerResult(result)\n    }\n  }\n\n  const pickImage = async () => {\n    setIsOpen(false)\n    let result = await ImagePicker.openImageLibraryAsync()\n    if (!result.canceled) {\n      uploadImagePickerResult(result)\n    }\n  }\n\n  if (usingGiphy) {\n    return null\n  }\n\n  return (\n    // TODO: Design Pass\n    <View style={styles.attachmentPicker}>\n      {isOpen && (\n        <View style={styles.attachmentPickerButtons}>\n          <IconButton\n            accessibilityLabel=\"Take a photo\"\n            size=\"md\"\n            appearance=\"neutral\"\n            name={'general.videoCamera'}\n            onPress={openCamera}\n          />\n          <IconButton\n            accessibilityLabel=\"Choose a photo\"\n            size=\"md\"\n            appearance=\"neutral\"\n            name={'churchCenter.photosIos'}\n            onPress={pickImage}\n          />\n        </View>\n      )}\n      <IconButton\n        accessibilityLabel=\"File Menu\"\n        size=\"md\"\n        appearance=\"neutral\"\n        name={'general.outlinedPlusCircle'}\n        onPress={() => setIsOpen(!isOpen)}\n      />\n    </View>\n  )\n}\n\nfunction MessageFormCommands() {\n  const { canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)\n\n  if (!canGiphy) {\n    return null\n  }\n\n  if (usingGiphy) {\n    return (\n      <IconButton\n        accessibilityLabel=\"Exit Giphy Search\"\n        size=\"md\"\n        appearance=\"neutral\"\n        name={'general.x'}\n        onPress={() => setUsingGiphy(false)}\n      />\n    )\n  }\n\n  return (\n    <IconButton\n      accessibilityLabel=\"Search Giphy\"\n      size=\"md\"\n      appearance=\"neutral\"\n      name={'general.bolt'}\n      onPress={() => setUsingGiphy(true)}\n    />\n  )\n}\n\nconst useMessageFormStyles = () => {\n  const theme = useTheme()\n  const navigationTheme = useNavigationTheme()\n\n  return StyleSheet.create({\n    textInputContainer: {\n      borderColor: theme.colors.fillColorNeutral050Base,\n      borderTopWidth: 1,\n      padding: 12,\n      backgroundColor: navigationTheme.colors.card,\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n    },\n    textInputBoundary: {\n      borderRadius: 24,\n      borderWidth: 1,\n      padding: 12,\n      paddingHorizontal: 20,\n      borderColor: theme.colors.fillColorNeutral050Base,\n      flex: 1,\n      gap: 12,\n    },\n    textInput: {\n      flexDirection: 'row',\n      gap: 12,\n    },\n    giphyBadge: {\n      backgroundColor: theme.colors.fillColorNeutral050Base,\n      borderRadius: 24,\n      padding: 8,\n      paddingHorizontal: 12,\n    },\n    textInputSend: {\n      borderRadius: 24,\n      height: 36,\n      width: 36,\n    },\n    attachmentPicker: {\n      position: 'relative',\n    },\n    attachmentPickerButtons: {\n      position: 'absolute',\n      left: 0,\n      bottom: 40,\n      zIndex: 10,\n      gap: 16,\n    },\n    messageFormAttachments: {\n      flexDirection: 'row',\n      gap: 8,\n    },\n    inputErrorMessage: {\n      color: theme.colors.statusErrorText,\n      fontSize: 14,\n    },\n  })\n}\n"]}
+{"version":3,"file":"message_form.js","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useContext, useEffect, useState } from 'react'\nimport { StyleSheet, TextInput, View, ViewProps } from 'react-native'\nimport { IconButton, Text } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { ConversationResource } from '../../types'\nimport { useMessageCreate } from '../../hooks/use_message_create'\nimport { ConversationScreenProps } from '../../screens/conversation_screen'\nimport { ChatContext } from '../../contexts/chat_context'\nimport { ImagePicker, ImagePickerResult } from '../../utils/native_adapters'\nimport { useAttachmentUploader } from '../../hooks/use_attachment_uploader'\nimport {\n  DenormalizedAttachmentResourceForCreate,\n  DenormalizedMessageAttachmentResourceForCreate,\n} from '../../types/resources/denormalized_attachment_resource'\nimport { MessageFormAttachmentImage } from './message_form/message_form_attachment_image'\n\nexport const MessageForm = {\n  Root: MessageFormRoot,\n  TextInput: MessageFormInput,\n  SubmitButton: MessageFormSubmitBtn,\n  AttachmentPicker: MessageFormAttachmentPicker,\n  Commands: MessageFormCommands,\n}\n\ninterface MessagesFormRootProps extends ViewProps {\n  conversation: ConversationResource\n}\n\nconst MessageFormContext = React.createContext<{\n  text: string\n  setText: (text: string) => void\n  onSubmit: () => void\n  disabled: boolean\n  canGiphy: boolean\n  usingGiphy: boolean\n  setUsingGiphy: (usingGiphy: boolean) => void\n  attachmentUploader?: ReturnType<typeof useAttachmentUploader>\n}>({\n  text: '',\n  setText: (_text: string) => {},\n  onSubmit: () => {},\n  disabled: false,\n  canGiphy: false,\n  usingGiphy: false,\n  setUsingGiphy: (_usingGiphy: boolean) => {},\n})\n\nconst GIPHY_MAX_LENGTH = 50\nconst MAX_MESSAGE_LENGTH = 5000\n\nfunction MessageFormRoot({ conversation, children }: MessagesFormRootProps) {\n  const { giphyApiKey } = useContext(ChatContext)\n  const canGiphy = !!giphyApiKey\n  const styles = useMessageFormStyles()\n  const [text, setText] = React.useState('')\n  const [usingGiphy, setUsingGiphy] = useState(false)\n  const navigation = useNavigation()\n  const route = useRoute() as ConversationScreenProps['route']\n  const {\n    status,\n    isPending,\n    reset: resetMutation,\n    mutate,\n  } = useMessageCreate({\n    conversationId: conversation.id,\n  })\n  const attachmentUploader = useAttachmentUploader({\n    conversationId: conversation.id,\n  })\n  const resetAttachmentUploader = attachmentUploader.reset\n\n  const reset = useCallback(() => {\n    resetAttachmentUploader()\n    resetMutation()\n    setText('')\n    setUsingGiphy(false)\n  }, [resetAttachmentUploader, resetMutation])\n\n  useEffect(() => {\n    if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {\n      setUsingGiphy(true)\n      setText('')\n    }\n  }, [canGiphy, text, usingGiphy])\n\n  useEffect(() => {\n    switch (status) {\n      case 'success':\n        reset()\n        break\n    }\n  }, [reset, status])\n\n  useEffect(() => {\n    if (route.params.clear_input) {\n      reset()\n      navigation.setParams({ ...route.params, clear_input: false })\n    }\n  }, [reset, navigation, route.params])\n\n  const canSubmit = (() => {\n    if (isPending) return false\n    if (attachmentUploader?.pendingUploads) return false\n    if (text.length > 0) return true\n    if (attachmentUploader?.attachments?.length) return true\n    return false\n  })()\n  const disabled = !canSubmit\n\n  const handleSubmit = () => {\n    if (!canSubmit) return\n\n    if (canGiphy && usingGiphy) {\n      TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())\n      navigation.navigate('SendGiphy', {\n        conversation_id: conversation.id,\n        search_term: text,\n      })\n    } else {\n      let attachmentsForSubmit: DenormalizedAttachmentResourceForCreate[] = []\n      if (attachmentUploader?.attachmentIds) {\n        attachmentsForSubmit = attachmentUploader.attachmentIds.map(\n          (id: string): DenormalizedMessageAttachmentResourceForCreate => ({\n            type: 'MessageAttachment',\n            id,\n          })\n        )\n      }\n      mutate({ text, attachments: attachmentsForSubmit })\n    }\n  }\n\n  return (\n    <MessageFormContext.Provider\n      value={{\n        text,\n        setText,\n        onSubmit: handleSubmit,\n        disabled,\n        canGiphy,\n        usingGiphy,\n        setUsingGiphy,\n        attachmentUploader,\n      }}\n    >\n      <View style={styles.textInputContainer}>{children}</View>\n    </MessageFormContext.Provider>\n  )\n}\n\nfunction MessageFormAttachments() {\n  const styles = useMessageFormStyles()\n  const { attachmentUploader } = React.useContext(MessageFormContext)\n  const numberOfAttachments = attachmentUploader?.attachments?.length || 0\n  const attachments = attachmentUploader?.attachments || []\n\n  if (numberOfAttachments === 0) {\n    return null\n  }\n\n  return (\n    <View style={styles.messageFormAttachments}>\n      {attachments.map(attachment => {\n        return (\n          <MessageFormAttachmentImage\n            key={attachment.file.uri}\n            uri={attachment.file.uri}\n            alt={attachment.file.name}\n            status={attachment.status}\n            width={attachment.file.width}\n            height={attachment.file.height}\n            removeAttachment={() => {\n              attachmentUploader?.removeAttachment(attachment)\n            }}\n          />\n        )\n      })}\n    </View>\n  )\n}\n\nfunction MessageFormInput() {\n  const styles = useMessageFormStyles()\n  const { text, setText, onSubmit, usingGiphy, attachmentUploader } =\n    React.useContext(MessageFormContext)\n  const attachmentError = attachmentUploader?.errorMessage\n\n  return (\n    <View style={styles.textInputBoundary}>\n      <MessageFormAttachments />\n      <View style={styles.textInputRow}>\n        {usingGiphy ? (\n          <View style={styles.giphyBadge}>\n            <Text>/Giphy</Text>\n          </View>\n        ) : null}\n\n        <View style={styles.textInput}>\n          <TextInput\n            multiline={true}\n            aria-disabled={true}\n            placeholder=\"Send a message\"\n            onChangeText={setText}\n            value={text}\n            maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}\n            onSubmitEditing={onSubmit}\n          />\n        </View>\n      </View>\n\n      {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}\n    </View>\n  )\n}\n\nfunction MessageFormSubmitBtn() {\n  const styles = useMessageFormStyles()\n  const { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext)\n\n  return (\n    <IconButton\n      disabled={disabled}\n      accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'}\n      size=\"md\"\n      appearance=\"neutral\"\n      style={styles.textInputSend}\n      name={usingGiphy ? 'general.search' : 'general.upArrow'}\n      onPress={onSubmit}\n    />\n  )\n}\n\nfunction MessageFormAttachmentPicker() {\n  const styles = useMessageFormStyles()\n  const { usingGiphy, attachmentUploader } = React.useContext(MessageFormContext)\n  const [isOpen, setIsOpen] = useState(false)\n\n  function uploadImagePickerResult(result: ImagePickerResult) {\n    if (result.canceled) {\n      return\n    }\n\n    const filteredAssets = result.assets\n      .filter(asset => {\n        return asset.fileSize && asset.fileName && asset.mimeType\n      })\n      .map(asset => {\n        return {\n          uri: asset.uri,\n          name: asset.fileName as string,\n          type: asset.mimeType as string,\n          size: asset.fileSize as number,\n          height: asset.height,\n          width: asset.width,\n        }\n      })\n\n    attachmentUploader?.handleFilesAttached(filteredAssets)\n  }\n\n  const openCamera = async () => {\n    setIsOpen(false)\n    let result = await ImagePicker.openCameraAsync()\n    if (!result.canceled) {\n      uploadImagePickerResult(result)\n    }\n  }\n\n  const pickImage = async () => {\n    setIsOpen(false)\n    let result = await ImagePicker.openImageLibraryAsync()\n    if (!result.canceled) {\n      uploadImagePickerResult(result)\n    }\n  }\n\n  if (usingGiphy) {\n    return null\n  }\n\n  return (\n    // TODO: Design Pass\n    <View style={styles.attachmentPicker}>\n      {isOpen && (\n        <View style={styles.attachmentPickerButtons}>\n          <IconButton\n            accessibilityLabel=\"Take a photo\"\n            size=\"md\"\n            appearance=\"neutral\"\n            name={'general.videoCamera'}\n            onPress={openCamera}\n          />\n          <IconButton\n            accessibilityLabel=\"Choose a photo\"\n            size=\"md\"\n            appearance=\"neutral\"\n            name={'churchCenter.photosIos'}\n            onPress={pickImage}\n          />\n        </View>\n      )}\n      <IconButton\n        accessibilityLabel=\"File Menu\"\n        size=\"md\"\n        appearance=\"neutral\"\n        name={'general.outlinedPlusCircle'}\n        onPress={() => setIsOpen(!isOpen)}\n      />\n    </View>\n  )\n}\n\nfunction MessageFormCommands() {\n  const { text, canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)\n\n  if (!canGiphy) {\n    return null\n  }\n\n  if (usingGiphy) {\n    return (\n      <IconButton\n        accessibilityLabel=\"Exit Giphy Search\"\n        size=\"md\"\n        appearance=\"neutral\"\n        name={'general.x'}\n        onPress={() => setUsingGiphy(false)}\n      />\n    )\n  }\n\n  return (\n    <IconButton\n      accessibilityLabel=\"Search Giphy\"\n      size=\"md\"\n      appearance=\"neutral\"\n      name={'general.bolt'}\n      onPress={() => setUsingGiphy(true)}\n      disabled={text.length > GIPHY_MAX_LENGTH}\n    />\n  )\n}\n\nconst useMessageFormStyles = () => {\n  const theme = useTheme()\n  const navigationTheme = useNavigationTheme()\n\n  return StyleSheet.create({\n    textInputContainer: {\n      borderColor: theme.colors.fillColorNeutral050Base,\n      borderTopWidth: 1,\n      padding: 12,\n      backgroundColor: navigationTheme.colors.card,\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n    },\n    textInputBoundary: {\n      borderRadius: 24,\n      borderWidth: 1,\n      padding: 12,\n      paddingHorizontal: 20,\n      borderColor: theme.colors.fillColorNeutral050Base,\n      flex: 1,\n      gap: 12,\n    },\n    textInputRow: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n    },\n    textInput: {\n      flex: 1,\n    },\n    giphyBadge: {\n      backgroundColor: theme.colors.fillColorNeutral050Base,\n      borderRadius: 24,\n      padding: 8,\n      paddingHorizontal: 12,\n    },\n    textInputSend: {\n      borderRadius: 24,\n      height: 36,\n      width: 36,\n    },\n    attachmentPicker: {\n      position: 'relative',\n    },\n    attachmentPickerButtons: {\n      position: 'absolute',\n      left: 0,\n      bottom: 40,\n      zIndex: 10,\n      gap: 16,\n    },\n    messageFormAttachments: {\n      flexDirection: 'row',\n      gap: 8,\n    },\n    inputErrorMessage: {\n      color: theme.colors.statusErrorText,\n      fontSize: 14,\n    },\n  })\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.4.1-rc.0",
+  "version": "3.4.1-rc.2",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -54,5 +54,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "e70b0efaccfa2ff290bc072deb9bb928b98ae49a"
+  "gitHead": "a9ddceace400b15a185d59d7466cef5b81582002"
 }

package/src/components/conversation/attachments/image_attachment.tsx

@@ -1,24 +1,181 @@
-import React from 'react'
-import { View, Image, StyleSheet } from 'react-native'
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+  Image,
+  StyleSheet,
+  Modal,
+  Pressable,
+  useWindowDimensions,
+  SafeAreaView,
+  View,
+  Linking,
+  ImageStyle,
+} from 'react-native'
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+  type PanGesture,
+} from 'react-native-gesture-handler'
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  type AnimatedStyle,
+} from 'react-native-reanimated'
+import { tokens } from '../../../vendor/tapestry/tokens'
+import { IconButton, Heading, Text } from '../../display'
+import colorFunction from 'color'
+import { formatDatePreview } from '../../../utils/date'
 
-export function ImageAttachment({ attachment }: { attachment: any }) {
+const PAN_THRESHOLD_PX = 300
+
+export type MetaProps = {
+  authorName: string
+  createdAt: string
+}
+
+export function ImageAttachment({
+  attachment,
+  metaProps,
+}: {
+  attachment: any
+  metaProps: MetaProps
+}) {
   const styles = useStyles()
+  const [visible, setVisible] = useState(false)
+
+  // shared values run on the native UI thread and prevents clogging up the JS thread
+  const dismissY = useSharedValue(0)
+  const opacity = useSharedValue(1)
+
+  const resetAnimations = useCallback(() => {
+    dismissY.value = withTiming(0)
+    opacity.value = withTiming(1)
+  }, [dismissY, opacity])
+
+  const handleCloseModal = useCallback(() => {
+    setVisible(false)
+    resetAnimations()
+  }, [setVisible, resetAnimations])
+
+  const panGesture = Gesture.Pan()
+    .onUpdate(e => {
+      dismissY.value = e.translationY
+      opacity.value = 1 - Math.abs(e.translationY) / PAN_THRESHOLD_PX
+    })
+    .onEnd(() => {
+      runOnJS(handleCloseModal)() // Ensures we can call a JS function
+    })
+
+  const animatedImageStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: dismissY.value }],
+    opacity: opacity.value,
+  }))
+
   const { attributes } = attachment
   const { url, urlMedium, filename, metadata = {} } = attributes
   const width = metadata.width || 100
   const height = metadata.height || 100
+
   return (
-    <View style={styles.container}>
-      <Image
-        source={{ uri: urlMedium || url }}
-        style={[styles.image, { aspectRatio: width / height }]}
-        accessibilityLabel={filename}
+    <>
+      <Pressable style={styles.container} onPress={() => setVisible(true)}>
+        <Image
+          source={{ uri: urlMedium || url }}
+          style={[styles.image, { aspectRatio: width / height }]}
+          accessibilityLabel={filename}
+        />
+      </Pressable>
+      <LightboxModal
+        visible={visible}
+        handleCloseModal={handleCloseModal}
+        uri={urlMedium || url}
+        metaProps={metaProps}
+        panGesture={panGesture}
+        animatedImageStyle={animatedImageStyle}
       />
-    </View>
+    </>
+  )
+}
+
+interface LightboxModalProps {
+  visible: boolean
+  handleCloseModal: () => void
+  uri: string
+  metaProps: MetaProps
+  panGesture: PanGesture
+  animatedImageStyle: AnimatedStyle<ImageStyle>
+}
+
+const LightboxModal = ({
+  uri,
+  visible,
+  handleCloseModal,
+  metaProps,
+  panGesture,
+  animatedImageStyle,
+}: LightboxModalProps) => {
+  const styles = useStyles()
+
+  const { authorName, createdAt } = metaProps
+
+  const handleOpenInBrowser = () => {
+    Linking.openURL(uri)
+  }
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={handleCloseModal}>
+      <SafeAreaView style={styles.modal}>
+        <GestureHandlerRootView>
+          <GestureDetector gesture={panGesture}>
+            <Animated.Image
+              source={{ uri }}
+              style={[styles.lightboxImage, animatedImageStyle]}
+              resizeMode="contain"
+            />
+          </GestureDetector>
+          <View style={styles.actionToolbar} accessibilityRole="toolbar">
+            <View style={styles.actionToolbarTextMeta}>
+              <Heading variant="h3" style={styles.actionToolbarTitle} numberOfLines={1}>
+                {authorName}
+              </Heading>
+              <Text variant="tertiary" style={styles.actionToolbarSubtitle}>
+                {formatDatePreview(createdAt)}
+              </Text>
+            </View>
+            <IconButton
+              onPress={handleOpenInBrowser}
+              name="general.newWindow"
+              accessibilityRole="link"
+              accessibilityLabel="Open image in browser"
+              accessibilityHint="Image can be downloaded and shared through the browser."
+              style={styles.actionButton}
+              iconStyle={styles.actionButtonIcon}
+              size="lg"
+            />
+            <IconButton
+              onPress={handleCloseModal}
+              name="general.x"
+              accessibilityLabel="Close image"
+              style={styles.actionButton}
+              iconStyle={styles.actionButtonIcon}
+            />
+          </View>
+        </GestureHandlerRootView>
+      </SafeAreaView>
+    </Modal>
   )
 }
 
 const useStyles = () => {
+  const { width: windowWidth } = useWindowDimensions()
+  const backgroundColor = tokens.colorNeutral7
+  const transparentBackgroundColor = useMemo(
+    () => colorFunction(backgroundColor).alpha(0.8).toString(),
+    [backgroundColor]
+  )
+
   return StyleSheet.create({
     container: {
       maxWidth: '100%',
@@ -27,5 +184,49 @@ const useStyles = () => {
       borderRadius: 8,
       minWidth: 200,
     },
+    modal: {
+      flex: 1,
+      backgroundColor,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    lightboxImage: {
+      width: windowWidth,
+      height: '100%',
+    },
+    actionToolbar: {
+      width: '100%',
+      position: 'absolute',
+      top: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 20,
+      paddingHorizontal: 16,
+      paddingTop: 16,
+      paddingBottom: 8,
+      backgroundColor: transparentBackgroundColor,
+    },
+    actionToolbarTextMeta: {
+      flex: 1,
+    },
+    actionToolbarTitle: {
+      marginRight: 'auto',
+      flexShrink: 1,
+      color: tokens.colorNeutral88,
+    },
+    actionToolbarSubtitle: {
+      color: tokens.colorNeutral68,
+    },
+    actionButton: {
+      backgroundColor,
+      height: 40,
+      width: 40,
+      borderRadius: 50,
+      borderWidth: 1,
+      borderColor: tokens.colorNeutral24,
+    },
+    actionButtonIcon: {
+      color: tokens.colorNeutral88,
+    },
   })
 }

package/src/components/conversation/message.tsx

@@ -33,6 +33,11 @@ export function Message(props: MessageResource & { conversation_id: number }) {
     })
   }
 
+  const metaProps = {
+    authorName: props.author.name,
+    createdAt: props.createdAt,
+  }
+
   return (
     <View style={styles.message}>
       {!props.mine && (
@@ -44,7 +49,7 @@ export function Message(props: MessageResource & { conversation_id: number }) {
         {!props.mine && <Text variant="tertiary">{props.author.name}</Text>}
         <PlatformPressable style={styles.messageBubble} onLongPress={handleMessagePress}>
           <ErrorBoundary>
-            <MessageAttachments attachments={props.attachments} />
+            <MessageAttachments attachments={props.attachments} metaProps={metaProps} />
           </ErrorBoundary>
           {text && (
             <View style={styles.messageText}>

package/src/components/conversation/message_attachments.tsx

@@ -6,18 +6,27 @@ import { VideoAttachment } from './attachments/video_attachment'
 import { GiphyAttachment } from './attachments/giphy_attachment'
 import { GenericFileAttachment } from './attachments/generic_file_attachment'
 import { ExpandedLink } from './attachments/expanded_link'
-import { ImageAttachment } from './attachments/image_attachment'
+import { ImageAttachment, type MetaProps } from './attachments/image_attachment'
 
-export function MessageAttachments(props: { attachments: DenormalizedAttachmentResource[] }) {
+export function MessageAttachments(props: {
+  attachments: DenormalizedAttachmentResource[]
+  metaProps: MetaProps
+}) {
   const styles = useStyles()
-  const { attachments } = props
+  const { attachments, metaProps } = props
   if (!attachments || attachments.length === 0) return null
   return (
     <View style={styles.attachmentsContainer}>
       {attachments.map(attachment => {
         switch (attachment.type) {
           case 'MessageAttachment':
-            return <MessageAttachment key={attachment.id} attachment={attachment} />
+            return (
+              <MessageAttachment
+                key={attachment.id}
+                attachment={attachment}
+                metaProps={metaProps}
+              />
+            )
           case 'giphy':
             return (
               <GiphyAttachment
@@ -35,13 +44,13 @@ export function MessageAttachments(props: { attachments: DenormalizedAttachmentR
   )
 }
 
-function MessageAttachment({ attachment }: { attachment: any }) {
+function MessageAttachment({ attachment, metaProps }: { attachment: any; metaProps: MetaProps }) {
   const { attributes } = attachment
   const contentType = attributes?.contentType
   const basicType = contentType ? contentType.split('/')[0] : ''
   switch (basicType) {
     case 'image':
-      return <ImageAttachment attachment={attachment} />
+      return <ImageAttachment attachment={attachment} metaProps={metaProps} />
     case 'video':
       return <VideoAttachment attachment={attachment} />
     case 'audio':

package/src/components/conversation/message_form.tsx

@@ -46,6 +46,9 @@ const MessageFormContext = React.createContext<{
   setUsingGiphy: (_usingGiphy: boolean) => {},
 })
 
+const GIPHY_MAX_LENGTH = 50
+const MAX_MESSAGE_LENGTH = 5000
+
 function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
   const { giphyApiKey } = useContext(ChatContext)
   const canGiphy = !!giphyApiKey
@@ -186,20 +189,24 @@ function MessageFormInput() {
   return (
     <View style={styles.textInputBoundary}>
       <MessageFormAttachments />
-      <View style={styles.textInput}>
+      <View style={styles.textInputRow}>
         {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 style={styles.textInput}>
+          <TextInput
+            multiline={true}
+            aria-disabled={true}
+            placeholder="Send a message"
+            onChangeText={setText}
+            value={text}
+            maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}
+            onSubmitEditing={onSubmit}
+          />
+        </View>
       </View>
 
       {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}
@@ -305,7 +312,7 @@ function MessageFormAttachmentPicker() {
 }
 
 function MessageFormCommands() {
-  const { canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)
+  const { text, canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)
 
   if (!canGiphy) {
     return null
@@ -330,6 +337,7 @@ function MessageFormCommands() {
       appearance="neutral"
       name={'general.bolt'}
       onPress={() => setUsingGiphy(true)}
+      disabled={text.length > GIPHY_MAX_LENGTH}
     />
   )
 }
@@ -357,10 +365,14 @@ const useMessageFormStyles = () => {
       flex: 1,
       gap: 12,
     },
-    textInput: {
+    textInputRow: {
       flexDirection: 'row',
+      alignItems: 'center',
       gap: 12,
     },
+    textInput: {
+      flex: 1,
+    },
     giphyBadge: {
       backgroundColor: theme.colors.fillColorNeutral050Base,
       borderRadius: 24,