@planningcenter/chat-react-native 3.7.0-rc.3 → 3.7.0-rc.5

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":"AAMA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAC3E,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAA;AAGrE,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAenE,eAAO,MAAM,WAAW;;;;;;CAOvB,CAAA;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,YAAY,EAAE,oBAAoB,CAAA;IAClC,uBAAuB,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACjD;AA0BD,iBAAS,eAAe,CAAC,EACvB,YAAY,EACZ,uBAAuB,EACvB,QAAQ,GACT,EAAE,qBAAqB,qBAoHvB;AAiCD,iBAAS,gBAAgB,sBA2CxB;AAED,iBAAS,oBAAoB,sBAe5B;AAED,iBAAS,2BAA2B,6BA+EnC;AAED,iBAAS,mBAAmB,6BA6B3B"}
+{"version":3,"file":"message_form.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAC3E,OAAO,EAAoD,SAAS,EAAE,MAAM,cAAc,CAAA;AAG1F,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAkBnE,eAAO,MAAM,WAAW;;;;;;CAOvB,CAAA;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,YAAY,EAAE,oBAAoB,CAAA;IAClC,uBAAuB,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACjD;AA0BD,iBAAS,eAAe,CAAC,EACvB,YAAY,EACZ,uBAAuB,EACvB,QAAQ,GACT,EAAE,qBAAqB,qBAoHvB;AAiCD,iBAAS,gBAAgB,sBA6CxB;AAED,iBAAS,oBAAoB,sBA8C5B;AAED,iBAAS,2BAA2B,6BAoFnC;AAED,iBAAS,mBAAmB,6BAgC3B"}

package/build/components/conversation/message_form.js

@@ -1,14 +1,17 @@
 import { useNavigation, useTheme as useNavigationTheme, useRoute, } from '@react-navigation/native';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { StyleSheet, TextInput, View } from 'react-native';
-import { IconButton, Text } from '../../components';
-import { useTheme } from '../../hooks';
+import { Platform, Pressable, StyleSheet, TextInput, View } from 'react-native';
+import { Icon, IconButton, Text } from '../../components';
+import { useCreateAndroidRippleColor, useTheme } from '../../hooks';
 import { ChatContext } from '../../contexts/chat_context';
 import { ImagePicker } from '../../utils/native_adapters';
