vibefast-cli 0.7.0 → 0.7.1

package/2/apps/native/src/features/chatbot/components/chat-message-bubble.tsx

@@ -1,247 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-import { Feather, Ionicons } from '@expo/vector-icons';
-import type { Id } from '@vibefast/backend/_generated/dataModel';
-import type { Message } from 'ai'; // Base Message type
-import * as Clipboard from 'expo-clipboard';
-import React from 'react';
-import { View } from 'react-native';
-
-import { Image, Pressable, Text } from '@/components/ui';
-import { useToast } from '@/components/ui/utils';
-import { ChatMarkdown } from '@/features/chatbot/components/chat-markdown';
-import { translate } from '@/lib';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-// Local definition for MessageContentPart compatible with Vercel AI SDK structure
-// This should be consistent with how `useChat` hook and AI SDK handle content.
-export type LocalMessageContentPart =
-  | { type: 'text'; text: string }
-  | { type: 'image'; image: string | URL }; // Allow string for input from client, server can convert to URL
-
-type ConvexAttachment = {
-  type: 'image';
-  storageId: Id<'_storage'>;
-  url?: string; // This is now pre-fetched from the parent component
-  fileName?: string;
-  mimeType?: string;
-};
-
-// The message prop for ChatMessageBubble
-export type AppMessage = Omit<Message, 'content'> & {
-  content: string | LocalMessageContentPart[]; // Content matches AI SDK
-  attachments?: ConvexAttachment[]; // Custom prop for Convex-stored attachments
-};
-
-type ChatMessageBubbleProps = {
-  message: AppMessage;
-  onReportMessage?: (message: AppMessage) => void; // AppMessage type for handler
-};
-
-const ConvexImage: React.FC<{
-  storageId: Id<'_storage'>;
-  isUser: boolean;
-  fileName?: string;
-  preloadedUrl?: string | null; // Pre-fetched URL from parent
-}> = React.memo(({ storageId, isUser, fileName, preloadedUrl }) => {
-  // Use pre-loaded URL if available, otherwise show loading
-  const imageUrl = preloadedUrl;
-  const theme = useThemeConfig();
-
-  // Fixed aspect ratio container to prevent layout shift when image loads
-  return (
-    <View
-      className="my-1 w-48 overflow-hidden rounded-lg"
-      style={{ aspectRatio: 1.5, minHeight: 128 }}
-      testID={`convex-image-container-${storageId}`}
-    >
-      {!imageUrl ? (
-        <View
-          className="flex-1 items-center justify-center"
-          style={{ backgroundColor: theme.colors.muted }}
-        >
-          <Text
-            className={`text-sm ${isUser ? 'text-white' : 'text-neutral-500 dark:text-neutral-400'}`}
-          >
-            Loading{fileName ? ` ${fileName}` : ''}...
-          </Text>
-        </View>
-      ) : (
-        <Image
-          source={{ uri: imageUrl }}
-          className="flex-1"
-          accessibilityRole="image"
-          accessibilityLabel={
-            fileName || 'Message image attachment from storage'
-          }
-          testID={`convex-image-loaded-${storageId}`}
-          contentFit="cover"
-          transition={0}
-        />
-      )}
-    </View>
-  );
-});
-
-export const ChatMessageBubble: React.FC<ChatMessageBubbleProps> = ({
-  message,
-  onReportMessage,
-}) => {
-  const theme = useThemeConfig();
-  const isUser = message.role === 'user';
-  const isBotMessage = message.role === 'assistant';
-  const toast = useToast();
-
-  const handleCopyMessage = async () => {
-    try {
-      let textToCopy = '';
-      if (typeof message.content === 'string') {
-        textToCopy = message.content;
-      } else if (Array.isArray(message.content)) {
-        textToCopy = message.content
-          .filter((part) => part.type === 'text')
-          .map((part) => part.text)
-          .join('\n');
-      }
-
-      if (textToCopy) {
-        await Clipboard.setStringAsync(textToCopy);
-      } else {
-        toast.warning(translate('chatbot.empty_message'), { duration: 2000 });
-      }
-    } catch (error) {
-      console.error('[CHATBOT_FRONTEND] Copy failed:', {
-        error: error instanceof Error ? error.message : 'Unknown error',
-      });
-      toast.error(translate('chatbot.copy_failed'), { duration: 3000 });
-    }
-  };
-
-  // Separate text content from images
-  const textContent: string[] = [];
-  const imageContent: React.ReactNode[] = [];
-
-  // Handle message.content (string or LocalMessageContentPart[])
-  if (typeof message.content === 'string') {
-    if (message.content.trim()) {
-      textContent.push(message.content);
-    }
-  } else if (Array.isArray(message.content)) {
-    message.content.forEach((part, index) => {
-      if (part.type === 'text' && part.text) {
-        textContent.push(part.text);
-      } else if (part.type === 'image' && part.image) {
-        const uri =
-          typeof part.image === 'string' ? part.image : part.image.toString();
-
-        imageContent.push(
-          <Image
-            key={`content-image-${index}`}
-            source={{ uri }}
-            className="mb-2 h-32 w-48 rounded-2xl"
-            accessibilityRole="image"
-            accessibilityLabel="Image from message content"
-            testID={`content-image-${index}`}
-            contentFit="cover"
-          />,
-        );
-      }
-    });
-  }
-
-  // Handle message.attachments (from Convex) - now with pre-fetched URLs
-  if (message.attachments && message.attachments.length > 0) {
-    message.attachments.forEach((attachment, index) => {
-      if (attachment.type === 'image' && attachment.storageId) {
-        imageContent.push(
-          <ConvexImage
-            key={`attachment-image-${attachment.storageId}-${index}`}
-            storageId={attachment.storageId}
-            isUser={isUser}
-            fileName={attachment.fileName}
-            preloadedUrl={attachment.url}
-          />,
-        );
-      }
-    });
-  }
-
-  return (
-    <View
-      className={`mb-1 ${isUser ? 'items-end' : 'items-start'}`}
-      accessibilityLabel={`${isUser ? 'Your' : 'Assistant'} message`}
-    >
-      {/* Images displayed outside bubble */}
-      {imageContent.length > 0 && (
-        <View className={`mb-2 ${isUser ? 'items-end' : 'items-start'}`}>
-          {imageContent}
-        </View>
-      )}
-
-      {/* Text bubble */}
-      {textContent.length > 0 && (
-        <View className={`w-full ${isUser ? 'items-end' : 'items-start'}`}>
-          <View
-            className={`${isUser ? 'max-w-[80%] rounded-3xl bg-neutral-200 px-5 py-4 dark:bg-neutral-800' : 'w-full py-2'}`}
-          >
-            {isBotMessage ? (
-              <ChatMarkdown content={textContent.join('\n\n')} />
-            ) : (
-              textContent.map((text, index) => (
-                <Text
-                  key={`text-${index}`}
-                  className={`text-[15.8px] ${isUser ? 'text-neutral-900 dark:text-white' : 'text-black dark:text-white'}`}
-                  selectable
-                  selectionColor={theme.colors.primary}
-                >
-                  {text}
-                </Text>
-              ))
-            )}
-          </View>
-
-          {isBotMessage && (textContent.length > 0 || onReportMessage) && (
-            <View className="flex-row gap-x-2">
-              {textContent.length > 0 && (
-                <Pressable
-                  onPress={handleCopyMessage}
-                  className="rounded p-1 opacity-60 hover:opacity-100 active:opacity-40"
-                  accessibilityRole="button"
-                  accessibilityLabel={translate('chatbot.copy_message')}
-                  accessibilityHint={translate('chatbot.copy_hint')}
-                  testID="copy-message-button"
-                  hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-                >
-                  <Feather
-                    name="copy"
-                    size={20}
-                    color={theme.colors.mutedForeground}
-                  />
-                </Pressable>
-              )}
-
-              {onReportMessage && (
-                <Pressable
-                  onPress={() => onReportMessage(message)}
-                  className="rounded p-1 opacity-60 hover:opacity-100 active:opacity-40"
-                  accessibilityRole="button"
-                  accessibilityLabel={translate('chatbot.report_message')}
-                  accessibilityHint={translate('chatbot.report_hint')}
-                  testID="report-message-button"
-                  hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-                >
-                  <Ionicons
-                    name="flag-outline"
-                    size={20}
-                    color={theme.colors.mutedForeground}
-                  />
-                </Pressable>
-              )}
-            </View>
-          )}
-        </View>
-      )}
-
-      {/* If both text and images are empty (e.g. streaming just started), omit the placeholder bubble */}
-    </View>
-  );
-};

