@crafter/rn-ai-elements 0.0.1

package/package.json

@@ -0,0 +1,132 @@
+{
+  "name": "@crafter/rn-ai-elements",
+  "version": "0.0.1",
+  "description": "React Native AI UI component library — an RN port of Vercel ai-elements",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "react-native": "./src/index.ts",
+      "import": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js"
+    },
+    "./voice": {
+      "types": "./lib/typescript/src/voice/index.d.ts",
+      "react-native": "./src/voice/index.ts",
+      "import": "./lib/module/voice/index.js",
+      "require": "./lib/commonjs/voice/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "dev": "bob build --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "clean": "rm -rf lib"
+  },
+  "keywords": [
+    "react-native",
+    "ai",
+    "chat",
+    "streaming",
+    "vercel-ai-sdk",
+    "expo",
+    "components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/crafter-station/rn-ai-elements.git",
+    "directory": "packages/elements"
+  },
+  "author": "Crafter Station <hello@crafterstation.com>",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/crafter-station/rn-ai-elements/issues"
+  },
+  "homepage": "https://rn-elements.crafterstation.com",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@ai-sdk/react": ">=0.0.40",
+    "@expo/ui": ">=55.0.0",
+    "ai": ">=3",
+    "expo-glass-effect": ">=55.0.0",
+    "expo-speech-recognition": ">=3.0.0",
+    "react": ">=18",
+    "react-native": ">=0.72",
+    "react-native-reanimated": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "ai": {
+      "optional": true
+    },
+    "@ai-sdk/react": {
+      "optional": true
+    },
+    "@expo/ui": {
+      "optional": true
+    },
+    "expo-glass-effect": {
+      "optional": true
+    },
+    "expo-speech-recognition": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "lucide-react-native": "^0.577.0",
+    "react-native-markdown-display": "^7.0.2"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-flow": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@crafter/typescript-config": "workspace:*",
+    "@expo/ui": "~55.0.1",
+    "@testing-library/react-native": "^12.0.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "~19.2.0",
+    "babel-jest": "^29.7.0",
+    "babel-preset-expo": "~55.0.16",
+    "eslint": "^9.0.0",
+    "expo-glass-effect": "~55.0.7",
+    "jest": "^29.7.0",
+    "jest-expo": "^55.0.14",
+    "react": "^19.0.0",
+    "react-native": "^0.83.0",
+    "react-native-builder-bob": "^0.35.0",
+    "react-native-reanimated": "^4.2.0",
+    "react-test-renderer": "19.2.0",
+    "typescript": "^5.6.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/chatbot/AIImage.tsx

