@ethora/chat-component-rn 26.5.17 → 26.5.19

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -12,6 +12,7 @@ import {
 import { BurgerMenuIcon } from '../../assets/icons';
 import { IConfig } from '../../types/types';
 import Button from '../styled/Button';
+import { getIconColor } from '../../helpers/getIconColor';
 
 const positionMenu = {
   right: { top: 95, right: 10 },
@@ -104,7 +105,7 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({
           }}
           color="black"
           unstyled
-          EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
+          EndIcon={<BurgerMenuIcon color={getIconColor(config)} />}
           onPress={toggleMenu}
         />
       )}

package/src/components/MainComponents/ChatHeader.tsx

@@ -27,6 +27,8 @@ import { RoomMenu } from '../MenuRoom/MenuRoom';
 import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { View, StyleSheet, Text, Keyboard } from 'react-native';
+import { getIconColor } from '../../helpers/getIconColor';
+import { getElementFont } from '../../helpers/getElementFont';
 
 interface ChatHeaderProps {
   currentRoom: IRoom;
@@ -89,7 +91,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
               style={styles.menuButton}
               color="black"
               unstyled
-              EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
+              EndIcon={<BurgerMenuIcon color={getIconColor(config)} />}
               onPress={handleHeaderChatMenu}
             />
           </View>
@@ -146,7 +148,11 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
               }
             />
             <ChatContainerHeaderInfo>
-              <ChatContainerHeaderLabel numberOfLines={1} ellipsizeMode="tail">
+              <ChatContainerHeaderLabel
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                style={getElementFont(config, 'chatHeaderTitle')}
+              >
               {currentRoom?.title || currentRoom?.name}
               </ChatContainerHeaderLabel>
               <View>

package/src/components/MainComponents/ChatRoom.tsx

@@ -18,7 +18,8 @@ import ChatHeader from './ChatHeader';
 import NoMessagesPlaceholder from './NoMessagesPlaceholder';
 import NewChatModal from '../Modals/NewChatModal/NewChatModal';
 import { EditWrapper } from './EditWrapper';
-import { NoSelectedChatIcon } from '../../assets/icons';
+import { EmptyChatIllustration } from '../../assets/EmptyChatIllustration';
+import { getIconColor } from '../../helpers/getIconColor';
 import { ChooseChatMessage } from './ChooseChatMessage';
 import { useRoomUrl } from '../../hooks/useRoomUrl';
 import { useSendMessage } from '../../hooks/useSendMessage';
@@ -320,7 +321,9 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                   alignItems: 'center',
                 }}
               >