package/2/apps/native/src/features/chatbot/components/chat-settings-modal.tsx

@@ -1,162 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-import React from 'react';
-import { View } from 'react-native';
-
-import { Modal, Select, Text, useModal } from '@/components/ui';
-import type { OptionType } from '@/components/ui/core/select';
-import { useEntitlement } from '@/features/payments/hooks/use-entitlement';
-
-import {
-  getModelsByProvider,
-  PREMIUM_MODELS,
-  type Provider,
-} from '../constants/models';
-import type { SearchMode } from '../hooks/use-chatbot-settings';
-
-const PROVIDER_OPTIONS: OptionType[] = [
-  { label: 'OpenAI', value: 'openai' },
-  { label: 'Gemini', value: 'gemini' },
-];
-
-const SEARCH_MODE_OPTIONS: OptionType[] = [
-  { label: 'Provider-Optimized', value: 'provider' },
-  { label: 'Tavily Search', value: 'tavily' },
-  { label: 'None', value: 'none' },
-];
-
-type ChatSettingsModalProps = {
-  selectedProvider: Provider;
-  selectedModel: string;
-  selectedSearchMode: SearchMode;
-  onProviderChange: (provider: Provider) => void;
-  onModelChange: (model: string) => void;
-  onSearchModeChange: (searchMode: SearchMode) => void;
-};
-
-export type ChatSettingsModalRef = {
-  present: () => void;
-  dismiss: () => void;
-};
-
-export const ChatSettingsModal = React.forwardRef<
-  ChatSettingsModalRef,
-  ChatSettingsModalProps
->(
-  (
-    {
-      selectedProvider,
-      selectedModel,
-      selectedSearchMode,
-      onProviderChange,
-      onModelChange,
-      onSearchModeChange,
-    },
-    ref,
-  ) => {
-    const modal = useModal();
-    const { isEntitled, isLoading: isEntitlementLoading } =
-      useEntitlement('premium_access');
-
-    const premiumModelIds = React.useMemo(() => new Set(PREMIUM_MODELS()), []);
-
-    const baseModelOptions = React.useMemo<OptionType[]>(
-      () =>
-        getModelsByProvider(selectedProvider).map((model) => ({
-          label: model.name,
-          value: model.id,
-        })),
-      [selectedProvider],
-    );
-
-    // Filter model options based on entitlement
-    const modelOptions = React.useMemo(
-      () =>
-        baseModelOptions
-          .filter((option) => {
-            const isPremium = premiumModelIds.has(option.value as string);
-            return isPremium ? isEntitled : true;
-          })
-          .map((option) => {
-            const isPremium = premiumModelIds.has(option.value as string);
-            if (isPremium && isEntitled) {
-              return {
-                ...option,
-                label: `${option.label} ⭐`,
-              };
-            }
-            return option;
-          }),
-      [baseModelOptions, isEntitled, premiumModelIds],
-    );
-
-    const handleProviderChange = (value: string | number) => {
-      const provider = value as Provider;
-      onProviderChange(provider);
-
-      // Reset to first model of new provider if current model doesn't exist
-      const newModelOptions = getModelsByProvider(provider);
-      const modelExists = newModelOptions.some(
-        (model) => model.id === selectedModel,
-      );
-      if (!modelExists && newModelOptions.length > 0) {
-        onModelChange(newModelOptions[0].id);
-      }
-    };
-
-    const handleModelChange = (value: string | number) => {
-      onModelChange(value as string);
-    };
-
-    const handleSearchModeChange = (value: string | number) => {
-      onSearchModeChange(value as SearchMode);
-    };
-
-    // Expose modal controls via imperative handle
-    React.useImperativeHandle(ref, () => ({
-      present: modal.present,
-      dismiss: modal.dismiss,
-    }));
-
-    return (
-      <Modal ref={modal.ref} title="Chat Settings">
-        <View className="gap-6 p-4">
-          <View className="gap-2">
-            <Text className="text-base font-medium">AI Provider</Text>
-            <Select
-              options={PROVIDER_OPTIONS}
-              value={selectedProvider}
-              onSelect={handleProviderChange}
-              placeholder="Select AI Provider"
-              testID="provider-select"
-            />
-          </View>
-
-          <View className="gap-2">
-            <Text className="text-base font-medium">Model</Text>
-            <Select
-              options={modelOptions}
-              value={selectedModel}
-              onSelect={handleModelChange}
-              placeholder="Select Model"
-              testID="model-select"
-              disabled={isEntitlementLoading}
-            />
-          </View>
-
-          <View className="gap-2">
-            <Text className="text-base font-medium">Search Mode</Text>
-            <Select
-              options={SEARCH_MODE_OPTIONS}
-              value={selectedSearchMode}
-              onSelect={handleSearchModeChange}
-              placeholder="Select Search Mode"
-              testID="search-mode-select"
-            />
-          </View>
-        </View>
-      </Modal>
-    );
-  },
-);
-
-ChatSettingsModal.displayName = 'ChatSettingsModal';

