vibefast-cli 0.1.1

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

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

@@ -0,0 +1,59 @@
+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>
+  );
+};