cameron.stream
A React Native app for the ultimate thinking partner.
1/**
2 * InlineReasoningButton Component
3 *
4 * Small chevron button that toggles reasoning visibility.
5 * Designed to appear inline next to message labels (e.g., "(co said) [>]").
6 *
7 * Replaces the standalone ReasoningToggle component with a more compact,
8 * integrated design.
9 */
10
11import React from 'react';
12import { TouchableOpacity, StyleSheet } from 'react-native';
13import { Ionicons } from '@expo/vector-icons';
14
15interface InlineReasoningButtonProps {
16 isExpanded: boolean;
17 onToggle: () => void;
18 isDark: boolean;
19}
20
21export const InlineReasoningButton: React.FC<InlineReasoningButtonProps> = ({
22 isExpanded,
23 onToggle,
24 isDark,
25}) => {
26 return (
27 <TouchableOpacity
28 onPress={onToggle}
29 style={styles.button}
30 activeOpacity={0.6}
31 hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
32 >
33 <Ionicons
34 name={isExpanded ? 'chevron-down' : 'chevron-forward'}
35 size={18}
36 color={isDark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)'}
37 />
38 </TouchableOpacity>
39 );
40};
41
42const styles = StyleSheet.create({
43 button: {
44 marginLeft: 6,
45 padding: 2,
46 },
47});
48
49export default InlineReasoningButton;