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

package/src/components/AgentRemoteAudio.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+import {
+  applyRemoteAudioPlaybackGain,
+  DEFAULT_REMOTE_AUDIO_GAIN,
+} from '@bytexbyte/nxtlinq-ai-agent-core-development';
+
+type RTCViewComponent = React.ComponentType<{
+  streamURL: string;
+  objectFit?: string;
+  style?: object;
+  zOrder?: number;
+}>;
+
+let RTCView: RTCViewComponent | null = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  RTCView = require('react-native-webrtc').RTCView as RTCViewComponent;
+} catch {
+  RTCView = null;
+}
+
+type StreamWithUrl = {
+  toURL?: () => string;
+  getAudioTracks?: () => Array<{ enabled: boolean; kind?: string }>;
+};
+
+export type AgentRemoteAudioProps = {
+  /**
+   * Playback gain for assistant WebRTC audio (`MediaStreamTrack._setVolume`, 0–10).
+   * Text TTS uses react-native-video at volume 1 and sounds louder by default.
+   */
+  remoteAudioGain?: number;
+};
+
+/**
+ * Plays remote WebRTC assistant audio. On iOS/Android, {@link RTCView} is required
+ * (enabling tracks alone is not enough).
+ */
+export function AgentRemoteAudio({
+  remoteAudioGain = DEFAULT_REMOTE_AUDIO_GAIN,
+}: AgentRemoteAudioProps): React.ReactElement | null {
+  const { getRemoteAudioStream, interactionMode, voiceSessionId, voiceStatus } =
+    useAgentAssistant();
+  const [streamUrl, setStreamUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (interactionMode !== 'voice' || !voiceSessionId) {
+      setStreamUrl(null);
+      return;
+    }
+
+    const sync = () => {
+      const stream = getRemoteAudioStream() as StreamWithUrl | null;
+      applyRemoteAudioPlaybackGain(
+        stream as Parameters<typeof applyRemoteAudioPlaybackGain>[0],
+        remoteAudioGain,
+      );
+      const tracks = stream?.getAudioTracks?.() ?? [];
+      for (const track of tracks) {
+        if (track.kind === 'audio' || track.kind == null) {
+          track.enabled = true;
+        }
+      }
+      const url = stream?.toURL?.() ?? null;
+      setStreamUrl((prev) => (prev === url ? prev : url));
+    };
+
+    sync();
+    const id = setInterval(sync, 150);
+    return () => clearInterval(id);
+  }, [
+    getRemoteAudioStream,
+    interactionMode,
+    voiceSessionId,
+    voiceStatus,
+    remoteAudioGain,
+  ]);
+
+  if (!RTCView || !streamUrl || interactionMode !== 'voice') {
+    return null;
+  }
+
+  return (
+    <RTCView
+      key={streamUrl}
+      streamURL={streamUrl}
+      objectFit="cover"
+      zOrder={-1}
+      style={styles.hidden}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  hidden: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    opacity: 0.01,
+    left: -1000,
+    top: -1000,
+  },
+});

package/src/components/AgentVoiceBar.tsx

