@ethora/chat-component-rn 26.5.3 → 26.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component-rn",
-  "version": "26.5.3",
+  "version": "26.5.5",
   "description": "Drop-in XMPP chat component for React Native / Expo. <Chat config={...}/> and you're done.",
   "main": "lib/commonjs/main.js",
   "module": "lib/module/main.js",

package/src/components/ContextMenu/ContextMenuComponents.tsx

@@ -1,4 +1,3 @@
-import { Picker } from 'emoji-mart';
 import styled from 'styled-components/native';
 
 export const ContainerInteractions = styled.View`
@@ -39,12 +38,6 @@ export const ArrowButton = styled.View<{ isRotated: boolean }>`
     isRotated ? 'rotate(180deg)' : 'rotate(0deg)'};
 `;
 
-export const StyledPicker = styled(Picker)`
-  .emoji-mart-preview {
-    display: none;
-  }
-`;
-
 export const ContextMenu = styled.View`
   position: absolute;
   z-index: 1000;

package/src/components/MainComponents/ChatWrapper.tsx

@@ -28,7 +28,7 @@ import Modal from '../Modals/Modal/Modal';
 import ThreadWrapper from '../Thread/ThreadWrapper';
 import {ModalWrapper} from '../Modals/ModalWrapper/ModalWrapper';
 import {useChatSettingState} from '../../hooks/useChatSettingState';