package/2/apps/native/src/features/chatbot/components/image-preview-list.tsx

@@ -1,116 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-import { Feather } from '@expo/vector-icons';
-import type React from 'react';
-import { ActivityIndicator, ScrollView, View } from 'react-native';
-
-import { Image, Pressable, Text } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-export type ImageUploadState =
-  | { status: 'pending'; progress: 0 }
-  | { status: 'uploading'; progress: number }
-  | { status: 'completed'; storageId: string; progress: 100 }
-  | { status: 'error'; error: string; progress: 0 };
-
-export type SelectedImage = {
-  uri: string;
-  type: string;
-  fileName?: string;
-  id: string;
-  uploadState: ImageUploadState;
-  storageId?: string;
-  mimeType?: string;
-};
-
-type ImagePreviewListProps = {
-  images: SelectedImage[];
-  onRemoveImage: (id: string) => void;
-  onRetryUpload?: (id: string) => void;
-};
-
-/**
- * Component for displaying and managing selected image previews with upload progress
- */
-export const ImagePreviewList: React.FC<ImagePreviewListProps> = ({
-  images,
-  onRemoveImage,
-  onRetryUpload,
-}) => {
-  const theme = useThemeConfig();
-
-  if (images.length === 0) return null;
-
-  return (
-    <ScrollView
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      className="mb-1"
-      contentContainerStyle={{ gap: 8 }}
-    >
-      {images.map((image, index) => {
-        const isUploading =
-          image.uploadState.status === 'uploading' ||
-          image.uploadState.status === 'pending';
-        const isError = image.uploadState.status === 'error';
-
-        return (
-          <View key={image.id} className="relative p-2">
-            <Image
-              source={{ uri: image.uri }}
-              className="size-20 rounded-xl border border-neutral-200 dark:border-neutral-800"
-              contentFit="cover"
-              accessibilityRole="image"
-              accessibilityLabel={`Selected image ${index + 1}`}
-              style={{ opacity: isUploading ? 0.5 : 1 }}
-            />
-
-            {/* Upload Progress Loader */}
-            {isUploading && (
-              <View className="absolute inset-2 items-center justify-center rounded-xl">
-                <ActivityIndicator
-                  size="small"
-                  color={theme.dark ? '#fff' : '#000'}
-                />
-              </View>
-            )}
-
-            {/* Error State Overlay */}
-            {isError && (
-              <View className="absolute inset-2 items-center justify-center rounded-xl bg-danger-500/90">
-                <Feather name="alert-circle" size={20} color="#fff" />
-                <Text className="mt-1 text-xs font-medium text-white">
-                  Failed
-                </Text>
-                {onRetryUpload && (
-                  <Pressable
-                    onPress={() => onRetryUpload(image.id)}
-                    className="mt-1 rounded bg-white/20 px-2 py-1"
-                    accessibilityLabel="Retry upload"
-                    accessibilityRole="button"
-                  >
-                    <Text className="text-xs font-medium text-white">
-                      Retry
-                    </Text>
-                  </Pressable>
-                )}
-              </View>
-            )}
-
-            {/* Remove Button */}
-            <Pressable
-              onPress={() => onRemoveImage(image.id)}
-              className="absolute right-0 top-0 z-50 size-[26px] rounded-full bg-danger-500/70 dark:bg-danger-600/70"
-              accessibilityLabel={`Remove image ${index + 1}`}
-              accessibilityRole="button"
-              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-            >
-              <Text className="mt-1 items-center justify-center text-center text-sm text-white">
-                ✕
-              </Text>
-            </Pressable>
-          </View>
-        );
-      })}
-    </ScrollView>
-  );
-};

