movius-chats 1.0.0

package/src/components/ChatInput/ChatInput.tsx

@@ -0,0 +1,207 @@
+import { CameraIcon } from "../../assets/Icons/CameraIcon";
+import { EmojiFunnySquareIcon } from "../../assets/Icons/EmojiFunnySquareIcon";
+import { MicrophoneIcon } from "../../assets/Icons/MicrophoneIcon";
+import { PaperClipIcon } from "../../assets/Icons/PaperClipIcon";
+import { PaperPlaneIcon } from "../../assets/Icons/PaperPlaneIcon";
+import React, { useCallback, useEffect, useState } from "react";
+import { Platform, Pressable, TextInput, View } from "react-native";
+import { useChatContext } from "../../context/ChatContext";
+import { ChatInputProps, InputHeightState } from "./types";
+import tw from 'twrnc';
+
+const MIN_INPUT_HEIGHT = Platform.OS === "ios" ? 32 : 30;
+const MAX_INPUT_HEIGHT = 118;
+
+const ChatInput: React.FC<ChatInputProps> = ({
+  onSendMessage,
+  onTypingStart,
+  onTypingEnd,
+  onAttachmentPress,
+  onCameraPress,
+  onAudioRecordStart,
+  onAudioRecordEnd,
+  CustomEmojiIcon,
+  CustomAttachmentIcon,
+  CustomCameraIcon,
+  CustomSendIcon,
+  CustomMicrophoneIcon,
+}) => {
+  const [inputText, setInputText] = useState("");
+  const [inputHeight, setInputHeight] = useState<InputHeightState>({
+    height: MIN_INPUT_HEIGHT,
+    isMultiline: false,
+  });
+  const {
+    theme,
+    currentUserId,
+    showEmojiButton,
+    showAttachmentsButton,
+    showCameraButton,
+    showVoiceRecordButton,
+    placeholder,
+  } = useChatContext();
+
+  const handleContentSizeChange = useCallback(
+    (event: { nativeEvent: { contentSize: { height: number } } }) => {
+      const newHeight = Math.min(
+        Math.max(event.nativeEvent.contentSize.height, MIN_INPUT_HEIGHT),
+        MAX_INPUT_HEIGHT
+      );
+      setInputHeight({
+        height: newHeight,
+        isMultiline: newHeight > MIN_INPUT_HEIGHT,
+      });
+    },
+    []
+  );
+
+  const handleSendMessage = useCallback(() => {
+    if (inputText.trim()) {
+      onSendMessage({
+        text: inputText.trim(),
+        senderId: currentUserId,
+      });
+      setInputText("");
+      setInputHeight({ height: MIN_INPUT_HEIGHT, isMultiline: false });
+    }
+  }, [inputText, onSendMessage, currentUserId]);
+
+  useEffect(() => {
+    if (inputText.trim()) {
+      onTypingStart?.();
+    } else {
+      onTypingEnd?.();
+    }
+  }, [inputText, onTypingStart, onTypingEnd]);
+
+  return (
+    <View
+      style={[
+        tw`flex-row gap-2`,
+        theme?.inputStyles?.inputSectionContainerStyle,
+      ]}
+    >
+      <View
+        style={[
+          tw`flex-1 bg-white px-3.5 gap-1 flex-row justify-between`,
+          inputHeight.isMultiline
+            ? tw`rounded-3xl items-end`
+            : tw`rounded-full items-center`,
+          theme?.inputStyles?.inputContainerStyle,
+        ]}
+      >
+        {showEmojiButton && (
+          <Pressable>
+            {CustomEmojiIcon ? (
+              <CustomEmojiIcon />
+            ) : (
+              <EmojiFunnySquareIcon
+                style={tw.style(
+                  `${Platform.OS === 'ios' ? 'h-6 w-6' : 'w-7 h-7'}`,
+                  inputHeight.isMultiline ? 'pb-14' : 'pb-0'
+                )}
+                color={theme?.colors?.inputsIconsColor || 'rgba(0,0,0,0.7)'}
+              />
+            )}
+          </Pressable>
+        )}
+
+        <TextInput
+          value={inputText}
+          onChangeText={setInputText}
+          placeholder={placeholder || 'Message'}
+          style={[
+            tw`bg-transparent flex-1 pl-2 my-3`,
+            Platform.OS === 'ios' ? tw`text-[17px]` : tw`text-[16px]`,
+            { minHeight: MIN_INPUT_HEIGHT, maxHeight: MAX_INPUT_HEIGHT },
+          ]}
+          placeholderTextColor={
+            theme?.colors?.placeholderTextColor || 'rgba(0, 0, 0, 0.4)'
+          }
+          multiline
+          textAlignVertical="center"
+          onContentSizeChange={handleContentSizeChange}
+        />
+
+        <View
+          style={[
+            tw`gap-4 flex-row`,
+            inputHeight.isMultiline ? tw`pb-4` : tw`pb-0`,
+          ]}
+        >
+          {showAttachmentsButton && (
+            <Pressable onPress={onAttachmentPress}>
+              {CustomAttachmentIcon ? (
+                <CustomAttachmentIcon />
+              ) : (
+                <PaperClipIcon
+                  style={tw.style(
+                    Platform.OS === 'ios' ? 'h-6 w-6' : 'w-7 h-7'
+                  )}
+                  color={theme?.colors?.inputsIconsColor || 'rgba(0,0,0,0.7)'}
+                />
+              )}
+            </Pressable>
+          )}
+          {showCameraButton && !inputText.trim() && (
+            <Pressable onPress={onCameraPress}>
+              {CustomCameraIcon ? (
+                <CustomCameraIcon />
+              ) : (
+                <CameraIcon
+                  style={tw.style(
+                    Platform.OS === 'ios' ? 'h-6 w-6' : 'w-7 h-7'
+                  )}
+                  color={theme?.colors?.inputsIconsColor || 'rgba(0,0,0,0.7)'}
+                />
+              )}
+            </Pressable>
+          )}
+        </View>
+      </View>
+
+      <Pressable
+        style={[
+          tw`p-2 rounded-full bg-green-600 justify-center items-center`,
+          {
+            height: Platform.OS === 'ios' ? 50 : 48,
+            width: Platform.OS === 'ios' ? 50 : 48,
+            ...theme?.inputStyles?.sendButtonStyle,
+          },
+        ]}
+        onPress={inputText.trim() ? handleSendMessage : onAudioRecordStart}
+        onLongPress={onAudioRecordStart}
+        onPressOut={onAudioRecordEnd}
+      >
+        {inputText.trim() ? (
+          CustomSendIcon ? (
+            <CustomSendIcon />
+          ) : (
+            <PaperPlaneIcon
+              style={tw.style('h-6 w-6')}
+              color={theme?.colors?.sendIconsColor || 'rgba(255,255,255,0.7)'}
+            />
+          )
+        ) : showVoiceRecordButton ? (
+          CustomMicrophoneIcon ? (
+            <CustomMicrophoneIcon />
+          ) : (
+            <MicrophoneIcon
+              style={tw.style('h-8 w-8')}
+              color={theme?.colors?.sendIconsColor || 'rgba(255,255,255,0.7)'}
+            />
+          )
+        ) : CustomSendIcon ? (
+          <CustomSendIcon />
+        ) : (
+          <PaperPlaneIcon
+            style={tw.style('h-6 w-6')}
+            color={theme?.colors?.sendIconsColor || 'rgba(255,255,255,0.7)'}
+          />
+        )}
+      </Pressable>
+    </View>
+  );
+};
+
+export default React.memo(ChatInput);

