@oxyhq/bloom 0.1.0

package/src/prompt-input/Attachments.tsx

@@ -0,0 +1,264 @@
+import React from 'react';
+import { View, Text, Image, Pressable, ScrollView, ActivityIndicator } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { usePromptInput, type Attachment } from './context';
+import type { PromptInputAttachmentsProps } from './types';
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function truncateFilename(name: string, maxLength = 20): string {
+  if (name.length <= maxLength) return name;
+  const lastDot = name.lastIndexOf('.');
+  if (lastDot < 0) return name.slice(0, maxLength - 3) + '...';
+  const ext = name.slice(lastDot);
+  const base = name.slice(0, lastDot);
+  const available = maxLength - ext.length - 3;
+  if (available <= 0) return name.slice(0, maxLength - 3) + '...';
+  return base.slice(0, available) + '...' + ext;
+}
+
+interface DocIconInfo {
+  label: string;
+  color: string;
+  bgColor: string;
+}
+
+function getDocumentIconInfo(mimeType: string, name: string): DocIconInfo {
+  const ext = name.split('.').pop()?.toLowerCase() ?? '';
+
+  if (mimeType === 'application/pdf' || ext === 'pdf')
+    return { label: 'PDF', color: '#EF4444', bgColor: '#EF444418' };
+  if (mimeType.includes('word') || ['doc', 'docx'].includes(ext))
+    return { label: 'DOC', color: '#3B82F6', bgColor: '#3B82F618' };
+  if (mimeType.includes('spreadsheet') || mimeType.includes('excel') || ['xls', 'xlsx', 'csv'].includes(ext))
+    return { label: 'XLS', color: '#22C55E', bgColor: '#22C55E18' };
+  if (['js', 'ts', 'tsx', 'jsx', 'py', 'rb', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'json', 'xml', 'yaml', 'yml', 'html', 'css', 'scss', 'sh', 'sql'].includes(ext))
+    return { label: '</>', color: '#8B5CF6', bgColor: '#8B5CF618' };
+  if (mimeType.includes('zip') || mimeType.includes('archive') || ['zip', 'rar', 'tar', 'gz', '7z'].includes(ext))
+    return { label: 'ZIP', color: '#EAB308', bgColor: '#EAB30818' };
+  if (mimeType.startsWith('audio/') || ['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(ext))
+    return { label: '♫', color: '#EC4899', bgColor: '#EC489918' };
+  if (mimeType === 'text/plain' || ['txt', 'md', 'rtf'].includes(ext))
+    return { label: 'TXT', color: '#6B7280', bgColor: '#6B728018' };
+  return { label: 'FILE', color: '#9CA3AF', bgColor: '#9CA3AF18' };
+}
+
+function RemoveButton({
+  onPress,
+  size,
+  backgroundColor,
+  removeIcon,
+  label,
+}: {
+  onPress: () => void;
+  size: number;
+  backgroundColor: string;
+  removeIcon?: React.ReactNode;
+  label: string;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={`Remove ${label}`}
+      style={{
+        position: 'absolute',
+        top: 6,
+        right: 6,
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {removeIcon ?? <Text style={{ color: '#FFFFFF', fontSize: size * 0.6, fontWeight: '700', lineHeight: size * 0.7 }}>×</Text>}
+    </Pressable>
+  );
+}
+
+function ImageAttachmentItem({
+  attachment,
+  onRemove,
+  removeIcon,
+}: {
+  attachment: Attachment;
+  onRemove: () => void;
+  removeIcon?: React.ReactNode;
+}) {
+  const theme = useTheme();
+
+  return (
+    <View
+      style={{
+        width: 120,
+        height: 120,
+        borderRadius: 16,
+        overflow: 'hidden',
+        backgroundColor: theme.colors.backgroundSecondary,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+      }}
+    >
+      {!attachment.isLoading && attachment.uri ? (
+        <Image
+          source={{ uri: attachment.uri }}
+          style={{ width: '100%', height: '100%' }}
+          resizeMode="cover"
+        />
+      ) : (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+          <ActivityIndicator size="small" />
+        </View>
+      )}
+      {attachment.name && !attachment.isLoading && (
+        <View
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+            backgroundColor: 'rgba(0,0,0,0.5)',
+          }}
+        >
+          <Text style={{ fontSize: 11, color: '#FFFFFF' }} numberOfLines={1}>
+            {truncateFilename(attachment.name)}
+          </Text>
+        </View>
+      )}
+      <RemoveButton
+        onPress={onRemove}
+        size={24}
+        backgroundColor="rgba(0,0,0,0.6)"
+        removeIcon={removeIcon}
+        label={attachment.name || 'image'}
+      />
+    </View>
+  );
+}
+
+function DocumentAttachmentItem({
+  attachment,
+  onRemove,
+  removeIcon,
+  renderDocumentIcon,
+}: {
+  attachment: Attachment;
+  onRemove: () => void;
+  removeIcon?: React.ReactNode;
+  renderDocumentIcon?: (mimeType: string, name: string) => React.ReactNode;
+}) {
+  const theme = useTheme();
+  const iconInfo = getDocumentIconInfo(attachment.mimeType, attachment.name);
+
+  return (
+    <View
+      style={{
+        width: 180,
+        height: 80,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        overflow: 'hidden',
+        backgroundColor: theme.colors.backgroundSecondary,
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: 12,
+          gap: 12,
+        }}
+      >
+        {renderDocumentIcon ? (
+          renderDocumentIcon(attachment.mimeType, attachment.name)
+        ) : (
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 12,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: iconInfo.bgColor,
+            }}
+          >
+            <Text style={{ fontSize: 12, fontWeight: '700', color: iconInfo.color }}>
+              {iconInfo.label}
+            </Text>
+          </View>
+        )}
+        <View style={{ flex: 1, paddingRight: 16 }}>
+          <Text
+            style={{ fontSize: 12, fontWeight: '500', color: theme.colors.text }}
+            numberOfLines={1}
+          >
+            {truncateFilename(attachment.name)}
+          </Text>
+          {attachment.size > 0 && (
+            <Text style={{ fontSize: 11, color: theme.colors.textSecondary, marginTop: 2 }}>
+              {formatFileSize(attachment.size)}
+            </Text>
+          )}
+        </View>
+      </View>
+      <RemoveButton
+        onPress={onRemove}
+        size={20}
+        backgroundColor={theme.colors.backgroundTertiary}
+        removeIcon={removeIcon}
+        label={attachment.name || 'document'}
+      />
+    </View>
+  );
+}
+
+export function PromptInputAttachments({
+  removeIcon,
+  renderDocumentIcon,
+  style,
+  testID,
+}: PromptInputAttachmentsProps) {
+  const { attachments, removeAttachment } = usePromptInput();
+
+  if (attachments.length === 0) return null;
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={[{ flexGrow: 0, marginBottom: 8, paddingTop: 8 }, style]}
+      contentContainerStyle={{ gap: 10, paddingHorizontal: 12 }}
+      testID={testID}
+    >
+      {attachments.map((attachment) => (
+        <View key={attachment.id}>
+          {attachment.type === 'image' ? (
+            <ImageAttachmentItem
+              attachment={attachment}
+              onRemove={() => removeAttachment(attachment.id)}
+              removeIcon={removeIcon}
+            />
+          ) : (
+            <DocumentAttachmentItem
+              attachment={attachment}
+              onRemove={() => removeAttachment(attachment.id)}
+              removeIcon={removeIcon}
+              renderDocumentIcon={renderDocumentIcon}
+            />
+          )}
+        </View>
+      ))}
+    </ScrollView>
+  );
+}

