@ethora/chat-component-rn 26.4.1

package/src/components/RoomComponents/styled/StyledRoomComponents.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components/native';
+
+export const LastRoomMessageContainer = styled.View`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-right: 8px;
+`;
+
+export const LastRoomMessageName = styled.Text`
+  font-weight: 600;
+  max-width: 190px;
+`;
+
+export const LastRoomMessageText = styled.Text`
+  max-width: 190px;
+  flex-shrink: 1;
+  flex-wrap: nowrap;
+`;
+
+export const NewMessageMarker = styled.View`
+  border-radius: 8px;
+  padding: 2px 2px;
+  font-weight: 600;
+  min-width: 24px;
+  min-height: 24px;
+  font-size: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+`;
+
+export const LastMessageImg = styled.Image`
+  width: 20px;
+  height: 20px;
+  resize-mode: cover;
+  pointer-events: none;
+`;
+
+export const ShadeWrapper = styled.View`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+`;

package/src/components/SortDropDown/index.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import styled from 'styled-components/native';
+
+interface DropdownProps {
+  sortFunction: (value: string) => void;
+  icon: string;
+  values: string[];
+}
+
+const DropdownContainer = styled.View`
+  position: relative;
+  display: inline-block;
+`;
+
+const DropdownButton = styled.TouchableOpacity`
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+`;
+
+const DropdownIcon = styled.Text`
+  margin-left: 5px;
+`;
+
+const DropdownList = styled.View`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+`;
+
+const DropdownItem = styled.Text`
+  padding: 10px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f2f2f2;
+  }
+`;
+
+const DropdownMenu: React.FC<DropdownProps> = ({
+  sortFunction,
+  icon,
+  values,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleItemClick = (value: string) => {
+    sortFunction(value);
+    setIsOpen(false);
+  };
+
+  return (
+    <DropdownContainer>
+      <DropdownButton onPress={() => setIsOpen(!isOpen)}>
+        {icon && <DropdownIcon>{icon}</DropdownIcon>}
+      </DropdownButton>
+      {isOpen && (
+        <DropdownList>
+          {values.map((value) => (
+            <DropdownItem key={value} onPress={() => handleItemClick(value)}>
+              {value}
+            </DropdownItem>
+          ))}
+        </DropdownList>
+      )}
+    </DropdownContainer>
+  );
+};
+
+export default DropdownMenu;

package/src/components/Thread/ThreadHeader.tsx

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import {
+  ChatContainerHeader,
+  ChatContainerHeaderLabel,
+} from '../styled/StyledComponents';
+import Button from '../styled/Button';
+import { CloseIcon } from '../../assets/icons';
+import { useDispatch } from 'react-redux';
+import { setCloseActiveMessage } from '../../roomStore/roomsSlice';
+import { View } from 'react-native';
+
+interface ThreadHeaderProps {
+  chatJID: string;
+}
+
+const ThreadHeader: FC<ThreadHeaderProps> = ({ chatJID }) => {
+  const dispatch = useDispatch();
+
+  const handleCloseThread = () => {
+    dispatch(setCloseActiveMessage({ chatJID: chatJID }));
+  };
+
+  return (
+    <ChatContainerHeader>
+      <View style={{ display: 'flex', gap: 8 }}>
+        <ChatContainerHeaderLabel>Thread</ChatContainerHeaderLabel>
+      </View>
+
+      <View style={{ display: 'flex', gap: 16 }}>
+        <Button
+          style={{ padding: 8 }}
+          EndIcon={<CloseIcon />}
+          unstyled
+          onPress={handleCloseThread}
+        />
+      </View>
+    </ChatContainerHeader>
+  );
+};
+
+export default ThreadHeader;

package/src/components/Thread/ThreadWrapper.tsx

@@ -0,0 +1,270 @@
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { IMessage, User } from '../../types/types';
+import {
+  AlsoCheckbox,
+  AlsoContainer,
+  ChatContainer,
+  ThreadContainer,
+} from '../styled/StyledComponents';
+import SendInput from '../styled/SendInput';
+import { useDispatch } from 'react-redux';
+import { useXmppClient } from '../../context/xmppProvider';
+import MessageList from '../MainComponents/MessageList';
+import ModalHeaderComponent from '../Modals/ModalHeaderComponent';
+import {
+  deleteRoomMessage,
+  setCloseActiveMessage,
+  setEditAction,
+  setLastViewedTimestamp,
+} from '../../roomStore/roomsSlice';
+import { EditWrapper } from '../MainComponents/EditWrapper';
+import { useSendMessage } from '../../hooks/useSendMessage';
+import { createMainMessageForThread } from '../../helpers/createMainMessageForThread';
+import { useRoomState } from '../../hooks/useRoomState';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import {
+  Animated,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  PanResponder,
+} from 'react-native';
+import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
+
+interface ThreadWrapperProps {
+  activeMessage: IMessage;
+  user: User;
+  customMessageComponent?: React.ComponentType<{
+    message: IMessage;
+    isUser: boolean;
+    isReply: boolean;
+  }>;
+}
+
+const ThreadWrapper: FC<ThreadWrapperProps> = ({
+  activeMessage,
+  user,
+  customMessageComponent: CustomMessageComponent,
+}) => {
+  const { client } = useXmppClient();
+  const dispatch = useDispatch();
+
+  const { loading, roomsList, editAction, activeRoomJID } = useRoomState();
+  const { config } = useChatSettingState();
+  const { sendMessage: sendMs, sendMedia: sendMessageMedia, sendEditMessage, isLastMessageFromUserAndProcessing } = useSendMessage();
+
+  const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  const slideAnim = useRef(new Animated.Value(300)).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: (e, gestureState) => {
+        return gestureState.x0 <= 100;
+      },
+      onMoveShouldSetPanResponder: (e, gestureState) => {
+        return gestureState.x0 <= 100 && gestureState.dx > 0;
+      },
+      onPanResponderMove: (e, gestureState) => {
+        if (gestureState.x0 <= 100 && gestureState.dx > 0) {
+          slideAnim.setValue(gestureState.dx);
+        }
+      },
+      onPanResponderRelease: (e, gestureState) => {
+        if (gestureState.x0 <= 100 && gestureState.dx > 150) {
+          closeThread();
+        } else {
+          Animated.spring(slideAnim, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  const loadMoreMessages = useCallback(
+    async (chatJID: string, max: number, idOfMessageBefore?: number) => {
+      if (!isLoadingMore) {
+        client?.getHistoryStanza(chatJID, max, idOfMessageBefore).then(() => {
+          setIsLoadingMore(false);
+        });
+      }
+    },
+    [client]
+  );
+
+  const sendMessage = useCallback(
+    (message: string) => {
+      sendMs(
+        message,
+        activeMessage.roomJid,
+        true,
+        isChecked,
+        createMainMessageForThread(activeMessage)
+      );
+    },
+    [activeMessage, isChecked]
+  );
+
+  const sendMedia = useCallback(
+    (data: any, type: string) => {
+      sendMessageMedia(
+        data,
+        type,
+        activeMessage.roomJid,
+        true,
+        isChecked,
+        createMainMessageForThread(activeMessage)
+      );
+    },
+    [activeMessage, isChecked]
+  );
+
+  const sendStartComposing = useCallback(() => {
+    if (config?.disableTypingIndicator) {
+      return;
+    }
+    client.sendTypingRequestStanza(
+      activeMessage.roomJid,
+      `${user.firstName} ${user.lastName}`,
+      true
+    );
+  }, []);
+
+  const sendEndComposing = useCallback(() => {
+    if (config?.disableTypingIndicator) {
+      return;
+    }
+    client.sendTypingRequestStanza(
+      activeMessage.roomJid,
+      `${user.firstName} ${user.lastName}`,
+      false
+    );
+  }, []);
+
+  const onCloseEdit = () => {
+    dispatch(setEditAction({ isEdit: false }));
+  };
+
+  const closeThread = () => {
+    dispatch(setCloseActiveMessage({ chatJID: activeMessage.roomJid }));
+    dispatch(setEditAction({ isEdit: false }));
+  };
+
+  useEffect(() => {
+    if (activeMessage?.activeMessage) {
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(slideAnim, {
+        toValue: 300,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [activeMessage?.activeMessage]);
+
+  return (
+    <Animated.View
+      {...panResponder.panHandlers}
+      style={[
+        styles.threadContainer,
+        { transform: [{ translateX: slideAnim }] },
+        // ...config?.chatRoomStyles,
+      ]}
+    >
+      <ModalHeaderComponent
+        headerTitle="Thread"
+        handleCloseModal={closeThread}
+      />
+      <MessageList
+        loadMoreMessages={loadMoreMessages}
+        CustomMessage={CustomMessageComponent}
+        user={user}
+        roomJID={activeMessage.roomJid}
+        config={config}
+        loading={isLoadingMore}
+        activeMessage={activeMessage}
+        isReply
+      />
+      <AlsoContainer onPress={() => setIsChecked((prev) => !prev)}>
+        <AlsoCheckbox
+          accentColor={
+            isChecked ? config?.colors?.primary || '#0052CD' : '#fff'
+          }
+          // checked={isChecked}
+          // onPress={() => setIsChecked(!isChecked)}
+        />
+        <Text>Also send to</Text>
+        <TouchableOpacity onPress={closeThread}>
+          <Text
+            style={{
+              color: config?.colors?.primary || '#0052CD',
+              fontWeight: 500,
+            }}
+          >
+            {roomsList[activeMessage.roomJid].name}
+          </Text>
+        </TouchableOpacity>
+      </AlsoContainer>
+      {editAction && editAction.isEdit && (
+        <EditWrapper text={editAction.text || ''} onClose={onCloseEdit} />
+      )}
+      <SendInput
+        editMessage={editAction && editAction.text}
+        sendMedia={sendMedia}
+        sendMessage={editAction && editAction.isEdit ? sendEditMessage : sendMessage}
+        config={config}
+        onFocus={sendStartComposing}
+        onBlur={sendEndComposing}
+        isLoading={loading}
+        isMessageProcessing={isLastMessageFromUserAndProcessing(
+          activeMessage.roomJid
+        )}
+      />
+
+      {config?.customTypingIndicator?.enabled &&
+        (config.customTypingIndicator.position === 'overlay' ||
+          config.customTypingIndicator.position === 'floating') &&
+        roomsList[activeMessage.roomJid]?.composing && (
+          <CustomTypingIndicator
+            usersTyping={
+              roomsList[activeMessage.roomJid]?.composingList || ['User']
+            }
+            text={config.customTypingIndicator.text}
+            position={config.customTypingIndicator.position}
+            styles={config.customTypingIndicator.styles}
+            customComponent={config.customTypingIndicator.customComponent}
+            isVisible={roomsList[activeMessage.roomJid]?.composing || false}
+          />
+      )}
+    </Animated.View>
+  );
+};
+
+export default ThreadWrapper;
+
+const styles = StyleSheet.create({
+  threadContainer: {
+    zIndex: 999,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#f3f6fc',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    flex: 1,
+  },
+  text: {
+    color: '#fff',
+    fontSize: 18,
+  },
+});

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import styled, { css } from 'styled-components/native';
+
+export interface ToastType {
+  id: string;
+  title: string;
+  message: string;
+  type: 'success' | 'error' | 'info';
+  duration?: number;
+}
+
+const ToastContainer = styled(Animated.View)<{ type: string }>`
+  ${({ type }) => {
+    let backgroundColor = '#333';
+    switch (type) {
+      case 'success':
+        backgroundColor = '#4caf50';
+        break;
+      case 'error':
+        backgroundColor = '#f44336';
+        break;
+      case 'info':
+        backgroundColor = '#2196F3';
+        break;
+    }
+    return css`
+      background-color: ${backgroundColor};
+    `;
+  }}
+  padding: 12px;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  width: 240px;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.2;
+  shadow-radius: 4px;
+  elevation: 3;
+`;
+
+const Title = styled.Text`
+  font-weight: bold;
+  color: white;
+  font-size: 15px;
+`;
+
+const Message = styled.Text`
+  color: white;
+  font-size: 13px;
+  margin-top: 4px;
+`;
+
+const ProgressBar = styled(Animated.View)`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  background-color: rgba(255, 255, 255, 0.6);
+`;
+
+const Toast: React.FC<ToastType> = ({
+  title,
+  message,
+  type,
+  duration = 3000,
+}) => {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(10)).current;
+  const progressAnim = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    // Анимация появления и исчезновения
+    Animated.sequence([
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(progressAnim, {
+          toValue: 0,
+          duration,
+          useNativeDriver: false,
+        }),
+      ]),
+      Animated.delay(duration - 300),
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: 10,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]),
+    ]).start();
+  }, [fadeAnim, translateY, progressAnim, duration]);
+
+  const progressWidth = progressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+  });
+
+  return (
+    <ToastContainer
+      type={type}
+      style={{
+        opacity: fadeAnim,
+        transform: [{ translateY }],
+      }}
+    >
+      <Title>{title}</Title>
+      <Message>{message}</Message>
+      <ProgressBar style={{ width: progressWidth }} />
+    </ToastContainer>
+  );
+};
+
+export { Toast };

