Merge branch 'develop' of github.com:GetStream/stream-chat-react-native into fix/gallery-issue

Author: khushal87

package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx

@@ -9,6 +9,7 @@ import { AttachmentCommandPicker } from './AttachmentPickerContent';
 import {
   useAttachmentPickerContext,
   useChannelContext,
+  useMessageComposer,
   useMessageInputContext,
   useMessagesContext,
   useOwnCapabilitiesContext,
@@ -181,6 +182,7 @@ export const PollPickerButton = () => {
 
 export const CommandsPickerButton = () => {
   const [showCommandsSheet, setShowCommandsSheet] = useState(false);
+  const messageComposer = useMessageComposer();
   const { hasCommands } = useMessageInputContext();
   const { attachmentPickerStore, disableAttachmentPicker } = useAttachmentPickerContext();
   const { selectedPicker } = useAttachmentPickerState();
@@ -195,7 +197,7 @@ export const CommandsPickerButton = () => {
 
   const onClose = useStableCallback(() => setShowCommandsSheet(false));
 
-  return hasCommands ? (
+  return hasCommands && !messageComposer.editedMessage ? (
     <>
       <AttachmentTypePickerButton
         testID='commands-touchable'

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import { Lightning } from '../../icons/Lightning';
 import { Smile } from '../../icons/Smile';
+import { primitives } from '../../theme';
 
 export type AutoCompleteSuggestionHeaderProps = {
   queryText?: string;
@@ -14,7 +14,7 @@ export type AutoCompleteSuggestionHeaderProps = {
 export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () => {
   const {
     theme: {
-      colors: { accent_blue, grey },
+      semantics,
       messageInput: {
         suggestions: {
           header: { container, title },
@@ -25,8 +25,10 @@ export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () =>
 
   return (
     <View style={[styles.container, container]}>
-      <Lightning fill={accent_blue} size={32} />
-      <Text style={[styles.title, { color: grey }, title]} testID='commands-header-title'>
+      <Text
+        style={[styles.title, { color: semantics.textTertiary }, title]}
+        testID='commands-header-title'
+      >
         {'Instant Commands'}
       </Text>
     </View>
@@ -107,7 +109,9 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   title: {
-    fontSize: 14,
+    fontSize: primitives.typographyFontSizeSm,
+    lineHeight: primitives.typographyLineHeightNormal,
+    fontWeight: primitives.typographyFontWeightMedium,
     paddingLeft: 8,
   },
 });

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -7,7 +7,6 @@ import { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionComma
 
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { AtMentions } from '../../icons/AtMentions';
 import { primitives } from '../../theme';
 import type { Emoji } from '../../types/types';
 
@@ -22,7 +21,7 @@ export const MentionSuggestionItem = (item: UserSuggestion) => {
   const { id, name, online } = item;
   const {
     theme: {
-      colors: { accent_blue, black },
+      colors: { black },
       messageInput: {
         suggestions: {
           mention: { column, container: mentionContainer, name: nameStyle },
@@ -40,7 +39,6 @@ export const MentionSuggestionItem = (item: UserSuggestion) => {
           {name || id}
         </Text>
       </View>
-      <AtMentions pathFill={accent_blue} />
     </View>
   );
 };
@@ -203,8 +201,9 @@ const useStyles = () => {
           paddingVertical: primitives.spacingXs,
         },
         name: {
-          fontSize: 14,
-          fontWeight: 'bold',
+          fontSize: primitives.typographyFontSizeMd,
+          lineHeight: primitives.typographyLineHeightNormal,
+          color: semantics.textPrimary,
           paddingBottom: 2,
         },
         tag: {

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
-import { FlatList, StyleSheet, View } from 'react-native';
+import { FlatList, StyleSheet } from 'react-native';
+
+import Animated, { LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
 
 import { SearchSourceState, TextComposerState, TextComposerSuggestion } from 'stream-chat';
 
@@ -12,7 +14,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { useStateStore } from '../../hooks/useStateStore';
 
-export const DEFAULT_LIST_HEIGHT = 200;
+export const DEFAULT_LIST_HEIGHT = 208;
 
 export type AutoCompleteSuggestionListProps = Partial<
   Pick<MessageInputContextValue, 'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem'>
@@ -63,10 +65,10 @@ export const AutoCompleteSuggestionList = ({
       colors: { black, white },
       messageInput: {
         container: { maxHeight },
-        suggestionsListContainer: { flatlist },
       },
     },
   } = useTheme();
+  const styles = useStyles();
 
   const renderItem = useCallback(
     ({ item }: { item: TextComposerSuggestion }) => {
@@ -90,7 +92,12 @@ export const AutoCompleteSuggestionList = ({
   }
 
   return (
-    <View style={[styles.container]}>
+    <Animated.View
+      entering={ZoomIn.duration(200)}
+      exiting={ZoomOut.duration(200)}
+      layout={LinearTransition.duration(200)}
+      style={styles.container}
+    >
       <FlatList
         data={items}
         keyboardShouldPersistTaps='always'
@@ -99,33 +106,47 @@ export const AutoCompleteSuggestionList = ({
         onEndReached={loadMore}
         onEndReachedThreshold={0.1}
         renderItem={renderItem}
-        style={[
-          styles.flatlist,
-          flatlist,
-          { backgroundColor: white, maxHeight, shadowColor: black },
-        ]}
+        style={[styles.flatlist, { backgroundColor: white, maxHeight, shadowColor: black }]}
         testID={'auto-complete-suggestion-list'}
       />
-    </View>
+    </Animated.View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    maxHeight: DEFAULT_LIST_HEIGHT,
-  },
-  flatlist: {
-    borderRadius: 8,
-    elevation: 3,
-    marginHorizontal: 8,
-    shadowOffset: {
-      height: 1,
-      width: 0,
+const useStyles = () => {
+  const {
+    theme: {
+      semantics,
+      messageInput: {
+        suggestionsListContainer: { flatlist },
+      },
     },
-    shadowOpacity: 0.22,
-    shadowRadius: 2.22,
-  },
-});
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          maxHeight: DEFAULT_LIST_HEIGHT,
+          backgroundColor: semantics.composerBg,
+          borderTopWidth: 1,
+          borderColor: semantics.borderCoreDefault,
+        },
+        flatlist: {
+          borderRadius: 8,
+          elevation: 3,
+          marginHorizontal: 8,
+          shadowOffset: {
+            height: 1,
+            width: 0,
+          },
+          shadowOpacity: 0.22,
+          shadowRadius: 2.22,
+          ...flatlist,
+        },
+      }),
+    [semantics, flatlist],
+  );
+};
 
 AutoCompleteSuggestionList.displayName =
   'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -310,7 +310,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
                         key={`quoted_reply_${messageContentOrderIndex}`}
                         style={[styles.replyContainer, replyContainer]}
                       >
-                        <Reply styles={replyStyles} />
+                        <Reply mode='reply' styles={replyStyles} />
                       </View>
                     )
                   );

package/src/components/Message/utils/messageActions.ts

@@ -3,6 +3,7 @@ import type { MessagesContextValue } from '../../../contexts/messagesContext/Mes
 import type { OwnCapabilitiesContextValue } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { isClipboardAvailable } from '../../../native';
 
+import { FileTypes } from '../../../types/types';
 import type { MessageActionType } from '../../MessageMenu/MessageActionListItem';
 
 export type MessageActionsParams = {
@@ -53,6 +54,9 @@ export const messageActions = ({
   threadReply,
   unpinMessage,
 }: MessageActionsParams) => {
+  const messageHasGiphyOrImgur = message.attachments?.some(
+    (attachment) => attachment.type === FileTypes.Giphy || attachment.type === FileTypes.Imgur,
+  );
   if (showMessageReactions) {
     return [];
   }
@@ -72,8 +76,10 @@ export const messageActions = ({
   }
 
   if (
-    (isMyMessage && ownCapabilities.updateOwnMessage) ||
-    (!isMyMessage && ownCapabilities.updateAnyMessage)
+    ((isMyMessage && ownCapabilities.updateOwnMessage) ||
+      (!isMyMessage && ownCapabilities.updateAnyMessage)) &&
+    !messageHasGiphyOrImgur &&
+    !message.poll_id
   ) {
     actions.push(editMessage);
   }

package/src/components/MessageInput/MessageInput.tsx

@@ -4,8 +4,6 @@ import { Modal, StyleSheet, TextInput, TextInputProps, View } from 'react-native
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated, {
   Extrapolation,
-  FadeIn,
-  FadeOut,
   interpolate,
   LinearTransition,
   useAnimatedStyle,
@@ -133,6 +131,7 @@ const useStyles = () => {
         shadowRadius: 12,
       },
       suggestionsListContainer: {
+        backgroundColor: semantics.composerBg,
         position: 'absolute',
         width: '100%',
       },
@@ -454,14 +453,9 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
         <MessageComposerTrailingView />
       )}
 
-      <Animated.View
-        entering={FadeIn.duration(200)}
-        exiting={FadeOut.duration(200)}
-        layout={LinearTransition.duration(200)}
-        style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}
-      >
+      <View style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}>
         <AutoCompleteSuggestionList />
-      </Animated.View>
+      </View>
 
       {showPollCreationDialog ? (
         <View style={styles.pollModalWrapper}>

package/src/components/MessageInput/MessageInputHeaderView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { StyleSheet } from 'react-native';
 
 import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
@@ -36,6 +36,9 @@ export const MessageInputHeaderView = () => {
     idleRecordingStateSelector,
   );
   const hasAttachments = useHasAttachments();
+  const onDismissReply = useCallback(() => {
+    messageComposer.setQuotedMessage(null);
+  }, [messageComposer]);
 
   return isRecordingStateIdle ? (
     <Animated.View
@@ -62,7 +65,7 @@ export const MessageInputHeaderView = () => {
       ) : null}
       {quotedMessage ? (
         <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)}>
-          <Reply mode='reply' />
+          <Reply onDismiss={editing ? undefined : onDismissReply} mode='reply' />
         </Animated.View>
       ) : null}
       <AttachmentUploadPreviewList />

package/src/components/MessageInput/MessageInputLeadingView.tsx

@@ -1,19 +1,36 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { AttachmentManagerState } from 'stream-chat';
+
 import { textComposerStateSelector } from './utils/messageComposerSelectors';
 
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
 import { GiphyChip } from '../ui/GiphyChip';
 
+const hasAttachmentsSelector = (nextState: AttachmentManagerState) => ({
+  hasAttachments: nextState.attachments?.length > 0,
+});
+
 export const MessageInputLeadingView = () => {
   const messageComposer = useMessageComposer();
   const { textComposer } = messageComposer;
+  // TODO: V9: This needs to come from the LLC.
+  const { hasAttachments } = useStateStore(
+    messageComposer.attachmentManager.state,
+    hasAttachmentsSelector,
+  );
   const { command } = useStateStore(textComposer.state, textComposerStateSelector);
 
-  return command ? (
+  useEffect(() => {
+    if (hasAttachments) {
+      textComposer.clearCommand();
+    }
+  }, [textComposer, hasAttachments]);
+
+  return command && !hasAttachments ? (
     <View style={styles.giphyContainer}>
       <GiphyChip />
     </View>

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -151,12 +151,14 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
   });
 
   const onTouchGestureEnd = useStableCallback(() => {
+    if (cancellableDuration) {
+      onEarlyReleaseHandler();
+      return;
+    }
     if (status === 'recording') {
-      if (cancellableDuration) {
-        onEarlyReleaseHandler();
-      } else {
-        uploadVoiceRecording(asyncMessagesMultiSendEnabled);
-      }
+      uploadVoiceRecording(asyncMessagesMultiSendEnabled);
+    } else {
+      resetAudioRecording();
     }
   });