-import {Text} from 'react-native';
+import {DeviceEventEmitter, Pressable, Text, View} from 'react-native';
 import {pushLog as devPushLog} from '../../utils/devLogger';
 
 interface ChatWrapperProps {
@@ -57,6 +57,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
   const [isInited, setInited] = useState(false);
   const [showModal, setShowModal] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
   // const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);
 
   const [isChatVisible, setIsChatVisible] = useState(false);
@@ -142,6 +143,10 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
         if (config?.initBeforeLoad && initMode === 'provider') {
           if (providerBootstrapStatus === 'failed') {
             devPushLog('error', 'ChatWrapper: bootstrap failed');
+            setErrorMsg(
+              'Could not authenticate against the server.\n' +
+                'Check baseUrl, XMPP host fields, and the token / credentials you entered.'
+            );
             setShowModal(true);
             setInited(false);
             return;
@@ -167,12 +172,17 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             return;
           }
           devPushLog('error', 'ChatWrapper: no user (legacy login path)');
+          setErrorMsg(
+            'No authenticated user available.\n' +
+              'For JWT login pass `jwtLogin.token`; for email login pass the `user={{email,password}}` prop and `customAppToken`.'
+          );
           setShowModal(true);
           return;
         }
 
         // We have a user. Modal should be down.
         setShowModal(false);
+        setErrorMsg(null);
 
         if (!client && !storedClient) {
           devPushLog('rn', 'ChatWrapper: initing xmpp client (legacy path)');
@@ -220,6 +230,11 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
         dispatch(setIsLoading({loading: false}));
       } catch (error) {
         devPushLog('error', 'ChatWrapper: init failed', error);
+        const msg =
+          (error as any)?.response?.data?.message ||
+          (error as any)?.message ||
+          String(error);
+        setErrorMsg(`Init failed: ${msg}`);
         setShowModal(true);
         setInited(false);
         dispatch(setIsLoading({loading: false}));
@@ -257,9 +272,46 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     <>
       {showModal && (
         <Overlay>
-          <StyledModal>
-            <Text>There was an error. Please, refresh the page</Text>
-          </StyledModal>
+          <View
+            style={{
+              padding: 20,
+              backgroundColor: '#fff',
+              borderRadius: 12,
+              maxWidth: 320,
+              alignItems: 'stretch',
+            }}>
+            <Text
+              style={{
+                fontSize: 16,
+                fontWeight: '600',
+                marginBottom: 8,
+                color: '#222',
+              }}>
+              Connection error
+            </Text>
+            <Text style={{fontSize: 13, color: '#444', marginBottom: 16}}>
+              {errorMsg ?? 'Something went wrong while connecting to chat.'}
+            </Text>
+            <Pressable
+              onPress={() => {
+                setShowModal(false);
+                setErrorMsg(null);
+                setInited(false);
+                // Signal a clean re-bootstrap. XmppProvider listens and
+                // resets its state machine so the next effect run resolves
+                // the user from scratch.
+                DeviceEventEmitter.emit('ethora:retryBootstrap');
+              }}
+              style={({pressed}) => ({
+                paddingVertical: 10,
+                paddingHorizontal: 16,
+                borderRadius: 6,
+                backgroundColor: pressed ? '#0040A0' : '#0052CD',
+                alignItems: 'center',
+              })}>
+              <Text style={{color: '#fff', fontWeight: '600'}}>Retry</Text>
+            </Pressable>
+          </View>
         </Overlay>
       )}
       <>

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -1,40 +1,21 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { Delimeter, MenuItem } from '../ContextMenu/ContextMenuComponents';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
 import {
   MESSAGE_INTERACTIONS,
   MESSAGE_INTERACTIONS_ICONS,
 } from '../../helpers/constants/MESSAGE_INTERACTIONS';
 import { IMessage } from '../../types/types';
-import { useXmppClient } from '../../context/xmppProvider';
-import { setActiveMessage } from '../../roomStore/roomsSlice';
 import {
-  Alert,
   Modal,
   Text,
-  TouchableWithoutFeedback,
   StyleSheet,
   View,
   Pressable,
 } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
-import EmojiPicker from 'react-native-emoji-selector';
-
-const fixedEmojiIds = ['joy', 'heart', 'fire', '+1', 'smile', 'scream'];
-
-function convertIdToEmoji(id: string) {
-  const mapping = {
-    joy: '😂',
-    heart: '❤️',
-    fire: '🔥',
-    '+1': '👍',
-    smile: '😄',
-    scream: '😱',
-  };
-  return mapping[id as keyof typeof mapping] || '❓';
-}
 
 interface MessageInteractionsProps {
   isReply?: boolean;
@@ -57,38 +38,13 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   handleReplyMessage: replyMessage,
   handleDeleteMessage,
   handleEditMessage,
-  handleReactionMessage,
 }) => {
-  const { client } = useXmppClient();
-  const dispatch = useDispatch();
   const { showToast } = useToast();
 
-  const [pickerVisible, setPickerVisible] = useState(false);
-
-  const handleReactionClick = (id: string) => {
-    handleReactionMessage(id);
-    closeMenu();
-  };
-
-  const onClose = () => {
-    setPickerVisible(false);
-  };
-
-  // const handleDeleteMessage = (roomJid: string, messageId: string) => {
-  //   // dispatch(deleteRoomMessage({ roomJID: room, messageId: msgId }));
-  //   client.deleteMessageStanza(roomJid, messageId);
-  // };
-
   const config = useSelector(
     (state: RootState) => state.chatSettingStore.config
   );
 
-  const closeContextMenu = () => {
-    // if (!config?.disableInteractions) {
-    //   setContextMenu({ visible: false, x: 0, y: 0 });
-    // }
-  };
-
   const handleCopyMessage = async (text: string) => {
     try {
       await Clipboard.setStringAsync(text);
@@ -143,60 +99,6 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
         <View style={styles.overlayFill}>
           <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
           <View style={[styles.contextMenu, memoPosition]}>
-            {/* <MenuItem onClick={() => console.log(MESSAGE_INTERACTIONS.SEND_COINS)}>
-            {MESSAGE_INTERACTIONS.SEND_COINS}
-            <MESSAGE_INTERACTIONS_ICONS.SEND_COINS />{' '}
-          </MenuItem>
-          <Delimeter />
-          <MenuItem onClick={() => console.log(MESSAGE_INTERACTIONS.SEND_ITEM)}>
-            {MESSAGE_INTERACTIONS.SEND_ITEM}
-            <MESSAGE_INTERACTIONS_ICONS.SEND_ITEM />{' '}
-          </MenuItem> */}
-            {/*
-            {!config?.disableReactions && (
-              <View style={{ flexDirection: 'row', paddingBottom: 10 }}>
-                {fixedEmojiIds.map((id) => (
-                  <Pressable
-                    key={id}
-                    onPress={() => handleReactionClick(id)}
-                    style={{ marginRight: 6 }}
-                  >
-                    <Text style={{ fontSize: 26 }}>{convertIdToEmoji(id)}</Text>
-                  </Pressable>
-                ))}
-                <Pressable
-                  onPress={() => setPickerVisible(!pickerVisible)}
-                  style={{ marginLeft: 10 }}
-                >
-                  <Text style={{ fontSize: 24 }}>⌄</Text>
-                </Pressable>
-              </View>
-            )}
-
-            {!config?.disableReactions && pickerVisible && (
-              <View style={{ height: 250 }}>
-                <EmojiPicker
-                  onEmojiSelected={(emoji) => {
-                    handleReactionClick(emoji);
-                  }}
-                  showSearchBar={false}
-                  showTabs={false}
-                />
-              </View>
-            )}
-            */}
-
-            {/*
-            {!isReply && (
-              <>
-                <MenuItem onPress={handleReplyMessage}>
-                  <Text>{MESSAGE_INTERACTIONS.REPLY}</Text>
-                  <MESSAGE_INTERACTIONS_ICONS.REPLY />
-                </MenuItem>
-                <Delimeter />
-              </>
-            )}
-            */}
             <MenuItem onPress={() => handleCopyMessage(message.body!)}>
               <Text>{MESSAGE_INTERACTIONS.COPY}</Text>
               <MESSAGE_INTERACTIONS_ICONS.COPY />
@@ -215,11 +117,6 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
                 </MenuItem>
               </>
             )}
-            {/* <Delimeter />
-          <MenuItem onClick={() => console.log(MESSAGE_INTERACTIONS.REPORT)}>
-            {MESSAGE_INTERACTIONS.REPORT}
-            <MESSAGE_INTERACTIONS_ICONS.REPORT />{' '}
-          </MenuItem> */}
           </View>
         </View>
       )}

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

