@planningcenter/chat-react-native 3.2.0-rc.0 → 3.2.0-rc.10

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

@@ -14,7 +14,7 @@ interface MessagesFormRootProps extends ViewProps {
 declare function MessageFormRoot({ conversation, children }: MessagesFormRootProps): React.JSX.Element;
 declare function MessageFormInput(): React.JSX.Element;
 declare function MessageFormSubmitBtn(): React.JSX.Element;
-declare function MessageFormAttachmentPicker(): React.JSX.Element;
-declare function MessageFormCommands(): React.JSX.Element;
+declare function MessageFormAttachmentPicker(): React.JSX.Element | null;
+declare function MessageFormCommands(): React.JSX.Element | null;
 export {};
 //# sourceMappingURL=message_form.d.ts.map

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":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAA;AAKrE,OAAO,EAA8B,oBAAoB,EAAmB,MAAM,aAAa,CAAA;AAG/F,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAA;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,YAAY,EAAE,oBAAoB,CAAA;CACnC;AASD,iBAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,qBA+CzE;AAED,iBAAS,gBAAgB,sBAcxB;AAED,iBAAS,oBAAoB,sBAe5B;AAED,iBAAS,2BAA2B,sBASnC;AAED,iBAAS,mBAAmB,sBAI3B"}
+{"version":3,"file":"message_form.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAA;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAKlD,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAA;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,YAAY,EAAE,oBAAoB,CAAA;CACnC;AAYD,iBAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,qBAsEzE;AAED,iBAAS,gBAAgB,sBAqBxB;AAED,iBAAS,oBAAoB,sBAe5B;AAED,iBAAS,2BAA2B,6BAenC;AAED,iBAAS,mBAAmB,6BA4B3B"}

package/build/components/conversation/message_form.js

@@ -1,12 +1,10 @@
-import { useTheme as useNavigationTheme } from '@react-navigation/native';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import React from 'react';
+import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native';
+import React, { useContext, useEffect, useState } from 'react';
 import { StyleSheet, TextInput, View } from 'react-native';
-import { IconButton } from '../../components';
+import { IconButton, Text } from '../../components';
 import { useTheme } from '../../hooks';
