@ethora/chat-component-rn 26.4.1

package/src/components/ContextMenu/ContextMenuComponents.tsx

@@ -0,0 +1,87 @@
+import { Picker } from 'emoji-mart';
+import styled from 'styled-components/native';
+
+export const ContainerInteractions = styled.View`
+  position: absolute;
+  z-index: 1000;
+`;
+
+export const ReactionContainer = styled.View`
+  max-width: 245px;
+  display: flex;
+  margin-bottom: 16px;
+  gap: 8px;
+  padding: 8px;
+  justify-content: space-around;
+  background-color: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+
+export const ReactionBadge = styled.Text`
+  font-size: 22px;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: scale(1.2);
+  }
+`;
+
+export const ArrowButton = styled.View<{ isRotated: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+
+  transform: ${({ isRotated }) =>
+    isRotated ? 'rotate(180deg)' : 'rotate(0deg)'};
+`;
+
+export const StyledPicker = styled(Picker)`
+  .emoji-mart-preview {
+    display: none;
+  }
+`;
+
+export const ContextMenu = styled.View`
+  position: absolute;
+  z-index: 1000;
+  background-color: white;
+  border-radius: 8px;
+  elevation: 4;
+  shadow-color: #121219;
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.1;
+  shadow-radius: 6px;
+  padding: 8px 16px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const MenuItem = styled.Pressable`
+  padding: 8px 8px;
+  min-width: 150px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Overlay = styled.Pressable`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  background: transparent;
+`;
+
+export const Delimeter = styled.View`
+  border: 1px solid #0052cd0d;
+`;
+
+// export const Delimeter = styled.View`
+//   border: 1px solid var(--colors-background-bg-prymary-5, #0052cd0d);
+// `;

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,244 @@
+import React, { useState, useEffect, ReactElement, useRef } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  Animated,
+  TextStyle,
+  TouchableWithoutFeedback,
+  Modal,
+} from 'react-native';
+import { BurgerMenuIcon } from '../../assets/icons';
+import { IConfig } from '../../types/types';
+import Button from '../styled/Button';
+
+const positionMenu = {
+  right: { top: 95, right: 10 },
+  left: { top: 95, left: 0 },
+  rightBottom: { bottom: 95, right: 10 },
+  leftBottom: { bottom: 95, left: 10 },
+};
+
+export interface MenuOption {
+  label: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+  styles?: TextStyle;
+}
+
+interface DropdownMenuProps {
+  options: MenuOption[];
+  onClose?: any;
+  openButton?: ReactElement | ((onPress: () => void) => ReactElement);
+  position?: 'left' | 'right' | 'rightBottom' | 'leftBottom';
+  config?: IConfig;
+  menuIcon?: React.ReactNode;
+}
+
+const DropdownMenu: React.FC<DropdownMenuProps> = ({
+  options,
+  openButton,
+  position = 'right',
+  menuIcon,
+  config,
+  onClose,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<View>(null);
+
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const translateYAnim = useRef(new Animated.Value(-10)).current;
+
+  const toggleMenu = () => {
+    setIsOpen((prev) => {
+      return !prev;
+    });
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      fadeAnim.setValue(1);
+      translateYAnim.setValue(0);
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateYAnim, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isOpen]);
+
+  return (
+    <View style={styles.container}>
+      {openButton ? (
+        typeof openButton === 'function' ? (
+          openButton(toggleMenu)
+        ) : (
+          React.cloneElement(openButton as React.ReactElement<any>, {
+            onPress: toggleMenu,
+            key: 'dropdown-button',
+          })
+        )
+      ) : (
+        // <TouchableOpacity onPress={toggleMenu} style={styles.button}>
+        //   {menuIcon ?? <Text style={styles.icon}>☰</Text>}
+        // </TouchableOpacity>
+        <Button
+          style={{
+            padding: 8,
+            borderRadius: 16,
+            backgroundColor: 'transparent',
+          }}
+          color="black"
+          unstyled
+          EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
+          onPress={toggleMenu}
+        />
+      )}
+      {isOpen && (
+        <Modal
+          transparent
+          visible={isOpen}
+          animationType="fade"
+          onRequestClose={() => {
+            setIsOpen(false);
+          }}
+        >
+          <TouchableOpacity
+            style={styles.overlay}
+            activeOpacity={1}
+            onPress={() => {
+              setIsOpen(false);
+              onClose && onClose();
+            }}
+          >
+            <View style={styles.menuContainer} pointerEvents="box-none">
+              <TouchableWithoutFeedback onPress={() => {}}>
+                <Animated.View
+                  ref={menuRef}
+                  style={[
+                    styles.menu,
+                    positionMenu[position],
+                    {
+                      opacity: fadeAnim,
+                      transform: [{ translateY: translateYAnim }],
+                    },
+                  ]}
+                >
+              {options.map((option, index) => (
+                <View key={`${option.label}-${index}`} style={styles.menuItemWrapper}>
+                  <TouchableOpacity
+                    style={styles.menuItem}
+                    onPress={async () => {
+                      setIsOpen(false);
+                      onClose && onClose();
+                      setTimeout(() => {
+                        try {
+                          option.onClick();
+                        } catch (error) {
+                          console.error('Error in option.onClick:', error);
+                        }
+                      }, 200);
+                    }}
+                  >
+                    <View
+                      style={{
+                        width: 22,
+                        alignItems: 'center',
+                      }}
+                    >
+                      {option.icon}
+                    </View>
+                    <Text style={[styles.label, option?.styles]}>
+                      {option.label}
+                    </Text>
+                  </TouchableOpacity>
+                  {index < options.length - 1 && (
+                    <View style={styles.divider} />
+                  )}
+                </View>
+              ))}
+                </Animated.View>
+              </TouchableWithoutFeedback>
+            </View>
+          </TouchableOpacity>
+        </Modal>
+      )}
+    </View>
+  );
+};
+
+export default DropdownMenu;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    zIndex: 100,
+  },
+  overlay: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+  },
+  menuContainer: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    position: 'relative',
+  },
+  button: {
+    padding: 10,
+    backgroundColor: '#0052CD',
+    borderRadius: 8,
+  },
+  icon: {
+    color: '#fff',
+    fontSize: 24,
+  },
+  menu: {
+    position: 'absolute',
+    backgroundColor: '#fcfcfc',
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    minWidth: 150,
+    zIndex: 1000,
+    elevation: 10, // Android
+    shadowColor: '#121219', // iOS
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 6,
+  },
+  menuItemWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+  },
+  label: {
+    fontSize: 16,
+    marginLeft: 10,
+  },
+  divider: {
+    height: 1,
+    width: '100%',
+    backgroundColor: '#0052cd0d',
+  },
+});

