vibefast-cli 0.1.1

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

@@ -0,0 +1,246 @@
+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/recipes/chatbot/apps/native/src/features/chatbot/components/chat-settings-modal.tsx

@@ -0,0 +1,161 @@
+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/recipes/chatbot/apps/native/src/features/chatbot/components/image-preview-list.tsx

@@ -0,0 +1,115 @@
+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/recipes/chatbot/apps/native/src/features/chatbot/components/markdown/code-block.tsx

@@ -0,0 +1,165 @@
+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/recipes/chatbot/apps/native/src/features/chatbot/components/markdown/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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';