-import { useApiClient } from '../../hooks/use_api_client';
-import { getMessagesQueryKey, getMessagesRequestArgs } from '../../hooks/use_conversation_messages';
-import { updateOrCreateRecordInPagesData } from '../../utils';
+import { useMessageCreate } from '../../hooks/use_message_create';
+import { ChatContext } from '../../contexts/chat_context';
 export const MessageForm = {
     Root: MessageFormRoot,
     TextInput: MessageFormInput,
@@ -19,57 +17,106 @@ const MessageFormContext = React.createContext({
     setText: (_text) => { },
     onSubmit: () => { },
     disabled: false,
+    canGiphy: false,
+    usingGiphy: false,
+    setUsingGiphy: (_usingGiphy) => { },
 });
 function MessageFormRoot({ conversation, children }) {
+    const { giphyApiKey } = useContext(ChatContext);
+    const canGiphy = !!giphyApiKey;
     const styles = useMessageFormStyles();
     const [text, setText] = React.useState('');
-    const apiClient = useApiClient();
-    const queryClient = useQueryClient();
-    const { mutate, isPending } = useMutation({
-        mutationFn: async () => {
-            const requestParams = getMessagesRequestArgs({ conversation_id: conversation.id });
-            const fieldsWithValueJoined = Object.fromEntries(Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')]));
-            return apiClient.chat.post({
-                url: `/me/conversations/${conversation.id}/messages`,
-                data: {
-                    ...requestParams.data,
-                    data: {
-                        type: 'Message',
-                        attributes: { text },
-                    },
-                    fields: fieldsWithValueJoined,
-                },
-            });
-        },
-        onSuccess: (result) => {
-            const updatedMessage = result.data;
-            const queryKey = getMessagesQueryKey({ conversation_id: conversation.id });
+    const [usingGiphy, setUsingGiphy] = useState(false);
+    const navigation = useNavigation();
+    const route = useRoute();
+    const { status, isPending, reset, mutate } = useMessageCreate({ conversationId: conversation.id });
+    useEffect(() => {
+        if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {
+            setUsingGiphy(true);
             setText('');
-            queryClient.setQueryData(queryKey, data => updateOrCreateRecordInPagesData({
-                data,
-                record: updatedMessage,
-            }));
-        },
-    });
-    return (<MessageFormContext.Provider value={{ text, setText, onSubmit: () => mutate(), disabled: isPending }}>
+        }
+    }, [canGiphy, text, usingGiphy]);
+    useEffect(() => {
+        switch (status) {
+            case 'success':
+                setText('');
+                reset();
+                break;
+        }
+    }, [reset, status]);
+    useEffect(() => {
+        if (route.params.clear_input) {
+            setText('');
+            setUsingGiphy(false);
+            navigation.setParams({ ...route.params, clear_input: false });
+        }
+    }, [navigation, route.params]);
+    const canSubmit = (() => {
+        if (isPending)
+            return false;
+        if (text.length > 0)
+            return true;
+        return false;
+    })();
+    const disabled = !canSubmit;
+    const handleSubmit = () => {
+        if (!canSubmit)
+            return;
+        if (canGiphy && usingGiphy) {
+            TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput());
+            navigation.navigate('SendGiphy', {
+                conversation_id: conversation.id,
+                search_term: text,
+            });
+        }
+        else {
+            mutate({ text });
+        }
+    };
+    return (<MessageFormContext.Provider value={{
+            text,
+            setText,
+            onSubmit: handleSubmit,
+            disabled,
+            canGiphy,
+            usingGiphy,
+            setUsingGiphy,
+        }}>
       <View style={styles.textInputContainer}>{children}</View>
     </MessageFormContext.Provider>);
 }
 function MessageFormInput() {
     const styles = useMessageFormStyles();
-    const { text, setText, onSubmit } = React.useContext(MessageFormContext);
-    return (<TextInput aria-disabled={true} placeholder="Send a message" onChangeText={setText} value={text} style={styles.textInput} onSubmitEditing={onSubmit}/>);
+    const { text, setText, onSubmit, usingGiphy } = React.useContext(MessageFormContext);
+    return (<View style={styles.textInput}>
+      {usingGiphy ? (<View style={styles.giphyBadge}>
+          <Text>/Giphy</Text>
+        </View>) : null}
+
+      <TextInput aria-disabled={true} placeholder="Send a message" onChangeText={setText} value={text} onSubmitEditing={onSubmit}/>
+    </View>);
 }
 function MessageFormSubmitBtn() {
     const styles = useMessageFormStyles();
-    const { onSubmit, disabled } = React.useContext(MessageFormContext);
-    return (<IconButton disabled={disabled} accessibilityLabel="Send message" size="md" appearance="neutral" style={styles.textInputSend} name={'general.upArrow'} onPress={onSubmit}/>);
+    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}/>);
 }
 function MessageFormAttachmentPicker() {
+    const { usingGiphy } = React.useContext(MessageFormContext);
+    if (usingGiphy) {
+        return null;
+    }
     return (<IconButton accessibilityLabel="Shazam" size="md" appearance="neutral" name={'general.paperclip'}/>);
 }
 function MessageFormCommands() {
-    return (<IconButton accessibilityLabel="Shazam" size="md" appearance="neutral" name={'general.bolt'}/>);
+    const { canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext);
+    if (!canGiphy) {
+        return null;
+    }
+    if (usingGiphy) {
+        return (<IconButton accessibilityLabel="Exit Giphy Search" size="md" appearance="neutral" name={'general.x'} onPress={() => setUsingGiphy(false)}/>);
+    }
+    return (<IconButton accessibilityLabel="Search Giphy" size="md" appearance="neutral" name={'general.bolt'} onPress={() => setUsingGiphy(true)}/>);
 }
 const useMessageFormStyles = () => {
     const theme = useTheme();
@@ -91,12 +138,19 @@ const useMessageFormStyles = () => {
             paddingHorizontal: 20,
             borderColor: theme.colors.fillColorNeutral050Base,
             flex: 1,
+            flexDirection: 'row',
+            gap: 12,
+        },
+        giphyBadge: {
+            backgroundColor: theme.colors.fillColorNeutral050Base,
+            borderRadius: 24,
+            padding: 8,
+            paddingHorizontal: 12,
         },
         textInputSend: {
             borderRadius: 24,
             height: 36,
             width: 36,
-            backgroundColor: theme.colors.fillColorNeutral040,
         },
     });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"message_form.js","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTheme as useNavigationTheme } from '@react-navigation/native'\nimport { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'\nimport React from 'react'\nimport { StyleSheet, TextInput, View, ViewProps } from 'react-native'\nimport { IconButton } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { useApiClient } from '../../hooks/use_api_client'\nimport { getMessagesQueryKey, getMessagesRequestArgs } from '../../hooks/use_conversation_messages'\nimport { ApiCollection, ApiResource, ConversationResource, MessageResource } from '../../types'\nimport { updateOrCreateRecordInPagesData } from '../../utils'\n\nexport const MessageForm = {\n  Root: MessageFormRoot,\n  TextInput: MessageFormInput,\n  SubmitButton: MessageFormSubmitBtn,\n  AttachmentPicker: MessageFormAttachmentPicker,\n  Commands: MessageFormCommands,\n}\n\ninterface MessagesFormRootProps extends ViewProps {\n  conversation: ConversationResource\n}\n\nconst MessageFormContext = React.createContext({\n  text: '',\n  setText: (_text: string) => {},\n  onSubmit: () => {},\n  disabled: false,\n})\n\nfunction MessageFormRoot({ conversation, children }: MessagesFormRootProps) {\n  const styles = useMessageFormStyles()\n  const [text, setText] = React.useState('')\n  const apiClient = useApiClient()\n  const queryClient = useQueryClient()\n\n  const { mutate, isPending } = useMutation({\n    mutationFn: async () => {\n      const requestParams = getMessagesRequestArgs({ conversation_id: conversation.id })\n      const fieldsWithValueJoined = Object.fromEntries(\n        Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])\n      )\n\n      return apiClient.chat.post({\n        url: `/me/conversations/${conversation.id}/messages`,\n        data: {\n          ...requestParams.data,\n          data: {\n            type: 'Message',\n            attributes: { text },\n          },\n          fields: fieldsWithValueJoined,\n        },\n      })\n    },\n    onSuccess: (result: ApiResource<MessageResource>) => {\n      const updatedMessage = result.data\n      type QueryData = InfiniteData<ApiCollection<MessageResource>>\n      const queryKey = getMessagesQueryKey({ conversation_id: conversation.id })\n\n      setText('')\n      queryClient.setQueryData<QueryData>(queryKey, data =>\n        updateOrCreateRecordInPagesData({\n          data,\n          record: updatedMessage,\n        })\n      )\n    },\n  })\n\n  return (\n    <MessageFormContext.Provider\n      value={{ text, setText, onSubmit: () => mutate(), disabled: isPending }}\n    >\n      <View style={styles.textInputContainer}>{children}</View>\n    </MessageFormContext.Provider>\n  )\n}\n\nfunction MessageFormInput() {\n  const styles = useMessageFormStyles()\n  const { text, setText, onSubmit } = React.useContext(MessageFormContext)\n\n  return (\n    <TextInput\n      aria-disabled={true}\n      placeholder=\"Send a message\"\n      onChangeText={setText}\n      value={text}\n      style={styles.textInput}\n      onSubmitEditing={onSubmit}\n    />\n  )\n}\n\nfunction MessageFormSubmitBtn() {\n  const styles = useMessageFormStyles()\n  const { onSubmit, disabled } = React.useContext(MessageFormContext)\n\n  return (\n    <IconButton\n      disabled={disabled}\n      accessibilityLabel=\"Send message\"\n      size=\"md\"\n      appearance=\"neutral\"\n      style={styles.textInputSend}\n      name={'general.upArrow'}\n      onPress={onSubmit}\n    />\n  )\n}\n\nfunction MessageFormAttachmentPicker() {\n  return (\n    <IconButton\n      accessibilityLabel=\"Shazam\"\n      size=\"md\"\n      appearance=\"neutral\"\n      name={'general.paperclip'}\n    />\n  )\n}\n\nfunction MessageFormCommands() {\n  return (\n    <IconButton accessibilityLabel=\"Shazam\" size=\"md\" appearance=\"neutral\" name={'general.bolt'} />\n  )\n}\n\nconst useMessageFormStyles = () => {\n  const theme = useTheme()\n  const navigationTheme = useNavigationTheme()\n\n  return StyleSheet.create({\n    textInputContainer: {\n      borderColor: theme.colors.fillColorNeutral050Base,\n      borderTopWidth: 1,\n      padding: 12,\n      backgroundColor: navigationTheme.colors.card,\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n    },\n    textInput: {\n      borderRadius: 24,\n      borderWidth: 1,\n      padding: 12,\n      paddingHorizontal: 20,\n      borderColor: theme.colors.fillColorNeutral050Base,\n      flex: 1,\n    },\n    textInputSend: {\n      borderRadius: 24,\n      height: 36,\n      width: 36,\n      backgroundColor: theme.colors.fillColorNeutral040,\n    },\n  })\n}\n"]}