-                <NoSelectedChatIcon />
+                <EmptyChatIllustration
+                  color={getIconColor(configWithEventHandlers)}
+                />
               </View>
             ) : !roomMessages || roomMessages.length === 0 ? (
               <View

package/src/components/MainComponents/ChooseChatMessage.tsx

@@ -1,5 +1,7 @@
 import { styled } from 'styled-components/native';
-import { NoSelectedChatIcon } from '../../assets/icons';
+import { EmptyChatIllustration } from '../../assets/EmptyChatIllustration';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { getIconColor } from '../../helpers/getIconColor';
 
 export const ChooseChatMessageContainer = styled.View`
   height: 100%;
@@ -30,9 +32,10 @@ export const ChooseChatDescription = styled.Text`
 `;
 
 export const ChooseChatMessage = () => {
+  const { config } = useChatSettingState();
   return (
     <ChooseChatMessageContainer>
-      <NoSelectedChatIcon />
+      <EmptyChatIllustration color={getIconColor(config)} />
       <ChooseChatMessageContainerBoxText>
         <ChooseChatTitle>Start a Conversation</ChooseChatTitle>
         <ChooseChatDescription>

package/src/components/MainComponents/EditWrapper.tsx

@@ -2,9 +2,11 @@ import React, { FC } from 'react';
 import { EditIcon } from '../../assets/icons';
 import { styled } from 'styled-components/native';
 import { Text, TouchableOpacity, View } from 'react-native';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { getIconColor } from '../../helpers/getIconColor';
 
-export const EditContainer = styled.View`
-  background-color: #0052cd0d;
+export const EditContainer = styled.View<{ accentColor?: string }>`
+  background-color: ${({ accentColor }) => (accentColor || '#0052cd') + '0d'};
   padding: 12px 24px;
   flex-direction: row;
   align-items: center;
@@ -36,9 +38,10 @@ interface EditWrapperProps {
 }
 
 export const EditWrapper: FC<EditWrapperProps> = ({ text, onClose }) => {
-  console.log('text', text);
+  const { config } = useChatSettingState();
+  const iconColor = getIconColor(config);
   return (
-    <EditContainer>
+    <EditContainer accentColor={iconColor}>
       <EditInfoBox>
         <View
           style={{
@@ -46,11 +49,11 @@ export const EditWrapper: FC<EditWrapperProps> = ({ text, onClose }) => {
             paddingRight: 20,
             paddingLeft: 0,
             borderRightWidth: 1,
-            borderRightColor: '#0052CD',
+            borderRightColor: iconColor,
             borderStyle: 'solid',
           }}
         >
-          <EditIcon color="#0052CD" />
+          <EditIcon color={iconColor} />
         </View>
         <View style={{ paddingLeft: 20 }}>
           <EditTitle>Edit Message</EditTitle>

package/src/components/MainComponents/MessageList.tsx

@@ -27,6 +27,7 @@ import { useRoomState } from '../../hooks/useRoomState';
 import Loader from '../styled/Loader';
 import { ArowDownIcon } from '../../assets/icons';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
+import { getIconColor } from '../../helpers/getIconColor';
 
 interface MessageListProps<TMessage extends IMessage> {
   CustomMessage?: React.ComponentType<{
@@ -453,7 +454,7 @@ const MessageList = <TMessage extends IMessage>({
         <TouchableOpacity
           style={[
             styles.newMessageIndicator,
-            { backgroundColor: config?.colors?.primary || '#0052CD' },
+            { backgroundColor: getIconColor(config) },
           ]}
           onPress={handleNewMessageIndicatorPress}
         >

package/src/components/MainComponents/NoMessagesPlaceholder.tsx

@@ -1,7 +1,10 @@
 import { Text, View } from 'react-native';
 import { NoMessages } from '../../assets/icons';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { getIconColor } from '../../helpers/getIconColor';
 
 const NoMessagesPlaceholder = () => {
+  const { config } = useChatSettingState();
   return (
     <View
       style={{
@@ -11,7 +14,7 @@ const NoMessagesPlaceholder = () => {
       }}
     >
       <View style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        {/* <NoMessages /> */}
+        <NoMessages color={getIconColor(config)} />
         <View
           style={{
             flexDirection: 'column',

package/src/components/MainComponents/ProfileImagePlaceholder.tsx

@@ -11,7 +11,11 @@ import {
   RemoveButtonText,
   Wrapper,
 } from '../styled/StyledComponents';
-import { nameToColor } from '../../helpers/hashcolor';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import {
+  getAvatarColor,
+  getAvatarTextColor,
+} from '../../helpers/getAvatarColor';
 
 interface ProfileImagePlaceholderProps {
   name?: string;
@@ -49,12 +53,13 @@ export const ProfileImagePlaceholder: React.FC<
   placeholderIcon,
   disableOverlay,
 }) => {
+  const { config } = useChatSettingState();
   const backgroundColor = useMemo(() => {
     if(!name) {
       return { backgroundColor: 'transparent' };
     }
-    return nameToColor(name);
-  }, [name]);
+    return { backgroundColor: getAvatarColor(name, config) };
+  }, [name, config]);
 
   const getTwoUppercaseLetters = (fullName: string) => {
     if (!fullName) {return '';}
@@ -120,10 +125,12 @@ export const ProfileImagePlaceholder: React.FC<
         ) : placeholderIcon ? (
           placeholderIcon
         ) : (
-          // Black initials on the pastel hash-color bg — white text
-          // on these light backgrounds is unreadable (matches web's
-          // default-color behavior).
-          <InitialsText size={size} color="#141414">
+          // Black initials on the light pastel hash-colors; a dark
+          // configured colors.avatar flips them to white.
+          <InitialsText
+            size={size}
+            color={getAvatarTextColor(backgroundColor?.backgroundColor)}
+          >
             {getInitials()}
           </InitialsText>
         )}

package/src/components/MainComponents/RoomList.tsx

@@ -24,6 +24,7 @@ import { useChatSettingState } from '../../hooks/useChatSettingState';
 import Button from '../styled/Button';
 import { HeaderRoomList } from '../Header/HeaderRoomList';
 import { HeaderRoomListMenu } from '../Menu/HeaderRoomListMenu';
+import { getIconColor } from '../../helpers/getIconColor';
 
 const LONG_PRESS_THRESHOLD = 200;
 
@@ -165,7 +166,7 @@ const RoomList: React.FC<RoomListProps> = ({
           }}
           color="black"
           unstyled
-          EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
+          EndIcon={<BurgerMenuIcon color={getIconColor(config)} />}
           onPress={() => setOpen(!open)}
         />
       )}

package/src/components/MessageBubble/Avatar.tsx

@@ -1,6 +1,10 @@
 import React, { useMemo } from 'react';
 import styled from 'styled-components/native';
-import { nameToColor } from '../../helpers/hashcolor';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import {
+  getAvatarColor,
+  getAvatarTextColor,
+} from '../../helpers/getAvatarColor';
 
 interface AvatarProps {
   username?: string | null;
@@ -23,13 +27,13 @@ const AvatarCircle = styled.View<{ bgColor?: string }>`
   elevation: 4;
 `;
 
-const AvatarText = styled.Text`
+const AvatarText = styled.Text<{ color?: string }>`
   font-size: 16px;
   font-weight: bold;
-  // Pastel backgrounds from nameToColor() are all light (#E2F4FB,
-  // #EEE6F9, #F5F2BC, ...). White text on light = invisible — web
-  // uses default-black text on the same palette. Match it.
-  color: #141414;
+  // Pastel backgrounds from the hash palette are all light, so the
+  // default is dark text; a configured colors.avatar may be dark, in
+  // which case getAvatarTextColor flips this to white.
+  color: ${({ color }) => color || '#141414'};
 `;
 
 export const Avatar: React.FC<AvatarProps> = ({
@@ -38,12 +42,15 @@ export const Avatar: React.FC<AvatarProps> = ({
   lastName,
   style,
 }) => {
+  const { config } = useChatSettingState();
   const backgroundColor = useMemo(() => {
       if (!username && !firstName) {
         return { backgroundColor: 'transparent' };
       }
-      return nameToColor(username ? username : firstName || '');
-    }, [username, firstName]);
+      return {
+        backgroundColor: getAvatarColor(username || firstName, config),
+      };
+    }, [username, firstName, config]);
 
   const getInitials = () => {
     const isAlphabetic = (char: string) => /^[a-zA-Zа-яА-ЯёЁ]$/.test(char);
@@ -78,7 +85,9 @@ export const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <AvatarCircle style={style} bgColor={backgroundColor?.backgroundColor}>
-      <AvatarText>{getInitials()}</AvatarText>
+      <AvatarText color={getAvatarTextColor(backgroundColor?.backgroundColor)}>
+        {getInitials()}
+      </AvatarText>
     </AvatarCircle>
   );
 };

package/src/components/MessageBubble/Message.tsx

@@ -28,6 +28,8 @@ import MediaMessage from '../MainComponents/MediaMessage';
 import MessageTranslations from './MessageTranslations';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { parseMessageBody } from '../../helpers/parseMessageBody';
+import { getSenderNameColor } from '../../helpers/getSenderNameColor';
+import { getElementFont } from '../../helpers/getElementFont';
 import { useMessageHeapState } from '../../hooks/useMessageHeapState';
 import { DoubleTick } from '../../assets/icons';
 import { useXmppClient } from '../../context/xmppProvider';
@@ -367,7 +369,11 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             backgroundMessage={config?.messageColor?.backgroundMessage}
           >
             {!isUser && (
-              <CustomUserName color={config?.colors?.primary} media={message?.isMediafile === 'true'}>
+              <CustomUserName
+                color={getSenderNameColor(config)}
+                media={message?.isMediafile === 'true'}
+                style={getElementFont(config, 'senderName')}
+              >
                 {message.user.name}
               </CustomUserName>
             )}
@@ -397,6 +403,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                     isUser={isUser}
                     colorUser={config?.messageColor?.colorUser}
                     color={config?.messageColor?.color}
+                    style={getElementFont(config, 'messageText')}
                   >
                     <Text>{messageText}</Text>
                   </CustomMessageText>
@@ -425,6 +432,9 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                   ! Failed — tap to retry
                 </Text>
               )}
