@bytexbyte/nxtlinq-ai-agent-ui-react-native-development 0.2.0 → 0.3.0

package/src/components/VoiceAttachmentButton.tsx

@@ -0,0 +1,100 @@
+import React, { useCallback, useState } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet } from 'react-native';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+import { sendVoiceImageAttachment } from '../voice/sendVoiceImageAttachment';
+import { useVoiceImagePicker } from '../voice/useVoiceImagePicker';
+import { AddIcon } from './VoiceIcons';
+import { VoiceAddMediaModal } from './VoiceAddMediaModal';
+
+export function VoiceAttachmentButton(): React.ReactElement {
+  const {
+    theme,
+    messages,
+    setMessages,
+    sendVoiceUserInput,
+    voiceSessionId,
+    isVoiceChannelReady,
+    isVoiceConnecting,
+  } = useAgentAssistant();
+  const [busy, setBusy] = useState(false);
+
+  const handlePicked = useCallback(
+    async (fileUri: string) => {
+      if (!isVoiceChannelReady || busy) return;
+      setBusy(true);
+      try {
+        await sendVoiceImageAttachment({
+          fileUri,
+          messages,
+          voiceSessionId,
+          setMessages,
+          sendVoiceUserInput,
+        });
+      } catch (e) {
+        const message = e instanceof Error ? e.message : String(e);
+        console.warn('[nxtlinq] sendVoiceImageAttachment failed:', message);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [
+      busy,
+      isVoiceChannelReady,
+      messages,
+      sendVoiceUserInput,
+      setMessages,
+      voiceSessionId,
+    ],
+  );
+
+  const {
+    modalVisible,
+    openModal,
+    closeModal,
+    pickFromLibrary,
+    takePhoto,
+    pickerMissing,
+  } = useVoiceImagePicker(handlePicked);
+
+  const disabled = busy || !isVoiceChannelReady || isVoiceConnecting || pickerMissing;
+
+  return (
+    <>
+      <Pressable
+        onPress={openModal}
+        disabled={disabled}
+        accessibilityLabel="Add attachment"
+        style={({ pressed }) => [
+          styles.button,
+          {
+            backgroundColor: theme.colors.assistantBubble,
+            opacity: pressed || disabled ? 0.45 : 1,
+          },
+        ]}
+      >
+        {busy ? (
+          <ActivityIndicator color={theme.colors.assistantText} size="small" />
+        ) : (
+          <AddIcon size={22} color={theme.colors.assistantText} />
+        )}
+      </Pressable>
+      <VoiceAddMediaModal
+        visible={modalVisible}
+        theme={theme}
+        onClose={closeModal}
+        onPickPhotos={() => void pickFromLibrary()}
+        onTakePhoto={() => void takePhoto()}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/VoiceIcons.tsx

@@ -30,3 +30,7 @@ export function SpeakerIcon({
 }: IconProps): React.ReactElement {
   return <MaterialIcon name="volume-up" size={size} color={color} />;
 }
+
+export function AddIcon({ size = 24, color = '#4b5563' }: IconProps): React.ReactElement {
+  return <MaterialIcon name="add" size={size} color={color} />;
+}

package/src/components/VoiceWaveform.tsx

@@ -10,30 +10,40 @@ import {
 const BAR_COUNT = 12;
 
 /**
- * Polls `getOutputAudioLevel()` while the assistant is speaking (Berify-aligned).
- * JeannieVoiceWaveform uses `active && audible` — not during user mic / idle.
+ * Polls local player RMS (Berify JeannieVoiceWaveform pattern).
+ * Animates while assistant audio is audible; voice status extends hold at turn start.
  */
 export function VoiceWaveform(): React.ReactElement | null {
   const { theme, interactionMode, voiceStatus, getOutputAudioLevel } = useAgentAssistant();
   const [levels, setLevels] = useState<number[]>(() => Array(BAR_COUNT).fill(0));
   const lastAudibleAtRef = useRef(0);
+  const smoothedRef = useRef(0);
 
   useEffect(() => {
     if (interactionMode !== 'voice') {
       setLevels(Array(BAR_COUNT).fill(0));
+      smoothedRef.current = 0;
       return;
     }
 
     const id = setInterval(() => {
       const now = Date.now();
-      const statusActive = WAVEFORM_ACTIVE_STATUSES.has(voiceStatus);
       const rawLevel = getOutputAudioLevel();
       if (rawLevel > WAVEFORM_AUDIBLE_THRESHOLD) {
         lastAudibleAtRef.current = now;
       }
+      if (WAVEFORM_ACTIVE_STATUSES.has(voiceStatus)) {
+        lastAudibleAtRef.current = now;
+      }
       const audible = now - lastAudibleAtRef.current < WAVEFORM_AUDIBLE_HOLD_MS;
-      const effectiveActive = statusActive && audible;
-      const scaled = effectiveActive ? rawLevel : 0;
+      if (rawLevel > smoothedRef.current) {
+        smoothedRef.current = rawLevel;
+      } else {
+        smoothedRef.current *= 0.9;
+      }
+      const scaled = audible
+        ? Math.min(1, Math.max(0.12, smoothedRef.current))
+        : 0;
       setLevels((prev) => [...prev.slice(1), scaled]);
     }, 100);
     return () => clearInterval(id);

package/src/components/useMessageListAutoScroll.ts

@@ -0,0 +1,57 @@
+import type { Message } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+import { useCallback, useEffect, useMemo, useRef, type RefObject } from 'react';
+
+type ScrollableList = {
+  scrollToEnd: (opts: { animated: boolean }) => void;
+};
+
+function latestMessageScrollKey(messages: Message[]): string {
+  const last = messages[messages.length - 1];
+  if (!last) return '0';
+  return [
+    messages.length,
+    last.id,
+    last.content,
+    last.partialContent ?? '',
+    last.attachments?.length ?? 0,
+    last.isStreaming ? '1' : '0',
+  ].join('|');
+}
+
+export function useMessageListAutoScroll(
+  messages: Message[],
+  listRef: RefObject<ScrollableList | null>,
+): { onContentSizeChange: () => void } {
+  const scrollKey = useMemo(() => latestMessageScrollKey(messages), [messages]);
+  const pendingFrameRef = useRef<number | null>(null);
+
+  const scrollToLatest = useCallback(
+    (animated: boolean) => {
+      if (messages.length === 0) return;
+      if (pendingFrameRef.current != null) {
+        cancelAnimationFrame(pendingFrameRef.current);
+      }
+      pendingFrameRef.current = requestAnimationFrame(() => {
+        pendingFrameRef.current = null;
+        listRef.current?.scrollToEnd({ animated });
+      });
+    },
+    [listRef, messages.length],
+  );
+
+  useEffect(() => {
+    scrollToLatest(true);
+    return () => {
+      if (pendingFrameRef.current != null) {
+        cancelAnimationFrame(pendingFrameRef.current);
+        pendingFrameRef.current = null;
+      }
+    };
+  }, [scrollKey, scrollToLatest]);
+
+  const onContentSizeChange = useCallback(() => {
+    scrollToLatest(false);
+  }, [scrollToLatest]);
+
+  return { onContentSizeChange };
+}

package/src/context/AgentAssistantContext.tsx

@@ -17,6 +17,8 @@ import React, {
 import { defaultAgentAssistantTheme } from '../theme/defaultTheme';
 import type { AgentAssistantTheme, NxtlinqAgentAssistantProps, PresetMessage } from '../types';
 import { useVoiceMicState } from '../voice/useVoiceMicState';
+import { useVoiceTranscriptMessages } from '../voice/useVoiceTranscriptMessages';
+import { useWsRealtimeAudio } from '../voice/useWsRealtimeAudio';
 import { waitForIOSVoiceCaptureRelease } from '@bytexbyte/nxtlinq-ai-agent-react-native-development';
 import { isTextTtsPlayerSupported, TextTtsPlayer, type TextTtsPlayerHandle } from '../voice/TextTtsPlayer';
 
@@ -41,6 +43,8 @@ export type AgentAssistantContextValue = UseNxtlinqAgentResult &
   selectPreset: (preset: PresetMessage) => Promise<void>;
   /** True when voice data channel is open and ready for user_input. */
   isVoiceChannelReady: boolean;
+  /** Show "+" image picker in voice bar (SDK-2). */
+  showVoiceImageInput: boolean;
   postTextTts: (text: string) => Promise<{ audio: ArrayBuffer; mimeType: string }>;
   buildTextTtsPlaybackUri: (result: { audio: ArrayBuffer; mimeType: string }) => string;
   playMessageTts: (messageId: string, text: string) => Promise<void>;
@@ -62,10 +66,8 @@ export type AgentAssistantProviderProps = {
     | 'startWithMicMuted'
     | 'holdMicDuringAssistant'
     | 'textTtsVolume'
-    | 'voiceRemoteAudioGain'
-  > & {
-    webrtcEnabled: boolean;
-  };
+    | 'showVoiceImageInput'
+  >;
 };
 
 export function AgentAssistantProvider({
@@ -98,34 +100,71 @@ export function AgentAssistantProvider({
   const ttsRequestIdRef = React.useRef(0);
   const voiceConnectChainRef = React.useRef<Promise<unknown>>(Promise.resolve());
 
-  const isVoiceAvailable = Boolean(ui.webrtcEnabled && ui.enableVoice !== false);
+  const isVoiceAvailable = ui.enableVoice !== false;
   const micStartsMuted = ui.startWithMicMuted ?? true;
 
+  const handleVoiceBargeIn = useCallback(() => {
+    voice.interrupt();
+  }, [voice]);
+
   const {
     isMicMuted,
+    isCaptureActive,
     isMicHeldForAssistant,
     toggleVoiceMicMute,
+    muteAfterSilenceCommit,
     prepareForVoiceConnect,
     resetMicState,
     clearAssistantMicHold,
   } = useVoiceMicState(voice, isVoiceConnecting, {
     startWithMicMuted: micStartsMuted,
-    // Decoupled: open-mic demo can start unmuted yet still mute during assistant TTS.
     holdMicDuringAssistant: ui.holdMicDuringAssistant ?? true,
+    onBargeIn: handleVoiceBargeIn,
   });
 
+  const isVoiceActive = voice.voiceSessionId != null;
+  const {
+    buildCallbacks: buildWsAudioCallbacks,
+    bindSession: bindWsAudioSession,
+    getOutputAudioLevel: getWsOutputAudioLevel,
+  } = useWsRealtimeAudio(isCaptureActive, isVoiceActive, {
+    voiceStatus: voice.voiceStatus,
+    muteAfterSilenceCommit,
+  });
+
+  const getOutputAudioLevel = useCallback(
+    () => getWsOutputAudioLevel(),
+    [getWsOutputAudioLevel],
+  );
+
+  const voiceTranscriptApi = useMemo(
+    () => ({
+      getMessages: () => agent.agent.getSnapshot().messages,
+      setMessages: agent.setMessages,
+      syncVoiceTurnHistory: agent.syncVoiceTurnHistory,
+    }),
+    [agent.agent, agent.setMessages, agent.syncVoiceTurnHistory],
+  );
+
+  const { handleTranscript, handleDone, clearVoiceStream } = useVoiceTranscriptMessages(
+    voiceTranscriptApi,
+    interactionMode,
+    voice.voiceSessionId,
+  );
+
   const setInteractionMode = useCallback(
     (mode: InteractionMode) => {
       if (mode === 'text' && interactionMode === 'voice') {
         void (async () => {
           await voice.stopVoice('switch_to_text');
           await waitForIOSVoiceCaptureRelease();
+          clearVoiceStream();
           resetMicState();
         })();
       }
       setInteractionModeState(mode);
     },
-    [interactionMode, voice, resetMicState],
+    [interactionMode, voice, resetMicState, clearVoiceStream],
   );
 
   useEffect(() => {
@@ -133,10 +172,11 @@ export function AgentAssistantProvider({
       void (async () => {
         await voice.stopVoice('mode_text_cleanup');
         await waitForIOSVoiceCaptureRelease();
+        clearVoiceStream();
         resetMicState();
       })();
     }
-  }, [interactionMode, voice.voiceSessionId, voice, resetMicState]);
+  }, [interactionMode, voice.voiceSessionId, voice, resetMicState, clearVoiceStream]);
 
   const sendText = useCallback(async () => {
     const text = inputText.trim();
@@ -169,32 +209,46 @@ export function AgentAssistantProvider({
         try {
           const session = await voice.startVoice({
             startWithMicMuted: micStartsMuted,
-            ...options,
-            onOpen: () => {
-              if (!micStartsMuted) {
-                voice.muteMic(false);
-              }
-              options?.onOpen?.();
+            keepMicCaptureActive: true,
+            ...buildWsAudioCallbacks({
+              ...options,
+              onOpen: () => {
+                if (!micStartsMuted) {
+                  voice.muteMic(false);
+                }
+                options?.onOpen?.();
+              },
+              onClose: (reason) => {
+                clearVoiceStream();
+                resetMicState();
+                const userInitiated =
+                  reason === 'switch_to_text' ||
+                  reason === 'client_stop' ||
+                  reason === 'mode_text_cleanup';
+                if (userInitiated) {
+                  setInteractionModeState('text');
+                } else {
+                  console.warn('[nxtlinq] voice session closed:', reason);
+                }
+                options?.onClose?.(reason);
+              },
+              onError: (err) => {
+                clearVoiceStream();
+                resetMicState();
+                console.warn('[nxtlinq] voice session error:', err.message);
+                options?.onError?.(err);
+              },
+            }),
+            onTranscript: (event) => {
+              handleTranscript(event);
+              options?.onTranscript?.(event);
             },
-            onClose: (reason) => {
-              resetMicState();
-              const userInitiated =
-                reason === 'switch_to_text' ||
-                reason === 'client_stop' ||
-                reason === 'mode_text_cleanup';
-              if (userInitiated) {
-                setInteractionModeState('text');
-              } else {
-                console.warn('[nxtlinq] voice session closed:', reason);
-              }
-              options?.onClose?.(reason);
-            },
-            onError: (err) => {
-              resetMicState();
-              console.warn('[nxtlinq] voice session error:', err.message);
-              options?.onError?.(err);
+            onDone: (event) => {
+              handleDone(event);
+              options?.onDone?.(event);
             },
           });
+          bindWsAudioSession(session, !micStartsMuted);
           return session;
         } catch (err) {
           setInteractionModeState('text');
@@ -208,7 +262,17 @@ export function AgentAssistantProvider({
       voiceConnectChainRef.current = next.catch(() => undefined);
       return next;
     },
-    [voice, prepareForVoiceConnect, resetMicState, micStartsMuted, ui.voiceRemoteAudioGain],
+    [
+      voice,
+      prepareForVoiceConnect,
+      resetMicState,
+      clearVoiceStream,
+      micStartsMuted,
+      buildWsAudioCallbacks,
+      bindWsAudioSession,
+      handleTranscript,
+      handleDone,
+    ],
   );
 
   const wrappedStopVoice = useCallback(async () => {
@@ -273,6 +337,7 @@ export function AgentAssistantProvider({
     () => ({
       ...agent,
       ...voice,
+      getOutputAudioLevel,
       isVoiceActive:
         interactionMode === 'voice' && voice.voiceSessionId != null,
       startVoice: wrappedStartVoice,
@@ -292,6 +357,7 @@ export function AgentAssistantProvider({
       isVoiceAvailable,
       isVoiceConnecting,
       isVoiceChannelReady,
+      showVoiceImageInput: ui.showVoiceImageInput ?? false,
       postTextTts,
       buildTextTtsPlaybackUri,
       playMessageTts,
@@ -303,6 +369,7 @@ export function AgentAssistantProvider({
     [
       agent,
       voice,
+      getOutputAudioLevel,
       wrappedStartVoice,
       wrappedStopVoice,
       wrappedInterrupt,
@@ -318,6 +385,7 @@ export function AgentAssistantProvider({
       isVoiceAvailable,
       isVoiceConnecting,
       isVoiceChannelReady,
+      ui.showVoiceImageInput,
       postTextTts,
       buildTextTtsPlaybackUri,
       playMessageTts,

package/src/index.ts

@@ -21,11 +21,12 @@ export {
 export { AgentMessageList } from './components/AgentMessageList';
 export { AgentComposer } from './components/AgentComposer';
 export { AgentVoiceBar } from './components/AgentVoiceBar';
-export { AgentRemoteAudio } from './components/AgentRemoteAudio';
 export { AudioSessionWaker } from './voice/AudioSessionWaker';
 export { PresetMessageChips } from './components/PresetMessageChips';
 export { AgentAssistantShell } from './components/AgentAssistantShell';
 export { VoiceGreetTrigger } from './components/VoiceGreetTrigger';
+export { VoiceAttachmentButton } from './components/VoiceAttachmentButton';
+export { VoiceImageInput } from './components/VoiceImageInput';
 
 // Headless SDK re-exports for apps that compose custom layouts
 export {
@@ -34,7 +35,6 @@ export {
   useNxtlinqVoice,
   createNxtlinqAgentRN,
   type NxtlinqAgentProviderProps,
-  type RNWebRTCModule,
 } from '@bytexbyte/nxtlinq-ai-agent-react-native-development';
 
 export type {

package/src/react-native.d.ts

@@ -19,11 +19,27 @@ declare module 'react-native' {
   }>;
   export const TextInput: React.ComponentType<Record<string, unknown>>;
   export const Pressable: React.ComponentType<{
-    onPress?: () => void;
+    onPress?: (event?: unknown) => void;
     disabled?: boolean;
+    accessibilityLabel?: string;
     style?: PressableStyle;
     children?: React.ReactNode;
   }>;
+  export const Image: React.ComponentType<{
+    source: { uri: string };
+    style?: StyleProp<ViewStyle>;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+  }>;
+  export const Modal: React.ComponentType<{
+    transparent?: boolean;
+    visible?: boolean;
+    animationType?: 'none' | 'slide' | 'fade';
+    onRequestClose?: () => void;
+    children?: React.ReactNode;
+  }>;
+  export const InteractionManager: {
+    runAfterInteractions: (task: () => void) => { cancel: () => void };
+  };
   export const ScrollView: React.ComponentType<Record<string, unknown>>;
   export const FlatList: <ItemT>(props: {
     ref?: React.Ref<{ scrollToEnd: (opts: { animated: boolean }) => void }>;
@@ -31,6 +47,7 @@ declare module 'react-native' {
     keyExtractor?: (item: ItemT, index: number) => string;
     renderItem: (info: { item: ItemT; index: number }) => React.ReactElement | null;
     contentContainerStyle?: StyleProp<ViewStyle>;
+    onContentSizeChange?: (width: number, height: number) => void;
     ListEmptyComponent?: React.ReactElement | null;
     ListFooterComponent?: React.ReactElement | null;
   }) => React.ReactElement | null;

package/src/types.ts

@@ -48,11 +48,11 @@ export type NxtlinqAgentAssistantProps = Omit<NxtlinqAgentProviderProps, 'childr
   title?: string;
   placeholder?: string;
   presetMessages?: PresetMessage[];
-  /** Fetch history on mount when `pseudoId` is set. */
+  /** Fetch history on mount when identity is configured (`pseudoId`, and optionally `conversationId`). */
   loadHistoryOnMount?: boolean;
   /** Max messages to prefetch (default 50). */
   historyLast?: number;
-  /** Show voice mode controls (requires `webrtcModule`). */
+  /** Show voice mode controls. @default true */
   enableVoice?: boolean;
   /** Start in voice interaction mode. */
   startInVoiceMode?: boolean;
@@ -76,14 +76,9 @@ export type NxtlinqAgentAssistantProps = Omit<NxtlinqAgentProviderProps, 'childr
   voiceAutoGreet?: VoiceAutoGreetConfig | boolean;
   /**
    * iOS: bundled silent MP3 (`require('./assets/silent.mp3')`) to wake AVAudioSession.
-   * Strongly recommended — without it WebRTC/TTS may be silent on cold start.
+   * Strongly recommended — without it voice/TTS may be silent on cold start.
    */
   iosSilentAudioSource?: number | { uri: string };
-  /**
-   * Voice-mode assistant playback gain (WebRTC `_setVolume`, 0–10). Default 5 to
-   * match text TTS loudness (react-native-video volume 1). Default 10.
-   */
-  voiceRemoteAudioGain?: number;
   /** Text-mode TTS volume (react-native-video, 0–1). @default 1 */
   textTtsVolume?: number;
   theme?: Partial<AgentAssistantTheme>;

package/src/voice/float32ToPcm16.ts

@@ -0,0 +1,8 @@
+export function float32ToPcm16(input: Float32Array): Int16Array {
+  const out = new Int16Array(input.length);
+  for (let i = 0; i < input.length; i += 1) {
+    const sample = Math.max(-1, Math.min(1, input[i]!));
+    out[i] = sample < 0 ? sample * 0x8000 : sample * 0x7fff;
+  }
+  return out;
+}

package/src/voice/loadImageCropPicker.ts

@@ -0,0 +1,18 @@
+type PickerResult = { path?: string };
+type ImageCropPickerModule = {
+  openPicker: (options: Record<string, unknown>) => Promise<PickerResult>;
+  openCamera: (options: Record<string, unknown>) => Promise<PickerResult>;
+};
+
+export function loadImageCropPicker(): ImageCropPickerModule | null {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require('react-native-image-crop-picker') as ImageCropPickerModule;
+  } catch {
+    return null;
+  }
+}
+
+export function toFileUri(path: string): string {
+  return path.startsWith('file://') ? path : `file://${path}`;
+}

package/src/voice/sendVoiceImageAttachment.ts

@@ -0,0 +1,49 @@
+import type { Message } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+import { uriToVoiceImageAttachment } from '@bytexbyte/nxtlinq-ai-agent-react-native-development';
+
+type SendVoiceImageAttachmentParams = {
+  fileUri: string;
+  messages: Message[];
+  voiceSessionId: string | null;
+  setMessages: (messages: Message[]) => void;
+  sendVoiceUserInput: (options: {
+    attachments: Awaited<ReturnType<typeof uriToVoiceImageAttachment>>[];
+    clientMessageId?: string;
+  }) => void;
+};
+
+export async function sendVoiceImageAttachment({
+  fileUri,
+  messages,
+  voiceSessionId,
+  setMessages,
+  sendVoiceUserInput,
+}: SendVoiceImageAttachmentParams): Promise<void> {
+  const clientMessageId = `user_img_${Date.now()}`;
+  const previewAttachment = {
+    type: 'image' as const,
+    url: fileUri,
+    name: 'image.jpg',
+    mimeType: 'image/jpeg',
+  };
+
+  setMessages([
+    ...messages,
+    {
+      id: clientMessageId,
+      role: 'user',
+      content: '',
+      timestamp: new Date().toISOString(),
+      attachments: [previewAttachment],
+      metadata: voiceSessionId ? { voiceRealtime: true, voiceSessionId } : undefined,
+    },
+  ]);
+
+  try {
+    const attachment = await uriToVoiceImageAttachment(fileUri, 'voice-image.jpg');
+    sendVoiceUserInput({ attachments: [attachment], clientMessageId });
+  } catch (error) {
+    setMessages(messages.filter((message) => message.id !== clientMessageId));
+    throw error;
+  }
+}

package/src/voice/useVoiceImagePicker.ts

@@ -0,0 +1,54 @@
+import { useCallback, useState } from 'react';
+import { InteractionManager } from 'react-native';
+import { loadImageCropPicker, toFileUri } from './loadImageCropPicker';
+import { VOICE_IMAGE_PICKER_OPTIONS } from './voiceImagePickerOptions';
+
+type UseVoiceImagePickerResult = {
+  modalVisible: boolean;
+  openModal: () => void;
+  closeModal: () => void;
+  pickFromLibrary: () => Promise<void>;
+  takePhoto: () => Promise<void>;
+  pickerMissing: boolean;
+};
+
+export function useVoiceImagePicker(
+  onPicked?: (fileUri: string) => void,
+): UseVoiceImagePickerResult {
+  const [modalVisible, setModalVisible] = useState(false);
+  const pickerMissing = loadImageCropPicker() == null;
+
+  const runPick = useCallback(
+    async (mode: 'library' | 'camera') => {
+      const picker = loadImageCropPicker();
+      if (!picker) return;
+      try {
+        const result =
+          mode === 'library'
+            ? await picker.openPicker({ ...VOICE_IMAGE_PICKER_OPTIONS })
+            : await picker.openCamera({ ...VOICE_IMAGE_PICKER_OPTIONS });
+        if (!result?.path) {
+          setModalVisible(false);
+          return;
+        }
+        const uri = toFileUri(result.path);
+        setModalVisible(false);
+        InteractionManager.runAfterInteractions(() => {
+          onPicked?.(uri);
+        });
+      } catch {
+        setModalVisible(false);
+      }
+    },
+    [onPicked],
+  );
+
+  return {
+    modalVisible,
+    openModal: useCallback(() => setModalVisible(true), []),
+    closeModal: useCallback(() => setModalVisible(false), []),
+    pickFromLibrary: useCallback(() => runPick('library'), [runPick]),
+    takePhoto: useCallback(() => runPick('camera'), [runPick]),
+    pickerMissing,
+  };
+}