@ethora/chat-component-rn 26.4.1

package/src/components/styled/StyledComponents.ts

@@ -0,0 +1,320 @@
+/** @format */
+
+import styled from 'styled-components/native';
+import { Dimensions } from 'react-native';
+
+const { width, height } = Dimensions.get('window');
+
+// General Containers
+export const ChatContainer = styled.View`
+  position: relative;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  background-color: #ffffff;
+`;
+
+export const ThreadContainer = styled.View`
+  flex-direction: col;
+  justify-content: space-between;
+  flex: 1;
+  width: 100%;
+  background-color: #ffffff;
+`;
+
+export const ChatContainerHeader = styled.View`
+  flex-direction: row;
+  padding: 12px 16px;
+  background-color: #ffffff;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  border-bottom-color: #e5e7eb;
+  border-style: solid;
+  z-index: 1000;
+`;
+
+export const CenterContainer = styled.View<{
+  rightSpace?: boolean;
+  leftSpace?: boolean;
+}>`
+  align-items: center;
+  justify-content: center;
+  width: ${({ rightSpace, leftSpace }) =>
+    rightSpace && !leftSpace
+      ? '100%'
+      : rightSpace || !leftSpace
+        ? '90%'
+        : '70%'};
+  padding-right: ${({ rightSpace }) => (rightSpace ? '16' : '0')}px;
+  padding-left: ${({ leftSpace }) => (leftSpace ? '16' : '0')}px;
+`;
+
+export const ChatContainerHeaderBoxInfo = styled.TouchableOpacity`
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  max-width: 90%;
+  gap: 16px;
+  flex: 1;
+`;
+
+export const ChatContainerHeaderInfo = styled.View`
+  flex: 1;
+  gap: 2px;
+  align-items: left;
+  justify-content: center;
+  overflow: hidden;
+  text-align: left;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+export const ChatContainerHeaderLabel = styled.Text`
+  color: #141414;
+  font-weight: 600;
+  font-size: 16px;
+  text-align: left;
+  overflow: hidden;
+  max-width: 100%;
+`;
+
+// Messages
+export const NonRoomChat = styled.View`
+  flex: 1;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+export const MessagesScroll = styled.ScrollView`
+  flex: 1;
+  background-color: #f3f6fc;
+  padding: 0px 16px;
+`;
+
+export const MessagesList = styled.View`
+  width: 100%;
+  min-height: 20px;
+  position: relative;
+`;
+
+export const MessageTimestamp = styled.Text`
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 5px;
+`;
+
+export const Message = styled.View<{ isUser: boolean }>`
+  background-color: ${(props) => (props.isUser ? '#e8eafd' : '#f3f6fc')};
+  padding: 10px;
+  margin: 10px 0;
+  border-radius: 8px;
+  max-width: 60%;
+  flex-direction: row;
+  align-self: ${(props) => (props.isUser ? 'flex-end' : 'flex-start')};
+`;
+
+export const MessageText = styled.Text`
+  margin: 0;
+  color: #141414;
+`;
+
+export const UserName = styled.Text`
+  font-weight: bold;
+  color: #141414;
+`;
+
+// Input Components
+export const InputContainer = styled.View`
+  background-color: #ffffff;
+  flex-direction: row;
+  gap: 5px;
+  padding: 8px;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+`;
+
+export const MessageInput = styled.TextInput`
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  background-color: #f5f7f9;
+  color: #141414;
+`;
+
+export const SendButton = styled.TouchableOpacity`
+  padding: 10px 20px;
+  border-radius: 8px;
+  background-color: #007bff;
+  box-shadow: 1px -1px 10px rgba(0, 0, 0, 0.25);
+  justify-content: center;
+  align-items: center;
+`;
+
+export const SendButtonText = styled.Text`
+  color: white;
+`;
+
+// Avatar and Utility Components
+export const AvatarCircle = styled.TouchableOpacity<{
+  bgColor?: string;
+  size?: number;
+  isClickable: boolean;
+}>`
+  width: ${({ size }) => `${size}px` || '64px'};
+  height: ${({ size }) => `${size}px` || '64px'};
+  border-radius: 60px;
+  background-color: ${({ bgColor }) => bgColor};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+`;
+
+export const AvatarImage = styled.Image<{ size?: number }>`
+  width: 100%;
+  height: 100%;
+  border-radius: 50px;
+  object-fit: cover;
+`;
+
+export const RemoveButton = styled.TouchableOpacity`
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 20px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50px;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const RemoveButtonText = styled.Text`
+  color: #fff;
+  font-size: 12px;
+  font-weight: bold;
+`;
+
+export const InitialsText = styled.Text<{ size?: number; color?: string }>`
+  font-size: ${({ size }) => (size && size >= 64 ? '24px' : '18px')};
+  color: ${({ color }) => (color ? color : '#fff')};
+  font-weight: bold;
+`;
+
+export const Overlay = styled.View`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+`;
+
+export const CustomMessageText = styled.Text<{
+  isUser?: boolean;
+  color?: string;
+  colorUser: string;
+}>`
+  margin: 0px;
+  color: ${({ color, isUser, colorUser }) =>
+    isUser ? colorUser || '#000' : color || '#000'};
+`;
+
+export const FileInput = styled.TextInput`
+  display: none;
+`;
+
+export const StyledLoaderWrapper = styled.View`
+  width: ${width}px;
+  height: ${height}px;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const OrDelimiter = styled.Text`
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`;
+
+export const OrDelimiterText = styled.Text`
+  font-size: 14px;
+  color: #999;
+`;
+
+export const Line = styled.View`
+  width: 100%;
+  height: 1px;
+  background-color: #0052cd0d;
+`;
+
+export const AlsoCheckbox = styled.View<{ accentColor: string }>`
+  width: 16px;
+  height: 16px;
+  background-color: ${(props) => props.accentColor};
+  border-radius: 4px;
+`;
+
+export const AlsoContainer = styled.TouchableOpacity`
+  align-items: center;
+  flex-direction: row;
+  gap: 8px;
+  background-color: #0052cd0d;
+  font-size: 14px;
+  padding: 10px 28px;
+  text-align: start;
+`;
+
+export const Wrapper = styled.View<{
+  bgColor?: string;
+  size?: number;
+  isClickable: boolean;
+}>`
+  width: ${({ size }) => `${size}px` || '64px'};
+  height: ${({ size }) => `${size}px` || '64px'};
+  margin: 8px 0 8px 8px;
+  border-radius: 60px;
+  background-color: ${({ bgColor }) => bgColor};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`;
+
+export const CustomSystemMessage = styled.View`
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: transparent;
+  gap: 16px;
+  margin: 8px;
+`;
+
+export const MessageFooter = styled.View<{ isUser: boolean }>`
+  flex-direction: row;
+  justify-content: flex-start;
+  position: absolute;
+  gap: 6px;
+  bottom: -25px;
+  left: ${(props) => (!props.isUser ? '10px' : 'auto')};
+  right: ${(props) => (props.isUser ? '10px' : 'auto')};
+
+  @media (max-width: 675px) {
+    font-size: 12px;
+    bottom: -24px;
+  }
+`;