package/src/components/ExampleComponents/CustomMessage.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef } from 'react';
+
+import styled from 'styled-components/native';
+import { MessageProps } from '../../types/types';
+import { View } from 'react-native';
+
+export const MessageContainer = styled.View<{ isUser: boolean }>`
+  display: flex;
+  flex-direction: ${(props) => (!props.isUser ? 'row' : 'row-reverse')};
+  align-items: center;
+  margin: 10px 0;
+  width: 100%;
+`;
+
+export const MessageBubble = styled.View<{ isUser: boolean }>`
+  background-color: ${(props) => (!props.isUser ? '#f1f0f0' : '#0052CD')};
+  color: ${(props) => (!props.isUser ? '#000' : '#fff')};
+  border-radius: 12px;
+  padding: 10px;
+  max-width: 60%;
+`;
+
+export const MessageText = styled.View`
+  margin: 0;
+  flex-wrap: wrap;
+`;
+
+export const UserName = styled.Text<{ isUser: boolean; color?: string }>`
+  font-weight: bold;
+  color: ${(props) =>
+    props.color ? props.color : props.isUser ? '#0052CD' : '#333'};
+  margin-right: 8px;
+`;
+
+export const MessageTimestamp = styled.Text`
+  font-size: 13px;
+  color: #999;
+  margin-left: 8px;
+`;
+
+export const MessagePhoto = styled.Image`
+  max-width: 100%;
+  border-radius: 8px;
+  margin-top: 8px;
+`;
+
+export const MessagePhotoContainer = styled.Text`
+  max-width: 100px;
+  margin: 0;
+`;
+
+export const SystemMessage = styled.Text`
+  background-color: #e0e0e0;
+  color: #555;
+  text-align: center;
+  padding: 8px;
+  border-radius: 8px;
+  margin: 10px 0;
+  max-width: 60%;
+`;
+
+export const SystemMessageText = styled.Text`
+  margin: 0;
+  font-size: 14px;
+  color: #333;
+`;
+
+const CustomMessageExample = forwardRef<View, MessageProps>(
+  ({ message, isUser }, ref) => {
+    return (
+      <View
+        ref={ref}
+        style={[
+          {
+            flexDirection: isUser ? 'row-reverse' : 'row',
+            alignItems: 'center',
+            marginVertical: 10,
+            width: '100%',
+          },
+        ]}
+      >
+        <MessageBubble isUser={isUser}>
+          <UserName isUser={isUser}>{message.user.name}</UserName>
+          <MessageText>{message.body}</MessageText>
+          <MessageTimestamp>{message.timestamp}</MessageTimestamp>
+        </MessageBubble>
+      </View>
+    );
+  }
+);
+
+export default CustomMessageExample;

package/src/components/ExampleComponents/CustomTypingIndicatorExamples.tsx

