@alia.onl/sdk 3.1.7 → 4.0.1

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@alia.onl/sdk",
-  "version": "3.1.7",
+  "version": "4.0.1",
   "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",
+  "exports": {
+    ".": "./src/index.ts",
+    "./voice": "./src/voice.ts",
+    "./package.json": "./package.json"
+  },
   "files": [
     "src",
     "tsconfig.json"

package/src/components/AliaChatMessageList.tsx

@@ -37,8 +37,14 @@ type ExpoImageProps = {
   className?: string;
   contentFit?: string;
 };
+// expo-image is an optional peer dependency: SDK-only consumers that never render
+// inline images may not install it. Degrade to skipping images when it can't be required.
 let ExpoImage: React.ComponentType<ExpoImageProps> | null = null;
-try { ExpoImage = require('expo-image').Image; } catch {}
+try {
+  ExpoImage = require('expo-image').Image;
+} catch {
+  // Optional peer dependency absent — inline images are simply not rendered.
+}
 
 type PlaybackState = 'idle' | 'loading' | 'playing' | 'paused' | 'error';
 
@@ -93,7 +99,7 @@ function ToolBullet({ isRunning }: { isRunning: boolean }) {
 
 // ── User Bubble ──
 
-function UserBubble({
+const UserBubble = React.memo(function UserBubble({
   message,
   text,
   isEditing,
@@ -111,10 +117,10 @@ function UserBubble({
   isEditing: boolean;
   editedContent: string;
   onEditedContentChange: (text: string) => void;
-  onSaveEdit: () => void;
+  onSaveEdit: (messageId: string) => void;
   onCancelEdit: () => void;
-  onStartEdit: () => void;
-  onCopy: () => void;
+  onStartEdit: (messageId: string, content: string) => void;
+  onCopy: (text: string, messageId: string) => void;
   copiedMessageId: string | null;
   showEditButton: boolean;
 }) {
@@ -136,7 +142,7 @@ function UserBubble({
             <View className="flex-row gap-2 mt-2">
               <Pressable
                 className="px-3 py-1.5 rounded-lg bg-primary"
-                onPress={onSaveEdit}
+                onPress={() => onSaveEdit(message.id)}
               >
                 <Text className="text-xs text-primary-foreground">Save</Text>
               </Pressable>
@@ -179,7 +185,7 @@ function UserBubble({
         <View className="flex-row gap-1">
           <Pressable
             className="p-1.5 rounded-lg active:bg-muted"
-            onPress={onCopy}
+            onPress={() => onCopy(text, message.id)}
           >
             {copiedMessageId === message.id ? (
               <Check size={14} className="text-green-500" />
@@ -190,7 +196,7 @@ function UserBubble({
           {showEditButton && (
             <Pressable
               className="p-1.5 rounded-lg active:bg-muted"
-              onPress={onStartEdit}
+              onPress={() => onStartEdit(message.id, text)}
             >
               <Pencil size={14} className="text-muted-foreground" />
             </Pressable>
@@ -199,11 +205,11 @@ function UserBubble({
       )}
     </View>
   );
-}
+});
 
 // ── Assistant Message ──
 
-function AssistantMessage({
+const AssistantMessage = React.memo(function AssistantMessage({
   message,
   messageText,
   isStreamingThis,
@@ -229,7 +235,7 @@ function AssistantMessage({
   onReadAloud?: (messageId: string, text: string) => void;
   ttsActiveMessageId?: string | null;
   ttsPlaybackState?: PlaybackState;
-  onCopy: () => void;
+  onCopy: (text: string, messageId: string) => void;
   copiedMessageId: string | null;
   onThumbsUp?: (messageId: string) => void;
   onThumbsDown?: (messageId: string) => void;
@@ -377,7 +383,7 @@ function AssistantMessage({
               )}
               <Pressable
                 className="p-1.5 rounded-lg active:bg-muted"
-                onPress={onCopy}
+                onPress={() => onCopy(messageText, message.id)}
               >
                 {copiedMessageId === message.id ? (
                   <Check size={14} className="text-green-500" />
@@ -403,7 +409,7 @@ function AssistantMessage({
       {thinkingIndicator}
     </View>
   );
-}
+});
 
 // ── List ──
 
@@ -460,7 +466,9 @@ export function AliaChatMessageList({
       }
       setCopiedMessageId(messageId);
       setTimeout(() => setCopiedMessageId(null), 2000);
-    } catch {}
+    } catch (err) {
+      console.warn('[AliaChat] Failed to copy message to clipboard:', err);
+    }
   }, []);
 
   const handleStartEdit = useCallback((messageId: string, content: string) => {
@@ -520,12 +528,12 @@ export function AliaChatMessageList({
                     message={msg}
                     text={messageText}
                     isEditing={editingMessageId === msg.id}
-                    editedContent={editedContent}
+                    editedContent={editingMessageId === msg.id ? editedContent : ''}
                     onEditedContentChange={setEditedContent}
-                    onSaveEdit={() => handleSaveEdit(msg.id)}
+                    onSaveEdit={handleSaveEdit}
                     onCancelEdit={handleCancelEdit}
-                    onStartEdit={() => handleStartEdit(msg.id, messageText)}
-                    onCopy={() => handleCopy(messageText, msg.id)}
+                    onStartEdit={handleStartEdit}
+                    onCopy={handleCopy}
                     copiedMessageId={copiedMessageId}
                     showEditButton={!!onEditMessage}
                   />
@@ -539,7 +547,7 @@ export function AliaChatMessageList({
                     onReadAloud={onReadAloud}
                     ttsActiveMessageId={ttsActiveMessageId}
                     ttsPlaybackState={ttsPlaybackState}
-                    onCopy={() => handleCopy(messageText, msg.id)}
+                    onCopy={handleCopy}
                     copiedMessageId={copiedMessageId}
                     onThumbsUp={onThumbsUp}
                     onThumbsDown={onThumbsDown}

package/src/components/Markdown.tsx

@@ -240,6 +240,72 @@ export interface AliaMarkdownProps {
   colors?: Partial<AliaColors>;
 }
 
+const FENCE_RE = /^\s*(?:```|~~~)/;
+const LIST_OR_TABLE_RE = /^\s*(?:[-*+]\s|\d+[.)]\s|\|)/;
+// Link reference definitions ([1]: https://…) resolve per-parse, so a document
+// using them cannot be split into independently parsed blocks.
+const LINK_REF_DEF_RE = /^\s*\[[^\]]+\]:\s/m;
+
+/**
+ * Split markdown into top-level blocks at blank-line boundaries, keeping
+ * fenced code, list runs, and tables intact. During streaming only the last
+ * block's text changes, so every completed block hits React.memo and skips
+ * its markdown-it re-parse — the per-flush cost drops from O(document) to
+ * O(trailing block).
+ */
+function splitMarkdownBlocks(content: string): string[] {
+  if (LINK_REF_DEF_RE.test(content)) return [content];
+
+  const lines = content.split('\n');
+  const blocks: string[] = [];
+  let current: string[] = [];
+  let lastNonBlank = '';
+  let inFence = false;
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+    if (FENCE_RE.test(line)) {
+      inFence = !inFence;
+      current.push(line);
+      lastNonBlank = line;
+      i += 1;
+      continue;
+    }
+    if (!inFence && line.trim() === '') {
+      let j = i;
+      while (j < lines.length && lines[j].trim() === '') j += 1;
+      const next = j < lines.length ? lines[j] : '';
+      // Splitting a list or table at a blank line would restart ordered-list
+      // numbering and break table parsing — keep those runs in one block.
+      const keepTogether = LIST_OR_TABLE_RE.test(lastNonBlank) || LIST_OR_TABLE_RE.test(next);
+      if (keepTogether || current.length === 0) {
+        for (; i < j; i += 1) current.push(lines[i]);
+      } else {
+        blocks.push(current.join('\n'));
+        current = [];
+        i = j;
+      }
+      continue;
+    }
+    current.push(line);
+    lastNonBlank = line;
+    i += 1;
+  }
+  if (current.length > 0) blocks.push(current.join('\n'));
+  return blocks.length > 0 ? blocks : [content];
+}
+
+type MarkdownBlockProps = {
+  content: string;
+  rules: ReturnType<typeof createRules>;
+  styles: ReturnType<typeof createStyles>;
+};
+
+const MarkdownBlock = React.memo(function MarkdownBlock({ content, rules, styles }: MarkdownBlockProps) {
+  return <Markdown rules={rules} style={styles}>{content}</Markdown>;
+});
+
 export function AliaMarkdown({ content, colors: colorOverrides }: AliaMarkdownProps) {
   const scheme = useColorScheme();
   const fallback = scheme === 'dark' ? FALLBACK_DARK : FALLBACK_LIGHT;
@@ -247,6 +313,20 @@ export function AliaMarkdown({ content, colors: colorOverrides }: AliaMarkdownPr
 
   const customRules = useMemo(() => createRules(colors), [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground]);
   const markdownStyles = useMemo(() => createStyles(colors), [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground]);
+  const blocks = useMemo(() => splitMarkdownBlocks(content), [content]);
+
+  if (blocks.length === 1) {
+    return <Markdown rules={customRules} style={markdownStyles}>{blocks[0]}</Markdown>;
+  }
 
-  return <Markdown rules={customRules} style={markdownStyles}>{content}</Markdown>;
+  // Each block's `body` rule cancels its own trailing paragraph margin
+  // (marginBottom: -8), so rowGap restores the exact inter-paragraph spacing
+  // a single continuous parse would produce.
+  return (
+    <View style={{ rowGap: 8 }}>
+      {blocks.map((block, i) => (
+        <MarkdownBlock key={i} content={block} rules={customRules} styles={markdownStyles} />
+      ))}
+    </View>
+  );
 }

package/src/components/ui/chat-text-input.tsx

@@ -11,6 +11,15 @@ import {
 } from "react-native";
 import { cn } from "../../lib/utils";
 
+// react-native-web forwards the DOM KeyboardEvent modifier flags on the key-press
+// nativeEvent, but React Native's `TextInputKeyPressEventData` only declares `key`.
+// Augment the type (web-only field, hence optional) so `shiftKey` is readable without a cast.
+declare module "react-native" {
+  interface TextInputKeyPressEventData {
+    shiftKey?: boolean;
+  }
+}
+
 type ChatTextInputProps = React.ComponentPropsWithoutRef<typeof TextInput> & {
   noFocus?: boolean;
   onEnterPress?: () => void;
@@ -54,13 +63,11 @@ const ChatTextInput = React.forwardRef<TextInput, ChatTextInputProps>(
       const handlePaste = (e: Event) => {
         const clipboardEvent = e as ClipboardEvent;
 
-        // @ts-ignore - web-specific API
         const activeElement = document.activeElement;
-        // @ts-ignore - web-specific API
         const wrapper = wrapperRef.current;
-
-        // @ts-ignore - web-specific API
-        const isContained = wrapper && wrapper.contains(activeElement);
+        // On web the wrapper ref resolves to its underlying DOM node — only react to
+        // pastes whose focused element lives inside this input.
+        const isContained = wrapper instanceof HTMLElement && wrapper.contains(activeElement);
 
         if (!isContained) return;
 
@@ -84,11 +91,9 @@ const ChatTextInput = React.forwardRef<TextInput, ChatTextInputProps>(
         }
       };
 
-      // @ts-ignore - web-specific API
       document.addEventListener('paste', handlePaste);
 
       return () => {
-        // @ts-ignore - web-specific API
         document.removeEventListener('paste', handlePaste);
       };
     }, [onImagePaste]);
@@ -108,7 +113,6 @@ const ChatTextInput = React.forwardRef<TextInput, ChatTextInputProps>(
       }
 
       if (key === "Enter" && !disableEnterToSubmit) {
-        // @ts-ignore - shiftKey exists on web
         if (Platform.OS !== 'web' || !e.nativeEvent.shiftKey) {
           e.preventDefault();
           onEnterPress?.();

package/src/components/ui/prompt-input/prompt-input.tsx

@@ -133,6 +133,9 @@ export function PromptInput({
 
   const handleSubmit = () => {
     onSubmit?.();
+    // Clicking the send button (as opposed to pressing Enter) shifts DOM focus
+    // to the button on web — restore it so the user can keep typing.
+    textareaRef.current?.focus();
     if (showFullscreen) setShowFullscreen(false);
   };
 

package/src/hooks/useSoundEffects.ts

@@ -59,7 +59,11 @@ export function useSoundEffects(enabled: boolean = false, sounds: SoundSources =
     return () => {
       mounted = false;
       for (const player of playersRef.current.values()) {
-        try { player.release(); } catch {}
+        try {
+          player.release();
+        } catch {
+          // Best-effort cleanup — a player already released/unloaded is safe to ignore.
+        }
       }
       playersRef.current.clear();
       loadedRef.current = false;

package/src/hooks/useTTS.ts

@@ -55,15 +55,16 @@ export function useTTS(options: UseTTSOptions = {}) {
   const tonePref = options.tone ?? 'default';
 
   const { oxyServices } = useOxy();
-  const {
-    activeMessageId,
-    playbackState,
-    error,
-    setActiveMessage,
-    setPlaybackState,
-    setError,
-    reset,
-  } = useTTSStore();
+  // Per-field selectors: subscribing to the whole store re-renders every
+  // consumer on any playback transition. Actions are static store refs, so
+  // selecting them individually never triggers a re-render.
+  const activeMessageId = useTTSStore((s) => s.activeMessageId);
+  const playbackState = useTTSStore((s) => s.playbackState);
+  const error = useTTSStore((s) => s.error);
+  const setActiveMessage = useTTSStore((s) => s.setActiveMessage);
+  const setPlaybackState = useTTSStore((s) => s.setPlaybackState);
+  const setError = useTTSStore((s) => s.setError);
+  const reset = useTTSStore((s) => s.reset);
 
   const playerRef = useRef<AudioPlayer | null>(null);
 
@@ -108,7 +109,9 @@ export function useTTS(options: UseTTSOptions = {}) {
   const releasePlayer = useCallback(() => {
     try {
       playerRef.current?.remove();
-    } catch {}
+    } catch {
+      // Best-effort teardown — the player may already be removed.
+    }
     playerRef.current = null;
   }, []);
 
@@ -127,6 +130,11 @@ export function useTTS(options: UseTTSOptions = {}) {
         playerRef.current = player;
 
         player.addListener('playbackStatusUpdate', (status: AudioStatus) => {
+          if (status.error) {
+            releasePlayer();
+            setError(status.error);
+            return;
+          }
           if (status.didJustFinish) {
             releasePlayer();
             reset();
@@ -147,6 +155,11 @@ export function useTTS(options: UseTTSOptions = {}) {
     conversationId?: string,
     audioUrl?: string,
   ) => {
+    // Read volatile playback state at call time (not via closure) so this
+    // callback's identity survives every playback transition. It is passed to
+    // memoized message rows — an unstable identity re-renders all of them.
+    const { activeMessageId, playbackState } = useTTSStore.getState();
+
     // If same message is playing, toggle pause/play
     if (activeMessageId === messageId) {
       if (playbackState === 'playing') {
@@ -212,7 +225,7 @@ export function useTTS(options: UseTTSOptions = {}) {
       console.error('[TTS] Error:', e);
       setError(errorMessage(e, 'Failed to read aloud'));
     }
-  }, [activeMessageId, playbackState, getToken, apiUrl, getTTSVoice, getTTSSpeed, stop, playFromUrl, setActiveMessage, setPlaybackState, setError]);
+  }, [getToken, apiUrl, getTTSVoice, getTTSSpeed, stop, playFromUrl, setActiveMessage, setPlaybackState, setError]);
 
   // Cleanup on unmount
   useEffect(() => {

package/src/index.ts

@@ -19,27 +19,15 @@ export { AliaWelcomeMessage } from './components/AliaWelcomeMessage';
 export { ResearchProgressCard } from './components/ResearchProgressCard';
 export { PlanPreviewCard } from './components/PlanPreviewCard';
 
-// ── Voice components ──
-export { AudioWaveVisualizer } from './components/voice/AudioWaveVisualizer';
-export { VoiceOverlay } from './components/voice/VoiceOverlay';
-export { VoiceControls } from './components/voice/VoiceControls';
-
 // ── Chat hook ──
 export { useAliaChat } from './hooks/useAliaChat';
 export type { UseAliaChatOptions, UseAliaChatReturn } from './hooks/useAliaChat';
 
-// ── Voice hooks ──
-export { useVoiceRoom } from './hooks/useVoiceRoom';
-export { useAudioLevelMonitor } from './hooks/useAudioLevelMonitor';
-export { useAudioLevels } from './hooks/useAudioLevels';
+// ── Text-to-speech / speech-to-text (no livekit) ──
 export { useTTS } from './hooks/useTTS';
 export type { UseTTSOptions } from './hooks/useTTS';
 export { useSpeechToText, useSTTStore } from './hooks/useSpeechToText';
 export type { UseSTTOptions } from './hooks/useSpeechToText';
-export { useAmbientWave } from './hooks/useAmbientWave';
-export type { UseAmbientWaveOptions, UseAmbientWaveResult, AmbientWaveVoice, AmbientWaveMode } from './hooks/useAmbientWave';
-export { useSoundEffects, useVoiceSoundEffects } from './hooks/useSoundEffects';
-export type { SoundName, SoundSources } from './hooks/useSoundEffects';
 
 // ── Types ──
 export type {
@@ -50,10 +38,6 @@ export type {
   ResearchSource,
   PendingPlan,
   PlanStep,
-  RoomState,
-  AgentState,
-  VoiceMessage,
-  VoiceToolInvocation,
 } from './types';
 
 // ── UI Primitives (NativeWind) ──

package/src/voice.ts

@@ -0,0 +1,26 @@
+// @alia.onl/sdk/voice — Alia voice surface
+// LiveKit-backed voice room, audio visualisation, ambient wave, and sound effects.
+// Split out of the root entry so text-chat consumers never pull livekit-client
+// into their module graph.
+
+// ── Voice components ──
+export { AudioWaveVisualizer } from './components/voice/AudioWaveVisualizer';
+export { VoiceOverlay } from './components/voice/VoiceOverlay';
+export { VoiceControls } from './components/voice/VoiceControls';
+
+// ── Voice hooks ──
+export { useVoiceRoom } from './hooks/useVoiceRoom';
+export { useAudioLevelMonitor } from './hooks/useAudioLevelMonitor';
+export { useAudioLevels } from './hooks/useAudioLevels';
+export { useAmbientWave } from './hooks/useAmbientWave';
+export type { UseAmbientWaveOptions, UseAmbientWaveResult, AmbientWaveVoice, AmbientWaveMode } from './hooks/useAmbientWave';
+export { useSoundEffects, useVoiceSoundEffects } from './hooks/useSoundEffects';
+export type { SoundName, SoundSources } from './hooks/useSoundEffects';
+
+// ── Voice types ──
+export type {
+  RoomState,
+  AgentState,
+  VoiceMessage,
+  VoiceToolInvocation,
+} from './types';