84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import { ModelSelector } from '@/components/chat/ModelSelector';
|
|
import { useAppStore } from '@/store/useAppStore';
|
|
import { Stack, useRouter } from 'expo-router';
|
|
import { Plus, Settings } from 'lucide-react-native';
|
|
import { Platform, StyleSheet, TouchableOpacity, useWindowDimensions, View } from 'react-native';
|
|
|
|
export default function ChatLayout() {
|
|
const { width } = useWindowDimensions();
|
|
const router = useRouter();
|
|
const clearChat = useAppStore(state => state.clearChat);
|
|
|
|
const isLargeScreen = width > 768;
|
|
const containerStyle = isLargeScreen ? styles.desktopContainer : styles.mobileContainer;
|
|
const chatMaxWidth = isLargeScreen ? 800 : '100%';
|
|
|
|
return (
|
|
<View style={containerStyle}>
|
|
<View style={[styles.chatWrapper, { maxWidth: chatMaxWidth }]}>
|
|
<Stack>
|
|
<Stack.Screen
|
|
name="index"
|
|
options={{
|
|
headerTitle: () => <ModelSelector />,
|
|
headerShadowVisible: false,
|
|
headerLeft: () => (
|
|
<TouchableOpacity
|
|
onPress={clearChat}
|
|
style={styles.headerBtn}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Plus size={22} color="#111827" />
|
|
</TouchableOpacity>
|
|
),
|
|
headerRight: () => (
|
|
<TouchableOpacity
|
|
onPress={() => router.push('/settings')}
|
|
style={styles.headerBtn}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Settings size={22} color="#111827" />
|
|
</TouchableOpacity>
|
|
),
|
|
}}
|
|
/>
|
|
</Stack>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
desktopContainer: {
|
|
flex: 1,
|
|
backgroundColor: '#F3F4F6',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
mobileContainer: {
|
|
flex: 1,
|
|
backgroundColor: '#FFFFFF',
|
|
},
|
|
chatWrapper: {
|
|
flex: 1,
|
|
width: '100%',
|
|
backgroundColor: '#FFFFFF',
|
|
...Platform.select({
|
|
web: {
|
|
shadowColor: '#000',
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 12,
|
|
shadowOffset: { width: 0, height: 4 },
|
|
}
|
|
})
|
|
},
|
|
headerBtn: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 10,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginHorizontal: 4,
|
|
},
|
|
});
|