74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
|
|
import Avatar from 'boring-avatars';
|
|
|
|
import {
|
|
CheckCircleIcon,
|
|
DotsCircleHorizontalIcon,
|
|
} from '@heroicons/react/outline';
|
|
import type { Types } from '@meshtastic/meshtasticjs';
|
|
|
|
import { useAppSelector } from '../hooks/redux';
|
|
|
|
interface ChatMessageProps {
|
|
message: { message: Types.TextPacket; ack: boolean };
|
|
}
|
|
|
|
export const ChatMessage = (props: ChatMessageProps): JSX.Element => {
|
|
const myNodeInfo = useAppSelector((state) => state.meshtastic.myNodeInfo);
|
|
const nodes = useAppSelector((state) => state.meshtastic.nodes);
|
|
|
|
const node = nodes.find((node) => {
|
|
return node.num === props.message.message.packet.from;
|
|
});
|
|
|
|
return (
|
|
<div className="flex items-end">
|
|
<Avatar
|
|
size={40}
|
|
name={node?.user?.longName ?? 'UNK'}
|
|
variant="beam"
|
|
colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
|
|
/>
|
|
<div className="flex flex-col container px-2 items-start">
|
|
<React.Suspense
|
|
fallback={
|
|
<div className="flex border-b border-gray-300">
|
|
<div className="m-auto p-3 text-gray-500">Loading</div>
|
|
</div>
|
|
}
|
|
>
|
|
<div
|
|
className={`px-4 py-2 rounded-3xl shadow-md ${
|
|
props.message.message.packet.from !== myNodeInfo.myNodeNum
|
|
? 'bg-gray-300'
|
|
: 'bg-green-200'
|
|
}`}
|
|
>
|
|
<div className="flex text-xs text-gray-500 space-x-1">
|
|
<div className="font-medium">{node?.user?.longName ?? 'UNK'}</div>
|
|
<p>-</p>
|
|
<div className="underline">
|
|
{new Date(
|
|
props.message.message.packet.rxTime > 0
|
|
? props.message.message.packet.rxTime
|
|
: Date.now(),
|
|
).toLocaleString()}
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between text-gray-600">
|
|
<span className="inline-block">{props.message.message.data}</span>
|
|
{node?.num === myNodeInfo.myNodeNum &&
|
|
(props.message.ack ? (
|
|
<CheckCircleIcon className="my-auto w-5 h-5" />
|
|
) : (
|
|
<DotsCircleHorizontalIcon className="my-auto animate-pulse w-5 h-5" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</React.Suspense>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|