+              {message?.isEdited && !message?.isDeleted && (
+                <Text style={styles.editedText}>edited</Text>
+              )}
               <Text style={styles.timestampText}>
                 {new Date(message.date).toLocaleTimeString([], {
                   hour: '2-digit',
@@ -525,4 +535,15 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     textAlignVertical: 'center',
   },
+  // Small muted "edited" marker shown before the timestamp (Slack/WhatsApp
+  // style). Italic + same muted grey so it reads as metadata, not content.
+  editedText: {
+    fontSize: 11,
+    lineHeight: 16,
+    color: '#999',
+    fontStyle: 'italic',
+    marginRight: 6,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
 });

package/src/components/Modals/AttachSheet/AttachSheet.tsx

@@ -12,6 +12,8 @@ import {
   View,
 } from 'react-native';
 import { CameraIcon, DocumentIcon, MediaIcon } from '../../../assets/icons';
+import { getElementFont } from '../../../helpers/getElementFont';
+import { IConfig } from '../../../types/types';
 
 interface AttachSheetProps {
   visible: boolean;
@@ -20,6 +22,8 @@ interface AttachSheetProps {
   onGallery: () => void;
   onDocument: () => void;
   primaryColor?: string;
+  /** For `typography.elements.attachSheet*` font overrides. */
+  config?: IConfig;
 }
 
 // Starting translateY for the sheet. Larger than any realistic sheet
@@ -34,6 +38,7 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   onGallery,
   onDocument,
   primaryColor = '#0052CD',
+  config,
 }) => {
   // Pending handler captured on row tap — runs once the EXIT animation
   // finishes so iOS doesn't try to present an image picker over a
@@ -179,7 +184,9 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
         >
           <TouchableOpacity activeOpacity={1}>
             <View style={styles.grabber} />
-            <Text style={styles.title}>Attach</Text>
+            <Text style={[styles.title, getElementFont(config, 'attachSheetTitle')]}>
+              Attach
+            </Text>
             {rows.map(({ label, hint, Icon, handler }, idx) => (
               <TouchableOpacity
                 key={label}
@@ -199,8 +206,22 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
                   <Icon color={primaryColor} width={20} height={20} />
                 </View>
                 <View style={styles.rowText}>
-                  <Text style={styles.rowLabel}>{label}</Text>
-                  <Text style={styles.rowHint}>{hint}</Text>
+                  <Text
+                    style={[
+                      styles.rowLabel,
+                      getElementFont(config, 'attachSheetRowLabel'),
+                    ]}
+                  >
+                    {label}
+                  </Text>
+                  <Text
+                    style={[
+                      styles.rowHint,
+                      getElementFont(config, 'attachSheetRowHint'),
+                    ]}
+                  >
+                    {hint}
+                  </Text>
                 </View>
               </TouchableOpacity>
             ))}
@@ -209,7 +230,14 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
               style={styles.cancelRow}
               onPress={onClose}
             >
-              <Text style={styles.cancelLabel}>Cancel</Text>
+              <Text
+                style={[
+                  styles.cancelLabel,
+                  getElementFont(config, 'attachSheetCancel'),
+                ]}
+              >
+                Cancel
+              </Text>
             </TouchableOpacity>
           </TouchableOpacity>
         </Animated.View>

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -33,6 +33,7 @@ import DropdownMenu, { MenuOption } from '../../DropdownMenu/DropdownMenu';
 import SelectUsersModal from '../SelectUsersModal/SelectUsersModal';
 import { useToast } from '../../../context/ToastContext';
 import DeleteChatModal from './DeleteChatModal';
+import { getElementFont } from '../../../helpers/getElementFont';
 
 
 interface ChatProfileModalProps {
@@ -313,7 +314,9 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
           size={128}
         />
         <UserInfo>
-          <UserName>{activeRoom.title || activeRoom.name}</UserName>
+          <UserName style={getElementFont(config, 'chatProfileTitle')}>
+            {activeRoom.title || activeRoom.name}
+          </UserName>
           <UserStatus>
             {activeRoom.usersCnt}{' '}
             {activeRoom.usersCnt > 1 ? 'members' : 'member'}
@@ -413,7 +416,12 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                           justifyContent: 'center',
                         }}
                       >