+{"version":3,"file":"message_form.js","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'\nimport React, { useContext, useEffect, useState } from 'react'\nimport { StyleSheet, TextInput, View, ViewProps } from 'react-native'\nimport { IconButton, Text } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { ConversationResource } from '../../types'\nimport { useMessageCreate } from '../../hooks/use_message_create'\nimport { ConversationScreenProps } from '../../screens/conversation_screen'\nimport { ChatContext } from '../../contexts/chat_context'\n\nexport const MessageForm = {\n  Root: MessageFormRoot,\n  TextInput: MessageFormInput,\n  SubmitButton: MessageFormSubmitBtn,\n  AttachmentPicker: MessageFormAttachmentPicker,\n  Commands: MessageFormCommands,\n}\n\ninterface MessagesFormRootProps extends ViewProps {\n  conversation: ConversationResource\n}\n\nconst MessageFormContext = React.createContext({\n  text: '',\n  setText: (_text: string) => {},\n  onSubmit: () => {},\n  disabled: false,\n  canGiphy: false,\n  usingGiphy: false,\n  setUsingGiphy: (_usingGiphy: boolean) => {},\n})\n\nfunction MessageFormRoot({ conversation, children }: MessagesFormRootProps) {\n  const { giphyApiKey } = useContext(ChatContext)\n  const canGiphy = !!giphyApiKey\n  const styles = useMessageFormStyles()\n  const [text, setText] = React.useState('')\n  const [usingGiphy, setUsingGiphy] = useState(false)\n  const navigation = useNavigation()\n  const route = useRoute() as ConversationScreenProps['route']\n  const { status, isPending, reset, mutate } = useMessageCreate({ conversationId: conversation.id })\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        setText('')\n        reset()\n        break\n    }\n  }, [reset, status])\n\n  useEffect(() => {\n    if (route.params.clear_input) {\n      setText('')\n      setUsingGiphy(false)\n      navigation.setParams({ ...route.params, clear_input: false })\n    }\n  }, [navigation, route.params])\n\n  const canSubmit = (() => {\n    if (isPending) return false\n    if (text.length > 0) 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      mutate({ text })\n    }\n  }\n\n  return (\n    <MessageFormContext.Provider\n      value={{\n        text,\n        setText,\n        onSubmit: handleSubmit,\n        disabled,\n        canGiphy,\n        usingGiphy,\n        setUsingGiphy,\n      }}\n    >\n      <View style={styles.textInputContainer}>{children}</View>\n    </MessageFormContext.Provider>\n  )\n}\n\nfunction MessageFormInput() {\n  const styles = useMessageFormStyles()\n  const { text, setText, onSubmit, usingGiphy } = React.useContext(MessageFormContext)\n\n  return (\n    <View style={styles.textInput}>\n      {usingGiphy ? (\n        <View style={styles.giphyBadge}>\n          <Text>/Giphy</Text>\n        </View>\n      ) : null}\n\n      <TextInput\n        aria-disabled={true}\n        placeholder=\"Send a message\"\n        onChangeText={setText}\n        value={text}\n        onSubmitEditing={onSubmit}\n      />\n    </View>\n  )\n}\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 { usingGiphy } = React.useContext(MessageFormContext)\n\n  if (usingGiphy) {\n    return null\n  }\n\n  return (\n    <IconButton\n      accessibilityLabel=\"Shazam\"\n      size=\"md\"\n      appearance=\"neutral\"\n      name={'general.paperclip'}\n    />\n  )\n}\n\nfunction MessageFormCommands() {\n  const { canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)\n\n  if (!canGiphy) {\n    return null\n  }\n\n  if (usingGiphy) {\n    return (\n      <IconButton\n        accessibilityLabel=\"Exit Giphy Search\"\n        size=\"md\"\n        appearance=\"neutral\"\n        name={'general.x'}\n        onPress={() => setUsingGiphy(false)}\n      />\n    )\n  }\n\n  return (\n    <IconButton\n      accessibilityLabel=\"Search Giphy\"\n      size=\"md\"\n      appearance=\"neutral\"\n      name={'general.bolt'}\n      onPress={() => setUsingGiphy(true)}\n    />\n  )\n}\n\nconst useMessageFormStyles = () => {\n  const theme = useTheme()\n  const navigationTheme = useNavigationTheme()\n\n  return StyleSheet.create({\n    textInputContainer: {\n      borderColor: theme.colors.fillColorNeutral050Base,\n      borderTopWidth: 1,\n      padding: 12,\n      backgroundColor: navigationTheme.colors.card,\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n    },\n    textInput: {\n      borderRadius: 24,\n      borderWidth: 1,\n      padding: 12,\n      paddingHorizontal: 20,\n      borderColor: theme.colors.fillColorNeutral050Base,\n      flex: 1,\n      flexDirection: 'row',\n      gap: 12,\n    },\n    giphyBadge: {\n      backgroundColor: theme.colors.fillColorNeutral050Base,\n      borderRadius: 24,\n      padding: 8,\n      paddingHorizontal: 12,\n    },\n    textInputSend: {\n      borderRadius: 24,\n      height: 36,\n      width: 36,\n    },\n  })\n}\n"]}

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

