@alia.onl/sdk 3.1.2 → 3.1.4

package/package.json

@@ -1,45 +1,54 @@
 {
   "name": "@alia.onl/sdk",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "description": "Alia AI chat SDK — reusable chat UI, voice, and streaming components for Oxy apps",
   "main": "src/index.ts",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
   "types": "src/index.ts",
+  "files": [
+    "src",
+    "tsconfig.json"
+  ],
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@tanstack/query-async-storage-persister": "^5.100.0",
-    "@tanstack/react-query": "^5.100.0",
-    "@tanstack/react-query-persist-client": "^5.100.0",
-    "react-native-markdown-display": "^7.0.2-0",
-    "zustand": ">=4"
+    "@radix-ui/react-icons": "^1.3.2",
+    "@tanstack/query-async-storage-persister": "^5.101.2",
+    "@tanstack/react-query": "^5.101.2",
+    "@tanstack/react-query-persist-client": "^5.101.2",
+    "react-native-markdown-display": "^7.0.2",
+    "zustand": "^5.0.14"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-native": ">=0.73",
-    "@oxyhq/services": "^10.2.3",
-    "expo-blur": "*",
-    "react-native-reanimated": ">=3",
-    "react-native-gesture-handler": ">=2",
-    "react-native-safe-area-context": ">=4",
-    "react-native-keyboard-controller": ">=1",
-    "react-native-svg": ">=13",
-    "livekit-client": ">=2.0.0",
-    "expo-audio": ">=0.1.0",
-    "nativewind": ">=4",
-    "clsx": ">=2",
-    "tailwind-merge": ">=2",
-    "class-variance-authority": ">=0.7",
-    "zeego": ">=3",
-    "expo-image": ">=1",
-    "expo-image-picker": ">=15",
-    "expo-document-picker": ">=12",
-    "expo-clipboard": ">=6",
-    "lucide-react-native": ">=0.300",
-    "@radix-ui/react-dropdown-menu": ">=2"
+    "react": "^19.2.3",
+    "react-native": "^0.86.0",
+    "@oxyhq/services": "^20.0.0",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "socket.io-client": "^4.8.3",
+    "expo-font": "^57.0.0",
+    "expo-blur": "^57.0.0",
+    "react-native-reanimated": "^4.5.0",
+    "react-native-gesture-handler": "^2.32.0",
+    "react-native-safe-area-context": "^5.8.0",
+    "react-native-keyboard-controller": "^1.21.9",
+    "react-native-svg": "^15.15.4",
+    "livekit-client": "^2.20.1",
+    "expo-audio": "^57.0.0",
+    "nativewind": "^5.0.0-preview.3",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0",
+    "class-variance-authority": "^0.7.1",
+    "zeego": "^3.0.6",
+    "expo-image": "^57.0.0",
+    "expo-image-picker": "^57.0.2",
+    "expo-document-picker": "^57.0.0",
+    "expo-clipboard": "^57.0.0",
+    "lucide-react-native": "^0.562.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.20",
+    "expo-haptics": "*"
   },
   "peerDependenciesMeta": {
     "livekit-client": {
@@ -83,6 +92,9 @@
     },
     "@radix-ui/react-dropdown-menu": {
       "optional": true
+    },
+    "expo-haptics": {
+      "optional": true
     }
   },
   "devDependencies": {

package/src/components/AliaChatContent.tsx

@@ -2,12 +2,11 @@
  * Shared chat content component used by both AliaChatSheet and AliaChatScreen.
  *
  * Owns all chat + voice state internally. Containers only handle
- * layout chrome (sheet modal, full-screen SafeAreaView, headers).
+ * layout chrome (sheet modal, full-screen SafeAreaView) and pass a `header`
+ * render prop that receives the live mark state.
  */
 
 import React, {
-  forwardRef,
-  useImperativeHandle,
   useState,
   useCallback,
   useEffect,
@@ -15,7 +14,7 @@ import React, {
   useRef,
 } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useSharedValue, withTiming, Easing } from 'react-native-reanimated';
+import { useSharedValue } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 import { Volume2 } from 'lucide-react-native';
 import { useAliaChat, type UseAliaChatOptions } from '../hooks/useAliaChat';
@@ -23,15 +22,15 @@ import { useVoiceRoom } from '../hooks/useVoiceRoom';
 import { useAudioLevelMonitor } from '../hooks/useAudioLevelMonitor';
 import { useAudioLevels } from '../hooks/useAudioLevels';
 import { useTTS } from '../hooks/useTTS';
-import { useSTTStore } from '../hooks/useSpeechToText';
+import { useAmbientWave } from '../hooks/useAmbientWave';
 import { VoiceOverlay } from './voice/VoiceOverlay';
 import { VoiceControls } from './voice/VoiceControls';
 import { AliaChatMessageList } from './AliaChatMessageList';
 import { AliaWelcomeMessage, type WelcomeSuggestion } from './AliaWelcomeMessage';
 import { PromptInput } from './ui/prompt-input/prompt-input';
 import { Button } from './ui/button';
-import type { AliaExpression } from './AliaFace';
-import type { ChatMessage } from '../types';
+import type { AliaMarkState } from './AliaMark';
+import type { ChatMessage, VoiceMessage } from '../types';
 import type { Completion } from './ui/prompt-input/context';
 
 export interface AliaChatContentProps {
@@ -59,18 +58,16 @@ export interface AliaChatContentProps {
   onToolResultPress?: (messageId: string) => void;
   /** Override markdown renderer (app passes CustomMarkdown) */
   renderMarkdown?: (content: string) => React.ReactNode;
-}
-
-export interface AliaChatContentRef {
-  messages: ChatMessage[];
-  isStreaming: boolean;
-  isVoiceActive: boolean;
-  faceExpression: AliaExpression;
-  clear: () => void;
+  /** Header bar render prop — receives live mark state, message presence, and the clear handler. */
+  header?: (state: { markState: AliaMarkState; hasMessages: boolean; clear: () => void }) => React.ReactNode;
+  /** Theme primary color hex — forwarded to the ambient wave overlay palette. */
+  primaryColor?: string;
+  /** Dark-mode flag — forwarded to the ambient wave overlay. */
+  isDarkMode?: boolean;
 }
 
 /** Adapt a voice message into the chat message format. */
-function adaptVoiceMessage(vm: any): ChatMessage {
+function adaptVoiceMessage(vm: VoiceMessage): ChatMessage {
   return {
     id: vm.id,
     role: vm.role,
@@ -82,266 +79,231 @@ function adaptVoiceMessage(vm: any): ChatMessage {
   };
 }
 
-export const AliaChatContent = forwardRef<AliaChatContentRef, AliaChatContentProps>(
-  ({
-    clientContext,
-    model,
-    apiUrl,
-    scrollOffsetY: externalScrollOffsetY,
-    useSuggestions,
-    onSuggestionUsed,
-    onError,
-    welcomeGreeting,
-    welcomeSubtitle,
-    welcomeSuggestions,
-    onEditMessage,
-    onThumbsUp,
-    onThumbsDown,
-    onApprovePlan,
-    onRejectPlan,
-    onToolResultPress,
-    renderMarkdown,
-  }, ref) => {
-    // ── Chat ──
-    const chatOptions: UseAliaChatOptions = { apiUrl, model, clientContext };
-    const { messages, setMessages, send, isStreaming, stop, clear } = useAliaChat(chatOptions);
+export function AliaChatContent({
+  clientContext,
+  model,
+  apiUrl,
+  scrollOffsetY: externalScrollOffsetY,
+  useSuggestions,
+  onSuggestionUsed,
+  onError,
+  welcomeGreeting,
+  welcomeSubtitle,
+  welcomeSuggestions,
+  onEditMessage,
+  onThumbsUp,
+  onThumbsDown,
+  onApprovePlan,
+  onRejectPlan,
+  onToolResultPress,
+  renderMarkdown,
+  header,
+  primaryColor,
+  isDarkMode,
+}: AliaChatContentProps) {
+  // ── Chat ──
+  const chatOptions: UseAliaChatOptions = { apiUrl, model, clientContext };
+  const { messages, setMessages, send, isStreaming, stop, clear } = useAliaChat(chatOptions);
 
-    // ── Input state ──
-    const [inputValue, setInputValue] = useState('');
+  // ── Input state ──
+  const [inputValue, setInputValue] = useState('');
 
-    const handleSubmit = useCallback(() => {
-      const text = inputValue.trim();
-      if (!text) return;
-      send(text);
-      setInputValue('');
-    }, [inputValue, send]);
+  const handleSubmit = useCallback(() => {
+    const text = inputValue.trim();
+    if (!text) return;
+    send(text);
+    setInputValue('');
+  }, [inputValue, send]);
 
-    // ── Scroll offset (use external if provided, else internal) ──
-    const internalScrollOffsetY = useSharedValue(0);
-    const scrollOffsetY = externalScrollOffsetY ?? internalScrollOffsetY;
+  // ── Scroll offset (use external if provided, else internal) ──
+  const internalScrollOffsetY = useSharedValue(0);
+  const scrollOffsetY = externalScrollOffsetY ?? internalScrollOffsetY;
 
-    // ── Voice room ──
-    const voiceRoom = useVoiceRoom({ apiUrl });
-    const { captureLevel, playbackLevel } = useAudioLevelMonitor(voiceRoom.room, voiceRoom.isConnected);
-    const { waveAmplitude } = useAudioLevels({
-      captureLevel,
-      playbackLevel,
-      agentState: voiceRoom.agentState,
-      isConnected: voiceRoom.isConnected,
-    });
+  // ── Voice room ──
+  const voiceRoom = useVoiceRoom({ apiUrl });
+  const { captureLevel, playbackLevel } = useAudioLevelMonitor(voiceRoom.room, voiceRoom.isConnected);
+  const { waveAmplitude } = useAudioLevels({
+    captureLevel,
+    playbackLevel,
+    agentState: voiceRoom.agentState,
+    isConnected: voiceRoom.isConnected,
+  });
 
-    // ── TTS ──
-    const tts = useTTS({ apiUrl });
+  // ── TTS ──
+  const tts = useTTS({ apiUrl });
 
-    // ── STT wave overlay ──
-    const sttIsRecording = useSTTStore((s) => s.isRecording);
-    const sttMetering = useSTTStore((s) => s.metering);
-    const sttWaveAmplitude = useSharedValue(0);
+  // ── Voice mode state ──
+  const [isVoiceActive, setIsVoiceActive] = useState(false);
+  const textSnapshotRef = useRef<ChatMessage[]>([]);
 
-    useEffect(() => {
-      if (!sttIsRecording) {
-        sttWaveAmplitude.value = withTiming(0, { duration: 300 });
-        return;
-      }
-      const target = Math.max(0.08, sttMetering);
-      const duration = target > sttWaveAmplitude.value ? 60 : 200;
-      sttWaveAmplitude.value = withTiming(target, {
-        duration,
-        easing: Easing.bezier(0.33, 1, 0.68, 1),
-      });
-    }, [sttIsRecording, sttMetering]);
+  // Merge voice messages into chat messages
+  useEffect(() => {
+    if (!isVoiceActive) return;
+    const adapted = voiceRoom.messages.map(adaptVoiceMessage);
+    setMessages([...textSnapshotRef.current, ...adapted]);
+  }, [voiceRoom.messages, isVoiceActive, setMessages]);
 
-    // ── Voice mode state ──
-    const [isVoiceActive, setIsVoiceActive] = useState(false);
-    const textSnapshotRef = useRef<ChatMessage[]>([]);
+  // Auto-deactivate on error
+  useEffect(() => {
+    if (!isVoiceActive) return;
+    if (voiceRoom.error) {
+      deactivateVoice();
+    } else if (voiceRoom.roomState === 'error') {
+      deactivateVoice();
+    }
+  }, [voiceRoom.error, voiceRoom.roomState, isVoiceActive]);
 
-    // Merge voice messages into chat messages
-    useEffect(() => {
-      if (!isVoiceActive) return;
-      const adapted = voiceRoom.messages.map(adaptVoiceMessage);
-      setMessages([...textSnapshotRef.current, ...adapted]);
-    }, [voiceRoom.messages, isVoiceActive, setMessages]);
+  // Auto-deactivate on unexpected disconnection
+  useEffect(() => {
+    if (!isVoiceActive) return;
+    if (voiceRoom.roomState === 'disconnected' && textSnapshotRef.current.length > 0) {
+      deactivateVoice();
+    }
+  }, [voiceRoom.roomState, isVoiceActive]);
 
-    // Auto-deactivate on error
-    useEffect(() => {
-      if (!isVoiceActive) return;
-      if (voiceRoom.error) {
-        deactivateVoice();
-      } else if (voiceRoom.roomState === 'error') {
-        deactivateVoice();
-      }
-    }, [voiceRoom.error, voiceRoom.roomState, isVoiceActive]);
+  const activateVoice = useCallback(() => {
+    if (isVoiceActive || voiceRoom.roomState === 'connecting') return;
+    textSnapshotRef.current = [...messages];
+    setIsVoiceActive(true);
+    voiceRoom.connect();
+  }, [isVoiceActive, voiceRoom, messages]);
 
-    // Auto-deactivate on unexpected disconnection
-    useEffect(() => {
-      if (!isVoiceActive) return;
-      if (voiceRoom.roomState === 'disconnected' && textSnapshotRef.current.length > 0) {
-        deactivateVoice();
-      }
-    }, [voiceRoom.roomState, isVoiceActive]);
+  const deactivateVoice = useCallback(() => {
+    voiceRoom.disconnect();
+    setIsVoiceActive(false);
+    textSnapshotRef.current = [];
+  }, [voiceRoom]);
 
-    const activateVoice = useCallback(() => {
-      if (isVoiceActive || voiceRoom.roomState === 'connecting') return;
-      textSnapshotRef.current = [...messages];
-      setIsVoiceActive(true);
-      voiceRoom.connect();
-    }, [isVoiceActive, voiceRoom, messages]);
+  // ── TTS read aloud handler ──
+  const handleReadAloud = useCallback(
+    (messageId: string, text: string) => {
+      tts.readAloud(messageId, text);
+    },
+    [tts],
+  );
 
-    const deactivateVoice = useCallback(() => {
-      voiceRoom.disconnect();
-      setIsVoiceActive(false);
-      textSnapshotRef.current = [];
-    }, [voiceRoom]);
+  // ── Mark state (drives the header brand mark) ──
+  const markState = useMemo<AliaMarkState>(() => {
+    if (isVoiceActive) {
+      if (voiceRoom.agentState === 'speaking') return 'writing';
+      if (voiceRoom.agentState === 'thinking') return 'thinking';
+      return 'idle';
+    }
+    if (!isStreaming) return 'idle';
+    const lastMsg = messages[messages.length - 1];
+    if (lastMsg?.role === 'assistant' && lastMsg.toolInvocations?.some((t) => t.state === 'call'))
+      return 'working';
+    if (lastMsg?.thinking) return 'thinking';
+    return 'writing';
+  }, [messages, isStreaming, isVoiceActive, voiceRoom.agentState]);
 
-    // ── TTS read aloud handler ──
-    const handleReadAloud = useCallback(
-      (messageId: string, text: string) => {
-        tts.readAloud(messageId, text);
-      },
-      [tts],
+  const welcomeComponent = useMemo(() => {
+    if (!welcomeGreeting || messages.length > 0) return undefined;
+    return (
+      <AliaWelcomeMessage
+        greeting={welcomeGreeting}
+        subtitle={welcomeSubtitle}
+        suggestions={welcomeSuggestions}
+        onSuggestionPress={send}
+      />
     );
+  }, [welcomeGreeting, welcomeSubtitle, welcomeSuggestions, send, messages.length]);
 
-    // ── Face expression ──
-    const faceExpression = useMemo<AliaExpression>(() => {
-      if (isVoiceActive) {
-        if (voiceRoom.agentState === 'speaking') return 'Writing E';
-        if (voiceRoom.agentState === 'thinking') return 'Thinking';
-        return 'Idle A';
-      }
-      if (!isStreaming) return 'Idle A';
-      const lastMsg = messages[messages.length - 1];
-      if (lastMsg?.role === 'assistant' && lastMsg.toolInvocations?.some((t) => t.state === 'call'))
-        return 'Searching A';
-      if (lastMsg?.thinking) return 'Thinking';
-      return 'Writing E';
-    }, [messages, isStreaming, isVoiceActive, voiceRoom.agentState]);
-
-    const welcomeComponent = useMemo(() => {
-      if (!welcomeGreeting || messages.length > 0) return undefined;
-      return (
-        <AliaWelcomeMessage
-          greeting={welcomeGreeting}
-          subtitle={welcomeSubtitle}
-          suggestions={welcomeSuggestions}
-          onSuggestionPress={send}
-        />
-      );
-    }, [welcomeGreeting, welcomeSubtitle, welcomeSuggestions, send, messages.length]);
+  // ── Ambient wave — one persistent overlay across idle/voice/TTS/STT ──
+  const wave = useAmbientWave({
+    voice: {
+      isActive: isVoiceActive,
+      isConnected: voiceRoom.isConnected,
+      agentState: voiceRoom.agentState,
+      waveAmplitude,
+    },
+    isTTSPlaying: tts.playbackState === 'playing',
+    ttsWaveAmplitude: tts.ttsWaveAmplitude,
+    isGenerating: isStreaming,
+  });
 
-    // ── Overlay state ──
-    const showVoiceOverlay = isVoiceActive;
-    const showTTSOverlay = !isVoiceActive && tts.playbackState === 'playing';
-    const showSTTOverlay = !isVoiceActive && tts.playbackState !== 'playing' && sttIsRecording;
+  // ── Voice activate button for empty submit ──
+  const voiceActivateButton = useMemo(
+    () => (
+      <Button
+        size="icon"
+        onPress={activateVoice}
+        className="h-8 w-8 rounded-full"
+      >
+        <Volume2 size={16} color="white" />
+      </Button>
+    ),
+    [activateVoice],
+  );
 
-    // ── Voice activate button for empty submit ──
-    const voiceActivateButton = useMemo(
-      () => (
-        <Button
-          size="icon"
-          onPress={activateVoice}
-          className="h-8 w-8 rounded-full"
-        >
-          <Volume2 size={16} color="white" />
-        </Button>
-      ),
-      [activateVoice],
-    );
+  return (
+    <View style={styles.container}>
+      {/* Header (render prop) */}
+      {header?.({ markState, hasMessages: messages.length > 0, clear })}
 
-    // ── Expose state to container ──
-    useImperativeHandle(
-      ref,
-      () => ({
-        messages,
-        isStreaming,
-        isVoiceActive,
-        faceExpression,
-        clear,
-      }),
-      [messages, isStreaming, isVoiceActive, faceExpression, clear],
-    );
+      {/* Persistent ambient wave overlay */}
+      <VoiceOverlay
+        waveAmplitude={wave.waveAmplitude}
+        agentState={wave.agentState}
+        intensity={wave.intensity}
+        primaryColor={primaryColor}
+        isDarkMode={isDarkMode}
+      />
 
-    return (
-      <View style={styles.container}>
-        {/* Voice/TTS/STT wave overlay */}
-        {showVoiceOverlay && (
-          <VoiceOverlay
-            waveAmplitude={waveAmplitude}
-            agentState={voiceRoom.agentState}
-            isConnected={voiceRoom.isConnected}
-          />
-        )}
-        {showTTSOverlay && (
-          <VoiceOverlay
-            waveAmplitude={tts.ttsWaveAmplitude}
-            agentState="speaking"
-            isConnected={true}
-          />
-        )}
-        {showSTTOverlay && (
-          <VoiceOverlay
-            waveAmplitude={sttWaveAmplitude}
-            agentState="listening"
-            isConnected={true}
-          />
-        )}
+      {/* Welcome or Messages */}
+      <AliaChatMessageList
+        messages={messages}
+        isStreaming={isStreaming}
+        scrollOffsetY={scrollOffsetY}
+        onReadAloud={handleReadAloud}
+        ttsActiveMessageId={tts.activeMessageId}
+        ttsPlaybackState={tts.playbackState}
+        onEditMessage={onEditMessage}
+        onThumbsUp={onThumbsUp}
+        onThumbsDown={onThumbsDown}
+        onApprovePlan={onApprovePlan}
+        onRejectPlan={onRejectPlan}
+        onToolResultPress={onToolResultPress}
+        renderMarkdown={renderMarkdown}
+        welcomeComponent={welcomeComponent}
+      />
 
-        {/* Welcome or Messages */}
-        <AliaChatMessageList
-          messages={messages}
-          isStreaming={isStreaming}
-          scrollOffsetY={scrollOffsetY}
-          onReadAloud={handleReadAloud}
-          ttsActiveMessageId={tts.activeMessageId}
-          ttsPlaybackState={tts.playbackState}
-          onEditMessage={onEditMessage}
-          onThumbsUp={onThumbsUp}
-          onThumbsDown={onThumbsDown}
-          onApprovePlan={onApprovePlan}
-          onRejectPlan={onRejectPlan}
-          onToolResultPress={onToolResultPress}
-          renderMarkdown={renderMarkdown}
-          welcomeComponent={welcomeComponent}
+      {/* Input or Voice Controls */}
+      {isVoiceActive ? (
+        <VoiceControls
+          roomState={voiceRoom.roomState}
+          agentState={voiceRoom.agentState}
+          isMuted={voiceRoom.isMuted}
+          cohostActive={voiceRoom.cohostActive}
+          currentSpeaker={voiceRoom.currentSpeaker}
+          roundComplete={voiceRoom.roundComplete}
+          onToggleMute={voiceRoom.toggleMute}
+          onEnableCohost={voiceRoom.enableCohost}
+          onDisableCohost={voiceRoom.disableCohost}
+          onContinueCohost={voiceRoom.continueCohost}
+          onEnd={deactivateVoice}
         />
-
-        {/* Input or Voice Controls */}
-        {isVoiceActive ? (
-          <VoiceControls
-            roomState={voiceRoom.roomState}
-            agentState={voiceRoom.agentState}
-            isMuted={voiceRoom.isMuted}
-            cohostActive={voiceRoom.cohostActive}
-            currentSpeaker={voiceRoom.currentSpeaker}
-            roundComplete={voiceRoom.roundComplete}
-            onToggleMute={voiceRoom.toggleMute}
-            onEnableCohost={voiceRoom.enableCohost}
-            onDisableCohost={voiceRoom.disableCohost}
-            onContinueCohost={voiceRoom.continueCohost}
-            onEnd={deactivateVoice}
+      ) : (
+        <View style={styles.inputContainer}>
+          <PromptInput
+            value={inputValue}
+            onValueChange={setInputValue}
+            onSubmit={handleSubmit}
+            isLoading={isStreaming}
+            onStop={stop}
+            emptyAction={voiceActivateButton}
+            placeholder="Ask Alia..."
+            apiUrl={apiUrl}
+            autocomplete={!!useSuggestions}
+            useSuggestions={useSuggestions}
+            onSuggestionUsed={onSuggestionUsed}
+            onError={onError}
           />
-        ) : (
-          <View style={styles.inputContainer}>
-            <PromptInput
-              value={inputValue}
-              onValueChange={setInputValue}
-              onSubmit={handleSubmit}
-              isLoading={isStreaming}
-              onStop={stop}
-              emptyAction={voiceActivateButton}
-              placeholder="Ask Alia..."
-              apiUrl={apiUrl}
-              autocomplete={!!useSuggestions}
-              useSuggestions={useSuggestions}
-              onSuggestionUsed={onSuggestionUsed}
-              onError={onError}
-            />
-          </View>
-        )}
-      </View>
-    );
-  },
-);
-
-AliaChatContent.displayName = 'AliaChatContent';
+        </View>
+      )}
+    </View>
+  );
+}
 
 const styles = StyleSheet.create({
   container: {

package/src/components/AliaChatMessageList.tsx

@@ -32,7 +32,12 @@ import { getTextFromContent, getImagesFromContent } from '../lib/content-utils';
 import type { ChatMessage, ToolInvocation } from '../types';
 
 // Resolve expo-image once at module load (optional peer dep)
-let ExpoImage: any = null;
+type ExpoImageProps = {
+  source: { uri: string };
+  className?: string;
+  contentFit?: string;
+};
+let ExpoImage: React.ComponentType<ExpoImageProps> | null = null;
 try { ExpoImage = require('expo-image').Image; } catch {}
 
 type PlaybackState = 'idle' | 'loading' | 'playing' | 'paused' | 'error';
@@ -433,7 +438,7 @@ export function AliaChatMessageList({
   useEffect(() => {
     if (messages.length > 0) {
       const timer = setTimeout(() => {
-        (scrollRef.current as any)?.scrollToEnd?.({ animated: true });
+        (scrollRef.current as { scrollToEnd?: (opts: { animated: boolean }) => void } | null)?.scrollToEnd?.({ animated: true });
       }, 100);
       return () => clearTimeout(timer);
     }