package/src/components/Toast/index.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components/native';
+
+export const Notification = styled.View<{type: 'success' | 'error'}>`
+  padding: 10px 15px;
+  margin-top: 16px;
+  color: ${({type}) => (type === 'success' ? '#10b981' : '#ef4444')};
+  background: ${({type}) => (type === 'success' ? '#d1fae5' : '#fee2e2')};
+  border: 1px solid ${({type}) => (type === 'success' ? '#10b981' : '#ef4444')};
+  border-radius: 4px;
+`;
+
+export { Toast } from './Toast';
+export type { ToastType } from './Toast';

package/src/components/UsersList/StyledComponents.ts

@@ -0,0 +1,30 @@
+import styled from 'styled-components/native';
+import CheckBox from '@react-native-community/checkbox';
+
+export const ScrollableContainer = styled.View`
+  max-height: 100px;
+  overflow-y: auto;
+  width: 80%;
+  padding: 8px;
+  max-width: 80%;
+`;
+
+export const UserItem = styled.TouchableHighlight`
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border-bottom: 1px solid #f0f0f0;
+  gap: 8px;
+`;
+
+
+export const Checkbox = styled(CheckBox)`
+  width: 16px;
+  height: 16px;
+  tint-color: #0052cd;
+`;
+
+export const Label = styled.Text`
+  font-size: 16px;
+  color: #333;
+`;