@@ -10,8 +10,8 @@ export declare const useReactionStyles: ({ mine }: {
 }) => {
     reaction: {
         borderWidth: number;
-        borderColor: any;
-        backgroundColor: any;
+        borderColor: string;
+        backgroundColor: string;
         borderRadius: number;
         paddingVertical: number;
         paddingHorizontal: number;

package/build/components/conversations/action_toggle_button.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type PressableProps } from 'react-native-gesture-handler';
+import { IconString } from '../display';
+interface ActionToggleButtonProps extends PressableProps {
+    backgroundColor: string;
+    toggled: boolean;
+    toggleContent: {
+        true: {
+            iconName: IconString;
+            label: string;
+        };
+        false: {
+            iconName: IconString;
+            label: string;
+        };
+    };
+    loading?: boolean;
+}
+export declare function ActionToggleButton({ backgroundColor, onPress, toggleContent, disabled, toggled, loading, ...props }: ActionToggleButtonProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=action_toggle_button.d.ts.map

package/build/components/conversations/action_toggle_button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action_toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/action_toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAQ,UAAU,EAAiB,MAAM,YAAY,CAAA;AAI5D,UAAU,uBAAwB,SAAQ,cAAc;IACtD,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE;QACb,IAAI,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;QAC7C,KAAK,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAC/C,CAAA;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,eAAe,EACf,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,OAAO,EACP,OAAe,EACf,GAAG,KAAK,EACT,EAAE,uBAAuB,qBA8BzB"}

package/build/components/conversations/action_toggle_button.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
+import { Icon, Spinner, Text } from '../display';
+import { useCreateAndroidRippleColor, useTheme } from '../../hooks';
+import { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles';
+export function ActionToggleButton({ backgroundColor, onPress, toggleContent, disabled = false, toggled, loading = false, ...props }) {
+    const styles = useStyles({ backgroundColor, disabled });
+    const androidRippleColor = useCreateAndroidRippleColor({
+        color: backgroundColor,
+    });
+    const { iconName, label } = toggleContent[toggled ? 'true' : 'false'];
+    return (<Pressable onPress={onPress} style={({ pressed }) => [styles.button, pressed && platformPressedOpacityStyle]} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} disabled={disabled || loading} accessibilityRole="togglebutton" accessibilityState={{ checked: toggled }} {...props}>
+      {loading ? (<Spinner size={20}/>) : (<>
+          <Icon name={iconName} style={styles.icon} size={20}/>
+          <Text variant="footnote" style={styles.text}>
+            {label}
+          </Text>
+        </>)}
+    </Pressable>);
+}
+const useStyles = ({ backgroundColor, disabled }) => {
+    const { colors } = useTheme();
+    const fillColor = disabled ? colors.textColorDefaultDisabled : colors.fillColorNeutral100Inverted;
+    const buttonBackgroundColor = disabled
+        ? colors.fillColorButtonNeutralSolidDisabled
+        : backgroundColor;
+    return StyleSheet.create({
+        button: {
+            flex: 1,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4,
+            height: '100%',
+            backgroundColor: buttonBackgroundColor,
+        },
+        icon: {
+            color: fillColor,
+            marginTop: 4,
+        },
+        text: {
+            color: fillColor,
+            fontWeight: platformFontWeightMedium,
+        },
+    });
+};
+//# sourceMappingURL=action_toggle_button.js.map

package/build/components/conversations/action_toggle_button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action_toggle_button.js","sourceRoot":"","sources":["../../../src/components/conversations/action_toggle_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Pressable, type PressableProps } from 'react-native-gesture-handler'\nimport { Icon, IconString, Spinner, Text } from '../display'\nimport { useCreateAndroidRippleColor, useTheme } from '../../hooks'\nimport { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles'\n\ninterface ActionToggleButtonProps extends PressableProps {\n  backgroundColor: string\n  toggled: boolean\n  toggleContent: {\n    true: { iconName: IconString; label: string }\n    false: { iconName: IconString; label: string }\n  }\n  loading?: boolean\n}\n\nexport function ActionToggleButton({\n  backgroundColor,\n  onPress,\n  toggleContent,\n  disabled = false,\n  toggled,\n  loading = false,\n  ...props\n}: ActionToggleButtonProps) {\n  const styles = useStyles({ backgroundColor, disabled })\n  const androidRippleColor = useCreateAndroidRippleColor({\n    color: backgroundColor,\n  })\n\n  const { iconName, label } = toggleContent[toggled ? 'true' : 'false']\n\n  return (\n    <Pressable\n      onPress={onPress}\n      style={({ pressed }) => [styles.button, pressed && platformPressedOpacityStyle]}\n      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n      disabled={disabled || loading}\n      accessibilityRole=\"togglebutton\"\n      accessibilityState={{ checked: toggled }}\n      {...props}\n    >\n      {loading ? (\n        <Spinner size={20} />\n      ) : (\n        <>\n          <Icon name={iconName} style={styles.icon} size={20} />\n          <Text variant=\"footnote\" style={styles.text}>\n            {label}\n          </Text>\n        </>\n      )}\n    </Pressable>\n  )\n}\n\nconst useStyles = ({ backgroundColor, disabled }: Partial<ActionToggleButtonProps>) => {\n  const { colors } = useTheme()\n  const fillColor = disabled ? colors.textColorDefaultDisabled : colors.fillColorNeutral100Inverted\n  const buttonBackgroundColor = disabled\n    ? colors.fillColorButtonNeutralSolidDisabled\n    : backgroundColor\n\n  return StyleSheet.create({\n    button: {\n      flex: 1,\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 4,\n      height: '100%',\n      backgroundColor: buttonBackgroundColor,\n    },\n    icon: {\n      color: fillColor,\n      marginTop: 4,\n    },\n    text: {\n      color: fillColor,\n      fontWeight: platformFontWeightMedium,\n    },\n  })\n}\n"]}

package/build/components/conversations/conversation_actions.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { ConversationResource } from '../../types';
+export declare function ConversationActions({ children, conversation, style, onPress, }: {
+    children: ReactNode;
+    conversation: ConversationResource;
+    onPress: () => void;
+    style?: ViewStyle;
+}): React.JSX.Element;
+//# sourceMappingURL=conversation_actions.d.ts.map

package/build/components/conversations/conversation_actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation_actions.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAClF,OAAO,EAAyC,SAAS,EAAE,MAAM,cAAc,CAAA;AAU/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAIlD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,qBA+CA"}

package/build/components/conversations/conversation_actions.js

@@ -0,0 +1,84 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
+import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
+import { useConversationsContext } from '../../contexts/conversations_context';
+import { useTheme } from '../../hooks';
+import { useConversationsMarkRead, useConversationsMute, } from '../../hooks/use_conversations_actions';
+import { tokens } from '../../vendor/tapestry/tokens';
+import { ActionToggleButton } from './action_toggle_button';
+export function ConversationActions({ children, conversation, style, onPress, }) {
+    const swipeableRef = useRef(null);
+    const styles = useStyles();
+    const { activeConversationId, setActiveConversationId } = useConversationsContext();
+    const [disabled, setDisabled] = useState(false);
+    const overshootLeft = Platform.OS === 'ios';
+    const handleSwipeableClose = () => {
+        setDisabled(false);
+        swipeableRef.current?.close();
+    };
+    const handleSwipeableOpen = () => {
+        setDisabled(true);
+        setActiveConversationId(conversation.id);
+    };
+    const handlePress = useCallback(() => {
+        if (disabled || !onPress)
+            return;
+        onPress();
+    }, [disabled, onPress]);
+    useEffect(() => {
+        if (activeConversationId === conversation.id)
+            return;
+        handleSwipeableClose();
+    }, [activeConversationId, conversation.id]);
+    return (<ReanimatedSwipeable ref={swipeableRef} childrenContainerStyle={styles.swipeableChildContainer} containerStyle={styles.swipeableContainer} overshootFriction={8} overshootLeft={overshootLeft} overshootRight={false} onSwipeableOpenStartDrag={handleSwipeableOpen} onSwipeableClose={() => setDisabled(false)} renderLeftActions={() => (<LeftActions conversation={conversation} onClose={handleSwipeableClose}/>)}>
+      <Pressable onPress={handlePress} style={style}>
+        {children}
+      </Pressable>
+    </ReanimatedSwipeable>);
+}
+function LeftActions({ conversation, onClose }) {
+    const styles = useStyles();
+    const emptyConversation = conversation.lastMessageCreatedAt === null;
+    const muteToggleContent = {
+        true: { iconName: 'general.bell', label: 'Unmute' },
+        false: { iconName: 'general.bellMuted', label: 'Mute' },
+    };
+    const latestMessageUnreadToggleContent = {
+        true: { iconName: 'general.outlinedTextMessage', label: 'Mark read' },
+        false: { iconName: 'general.textMessageNotifications', label: 'Mark unread' },
+    };
+    const { muted, setMuted, isPending } = useConversationsMute({ conversation });
+    const { read, markRead, isPending: markReadPending } = useConversationsMarkRead({ conversation });
+    const handleMute = useCallback(() => {
+        setMuted(!muted);
+        onClose();
+    }, [muted, onClose, setMuted]);
+    const handleLatestMessageUnread = useCallback(() => {
+        markRead(!read);
+        onClose();
+    }, [read, onClose, markRead]);
+    return (<View style={styles.actionButtonContainer}>
+      <ActionToggleButton loading={markReadPending} disabled={emptyConversation} toggled={!read} onPress={handleLatestMessageUnread} toggleContent={latestMessageUnreadToggleContent} backgroundColor={tokens.fillColorInteractionSwipeDefault}/>
+      <ActionToggleButton loading={isPending} toggled={muted} onPress={handleMute} toggleContent={muteToggleContent} backgroundColor={tokens.fillColorInteractionSwipeSecondary}/>
+    </View>);
+}
+const ACTION_BUTTON_WIDTH = 120;
+const ACTION_BUTTON_COUNT = 2;
+const useStyles = () => {
+    const { colors } = useTheme();
+    return StyleSheet.create({
+        swipeableChildContainer: {
+            backgroundColor: colors.surfaceColor100,
+        },
+        actionButtonContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: ACTION_BUTTON_WIDTH * ACTION_BUTTON_COUNT,
+            alignContent: 'stretch',
+        },
+        swipeableContainer: {
+            backgroundColor: colors.surfaceColor090,
+        },
+    });
+};
+//# sourceMappingURL=conversation_actions.js.map

package/build/components/conversations/conversation_actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation_actions.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport { Platform, Pressable, StyleSheet, View, ViewStyle } from 'react-native'\nimport ReanimatedSwipeable, {\n  SwipeableMethods,\n} from 'react-native-gesture-handler/ReanimatedSwipeable'\nimport { useConversationsContext } from '../../contexts/conversations_context'\nimport { useTheme } from '../../hooks'\nimport {\n  useConversationsMarkRead,\n  useConversationsMute,\n} from '../../hooks/use_conversations_actions'\nimport { ConversationResource } from '../../types'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { ActionToggleButton } from './action_toggle_button'\n\nexport function ConversationActions({\n  children,\n  conversation,\n  style,\n  onPress,\n}: {\n  children: ReactNode\n  conversation: ConversationResource\n  onPress: () => void\n  style?: ViewStyle\n}) {\n  const swipeableRef = useRef<SwipeableMethods>(null)\n  const styles = useStyles()\n  const { activeConversationId, setActiveConversationId } = useConversationsContext()\n  const [disabled, setDisabled] = useState(false)\n  const overshootLeft = Platform.OS === 'ios'\n\n  const handleSwipeableClose = () => {\n    setDisabled(false)\n    swipeableRef.current?.close()\n  }\n\n  const handleSwipeableOpen = () => {\n    setDisabled(true)\n    setActiveConversationId(conversation.id)\n  }\n\n  const handlePress = useCallback(() => {\n    if (disabled || !onPress) return\n    onPress()\n  }, [disabled, onPress])\n\n  useEffect(() => {\n    if (activeConversationId === conversation.id) return\n\n    handleSwipeableClose()\n  }, [activeConversationId, conversation.id])\n\n  return (\n    <ReanimatedSwipeable\n      ref={swipeableRef}\n      childrenContainerStyle={styles.swipeableChildContainer}\n      containerStyle={styles.swipeableContainer}\n      overshootFriction={8}\n      overshootLeft={overshootLeft}\n      overshootRight={false}\n      onSwipeableOpenStartDrag={handleSwipeableOpen}\n      onSwipeableClose={() => setDisabled(false)}\n      renderLeftActions={() => (\n        <LeftActions conversation={conversation} onClose={handleSwipeableClose} />\n      )}\n    >\n      <Pressable onPress={handlePress} style={style}>\n        {children}\n      </Pressable>\n    </ReanimatedSwipeable>\n  )\n}\n\ninterface LeftActionsProps {\n  conversation: ConversationResource\n  onClose: () => void\n}\n\nfunction LeftActions({ conversation, onClose }: LeftActionsProps) {\n  const styles = useStyles()\n  const emptyConversation = conversation.lastMessageCreatedAt === null\n\n  const muteToggleContent = {\n    true: { iconName: 'general.bell', label: 'Unmute' },\n    false: { iconName: 'general.bellMuted', label: 'Mute' },\n  } as const\n\n  const latestMessageUnreadToggleContent = {\n    true: { iconName: 'general.outlinedTextMessage', label: 'Mark read' },\n    false: { iconName: 'general.textMessageNotifications', label: 'Mark unread' },\n  } as const\n  const { muted, setMuted, isPending } = useConversationsMute({ conversation })\n  const { read, markRead, isPending: markReadPending } = useConversationsMarkRead({ conversation })\n\n  const handleMute = useCallback(() => {\n    setMuted(!muted)\n    onClose()\n  }, [muted, onClose, setMuted])\n\n  const handleLatestMessageUnread = useCallback(() => {\n    markRead(!read)\n    onClose()\n  }, [read, onClose, markRead])\n\n  return (\n    <View style={styles.actionButtonContainer}>\n      <ActionToggleButton\n        loading={markReadPending}\n        disabled={emptyConversation}\n        toggled={!read}\n        onPress={handleLatestMessageUnread}\n        toggleContent={latestMessageUnreadToggleContent}\n        backgroundColor={tokens.fillColorInteractionSwipeDefault}\n      />\n      <ActionToggleButton\n        loading={isPending}\n        toggled={muted}\n        onPress={handleMute}\n        toggleContent={muteToggleContent}\n        backgroundColor={tokens.fillColorInteractionSwipeSecondary}\n      />\n    </View>\n  )\n}\n\nconst ACTION_BUTTON_WIDTH = 120\nconst ACTION_BUTTON_COUNT = 2\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  return StyleSheet.create({\n    swipeableChildContainer: {\n      backgroundColor: colors.surfaceColor100,\n    },\n    actionButtonContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      width: ACTION_BUTTON_WIDTH * ACTION_BUTTON_COUNT,\n      alignContent: 'stretch',\n    },\n    swipeableContainer: {\n      backgroundColor: colors.surfaceColor090,\n    },\n  })\n}\n"]}

