vibefast-cli 0.2.4 → 0.3.0

package/2/apps/native/src/features/charts/data/mock-data.ts

@@ -0,0 +1,186 @@
+// vibefast license: c1e9fcd2-muhammad
+// vibefast license: c1e9fcd2-muhammad
+// vibefast license: c1e9fcd2-muhammad
+export const salesData = [
+  { id: '1', label: 'Jan', value: 3500, color: '#3B82F6' },
+  { id: '2', label: 'Feb', value: 4200, color: '#10B981' },
+  { id: '3', label: 'Mar', value: 5300, color: '#F59E0B' },
+  { id: '4', label: 'Apr', value: 6800, color: '#EF4444' },
+  { id: '5', label: 'May', value: 8200, color: '#8B5CF6' },
+  { id: '6', label: 'Jun', value: 7300, color: '#06B6D4' },
+  { id: '7', label: 'Jul', value: 9100, color: '#84CC16' },
+  { id: '8', label: 'Aug', value: 8300, color: '#F97316' },
+  { id: '9', label: 'Sep', value: 10100, color: '#EC4899' },
+  { id: '10', label: 'Oct', value: 7500, color: '#6366F1' },
+];
+
+export const marketShareData = [
+  { id: '1', label: 'Product A', value: 45, color: '#3B82F6' },
+  { id: '2', label: 'Product B', value: 30, color: '#10B981' },
+  { id: '3', label: 'Product C', value: 25, color: '#F59E0B' },
+];
+
+export const expensesData = [
+  { id: '1', label: 'Rent', value: 2500, color: '#EF4444' },
+  { id: '2', label: 'Salaries', value: 4200, color: '#3B82F6' },
+  { id: '3', label: 'Marketing', value: 1800, color: '#10B981' },
+  { id: '4', label: 'Operations', value: 1500, color: '#F59E0B' },
+  { id: '5', label: 'Equipment', value: 900, color: '#8B5CF6' },
+];
+
+export const userEngagementData = [
+  { id: '1', value: 4500, label: 'App Views' },
+  { id: '2', value: 3200, label: 'Interactions' },
+  { id: '3', value: 2100, label: 'Shares' },
+  { id: '4', value: 1800, label: 'Comments' },
+];
+
+export const quarterlyRevenueData = [
+  { id: '1', label: 'Q1', value: 8500, color: '#3B82F6' },
+  { id: '2', label: 'Q2', value: 12000, color: '#10B981' },
+  { id: '3', label: 'Q3', value: 9800, color: '#F59E0B' },
+  { id: '4', label: 'Q4', value: 15000, color: '#EF4444' },
+];
+
+export const monthlyActiveUsers = [
+  1200, 1350, 1500, 1400, 1650, 1800, 1750, 1900, 2100, 2000, 2200, 2400,
+];
+
+export const monthLabels = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+export const weeklyVisitors = [1200, 1400, 1300, 1800, 1600, 2000, 2200];
+export const weekLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+export const dailyTemperature = [
+  18, 19, 21, 23, 25, 27, 29, 28, 26, 24, 22, 20, 18, 17, 16, 18, 20, 22, 24,
+  26, 25, 23, 21, 19,
+];
+
+export const temperatureLabels = [
+  '00:00',
+  '01:00',
+  '02:00',
+  '03:00',
+  '04:00',
+  '05:00',
+  '06:00',
+  '07:00',
+  '08:00',
+  '09:00',
+  '10:00',
+  '11:00',
+  '12:00',
+  '13:00',
+  '14:00',
+  '15:00',
+  '16:00',
+  '17:00',
+  '18:00',
+  '19:00',
+  '20:00',
+  '21:00',
+  '22:00',
+  '23:00',
+];
+
+export const stockPriceData = [
+  156.78, 158.45, 160.32, 159.98, 162.5, 164.75, 167.23, 166.8, 170.42, 172.15,
+  173.88, 177.62, 180.33, 178.45, 182.76,
+];
+
+export const stockDates = [
+  'Jan 1',
+  'Jan 5',
+  'Jan 10',
+  'Jan 15',
+  'Jan 20',
+  'Jan 25',
+  'Jan 30',
+  'Feb 5',
+  'Feb 10',
+  'Feb 15',
+  'Feb 20',
+  'Feb 25',
+  'Mar 1',
+  'Mar 5',
+  'Mar 10',
+];
+
+export const chartColorPalettes = {
+  primary: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'],
+  vibrant: ['#EC4899', '#06B6D4', '#84CC16', '#F97316', '#6366F1'],
+  warm: ['#F59E0B', '#EF4444', '#F97316', '#EC4899', '#DC2626'],
+  cool: ['#3B82F6', '#06B6D4', '#10B981', '#8B5CF6', '#6366F1'],
+  monochrome: ['#6B7280', '#9CA3AF', '#D1D5DB', '#374151', '#111827'],
+};
+
+// New chart data for advanced components
+export const lineChartData = [
+  { x: 'Jan', y: 65, label: 'Jan' },
+  { x: 'Feb', y: 78, label: 'Feb' },
+  { x: 'Mar', y: 90, label: 'Mar' },
+  { x: 'Apr', y: 81, label: 'Apr' },
+  { x: 'May', y: 95, label: 'May' },
+  { x: 'Jun', y: 88, label: 'Jun' },
+];
+
+export const areaChartData = [
+  { x: 'Jan', y: 30, label: 'Jan' },
+  { x: 'Feb', y: 45, label: 'Feb' },
+  { x: 'Mar', y: 60, label: 'Mar' },
+  { x: 'Apr', y: 55, label: 'Apr' },
+  { x: 'May', y: 70, label: 'May' },
+  { x: 'Jun', y: 65, label: 'Jun' },
+];
+
+export const radarChartData = [
+  { label: 'Speed', value: 80 },
+  { label: 'Reliability', value: 90 },
+  { label: 'Comfort', value: 70 },
+  { label: 'Safety', value: 95 },
+  { label: 'Efficiency', value: 85 },
+];
+
+export const radialBarData = [
+  { label: 'Completed', value: 75, color: '#10B981' },
+  { label: 'In Progress', value: 45, color: '#F59E0B' },
+  { label: 'Pending', value: 30, color: '#EF4444' },
+];
+
+export const candlestickData = [
+  { date: 'Jan 1', open: 100, high: 110, low: 95, close: 105 },
+  { date: 'Jan 2', open: 105, high: 115, low: 100, close: 108 },
+  { date: 'Jan 3', open: 108, high: 120, low: 105, close: 115 },
+  { date: 'Jan 4', open: 115, high: 118, low: 110, close: 112 },
+  { date: 'Jan 5', open: 112, high: 125, low: 108, close: 120 },
+];
+
+export const stackedBarData = [
+  { label: 'Q1', values: [20, 30, 25] },
+  { label: 'Q2', values: [25, 35, 30] },
+  { label: 'Q3', values: [30, 25, 35] },
+  { label: 'Q4', values: [35, 40, 30] },
+];
+
+export const stackedAreaData = [
+  { x: 1, y: [20, 30, 25], label: 'Jan' },
+  { x: 2, y: [25, 35, 30], label: 'Feb' },
+  { x: 3, y: [30, 25, 35], label: 'Mar' },
+  { x: 4, y: [35, 40, 30], label: 'Apr' },
+  { x: 5, y: [40, 35, 25], label: 'May' },
+];
+
+export const stackedCategories = ['Series A', 'Series B', 'Series C'];

