cameron.stream
A React Native app for the ultimate thinking partner.
refactor: remove status indicator ("co is thinking/saying")
Removed the LiveStatusIndicator component and all its scaffolding:
- Deleted LiveStatusIndicator.tsx component (71 lines)
- Removed import and usage from ChatScreen.tsx
- Cleaned up unused destructured values (currentStream, completedStreamBlocks)
The status indicator added unnecessary UI complexity without providing
significant value to the user experience.
+1
-87
-70
src/components/LiveStatusIndicator.tsx
-70
src/components/LiveStatusIndicator.tsx
···
1
-
import React, { useEffect, useRef } from 'react';
2
-
import { View, Text, Animated, StyleSheet } from 'react-native';
3
-
import { darkTheme, lightTheme } from '../theme';
4
-
5
-
interface LiveStatusIndicatorProps {
6
-
status: string; // e.g., "thinking", "searching the web", "saying", "thought"
7
-
isDark?: boolean;
8
-
}
9
-
10
-
const LiveStatusIndicator: React.FC<LiveStatusIndicatorProps> = ({ status, isDark = true }) => {
11
-
const theme = isDark ? darkTheme : lightTheme;
12
-
const rainbowAnimValue = useRef(new Animated.Value(0)).current;
13
-
14
-
// Animate rainbow gradient
15
-
useEffect(() => {
16
-
rainbowAnimValue.setValue(0);
17
-
const animation = Animated.loop(
18
-
Animated.timing(rainbowAnimValue, {
19
-
toValue: 1,
20
-
duration: 3000,
21
-
useNativeDriver: false,
22
-
})
23
-
);
24
-
animation.start();
25
-
return () => animation.stop();
26
-
}, []);
27
-
28
-
// Special cases for past tense verbs (don't use "is")
29
-
const isPastTense = status === 'thought';
30
-
const displayText = isPastTense ? status : `is ${status}`;
31
-
32
-
return (
33
-
<View style={styles.container}>
34
-
<Text style={[styles.text, { color: theme.colors.text.primary }]}>(</Text>
35
-
<Animated.Text
36
-
style={[
37
-
styles.coText,
38
-
{
39
-
color: rainbowAnimValue.interpolate({
40
-
inputRange: [0, 0.2, 0.4, 0.6, 0.8, 1],
41
-
outputRange: ['#FF6B6B', '#FFD93D', '#6BCF7F', '#4D96FF', '#9D4EDD', '#FF6B6B']
42
-
})
43
-
}
44
-
]}
45
-
>
46
-
co
47
-
</Animated.Text>
48
-
<Text style={[styles.text, { color: theme.colors.text.primary }]}> {displayText})</Text>
49
-
</View>
50
-
);
51
-
};
52
-
53
-
const styles = StyleSheet.create({
54
-
container: {
55
-
flexDirection: 'row',
56
-
alignItems: 'baseline',
57
-
paddingVertical: 4,
58
-
marginBottom: 12,
59
-
},
60
-
text: {
61
-
fontSize: 24,
62
-
fontFamily: 'Lexend_400Regular',
63
-
},
64
-
coText: {
65
-
fontSize: 24,
66
-
fontFamily: 'Lexend_700Bold',
67
-
},
68
-
});
69
-
70
-
export default React.memo(LiveStatusIndicator);
+1
-17
src/screens/ChatScreen.tsx
+1
-17
src/screens/ChatScreen.tsx
···
16
16
17
17
import MessageBubbleEnhanced from '../components/MessageBubble.enhanced';
18
18
import MessageInputEnhanced from '../components/MessageInputEnhanced';
19
-
import LiveStatusIndicator from '../components/LiveStatusIndicator';
20
19
21
20
interface ChatScreenProps {
22
21
theme: any;
···
30
29
31
30
// Hooks
32
31
const { messages, isLoadingMessages, loadMoreMessages, hasMoreBefore, isLoadingMore } = useMessages();
33
-
const { isStreaming, isSendingMessage, currentStream, completedStreamBlocks, sendMessage } = useMessageStream();
32
+
const { isStreaming, isSendingMessage, sendMessage } = useMessageStream();
34
33
const {
35
34
expandedReasoning,
36
35
expandedCompaction,
···
143
142
autoscrollToTopThreshold: 10,
144
143
}}
145
144
/>
146
-
147
-
{/* Streaming Indicator */}
148
-
{isStreaming && (
149
-
<View style={{ paddingHorizontal: 18, paddingVertical: 8 }}>
150
-
{currentStream.reasoning && (
151
-
<LiveStatusIndicator status="thought" isDark={colorScheme === 'dark'} />
152
-
)}
153
-
{currentStream.assistantMessage && !currentStream.reasoning && (
154
-
<LiveStatusIndicator status="saying" isDark={colorScheme === 'dark'} />
155
-
)}
156
-
{!currentStream.reasoning && !currentStream.assistantMessage && (
157
-
<LiveStatusIndicator status="thinking" isDark={colorScheme === 'dark'} />
158
-
)}
159
-
</View>
160
-
)}
161
145
162
146
{/* Spacer for animation */}
163
147
{lastMessageNeedsSpace && <Animated.View style={{ height: spacerHeightAnim }} />}