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

package/dist/voice/wsPcmRecorder.js

@@ -0,0 +1,145 @@
+import { AudioManager, AudioRecorder, } from 'react-native-audio-api';
+import { float32ToPcm16 } from './float32ToPcm16';
+import { WS_REALTIME_SAMPLE_RATE } from './wsRealtimeConstants';
+/**
+ * Berify {@link WavRecorder}-aligned lifecycle: reuse one native AudioRecorder,
+ * configure playAndRecord on start, reset to playback on stop.
+ */
+export class WsPcmRecorder {
+    constructor() {
+        this.recorder = null;
+        this.recording = false;
+        this.audioReadyAttached = false;
+        this.session = null;
+    }
+    async initialize(options) {
+        if (options?.force && this.recorder) {
+            this.disposeRecorderInternal();
+        }
+        if (this.recorder)
+            return;
+        await AudioManager.requestRecordingPermissions();
+        this.recorder = new AudioRecorder({
+            sampleRate: WS_REALTIME_SAMPLE_RATE,
+            bufferLengthInSamples: WS_REALTIME_SAMPLE_RATE,
+        });
+    }
+    bindSession(session) {
+        this.session = session;
+    }
+    setOnRms(handler) {
+        this.onRms = handler;
+    }
+    disposeRecorderInternal() {
+        if (!this.recorder)
+            return;
+        try {
+            this.recorder.stop();
+        }
+        catch {
+            /* noop */
+        }
+        this.recorder = null;
+        this.audioReadyAttached = false;
+        this.recording = false;
+        this.resetSession();
+    }
+    async start() {
+        await this.initialize();
+        const recorder = this.recorder;
+        if (!recorder)
+            return;
+        if (this.recording) {
+            this.recording = false;
+            try {
+                recorder.stop();
+            }
+            catch {
+                /* noop */
+            }
+        }
+        this.configureSession();
+        if (!this.audioReadyAttached) {
+            recorder.onAudioReady(({ buffer }) => {
+                this.handleAudioReady(buffer);
+            });
+            this.audioReadyAttached = true;
+        }
+        try {
+            recorder.start();
+            this.recording = true;
+        }
+        catch (err) {
+            this.recording = false;
+            console.error('[WsPcmRecorder] start failed', err);
+            throw err;
+        }
+    }
+    stop() {
+        if (!this.recorder || !this.recording)
+            return;
+        try {
+            this.recorder.stop();
+        }
+        catch (err) {
+            console.warn('[WsPcmRecorder] stop', err);
+        }
+        this.recording = false;
+        this.resetSession();
+    }
+    cleanup() {
+        if (this.recorder) {
+            try {
+                if (this.recording) {
+                    this.stop();
+                }
+                else {
+                    this.recorder.stop();
+                }
+            }
+            catch {
+                /* noop */
+            }
+        }
+        this.recorder = null;
+        this.audioReadyAttached = false;
+        this.recording = false;
+        this.session = null;
+        this.onRms = undefined;
+    }
+    get isRecording() {
+        return this.recording;
+    }
+    configureSession() {
+        AudioManager.setAudioSessionOptions({
+            iosCategory: 'playAndRecord',
+            iosMode: 'voiceChat',
+            iosOptions: ['defaultToSpeaker', 'allowBluetoothA2DP'],
+            iosAllowHaptics: true,
+        });
+    }
+    resetSession() {
+        try {
+            AudioManager.setAudioSessionOptions({
+                iosCategory: 'playback',
+                iosMode: 'default',
+            });
+        }
+        catch {
+            /* noop */
+        }
+    }
+    handleAudioReady(buffer) {
+        const channel = buffer.getChannelData(0);
+        let sum = 0;
+        for (let i = 0; i < channel.length; i += 1) {
+            const sample = channel[i];
+            sum += sample * sample;
+        }
+        const rms = channel.length > 0 ? Math.sqrt(sum / channel.length) : 0;
+        this.onRms?.(rms);
+        if (!this.recording || !this.session?.appendInputAudio)
+            return;
+        this.session.appendInputAudio(float32ToPcm16(channel));
+    }
+}

