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
import React, { useEffect, useRef } from "react";
import { FlatList, View } from "react-native";
import { Message } from "../../types";
import { MessageBubble } from "./MessageBubble";

interface MessageListProps {
  messages: Message[];
}

export function MessageList({ messages }: MessageListProps) {
  const listRef = useRef<FlatList<Message>>(null);

  useEffect(() => {
    if (messages.length > 0) {
      // Small delay to allow layout to complete
      setTimeout(() => {
        listRef.current?.scrollToEnd({ animated: true });
      }, 50);
    }
  }, [messages.length]);

  return (
    <FlatList
      ref={listRef}
      data={messages}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <MessageBubble message={item} />}
      contentContainerStyle={{ paddingVertical: 12 }}
      onContentSizeChange={() => {
        listRef.current?.scrollToEnd({ animated: false });
      }}
      showsVerticalScrollIndicator={false}
      ListFooterComponent={<View style={{ height: 4 }} />}
    />
  );
}