@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/styled/SendInput.tsx

@@ -10,14 +10,17 @@ 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 { useTheme } from '../../hooks/useTheme';
 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
@@ -97,6 +100,7 @@ const SendInput: React.FC<SendInputProps> = ({
   isMessageProcessing,
 }) => {
   const t = useT();
+  const theme = useTheme();
   const [message, setMessage] = useState('');
   const [isRecording, setIsRecording] = useState(false);
   // Live counter (seconds) for the recording overlay. Updated by a
@@ -259,22 +263,59 @@ 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.
     if (pickingDocRef.current) {return;}
     pickingDocRef.current = true;
     try {
-      // Let the attach-sheet's modal finish its NATIVE dismissal before we
-      // present the picker. The sheet fires this handler right after its
-      // slide-out animation, but the underlying RN Modal view-controller
-      // dismissal is async — presenting the document picker over a still-
-      // dismissing modal makes iOS tear it down without a cancel callback,
-      // which strands expo-document-picker's pickingContext and makes every
-      // subsequent open throw "Different document picking in progress".
-      if (Platform.OS === 'ios') {
-        await new Promise((resolve) => setTimeout(resolve, 350));
-      }
       const result = await DocumentPicker.getDocumentAsync({
         type: '*/*',
         multiple: false,
@@ -297,8 +338,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 ──────────────────────────────────────────────
@@ -560,7 +632,8 @@ const SendInput: React.FC<SendInputProps> = ({
                 fontSize={config?.typography?.input?.fontSize}
                 fontWeight={config?.typography?.input?.fontWeight as any}
                 placeholder={t('input.placeholder')}
-                placeholderTextColor="#999"
+                placeholderTextColor={theme.textMuted}
+                keyboardAppearance={theme.dark ? 'dark' : 'light'}
                 value={message}
                 onChangeText={(text) => {
                   messageRef.current = text;
@@ -608,11 +681,21 @@ const SendInput: React.FC<SendInputProps> = ({
                   borderRadius: 20,
                   alignItems: 'center',
                   justifyContent: 'center',
-                  backgroundColor: '#FEE2E2',
+                  // Light keeps its pale-red chip; on a dark ground the
+                  // danger tint on the glyph alone carries the meaning.
+                  backgroundColor: theme.dark ? theme.surfaceSecondary : '#FEE2E2',
                 }}
                 activeOpacity={0.7}
               >
-                <Text style={{ color: '#B91C1C', fontWeight: '700', fontSize: 18 }}>×</Text>
+                <Text
+                  style={{
+                    color: theme.dark ? theme.danger : '#B91C1C',
+                    fontWeight: '700',
+                    fontSize: 18,
+                  }}
+                >
+                  ×
+                </Text>
               </TouchableOpacity>
               {/* Live elapsed time + red recording dot. flex:1 so it
                 * occupies the middle slot the input used to have. */}
@@ -631,14 +714,14 @@ const SendInput: React.FC<SendInputProps> = ({
                     width: 10,
                     height: 10,
                     borderRadius: 5,
-                    backgroundColor: '#EF4444',
+                    backgroundColor: theme.dark ? theme.danger : '#EF4444',
                   }}
                 />
-                <Text style={{ fontSize: 16, color: '#1F2937', fontWeight: '500' }}>
+                <Text style={{ fontSize: 16, color: theme.text, fontWeight: '500' }}>
                   {Math.floor(recordingDuration / 60)}:
                   {(recordingDuration % 60).toString().padStart(2, '0')}
                 </Text>
-                <Text style={{ fontSize: 13, color: '#6B7280' }}>Recording…</Text>
+                <Text style={{ fontSize: 13, color: theme.textSecondary }}>Recording…</Text>
               </View>
             </>
           )}
@@ -672,9 +755,11 @@ const SendInput: React.FC<SendInputProps> = ({
                 disabled={disabled}
                 EndIcon={
                   showMic ? (
-                    <RecordIcon color="#FFFFFF" />
+                    <RecordIcon color={theme.textOnPrimary} />
                   ) : (
-                    <SendIcon color={filled ? '#FFFFFF' : '#D4D4D8'} />
+                    <SendIcon
+                      color={filled ? theme.textOnPrimary : theme.textMuted}
+                    />
                   )
                 }
                 style={{
@@ -700,6 +785,7 @@ const SendInput: React.FC<SendInputProps> = ({
           onCamera={handleCameraSelection}
           onGallery={handleGallerySelection}
           onDocument={handleFileSelection}
+          onPickMedia={handleRecentMediaSelection}
           primaryColor={getIconColor(config)}
         />
       </InputContainer>

package/src/components/styled/StyledComponents.ts

@@ -11,7 +11,7 @@ export const ChatContainer = styled.View`
   flex-direction: column;
   flex: 1;
   width: 100%;
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
 `;
 
 export const ThreadContainer = styled.View`
@@ -19,18 +19,24 @@ export const ThreadContainer = styled.View`
   justify-content: space-between;
   flex: 1;
   width: 100%;
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
 `;
 
 export const ChatContainerHeader = styled.View`
   flex-direction: row;
   padding: 12px 16px;
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
   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: ${({ theme }) => theme.shadow};
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.06;
+  shadow-radius: 12px;
+  elevation: 4;
   z-index: 1000;
 `;
 
@@ -82,7 +88,7 @@ export const ChatContainerHeaderLabel = styled.Text<{
   fontSize?: number;
   fontWeight?: string;
 }>`
-  color: #141414;
+  color: ${({ theme }) => theme.text};
   font-weight: ${({ fontWeight }) => fontWeight ?? 600};
   font-size: ${({ fontSize }) => fontSize ?? 16}px;
   text-align: left;
@@ -96,14 +102,14 @@ export const NonRoomChat = styled.View`
   width: 100%;
   align-items: center;
   justify-content: center;
-  background-color: #fff;
+  background-color: ${({ theme }) => theme.surface};
   flex-direction: column;
   gap: 16px;
 `;
 
 export const MessagesScroll = styled.ScrollView`
   flex: 1;
-  background-color: #f3f6fc;
+  background-color: ${({ theme }) => theme.chatBackground};
   padding: 0px 16px;
 `;
 
@@ -115,12 +121,19 @@ export const MessagesList = styled.View`
 
 export const MessageTimestamp = styled.Text`
   font-size: 12px;
-  color: #999;
+  color: ${({ theme }) => theme.textMuted};
   margin-bottom: 5px;
 `;
 
 export const Message = styled.View<{ isUser: boolean }>`
-  background-color: ${(props) => (props.isUser ? '#e8eafd' : '#f3f6fc')};
+  background-color: ${({ isUser, theme }) =>
+    theme.dark
+      ? isUser
+        ? theme.messageBackgroundUser
+        : theme.messageBackground
+      : isUser
+        ? '#e8eafd'
+        : '#f3f6fc'};
   padding: 10px;
   margin: 10px 0;
   border-radius: 8px;
@@ -131,17 +144,17 @@ export const Message = styled.View<{ isUser: boolean }>`
 
 export const MessageText = styled.Text`
   margin: 0;
-  color: #141414;
+  color: ${({ theme }) => theme.text};
 `;
 
 export const UserName = styled.Text`
   font-weight: bold;
-  color: #141414;
+  color: ${({ theme }) => theme.text};
 `;
 
 // Input Components
 export const InputContainer = styled.View`
-  background-color: #ffffff;
+  background-color: ${({ theme }) => theme.surface};
   flex-direction: row;
   gap: 5px;
   padding: 8px;
@@ -152,9 +165,9 @@ export const InputContainer = styled.View`
 export const MessageInput = styled.TextInput`
   padding: 10px;
   border-radius: 8px;
-  border: 1px solid #e5e7eb;
-  background-color: #f5f7f9;
-  color: #141414;
+  border: 1px solid ${({ theme }) => theme.border};
+  background-color: ${({ theme }) => theme.surfaceSecondary};
+  color: ${({ theme }) => theme.text};
 `;
 
 export const IconButton = styled.TouchableOpacity`
@@ -165,14 +178,14 @@ export const IconButton = styled.TouchableOpacity`
 export const SendButton = styled.TouchableOpacity`
   padding: 10px 20px;
   border-radius: 8px;
-  background-color: #007bff;
+  background-color: ${({ theme }) => theme.primary};
   box-shadow: 1px -1px 10px rgba(0, 0, 0, 0.25);
   justify-content: center;
   align-items: center;
 `;
 
 export const SendButtonText = styled.Text`
-  color: white;
+  color: ${({ theme }) => theme.textOnPrimary};
 `;
 
 // Avatar and Utility Components
@@ -228,7 +241,7 @@ export const Overlay = styled.View`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: ${({ theme }) => theme.overlay};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -241,8 +254,8 @@ export const CustomMessageText = styled.Text<{
   colorUser: string;
 }>`
   margin: 0px;
-  color: ${({ color, isUser, colorUser }) =>
-    isUser ? colorUser || '#000' : color || '#000'};
+  color: ${({ color, isUser, colorUser, theme }) =>
+    isUser ? colorUser || theme.messageTextUser : color || theme.messageText};
 `;
 
 export const FileInput = styled.TextInput`
@@ -265,13 +278,13 @@ export const OrDelimiter = styled.Text`
 
 export const OrDelimiterText = styled.Text`
   font-size: 14px;
-  color: #999;
+  color: ${({ theme }) => theme.textMuted};
 `;
 
 export const Line = styled.View`
   width: 100%;
   height: 1px;
-  background-color: #0052cd0d;
+  background-color: ${({ theme }) => theme.surfaceHighlight};
 `;
 
 export const AlsoCheckbox = styled.View<{ accentColor: string }>`
@@ -285,7 +298,7 @@ export const AlsoContainer = styled.TouchableOpacity`
   align-items: center;
   flex-direction: row;
   gap: 8px;
-  background-color: #0052cd0d;
+  background-color: ${({ theme }) => theme.surfaceHighlight};
   font-size: 14px;
   padding: 10px 28px;
   text-align: start;

package/src/components/styled/StyledInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text, TextInput, StyleSheet } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 interface StyledInputProps {
   label?: string;
@@ -13,9 +14,12 @@ 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 Label = ({ children }: { children: React.ReactNode }) => {
+  const theme = useTheme();
+  return (
+    <Text style={[styles.label, { color: theme.textSecondary }]}>{children}</Text>
+  );
+};
 
 const StyledInput = ({
   color,
@@ -23,18 +27,24 @@ const StyledInput = ({
   ...props
 }: { color?: string; error?: boolean } & React.ComponentProps<
   typeof TextInput
->) => (
-  <TextInput
-    style={[
-      styles.input,
-      {
-        borderColor: error ? 'red' : color || '#0052CD',
-        backgroundColor: '#F5F7F9',
-      },
-    ]}
-    {...props}
-  />
-);
+>) => {
+  const theme = useTheme();
+  return (
+    <TextInput
+      placeholderTextColor={theme.textMuted}
+      keyboardAppearance={theme.dark ? 'dark' : 'light'}
+      style={[
+        styles.input,
+        {
+          borderColor: error ? 'red' : color || theme.primary,
+          backgroundColor: theme.surfaceSecondary,
+          color: theme.text,
+        },
+      ]}
+      {...props}
+    />
+  );
+};
 
 const HelperText = ({
   children,
@@ -42,11 +52,16 @@ const HelperText = ({
 }: {
   children: React.ReactNode;
   error?: boolean;
-}) => (
-  <Text style={[styles.helperText, { color: error ? 'red' : '#8c8c8c' }]}>
-    {children}
-  </Text>
-);
+}) => {
+  const theme = useTheme();
+  return (
+    <Text
+      style={[styles.helperText, { color: error ? 'red' : theme.textSecondary }]}
+    >
+      {children}
+    </Text>
+  );
+};
 
 const InputWithLabel: React.FC<StyledInputProps> = ({
   label,
@@ -77,7 +92,6 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 14,
-    color: '#8c8c8c',
     marginBottom: 4,
     marginLeft: 8,
   },

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

@@ -54,7 +54,7 @@ const BaseWrapper = styled.View<{ $position: NonNullable<CustomTypingIndicatorPr
   /* основная типографика */
   /* (цвета текста задаём на текстовых нодах) */
 
-  ${({ $position }) => {
+  ${({ $position, theme }) => {
     switch ($position) {
       case 'top':
         return css`
@@ -62,11 +62,11 @@ const BaseWrapper = styled.View<{ $position: NonNullable<CustomTypingIndicatorPr
           top: 8px;
           left: 16px;
           right: 16px;
-          background-color: rgba(255, 255, 255, 0.95);
+          background-color: ${theme.surface};
           padding: 8px 12px;
           border-radius: 8px;
           /* тени (iOS/Android) */
-          shadow-color: #000;
+          shadow-color: ${theme.shadow};
           shadow-opacity: 0.1;
           shadow-radius: 8px;
           shadow-offset: 0px 2px;
@@ -79,7 +79,7 @@ const BaseWrapper = styled.View<{ $position: NonNullable<CustomTypingIndicatorPr
           top: 0; left: 0; right: 0; bottom: 0;
           align-items: center;
           justify-content: center;
-          background-color: rgba(0, 0, 0, 0.4); /* лёгкая вуаль */
+          background-color: ${theme.overlay}; /* лёгкая вуаль */
           padding: 16px 24px;
         `;
       case 'floating':
@@ -87,10 +87,10 @@ const BaseWrapper = styled.View<{ $position: NonNullable<CustomTypingIndicatorPr
           position: absolute;
           right: 20px;
           bottom: 80px;
-          background-color: rgba(255, 255, 255, 0.95);
+          background-color: ${theme.surface};
           padding: 12px 16px;
           border-radius: 20px;
-          shadow-color: #000;
+          shadow-color: ${theme.shadow};
           shadow-opacity: 0.15;
           shadow-radius: 12px;
           shadow-offset: 0px 4px;
@@ -110,7 +110,7 @@ const Label = styled.Text`
   margin-right: 8px;
   font-weight: 500;
   font-size: 14px;
-  color: #555;
+  color: ${({ theme }) => theme.textSecondary};
 `;
 
 const DotsRow = styled.View`
@@ -195,7 +195,7 @@ const DotView = styled(Animated.View)`
   width: 6px;
   height: 6px;
   border-radius: 3px;
-  background-color: #666;
+  background-color: ${({ theme }) => theme.textSecondary};
   margin-right: 2px;
 `;
 

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

@@ -59,9 +59,19 @@ export const UnsupportedContainer = styled.TouchableOpacity<{ isUser?: boolean }
   margin: 8px;
   cursor: pointer;
   gap: 8px;
-  background-color: ${({ isUser }) => (isUser ? '#EDF5FF' : '#F7F9FC')};
+  /* Light keeps its own tints (not in the palette); dark sits the card on
+     the bubble colours so it reads on a dark ground. */
+  background-color: ${({ isUser, theme }) =>
+    theme.dark
+      ? isUser
+        ? theme.messageBackgroundUser
+        : theme.surfaceSecondary
+      : isUser
+        ? '#EDF5FF'
+        : '#F7F9FC'};
   border-width: 1px;
-  border-color: ${({ isUser }) => (isUser ? '#D7E6FF' : '#E7ECF3')};
+  border-color: ${({ isUser, theme }) =>
+    theme.dark ? theme.border : isUser ? '#D7E6FF' : '#E7ECF3'};
   min-width: 196px;
   max-width: 260px;
 `;
@@ -71,7 +81,8 @@ export const BackgroundFile = styled.View`
   height: 54px;
   align-items: center;
   justify-content: center;
-  background-color: #F3EAFB;
+  background-color: ${({ theme }) =>
+    theme.dark ? theme.surfaceHighlight : '#F3EAFB'};
   border-radius: 10px;
 `;
 
@@ -90,20 +101,22 @@ export const FileName = styled.Text<{
   font-size: 14px;
   font-weight: 600;
   flex-shrink: 1;
-  color: ${({ isUser, colorIsUser }) =>
-    isUser ? colorIsUser || '#1D4ED8' : '#1F2937'};
+  color: ${({ isUser, colorIsUser, theme }) =>
+    isUser
+      ? colorIsUser || (theme.dark ? theme.senderName : '#1D4ED8')
+      : theme.text};
 `;
 
 export const FileSizeContainer = styled.View`
   align-items: flex-start;
   flex-direction: row;
-  background-color: #FFFFFF;
+  background-color: ${({ theme }) => theme.surface};
   padding: 3px 8px;
   border-radius: 999px;
 `;
 
 export const FileSize = styled.Text`
-  color: #667085;
+  color: ${({ theme }) => (theme.dark ? theme.textSecondary : '#667085')};
   overflow: hidden;
   text-align: left;
   font-size: 12px;