feat: Add erase button to clear chat messages

Add trash icon button in chat header that clears all messages
after confirmation. Resets chat to initial welcome message.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sergei 2026-01-24 20:44:49 -08:00
parent 09fc6ce8ad
commit 5724e7ab76

View File

@ -732,7 +732,7 @@ export default function ChatScreen() {
<View style={[styles.messageBubble, isUser ? styles.userBubble : styles.assistantBubble, isVoice && styles.voiceBubble]}>
{isVoice && (
<View style={styles.voiceIndicator}>
<Ionicons name="mic" size={12} color={isUser ? 'rgba(255,255,255,0.7)' : AppColors.textMuted} />
<Text style={styles.voiceIndicatorEmoji}>🎤</Text>
</View>
)}
<Text style={[styles.messageText, isUser ? styles.userMessageText : styles.assistantMessageText]}>
@ -764,7 +764,34 @@ export default function ChatScreen() {
</Text>
</View>
</View>
<View style={styles.headerButtons} />
<TouchableOpacity
style={styles.eraseButton}
onPress={() => {
Alert.alert(
'Clear Chat',
'Are you sure you want to clear all messages?',
[
{ text: 'Cancel', style: 'cancel' },
{
text: 'Clear',
style: 'destructive',
onPress: () => {
setMessages([
{
id: '1',
role: 'assistant',
content: 'Hello! I\'m Julia, your AI wellness assistant. You can type a message or tap the phone button to start a voice call.',
timestamp: new Date(),
},
]);
},
},
]
);
}}
>
<Ionicons name="trash-outline" size={22} color={AppColors.textSecondary} />
</TouchableOpacity>
</View>
{/* Beneficiary Picker Modal */}
@ -972,12 +999,7 @@ const styles = StyleSheet.create({
fontSize: FontSizes.sm,
color: AppColors.success,
},
headerButtons: {
flexDirection: 'row',
alignItems: 'center',
gap: Spacing.sm,
},
headerButton: {
eraseButton: {
padding: Spacing.xs,
},
chatContainer: {
@ -1175,6 +1197,9 @@ const styles = StyleSheet.create({
top: 6,
right: 6,
},
voiceIndicatorEmoji: {
fontSize: 10,
},
// System message styles
systemMessageContainer: {
flexDirection: 'row',