@ethora/chat-component-rn 26.7.3 → 26.7.4

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -1,18 +1,16 @@
-import React, { useCallback, useMemo } from 'react';
+/** @format */
 
-import {
-  ModalContainerFullScreen,
-  Viewider,
-  Label,
-  LabelData,
-  BorderedContainer,
-  CenterContainer,
-} from '../styledModalComponents';
-import ModalHeaderComponent from '../ModalHeaderComponent';
-import Button from '../../styled/Button';
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useDispatch } from 'react-redux';
+import { ModalContainerFullScreen } from '../styledModalComponents';
+import ModalHeaderComponent from '../ModalHeaderComponent';
+import { ArowDownIcon } from '../../../assets/icons';
 import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { chatTextStyle } from '../../../helpers/typography';
+import { useT } from '../../../i18n/useT';
 
 interface UserSettingsModalProps {
   handleCloseModal: any;
@@ -21,65 +19,84 @@ interface UserSettingsModalProps {
 const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   handleCloseModal,
 }) => {
+  const t = useT();
+  const dispatch = useDispatch();
+  const { config } = useChatSettingState();
+
   const options = useMemo(
     () => [
-      { value: 'Manage Data', key: MODAL_TYPES.MANAGE_DATA },
-      { value: 'Visiblility', key: MODAL_TYPES.VISIBILITY },
-      // { value: 'Profile Shares', key: MODAL_TYPES.PROFILE_SHARES },
-      // { value: 'Document Shares', key: MODAL_TYPES.DOCUMENT_SHARES },
-      // { value: 'Blocked Users', key: MODAL_TYPES.BLOCKED_USERS },
-      // { value: 'Referrals', key: MODAL_TYPES.REFERRALS },
+      { label: t('settings.manageData.title'), key: MODAL_TYPES.MANAGE_DATA },
+      { label: t('settings.visibility.title'), key: MODAL_TYPES.VISIBILITY },
     ],
-    []
+    [t]
   );
 
-  const dispatch = useDispatch();
-
-  const handleClick = useCallback((key: string) => {
-    dispatch(setActiveModal(key as any));
-  }, []);
+  const handleClick = useCallback(
+    (key: string) => {
+      dispatch(setActiveModal(key as any));
+    },
+    [dispatch]
+  );
 
   return (
-    <ModalContainerFullScreen>
+    <ModalContainerFullScreen style={styles.screen}>
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
-        headerTitle={'Settings'}
+        headerTitle={t('settings.menu.title')}
+        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
       />
-      <CenterContainer>
-        <BorderedContainer
-          style={{
-            padding: 16,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 8,
-          }}
-        >
-          {options.map((option: { value: string; key: string }, index) => (
-            <>
-              <Button
-                variant="default"
-                style={{
-                  minHeight: 40,
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 2,
-                  width: '100%',
-                  justifyContent: 'center',
-                  borderRadius: 0,
-                  alignItems: 'flex-start',
-                }}
-                onPress={() => handleClick(option.key)}
-              >
-                <Label style={{ textAlign: 'center' }}>{option.value}</Label>
-                {[2, 3, 4].includes(index) && <LabelData>0</LabelData>}
-              </Button>
-              {index < 5 && <Viewider />}
-            </>
-          ))}
-        </BorderedContainer>
-      </CenterContainer>
+      {/* One card per entry, rather than a single bordered block with
+        * hairline dividers — the rows are separate destinations, and the
+        * design gives each its own surface. */}
+      <View style={styles.body}>
+        {options.map((option) => (
+          <TouchableOpacity
+            key={option.key}
+            testID={`settings-row-${option.key}`}
+            activeOpacity={0.7}
+            style={styles.card}
+            onPress={() => handleClick(option.key)}
+          >
+            <Text style={styles.label}>{option.label}</Text>
+            <ArowDownIcon color="#8C8C8C" width={20} height={20} style={styles.chevron} />
+          </TouchableOpacity>
+        ))}
+      </View>
     </ModalContainerFullScreen>
   );
 };
 
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#E8EDF2',
+  },
+  body: {
+    width: '100%',
+    padding: 12,
+    gap: 12,
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    paddingHorizontal: 20,
+    paddingVertical: 22,
+    shadowColor: '#101828',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.06,
+    shadowRadius: 12,
+    elevation: 3,
+  },
+  label: {
+    fontSize: 17,
+    fontWeight: '500',
+    color: '#141414',
+  },
+  chevron: {
+    transform: [{ rotate: '-90deg' }],
+  },
+});
+
 export default UserSettingsModal;

