@alia.onl/sdk 2.0.0 → 3.0.0

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

@@ -0,0 +1,276 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  View,
+  Pressable,
+  type TextInput as RNTextInput,
+} from "react-native";
+import { KeyboardAvoidingView } from "../../../lib/keyboard";
+import { Maximize2, Minimize2 } from "lucide-react-native";
+import { cn } from "../../../lib/utils";
+import { PromptInputContext, type Attachment, type Completion } from "./context";
+import { PromptInputTextarea } from "./textarea";
+import { PromptInputActions } from "./actions";
+import { PromptInputMicButton } from "./mic-button";
+import { PromptInputAutocomplete } from "./autocomplete";
+import { PromptInputAttachments } from "./attachments";
+import { PromptInputSubmitButton } from "./submit-button";
+import { PromptInputAddMenu } from "./add-menu";
+
+export type PromptInputProps = {
+  isLoading?: boolean;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  maxHeight?: number;
+  onSubmit?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  onImagePaste?: (files: File[]) => void;
+  // Simple mode props (when no children)
+  placeholder?: string;
+  autocomplete?: boolean;
+  autocompletePosition?: "top" | "bottom";
+  // Shows the add menu as a standalone button to the left of the input box
+  leadingAddMenu?: boolean;
+  // Custom left-side actions (replaces default add menu in the actions bar)
+  actionsLeft?: React.ReactNode;
+  // Submit button props
+  onStop?: () => void;
+  emptyAction?: React.ReactNode;
+  // Controlled attachments (optional — uses internal state if omitted)
+  attachments?: Attachment[];
+  onAddAttachment?: (attachment: Attachment) => void;
+  onRemoveAttachment?: (id: string) => void;
+  onUpdateAttachment?: (id: string, updates: Partial<Attachment>) => void;
+  // Injectable autocomplete hooks
+  useSuggestions?: (query: string) => { data: Completion[] | undefined; isLoading: boolean };
+  onSuggestionUsed?: (suggestionId: string) => void;
+  // Injectable error handler (replaces toast)
+  onError?: (message: string) => void;
+  // Mic button API URL
+  apiUrl?: string;
+} & Omit<React.ComponentProps<typeof View>, "children">;
+
+export function PromptInput({
+  className,
+  isLoading = false,
+  maxHeight = 240,
+  value,
+  onValueChange,
+  onSubmit,
+  children,
+  disabled = false,
+  onImagePaste,
+  placeholder,
+  autocomplete = false,
+  autocompletePosition = "top",
+  leadingAddMenu = false,
+  actionsLeft,
+  onStop,
+  emptyAction,
+  attachments: controlledAttachments,
+  onAddAttachment,
+  onRemoveAttachment,
+  onUpdateAttachment,
+  useSuggestions,
+  onSuggestionUsed,
+  onError,
+  apiUrl,
+  ...props
+}: PromptInputProps) {
+  const [internalValue, setInternalValue] = useState(value || "");
+  const [currentHeight, setCurrentHeight] = useState(44);
+  const [showFullscreen, setShowFullscreen] = useState(false);
+  const [handleCompletionKey, setHandleCompletionKey] = useState<((key: string) => boolean) | null>(null);
+  const textareaRef = useRef<RNTextInput>(null);
+
+  // Internal attachment state (used when no controlled props)
+  const [internalAttachments, setInternalAttachments] = useState<Attachment[]>(
+    []
+  );
+  const attachments = controlledAttachments ?? internalAttachments;
+
+  const addAttachment = useCallback(
+    (a: Attachment) => {
+      if (onAddAttachment) {
+        onAddAttachment(a);
+      } else {
+        setInternalAttachments((prev) => [...prev, a]);
+      }
+    },
+    [onAddAttachment]
+  );
+
+  const removeAttachment = useCallback(
+    (id: string) => {
+      if (onRemoveAttachment) {
+        onRemoveAttachment(id);
+      } else {
+        setInternalAttachments((prev) => prev.filter((a) => a.id !== id));
+      }
+    },
+    [onRemoveAttachment]
+  );
+
+  const updateAttachment = useCallback(
+    (id: string, updates: Partial<Attachment>) => {
+      if (onUpdateAttachment) {
+        onUpdateAttachment(id, updates);
+      } else {
+        setInternalAttachments((prev) =>
+          prev.map((a) => (a.id === id ? { ...a, ...updates } : a))
+        );
+      }
+    },
+    [onUpdateAttachment]
+  );
+
+  const handleChange = (newValue: string) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+  };
+
+  const handleSubmit = () => {
+    onSubmit?.();
+    if (showFullscreen) setShowFullscreen(false);
+  };
+
+  useEffect(() => {
+    if (!showFullscreen) setCurrentHeight(44);
+  }, [showFullscreen]);
+
+  const showExpandIcon = currentHeight > 100;
+  const isSimpleMode = !children;
+
+  const contextValue = {
+    isLoading,
+    value: value ?? internalValue,
+    setValue: onValueChange ?? handleChange,
+    maxHeight,
+    onSubmit: handleSubmit,
+    disabled,
+    textareaRef,
+    currentHeight,
+    setCurrentHeight,
+    isFullscreen: showFullscreen,
+    onImagePaste,
+    attachments,
+    addAttachment,
+    removeAttachment,
+    updateAttachment,
+    handleCompletionKey,
+    setHandleCompletionKey,
+    useSuggestions,
+    onSuggestionUsed,
+    onError,
+  };
+
+  const content = isSimpleMode ? (
+    <>
+      <PromptInputAttachments />
+      <PromptInputTextarea
+        placeholder={placeholder}
+        className="min-h-[44px] text-base py-3"
+      />
+      <PromptInputActions className="flex-row items-center justify-between gap-2 mt-2 mb-1 px-3">
+        <View className="flex-row items-center gap-1.5">
+          {actionsLeft ?? <PromptInputAddMenu />}
+        </View>
+        <View className="flex-row items-center gap-1.5">
+          <PromptInputMicButton apiUrl={apiUrl} />
+          <PromptInputSubmitButton
+            isLoading={isLoading}
+            onStop={onStop}
+            emptyAction={emptyAction}
+          />
+        </View>
+      </PromptInputActions>
+    </>
+  ) : (
+    children
+  );
+
+  const inputBox = (
+    <Pressable
+      onPress={() => {
+        if (!disabled) textareaRef.current?.focus();
+      }}
+      disabled={disabled}
+    >
+      <View
+        className={cn(
+          "rounded-[24px] border border-border bg-background relative overflow-hidden",
+          disabled && "opacity-60",
+          className
+        )}
+        {...props}
+      >
+        {showExpandIcon && !disabled && (
+          <Pressable
+            onPress={() => setShowFullscreen(true)}
+            className="absolute top-2 right-2 z-10 bg-background rounded-full p-1.5 border border-border active:opacity-70"
+          >
+            <Maximize2 size={16} className="text-muted-foreground" />
+          </Pressable>
+        )}
+        {content}
+      </View>
+    </Pressable>
+  );
+
+  return (
+    <PromptInputContext.Provider value={contextValue}>
+      {autocomplete && autocompletePosition === "top" && !leadingAddMenu && (
+        <PromptInputAutocomplete position="top" />
+      )}
+
+      <KeyboardAvoidingView behavior="padding">
+        {leadingAddMenu ? (
+          <View className="flex-row items-end gap-2">
+            <PromptInputAddMenu
+              iconSize={20}
+              className="h-10 w-10 rounded-full border"
+            />
+            <View className="flex-1">
+              {autocomplete && autocompletePosition === "top" && (
+                <PromptInputAutocomplete position="top" />
+              )}
+              {inputBox}
+              {autocomplete && autocompletePosition === "bottom" && (
+                <PromptInputAutocomplete position="bottom" />
+              )}
+            </View>
+          </View>
+        ) : (
+          inputBox
+        )}
+      </KeyboardAvoidingView>
+
+      {autocomplete && autocompletePosition === "bottom" && !leadingAddMenu && (
+        <PromptInputAutocomplete position="bottom" />
+      )}
+
+      {showFullscreen && (
+        <View
+          style={{
+            position: "fixed" as any,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 9998,
+          }}
+          className="bg-background"
+        >
+          <Pressable
+            onPress={() => setShowFullscreen(false)}
+            className="absolute top-4 right-4 z-50 p-2 active:opacity-70 bg-background/80 rounded-full"
+          >
+            <Minimize2 size={20} className="text-foreground" />
+          </Pressable>
+          <View className="flex-1 flex-col">{content}</View>
+        </View>
+      )}
+    </PromptInputContext.Provider>
+  );
+}

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

