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

package/dist/voice/webrtcAudioGain.js

@@ -0,0 +1,11 @@
+import { DEFAULT_REMOTE_AUDIO_GAIN, } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+export const DEFAULT_VOICE_REMOTE_AUDIO_GAIN = DEFAULT_REMOTE_AUDIO_GAIN;
+/** @deprecated Use {@link applyRemoteAudioPlaybackGain} */
+export function applyWebRTCAudioTrackGain(tracks, gain) {
+    const clamped = Math.max(0, Math.min(10, gain));
+    for (const track of tracks) {
+        if ((track.kind === 'audio' || track.kind == null) && track._setVolume) {
+            track._setVolume(clamped);
+        }
+    }
+}

package/dist/voice/writeTtsCacheFile.d.ts

@@ -0,0 +1,9 @@
+import { type PostTextTtsResult } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+export declare function isTtsCacheFileSupported(): boolean;
+/**
+ * Persist TTS bytes to cache and return a `file://` URI for react-native-video.
+ * Data URIs are unreliable for MPEG on iOS.
+ */
+export declare function writeTtsCacheFile(result: PostTextTtsResult): Promise<string>;
+export declare function removeTtsCacheFile(uri: string): Promise<void>;
+//# sourceMappingURL=writeTtsCacheFile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"writeTtsCacheFile.d.ts","sourceRoot":"","sources":["../../src/voice/writeTtsCacheFile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AAkB3G,wBAAgB,uBAAuB,IAAI,OAAO,CAEjD;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,CAWlF;AAED,wBAAsB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAOnE"}

package/dist/voice/writeTtsCacheFile.js

@@ -0,0 +1,37 @@
+import { buildTextTtsDataUri } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+let blobUtil = null;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    blobUtil = require('react-native-blob-util').default;
+}
+catch {
+    blobUtil = null;
+}
+export function isTtsCacheFileSupported() {
+    return blobUtil != null;
+}
+/**
+ * Persist TTS bytes to cache and return a `file://` URI for react-native-video.
+ * Data URIs are unreliable for MPEG on iOS.
+ */
+export async function writeTtsCacheFile(result) {
+    if (!blobUtil) {
+        return buildTextTtsDataUri(result.audio, result.mimeType);
+    }
+    const dataUri = buildTextTtsDataUri(result.audio, result.mimeType);
+    const comma = dataUri.indexOf(',');
+    const base64 = comma >= 0 ? dataUri.slice(comma + 1) : '';
+    const path = `${blobUtil.fs.dirs.CacheDir}/nxtlinq-tts-${Date.now()}.mp3`;
+    await blobUtil.fs.writeFile(path, base64, 'base64');
+    return path.startsWith('file://') ? path : `file://${path}`;
+}
+export async function removeTtsCacheFile(uri) {
+    if (!blobUtil || !uri.startsWith(blobUtil.fs.dirs.CacheDir))
+        return;
+    try {
+        await blobUtil.fs.unlink(uri.replace(/^file:\/\//, ''));
+    }
+    catch {
+        /* noop */
+    }
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@bytexbyte/nxtlinq-ai-agent-ui-react-native-development",
+  "version": "0.2.0",
+  "description": "Official React Native UI for nxtlinq AI Agent — drop-in assistant widget",
+  "main": "dist/index.js",
+  "react-native": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "yarn build"
+  },
+  "keywords": [
+    "nxtlinq",
+    "ai-agent",
+    "react-native",
+    "ui",
+    "sdk"
+  ],
+  "author": "ByteXByte",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://dev.azure.com/nxtlinqLLC/nxtlinq/_git/nxtlinq-AI-Agent-SDK",
+    "directory": "packages/ai-agent-ui-react-native"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=1.17.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-vector-icons": ">=10.0.0",
+    "react-native-video": ">=6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-video": {
+      "optional": true
+    },
+    "react-native-webrtc": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@bytexbyte/nxtlinq-ai-agent-core-development": "^0.2.0",
+    "@bytexbyte/nxtlinq-ai-agent-react-native-development": "^0.2.0"
+  },
+  "devDependencies": {
+    "@bytexbyte/nxtlinq-ai-agent-core-development": "workspace:^",
+    "@bytexbyte/nxtlinq-ai-agent-react-native-development": "workspace:^",
+    "@types/react": "^18.2.64",
+    "@types/react-native-vector-icons": "^6.4.18",
+    "react": "^18.2.0",
+    "react-native-vector-icons": "^10.2.0",
+    "typescript": "^5.4.2"
+  }
+}