package/2/apps/native/src/features/charts/types/index.ts

@@ -0,0 +1,69 @@
+// vibefast license: c1e9fcd2-muhammad
+// vibefast license: c1e9fcd2-muhammad
+// vibefast license: c1e9fcd2-muhammad
+export type ChartData = {
+  value: number;
+  label: string;
+  color?: string;
+  tooltip?: string;
+  id: string;
+};
+
+export type BarChartProps = {
+  data: ChartData[];
+  height?: number;
+  width?: number;
+  barRadius?: number;
+  barWidth?: number;
+  gap?: number;
+  animated?: boolean;
+  showValues?: boolean;
+  showLabels?: boolean;
+  showGrid?: boolean;
+  colors?: string[];
+  valueFormatter?: (value: number) => string;
+  onBarPress?: (item: ChartData) => void;
+  horizontal?: boolean;
+  style?: any;
+};
+
+export type PieChartProps = {
+  data: ChartData[];
+  height?: number;
+  width?: number;
+  radius?: number;
+  innerRadius?: number;
+  animated?: boolean;
+  animationDuration?: number;
+  showValues?: boolean;
+  showLabels?: boolean;
+  showLegend?: boolean;
+  valueFormatter?: (value: number) => string;
+  colors?: string[];
+  rotation?: number;
+  onSectionPress?: (item: ChartData) => void;
+  style?: any;
+};
+
+export type LineChartProps = {
+  data: number[];
+  labels?: string[];
+  height?: number;
+  width?: number;
+  animated?: boolean;
+  animationDuration?: number;
+  strokeWidth?: number;
+  curved?: boolean;
+  showDots?: boolean;
+  showArea?: boolean;
+  showGrid?: boolean;
+  showAxisLabels?: boolean;
+  showValues?: boolean;
+  fillColor?: string;
+  strokeColor?: string;
+  dotColor?: string;
+  gridColor?: string;
+  axisColor?: string;
+  valueFormatter?: (value: number) => string;
+  style?: any;
+};