+import { platformPressedOpacityStyle } from '../../utils';
 import { useAttachmentUploader } from '../../hooks/use_attachment_uploader';
 import { MessageFormAttachmentImage } from './message_form/message_form_attachment_image';
 import { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update';
 import { useBroadcastTypingStatus } from '../../hooks/use_broadcast_typing_status';
+import { tokens } from '../../vendor/tapestry/tokens';
+import LinearGradient from 'react-native-linear-gradient';
 export const MessageForm = {
     Root: MessageFormRoot,
     TextInput: MessageFormInput,
@@ -150,6 +153,7 @@ function MessageFormAttachments() {
 }
 function MessageFormInput() {
     const styles = useMessageFormStyles();
+    const theme = useTheme();
     const { text, setText, onSubmit, usingGiphy, attachmentUploader } = React.useContext(MessageFormContext);
     const attachmentError = attachmentUploader?.errorMessage;
     const route = useRoute();
@@ -168,16 +172,37 @@ function MessageFormInput() {
             <Text style={styles.giphyBadgeText}>/giphy</Text>
           </View>) : null}
 
-        <TextInput style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]} multiline={true} aria-disabled={true} placeholder="Send a message" onChangeText={handleTextChange} value={text} maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH} onSubmitEditing={onSubmit}/>
+        <TextInput style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]} multiline={true} aria-disabled={true} placeholder="Send a message" placeholderTextColor={theme.colors.textColorDefaultPlaceholder} onChangeText={handleTextChange} value={text} maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH} onSubmitEditing={onSubmit}/>
       </View>
 
       {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}
     </View>);
 }
 function MessageFormSubmitBtn() {
-    const styles = useMessageFormStyles();
     const { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext);
-    return (<IconButton disabled={disabled} accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'} size="md" appearance="neutral" style={styles.textInputSend} name={usingGiphy ? 'general.search' : 'general.upArrow'} onPress={onSubmit}/>);
+    const styles = useMessageFormStyles();
+    const { colors } = useTheme();
+    const colorKey = disabled ? 'disabled' : 'interaction';
+    const interactionStart = colors.buttonStart || colors.interaction;
+    const interactionEnd = colors.buttonEnd || colors.interaction;
+    const colorMap = {
+        disabled: [
+            colors.fillColorButtonNeutralSolidDisabled,
+            colors.fillColorButtonNeutralSolidDisabled,
+        ],
+        interaction: [interactionStart, interactionEnd],
+    };
+    const androidRippleColor = useCreateAndroidRippleColor({ color: colorMap[colorKey][0] });
+    const gradientColors = colorMap[colorKey];
+    const iconStyles = [styles.submitIcon, disabled && styles.submitIconDisabled];
+    return (<Pressable disabled={disabled} onPress={onSubmit} accessibilityRole="button" accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'} style={({ pressed }) => [
+            styles.submitPressableWrapper,
+            pressed && platformPressedOpacityStyle,
+        ]} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}>
+      <LinearGradient start={{ x: 0.1, y: 0.1 }} end={{ x: 0.9, y: 0.9 }} colors={gradientColors} style={styles.submitGradientWrapper}>
+        <Icon name={usingGiphy ? 'general.search' : 'general.upArrow'} style={iconStyles} accessibilityElementsHidden={true}/>
+      </LinearGradient>
+    </Pressable>);
 }
 function MessageFormAttachmentPicker() {
     const styles = useMessageFormStyles();
@@ -220,25 +245,24 @@ function MessageFormAttachmentPicker() {
     if (usingGiphy || currentlyEditingMessage) {
         return null;
     }
-    return (
-    // TODO: Design Pass
-    <View style={styles.attachmentPicker}>
-      {isOpen && (<View style={styles.attachmentPickerButtons}>
-          <IconButton accessibilityLabel="Take a photo" size="md" appearance="neutral" name={'general.videoCamera'} onPress={openCamera}/>
-          <IconButton accessibilityLabel="Choose a photo" size="md" appearance="neutral" name={'churchCenter.photosIos'} onPress={pickImage}/>
+    return (<View style={styles.attachmentPicker}>
+      {isOpen && (<View style={styles.attachmentPickerButtonsContainer}>
+          <IconButton accessibilityLabel="Take a photo" accessibilityHint="Opens your camera" size="lg" appearance="neutral" name="general.videoCamera" onPress={openCamera} style={styles.attachmentPickerButton}/>
+          <IconButton accessibilityLabel="Choose a photo" accessibilityHint="Opens your photo gallery" size="lg" appearance="neutral" name="churchCenter.photosIos" onPress={pickImage} style={styles.attachmentPickerButton}/>
         </View>)}
-      <IconButton accessibilityLabel="File Menu" size="md" appearance="neutral" name={'general.outlinedPlusCircle'} onPress={() => setIsOpen(!isOpen)}/>
+      <IconButton accessibilityLabel="File Menu" accessibilityHint="Opens options to attach or take a photo" size="lg" appearance="neutral" name="general.paperclip" onPress={() => setIsOpen(!isOpen)} style={styles.formButton}/>
     </View>);
 }
 function MessageFormCommands() {
     const { text, canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext);
+    const styles = useMessageFormStyles();
     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="Exit Giphy Search" size="md" appearance="neutral" name={'general.x'} onPress={() => setUsingGiphy(false)} style={styles.formButton}/>);
     }
-    return (<IconButton accessibilityLabel="Search Giphy" size="md" appearance="neutral" name={'general.bolt'} onPress={() => setUsingGiphy(true)} disabled={text.length > GIPHY_MAX_LENGTH}/>);
+    return (<IconButton accessibilityLabel="Search Giphy" size="lg" appearance="neutral" name={'general.bolt'} onPress={() => setUsingGiphy(true)} disabled={text.length > GIPHY_MAX_LENGTH} style={styles.formButton}/>);
 }
 function EditingIndicator() {
     const { currentlyEditingMessage } = React.useContext(MessageFormContext);
@@ -255,6 +279,7 @@ function EditingIndicator() {
 const useMessageFormStyles = () => {
     const theme = useTheme();
     const navigationTheme = useNavigationTheme();
+    const buttonSize = 38;
     return StyleSheet.create({
         container: {
             borderColor: theme.colors.fillColorNeutral050Base,
@@ -264,8 +289,8 @@ const useMessageFormStyles = () => {
         textInputContainer: {
             backgroundColor: navigationTheme.colors.card,
             flexDirection: 'row',
-            alignItems: 'center',
-            gap: 12,
+            alignItems: 'flex-end',
+            gap: 16,
         },
         textInputBoundary: {
             borderRadius: 24,
@@ -281,12 +306,13 @@ const useMessageFormStyles = () => {
         },
         textInput: {
             paddingVertical: 8,
-            paddingHorizontal: 20,
+            paddingHorizontal: 16,
             color: theme.colors.textColorDefaultPrimary,
             textAlignVertical: 'center',
             justifyContent: 'center',
             flex: 1,
             fontSize: 16,
+            maxHeight: 200,
         },
         textInputWithGiphy: {
             paddingLeft: 0,
@@ -302,20 +328,51 @@ const useMessageFormStyles = () => {
             fontSize: 14,
             color: theme.colors.interaction,
         },
-        textInputSend: {
-            borderRadius: 24,
-            height: 36,
-            width: 36,
+        formButton: {
+            height: buttonSize,
+        },
+        submitPressableWrapper: {
+            borderRadius: buttonSize,
+            overflow: 'hidden',
+        },
+        submitGradientWrapper: {
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: buttonSize,
+            height: buttonSize,
+            width: buttonSize,
+        },
+        submitIcon: {
+            fontSize: 16,
+            color: tokens.colorNeutral100White,
+        },
+        submitIconDisabled: {
+            color: theme.colors.iconColorDefaultDisabled,
         },
         attachmentPicker: {
             position: 'relative',
         },
-        attachmentPickerButtons: {
+        attachmentPickerButtonsContainer: {
             position: 'absolute',
             left: 0,
             bottom: 40,
             zIndex: 10,
-            gap: 16,
+            gap: 12,
+        },
+        attachmentPickerButton: {
+            backgroundColor: theme.colors.fillColorNeutral070,
+            borderRadius: 20,
+            height: buttonSize,
+            width: buttonSize,
+            elevation: 3,
+            ...Platform.select({
+                ios: {
+                    borderWidth: 1,
+                    borderColor: theme.colors.borderColorDefaultBase,
+                },
+                default: null,
+            }),
         },
         messageFormAttachments: {
             flexDirection: 'row',

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":"AAAA,OAAO,EAEL,aAAa,EACb,QAAQ,IAAI,kBAAkB,EAC9B,QAAQ,GACT,MAAM,0BAA0B,CAAA;AACjC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAa,MAAM,cAAc,CAAA;AACrE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAKtC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,WAAW,EAAqB,MAAM,6BAA6B,CAAA;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAK3E,OAAO,EAAE,0BAA0B,EAAE,MAAM,8CAA8C,CAAA;AACzF,OAAO,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAA;AACnF,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAA;AAElF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,eAAe;IAErB,SAAS,EAAE,gBAAgB;IAC3B,YAAY,EAAE,oBAAoB;IAClC,gBAAgB,EAAE,2BAA2B;IAC7C,QAAQ,EAAE,mBAAmB;CAC9B,CAAA;AAOD,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAU3C;IACD,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,CAAC,KAAa,EAAE,EAAE,GAAE,CAAC;IAC9B,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,CAAC,WAAoB,EAAE,EAAE,GAAE,CAAC;IAC3C,uBAAuB,EAAE,IAAI;CAC9B,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAC3B,MAAM,kBAAkB,GAAG,IAAI,CAAA;AAE/B,SAAS,eAAe,CAAC,EACvB,YAAY,EACZ,uBAAuB,EACvB,QAAQ,GACc;IACtB,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAC/C,MAAM,QAAQ,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,uBAAuB,CAAA;IAC1D,MAAM,MAAM,GAAG,oBAAoB,EAAE,CAAA;IACrC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;IAC1C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,KAAK,GAAG,QAAQ,EAAsC,CAAA;IAC5D,MAAM,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EAAE,aAAa,EACpB,WAAW,GACZ,GAAG,wBAAwB,CAAC;QAC3B,cAAc,EAAE,YAAY,CAAC,EAAE;QAC/B,SAAS,EAAE,uBAAuB,EAAE,EAAE,IAAI,IAAI;KAC/C,CAAC,CAAA;IACF,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;QAC/C,cAAc,EAAE,YAAY,CAAC,EAAE;KAChC,CAAC,CAAA;IACF,MAAM,uBAAuB,GAAG,kBAAkB,CAAC,KAAK,CAAA;IAExD,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,uBAAuB,EAAE,CAAA;QACzB,aAAa,EAAE,CAAA;QACf,OAAO,CAAC,EAAE,CAAC,CAAA;QACX,aAAa,CAAC,KAAK,CAAC,CAAA;QACpB,UAAU,CAAC,SAAS,CAAC;YACnB,kBAAkB,EAAE,IAAI;SACzB,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,uBAAuB,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC,CAAA;IAExD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;YAC1D,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,OAAO,CAAC,EAAE,CAAC,CAAA;QACb,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAA;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,MAAM,EAAE,CAAC;YACf,KAAK,SAAS;gBACZ,KAAK,EAAE,CAAA;gBACP,MAAK;QACT,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IAEnB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;YAC7B,KAAK,EAAE,CAAA;YACP,UAAU,CAAC,SAAS,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAA;QAC/D,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAErC,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE;QACtB,IAAI,SAAS;YAAE,OAAO,KAAK,CAAA;QAC3B,IAAI,kBAAkB,EAAE,cAAc;YAAE,OAAO,KAAK,CAAA;QACpD,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO,IAAI,CAAA;QAChC,IAAI,kBAAkB,EAAE,WAAW,EAAE,MAAM;YAAE,OAAO,IAAI,CAAA;QACxD,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,EAAE,CAAA;IACJ,MAAM,QAAQ,GAAG,CAAC,SAAS,CAAA;IAE3B,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,SAAS;YAAE,OAAM;QAEtB,IAAI,QAAQ,IAAI,UAAU,EAAE,CAAC;YAC3B,SAAS,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,CAAA;YACtE,UAAU,CAAC,QAAQ,CAAC,WAAW,EAAE;gBAC/B,eAAe,EAAE,YAAY,CAAC,EAAE;gBAChC,WAAW,EAAE,IAAI;aAClB,CAAC,CAAA;QACJ,CAAC;aAAM,CAAC;YACN,IAAI,oBAAoB,GAA8C,EAAE,CAAA;YACxE,IAAI,kBAAkB,EAAE,aAAa,EAAE,CAAC;gBACtC,oBAAoB,GAAG,kBAAkB,CAAC,aAAa,CAAC,GAAG,CACzD,CAAC,EAAU,EAAkD,EAAE,CAAC,CAAC;oBAC/D,IAAI,EAAE,mBAAmB;oBACzB,EAAE;iBACH,CAAC,CACH,CAAA;YACH,CAAC;YACD,IAAI,uBAAuB,EAAE,CAAC;gBAC5B,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACnC,CAAC;iBAAM,CAAC;gBACN,WAAW,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACtE,CAAC;QACH,CAAC;IACH,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,uBAAuB,EAAE,CAAC;YAC5B,OAAO,CAAC,uBAAuB,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;QAC7C,CAAC;IACH,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAA;IAE7B,OAAO,CACL,CAAC,kBAAkB,CAAC,QAAQ,CAC1B,KAAK,CAAC,CAAC;YACL,IAAI;YACJ,OAAO;YACP,QAAQ,EAAE,YAAY;YACtB,QAAQ;YACR,QAAQ;YACR,UAAU;YACV,aAAa;YACb,kBAAkB;YAClB,uBAAuB;SACxB,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;QAAA,CAAC,gBAAgB,CAAC,AAAD,EACjB;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAC1D;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAC/B,CAAA;AACH,CAAC;AAED,SAAS,sBAAsB;IAC7B,MAAM,MAAM,GAAG,oBAAoB,EAAE,CAAA;IACrC,MAAM,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAA;IACnE,MAAM,mBAAmB,GAAG,kBAAkB,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC,CAAA;IACxE,MAAM,WAAW,GAAG,kBAAkB,EAAE,WAAW,IAAI,EAAE,CAAA;IAEzD,IAAI,mBAAmB,KAAK,CAAC,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CACzC;MAAA,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC5B,OAAO,CACL,CAAC,0BAA0B,CACzB,GAAG,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CACzB,GAAG,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CACzB,GAAG,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAC1B,MAAM,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC1B,KAAK,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAC7B,MAAM,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAC/B,gBAAgB,CAAC,CAAC,GAAG,EAAE;oBACrB,kBAAkB,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;gBAClD,CAAC,CAAC,EACF,CACH,CAAA;QACH,CAAC,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,SAAS,gBAAgB;IACvB,MAAM,MAAM,GAAG,oBAAoB,EAAE,CAAA;IACrC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,kBAAkB,EAAE,GAC/D,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAA;IACtC,MAAM,eAAe,GAAG,kBAAkB,EAAE,YAAY,CAAA;IAExD,MAAM,KAAK,GAAG,QAAQ,EAA+C,CAAA;IACrE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,eAAe,CAAA;IACnD,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,cAAc,CAAC,CAAA;IAEtE,MAAM,gBAAgB,GAAG,CAAC,OAAe,EAAE,EAAE;QAC3C,OAAO,CAAC,OAAO,CAAC,CAAA;QAEhB,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvB,qBAAqB,EAAE,CAAA;QACzB,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CACpC;MAAA,CAAC,sBAAsB,CAAC,AAAD,EACvB;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAC/B;QAAA,CAAC,UAAU,CAAC,CAAC,CAAC,CACZ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAC7B;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,MAAM,EAAE,IAAI,CAClD;UAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CAER;;QAAA,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,UAAU,IAAI,MAAM,CAAC,kBAAkB,CAAC,CAAC,CACnE,SAAS,CAAC,CAAC,IAAI,CAAC,CAChB,aAAa,CAAC,CAAC,IAAI,CAAC,CACpB,WAAW,CAAC,gBAAgB,CAC5B,YAAY,CAAC,CAAC,gBAAgB,CAAC,CAC/B,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC9D,eAAe,CAAC,CAAC,QAAQ,CAAC,EAE9B;MAAA,EAAE,IAAI,CAEN;;MAAA,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAC3F;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,SAAS,oBAAoB;IAC3B,MAAM,MAAM,GAAG,oBAAoB,EAAE,CAAA;IACrC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAA;IAE/E,OAAO,CACL,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,kBAAkB,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CACjE,IAAI,CAAC,IAAI,CACT,UAAU,CAAC,SAAS,CACpB,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAC5B,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CACxD,OAAO,CAAC,CAAC,QAAQ,CAAC,EAClB,CACH,CAAA;AACH,CAAC;AAED,SAAS,2BAA2B;IAClC,MAAM,MAAM,GAAG,oBAAoB,EAAE,CAAA;IACrC,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,GAC/D,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAA;IACtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3C,SAAS,uBAAuB,CAAC,MAAyB;QACxD,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;YACpB,OAAM;QACR,CAAC;QAED,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM;aACjC,MAAM,CAAC,KAAK,CAAC,EAAE;YACd,OAAO,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAA;QAC3D,CAAC,CAAC;aACD,GAAG,CAAC,KAAK,CAAC,EAAE;YACX,OAAO;gBACL,GAAG,EAAE,KAAK,CAAC,GAAG;gBACd,IAAI,EAAE,KAAK,CAAC,QAAkB;gBAC9B,IAAI,EAAE,KAAK,CAAC,QAAkB;gBAC9B,IAAI,EAAE,KAAK,CAAC,QAAkB;gBAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;gBACpB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB,CAAA;QACH,CAAC,CAAC,CAAA;QAEJ,kBAAkB,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IACzD,CAAC;IAED,MAAM,UAAU,GAAG,KAAK,IAAI,EAAE;QAC5B,SAAS,CAAC,KAAK,CAAC,CAAA;QAChB,IAAI,MAAM,GAAG,MAAM,WAAW,CAAC,eAAe,EAAE,CAAA;QAChD,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YACrB,uBAAuB,CAAC,MAAM,CAAC,CAAA;QACjC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;QAC3B,SAAS,CAAC,KAAK,CAAC,CAAA;QAChB,IAAI,MAAM,GAAG,MAAM,WAAW,CAAC,qBAAqB,EAAE,CAAA;QACtD,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YACrB,uBAAuB,CAAC,MAAM,CAAC,CAAA;QACjC,CAAC;IACH,CAAC,CAAA;IAED,IAAI,UAAU,IAAI,uBAAuB,EAAE,CAAC;QAC1C,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO;IACL,oBAAoB;IACpB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CACnC;MAAA,CAAC,MAAM,IAAI,CACT,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAC1C;UAAA,CAAC,UAAU,CACT,kBAAkB,CAAC,cAAc,CACjC,IAAI,CAAC,IAAI,CACT,UAAU,CAAC,SAAS,CACpB,IAAI,CAAC,CAAC,qBAAqB,CAAC,CAC5B,OAAO,CAAC,CAAC,UAAU,CAAC,EAEtB;UAAA,CAAC,UAAU,CACT,kBAAkB,CAAC,gBAAgB,CACnC,IAAI,CAAC,IAAI,CACT,UAAU,CAAC,SAAS,CACpB,IAAI,CAAC,CAAC,wBAAwB,CAAC,CAC/B,OAAO,CAAC,CAAC,SAAS,CAAC,EAEvB;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,UAAU,CACT,kBAAkB,CAAC,WAAW,CAC9B,IAAI,CAAC,IAAI,CACT,UAAU,CAAC,SAAS,CACpB,IAAI,CAAC,CAAC,4BAA4B,CAAC,CACnC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,EAEtC;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,SAAS,mBAAmB;IAC1B,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAA;IAE1F,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,CACL,CAAC,UAAU,CACT,kBAAkB,CAAC,mBAAmB,CACtC,IAAI,CAAC,IAAI,CACT,UAAU,CAAC,SAAS,CACpB,IAAI,CAAC,CAAC,WAAW,CAAC,CAClB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,EACpC,CACH,CAAA;IACH,CAAC;IAED,OAAO,CACL,CAAC,UAAU,CACT,kBAAkB,CAAC,cAAc,CACjC,IAAI,CAAC,IAAI,CACT,UAAU,CAAC,SAAS,CACpB,IAAI,CAAC,CAAC,cAAc,CAAC,CACrB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CACnC,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,gBAAgB,CAAC,EACzC,CACH,CAAA;AACH,CAAC;AAED,SAAS,gBAAgB;IACvB,MAAM,EAAE,uBAAuB,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAA;IACxE,MAAM,MAAM,GAAG,oBAAoB,EAAE,CAAA;IACrC,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAElC,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CACnC;MAAA,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAC3B;MAAA,CAAC,UAAU,CACT,kBAAkB,CAAC,sBAAsB,CACzC,IAAI,CAAC,CAAC,WAAW,CAAC,CAClB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,CAAC,EAEtE;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAA;IAE5C,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB;YACjD,cAAc,EAAE,CAAC;YACjB,OAAO,EAAE,EAAE;SACZ;QACD,kBAAkB,EAAE;YAClB,eAAe,EAAE,eAAe,CAAC,MAAM,CAAC,IAAI;YAC5C,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,EAAE;SACR;QACD,iBAAiB,EAAE;YACjB,YAAY,EAAE,EAAE;YAChB,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB;YACjD,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,EAAE;SACR;QACD,YAAY,EAAE;YACZ,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,EAAE;YACP,UAAU,EAAE,QAAQ;SACrB;QACD,SAAS,EAAE;YACT,eAAe,EAAE,CAAC;YAClB,iBAAiB,EAAE,EAAE;YACrB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB;YAC3C,iBAAiB,EAAE,QAAQ;YAC3B,cAAc,EAAE,QAAQ;YACxB,IAAI,EAAE,CAAC;YACP,QAAQ,EAAE,EAAE;SACb;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,CAAC;SACf;QACD,UAAU,EAAE;YACV,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB;YACrD,YAAY,EAAE,EAAE;YAChB,iBAAiB,EAAE,EAAE;YACrB,UAAU,EAAE,EAAE;YACd,OAAO,EAAE,CAAC;SACX;QACD,cAAc,EAAE;YACd,QAAQ,EAAE,EAAE;YACZ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;SAChC;QACD,aAAa,EAAE;YACb,YAAY,EAAE,EAAE;YAChB,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;SACV;QACD,gBAAgB,EAAE;YAChB,QAAQ,EAAE,UAAU;SACrB;QACD,uBAAuB,EAAE;YACvB,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,CAAC;YACP,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,EAAE;SACR;QACD,sBAAsB,EAAE;YACtB,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,CAAC;SACP;QACD,iBAAiB,EAAE;YACjB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe;YACnC,QAAQ,EAAE,EAAE;SACb;QACD,gBAAgB,EAAE;YAChB,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,GAAG,EAAE,CAAC;YACN,aAAa,EAAE,EAAE;SAClB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import {\n  RouteProp,\n  useNavigation,\n  useTheme as useNavigationTheme,\n  useRoute,\n} 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, MessageResource } from '../../types'\n\nimport { ConversationScreenProps } from '../../screens/conversation_screen'\n\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'\nimport { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'\nimport { useBroadcastTypingStatus } from '../../hooks/use_broadcast_typing_status'\n\nexport const MessageForm = {\n  Root: MessageFormRoot,\n\n  TextInput: MessageFormInput,\n  SubmitButton: MessageFormSubmitBtn,\n  AttachmentPicker: MessageFormAttachmentPicker,\n  Commands: MessageFormCommands,\n}\n\ninterface MessagesFormRootProps extends ViewProps {\n  conversation: ConversationResource\n  currentlyEditingMessage?: MessageResource | null\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  currentlyEditingMessage?: MessageResource | null\n}>({\n  text: '',\n  setText: (_text: string) => {},\n  onSubmit: () => {},\n  disabled: false,\n  canGiphy: false,\n  usingGiphy: false,\n  setUsingGiphy: (_usingGiphy: boolean) => {},\n  currentlyEditingMessage: null,\n})\n\nconst GIPHY_MAX_LENGTH = 50\nconst MAX_MESSAGE_LENGTH = 5000\n\nfunction MessageFormRoot({\n  conversation,\n  currentlyEditingMessage,\n  children,\n}: MessagesFormRootProps) {\n  const { giphyApiKey } = useContext(ChatContext)\n  const canGiphy = !!giphyApiKey && !currentlyEditingMessage\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    mutateAsync,\n  } = useMessageCreateOrUpdate({\n    conversationId: conversation.id,\n    messageId: currentlyEditingMessage?.id || null,\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    navigation.setParams({\n      editing_message_id: null,\n    })\n  }, [resetAttachmentUploader, resetMutation, navigation])\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      if (currentlyEditingMessage) {\n        mutateAsync({ text }).then(reset)\n      } else {\n        mutateAsync({ text, attachments: attachmentsForSubmit }).then(reset)\n      }\n    }\n  }\n\n  useEffect(() => {\n    if (currentlyEditingMessage) {\n      setText(currentlyEditingMessage.text || '')\n    }\n  }, [currentlyEditingMessage])\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        currentlyEditingMessage,\n      }}\n    >\n      <View style={styles.container}>\n        <EditingIndicator />\n        <View style={styles.textInputContainer}>{children}</View>\n      </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  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()\n  const conversationId = route.params.conversation_id\n  const broadcastTypingStatus = useBroadcastTypingStatus(conversationId)\n\n  const handleTextChange = (newText: string) => {\n    setText(newText)\n\n    if (newText.length > 0) {\n      broadcastTypingStatus()\n    }\n  }\n\n  return (\n    <View style={styles.textInputBoundary}>\n      <MessageFormAttachments />\n      <View style={styles.textInputRow}>\n        {usingGiphy ? (\n          <View style={styles.giphyBadge}>\n            <Text style={styles.giphyBadgeText}>/giphy</Text>\n          </View>\n        ) : null}\n\n        <TextInput\n          style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]}\n          multiline={true}\n          aria-disabled={true}\n          placeholder=\"Send a message\"\n          onChangeText={handleTextChange}\n          value={text}\n          maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}\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, currentlyEditingMessage } =\n    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 || currentlyEditingMessage) {\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\nfunction EditingIndicator() {\n  const { currentlyEditingMessage } = React.useContext(MessageFormContext)\n  const styles = useMessageFormStyles()\n  const navigation = useNavigation()\n\n  if (!currentlyEditingMessage) {\n    return null\n  }\n\n  return (\n    <View style={styles.editingIndicator}>\n      <Text>Editing message</Text>\n      <IconButton\n        accessibilityLabel=\"Exit message editing\"\n        name={'general.x'}\n        onPress={() => navigation.setParams({ editing_message_id: null })}\n      />\n    </View>\n  )\n}\n\nconst useMessageFormStyles = () => {\n  const theme = useTheme()\n  const navigationTheme = useNavigationTheme()\n\n  return StyleSheet.create({\n    container: {\n      borderColor: theme.colors.fillColorNeutral050Base,\n      borderTopWidth: 1,\n      padding: 12,\n    },\n    textInputContainer: {\n      backgroundColor: navigationTheme.colors.card,\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n    },\n    textInputBoundary: {\n      borderRadius: 24,\n      borderWidth: 1,\n      borderColor: theme.colors.fillColorNeutral050Base,\n      flex: 1,\n      gap: 12,\n    },\n    textInputRow: {\n      flexDirection: 'row',\n      gap: 12,\n      alignItems: 'center',\n    },\n    textInput: {\n      paddingVertical: 8,\n      paddingHorizontal: 20,\n      color: theme.colors.textColorDefaultPrimary,\n      textAlignVertical: 'center',\n      justifyContent: 'center',\n      flex: 1,\n      fontSize: 16,\n    },\n    textInputWithGiphy: {\n      paddingLeft: 0,\n    },\n    giphyBadge: {\n      backgroundColor: theme.colors.fillColorNeutral050Base,\n      borderRadius: 24,\n      paddingHorizontal: 12,\n      marginLeft: 12,\n      padding: 4,\n    },\n    giphyBadgeText: {\n      fontSize: 14,\n      color: theme.colors.interaction,\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    editingIndicator: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 8,\n      paddingBottom: 12,\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 {\n  RouteProp,\n  useNavigation,\n  useTheme as useNavigationTheme,\n  useRoute,\n} from '@react-navigation/native'\nimport React, { useCallback, useContext, useEffect, useState } from 'react'\nimport { Platform, Pressable, StyleSheet, TextInput, View, ViewProps } from 'react-native'\nimport { Icon, IconButton, Text } from '../../components'\nimport { useCreateAndroidRippleColor, useTheme } from '../../hooks'\nimport { ConversationResource, MessageResource } from '../../types'\n\nimport { ConversationScreenProps } from '../../screens/conversation_screen'\n\nimport { ChatContext } from '../../contexts/chat_context'\nimport { ImagePicker, ImagePickerResult } from '../../utils/native_adapters'\nimport { platformPressedOpacityStyle } from '../../utils'\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'\nimport { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'\nimport { useBroadcastTypingStatus } from '../../hooks/use_broadcast_typing_status'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport LinearGradient from 'react-native-linear-gradient'\n\nexport const MessageForm = {\n  Root: MessageFormRoot,\n\n  TextInput: MessageFormInput,\n  SubmitButton: MessageFormSubmitBtn,\n  AttachmentPicker: MessageFormAttachmentPicker,\n  Commands: MessageFormCommands,\n}\n\ninterface MessagesFormRootProps extends ViewProps {\n  conversation: ConversationResource\n  currentlyEditingMessage?: MessageResource | null\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  currentlyEditingMessage?: MessageResource | null\n}>({\n  text: '',\n  setText: (_text: string) => {},\n  onSubmit: () => {},\n  disabled: false,\n  canGiphy: false,\n  usingGiphy: false,\n  setUsingGiphy: (_usingGiphy: boolean) => {},\n  currentlyEditingMessage: null,\n})\n\nconst GIPHY_MAX_LENGTH = 50\nconst MAX_MESSAGE_LENGTH = 5000\n\nfunction MessageFormRoot({\n  conversation,\n  currentlyEditingMessage,\n  children,\n}: MessagesFormRootProps) {\n  const { giphyApiKey } = useContext(ChatContext)\n  const canGiphy = !!giphyApiKey && !currentlyEditingMessage\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    mutateAsync,\n  } = useMessageCreateOrUpdate({\n    conversationId: conversation.id,\n    messageId: currentlyEditingMessage?.id || null,\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    navigation.setParams({\n      editing_message_id: null,\n    })\n  }, [resetAttachmentUploader, resetMutation, navigation])\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      if (currentlyEditingMessage) {\n        mutateAsync({ text }).then(reset)\n      } else {\n        mutateAsync({ text, attachments: attachmentsForSubmit }).then(reset)\n      }\n    }\n  }\n\n  useEffect(() => {\n    if (currentlyEditingMessage) {\n      setText(currentlyEditingMessage.text || '')\n    }\n  }, [currentlyEditingMessage])\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        currentlyEditingMessage,\n      }}\n    >\n      <View style={styles.container}>\n        <EditingIndicator />\n        <View style={styles.textInputContainer}>{children}</View>\n      </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 theme = useTheme()\n  const { text, setText, onSubmit, usingGiphy, attachmentUploader } =\n    React.useContext(MessageFormContext)\n  const attachmentError = attachmentUploader?.errorMessage\n\n  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()\n  const conversationId = route.params.conversation_id\n  const broadcastTypingStatus = useBroadcastTypingStatus(conversationId)\n\n  const handleTextChange = (newText: string) => {\n    setText(newText)\n\n    if (newText.length > 0) {\n      broadcastTypingStatus()\n    }\n  }\n\n  return (\n    <View style={styles.textInputBoundary}>\n      <MessageFormAttachments />\n      <View style={styles.textInputRow}>\n        {usingGiphy ? (\n          <View style={styles.giphyBadge}>\n            <Text style={styles.giphyBadgeText}>/giphy</Text>\n          </View>\n        ) : null}\n\n        <TextInput\n          style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]}\n          multiline={true}\n          aria-disabled={true}\n          placeholder=\"Send a message\"\n          placeholderTextColor={theme.colors.textColorDefaultPlaceholder}\n          onChangeText={handleTextChange}\n          value={text}\n          maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}\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 { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext)\n  const styles = useMessageFormStyles()\n  const { colors } = useTheme()\n\n  const colorKey = disabled ? 'disabled' : 'interaction'\n  const interactionStart = colors.buttonStart || colors.interaction\n  const interactionEnd = colors.buttonEnd || colors.interaction\n  const colorMap = {\n    disabled: [\n      colors.fillColorButtonNeutralSolidDisabled,\n      colors.fillColorButtonNeutralSolidDisabled,\n    ],\n    interaction: [interactionStart, interactionEnd],\n  }\n\n  const androidRippleColor = useCreateAndroidRippleColor({ color: colorMap[colorKey][0] })\n  const gradientColors = colorMap[colorKey] as [string, string]\n  const iconStyles = [styles.submitIcon, disabled && styles.submitIconDisabled]\n\n  return (\n    <Pressable\n      disabled={disabled}\n      onPress={onSubmit}\n      accessibilityRole=\"button\"\n      accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'}\n      style={({ pressed }) => [\n        styles.submitPressableWrapper,\n        pressed && platformPressedOpacityStyle,\n      ]}\n      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n    >\n      <LinearGradient\n        start={{ x: 0.1, y: 0.1 }}\n        end={{ x: 0.9, y: 0.9 }}\n        colors={gradientColors}\n        style={styles.submitGradientWrapper}\n      >\n        <Icon\n          name={usingGiphy ? 'general.search' : 'general.upArrow'}\n          style={iconStyles}\n          accessibilityElementsHidden={true}\n        />\n      </LinearGradient>\n    </Pressable>\n  )\n}\n\nfunction MessageFormAttachmentPicker() {\n  const styles = useMessageFormStyles()\n  const { usingGiphy, attachmentUploader, currentlyEditingMessage } =\n    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 || currentlyEditingMessage) {\n    return null\n  }\n\n  return (\n    <View style={styles.attachmentPicker}>\n      {isOpen && (\n        <View style={styles.attachmentPickerButtonsContainer}>\n          <IconButton\n            accessibilityLabel=\"Take a photo\"\n            accessibilityHint=\"Opens your camera\"\n            size=\"lg\"\n            appearance=\"neutral\"\n            name=\"general.videoCamera\"\n            onPress={openCamera}\n            style={styles.attachmentPickerButton}\n          />\n          <IconButton\n            accessibilityLabel=\"Choose a photo\"\n            accessibilityHint=\"Opens your photo gallery\"\n            size=\"lg\"\n            appearance=\"neutral\"\n            name=\"churchCenter.photosIos\"\n            onPress={pickImage}\n            style={styles.attachmentPickerButton}\n          />\n        </View>\n      )}\n      <IconButton\n        accessibilityLabel=\"File Menu\"\n        accessibilityHint=\"Opens options to attach or take a photo\"\n        size=\"lg\"\n        appearance=\"neutral\"\n        name=\"general.paperclip\"\n        onPress={() => setIsOpen(!isOpen)}\n        style={styles.formButton}\n      />\n    </View>\n  )\n}\n\nfunction MessageFormCommands() {\n  const { text, canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)\n  const styles = useMessageFormStyles()\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        style={styles.formButton}\n      />\n    )\n  }\n\n  return (\n    <IconButton\n      accessibilityLabel=\"Search Giphy\"\n      size=\"lg\"\n      appearance=\"neutral\"\n      name={'general.bolt'}\n      onPress={() => setUsingGiphy(true)}\n      disabled={text.length > GIPHY_MAX_LENGTH}\n      style={styles.formButton}\n    />\n  )\n}\n\nfunction EditingIndicator() {\n  const { currentlyEditingMessage } = React.useContext(MessageFormContext)\n  const styles = useMessageFormStyles()\n  const navigation = useNavigation()\n\n  if (!currentlyEditingMessage) {\n    return null\n  }\n\n  return (\n    <View style={styles.editingIndicator}>\n      <Text>Editing message</Text>\n      <IconButton\n        accessibilityLabel=\"Exit message editing\"\n        name={'general.x'}\n        onPress={() => navigation.setParams({ editing_message_id: null })}\n      />\n    </View>\n  )\n}\n\nconst useMessageFormStyles = () => {\n  const theme = useTheme()\n  const navigationTheme = useNavigationTheme()\n  const buttonSize = 38\n\n  return StyleSheet.create({\n    container: {\n      borderColor: theme.colors.fillColorNeutral050Base,\n      borderTopWidth: 1,\n      padding: 12,\n    },\n    textInputContainer: {\n      backgroundColor: navigationTheme.colors.card,\n      flexDirection: 'row',\n      alignItems: 'flex-end',\n      gap: 16,\n    },\n    textInputBoundary: {\n      borderRadius: 24,\n      borderWidth: 1,\n      borderColor: theme.colors.fillColorNeutral050Base,\n      flex: 1,\n      gap: 12,\n    },\n    textInputRow: {\n      flexDirection: 'row',\n      gap: 12,\n      alignItems: 'center',\n    },\n    textInput: {\n      paddingVertical: 8,\n      paddingHorizontal: 16,\n      color: theme.colors.textColorDefaultPrimary,\n      textAlignVertical: 'center',\n      justifyContent: 'center',\n      flex: 1,\n      fontSize: 16,\n      maxHeight: 200,\n    },\n    textInputWithGiphy: {\n      paddingLeft: 0,\n    },\n    giphyBadge: {\n      backgroundColor: theme.colors.fillColorNeutral050Base,\n      borderRadius: 24,\n      paddingHorizontal: 12,\n      marginLeft: 12,\n      padding: 4,\n    },\n    giphyBadgeText: {\n      fontSize: 14,\n      color: theme.colors.interaction,\n    },\n    formButton: {\n      height: buttonSize,\n    },\n    submitPressableWrapper: {\n      borderRadius: buttonSize,\n      overflow: 'hidden',\n    },\n    submitGradientWrapper: {\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      borderRadius: buttonSize,\n      height: buttonSize,\n      width: buttonSize,\n    },\n    submitIcon: {\n      fontSize: 16,\n      color: tokens.colorNeutral100White,\n    },\n    submitIconDisabled: {\n      color: theme.colors.iconColorDefaultDisabled,\n    },\n    attachmentPicker: {\n      position: 'relative',\n    },\n    attachmentPickerButtonsContainer: {\n      position: 'absolute',\n      left: 0,\n      bottom: 40,\n      zIndex: 10,\n      gap: 12,\n    },\n    attachmentPickerButton: {\n      backgroundColor: theme.colors.fillColorNeutral070,\n      borderRadius: 20,\n      height: buttonSize,\n      width: buttonSize,\n      elevation: 3,\n      ...Platform.select({\n        ios: {\n          borderWidth: 1,\n          borderColor: theme.colors.borderColorDefaultBase,\n        },\n        default: null,\n      }),\n    },\n    messageFormAttachments: {\n      flexDirection: 'row',\n      gap: 8,\n    },\n    inputErrorMessage: {\n      color: theme.colors.statusErrorText,\n      fontSize: 14,\n    },\n    editingIndicator: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 8,\n      paddingBottom: 12,\n    },\n  })\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.7.0-rc.3",
+  "version": "3.7.0-rc.5",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "259b99ec6d74ec0eacac7448f9d5f56de42a4921"
+  "gitHead": "447c0ef8712bc18869d8acbe5e98b3d52135cc46"
 }

package/src/components/conversation/message_form.tsx

@@ -5,15 +5,16 @@ import {
   useRoute,
 } from '@react-navigation/native'
 import React, { useCallback, useContext, useEffect, useState } from 'react'
-import { StyleSheet, TextInput, View, ViewProps } from 'react-native'
-import { IconButton, Text } from '../../components'
-import { useTheme } from '../../hooks'
+import { Platform, Pressable, StyleSheet, TextInput, View, ViewProps } from 'react-native'
+import { Icon, IconButton, Text } from '../../components'
+import { useCreateAndroidRippleColor, useTheme } from '../../hooks'
 import { ConversationResource, MessageResource } from '../../types'
 
 import { ConversationScreenProps } from '../../screens/conversation_screen'
 
 import { ChatContext } from '../../contexts/chat_context'
 import { ImagePicker, ImagePickerResult } from '../../utils/native_adapters'
+import { platformPressedOpacityStyle } from '../../utils'
 import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
 import {
   DenormalizedAttachmentResourceForCreate,
@@ -22,6 +23,8 @@ import {
 import { MessageFormAttachmentImage } from './message_form/message_form_attachment_image'
 import { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
 import { useBroadcastTypingStatus } from '../../hooks/use_broadcast_typing_status'
+import { tokens } from '../../vendor/tapestry/tokens'
+import LinearGradient from 'react-native-linear-gradient'
 
 export const MessageForm = {
   Root: MessageFormRoot,
@@ -216,6 +219,7 @@ function MessageFormAttachments() {
 
 function MessageFormInput() {
   const styles = useMessageFormStyles()
+  const theme = useTheme()
   const { text, setText, onSubmit, usingGiphy, attachmentUploader } =
     React.useContext(MessageFormContext)
   const attachmentError = attachmentUploader?.errorMessage
@@ -247,6 +251,7 @@ function MessageFormInput() {
           multiline={true}
           aria-disabled={true}
           placeholder="Send a message"
+          placeholderTextColor={theme.colors.textColorDefaultPlaceholder}
           onChangeText={handleTextChange}
           value={text}
           maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}
@@ -260,19 +265,50 @@ function MessageFormInput() {
 }
 
 function MessageFormSubmitBtn() {
-  const styles = useMessageFormStyles()
   const { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext)
+  const styles = useMessageFormStyles()
+  const { colors } = useTheme()
+
+  const colorKey = disabled ? 'disabled' : 'interaction'
+  const interactionStart = colors.buttonStart || colors.interaction
+  const interactionEnd = colors.buttonEnd || colors.interaction
+  const colorMap = {
+    disabled: [
+      colors.fillColorButtonNeutralSolidDisabled,
+      colors.fillColorButtonNeutralSolidDisabled,
+    ],
+    interaction: [interactionStart, interactionEnd],
+  }
+
+  const androidRippleColor = useCreateAndroidRippleColor({ color: colorMap[colorKey][0] })
+  const gradientColors = colorMap[colorKey] as [string, string]
+  const iconStyles = [styles.submitIcon, disabled && styles.submitIconDisabled]
 
   return (
-    <IconButton
+    <Pressable
       disabled={disabled}
-      accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'}
-      size="md"
-      appearance="neutral"
-      style={styles.textInputSend}
-      name={usingGiphy ? 'general.search' : 'general.upArrow'}
       onPress={onSubmit}
-    />
+      accessibilityRole="button"
+      accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'}
+      style={({ pressed }) => [
+        styles.submitPressableWrapper,
+        pressed && platformPressedOpacityStyle,
+      ]}
+      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
+    >
+      <LinearGradient
+        start={{ x: 0.1, y: 0.1 }}
+        end={{ x: 0.9, y: 0.9 }}
+        colors={gradientColors}
+        style={styles.submitGradientWrapper}
+      >
+        <Icon
+          name={usingGiphy ? 'general.search' : 'general.upArrow'}
+          style={iconStyles}
+          accessibilityElementsHidden={true}
+        />
+      </LinearGradient>
+    </Pressable>
   )
 }
 
@@ -326,32 +362,37 @@ function MessageFormAttachmentPicker() {
   }
 
   return (
-    // TODO: Design Pass
     <View style={styles.attachmentPicker}>
       {isOpen && (
-        <View style={styles.attachmentPickerButtons}>
+        <View style={styles.attachmentPickerButtonsContainer}>
           <IconButton
             accessibilityLabel="Take a photo"
-            size="md"
+            accessibilityHint="Opens your camera"
+            size="lg"
             appearance="neutral"
-            name={'general.videoCamera'}
+            name="general.videoCamera"
             onPress={openCamera}
+            style={styles.attachmentPickerButton}
           />
           <IconButton
             accessibilityLabel="Choose a photo"
-            size="md"
+            accessibilityHint="Opens your photo gallery"
+            size="lg"
             appearance="neutral"
-            name={'churchCenter.photosIos'}
+            name="churchCenter.photosIos"
             onPress={pickImage}
+            style={styles.attachmentPickerButton}
           />
         </View>
       )}
       <IconButton
         accessibilityLabel="File Menu"
-        size="md"
+        accessibilityHint="Opens options to attach or take a photo"
+        size="lg"
         appearance="neutral"
-        name={'general.outlinedPlusCircle'}
+        name="general.paperclip"
         onPress={() => setIsOpen(!isOpen)}
+        style={styles.formButton}
       />
     </View>
   )
@@ -359,6 +400,7 @@ function MessageFormAttachmentPicker() {
 
 function MessageFormCommands() {
   const { text, canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)
+  const styles = useMessageFormStyles()
 
   if (!canGiphy) {
     return null
@@ -372,6 +414,7 @@ function MessageFormCommands() {
         appearance="neutral"
         name={'general.x'}
         onPress={() => setUsingGiphy(false)}
+        style={styles.formButton}
       />
     )
   }
@@ -379,11 +422,12 @@ function MessageFormCommands() {
   return (
     <IconButton
       accessibilityLabel="Search Giphy"
-      size="md"
+      size="lg"
       appearance="neutral"
       name={'general.bolt'}
       onPress={() => setUsingGiphy(true)}
       disabled={text.length > GIPHY_MAX_LENGTH}
+      style={styles.formButton}
     />
   )
 }
@@ -412,6 +456,7 @@ function EditingIndicator() {
 const useMessageFormStyles = () => {
   const theme = useTheme()
   const navigationTheme = useNavigationTheme()
+  const buttonSize = 38
 
   return StyleSheet.create({
     container: {
@@ -422,8 +467,8 @@ const useMessageFormStyles = () => {
     textInputContainer: {
       backgroundColor: navigationTheme.colors.card,
       flexDirection: 'row',
-      alignItems: 'center',
-      gap: 12,
+      alignItems: 'flex-end',
+      gap: 16,
     },
     textInputBoundary: {
       borderRadius: 24,
@@ -439,12 +484,13 @@ const useMessageFormStyles = () => {
     },
     textInput: {
       paddingVertical: 8,
-      paddingHorizontal: 20,
+      paddingHorizontal: 16,
       color: theme.colors.textColorDefaultPrimary,
       textAlignVertical: 'center',
       justifyContent: 'center',
       flex: 1,
       fontSize: 16,
+      maxHeight: 200,
     },
     textInputWithGiphy: {
       paddingLeft: 0,
@@ -460,20 +506,51 @@ const useMessageFormStyles = () => {
       fontSize: 14,
       color: theme.colors.interaction,
     },
-    textInputSend: {
-      borderRadius: 24,
-      height: 36,
-      width: 36,
+    formButton: {
+      height: buttonSize,
+    },
+    submitPressableWrapper: {
+      borderRadius: buttonSize,
+      overflow: 'hidden',
+    },
+    submitGradientWrapper: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: buttonSize,
+      height: buttonSize,
+      width: buttonSize,
+    },
+    submitIcon: {
+      fontSize: 16,
+      color: tokens.colorNeutral100White,
+    },
+    submitIconDisabled: {
+      color: theme.colors.iconColorDefaultDisabled,
     },
     attachmentPicker: {
       position: 'relative',
     },
-    attachmentPickerButtons: {
+    attachmentPickerButtonsContainer: {
       position: 'absolute',
       left: 0,
       bottom: 40,
       zIndex: 10,
-      gap: 16,
+      gap: 12,
+    },
+    attachmentPickerButton: {
+      backgroundColor: theme.colors.fillColorNeutral070,
+      borderRadius: 20,
+      height: buttonSize,
+      width: buttonSize,
+      elevation: 3,
+      ...Platform.select({
+        ios: {
+          borderWidth: 1,
+          borderColor: theme.colors.borderColorDefaultBase,
+        },
+        default: null,
+      }),
     },
     messageFormAttachments: {
       flexDirection: 'row',