You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.2 KiB
72 lines
2.2 KiB
import { Subtle } from "@app/components/UI/Typography/Subtle.js";
|
|
import {
|
|
type MessageWithState,
|
|
useDevice,
|
|
} from "@app/core/stores/deviceStore.js";
|
|
import { Message } from "@components/PageComponents/Messages/Message.js";
|
|
import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.js";
|
|
import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
|
|
import type { Protobuf, Types } from "@meshtastic/js";
|
|
import { InboxIcon } from "lucide-react";
|
|
|
|
export interface ChannelChatProps {
|
|
messages?: MessageWithState[];
|
|
channel: Types.ChannelNumber;
|
|
to: Types.Destination;
|
|
traceroutes?: Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>[];
|
|
}
|
|
|
|
export const ChannelChat = ({
|
|
messages,
|
|
channel,
|
|
to,
|
|
traceroutes,
|
|
}: ChannelChatProps): JSX.Element => {
|
|
const { nodes } = useDevice();
|
|
|
|
return (
|
|
<div className="flex flex-grow flex-col">
|
|
<div className="flex flex-grow">
|
|
<div className="flex flex-grow flex-col">
|
|
{messages ? (
|
|
messages.map((message, index) => (
|
|
<Message
|
|
key={message.id}
|
|
message={message}
|
|
lastMsgSameUser={
|
|
index === 0 ? false : messages[index - 1].from === message.from
|
|
}
|
|
sender={nodes.get(message.from)}
|
|
/>
|
|
))
|
|
) : (
|
|
<div className="m-auto">
|
|
<InboxIcon className="m-auto" />
|
|
<Subtle>No Messages</Subtle>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={"flex flex-grow flex-col border-slate-400 border-l " + (traceroutes == undefined ? "hidden" : "") }>
|
|
{ to === "broadcast" ? null : traceroutes ? (
|
|
traceroutes.map((traceroute, index) => (
|
|
<TraceRoute
|
|
key={traceroute.id}
|
|
from={nodes.get(traceroute.from)}
|
|
to={nodes.get(traceroute.to)}
|
|
route={traceroute.data.route}
|
|
/>
|
|
))
|
|
) : (
|
|
<div className="m-auto">
|
|
<InboxIcon className="m-auto" />
|
|
<Subtle>No Traceroutes</Subtle>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="p-3">
|
|
<MessageInput to={to} channel={channel} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|