CT/src/View/ChatPages/messagePage.tsx

import "./messagePage.css";

import * as React from "bloatless-react";

import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
import { ChatMessage } from "../Components/chatMessage";

export function MessagePage(
    coreViewModel: CoreViewModel,
    messagePageViewModel: MessagePageViewModel,
) {
    messagePageViewModel.loadData();
    const ChatMessageViewModelToView: React.StateItemConverter<
        ChatMessageViewModel
    > = (chatMessageViewModel: ChatMessageViewModel) => {
        return ChatMessage(coreViewModel, chatMessageViewModel);
    };

    const messageContainer = (
        <div
            id="message-container"
            children:append={[
                messagePageViewModel.chatMessageViewModels,
                ChatMessageViewModelToView,
            ]}
        ></div>
    );

    function scrollDown(hard: boolean = false) {
        if (hard) {
            messageContainer.setAttribute("scroll-hard", "");
        }
        messageContainer.scrollTop = messageContainer.scrollHeight;
        messageContainer.removeAttribute("scroll-hard");
    }
    function scrollDownIfApplicable() {
        const scrollFromBottom =
            messageContainer.scrollHeight -
            (messageContainer.scrollTop + messageContainer.offsetHeight);
        if (scrollFromBottom > 400) return;

        scrollDown();
    }
    messagePageViewModel.chatMessageViewModels.subscribeSilent(
        scrollDownIfApplicable,
    );
    setTimeout(() => scrollDown(true), 100);

    return (
        <div id="message-page">
            <div class="pane-wrapper">
                <div class="pane">
                    <div class="toolbar">
                        <span class="title">
                            {
                                coreViewModel.translations.chatPage.message
                                    .messagesHeadline
                            }
                        </span>
                    </div>
                    <div class="content">
                        {messageContainer}
                        <div id="composer">
                            <div class="content-width-constraint">
                                <div class="input-width-constraint">
                                    <input
                                        bind:value={
                                            messagePageViewModel.composingMessage
                                        }
                                        on:enter={
                                            messagePageViewModel.sendMessage
                                        }
                                        placeholder={
                                            coreViewModel.translations.chatPage
                                                .message
                                                .composerInputPlaceholder
                                        }
                                    ></input>
                                    <button
                                        class="primary"
                                        aria-label={
                                            coreViewModel.translations.chatPage
                                                .message
                                                .sendMessageButtonAudioLabel
                                        }
                                        on:click={
                                            messagePageViewModel.sendMessage
                                        }
                                        toggle:disabled={
                                            messagePageViewModel.cannotSendMessage
                                        }
                                    >
                                        <span class="icon">send</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}