@@ -0,0 +1,166 @@
+import React, { memo, useCallback, useState } from 'react';
+import {
+  Image,
+  Pressable,
+  StyleSheet,
+  View,
+  type ImageResizeMode,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useAIElementsTheme } from '../theme';
+import { Shimmer } from './Shimmer';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type AIImageSource =
+  | { uri: string; base64?: never; mimeType?: never }
+  | { base64: string; mimeType?: string; uri?: never };
+
+export interface AIImageProps {
+  source: AIImageSource;
+  alt?: string;
+  width?: number;
+  height?: number;
+  resizeMode?: 'cover' | 'contain' | 'stretch';
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function resolveImageUri(source: AIImageSource): string {
+  if ('uri' in source && source.uri) {
+    return source.uri;
+  }
+  const mime = source.mimeType ?? 'image/png';
+  return `data:${mime};base64,${source.base64}`;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function AIImageComponent({
+  source,
+  alt,
+  width: explicitWidth,
+  height: explicitHeight,
+  resizeMode = 'cover',
+  style,
+  onPress,
+}: AIImageProps) {
+  const theme = useAIElementsTheme();
+  const [isLoading, setIsLoading] = useState(true);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [aspectRatio, setAspectRatio] = useState<number | undefined>(
+    explicitWidth && explicitHeight
+      ? explicitWidth / explicitHeight
+      : undefined,
+  );
+
+  const uri = resolveImageUri(source);
+
+  // Measure natural aspect ratio when not provided
+  const handleLoad = useCallback(() => {
+    setIsLoading(false);
+
+    if (!explicitWidth || !explicitHeight) {
+      Image.getSize(
+        uri,
+        (w, h) => {
+          if (h > 0) {
+            setAspectRatio(w / h);
+          }
+        },
+        () => {
+          // fallback: keep undefined, image will use container size
+        },
+      );
+    }
+  }, [uri, explicitWidth, explicitHeight]);
+
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    setContainerWidth(event.nativeEvent.layout.width);
+  }, []);
+
+  // Determine display dimensions
+  const displayWidth = explicitWidth ?? containerWidth;
+  const displayHeight =
+    explicitHeight ?? (aspectRatio ? displayWidth / aspectRatio : 200);
+
+  const imageContent = (
+    <View
+      onLayout={handleLayout}
+      style={[
+        styles.container,
+        {
+          borderRadius: theme.radius.md,
+          overflow: 'hidden',
+          width: explicitWidth ?? '100%',
+          height: displayHeight,
+        },
+        style,
+      ]}
+    >
+      {isLoading && (
+        <View style={StyleSheet.absoluteFill}>
+          <Shimmer
+            width="100%"
+            height={displayHeight}
+            borderRadius={theme.radius.md}
+          />
+        </View>
+      )}
+
+      <Image
+        source={{ uri }}
+        accessibilityLabel={alt}
+        resizeMode={resizeMode as ImageResizeMode}
+        onLoad={handleLoad}
+        style={[
+          StyleSheet.absoluteFill,
+          { opacity: isLoading ? 0 : 1 },
+        ]}
+      />
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => [pressed && styles.pressed]}
+      >
+        {imageContent}
+      </Pressable>
+    );
+  }
+
+  return imageContent;
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    backgroundColor: 'transparent',
+  },
+  pressed: {
+    opacity: 0.85,
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Export
+// ---------------------------------------------------------------------------
+
+export const AIImage = memo(AIImageComponent);

package/src/chatbot/Attachments.tsx

@@ -0,0 +1,382 @@
+import React, { memo } from 'react';
+import {
+  Image,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type ImageStyle,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { File, ImageIcon } from 'lucide-react-native';
+import { useAIElementsTheme } from '../theme';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface Attachment {
+  type: 'image' | 'file';
+  name: string;
+  url?: string;
+  uri?: string;
+  mimeType?: string;
+  size?: number;
+}
+
+export type AttachmentVariant = 'grid' | 'inline' | 'list';
+
+export interface AttachmentsProps {
+  attachments: Attachment[];
+  variant?: AttachmentVariant;
+  style?: StyleProp<ViewStyle>;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatFileSize(bytes?: number): string {
+  if (bytes == null) return '';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function getImageSource(attachment: Attachment) {
+  const source = attachment.uri ?? attachment.url;
+  return source ? { uri: source } : undefined;
+}
+
+// ---------------------------------------------------------------------------
+// Image thumbnail
+// ---------------------------------------------------------------------------
+
+interface ImageThumbnailProps {
+  attachment: Attachment;
+  size: number;
+  style?: StyleProp<ImageStyle>;
+}
+
+function ImageThumbnail({ attachment, size, style }: ImageThumbnailProps) {
+  const theme = useAIElementsTheme();
+  const source = getImageSource(attachment);
+
+  if (!source) {
+    return (
+      <View
+        style={[
+          styles.imagePlaceholder,
+          {
+            width: size,
+            height: size,
+            backgroundColor: theme.colors.muted,
+            borderRadius: theme.radius.md,
+          },
+          style as StyleProp<ViewStyle>,
+        ]}
+      >
+        <ImageIcon size={24} color={theme.colors.mutedForeground} />
+      </View>
+    );
+  }
+
+  return (
+    <Image
+      source={source}
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: theme.radius.md,
+        },
+        style,
+      ]}
+      resizeMode="cover"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// File row
+// ---------------------------------------------------------------------------
+
+interface FileRowProps {
+  attachment: Attachment;
+}
+
+function FileRow({ attachment }: FileRowProps) {
+  const theme = useAIElementsTheme();
+
+  const nameStyle: TextStyle = {
+    color: theme.colors.foreground,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.medium as TextStyle['fontWeight'],
+    fontFamily: theme.typography.fontFamily,
+  };
+
+  const metaStyle: TextStyle = {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.typography.fontSize.xs,
+    fontFamily: theme.typography.fontFamily,
+  };
+
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.fileRow,
+        {
+          backgroundColor: pressed ? theme.colors.muted : theme.colors.card,
+          borderColor: theme.colors.border,
+          borderRadius: theme.radius.md,
+          padding: theme.spacing.md,
+          gap: theme.spacing.md,
+        },
+      ]}
+    >
+      <View
+        style={[
+          styles.fileIcon,
+          {
+            backgroundColor: theme.colors.muted,
+            borderRadius: theme.radius.sm,
+          },
+        ]}
+      >
+        <File size={18} color={theme.colors.mutedForeground} />
+      </View>
+
+      <View style={styles.fileInfo}>
+        <Text style={nameStyle} numberOfLines={1}>
+          {attachment.name}
+        </Text>
+        {(attachment.size != null || attachment.mimeType) && (
+          <Text style={metaStyle} numberOfLines={1}>
+            {[
+              attachment.mimeType,
+              attachment.size != null ? formatFileSize(attachment.size) : null,
+            ]
+              .filter(Boolean)
+              .join(' - ')}
+          </Text>
+        )}
+      </View>
+    </Pressable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Grid layout
+// ---------------------------------------------------------------------------
+
+function GridLayout({
+  attachments,
+  style,
+}: {
+  attachments: Attachment[];
+  style?: StyleProp<ViewStyle>;
+}) {
+  const theme = useAIElementsTheme();
+  const images = attachments.filter((a) => a.type === 'image');
+  const files = attachments.filter((a) => a.type === 'file');
+
+  return (
+    <View style={style}>
+      {images.length > 0 && (
+        <View style={[styles.grid, { gap: theme.spacing.sm }]}>
+          {images.map((attachment, index) => (
+            <ImageThumbnail
+              key={`img-${index}`}
+              attachment={attachment}
+              size={140}
+              style={styles.gridItem as StyleProp<ImageStyle>}
+            />
+          ))}
+        </View>
+      )}
+
+      {files.length > 0 && (
+        <View style={[styles.fileList, { gap: theme.spacing.sm, marginTop: images.length > 0 ? theme.spacing.sm : 0 }]}>
+          {files.map((attachment, index) => (
+            <FileRow key={`file-${index}`} attachment={attachment} />
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline layout (horizontal scroll for images)
+// ---------------------------------------------------------------------------
+
+function InlineLayout({
+  attachments,
+  style,
+}: {
+  attachments: Attachment[];
+  style?: StyleProp<ViewStyle>;
+}) {
+  const theme = useAIElementsTheme();
+  const images = attachments.filter((a) => a.type === 'image');
+  const files = attachments.filter((a) => a.type === 'file');
+
+  return (
+    <View style={style}>
+      {images.length > 0 && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={[
+            styles.inlineContainer,
+            { gap: theme.spacing.sm },
+          ]}
+        >
+          {images.map((attachment, index) => (
+            <ImageThumbnail
+              key={`img-${index}`}
+              attachment={attachment}
+              size={100}
+            />
+          ))}
+        </ScrollView>
+      )}
+
+      {files.length > 0 && (
+        <View style={[styles.fileList, { gap: theme.spacing.sm, marginTop: images.length > 0 ? theme.spacing.sm : 0 }]}>
+          {files.map((attachment, index) => (
+            <FileRow key={`file-${index}`} attachment={attachment} />
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// List layout
+// ---------------------------------------------------------------------------
+
+function ListLayout({
+  attachments,
+  style,
+}: {
+  attachments: Attachment[];
+  style?: StyleProp<ViewStyle>;
+}) {
+  const theme = useAIElementsTheme();
+
+  return (
+    <View style={[styles.fileList, { gap: theme.spacing.sm }, style]}>
+      {attachments.map((attachment, index) => {
+        if (attachment.type === 'image') {
+          return (
+            <View
+              key={`img-${index}`}
+              style={[
+                styles.fileRow,
+                {
+                  backgroundColor: theme.colors.card,
+                  borderColor: theme.colors.border,
+                  borderRadius: theme.radius.md,
+                  padding: theme.spacing.sm,
+                  gap: theme.spacing.md,
+                },
+              ]}
+            >
+              <ImageThumbnail attachment={attachment} size={48} />
+              <View style={styles.fileInfo}>
+                <Text
+                  numberOfLines={1}
+                  style={{
+                    color: theme.colors.foreground,
+                    fontSize: theme.typography.fontSize.sm,
+                    fontWeight: theme.typography.fontWeight
+                      .medium as TextStyle['fontWeight'],
+                    fontFamily: theme.typography.fontFamily,
+                  }}
+                >
+                  {attachment.name}
+                </Text>
+              </View>
+            </View>
+          );
+        }
+        return <FileRow key={`file-${index}`} attachment={attachment} />;
+      })}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function AttachmentsComponent({
+  attachments,
+  variant = 'inline',
+  style,
+}: AttachmentsProps) {
+  if (attachments.length === 0) {
+    return null;
+  }
+
+  switch (variant) {
+    case 'grid':
+      return <GridLayout attachments={attachments} style={style} />;
+    case 'inline':
+      return <InlineLayout attachments={attachments} style={style} />;
+    case 'list':
+      return <ListLayout attachments={attachments} style={style} />;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  gridItem: {
+    flexBasis: '48%',
+    flexGrow: 1,
+  },
+  inlineContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  fileList: {
+    flexDirection: 'column',
+  },
+  fileRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+  fileIcon: {
+    width: 36,
+    height: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fileInfo: {
+    flex: 1,
+    gap: 2,
+  },
+  imagePlaceholder: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Export
+// ---------------------------------------------------------------------------
+
+export const Attachments = memo(AttachmentsComponent);