-                        <Label style={{ fontSize: 16, fontWeight: 600 }}>
+                        <Label
+                          style={[
+                            { fontSize: 16, fontWeight: 600 },
+                            getElementFont(config, 'chatProfileMemberName'),
+                          ]}
+                        >
                           {user.firstName} {user.lastName}
                         </Label>
                         {user.last_active && (

package/src/components/Modals/ModalWrapper/ModalWrapper.tsx

@@ -10,6 +10,8 @@ import {
 import { TextareaInput } from '../../styled/StyledInputComponents/StyledInputComponents';
 import Button from '../../styled/Button';
 import { Modal, Text, TextInput, View, StyleSheet } from 'react-native';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { getIconColor } from '../../../helpers/getIconColor';
 
 interface ModalWrapperProps {
   iconTitle?: any;
@@ -44,6 +46,7 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
   compact = false,
 }) => {
   const textareaRef = useRef<TextInput>(null);
+  const { config } = useChatSettingState();
 
   // const handleInput = () => {
   //   const textarea = textareaRef.current;
@@ -73,6 +76,9 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
           style={{ width: '100%' }}
           unstyled
           variant="outlined"
+          // Outlined Button draws its border from `backgroundColor`
+          // (defaults to the hardcoded blue) — feed it the themed color.
+          borderColor={getIconColor(config)}
         />
         {buttonText && (
           <Button

package/src/components/styled/Button.tsx

@@ -15,11 +15,12 @@ import { getTintedColor } from '../../helpers/getTintedColor';
 const CustomButton = styled(TouchableOpacity)<{
   disabled: boolean;
   backgroundColor?: string;
+  borderColor?: string;
   unstyled?: boolean;
   variant?: 'default' | 'filled' | 'outlined';
 }>`
   border-width: ${({ variant }) => (variant === 'outlined' ? 1 : 0)}px;
-  border-color: ${({ backgroundColor }) => backgroundColor || '#0052CD'};
+  border-color: ${({ borderColor }) => borderColor || '#0052CD'};
   border-radius: 20px;
   background-color: ${({ variant, backgroundColor }) =>
     variant === 'filled' ? backgroundColor || '#0052CD' : 'transparent'};
@@ -52,6 +53,7 @@ export interface ButtonProps {
   unstyled?: boolean;
   variant?: 'default' | 'filled' | 'outlined';
   backgroundColor?: string;
+  borderColor?: string;
   color?: string;
   style?: ViewStyle;
   onPress?: () => void;
@@ -71,6 +73,7 @@ const Button: React.FC<ButtonProps> = ({
   unstyled = false,
   variant = 'default',
   backgroundColor,
+  borderColor,
   onPress,
   StartIcon,
   style: containerStyle,
@@ -90,6 +93,7 @@ const Button: React.FC<ButtonProps> = ({
       onPress={onPress}
       variant={variant}
       backgroundColor={backgroundColor}
+      borderColor={borderColor}
     >
       {loading && <Loader size={24} />}
       {!loading && StartIcon && <View style={styles.icon}>{StartIcon}</View>}

package/src/components/styled/DateLabel.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import styled from 'styled-components/native';
 import { Line } from './StyledComponents';
 import { Text } from 'react-native';
+import { getDateLabelColor } from '../../helpers/getDateLabelColor';
 
 interface DateLabelProps {
   date: Date;
-  colors?: { primary?: string; secondary?: string };
+  colors?: { primary?: string; secondary?: string; dateLabel?: string };
 }
 
 const Container = styled.View`
@@ -19,7 +20,7 @@ const Container = styled.View`
 `;
 
 export const StyledDateLabel = styled.View<{
-  secondary?: string;
+  bgColor?: string;
 }>`
   margin: 0;
   border-radius: 118px;
@@ -27,11 +28,11 @@ export const StyledDateLabel = styled.View<{
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  background-color: ${(props) => '#e7edf9'};
+  background-color: ${({ bgColor }) => bgColor || '#e7edf9'};
 `;
 
-export const StyledDateText = styled.Text<{ primary?: string }>`
-  color: ${(props) => '#0052cd'};
+export const StyledDateText = styled.Text<{ color?: string }>`
+  color: ${({ color }) => color || '#0052cd'};
   font-size: 12px;
   font-weight: 400;
   line-height: 14px;
@@ -63,11 +64,13 @@ const DateLabel: React.FC<DateLabelProps> = ({ date, colors }) => {
     label = date.toLocaleDateString('en-US', options);
   }
 
+  const textColor = getDateLabelColor({ colors });
+
   return (
     <Container>
       <Line />
-      <StyledDateLabel secondary={colors?.secondary}>
-        <StyledDateText primary={colors?.primary}>{label}</StyledDateText>
+      <StyledDateLabel bgColor={colors?.secondary}>
+        <StyledDateText color={textColor}>{label}</StyledDateText>
       </StyledDateLabel>
       <Line />
     </Container>

package/src/components/styled/SendInput.tsx

@@ -12,6 +12,8 @@ import { SendIcon, AttachIcon, RecordIcon } from '../../assets/icons';
 import { KeyboardAvoidingView, Platform, View, Text, TouchableOpacity, Alert, Linking } from 'react-native';
 import AttachSheet from '../Modals/AttachSheet/AttachSheet';
 import { MediaFilePreview } from './MediaFilePreview';
+import { getIconColor } from '../../helpers/getIconColor';
+import { getElementFont } from '../../helpers/getElementFont';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
 import * as ImageManipulator from 'expo-image-manipulator';
@@ -486,7 +488,7 @@ const SendInput: React.FC<SendInputProps> = ({
                   }}
                   activeOpacity={0.7}
                 >
-                  <AttachIcon color={config?.colors?.primary || '#0052CD'} />
+                  <AttachIcon color={getIconColor(config)} />
                 </TouchableOpacity>
               )}
               <MessageInput
@@ -517,11 +519,14 @@ const SendInput: React.FC<SendInputProps> = ({
                 // the text had dropped). minHeight keeps the 40px tap
                 // target; the row's align-items:center vertically centres
                 // the content-sized input.
-                style={{
-                  minHeight: 40,
-                  maxHeight: 120,
-                  flex: 1,
-                }}
+                style={[
+                  {
+                    minHeight: config?.inputLayout?.minHeight ?? 40,
+                    maxHeight: config?.inputLayout?.maxHeight ?? 120,
+                    flex: 1,
+                  },
+                  getElementFont(config, 'input'),
+                ]}
               />
             </>
           )}
@@ -593,6 +598,7 @@ const SendInput: React.FC<SendInputProps> = ({
                 : handleSendClick;
             const disabled = !isRecording && !showMic && !hasContent;
             const filled = isRecording || hasContent || showMic;
+            const sendSize = config?.inputLayout?.sendButtonSize ?? 40;
             return (
               <Button
                 testID={showMic ? 'chat-record-button' : 'chat-send-button'}
@@ -607,15 +613,15 @@ const SendInput: React.FC<SendInputProps> = ({
                   )
                 }
                 style={{
-                  width: 40,
-                  height: 40,
-                  borderRadius: 50,
+                  width: sendSize,
+                  height: sendSize,
+                  borderRadius: sendSize / 2,
                   alignItems: 'center',
                   justifyContent: 'center',
                   marginLeft: 0,
                   marginRight: 0,
                   backgroundColor: filled
-                    ? config?.colors?.primary
+                    ? getIconColor(config)
                     : 'transparent',
                   opacity: filled ? 1 : 0.5,
                 }}
@@ -629,7 +635,8 @@ const SendInput: React.FC<SendInputProps> = ({
           onCamera={handleCameraSelection}
           onGallery={handleGallerySelection}
           onDocument={handleFileSelection}
-          primaryColor={config?.colors?.primary}
+          primaryColor={getIconColor(config)}
+          config={config}
         />
       </InputContainer>
   );