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
import React, { useState } from "react";
import { Pressable, ScrollView, Text, View } from "react-native";

interface Command {
  label: string;
  value: string;
}

const DEFAULT_COMMANDS: Command[] = [
  { label: "/s", value: "/s" },
  { label: "/ss", value: "/ss" },
  { label: "/clear", value: "/clear" },
  { label: "/help", value: "/help" },
  { label: "/status", value: "/status" },
];

interface CommandBarProps {
  onCommand: (command: string) => void;
  commands?: Command[];
}

export function CommandBar({
  onCommand,
  commands = DEFAULT_COMMANDS,
}: CommandBarProps) {
  const [activeCommand, setActiveCommand] = useState<string | null>(null);

  function handlePress(command: Command) {
    setActiveCommand(command.value);
    onCommand(command.value);
    setTimeout(() => setActiveCommand(null), 200);
  }

  return (
    <View className="border-t border-pai-border">
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{ paddingHorizontal: 12, paddingVertical: 8, gap: 8 }}
      >
        {commands.map((cmd) => (
          <Pressable
            key={cmd.value}
            onPress={() => handlePress(cmd)}
            className="rounded-full px-4 py-2"
            style={({ pressed }) => ({
              backgroundColor:
                activeCommand === cmd.value || pressed
                  ? "#4A9EFF"
                  : "#1E1E2E",
            })}
          >
            <Text
              className="text-sm font-medium"
              style={{
                color:
                  activeCommand === cmd.value ? "#FFFFFF" : "#9898B0",
              }}
            >
              {cmd.label}
            </Text>
          </Pressable>
        ))}
      </ScrollView>
    </View>
  );
}