refactor(chat): split ChatScreen and reuse regenerateResponse after editing a message
The edit path duplicated the streaming flow with inline require() calls; it now reuses regenerateResponse, which also fixes: - edited conversations were never saved to History - the answer generated after an edit could not be stopped (no abort handle kept) Stopping a stream now saves the partial conversation, like finishing or failing does. Adds characterization tests for ChatScreen and useLMStudio.
This commit is contained in:
1 parent
808cb1610b
commit
cb6eda0562
8 files changed
+678
-176
No files matched your search
@@ -0,0 +1,99 @@
|
||||
import { useThemeColor } from '@/hooks/useThemeColor';
|
||||
import { MessageSquare, Sparkles } from 'lucide-react-native';
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
|
||||
export const PROMPT_SUGGESTIONS = [
|
||||
'Explain recursion in simple terms',
|
||||
'Write a short poem about coding',
|
||||
'What are the best practices for React Native?',
|
||||
'Help me debug a JavaScript error',
|
||||
];
|
||||
|
||||
interface EmptyStateProps {
|
||||
onSelectPrompt: (prompt: string) => void;
|
||||
}
|
||||
|
||||
export function EmptyState({ onSelectPrompt }: EmptyStateProps) {
|
||||
const colors = useThemeColor();
|
||||
|
||||
return (
|
||||
<View style={[styles.emptyState, { backgroundColor: colors.backgroundColor }]}>
|
||||
<View style={[styles.emptyIconWrap, { backgroundColor: colors.cardBackground, shadowColor: colors.shadow }]}>
|
||||
<MessageSquare size={40} color={colors.textMuted} />
|
||||
</View>
|
||||
<Text style={[styles.emptyTitle, { color: colors.text }]}>Start a conversation</Text>
|
||||
<Text style={[styles.emptySubtitle, { color: colors.textMuted }]}>
|
||||
Send a message to begin chatting with your local AI model.
|
||||
</Text>
|
||||
|
||||
<View style={styles.suggestionsWrap}>
|
||||
{PROMPT_SUGGESTIONS.map((prompt) => (
|
||||
<TouchableOpacity
|
||||
key={prompt}
|
||||
style={[styles.suggestionChip, { backgroundColor: colors.cardBackground, borderColor: colors.border }]}
|
||||
onPress={() => onSelectPrompt(prompt)}
|
||||
activeOpacity={0.7}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={prompt}
|
||||
>
|
||||
<Sparkles size={14} color={colors.textMuted} />
|
||||
<Text style={[styles.suggestionText, { color: colors.text }]} numberOfLines={1}>{prompt}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
emptyState: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 32,
|
||||
paddingBottom: 80,
|
||||
},
|
||||
emptyIconWrap: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 20,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 10,
|
||||
elevation: 2,
|
||||
},
|
||||
emptyTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: '700',
|
||||
marginBottom: 8,
|
||||
},
|
||||
emptySubtitle: {
|
||||
fontSize: 15,
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
marginBottom: 32,
|
||||
},
|
||||
suggestionsWrap: {
|
||||
width: '100%',
|
||||
maxWidth: 400,
|
||||
gap: 12,
|
||||
},
|
||||
suggestionChip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
borderWidth: 1,
|
||||
borderRadius: 16,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
},
|
||||
suggestionText: {
|
||||
fontSize: 15,
|
||||
flex: 1,
|
||||
fontWeight: '500',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
import { MessageBubble } from '@/components/chat/MessageBubble';
|
||||
import { TypingIndicator } from '@/components/chat/TypingIndicator';
|
||||
import { ChatMessage } from '@/store/useAppStore';
|
||||
import { findLastAssistantId, shouldShowTypingIndicator } from '@/utils/chatSelectors';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { FlatList, StyleSheet } from 'react-native';
|
||||
import Animated, { FadeInDown } from 'react-native-reanimated';
|
||||
|
||||
interface MessageListProps {
|
||||
messages: ChatMessage[];
|
||||
isStreaming: boolean;
|
||||
onEdit: (id: string) => void;
|
||||
onDelete: (id: string) => void;
|
||||
onRegenerate: () => void;
|
||||
}
|
||||
|
||||
export function MessageList({ messages, isStreaming, onEdit, onDelete, onRegenerate }: MessageListProps) {
|
||||
const flatListRef = useRef<FlatList>(null);
|
||||
const lastAssistantId = findLastAssistantId(messages);
|
||||
const lastContentLength = messages[messages.length - 1]?.content?.length;
|
||||
|
||||
useEffect(() => {
|
||||
if (messages.length > 0 && flatListRef.current) {
|
||||
setTimeout(() => {
|
||||
flatListRef.current?.scrollToEnd({ animated: !isStreaming });
|
||||
}, 100);
|
||||
}
|
||||
}, [messages.length, lastContentLength, isStreaming]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FlatList
|
||||
ref={flatListRef}
|
||||
data={messages}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item, index }) => (
|
||||
<Animated.View entering={FadeInDown.duration(300).delay(index > messages.length - 4 ? 100 : 0)}>
|
||||
<MessageBubble
|
||||
message={item}
|
||||
onEdit={() => onEdit(item.id)}
|
||||
onRegenerate={onRegenerate}
|
||||
onDelete={() => onDelete(item.id)}
|
||||
isStreaming={isStreaming}
|
||||
isLastAssistant={item.id === lastAssistantId}
|
||||
/>
|
||||
</Animated.View>
|
||||
)}
|
||||
contentContainerStyle={styles.listContent}
|
||||
/>
|
||||
{shouldShowTypingIndicator(messages, isStreaming) && <TypingIndicator />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
listContent: {
|
||||
paddingTop: 16,
|
||||
paddingBottom: 24,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,31 @@
|
||||
import { useThemeColor } from '@/hooks/useThemeColor';
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
export function OfflineBanner() {
|
||||
const colors = useThemeColor();
|
||||
|
||||
return (
|
||||
<View
|
||||
accessibilityRole="alert"
|
||||
style={[styles.banner, { backgroundColor: colors.bannerBg, borderBottomColor: colors.bannerBg }]}
|
||||
>
|
||||
<Text style={[styles.bannerText, { color: colors.bannerText }]}>
|
||||
⚠️ Server offline. Check Settings → Server Connection.
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
banner: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
bannerText: {
|
||||
fontSize: 13,
|
||||
textAlign: 'center',
|
||||
fontWeight: '500',
|
||||
},
|
||||
});
|
||||
Reference in new issue
Block a user