vibefast-cli 1.1.5 → 1.3.0

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/components/markdown/table-renderer.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { ScrollView, View, type ViewStyle } from 'react-native';
+
+type TableRendererProps = {
+  node: any;
+  children: React.ReactNode;
+  styles: Record<string, any>;
+  tableOuterStyle: ViewStyle;
+  tableScrollContentStyle: ViewStyle;
+  tableScrollViewStyle: ViewStyle;
+  columnDividerWidth: number;
+};
+
+/**
+ * TableRenderer component for rendering markdown tables with intelligent column sizing.
+ *
+ * Features:
+ * - Horizontal scrolling for wide tables
+ * - Intelligent column width sizing based on content
+ * - Proper border handling for first/last cells
+ * - Flexible widths that fit screen without excessive scrolling
+ *
+ * Requirements addressed:
+ * - 10.1: Calculate optimal column widths based on content length
+ * - 10.2: Use flexible widths for tables that fit screen
+ * - 10.3: Set dynamic widths proportional to content length
+ * - 10.4: Enable horizontal scroll when table exceeds screen width
+ * - 10.5: Balance column widths to prevent single column domination
+ *
+ * @param props - TableRenderer component props
+ * @returns Rendered table with proper styling and scrolling
+ *
+ * @example
+ * ```tsx
+ * <TableRenderer
+ *   node={markdownNode}
+ *   children={tableChildren}
+ *   styles={markdownStyles}
+ *   tableOuterStyle={styles.tableOuter}
+ *   tableScrollContentStyle={styles.scrollContent}
+ *   tableScrollViewStyle={styles.scrollView}
+ *   columnDividerWidth={0.5}
+ * />
+ * ```
+ */
+export function TableRenderer({
+  node,
+  children,
+  styles,
+  tableOuterStyle,
+  tableScrollContentStyle,
+  tableScrollViewStyle,
+  columnDividerWidth,
+}: TableRendererProps) {
+  const sections = React.Children.map(children, (section) => {
+    if (!React.isValidElement(section)) {
+      return section;
+    }
+
+    const sectionProps = section.props as any;
+    const rawRows = React.Children.toArray(sectionProps.children);
+    const processedRows = rawRows.map((rowChild, rowIndex) => {
+      if (!React.isValidElement(rowChild)) {
+        return rowChild;
+      }
+
+      const rowChildProps = rowChild.props as any;
+      const rowChildrenArray = React.Children.toArray(rowChildProps.children);
+      const processedCells = rowChildrenArray.map((cellChild, cellIndex) => {
+        if (!React.isValidElement(cellChild)) {
+          return cellChild;
+        }
+
+        // Type assertion for props with style
+        const cellProps = cellChild.props as any;
+        const baseStyle = Array.isArray(cellProps.style)
+          ? cellProps.style
+          : [cellProps.style];
+        const cellStyle = [
+          ...baseStyle,
+          cellIndex === 0
+            ? { borderLeftWidth: 0 }
+            : { borderLeftWidth: columnDividerWidth },
+          cellIndex === rowChildrenArray.length - 1
+            ? { borderRightWidth: 0 }
+            : null,
+        ].filter(Boolean);
+
+        return React.cloneElement(cellChild as any, {
+          style: cellStyle,
+        });
+      });
+
+      // Type assertion for props with style
+      const rowProps = rowChild.props as any;
+      const baseRowStyle = Array.isArray(rowProps.style)
+        ? rowProps.style
+        : [rowProps.style];
+      const rowStyle = [
+        ...baseRowStyle,
+        rowIndex === rawRows.length - 1 ? { borderBottomWidth: 0 } : null,
+      ].filter(Boolean);
+
+      return React.cloneElement(
+        rowChild as any,
+        {
+          style: rowStyle,
+        },
+        processedCells,
+      );
+    });
+
+    return React.cloneElement(section, undefined, processedRows);
+  });
+
+  return (
+    <View key={node.key} style={tableOuterStyle}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={tableScrollContentStyle}
+        style={tableScrollViewStyle}
+        nestedScrollEnabled={true}
+      >
+        <View style={styles.table}>{sections}</View>
+      </ScrollView>
+    </View>
+  );
+}

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/components/message-error-boundary.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+
+type MessageErrorBoundaryProps = {
+  children: React.ReactNode;
+  messageId: string;
+};
+
+type MessageErrorBoundaryState = {
+  hasError: boolean;
+  error?: Error;
+};
+
+/**
+ * Error boundary for individual chat messages.
+ * Prevents one broken message from crashing the entire chat.
+ *
+ * Features:
+ * - Catches rendering errors in message components
+ * - Shows fallback UI for broken messages
+ * - Logs error details for debugging
+ * - Resets when message changes
+ *
+ * @example
+ * ```tsx
+ * <MessageErrorBoundary messageId={message.id}>
+ *   <ChatMessageBubble message={message} />
+ * </MessageErrorBoundary>
+ * ```
+ */
+export class MessageErrorBoundary extends React.Component<
+  MessageErrorBoundaryProps,
+  MessageErrorBoundaryState
+> {
+  constructor(props: MessageErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): MessageErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('[MessageErrorBoundary] Message rendering error:', {
+      messageId: this.props.messageId,
+      error: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack,
+    });
+  }
+
+  componentDidUpdate(prevProps: MessageErrorBoundaryProps) {
+    // Reset error state when message changes
+    if (prevProps.messageId !== this.props.messageId && this.state.hasError) {
+      this.setState({ hasError: false, error: undefined });
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <View className="my-2 rounded-lg border border-destructive/50 bg-destructive/10 p-4">
+          <Text className="text-sm font-medium text-destructive">
+            Failed to render message
+          </Text>
+          <Text className="mt-1 text-xs text-muted-foreground">
+            {this.state.error?.message || 'Unknown error'}
+          </Text>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/components/message-list.tsx

@@ -0,0 +1,170 @@
+import type { FlashListRef } from '@shopify/flash-list';
+import { FlashList } from '@shopify/flash-list';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Keyboard, View } from 'react-native';
+
+import { ChatMessageBubble } from '@/features/chatbot/components/chat-message-bubble';
+import { MessageErrorBoundary } from '@/features/chatbot/components/message-error-boundary';
+import { useSmartScrollManager } from '@/features/chatbot/hooks/use-smart-scroll-manager';
+import type { AppMessage } from '@/features/chatbot/types';
+
+type MessageListProps = {
+  messages: AppMessage[];
+  onReportMessage?: (message: AppMessage) => void;
+  testID?: string;
+};
+
+/**
+ * Component that renders the scrollable list of chat messages.
+ * Uses FlashList for optimal performance with large message lists.
+ * Auto-scrolls to bottom when new messages are added and on initial load.
+ */
+export const MessageList: React.FC<MessageListProps> = ({
+  messages,
+  onReportMessage,
+  testID = 'message-list',
+}) => {
+  const flashListRef = useRef<FlashListRef<AppMessage> | null>(null);
+  const previousMessageIdsRef = useRef<string[]>([]);
+
+  // Use smart scroll manager hook
+  const scrollManager = useSmartScrollManager(flashListRef);
+
+  const attachFlashListRef = useCallback(
+    (instance: FlashListRef<AppMessage> | null) => {
+      flashListRef.current = instance;
+    },
+    [],
+  );
+
+  const handleTouchStart = useCallback(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  // Auto-scroll to bottom when appropriate
+  useEffect(() => {
+    if (messages.length === 0) {
+      scrollManager.markNearBottom();
+      previousMessageIdsRef.current = [];
+      return;
+    }
+
+    const lastMessage = messages[messages.length - 1];
+    const previousIds = [...previousMessageIdsRef.current];
+    const prevLastId = previousIds[previousIds.length - 1];
+    const newMessageAppended = lastMessage?.id && lastMessage.id !== prevLastId;
+    const userSentMessage = newMessageAppended && lastMessage?.role === 'user';
+
+    // Check if we should auto-scroll
+    // Always scroll on user message, otherwise only if near bottom and not dragging
+    const shouldStickToBottom = scrollManager.shouldAutoScroll(userSentMessage);
+
+    if (shouldStickToBottom) {
+      // Only schedule scroll if:
+      // 1. New message was appended (user or assistant)
+      // 2. OR we're streaming (last message is assistant and content is updating)
+      const isStreaming =
+        lastMessage?.role === 'assistant' &&
+        lastMessage.id.startsWith('stream-');
+
+      if (newMessageAppended || isStreaming) {
+        scrollManager.scheduleScroll();
+      }
+    }
+
+    previousMessageIdsRef.current = messages.map((message) => message.id);
+  }, [messages, scrollManager]);
+
+  // Render individual message with error boundary
+  const renderMessage = React.useCallback(
+    ({ item }: { item: AppMessage }) => {
+      return (
+        <MessageErrorBoundary messageId={item.id}>
+          <ChatMessageBubble message={item} onReportMessage={onReportMessage} />
+        </MessageErrorBoundary>
+      );
+    },
+    [onReportMessage],
+  );
+
+  // Get item type for better height estimation per message type
+  // FlashList will maintain separate height estimates for each type
+  const getItemType = useCallback((item: AppMessage) => {
+    const hasImages = (item.attachments?.length ?? 0) > 0;
+    const contentLength =
+      typeof item.content === 'string' ? item.content.length : 0;
+    const isLongMessage = contentLength > 500;
+    const role = item.role;
+
+    // Types: user-short, user-long, user-img, assistant-short, assistant-long, assistant-img
+    return `${role}-${hasImages ? 'img' : isLongMessage ? 'long' : 'short'}`;
+  }, []);
+
+  // Calculate better estimated item size based on message type
+  // Note: FlashList will use this for better height estimation
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const estimatedItemSize = useCallback((item: AppMessage, index: number) => {
+    const hasImages = (item.attachments?.length ?? 0) > 0;
+    const contentLength =
+      typeof item.content === 'string' ? item.content.length : 0;
+
+    // Base height
+    let estimate = 80;
+
+    // Add height for images (fixed aspect ratio 1.5, width 192px = height ~128px)
+    if (hasImages) {
+      estimate += item.attachments!.length * 150; // 128px image + margins
+    }
+
+    // Add height for text content (rough estimate: ~20px per 50 chars)
+    if (contentLength > 0) {
+      const estimatedLines = Math.ceil(contentLength / 50);
+      estimate += estimatedLines * 20;
+    }
+
+    // Assistant messages with markdown tend to be taller
+    if (item.role === 'assistant' && contentLength > 200) {
+      estimate *= 1.3; // 30% buffer for markdown formatting
+    }
+
+    return estimate;
+  }, []);
+
+  return (
+    <View className="flex-1 px-4" testID={testID}>
+      {messages.length === 0 ? (
+        <View
+          className="flex-1 items-center justify-center px-6"
+          onTouchStart={handleTouchStart}
+        >
+          {/* <Text className="text-center text-base text-muted-foreground">
+            {translate('chatbot.start_conversation')}
+          </Text> */}
+        </View>
+      ) : (
+        <FlashList<AppMessage>
+          ref={attachFlashListRef}
+          data={messages}
+          renderItem={renderMessage}
+          keyExtractor={(item: AppMessage) => item.id}
+          getItemType={getItemType}
+          drawDistance={1000}
+          removeClippedSubviews={false}
+          onTouchStart={handleTouchStart}
+          onScroll={scrollManager.onScroll}
+          onScrollBeginDrag={scrollManager.onScrollBeginDrag}
+          onScrollEndDrag={scrollManager.onScrollEndDrag}
+          onMomentumScrollBegin={scrollManager.onMomentumScrollBegin}
+          onMomentumScrollEnd={scrollManager.onMomentumScrollEnd}
+          scrollEventThrottle={16}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="on-drag"
+          contentContainerStyle={{ paddingTop: 50, paddingBottom: 8 }}
+          accessibilityLabel="Chat messages"
+          accessibilityRole="list"
+          testID="messages-flashlist"
+        />
+      )}
+    </View>
+  );
+};

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/components/model-selector.tsx

@@ -0,0 +1,283 @@
+import { Feather } from '@expo/vector-icons';
+import type React from 'react';
+import { Alert, ScrollView, View } from 'react-native';
+
+import { Pressable, Text } from '@/components/ui';
+import colors from '@/components/ui/colors';
+import { Modal, useModal } from '@/components/ui/core/overlays/modal';
+import type { ModelType, Provider } from '@/features/chatbot/models';
+import {
+  getAllProviders,
+  getModelById,
+  getModelsByProvider,
+  getProviderDisplayName,
+  getProviderIcon,
+  isPremiumModel,
+} from '@/features/chatbot/models';
+import { useEntitlement } from '@/features/payments/hooks/use-entitlement';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+type ModelSelectorProps = {
+  selectedModel: ModelType;
+  onModelSelect: (model: ModelType) => void;
+  testID?: string;
+};
+
+/**
+ * Model selector component that displays available AI models in a beautiful dropdown
+ * Replicates the SuperGrok interface design with provider grouping
+ */
+export const ModelSelector: React.FC<ModelSelectorProps> = ({
+  selectedModel,
+  onModelSelect,
+  testID = 'model-selector',
+}) => {
+  const theme = useThemeConfig();
+  const modal = useModal();
+  const { isEntitled: hasPremium } = useEntitlement('premium_access');
+
+  // Get the current model's display info
+  const getCurrentModelInfo = () => {
+    const model = getModelById(selectedModel);
+    if (model) {
+      const IconComponent = getProviderIcon(model.provider);
+      return {
+        label: model.name,
+        provider: model.provider,
+        icon: <IconComponent />,
+      };
+    }
+
+    // Fallback to OpenAI
+    const DefaultIcon = getProviderIcon('openai');
+    return {
+      label: 'Select Model',
+      provider: 'openai' as Provider,
+      icon: <DefaultIcon />,
+    };
+  };
+
+  const currentModel = getCurrentModelInfo();
+
+  const handleModelSelect = (model: ModelType) => {
+    // Check if model requires premium access
+    if (isPremiumModel(model) && !hasPremium) {
+      Alert.alert(
+        'Premium Required',
+        'This model requires a premium subscription. Upgrade to access advanced AI models.',
+        [
+          { text: 'Cancel', style: 'cancel' },
+          {
+            text: 'Upgrade',
+            onPress: () => {
+              /* Navigate to upgrade */
+            },
+          },
+        ],
+      );
+      return;
+    }
+
+    onModelSelect(model);
+    modal.dismiss();
+  };
+
+  return (
+    <>
+      <Pressable
+        onPress={modal.present}
+        className="flex-row items-center gap-2.5 rounded-full border border-neutral-300/60 bg-neutral-50 px-4 py-3.5 dark:border-neutral-800 dark:bg-neutral-800"
+        style={{ alignSelf: 'flex-start' }}
+        accessibilityLabel={`Current model: ${currentModel.label}`}
+        accessibilityHint="Tap to change AI model"
+        accessibilityRole="button"
+        testID={testID}
+      >
+        <View className="size-4">{currentModel.icon}</View>
+        <Text
+          className="max-w-[120px] text-xs font-medium text-neutral-800 dark:text-neutral-200"
+          numberOfLines={1}
+        >
+          {currentModel.label}
+        </Text>
+        <Feather
+          name="chevron-down"
+          size={14}
+          color={theme.dark ? colors.neutral[400] : colors.neutral[500]}
+        />
+      </Pressable>
+      <Modal
+        ref={modal.ref}
+        index={0}
+        snapPoints={['70%']}
+        // title="Choose Model"
+      >
+        <ScrollView
+          className="flex-1"
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{
+            paddingHorizontal: 24,
+            // paddingVertical: 8,
+          }}
+        >
+          {/* Subtitle */}
+          <View className="mb-6">
+            <Text className="text-center text-xl font-bold">
+              Select the AI model
+            </Text>
+          </View>
+
+          {getAllProviders().map((provider) => {
+            const IconComponent = getProviderIcon(provider);
+            const models = getModelsByProvider(provider);
+
+            return (
+              <View key={provider} className="mb-6">
+                <View className="mb-4 flex-row items-center gap-3">
+                  <View className="size-6">
+                    <IconComponent />
+                  </View>
+                  <Text className="text-lg font-semibold text-neutral-900 dark:text-white">
+                    {getProviderDisplayName(provider)}
+                  </Text>
+                </View>
+                {models.map((model) => (
+                  <ModelOption
+                    key={model.id}
+                    model={{
+                      label: model.name,
+                      value: model.id,
+                      description: model.description,
+                    }}
+                    isSelected={selectedModel === model.id}
+                    onSelect={() => handleModelSelect(model.id)}
+                    isPremium={isPremiumModel(model.id)}
+                    hasPremium={hasPremium}
+                    testID={`${testID}-${model.id}`}
+                  />
+                ))}
+              </View>
+            );
+          })}
+        </ScrollView>
+      </Modal>
+    </>
+  );
+};
+
+type ModelOptionProps = {
+  model: { label: string; value: string | number; description?: string };
+  isSelected: boolean;
+  onSelect: () => void;
+  isPremium: boolean;
+  hasPremium: boolean;
+  testID?: string;
+};
+
+const ModelOption: React.FC<ModelOptionProps> = ({
+  model,
+  isSelected,
+  onSelect,
+  isPremium,
+  hasPremium,
+  testID,
+}) => {
+  const theme = useThemeConfig();
+  const isDisabled = isPremium && !hasPremium;
+
+  return (
+    <Pressable
+      onPress={onSelect}
+      disabled={isDisabled}
+      className="mb-3 rounded-2xl border p-4"
+      style={{
+        backgroundColor: isDisabled
+          ? theme.dark
+            ? 'rgba(51, 65, 85, 0.2)'
+            : 'rgba(248, 250, 252, 0.2)'
+          : isSelected
+            ? theme.dark
+              ? 'rgba(59, 130, 246, 0.25)'
+              : 'rgba(59, 130, 246, 0.15)'
+            : theme.dark
+              ? 'rgba(51, 65, 85, 0.2)'
+              : 'rgba(248, 250, 252, 0.2)', // 20% opacity for non-selected
+        borderColor: isDisabled
+          ? theme.dark
+            ? colors.neutral[600]
+            : colors.neutral[300]
+          : isSelected
+            ? colors.blue[500]
+            : theme.dark
+              ? colors.neutral[700]
+              : colors.neutral[200],
+        borderWidth: isSelected ? 2 : 1,
+        shadowColor: isSelected ? colors.blue[500] : colors.neutral[900],
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: isSelected ? 0.15 : 0.05,
+        shadowRadius: 8,
+        elevation: isSelected ? 4 : 2,
+        opacity: isDisabled ? 0.6 : 1,
+      }}
+      accessibilityLabel={`${model.label}: ${model.description || ''}${isPremium ? ' (Premium)' : ''}`}
+      accessibilityHint={
+        isDisabled
+          ? 'Premium required'
+          : isSelected
+            ? 'Currently selected'
+            : 'Tap to select'
+      }
+      accessibilityRole="button"
+      testID={testID}
+    >
+      <View className="flex-row items-center justify-between">
+        <View className="flex-1">
+          <View className="flex-row items-center gap-2">
+            <Text
+              className={`text-base font-bold ${
+                isDisabled
+                  ? 'text-neutral-500 dark:text-neutral-500'
+                  : isSelected
+                    ? 'text-blue-700 dark:text-blue-300'
+                    : 'text-neutral-900 dark:text-white'
+              }`}
+            >
+              {model.label}
+            </Text>
+            {isPremium && (
+              <View className="rounded-full bg-warning-500 px-2 py-0.5">
+                <Text className="text-xs font-bold text-white">PRO</Text>
+              </View>
+            )}
+          </View>
+          <Text
+            className={`mt-1 text-sm ${
+              isDisabled
+                ? 'text-neutral-500 dark:text-neutral-500'
+                : isSelected
+                  ? 'text-blue-600 dark:text-blue-400'
+                  : 'text-neutral-600 dark:text-neutral-400'
+            }`}
+          >
+            {model.description || 'AI model'}
+          </Text>
+          {isDisabled && (
+            <Text className="mt-1 text-xs text-warning-600 dark:text-warning-400">
+              Upgrade to Premium to access this model
+            </Text>
+          )}
+        </View>
+        {isSelected && !isDisabled && (
+          <View className="ml-3 rounded-full bg-blue-500 p-1">
+            <Feather name="check" size={16} color={colors.white} />
+          </View>
+        )}
+        {isDisabled && (
+          <View className="ml-3">
+            <Feather name="lock" size={20} color={colors.neutral[400]} />
+          </View>
+        )}
+      </View>
+    </Pressable>
+  );
+};