package/src/components/styled/StyledInput.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { View, Text, TextInput, StyleSheet } from 'react-native';
+
+interface StyledInputProps {
+  label?: string;
+  color?: string;
+  helperText?: string;
+  error?: boolean;
+  [key: string]: any;
+}
+
+const InputWrapper = ({ children }: { children: React.ReactNode }) => {
+  return <View style={styles.inputWrapper}>{children}</View>;
+};
+
+const Label = ({ children }: { children: React.ReactNode }) => (
+  <Text style={styles.label}>{children}</Text>
+);
+
+const StyledInput = ({
+  color,
+  error,
+  ...props
+}: { color?: string; error?: boolean } & React.ComponentProps<
+  typeof TextInput
+>) => (
+  <TextInput
+    style={[
+      styles.input,
+      {
+        borderColor: error ? 'red' : color || '#0052CD',
+        backgroundColor: '#F5F7F9',
+      },
+    ]}
+    {...props}
+  />
+);
+
+const HelperText = ({
+  children,
+  error,
+}: {
+  children: React.ReactNode;
+  error?: boolean;
+}) => (
+  <Text style={[styles.helperText, { color: error ? 'red' : '#8c8c8c' }]}>
+    {children}
+  </Text>
+);
+
+const InputWithLabel: React.FC<StyledInputProps> = ({
+  label,
+  color,
+  helperText,
+  error,
+  ...rest
+}) => {
+  return (
+    <InputWrapper>
+      {label && <Label>{label}</Label>}
+      <StyledInput color={color} error={error} {...rest} />
+      {helperText && <HelperText error={error}>{helperText}</HelperText>}
+    </InputWrapper>
+  );
+};
+
+const styles = StyleSheet.create({
+  inputWrapper: {
+    flexDirection: 'column',
+    width: '100%',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    position: 'relative',
+    height: 48,
+    borderRadius: 15,
+    paddingHorizontal: 16,
+  },
+  label: {
+    fontSize: 14,
+    color: '#8c8c8c',
+    marginBottom: 4,
+    marginLeft: 8,
+  },
+  input: {
+    width: '100%',
+    padding: 12,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    fontSize: 16,
+    borderWidth: 1,
+  },
+  helperText: {
+    fontSize: 12,
+    marginTop: 4,
+    marginLeft: 8,
+    position: 'absolute',
+    top: 42,
+  },
+});
+
+export default InputWithLabel;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,97 @@
+import React, { FC, useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+
+// Define props
+interface ComposingProps {
+  usersTyping?: string[];
+  style?: any;
+}
+
+// Composing component
+const Composing: FC<ComposingProps> = ({ usersTyping = ['User'], style }) => {
+  const fadeAnim1 = useRef(new Animated.Value(0.2)).current;
+  const fadeAnim2 = useRef(new Animated.Value(0.2)).current;
+  const fadeAnim3 = useRef(new Animated.Value(0.2)).current;
+
+  const animateDot = (animatedValue: Animated.Value, delay: number) => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+          delay,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 0.2,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  };
+
+  useEffect(() => {
+    animateDot(fadeAnim1, 0);
+    animateDot(fadeAnim2, 200);
+    animateDot(fadeAnim3, 400);
+  }, []);
+
+  let typingText: string;
+  if (usersTyping.length === 1) {
+    typingText = `${usersTyping[0]} is typing`;
+  } else if (usersTyping.length === 2) {
+    typingText = `${usersTyping[0]} and ${usersTyping[1]} are typing`;
+  } else if (usersTyping.length > 2) {
+    typingText = `${usersTyping.length} people are typing`;
+  } else {
+    typingText = '';
+  }
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      {typingText ? (
+        <Text style={styles.typingText}>{typingText}</Text>
+      ) : (
+        <View />
+      )}
+      <View style={styles.dotsContainer}>
+        <Animated.Text style={[styles.dot, { opacity: fadeAnim1 }]}>
+          .
+        </Animated.Text>
+        <Animated.Text style={[styles.dot, { opacity: fadeAnim2 }]}>
+          .
+        </Animated.Text>
+        <Animated.Text style={[styles.dot, { opacity: fadeAnim3 }]}>
+          .
+        </Animated.Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 4,
+  },
+  typingText: {
+    marginRight: 4,
+    fontSize: 12,
+    color: '#71717A',
+    fontStyle: 'italic',
+  },
+  dotsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  dot: {
+    fontSize: 18,
+    lineHeight: 18,
+    marginHorizontal: 1,
+    color: '#71717A',
+  },
+});
+
+export default Composing;