@@ -11,7 +11,7 @@ import {
   Viewider,
   Divider,
 } from '../styledModalComponents';
-import { Pressable, View, Text, ScrollView, Alert, Linking, Platform } from 'react-native';
+import { Pressable, View, Text, ScrollView, Alert, Linking } from 'react-native';
 import ModalHeaderComponent from '../ModalHeaderComponent';
 import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
 import { useDispatch, useSelector } from 'react-redux';
@@ -19,14 +19,7 @@ import { RootState, getActiveRoom } from '../../../roomStore';
 import { uploadFile } from '../../../networking/api-requests/auth.api';
 import { useXmppClient } from '../../../context/xmppProvider';
 import { updateRoom } from '../../../roomStore/roomsSlice';
-import ImagePicker from 'react-native-image-crop-picker';
-import {
-  check,
-  request,
-  PERMISSIONS,
-  RESULTS,
-  Permission,
-} from 'react-native-permissions';
+import * as ImagePicker from 'expo-image-picker';
 import Loader from '../../styled/Loader';
 import Button from '../../styled/Button';
 import { DeleteIcon, MoreIcon, QrIcon } from '../../../assets/icons';
@@ -89,40 +82,24 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
     }
   }, [client, activeRoom?.jid]);
 
-  const checkPermission = async (permission: Permission) => {
-    const status = await check(permission);
-    if (status === RESULTS.GRANTED) {
-      return status;
-    } else if (status === RESULTS.DENIED) {
-      const requestStatus = await request(permission);
-      return requestStatus;
-    }
-    return status;
-  };
-
   const onUpload = async () => {
     let loadingSet = false;
     try {
       setLoading(true);
       loadingSet = true;
 
-      const permission =
-        Platform.OS === 'ios'
-          ? PERMISSIONS.IOS.PHOTO_LIBRARY
-          : PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE;
-      const permissionStatus = await checkPermission(permission);
-
-      if (permissionStatus !== RESULTS.GRANTED) {
+      // expo-image-picker owns the permission prompt internally and
+      // returns a `granted` flag. No separate react-native-permissions
+      // round-trip needed.
+      const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (!perm.granted) {
         Alert.alert(
           'Permission required',
           'Photo library permission is needed to select images.',
           [
             {
               text: 'Cancel',
-              onPress: () => {
-                setLoading(false);
-                console.log('Photo permission cancelled');
-              },
+              onPress: () => setLoading(false),
               style: 'cancel',
             },
             {
@@ -134,18 +111,20 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         return;
       }
 
-      const image = await ImagePicker.openPicker({
-        width: 300,
-        height: 300,
-        cropping: true,
-        cropperCircleOverlay: true,
-        compressImageQuality: 0.8,
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ['images'],
+        allowsEditing: true,
+        aspect: [1, 1],
+        quality: 0.8,
       });
-
-      const originalName = image.path.split('/').pop();
+      if (result.canceled || !result.assets?.[0]) {
+        return;
+      }
+      const asset = result.assets[0];
+      const originalName = asset.fileName || asset.uri.split('/').pop();
       const fileObject = {
-        uri: image.path,
-        type: image.mime || 'image/jpeg',
+        uri: asset.uri,
+        type: asset.mimeType || 'image/jpeg',
         name: originalName || `profile_${Date.now()}.jpg`,
       };
 

package/src/components/RoomComponents/styled/LastMessageEmoji.tsx

@@ -5,20 +5,22 @@ import {
   LastRoomMessageText,
 } from './StyledRoomComponents';
 import { LastMessage } from '../../../types/types';
-import emojiData from 'emoji-mart';
 
 interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'emoji'> {}
 
+/**
+ * Renders the per-room last-message preview when the latest message
+ * is a reaction (emoji). The `emoji` field is expected to already be
+ * a unicode glyph (the reaction stanza carries the rendered character,
+ * not an `:id:`) so we just render it as-is — no emoji-id resolution
+ * library needed. If a legacy payload still ships an `:id:`, it
+ * renders verbatim instead of crashing.
+ */
 const LastMessageEmoji: FC<LastMessageEmojiProps> = ({ user, emoji }) => {
-  const memoEmoji = (id: string) => {
-    const emoji = (emojiData as any).emojis[id];
-    return emoji ? emoji.skins[0].native : '';
-  };
-
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
-      <LastRoomMessageText>{emoji ? memoEmoji(emoji) : ''}</LastRoomMessageText>
+      <LastRoomMessageText>{emoji || ''}</LastRoomMessageText>
     </LastRoomMessageContainer>
   );
 };

package/src/components/UsersList/Checkbox.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+interface CheckboxProps {
+  value: boolean;
+  onValueChange: (next: boolean) => void;
+  disabled?: boolean;
+  color?: string;
+}
+
+/**
+ * Minimal RN-native checkbox replacement for the user-list multi-select.
+ * Avoids pulling in `@react-native-community/checkbox` (legacy native
+ * module that needs the Metro shim) — the UI footprint is one tap-target
+ * with a check glyph, so a plain Pressable does the job.
+ */
+const Checkbox: React.FC<CheckboxProps> = ({
+  value,
+  onValueChange,
+  disabled,
+  color = '#0052cd',
+}) => {
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: value, disabled: !!disabled }}
+      disabled={disabled}
+      onPress={() => onValueChange(!value)}
+      style={[
+        styles.box,
+        { borderColor: color, backgroundColor: value ? color : 'transparent' },
+        disabled && styles.disabled,
+      ]}
+    >
+      {value && (
+        <View style={styles.checkInner}>
+          <Text style={styles.checkGlyph}>✓</Text>
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  box: {
+    width: 18,
+    height: 18,
+    borderWidth: 1.5,
+    borderRadius: 3,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkInner: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkGlyph: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '700',
+    lineHeight: 14,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});
+
+export default Checkbox;

package/src/components/UsersList/StyledComponents.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components/native';
-import CheckBox from '@react-native-community/checkbox';
 
 export const ScrollableContainer = styled.View`
   max-height: 100px;
@@ -17,13 +16,6 @@ export const UserItem = styled.TouchableHighlight`
   gap: 8px;
 `;
 
-
-export const Checkbox = styled(CheckBox)`
-  width: 16px;
-  height: 16px;
-  tint-color: #0052cd;
-`;
-
 export const Label = styled.Text`
   font-size: 16px;
   color: #333;

package/src/components/UsersList/UsersList.tsx

@@ -9,9 +9,9 @@ import { ModalTitle, LabelData } from '../Modals/styledModalComponents';
 import {
   ScrollableContainer,
   UserItem,
-  Checkbox,
   Label,
 } from './StyledComponents';
+import Checkbox from './Checkbox';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
 import { RoomMember } from '../../types/types';

package/src/context/xmppProvider.tsx

@@ -361,6 +361,20 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
     return () => sub.remove();
   }, [client]);
 
+  // -----------------------------------------------------------
+  // Retry-bootstrap listener — fired by ChatWrapper's error modal so
+  // a transient failure (bad endpoint, server hiccup, etc.) can be
+  // recovered without forcing the user to unmount the whole chat.
+  // -----------------------------------------------------------
+  useEffect(() => {
+    const sub = DeviceEventEmitter.addListener('ethora:retryBootstrap', () => {
+      completedBootstrapKeyRef.current = '';
+      inflightBootstrapKeyRef.current = '';
+      setProviderBootstrapStatus('idle');
+    });
+    return () => sub.remove();
+  }, []);
+
   // -----------------------------------------------------------
   // Logout event listener (RN equivalent of window event)
   // -----------------------------------------------------------

package/lib/commonjs/components/InputComponents/AudioInput.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _AudioRecorder = _interopRequireDefault(require("../InputComponents/AudioRecorder"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AudioInput = ({
-  isRecording,
-  setIsRecording,
-  handleSendClick
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AudioRecorder.default, {
-    setIsRecording: setIsRecording,
-    isRecording: isRecording,
-    handleSendClick: handleSendClick
-  });
-};
-var _default = exports.default = AudioInput;
-//# sourceMappingURL=AudioInput.js.map

package/lib/commonjs/components/InputComponents/AudioInput.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_AudioRecorder","_jsxRuntime","e","__esModule","default","AudioInput","isRecording","setIsRecording","handleSendClick","jsx","_default","exports"],"sourceRoot":"../../../../src","sources":["components/InputComponents/AudioInput.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAF,sBAAA,CAAAC,OAAA;AAA6D,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQ7D,MAAMG,UAAqC,GAAGA,CAAC;EAC7CC,WAAW;EACXC,cAAc;EACdC;AACF,CAAC,KAAK;EACJ,oBACE,IAAAP,WAAA,CAAAQ,GAAA,EAACT,cAAA,CAAAI,OAAa;IACZG,cAAc,EAAEA,cAAe;IAC/BD,WAAW,EAAEA,WAAY;IACzBE,eAAe,EAAEA;EAAgB,CAClC,CAAC;AAEN,CAAC;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAP,OAAA,GAEaC,UAAU","ignoreList":[]}

package/lib/commonjs/components/InputComponents/AudioRecorder.js

@@ -1,101 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _StyledInputComponents = require("../styled/StyledInputComponents/StyledInputComponents");
-var _icons = require("../../assets/icons");
-var _Button = _interopRequireDefault(require("../styled/Button"));
-var _RecordingIndicator = _interopRequireDefault(require("./RecordingIndicator"));
-var _reactNative = require("react-native");
-var _reactNativeAudioRecorderPlayer = _interopRequireDefault(require("react-native-audio-recorder-player"));
-var _reactNativeFs = _interopRequireDefault(require("react-native-fs"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const AudioRecorder = ({
-  setIsRecording,
-  isRecording,
-  handleSendClick
-}) => {
-  const audioRecorderPlayer = (0, _react.useRef)(new _reactNativeAudioRecorderPlayer.default()).current;
-  const [timer, setTimer] = (0, _react.useState)('00:00');
-  const [audioPath, setAudioPath] = (0, _react.useState)(null);
-  (0, _react.useEffect)(() => {
-    return () => {
-      audioRecorderPlayer.stopRecorder();
-      audioRecorderPlayer.removeRecordBackListener();
-    };
-  }, [audioRecorderPlayer]);
-  const startRecording = async () => {
-    try {
-      const path = _reactNative.Platform.select({
-        ios: `${_reactNativeFs.default.DocumentDirectoryPath}/recording.m4a`,
-        android: `${_reactNativeFs.default.CachesDirectoryPath}/recording.mp4`
-      });
-      const uri = await audioRecorderPlayer.startRecorder(path);
-      setAudioPath(uri);
-      audioRecorderPlayer.addRecordBackListener(e => {
-        const minutes = Math.floor(e.currentPosition / 60000);
-        const seconds = Math.floor(e.currentPosition % 60000 / 1000);
-        setTimer(`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`);
-      });
-      setIsRecording(true);
-    } catch (error) {
-      console.error('Error starting recording:', error);
-    }
-  };
-  const stopRecording = async () => {
-    try {
-      await audioRecorderPlayer.stopRecorder();
-      audioRecorderPlayer.removeRecordBackListener();
-      setIsRecording(false);
-    } catch (error) {
-      console.error('Error stopping recording:', error);
-    }
-  };
-  const sendAudio = () => {
-    if (audioPath) {
-      console.log('Audio sent:', audioPath);
-      handleSendClick(audioPath);
-      resetState();
-    }
-  };
-  const resetState = () => {
-    setAudioPath(null);
-    setTimer('00:00');
-    setIsRecording(false);
-  };
-  return isRecording ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StyledInputComponents.RecordContainer, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        display: 'flex',
-        alignItems: 'center'
-      },
-      children: [isRecording && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RecordingIndicator.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyledInputComponents.Timer, {
-        children: timer
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        display: 'flex',
-        gap: 8
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        onPress: stopRecording,
-        EndIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RemoveIcon, {}),
-        unstyled: true
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        onPress: sendAudio,
-        EndIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SendIcon, {}),
-        unstyled: true
-      })]
-    })]
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-    onPress: startRecording,
-    EndIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RecordIcon, {})
-  });
-};
-var _default = exports.default = AudioRecorder;
-//# sourceMappingURL=AudioRecorder.js.map