movius-chats 1.3.13 → 1.4.0

package/lib/typescript/assets/Icons/ChevronUpIcon.d.ts

@@ -0,0 +1,5 @@
+import { ViewStyle } from 'react-native';
+export declare const ChevronUpIcon: ({ style, color, }: {
+    style?: ViewStyle;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/typescript/assets/Icons/LockIcon.d.ts

@@ -0,0 +1,5 @@
+import { ViewStyle } from 'react-native';
+export declare const LockIcon: ({ style, color, }: {
+    style?: ViewStyle;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/typescript/assets/Icons/TrashIcon.d.ts

@@ -0,0 +1,5 @@
+import { ViewStyle } from 'react-native';
+export declare const TrashIcon: ({ style, color, }: {
+    style?: ViewStyle;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/typescript/components/AudioPlayer/types.d.ts

@@ -2,4 +2,5 @@ export interface AudioPlayerProps {
     audioUrl: string;
     audioId: string;
     isVideoPlaying: boolean;
+    isCurrentUser: boolean;
 }

package/lib/typescript/components/ChatInput/types.d.ts

@@ -1,4 +1,4 @@
-import { Message } from '../../types';
+import { Message, RecordingResult } from '../../types';
 export interface ChatInputProps {
     onSendMessage: (message: Omit<Message, 'id' | 'time' | 'status'>) => void;
     onTypingStart?: () => void;
@@ -6,7 +6,7 @@ export interface ChatInputProps {
     onAttachmentPress?: () => void;
     onCameraPress?: () => void;
     onAudioRecordStart?: () => void;
-    onAudioRecordEnd?: () => void;
+    onAudioRecordEnd?: (audio?: RecordingResult) => void;
     placeholder?: string;
     previewData?: {
         uri: string;

package/lib/typescript/components/VoiceRecorder/LongPressRecording.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RecordingUIProps, VoiceRecorderStyleOverrides } from '../../types';
+interface LongPressRecordingProps {
+    duration: number;
+    /** Current horizontal drag offset (negative = sliding left to cancel) */
+    slideX: number;
+    containerHeight?: number;
+    fontFamily?: string;
+    voiceRecorderStyles?: VoiceRecorderStyleOverrides;
+    recordingUIProps?: RecordingUIProps;
+}
+export declare const LongPressRecording: React.FC<LongPressRecordingProps>;
+export {};

package/lib/typescript/components/VoiceRecorder/NormalRecording.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { RecordingUIProps, VoiceRecorderStyleOverrides } from '../../types';
+interface NormalRecordingProps {
+    isRecording: boolean;
+    isPaused: boolean;
+    duration: number;
+    onCancel: () => void;
+    onSend: () => void;
+    onPause: () => void;
+    onResume: () => void;
+    containerHeight?: number;
+    fontFamily?: string;
+    sendButtonColor?: string;
+    sendIconColor?: string;
+    enablePauseResume?: boolean;
+    voiceRecorderStyles?: VoiceRecorderStyleOverrides;
+    recordingUIProps?: RecordingUIProps;
+}
+export declare const NormalRecording: React.FC<NormalRecordingProps>;
+export {};

package/lib/typescript/components/VoiceRecorder/WaveformAnimation.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface WaveformAnimationProps {
+    isActive: boolean;
+    color?: string;
+    height?: number;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const WaveformAnimation: React.FC<WaveformAnimationProps>;
+export {};

package/lib/typescript/hooks/useVoiceRecorder.d.ts

@@ -0,0 +1,19 @@
+import { RecordingResult } from '../types';
+export type RecordingStatus = 'idle' | 'recording' | 'paused';
+interface UseVoiceRecorderOptions {
+    maxDuration?: number;
+    onRecordStart?: () => void;
+    onRecordEnd?: (result: RecordingResult) => void;
+}
+export declare function useVoiceRecorder({ maxDuration, onRecordStart, onRecordEnd, }?: UseVoiceRecorderOptions): {
+    status: RecordingStatus;
+    duration: number;
+    isRecording: boolean;
+    isPaused: boolean;
+    startRecording: () => Promise<void>;
+    pauseRecording: () => Promise<void>;
+    resumeRecording: () => Promise<void>;
+    stopRecording: () => Promise<RecordingResult | null>;
+    cancelRecording: () => Promise<void>;
+};
+export {};

package/lib/typescript/types/index.d.ts

@@ -1,4 +1,61 @@
 import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+/** Returned by the recorder when a recording successfully completes. */
+export interface RecordingResult {
+    uri: string;
+    duration: number;
+    size?: number;
+    mimeType?: string;
+}
+/** Passed to `renderVoiceRecorder` so a custom UI has full control. */
+export interface VoiceRecorderExposedState {
+    isRecording: boolean;
+    isPaused: boolean;
+    duration: number;
+    isLocked: boolean;
+    slideOffset: {
+        x: number;
+        y: number;
+    };
+    waveformData: number[];
+    startRecording: () => void;
+    stopRecording: () => Promise<RecordingResult | null>;
+    pauseRecording: () => void;
+    resumeRecording: () => void;
+    cancelRecording: () => void;
+}
+/** Feature flags / limits for the built-in recorder. */
+export interface VoiceRecorderConfig {
+    maxDuration?: number;
+    enableSlideToCancel?: boolean;
+    enableLockRecording?: boolean;
+    enableWaveform?: boolean;
+    autoSendOnRelease?: boolean;
+    enablePauseResume?: boolean;
+    recordingFormat?: string;
+    recordingQuality?: string;
+    animationDuration?: number;
+}
+/** Style overrides for each section of the recording UI. */
+export interface VoiceRecorderStyleOverrides {
+    container?: ViewStyle;
+    timer?: TextStyle;
+    waveform?: ViewStyle;
+    micButton?: ViewStyle;
+    slideText?: TextStyle;
+    lockContainer?: ViewStyle;
+    trashButton?: ViewStyle;
+}
+/** Color / size tweaks for the default recording UI. */
+export interface RecordingUIProps {
+    iconSize?: number;
+    recordingIconSize?: number;
+    sendIconSize?: number;
+    timerTextStyle?: TextStyle;
+    waveformColor?: string;
+    recordingBackground?: string;
+    cancelTextColor?: string;
+    micPulseColor?: string;
+}
 /** Single image or video inside a message bubble (use `mediaItems` for albums). */
 export interface MessageMediaItem {
     uri: string;
@@ -35,10 +92,18 @@ export interface ChatScreenProps {
     onSendMessage: (message: Omit<Message, 'id' | 'time' | 'status'>) => void;
     onMessageLongPress?: (message: Message) => void;
     onAttachmentPress?: () => void;
-    onAudioRecordEnd?: () => void;
+    onAudioRecordEnd?: (audio?: RecordingResult) => void;
     onAudioRecordStart?: () => void;
     onCameraPress?: () => void;
     onFileAttachmentPress?: (file: MessageFileAttachment) => void;
+    /** Replace the default recording UI with a fully custom component. */
+    renderVoiceRecorder?: (state: VoiceRecorderExposedState) => React.ReactNode;
+    /** Feature flags / limits for the built-in recorder. */
+    voiceRecorderProps?: VoiceRecorderConfig;
+    /** Style overrides for the built-in recording UI sections. */
+    voiceRecorderStyles?: VoiceRecorderStyleOverrides;
+    /** Color and size tweaks for the built-in recording UI. */
+    recordingUIProps?: RecordingUIProps;
     keyboardVerticalOffset?: number;
     disableKeyboardAvoiding?: boolean;
     typingUsers?: Array<{
@@ -74,6 +139,14 @@ export interface ChatScreenProps {
             audioPlayIconColor?: string;
             audioPauseIconColor?: string;
             videoPlayIconColor?: string;
+            /** Inactive (unplayed) waveform bar color */
+            audioWaveformColor?: string;
+            /** Active (played) waveform bar color */
+            audioWaveformActiveColor?: string;
+            /** Playback-time text color for sent audio messages */
+            sentAudioTimestampColor?: string;
+            /** Playback-time text color for received audio messages */
+            receivedAudioTimestampColor?: string;
             inputTextColor?: string;
             sentIconColor?: string;
             deliveredIconColor?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "movius-chats",
-  "version": "1.3.13",
+  "version": "1.4.0",
   "description": "A highly customizable, feature-rich chat interface component for React Native applications",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -48,7 +48,17 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-native": "*",
-    "react-native-reanimated": "*"
+    "react-native-reanimated": "*",
+    "expo-av": "*",
+    "expo-file-system": "*"
+  },
+  "peerDependenciesMeta": {
+    "expo-av": {
+      "optional": true
+    },
+    "expo-file-system": {
+      "optional": true
+    }
   },
   "dependencies": {
     "react-native-parsed-text": "^0.0.22",

package/scripts/patchSound.js

@@ -1,66 +1,91 @@
-
-
 'use strict';
 
+/**
+ * postinstall patch — react-native-sound + New Architecture compatibility
+ *
+ * react-native-sound imports resolveAssetSource the old internal way:
+ *   require('react-native/Libraries/Image/resolveAssetSource')
+ * In React Native New Architecture (Fabric / TurboModules) that path no
+ * longer exports a bare function; it exports an object whose .default IS the
+ * function.  This causes:
+ *   TypeError: resolveAssetSource is not a function (it is Object)
+ *
+ * This script is run automatically via the `postinstall` hook so every
+ * consumer of movius-chats gets the fix without any manual steps.
+ */
+
 const fs = require('fs');
 const path = require('path');
 
+// Possible locations for react-native-sound's main file.
+// Note: the filename is lowercase "sound.js" in all published versions.
 const candidates = [
-  // standard flat node_modules layout
+  // 1. Nested inside movius-chats own node_modules (npm didn't hoist it)
+  path.resolve(__dirname, '..', 'node_modules', 'react-native-sound', 'sound.js'),
+  // 2. Hoisted to the project root node_modules (flat layout)
+  path.resolve(__dirname, '..', '..', 'react-native-sound', 'sound.js'),
+  // 3. One level up further (yarn workspaces / pnpm monorepo)
+  path.resolve(__dirname, '..', '..', '..', 'react-native-sound', 'sound.js'),
+  // 4. Some older publish had an uppercase S — kept as a fallback
+  path.resolve(__dirname, '..', 'node_modules', 'react-native-sound', 'Sound.js'),
   path.resolve(__dirname, '..', '..', 'react-native-sound', 'Sound.js'),
-  // hoisted monorepo layout (yarn workspaces / pnpm)
-  path.resolve(__dirname, '..', '..', '..', 'react-native-sound', 'Sound.js'),
 ];
 
 const OLD_IMPORT =
+  'var resolveAssetSource = require("react-native/Libraries/Image/resolveAssetSource");';
+
+// Some versions use single quotes
+const OLD_IMPORT_SQ =
   "var resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');";
 
 const NEW_IMPORT = [
   "var _ras = require('react-native/Libraries/Image/resolveAssetSource');",
   '// movius-chats patch: support New Architecture (resolveAssetSource moved to Image)',
   "var resolveAssetSource = typeof _ras === 'function'",
-  "  ? _ras",
+  '  ? _ras',
   "  : (_ras && typeof _ras.default === 'function'",
-  "      ? _ras.default",
+  '      ? _ras.default',
   "      : require('react-native').Image.resolveAssetSource.bind(require('react-native').Image));",
 ].join('\n');
 
 const PATCH_MARKER = '// movius-chats patch:';
 
-let patched = false;
+let attempted = false;
 
 for (const soundPath of candidates) {
   if (!fs.existsSync(soundPath)) continue;
 
+  attempted = true;
   let src = fs.readFileSync(soundPath, 'utf8');
 
   if (src.includes(PATCH_MARKER)) {
     console.log('[movius-chats] react-native-sound already patched — skipping.');
-    patched = true;
     break;
   }
 
-  if (!src.includes(OLD_IMPORT)) {
-    // Different version of react-native-sound; the import line changed.
+  const hasDQ = src.includes(OLD_IMPORT);
+  const hasSQ = src.includes(OLD_IMPORT_SQ);
+
+  if (!hasDQ && !hasSQ) {
     console.warn(
-      '[movius-chats] Could not locate the resolveAssetSource import in ' +
-        soundPath +
-        '.\n' +
-        'If you see a "resolveAssetSource is not a function" error, apply the\n' +
-        'patch manually — see the movius-chats README Troubleshooting section.'
+      '[movius-chats] react-native-sound found at ' + soundPath + ' but the\n' +
+      '  resolveAssetSource import line was not recognised (different version?).\n' +
+      '  If you see "resolveAssetSource is not a function" errors, apply the\n' +
+      '  patch manually — see the movius-chats README Troubleshooting section.'
     );
-    patched = true; // don't repeat the warning for every candidate
     break;
   }
 
-  src = src.replace(OLD_IMPORT, NEW_IMPORT);
+  if (hasDQ) src = src.replace(OLD_IMPORT, NEW_IMPORT);
+  if (hasSQ) src = src.replace(OLD_IMPORT_SQ, NEW_IMPORT);
+
   fs.writeFileSync(soundPath, src, 'utf8');
-  console.log('[movius-chats] ✅ react-native-sound patched for New Architecture compatibility.');
-  patched = true;
+  console.log('[movius-chats] ✅ react-native-sound patched at ' + soundPath);
   break;
 }
 
-if (!patched) {
-  // react-native-sound is not installed yet (peer dep, optional dep, etc.)
-  // Silently skip — the patch will run again if the user installs it later.
+// Silently do nothing if react-native-sound isn't installed yet
+// (e.g. during the movius-chats dev build itself).
+if (!attempted) {
+  // No-op — react-native-sound may be installed later as a peer dependency.
 }

package/src/assets/Icons/ChevronUpIcon.tsx

@@ -0,0 +1,20 @@
+import { ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+export const ChevronUpIcon = ({
+  style,
+  color = '#6b7280',
+}: {
+  style?: ViewStyle;
+  color?: string;
+}) => (
+  <Svg style={style} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M6 15l6-6 6 6"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);

package/src/assets/Icons/LockIcon.tsx

@@ -0,0 +1,28 @@
+import { ViewStyle } from 'react-native';
+import Svg, { Path, Rect } from 'react-native-svg';
+
+export const LockIcon = ({
+  style,
+  color = '#6b7280',
+}: {
+  style?: ViewStyle;
+  color?: string;
+}) => (
+  <Svg style={style} viewBox="0 0 24 24" fill="none">
+    <Rect
+      x="5"
+      y="11"
+      width="14"
+      height="10"
+      rx="2"
+      stroke={color}
+      strokeWidth="1.5"
+    />
+    <Path
+      d="M8 11V7a4 4 0 0 1 8 0v4"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </Svg>
+);

package/src/assets/Icons/TrashIcon.tsx

@@ -0,0 +1,26 @@
+import { ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+export const TrashIcon = ({
+  style,
+  color = '#ef4444',
+}: {
+  style?: ViewStyle;
+  color?: string;
+}) => (
+  <Svg style={style} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M10 11v6M14 11v6"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </Svg>
+);