package/src/prompt-input/PromptInput.tsx

@@ -0,0 +1,263 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  Pressable,
+  Text,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  type TextInput as RNTextInput,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Portal } from '../portal';
+import { PromptInputContext, type Attachment } from './context';
+import { PromptInputTextarea } from './Textarea';
+import { PromptInputActions } from './Actions';
+import { PromptInputAttachments } from './Attachments';
+import { PromptInputSubmitButton } from './SubmitButton';
+import type { PromptInputProps } from './types';
+
+export function PromptInput({
+  isLoading = false,
+  maxHeight = 240,
+  value,
+  onValueChange,
+  onSubmit,
+  children,
+  style,
+  disabled = false,
+  onImagePaste,
+  placeholder,
+  actionsLeft,
+  onStop,
+  emptyAction,
+  attachments: controlledAttachments,
+  onAddAttachment,
+  onRemoveAttachment,
+  onUpdateAttachment,
+  disableKeyboardAvoidance = false,
+  expandIcon,
+  collapseIcon,
+  testID,
+}: 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);
+  const theme = useTheme();
+
+  // 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 = useCallback(
+    (newValue: string) => {
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    },
+    [onValueChange],
+  );
+
+  const handleSubmit = useCallback(() => {
+    onSubmit?.();
+    if (showFullscreen) setShowFullscreen(false);
+  }, [onSubmit, showFullscreen]);
+
+  useEffect(() => {
+    if (!showFullscreen) setCurrentHeight(44);
+  }, [showFullscreen]);
+
+  const showExpandIcon = currentHeight > 100;
+  const isSimpleMode = !children;
+
+  const currentValue = value ?? internalValue;
+  const currentSetValue = onValueChange ?? handleChange;
+
+  const contextValue = useMemo(
+    () => ({
+      isLoading,
+      value: currentValue,
+      setValue: currentSetValue,
+      maxHeight,
+      onSubmit: handleSubmit,
+      disabled,
+      textareaRef,
+      currentHeight,
+      setCurrentHeight,
+      isFullscreen: showFullscreen,
+      onImagePaste,
+      attachments,
+      addAttachment,
+      removeAttachment,
+      updateAttachment,
+      handleCompletionKey,
+      setHandleCompletionKey,
+    }),
+    [
+      isLoading, currentValue, currentSetValue, maxHeight, handleSubmit,
+      disabled, currentHeight, showFullscreen, onImagePaste,
+      attachments, addAttachment, removeAttachment, updateAttachment,
+      handleCompletionKey,
+    ],
+  );
+
+  const content = isSimpleMode ? (
+    <>
+      <PromptInputAttachments />
+      <PromptInputTextarea placeholder={placeholder} />
+      <PromptInputActions
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 8,
+          marginTop: 6,
+          marginBottom: 12,
+          paddingHorizontal: 12,
+        }}
+      >
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+          {actionsLeft}
+        </View>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+          <PromptInputSubmitButton
+            isLoading={isLoading}
+            onStop={onStop}
+            emptyAction={emptyAction}
+          />
+        </View>
+      </PromptInputActions>
+    </>
+  ) : (
+    children
+  );
+
+  const inputBox = (
+    <Pressable
+      onPress={() => {
+        if (!disabled) textareaRef.current?.focus();
+      }}
+      disabled={disabled}
+    >
+      <View
+        style={[
+          {
+            borderRadius: 24,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            backgroundColor: theme.colors.background,
+            overflow: 'hidden',
+            position: 'relative',
+          },
+          disabled && { opacity: 0.6 },
+          style,
+        ]}
+        testID={testID}
+      >
+        {showExpandIcon && !disabled && (
+          <Pressable
+            onPress={() => setShowFullscreen(true)}
+            style={{
+              position: 'absolute',
+              top: 8,
+              right: 8,
+              zIndex: 10,
+              backgroundColor: theme.colors.background,
+              borderRadius: 9999,
+              padding: 6,
+              borderWidth: 1,
+              borderColor: theme.colors.border,
+            }}
+          >
+            {expandIcon ?? (
+              <Text style={{ fontSize: 14, color: theme.colors.textSecondary }}>⤢</Text>
+            )}
+          </Pressable>
+        )}
+        {content}
+      </View>
+    </Pressable>
+  );
+
+  const Wrapper = disableKeyboardAvoidance ? View : KeyboardAvoidingView;
+  const wrapperProps = disableKeyboardAvoidance
+    ? {}
+    : { behavior: Platform.OS === 'ios' ? 'padding' as const : undefined };
+
+  return (
+    <PromptInputContext.Provider value={contextValue}>
+      <Wrapper {...wrapperProps}>
+        {inputBox}
+      </Wrapper>
+
+      {showFullscreen && (
+        <Portal>
+          <View
+            style={[
+              StyleSheet.absoluteFillObject,
+              {
+                zIndex: 9998,
+                backgroundColor: theme.colors.background,
+              },
+            ]}
+          >
+            <Pressable
+              onPress={() => setShowFullscreen(false)}
+              style={{
+                position: 'absolute',
+                top: 16,
+                right: 16,
+                zIndex: 50,
+                padding: 8,
+                backgroundColor: theme.colors.background,
+                borderRadius: 9999,
+              }}
+            >
+              {collapseIcon ?? (
+                <Text style={{ fontSize: 18, color: theme.colors.text }}>⤡</Text>
+              )}
+            </Pressable>
+            <View style={{ flex: 1 }}>{content}</View>
+          </View>
+        </Portal>
+      )}
+    </PromptInputContext.Provider>
+  );
+}