@@ -0,0 +1,49 @@
+import React from "react";
+import { ArrowUp, Square } from "lucide-react-native";
+import { cn } from "../../../lib/utils";
+import { Button } from "../button";
+import { usePromptInput } from "./context";
+
+export type PromptInputSubmitButtonProps = {
+  isLoading?: boolean;
+  onStop?: () => void;
+  emptyAction?: React.ReactNode;
+  className?: string;
+};
+
+export function PromptInputSubmitButton({
+  isLoading,
+  onStop,
+  emptyAction,
+  className,
+}: PromptInputSubmitButtonProps) {
+  const { onSubmit, value, attachments } = usePromptInput();
+  const hasContent = value.trim() || attachments.length > 0;
+
+  if (isLoading && onStop) {
+    return (
+      <Button
+        size="icon"
+        onPress={onStop}
+        className={cn("h-8 w-8 rounded-full", className)}
+      >
+        <Square size={12} color="white" className="fill-current" />
+      </Button>
+    );
+  }
+
+  if (!hasContent && emptyAction) {
+    return <>{emptyAction}</>;
+  }
+
+  return (
+    <Button
+      size="icon"
+      onPress={onSubmit}
+      disabled={!hasContent}
+      className={cn("h-8 w-8 rounded-full", className)}
+    >
+      <ArrowUp size={16} color="white" />
+    </Button>
+  );
+}

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { View } from "react-native";
+import { cn } from "../../../lib/utils";
+import { ChatTextInput } from "../chat-text-input";
+import { usePromptInput } from "./context";
+
+export type PromptInputTextareaProps = {
+  placeholder?: string;
+  className?: string;
+} & React.ComponentProps<typeof ChatTextInput>;
+
+export function PromptInputTextarea({
+  className,
+  placeholder,
+  style,
+  ...props
+}: PromptInputTextareaProps) {
+  const {
+    value,
+    setValue,
+    onSubmit,
+    disabled,
+    textareaRef,
+    setCurrentHeight,
+    isFullscreen,
+    maxHeight,
+    onImagePaste,
+    handleCompletionKey,
+  } = usePromptInput();
+
+  const textInput = (
+    <ChatTextInput
+      ref={textareaRef}
+      value={value}
+      onChangeText={setValue}
+      onSubmitEditing={onSubmit}
+      onEnterPress={onSubmit}
+      onHeightChange={setCurrentHeight}
+      onCompletionKey={handleCompletionKey ?? undefined}
+      disableEnterToSubmit={isFullscreen}
+      disableAutoHeight={isFullscreen}
+      maxHeight={isFullscreen ? 10000 : maxHeight}
+      onImagePaste={onImagePaste}
+      fillContainer={isFullscreen}
+      className={cn(
+        "w-full border-0 bg-transparent text-foreground shadow-none",
+        isFullscreen ? "px-4 pt-4" : "min-h-[44px] py-3",
+        className
+      )}
+      style={[style, isFullscreen && { paddingBottom: 100 }]}
+      placeholder={placeholder}
+      multiline
+      editable={!disabled}
+      noFocus={true}
+      {...props}
+    />
+  );
+
+  if (isFullscreen) {
+    return <View style={{ flex: 1 }}>{textInput}</View>;
+  }
+
+  return textInput;
+}