@@ -0,0 +1,232 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {
+  useAgentAssistant,
+  voiceStatusLabel,
+} from '../context/AgentAssistantContext';
+import { SPEAKER_ACTIVE_STATUSES } from '../voice/voiceMicConstants';
+import { MicIcon, MicOffIcon, SpeakerIcon, StopIcon } from './VoiceIcons';
+
+function statusDotColor(
+  status: ReturnType<typeof useAgentAssistant>['voiceStatus'],
+  theme: ReturnType<typeof useAgentAssistant>['theme'],
+): string {
+  switch (status) {
+    case 'listening':
+      return theme.colors.voiceActive;
+    case 'speaking':
+      return theme.colors.voiceSpeaking;
+    case 'idle':
+      return theme.colors.mutedText;
+    default:
+      return theme.colors.primary;
+  }
+}
+
+export function AgentVoiceBar(): React.ReactElement | null {
+  const {
+    theme,
+    interactionMode,
+    voiceStatus,
+    voiceSessionId,
+    isVoiceConnecting,
+    isVoiceChannelReady,
+    stopVoice,
+    interrupt,
+    isVoiceAvailable,
+    isMicMuted,
+    isMicHeldForAssistant,
+    toggleVoiceMicMute,
+  } = 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]);
+
+  if (!isVoiceAvailable) return null;
+  if (interactionMode !== 'voice' && !isVoiceConnecting) return null;
+
+  const showConnecting = isVoiceConnecting;
+  const awaitingChannel =
+    Boolean(voiceSessionId) &&
+    !isVoiceConnecting &&
+    !isVoiceChannelReady &&
+    voiceStatus === 'idle';
+
+  const statusHint = showConnecting
+    ? '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…'
+              : '';
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          borderTopColor: theme.colors.border,
+          backgroundColor: theme.colors.surface,
+          padding: theme.spacing.md,
+        },
+      ]}
+    >
+      <View style={styles.mainRow}>
+        <View
+          style={[
+            styles.statusPill,
+            { borderColor: theme.colors.border, backgroundColor: theme.colors.background },
+          ]}
+        >
+          <View style={styles.statusPillHeader}>
+            <View
+              style={[
+                styles.dot,
+                { backgroundColor: statusDotColor(voiceStatus, theme) },
+              ]}
+            />
+            <Text
+              style={{
+                color: theme.colors.assistantText,
+                fontSize: theme.typography.captionSize,
+                fontWeight: '600',
+                flexShrink: 1,
+              }}
+              numberOfLines={1}
+            >
+              {showConnecting
+                ? 'Connecting'
+                : awaitingChannel
+                  ? 'Connecting'
+                  : voiceStatusLabel(voiceStatus)}
+            </Text>
+            {showConnecting ? (
+              <ActivityIndicator color={theme.colors.primary} size="small" />
+            ) : null}
+          </View>
+          {statusHint ? (
+            <Text
+              style={{
+                color: theme.colors.mutedText,
+                fontSize: theme.typography.captionSize - 1,
+                flexShrink: 1,
+                alignSelf: 'stretch',
+              }}
+              numberOfLines={2}
+            >
+              {statusHint}
+            </Text>
+          ) : 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>
+
+          <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>
+      </View>
+
+      <Pressable onPress={returnToTextMode} style={styles.textLink}>
+        <Text style={{ color: theme.colors.primary, fontSize: theme.typography.captionSize }}>
+          Back to text mode
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { borderTopWidth: StyleSheet.hairlineWidth },
+  mainRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 10,
+  },
+  statusPill: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: 4,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  statusPillHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    alignSelf: 'stretch',
+  },
+  dot: { width: 8, height: 8, borderRadius: 4 },
+  iconRow: { flexDirection: 'row', alignItems: 'center', gap: 2 },
+  iconButton: {
+    padding: 8,
+    borderRadius: 8,
+  },
+  textLink: { marginTop: 10, alignSelf: 'center' },
+});

package/src/components/PresetMessageChips.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+
+export function PresetMessageChips(): React.ReactElement | null {
+  const { presetMessages, selectPreset, theme, interactionMode } = useAgentAssistant();
+
+  if (!presetMessages.length || interactionMode === 'voice') {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          borderBottomColor: theme.colors.border,
+          backgroundColor: theme.colors.surface,
+        },
+      ]}
+    >
+      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scroll}>
+        {presetMessages.map((preset, index) => (
+          <Pressable
+            key={`${preset.text}-${index}`}
+            onPress={() => void selectPreset(preset)}
+            style={({ pressed }: { pressed: boolean }) => [
+              styles.chip,
+              {
+                borderColor: theme.colors.border,
+                backgroundColor: pressed ? theme.colors.border : theme.colors.background,
+                borderRadius: theme.radius.button,
+              },
+            ]}
+          >
+            <Text
+              style={{
+                color: theme.colors.assistantText,
+                fontSize: theme.typography.captionSize,
+              }}
+              numberOfLines={1}
+            >
+              {preset.text}
+            </Text>
+          </Pressable>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    paddingVertical: 8,
+  },
+  scroll: { paddingHorizontal: 12, gap: 8 },
+  chip: {
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    marginRight: 8,
+  },
+});

package/src/components/VoiceGreetTrigger.tsx

