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.
50 lines
1.4 KiB
50 lines
1.4 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 { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
|
|
import type { Types } from "@meshtastic/js";
|
|
import { InboxIcon } from "lucide-react";
|
|
|
|
export interface ChannelChatProps {
|
|
messages?: MessageWithState[];
|
|
channel: Types.ChannelNumber;
|
|
to: Types.Destination;
|
|
}
|
|
|
|
export const ChannelChat = ({
|
|
messages,
|
|
channel,
|
|
to,
|
|
}: ChannelChatProps): JSX.Element => {
|
|
const { nodes } = useDevice();
|
|
|
|
return (
|
|
<div className="flex flex-grow flex-col">
|
|
<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="p-3">
|
|
<MessageInput to={to} channel={channel} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|