package/2/apps/native/src/features/chatbot/components/markdown/code-block.tsx

@@ -1,166 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-import { Feather } from '@expo/vector-icons';
-import React, { useCallback, useState } from 'react';
-import {
-  type ImageStyle,
-  Pressable,
-  type TextStyle,
-  View,
-  type ViewStyle,
-} from 'react-native';
-import SyntaxHighlighter from 'react-native-syntax-highlighter';
-
-import { translate } from '@/lib';
-
-type CodeBlockProps = {
-  containerStyle: ViewStyle | TextStyle | ImageStyle;
-  content: string;
-  language: string;
-  codeSyntaxTheme: any;
-  monospaceFontFamily: string;
-  subtleText: string;
-  codeContentStyle: ViewStyle;
-  codeActionsContainerStyle: ViewStyle;
-  codeActionButtonBaseStyle: ViewStyle;
-  codeToggleButtonSpacingStyle: ViewStyle;
-  codeContentContainerStyle: ViewStyle;
-  onCopyCode: (code: string) => Promise<void>;
-};
-
-/**
- * CodeBlock component for rendering syntax-highlighted code with collapse/expand functionality.
- *
- * Features:
- * - Syntax highlighting using react-native-syntax-highlighter
- * - Copy to clipboard functionality
- * - Collapse/expand animation with FlashList preparation
- * - Smooth 220ms easeInEaseOut animation
- * - Independent animation for multiple code blocks
- *
- * Requirements addressed:
- * - 9.1: Prepare FlashList for layout animation before collapse
- * - 9.2: Animate height change over 220ms with easeInEaseOut
- * - 9.3: Animate each code block independently
- * - 9.4: Restore full content with same animation timing
- * - 9.5: Complete animation without interruption during scroll
- *
- * @param props - CodeBlock component props
- * @returns Rendered code block with syntax highlighting and controls
- *
- * @example
- * ```tsx
- * <CodeBlock
- *   containerStyle={styles.code_block}
- *   content="const hello = 'world';"
- *   language="javascript"
- *   codeSyntaxTheme={atomOneDark}
- *   monospaceFontFamily="Menlo"
- *   subtleText="#888"
- *   codeContentStyle={styles.codeContent}
- *   codeActionsContainerStyle={styles.actions}
- *   codeActionButtonBaseStyle={styles.button}
- *   codeToggleButtonSpacingStyle={styles.spacing}
- *   codeContentContainerStyle={styles.container}
- *   onCopyCode={copyToClipboard}
- *   onPrepareLayoutAnimation={prepareFlashList}
- * />
- * ```
- */
-export const CodeBlock = React.memo(function CodeBlock({
-  containerStyle,
-  content,
-  language,
-  codeSyntaxTheme,
-  monospaceFontFamily,
-  subtleText,
-  codeContentStyle,
-  codeActionsContainerStyle,
-  codeActionButtonBaseStyle,
-  codeToggleButtonSpacingStyle,
-  codeContentContainerStyle,
-  onCopyCode,
-}: CodeBlockProps) {
-  const [isCollapsed, setIsCollapsed] = useState(false);
-
-  /**
-   * Toggle collapsed state without animation.
-   * LayoutAnimation causes scroll jitter, so we disable it.
-   */
-  const toggleCollapsed = useCallback(() => {
-    setIsCollapsed((prev) => !prev);
-  }, []);
-
-  return (
-    <View
-      style={[
-        containerStyle as ViewStyle,
-        { position: 'relative' as ViewStyle['position'] },
-      ]}
-    >
-      <View style={codeActionsContainerStyle} pointerEvents="box-none">
-        <Pressable
-          onPress={() => onCopyCode(content)}
-          style={({ pressed }) => [
-            codeActionButtonBaseStyle,
-            pressed ? { opacity: 0.6 } : null,
-          ]}
-          accessibilityRole="button"
-          accessibilityLabel={translate('chatbot.copy_code')}
-          accessibilityHint={translate('chatbot.copy_code_hint')}
-          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-        >
-          <Feather name="copy" size={16} color={subtleText} />
-        </Pressable>
-
-        <Pressable
-          onPress={toggleCollapsed}
-          style={({ pressed }) => [
-            codeActionButtonBaseStyle,
-            codeToggleButtonSpacingStyle,
-            pressed ? { opacity: 0.6 } : null,
-          ]}
-          accessibilityRole="button"
-          accessibilityLabel={
-            translate(
-              isCollapsed
-                ? 'chatbot.expand_code_block'
-                : 'chatbot.collapse_code_block',
-            ) ?? undefined
-          }
-          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-        >
-          <View
-            style={{
-              transform: [{ rotate: isCollapsed ? '180deg' : '0deg' }],
-            }}
-          >
-            <Feather name="chevron-down" size={18} color={subtleText} />
-          </View>
-        </Pressable>
-      </View>
-
-      <View
-        style={[
-          codeContentContainerStyle,
-          isCollapsed ? { marginTop: 0 } : null,
-        ]}
-        pointerEvents={isCollapsed ? 'none' : 'auto'}
-      >
-        {isCollapsed ? null : (
-          <SyntaxHighlighter
-            language={language.length > 0 ? language : 'plaintext'}
-            style={codeSyntaxTheme}
-            highlighter="hljs"
-            fontFamily={monospaceFontFamily}
-            fontSize={15}
-            PreTag={View}
-            CodeTag={View}
-            customStyle={codeContentStyle}
-          >
-            {content}
-          </SyntaxHighlighter>
-        )}
-      </View>
-    </View>
-  );
-});

package/2/apps/native/src/features/chatbot/components/markdown/index.ts

@@ -1,11 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-/**
- * Markdown rendering components for chatbot messages.
- *
- * This module exports specialized components for rendering markdown content
- * in chat messages, including code blocks with syntax highlighting and
- * tables with intelligent column sizing.
- */
-
-export { CodeBlock } from './code-block';
-export { TableRenderer } from './table-renderer';