73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
import * as React from "bloatless-react";
|
|
|
|
import { ChatMessageInfoModal } from "../Modals/chatMessageInfoModal";
|
|
import { ChatMessageStatus } from "../../Model/Chat/chatModel";
|
|
import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
|
|
import { translations } from "../translations";
|
|
import { MessageReactionButtonRow } from "./messageReactionButtonRow";
|
|
|
|
export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
|
|
const statusIcon = React.createProxyState(
|
|
[chatMessageViewModel.status],
|
|
() => {
|
|
switch (chatMessageViewModel.status.value) {
|
|
case ChatMessageStatus.Outbox:
|
|
return "hourglass_top";
|
|
case ChatMessageStatus.Sent:
|
|
return "check";
|
|
case ChatMessageStatus.Received:
|
|
return "done_all";
|
|
default:
|
|
return "warning";
|
|
}
|
|
},
|
|
);
|
|
|
|
return (
|
|
<div
|
|
class="message-bubble"
|
|
toggle:sentbyuser={chatMessageViewModel.sentByUser}
|
|
>
|
|
<div class="main tile">
|
|
<div class="text-container">
|
|
<span class="sender-name ellipsis">
|
|
{chatMessageViewModel.sender}
|
|
</span>
|
|
<span
|
|
class="body"
|
|
subscribe:innerText={chatMessageViewModel.body}
|
|
></span>
|
|
<span class="timestamp ellipsis">
|
|
<span
|
|
class="icon"
|
|
subscribe:innerText={statusIcon}
|
|
></span>
|
|
{chatMessageViewModel.dateSent}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button
|
|
on:click={chatMessageViewModel.showInfoModal}
|
|
aria-label={
|
|
translations.chatPage.message
|
|
.showMessageInfoButtonAudioLabel
|
|
}
|
|
>
|
|
<span class="icon">info</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
{MessageReactionButtonRow(chatMessageViewModel)}
|
|
{ChatMessageInfoModal(chatMessageViewModel)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const ChatMessageViewModelToView: React.StateItemConverter<
|
|
ChatMessageViewModel
|
|
> = (chatMessageViewModel: ChatMessageViewModel) => {
|
|
return ChatMessage(chatMessageViewModel);
|
|
};
|