99 lines
2.6 KiB
TypeScript
99 lines
2.6 KiB
TypeScript
import type React from "react";
|
|
|
|
import {
|
|
CircleIcon,
|
|
FullCircleIcon,
|
|
majorScale,
|
|
Pane,
|
|
Small,
|
|
Strong,
|
|
Text,
|
|
} from "evergreen-ui";
|
|
|
|
import { useDevice } from "@core/providers/useDevice.js";
|
|
import { Hashicon } from "@emeraldpay/hashicon-react";
|
|
import type { Protobuf, Types } from "@meshtastic/meshtasticjs";
|
|
|
|
import { LocationMessage } from "./LocationMessage.js";
|
|
|
|
export interface MessageProps {
|
|
lastMsgSameUser: boolean;
|
|
messagePacket: Types.MessagePacket;
|
|
ack: boolean;
|
|
rxTime: Date;
|
|
sender?: Protobuf.NodeInfo;
|
|
}
|
|
|
|
export const Message = ({
|
|
lastMsgSameUser,
|
|
messagePacket,
|
|
ack,
|
|
rxTime,
|
|
sender,
|
|
}: MessageProps): JSX.Element => {
|
|
const { setPeerInfoOpen, setActivePeer } = useDevice();
|
|
|
|
const openPeer = (): void => {
|
|
setActivePeer(messagePacket.packet.from);
|
|
setPeerInfoOpen(true);
|
|
};
|
|
|
|
return lastMsgSameUser ? (
|
|
<Pane display="flex" marginLeft={majorScale(3)}>
|
|
{ack ? (
|
|
<FullCircleIcon color="#9c9fab" marginY="auto" size={8} />
|
|
) : (
|
|
<CircleIcon color="#9c9fab" marginY="auto" size={8} />
|
|
)}
|
|
{messagePacket.location ? (
|
|
<LocationMessage location={messagePacket.location} />
|
|
) : (
|
|
<Text
|
|
color={ack ? "#474d66" : "#9c9fab"}
|
|
marginLeft={majorScale(2)}
|
|
paddingLeft={majorScale(1)}
|
|
borderLeft="3px solid #e6e6e6"
|
|
>
|
|
{messagePacket.text}
|
|
</Text>
|
|
)}
|
|
</Pane>
|
|
) : (
|
|
<Pane marginX={majorScale(2)} gap={majorScale(1)} marginTop={majorScale(1)}>
|
|
<Pane display="flex" gap={majorScale(1)}>
|
|
<Pane onClick={openPeer} cursor="pointer" width={majorScale(3)}>
|
|
<Hashicon value={(sender?.num ?? 0).toString()} size={32} />
|
|
</Pane>
|
|
<Strong onClick={openPeer} cursor="pointer" size={500}>
|
|
{sender?.user?.longName ?? "UNK"}
|
|
</Strong>
|
|
<Small>
|
|
{rxTime.toLocaleTimeString(undefined, {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</Small>
|
|
</Pane>
|
|
<Pane display="flex" marginLeft={majorScale(1)}>
|
|
{ack ? (
|
|
<FullCircleIcon color="#9c9fab" marginY="auto" size={8} />
|
|
) : (
|
|
<CircleIcon color="#9c9fab" marginY="auto" size={8} />
|
|
)}
|
|
{messagePacket.location ? (
|
|
<LocationMessage location={messagePacket.location} />
|
|
) : (
|
|
<Text
|
|
color={ack ? "#474d66" : "#9c9fab"}
|
|
marginLeft={majorScale(2)}
|
|
paddingLeft={majorScale(1)}
|
|
borderLeft="3px solid #e6e6e6"
|
|
>
|
|
{messagePacket.text}
|
|
</Text>
|
|
)}
|
|
</Pane>
|
|
</Pane>
|
|
);
|
|
};
|