package/src/prompt-input/SubmitButton.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { usePromptInput } from './context';
+import type { PromptInputSubmitButtonProps } from './types';
+
+export function PromptInputSubmitButton({
+  isLoading,
+  onStop,
+  emptyAction,
+  submitIcon,
+  stopIcon,
+  style,
+  testID,
+}: PromptInputSubmitButtonProps) {
+  const { onSubmit, value, attachments } = usePromptInput();
+  const theme = useTheme();
+  const hasContent = value.trim().length > 0 || attachments.length > 0;
+
+  if (isLoading && onStop) {
+    return (
+      <TouchableOpacity
+        onPress={onStop}
+        activeOpacity={0.7}
+        style={[
+          {
+            width: 32,
+            height: 32,
+            borderRadius: 16,
+            backgroundColor: theme.colors.primary,
+            alignItems: 'center',
+            justifyContent: 'center',
+          },
+          style,
+        ]}
+        testID={testID}
+      >
+        {stopIcon ?? (
+          <Text style={{ fontSize: 12, color: '#FFFFFF', fontWeight: '700' }}>■</Text>
+        )}
+      </TouchableOpacity>
+    );
+  }
+
+  if (!hasContent && emptyAction) {
+    return <>{emptyAction}</>;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={onSubmit}
+      disabled={!hasContent}
+      activeOpacity={0.7}
+      style={[
+        {
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          backgroundColor: theme.colors.primary,
+          alignItems: 'center',
+          justifyContent: 'center',
+          opacity: hasContent ? 1 : 0.4,
+        },
+        style,
+      ]}
+      testID={testID}
+    >
+      {submitIcon ?? (
+        <Text style={{ fontSize: 16, color: '#FFFFFF', fontWeight: '700' }}>↑</Text>
+      )}
+    </TouchableOpacity>
+  );
+}