package/build/components/conversations/conversation_preview.d.ts

@@ -3,7 +3,8 @@ import { ConversationResource } from '../../types';
 interface ConversationPreviewProps {
     conversation: ConversationResource;
     onPress: () => void;
+    showBadges?: boolean;
 }
-export declare const ConversationPreview: ({ conversation, onPress }: ConversationPreviewProps) => React.JSX.Element;
+export declare const ConversationPreview: ({ conversation, onPress, showBadges, }: ConversationPreviewProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=conversation_preview.d.ts.map

package/build/components/conversations/conversation_preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_preview.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAMlD,UAAU,wBAAwB;IAChC,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,eAAO,MAAM,mBAAmB,8BAA+B,wBAAwB,sBAuCtF,CAAA"}
+{"version":3,"file":"conversation_preview.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAQlD,UAAU,wBAAwB;IAChC,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,mBAAmB,2CAI7B,wBAAwB,sBAkC1B,CAAA"}

package/build/components/conversations/conversation_preview.js

@@ -1,13 +1,15 @@
 import React from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { AvatarGroup, Heading, Text, Badge } from '../display';
 import { formatDatePreview } from '../../utils/date';
 import { useTheme } from '../../hooks';
 import { UnreadCountBadge } from './unread_count_badge';
-export const ConversationPreview = ({ conversation, onPress }) => {
+import { ConversationActions } from './conversation_actions';
+import { MuteIndicator } from './mute_indicator';
+export const ConversationPreview = ({ conversation, onPress, showBadges = true, }) => {
     const styles = useStyles();
-    const { lastMessageAuthorName, lastMessageCreatedAt, lastMessageTextPreview, previewAvatarUrls, title, unreadCount, badges, } = conversation;
-    return (<Pressable style={styles.previewRow} onPress={onPress}>
+    const { lastMessageAuthorName, lastMessageCreatedAt, lastMessageTextPreview, previewAvatarUrls, title, unreadCount, badges, muted, } = conversation;
+    return (<ConversationActions conversation={conversation} style={styles.previewRow} onPress={onPress}>
       <AvatarGroup size="lg" sourceUris={previewAvatarUrls || []}/>
       <View style={styles.conversationBody}>
         <Heading numberOfLines={1} variant="h3" style={styles.title}>
@@ -16,15 +18,25 @@ export const ConversationPreview = ({ conversation, onPress }) => {
         <Text variant="tertiary" numberOfLines={2}>
           {lastMessageAuthorName}: {lastMessageTextPreview}
         </Text>
-        <View style={styles.badges}>
-          {badges?.map(badge => (<Badge key={badge.text} variant="meta" productLogoName={badge.appName} label={badge.pcoResourceType} metaLabel={badge.text || ''}/>))}
-        </View>
+        <ConversationBadges visible={showBadges} badges={badges}/>
       </View>
       <View style={styles.metaContainer}>
         <Text variant="tertiary">{formatDatePreview(lastMessageCreatedAt)}</Text>
-        <UnreadCountBadge count={unreadCount}/>
+        <View style={styles.statusContainer}>
+          <UnreadCountBadge count={unreadCount} showDot={muted}/>
+          <MuteIndicator muted={muted}/>
+        </View>
       </View>
-    </Pressable>);
+    </ConversationActions>);
+};
+const ConversationBadges = ({ visible, badges }) => {
+    const styles = useStyles();
+    if (!visible || !badges || badges.length === 0) {
+        return null;
+    }
+    return (<View style={styles.badges}>
+      {badges.map(badge => (<Badge key={badge.text} variant="meta" productLogoName={badge.appName} label={badge.pcoResourceType} metaLabel={badge.text || ''}/>))}
+    </View>);
 };
 const useStyles = () => {
     const { colors } = useTheme();
@@ -48,11 +60,17 @@ const useStyles = () => {
         },
         metaContainer: {
             rowGap: 4,
+            alignItems: 'flex-end',
         },
         badges: {
             marginTop: 4,
             alignItems: 'flex-start',
         },
+        statusContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+        },
     });
 };
 //# sourceMappingURL=conversation_preview.js.map

