@ethora/chat-component-rn 26.4.1

package/src/components/styled/StyledInputComponents/CustomTypingIndicator.tsx

@@ -0,0 +1,261 @@
+/* eslint-disable react-hooks/rules-of-hooks -- pre-existing port artifacts; hooks called conditionally / inside helpers. TODO: refactor */
+// CustomTypingIndicator.native.tsx
+import React, { FC, useEffect, useMemo, useRef } from 'react';
+import styled, { css } from 'styled-components/native';
+import {
+  Animated,
+  Easing,
+  StyleProp,
+  ViewStyle,
+  View,
+  Text,
+} from 'react-native';
+
+/* -------- Types -------- */
+export interface CustomTypingIndicatorProps {
+  usersTyping: string[];
+  text?: string | ((usersTyping: string[]) => string);
+  position?: 'bottom' | 'top' | 'overlay' | 'floating';
+  styles?: StyleProp<ViewStyle>; // RN-эквивалент CSSProperties
+  customComponent?: React.ComponentType<{
+    usersTyping: string[];
+    text: string;
+    isVisible: boolean;
+  }>;
+  isVisible: boolean;
+}
+
+/* -------- Helpers (texts) -------- */
+export const generateDefaultText = (usersTyping: string[]): string => {
+  if (usersTyping.length === 0) {return '';}
+  if (usersTyping.length === 1) {return `${usersTyping[0]} is typing`;}
+  if (usersTyping.length === 2)
+    {return `${usersTyping[0]} and ${usersTyping[1]} are typing`;}
+  return `${usersTyping.length} people are typing`;
+};
+
+export const generateProcessingText = (usersTyping: string[]): string => {
+  if (usersTyping.length === 0) {return '';}
+  const processingStates = ['processing', 'thinking', 'generating answer'];
+  const randomState =
+    processingStates[Math.floor(Math.random() * processingStates.length)];
+  if (usersTyping.length === 1) {return `${usersTyping[0]} is ${randomState}`;}
+  if (usersTyping.length === 2)
+    {return `${usersTyping[0]} and ${usersTyping[1]} are ${randomState}`;}
+  return `${usersTyping.length} people are ${randomState}`;
+};
+
+/* -------- Styled (static layout) -------- */
+
+const BaseWrapper = styled.View<{ $position: NonNullable<CustomTypingIndicatorProps['position']> }>`
+  flex-direction: row;
+  align-items: center;
+  z-index: 1000;
+  /* основная типографика */
+  /* (цвета текста задаём на текстовых нодах) */
+
+  ${({ $position }) => {
+    switch ($position) {
+      case 'top':
+        return css`
+          position: absolute;
+          top: 8px;
+          left: 16px;
+          right: 16px;
+          background-color: rgba(255, 255, 255, 0.95);
+          padding: 8px 12px;
+          border-radius: 8px;
+          /* тени (iOS/Android) */
+          shadow-color: #000;
+          shadow-opacity: 0.1;
+          shadow-radius: 8px;
+          shadow-offset: 0px 2px;
+          elevation: 3;
+        `;
+      case 'overlay':
+        // В RN нет position: fixed, используем absolute + центрирование
+        return css`
+          position: absolute;
+          top: 0; left: 0; right: 0; bottom: 0;
+          align-items: center;
+          justify-content: center;
+          background-color: rgba(0, 0, 0, 0.4); /* лёгкая вуаль */
+          padding: 16px 24px;
+        `;
+      case 'floating':
+        return css`
+          position: absolute;
+          right: 20px;
+          bottom: 80px;
+          background-color: rgba(255, 255, 255, 0.95);
+          padding: 12px 16px;
+          border-radius: 20px;
+          shadow-color: #000;
+          shadow-opacity: 0.15;
+          shadow-radius: 12px;
+          shadow-offset: 0px 4px;
+          elevation: 4;
+        `;
+      case 'bottom':
+      default:
+        return css`
+          /* встроенное расположение в потоке */
+          padding: 8px 0;
+        `;
+    }
+  }}
+`;
+
+const Label = styled.Text`
+  margin-right: 8px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #555;
+`;
+
+const DotsRow = styled.View`
+  flex-direction: row;
+  align-items: center;
+`;
+
+/* -------- Animated helpers -------- */
+
+// pulse для wrapper'ов overlay/floating (scale + opacity)
+const usePulse = () => {
+  const scale = useRef(new Animated.Value(1)).current;
+  const opacity = useRef(new Animated.Value(0.8)).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.8,
+            duration: 1000,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+          }),
+        ]),
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [opacity, scale]);
+
+  return { scale, opacity };
+};
+
+// мигание одной точки
+const useBlink = (delay = 0) => {
+  const o = useRef(new Animated.Value(0.2)).current;
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(o, {
+          toValue: 1,
+          duration: 300,
+          delay,
+          useNativeDriver: true,
+        }),
+        Animated.timing(o, {
+          toValue: 0.2,
+          duration: 900,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [o, delay]);
+  return o;
+};
+
+/* Точка — как View (а не текст), чтобы выглядело одинаково на iOS/Android */
+const DotView = styled(Animated.View)`
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: #666;
+  margin-right: 2px;
+`;
+
+/* -------- Component -------- */
+
+const CustomTypingIndicator: FC<CustomTypingIndicatorProps> = ({
+  usersTyping = [],
+  text,
+  position = 'bottom',
+  styles,
+  customComponent: CustomComponent,
+  isVisible = true,
+}) => {
+  if (!isVisible || usersTyping.length === 0) {return null;}
+
+  const displayText = useMemo(() => {
+    if (typeof text === 'function') {return text(usersTyping);}
+    if (typeof text === 'string') {return text;}
+    return generateDefaultText(usersTyping);
+  }, [text, usersTyping]);
+
+  // Анимации
+  const pulse = usePulse();
+  const o1 = useBlink(0);
+  const o2 = useBlink(200);
+  const o3 = useBlink(400);
+
+  if (CustomComponent) {
+    return (
+      <CustomComponent
+        usersTyping={usersTyping}
+        text={displayText}
+        isVisible={isVisible}
+      />
+    );
+  }
+
+  // Для overlay/floating оборачиваем в Animated.View, чтобы дать pulse
+  const WrapperComponent =
+    position === 'overlay' || position === 'floating'
+      ? Animated.View
+      : View;
+
+  const animatedStyle =
+    position === 'overlay' || position === 'floating'
+      ? { transform: [{ scale: pulse.scale }], opacity: pulse.opacity }
+      : null;
+
+  return (
+    <WrapperComponent style={animatedStyle as any}>
+      <BaseWrapper $position={position} style={styles}>
+        <Label>{displayText}</Label>
+        <DotsRow>
+          <DotView style={{ opacity: o1 }} />
+          <DotView style={{ opacity: o2 }} />
+          <DotView style={{ opacity: o3 }} />
+        </DotsRow>
+      </BaseWrapper>
+    </WrapperComponent>
+  );
+};
+
+export default CustomTypingIndicator;

package/src/components/styled/StyledInputComponents/MediaComponents.tsx

@@ -0,0 +1,90 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const FullScreenImage = styled.Image`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
+
+export const ModalContent = styled.View`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+`;
+
+export const ButtonContainer = styled.View`
+  display: flex;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  gap: 4px;
+`;
+
+export const IconButton = styled.TouchableOpacity`
+  border: none;
+  cursor: pointer;
+  color: gray;
+  font-size: 36px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  pointer-events: auto;
+`;
+
+export const UnsupportedContainer = styled.TouchableOpacity`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 8px;
+  padding: 10px;
+  margin: 5px 0;
+  cursor: pointer;
+  gap: 8px;
+`;
+
+export const BackgroundFile = styled.View`
+  background-color: #f9f9f9;
+  border-radius: 8px;
+`;
+
+export const FileInformation = styled.View`
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+`;
+
+export const FileName = styled.Text`
+  font-size: 14px;
+  font-weight: 500;
+  flex-grow: 1;
+  color: #fff;
+  overflow: hidden;
+`;
+
+export const FileSizeContainer = styled.View`
+  align-items: flex-start;
+  flex-direction: row;
+  background-color: #f2e6f6;
+  padding: 2px 8px;
+  border-radius: 10px;
+`;
+
+export const FileSize = styled.Text`
+  color: #53575a;
+  overflow: hidden;
+  text-align: left;
+  font-weight: 500;
+`;

package/src/components/styled/StyledInputComponents/StyledInputComponents.tsx

@@ -0,0 +1,131 @@
+/** @format */
+
+import styled from 'styled-components/native';
+
+// Theme variables for reuse
+const colors = {
+  primary: '#141414',
+  secondary: '#f5f7f9',
+  border: '#ccc',
+  white: '#fff',
+  black: '#000',
+};
+
+export const InputContainer = styled.View<{ isText?: boolean }>`
+  flex-direction: column;
+  padding: 12px 16px;
+  background-color: ${colors.white};
+  z-index: 100;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  border-top-width: 1px;
+  border-top-color: #e5e7eb;
+`;
+
+export const MediaContainer = styled.View`
+  flex-direction: row;
+  gap: 8px;
+  padding: 0 16px 8px;
+`;
+
+export const MediaImage = styled.Image`
+  width: 70px;
+  height: 70px;
+  border-radius: 8px;
+`;
+
+export const MessageInputContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+`;
+
+export const MessageInput = styled.TextInput<{
+  isFocused?: boolean;
+  color?: string;
+}>`
+  padding: 10px 14px;
+  border-radius: 20px;
+  border-width: 1px;
+  border-color: ${(props) =>
+    props.isFocused ? props.color || '#0052CD' : 'transparent'};
+  color: #141414;
+  background-color: #f5f7f9;
+  flex: 1;
+  text-align-vertical: center;
+  line-height: 20px;
+  include-font-padding: false;
+`;
+
+export const HiddenFileInput = styled.View``;
+
+export const Timer = styled.Text`
+  justify-content: center;
+  align-items: center;
+  margin-left: 10px;
+`;
+
+export const TimerText = styled.Text`
+  font-size: 18px;
+  font-weight: bold;
+  color: ${colors.black};
+`;
+
+export const WaveformContainer = styled.View`
+  width: 100%;
+  height: 40px;
+  background-color: #f1f1f1;
+`;
+
+export const RecordContainer = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
+export const FilePreviewContainer = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+`;
+
+export const FilePreview = styled.View`
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 100px;
+  border-width: 1px;
+  border-color: ${colors.border};
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  overflow: hidden;
+`;
+
+export const FileIcon = styled.Image`
+  max-width: 80%;
+  max-height: 80%;
+`;
+
+export const VideoPreview = styled.View`
+  width: 100%;
+  height: 100%;
+`;
+
+export const StyledInput = styled.TextInput`
+  padding: 16px 12px;
+  background-color: ${colors.secondary};
+  font-size: 16px;
+  border-radius: 16px;
+`;
+
+export const TextareaInput = styled.TextInput`
+  padding: 16px 12px;
+  background-color: ${colors.secondary};
+  font-size: 16px;
+  color: ${colors.black};
+  border-radius: 16px;
+`;

package/src/components/styled/StyledInputComponents/VideoComponents.tsx

@@ -0,0 +1,49 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const FullScreenVideo = styled.video`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
+
+export const FixedSizeVideo = styled.video`
+  width: 300px;
+  height: 200px;
+  object-fit: cover;
+`;
+
+export const ModalContent = styled.View`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+`;
+
+export const ButtonContainer = styled.View`
+  display: flex;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`;
+
+export const IconButton = styled.TouchableOpacity`
+  border: none;
+  cursor: pointer;
+  color: gray;
+  font-size: 36px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  pointer-events: auto;
+`;

package/src/components/styled/TreadLabel.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import { Line } from './StyledComponents';
+
+interface DateLabelProps {
+  reply: number;
+  colors?: { primary?: string; secondary?: string };
+}
+
+const Container = styled.View`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: transparent;
+  gap: 16px;
+`;
+
+export const StyledDateLabel = styled.Text<{
+  primary?: string;
+  secondary?: string;
+}>`
+  margin: 0;
+  color: ${(props) => props.primary || '#0052cd'};
+  border-radius: 118px;
+  padding: 5px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 600;
+  background-color: ${(props) => props.secondary || '#e7edf9'};
+  height: 24px;
+  white-space: nowrap;
+`;
+
+const TreadLabel: React.FC<DateLabelProps> = ({ reply, colors }) => {
+  return (
+    <Container>
+      <Line />
+      <StyledDateLabel {...colors}>
+        {reply} {reply > 1 ? 'replies' : 'reply'}
+      </StyledDateLabel>
+      <Line />
+    </Container>
+  );
+};
+
+export default TreadLabel;

package/src/components/styled/UnsupportedType.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import {
+  BackgroundFile,
+  FileInformation,
+  FileName,
+  FileSize,
+  FileSizeContainer,
+  UnsupportedContainer,
+} from './StyledInputComponents/MediaComponents';
+import { useDispatch } from 'react-redux';
+import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+import {
+  setActiveFile,
+  setActiveModal,
+} from '../../roomStore/chatSettingsSlice';
+import { Text, View } from 'react-native';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { FileIcon } from '../../assets/icons';
+
+interface FileDownloadProps {
+  fileName: string;
+  fileURL: string;
+  mimetype: string;
+  size?: string;
+}
+
+const FileDownload: React.FC<FileDownloadProps> = ({
+  fileName,
+  fileURL,
+  mimetype,
+  size,
+}) => {
+  const dispatch = useDispatch();
+  const { config } = useChatSettingState();
+
+  const formatFileSize = (sizeInBytes: string): string => {
+    const size = parseInt(sizeInBytes, 10);
+
+    if (isNaN(size)) {
+      return 'Invalid size';
+    }
+
+    if (size < 1024) {
+      return `${size} B`;
+    } else if (size < 1024 ** 2) {
+      return `${(size / 1024).toFixed(2)} KB`;
+    } else if (size < 1024 ** 3) {
+      return `${(size / 1024 ** 2).toFixed(2)} MB`;
+    } else {
+      return `${(size / 1024 ** 3).toFixed(2)} GB`;
+    }
+  };
+
+  const formatFileName = (name: string, maxLength: number): string => {
+    const dotIndex = name.lastIndexOf('.');
+    const extension = dotIndex !== -1 ? name.substring(dotIndex) : '';
+
+    const baseName = dotIndex !== -1 ? name.substring(0, dotIndex) : name;
+
+    if (baseName.length + extension.length <= maxLength) {
+      return name;
+    }
+
+    const shortenedBaseName = baseName.substring(
+      0,
+      maxLength - extension.length - 3
+    );
+
+    return `${shortenedBaseName}...${extension}`;
+  };
+
+  const handleOpen = () => {
+    dispatch(setActiveFile({ fileName, fileURL, mimetype }));
+    dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
+  };
+
+  return (
+    <UnsupportedContainer onPress={handleOpen}>
+      <BackgroundFile>
+        <FileIcon />
+      </BackgroundFile>
+      <FileInformation>
+        <FileName>{formatFileName(fileName, 20)}</FileName>
+        {size && (
+          <FileSizeContainer>
+            <FileSize>{formatFileSize(size)}</FileSize>
+          </FileSizeContainer>
+        )}
+      </FileInformation>
+    </UnsupportedContainer>
+  );
+};
+
+export default FileDownload;