feat: more chat fixes + message status + optimistic update for text message + refactor queries/mutations

features/conversation/conversation-composer/conversation-composer-container.tsx

@@ -0,0 +1,25 @@
+import { IVStackProps, VStack } from "@/design-system/VStack";
+import { memo } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export const ConversationComposerContainer = memo(function (
+  props: IVStackProps
+) {
+  const { style, ...rest } = props;
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <VStack
+      style={[
+        {
+          paddingBottom: insets.bottom,
+          justifyContent: "flex-end",
+          overflow: "hidden",
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+});

features/conversation/conversation-composer/conversation-composer-reply-preview.tsx

@@ -11,7 +11,6 @@ import {
   useConversationMessageById,
 } from "@/features/conversation/conversation-message/conversation-message.utils";
 import { useCurrentAccountInboxId } from "@/hooks/use-current-account-inbox-id";
-import { useCurrentConversationTopic } from "../conversation.store-context";
 import { usePreferredInboxName } from "@/hooks/usePreferredInboxName";
 import { HStack } from "@design-system/HStack";
 import { Icon } from "@design-system/Icon/Icon";
@@ -26,7 +25,6 @@ import { DecodedMessageWithCodecsType } from "@utils/xmtpRN/client";
 import {
   DecodedMessage,
   InboxId,
-  MessageId,
   RemoteAttachmentCodec,
   ReplyCodec,
   StaticAttachmentCodec,
@@ -37,6 +35,7 @@ import {
   useSharedValue,
   withSpring,
 } from "react-native-reanimated";
+import { useCurrentConversationTopic } from "../conversation.store-context";
 import {
   useConversationComposerStore,
   useConversationComposerStoreContext,
@@ -47,18 +46,6 @@ export const ReplyPreview = memo(function ReplyPreview() {
     (state) => state.replyingToMessageId
   );
 
-  if (!replyingToMessageId) {
-    return null;
-  }
-
-  return <Content replyingToMessageId={replyingToMessageId} />;
-});
-
-const Content = memo(function Content(props: {
-  replyingToMessageId: MessageId;
-}) {
-  const { replyingToMessageId } = props;
-
   const { theme } = useAppTheme();
 
   const composerStore = useConversationComposerStore();
@@ -67,7 +54,7 @@ const Content = memo(function Content(props: {
   const topic = useCurrentConversationTopic();
 
   const { message: replyMessage } = useConversationMessageById({
-    messageId: replyingToMessageId,
+    messageId: replyingToMessageId!, // ! because we have enabled in the query
     topic,
   });
 
@@ -115,6 +102,8 @@ const Content = memo(function Content(props: {
         },
         containerAS,
       ]}
+      // entering={theme.animation.reanimatedFadeInSpring}
+      // exiting={theme.animation.reanimatedFadeOutSpring}
     >
       {!!replyMessage && (
         <AnimatedVStack

features/conversation/conversation-composer/conversation-composer.tsx

@@ -11,9 +11,7 @@ import { sentryTrackError } from "@utils/sentry";
 import React, { memo, useCallback, useEffect, useRef } from "react";
 import { Platform, TextInput as RNTextInput } from "react-native";
 import { useAnimatedStyle, withSpring } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AddAttachmentButton } from "./conversation-composer-add-attachment-button";
-import { ReplyPreview } from "./conversation-composer-reply-preview";
 import {
   useConversationComposerStore,
   useConversationComposerStoreContext,
@@ -112,54 +110,43 @@ export const Composer = memo(function Composer(props: IComposerProps) {
     // });
   }, [onSend, store]);
 
-  const insets = useSafeAreaInsets();
-
   return (
     <VStack
       style={{
-        paddingBottom: insets.bottom,
-        justifyContent: "flex-end",
-        overflow: "hidden",
+        // ...debugBorder("yellow"),
+        margin: 6, // 6 in the Figma
       }}
     >
-      <ReplyPreview />
-      <VStack
+      <HStack
         style={{
-          // ...debugBorder("yellow"),
-          margin: 6, // 6 in the Figma
+          // ...debugBorder("red"),
+          alignItems: "flex-end",
         }}
       >
-        <HStack
+        <AddAttachmentButton />
+        <VStack
           style={{
-            // ...debugBorder("red"),
-            alignItems: "flex-end",
+            flex: 1,
+            margin: theme.spacing.xxxs - theme.borderWidth.sm, // -theme.borderWidth.sm because of the borderWidth is count in react-native and we want exact pixels
+            borderWidth: theme.borderWidth.sm,
+            borderColor: theme.colors.border.subtle,
+            borderRadius: theme.borderRadius.md,
+            overflow: "hidden",
+            justifyContent: "flex-end",
           }}
         >
-          <AddAttachmentButton />
-          <VStack
+          <AttachmentsPreview />
+          <HStack
             style={{
-              flex: 1,
-              margin: theme.spacing.xxxs - theme.borderWidth.sm, // -theme.borderWidth.sm because of the borderWidth is count in react-native and we want exact pixels
-              borderWidth: theme.borderWidth.sm,
-              borderColor: theme.colors.border.subtle,
-              borderRadius: theme.borderRadius.md,
-              overflow: "hidden",
-              justifyContent: "flex-end",
+              // ...debugBorder("blue"),
+              alignItems: "center",
             }}
           >
-            <AttachmentsPreview />
-            <HStack
-              style={{
-                // ...debugBorder("blue"),
-                alignItems: "center",
-              }}
-            >
-              <ComposerTextInput onSubmitEditing={send} />
-              <SendButton onPress={send} />
-            </HStack>
-          </VStack>
-        </HStack>
-      </VStack>
+            <ComposerTextInput onSubmitEditing={send} />
+            <SendButton onPress={send} />
+          </HStack>
+        </VStack>
+      </HStack>
     </VStack>
   );
 });

features/conversation/conversation-keyboard-filler.tsx

@@ -1,15 +1,86 @@
-import { memo } from "react";
+import { useKeyboardIsShown } from "@/hooks/use-keyboard-is-shown";
 import { AnimatedVStack } from "@design-system/VStack";
-import { useAnimatedKeyboard, useAnimatedStyle } from "react-native-reanimated";
+import { memo, useEffect, useRef } from "react";
+import { Keyboard, TextInput } from "react-native";
+import {
+  useAnimatedKeyboard,
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-export const KeyboardFiller = memo(function KeyboardFiller() {
-  const { height: keyboardHeightAV } = useAnimatedKeyboard();
+type IKeyboardFillerProps = {
+  messageContextMenuIsOpen: boolean;
+};
+
+export const KeyboardFiller = memo(function KeyboardFiller(
+  props: IKeyboardFillerProps
+) {
+  const { messageContextMenuIsOpen } = props;
+  const { height: keyboardHeight } = useAnimatedKeyboard();
   const insets = useSafeAreaInsets();
+  const lastKeyboardHeight = useSharedValue(0);
+  const textInputRef = useRef<TextInput>(null);
+  const keyboardWasOpenRef = useRef(false);
+  const isKeyboardShown = useKeyboardIsShown();
+
+  useEffect(() => {
+    console.log("messageContextMenuIsOpen:", messageContextMenuIsOpen);
+    console.log("keyboardWasOpenRef.current:", keyboardWasOpenRef.current);
+    // Context menu was hidden
+    if (!messageContextMenuIsOpen) {
+      // Reopen keyboard if it was open before context menu was shown
+      if (keyboardWasOpenRef.current) {
+        textInputRef.current?.focus();
+      }
+    }
+    // Context menu is shown
+    else {
+      if (isKeyboardShown) {
+        Keyboard.dismiss();
+        lastKeyboardHeight.value = keyboardHeight.value;
+        keyboardWasOpenRef.current = true;
+      } else {
+        keyboardWasOpenRef.current = false;
+      }
+    }
+  }, [
+    messageContextMenuIsOpen,
+    isKeyboardShown,
+    keyboardHeight,
+    lastKeyboardHeight,
+  ]);
+
+  // Reset the last height when context menu is dismissed
+  // And make sure to wait until the keyboard is open to that the height animates back to what it was before
+  useEffect(() => {
+    if (!messageContextMenuIsOpen && isKeyboardShown) {
+      lastKeyboardHeight.value = 0;
+    }
+  }, [
+    messageContextMenuIsOpen,
+    isKeyboardShown,
+    keyboardHeight,
+    lastKeyboardHeight,
+  ]);
 
-  const as = useAnimatedStyle(() => ({
-    height: Math.max(keyboardHeightAV.value - insets.bottom, 0),
-  }));
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      height: Math.max(
+        Math.max(lastKeyboardHeight.value, keyboardHeight.value) -
+          insets.bottom,
+        0
+      ),
+    };
+  });
 
-  return <AnimatedVStack style={as} />;
+  return (
+    <>
+      <AnimatedVStack style={animatedStyle} />
+      <TextInput
+        ref={textInputRef}
+        style={{ height: 0, width: 0, opacity: 0, position: "absolute" }}
+      />
+    </>
+  );
 });

features/conversation/conversation-message-status/conversation-message-status.tsx

@@ -0,0 +1,123 @@
+import { useSelect } from "@/data/store/storeHelpers";
+import { AnimatedText } from "@/design-system/Text";
+import { messageIsSent } from "@/features/conversation/conversation-message-status/conversation-message-status.utils";
+import { useMessageContextStoreContext } from "@/features/conversation/conversation-message/conversation-message.store-context";
+import { translate } from "@/i18n";
+import { useAppTheme } from "@/theme/useAppTheme";
+import { DecodedMessageWithCodecsType } from "@/utils/xmtpRN/client.types";
+import React, { memo, useEffect, useRef, useState } from "react";
+import { View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+type IConversationMessageStatusProps = {
+  message: DecodedMessageWithCodecsType;
+};
+
+const statusMapping: {
+  [key: string]: string | undefined;
+} = {
+  sent: translate("message_status.sent"),
+  delivered: translate("message_status.delivered"),
+  error: translate("message_status.error"),
+  sending: translate("message_status.sending"),
+  prepared: translate("message_status.prepared"),
+  seen: translate("message_status.seen"),
+};
+
+export const ConversationMessageStatus = memo(
+  function ConversationMessageStatus({
+    message,
+  }: IConversationMessageStatusProps) {
+    const { theme } = useAppTheme();
+
+    const { fromMe, isLatestSettledFromMe } = useMessageContextStoreContext(
+      useSelect(["fromMe", "isLatestSettledFromMe"])
+    );
+
+    const prevStatusRef = useRef(message.status);
+    const isSent = messageIsSent(message);
+
+    const [renderText, setRenderText] = useState(false);
+    const opacity = useSharedValue(isLatestSettledFromMe ? 1 : 0);
+    const height = useSharedValue(isLatestSettledFromMe ? 22 : 0);
+    const scale = useSharedValue(isLatestSettledFromMe ? 1 : 0);
+
+    const timingConfig = {
+      duration: 200,
+      easing: Easing.inOut(Easing.quad),
+    };
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      opacity: opacity.value,
+      height: height.value,
+      transform: [{ scale: scale.value }],
+    }));
+
+    useEffect(
+      () => {
+        const prevStatus = prevStatusRef.current;
+        prevStatusRef.current = message.status;
+
+        setTimeout(() => {
+          requestAnimationFrame(() => {
+            if (
+              isSent &&
+              (prevStatus === "sending" || prevStatus === "prepared")
+            ) {
+              opacity.value = withTiming(1, timingConfig);
+              height.value = withTiming(22, timingConfig);
+              scale.value = withTiming(1, timingConfig);
+              setRenderText(true);
+            } else if (isSent && !isLatestSettledFromMe) {
+              opacity.value = withTiming(0, timingConfig);
+              height.value = withTiming(0, timingConfig);
+              scale.value = withTiming(0, timingConfig);
+              setTimeout(() => setRenderText(false), timingConfig.duration);
+            } else if (isLatestSettledFromMe) {
+              opacity.value = 1;
+              height.value = 22;
+              scale.value = 1;
+              setRenderText(true);
+            }
+          });
+        }, 100);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [isLatestSettledFromMe, isSent]
+    );
+
+    if (!isLatestSettledFromMe) {
+      return null;
+    }
+
+    if (!fromMe) {
+      return null;
+    }
+
+    return (
+      <Animated.View
+        style={[
+          {
+            overflow: "hidden",
+          },
+          animatedStyle,
+        ]}
+      >
+        <View
+          style={{
+            paddingTop: theme.spacing["4xs"],
+          }}
+        >
+          <AnimatedText color="secondary" size="xxs">
+            {renderText && statusMapping[message.status]}
+          </AnimatedText>
+        </View>
+      </Animated.View>
+    );
+  }
+);