69 lines
1.4 KiB
TypeScript
69 lines
1.4 KiB
TypeScript
import { memo, type ReactNode } from "react";
|
|
import { StyleSheet, Text, View } from "react-native";
|
|
import { colors, monoFont } from "@/lib/theme";
|
|
|
|
export type Sender = "user" | "agent";
|
|
|
|
const SENDER_LABEL: Record<Sender, string> = {
|
|
user: "you",
|
|
agent: "pi",
|
|
};
|
|
|
|
const SENDER_COLOR: Record<Sender, string> = {
|
|
user: colors.senderUser,
|
|
agent: colors.senderAgent,
|
|
};
|
|
|
|
const RAIL_COLOR: Record<Sender, string> = {
|
|
user: colors.railUser,
|
|
agent: colors.railAgent,
|
|
};
|
|
|
|
type Props = {
|
|
sender: Sender;
|
|
/** Show the sender label (first message of a consecutive run). */
|
|
groupStart: boolean;
|
|
children: ReactNode;
|
|
};
|
|
|
|
function MessageRowComponent({ sender, groupStart, children }: Props) {
|
|
return (
|
|
<View
|
|
style={[
|
|
styles.container,
|
|
{ borderLeftColor: RAIL_COLOR[sender] },
|
|
groupStart && styles.groupStart,
|
|
]}
|
|
>
|
|
{groupStart ? (
|
|
<Text style={[styles.sender, { color: SENDER_COLOR[sender] }]}>
|
|
{SENDER_LABEL[sender]}
|
|
</Text>
|
|
) : null}
|
|
{children}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export const MessageRow = memo(MessageRowComponent);
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
borderLeftWidth: 2,
|
|
paddingLeft: 12,
|
|
paddingRight: 4,
|
|
paddingVertical: 3,
|
|
},
|
|
groupStart: {
|
|
marginTop: 18,
|
|
},
|
|
sender: {
|
|
fontFamily: monoFont,
|
|
fontSize: 11,
|
|
fontWeight: "700",
|
|
letterSpacing: 1.5,
|
|
textTransform: "uppercase",
|
|
marginBottom: 5,
|
|
},
|
|
});
|