package/build/components/conversations/conversation_preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_preview.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport { ConversationResource } from '../../types'\nimport { AvatarGroup, Heading, Text, Badge } from '../display'\nimport { formatDatePreview } from '../../utils/date'\nimport { useTheme } from '../../hooks'\nimport { UnreadCountBadge } from './unread_count_badge'\n\ninterface ConversationPreviewProps {\n  conversation: ConversationResource\n  onPress: () => void\n}\n\nexport const ConversationPreview = ({ conversation, onPress }: ConversationPreviewProps) => {\n  const styles = useStyles()\n  const {\n    lastMessageAuthorName,\n    lastMessageCreatedAt,\n    lastMessageTextPreview,\n    previewAvatarUrls,\n    title,\n    unreadCount,\n    badges,\n  } = conversation\n  return (\n    <Pressable style={styles.previewRow} onPress={onPress}>\n      <AvatarGroup size=\"lg\" sourceUris={previewAvatarUrls || []} />\n      <View style={styles.conversationBody}>\n        <Heading numberOfLines={1} variant=\"h3\" style={styles.title}>\n          {title}\n        </Heading>\n        <Text variant=\"tertiary\" numberOfLines={2}>\n          {lastMessageAuthorName}: {lastMessageTextPreview}\n        </Text>\n        <View style={styles.badges}>\n          {badges?.map(badge => (\n            <Badge\n              key={badge.text}\n              variant=\"meta\"\n              productLogoName={badge.appName}\n              label={badge.pcoResourceType}\n              metaLabel={badge.text || ''}\n            />\n          ))}\n        </View>\n      </View>\n      <View style={styles.metaContainer}>\n        <Text variant=\"tertiary\">{formatDatePreview(lastMessageCreatedAt)}</Text>\n        <UnreadCountBadge count={unreadCount} />\n      </View>\n    </Pressable>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    previewRow: {\n      flexDirection: 'row',\n      gap: 8,\n      borderBottomWidth: 1,\n      borderBottomColor: colors.borderColorDefaultDim,\n      paddingTop: 12,\n      paddingBottom: 12,\n      paddingHorizontal: 16,\n    },\n    title: {\n      fontSize: 16,\n      color: colors.textColorDefaultPrimary,\n    },\n    conversationBody: {\n      flex: 1,\n      rowGap: 2,\n    },\n    metaContainer: {\n      rowGap: 4,\n    },\n    badges: {\n      marginTop: 4,\n      alignItems: 'flex-start',\n    },\n  })\n}\n"]}
+{"version":3,"file":"conversation_preview.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { ConversationResource } from '../../types'\nimport { AvatarGroup, Heading, Text, Badge } from '../display'\nimport { formatDatePreview } from '../../utils/date'\nimport { useTheme } from '../../hooks'\nimport { UnreadCountBadge } from './unread_count_badge'\nimport { ConversationActions } from './conversation_actions'\nimport { MuteIndicator } from './mute_indicator'\n\ninterface ConversationPreviewProps {\n  conversation: ConversationResource\n  onPress: () => void\n  showBadges?: boolean\n}\n\nexport const ConversationPreview = ({\n  conversation,\n  onPress,\n  showBadges = true,\n}: ConversationPreviewProps) => {\n  const styles = useStyles()\n  const {\n    lastMessageAuthorName,\n    lastMessageCreatedAt,\n    lastMessageTextPreview,\n    previewAvatarUrls,\n    title,\n    unreadCount,\n    badges,\n    muted,\n  } = conversation\n\n  return (\n    <ConversationActions conversation={conversation} style={styles.previewRow} onPress={onPress}>\n      <AvatarGroup size=\"lg\" sourceUris={previewAvatarUrls || []} />\n      <View style={styles.conversationBody}>\n        <Heading numberOfLines={1} variant=\"h3\" style={styles.title}>\n          {title}\n        </Heading>\n        <Text variant=\"tertiary\" numberOfLines={2}>\n          {lastMessageAuthorName}: {lastMessageTextPreview}\n        </Text>\n        <ConversationBadges visible={showBadges} badges={badges} />\n      </View>\n      <View style={styles.metaContainer}>\n        <Text variant=\"tertiary\">{formatDatePreview(lastMessageCreatedAt)}</Text>\n        <View style={styles.statusContainer}>\n          <UnreadCountBadge count={unreadCount} showDot={muted} />\n          <MuteIndicator muted={muted} />\n        </View>\n      </View>\n    </ConversationActions>\n  )\n}\n\nconst ConversationBadges = ({ visible, badges }: { visible: boolean; badges?: any[] }) => {\n  const styles = useStyles()\n\n  if (!visible || !badges || badges.length === 0) {\n    return null\n  }\n\n  return (\n    <View style={styles.badges}>\n      {badges.map(badge => (\n        <Badge\n          key={badge.text}\n          variant=\"meta\"\n          productLogoName={badge.appName}\n          label={badge.pcoResourceType}\n          metaLabel={badge.text || ''}\n        />\n      ))}\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    previewRow: {\n      flexDirection: 'row',\n      gap: 8,\n      borderBottomWidth: 1,\n      borderBottomColor: colors.borderColorDefaultDim,\n      paddingTop: 12,\n      paddingBottom: 12,\n      paddingHorizontal: 16,\n    },\n    title: {\n      fontSize: 16,\n      color: colors.textColorDefaultPrimary,\n    },\n    conversationBody: {\n      flex: 1,\n      rowGap: 2,\n    },\n    metaContainer: {\n      rowGap: 4,\n      alignItems: 'flex-end',\n    },\n    badges: {\n      marginTop: 4,\n      alignItems: 'flex-start',\n    },\n    statusContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 4,\n    },\n  })\n}\n"]}

