@alia.onl/sdk 1.0.0 → 2.0.0

package/src/components/Reasoning.tsx

@@ -0,0 +1,154 @@
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  withSequence,
+  cancelAnimation,
+} from 'react-native-reanimated';
+import { useAliaColors } from '../theme';
+
+// Context
+type ReasoningContextType = {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number | undefined;
+};
+
+const ReasoningContext = createContext<ReasoningContextType | null>(null);
+
+function useReasoning() {
+  const context = useContext(ReasoningContext);
+  if (!context) throw new Error('useReasoning must be used within a Reasoning component');
+  return context;
+}
+
+// Props
+interface ReasoningProps {
+  isStreaming?: boolean;
+  defaultOpen?: boolean;
+  duration?: number;
+  children: React.ReactNode;
+}
+
+interface ReasoningTriggerProps {
+  onPress?: () => void;
+}
+
+interface ReasoningContentProps {
+  children: string;
+}
+
+// Reasoning wrapper — manages open/close state with auto-open during streaming
+export function Reasoning({ isStreaming = false, defaultOpen = true, duration: externalDuration, children }: ReasoningProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [duration, setDuration] = useState<number | undefined>(externalDuration);
+  const startTimeRef = useRef<number | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    if (isStreaming) {
+      setIsOpen(true);
+      startTimeRef.current = Date.now();
+      intervalRef.current = setInterval(() => {
+        if (startTimeRef.current) {
+          setDuration(Math.floor((Date.now() - startTimeRef.current) / 1000));
+        }
+      }, 1000);
+    } else {
+      if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; }
+      if (startTimeRef.current !== null) {
+        const t = setTimeout(() => setIsOpen(false), 500);
+        return () => clearTimeout(t);
+      }
+    }
+    return () => { if (intervalRef.current) clearInterval(intervalRef.current); };
+  }, [isStreaming]);
+
+  useEffect(() => { if (externalDuration !== undefined) setDuration(externalDuration); }, [externalDuration]);
+
+  return (
+    <ReasoningContext.Provider value={{ isStreaming, isOpen, setIsOpen, duration }}>
+      <View>{children}</View>
+    </ReasoningContext.Provider>
+  );
+}
+
+// Trigger — shows "Thinking for Xs..." label with pulsing icon
+export function ReasoningTrigger({ onPress }: ReasoningTriggerProps) {
+  const { isStreaming, isOpen, setIsOpen, duration } = useReasoning();
+  const colors = useAliaColors();
+  const pulseOpacity = useSharedValue(1);
+
+  useEffect(() => {
+    if (isStreaming) {
+      pulseOpacity.value = withRepeat(withSequence(withTiming(0.4, { duration: 800 }), withTiming(1, { duration: 800 })), -1, false);
+    } else {
+      cancelAnimation(pulseOpacity);
+      pulseOpacity.value = 1;
+    }
+  }, [isStreaming]);
+
+  const pulseStyle = useAnimatedStyle(() => ({ opacity: pulseOpacity.value }));
+
+  const message = isStreaming
+    ? (duration ? `Thinking for ${duration}s...` : 'Thinking...')
+    : (duration ? `Thought for ${duration} seconds` : 'Reasoning');
+
+  const handlePress = onPress || (() => setIsOpen(!isOpen));
+
+  return (
+    <Pressable onPress={handlePress} style={styles.trigger}>
+      <Animated.View style={isStreaming ? pulseStyle : undefined}>
+        <Text style={{ color: '#a855f7', fontSize: 14 }}>{'\u2726'}</Text>
+      </Animated.View>
+      <Text style={[styles.triggerText, { color: '#a855f7' }]}>{message}</Text>
+      <Text style={{ color: '#a855f7', fontSize: 14 }}>{onPress ? '\u203A' : (isOpen ? '\u25BE' : '\u25B8')}</Text>
+    </Pressable>
+  );
+}
+
+// Content — renders thinking text (collapsible)
+export function ReasoningContent({ children }: ReasoningContentProps) {
+  const { isOpen, isStreaming } = useReasoning();
+  const colors = useAliaColors();
+
+  if (!isOpen) return null;
+
+  // Lazy import AliaMarkdown to avoid circular dependency
+  const { AliaMarkdown } = require('./Markdown');
+
+  return (
+    <View style={[styles.contentWrapper, { backgroundColor: '#a855f710', borderColor: '#a855f730' }]}>
+      <View style={{ opacity: isStreaming ? 0.8 : 1 }}>
+        <AliaMarkdown content={children} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+  },
+  triggerText: {
+    fontSize: 14,
+    fontWeight: '500',
+    flex: 1,
+  },
+  contentWrapper: {
+    borderRadius: 8,
+    padding: 12,
+    borderWidth: 1,
+    marginHorizontal: 12,
+    marginBottom: 12,
+  },
+});

