Okay, let's start building the foundation for your AI Chat Application. This initial setup includes: 1. **Project Structure:** Basic folders for components, screens, navigation, API helpers, and context. 2. **Dependencies:** Essential packages like Expo, React Navigation, Supabase, React Native Paper, and dotenv. 3. **Environment Variables:** Setup for Supabase and DeepSeek keys. 4. **Supabase Client:** Initialization. 5. **Basic Authentication:** Context and hooks for managing auth state. 6. **Navigation:** Stacks for Authentication and the main App, switching based on login status. 7. **Basic Screens:** Placeholders for Sign In, Sign Up, Chat, and Settings. 8. **UI Library:** React Native Paper provider setup. **Note:** You will need to create a Supabase project and obtain your Project URL and Anon Key. You also need the DeepSeek API Key provided in the prompt. Create a `.env` file in the root directory to store these. # .env SUPABASE_URL=YOUR_SUPABASE_URL SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY DEEPSEEK_API_KEY=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 ``` Remember to add `.env` to your `.gitignore` file. { "name": "ai-chat-app", "version": "1.0.0", "main": "expo-router/entry", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@react-native-async-storage/async-storage": "1.23.1", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.9.26", "@supabase/supabase-js": "^2.43.4", "expo": "~51.0.8", "expo-constants": "~16.0.1", "expo-linking": "~6.3.1", "expo-router": "~3.5.14", "expo-secure-store": "~13.0.1", "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.74.1", "react-native-gesture-handler": "~2.16.1", "react-native-paper": "^5.12.3", "react-native-reanimated": "~3.10.1", "react-native-safe-area-context": "4.10.1", "react-native-screens": "3.31.1", "react-native-url-polyfill": "^2.0.0", "react-native-vector-icons": "^10.1.0", "react-native-web": "~0.19.10" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/react": "~18.2.45", "babel-plugin-module-resolver": "^5.0.2", "react-native-dotenv": "^3.4.11", "typescript": "^5.1.3" }, "private": true } module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: [ [ 'module-resolver', { root: ['./src'], alias: { '@api': './src/api', '@assets': './src/assets', '@components': './src/components', '@constants': './src/constants', '@contexts': './src/contexts', '@hooks': './src/hooks', '@lib': './src/lib', '@navigation': './src/navigation', '@screens': './src/screens', '@services': './src/services', '@store': './src/store', '@types': './src/types', }, }, ], 'react-native-reanimated/plugin', // Needs to be last ["module:react-native-dotenv", { "envName": "APP_ENV", "moduleName": "@env", "path": ".env", "blocklist": null, "allowlist": null, "safe": false, "allowUndefined": true, "verbose": false }] ], }; }; { "extends": "expo/tsconfig.base", "compilerOptions": { "strict": true, "baseUrl": "./", "paths": { "@api/*": ["src/api/*"], "@assets/*": ["src/assets/*"], "@components/*": ["src/components/*"], "@constants/*": ["src/constants/*"], "@contexts/*": ["src/contexts/*"], "@hooks/*": ["src/hooks/*"], "@lib/*": ["src/lib/*"], "@navigation/*": ["src/navigation/*"], "@screens/*": ["src/screens/*"], "@services/*": ["src/services/*"], "@store/*": ["src/store/*"], "@types/*": ["src/types/*"], "@env": ["node_modules/react-native-dotenv/index.d.ts"] // Add this for dotenv types } }, "include": [ "**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts" ] } // Learn more https://docs.expo.io/guides/customizing-metro const { getDefaultConfig } = require('expo/metro-config'); /** @type {import('expo/metro-config').MetroConfig} */ const config = getDefaultConfig(__dirname); // Fix for Supabase dependencies (can be removed if Supabase V2 SDK handles this better) config.resolver.sourceExts = [...config.resolver.sourceExts, 'mjs', 'cjs']; module.exports = config; { "expo": { "name": "ai-chat-app", "slug": "ai-chat-app", "version": "1.0.0", "orientation": "portrait", "icon": "./src/assets/images/icon.png", "scheme": "myapp", "userInterfaceStyle": "automatic", "splash": { "image": "./src/assets/images/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "ios": { "supportsTablet": true, "bundleIdentifier": "com.yourcompany.aichatapp" }, "android": { "adaptiveIcon": { "foregroundImage": "./src/assets/images/adaptive-icon.png", "backgroundColor": "#ffffff" }, "package": "com.yourcompany.aichatapp" }, "web": { "bundler": "metro", "output": "static", "favicon": "./src/assets/images/favicon.png" }, "plugins": [ "expo-router", "expo-secure-store" ], "experiments": { "typedRoutes": true }, "extra": { "router": { "origin": false }, "eas": { "projectId": "YOUR_EAS_PROJECT_ID" } } } } // This file provides type definitions for environment variables // loaded by react-native-dotenv. declare module '@env' { export const SUPABASE_URL: string; export const SUPABASE_ANON_KEY: string; export const DEEPSEEK_API_KEY: string; // Add other environment variables here if needed } import AsyncStorage from '@react-native-async-storage/async-storage'; import { createClient } from '@supabase/supabase-js'; import { SUPABASE_URL, SUPABASE_ANON_KEY } from '@env'; import 'react-native-url-polyfill/auto'; // Required for Supabase on React Native // Better put your these secret keys in .env file // const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL; // const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY; const supabaseUrl = SUPABASE_URL; const supabaseAnonKey = SUPABASE_ANON_KEY; if (!supabaseUrl || !supabaseAnonKey) { console.error( 'Supabase URL or Anon Key is missing. Make sure they are set in your .env file.' ); // You might want to throw an error here in a real app } export const supabase = createClient(supabaseUrl, supabaseAnonKey, { auth: { // Use AsyncStorage for persistence in React Native storage: AsyncStorage, autoRefreshToken: true, persistSession: true, detectSessionInUrl: false, // Important for React Native }, }); import React, { useState, useEffect, createContext, useContext, ReactNode } from 'react'; import { Session, User } from '@supabase/supabase-js'; import { supabase } from '@api/supabase'; import { View, ActivityIndicator } from 'react-native'; interface AuthContextType { session: Session | null; user: User | null; loading: boolean; signOut: () => Promise; } const AuthContext = createContext(undefined); interface AuthProviderProps { children: ReactNode; } export const AuthProvider: React.FC = ({ children }) => { const [session, setSession] = useState(null); const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchSession = async () => { try { setLoading(true); const { data: { session }, error } = await supabase.auth.getSession(); if (error) throw error; setSession(session); setUser(session?.user ?? null); } catch (error) { console.error('Error fetching session:', error); } finally { setLoading(false); } }; fetchSession(); const { data: authListener } = supabase.auth.onAuthStateChange( (_event, session) => { setSession(session); setUser(session?.user ?? null); // No need to set loading here as initial load is handled } ); // Cleanup listener on unmount return () => { authListener?.subscription.unsubscribe(); }; }, []); const signOut = async () => { setLoading(true); try { const { error } = await supabase.auth.signOut(); if (error) throw error; // State updates handled by onAuthStateChange listener } catch (error) { console.error('Error signing out:', error); } finally { setLoading(false); } }; // Show loading indicator during initial session check or sign out if (loading && !session) { // Or a splash screen return ( ); } return ( {children} ); }; export const useAuth = (): AuthContextType => { const context = useContext(AuthContext); if (context === undefined) { throw new Error('useAuth must be used within an AuthProvider'); } return context; }; import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { useAuth } from '@hooks/useAuth'; // Adjust if using context directly import AppNavigator from './AppNavigator'; import AuthNavigator from './AuthNavigator'; import { View, ActivityIndicator } from 'react-native'; const RootNavigator = () => { const { session, loading } = useAuth(); // Still loading auth state if (loading) { return ( ); } return ( {session && session.user ? : } ); }; export default RootNavigator; import React from 'react'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import SignInScreen from '@screens/Auth/SignInScreen'; import SignUpScreen from '@screens/Auth/SignUpScreen'; // import ForgotPasswordScreen from '@screens/Auth/ForgotPasswordScreen'; // Add later export type AuthStackParamList = { SignIn: undefined; SignUp: undefined; // ForgotPassword: { email?: string }; // Add later }; const Stack = createNativeStackNavigator(); const AuthNavigator = () => { return ( {/* */} ); }; export default AuthNavigator; import React from 'react'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import ChatScreen from '@screens/Main/ChatScreen'; import SettingsScreen from '@screens/Main/SettingsScreen'; export type AppStackParamList = { Chat: undefined; Settings: undefined; }; const Stack = createNativeStackNavigator(); const AppNavigator = () => { return ( ); }; export default AppNavigator; import React, { useState } from 'react'; import { View, StyleSheet, Alert } from 'react-native'; import { TextInput, Button, Text, ActivityIndicator, useTheme } from 'react-native-paper'; import { supabase } from '@api/supabase'; import { NativeStackScreenProps } from '@react-navigation/native-stack'; import { AuthStackParamList } from '@navigation/AuthNavigator'; // Adjust path as needed type Props = NativeStackScreenProps; const SignInScreen: React.FC = ({ navigation }) => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [loading, setLoading] = useState(false); const theme = useTheme(); const handleSignIn = async () => { if (!email || !password) { Alert.alert('Error', 'Please enter both email and password.'); return; } setLoading(true); try { const { error } = await supabase.auth.signInWithPassword({ email: email, password: password, }); if (error) { throw error; } // Navigation to AppNavigator is handled by the RootNavigator's auth state change // console.log('Sign in successful'); } catch (error: any) { console.error('Sign in error:', error); Alert.alert('Sign In Failed', error.message || 'An unexpected error occurred.'); } finally { setLoading(false); } }; return ( Welcome Back! {loading ? ( ) : ( )} {/* */} ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 20, }, title: { textAlign: 'center', marginBottom: 24, }, input: { marginBottom: 16, }, button: { marginTop: 8, paddingVertical: 8, }, switchButton: { marginTop: 16, }, }); export default SignInScreen; import React, { useState } from 'react'; import { View, StyleSheet, Alert } from 'react-native'; import { TextInput, Button, Text, ActivityIndicator, useTheme } from 'react-native-paper'; import { supabase } from '@api/supabase'; import { NativeStackScreenProps } from '@react-navigation/native-stack'; import { AuthStackParamList } from '@navigation/AuthNavigator'; // Adjust path as needed type Props = NativeStackScreenProps; const SignUpScreen: React.FC = ({ navigation }) => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [loading, setLoading] = useState(false); const theme = useTheme(); const handleSignUp = async () => { if (!email || !password || !confirmPassword) { Alert.alert('Error', 'Please fill in all fields.'); return; } if (password !== confirmPassword) { Alert.alert('Error', 'Passwords do not match.'); return; } setLoading(true); try { const { data, error } = await supabase.auth.signUp({ email: email, password: password, // options: { // Optional: Add user metadata here if needed // data: { // full_name: 'Test User', // Example // } // } }); if (error) { throw error; } // Check if email confirmation is required if (data.user && data.user.identities && data.user.identities.length === 0) { Alert.alert('Sign Up Successful', 'Please check your email to confirm your account.'); // Stay on SignUp or navigate to SignIn, user needs to confirm first navigation.navigate('SignIn'); // Go back to sign in after showing message } else if (data.session) { // Auto logged in (if email confirmation is disabled or user already confirmed) // Navigation to AppNavigator is handled by the RootNavigator's auth state change // console.log('Sign up and auto-login successful'); } else { // Should not happen often with default settings, but handle just in case Alert.alert('Sign Up Pending', 'Please check your email to confirm your account.'); navigation.navigate('SignIn'); } } catch (error: any) { console.error('Sign up error:', error); Alert.alert('Sign Up Failed', error.message || 'An unexpected error occurred.'); } finally { setLoading(false); } }; return ( Create Account {loading ? ( ) : ( )} ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 20, }, title: { textAlign: 'center', marginBottom: 24, }, input: { marginBottom: 16, }, button: { marginTop: 8, paddingVertical: 8, }, switchButton: { marginTop: 16, }, }); export default SignUpScreen; import React, { useLayoutEffect } from 'react'; import { View, StyleSheet } from 'react-native'; import { Text, IconButton, useTheme } from 'react-native-paper'; import { NativeStackScreenProps } from '@react-navigation/native-stack'; import { AppStackParamList } from '@navigation/AppNavigator'; // Adjust path type Props = NativeStackScreenProps; const ChatScreen: React.FC = ({ navigation }) => { const theme = useTheme(); // Add settings button to header useLayoutEffect(() => { navigation.setOptions({ headerRight: () => ( navigation.navigate('Settings')} /> ), }); }, [navigation, theme]); return ( Chat Screen Placeholder Implement Gifted Chat or custom chat UI here. Connect to DeepSeek API. Fetch/Save messages via Supabase. Implement Realtime updates. ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16, }, }); export default ChatScreen; import React from 'react'; import { View, StyleSheet } from 'react-native'; import { Text, Button, useTheme } from 'react-native-paper'; import { useAuth } from '@hooks/useAuth'; // Adjust if using context directly const SettingsScreen = () => { const { signOut, loading } = useAuth(); const theme = useTheme(); return ( Settings Theme Toggle (Light/Dark) - Coming Soon Notification Preferences - Coming Soon Profile Settings - Coming Soon ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, placeholder: { marginVertical: 10, fontStyle: 'italic', color: 'grey', // Adjust color based on theme }, button: { marginTop: 30, }, }); export default SettingsScreen; import 'react-native-gesture-handler'; // Must be at the top import React from 'react'; import { StatusBar } from 'expo-status-bar'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import { PaperProvider } from 'react-native-paper'; // Import PaperProvider import { AuthProvider } from '@contexts/AuthContext'; import RootNavigator from '@navigation/index'; // Optional: Define custom themes for React Native Paper // import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper'; // const lightTheme = { ...MD3LightTheme, colors: { ...MD3LightTheme.colors, primary: 'tomato' } }; // const darkTheme = { ...MD3DarkTheme, colors: { ...MD3DarkTheme.colors, primary: 'blue' } }; export default function App() { // const colorScheme = useColorScheme(); // Or implement theme switching logic // const theme = colorScheme === 'dark' ? darkTheme : lightTheme; return ( {/* Wrap with PaperProvider */} ); } // This file re-exports the useAuth hook for cleaner imports export { useAuth } from '@contexts/AuthContext'; # Node node_modules/ npm-debug.log yarn-error.log yarn-debug.log # Expo .expo/ dist/ *.jks *.p8 *.p12 *.key *.mobileprovision *.orig.* # Env variables .env # Misc .DS_Store # Add other files/folders to ignore (e.g., build artifacts, IDE files) placeholder # Add your app icon file here (e.g., 1024x1024 png) placeholder # Add your splash screen image here placeholder # Add your Android adaptive icon foreground here placeholder # Add your web favicon here **Next Steps:** 1. **Install Dependencies:** Run `npm install` or `yarn install`. 2. **Create `.env` file:** Add your Supabase and DeepSeek keys to a `.env` file in the root. 3. **Replace Placeholders:** Add actual image files in `src/assets/images/` for the icon, splash screen, etc. 4. **Configure Supabase:** * Go to your Supabase project dashboard. * Navigate to Authentication -> Providers and ensure Email is enabled. You might want to disable "Confirm email" initially for easier testing, but enable it for production. * (Optional) Set up Google Auth provider following Supabase documentation. * Navigate to SQL Editor and create necessary tables (e.g., `profiles`, `chats`, `messages`). Define policies (RLS) for security. 5. **Run the App:** Use `npx expo start` and test the Sign Up/Sign In flow on Expo Go or simulators. This provides a solid starting point. We can now proceed to build the Chat screen UI, integrate the DeepSeek API, and add other features incrementally.