package/build/components/conversations/conversations.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ConversationRequestArgs } from '../../utils/request/conversation';
-interface ConversationsProps extends Partial<ConversationRequestArgs> {
+interface ConversationsProps {
     ListHeaderComponent?: React.ComponentType<any> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
 }
-export declare const Conversations: ({ ListHeaderComponent, filter, group, gids, group_source_app_name, }: ConversationsProps) => React.JSX.Element;
+export declare const Conversations: ({ ListHeaderComponent }: ConversationsProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=conversations.d.ts.map

package/build/components/conversations/conversations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversations.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAA;AAG1E,UAAU,kBAAmB,SAAQ,OAAO,CAAC,uBAAuB,CAAC;IACnE,mBAAmB,CAAC,EAChB,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GACxB,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,GAClE,IAAI,GACJ,SAAS,CAAA;CACd;AAED,eAAO,MAAM,aAAa,yEAMvB,kBAAkB,sBAqCpB,CAAA"}
+{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversations.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,UAAU,kBAAkB;IAC1B,mBAAmB,CAAC,EAChB,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GACxB,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,GAClE,IAAI,GACJ,SAAS,CAAA;CACd;AAED,eAAO,MAAM,aAAa,4BAA6B,kBAAkB,sBAwCxE,CAAA"}