blame | history | patch | commit | commitdiff
Matthias Nott
2026-03-07 af1543135d42adc2e97dc5243aeef7418cd3b00d 
 components/chat/InputBar.tsx
....@@ -8,22 +8,30 @@
88 } from "react-native";
99 import * as Haptics from "expo-haptics";
1010 import { VoiceButton } from "./VoiceButton";
11
+import { useTheme } from "../../contexts/ThemeContext";
1112 
1213 interface InputBarProps {
1314   onSendText: (text: string) => void;
15
+  onVoiceRecorded: (uri: string) => void;
1416   onReplay: () => void;
1517   isTextMode: boolean;
1618   onToggleMode: () => void;
19
+  audioPlaying?: boolean;
1720 }
1821 
1922 export function InputBar({
2023   onSendText,
24
+  onVoiceRecorded,
2125   onReplay,
2226   isTextMode,
2327   onToggleMode,
28
+  audioPlaying = false,
2429 }: InputBarProps) {
2530   const [text, setText] = useState("");
2631   const inputRef = useRef<TextInput>(null);
32
+  const { colors } = useTheme();
33
+
34
+  const canSend = !!text.trim();
2735 
2836   const handleSend = useCallback(() => {
2937     const trimmed = text.trim();
....@@ -43,11 +51,11 @@
4351           paddingVertical: 10,
4452           paddingBottom: 6,
4553           borderTopWidth: 1,
46
-          borderTopColor: "#2E2E45",
54
+          borderTopColor: colors.border,
4755           alignItems: "center",
4856         }}
4957       >
50
-        {/* Replay last message */}
58
+        {/* Replay / Stop */}
5159         <Pressable
5260           onPress={() => {
5361             Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
....@@ -61,19 +69,21 @@
6169               borderRadius: 34,
6270               alignItems: "center",
6371               justifyContent: "center",
64
-              backgroundColor: "#1A2E1A",
72
+              backgroundColor: colors.bgTertiary,
6573               borderWidth: 1.5,
66
-              borderColor: "#3A6A3A",
74
+              borderColor: colors.border,
6775             }}
6876           >
69
-            <Text style={{ fontSize: 24 }}>▶</Text>
70
-            <Text style={{ color: "#8ABF8A", fontSize: 10, marginTop: 1, fontWeight: "600" }}>Replay</Text>
77
+            <Text style={{ fontSize: 24 }}>{audioPlaying ? "\u23F8" : "\u25B6"}</Text>
78
+            <Text style={{ color: colors.textSecondary, fontSize: 10, marginTop: 1, fontWeight: "600" }}>
79
+              {audioPlaying ? "Stop" : "Replay"}
80
+            </Text>
7181           </View>
7282         </Pressable>
7383 
74
-        {/* Talk button — center, biggest */}
84
+        {/* Talk button */}
7585         <View style={{ flex: 1, alignItems: "center" }}>
76
-          <VoiceButton onTranscript={onSendText} />
86
+          <VoiceButton onVoiceRecorded={onVoiceRecorded} />
7787         </View>
7888 
7989         {/* Text mode toggle */}
....@@ -91,12 +101,12 @@
91101               borderRadius: 34,
92102               alignItems: "center",
93103               justifyContent: "center",
94
-              backgroundColor: "#1A1A3E",
104
+              backgroundColor: colors.bgTertiary,
95105               borderWidth: 1.5,
96
-              borderColor: "#3A3A7A",
106
+              borderColor: colors.border,
97107             }}
98108           >
99
-            <Text style={{ fontSize: 22, color: "#9898D0", fontWeight: "700" }}>Aa</Text>
109
+            <Text style={{ fontSize: 22, color: colors.textSecondary, fontWeight: "700" }}>Aa</Text>
100110           </View>
101111         </Pressable>
102112       </View>
....@@ -112,7 +122,7 @@
112122         paddingHorizontal: 12,
113123         paddingVertical: 8,
114124         borderTopWidth: 1,
115
-        borderTopColor: "#2E2E45",
125
+        borderTopColor: colors.border,
116126         alignItems: "flex-end",
117127       }}
118128     >
....@@ -129,11 +139,11 @@
129139           borderRadius: 20,
130140           alignItems: "center",
131141           justifyContent: "center",
132
-          backgroundColor: "#1E1E2E",
142
+          backgroundColor: colors.bgTertiary,
133143           marginBottom: 2,
134144         }}
135145       >
136
-        <Text style={{ fontSize: 20 }}>🎤</Text>
146
+        <Text style={{ fontSize: 20 }}>{"\uD83C\uDFA4"}</Text>
137147       </Pressable>
138148 
139149       {/* Text input */}
....@@ -142,7 +152,7 @@
142152         value={text}
143153         onChangeText={setText}
144154         placeholder="Message PAI..."
145
-        placeholderTextColor="#5A5A78"
155
+        placeholderTextColor={colors.textMuted}
146156         multiline
147157         maxLength={2000}
148158         onSubmitEditing={handleSend}
....@@ -150,12 +160,12 @@
150160         blurOnSubmit
151161         style={{
152162           flex: 1,
153
-          backgroundColor: "#1E1E2E",
163
+          backgroundColor: colors.bgTertiary,
154164           borderRadius: 20,
155165           paddingHorizontal: 16,
156166           paddingVertical: 10,
157167           maxHeight: 120,
158
-          color: "#E8E8F0",
168
+          color: colors.text,
159169           fontSize: 16,
160170         }}
161171       />
....@@ -163,7 +173,7 @@
163173       {/* Send button */}
164174       <Pressable
165175         onPress={handleSend}
166
-        disabled={!text.trim()}
176
+        disabled={!canSend}
167177         style={{
168178           width: 40,
169179           height: 40,
....@@ -171,17 +181,17 @@
171181           alignItems: "center",
172182           justifyContent: "center",
173183           marginBottom: 2,
174
-          backgroundColor: text.trim() ? "#4A9EFF" : "#1E1E2E",
184
+          backgroundColor: canSend ? colors.accent : colors.bgTertiary,
175185         }}
176186       >
177187         <Text
178188           style={{
179189             fontSize: 18,
180190             fontWeight: "bold",
181
-            color: text.trim() ? "#FFFFFF" : "#5A5A78",
191
+            color: canSend ? "#FFFFFF" : colors.textMuted,
182192           }}
183193         >
184
-          ↑
194
+          {"\u2191"}
185195         </Text>
186196       </Pressable>
187197     </View>