@@ -0,0 +1,239 @@
+/* eslint-disable react-hooks/rules-of-hooks -- pre-existing port artifacts; hooks called conditionally / inside helpers. TODO: refactor */
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import styled from 'styled-components/native';
+
+type Props = {
+  usersTyping?: string[];
+  text: string;
+  isVisible: boolean;
+};
+
+const AIWrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+  background-color: #667eea; /* можно заменить на градиент через rn-linear-gradient */
+  padding: 12px 20px;
+  border-radius: 25px;
+
+  /* тень iOS */
+  shadow-color: #667eea;
+  shadow-opacity: 0.3;
+  shadow-offset: 0px 4px;
+  shadow-radius: 10px;
+
+  /* тень Android */
+  elevation: 3;
+`;
+
+const AIAvatar = styled.View`
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  background-color: rgba(255, 255, 255, 0.2);
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+`;
+
+const AIAvatarText = styled.Text`
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+`;
+
+const AIText = styled.Text`
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+`;
+
+const AnimatedAIWrapper = styled(Animated.View)``;
+
+export const AIProcessingIndicator: React.FC<Props> = ({ text, isVisible }) => {
+  if (!isVisible) {return null;}
+
+  const scale = useRef(new Animated.Value(1)).current;
+  const opacity = useRef(new Animated.Value(0.6)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.parallel([
+        Animated.sequence([
+          Animated.timing(scale, { toValue: 1.05, duration: 1000, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
+          Animated.timing(scale, { toValue: 1, duration: 1000, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
+        ]),
+        Animated.sequence([
+          Animated.timing(opacity, { toValue: 1, duration: 1000, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
+          Animated.timing(opacity, { toValue: 0.6, duration: 1000, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
+        ]),
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [opacity, scale]);
+
+  return (
+    <AnimatedAIWrapper style={{ transform: [{ scale }], opacity }}>
+      <AIWrapper>
+        <AIAvatar>
+          <AIAvatarText>AI</AIAvatarText>
+        </AIAvatar>
+        <AIText>{text}</AIText>
+      </AIWrapper>
+    </AnimatedAIWrapper>
+  );
+};
+
+const MinWrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+`;
+
+const Dot = styled(Animated.View)`
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: #666;
+  margin: 0 2px;
+`;
+
+export const MinimalTypingIndicator: React.FC<Props> = ({ isVisible }) => {
+  if (!isVisible) {return null;}
+
+  const makeOpacity = (delay: number) => {
+    const o = new Animated.Value(0.2);
+    useEffect(() => {
+      const loop = Animated.loop(
+        Animated.sequence([
+          Animated.timing(o, { toValue: 1, duration: 350, delay, useNativeDriver: true }),
+          Animated.timing(o, { toValue: 0.2, duration: 700, useNativeDriver: true }),
+        ])
+      );
+      loop.start();
+      return () => loop.stop();
+    }, []);
+    return o;
+  };
+
+  const o1 = makeOpacity(0);
+  const o2 = makeOpacity(200);
+  const o3 = makeOpacity(400);
+
+  return (
+    <MinWrapper>
+      <Dot style={{ opacity: o1 }} />
+      <Dot style={{ opacity: o2 }} />
+      <Dot style={{ opacity: o3 }} />
+    </MinWrapper>
+  );
+};
+
+const Bubble = styled.View`
+  background-color: #f0f0f0;
+  border-radius: 18px;
+  padding: 8px 16px;
+  margin: 4px 0;
+  align-self: flex-start;
+  max-width: 240px;
+`;
+
+const BubbleText = styled.Text`
+  font-size: 14px;
+  color: #666;
+`;
+
+const BubbleTail = styled.View`
+  position: absolute;
+  bottom: -6px;
+  left: 20px;
+  width: 0px;
+  height: 0px;
+  border-left-width: 6px;
+  border-right-width: 6px;
+  border-top-width: 6px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-top-color: #f0f0f0;
+`;
+
+const BubbleWrapper = styled.View`
+  position: relative;
+  align-self: flex-start;
+`;
+
+export const ChatBubbleTypingIndicator: React.FC<Props> = ({ text, isVisible }) => {
+  if (!isVisible) {return null;}
+
+  return (
+    <BubbleWrapper>
+      <Bubble>
+        <BubbleText>{text}</BubbleText>
+      </Bubble>
+      <BubbleTail />
+    </BubbleWrapper>
+  );
+};
+
+const ProgressWrap = styled.View`
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  padding: 8px 16px;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const ProgressLabel = styled.Text`
+  font-size: 12px;
+  color: #666;
+  margin-right: 8px;
+`;
+
+const Bar = styled.View`
+  width: 60px;
+  height: 4px;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  overflow: hidden;
+`;
+
+const Runner = styled(Animated.View)`
+  width: 60px;
+  height: 4px;
+  background-color: #007bff;
+`;
+
+export const ProgressTypingIndicator: React.FC<Props> = ({ text, isVisible }) => {
+  if (!isVisible) {return null;}
+
+  const tx = useRef(new Animated.Value(-60)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(tx, { toValue: 60, duration: 1500, easing: Easing.linear, useNativeDriver: true }),
+        Animated.timing(tx, { toValue: -60, duration: 0, useNativeDriver: true }),
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [tx]);
+
+  return (
+    <ProgressWrap>
+      <ProgressLabel>{text}</ProgressLabel>
+      <Bar>
+        <Runner style={{ transform: [{ translateX: tx }] }} />
+      </Bar>
+    </ProgressWrap>
+  );
+};
+
+export const CustomTypingIndicatorExamples = {
+  AIProcessingIndicator,
+  MinimalTypingIndicator,
+  ChatBubbleTypingIndicator,
+  ProgressTypingIndicator,
+};