@planningcenter/chat-react-native 4.4.1-qa-staging.4 → 4.4.1-qa-staging.6

package/build/screens/send_giphy_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"send_giphy_screen.js","names":["StackActions","useNavigation","React","Image","NativeImage","Platform","StyleSheet","useWindowDimensions","View","Button","IconButton","TextButton","DefaultLoading","BlankState","FormSheet","getFormSheetScreenOptions","useCreateAndroidRippleColor","useTheme","useGiphy","useMessageCreateOrUpdate","tokens","jsx","_jsx","jsxs","_jsxs","SendGiphyScreenOptions","headerTitle","sheetAllowedDetents","select","android","default","SendGiphyScreen","t0","$","_c","route","conversation_id","search_term","params","styles","useStyles","navigation","t1","conversationId","isPending","mutate","isSearching","result","nextResult","prevResult","disabled","width","size","t2","Symbol","for","Imagery","name","t3","Content","children","Heading","Text","t4","onPress","goBack","title","t5","blankState","Root","style","t6","blankStateContainer","contentStyle","gif","giphy","fixed_width","url","clearInput","undefined","routes","getState","conversationParams","find","_temp","dispatch","popTo","clear_input","sendGiphy","text","attachments","uri","poweredByGiphyImage","alt","source","poweredByGiphyContainer","t7","PaginateButton","accessibilityLabel","t8","t9","paginateButtonGroup","t10","maxFontSizeMultiplier","accessibilityHint","t11","t12","formButtonGroup","t13","controlToolbar","accessibilityRole","t14","image","height","t15","container","r","colors","interaction","color","androidRippleColor","paginateButtonDisabled","paginateButton","borderless","foreground","appearance","android_ripple","fillColorButtonNeutralSolidDisabled","create","paddingTop","paddingHorizontal","gap","paddingVertical","flex","flexGrow","alignSelf","padding","borderRadius","backgroundColor","colorNeutral68","flexDirection","justifyContent","alignItems","borderColor","borderWidth","overflow","maxWidth"],"sources":["../../src/screens/send_giphy_screen.tsx"],"sourcesContent":["import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { Image as NativeImage, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { Button, IconButton, IconString, TextButton } from '../components'\nimport { DefaultLoading } from '../components/page/loading'\nimport BlankState from '../components/primitive/blank_state_primitive'\nimport FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'\nimport { useCreateAndroidRippleColor, useTheme } from '../hooks'\nimport { useGiphy } from '../hooks/use_giphy'\nimport { useMessageCreateOrUpdate } from '../hooks/use_message_create_or_update'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport const SendGiphyScreenOptions = getFormSheetScreenOptions({\n  headerTitle: 'Send Giphy',\n  sheetAllowedDetents: Platform.select({ android: [0.7, 0.94], default: [0.7, 1] }),\n})\n\nexport type SendGiphyScreenProps = StaticScreenProps<{\n  conversation_id: number\n  search_term: string\n}>\n\nexport function SendGiphyScreen({ route }: SendGiphyScreenProps) {\n  const { conversation_id, search_term } = route.params\n  const styles = useStyles()\n  const navigation = useNavigation()\n\n  const { isPending, mutate } = useMessageCreateOrUpdate({\n    conversationId: conversation_id,\n  })\n  const { isSearching, result, nextResult, prevResult } = useGiphy(search_term)\n  const disabled = isPending || isSearching\n\n  const { width } = useWindowDimensions()\n  const size = width - 24\n\n  if (!result)\n    return (\n      <FormSheet.Root contentStyle={styles.blankStateContainer}>\n        <BlankState.Root style={styles.blankState}>\n          <BlankState.Imagery name=\"general.bolt\" />\n          <BlankState.Content>\n            <BlankState.Heading>No Giphys found</BlankState.Heading>\n            <BlankState.Text>Try a different search term.</BlankState.Text>\n          </BlankState.Content>\n          <BlankState.Button onPress={() => navigation.goBack()} title=\"Close\" />\n        </BlankState.Root>\n      </FormSheet.Root>\n    )\n\n  const gif = result.giphy.fixed_width\n  const { url } = gif\n\n  function goBack({ clearInput = false }) {\n    if (clearInput) {\n      const routes = navigation.getState()?.routes || []\n      const conversationParams = routes.find(r => r.name === 'Conversation')?.params || {}\n\n      navigation.dispatch(\n        StackActions.popTo('Conversation', {\n          ...conversationParams,\n          conversation_id,\n          clear_input: true,\n        })\n      )\n    } else {\n      navigation.goBack()\n    }\n  }\n\n  function sendGiphy() {\n    if (disabled) return\n\n    mutate({ text: '', attachments: [result] })\n    goBack({ clearInput: true })\n  }\n\n  return (\n    <FormSheet.Root contentStyle={styles.container}>\n      <View style={styles.poweredByGiphyContainer}>\n        <NativeImage\n          alt=\"Powered by Giphy\"\n          style={styles.poweredByGiphyImage}\n          source={{ uri: poweredByGiphyImage }}\n        />\n      </View>\n      <View style={styles.controlToolbar} accessibilityRole=\"toolbar\">\n        <View style={styles.paginateButtonGroup}>\n          <PaginateButton\n            name=\"general.leftArrow\"\n            accessibilityLabel=\"Previous Giphy\"\n            onPress={prevResult}\n            disabled={disabled}\n          />\n          <PaginateButton\n            name=\"general.rightArrow\"\n            accessibilityLabel=\"Next GIF\"\n            onPress={nextResult}\n            disabled={disabled}\n          />\n        </View>\n        <View style={styles.formButtonGroup}>\n          <TextButton\n            onPress={() => goBack({ clearInput: false })}\n            maxFontSizeMultiplier={1}\n            accessibilityHint=\"Cancels the Giphy selection and closes this modal.\"\n          >\n            Cancel\n          </TextButton>\n          <Button\n            onPress={sendGiphy}\n            title=\"Send\"\n            size=\"lg\"\n            disabled={disabled}\n            maxFontSizeMultiplier={1}\n            accessibilityLabel=\"Send Giphy\"\n            accessibilityHint=\"Sends the selected Giphy as a message to the conversation.\"\n          />\n        </View>\n      </View>\n      {isSearching ? (\n        <DefaultLoading />\n      ) : (\n        <NativeImage\n          source={{ uri: url }}\n          alt={result.title}\n          style={[styles.image, { width: size, height: size }]}\n        />\n      )}\n    </FormSheet.Root>\n  )\n}\n\ninterface PaginateButtonProps {\n  name: IconString\n  accessibilityLabel: string\n  onPress: () => void\n  disabled: boolean\n}\n\nfunction PaginateButton({ name, accessibilityLabel, onPress, disabled }: PaginateButtonProps) {\n  const styles = useStyles()\n  const { colors } = useTheme()\n  const androidRippleColor = useCreateAndroidRippleColor({ color: colors.interaction })\n\n  return (\n    <IconButton\n      name={name}\n      accessibilityLabel={accessibilityLabel}\n      size=\"md\"\n      appearance=\"interaction\"\n      onPress={onPress}\n      disabled={disabled}\n      style={[styles.paginateButton, disabled && styles.paginateButtonDisabled]}\n      android_ripple={{\n        color: androidRippleColor,\n        borderless: true,\n        foreground: true,\n      }}\n      maxFontSizeMultiplier={1}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      paddingTop: 32,\n      paddingHorizontal: 16,\n      gap: 8,\n    },\n    blankStateContainer: {\n      paddingVertical: 64,\n    },\n    blankState: {\n      flex: 0,\n      flexGrow: 1,\n    },\n    poweredByGiphyContainer: {\n      alignSelf: 'flex-start',\n      padding: 4,\n      borderRadius: 4,\n      backgroundColor: colors.name === 'dark' ? tokens.colorNeutral68 : 'transparent',\n    },\n    poweredByGiphyImage: {\n      width: 170,\n      height: 20,\n    },\n    controlToolbar: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n    },\n    formButtonGroup: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 16,\n    },\n    paginateButtonGroup: {\n      flexDirection: 'row',\n      gap: 8,\n    },\n    paginateButton: {\n      borderColor: colors.interaction,\n      borderWidth: 1,\n      height: 28,\n      paddingHorizontal: 12,\n      borderRadius: 16,\n      overflow: 'hidden',\n    },\n    paginateButtonDisabled: {\n      backgroundColor: colors.fillColorButtonNeutralSolidDisabled,\n      borderColor: colors.fillColorButtonNeutralSolidDisabled,\n    },\n    image: {\n      borderRadius: 8,\n      maxWidth: '100%',\n    },\n  })\n}\n\nconst poweredByGiphyImage = `data:image/png;base64,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`\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"send_giphy_screen.js","names":["StackActions","useNavigation","React","Image","NativeImage","Platform","StyleSheet","useWindowDimensions","View","Button","IconButton","TextButton","DefaultLoading","BlankState","FormSheet","getFormSheetScreenOptions","useCreateAndroidRippleColor","useTheme","useGiphy","useMessageCreateOrUpdate","tokens","jsx","_jsx","jsxs","_jsxs","SendGiphyScreenOptions","headerTitle","sheetAllowedDetents","select","android","default","SendGiphyScreen","t0","$","_c","route","conversation_id","reply_root_id","search_term","params","styles","useStyles","navigation","t1","conversationId","replyRootId","isPending","mutate","isSearching","result","nextResult","prevResult","disabled","width","size","t2","Symbol","for","Imagery","name","t3","Content","children","Heading","Text","t4","onPress","goBack","title","t5","blankState","Root","style","t6","blankStateContainer","contentStyle","gif","giphy","fixed_width","url","clearInput","undefined","routeName","routes","getState","conversationParams","findLast","r","dispatch","popTo","clear_input","sendGiphy","text","attachments","uri","poweredByGiphyImage","alt","source","poweredByGiphyContainer","t7","PaginateButton","accessibilityLabel","t8","t9","paginateButtonGroup","t10","maxFontSizeMultiplier","accessibilityHint","t11","t12","formButtonGroup","t13","controlToolbar","accessibilityRole","t14","image","height","t15","container","colors","interaction","color","androidRippleColor","paginateButtonDisabled","paginateButton","borderless","foreground","appearance","android_ripple","fillColorButtonNeutralSolidDisabled","create","paddingTop","paddingHorizontal","gap","paddingVertical","flex","flexGrow","alignSelf","padding","borderRadius","backgroundColor","colorNeutral68","flexDirection","justifyContent","alignItems","borderColor","borderWidth","overflow","maxWidth"],"sources":["../../src/screens/send_giphy_screen.tsx"],"sourcesContent":["import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { Image as NativeImage, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { Button, IconButton, IconString, TextButton } from '../components'\nimport { DefaultLoading } from '../components/page/loading'\nimport BlankState from '../components/primitive/blank_state_primitive'\nimport FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'\nimport { useCreateAndroidRippleColor, useTheme } from '../hooks'\nimport { useGiphy } from '../hooks/use_giphy'\nimport { useMessageCreateOrUpdate } from '../hooks/use_message_create_or_update'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport const SendGiphyScreenOptions = getFormSheetScreenOptions({\n  headerTitle: 'Send Giphy',\n  sheetAllowedDetents: Platform.select({ android: [0.7, 0.94], default: [0.7, 1] }),\n})\n\nexport type SendGiphyScreenProps = StaticScreenProps<{\n  conversation_id: number\n  reply_root_id?: string | null\n  search_term: string\n}>\n\nexport function SendGiphyScreen({ route }: SendGiphyScreenProps) {\n  const { conversation_id, reply_root_id, search_term } = route.params\n  const styles = useStyles()\n  const navigation = useNavigation()\n\n  const { isPending, mutate } = useMessageCreateOrUpdate({\n    conversationId: conversation_id,\n    replyRootId: reply_root_id,\n  })\n  const { isSearching, result, nextResult, prevResult } = useGiphy(search_term)\n  const disabled = isPending || isSearching\n\n  const { width } = useWindowDimensions()\n  const size = width - 24\n\n  if (!result)\n    return (\n      <FormSheet.Root contentStyle={styles.blankStateContainer}>\n        <BlankState.Root style={styles.blankState}>\n          <BlankState.Imagery name=\"general.bolt\" />\n          <BlankState.Content>\n            <BlankState.Heading>No Giphys found</BlankState.Heading>\n            <BlankState.Text>Try a different search term.</BlankState.Text>\n          </BlankState.Content>\n          <BlankState.Button onPress={() => navigation.goBack()} title=\"Close\" />\n        </BlankState.Root>\n      </FormSheet.Root>\n    )\n\n  const gif = result.giphy.fixed_width\n  const { url } = gif\n\n  function goBack({ clearInput = false }) {\n    if (clearInput) {\n      const routeName = reply_root_id ? 'ConversationReply' : 'Conversation'\n      const routes = navigation.getState()?.routes || []\n      const conversationParams = routes.findLast(r => r.name === routeName)?.params || {}\n\n      navigation.dispatch(\n        StackActions.popTo(routeName, {\n          ...conversationParams,\n          conversation_id,\n          clear_input: true,\n        })\n      )\n    } else {\n      navigation.goBack()\n    }\n  }\n\n  function sendGiphy() {\n    if (disabled) return\n\n    mutate({ text: '', attachments: [result] })\n    goBack({ clearInput: true })\n  }\n\n  return (\n    <FormSheet.Root contentStyle={styles.container}>\n      <View style={styles.poweredByGiphyContainer}>\n        <NativeImage\n          alt=\"Powered by Giphy\"\n          style={styles.poweredByGiphyImage}\n          source={{ uri: poweredByGiphyImage }}\n        />\n      </View>\n      <View style={styles.controlToolbar} accessibilityRole=\"toolbar\">\n        <View style={styles.paginateButtonGroup}>\n          <PaginateButton\n            name=\"general.leftArrow\"\n            accessibilityLabel=\"Previous Giphy\"\n            onPress={prevResult}\n            disabled={disabled}\n          />\n          <PaginateButton\n            name=\"general.rightArrow\"\n            accessibilityLabel=\"Next GIF\"\n            onPress={nextResult}\n            disabled={disabled}\n          />\n        </View>\n        <View style={styles.formButtonGroup}>\n          <TextButton\n            onPress={() => goBack({ clearInput: false })}\n            maxFontSizeMultiplier={1}\n            accessibilityHint=\"Cancels the Giphy selection and closes this modal.\"\n          >\n            Cancel\n          </TextButton>\n          <Button\n            onPress={sendGiphy}\n            title=\"Send\"\n            size=\"lg\"\n            disabled={disabled}\n            maxFontSizeMultiplier={1}\n            accessibilityLabel=\"Send Giphy\"\n            accessibilityHint=\"Sends the selected Giphy as a message to the conversation.\"\n          />\n        </View>\n      </View>\n      {isSearching ? (\n        <DefaultLoading />\n      ) : (\n        <NativeImage\n          source={{ uri: url }}\n          alt={result.title}\n          style={[styles.image, { width: size, height: size }]}\n        />\n      )}\n    </FormSheet.Root>\n  )\n}\n\ninterface PaginateButtonProps {\n  name: IconString\n  accessibilityLabel: string\n  onPress: () => void\n  disabled: boolean\n}\n\nfunction PaginateButton({ name, accessibilityLabel, onPress, disabled }: PaginateButtonProps) {\n  const styles = useStyles()\n  const { colors } = useTheme()\n  const androidRippleColor = useCreateAndroidRippleColor({ color: colors.interaction })\n\n  return (\n    <IconButton\n      name={name}\n      accessibilityLabel={accessibilityLabel}\n      size=\"md\"\n      appearance=\"interaction\"\n      onPress={onPress}\n      disabled={disabled}\n      style={[styles.paginateButton, disabled && styles.paginateButtonDisabled]}\n      android_ripple={{\n        color: androidRippleColor,\n        borderless: true,\n        foreground: true,\n      }}\n      maxFontSizeMultiplier={1}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      paddingTop: 32,\n      paddingHorizontal: 16,\n      gap: 8,\n    },\n    blankStateContainer: {\n      paddingVertical: 64,\n    },\n    blankState: {\n      flex: 0,\n      flexGrow: 1,\n    },\n    poweredByGiphyContainer: {\n      alignSelf: 'flex-start',\n      padding: 4,\n      borderRadius: 4,\n      backgroundColor: colors.name === 'dark' ? tokens.colorNeutral68 : 'transparent',\n    },\n    poweredByGiphyImage: {\n      width: 170,\n      height: 20,\n    },\n    controlToolbar: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n    },\n    formButtonGroup: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 16,\n    },\n    paginateButtonGroup: {\n      flexDirection: 'row',\n      gap: 8,\n    },\n    paginateButton: {\n      borderColor: colors.interaction,\n      borderWidth: 1,\n      height: 28,\n      paddingHorizontal: 12,\n      borderRadius: 16,\n      overflow: 'hidden',\n    },\n    paginateButtonDisabled: {\n      backgroundColor: colors.fillColorButtonNeutralSolidDisabled,\n      borderColor: colors.fillColorButtonNeutralSolidDisabled,\n    },\n    image: {\n      borderRadius: 8,\n      maxWidth: '100%',\n    },\n  })\n}\n\nconst poweredByGiphyImage = `data:image/png;base64,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`\n"],"mappings":"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","ignoreList":[]}

package/build/utils/styles.d.ts

@@ -2,6 +2,7 @@ export declare const MAX_FONT_SIZE_MULTIPLIER = 1.5;
 export declare const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2;
 export declare const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16;
 export declare const MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH = 32;
+export declare const MESSAGE_BACKGROUND_OUTSET = 2;
 export declare const platformFontWeightMedium: "500" | "700" | undefined;
 export declare const platformFontWeightBold: "600" | "700" | undefined;
 export declare const platformPressedOpacityStyle: {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,wBAAwB,MAAM,CAAA;AAC3C,eAAO,MAAM,iCAAiC,MAAM,CAAA;AAEpD,eAAO,MAAM,4CAA4C,KAAK,CAAA;AAC9D,eAAO,MAAM,kCAAkC,KAAK,CAAA;AAEpD,eAAO,MAAM,wBAAwB,2BAGnC,CAAA;AAEF,eAAO,MAAM,sBAAsB,2BAGjC,CAAA;AAEF,eAAO,MAAM,2BAA2B;;aAGtC,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,wBAAwB,MAAM,CAAA;AAC3C,eAAO,MAAM,iCAAiC,MAAM,CAAA;AAEpD,eAAO,MAAM,4CAA4C,KAAK,CAAA;AAC9D,eAAO,MAAM,kCAAkC,KAAK,CAAA;AACpD,eAAO,MAAM,yBAAyB,IAAI,CAAA;AAE1C,eAAO,MAAM,wBAAwB,2BAGnC,CAAA;AAEF,eAAO,MAAM,sBAAsB,2BAGjC,CAAA;AAEF,eAAO,MAAM,2BAA2B;;aAGtC,CAAA"}

package/build/utils/styles.js

@@ -5,7 +5,7 @@ export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2; // Use in headers, footers
 
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16; // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
 export const MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH = 32; // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
-
+export const MESSAGE_BACKGROUND_OUTSET = 2;
 export const platformFontWeightMedium = Platform.select({
   ios: tokens.fontWeightMedium,
   android: tokens.fontWeightBold

package/build/utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["Platform","tokens","MAX_FONT_SIZE_MULTIPLIER","MAX_FONT_SIZE_MULTIPLIER_LANDMARK","CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL","MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH","platformFontWeightMedium","select","ios","fontWeightMedium","android","fontWeightBold","platformFontWeightBold","fontWeightSemiBold","platformPressedOpacityStyle","opacity"],"sources":["../../src/utils/styles.ts"],"sourcesContent":["import { Platform } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport const MAX_FONT_SIZE_MULTIPLIER = 1.5\nexport const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers, toolbars, etc.\n\nexport const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created\nexport const MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH = 32 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created\n\nexport const platformFontWeightMedium = Platform.select({\n  ios: tokens.fontWeightMedium,\n  android: tokens.fontWeightBold,\n})\n\nexport const platformFontWeightBold = Platform.select({\n  ios: tokens.fontWeightSemiBold,\n  android: tokens.fontWeightBold,\n})\n\nexport const platformPressedOpacityStyle = Platform.select({\n  ios: { opacity: 0.5 },\n  android: { opacity: 1 },\n})\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,MAAM,QAAQ,2BAA2B;AAElD,OAAO,MAAMC,wBAAwB,GAAG,GAAG;AAC3C,OAAO,MAAMC,iCAAiC,GAAG,GAAG,EAAC;;AAErD,OAAO,MAAMC,4CAA4C,GAAG,EAAE,EAAC;AAC/D,OAAO,MAAMC,kCAAkC,GAAG,EAAE,EAAC;;AAErD,OAAO,MAAMC,wBAAwB,GAAGN,QAAQ,CAACO,MAAM,CAAC;EACtDC,GAAG,EAAEP,MAAM,CAACQ,gBAAgB;EAC5BC,OAAO,EAAET,MAAM,CAACU;AAClB,CAAC,CAAC;AAEF,OAAO,MAAMC,sBAAsB,GAAGZ,QAAQ,CAACO,MAAM,CAAC;EACpDC,GAAG,EAAEP,MAAM,CAACY,kBAAkB;EAC9BH,OAAO,EAAET,MAAM,CAACU;AAClB,CAAC,CAAC;AAEF,OAAO,MAAMG,2BAA2B,GAAGd,QAAQ,CAACO,MAAM,CAAC;EACzDC,GAAG,EAAE;IAAEO,OAAO,EAAE;EAAI,CAAC;EACrBL,OAAO,EAAE;IAAEK,OAAO,EAAE;EAAE;AACxB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"styles.js","names":["Platform","tokens","MAX_FONT_SIZE_MULTIPLIER","MAX_FONT_SIZE_MULTIPLIER_LANDMARK","CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL","MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH","MESSAGE_BACKGROUND_OUTSET","platformFontWeightMedium","select","ios","fontWeightMedium","android","fontWeightBold","platformFontWeightBold","fontWeightSemiBold","platformPressedOpacityStyle","opacity"],"sources":["../../src/utils/styles.ts"],"sourcesContent":["import { Platform } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport const MAX_FONT_SIZE_MULTIPLIER = 1.5\nexport const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers, toolbars, etc.\n\nexport const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created\nexport const MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH = 32 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created\nexport const MESSAGE_BACKGROUND_OUTSET = 2\n\nexport const platformFontWeightMedium = Platform.select({\n  ios: tokens.fontWeightMedium,\n  android: tokens.fontWeightBold,\n})\n\nexport const platformFontWeightBold = Platform.select({\n  ios: tokens.fontWeightSemiBold,\n  android: tokens.fontWeightBold,\n})\n\nexport const platformPressedOpacityStyle = Platform.select({\n  ios: { opacity: 0.5 },\n  android: { opacity: 1 },\n})\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,MAAM,QAAQ,2BAA2B;AAElD,OAAO,MAAMC,wBAAwB,GAAG,GAAG;AAC3C,OAAO,MAAMC,iCAAiC,GAAG,GAAG,EAAC;;AAErD,OAAO,MAAMC,4CAA4C,GAAG,EAAE,EAAC;AAC/D,OAAO,MAAMC,kCAAkC,GAAG,EAAE,EAAC;AACrD,OAAO,MAAMC,yBAAyB,GAAG,CAAC;AAE1C,OAAO,MAAMC,wBAAwB,GAAGP,QAAQ,CAACQ,MAAM,CAAC;EACtDC,GAAG,EAAER,MAAM,CAACS,gBAAgB;EAC5BC,OAAO,EAAEV,MAAM,CAACW;AAClB,CAAC,CAAC;AAEF,OAAO,MAAMC,sBAAsB,GAAGb,QAAQ,CAACQ,MAAM,CAAC;EACpDC,GAAG,EAAER,MAAM,CAACa,kBAAkB;EAC9BH,OAAO,EAAEV,MAAM,CAACW;AAClB,CAAC,CAAC;AAEF,OAAO,MAAMG,2BAA2B,GAAGf,QAAQ,CAACQ,MAAM,CAAC;EACzDC,GAAG,EAAE;IAAEO,OAAO,EAAE;EAAI,CAAC;EACrBL,OAAO,EAAE;IAAEK,OAAO,EAAE;EAAE;AACxB,CAAC,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.4.1-qa-staging.4",
+  "version": "4.4.1-qa-staging.6",
   "description": "",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@planningcenter/emoji-keyboard": "4.4.1-qa-staging.4",
+    "@planningcenter/emoji-keyboard": "4.4.1-qa-staging.6",
     "lodash-inflection": "^1.5.0"
   },
   "peerDependencies": {
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "21ccfd47cbb274d4897612a0de08c7029dce3928"
+  "gitHead": "518620bb1f17b21e07a211c0129b9265511da2b5"
 }

package/src/__tests__/screens/send_giphy_screen.test.tsx

@@ -0,0 +1,102 @@
+import { HeaderHeightContext } from '@react-navigation/elements'
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { QueryClientProvider, notifyManager } from '@tanstack/react-query'
+import { act, fireEvent, render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { chatQueryClient } from '../../contexts/api_provider'
+import { SendGiphyScreen, SendGiphyScreenProps } from '../../screens/send_giphy_screen'
+
+jest.mock('../../contexts/api_provider', () => {
+  const { buildTestQueryClient } = require('../../__utils__/query_client')
+  return { chatQueryClient: buildTestQueryClient() }
+})
+
+const mockPost = jest.fn()
+jest.mock('../../hooks/use_api_client', () => ({
+  useApiClient: () => ({ chat: { post: mockPost, patch: jest.fn() } }),
+}))
+
+jest.mock('../../hooks/use_current_person', () => ({
+  useCurrentPerson: () => ({ type: 'Person', id: 1, name: 'Me', avatar: null }),
+}))
+
+jest.mock('../../hooks/use_giphy', () => ({
+  useGiphy: () => ({
+    isSearching: false,
+    result: { type: 'giphy', title: 'cat', giphy: { fixed_width: { url: 'https://gif' } } },
+    nextResult: jest.fn(),
+    prevResult: jest.fn(),
+  }),
+}))
+
+const mockDispatch = jest.fn()
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({
+    dispatch: mockDispatch,
+    goBack: jest.fn(),
+    getState: () => ({
+      routes: [
+        { name: 'Conversation', params: { conversation_id: 7 } },
+        { name: 'ConversationReply', params: { conversation_id: 7, reply_root_id: '42' } },
+        { name: 'SendGiphy' },
+      ],
+    }),
+  }),
+}))
+
+notifyManager.setNotifyFunction(fn => act(fn))
+
+const safeAreaMetrics = {
+  frame: { x: 0, y: 0, width: 390, height: 844 },
+  insets: { top: 0, right: 0, bottom: 0, left: 0 },
+}
+
+describe('SendGiphyScreen', () => {
+  let finishSend: (value: unknown) => void
+
+  beforeEach(() => {
+    chatQueryClient.clear()
+    mockDispatch.mockReset()
+    mockPost.mockReset().mockReturnValue(new Promise(resolve => (finishSend = resolve)))
+  })
+
+  afterEach(async () => {
+    await act(async () => finishSend({ data: { type: 'Message', id: 'sent', mine: true } }))
+  })
+
+  it('sends from a reply thread as a reply and returns to the thread', async () => {
+    const route = {
+      params: { conversation_id: 7, reply_root_id: '42', search_term: 'cat' },
+    } as unknown as SendGiphyScreenProps['route']
+
+    render(
+      <QueryClientProvider client={chatQueryClient}>
+        <SafeAreaProvider initialMetrics={safeAreaMetrics}>
+          <ThemeProvider value={DefaultTheme}>
+            <HeaderHeightContext.Provider value={0}>
+              <SendGiphyScreen route={route} />
+            </HeaderHeightContext.Provider>
+          </ThemeProvider>
+        </SafeAreaProvider>
+      </QueryClientProvider>
+    )
+
+    await act(async () => {
+      fireEvent.press(screen.getByLabelText('Send Giphy'))
+    })
+
+    const [{ data }] = mockPost.mock.calls[0]
+    expect(data.data.attributes.reply_root).toEqual({ id: '42' })
+    expect(mockDispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'POP_TO',
+        payload: expect.objectContaining({
+          name: 'ConversationReply',
+          params: expect.objectContaining({ reply_root_id: '42', clear_input: true }),
+        }),
+      })
+    )
+  })
+})

package/src/components/conversation/message.tsx

@@ -30,6 +30,7 @@ import { Haptic } from '../../utils/native_adapters'
 import {
   CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
   MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+  MESSAGE_BACKGROUND_OUTSET,
   platformFontWeightMedium,
 } from '../../utils/styles'
 import { ComponentErrorBoundary } from '../page/component_error_boundary'
@@ -225,7 +226,14 @@ export const Message = memo(function MessageRow({
       onAccessibilityAction={isReplyRootMessage ? handleAccessibilityAction : undefined}
       disabled={isDeletedReplyRootMessage || isDeleting}
     >
-      <Animated.View style={[styles.message, animatedBackgroundColor]}>
+      <View style={styles.message}>
+        <Animated.View
+          style={[
+            styles.background,
+            { bottom: messageBottomMargin - MESSAGE_BACKGROUND_OUTSET },
+            animatedBackgroundColor,
+          ]}
+        />
         {!message.mine && (
           <View>
             {renderAuthor ? (
@@ -348,7 +356,7 @@ export const Message = memo(function MessageRow({
         {message.mine && (
           <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
         )}
-      </Animated.View>
+      </View>
     </Pressable>
   )
 })
@@ -368,6 +376,12 @@ const useMessageStyles = (mine: boolean, isDeleting: boolean) => {
       paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
       opacity: isDeleting ? 0.5 : 1,
     },
+    background: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: -MESSAGE_BACKGROUND_OUTSET,
+    },
     messageContent: {
       flex: 1,
       gap: 4,

package/src/components/conversation/message_form.tsx

@@ -214,18 +214,20 @@ function MessageFormRoot({
     if (!Keyboard.isVisible() || Platform.OS === 'ios') {
       navigation.navigate('SendGiphy', {
         conversation_id: conversation.id,
+        reply_root_id: replyRootId,
         search_term: text,
       })
     } else {
       const keyboardListener = Keyboard.addListener('keyboardDidHide', () => {
         navigation.navigate('SendGiphy', {
           conversation_id: conversation.id,
+          reply_root_id: replyRootId,
           search_term: text,
         })
         keyboardListener?.remove()
       })
     }
-  }, [conversation.id, navigation, text])
+  }, [conversation.id, navigation, replyRootId, text])
 
   const catchingUp = useRef(false)
 

package/src/components/conversation/reply_shadow_message.tsx

@@ -24,11 +24,14 @@ import {
   CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
   MAX_FONT_SIZE_MULTIPLIER,
   MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+  MESSAGE_BACKGROUND_OUTSET,
   platformFontWeightMedium,
 } from '../../utils/styles'
 import { Avatar, Icon, IconProps, Image, Text } from '../display'
 import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
 
+const SPACE_BELOW_MESSAGE = 12
+
 interface ReplyShadowMessageProps extends MessageResource {
   messageId: string
   conversation_id: number
@@ -104,7 +107,8 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
       accessibilityHint="Navigate to reply screen for this message"
       accessibilityRole="link"
     >
-      <Animated.View style={[styles.message, animatedBackgroundColor]}>
+      <View style={styles.message}>
+        <Animated.View style={[styles.background, animatedBackgroundColor]} />
         {!message.mine && (
           <View>
             <View style={[styles.avatarWrapper, !isDeleted && styles.avatarOpacity]}>
@@ -145,7 +149,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
         {message.mine && (
           <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
         )}
-      </Animated.View>
+      </View>
     </Pressable>
   )
 }
@@ -287,10 +291,17 @@ const useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}
       flexDirection: mine ? 'row-reverse' : 'row',
       paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
     },
+    background: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: -MESSAGE_BACKGROUND_OUTSET,
+      bottom: SPACE_BELOW_MESSAGE - MESSAGE_BACKGROUND_OUTSET,
+    },
     messageContent: {
       flex: 1,
       gap: 4,
-      marginBottom: 12,
+      marginBottom: SPACE_BELOW_MESSAGE,
     },
     avatarWrapper: {
       width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,

package/src/screens/send_giphy_screen.tsx

@@ -17,16 +17,18 @@ export const SendGiphyScreenOptions = getFormSheetScreenOptions({
 
 export type SendGiphyScreenProps = StaticScreenProps<{
   conversation_id: number
+  reply_root_id?: string | null
   search_term: string
 }>
 
 export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
-  const { conversation_id, search_term } = route.params
+  const { conversation_id, reply_root_id, search_term } = route.params
   const styles = useStyles()
   const navigation = useNavigation()
 
   const { isPending, mutate } = useMessageCreateOrUpdate({
     conversationId: conversation_id,
+    replyRootId: reply_root_id,
   })
   const { isSearching, result, nextResult, prevResult } = useGiphy(search_term)
   const disabled = isPending || isSearching
@@ -53,11 +55,12 @@ export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
 
   function goBack({ clearInput = false }) {
     if (clearInput) {
+      const routeName = reply_root_id ? 'ConversationReply' : 'Conversation'
       const routes = navigation.getState()?.routes || []
-      const conversationParams = routes.find(r => r.name === 'Conversation')?.params || {}
+      const conversationParams = routes.findLast(r => r.name === routeName)?.params || {}
 
       navigation.dispatch(
-        StackActions.popTo('Conversation', {
+        StackActions.popTo(routeName, {
           ...conversationParams,
           conversation_id,
           clear_input: true,

package/src/utils/styles.ts

@@ -6,6 +6,7 @@ export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers,
 
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
 export const MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH = 32 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
+export const MESSAGE_BACKGROUND_OUTSET = 2
 
 export const platformFontWeightMedium = Platform.select({
   ios: tokens.fontWeightMedium,