package/2/apps/native/src/features/chatbot/app/index.tsx

@@ -0,0 +1,303 @@
+// vibefast license: c1e9fcd2-muhammad
+import { useAuthToken } from '@convex-dev/auth/react';
+import { api } from '@vibefast/backend/_generated/api';
+import type { Id } from '@vibefast/backend/_generated/dataModel';
+import { useQuery } from 'convex/react';
+import { Stack } from 'expo-router';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Keyboard, TouchableWithoutFeedback, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { chatbotApi } from '@/api-client/chatbot';
+import {
+  FocusAwareStatusBar,
+  NetworkConnectivityWrapper,
+  Pressable,
+  Spinner,
+  Text,
+} from '@/components/ui';
+import { Trash2 } from '@/components/ui/icons';
+import { useConvexAuth } from '@/features/authentication/services';
+import { ChatInputBar } from '@/features/chatbot/components/chat-input-bar';
+import { MessageList } from '@/features/chatbot/components/message-list';
+import { ReportContentModal } from '@/features/chatbot/components/report-content-modal';
+import type { ModelType } from '@/features/chatbot/constants/models';
+import {
+  DEFAULT_MODELS,
+  getModelById,
+} from '@/features/chatbot/constants/models';
+import { useChatHandlers } from '@/features/chatbot/hooks/use-chat-handlers';
+import { useKeyboardCoordinator } from '@/features/chatbot/hooks/use-keyboard-coordinator';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { useConversation } from '../hooks/use-conversation';
+
+const TOOL_STATUS_LABELS: Record<string, string> = {
+  tavilySearch: 'Searching the web…',
+  userProfile: 'Checking your profile…',
+};
+
+export type LocalMessageContentPart =
+  | { type: 'text'; text: string }
+  | { type: 'image'; image: string | URL };
+
+export default function ChatConversationScreen() {
+  const { userQuery, isLoading: isAuthLoading } = useConvexAuth();
+  const authToken = useAuthToken();
+  const theme = useThemeConfig();
+  const insets = useSafeAreaInsets();
+  const keyboardCoordinator = useKeyboardCoordinator();
+  const [selectedModel, setSelectedModel] = useState<ModelType>(
+    DEFAULT_MODELS.openai,
+  );
+
+  const { conversationId, initialMessages } = useConversation(userQuery?._id);
+
+  const agentSession = chatbotApi.useAgentSession(
+    conversationId ? (conversationId as Id<'conversations'>) : undefined,
+  );
+
+  const [hasManualModelSelection, setHasManualModelSelection] = useState(false);
+
+  const selectedModelConfig = useMemo(
+    () => getModelById(selectedModel),
+    [selectedModel],
+  );
+  const preferredProvider = selectedModelConfig?.provider ?? 'openai';
+
+  useEffect(() => {
+    setHasManualModelSelection(false);
+    if (!conversationId) {
+      setSelectedModel(DEFAULT_MODELS.openai);
+    }
+  }, [conversationId]);
+
+  useEffect(() => {
+    const sessionModel = agentSession?.preferredModel;
+    if (!sessionModel) {
+      return;
+    }
+    if (hasManualModelSelection) {
+      return;
+    }
+    const knownModel = getModelById(sessionModel);
+    if (!knownModel) {
+      return;
+    }
+    if (knownModel.id === selectedModel) {
+      return;
+    }
+    setSelectedModel(knownModel.id as ModelType);
+  }, [agentSession?.preferredModel, hasManualModelSelection, selectedModel]);
+
+  const handleModelChange = useCallback((model: ModelType) => {
+    setSelectedModel(model);
+    setHasManualModelSelection(true);
+  }, []);
+
+  const {
+    messages,
+    input,
+    isLoading: isChatLoading,
+    error,
+    currentStatus,
+    messageToReport,
+    handleReportMessage,
+    handleSubmitReport,
+    handleCancelReport,
+    handleTextInputChange,
+    handleMessageSubmit,
+    handleClearChat,
+  } = useChatHandlers({
+    conversationId,
+    authToken: authToken ?? undefined,
+    initialMessages,
+    preferredModel: selectedModel,
+    preferredProvider,
+  });
+
+  const handleSubmitWithKeyboardReset = useCallback(
+    async (
+      attachments?: {
+        type: 'image';
+        storageId: string;
+        fileName?: string;
+        mimeType: string;
+      }[],
+    ) => {
+      await handleMessageSubmit(attachments);
+      keyboardCoordinator.resetPadding();
+    },
+    [handleMessageSubmit, keyboardCoordinator],
+  );
+
+  // Stable storage ID tracking - only grows, never shrinks
+  const [knownStorageIds, setKnownStorageIds] = React.useState<
+    Id<'_storage'>[]
+  >([]);
+
+  React.useEffect(() => {
+    const set = new Set(knownStorageIds);
+    messages.forEach((m) =>
+      m.attachments?.forEach((a) => set.add(a.storageId)),
+    );
+    if (set.size !== knownStorageIds.length) {
+      setKnownStorageIds([...set]); // only grows
+    }
+  }, [messages, knownStorageIds]);
+
+  // Reset known storage IDs when conversation changes to avoid stale/foreign IDs
+  React.useEffect(() => {
+    setKnownStorageIds([]);
+  }, [conversationId]);
+
+  // Batch fetch URLs for all known storage IDs
+  const urlMap = useQuery(
+    api.shared.files.getUrlsForStorageIds,
+    knownStorageIds.length ? { storageIds: knownStorageIds } : 'skip',
+  );
+
+  // Never blank out an existing URL during transient renders
+  const messagesWithUrls = React.useMemo(() => {
+    if (!urlMap) return messages;
+    return messages.map((m) => ({
+      ...m,
+      attachments: m.attachments?.map((a) => ({
+        ...a,
+        url: urlMap[a.storageId] || a.url,
+      })),
+    }));
+  }, [messages, urlMap]);
+
+  const statusLabel = useMemo(() => {
+    if (!currentStatus) {
+      return null;
+    }
+
+    if (currentStatus.type === 'tool') {
+      return (
+        currentStatus.label ??
+        TOOL_STATUS_LABELS[currentStatus.toolName] ??
+        `Using ${currentStatus.toolName}`
+      );
+    }
+
+    return currentStatus.label ?? 'Thinking…';
+  }, [currentStatus]);
+
+  // Clear chat header button - only show when there are messages
+  const clearChatButton = useCallback(() => {
+    if (messages.length === 0) return null;
+
+    return (
+      <Pressable
+        onPress={handleClearChat}
+        className="px-2"
+        accessibilityLabel={translate('chatbot.clear_chat')}
+        accessibilityHint={translate('chatbot.clear_chat_hint')}
+        accessibilityRole="button"
+        testID="clear-chat-button"
+      >
+        <Trash2 color={theme.colors.foreground} />
+      </Pressable>
+    );
+  }, [messages.length, handleClearChat, theme.colors.foreground]);
+
+  useEffect(() => {
+    if (error) {
+      console.error('[CHATBOT_FRONTEND] Chat error:', error);
+    }
+  }, [error]);
+
+  if (isAuthLoading) {
+    return (
+      <View className="flex-1 items-center justify-center">
+        <Text className="text-muted-foreground">
+          {translate('chatbot.loading_session')}
+        </Text>
+      </View>
+    );
+  }
+
+  if (!userQuery) {
+    return (
+      <View className="flex-1 items-center justify-center">
+        <Text className="text-muted-foreground">
+          {translate('chatbot.please_sign_in')}
+        </Text>
+      </View>
+    );
+  }
+
+  // Show conversation loading only when conversation is not ready
+  const conversationLoading = conversationId === null && !isAuthLoading;
+
+  return (
+    <NetworkConnectivityWrapper>
+      <TouchableWithoutFeedback
+        onPress={Keyboard.dismiss}
+        accessible={false}
+        touchSoundDisabled
+      >
+        <View style={{ flex: 1 }}>
+          <Stack.Screen
+            options={{
+              title: translate('chatbot.title'),
+              headerRight: clearChatButton,
+            }}
+          />
+          <FocusAwareStatusBar />
+
+          <View style={{ flex: 1, paddingTop: insets.top + 12 }}>
+            <MessageList
+              messages={messagesWithUrls}
+              onReportMessage={handleReportMessage}
+              testID="chat-conversation-screen"
+            />
+          </View>
+
+          {statusLabel ? (
+            <View className="pb-6 pl-5 pr-4 pt-2">
+              <View className="flex-row gap-3">
+                <Spinner
+                  size="sm"
+                  variant="pulse"
+                  color={theme.colors.foreground}
+                />
+                <Text className="text-base font-medium text-neutral-400 dark:text-neutral-500">
+                  {statusLabel}
+                </Text>
+              </View>
+            </View>
+          ) : null}
+
+          <ChatInputBar
+            input={input}
+            onInputChange={handleTextInputChange}
+            onSubmit={handleSubmitWithKeyboardReset}
+            isLoading={conversationLoading || isChatLoading}
+            showSuggestedMessages={messages.length === 0}
+            selectedModel={selectedModel}
+            onModelChange={handleModelChange}
+          />
+
+          {/* Animated spacer for keyboard */}
+          <Animated.View
+            pointerEvents="none"
+            style={keyboardCoordinator.keyboardPadding}
+          />
+
+          {messageToReport && (
+            <ReportContentModal
+              message={messageToReport}
+              onSubmit={handleSubmitReport}
+              onCancel={handleCancelReport}
+            />
+          )}
+        </View>
+      </TouchableWithoutFeedback>
+    </NetworkConnectivityWrapper>
+  );
+}

