chore: resolve conflicts from base branch

Author: khushal87

package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx

@@ -23,7 +23,7 @@ export const ImageAttachmentUploadPreview = ({
   handleRetry,
   removeAttachments,
 }: ImageAttachmentUploadPreviewProps) => {
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const { enableOfflineSupport } = useChatContext();
   const indicatorType = loading
     ? ProgressIndicatorTypes.IN_PROGRESS
@@ -49,10 +49,6 @@ export const ImageAttachmentUploadPreview = ({
     setLoading(false);
   }, []);
 
-  const onLoadStartHandler = useCallback(() => {
-    setLoading(true);
-  }, []);
-
   return (
     <View style={[styles.itemContainer, itemContainer]} testID={'image-attachment-upload-preview'}>
       <AttachmentUploadProgressIndicator
@@ -62,12 +58,12 @@ export const ImageAttachmentUploadPreview = ({
       >
         <Image
           onLoadEnd={onLoadEndHandler}
-          onLoadStart={onLoadStartHandler}
           resizeMode='cover'
           source={{ uri: attachment.localMetadata.previewUri ?? attachment.image_url }}
           style={[styles.upload, upload]}
         />
       </AttachmentUploadProgressIndicator>
+
       <DismissAttachmentUpload onPress={onDismissHandler} />
       {indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
         <AttachmentUnsupportedIndicator indicatorType={indicatorType} isImage={true} />

package/src/components/Poll/CreatePollContent.tsx

@@ -66,22 +66,18 @@ export const CreatePollContent = () => {
 
   useEffect(() => {
     if (!createPollOptionHeight) return;
+    const newCurrentOptionPositions: CurrentOptionPositionsCache = {
+      inverseIndexCache: {},
+      positionCache: {},
+    };
     options.forEach((option, index) => {
-      currentOptionPositions.value = {
-        ...currentOptionPositions.value,
-        inverseIndexCache: {
-          ...currentOptionPositions.value.inverseIndexCache,
-          [index]: option.id,
-        },
-        positionCache: {
-          ...currentOptionPositions.value.positionCache,
-          [option.id]: {
-            updatedIndex: index,
-            updatedTop: index * createPollOptionHeight,
-          },
-        },
+      newCurrentOptionPositions.inverseIndexCache[index] = option.id;
+      newCurrentOptionPositions.positionCache[option.id] = {
+        updatedIndex: index,
+        updatedTop: index * createPollOptionHeight,
       };
     });
+    currentOptionPositions.value = newCurrentOptionPositions;
   }, [createPollOptionHeight, currentOptionPositions, options]);
 
   const onBackPressHandler = useCallback(() => {

package/src/components/Poll/components/CreatePollOptions.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet, Text, TextInput, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
@@ -11,6 +11,7 @@ import Animated, {
   useSharedValue,
   withDelay,
   withSpring,
+  withTiming,
 } from 'react-native-reanimated';
 
 import { PollComposerOption, PollComposerState } from 'stream-chat';
@@ -295,6 +296,19 @@ export const CreatePollOptions = ({ currentOptionPositions }: CreatePollOptionsP
   // this will hold id for item which user started dragging
   const draggedItemId = useSharedValue<string | null>(null);
 
+  // holds the animated height of the option container
+  const animatedOptionsContainerHeight = useSharedValue(createPollOptionHeight * options.length);
+
+  useEffect(() => {
+    animatedOptionsContainerHeight.value = withTiming(createPollOptionHeight * options.length, {
+      duration: 200,
+    });
+  }, [animatedOptionsContainerHeight, createPollOptionHeight, options.length]);
+
+  const animatedOptionsContainerStyle = useAnimatedStyle(() => ({
+    height: animatedOptionsContainerHeight.value,
+  }));
+
   const boundaries = useMemo(
     () => ({ maxBound: (options.length - 1) * createPollOptionHeight, minBound: 0 }),
     [createPollOptionHeight, options.length],
@@ -332,7 +346,7 @@ export const CreatePollOptions = ({ currentOptionPositions }: CreatePollOptionsP
   return (
     <View style={[styles.container, container]}>
       <Text style={[styles.text, { color: black }, title]}>{t<string>('Options')}</Text>
-      <View style={{ height: createPollOptionHeight * options.length }}>
+      <Animated.View style={animatedOptionsContainerStyle}>
         {options.map((option, index) => (
           <MemoizedCreatePollOption
             boundaries={boundaries}
@@ -348,7 +362,7 @@ export const CreatePollOptions = ({ currentOptionPositions }: CreatePollOptionsP
             option={option}
           />
         ))}
-      </View>
+      </Animated.View>
     </View>
   );
 };

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -59,7 +59,10 @@ import type { MessageInputProps } from '../../components/MessageInput/MessageInp
 import type { MoreOptionsButtonProps } from '../../components/MessageInput/MoreOptionsButton';
 import type { SendButtonProps } from '../../components/MessageInput/SendButton';
 import { useStableCallback } from '../../hooks/useStableCallback';
-import { createAttachmentsCompositionMiddleware } from '../../middlewares/attachments';
+import {
+  createAttachmentsCompositionMiddleware,
+  createDraftAttachmentsCompositionMiddleware,
+} from '../../middlewares/attachments';
 
 import { isDocumentPickerAvailable, MediaTypes, NativeHandlers } from '../../native';
 import { File } from '../../types/types';
@@ -480,6 +483,10 @@ export const MessageInputProvider = ({
       messageComposer.compositionMiddlewareExecutor.replace([
         createAttachmentsCompositionMiddleware(messageComposer),
       ]);
+
+      messageComposer.draftCompositionMiddlewareExecutor.replace([
+        createDraftAttachmentsCompositionMiddleware(messageComposer),
+      ]);
     }
   }, [
     value.doFileUploadRequest,