package/src/components/ChatInput/types.ts

@@ -0,0 +1,22 @@
+import { Message } from "../../types";
+
+export interface ChatInputProps {
+  onSendMessage: (message: Omit<Message, "id" | "time" | "status">) => void;
+  onTypingStart?: () => void;
+  onTypingEnd?: () => void;
+  onAttachmentPress?: () => void;
+  onCameraPress?: () => void;
+  onAudioRecordStart?: () => void;
+  onAudioRecordEnd?: () => void;
+  placeholder?: string;
+  CustomEmojiIcon?: () => React.ReactNode;
+  CustomAttachmentIcon?: () => React.ReactNode;
+  CustomCameraIcon?: () => React.ReactNode;
+  CustomSendIcon?: () => React.ReactNode;
+  CustomMicrophoneIcon?: () => React.ReactNode;
+}
+
+export interface InputHeightState {
+  height: number;
+  isMultiline: boolean;
+}

package/src/components/MediaViewer/MediaViewer.tsx

@@ -0,0 +1,101 @@
+import { LoadingIcon } from '../../assets/Icons/LoadingIcon';
+import { XIcon } from '../../assets/Icons/XIcon';
+import React, { useRef, useState } from 'react';
+import { Modal, Pressable, Text, View } from 'react-native';
+import ImageViewer from 'react-native-image-zoom-viewer';
+import Video, { VideoRef } from 'react-native-video';
+import tw from 'twrnc';
+import { MediaViewerProps } from './types';
+
+const MediaViewer: React.FC<MediaViewerProps> = ({
+  imageUrl,
+  videoUrl,
+  onClose,
+}) => {
+  const videoRef = useRef<VideoRef>(null);
+  const [videoIsLoading, setVideoIsLoading] = useState(false);
+  const [videoHasError, setVideoHasError] = useState(false);
+
+  if (!imageUrl && !videoUrl) return null;
+
+  return (
+    <Modal visible={!!imageUrl || !!videoUrl} transparent={true}>
+      <View
+        style={tw`top-0 bottom-0 left-0 right-0 bg-black/80 flex-1 absolute`}
+      >
+        <Pressable
+          onPress={onClose}
+          style={tw`absolute right-4 top-4 p-2 rounded-full bg-slate-100/70 z-10`}
+        >
+          <XIcon style={tw`h-8 w-8 stroke-black`} />
+        </Pressable>
+
+        {imageUrl && (
+          <ImageViewer
+            imageUrls={[{ url: imageUrl }]}
+            enableSwipeDown
+            onSwipeDown={onClose}
+            backgroundColor="rgba(0,0,0,0.8)"
+            enableImageZoom
+            onSave={() => imageUrl}
+            renderIndicator={() => <></>}
+          />
+        )}
+
+        {videoUrl && (
+          <View style={tw`justify-center items-center`}>
+            <Video
+              source={{ uri: videoUrl }}
+              ref={videoRef}
+              shutterColor="transparent"
+              controls={true}
+              style={{
+                width: '100%',
+                height: '100%',
+                borderRadius: 8,
+                position: 'relative',
+                marginHorizontal: 48,
+              }}
+              controlsStyles={{
+                hideSettingButton: false,
+                hideNext: true,
+                hidePrevious: true,
+              }}
+              resizeMode="contain"
+              onLoadStart={() => {
+                setVideoIsLoading(true);
+                setVideoHasError(false);
+              }}
+              onLoad={() => setVideoIsLoading(false)}
+              onBuffer={({ isBuffering }) => setVideoIsLoading(isBuffering)}
+              onError={() => {
+                setVideoHasError(true);
+                setVideoIsLoading(false);
+              }}
+            />
+            {videoIsLoading && (
+              <View
+                style={tw`absolute inset-0 flex items-center justify-center bg-black/40 rounded-full`}
+              >
+                <LoadingIcon
+                  style={tw.style('h-12 w-12 fill-white animate-spin')}
+                />
+              </View>
+            )}
+            {videoHasError && (
+              <View
+                style={tw`absolute inset-0 flex items-center justify-center bg-red-500/60 p-2`}
+              >
+                <Text style={tw`text-white font-bold`}>
+                  Failed to load video
+                </Text>
+              </View>
+            )}
+          </View>
+        )}
+      </View>
+    </Modal>
+  );
+};
+
+export default React.memo(MediaViewer);

