@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/MessageBubble/Message.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import {
   View,
   Pressable,
@@ -39,6 +39,7 @@ import { useXmppClient } from '../../context/xmppProvider';
 import { useSendMessage } from '../../hooks/useSendMessage';
 import { MessageReaction } from './MessageReaction';
 import { MessageFooter } from '../styled/StyledComponents';
+import { useTheme } from '../../hooks/useTheme';
 
 const CustomMessageContainer = styled.View<{ isUser: boolean; reply?: number }>`
   flex-direction: row;
@@ -73,12 +74,13 @@ const CustomMessageBubble = styled.View<{
     deleted,
     backgroundMessageUser,
     backgroundMessage,
+    theme,
   }) =>
     deleted
-      ? '#f5f5f5'
+      ? theme.systemMessageBackground
       : isUser
-      ? backgroundMessageUser || '#d1e7ff'
-      : backgroundMessage || '#fff'};
+      ? backgroundMessageUser || theme.messageBackgroundUser
+      : backgroundMessage || theme.messageBackground};
 `;
 
 const CustomMessageText = styled.Text<{
@@ -90,8 +92,8 @@ const CustomMessageText = styled.Text<{
 }>`
   font-size: ${({ fontSize }) => fontSize ?? 16}px;
   ${({ fontWeight }) => (fontWeight ? `font-weight: ${fontWeight};` : '')}
-  color: ${({ color, colorUser, isUser }) =>
-    isUser ? colorUser || '#333' : color || '#333'};
+  color: ${({ color, colorUser, isUser, theme }) =>
+    isUser ? colorUser || theme.messageTextUser : color || theme.messageText};
 `;
 
 const CustomMessagePhoto = styled.Image`
@@ -115,7 +117,7 @@ const CustomUserName = styled.Text<{
   padding-bottom: 8px;
   padding-left: ${({media}) => media ? '16px': 0};
   padding-top: ${({media}) => media ? '8px': 0};
-  color: ${({ color }) => color || '#333'};
+  color: ${({ color, theme }) => color || theme.text};
 `;
 
 const CustomMessageTimestamp = styled.Text<{
@@ -124,9 +126,8 @@ const CustomMessageTimestamp = styled.Text<{
   colorUser?: string;
 }>`
   font-size: 12px;
-  color: #999;
-  color: ${({ isUser, color, colorUser }) =>
-    isUser ? colorUser || '#999' : color || '#999'};
+  color: ${({ isUser, color, colorUser, theme }) =>
+    isUser ? colorUser || theme.textMuted : color || theme.textMuted};
   margin-top: 5px;
   align-self: flex-end;
 `;
@@ -144,6 +145,17 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const dispatch = useDispatch();
   const { client } = useXmppClient();
   const { config, langSource, user, translateMode } = useChatSettingState();
+  // Single theme read per message; the two colour overrides below are the
+  // only per-render allocations added for theming (memoized on the theme
+  // object, which useTheme keeps stable across renders).
+  const theme = useTheme();
+  const themedStyles = useMemo(
+    () => ({
+      muted: { color: theme.textMuted },
+      failed: { color: theme.danger },
+    }),
+    [theme]
+  );
 
   // `enableTranslates` predates the `translates` config block; keep it
   // working so existing hosts don't lose translations on upgrade.
@@ -354,7 +366,16 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // Body text size/weight is set on the parser's leaf <Text>s — the markdown
   // wraps content in <View>s which break Text-style inheritance, so the bubble
   // wrapper's fontSize alone never reached the actual text.
-  const bodyTextStyle = chatTextStyle(config?.typography?.messageText);
+  // The parser wraps paragraphs / list items in <View>s, so the bubble's
+  // text colour never reaches the leaf <Text>s by inheritance — put the
+  // ink on the base leaf style explicitly (theme-aware).
+  const bodyTextStyle = useMemo(
+    () => ({
+      ...chatTextStyle(config?.typography?.messageText),
+      color: isUser ? theme.messageTextUser : theme.messageText,
+    }),
+    [config?.typography?.messageText, isUser, theme]
+  );
   // In auto mode, render the translation as the primary body — but NEVER for
   // the reader's own messages (they wrote it; no point translating it back).
   const showInlineTranslation =
@@ -365,9 +386,10 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const messageText = config?.messageTextFilter?.enabled
     ? parseMessageBody(
         config?.messageTextFilter.filterFunction(bodyToRender),
-        bodyTextStyle
+        bodyTextStyle,
+        theme
       )
-    : parseMessageBody(bodyToRender, bodyTextStyle);
+    : parseMessageBody(bodyToRender, bodyTextStyle, theme);
 
   const isFailed = failedIdSet.has(message.id);
   const isPending =
@@ -452,12 +474,13 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             isUser={isUser}
             deleted={message.isDeleted}
             isMedia={message?.isMediafile === 'true' && !message?.isDeleted}
-            backgroundMessageUser={config?.messageColor?.backgroundMessageUser}
-            backgroundMessage={config?.messageColor?.backgroundMessage}
           >
             {!isUser && hasRealSenderName && (
               <CustomUserName
-                color={config?.colors?.primary}
+                // Historically `config.colors.primary` with a plain-text
+                // fallback; theme.primary carries the same value in light
+                // mode and the dark accent in dark mode.
+                color={config?.colors?.primary ? theme.primary : undefined}
                 media={message?.isMediafile === 'true'}
                 fontSize={config?.typography?.senderName?.fontSize}
                 fontWeight={config?.typography?.senderName?.fontWeight as any}
@@ -470,7 +493,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 handleReplyMessage={handleReplyMessage}
                 isUser={isUser}
                 text={JSON.parse(message.mainMessage).text}
-                color={config?.colors?.primary}
+                color={theme.primary}
               />
             )}
 
@@ -489,8 +512,6 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 ) : (
                   <CustomMessageText
                     isUser={isUser}
-                    colorUser={config?.messageColor?.colorUser}
-                    color={config?.messageColor?.color}
                     fontSize={config?.typography?.messageText?.fontSize}
                     fontWeight={config?.typography?.messageText?.fontWeight as any}
                   >
@@ -501,7 +522,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                       <TranslatedMessageBody
                         isUser={isUser}
                         originalText={translationDisplay.originalText}
-                        accentColor={config?.colors?.primary}
+                        accentColor={theme.primary}
                       >
                         <Text>{messageText}</Text>
                       </TranslatedMessageBody>
@@ -528,12 +549,14 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             {/* <View style={styles.timestampRow}> */}
             <CustomTimestampRow media={message?.isMediafile === 'true'}>
               {!config?.disableSentLogic && isUser && isPending && (
-                <Text style={styles.timestampText}>sending...</Text>
+                <Text style={[styles.timestampText, themedStyles.muted]}>
+                  sending...
+                </Text>
               )}
               {!config?.disableSentLogic && isUser && isFailed && (
                 <Text
                   onPress={onRetryPress}
-                  style={styles.failedText}
+                  style={[styles.failedText, themedStyles.failed]}
                   accessibilityRole="button"
                   accessibilityLabel="Retry sending message"
                 >
@@ -541,9 +564,9 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 </Text>
               )}
               {message?.isEdited && !message?.isDeleted && (
-                <Text style={styles.editedText}>edited</Text>
+                <Text style={[styles.editedText, themedStyles.muted]}>edited</Text>
               )}
-              <Text style={styles.timestampText}>
+              <Text style={[styles.timestampText, themedStyles.muted]}>
                 {new Date(message.date).toLocaleTimeString([], {
                   hour: '2-digit',
                   minute: '2-digit',
@@ -570,7 +593,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
               <MessageReaction
                 reaction={message.reaction}
                 changeReaction={handleReactionMessage}
-                color={config?.colors?.primary || '#0052CD'}
+                color={theme.primary}
                 userName={`${user.firstName} ${user.lastName}`}
               />
             )}

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -19,6 +19,7 @@ import {
 import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
 import { useInteractionsOverlay } from './InteractionsOverlay';
+import { useTheme } from '../../hooks/useTheme';
 
 interface MessageInteractionsProps {
   isReply?: boolean;
@@ -50,6 +51,14 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   const { showToast } = useToast();
   const { present, dismiss, originX, originY } = useInteractionsOverlay();
   const overlayId = useId();
+  const theme = useTheme();
+  const themedStyles = useMemo(
+    () => ({
+      menu: { backgroundColor: theme.surface, shadowColor: theme.shadow },
+      text: { color: theme.text },
+    }),
+    [theme]
+  );
 
   const config = useSelector(
     (state: RootState) => state.chatSettingStore.config
@@ -180,11 +189,13 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
       <View style={styles.overlayFill}>
         <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
         <View
-          style={[styles.contextMenu, localPosition]}
+          style={[styles.contextMenu, themedStyles.menu, localPosition]}
           onLayout={handleMenuLayout}
         >
           <MenuItem onPress={() => handleCopyMessage(message.body!)}>
-            <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.COPY}</Text>
+            <Text style={[styles.menuText, themedStyles.text]}>
+              {MESSAGE_INTERACTIONS.COPY}
+            </Text>
             <MESSAGE_INTERACTIONS_ICONS.COPY />
           </MenuItem>
           {isUser && (
@@ -195,7 +206,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
                 <>
                   <Delimeter />
                   <MenuItem onPress={handleEditMessage}>
-                    <Text style={styles.menuText}>
+                    <Text style={[styles.menuText, themedStyles.text]}>
                       {MESSAGE_INTERACTIONS.EDIT}
                     </Text>
                     <MESSAGE_INTERACTIONS_ICONS.EDIT />
@@ -204,7 +215,9 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
               )}
               <Delimeter />
               <MenuItem onPress={handleDeleteMessage}>
-                <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.DELETE}</Text>
+                <Text style={[styles.menuText, themedStyles.text]}>
+                  {MESSAGE_INTERACTIONS.DELETE}
+                </Text>
                 <MESSAGE_INTERACTIONS_ICONS.DELETE />
               </MenuItem>
             </>

package/src/components/MessageBubble/MessageReaction.tsx

@@ -3,6 +3,7 @@ import React, { FC, useMemo, useState } from 'react';
 import { View, Text, TouchableOpacity, Animated } from 'react-native';
 import styled from 'styled-components/native';
 import { ReactionMessage } from '../../types/types';
+import { useTheme } from '../../hooks/useTheme';
 
 const ReactionContainer = styled.View`
   flex-direction: row;
@@ -13,7 +14,8 @@ const ReactionContainer = styled.View`
 const ReactionBox = styled(TouchableOpacity)<{ active: boolean; color: string }>`
   padding: 4px 8px;
   border-radius: 20px;
-  background-color: ${({ active, color }) => (active ? color : '#ffffff')};
+  background-color: ${({ active, color, theme }) =>
+    active ? color : theme.surface};
   flex-direction: row;
   align-items: center;
   justify-content: center;
@@ -42,6 +44,7 @@ export const MessageReaction: FC<MessageReactionProps> = ({
   changeReaction,
   userName,
 }) => {
+  const theme = useTheme();
   const [tooltipEmoji, setTooltipEmoji] = useState<string | null>(null);
   const fadeAnim = new Animated.Value(0);
 
@@ -104,7 +107,7 @@ export const MessageReaction: FC<MessageReactionProps> = ({
                 style={{
                   fontSize: 14,
                   fontWeight: '600',
-                  color: isUserReacted ? '#fff' : color,
+                  color: isUserReacted ? theme.textOnPrimary : color,
                 }}
               >
                 {details.count}
@@ -128,7 +131,9 @@ export const MessageReaction: FC<MessageReactionProps> = ({
                     },
                   ],
                   opacity: fadeAnim,
-                  backgroundColor: '#333',
+                  // Inverted pill: text colour as ground, surface as ink,
+                  // so it stays high-contrast on both palettes.
+                  backgroundColor: theme.text,
                   borderRadius: 6,
                   paddingHorizontal: 10,
                   paddingVertical: 6,
@@ -136,7 +141,7 @@ export const MessageReaction: FC<MessageReactionProps> = ({
                   zIndex: 999,
                 }}
               >
-                <Text style={{ color: '#fff', fontSize: 12 }}>
+                <Text style={{ color: theme.surface, fontSize: 12 }}>
                   {details.users.join(', ')}
                 </Text>
               </Animated.View>

package/src/components/Modals/AddMembersModal/AddMembersModal.tsx

@@ -6,6 +6,7 @@ import { useXmppClient } from '../../../context/xmppProvider';
 import {
   ActionButton,
   CloseButton,
+  CloseButtonText,
   GroupContainer,
   ModalBackground,
   ModalContainer,
@@ -20,7 +21,6 @@ import { addRoomViaApi } from '../../../roomStore/roomsSlice';
 import { createRoomFromApi } from '../../../helpers/createRoomFromApi';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { useAppDispatch } from '../../../hooks/hooks';
-import { Text } from 'react-native';
 import { useToast } from '../../../context/ToastContext';
 
 const AddMembersModal: React.FC = () => {
@@ -97,7 +97,7 @@ const AddMembersModal: React.FC = () => {
         <ModalBackground>
           <ModalContainer>
             <CloseButton onPress={handleCloseModal}>
-              <Text style={{ fontSize: 24 }}>&times;</Text>
+              <CloseButtonText>&times;</CloseButtonText>
             </CloseButton>
             <ModalTitle>Add New Member</ModalTitle>
             <GroupContainer