package/src/components/Modals/styledModalComponents.tsx

@@ -86,8 +86,15 @@ export const HeaderContainer = styled.View`
    * button and 8px below — properly sized and properly centered. */
   padding: 8px 16px;
   background-color: #fff;
-  border-bottom-width: 1px;
-  border-bottom-color: #f0f0f0;
+  /* Same card treatment as the room-list header: rounded bottom corners
+   * and a soft drop shadow instead of a hairline rule. */
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  shadow-color: #101828;
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.06;
+  shadow-radius: 12px;
+  elevation: 4;
   z-index: 1;
   flex-direction: row;
   justify-content: space-between;

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -90,11 +90,13 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
 
   return (
     <ChatItem key={index}>
-      <ProfileImagePlaceholder
-        name={displayName}
-        icon={appendFileToken(chat?.icon, fileToken)}
-        active={false}
-      />
+      <View pointerEvents="none">
+        <ProfileImagePlaceholder
+          name={displayName}
+          icon={appendFileToken(chat?.icon, fileToken)}
+          active={false}
+        />
+      </View>
       <View
         style={{
           flexDirection: 'column',
@@ -104,7 +106,9 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           paddingVertical: 8,
           paddingRight: 8,
           borderBottomWidth: 1,
-          borderBottomColor: '#F0F0F0',
+          // Reads against the list's #E8EDF2 ground; #F0F0F0 was lighter
+          // than the ground itself, so the row separators vanished.
+          borderBottomColor: '#C6CFDA',
         }}
       >
         <View
@@ -215,8 +219,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           ) : null}
         </View>
         {isDriver && (
+          // Darker than the list's own ground (#E8EDF2), otherwise the
+          // separator disappears into it — white and the old #0052CD0D
+          // hairline both did.
           <View
-            style={{ height: 1, backgroundColor: '#0052CD0D', marginTop: 8 }}
+            style={{ height: 1, backgroundColor: '#C6CFDA', marginTop: 8 }}
           />
         )}
       </View>

package/src/components/styled/SendInput.tsx

@@ -10,14 +10,16 @@ import { IConfig, MediaFile } from '../../types/types';
 import Button from './Button';
 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 AttachSheet, { PickedMedia } from '../Modals/AttachSheet/AttachSheet';
 import { MediaFilePreview } from './MediaFilePreview';
 import { getIconColor } from '../../helpers/getIconColor';
 import { getElementFont } from '../../helpers/getElementFont';
 import { useT } from '../../i18n/useT';
+import { getMediaLibrary } from '../../helpers/mediaLibraryRuntime';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
 import * as ImageManipulator from 'expo-image-manipulator';
+import * as FileSystem from 'expo-file-system/legacy';
 // expo-audio replaces the discontinued expo-av: `useAudioRecorder` owns a
 // single reusable recorder for this input's lifetime (prepare → record →
 // stop → prepare again), and the module-level helpers cover permissions
@@ -259,6 +261,53 @@ const SendInput: React.FC<SendInputProps> = ({
     }
   };
 
+  // A tap on a thumbnail in the attach sheet's recents strip. The sheet
+  // already resolved the asset to a real on-disk uri (iOS `ph://` ids are
+  // not uploadable); here we apply the same treatment the full-blown
+  // pickers get — HEIC→JPEG for images, and a size probe so the 50 MB cap
+  // is enforced before anything hits the network.
+  const handleRecentMediaSelection = async (media: PickedMedia) => {
+    try {
+      let size: number | undefined;
+      try {
+        const info = await FileSystem.getInfoAsync(media.uri);
+        if (info.exists && typeof (info as any).size === 'number') {
+          size = (info as any).size;
+        }
+      } catch {
+        // Size is a nice-to-have; the backend still rejects oversized bodies.
+      }
+
+      if (media.isVideo) {
+        handleFileSelect([
+          {
+            uri: media.uri,
+            type: media.mimeType || 'video/mp4',
+            name: media.name,
+            size,
+          },
+        ]);
+        return;
+      }
+
+      const normalized = await normalizeImageAsset({
+        uri: media.uri,
+        mimeType: media.mimeType,
+        fileName: media.name,
+      } as ImagePicker.ImagePickerAsset);
+      handleFileSelect([
+        {
+          uri: normalized.uri,
+          type: normalized.mime,
+          name: normalized.name,
+          size,
+        },
+      ]);
+    } catch (error) {
+      console.error('Recent media error:', error);
+    }
+  };
+
   const handleFileSelection = async () => {
     // Drop overlapping invocations — a second getDocumentAsync while the
     // first is still presented throws PickingInProgressException on iOS.
@@ -287,8 +336,39 @@ const SendInput: React.FC<SendInputProps> = ({
     }
   };
 
+  // Photo-library access is requested HERE, not inside the sheet: iOS
+  // cannot present the permission alert while an RN <Modal> owns the
+  // screen (the same UIKit limitation that used to swallow the pickers),
+  // so asking from inside resolved to a silent "denied" and the recents
+  // strip stayed empty forever. Asking on the paperclip tap puts the
+  // system alert over the plain chat screen, where it can actually show.
+  // Only the first tap ever waits on it — afterwards the status is
+  // already determined and `getPermissionsAsync` returns immediately.
+  const ensureLibraryPermission = async () => {
+    const MediaLibrary = getMediaLibrary();
+    if (!MediaLibrary?.getPermissionsAsync) {return;}
+    try {
+      const perm = await MediaLibrary.getPermissionsAsync();
+      if (perm?.granted || perm?.canAskAgain === false) {return;}
+      await MediaLibrary.requestPermissionsAsync();
+    } catch (err) {
+      // Optional peer / unsupported platform: the sheet just shows the
+      // camera tile and the full-library route.
+      console.warn('Media library permission check failed:', err);
+    }
+  };
+
+  // Only the very first tap of a session goes through the permission
+  // check; afterwards the sheet opens with zero added latency.
+  const libraryPermissionCheckedRef = useRef(false);
+
   const handleAttachPress = () => {
-    setShowMediaMenu(true);
+    if (libraryPermissionCheckedRef.current) {
+      setShowMediaMenu(true);
+      return;
+    }
+    libraryPermissionCheckedRef.current = true;
+    ensureLibraryPermission().finally(() => setShowMediaMenu(true));
   };
 
   // ─── Voice recording ──────────────────────────────────────────────
@@ -692,6 +772,7 @@ const SendInput: React.FC<SendInputProps> = ({
           onCamera={handleCameraSelection}
           onGallery={handleGallerySelection}
           onDocument={handleFileSelection}
+          onPickMedia={handleRecentMediaSelection}
           primaryColor={getIconColor(config)}
         />
       </InputContainer>

package/src/components/styled/StyledComponents.ts

@@ -28,9 +28,15 @@ export const ChatContainerHeader = styled.View`
   background-color: #ffffff;
   align-items: center;
   justify-content: space-between;
-  border-bottom-width: 1px;
-  border-bottom-color: #e5e7eb;
-  border-style: solid;
+  /* Rounded bottom corners + a soft drop shadow instead of the hairline
+   * rule, so the header reads as a card over the conversation. */
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  shadow-color: #101828;
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.06;
+  shadow-radius: 12px;
+  elevation: 4;
   z-index: 1000;
 `;
 

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

@@ -13,14 +13,21 @@ const colors = {
 
 export const InputContainer = styled.View<{ isText?: boolean }>`
   flex-direction: column;
-  padding: 8px 16px 4px 16px;
-  background-color: ${colors.white};
+  padding: 12px 16px 8px 16px;
+  /* Transparent, so the dock's white surface — and its rounded top
+   * corners — are what shows. An opaque child painted straight over those
+   * corners (a parent's border radius does not clip children without
+   * overflow:hidden, and that would clip the dock's shadow too). */
+  background-color: transparent;
   z-index: 100;
   width: 100%;
   bottom: 0;
   left: 0;
-  border-top-width: 1px;
-  border-top-color: #e5e7eb;
+  /* No radius or shadow here: the dock this sits in (ChatRoom's
+   * InputDockTag) is the composer's outer surface and carries both. Having
+   * them on this inner view too drew its shadow onto the dock's white
+   * background — the faint seam that made the strip below look like a
+   * different colour. */
 `;
 
 export const MediaContainer = styled.View`

package/src/helpers/getChatBackground.ts

@@ -0,0 +1,18 @@
+/** @format */
+
+import type { IConfig } from '../types/types';
+
+/** Ground behind the conversation, and behind the rounded corners of the
+ * header and the composer that sit over it. */
+export const DEFAULT_CHAT_BACKGROUND = '#F3F6FC';
+
+/**
+ * One place for the conversation's background colour.
+ *
+ * The message list has always painted it; the chat container behind it was
+ * plain white, which is what made the header's rounded bottom corners and
+ * the composer's rounded top corners invisible — the corners revealed the
+ * white parent, not the conversation.
+ */
+export const getChatBackgroundColor = (config?: IConfig): string =>
+  config?.backgroundChat?.color || DEFAULT_CHAT_BACKGROUND;

package/src/helpers/mediaLibraryRuntime.ts

@@ -0,0 +1,25 @@
+let cached: any | undefined;
+
+export const getMediaLibrary = (): any | null => {
+  if (cached !== undefined) {return cached;}
+  try {
+    const legacy = require('expo-media-library/legacy');
+
+    if (legacy?.getAssetsAsync) {
+      cached = legacy;
+      return cached;
+    }
+  } catch {
+  }
+
+  try {
+    cached = require('expo-media-library') ?? null;
+  } catch {
+    cached = null;
+  }
+  return cached;
+};
+
+export const __resetMediaLibraryCache = () => {
+  cached = undefined;
+};

package/src/helpers/sheetGestures.ts

@@ -0,0 +1,25 @@
+/** @format */
+
+/**
+ * Shared thresholds for the drag-to-dismiss gesture on bottom sheets (the
+ * attach sheet, the profile headers, the room-list menu). Kept in one
+ * place so a pull feels identical wherever the user does it — and so the
+ * numbers are unit-testable without a touch event.
+ */
+
+/** Drag past this many points and letting go dismisses the sheet. */
+export const DISMISS_DISTANCE = 90;
+/** …or flick faster than this, however short the drag. */
+export const DISMISS_VELOCITY = 0.8;
+
+/**
+ * Claim a drag only once it is clearly a downward pull, so a tap on a row
+ * still registers and a horizontal swipe stays with whatever scrolls
+ * sideways inside the sheet.
+ */
+export const shouldClaimVerticalDrag = (dy: number, dx: number) =>
+  dy > 6 && Math.abs(dy) > Math.abs(dx) * 1.5;
+
+/** Far enough / fast enough to let go of the sheet. */
+export const shouldDismissOnDrag = (dy: number, vy: number) =>
+  dy > DISMISS_DISTANCE || vy > DISMISS_VELOCITY;