package/2/apps/native/src/features/chatbot/components/chat-header-buttons.tsx

@@ -0,0 +1,60 @@
+// vibefast license: c1e9fcd2-muhammad
+import type React from 'react';
+import { View } from 'react-native';
+
+import { Pressable, Text } from '@/components/ui';
+import { Settings as SettingsIcon } from '@/components/ui/icons';
+
+type ChatHeaderButtonsProps = {
+  messagesCount: number;
+  onSettingsPress: () => void;
+  onClearPress: () => void;
+};
+
+/**
+ * Header buttons for chat screen including settings and clear chat
+ */
+export const ChatHeaderButtons: React.FC<ChatHeaderButtonsProps> = ({
+  messagesCount,
+  onSettingsPress,
+  onClearPress,
+}) => {
+  const renderSettingsButton = () => (
+    <Pressable
+      onPress={onSettingsPress}
+      className="mr-2 rounded-lg p-2"
+      accessibilityLabel="Chat settings"
+      accessibilityHint="Open chat settings to change AI provider and model"
+      accessibilityRole="button"
+      testID="chat-settings-button"
+      hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+    >
+      <SettingsIcon color="#666" width={20} height={20} />
+    </Pressable>
+  );
+
+  const renderClearChatButton = () => {
+    if (messagesCount === 0) return null;
+
+    return (
+      <Pressable
+        onPress={onClearPress}
+        className="mr-2 rounded-lg bg-destructive/10 px-3 py-2"
+        accessibilityLabel="Clear chat"
+        accessibilityHint="Clear all messages in this conversation"
+        accessibilityRole="button"
+        testID="clear-chat-button"
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+      >
+        <Text className="text-sm font-medium text-destructive">Clear</Text>
+      </Pressable>
+    );
+  };
+
+  return (
+    <View className="flex-row items-center">
+      {renderSettingsButton()}
+      {renderClearChatButton()}
+    </View>
+  );
+};