package/src/components/MediaViewer/types.ts

@@ -0,0 +1,5 @@
+export interface MediaViewerProps {
+  imageUrl: string;
+  videoUrl: string;
+  onClose: () => void;
+}

package/src/components/TypingComponent/TypingIndicator.tsx

@@ -0,0 +1,119 @@
+import { Image, Text, View } from 'react-native';
+import tw from 'twrnc';
+import { ArrowBack2RoundedIcon } from '../../assets/Icons/ArrowBack2RoundedIcon';
+import { useChatContext } from '../../context/ChatContext';
+
+export interface TypingUser {
+  id: string;
+  avatar: string;
+  name: string;
+}
+
+interface TypingIndicatorProps {
+  typingUsers: TypingUser[];
+  currentUserId: string;
+}
+
+export const TypingIndicator = ({
+  typingUsers,
+  currentUserId,
+}: TypingIndicatorProps) => {
+  const { theme, showAvatars, renderCustomTyping, showBubbleTail } =
+    useChatContext();
+
+  const otherTypingUsers = typingUsers.filter(
+    (user) => user.id !== currentUserId
+  );
+
+  if (!otherTypingUsers.length) return null;
+
+  const displayedUsers = otherTypingUsers.slice(0, 2);
+  const additionalUsers = otherTypingUsers.length - 2;
+
+  return (
+    <View style={tw`my-1 max-w-[75%] self-start flex-row`}>
+      {showAvatars && (
+        <View style={tw`flex-row`}>
+          {displayedUsers.map((user, index) => (
+            <View
+              key={user.id}
+              style={[
+                tw`bg-gray-400 w-6 h-6 rounded-full items-center`,
+                {
+                  marginLeft: index > 0 ? -10 : 0,
+                  zIndex: displayedUsers.length + index,
+                },
+              ]}
+            >
+              {user.avatar ? (
+                <Image
+                  source={{ uri: user.avatar }}
+                  style={[
+                    tw`w-full h-full object-cover rounded-full`,
+                    theme?.bubbleStyle?.avatarImageStyle,
+                  ]}
+                />
+              ) : (
+                <Text
+                  style={[
+                    tw`text-sm text-black font-semibold capitalize rounded-full bg-zinc-300 w-full h-full text-center pt-0.5`,
+                    theme?.bubbleStyle?.avatarTextStyle,
+                  ]}
+                >
+                  {user.name?.charAt(0)}
+                </Text>
+              )}
+            </View>
+          ))}
+          {additionalUsers > 0 && (
+            <View
+              style={[
+                tw`bg-gray-400 w-6 h-6 rounded-full items-center justify-center`,
+                {
+                  marginLeft: -10,
+                  zIndex: 3,
+                },
+                { ...theme?.bubbleStyle?.additionalTypingUsersContainerStyle },
+              ]}
+            >
+              <Text
+                style={[
+                  tw`text-white text-xs font-semibold`,
+                  theme?.bubbleStyle?.additionalTypingUsersTextStyle,
+                ]}
+              >
+                +{additionalUsers}
+              </Text>
+            </View>
+          )}
+        </View>
+      )}
+      {showBubbleTail && (
+        <ArrowBack2RoundedIcon
+          style={tw.style(
+            'w-6 h-6 fill-white mt-[1.25px]', 
+            {
+              transform: [{ rotate: '180deg' }, { translateX: 6 }],
+            }
+          )}
+          color={`${theme?.colors?.receivedMessageTailColor || 'white'}`}
+        />
+      )}
+
+      <View
+        style={[
+          tw`px-2 my-1 bg-white rounded-tl-none rounded-lg`,
+          theme?.bubbleStyle?.typingContainerStyle,
+        ]}
+      >
+        {renderCustomTyping ? (
+          renderCustomTyping()
+        ) : (
+          <View style={tw`flex-row items-center py-3 px-2 justify-center`}>
+            <Text style={tw`text-gray-600`}>Typing...</Text>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};

package/src/context/AudioContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext, useState } from "react";
+
+interface AudioContextType {
+  currentlyPlayingId: string | null;
+  setCurrentlyPlayingId: (id: string | null) => void;
+}
+
+const AudioContext = createContext<AudioContextType | undefined>(undefined);
+
+export const AudioProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [currentlyPlayingId, setCurrentlyPlayingId] = useState<string | null>(
+    null
+  );
+
+  return (
+    <AudioContext.Provider value={{ currentlyPlayingId, setCurrentlyPlayingId }}>
+      {children}
+    </AudioContext.Provider>
+  );
+};
+
+export const useAudio = () => {
+  const context = useContext(AudioContext);
+  if (!context) {
+    throw new Error("useAudio must be used within an AudioProvider");
+  }
+  return context;
+};

package/src/context/ChatContext.tsx

@@ -0,0 +1,40 @@
+import React, { createContext, useContext, useState } from "react";
+import { ChatScreenProps } from "../types";
+
+interface ChatContextType extends ChatScreenProps {
+  mediaUrl: { imageUrl: string; videoUrl: string };
+  setMediaUrl: (url: { imageUrl: string; videoUrl: string }) => void;
+  isVideoPlaying: boolean;
+  setIsVideoPlaying: (playing: boolean) => void;
+}
+
+const ChatContext = createContext<ChatContextType | undefined>(undefined);
+
+export const ChatProvider: React.FC<
+  ChatScreenProps & { children: React.ReactNode }
+> = ({ children, ...props }) => {
+  const [mediaUrl, setMediaUrl] = useState({ imageUrl: "", videoUrl: "" });
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+
+  return (
+    <ChatContext.Provider
+      value={{
+        ...props,
+        mediaUrl,
+        setMediaUrl,
+        isVideoPlaying,
+        setIsVideoPlaying,
+      }}
+    >
+      {children}
+    </ChatContext.Provider>
+  );
+};
+
+export const useChatContext = () => {
+  const context = useContext(ChatContext);
+  if (!context) {
+    throw new Error("useChatContext must be used within a ChatProvider");
+  }
+  return context;
+};

package/src/index.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { FlatList, View } from 'react-native';
+import tw from 'twrnc';
+import ChatBubble from './components/ChatBubble/ChatBubble';
+import ChatInput from './components/ChatInput/ChatInput';
+import MediaViewer from './components/MediaViewer/MediaViewer';
+import { TypingIndicator } from './components/TypingComponent/TypingIndicator';
+import { AudioProvider } from './context/AudioContext';
+import { ChatProvider, useChatContext } from './context/ChatContext';
+import { ChatScreenProps } from './types';
+
+const ChatScreenContent = () => {
+  const {
+    messages,
+    currentUserId,
+    onMessageLongPress,
+    mediaUrl,
+    setMediaUrl,
+    setIsVideoPlaying,
+    typingUsers,
+    onSendMessage,
+    onTypingStart,
+    onTypingEnd,
+    onAttachmentPress,
+    onAudioRecordEnd,
+    onAudioRecordStart,
+    onCameraPress,
+    renderCustomInput,
+    CustomEmojiIcon,
+    CustomAttachmentIcon,
+    CustomCameraIcon,
+    CustomMicrophoneIcon,
+    CustomSendIcon,
+  } = useChatContext();
+
+  return (
+    <View style={tw`flex-1 px-2 pb-4 gap-2 relative`}>
+      <FlatList
+        data={messages}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item, index }) => (
+          <ChatBubble
+            message={item}
+            isCurrentUser={item.senderId === currentUserId}
+            onLongPress={() => onMessageLongPress?.(item)}
+            isFirstInSequence={
+              index === messages.length - 1 ||
+              messages[index + 1]?.senderId !== item.senderId
+            }
+          />
+        )}
+        ListHeaderComponent={
+          <TypingIndicator
+            typingUsers={typingUsers || []}
+            currentUserId={currentUserId}
+          />
+        }
+        showsVerticalScrollIndicator={false}
+        inverted
+      />
+
+      {renderCustomInput ? (
+        renderCustomInput()
+      ) : (
+        <ChatInput
+          onSendMessage={onSendMessage}
+          onTypingStart={onTypingStart}
+          onTypingEnd={onTypingEnd}
+          onAttachmentPress={onAttachmentPress}
+          onAudioRecordEnd={onAudioRecordEnd}
+          onAudioRecordStart={onAudioRecordStart}
+          onCameraPress={onCameraPress}
+          CustomEmojiIcon={CustomEmojiIcon}
+          CustomAttachmentIcon={CustomAttachmentIcon}
+          CustomCameraIcon={CustomCameraIcon}
+          CustomMicrophoneIcon={CustomMicrophoneIcon}
+          CustomSendIcon={CustomSendIcon}
+        />
+      )}
+
+      <MediaViewer
+        imageUrl={mediaUrl.imageUrl}
+        videoUrl={mediaUrl.videoUrl}
+        onClose={() => {
+          setMediaUrl({ imageUrl: '', videoUrl: '' });
+          setIsVideoPlaying(false);
+        }}
+      />
+    </View>
+  );
+};
+
+const ChatScreen: React.FC<ChatScreenProps> = (props) => {
+  return (
+    <AudioProvider>
+      <ChatProvider {...props}>
+        <ChatScreenContent />
+      </ChatProvider>
+    </AudioProvider>
+  );
+};
+
+export default ChatScreen;