@@ -0,0 +1,158 @@
+import { uriToVoiceImageAttachment } from '@bytexbyte/nxtlinq-ai-agent-react-native-development';
+import React, { useCallback, useState } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+import type { VoiceAutoGreetConfig } from '../voice/useVoiceAutoGreet';
+
+function buildGreetingText(config: VoiceAutoGreetConfig): string {
+  if (config.text?.trim()) return config.text.trim();
+  const product = config.productName?.trim();
+  return product
+    ? `Hi! Please give me a brief introduction to ${product}.`
+    : 'Hi! Please say hello and introduce yourself.';
+}
+
+export type VoiceGreetTriggerProps = {
+  config: VoiceAutoGreetConfig;
+};
+
+/**
+ * P0 / QA: manually fire the same payload as {@link useVoiceAutoGreet} (product image + intro text).
+ */
+export function VoiceGreetTrigger({ config }: VoiceGreetTriggerProps): React.ReactElement | null {
+  const {
+    theme,
+    interactionMode,
+    isVoiceActive,
+    isVoiceChannelReady,
+    triggerVoiceGreeting,
+  } = useAgentAssistant();
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hint, setHint] = useState<string | null>(null);
+
+  const sendGreet = useCallback(async () => {
+    if (!isVoiceActive) {
+      setError('Start voice mode first');
+      return;
+    }
+    if (!isVoiceChannelReady) {
+      setError('Voice channel not ready — wait for Listening');
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    setHint(null);
+    try {
+      const imageUrl = config.productImageUrl?.trim();
+      let attachments = config.attachments;
+      if (!attachments?.length && imageUrl) {
+        try {
+          attachments = [await uriToVoiceImageAttachment(imageUrl, 'product.jpg')];
+        } catch (imgErr) {
+          console.warn('[nxtlinq] greet image skipped:', imgErr);
+        }
+      }
+      await triggerVoiceGreeting(
+        {
+          text: buildGreetingText(config),
+          attachments,
+          skipUserMessage: config.skipUserMessage ?? true,
+        },
+        { waitForChannel: true, timeoutMs: 12000 },
+      );
+      setHint('Opening greet sent');
+    } catch (e) {
+      const message = e instanceof Error ? e.message : String(e);
+      setError(message);
+      console.warn('[nxtlinq] triggerVoiceGreeting failed:', message);
+    } finally {
+      setBusy(false);
+    }
+  }, [
+    config,
+    isVoiceActive,
+    isVoiceChannelReady,
+    triggerVoiceGreeting,
+  ]);
+
+  if (interactionMode !== 'voice') return null;
+
+  const imageNote = config.productImageUrl?.trim()
+    ? '（含產品圖）'
+    : '（僅文字）';
+
+  return (
+    <View
+      style={[
+        styles.box,
+        {
+          borderTopColor: theme.colors.border,
+          backgroundColor: theme.colors.background,
+          padding: theme.spacing.sm,
+        },
+      ]}
+    >
+      <Text style={{ color: theme.colors.mutedText, fontSize: theme.typography.captionSize }}>
+        Voice opening greet (manual test){imageNote}
+      </Text>
+      {!isVoiceChannelReady ? (
+        <Text
+          style={{
+            color: theme.colors.mutedText,
+            fontSize: theme.typography.captionSize,
+            marginTop: theme.spacing.xs,
+          }}
+        >
+          Waiting for voice channel…
+        </Text>
+      ) : null}
+      {error ? (
+        <Text style={{ color: theme.colors.error, fontSize: theme.typography.captionSize }}>
+          {error}
+        </Text>
+      ) : null}
+      {hint ? (
+        <Text style={{ color: theme.colors.primary, fontSize: theme.typography.captionSize }}>
+          {hint}
+        </Text>
+      ) : null}
+      <Pressable
+        onPress={() => void sendGreet()}
+        disabled={busy || !isVoiceChannelReady}
+        style={({ pressed }) => [
+          styles.btn,
+          {
+            backgroundColor: theme.colors.voiceSpeaking,
+            marginTop: theme.spacing.xs,
+            opacity: pressed || busy || !isVoiceChannelReady ? 0.6 : 1,
+          },
+        ]}
+      >
+        {busy ? (
+          <ActivityIndicator color={theme.colors.primaryText} size="small" />
+        ) : (
+          <Text style={{ color: theme.colors.primaryText, fontWeight: '600' }}>
+            Send opening greet
+          </Text>
+        )}
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { borderTopWidth: StyleSheet.hairlineWidth },
+  btn: {
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+});

package/src/components/VoiceIcons.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+
+type IconProps = {
+  size?: number;
+  color?: string;
+};
+
+type MaterialIconProps = IconProps & { name: string };
+
+/** Typed wrapper — avoids React 18 JSX/classic Component mismatch in package `tsc`. */
+const MaterialIcon = MaterialIcons as unknown as React.ComponentType<MaterialIconProps>;
+
+export function MicIcon({ size = 24, color = '#4b5563' }: IconProps): React.ReactElement {
+  return <MaterialIcon name="mic" size={size} color={color} />;
+}
+
+export function MicOffIcon({ size = 24, color = '#ef4444' }: IconProps): React.ReactElement {
+  return <MaterialIcon name="mic-off" size={size} color={color} />;
+}
+
+export function StopIcon({ size = 24, color = '#4b5563' }: IconProps): React.ReactElement {
+  return <MaterialIcon name="stop" size={size} color={color} />;
+}
+
+/** Loudspeaker — assistant audio output (Material volume-up). */
+export function SpeakerIcon({
+  size = 24,
+  color = '#ec4899',
+}: IconProps): React.ReactElement {
+  return <MaterialIcon name="volume-up" size={size} color={color} />;
+}