nastech-app 1.0.0

package/sources/components/AgentInputAttachmentStrip.tsx

@@ -0,0 +1,122 @@
+/**
+ * Horizontal scrollable strip showing selected image attachment thumbnails.
+ * Each thumbnail shows the image with a remove button.
+ * Uses thumbhash as a blurry placeholder while the full image loads.
+ */
+import * as React from 'react';
+import { ScrollView, View, Pressable } from 'react-native';
+import { Image } from 'expo-image';
+import { Ionicons } from '@expo/vector-icons';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import type { AttachmentPreview } from '@/sync/attachmentTypes';
+import { thumbhashToDataUri } from '@/utils/thumbhash';
+
+const THUMB_SIZE = 64;
+const BORDER_RADIUS = 8;
+
+interface AgentInputAttachmentStripProps {
+    images: AttachmentPreview[];
+    onRemove: (id: string) => void;
+}
+
+export function AgentInputAttachmentStrip({ images, onRemove }: AgentInputAttachmentStripProps) {
+    const { theme } = useUnistyles();
+
+    if (images.length === 0) return null;
+
+    return (
+        <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            style={styles.strip}
+            contentContainerStyle={styles.stripContent}
+            keyboardShouldPersistTaps="always"
+        >
+            {images.map((img) => (
+                <AttachmentThumbnail
+                    key={img.id}
+                    image={img}
+                    onRemove={onRemove}
+                    theme={theme}
+                />
+            ))}
+        </ScrollView>
+    );
+}
+
+function AttachmentThumbnail({
+    image,
+    onRemove,
+    theme,
+}: {
+    image: AttachmentPreview;
+    onRemove: (id: string) => void;
+    theme: any;
+}) {
+    // Build placeholder from thumbhash if available
+    const placeholder = React.useMemo(() => {
+        if (!image.thumbhash) return undefined;
+        const uri = thumbhashToDataUri(image.thumbhash);
+        return uri ? { uri } : undefined;
+    }, [image.thumbhash]);
+
+    return (
+        <View style={[
+            styles.thumbContainer,
+            { borderColor: theme.colors.divider }
+        ]}>
+            <Image
+                source={{ uri: image.uri }}
+                placeholder={placeholder}
+                style={[{ width: THUMB_SIZE, height: THUMB_SIZE }, styles.thumb]}
+                contentFit="cover"
+                transition={150}
+            />
+            {/* Remove button */}
+            <Pressable
+                onPress={() => onRemove(image.id)}
+                hitSlop={4}
+                style={(p) => [
+                    styles.removeButton,
+                    { backgroundColor: theme.colors.surfaceHigh, opacity: p.pressed ? 0.7 : 1 }
+                ]}
+            >
+                <Ionicons name="close" size={10} color={theme.colors.text} />
+            </Pressable>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create(() => ({
+    strip: {
+        marginBottom: 8,
+        marginHorizontal: 8,
+    },
+    stripContent: {
+        flexDirection: 'row',
+        gap: 8,
+        paddingHorizontal: 4,
+    },
+    thumbContainer: {
+        width: THUMB_SIZE,
+        height: THUMB_SIZE,
+        borderRadius: BORDER_RADIUS,
+        overflow: 'visible',
+        borderWidth: 1,
+        position: 'relative',
+    },
+    thumb: {
+        borderRadius: BORDER_RADIUS,
+    },
+    removeButton: {
+        position: 'absolute',
+        top: -6,
+        right: -6,
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10,
+    },
+}));

package/sources/components/AgentInputAutocomplete.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { Platform, Pressable, ScrollView, View } from 'react-native';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+
+const MAX_HEIGHT = 320;
+
+interface AgentInputAutocompleteProps {
+    suggestions: React.ReactElement[];
+    selectedIndex?: number;
+    onSelect: (index: number) => void;
+    itemHeight: number;
+}
+
+// We don't reuse FloatingOverlay here because the dropdown needs a ref on
+// its ScrollView so arrow-key navigation can scroll the selected item into
+// view when the list exceeds the visible window.
+export const AgentInputAutocomplete = React.memo((props: AgentInputAutocompleteProps) => {
+    const { suggestions, selectedIndex = -1, onSelect, itemHeight } = props;
+    const { theme } = useUnistyles();
+    const scrollRef = React.useRef<ScrollView>(null);
+
+    // Keep the selected item within the visible window when the user
+    // arrow-keys through suggestions. itemHeight is enough to compute the
+    // target since every row has identical height (the dropdown is fixed
+    // pitch).
+    React.useEffect(() => {
+        if (selectedIndex < 0 || !scrollRef.current) return;
+        const itemTop = selectedIndex * itemHeight;
+        const itemBottom = itemTop + itemHeight;
+        const view = scrollRef.current as unknown as {
+            scrollTo?: (opts: { y: number; animated?: boolean }) => void;
+            getScrollableNode?: () => HTMLDivElement | null;
+        };
+        // Web RN exposes the underlying div; we can read scrollTop directly
+        // for tighter control. Native falls back to scrollTo with a guess.
+        const node = view.getScrollableNode?.();
+        if (node) {
+            const visibleTop = node.scrollTop;
+            const visibleBottom = visibleTop + node.clientHeight;
+            if (itemTop < visibleTop) {
+                node.scrollTop = itemTop;
+            } else if (itemBottom > visibleBottom) {
+                node.scrollTop = itemBottom - node.clientHeight;
+            }
+            return;
+        }
+        view.scrollTo?.({ y: itemTop, animated: false });
+    }, [selectedIndex, itemHeight]);
+
+    if (suggestions.length === 0) {
+        return null;
+    }
+
+    return (
+        <View style={[styles.container, { maxHeight: MAX_HEIGHT }]}>
+            <ScrollView
+                ref={scrollRef}
+                style={{ maxHeight: MAX_HEIGHT }}
+                keyboardShouldPersistTaps="handled"
+                showsVerticalScrollIndicator={true}
+            >
+                {suggestions.map((suggestion, index) => (
+                    <Pressable
+                        key={index}
+                        onPress={() => onSelect(index)}
+                        style={({ pressed }) => ({
+                            height: itemHeight,
+                            backgroundColor: pressed
+                                ? theme.colors.surfacePressed
+                                : selectedIndex === index
+                                    ? theme.colors.surfaceSelected
+                                    : 'transparent',
+                        })}
+                    >
+                        {suggestion}
+                    </Pressable>
+                ))}
+            </ScrollView>
+        </View>
+    );
+});
+
+const styles = StyleSheet.create((theme) => ({
+    container: {
+        borderRadius: 12,
+        overflow: 'hidden',
+        backgroundColor: theme.colors.surface,
+        borderWidth: Platform.OS === 'web' ? 0 : 0.5,
+        borderColor: theme.colors.modal.border,
+        shadowColor: theme.colors.shadow.color,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 3.84,
+        shadowOpacity: theme.colors.shadow.opacity,
+        elevation: 5,
+    },
+}));

package/sources/components/AgentInputSuggestionView.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Ionicons } from '@expo/vector-icons';
+import { Typography } from '@/constants/Typography';
+import { t } from '@/text';
+
+interface CommandSuggestionProps {
+    command: string;
+    description?: string;
+}
+
+export const CommandSuggestion = React.memo(({ command, description }: CommandSuggestionProps) => {
+    return (
+        <View style={styles.suggestionContainer}>
+            <Text 
+                style={[styles.commandText, { marginRight: description ? 12 : 0 }]}
+            >
+                /{command}
+            </Text>
+            {description && (
+                <Text
+                    style={styles.descriptionText}
+                    numberOfLines={1}
+                >
+                    {description}
+                </Text>
+            )}
+        </View>
+    );
+});
+
+interface FileMentionProps {
+    fileName: string;
+    filePath: string;
+    fileType?: 'file' | 'folder';
+}
+
+export const FileMentionSuggestion = React.memo(({ fileName, filePath, fileType = 'file' }: FileMentionProps) => {
+    return (
+        <View style={styles.suggestionContainer}>
+            <View style={styles.iconContainer}>
+                <Ionicons
+                    name={fileType === 'folder' ? 'folder' : 'document-text'}
+                    size={18}
+                    color={styles.iconColor.color}
+                />
+            </View>
+            <Text 
+                style={styles.fileNameText}
+                numberOfLines={1}
+            >
+                {filePath}{fileName}
+            </Text>
+            <Text style={styles.labelText}>
+                {fileType === 'folder' ? t('agentInput.suggestion.folderLabel') : t('agentInput.suggestion.fileLabel')}
+            </Text>
+        </View>
+    );
+});
+
+const styles = StyleSheet.create((theme) => ({
+    suggestionContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        height: 48,
+    },
+    commandText: {
+        fontSize: 14,
+        color: theme.colors.text,
+        fontWeight: '600',
+        ...Typography.default('semiBold'),
+    },
+    descriptionText: {
+        flex: 1,
+        fontSize: 13,
+        color: theme.colors.textSecondary,
+        ...Typography.default(),
+    },
+    iconContainer: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: theme.colors.surfaceHigh,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    iconColor: {
+        color: theme.colors.textSecondary,
+    },
+    fileNameText: {
+        flex: 1,
+        fontSize: 14,
+        color: theme.colors.textSecondary,
+        ...Typography.default(),
+    },
+    labelText: {
+        fontSize: 12,
+        color: theme.colors.textSecondary,
+        marginLeft: 8,
+        ...Typography.default(),
+    },
+}));