Files
Timmy-time-dashboard/mobile-app/components/image-viewer.tsx
Manus AI b4b508ff5a feat: add Timmy Chat mobile app (Expo/React Native)
- Single-screen chat interface with Timmy's sovereign AI personality
- Text messaging with real-time AI responses via server chat API
- Voice recording and playback with waveform visualization
- Image sharing (camera + photo library) with full-screen viewer
- File attachments via document picker
- Dark arcane theme matching the Timmy Time dashboard
- Custom app icon with glowing T circuit design
- Timmy system prompt ported from dashboard prompts.py
- Unit tests for chat utilities and message types
2026-02-26 21:55:41 -05:00

55 lines
1.3 KiB
TypeScript

import { Modal, View, Image, StyleSheet, StatusBar } from "react-native";
import Pressable from "@/components/ui/pressable-fix";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
interface ImageViewerProps {
uri: string | null;
onClose: () => void;
}
export function ImageViewer({ uri, onClose }: ImageViewerProps) {
if (!uri) return null;
return (
<Modal visible animationType="fade" transparent statusBarTranslucent>
<View style={styles.overlay}>
<StatusBar barStyle="light-content" />
<Image source={{ uri }} style={styles.image} resizeMode="contain" />
<Pressable
onPress={onClose}
style={({ pressed }: { pressed: boolean }) => [
styles.closeBtn,
pressed && { opacity: 0.6 },
]}
>
<MaterialIcons name="close" size={28} color="#fff" />
</Pressable>
</View>
</Modal>
);
}
const styles = StyleSheet.create({
overlay: {
flex: 1,
backgroundColor: "rgba(0,0,0,0.95)",
justifyContent: "center",
alignItems: "center",
},
image: {
width: "100%",
height: "80%",
},
closeBtn: {
position: "absolute",
top: 50,
right: 20,
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: "rgba(255,255,255,0.15)",
alignItems: "center",
justifyContent: "center",
},
});