feat: initial PAILot app — voice-first AI communicator

Matthias Nott

2026-03-02 aca79f31767ae6f03f47a284f3d0e80850c5fb02

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import React, { useCallback, useRef, useState } from "react";
import {
  Keyboard,
  Pressable,
  Text,
  TextInput,
  View,
} from "react-native";
import { VoiceButton } from "./VoiceButton";

interface InputBarProps {
  onSendText: (text: string) => void;
  onSendVoice: (audioUri: string, durationMs: number) => void;
}

export function InputBar({ onSendText, onSendVoice }: InputBarProps) {
  const [text, setText] = useState("");
  const [isVoiceMode, setIsVoiceMode] = useState(false);
  const inputRef = useRef<TextInput>(null);

  const handleSend = useCallback(() => {
    const trimmed = text.trim();
    if (!trimmed) return;
    onSendText(trimmed);
    setText("");
  }, [text, onSendText]);

  const toggleMode = useCallback(() => {
    setIsVoiceMode((prev) => {
      if (prev) {
        // Switching to text mode — focus input after mode switch
        setTimeout(() => inputRef.current?.focus(), 100);
      } else {
        Keyboard.dismiss();
      }
      return !prev;
    });
  }, []);

  if (isVoiceMode) {
    return (
      <View className="border-t border-pai-border bg-pai-bg">
        {/* Mode toggle */}
        <Pressable
          onPress={toggleMode}
          className="absolute top-3 right-4 z-10 w-10 h-10 items-center justify-center"
        >
          <Text className="text-2xl">⌨️</Text>
        </Pressable>

        <VoiceButton onVoiceMessage={onSendVoice} />
      </View>
    );
  }

  return (
    <View className="border-t border-pai-border bg-pai-bg px-3 py-2 flex-row items-end gap-2">
      {/* Voice mode toggle */}
      <Pressable
        onPress={toggleMode}
        className="w-10 h-10 items-center justify-center rounded-full bg-pai-bg-tertiary mb-0.5"
      >
        <Text className="text-xl">🎤</Text>
      </Pressable>

      {/* Text input */}
      <TextInput
        ref={inputRef}
        value={text}
        onChangeText={setText}
        placeholder="Message PAI..."
        placeholderTextColor="#5A5A78"
        multiline
        maxLength={2000}
        onSubmitEditing={handleSend}
        returnKeyType="send"
        blurOnSubmit
        className="flex-1 bg-pai-bg-tertiary rounded-2xl px-4 py-2.5 text-pai-text text-base"
        style={{ maxHeight: 120 }}
      />

      {/* Send button */}
      <Pressable
        onPress={handleSend}
        disabled={!text.trim()}
        className={`w-10 h-10 rounded-full items-center justify-center mb-0.5 ${
          text.trim() ? "bg-pai-accent" : "bg-pai-bg-tertiary"
        }`}
      >
        <Text className={`text-xl ${text.trim() ? "text-white" : "text-pai-text-muted"}`}>
          ↑
        </Text>
      </Pressable>
    </View>
  );
}