package/src/components/ui/text.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Text as RNText, type TextProps as RNTextProps } from "react-native";
+import { cn } from "../../lib/utils";
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+export type TextProps = RNTextProps & {
+  className?: string;
+};
+
+const Text = React.forwardRef<RNText, TextProps>(
+  ({ className, ...props }, ref) => {
+    const textClass = React.useContext(TextClassContext);
+    return (
+      <RNText
+        className={cn(
+          "text-base leading-7 text-foreground web:select-text font-sans",
+          textClass,
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Text.displayName = "Text";
+
+export { Text, TextClassContext };

package/src/hooks/useAliaChat.ts

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { useOxy } from '@oxyhq/services';
 import type { ChatMessage, ToolInvocation } from '../types';
 
@@ -17,8 +17,10 @@ export interface UseAliaChatOptions {
 
 export interface UseAliaChatReturn {
   messages: ChatMessage[];
+  setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
   send: (text: string) => void;
   isStreaming: boolean;
+  stop: () => void;
   clear: () => void;
   error: string | null;
 }
@@ -312,8 +314,6 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
                       updateAssistant(() => ({
                         pendingPlan: {
                           planId: parsed.planId,
-                          intent: parsed.intent,
-                          confidence: parsed.confidence,
                           steps: parsed.steps || [],
                           approved: false,
                           rejected: false,
@@ -431,18 +431,27 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
     [isStreaming, getToken, apiUrl, model, clientContext, scheduleFlush, flushPendingUpdates, updateAssistant, applyToolResult],
   );
 
-  const clear = useCallback(() => {
+  const stop = useCallback(() => {
     if (abortRef.current) {
       abortRef.current.abort();
       abortRef.current = null;
     }
-    setMessages([]);
+    flushPendingUpdates();
+    if (flushTimerRef.current) {
+      clearTimeout(flushTimerRef.current);
+      flushTimerRef.current = null;
+    }
     setIsStreaming(false);
+  }, [flushPendingUpdates]);
+
+  const clear = useCallback(() => {
+    stop();
+    setMessages([]);
     setError(null);
     pendingContentRef.current = '';
     pendingReasoningRef.current = '';
     toolInvocationsRef.current = [];
-  }, []);
+  }, [stop]);
 
-  return { messages, send, isStreaming, clear, error };
+  return { messages, setMessages, send, isStreaming, stop, clear, error };
 }

package/src/hooks/useDocumentPicker.ts

@@ -0,0 +1,37 @@
+import * as DocumentPicker from 'expo-document-picker';
+
+export type DocumentPickerResult = {
+  uri: string;
+  name: string;
+  size: number;
+  mimeType: string;
+};
+
+type UseDocumentPickerResult = {
+  pickDocument: () => Promise<DocumentPickerResult[] | undefined>;
+};
+
+export function useDocumentPicker(): UseDocumentPickerResult {
+  const pickDocument = async (): Promise<DocumentPickerResult[] | undefined> => {
+    try {
+      const result = await DocumentPicker.getDocumentAsync({
+        type: '*/*',
+        multiple: true,
+        copyToCacheDirectory: true,
+      });
+
+      if (result.canceled === false && result.assets && result.assets.length > 0) {
+        return result.assets.map((asset: any) => ({
+          uri: asset.uri,
+          name: asset.name,
+          size: asset.size || 0,
+          mimeType: asset.mimeType || 'application/octet-stream',
+        }));
+      }
+    } catch (error) {
+      console.warn('Failed to pick document:', error);
+    }
+  };
+
+  return { pickDocument };
+}

package/src/hooks/useImagePicker.ts

@@ -0,0 +1,38 @@
+import * as ImagePicker from 'expo-image-picker';
+
+export type ImagePickerAsset = {
+  uri: string;
+  name: string;
+  size: number;
+  mimeType: string;
+};
+
+type ImagePickerResult = {
+  pickImage: () => Promise<ImagePickerAsset[] | undefined>;
+};
+
+export function useImagePicker(): ImagePickerResult {
+  const pickImage = async (): Promise<ImagePickerAsset[] | undefined> => {
+    try {
+      const result = await ImagePicker.launchImageLibraryAsync({
+        allowsMultipleSelection: true,
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        aspect: [4, 3],
+        quality: 1,
+      });
+
+      if (!result.canceled && result.assets.length > 0) {
+        return result.assets.map((asset: any) => ({
+          uri: asset.uri,
+          name: asset.fileName || `image-${Date.now()}.jpg`,
+          size: asset.fileSize || 0,
+          mimeType: asset.mimeType || 'image/jpeg',
+        }));
+      }
+    } catch (error) {
+      console.warn('Failed to pick image:', error);
+    }
+  };
+
+  return { pickImage };
+}

package/src/hooks/useSpeechToText.ts

@@ -27,7 +27,7 @@ interface STTStoreState {
   setMetering: (v: number) => void;
 }
 
-const useSTTStore = create<STTStoreState>((set) => ({
+export const useSTTStore = create<STTStoreState>((set) => ({
   isRecording: false,
   metering: 0,
   setRecording: (isRecording) => set({ isRecording }),
@@ -119,6 +119,8 @@ export function useSpeechToText(options: UseSTTOptions = {}) {
       // Read audio file as base64
       const response = await fetch(uri);
       const blob = await response.blob();
+      // Detect actual MIME type (web records webm, native records m4a)
+      const detectedFormat = blob.type?.split(';')[0] || 'audio/m4a';
       const base64 = await new Promise<string>((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = () => {
@@ -139,7 +141,7 @@ export function useSpeechToText(options: UseSTTOptions = {}) {
         },
         body: JSON.stringify({
           audio: base64,
-          format: 'audio/m4a',
+          format: detectedFormat,
         }),
       });
 

package/src/index.ts

@@ -2,9 +2,11 @@
 // @alia.onl/sdk — Alia AI Chat SDK
 // Reusable chat UI, voice, and streaming components for Oxy apps
 
-// ── Main component ──
+// ── Main components ──
 export { AliaChatSheet } from './components/AliaChatSheet';
 export type { AliaChatSheetProps, AliaChatSheetRef } from './components/AliaChatSheet';
+export { AliaChatScreen } from './components/AliaChatScreen';
+export type { AliaChatScreenProps } from './components/AliaChatScreen';
 
 // ── Chat UI components ──
 export { AliaFace } from './components/AliaFace';
@@ -28,7 +30,7 @@ export { useAudioLevelMonitor } from './hooks/useAudioLevelMonitor';
 export { useAudioLevels } from './hooks/useAudioLevels';
 export { useTTS } from './hooks/useTTS';
 export type { UseTTSOptions } from './hooks/useTTS';
-export { useSpeechToText } from './hooks/useSpeechToText';
+export { useSpeechToText, useSTTStore } from './hooks/useSpeechToText';
 export type { UseSTTOptions } from './hooks/useSpeechToText';
 export { useSoundEffects, useVoiceSoundEffects } from './hooks/useSoundEffects';
 export type { SoundName, SoundSources } from './hooks/useSoundEffects';
@@ -46,6 +48,35 @@ export type {
   VoiceToolInvocation,
 } from './types';
 
+// ── UI Primitives (NativeWind) ──
+export { Button, buttonVariants, buttonTextVariants } from './components/ui/button';
+export type { ButtonProps } from './components/ui/button';
+export { Text, TextClassContext } from './components/ui/text';
+export { ChatTextInput } from './components/ui/chat-text-input';
+export { cn, formatFileSize } from './lib/utils';
+
+// ── PromptInput ──
+export { PromptInput } from './components/ui/prompt-input/prompt-input';
+export type { PromptInputProps } from './components/ui/prompt-input/prompt-input';
+export { usePromptInput, useIsFullscreen, PromptInputContext } from './components/ui/prompt-input/context';
+export type { Attachment, Completion, PromptInputContextType } from './components/ui/prompt-input/context';
+export { PromptInputTextarea } from './components/ui/prompt-input/textarea';
+export { PromptInputActions } from './components/ui/prompt-input/actions';
+export { PromptInputSubmitButton } from './components/ui/prompt-input/submit-button';
+export { PromptInputMicButton } from './components/ui/prompt-input/mic-button';
+export { PromptInputAddMenu } from './components/ui/prompt-input/add-menu';
+export { PromptInputAttachments } from './components/ui/prompt-input/attachments';
+export { PromptInputAutocomplete } from './components/ui/prompt-input/autocomplete';
+
+// ── Picker hooks ──
+export { useImagePicker } from './hooks/useImagePicker';
+export type { ImagePickerAsset } from './hooks/useImagePicker';
+export { useDocumentPicker } from './hooks/useDocumentPicker';
+export type { DocumentPickerResult } from './hooks/useDocumentPicker';
+
+// ── Keyboard ──
+export { KeyboardAwareScrollView, KeyboardAvoidingView, KeyboardProvider } from './lib/keyboard';
+
 // ── Theme ──
 export { useAliaColors } from './theme';
 export type { AliaColors } from './theme';

package/src/lib/keyboard.native.tsx

@@ -0,0 +1,6 @@
+// Native: re-export react-native-keyboard-controller components
+export {
+  KeyboardAwareScrollView,
+  KeyboardAvoidingView,
+  KeyboardProvider,
+} from 'react-native-keyboard-controller';

package/src/lib/keyboard.tsx

@@ -0,0 +1,25 @@
+// Web: re-export React Native built-in components as keyboard-controller substitutes
+import React from 'react';
+import { ScrollView, type ScrollViewProps, KeyboardAvoidingView } from 'react-native';
+
+// Accept native-only props so shared components don't cause TS errors
+type KeyboardAwareScrollViewProps = ScrollViewProps & {
+  bottomOffset?: number;
+  disableScrollOnKeyboardHide?: boolean;
+  enabled?: boolean;
+  extraKeyboardSpace?: number;
+};
+
+const KeyboardAwareScrollView = React.forwardRef<ScrollView, KeyboardAwareScrollViewProps>(
+  ({ bottomOffset, disableScrollOnKeyboardHide, enabled, extraKeyboardSpace, ...props }, ref) => (
+    <ScrollView ref={ref} {...props} />
+  )
+);
+KeyboardAwareScrollView.displayName = 'KeyboardAwareScrollView';
+
+export { KeyboardAwareScrollView, KeyboardAvoidingView };
+
+// No-op provider on web — keyboard-controller is native-only
+export function KeyboardProvider({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

package/src/lib/utils.ts

@@ -0,0 +1,14 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+}