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.
57 lines
1.6 KiB
57 lines
1.6 KiB
import { Input } from "@components/UI/Input.js";
|
|
import { useDevice } from "@core/stores/deviceStore.js";
|
|
import type { Channel } from "@core/stores/deviceStore.js";
|
|
import { SendIcon } from "lucide-react";
|
|
import type { Types } from "@meshtastic/meshtasticjs";
|
|
import { Button } from "@components/UI/Button.js";
|
|
|
|
export interface MessageInputProps {
|
|
channel: Channel;
|
|
}
|
|
|
|
export const MessageInput = ({ channel }: MessageInputProps): JSX.Element => {
|
|
const { connection, setMessageState, messageDraft, setMessageDraft } =
|
|
useDevice();
|
|
|
|
const sendText = async (message: string) => {
|
|
await connection
|
|
?.sendText(
|
|
message,
|
|
"broadcast",
|
|
true,
|
|
channel.config.index as Types.ChannelNumber
|
|
)
|
|
.then((id) => setMessageState(channel.config.index, id, "ack"))
|
|
.catch((e: Types.PacketError) =>
|
|
setMessageState(channel.config.index, e.id, e.error)
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="flex gap-2">
|
|
<form
|
|
className="w-full"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
sendText(messageDraft);
|
|
setMessageDraft("");
|
|
}}
|
|
>
|
|
<div className="flex flex-grow gap-2">
|
|
<span className="w-full">
|
|
<Input
|
|
autoFocus
|
|
minLength={2}
|
|
placeholder="Enter Message"
|
|
value={messageDraft}
|
|
onChange={(e) => setMessageDraft(e.target.value)}
|
|
/>
|
|
</span>
|
|
<Button>
|
|
<SendIcon size={16} />
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|