Hunter Thornsberry
1 year ago
committed by
GitHub
GitHub
6 changed files with 202 additions and 125 deletions
@ -1,74 +1,155 @@ |
|||
import type { MessageWithState } from "@app/core/stores/deviceStore.ts"; |
|||
import { cn } from "@app/core/utils/cn"; |
|||
import { Avatar } from "@components/UI/Avatar"; |
|||
import type { Protobuf } from "@meshtastic/js"; |
|||
import { |
|||
AlertCircleIcon, |
|||
CheckCircle2Icon, |
|||
CircleEllipsisIcon, |
|||
} from "lucide-react"; |
|||
import * as Tooltip from "@radix-ui/react-tooltip"; |
|||
import { AlertCircle, CheckCircle2, CircleEllipsis } from "lucide-react"; |
|||
import type { LucideIcon } from "lucide-react"; |
|||
|
|||
export interface MessageProps { |
|||
const MESSAGE_STATES = { |
|||
ACK: "ack", |
|||
WAITING: "waiting", |
|||
FAILED: "failed", |
|||
} as const; |
|||
|
|||
type MessageState = MessageWithState["state"]; |
|||
|
|||
interface MessageProps { |
|||
lastMsgSameUser: boolean; |
|||
message: MessageWithState; |
|||
sender?: Protobuf.Mesh.NodeInfo; |
|||
} |
|||
|
|||
export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => { |
|||
return lastMsgSameUser ? ( |
|||
<div className="ml-5 flex"> |
|||
{message.state === "ack" ? ( |
|||
<CheckCircle2Icon size={16} className="my-auto text-textSecondary" /> |
|||
) : message.state === "waiting" ? ( |
|||
<CircleEllipsisIcon size={16} className="my-auto text-textSecondary" /> |
|||
) : ( |
|||
<AlertCircleIcon size={16} className="my-auto text-textSecondary" /> |
|||
)} |
|||
<span |
|||
className={`ml-4 border-l-2 border-l-backgroundPrimary pl-2 ${ |
|||
message.state === "ack" ? "text-textPrimary" : "text-textSecondary" |
|||
}`}
|
|||
interface StatusTooltipProps { |
|||
state: MessageState; |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
interface StatusIconProps { |
|||
state: MessageState; |
|||
className?: string; |
|||
} |
|||
|
|||
const STATUS_TEXT_MAP: Record<MessageState, string> = { |
|||
[MESSAGE_STATES.ACK]: "Message delivered", |
|||
[MESSAGE_STATES.WAITING]: "Waiting for delivery", |
|||
[MESSAGE_STATES.FAILED]: "Delivery failed", |
|||
} as const; |
|||
|
|||
const STATUS_ICON_MAP: Record<MessageState, LucideIcon> = { |
|||
[MESSAGE_STATES.ACK]: CheckCircle2, |
|||
[MESSAGE_STATES.WAITING]: CircleEllipsis, |
|||
[MESSAGE_STATES.FAILED]: AlertCircle, |
|||
} as const; |
|||
|
|||
const getStatusText = (state: MessageState): string => STATUS_TEXT_MAP[state]; |
|||
|
|||
const StatusTooltip = ({ state, children }: StatusTooltipProps) => ( |
|||
<Tooltip.Provider> |
|||
<Tooltip.Root> |
|||
<Tooltip.Trigger asChild>{children}</Tooltip.Trigger> |
|||
<Tooltip.Portal> |
|||
<Tooltip.Content |
|||
className="rounded-md bg-slate-800 px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95" |
|||
side="top" |
|||
align="center" |
|||
sideOffset={5} |
|||
> |
|||
{message.data} |
|||
</span> |
|||
</div> |
|||
) : ( |
|||
<div className="mx-4 mt-2 gap-2"> |
|||
<div className="flex gap-2"> |
|||
<div className="w-6 cursor-pointer"> |
|||
<Avatar text={sender?.user?.shortName ?? "UNK"} /> |
|||
</div> |
|||
<span className="cursor-pointer font-medium text-textPrimary"> |
|||
{sender?.user?.longName ?? "UNK"} |
|||
</span> |
|||
<span className="mt-1 font-mono text-xs text-textSecondary"> |
|||
{message.rxTime.toLocaleDateString()} |
|||
{getStatusText(state)} |
|||
<Tooltip.Arrow className="fill-slate-800" /> |
|||
</Tooltip.Content> |
|||
</Tooltip.Portal> |
|||
</Tooltip.Root> |
|||
</Tooltip.Provider> |
|||
); |
|||
|
|||
const StatusIcon = ({ state, className, ...otherProps }: StatusIconProps) => { |
|||
const isFailed = state === MESSAGE_STATES.FAILED; |
|||
const iconClass = cn( |
|||
className, |
|||
"text-gray-500 dark:text-gray-400 w-4 h-4 flex-shrink-0", |
|||
); |
|||
|
|||
const Icon = STATUS_ICON_MAP[state]; |
|||
return ( |
|||
<StatusTooltip state={state}> |
|||
<Icon |
|||
className={iconClass} |
|||
{...otherProps} |
|||
color={isFailed ? "red" : "currentColor"} |
|||
/> |
|||
</StatusTooltip> |
|||
); |
|||
}; |
|||
|
|||
const getMessageTextStyles = (state: MessageState) => { |
|||
const isAcknowledged = state === MESSAGE_STATES.ACK; |
|||
const isFailed = state === MESSAGE_STATES.FAILED; |
|||
const isWaiting = state === MESSAGE_STATES.WAITING; |
|||
|
|||
return cn( |
|||
"pl-2 break-words overflow-hidden", |
|||
isAcknowledged |
|||
? "text-black dark:text-white" |
|||
: "text-black dark:text-gray-400", |
|||
isFailed && "text-red-500 dark:text-red-500", |
|||
); |
|||
}; |
|||
|
|||
const TimeDisplay = ({ date }: { date: Date }) => ( |
|||
<div className="flex items-center gap-2 flex-shrink-0"> |
|||
<span className="text-xs text-gray-500 dark:text-gray-400 font-mono"> |
|||
{date.toLocaleDateString()} |
|||
</span> |
|||
<span className="mt-1 font-mono text-xs text-textSecondary"> |
|||
{message.rxTime.toLocaleTimeString(undefined, { |
|||
<span className="text-xs text-gray-500 dark:text-gray-400 font-mono"> |
|||
{date.toLocaleTimeString(undefined, { |
|||
hour: "2-digit", |
|||
minute: "2-digit", |
|||
})} |
|||
</span> |
|||
</div> |
|||
<div className="ml-1 flex"> |
|||
{message.state === "ack" ? ( |
|||
<CheckCircle2Icon size={16} className="my-auto text-textSecondary" /> |
|||
) : message.state === "waiting" ? ( |
|||
<CircleEllipsisIcon |
|||
size={16} |
|||
className="my-auto text-textSecondary" |
|||
); |
|||
|
|||
export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => { |
|||
const messageTextClass = getMessageTextStyles(message.state); |
|||
const isFailed = message.state === MESSAGE_STATES.ACK; |
|||
|
|||
const baseMessageWrapper = cn( |
|||
"flex items-center gap-2 w-full max-w-full pl-11", |
|||
!lastMsgSameUser && "flex-wrap flex-grow", |
|||
); |
|||
|
|||
const containerClass = cn( |
|||
"w-full px-4 relative", |
|||
lastMsgSameUser ? "mt-1" : "mt-2", |
|||
!lastMsgSameUser && "pt-2", |
|||
); |
|||
|
|||
return ( |
|||
<div className={containerClass}> |
|||
{!lastMsgSameUser && ( |
|||
<div className="flex flex-wrap items-center gap-x-2 gap-y-1"> |
|||
<div className="flex items-center gap-2 min-w-0"> |
|||
<Avatar |
|||
text={sender?.user?.shortName ?? "UNK"} |
|||
className="flex-shrink-0" |
|||
/> |
|||
) : ( |
|||
<AlertCircleIcon size={16} className="my-auto text-textSecondary" /> |
|||
)} |
|||
<span |
|||
className={`ml-4 border-l-2 border-l-backgroundPrimary pl-2 ${ |
|||
message.state === "ack" ? "text-textPrimary" : "text-textSecondary" |
|||
}`}
|
|||
> |
|||
{message.data} |
|||
<span className="font-medium text-gray-900 dark:text-white truncate"> |
|||
{sender?.user?.longName ?? "UNK"} |
|||
</span> |
|||
</div> |
|||
<TimeDisplay date={message.rxTime} /> |
|||
</div> |
|||
)} |
|||
<div className={baseMessageWrapper}> |
|||
<div className="flex-1 min-w-0 max-w-full"> |
|||
<div className={messageTextClass}>{message.data}</div> |
|||
</div> |
|||
<StatusIcon |
|||
state={message.state} |
|||
className="ml-auto mr-6 flex-shrink-0" |
|||
/> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
Loading…
Reference in new issue