package/src/NxtlinqAgentAssistant.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { NxtlinqAgentProvider } from '@bytexbyte/nxtlinq-ai-agent-react-native-development';
+import { AgentAssistantShell } from './components/AgentAssistantShell';
+import type { NxtlinqAgentAssistantProps } from './types';
+
+/**
+ * Drop-in React Native assistant UI wired to `@bytexbyte/nxtlinq-ai-agent-react-native-development`.
+ *
+ * @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}
+ *       enableVoice
+ *       loadHistoryOnMount
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function NxtlinqAgentAssistant({
+  title,
+  placeholder,
+  presetMessages,
+  loadHistoryOnMount = false,
+  historyLast,
+  enableVoice = true,
+  startInVoiceMode = false,
+  startWithMicMuted = true,
+  holdMicDuringAssistant = true,
+  showVoiceWaveform = true,
+  showVoiceImageInput = false,
+  voiceDemoProductImageUrl,
+  voiceAutoGreet,
+  iosSilentAudioSource,
+  voiceRemoteAudioGain,
+  textTtsVolume,
+  theme,
+  style,
+  headerStyle,
+  onMessage,
+  onError,
+  onToolUse,
+  children,
+  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}
+      onToolUse={onToolUse}
+      {...agentConfig}
+    >
+      <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}
+    </NxtlinqAgentProvider>
+  );
+}

package/src/components/AgentAssistantShell.tsx

@@ -0,0 +1,167 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import {
+  AgentAssistantProvider,
+  useAgentAssistant,
+} from '../context/AgentAssistantContext';
+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';
+
+export type AgentAssistantShellProps = Pick<
+  NxtlinqAgentAssistantProps,
+  | 'title'
+  | 'placeholder'
+  | 'presetMessages'
+  | 'enableVoice'
+  | 'theme'
+  | 'style'
+  | 'headerStyle'
+  | 'loadHistoryOnMount'
+  | 'historyLast'
+  | 'startInVoiceMode'
+  | 'startWithMicMuted'
+  | 'holdMicDuringAssistant'
+  | 'showVoiceWaveform'
+  | 'showVoiceImageInput'
+  | 'voiceDemoProductImageUrl'
+  | 'voiceAutoGreet'
+  | 'iosSilentAudioSource'
+  | 'voiceRemoteAudioGain'
+  | 'textTtsVolume'
+> & {
+  webrtcEnabled: boolean;
+};
+
+function AgentAssistantInner({
+  title,
+  headerStyle,
+  style,
+  loadHistoryOnMount,
+  historyLast,
+  startInVoiceMode,
+  startWithMicMuted,
+  showVoiceWaveform,
+  showVoiceImageInput,
+  voiceDemoProductImageUrl,
+  voiceAutoGreet,
+  iosSilentAudioSource,
+  voiceRemoteAudioGain,
+}: AgentAssistantShellProps): React.ReactElement {
+  const {
+    theme,
+    loadHistory,
+    startVoice,
+    isVoiceAvailable,
+  } = useAgentAssistant();
+
+  const [historyReady, setHistoryReady] = React.useState(!loadHistoryOnMount);
+
+  useEffect(() => {
+    if (loadHistoryOnMount) {
+      void loadHistory({ last: historyLast ?? 50 }).finally(() => setHistoryReady(true));
+    }
+  }, [loadHistory, loadHistoryOnMount, historyLast]);
+
+  const autoGreetConfig = React.useMemo(() => {
+    if (!voiceAutoGreet) return null;
+    if (voiceAutoGreet === true) {
+      return {
+        productImageUrl: voiceDemoProductImageUrl,
+        skipUserMessage: true,
+      };
+    }
+    return {
+      ...voiceAutoGreet,
+      productImageUrl: voiceAutoGreet.productImageUrl ?? voiceDemoProductImageUrl,
+      skipUserMessage: voiceAutoGreet.skipUserMessage ?? true,
+    };
+  }, [voiceAutoGreet, voiceDemoProductImageUrl]);
+
+  const voiceAutoStartRef = React.useRef(false);
+  useEffect(() => {
+    if (!startInVoiceMode || !isVoiceAvailable || voiceAutoStartRef.current) {
+      return;
+    }
+    voiceAutoStartRef.current = true;
+    void startVoice();
+  }, [startInVoiceMode, isVoiceAvailable, startVoice]);
+
+  return (
+    <View style={[styles.root, { backgroundColor: theme.colors.background }, style]}>
+      {iosSilentAudioSource ? (
+        <AudioSessionWaker silentSource={iosSilentAudioSource} />
+      ) : null}
+      <View
+        style={[
+          styles.header,
+          { borderBottomColor: theme.colors.border, backgroundColor: theme.colors.surface },
+          headerStyle,
+        ]}
+      >
+        <Text
+          style={{
+            fontSize: theme.typography.titleSize,
+            fontWeight: '600',
+            color: theme.colors.assistantText,
+          }}
+        >
+          {title ?? 'AI Assistant'}
+        </Text>
+      </View>
+      <PresetMessageChips />
+      <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}
+    </View>
+  );
+}
+
+export function AgentAssistantShell(props: AgentAssistantShellProps): React.ReactElement {
+  return (
+    <AgentAssistantProvider
+      ui={{
+        title: props.title,
+        placeholder: props.placeholder,
+        presetMessages: props.presetMessages,
+        enableVoice: props.enableVoice,
+        theme: props.theme,
+        startWithMicMuted: props.startWithMicMuted,
+        holdMicDuringAssistant: props.holdMicDuringAssistant,
+        textTtsVolume: props.textTtsVolume,
+        voiceRemoteAudioGain: props.voiceRemoteAudioGain,
+        webrtcEnabled: props.webrtcEnabled,
+      }}
+    >
+      <AgentAssistantInner {...props} />
+    </AgentAssistantProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, minHeight: 0 },
+  header: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+});

package/src/components/AgentComposer.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+
+export function AgentComposer(): React.ReactElement {
+  const {
+    theme,
+    placeholder,
+    inputText,
+    setInputText,
+    sendText,
+    isLoading,
+    isVoiceAvailable,
+    interactionMode,
+    startVoice,
+    isVoiceConnecting,
+  } = useAgentAssistant();
+
+  if (interactionMode === 'voice') {
+    return <View />;
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          borderTopColor: theme.colors.border,
+          backgroundColor: theme.colors.surface,
+          padding: theme.spacing.md,
+        },
+      ]}
+    >
+      <View style={styles.row}>
+        <TextInput
+          style={[
+            styles.input,
+            {
+              borderColor: theme.colors.border,
+              borderRadius: theme.radius.panel,
+              fontSize: theme.typography.bodySize,
+              color: theme.colors.assistantText,
+            },
+          ]}
+          value={inputText}
+          onChangeText={setInputText}
+          placeholder={placeholder}
+          placeholderTextColor={theme.colors.mutedText}
+          multiline
+          maxLength={4000}
+          editable={!isLoading}
+        />
+        <Pressable
+          onPress={() => void sendText()}
+          disabled={isLoading || !inputText.trim()}
+          style={({ pressed }: { pressed: boolean }) => [
+            styles.sendButton,
+            {
+              backgroundColor: theme.colors.primary,
+              borderRadius: theme.radius.button,
+              opacity: pressed || isLoading || !inputText.trim() ? 0.5 : 1,
+            },
+          ]}
+        >
+          {isLoading ? (
+            <ActivityIndicator color={theme.colors.primaryText} size="small" />
+          ) : (
+            <Text style={{ color: theme.colors.primaryText, fontWeight: '600' }}>Send</Text>
+          )}
+        </Pressable>
+      </View>
+      {isVoiceAvailable ? (
+        <Pressable
+          onPress={() => {
+            startVoice().catch((err: unknown) => {
+              const message = err instanceof Error ? err.message : String(err);
+              console.warn('[nxtlinq] startVoice failed:', message);
+            });
+          }}
+          disabled={isVoiceConnecting}
+          style={styles.voiceLink}
+        >
+          <Text style={{ color: theme.colors.primary, fontSize: theme.typography.captionSize }}>
+            {isVoiceConnecting ? 'Connecting voice…' : 'Switch to voice mode'}
+          </Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { borderTopWidth: StyleSheet.hairlineWidth },
+  row: { flexDirection: 'row', alignItems: 'flex-end', gap: 8 },
+  input: {
+    flex: 1,
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    maxHeight: 120,
+  },
+  sendButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minWidth: 64,
+  },
+  voiceLink: { marginTop: 8, alignSelf: 'center' },
+});

package/src/components/AgentMessageList.tsx

@@ -0,0 +1,187 @@
+import type { Message } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { useAgentAssistant } from '../context/AgentAssistantContext';
+import { SpeakerIcon } from './VoiceIcons';
+
+function MessageBubble({ message }: { message: Message }): React.ReactElement {
+  const {
+    theme,
+    interactionMode,
+    playMessageTts,
+    playingMessageId,
+    isTextTtsAvailable,
+  } = useAgentAssistant();
+  const isUser = message.role === 'user';
+  const displayText =
+    message.partialContent && message.isStreaming
+      ? message.partialContent
+      : message.content;
+  const [ttsBusy, setTtsBusy] = React.useState(false);
+  const [ttsError, setTtsError] = React.useState<string | null>(null);
+  const requestRef = useRef(0);
+
+  const playTts = useCallback(async () => {
+    const text = (displayText ?? '').trim();
+    if (!text || ttsBusy) return;
+    if (!isTextTtsAvailable) {
+      setTtsError('Install react-native-video for TTS playback');
+      return;
+    }
+    const requestId = ++requestRef.current;
+    setTtsBusy(true);
+    setTtsError(null);
+    try {
+      await playMessageTts(message.id, text);
+    } catch (e) {
+      if (requestRef.current === requestId) {
+        setTtsError(e instanceof Error ? e.message : String(e));
+      }
+    } finally {
+      if (requestRef.current === requestId) {
+        setTtsBusy(false);
+      }
+    }
+  }, [displayText, ttsBusy, isTextTtsAvailable, playMessageTts, message.id]);
+
+  const showTts =
+    !isUser &&
+    Boolean((displayText ?? '').trim()) &&
+    !message.isStreaming;
+
+  const isPlaying = playingMessageId === message.id;
+
+  return (
+    <View
+      style={[
+        styles.bubbleRow,
+        isUser ? styles.bubbleRowUser : styles.bubbleRowAssistant,
+      ]}
+    >
+      <View
+        style={[
+          styles.bubble,
+          {
+            backgroundColor: isUser
+              ? theme.colors.userBubble
+              : theme.colors.assistantBubble,
+            borderRadius: theme.radius.bubble,
+            maxWidth: '85%',
+          },
+        ]}
+      >
+        <Text
+          style={{
+            color: isUser ? theme.colors.userText : theme.colors.assistantText,
+            fontSize: theme.typography.bodySize,
+          }}
+        >
+          {displayText || ' '}
+        </Text>
+        {message.isStreaming && message.streamingStatus ? (
+          <Text
+            style={{
+              color: theme.colors.mutedText,
+              fontSize: theme.typography.captionSize,
+              marginTop: theme.spacing.xs,
+            }}
+          >
+            {message.streamingStatus}
+          </Text>
+        ) : null}
+        {message.error ? (
+          <Text style={{ color: theme.colors.error, fontSize: theme.typography.captionSize }}>
+            {message.error}
+          </Text>
+        ) : null}
+        {showTts ? (
+          <View style={styles.ttsRow}>
+            <Pressable
+              onPress={() => void playTts()}
+              disabled={ttsBusy}
+              style={({ pressed }) => [
+                styles.ttsBtn,
+                { opacity: pressed || ttsBusy ? 0.5 : 1 },
+              ]}
+            >
+              {ttsBusy ? (
+                <ActivityIndicator size="small" color={theme.colors.primary} />
+              ) : (
+                <SpeakerIcon
+                  size={22}
+                  color={isPlaying ? theme.colors.voiceSpeaking : theme.colors.primary}
+                />
+              )}
+            </Pressable>
+            {ttsError ? (
+              <Text
+                style={{
+                  color: theme.colors.error,
+                  fontSize: theme.typography.captionSize - 1,
+                  flex: 1,
+                }}
+                numberOfLines={2}
+              >
+                {ttsError}
+              </Text>
+            ) : null}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+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]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+      <FlatList
+        ref={listRef}
+        data={messages}
+        keyExtractor={(item: Message) => item.id}
+        renderItem={({ item }: { item: Message }) => <MessageBubble message={item} />}
+        contentContainerStyle={{ padding: theme.spacing.md, paddingBottom: theme.spacing.lg }}
+        ListEmptyComponent={
+          <Text style={[styles.empty, { color: theme.colors.mutedText }]}>
+            Send a message to start the conversation.
+          </Text>
+        }
+        ListFooterComponent={
+          isLoading ? (
+            <ActivityIndicator
+              style={{ marginTop: theme.spacing.sm }}
+              color={theme.colors.primary}
+            />
+          ) : null
+        }
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, minHeight: 0 },
+  bubbleRow: { marginBottom: 10 },
+  bubbleRowUser: { alignItems: 'flex-end' },
+  bubbleRowAssistant: { alignItems: 'flex-start' },
+  bubble: { paddingHorizontal: 14, paddingVertical: 10 },
+  ttsRow: { flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 6 },
+  ttsBtn: { paddingVertical: 2 },
+  empty: { textAlign: 'center', marginTop: 40, fontSize: 15 },
+});