Files
pi-mobile/apps/mobile/components/ReasoningEffortButton.tsx
T

73 lines
1.7 KiB
TypeScript

import { Ionicons } from "@expo/vector-icons";
import { Pressable, StyleSheet, Text } from "react-native";
import { colors, monoFont } from "@/lib/theme";
import type { ThinkingLevel } from "@/lib/types";
type ReasoningEffortButtonProps = {
level: ThinkingLevel;
disabled?: boolean;
onPress: () => void;
};
const labels: Record<ThinkingLevel, string> = {
off: "Off",
minimal: "Minimal",
low: "Low",
medium: "Medium",
high: "High",
xhigh: "X-high",
};
export function ReasoningEffortButton({
level,
disabled,
onPress,
}: ReasoningEffortButtonProps) {
return (
<Pressable
accessibilityLabel={`Reasoning effort ${labels[level]}. Tap to change.`}
style={({ pressed }) => [
styles.button,
pressed && styles.pressed,
disabled && styles.disabled,
level !== "off" && styles.active,
]}
onPress={onPress}
disabled={disabled}
>
<Ionicons
name="sparkles-outline"
size={14}
color={level === "off" ? colors.textMuted : colors.accent}
/>
<Text style={styles.label}>{labels[level]}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
button: {
minHeight: 40,
flexDirection: "row",
alignItems: "center",
gap: 6,
borderRadius: 8,
borderWidth: 1,
borderColor: colors.border,
backgroundColor: colors.surfaceDeep,
paddingHorizontal: 10,
},
active: {
borderColor: "rgba(147, 197, 253, 0.45)",
backgroundColor: "rgba(147, 197, 253, 0.1)",
},
label: {
color: colors.text,
fontFamily: monoFont,
fontSize: 12,
fontWeight: "700",
},
pressed: { backgroundColor: colors.surface },
disabled: { opacity: 0.45 },
});