package/src/prompt-input/Textarea.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useImperativeHandle, useRef } from 'react';
+import {
+  TextInput,
+  View,
+  type NativeSyntheticEvent,
+  type TextInputContentSizeChangeEventData,
+  type TextInputKeyPressEventData,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { usePromptInput } from './context';
+import type { PromptInputTextareaProps } from './types';
+
+export function PromptInputTextarea({
+  placeholder,
+  style,
+  inputStyle,
+  textInputProps,
+  testID,
+}: PromptInputTextareaProps) {
+  const {
+    value,
+    setValue,
+    onSubmit,
+    disabled,
+    textareaRef,
+    setCurrentHeight,
+    isFullscreen,
+    maxHeight,
+    handleCompletionKey,
+  } = usePromptInput();
+  const theme = useTheme();
+  const inputRef = useRef<TextInput>(null);
+
+  useImperativeHandle(textareaRef, () => inputRef.current as TextInput);
+
+  const handleKeyPress = useCallback(
+    (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      textInputProps?.onKeyPress?.(e);
+      const key = e.nativeEvent.key;
+
+      if (handleCompletionKey && ['ArrowUp', 'ArrowDown', 'Enter', 'Escape'].includes(key)) {
+        if (handleCompletionKey(key)) {
+          e.preventDefault();
+          return;
+        }
+      }
+    },
+    [handleCompletionKey, textInputProps],
+  );
+
+  const handleContentSizeChange = useCallback(
+    (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+      textInputProps?.onContentSizeChange?.(e);
+    },
+    [textInputProps],
+  );
+
+  const textInput = (
+    <View
+      style={[{ width: '100%' }, isFullscreen && { flex: 1 }]}
+      onLayout={(e) => setCurrentHeight(e.nativeEvent.layout.height)}
+    >
+      <TextInput
+        ref={inputRef}
+        accessibilityLabel="Message input"
+        value={value}
+        onChangeText={setValue}
+        onSubmitEditing={onSubmit}
+        onKeyPress={handleKeyPress}
+        onContentSizeChange={handleContentSizeChange}
+        multiline
+        editable={!disabled}
+        scrollEnabled={isFullscreen}
+        placeholder={placeholder}
+        placeholderTextColor={theme.colors.textTertiary}
+        style={[
+          {
+            width: '100%',
+            fontSize: 16,
+            color: theme.colors.text,
+            paddingHorizontal: 14,
+            backgroundColor: 'transparent',
+            borderWidth: 0,
+          },
+          isFullscreen
+            ? { flex: 1, paddingTop: 16, paddingBottom: 100 }
+            : { minHeight: 44, paddingVertical: 12, maxHeight, overflow: 'scroll' },
+          inputStyle,
+        ]}
+        testID={testID}
+        {...textInputProps}
+      />
+    </View>
+  );
+
+  if (isFullscreen) {
+    return <View style={[{ flex: 1 }, style]}>{textInput}</View>;
+  }
+
+  return <View style={style}>{textInput}</View>;
+}