vibefast-cli 1.1.5 → 1.2.1

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

@@ -0,0 +1,257 @@
+import { Stack } from 'expo-router';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Keyboard, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  FocusAwareStatusBar,
+  NetworkConnectivityWrapper,
+  Pressable,
+  Spinner,
+  Text,
+} from '@/components/ui';
+import { Trash2 } from '@/components/ui/icons';
+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 { useSupabaseAuth } from '@/providers';
+
+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 { user, isLoading: isAuthLoading, isAuthenticated } = useSupabaseAuth();
+  const theme = useThemeConfig();
+  const insets = useSafeAreaInsets();
+  const keyboardCoordinator = useKeyboardCoordinator();
+  const [selectedModel, setSelectedModel] = useState<ModelType>(
+    DEFAULT_MODELS.openai,
+  );
+
+  const { conversationId, initialMessages } = useConversation(user?.id);
+
+  // Agent session is not used with Supabase streaming - we use SSE directly
+  const agentSession = null;
+
+  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,
+    initialMessages,
+    preferredModel: selectedModel,
+    preferredProvider,
+  });
+
+  const handleSubmitWithKeyboardReset = useCallback(
+    async (
+      attachments?: {
+        type: 'image';
+        storageId: string;
+        fileName?: string;
+        mimeType: string;
+      }[],
+    ) => {
+      await handleMessageSubmit(attachments);
+      keyboardCoordinator.resetPadding();
+    },
+    [handleMessageSubmit, keyboardCoordinator],
+  );
+
+  // With Supabase, attachment URLs are already included in the message data
+  // No need for separate URL fetching like with legacy storage IDs
+  const messagesWithUrls = messages;
+
+  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 (!isAuthenticated || !user) {
+    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>
+      <View style={{ flex: 1 }}>
+        <Stack.Screen
+          options={{
+            title: translate('chatbot.title'),
+            headerRight: clearChatButton,
+          }}
+        />
+        <FocusAwareStatusBar />
+
+        <View
+          style={{ flex: 1, paddingTop: insets.top }}
+          onTouchStart={() => Keyboard.dismiss()}
+        >
+          <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>
+    </NetworkConnectivityWrapper>
+  );
+}

package/recipes/chatbot-supabase/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>
+  );
+};