@10play/expo-air 0.10.0 → 0.10.2

package/widget/components/PromptInput.tsx

@@ -1,23 +1,32 @@
-import React, { useState, useRef, useImperativeHandle, forwardRef } from "react";
+import React, { useState, useRef, useImperativeHandle, forwardRef, useEffect } from "react";
 import {
   View,
   TextInput,
   TouchableOpacity,
   StyleSheet,
+  Image,
+  ScrollView,
+  Alert,
+  NativeModules,
+  NativeEventEmitter,
 } from "react-native";
+import * as ImagePicker from "expo-image-picker";
 import { SPACING, LAYOUT, COLORS, TYPOGRAPHY, SIZES } from "../constants/design";
+import type { ImageAttachment } from "../services/websocket";
 
 export interface PromptInputHandle {
   focus: () => void;
 }
 
 interface PromptInputProps {
-  onSubmit: (prompt: string) => void;
+  onSubmit: (prompt: string, images?: ImageAttachment[]) => void;
   onStop?: () => void;
   disabled?: boolean;
   isProcessing?: boolean;
 }
 
+const MAX_IMAGES = 4;
+
 export const PromptInput = forwardRef<PromptInputHandle, PromptInputProps>(({
   onSubmit,
   onStop,
@@ -25,61 +34,149 @@ export const PromptInput = forwardRef<PromptInputHandle, PromptInputProps>(({
   isProcessing = false,
 }, ref) => {
   const [text, setText] = useState("");
+  const [images, setImages] = useState<ImageAttachment[]>([]);
   const inputRef = useRef<TextInput>(null);
 
   useImperativeHandle(ref, () => ({
     focus: () => inputRef.current?.focus(),
   }));
 
+  // Listen for native image paste events (UITextView paste: swizzle)
+  useEffect(() => {
+    const emitter = new NativeEventEmitter(NativeModules.WidgetBridge);
+    const subscription = emitter.addListener('onClipboardImagePaste', (image: ImageAttachment) => {
+      setImages((prev) => {
+        if (prev.length >= MAX_IMAGES) return prev;
+        return [...prev, image];
+      });
+    });
+    return () => subscription.remove();
+  }, []);
+
   const handleSubmit = () => {
     const trimmed = text.trim();
-    if (trimmed && !disabled && !isProcessing) {
-      onSubmit(trimmed);
+    const hasContent = trimmed.length > 0 || images.length > 0;
+    if (hasContent && !disabled && !isProcessing) {
+      onSubmit(trimmed, images.length > 0 ? images : undefined);
       setText("");
+      setImages([]);
     }
   };
 
-  // Input stays editable, but submit button disabled when disconnected
-  const canSubmit = text.trim().length > 0 && !disabled && !isProcessing;
+  const handlePickImages = async () => {
+    if (images.length >= MAX_IMAGES) {
+      Alert.alert("Limit reached", `Maximum ${MAX_IMAGES} images per message.`);
+      return;
+    }
+
+    try {
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ["images"],
+        allowsMultipleSelection: true,
+        selectionLimit: MAX_IMAGES - images.length,
+        quality: 0.7,
+      });
+
+      if (!result.canceled && result.assets.length > 0) {
+        const picked: ImageAttachment[] = result.assets.map((asset) => ({
+          uri: asset.uri,
+          width: asset.width,
+          height: asset.height,
+        }));
+        setImages((prev) => [...prev, ...picked].slice(0, MAX_IMAGES));
+      }
+    } catch (e) {
+      console.warn("[expo-air] Image picker error:", e);
+    }
+  };
+
+  const removeImage = (index: number) => {
+    setImages((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const canSubmit = (text.trim().length > 0 || images.length > 0) && !disabled && !isProcessing;
 
   return (
-    <View style={styles.container}>
-      <TextInput
-        ref={inputRef}
-        style={styles.input}
-        placeholder="Ask Claude..."
-        placeholderTextColor={COLORS.TEXT_TERTIARY}
-        value={text}
-        onChangeText={setText}
-        onSubmitEditing={handleSubmit}
-        editable={!isProcessing}
-        multiline
-        maxLength={2000}
-        returnKeyType="send"
-        blurOnSubmit
-      />
-      {isProcessing ? (
-        <TouchableOpacity
-          style={[styles.submitButton, styles.stopButton]}
-          onPress={onStop}
-          activeOpacity={0.7}
+    <View style={styles.outerContainer}>
+      {images.length > 0 && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={styles.previewStrip}
+          contentContainerStyle={styles.previewContent}
         >
-          <StopIcon />
-        </TouchableOpacity>
-      ) : (
+          {images.map((img, index) => (
+            <View key={index} style={styles.previewItem}>
+              <Image source={{ uri: img.uri }} style={styles.previewImage} />
+              <TouchableOpacity
+                style={styles.removeButton}
+                onPress={() => removeImage(index)}
+                hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
+              >
+                <View style={styles.removeIcon}>
+                  <View style={[styles.removeLine, styles.removeLineA]} />
+                  <View style={[styles.removeLine, styles.removeLineB]} />
+                </View>
+              </TouchableOpacity>
+            </View>
+          ))}
+        </ScrollView>
+      )}
+      <View style={styles.container}>
         <TouchableOpacity
-          style={[styles.submitButton, !canSubmit && styles.submitButtonDisabled]}
-          onPress={handleSubmit}
-          disabled={!canSubmit}
-          activeOpacity={0.7}
+          style={styles.iconButton}
+          onPress={handlePickImages}
+          disabled={isProcessing}
+          activeOpacity={0.6}
         >
-          <ArrowIcon />
+          <PlusIcon />
         </TouchableOpacity>
-      )}
+        <TextInput
+          ref={inputRef}
+          style={styles.input}
+          placeholder="Ask Claude..."
+          placeholderTextColor={COLORS.TEXT_TERTIARY}
+          value={text}
+          onChangeText={setText}
+          onSubmitEditing={handleSubmit}
+          editable={!isProcessing}
+          multiline
+          maxLength={2000}
+          returnKeyType="send"
+          blurOnSubmit
+        />
+        {isProcessing ? (
+          <TouchableOpacity
+            style={[styles.submitButton, styles.stopButton]}
+            onPress={onStop}
+            activeOpacity={0.7}
+          >
+            <StopIcon />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            style={[styles.submitButton, !canSubmit && styles.submitButtonDisabled]}
+            onPress={handleSubmit}
+            disabled={!canSubmit}
+            activeOpacity={0.7}
+          >
+            <ArrowIcon />
+          </TouchableOpacity>
+        )}
+      </View>
     </View>
   );
 });
 
+function PlusIcon() {
+  return (
+    <View style={styles.plusIcon}>
+      <View style={styles.plusH} />
+      <View style={styles.plusV} />
+    </View>
+  );
+}
+
 function ArrowIcon() {
   return (
     <View style={styles.arrowIcon}>
@@ -94,14 +191,71 @@ function StopIcon() {
 }
 
 const styles = StyleSheet.create({
+  outerContainer: {
+    borderTopWidth: 1,
+    borderTopColor: COLORS.BORDER,
+    backgroundColor: COLORS.BACKGROUND,
+  },
+  previewStrip: {
+    maxHeight: 72,
+    paddingHorizontal: LAYOUT.CONTENT_PADDING_H,
+    paddingTop: SPACING.SM,
+  },
+  previewContent: {
+    gap: SPACING.SM,
+    alignItems: "center",
+  },
+  previewItem: {
+    position: "relative",
+  },
+  previewImage: {
+    width: 56,
+    height: 56,
+    borderRadius: SPACING.SM,
+    backgroundColor: "rgba(255,255,255,0.1)",
+  },
+  removeButton: {
+    position: "absolute",
+    top: -3,
+    right: -3,
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    backgroundColor: "#1C1C1E",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  removeIcon: {
+    width: 8,
+    height: 8,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  removeLine: {
+    position: "absolute",
+    width: 9,
+    height: 1.2,
+    backgroundColor: "rgba(255,255,255,0.9)",
+    borderRadius: 1,
+  },
+  removeLineA: {
+    transform: [{ rotate: "45deg" }],
+  },
+  removeLineB: {
+    transform: [{ rotate: "-45deg" }],
+  },
   container: {
     flexDirection: "row",
     alignItems: "flex-end",
     paddingHorizontal: LAYOUT.CONTENT_PADDING_H,
     paddingVertical: SPACING.MD,
-    borderTopWidth: 1,
-    borderTopColor: COLORS.BORDER,
-    backgroundColor: COLORS.BACKGROUND,
+  },
+  iconButton: {
+    width: 36,
+    height: SIZES.SUBMIT_BUTTON,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 4,
   },
   input: {
     flex: 1,
@@ -120,7 +274,7 @@ const styles = StyleSheet.create({
     backgroundColor: COLORS.BACKGROUND_BUTTON,
     alignItems: "center",
     justifyContent: "center",
-    marginLeft: SPACING.SM + 2, // 10px
+    marginLeft: SPACING.SM + 2,
   },
   submitButtonDisabled: {
     opacity: 0.4,
@@ -158,4 +312,25 @@ const styles = StyleSheet.create({
     borderRightColor: "transparent",
     borderBottomColor: COLORS.TEXT_PRIMARY,
   },
+  // Plus icon
+  plusIcon: {
+    width: 18,
+    height: 18,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  plusH: {
+    position: "absolute",
+    width: 16,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: COLORS.TEXT_MUTED,
+  },
+  plusV: {
+    position: "absolute",
+    width: 2,
+    height: 16,
+    borderRadius: 1,
+    backgroundColor: COLORS.TEXT_MUTED,
+  },
 });

package/widget/components/ResponseArea.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState, useCallback } from "react";
-import { View, Text, ScrollView, StyleSheet, TouchableOpacity, NativeScrollEvent, Keyboard, Platform, Linking } from "react-native";
+import { View, Text, ScrollView, StyleSheet, TouchableOpacity, NativeScrollEvent, Keyboard, Platform, Image, Linking } from "react-native";
 import type { ServerMessage, ToolMessage, ResultMessage, UserPromptMessage, HistoryResultMessage, SystemDisplayMessage, AssistantPart, AssistantPartsMessage } from "../services/websocket";
 import { SPACING, LAYOUT, COLORS, TYPOGRAPHY } from "../constants/design";
 
@@ -152,7 +152,16 @@ function MessageItem({ message }: { key?: React.Key; message: ServerMessage }) {
 function UserPromptItem({ message }: { message: UserPromptMessage }) {
   return (
     <View style={styles.userPromptContainer}>
-      <Text style={styles.userPromptText} selectable>{message.content}</Text>
+      {message.images && message.images.length > 0 && (
+        <View style={styles.userImages}>
+          {message.images.map((img, i) => (
+            <Image key={i} source={{ uri: img.uri }} style={styles.userImageThumb} />
+          ))}
+        </View>
+      )}
+      {message.content ? (
+        <Text style={styles.userPromptText} selectable>{message.content}</Text>
+      ) : null}
     </View>
   );
 }
@@ -716,6 +725,18 @@ const styles = StyleSheet.create({
     fontSize: TYPOGRAPHY.SIZE_LG,
     lineHeight: 20,
   },
+  userImages: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACING.SM,
+    marginBottom: SPACING.SM,
+  },
+  userImageThumb: {
+    width: 80,
+    height: 80,
+    borderRadius: SPACING.SM,
+    backgroundColor: "rgba(255,255,255,0.1)",
+  },
   scrollButton: {
     position: "absolute",
     bottom: LAYOUT.CONTENT_PADDING_H,

package/widget/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "expo": "~54.0.32",
+    "expo-image-picker": "~16.1.4",
     "react": "19.1.0",
     "react-native": "0.81.5"
   },

package/widget/services/websocket.ts

@@ -92,10 +92,17 @@ export interface HistoryMessage {
   timestamp: number;
 }
 
+export interface ImageAttachment {
+  uri: string;
+  width?: number;
+  height?: number;
+}
+
 // Local display-only message for showing user prompts in the UI
 export interface UserPromptMessage {
   type: "user_prompt";
   content: string;
+  images?: ImageAttachment[];
   timestamp: number;
 }
 
@@ -341,18 +348,22 @@ export class WebSocketClient {
     this.setStatus("disconnected");
   }
 
-  sendPrompt(content: string): void {
+  sendPrompt(content: string, imagePaths?: string[]): void {
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
       this.options.onError(new Error("Not connected"));
       return;
     }
 
-    const message = {
+    const message: Record<string, unknown> = {
       type: "prompt",
       content,
       id: generateId(),
     };
 
+    if (imagePaths && imagePaths.length > 0) {
+      message.imagePaths = imagePaths;
+    }
+
     this.ws.send(JSON.stringify(message));
     this.setStatus("processing");
   }