@bytexbyte/nxtlinq-ai-agent-ui-react-native-development 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/NxtlinqAgentAssistant.d.ts +4 -4
- package/dist/NxtlinqAgentAssistant.d.ts.map +1 -1
- package/dist/NxtlinqAgentAssistant.js +5 -6
- package/dist/components/AgentAssistantShell.d.ts +1 -3
- package/dist/components/AgentAssistantShell.d.ts.map +1 -1
- package/dist/components/AgentAssistantShell.js +3 -7
- package/dist/components/AgentMessageList.d.ts.map +1 -1
- package/dist/components/AgentMessageList.js +7 -9
- package/dist/components/AgentVoiceBar.d.ts.map +1 -1
- package/dist/components/AgentVoiceBar.js +14 -34
- package/dist/components/MessageAttachmentPreview.d.ts +10 -0
- package/dist/components/MessageAttachmentPreview.d.ts.map +1 -0
- package/dist/components/MessageAttachmentPreview.js +15 -0
- package/dist/components/VoiceAddMediaModal.d.ts +12 -0
- package/dist/components/VoiceAddMediaModal.d.ts.map +1 -0
- package/dist/components/VoiceAddMediaModal.js +31 -0
- package/dist/components/VoiceAttachmentButton.d.ts +3 -0
- package/dist/components/VoiceAttachmentButton.d.ts.map +1 -0
- package/dist/components/VoiceAttachmentButton.js +58 -0
- package/dist/components/VoiceIcons.d.ts +1 -0
- package/dist/components/VoiceIcons.d.ts.map +1 -1
- package/dist/components/VoiceIcons.js +3 -0
- package/dist/components/VoiceWaveform.d.ts +2 -2
- package/dist/components/VoiceWaveform.d.ts.map +1 -1
- package/dist/components/VoiceWaveform.js +16 -5
- package/dist/components/useMessageListAutoScroll.d.ts +12 -0
- package/dist/components/useMessageListAutoScroll.d.ts.map +1 -0
- package/dist/components/useMessageListAutoScroll.js +42 -0
- package/dist/context/AgentAssistantContext.d.ts +3 -3
- package/dist/context/AgentAssistantContext.d.ts.map +1 -1
- package/dist/context/AgentAssistantContext.js +76 -29
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/types.d.ts +3 -8
- package/dist/types.d.ts.map +1 -1
- package/dist/voice/float32ToPcm16.d.ts +2 -0
- package/dist/voice/float32ToPcm16.d.ts.map +1 -0
- package/dist/voice/float32ToPcm16.js +8 -0
- package/dist/voice/loadImageCropPicker.d.ts +11 -0
- package/dist/voice/loadImageCropPicker.d.ts.map +1 -0
- package/dist/voice/loadImageCropPicker.js +12 -0
- package/dist/voice/sendVoiceImageAttachment.d.ts +15 -0
- package/dist/voice/sendVoiceImageAttachment.d.ts.map +1 -0
- package/dist/voice/sendVoiceImageAttachment.js +29 -0
- package/dist/voice/useVoiceImagePicker.d.ts +11 -0
- package/dist/voice/useVoiceImagePicker.d.ts.map +1 -0
- package/dist/voice/useVoiceImagePicker.js +38 -0
- package/dist/voice/useVoiceMicState.d.ts +4 -0
- package/dist/voice/useVoiceMicState.d.ts.map +1 -1
- package/dist/voice/useVoiceMicState.js +32 -3
- package/dist/voice/useVoiceSilenceCommit.d.ts +10 -0
- package/dist/voice/useVoiceSilenceCommit.d.ts.map +1 -0
- package/dist/voice/useVoiceSilenceCommit.js +76 -0
- package/dist/voice/useVoiceTranscriptMessages.d.ts +16 -0
- package/dist/voice/useVoiceTranscriptMessages.d.ts.map +1 -0
- package/dist/voice/useVoiceTranscriptMessages.js +133 -0
- package/dist/voice/useWsRealtimeAudio.d.ts +17 -0
- package/dist/voice/useWsRealtimeAudio.d.ts.map +1 -0
- package/dist/voice/useWsRealtimeAudio.js +165 -0
- package/dist/voice/voiceImagePickerOptions.d.ts +11 -0
- package/dist/voice/voiceImagePickerOptions.d.ts.map +1 -0
- package/dist/voice/voiceImagePickerOptions.js +10 -0
- package/dist/voice/voiceSilenceConstants.d.ts +8 -0
- package/dist/voice/voiceSilenceConstants.d.ts.map +1 -0
- package/dist/voice/voiceSilenceConstants.js +7 -0
- package/dist/voice/wsPcmPlayer.d.ts +24 -0
- package/dist/voice/wsPcmPlayer.d.ts.map +1 -0
- package/dist/voice/wsPcmPlayer.js +146 -0
- package/dist/voice/wsPcmRecorder.d.ts +26 -0
- package/dist/voice/wsPcmRecorder.d.ts.map +1 -0
- package/dist/voice/wsPcmRecorder.js +145 -0
- package/dist/voice/wsRealtimeConstants.d.ts +2 -0
- package/dist/voice/wsRealtimeConstants.d.ts.map +1 -0
- package/dist/voice/wsRealtimeConstants.js +1 -0
- package/package.json +8 -5
- package/src/NxtlinqAgentAssistant.tsx +3 -12
- package/src/components/AgentAssistantShell.tsx +2 -18
- package/src/components/AgentMessageList.tsx +18 -15
- package/src/components/AgentVoiceBar.tsx +35 -70
- package/src/components/MessageAttachmentPreview.tsx +43 -0
- package/src/components/VoiceAddMediaModal.tsx +69 -0
- package/src/components/VoiceAttachmentButton.tsx +100 -0
- package/src/components/VoiceIcons.tsx +4 -0
- package/src/components/VoiceWaveform.tsx +15 -5
- package/src/components/useMessageListAutoScroll.ts +57 -0
- package/src/context/AgentAssistantContext.tsx +100 -32
- package/src/index.ts +2 -2
- package/src/react-native.d.ts +18 -1
- package/src/types.ts +3 -8
- package/src/voice/float32ToPcm16.ts +8 -0
- package/src/voice/loadImageCropPicker.ts +18 -0
- package/src/voice/sendVoiceImageAttachment.ts +49 -0
- package/src/voice/useVoiceImagePicker.ts +54 -0
- package/src/voice/useVoiceMicState.ts +38 -3
- package/src/voice/useVoiceSilenceCommit.ts +94 -0
- package/src/voice/useVoiceTranscriptMessages.ts +176 -0
- package/src/voice/useWsRealtimeAudio.ts +200 -0
- package/src/voice/voiceImagePickerOptions.ts +10 -0
- package/src/voice/voiceSilenceConstants.ts +10 -0
- package/src/voice/wsPcmPlayer.ts +166 -0
- package/src/voice/wsPcmRecorder.ts +152 -0
- package/src/voice/wsRealtimeConstants.ts +1 -0
- package/src/components/AgentRemoteAudio.tsx +0 -105
|
@@ -6,18 +6,18 @@ import type { NxtlinqAgentAssistantProps } from './types';
|
|
|
6
6
|
* @example
|
|
7
7
|
* ```tsx
|
|
8
8
|
* import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
9
|
-
* import { RTCPeerConnection, mediaDevices } from 'react-native-webrtc';
|
|
10
9
|
* import { NxtlinqAgentAssistant } from '@bytexbyte/nxtlinq-ai-agent-ui-react-native-development';
|
|
11
10
|
*
|
|
12
11
|
* export default function Screen() {
|
|
13
12
|
* return (
|
|
14
13
|
* <NxtlinqAgentAssistant
|
|
15
14
|
* storage={AsyncStorage}
|
|
16
|
-
* webrtcModule={{ RTCPeerConnection, mediaDevices }}
|
|
17
15
|
* serviceId="..."
|
|
18
16
|
* apiKey="..."
|
|
19
17
|
* apiSecret="..."
|
|
20
|
-
*
|
|
18
|
+
* environment="staging"
|
|
19
|
+
* pseudoId={userId}
|
|
20
|
+
* conversationId={roomId}
|
|
21
21
|
* enableVoice
|
|
22
22
|
* loadHistoryOnMount
|
|
23
23
|
* />
|
|
@@ -25,5 +25,5 @@ import type { NxtlinqAgentAssistantProps } from './types';
|
|
|
25
25
|
* }
|
|
26
26
|
* ```
|
|
27
27
|
*/
|
|
28
|
-
export declare function NxtlinqAgentAssistant({ title, placeholder, presetMessages, loadHistoryOnMount, historyLast, enableVoice, startInVoiceMode, startWithMicMuted, holdMicDuringAssistant, showVoiceWaveform, showVoiceImageInput, voiceDemoProductImageUrl, voiceAutoGreet, iosSilentAudioSource,
|
|
28
|
+
export declare function NxtlinqAgentAssistant({ title, placeholder, presetMessages, loadHistoryOnMount, historyLast, enableVoice, startInVoiceMode, startWithMicMuted, holdMicDuringAssistant, showVoiceWaveform, showVoiceImageInput, voiceDemoProductImageUrl, voiceAutoGreet, iosSilentAudioSource, textTtsVolume, theme, style, headerStyle, onMessage, onError, onToolUse, children, storage, fetchImpl, getTimezone, resetOnIdentityChange, ...agentConfig }: NxtlinqAgentAssistantProps): React.ReactElement;
|
|
29
29
|
//# sourceMappingURL=NxtlinqAgentAssistant.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NxtlinqAgentAssistant.d.ts","sourceRoot":"","sources":["../src/NxtlinqAgentAssistant.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,WAAW,EACX,cAAc,EACd,kBAA0B,EAC1B,WAAW,EACX,WAAkB,EAClB,gBAAwB,EACxB,iBAAwB,EACxB,sBAA6B,EAC7B,iBAAwB,EACxB,mBAA2B,EAC3B,wBAAwB,EACxB,cAAc,EACd,oBAAoB,EACpB,
|
|
1
|
+
{"version":3,"file":"NxtlinqAgentAssistant.d.ts","sourceRoot":"","sources":["../src/NxtlinqAgentAssistant.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,WAAW,EACX,cAAc,EACd,kBAA0B,EAC1B,WAAW,EACX,WAAkB,EAClB,gBAAwB,EACxB,iBAAwB,EACxB,sBAA6B,EAC7B,iBAAwB,EACxB,mBAA2B,EAC3B,wBAAwB,EACxB,cAAc,EACd,oBAAoB,EACpB,aAAa,EACb,KAAK,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,OAAO,EACP,SAAS,EACT,WAAW,EACX,qBAAqB,EACrB,GAAG,WAAW,EACf,EAAE,0BAA0B,GAAG,KAAK,CAAC,YAAY,CAmCjD"}
|
|
@@ -7,18 +7,18 @@ import { AgentAssistantShell } from './components/AgentAssistantShell';
|
|
|
7
7
|
* @example
|
|
8
8
|
* ```tsx
|
|
9
9
|
* import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
10
|
-
* import { RTCPeerConnection, mediaDevices } from 'react-native-webrtc';
|
|
11
10
|
* import { NxtlinqAgentAssistant } from '@bytexbyte/nxtlinq-ai-agent-ui-react-native-development';
|
|
12
11
|
*
|
|
13
12
|
* export default function Screen() {
|
|
14
13
|
* return (
|
|
15
14
|
* <NxtlinqAgentAssistant
|
|
16
15
|
* storage={AsyncStorage}
|
|
17
|
-
* webrtcModule={{ RTCPeerConnection, mediaDevices }}
|
|
18
16
|
* serviceId="..."
|
|
19
17
|
* apiKey="..."
|
|
20
18
|
* apiSecret="..."
|
|
21
|
-
*
|
|
19
|
+
* environment="staging"
|
|
20
|
+
* pseudoId={userId}
|
|
21
|
+
* conversationId={roomId}
|
|
22
22
|
* enableVoice
|
|
23
23
|
* loadHistoryOnMount
|
|
24
24
|
* />
|
|
@@ -26,7 +26,6 @@ import { AgentAssistantShell } from './components/AgentAssistantShell';
|
|
|
26
26
|
* }
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
|
-
export function NxtlinqAgentAssistant({ title, placeholder, presetMessages, loadHistoryOnMount = false, historyLast, enableVoice = true, startInVoiceMode = false, startWithMicMuted = true, holdMicDuringAssistant = true, showVoiceWaveform = true, showVoiceImageInput = false, voiceDemoProductImageUrl, voiceAutoGreet, iosSilentAudioSource,
|
|
30
|
-
|
|
31
|
-
return (_jsxs(NxtlinqAgentProvider, { storage: storage, fetchImpl: fetchImpl, getTimezone: getTimezone, webrtcModule: webrtcModule, webrtc: webrtc, resetOnIdentityChange: resetOnIdentityChange, onMessage: onMessage, onError: onError, onToolUse: onToolUse, ...agentConfig, children: [_jsx(AgentAssistantShell, { title: title, placeholder: placeholder, presetMessages: presetMessages, loadHistoryOnMount: loadHistoryOnMount, historyLast: historyLast, enableVoice: enableVoice, startInVoiceMode: startInVoiceMode, startWithMicMuted: startWithMicMuted, holdMicDuringAssistant: holdMicDuringAssistant, showVoiceWaveform: showVoiceWaveform, showVoiceImageInput: showVoiceImageInput, voiceDemoProductImageUrl: voiceDemoProductImageUrl, voiceAutoGreet: voiceAutoGreet, iosSilentAudioSource: iosSilentAudioSource, voiceRemoteAudioGain: voiceRemoteAudioGain, textTtsVolume: textTtsVolume, theme: theme, style: style, headerStyle: headerStyle, webrtcEnabled: webrtcEnabled }), children] }));
|
|
29
|
+
export function NxtlinqAgentAssistant({ title, placeholder, presetMessages, loadHistoryOnMount = false, historyLast, enableVoice = true, startInVoiceMode = false, startWithMicMuted = true, holdMicDuringAssistant = true, showVoiceWaveform = true, showVoiceImageInput = false, voiceDemoProductImageUrl, voiceAutoGreet, iosSilentAudioSource, textTtsVolume, theme, style, headerStyle, onMessage, onError, onToolUse, children, storage, fetchImpl, getTimezone, resetOnIdentityChange, ...agentConfig }) {
|
|
30
|
+
return (_jsxs(NxtlinqAgentProvider, { storage: storage, fetchImpl: fetchImpl, getTimezone: getTimezone, resetOnIdentityChange: resetOnIdentityChange, onMessage: onMessage, onError: onError, onToolUse: onToolUse, ...agentConfig, children: [_jsx(AgentAssistantShell, { title: title, placeholder: placeholder, presetMessages: presetMessages, loadHistoryOnMount: loadHistoryOnMount, historyLast: historyLast, enableVoice: enableVoice, startInVoiceMode: startInVoiceMode, startWithMicMuted: startWithMicMuted, holdMicDuringAssistant: holdMicDuringAssistant, showVoiceWaveform: showVoiceWaveform, showVoiceImageInput: showVoiceImageInput, voiceDemoProductImageUrl: voiceDemoProductImageUrl, voiceAutoGreet: voiceAutoGreet, iosSilentAudioSource: iosSilentAudioSource, textTtsVolume: textTtsVolume, theme: theme, style: style, headerStyle: headerStyle }), children] }));
|
|
32
31
|
}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { NxtlinqAgentAssistantProps } from '../types';
|
|
3
|
-
export type AgentAssistantShellProps = Pick<NxtlinqAgentAssistantProps, 'title' | 'placeholder' | 'presetMessages' | 'enableVoice' | 'theme' | 'style' | 'headerStyle' | 'loadHistoryOnMount' | 'historyLast' | 'startInVoiceMode' | 'startWithMicMuted' | 'holdMicDuringAssistant' | 'showVoiceWaveform' | 'showVoiceImageInput' | 'voiceDemoProductImageUrl' | 'voiceAutoGreet' | 'iosSilentAudioSource' | '
|
|
4
|
-
webrtcEnabled: boolean;
|
|
5
|
-
};
|
|
3
|
+
export type AgentAssistantShellProps = Pick<NxtlinqAgentAssistantProps, 'title' | 'placeholder' | 'presetMessages' | 'enableVoice' | 'theme' | 'style' | 'headerStyle' | 'loadHistoryOnMount' | 'historyLast' | 'startInVoiceMode' | 'startWithMicMuted' | 'holdMicDuringAssistant' | 'showVoiceWaveform' | 'showVoiceImageInput' | 'voiceDemoProductImageUrl' | 'voiceAutoGreet' | 'iosSilentAudioSource' | 'textTtsVolume'>;
|
|
6
4
|
export declare function AgentAssistantShell(props: AgentAssistantShellProps): React.ReactElement;
|
|
7
5
|
//# sourceMappingURL=AgentAssistantShell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AgentAssistantShell.d.ts","sourceRoot":"","sources":["../../src/components/AgentAssistantShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAMzC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"AgentAssistantShell.d.ts","sourceRoot":"","sources":["../../src/components/AgentAssistantShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAMzC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAS3D,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,0BAA0B,EACxB,OAAO,GACP,aAAa,GACb,gBAAgB,GAChB,aAAa,GACb,OAAO,GACP,OAAO,GACP,aAAa,GACb,oBAAoB,GACpB,aAAa,GACb,kBAAkB,GAClB,mBAAmB,GACnB,wBAAwB,GACxB,mBAAmB,GACnB,qBAAqB,GACrB,0BAA0B,GAC1B,gBAAgB,GAChB,sBAAsB,GACtB,eAAe,CAClB,CAAC;AAwFF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CAkBvF"}
|
|
@@ -4,15 +4,12 @@ import { StyleSheet, Text, View } from 'react-native';
|
|
|
4
4
|
import { AgentAssistantProvider, useAgentAssistant, } from '../context/AgentAssistantContext';
|
|
5
5
|
import { AgentComposer } from './AgentComposer';
|
|
6
6
|
import { AgentMessageList } from './AgentMessageList';
|
|
7
|
-
import { AgentRemoteAudio } from './AgentRemoteAudio';
|
|
8
7
|
import { AgentVoiceBar } from './AgentVoiceBar';
|
|
9
8
|
import { PresetMessageChips } from './PresetMessageChips';
|
|
10
|
-
import { VoiceGreetTrigger } from './VoiceGreetTrigger';
|
|
11
|
-
import { VoiceImageInput } from './VoiceImageInput';
|
|
12
9
|
import { VoiceWaveform } from './VoiceWaveform';
|
|
13
10
|
import { AudioSessionWaker } from '../voice/AudioSessionWaker';
|
|
14
11
|
import { VoiceAutoGreetBinder } from '../voice/VoiceAutoGreetBinder';
|
|
15
|
-
function AgentAssistantInner({ title, headerStyle, style, loadHistoryOnMount, historyLast, startInVoiceMode,
|
|
12
|
+
function AgentAssistantInner({ title, headerStyle, style, loadHistoryOnMount, historyLast, startInVoiceMode, showVoiceWaveform, showVoiceImageInput, voiceDemoProductImageUrl, voiceAutoGreet, iosSilentAudioSource, }) {
|
|
16
13
|
const { theme, loadHistory, startVoice, isVoiceAvailable, } = useAgentAssistant();
|
|
17
14
|
const [historyReady, setHistoryReady] = React.useState(!loadHistoryOnMount);
|
|
18
15
|
useEffect(() => {
|
|
@@ -51,7 +48,7 @@ function AgentAssistantInner({ title, headerStyle, style, loadHistoryOnMount, hi
|
|
|
51
48
|
fontSize: theme.typography.titleSize,
|
|
52
49
|
fontWeight: '600',
|
|
53
50
|
color: theme.colors.assistantText,
|
|
54
|
-
}, children: title ?? 'AI Assistant' }) }), _jsx(PresetMessageChips, {}), _jsx(AgentMessageList, {}), showVoiceWaveform !== false ? _jsx(VoiceWaveform, {}) : null, _jsx(AgentVoiceBar, {}),
|
|
51
|
+
}, children: title ?? 'AI Assistant' }) }), _jsx(PresetMessageChips, {}), _jsx(AgentMessageList, {}), showVoiceWaveform !== false ? _jsx(VoiceWaveform, {}) : null, _jsx(AgentVoiceBar, {}), _jsx(AgentComposer, {}), autoGreetConfig ? (_jsx(VoiceAutoGreetBinder, { config: autoGreetConfig, historyReady: historyReady })) : null] }));
|
|
55
52
|
}
|
|
56
53
|
export function AgentAssistantShell(props) {
|
|
57
54
|
return (_jsx(AgentAssistantProvider, { ui: {
|
|
@@ -63,8 +60,7 @@ export function AgentAssistantShell(props) {
|
|
|
63
60
|
startWithMicMuted: props.startWithMicMuted,
|
|
64
61
|
holdMicDuringAssistant: props.holdMicDuringAssistant,
|
|
65
62
|
textTtsVolume: props.textTtsVolume,
|
|
66
|
-
|
|
67
|
-
webrtcEnabled: props.webrtcEnabled,
|
|
63
|
+
showVoiceImageInput: props.showVoiceImageInput,
|
|
68
64
|
}, children: _jsx(AgentAssistantInner, { ...props }) }));
|
|
69
65
|
}
|
|
70
66
|
const styles = StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AgentMessageList.d.ts","sourceRoot":"","sources":["../../src/components/AgentMessageList.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"AgentMessageList.d.ts","sourceRoot":"","sources":["../../src/components/AgentMessageList.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAmJnD,wBAAgB,gBAAgB,IAAI,KAAK,CAAC,YAAY,CA8BrD"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import React, { useCallback,
|
|
2
|
+
import React, { useCallback, useRef } from 'react';
|
|
3
3
|
import { ActivityIndicator, FlatList, Pressable, StyleSheet, Text, View, } from 'react-native';
|
|
4
4
|
import { useAgentAssistant } from '../context/AgentAssistantContext';
|
|
5
|
+
import { MessageAttachmentPreview } from './MessageAttachmentPreview';
|
|
5
6
|
import { SpeakerIcon } from './VoiceIcons';
|
|
7
|
+
import { useMessageListAutoScroll } from './useMessageListAutoScroll';
|
|
6
8
|
function MessageBubble({ message }) {
|
|
7
9
|
const { theme, interactionMode, playMessageTts, playingMessageId, isTextTtsAvailable, } = useAgentAssistant();
|
|
8
10
|
const isUser = message.role === 'user';
|
|
@@ -53,10 +55,10 @@ function MessageBubble({ message }) {
|
|
|
53
55
|
borderRadius: theme.radius.bubble,
|
|
54
56
|
maxWidth: '85%',
|
|
55
57
|
},
|
|
56
|
-
], children: [_jsx(Text, { style: {
|
|
58
|
+
], children: [message.attachments?.length ? (_jsx(MessageAttachmentPreview, { attachments: message.attachments, theme: theme })) : null, displayText?.trim() ? (_jsx(Text, { style: {
|
|
57
59
|
color: isUser ? theme.colors.userText : theme.colors.assistantText,
|
|
58
60
|
fontSize: theme.typography.bodySize,
|
|
59
|
-
}, children: displayText
|
|
61
|
+
}, children: displayText })) : null, message.isStreaming && message.streamingStatus ? (_jsx(Text, { style: {
|
|
60
62
|
color: theme.colors.mutedText,
|
|
61
63
|
fontSize: theme.typography.captionSize,
|
|
62
64
|
marginTop: theme.spacing.xs,
|
|
@@ -72,12 +74,8 @@ function MessageBubble({ message }) {
|
|
|
72
74
|
export function AgentMessageList() {
|
|
73
75
|
const { messages, isLoading, theme } = useAgentAssistant();
|
|
74
76
|
const listRef = useRef(null);
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
listRef.current?.scrollToEnd({ animated: true });
|
|
78
|
-
}
|
|
79
|
-
}, [messages.length, messages[messages.length - 1]?.content]);
|
|
80
|
-
return (_jsx(View, { style: [styles.container, { backgroundColor: theme.colors.background }], children: _jsx(FlatList, { ref: listRef, data: messages, keyExtractor: (item) => item.id, renderItem: ({ item }) => _jsx(MessageBubble, { message: item }), contentContainerStyle: { padding: theme.spacing.md, paddingBottom: theme.spacing.lg }, ListEmptyComponent: _jsx(Text, { style: [styles.empty, { color: theme.colors.mutedText }], children: "Send a message to start the conversation." }), ListFooterComponent: isLoading ? (_jsx(ActivityIndicator, { style: { marginTop: theme.spacing.sm }, color: theme.colors.primary })) : null }) }));
|
|
77
|
+
const { onContentSizeChange } = useMessageListAutoScroll(messages, listRef);
|
|
78
|
+
return (_jsx(View, { style: [styles.container, { backgroundColor: theme.colors.background }], children: _jsx(FlatList, { ref: listRef, data: messages, keyExtractor: (item) => item.id, renderItem: ({ item }) => _jsx(MessageBubble, { message: item }), onContentSizeChange: onContentSizeChange, contentContainerStyle: { padding: theme.spacing.md, paddingBottom: theme.spacing.lg }, ListEmptyComponent: _jsx(Text, { style: [styles.empty, { color: theme.colors.mutedText }], children: "Send a message to start the conversation." }), ListFooterComponent: isLoading ? (_jsx(ActivityIndicator, { style: { marginTop: theme.spacing.sm }, color: theme.colors.primary })) : null }) }));
|
|
81
79
|
}
|
|
82
80
|
const styles = StyleSheet.create({
|
|
83
81
|
container: { flex: 1, minHeight: 0 },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AgentVoiceBar.d.ts","sourceRoot":"","sources":["../../src/components/AgentVoiceBar.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"AgentVoiceBar.d.ts","sourceRoot":"","sources":["../../src/components/AgentVoiceBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AA+B3C,wBAAgB,aAAa,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CAoIzD"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
3
|
import { ActivityIndicator, Pressable, StyleSheet, Text, View, } from 'react-native';
|
|
4
4
|
import { useAgentAssistant, voiceStatusLabel, } from '../context/AgentAssistantContext';
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { MicIcon, MicOffIcon } from './VoiceIcons';
|
|
6
|
+
import { VoiceAttachmentButton } from './VoiceAttachmentButton';
|
|
7
7
|
function statusDotColor(status, theme) {
|
|
8
8
|
switch (status) {
|
|
9
9
|
case 'listening':
|
|
@@ -17,21 +17,7 @@ function statusDotColor(status, theme) {
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
export function AgentVoiceBar() {
|
|
20
|
-
const { theme, interactionMode, voiceStatus, voiceSessionId, isVoiceConnecting, isVoiceChannelReady, stopVoice,
|
|
21
|
-
const [speakerPulseOpacity, setSpeakerPulseOpacity] = useState(1);
|
|
22
|
-
const isSpeakerActive = SPEAKER_ACTIVE_STATUSES.has(voiceStatus);
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
if (!isSpeakerActive) {
|
|
25
|
-
setSpeakerPulseOpacity(1);
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
let high = true;
|
|
29
|
-
const id = setInterval(() => {
|
|
30
|
-
setSpeakerPulseOpacity(high ? 0.35 : 1);
|
|
31
|
-
high = !high;
|
|
32
|
-
}, 600);
|
|
33
|
-
return () => clearInterval(id);
|
|
34
|
-
}, [isSpeakerActive]);
|
|
20
|
+
const { theme, interactionMode, voiceStatus, voiceSessionId, isVoiceConnecting, isVoiceChannelReady, stopVoice, isVoiceAvailable, isMicMuted, isMicHeldForAssistant, toggleVoiceMicMute, showVoiceImageInput, } = useAgentAssistant();
|
|
35
21
|
const returnToTextMode = useCallback(() => {
|
|
36
22
|
void stopVoice();
|
|
37
23
|
}, [stopVoice]);
|
|
@@ -49,7 +35,7 @@ export function AgentVoiceBar() {
|
|
|
49
35
|
: awaitingChannel
|
|
50
36
|
? 'Waiting for voice channel…'
|
|
51
37
|
: isMicHeldForAssistant
|
|
52
|
-
? '
|
|
38
|
+
? 'Assistant is responding — tap mic to interrupt and speak'
|
|
53
39
|
: isMicMuted
|
|
54
40
|
? 'Mic is off — tap the mic when ready to speak'
|
|
55
41
|
: voiceStatus === 'listening'
|
|
@@ -86,17 +72,12 @@ export function AgentVoiceBar() {
|
|
|
86
72
|
fontSize: theme.typography.captionSize - 1,
|
|
87
73
|
flexShrink: 1,
|
|
88
74
|
alignSelf: 'stretch',
|
|
89
|
-
}, numberOfLines: 2, children: statusHint })) : null] }),
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
},
|
|
96
|
-
], children: isMicMuted ? (_jsx(MicOffIcon, { size: 24, color: "#ef4444" })) : (_jsx(MicIcon, { size: 24, color: theme.colors.assistantText })) }), _jsx(Pressable, { onPress: () => interrupt(), disabled: showConnecting || awaitingChannel, style: ({ pressed }) => [
|
|
97
|
-
styles.iconButton,
|
|
98
|
-
{ opacity: pressed || showConnecting || awaitingChannel ? 0.45 : 1 },
|
|
99
|
-
], children: _jsx(StopIcon, { size: 24, color: theme.colors.assistantText }) })] })] }), _jsx(Pressable, { onPress: returnToTextMode, style: styles.textLink, children: _jsx(Text, { style: { color: theme.colors.primary, fontSize: theme.typography.captionSize }, children: "Back to text mode" }) })] }));
|
|
75
|
+
}, numberOfLines: 2, children: statusHint })) : null] }), showVoiceImageInput ? _jsx(VoiceAttachmentButton, {}) : null, _jsx(Pressable, { onPress: toggleVoiceMicMute, disabled: showConnecting || awaitingChannel, style: ({ pressed }) => [
|
|
76
|
+
styles.micButton,
|
|
77
|
+
{
|
|
78
|
+
opacity: pressed || showConnecting || awaitingChannel ? 0.45 : 1,
|
|
79
|
+
},
|
|
80
|
+
], children: isMicMuted ? (_jsx(MicOffIcon, { size: 28, color: "#ef4444" })) : (_jsx(MicIcon, { size: 28, color: theme.colors.assistantText })) })] }), _jsx(Pressable, { onPress: returnToTextMode, style: styles.textLink, children: _jsx(Text, { style: { color: theme.colors.primary, fontSize: theme.typography.captionSize }, children: "Back to text mode" }) })] }));
|
|
100
81
|
}
|
|
101
82
|
const styles = StyleSheet.create({
|
|
102
83
|
container: { borderTopWidth: StyleSheet.hairlineWidth },
|
|
@@ -124,10 +105,9 @@ const styles = StyleSheet.create({
|
|
|
124
105
|
alignSelf: 'stretch',
|
|
125
106
|
},
|
|
126
107
|
dot: { width: 8, height: 8, borderRadius: 4 },
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
borderRadius: 8,
|
|
108
|
+
micButton: {
|
|
109
|
+
padding: 10,
|
|
110
|
+
borderRadius: 12,
|
|
131
111
|
},
|
|
132
112
|
textLink: { marginTop: 10, alignSelf: 'center' },
|
|
133
113
|
});
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Attachment } from '@bytexbyte/nxtlinq-ai-agent-core-development';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import type { AgentAssistantTheme } from '../types';
|
|
4
|
+
type MessageAttachmentPreviewProps = {
|
|
5
|
+
attachments: Attachment[];
|
|
6
|
+
theme: AgentAssistantTheme;
|
|
7
|
+
};
|
|
8
|
+
export declare function MessageAttachmentPreview({ attachments, theme, }: MessageAttachmentPreviewProps): React.ReactElement | null;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=MessageAttachmentPreview.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MessageAttachmentPreview.d.ts","sourceRoot":"","sources":["../../src/components/MessageAttachmentPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,KAAK,6BAA6B,GAAG;IACnC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,EAAE,mBAAmB,CAAC;CAC5B,CAAC;AAEF,wBAAgB,wBAAwB,CAAC,EACvC,WAAW,EACX,KAAK,GACN,EAAE,6BAA6B,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAwB3D"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Image, StyleSheet, Text, View } from 'react-native';
|
|
3
|
+
export function MessageAttachmentPreview({ attachments, theme, }) {
|
|
4
|
+
const images = attachments.filter((item) => item.type === 'image');
|
|
5
|
+
if (!images.length)
|
|
6
|
+
return null;
|
|
7
|
+
return (_jsxs(View, { style: styles.wrap, children: [images.map((item, index) => (_jsx(Image, { source: { uri: item.url }, style: [
|
|
8
|
+
styles.image,
|
|
9
|
+
{ borderRadius: theme.radius.bubble, backgroundColor: theme.colors.surface },
|
|
10
|
+
], resizeMode: "cover" }, `${item.name}-${index}`))), attachments.some((item) => item.type === 'file') ? (_jsx(Text, { style: { color: theme.colors.mutedText, fontSize: theme.typography.captionSize }, children: attachments.filter((item) => item.type === 'file').map((item) => item.name).join(', ') })) : null] }));
|
|
11
|
+
}
|
|
12
|
+
const styles = StyleSheet.create({
|
|
13
|
+
wrap: { marginBottom: 6, gap: 6 },
|
|
14
|
+
image: { width: 160, height: 160 },
|
|
15
|
+
});
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { AgentAssistantTheme } from '../types';
|
|
3
|
+
type VoiceAddMediaModalProps = {
|
|
4
|
+
visible: boolean;
|
|
5
|
+
theme: AgentAssistantTheme;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
onPickPhotos: () => void;
|
|
8
|
+
onTakePhoto: () => void;
|
|
9
|
+
};
|
|
10
|
+
export declare function VoiceAddMediaModal({ visible, theme, onClose, onPickPhotos, onTakePhoto, }: VoiceAddMediaModalProps): React.ReactElement | null;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=VoiceAddMediaModal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VoiceAddMediaModal.d.ts","sourceRoot":"","sources":["../../src/components/VoiceAddMediaModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,KAAK,uBAAuB,GAAG;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,KAAK,EACL,OAAO,EACP,YAAY,EACZ,WAAW,GACZ,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA4BrD"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
3
|
+
export function VoiceAddMediaModal({ visible, theme, onClose, onPickPhotos, onTakePhoto, }) {
|
|
4
|
+
if (!visible)
|
|
5
|
+
return null;
|
|
6
|
+
return (_jsx(Modal, { transparent: true, visible: visible, animationType: "fade", onRequestClose: onClose, children: _jsx(Pressable, { style: styles.overlay, onPress: onClose, children: _jsxs(Pressable, { style: [
|
|
7
|
+
styles.modal,
|
|
8
|
+
{ backgroundColor: theme.colors.assistantBubble, borderRadius: theme.radius.panel },
|
|
9
|
+
], onPress: () => undefined, children: [_jsx(Pressable, { style: styles.option, onPress: onPickPhotos, children: _jsx(Text, { style: { color: theme.colors.assistantText, fontSize: theme.typography.bodySize }, children: "Photos" }) }), _jsx(View, { style: [styles.separator, { backgroundColor: theme.colors.border }] }), _jsx(Pressable, { style: styles.option, onPress: onTakePhoto, children: _jsx(Text, { style: { color: theme.colors.assistantText, fontSize: theme.typography.bodySize }, children: "Camera" }) })] }) }) }));
|
|
10
|
+
}
|
|
11
|
+
const styles = StyleSheet.create({
|
|
12
|
+
overlay: {
|
|
13
|
+
flex: 1,
|
|
14
|
+
backgroundColor: 'rgba(0,0,0,0.45)',
|
|
15
|
+
justifyContent: 'flex-end',
|
|
16
|
+
alignItems: 'flex-start',
|
|
17
|
+
paddingBottom: 120,
|
|
18
|
+
paddingLeft: 16,
|
|
19
|
+
},
|
|
20
|
+
modal: {
|
|
21
|
+
width: 160,
|
|
22
|
+
paddingVertical: 4,
|
|
23
|
+
shadowColor: '#000',
|
|
24
|
+
shadowOffset: { width: 0, height: -2 },
|
|
25
|
+
shadowOpacity: 0.2,
|
|
26
|
+
shadowRadius: 8,
|
|
27
|
+
elevation: 8,
|
|
28
|
+
},
|
|
29
|
+
option: { paddingVertical: 12, paddingHorizontal: 16 },
|
|
30
|
+
separator: { height: StyleSheet.hairlineWidth, marginHorizontal: 16 },
|
|
31
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VoiceAttachmentButton.d.ts","sourceRoot":"","sources":["../../src/components/VoiceAttachmentButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAQrD,wBAAgB,qBAAqB,IAAI,KAAK,CAAC,YAAY,CAiF1D"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useState } from 'react';
|
|
3
|
+
import { ActivityIndicator, Pressable, StyleSheet } from 'react-native';
|
|
4
|
+
import { useAgentAssistant } from '../context/AgentAssistantContext';
|
|
5
|
+
import { sendVoiceImageAttachment } from '../voice/sendVoiceImageAttachment';
|
|
6
|
+
import { useVoiceImagePicker } from '../voice/useVoiceImagePicker';
|
|
7
|
+
import { AddIcon } from './VoiceIcons';
|
|
8
|
+
import { VoiceAddMediaModal } from './VoiceAddMediaModal';
|
|
9
|
+
export function VoiceAttachmentButton() {
|
|
10
|
+
const { theme, messages, setMessages, sendVoiceUserInput, voiceSessionId, isVoiceChannelReady, isVoiceConnecting, } = useAgentAssistant();
|
|
11
|
+
const [busy, setBusy] = useState(false);
|
|
12
|
+
const handlePicked = useCallback(async (fileUri) => {
|
|
13
|
+
if (!isVoiceChannelReady || busy)
|
|
14
|
+
return;
|
|
15
|
+
setBusy(true);
|
|
16
|
+
try {
|
|
17
|
+
await sendVoiceImageAttachment({
|
|
18
|
+
fileUri,
|
|
19
|
+
messages,
|
|
20
|
+
voiceSessionId,
|
|
21
|
+
setMessages,
|
|
22
|
+
sendVoiceUserInput,
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
catch (e) {
|
|
26
|
+
const message = e instanceof Error ? e.message : String(e);
|
|
27
|
+
console.warn('[nxtlinq] sendVoiceImageAttachment failed:', message);
|
|
28
|
+
}
|
|
29
|
+
finally {
|
|
30
|
+
setBusy(false);
|
|
31
|
+
}
|
|
32
|
+
}, [
|
|
33
|
+
busy,
|
|
34
|
+
isVoiceChannelReady,
|
|
35
|
+
messages,
|
|
36
|
+
sendVoiceUserInput,
|
|
37
|
+
setMessages,
|
|
38
|
+
voiceSessionId,
|
|
39
|
+
]);
|
|
40
|
+
const { modalVisible, openModal, closeModal, pickFromLibrary, takePhoto, pickerMissing, } = useVoiceImagePicker(handlePicked);
|
|
41
|
+
const disabled = busy || !isVoiceChannelReady || isVoiceConnecting || pickerMissing;
|
|
42
|
+
return (_jsxs(_Fragment, { children: [_jsx(Pressable, { onPress: openModal, disabled: disabled, accessibilityLabel: "Add attachment", style: ({ pressed }) => [
|
|
43
|
+
styles.button,
|
|
44
|
+
{
|
|
45
|
+
backgroundColor: theme.colors.assistantBubble,
|
|
46
|
+
opacity: pressed || disabled ? 0.45 : 1,
|
|
47
|
+
},
|
|
48
|
+
], children: busy ? (_jsx(ActivityIndicator, { color: theme.colors.assistantText, size: "small" })) : (_jsx(AddIcon, { size: 22, color: theme.colors.assistantText })) }), _jsx(VoiceAddMediaModal, { visible: modalVisible, theme: theme, onClose: closeModal, onPickPhotos: () => void pickFromLibrary(), onTakePhoto: () => void takePhoto() })] }));
|
|
49
|
+
}
|
|
50
|
+
const styles = StyleSheet.create({
|
|
51
|
+
button: {
|
|
52
|
+
width: 40,
|
|
53
|
+
height: 40,
|
|
54
|
+
borderRadius: 20,
|
|
55
|
+
alignItems: 'center',
|
|
56
|
+
justifyContent: 'center',
|
|
57
|
+
},
|
|
58
|
+
});
|
|
@@ -8,5 +8,6 @@ export declare function MicOffIcon({ size, color }: IconProps): React.ReactEleme
|
|
|
8
8
|
export declare function StopIcon({ size, color }: IconProps): React.ReactElement;
|
|
9
9
|
/** Loudspeaker — assistant audio output (Material volume-up). */
|
|
10
10
|
export declare function SpeakerIcon({ size, color, }: IconProps): React.ReactElement;
|
|
11
|
+
export declare function AddIcon({ size, color }: IconProps): React.ReactElement;
|
|
11
12
|
export {};
|
|
12
13
|
//# sourceMappingURL=VoiceIcons.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VoiceIcons.d.ts","sourceRoot":"","sources":["../../src/components/VoiceIcons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,SAAS,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,wBAAgB,OAAO,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAEvF;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAE1F;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAExF;AAED,iEAAiE;AACjE,wBAAgB,WAAW,CAAC,EAC1B,IAAS,EACT,KAAiB,GAClB,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAEhC"}
|
|
1
|
+
{"version":3,"file":"VoiceIcons.d.ts","sourceRoot":"","sources":["../../src/components/VoiceIcons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,SAAS,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,wBAAgB,OAAO,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAEvF;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAE1F;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAExF;AAED,iEAAiE;AACjE,wBAAgB,WAAW,CAAC,EAC1B,IAAS,EACT,KAAiB,GAClB,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAEhC;AAED,wBAAgB,OAAO,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAEvF"}
|
|
@@ -15,3 +15,6 @@ export function StopIcon({ size = 24, color = '#4b5563' }) {
|
|
|
15
15
|
export function SpeakerIcon({ size = 24, color = '#ec4899', }) {
|
|
16
16
|
return _jsx(MaterialIcon, { name: "volume-up", size: size, color: color });
|
|
17
17
|
}
|
|
18
|
+
export function AddIcon({ size = 24, color = '#4b5563' }) {
|
|
19
|
+
return _jsx(MaterialIcon, { name: "add", size: size, color: color });
|
|
20
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* Polls
|
|
4
|
-
*
|
|
3
|
+
* Polls local player RMS (Berify JeannieVoiceWaveform pattern).
|
|
4
|
+
* Animates while assistant audio is audible; voice status extends hold at turn start.
|
|
5
5
|
*/
|
|
6
6
|
export declare function VoiceWaveform(): React.ReactElement | null;
|
|
7
7
|
//# sourceMappingURL=VoiceWaveform.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VoiceWaveform.d.ts","sourceRoot":"","sources":["../../src/components/VoiceWaveform.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAW3D;;;GAGG;AACH,wBAAgB,aAAa,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"VoiceWaveform.d.ts","sourceRoot":"","sources":["../../src/components/VoiceWaveform.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAW3D;;;GAGG;AACH,wBAAgB,aAAa,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CAgEzD"}
|
|
@@ -5,28 +5,39 @@ import { useAgentAssistant } from '../context/AgentAssistantContext';
|
|
|
5
5
|
import { WAVEFORM_ACTIVE_STATUSES, WAVEFORM_AUDIBLE_HOLD_MS, WAVEFORM_AUDIBLE_THRESHOLD, } from '../voice/voiceWaveformConstants';
|
|
6
6
|
const BAR_COUNT = 12;
|
|
7
7
|
/**
|
|
8
|
-
* Polls
|
|
9
|
-
*
|
|
8
|
+
* Polls local player RMS (Berify JeannieVoiceWaveform pattern).
|
|
9
|
+
* Animates while assistant audio is audible; voice status extends hold at turn start.
|
|
10
10
|
*/
|
|
11
11
|
export function VoiceWaveform() {
|
|
12
12
|
const { theme, interactionMode, voiceStatus, getOutputAudioLevel } = useAgentAssistant();
|
|
13
13
|
const [levels, setLevels] = useState(() => Array(BAR_COUNT).fill(0));
|
|
14
14
|
const lastAudibleAtRef = useRef(0);
|
|
15
|
+
const smoothedRef = useRef(0);
|
|
15
16
|
useEffect(() => {
|
|
16
17
|
if (interactionMode !== 'voice') {
|
|
17
18
|
setLevels(Array(BAR_COUNT).fill(0));
|
|
19
|
+
smoothedRef.current = 0;
|
|
18
20
|
return;
|
|
19
21
|
}
|
|
20
22
|
const id = setInterval(() => {
|
|
21
23
|
const now = Date.now();
|
|
22
|
-
const statusActive = WAVEFORM_ACTIVE_STATUSES.has(voiceStatus);
|
|
23
24
|
const rawLevel = getOutputAudioLevel();
|
|
24
25
|
if (rawLevel > WAVEFORM_AUDIBLE_THRESHOLD) {
|
|
25
26
|
lastAudibleAtRef.current = now;
|
|
26
27
|
}
|
|
28
|
+
if (WAVEFORM_ACTIVE_STATUSES.has(voiceStatus)) {
|
|
29
|
+
lastAudibleAtRef.current = now;
|
|
30
|
+
}
|
|
27
31
|
const audible = now - lastAudibleAtRef.current < WAVEFORM_AUDIBLE_HOLD_MS;
|
|
28
|
-
|
|
29
|
-
|
|
32
|
+
if (rawLevel > smoothedRef.current) {
|
|
33
|
+
smoothedRef.current = rawLevel;
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
smoothedRef.current *= 0.9;
|
|
37
|
+
}
|
|
38
|
+
const scaled = audible
|
|
39
|
+
? Math.min(1, Math.max(0.12, smoothedRef.current))
|
|
40
|
+
: 0;
|
|
30
41
|
setLevels((prev) => [...prev.slice(1), scaled]);
|
|
31
42
|
}, 100);
|
|
32
43
|
return () => clearInterval(id);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Message } from '@bytexbyte/nxtlinq-ai-agent-core-development';
|
|
2
|
+
import { type RefObject } from 'react';
|
|
3
|
+
type ScrollableList = {
|
|
4
|
+
scrollToEnd: (opts: {
|
|
5
|
+
animated: boolean;
|
|
6
|
+
}) => void;
|
|
7
|
+
};
|
|
8
|
+
export declare function useMessageListAutoScroll(messages: Message[], listRef: RefObject<ScrollableList | null>): {
|
|
9
|
+
onContentSizeChange: () => void;
|
|
10
|
+
};
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=useMessageListAutoScroll.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMessageListAutoScroll.d.ts","sourceRoot":"","sources":["../../src/components/useMessageListAutoScroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8CAA8C,CAAC;AAC5E,OAAO,EAA2C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhF,KAAK,cAAc,GAAG;IACpB,WAAW,EAAE,CAAC,IAAI,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACpD,CAAC;AAeF,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,OAAO,EAAE,EACnB,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,GACxC;IAAE,mBAAmB,EAAE,MAAM,IAAI,CAAA;CAAE,CAiCrC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
2
|
+
function latestMessageScrollKey(messages) {
|
|
3
|
+
const last = messages[messages.length - 1];
|
|
4
|
+
if (!last)
|
|
5
|
+
return '0';
|
|
6
|
+
return [
|
|
7
|
+
messages.length,
|
|
8
|
+
last.id,
|
|
9
|
+
last.content,
|
|
10
|
+
last.partialContent ?? '',
|
|
11
|
+
last.attachments?.length ?? 0,
|
|
12
|
+
last.isStreaming ? '1' : '0',
|
|
13
|
+
].join('|');
|
|
14
|
+
}
|
|
15
|
+
export function useMessageListAutoScroll(messages, listRef) {
|
|
16
|
+
const scrollKey = useMemo(() => latestMessageScrollKey(messages), [messages]);
|
|
17
|
+
const pendingFrameRef = useRef(null);
|
|
18
|
+
const scrollToLatest = useCallback((animated) => {
|
|
19
|
+
if (messages.length === 0)
|
|
20
|
+
return;
|
|
21
|
+
if (pendingFrameRef.current != null) {
|
|
22
|
+
cancelAnimationFrame(pendingFrameRef.current);
|
|
23
|
+
}
|
|
24
|
+
pendingFrameRef.current = requestAnimationFrame(() => {
|
|
25
|
+
pendingFrameRef.current = null;
|
|
26
|
+
listRef.current?.scrollToEnd({ animated });
|
|
27
|
+
});
|
|
28
|
+
}, [listRef, messages.length]);
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
scrollToLatest(true);
|
|
31
|
+
return () => {
|
|
32
|
+
if (pendingFrameRef.current != null) {
|
|
33
|
+
cancelAnimationFrame(pendingFrameRef.current);
|
|
34
|
+
pendingFrameRef.current = null;
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
}, [scrollKey, scrollToLatest]);
|
|
38
|
+
const onContentSizeChange = useCallback(() => {
|
|
39
|
+
scrollToLatest(false);
|
|
40
|
+
}, [scrollToLatest]);
|
|
41
|
+
return { onContentSizeChange };
|
|
42
|
+
}
|
|
@@ -21,6 +21,8 @@ export type AgentAssistantContextValue = UseNxtlinqAgentResult & UseNxtlinqVoice
|
|
|
21
21
|
selectPreset: (preset: PresetMessage) => Promise<void>;
|
|
22
22
|
/** True when voice data channel is open and ready for user_input. */
|
|
23
23
|
isVoiceChannelReady: boolean;
|
|
24
|
+
/** Show "+" image picker in voice bar (SDK-2). */
|
|
25
|
+
showVoiceImageInput: boolean;
|
|
24
26
|
postTextTts: (text: string) => Promise<{
|
|
25
27
|
audio: ArrayBuffer;
|
|
26
28
|
mimeType: string;
|
|
@@ -35,9 +37,7 @@ export type AgentAssistantContextValue = UseNxtlinqAgentResult & UseNxtlinqVoice
|
|
|
35
37
|
};
|
|
36
38
|
export type AgentAssistantProviderProps = {
|
|
37
39
|
children: ReactNode;
|
|
38
|
-
ui: Pick<NxtlinqAgentAssistantProps, 'title' | 'placeholder' | 'presetMessages' | 'enableVoice' | 'theme' | 'startWithMicMuted' | 'holdMicDuringAssistant' | 'textTtsVolume' | '
|
|
39
|
-
webrtcEnabled: boolean;
|
|
40
|
-
};
|
|
40
|
+
ui: Pick<NxtlinqAgentAssistantProps, 'title' | 'placeholder' | 'presetMessages' | 'enableVoice' | 'theme' | 'startWithMicMuted' | 'holdMicDuringAssistant' | 'textTtsVolume' | 'showVoiceImageInput'>;
|
|
41
41
|
};
|
|
42
42
|
export declare function AgentAssistantProvider({ children, ui, }: AgentAssistantProviderProps): React.ReactElement;
|
|
43
43
|
export declare function useAgentAssistant(): AgentAssistantContextValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AgentAssistantContext.d.ts","sourceRoot":"","sources":["../../src/context/AgentAssistantContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,sDAAsD,CAAC;AAC9D,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"AgentAssistantContext.d.ts","sourceRoot":"","sources":["../../src/context/AgentAssistantContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,sDAAsD,CAAC;AAC9D,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAO/F,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,0BAA0B,GAAG,qBAAqB,GAC5D,qBAAqB,GAAG;IACxB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,kBAAkB,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,YAAY,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,qEAAqE;IACrE,mBAAmB,EAAE,OAAO,CAAC;IAC7B,kDAAkD;IAClD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;QAAE,KAAK,EAAE,WAAW,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjF,uBAAuB,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,WAAW,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IACtF,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnE,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAIF,MAAM,MAAM,2BAA2B,GAAG;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,EAAE,IAAI,CACN,0BAA0B,EACxB,OAAO,GACP,aAAa,GACb,gBAAgB,GAChB,aAAa,GACb,OAAO,GACP,mBAAmB,GACnB,wBAAwB,GACxB,eAAe,GACf,qBAAqB,CACxB,CAAC;CACH,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,EAAE,GACH,EAAE,2BAA2B,GAAG,KAAK,CAAC,YAAY,CAmVlD;AAED,wBAAgB,iBAAiB,IAAI,0BAA0B,CAQ9D;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAU5D"}
|