package/dist/voice/wsRealtimeConstants.d.ts

@@ -0,0 +1,2 @@
+export declare const WS_REALTIME_SAMPLE_RATE = 24000;
+//# sourceMappingURL=wsRealtimeConstants.d.ts.map

package/dist/voice/wsRealtimeConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wsRealtimeConstants.d.ts","sourceRoot":"","sources":["../../src/voice/wsRealtimeConstants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,QAAQ,CAAC"}

package/dist/voice/wsRealtimeConstants.js

@@ -0,0 +1 @@
+export const WS_REALTIME_SAMPLE_RATE = 24000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytexbyte/nxtlinq-ai-agent-ui-react-native-development",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Official React Native UI for nxtlinq AI Agent — drop-in assistant widget",
   "main": "dist/index.js",
   "react-native": "src/index.ts",
@@ -37,20 +37,22 @@
     "@react-native-async-storage/async-storage": ">=1.17.0",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
+    "react-native-audio-api": ">=0.10.3",
+    "react-native-image-crop-picker": ">=0.40.0",
     "react-native-vector-icons": ">=10.0.0",
     "react-native-video": ">=6.0.0"
   },
   "peerDependenciesMeta": {
-    "react-native-video": {
+    "react-native-image-crop-picker": {
       "optional": true
     },
-    "react-native-webrtc": {
+    "react-native-video": {
       "optional": true
     }
   },
   "dependencies": {
-    "@bytexbyte/nxtlinq-ai-agent-core-development": "^0.2.0",
-    "@bytexbyte/nxtlinq-ai-agent-react-native-development": "^0.2.0"
+    "@bytexbyte/nxtlinq-ai-agent-core-development": "^0.3.4",
+    "@bytexbyte/nxtlinq-ai-agent-react-native-development": "^0.3.4"
   },
   "devDependencies": {
     "@bytexbyte/nxtlinq-ai-agent-core-development": "workspace:^",
@@ -58,6 +60,7 @@
     "@types/react": "^18.2.64",
     "@types/react-native-vector-icons": "^6.4.18",
     "react": "^18.2.0",
+    "react-native-audio-api": "^0.10.3",
     "react-native-vector-icons": "^10.2.0",
     "typescript": "^5.4.2"
   }

package/src/NxtlinqAgentAssistant.tsx

@@ -9,18 +9,18 @@ import type { NxtlinqAgentAssistantProps } from './types';
  * @example
  * ```tsx
  * import AsyncStorage from '@react-native-async-storage/async-storage';
- * import { RTCPeerConnection, mediaDevices } from 'react-native-webrtc';
  * import { NxtlinqAgentAssistant } from '@bytexbyte/nxtlinq-ai-agent-ui-react-native-development';
  *
  * export default function Screen() {
  *   return (
  *     <NxtlinqAgentAssistant
  *       storage={AsyncStorage}
- *       webrtcModule={{ RTCPeerConnection, mediaDevices }}
  *       serviceId="..."
  *       apiKey="..."
  *       apiSecret="..."
- *       pseudoId={chatId}
+ *       environment="staging"
+ *       pseudoId={userId}
+ *       conversationId={roomId}
  *       enableVoice
  *       loadHistoryOnMount
  *     />
@@ -43,7 +43,6 @@ export function NxtlinqAgentAssistant({
   voiceDemoProductImageUrl,
   voiceAutoGreet,
   iosSilentAudioSource,
-  voiceRemoteAudioGain,
   textTtsVolume,
   theme,
   style,
@@ -55,20 +54,14 @@ export function NxtlinqAgentAssistant({
   storage,
   fetchImpl,
   getTimezone,
-  webrtcModule,
-  webrtc,
   resetOnIdentityChange,
   ...agentConfig
 }: NxtlinqAgentAssistantProps): React.ReactElement {
-  const webrtcEnabled = Boolean(webrtcModule || webrtc);
-
   return (
     <NxtlinqAgentProvider
       storage={storage}
       fetchImpl={fetchImpl}
       getTimezone={getTimezone}
-      webrtcModule={webrtcModule}
-      webrtc={webrtc}
       resetOnIdentityChange={resetOnIdentityChange}
       onMessage={onMessage}
       onError={onError}
@@ -90,12 +83,10 @@ export function NxtlinqAgentAssistant({
         voiceDemoProductImageUrl={voiceDemoProductImageUrl}
         voiceAutoGreet={voiceAutoGreet}
         iosSilentAudioSource={iosSilentAudioSource}
-        voiceRemoteAudioGain={voiceRemoteAudioGain}
         textTtsVolume={textTtsVolume}
         theme={theme}
         style={style}
         headerStyle={headerStyle}
-        webrtcEnabled={webrtcEnabled}
       />
       {children}
     </NxtlinqAgentProvider>

package/src/components/AgentAssistantShell.tsx

@@ -7,11 +7,8 @@ import {
 import type { NxtlinqAgentAssistantProps } from '../types';
 import { AgentComposer } from './AgentComposer';
 import { AgentMessageList } from './AgentMessageList';
-import { AgentRemoteAudio } from './AgentRemoteAudio';
 import { AgentVoiceBar } from './AgentVoiceBar';
 import { PresetMessageChips } from './PresetMessageChips';
-import { VoiceGreetTrigger } from './VoiceGreetTrigger';
-import { VoiceImageInput } from './VoiceImageInput';
 import { VoiceWaveform } from './VoiceWaveform';
 import { AudioSessionWaker } from '../voice/AudioSessionWaker';
 import { VoiceAutoGreetBinder } from '../voice/VoiceAutoGreetBinder';
@@ -35,11 +32,8 @@ export type AgentAssistantShellProps = Pick<
   | 'voiceDemoProductImageUrl'
   | 'voiceAutoGreet'
   | 'iosSilentAudioSource'
-  | 'voiceRemoteAudioGain'
   | 'textTtsVolume'
-> & {
-  webrtcEnabled: boolean;
-};
+>;
 
 function AgentAssistantInner({
   title,
@@ -48,13 +42,11 @@ function AgentAssistantInner({
   loadHistoryOnMount,
   historyLast,
   startInVoiceMode,
-  startWithMicMuted,
   showVoiceWaveform,
   showVoiceImageInput,
   voiceDemoProductImageUrl,
   voiceAutoGreet,
   iosSilentAudioSource,
-  voiceRemoteAudioGain,
 }: AgentAssistantShellProps): React.ReactElement {
   const {
     theme,
@@ -121,14 +113,7 @@ function AgentAssistantInner({
       <AgentMessageList />
       {showVoiceWaveform !== false ? <VoiceWaveform /> : null}
       <AgentVoiceBar />
-      {showVoiceImageInput && autoGreetConfig ? (
-        <VoiceGreetTrigger config={autoGreetConfig} />
-      ) : null}
-      {showVoiceImageInput ? (
-        <VoiceImageInput demoImageUrl={voiceDemoProductImageUrl} />
-      ) : null}
       <AgentComposer />
-      <AgentRemoteAudio remoteAudioGain={voiceRemoteAudioGain} />
       {autoGreetConfig ? (
         <VoiceAutoGreetBinder config={autoGreetConfig} historyReady={historyReady} />
       ) : null}
@@ -148,8 +133,7 @@ export function AgentAssistantShell(props: AgentAssistantShellProps): React.Reac
         startWithMicMuted: props.startWithMicMuted,
         holdMicDuringAssistant: props.holdMicDuringAssistant,
         textTtsVolume: props.textTtsVolume,
-        voiceRemoteAudioGain: props.voiceRemoteAudioGain,
-        webrtcEnabled: props.webrtcEnabled,
+        showVoiceImageInput: props.showVoiceImageInput,
       }}
     >
       <AgentAssistantInner {...props} />

package/src/components/AgentMessageList.tsx

@@ -1,5 +1,5 @@
 import type { Message } from '@bytexbyte/nxtlinq-ai-agent-core-development';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import {
   ActivityIndicator,
   FlatList,
@@ -9,7 +9,9 @@ import {
   View,
 } from 'react-native';
 import { useAgentAssistant } from '../context/AgentAssistantContext';
+import { MessageAttachmentPreview } from './MessageAttachmentPreview';
 import { SpeakerIcon } from './VoiceIcons';
+import { useMessageListAutoScroll } from './useMessageListAutoScroll';
 
 function MessageBubble({ message }: { message: Message }): React.ReactElement {
   const {
@@ -77,14 +79,19 @@ function MessageBubble({ message }: { message: Message }): React.ReactElement {
           },
         ]}
       >
-        <Text
-          style={{
-            color: isUser ? theme.colors.userText : theme.colors.assistantText,
-            fontSize: theme.typography.bodySize,
-          }}
-        >
-          {displayText || ' '}
-        </Text>
+        {message.attachments?.length ? (
+          <MessageAttachmentPreview attachments={message.attachments} theme={theme} />
+        ) : null}
+        {displayText?.trim() ? (
+          <Text
+            style={{
+              color: isUser ? theme.colors.userText : theme.colors.assistantText,
+              fontSize: theme.typography.bodySize,
+            }}
+          >
+            {displayText}
+          </Text>
+        ) : null}
         {message.isStreaming && message.streamingStatus ? (
           <Text
             style={{
@@ -142,12 +149,7 @@ function MessageBubble({ message }: { message: Message }): React.ReactElement {
 export function AgentMessageList(): React.ReactElement {
   const { messages, isLoading, theme } = useAgentAssistant();
   const listRef = useRef<{ scrollToEnd: (opts: { animated: boolean }) => void } | null>(null);
-
-  useEffect(() => {
-    if (messages.length > 0) {
-      listRef.current?.scrollToEnd({ animated: true });
-    }
-  }, [messages.length, messages[messages.length - 1]?.content]);
+  const { onContentSizeChange } = useMessageListAutoScroll(messages, listRef);
 
   return (
     <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
@@ -156,6 +158,7 @@ export function AgentMessageList(): React.ReactElement {
         data={messages}
         keyExtractor={(item: Message) => item.id}
         renderItem={({ item }: { item: Message }) => <MessageBubble message={item} />}
+        onContentSizeChange={onContentSizeChange}
         contentContainerStyle={{ padding: theme.spacing.md, paddingBottom: theme.spacing.lg }}
         ListEmptyComponent={
           <Text style={[styles.empty, { color: theme.colors.mutedText }]}>

package/src/components/AgentVoiceBar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import {
   ActivityIndicator,
   Pressable,
@@ -10,8 +10,8 @@ import {
   useAgentAssistant,
   voiceStatusLabel,
 } from '../context/AgentAssistantContext';
-import { SPEAKER_ACTIVE_STATUSES } from '../voice/voiceMicConstants';
-import { MicIcon, MicOffIcon, SpeakerIcon, StopIcon } from './VoiceIcons';
+import { MicIcon, MicOffIcon } from './VoiceIcons';
+import { VoiceAttachmentButton } from './VoiceAttachmentButton';
 
 function statusDotColor(
   status: ReturnType<typeof useAgentAssistant>['voiceStatus'],
@@ -38,29 +38,13 @@ export function AgentVoiceBar(): React.ReactElement | null {
     isVoiceConnecting,
     isVoiceChannelReady,
     stopVoice,
-    interrupt,
     isVoiceAvailable,
     isMicMuted,
     isMicHeldForAssistant,
     toggleVoiceMicMute,
+    showVoiceImageInput,
   } = useAgentAssistant();
 
-  const [speakerPulseOpacity, setSpeakerPulseOpacity] = useState(1);
-  const isSpeakerActive = SPEAKER_ACTIVE_STATUSES.has(voiceStatus);
-
-  useEffect(() => {
-    if (!isSpeakerActive) {
-      setSpeakerPulseOpacity(1);
-      return;
-    }
-    let high = true;
-    const id = setInterval(() => {
-      setSpeakerPulseOpacity(high ? 0.35 : 1);
-      high = !high;
-    }, 600);
-    return () => clearInterval(id);
-  }, [isSpeakerActive]);
-
   const returnToTextMode = useCallback(() => {
     void stopVoice();
   }, [stopVoice]);
@@ -79,17 +63,17 @@ export function AgentVoiceBar(): React.ReactElement | null {
     ? 'Tap Back to text mode below to cancel'
     : awaitingChannel
       ? 'Waiting for voice channel…'
-    : isMicHeldForAssistant
-      ? 'Mic paused while assistant responds (use Interrupt to speak)'
-      : isMicMuted
-        ? 'Mic is off — tap the mic when ready to speak'
-        : voiceStatus === 'listening'
-          ? 'Start speaking'
-          : voiceStatus === 'speaking'
-            ? 'Assistant is speaking…'
-            : voiceStatus === 'thinking'
-              ? 'Thinking…'
-              : '';
+      : isMicHeldForAssistant
+        ? 'Assistant is responding — tap mic to interrupt and speak'
+        : isMicMuted
+          ? 'Mic is off — tap the mic when ready to speak'
+          : voiceStatus === 'listening'
+            ? 'Start speaking'
+            : voiceStatus === 'speaking'
+              ? 'Assistant is speaking…'
+              : voiceStatus === 'thinking'
+                ? 'Thinking…'
+                : '';
 
   return (
     <View
@@ -150,42 +134,24 @@ export function AgentVoiceBar(): React.ReactElement | null {
           ) : null}
         </View>
 
-        <View style={styles.iconRow}>
-          <View style={{ opacity: isSpeakerActive ? speakerPulseOpacity : 0.35 }}>
-            <SpeakerIcon size={24} color={theme.colors.voiceSpeaking} />
-          </View>
-
-          <Pressable
-            onPress={toggleVoiceMicMute}
-            disabled={showConnecting || awaitingChannel || isMicHeldForAssistant}
-            style={({ pressed }) => [
-              styles.iconButton,
-              {
-                opacity:
-                  pressed || showConnecting || awaitingChannel || isMicHeldForAssistant
-                    ? 0.45
-                    : 1,
-              },
-            ]}
-          >
-            {isMicMuted ? (
-              <MicOffIcon size={24} color="#ef4444" />
-            ) : (
-              <MicIcon size={24} color={theme.colors.assistantText} />
-            )}
-          </Pressable>
+        {showVoiceImageInput ? <VoiceAttachmentButton /> : null}
 
-          <Pressable
-            onPress={() => interrupt()}
-            disabled={showConnecting || awaitingChannel}
-            style={({ pressed }) => [
-              styles.iconButton,
-              { opacity: pressed || showConnecting || awaitingChannel ? 0.45 : 1 },
-            ]}
-          >
-            <StopIcon size={24} color={theme.colors.assistantText} />
-          </Pressable>
-        </View>
+        <Pressable
+          onPress={toggleVoiceMicMute}
+          disabled={showConnecting || awaitingChannel}
+          style={({ pressed }) => [
+            styles.micButton,
+            {
+              opacity: pressed || showConnecting || awaitingChannel ? 0.45 : 1,
+            },
+          ]}
+        >
+          {isMicMuted ? (
+            <MicOffIcon size={28} color="#ef4444" />
+          ) : (
+            <MicIcon size={28} color={theme.colors.assistantText} />
+          )}
+        </Pressable>
       </View>
 
       <Pressable onPress={returnToTextMode} style={styles.textLink}>
@@ -223,10 +189,9 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch',
   },
   dot: { width: 8, height: 8, borderRadius: 4 },
-  iconRow: { flexDirection: 'row', alignItems: 'center', gap: 2 },
-  iconButton: {
-    padding: 8,
-    borderRadius: 8,
+  micButton: {
+    padding: 10,
+    borderRadius: 12,
   },
   textLink: { marginTop: 10, alignSelf: 'center' },
 });

package/src/components/MessageAttachmentPreview.tsx

@@ -0,0 +1,43 @@
+import type { Attachment } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+import React from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import type { AgentAssistantTheme } from '../types';
+
+type MessageAttachmentPreviewProps = {
+  attachments: Attachment[];
+  theme: AgentAssistantTheme;
+};
+
+export function MessageAttachmentPreview({
+  attachments,
+  theme,
+}: MessageAttachmentPreviewProps): React.ReactElement | null {
+  const images = attachments.filter((item) => item.type === 'image');
+  if (!images.length) return null;
+
+  return (
+    <View style={styles.wrap}>
+      {images.map((item, index) => (
+        <Image
+          key={`${item.name}-${index}`}
+          source={{ uri: item.url }}
+          style={[
+            styles.image,
+            { borderRadius: theme.radius.bubble, backgroundColor: theme.colors.surface },
+          ]}
+          resizeMode="cover"
+        />
+      ))}
+      {attachments.some((item) => item.type === 'file') ? (
+        <Text style={{ color: theme.colors.mutedText, fontSize: theme.typography.captionSize }}>
+          {attachments.filter((item) => item.type === 'file').map((item) => item.name).join(', ')}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { marginBottom: 6, gap: 6 },
+  image: { width: 160, height: 160 },
+});

package/src/components/VoiceAddMediaModal.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import type { AgentAssistantTheme } from '../types';
+
+type VoiceAddMediaModalProps = {
+  visible: boolean;
+  theme: AgentAssistantTheme;
+  onClose: () => void;
+  onPickPhotos: () => void;
+  onTakePhoto: () => void;
+};
+
+export function VoiceAddMediaModal({
+  visible,
+  theme,
+  onClose,
+  onPickPhotos,
+  onTakePhoto,
+}: VoiceAddMediaModalProps): React.ReactElement | null {
+  if (!visible) return null;
+
+  return (
+    <Modal transparent visible={visible} animationType="fade" onRequestClose={onClose}>
+      <Pressable style={styles.overlay} onPress={onClose}>
+        <Pressable
+          style={[
+            styles.modal,
+            { backgroundColor: theme.colors.assistantBubble, borderRadius: theme.radius.panel },
+          ]}
+          onPress={() => undefined}
+        >
+          <Pressable style={styles.option} onPress={onPickPhotos}>
+            <Text style={{ color: theme.colors.assistantText, fontSize: theme.typography.bodySize }}>
+              Photos
+            </Text>
+          </Pressable>
+          <View style={[styles.separator, { backgroundColor: theme.colors.border }]} />
+          <Pressable style={styles.option} onPress={onTakePhoto}>
+            <Text style={{ color: theme.colors.assistantText, fontSize: theme.typography.bodySize }}>
+              Camera
+            </Text>
+          </Pressable>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.45)',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-start',
+    paddingBottom: 120,
+    paddingLeft: 16,
+  },
+  modal: {
+    width: 160,
+    paddingVertical: 4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  option: { paddingVertical: 12, paddingHorizontal: 16 },
+  separator: { height: StyleSheet.hairlineWidth, marginHorizontal: 16 },
+});