package/src/components/ThinkingIndicator.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  withSequence,
+  Easing,
+} from "react-native-reanimated";
+import { useAliaColors } from "../theme";
+
+const thinkingPhrases = [
+  "Thinking...",
+  "Crafting...",
+  "Pondering...",
+  "Computing...",
+  "Processing...",
+  "Analyzing...",
+  "Reasoning...",
+  "Cooking...",
+  "Brewing...",
+  "Conjuring...",
+];
+
+const workingPhrases = [
+  "Working...",
+  "Executing...",
+  "Running...",
+  "Building...",
+  "Creating...",
+  "Doing the thing...",
+];
+
+export function ThinkingIndicator({ isWorking = false, statusText }: { isWorking?: boolean; statusText?: string }) {
+  const colors = useAliaColors();
+  const phrases = isWorking ? workingPhrases : thinkingPhrases;
+  const [phraseIndex, setPhraseIndex] = useState(() =>
+    Math.floor(Math.random() * phrases.length)
+  );
+  const [displayText, setDisplayText] = useState("");
+  const [isTyping, setIsTyping] = useState(true);
+
+  // Reset phraseIndex when isWorking changes (arrays have different lengths)
+  useEffect(() => {
+    setPhraseIndex(Math.floor(Math.random() * phrases.length));
+  }, [isWorking]);
+
+  // Spinning asterisk animation
+  const rotation = useSharedValue(0);
+  useEffect(() => {
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 2000, easing: Easing.linear }),
+      -1
+    );
+  }, [rotation]);
+
+  const spinStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  // Pulsing cursor animation
+  const cursorOpacity = useSharedValue(1);
+  useEffect(() => {
+    cursorOpacity.value = withRepeat(
+      withSequence(
+        withTiming(0.2, { duration: 400 }),
+        withTiming(1, { duration: 400 })
+      ),
+      -1
+    );
+  }, [cursorOpacity]);
+
+  const cursorStyle = useAnimatedStyle(() => ({
+    opacity: cursorOpacity.value,
+  }));
+
+  // Typewriter effect — skipped when statusText is provided (real-time status shown directly)
+  useEffect(() => {
+    if (statusText) return;
+    const phrase = phrases[phraseIndex % phrases.length];
+    let charIndex = 0;
+    setIsTyping(true);
+    setDisplayText("");
+
+    const typeInterval = setInterval(() => {
+      if (charIndex < phrase.length) {
+        setDisplayText(phrase.slice(0, charIndex + 1));
+        charIndex++;
+      } else {
+        clearInterval(typeInterval);
+        setIsTyping(false);
+
+        // Wait then switch to next phrase
+        setTimeout(() => {
+          setPhraseIndex((prev) => (prev + 1) % phrases.length);
+        }, 1500);
+      }
+    }, 40);
+
+    return () => clearInterval(typeInterval);
+  }, [phraseIndex, phrases, statusText]);
+
+  const shownText = statusText || displayText;
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={spinStyle}>
+        <Text style={{ fontSize: 16, color: colors.mutedForeground }}>✱</Text>
+      </Animated.View>
+      <View style={styles.textRow}>
+        <Text style={{ fontSize: 16, color: colors.mutedForeground }}>{shownText}</Text>
+        {(statusText || isTyping) && (
+          <Animated.View style={cursorStyle}>
+            <Text style={{ fontSize: 16, color: colors.mutedForeground }}>|</Text>
+          </Animated.View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 8,
+  },
+  textRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

package/src/components/voice/AudioWaveVisualizer.tsx

@@ -0,0 +1,377 @@
+import React, { useEffect } from 'react';
+import { View, Platform, useWindowDimensions } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import Animated, {
+  useSharedValue,
+  useAnimatedProps,
+  useAnimatedStyle,
+  withTiming,
+  withRepeat,
+  withSequence,
+  Easing,
+  type SharedValue,
+} from 'react-native-reanimated';
+import type { AgentState } from '../../types';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+const GLOW_HEIGHT = 350;
+const NUM_POINTS = 8;
+
+// Ocean-style wave layers: fill from bottom to a surface level, crests undulate
+interface WaveLayerConfig {
+  color: string;
+  surfaceY: number; // surface level as % from top (50 = middle)
+  waveHeight: number; // base crest height in px
+  maxWaveBoost: number; // extra crest height from audio
+  phaseOffset: number;
+  speed: number; // ms for one full horizontal cycle
+  blur: number;
+}
+
+const WAVE_LAYERS: WaveLayerConfig[] = [
+  // Deepest layer - dark blue, highest surface (closest to top)
+  {
+    color: 'rgba(12, 74, 110, 0.8)',
+    surfaceY: 35,
+    waveHeight: 14,
+    maxWaveBoost: 120,
+    phaseOffset: 0,
+    speed: 7000,
+    blur: 30,
+  },
+  // Mid layer - ocean blue
+  {
+    color: 'rgba(14, 165, 233, 0.45)',
+    surfaceY: 42,
+    waveHeight: 16,
+    maxWaveBoost: 140,
+    phaseOffset: Math.PI * 0.8,
+    speed: 5500,
+    blur: 22,
+  },
+  // Front layer - bright cyan, lowest surface
+  {
+    color: 'rgba(56, 189, 248, 0.35)',
+    surfaceY: 50,
+    waveHeight: 20,
+    maxWaveBoost: 150,
+    phaseOffset: Math.PI * 1.5,
+    speed: 4500,
+    blur: 16,
+  },
+  // Accent layer - indigo/purple
+  {
+    color: 'rgba(99, 102, 241, 0.25)',
+    surfaceY: 38,
+    waveHeight: 12,
+    maxWaveBoost: 100,
+    phaseOffset: Math.PI * 0.3,
+    speed: 8000,
+    blur: 28,
+  },
+];
+
+// Background glow blobs for ambient color
+interface BlobConfig {
+  color: string;
+  baseWidth: number;
+  baseHeight: number;
+  x: number;
+  y: number;
+  blur: number;
+  amplitudeScale: number;
+  phaseSpeed: number;
+  phaseDirection: 1 | -1;
+}
+
+const BLOBS: BlobConfig[] = [
+  {
+    color: '#0c4a6e',
+    baseWidth: 320,
+    baseHeight: 200,
+    x: 50,
+    y: 55,
+    blur: 80,
+    amplitudeScale: 1.0,
+    phaseSpeed: 4000,
+    phaseDirection: 1,
+  },
+  {
+    color: '#0ea5e9',
+    baseWidth: 220,
+    baseHeight: 140,
+    x: 38,
+    y: 65,
+    blur: 60,
+    amplitudeScale: 1.2,
+    phaseSpeed: 3500,
+    phaseDirection: -1,
+  },
+  {
+    color: '#6366f1',
+    baseWidth: 180,
+    baseHeight: 160,
+    x: 70,
+    y: 55,
+    blur: 70,
+    amplitudeScale: 0.7,
+    phaseSpeed: 4500,
+    phaseDirection: -1,
+  },
+  {
+    color: '#a855f7',
+    baseWidth: 130,
+    baseHeight: 110,
+    x: 78,
+    y: 65,
+    blur: 60,
+    amplitudeScale: 0.5,
+    phaseSpeed: 5500,
+    phaseDirection: 1,
+  },
+];
+
+// Colors per agent state for waves — speaking blends blue + purple
+const WAVE_COLORS: Record<AgentState, WaveLayerConfig['color'][]> = {
+  idle: [
+    'rgba(12, 74, 110, 0.8)',
+    'rgba(14, 165, 233, 0.45)',
+    'rgba(56, 189, 248, 0.35)',
+    'rgba(99, 102, 241, 0.25)',
+  ],
+  listening: [
+    'rgba(12, 74, 110, 0.8)',
+    'rgba(14, 165, 233, 0.45)',
+    'rgba(56, 189, 248, 0.35)',
+    'rgba(99, 102, 241, 0.25)',
+  ],
+  thinking: [
+    'rgba(120, 80, 20, 0.75)',
+    'rgba(234, 179, 8, 0.45)',
+    'rgba(251, 191, 36, 0.35)',
+    'rgba(253, 224, 71, 0.25)',
+  ],
+  speaking: [
+    'rgba(30, 40, 100, 0.8)',
+    'rgba(99, 102, 241, 0.5)',
+    'rgba(147, 51, 234, 0.4)',
+    'rgba(56, 189, 248, 0.3)',
+  ],
+};
+
+const BLOB_COLORS: Record<AgentState, string[]> = {
+  idle: ['#0c4a6e', '#0ea5e9', '#6366f1', '#a855f7'],
+  listening: ['#0c4a6e', '#0ea5e9', '#6366f1', '#a855f7'],
+  thinking: ['#92400e', '#eab308', '#f59e0b', '#fbbf24'],
+  speaking: ['#1e2870', '#6366f1', '#9333ea', '#0ea5e9'],
+};
+
+interface AudioWaveVisualizerProps {
+  waveAmplitude: SharedValue<number>;
+  agentState: AgentState;
+  isConnected: boolean;
+}
+
+export function AudioWaveVisualizer({
+  waveAmplitude,
+  agentState = 'idle',
+  isConnected,
+}: AudioWaveVisualizerProps) {
+  const { width: screenWidth } = useWindowDimensions();
+  const state = WAVE_COLORS[agentState] ? agentState : 'idle';
+
+  return (
+    <View
+      style={{
+        width: screenWidth,
+        height: GLOW_HEIGHT,
+        position: 'relative',
+      }}
+    >
+      {/* Background glow blobs */}
+      {BLOBS.map((blob, i) => (
+        <GlowBlob
+          key={`blob-${i}`}
+          blob={blob}
+          color={BLOB_COLORS[state][i]}
+          waveAmplitude={waveAmplitude}
+          isConnected={isConnected}
+          screenWidth={screenWidth}
+        />
+      ))}
+
+      {/* Ocean wave layers — filled from surface down to bottom, with blur */}
+      {WAVE_LAYERS.map((layer, i) => (
+        <OceanWave
+          key={`wave-${i}`}
+          layer={layer}
+          color={WAVE_COLORS[state][i]}
+          waveAmplitude={waveAmplitude}
+          isConnected={isConnected}
+          screenWidth={screenWidth}
+        />
+      ))}
+    </View>
+  );
+}
+
+// Ocean wave: surface undulates horizontally, filled from surface to bottom
+function OceanWave({
+  layer,
+  color,
+  waveAmplitude,
+  isConnected,
+  screenWidth,
+}: {
+  layer: WaveLayerConfig;
+  color: string;
+  waveAmplitude: SharedValue<number>;
+  isConnected: boolean;
+  screenWidth: number;
+}) {
+  const phase = useSharedValue(0);
+
+  useEffect(() => {
+    phase.value = 0;
+    phase.value = withRepeat(
+      withTiming(Math.PI * 2, { duration: layer.speed, easing: Easing.linear }),
+      -1,
+      false,
+    );
+  }, []);
+
+  const animatedProps = useAnimatedProps(() => {
+    const amp = waveAmplitude.value;
+    // Surface Y position (fixed, doesn't move with audio)
+    const surfaceY = (layer.surfaceY / 100) * GLOW_HEIGHT;
+    // Wave crest height: base + audio boost
+    const crestHeight = layer.waveHeight + amp * layer.maxWaveBoost;
+    const currentPhase = phase.value + layer.phaseOffset;
+    const segW = screenWidth / NUM_POINTS;
+
+    // Start at bottom-left corner
+    let d = `M 0 ${GLOW_HEIGHT}`;
+
+    // Up to first surface point
+    const firstY = surfaceY + Math.sin(currentPhase) * crestHeight;
+    d += ` L 0 ${firstY}`;
+
+    // Draw undulating surface across the width
+    for (let i = 0; i < NUM_POINTS; i++) {
+      const x1 = (i + 1) * segW;
+      const y0 =
+        surfaceY +
+        Math.sin(currentPhase + (i / NUM_POINTS) * Math.PI * 2) * crestHeight;
+      const y1 =
+        surfaceY +
+        Math.sin(currentPhase + ((i + 1) / NUM_POINTS) * Math.PI * 2) * crestHeight;
+
+      const cp1x = i * segW + segW * 0.5;
+      const cp2x = x1 - segW * 0.5;
+
+      d += ` C ${cp1x} ${y0}, ${cp2x} ${y1}, ${x1} ${y1}`;
+    }
+
+    // Close: down to bottom-right, across to bottom-left
+    d += ` L ${screenWidth} ${GLOW_HEIGHT} Z`;
+
+    return { d };
+  });
+
+  const webBlurStyle =
+    Platform.OS === 'web'
+      ? ({
+          filter: `blur(${layer.blur}px)`,
+          WebkitFilter: `blur(${layer.blur}px)`,
+        } as any)
+      : {};
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        opacity: isConnected ? 1 : 0,
+        ...webBlurStyle,
+        pointerEvents: 'none',
+      }}
+    >
+      <Svg width={screenWidth} height={GLOW_HEIGHT}>
+        <AnimatedPath animatedProps={animatedProps} fill={color} />
+      </Svg>
+    </View>
+  );
+}
+
+// Ambient glow blob
+function GlowBlob({
+  blob,
+  color,
+  waveAmplitude,
+  isConnected,
+  screenWidth,
+}: {
+  blob: BlobConfig;
+  color: string;
+  waveAmplitude: SharedValue<number>;
+  isConnected: boolean;
+  screenWidth: number;
+}) {
+  const drift = useSharedValue(0);
+
+  useEffect(() => {
+    drift.value = 0;
+    drift.value = withRepeat(
+      withSequence(
+        withTiming(1, {
+          duration: blob.phaseSpeed,
+          easing: Easing.bezier(0.37, 0, 0.63, 1),
+        }),
+        withTiming(0, {
+          duration: blob.phaseSpeed,
+          easing: Easing.bezier(0.37, 0, 0.63, 1),
+        }),
+      ),
+      -1,
+      false,
+    );
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const amp = waveAmplitude.value;
+    const scale = 1 + amp * 0.3 * blob.amplitudeScale;
+    const driftOffset = (drift.value - 0.5) * 20 * blob.phaseDirection;
+    const opacity = isConnected ? 0.45 + amp * 0.35 * blob.amplitudeScale : 0;
+
+    const w = blob.baseWidth * scale;
+    const h = blob.baseHeight * scale;
+    const left = (blob.x / 100) * screenWidth - w / 2 + driftOffset;
+    const top = (blob.y / 100) * GLOW_HEIGHT - h / 2;
+
+    return {
+      position: 'absolute' as const,
+      width: w,
+      height: h,
+      left,
+      top,
+      borderRadius: w / 2,
+      backgroundColor: color,
+      opacity,
+      transform: [{ scale }],
+    };
+  });
+
+  const webBlurStyle =
+    Platform.OS === 'web'
+      ? ({
+          filter: `blur(${blob.blur}px)`,
+          WebkitFilter: `blur(${blob.blur}px)`,
+        } as any)
+      : {};
+
+  return <Animated.View style={[animatedStyle, webBlurStyle]} />;
+}