@admin-layout/gluestack-ui-mobile 12.2.4-alpha.3 → 12.2.4-alpha.31

package/src/components/InputToolBar/InputToolBar.tsx

@@ -0,0 +1,666 @@
+import React, { useMemo, useState } from 'react';
+import { TextInput, Modal, ScrollView, Pressable, Text as RNText, Dimensions } from 'react-native';
+import { Box, HStack, VStack, Text, Pressable as GluestackPressable } from '@gluestack-ui/themed';
+import { Ionicons, Feather } from '@expo/vector-icons';
+import type {
+    InputToolBarClassNames,
+    InputToolBarProps,
+    RightToolbarItemId,
+    LeftToolbarItemId,
+    MicSendButtonConfig,
+    TemplateButtonConfig,
+    TemplateModalConfig,
+    TemplateModalItem,
+    ToolbarItemConfig,
+} from './types';
+
+const iconSize = 14;
+const iconSizeRight = 16;
+
+const defaultLeftIconMap: Record<LeftToolbarItemId, React.ReactNode> = {
+    search: <Ionicons name="search" size={iconSize} color="currentColor" />,
+    zap: <Ionicons name="flash" size={iconSize} color="currentColor" />,
+    lightbulb: <Ionicons name="bulb-outline" size={iconSize} color="currentColor" />,
+    template: null,
+};
+
+const defaultRightIconMap: Record<RightToolbarItemId, React.ReactNode> = {
+    projectSettings: <Ionicons name="settings-outline" size={iconSizeRight} color="currentColor" />,
+    tag: <Ionicons name="sparkles-outline" size={iconSizeRight} color="currentColor" />,
+    chip: <Ionicons name="grid-outline" size={iconSizeRight} color="currentColor" />,
+    camera: <Ionicons name="camera-outline" size={iconSizeRight} color="currentColor" />,
+    image: <Ionicons name="image-outline" size={iconSizeRight} color="currentColor" />,
+    attach: <Ionicons name="attach-outline" size={iconSizeRight} color="currentColor" />,
+    mic: <Ionicons name="mic-outline" size={iconSizeRight} color="currentColor" />,
+};
+
+function MicSendButton({
+    hasContent,
+    onSend,
+    onMic,
+    disabled,
+    isLoading,
+    onStop,
+    classNames,
+}: MicSendButtonConfig & { classNames?: InputToolBarClassNames }) {
+    const isStop = isLoading === true;
+    const isSend = !isStop && hasContent;
+    const handlePress = isStop ? onStop : isSend ? onSend : onMic;
+    const label = isStop ? 'Stop' : isSend ? 'Send' : 'Start voice input';
+
+    return (
+        <GluestackPressable
+            onPress={handlePress}
+            disabled={disabled && !isStop}
+            accessibilityLabel={label}
+            accessibilityRole="button"
+            h={28}
+            w={28}
+            alignItems="center"
+            justifyContent="center"
+            rounded="$2xl"
+            bg="$black"
+            borderWidth={1}
+            borderColor="$black"
+        >
+            {isStop ? (
+                <Ionicons name="stop-circle" size={iconSizeRight} color="white" />
+            ) : isSend ? (
+                <Feather name="arrow-up-right" size={iconSizeRight} color="white" />
+            ) : (
+                <Ionicons name="mic" size={iconSizeRight} color="white" />
+            )}
+        </GluestackPressable>
+    );
+}
+
+function ToolbarIconButton({
+    item,
+    getDefaultIcon,
+    isLeftGroup,
+    classNames,
+}: {
+    item: ToolbarItemConfig<LeftToolbarItemId | RightToolbarItemId>;
+    getDefaultIcon: (id: string) => React.ReactNode;
+    isLeftGroup?: boolean;
+    classNames?: InputToolBarClassNames;
+}) {
+    if (item.enabled === false) return null;
+
+    const icon = item.customButton ?? item.icon ?? getDefaultIcon(item.id);
+    if (item.customButton) {
+        return <>{item.customButton}</>;
+    }
+
+    const isDisabled = item.disabled === true || item.loading === true;
+    const isActive = item.active === true;
+
+    return (
+        <GluestackPressable
+            onPress={item.onClick}
+            disabled={isDisabled}
+            accessibilityLabel={item.label}
+            accessibilityRole="button"
+            h={28}
+            w={28}
+            alignItems="center"
+            justifyContent="center"
+            rounded={isLeftGroup ? '$full' : '$2xl'}
+            borderWidth={1}
+            bg={isLeftGroup ? (isActive ? '$black' : '$background100') : 'transparent'}
+            borderColor={isLeftGroup ? (isActive ? '$black' : '$outline200') : 'transparent'}
+        >
+            {item.loading ? (
+                <Box
+                    h={16}
+                    w={16}
+                    rounded="$full"
+                    borderWidth={2}
+                    borderColor="$primary500"
+                    borderTopColor="transparent"
+                    style={{ transform: [{ rotate: '0deg' }] }}
+                />
+            ) : isActive && isLeftGroup && React.isValidElement(icon) ? (
+                React.cloneElement(icon as React.ReactElement<{ color?: string }>, { color: 'white' })
+            ) : (
+                icon
+            )}
+        </GluestackPressable>
+    );
+}
+
+function LeftSection({
+    leftItems,
+    leftCustomRender,
+    classNames,
+}: Pick<InputToolBarProps, 'leftItems' | 'leftCustomRender' | 'classNames'>) {
+    if (leftCustomRender != null) {
+        return (
+            <HStack alignItems="center" gap="$2" flexWrap="wrap">
+                {leftCustomRender}
+            </HStack>
+        );
+    }
+
+    const left = leftItems ?? [];
+    const leftEnabled = left.filter((item) => item.enabled !== false);
+    if (leftEnabled.length === 0) return null;
+
+    return (
+        <HStack alignItems="center" gap="$1" rounded="$full" bg="$background200" px="$2" py="$1">
+            {leftEnabled.map((item, index) => (
+                <React.Fragment key={item.id}>
+                    <ToolbarIconButton
+                        item={item}
+                        getDefaultIcon={(id) => defaultLeftIconMap[id as LeftToolbarItemId] ?? null}
+                        isLeftGroup
+                        classNames={classNames}
+                    />
+                    {index < leftEnabled.length - 1 && <Box w="$px" h={20} bg="$outline200" mx="$1" />}
+                </React.Fragment>
+            ))}
+        </HStack>
+    );
+}
+
+function TemplatePill({
+    label,
+    count,
+    selectedLabel,
+    onClick,
+    onClearTemplate,
+    disabled,
+    classNames,
+}: {
+    label: string;
+    count?: number;
+    selectedLabel?: string | null;
+    onClick?: () => void;
+    onClearTemplate?: () => void;
+    disabled?: boolean;
+    classNames?: InputToolBarClassNames;
+}) {
+    if (selectedLabel) {
+        return (
+            <HStack
+                alignItems="center"
+                gap="$1"
+                px="$2"
+                py="$1"
+                rounded="$full"
+                bg="$primary50"
+                borderWidth={1}
+                borderColor="$primary200"
+            >
+                <RNText className="text-xs font-medium text-primary-600 truncate max-w-[120px]" numberOfLines={1}>
+                    {selectedLabel}
+                </RNText>
+                <GluestackPressable
+                    onPress={onClearTemplate}
+                    p="$0.5"
+                    rounded="$full"
+                    disabled={disabled}
+                    accessibilityLabel="Remove template"
+                >
+                    <Ionicons name="close" size={12} color="currentColor" />
+                </GluestackPressable>
+                <GluestackPressable
+                    onPress={onClick}
+                    p="$0.5"
+                    rounded="$full"
+                    disabled={disabled}
+                    accessibilityLabel="Change template"
+                >
+                    <Text fontSize={10}>▼</Text>
+                </GluestackPressable>
+            </HStack>
+        );
+    }
+    const text = count != null && count > 0 ? `${label} (${count})` : label;
+    return (
+        <GluestackPressable
+            onPress={onClick}
+            disabled={disabled}
+            accessibilityLabel="Select template"
+            opacity={disabled ? 0.5 : 1}
+        >
+            <HStack
+                alignItems="center"
+                gap="$1"
+                rounded="$full"
+                borderWidth={1}
+                borderColor="$outline200"
+                bg="$background100"
+                px="$2"
+                py="$1"
+            >
+                <Text fontSize="$xs" fontWeight="$medium" color="$textLight900">
+                    {text}
+                </Text>
+            </HStack>
+        </GluestackPressable>
+    );
+}
+
+function RightSection({
+    rightItems,
+    rightCustomRender,
+    micSendButton,
+    classNames,
+}: Pick<InputToolBarProps, 'rightItems' | 'rightCustomRender' | 'micSendButton' | 'classNames'>) {
+    if (rightCustomRender != null) {
+        return (
+            <HStack alignItems="center" gap="$1">
+                {rightCustomRender}
+            </HStack>
+        );
+    }
+
+    const right = rightItems ?? [];
+    const rightEnabled = right.filter((item) => item.enabled !== false);
+    const filteredRight = micSendButton != null ? rightEnabled.filter((item) => item.id !== 'mic') : rightEnabled;
+
+    return (
+        <HStack alignItems="center" gap="$2" flexWrap="nowrap">
+            {filteredRight.map((item) => (
+                <ToolbarIconButton
+                    key={item.id}
+                    item={item}
+                    getDefaultIcon={(id) => defaultRightIconMap[id as RightToolbarItemId] ?? null}
+                    classNames={classNames}
+                />
+            ))}
+        </HStack>
+    );
+}
+
+function DefaultTemplateModal({
+    isOpen,
+    onClose,
+    templates,
+    selectedId,
+    onSelect,
+    suggestedId,
+    title = 'Choose Template',
+}: TemplateModalConfig) {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [categoryFilter, setCategoryFilter] = useState<string>('All');
+
+    const categories = useMemo(() => {
+        const cats = new Set(templates.map((t) => t.category || 'Other'));
+        return ['All', ...Array.from(cats).sort()];
+    }, [templates]);
+
+    const filteredTemplates = useMemo(() => {
+        return templates.filter((template) => {
+            const searchLower = searchQuery.toLowerCase();
+            const matchesSearch =
+                !searchQuery ||
+                template.label.toLowerCase().includes(searchLower) ||
+                (template.description || '').toLowerCase().includes(searchLower);
+            const matchesCategory = categoryFilter === 'All' || template.category === categoryFilter;
+            return matchesSearch && matchesCategory;
+        });
+    }, [templates, searchQuery, categoryFilter]);
+
+    if (!isOpen) return null;
+
+    const modalMinHeight = Dimensions.get('window').height * 0.5;
+
+    return (
+        <Modal visible={isOpen} transparent animationType="fade">
+            <Pressable
+                style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}
+                onPress={onClose}
+            >
+                <Pressable
+                    style={{
+                        width: '90%',
+                        maxWidth: 720,
+                        minHeight: modalMinHeight,
+                        maxHeight: '80%',
+                        backgroundColor: 'white',
+                        borderRadius: 12,
+                        overflow: 'hidden',
+                        borderWidth: 1,
+                        borderColor: '#e4e4e7',
+                        shadowColor: '#000',
+                        shadowOffset: { width: 0, height: 4 },
+                        shadowOpacity: 0.15,
+                        shadowRadius: 12,
+                        elevation: 8,
+                    }}
+                    onPress={() => {}}
+                >
+                    <VStack flex={1} style={{ minHeight: modalMinHeight }}>
+                        <HStack
+                            h={48}
+                            px="$4"
+                            borderBottomWidth={1}
+                            borderBottomColor="#e4e4e7"
+                            alignItems="center"
+                            justifyContent="space-between"
+                        >
+                            <Text fontSize="$sm" fontWeight="$semibold" color="$textLight900">
+                                {title}
+                            </Text>
+                            <GluestackPressable onPress={onClose} p="$1.5" rounded="$lg" accessibilityLabel="Close">
+                                <Ionicons name="close" size={16} color="#71717a" />
+                            </GluestackPressable>
+                        </HStack>
+                        <VStack p="$4" borderBottomWidth={1} borderBottomColor="#e4e4e7" gap="$3">
+                            <Box position="relative">
+                                <Box
+                                    position="absolute"
+                                    left={12}
+                                    top="50%"
+                                    style={{ transform: [{ translateY: -8 }] }}
+                                >
+                                    <Ionicons name="search" size={16} color="#71717a" />
+                                </Box>
+                                <TextInput
+                                    style={{
+                                        width: '100%',
+                                        paddingLeft: 36,
+                                        paddingRight: 12,
+                                        paddingVertical: 8,
+                                        borderWidth: 1,
+                                        borderColor: '#e4e4e7',
+                                        borderRadius: 8,
+                                        backgroundColor: '#f4f4f5',
+                                        fontSize: 14,
+                                    }}
+                                    placeholder="Search templates..."
+                                    placeholderTextColor="#71717a"
+                                    value={searchQuery}
+                                    onChangeText={setSearchQuery}
+                                />
+                            </Box>
+                            <HStack gap="$1.5" flexWrap="wrap">
+                                {categories.map((category) => (
+                                    <GluestackPressable
+                                        key={category}
+                                        onPress={() => setCategoryFilter(category)}
+                                        px="$2.5"
+                                        py="$1"
+                                        rounded="$md"
+                                        borderWidth={1}
+                                        bg={categoryFilter === category ? '$primary50' : '$white'}
+                                        borderColor={categoryFilter === category ? '$primary200' : '#e4e4e7'}
+                                    >
+                                        <Text
+                                            fontSize="$xs"
+                                            fontWeight="$medium"
+                                            color={categoryFilter === category ? '$primary600' : '#71717a'}
+                                        >
+                                            {category}
+                                        </Text>
+                                    </GluestackPressable>
+                                ))}
+                            </HStack>
+                        </VStack>
+                        <Box flex={1} p="$4" style={{ minHeight: 200 }}>
+                            {filteredTemplates.length > 0 ? (
+                                <ScrollView
+                                    style={{ flex: 1 }}
+                                    contentContainerStyle={{ paddingBottom: 16 }}
+                                    showsVerticalScrollIndicator={false}
+                                >
+                                    <HStack flexWrap="wrap" gap="$3">
+                                        {filteredTemplates.map((template) => {
+                                            const isSelected = selectedId === template.id;
+                                            const isSuggested = suggestedId === template.id;
+                                            return (
+                                                <GluestackPressable
+                                                    key={template.id}
+                                                    onPress={() => {
+                                                        onSelect(template.id);
+                                                        onClose();
+                                                    }}
+                                                    p="$3"
+                                                    rounded="$lg"
+                                                    borderWidth={2}
+                                                    borderColor={
+                                                        isSelected
+                                                            ? '$primary500'
+                                                            : isSuggested
+                                                              ? 'rgba(59, 130, 246, 0.3)'
+                                                              : '#e4e4e7'
+                                                    }
+                                                    bg={
+                                                        isSelected
+                                                            ? '$primary50'
+                                                            : isSuggested
+                                                              ? 'rgba(59, 130, 246, 0.05)'
+                                                              : 'transparent'
+                                                    }
+                                                    style={{ width: '48%' }}
+                                                >
+                                                    <HStack alignItems="flex-start" gap="$2">
+                                                        <Box
+                                                            p="$1.5"
+                                                            rounded="$md"
+                                                            bg={
+                                                                isSelected
+                                                                    ? '$primary500'
+                                                                    : isSuggested
+                                                                      ? '$primary200'
+                                                                      : '$background200'
+                                                            }
+                                                        >
+                                                            <Ionicons
+                                                                name="grid-outline"
+                                                                size={14}
+                                                                color={
+                                                                    isSelected
+                                                                        ? 'white'
+                                                                        : isSuggested
+                                                                          ? '#3b82f6'
+                                                                          : '#18181b'
+                                                                }
+                                                            />
+                                                        </Box>
+                                                        <VStack flex={1} style={{ minWidth: 0 }}>
+                                                            <HStack alignItems="center" gap="$1.5">
+                                                                <Text
+                                                                    fontSize="$sm"
+                                                                    fontWeight="$medium"
+                                                                    color="$textLight900"
+                                                                    numberOfLines={1}
+                                                                >
+                                                                    {template.label}
+                                                                </Text>
+                                                                {isSelected && (
+                                                                    <Ionicons
+                                                                        name="checkmark"
+                                                                        size={14}
+                                                                        color="#3b82f6"
+                                                                    />
+                                                                )}
+                                                            </HStack>
+                                                            {template.description && (
+                                                                <Text
+                                                                    fontSize="$xs"
+                                                                    color="$textLight500"
+                                                                    mt="$0.5"
+                                                                    numberOfLines={2}
+                                                                >
+                                                                    {template.description}
+                                                                </Text>
+                                                            )}
+                                                        </VStack>
+                                                    </HStack>
+                                                </GluestackPressable>
+                                            );
+                                        })}
+                                    </HStack>
+                                </ScrollView>
+                            ) : (
+                                <VStack flex={1} alignItems="center" justifyContent="center" py="$12">
+                                    <Ionicons name="search" size={40} color="#71717a" style={{ marginBottom: 12 }} />
+                                    <Text fontSize="$sm" fontWeight="$medium" color="$textLight900">
+                                        No templates found
+                                    </Text>
+                                    <Text fontSize="$xs" color="$textLight500" mt="$1">
+                                        Try adjusting search or filters
+                                    </Text>
+                                </VStack>
+                            )}
+                        </Box>
+                    </VStack>
+                </Pressable>
+            </Pressable>
+        </Modal>
+    );
+}
+
+/**
+ * InputToolBar – UI only. Renders toolbar and optional built-in textarea from props.
+ * All data (leftItems, rightItems, templateButton, inputConfig, micSendButton) and behavior (onClick, onChange, etc.) come from props.
+ */
+export function InputToolBar({
+    className,
+    classNames,
+    inputConfig,
+    topContent,
+    leftItems: leftItemsProp,
+    rightItems: rightItemsProp,
+    templateButton,
+    templateModalConfig,
+    templateModalRender,
+    projectSettingsModalOpen,
+    onProjectSettingsModalClose,
+    projectSettingsModalRender,
+    leftCustomRender,
+    rightCustomRender,
+    micSendButton,
+    children,
+    onContainerClick,
+}: InputToolBarProps) {
+    const leftItems = leftItemsProp ?? [];
+    const rightItems = rightItemsProp ?? [];
+    const hasInputContent = inputConfig != null || children != null;
+    const effectiveTopContent = inputConfig != null ? topContent : null;
+
+    const templateModal =
+        templateModalConfig != null && templateModalConfig.isOpen
+            ? templateModalRender != null
+                ? templateModalRender(templateModalConfig)
+                : React.createElement(DefaultTemplateModal, templateModalConfig)
+            : null;
+
+    const projectSettingsModal =
+        projectSettingsModalOpen === true && onProjectSettingsModalClose != null && projectSettingsModalRender != null
+            ? projectSettingsModalRender({ onClose: onProjectSettingsModalClose })
+            : null;
+
+    const containerContent = (
+        <Box
+            w="100%"
+            overflow="visible"
+            rounded="$3xl"
+            bg="$white"
+            shadowColor="$black"
+            shadowOffset={{ width: 0, height: 4 }}
+            shadowOpacity={0.08}
+            shadowRadius={12}
+            elevation={4}
+        >
+            <VStack
+                px="$3"
+                py="$2"
+                gap={hasInputContent ? '$2' : '$3'}
+                flexDirection={hasInputContent ? 'column' : undefined}
+            >
+                {hasInputContent && (
+                    <VStack style={{ minWidth: 0 }} gap="$2">
+                        {effectiveTopContent}
+                        {inputConfig != null ? (
+                            <TextInput
+                                ref={inputConfig.inputRef}
+                                value={inputConfig.value}
+                                onChange={inputConfig.onChange}
+                                placeholder={inputConfig.placeholder ?? 'Ask anything...'}
+                                placeholderTextColor="#71717a"
+                                editable={!inputConfig.disabled}
+                                multiline
+                                numberOfLines={1}
+                                style={{
+                                    width: '100%',
+                                    minHeight: 44,
+                                    fontSize: 16,
+                                    color: '#18181b',
+                                    paddingVertical: 8,
+                                    paddingHorizontal: 0,
+                                    margin: 0,
+                                    maxHeight: 120,
+                                    textAlignVertical: 'top',
+                                }}
+                            />
+                        ) : (
+                            children
+                        )}
+                    </VStack>
+                )}
+                <VStack gap="$2" pt={hasInputContent ? '$2' : 0}>
+                    <HStack flexWrap="nowrap" alignItems="center" gap="$3" w="100%">
+                        <LeftSection
+                            leftItems={leftItems}
+                            leftCustomRender={leftCustomRender}
+                            classNames={classNames}
+                        />
+                        <Box flex={1} style={{ minWidth: 8 }} />
+                        <RightSection
+                            rightItems={rightItems}
+                            rightCustomRender={rightCustomRender}
+                            micSendButton={micSendButton}
+                            classNames={classNames}
+                        />
+                        {micSendButton != null && rightCustomRender == null && (
+                            <Box style={{ flexShrink: 0 }} ml="$2">
+                                <MicSendButton
+                                    hasContent={micSendButton.hasContent}
+                                    onSend={micSendButton.onSend}
+                                    onMic={micSendButton.onMic}
+                                    disabled={micSendButton.disabled}
+                                    isLoading={micSendButton.isLoading}
+                                    onStop={micSendButton.onStop}
+                                    classNames={classNames}
+                                />
+                            </Box>
+                        )}
+                    </HStack>
+                    {templateButton != null && (
+                        <HStack alignItems="center" w="100%">
+                            <TemplatePill
+                                label={templateButton.label}
+                                count={templateButton.count}
+                                selectedLabel={templateButton.selectedLabel}
+                                onClick={templateButton.onClick}
+                                onClearTemplate={templateButton.onClearTemplate}
+                                disabled={templateButton.disabled}
+                                classNames={classNames}
+                            />
+                        </HStack>
+                    )}
+                </VStack>
+            </VStack>
+        </Box>
+    );
+
+    return (
+        <>
+            {templateModal}
+            {projectSettingsModal}
+            {hasInputContent && onContainerClick ? (
+                <Pressable onPress={onContainerClick} style={{ width: '100%' }}>
+                    {containerContent}
+                </Pressable>
+            ) : (
+                containerContent
+            )}
+        </>
+    );
+}
+
+export default InputToolBar;