vibefast-cli 0.6.2 → 0.7.1

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

@@ -1,130 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-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/2/apps/native/src/features/chatbot/components/message-error-boundary.tsx

@@ -1,79 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-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/2/apps/native/src/features/chatbot/components/message-list.tsx

@@ -1,174 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-import type { FlashListRef } from '@shopify/flash-list';
-import { FlashList } from '@shopify/flash-list';
-import type { Message } from 'ai';
-import React, { useCallback, useEffect, useRef } from 'react';
-import { Keyboard, View } from 'react-native';
-
-import { Text } from '@/components/ui';
-import type { AppMessage } from '@/features/chatbot/components/chat-message-bubble';
-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 { translate } from '@/lib';
-
-type MessageListProps = {
-  /** Array of messages to display */
-  messages: AppMessage[]; // Use AppMessage
-  /** Handler for reporting a message */
-  onReportMessage?: (message: Message) => void; // Base Message type for handler is fine
-  /** Test ID for E2E testing */
-  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">
-          <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={{ paddingVertical: 16, paddingBottom: 8 }}
-          accessibilityLabel="Chat messages"
-          accessibilityRole="list"
-          testID="messages-flashlist"
-        />
-      )}
-    </View>
-  );
-};

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

@@ -1,284 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-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>
-  );
-};