@ethora/chat-component-rn 26.8.2 → 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

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

@@ -17,6 +17,7 @@ import {
 } from 'react-native';
 import { CameraIcon, DocumentIcon } from '../../../assets/icons';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { useTheme } from '../../../hooks/useTheme';
 import { chatTextStyle } from '../../../helpers/typography';
 import { useT } from '../../../i18n/useT';
 import { getMediaLibrary } from '../../../helpers/mediaLibraryRuntime';
@@ -100,10 +101,17 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   onGallery,
   onDocument,
   onPickMedia,
-  primaryColor = '#0052CD',
+  primaryColor,
 }) => {
   const { config } = useChatSettingState();
+  const theme = useTheme();
   const ts = config?.typography?.attachSheet;
+  const accent = primaryColor || theme.primary;
+  // Sheet chrome tints. Light keeps the historical iOS-ish greys (not in
+  // the palette); dark reads everything off the theme.
+  const chromeText = theme.dark ? theme.text : '#1C1C1E';
+  const chromeMuted = theme.dark ? theme.textSecondary : '#8A8A8E';
+  const chromeHairline = theme.dark ? theme.divider : '#EFEFF2';
   const t = useT();
   const pendingRef = useRef<(() => void) | null>(null);
   const runPending = () => {
@@ -326,7 +334,13 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
       onDismiss={Platform.OS === 'ios' ? runPending : undefined}
     >
       <Animated.View
-        style={[styles.backdrop, { opacity: backdropOpacity }]}
+        style={[
+          styles.backdrop,
+          {
+            opacity: backdropOpacity,
+            backgroundColor: theme.dark ? theme.overlay : 'rgba(15,15,20,0.45)',
+          },
+        ]}
       >
         <TouchableOpacity
           testID="attach-backdrop"
@@ -337,7 +351,11 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
         <Animated.View
           style={[
             styles.sheet,
-            { transform: [{ translateY: sheetTranslateY }] },
+            {
+              backgroundColor: theme.surface,
+              shadowColor: theme.shadow,
+              transform: [{ translateY: sheetTranslateY }],
+            },
           ]}
           {...sheetPan.panHandlers}
         >
@@ -346,12 +364,23 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
             style={styles.grabberArea}
             {...grabberPan.panHandlers}
           >
-            <View style={styles.grabber} />
+            <View
+              style={[
+                styles.grabber,
+                { backgroundColor: theme.dark ? theme.border : '#D9D9DE' },
+              ]}
+            />
           </View>
 
           {/* Photos & Videos ------------------------------------------------ */}
           <View style={styles.sectionHeader}>
-            <Text style={[styles.sectionTitle, chatTextStyle(ts?.title)]}>
+            <Text
+              style={[
+                styles.sectionTitle,
+                { color: chromeText },
+                chatTextStyle(ts?.title),
+              ]}
+            >
               {t('attach.photosAndVideos')}
             </Text>
             <TouchableOpacity
@@ -363,7 +392,7 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
               <Text
                 style={[
                   styles.sectionAction,
-                  { color: primaryColor },
+                  { color: accent },
                   chatTextStyle(ts?.viewLibrary),
                 ]}
               >
@@ -384,15 +413,21 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
               accessibilityRole="button"
               accessibilityLabel={t('attach.takePhoto')}
               activeOpacity={0.7}
-              style={styles.cameraTile}
+              style={[
+                styles.cameraTile,
+                {
+                  borderColor: theme.dark ? theme.border : '#E4E4E9',
+                  backgroundColor: theme.dark ? theme.surfaceSecondary : '#FAFAFC',
+                },
+              ]}
               onPress={trigger(onCamera)}
             >
-              <CameraIcon color="#8A8A8E" width={26} height={26} />
+              <CameraIcon color={chromeMuted} width={26} height={26} />
             </TouchableOpacity>
 
             {loadingRecents && recents.length === 0 && (
               <View style={styles.loadingTile}>
-                <ActivityIndicator color="#8A8A8E" />
+                <ActivityIndicator color={chromeMuted} />
               </View>
             )}
 
@@ -401,7 +436,7 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
                 key={item.id}
                 testID={`attach-recent-${item.id}`}
                 activeOpacity={0.8}
-                style={styles.thumbWrap}
+                style={[styles.thumbWrap, { backgroundColor: chromeHairline }]}
                 onPress={handleRecentPress(item)}
               >
                 <Image
@@ -419,7 +454,9 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
             ))}
           </ScrollView>
 
-          <View style={styles.rowsDivider} />
+          <View
+            style={[styles.rowsDivider, { backgroundColor: chromeHairline }]}
+          />
           {rows.map(({ id, label, Icon, handler }) => (
             <TouchableOpacity
               key={id}
@@ -429,9 +466,15 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
               onPress={trigger(handler)}
             >
               <View style={styles.rowIcon}>
-                <Icon color="#1C1C1E" width={20} height={20} />
+                <Icon color={chromeText} width={20} height={20} />
               </View>
-              <Text style={[styles.rowLabel, chatTextStyle(ts?.rowLabel)]}>
+              <Text
+                style={[
+                  styles.rowLabel,
+                  { color: chromeText },
+                  chatTextStyle(ts?.rowLabel),
+                ]}
+              >
                 {label}
               </Text>
             </TouchableOpacity>
@@ -443,18 +486,16 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
 };
 
 const styles = StyleSheet.create({
+  // Colours live inline (theme-dependent); only layout stays here.
   backdrop: {
     flex: 1,
-    backgroundColor: 'rgba(15,15,20,0.45)',
     justifyContent: 'flex-end',
   },
   sheet: {
-    backgroundColor: '#fff',
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     paddingTop: 4,
     paddingBottom: Platform.OS === 'ios' ? 32 : 20,
-    shadowColor: '#000',
     shadowOffset: { width: 0, height: -2 },
     shadowOpacity: 0.08,
     shadowRadius: 12,
@@ -469,7 +510,6 @@ const styles = StyleSheet.create({
     width: 40,
     height: 4,
     borderRadius: 2,
-    backgroundColor: '#D9D9DE',
   },
   sectionHeader: {
     flexDirection: 'row',
@@ -481,7 +521,6 @@ const styles = StyleSheet.create({
   sectionTitle: {
     fontSize: 17,
     fontWeight: '700',
-    color: '#1C1C1E',
   },
   sectionAction: {
     fontSize: 15,
@@ -497,8 +536,6 @@ const styles = StyleSheet.create({
     height: THUMB_SIZE,
     borderRadius: 16,
     borderWidth: 1,
-    borderColor: '#E4E4E9',
-    backgroundColor: '#FAFAFC',
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -513,7 +550,6 @@ const styles = StyleSheet.create({
     height: THUMB_SIZE,
     borderRadius: 16,
     overflow: 'hidden',
-    backgroundColor: '#EFEFF2',
   },
   thumb: {
     width: '100%',
@@ -521,7 +557,6 @@ const styles = StyleSheet.create({
   },
   rowsDivider: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: '#EFEFF2',
   },
   row: {
     flexDirection: 'row',
@@ -537,7 +572,6 @@ const styles = StyleSheet.create({
   rowLabel: {
     fontSize: 16,
     fontWeight: '500',
-    color: '#1C1C1E',
   },
 });