<commit_before>/*
Copyright 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import React, {createRef} from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import shouldHideEvent from '../../shouldHideEvent';
import {wantsDateSeparator} from '../../DateUtils';
import * as sdk from '../../index';

import {MatrixClientPeg} from '../../MatrixClientPeg';
import SettingsStore from '../../settings/SettingsStore';
import {_t} from "../../languageHandler";
import {haveTileForEvent} from "../views/rooms/EventTile";

const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
const continuedTypes = ['m.sticker', 'm.room.message'];

const isMembershipChange = (e) => e.getType() === 'm.room.member' || e.getType() === 'm.room.third_party_invite';

/* (almost) stateless UI component which builds the event tiles in the room timeline.
 */
export default class MessagePanel extends React.Component {
    static propTypes = {
        // true to give the component a 'display: none' style.
        hidden: PropTypes.bool,

        // true to show a spinner at the top of the timeline to indicate
        // back-pagination in progress
        backPaginating: PropTypes.bool,

        // true to show a spinner at the end of the timeline to indicate
        // forward-pagination in progress
        forwardPaginating: PropTypes.bool,

        // the list of MatrixEvents to display
        events: PropTypes.array.isRequired,

        // ID of an event to highlight. If undefined, no event will be highlighted.
        highlightedEventId: PropTypes.string,

        // The room these events are all in together, if any.
        // (The notification panel won't have a room here, for example.)
        room: PropTypes.object,

        // Should we show URL Previews
        showUrlPreview: PropTypes.bool,

        // event after which we should show a read marker
        readMarkerEventId: PropTypes.string,

        // whether the read marker should be visible
        readMarkerVisible: PropTypes.bool,

        // the userid of our user. This is used to suppress the read marker
        // for pending messages.
        ourUserId: PropTypes.string,

        // true to suppress the date at the start of the timeline
        suppressFirstDateSeparator: PropTypes.bool,

        // whether to show read receipts
        showReadReceipts: PropTypes.bool,

        // true if updates to the event list should cause the scroll panel to
        // scroll down when we are at the bottom of the window. See ScrollPanel
        // for more details.
        stickyBottom: PropTypes.bool,

        // callback which is called when the panel is scrolled.
        onScroll: PropTypes.func,

        // callback which is called when more content is needed.
        onFillRequest: PropTypes.func,

        // className for the panel
        className: PropTypes.string.isRequired,

        // shape parameter to be passed to EventTiles
        tileShape: PropTypes.string,

        // show twelve hour timestamps
        isTwelveHour: PropTypes.bool,

        // show timestamps always
        alwaysShowTimestamps: PropTypes.bool,

        // helper function to access relations for an event
        getRelationsForEvent: PropTypes.func,

        // whether to show reactions for an event
        showReactions: PropTypes.bool,
    };

    constructor() {
        super();

        this.state = {
            // previous positions the read marker has been in, so we can
            // display 'ghost' read markers that are animating away
            ghostReadMarkers: [],
            showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
        };

        // opaque readreceipt info for each userId; used by ReadReceiptMarker
        // to manage its animations
        this._readReceiptMap = {};

        // Track read receipts by event ID. For each _shown_ event ID, we store
        // the list of read receipts to display:
        //   [
        //       {
        //           userId: string,
        //           member: RoomMember,
        //           ts: number,
        //       },
        //   ]
        // This is recomputed on each render. It's only stored on the component
        // for ease of passing the data around since it's computed in one pass
        // over all events.
        this._readReceiptsByEvent = {};

        // Track read receipts by user ID. For each user ID we've ever shown a
        // a read receipt for, we store an object:
        //   {
        //       lastShownEventId: string,
        //       receipt: {
        //           userId: string,
        //           member: RoomMember,
        //           ts: number,
        //       },
        //   }
        // so that we can always keep receipts displayed by reverting back to
        // the last shown event for that user ID when needed. This may feel like
        // it duplicates the receipt storage in the room, but at this layer, we
        // are tracking _shown_ event IDs, which the JS SDK knows nothing about.
        // This is recomputed on each render, using the data from the previous
        // render as our fallback for any user IDs we can't match a receipt to a
        // displayed event in the current render cycle.
        this._readReceiptsByUserId = {};

        // Cache hidden events setting on mount since Settings is expensive to
        // query, and we check this in a hot code path.
        this._showHiddenEventsInTimeline =
            SettingsStore.getValue("showHiddenEventsInTimeline");

        this._isMounted = false;

        this._readMarkerNode = createRef();
        this._whoIsTyping = createRef();
        this._scrollPanel = createRef();

        this._showTypingNotificationsWatcherRef =
            SettingsStore.watchSetting("showTypingNotifications", this.onShowTypingNotificationsChange);
    }

    componentDidMount() {
        this._isMounted = true;
    }

    componentWillUnmount() {
        this._isMounted = false;
        SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
    }

    componentDidUpdate(prevProps, prevState) {<commit_msg>fix call to SettngsStore.watchSetting, it takes a roomID<commit_after>/*
Copyright 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import React, {createRef} from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import shouldHideEvent from '../../shouldHideEvent';
import {wantsDateSeparator} from '../../DateUtils';
import * as sdk from '../../index';

import {MatrixClientPeg} from '../../MatrixClientPeg';
import SettingsStore from '../../settings/SettingsStore';
import {_t} from "../../languageHandler";
import {haveTileForEvent} from "../views/rooms/EventTile";

const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
const continuedTypes = ['m.sticker', 'm.room.message'];

const isMembershipChange = (e) => e.getType() === 'm.room.member' || e.getType() === 'm.room.third_party_invite';

/* (almost) stateless UI component which builds the event tiles in the room timeline.
 */
export default class MessagePanel extends React.Component {
    static propTypes = {
        // true to give the component a 'display: none' style.
        hidden: PropTypes.bool,

        // true to show a spinner at the top of the timeline to indicate
        // back-pagination in progress
        backPaginating: PropTypes.bool,

        // true to show a spinner at the end of the timeline to indicate
        // forward-pagination in progress
        forwardPaginating: PropTypes.bool,

        // the list of MatrixEvents to display
        events: PropTypes.array.isRequired,

        // ID of an event to highlight. If undefined, no event will be highlighted.
        highlightedEventId: PropTypes.string,

        // The room these events are all in together, if any.
        // (The notification panel won't have a room here, for example.)
        room: PropTypes.object,

        // Should we show URL Previews
        showUrlPreview: PropTypes.bool,

        // event after which we should show a read marker
        readMarkerEventId: PropTypes.string,

        // whether the read marker should be visible
        readMarkerVisible: PropTypes.bool,

        // the userid of our user. This is used to suppress the read marker
        // for pending messages.
        ourUserId: PropTypes.string,

        // true to suppress the date at the start of the timeline
        suppressFirstDateSeparator: PropTypes.bool,

        // whether to show read receipts
        showReadReceipts: PropTypes.bool,

        // true if updates to the event list should cause the scroll panel to
        // scroll down when we are at the bottom of the window. See ScrollPanel
        // for more details.
        stickyBottom: PropTypes.bool,

        // callback which is called when the panel is scrolled.
        onScroll: PropTypes.func,

        // callback which is called when more content is needed.
        onFillRequest: PropTypes.func,

        // className for the panel
        className: PropTypes.string.isRequired,

        // shape parameter to be passed to EventTiles
        tileShape: PropTypes.string,

        // show twelve hour timestamps
        isTwelveHour: PropTypes.bool,

        // show timestamps always
        alwaysShowTimestamps: PropTypes.bool,

        // helper function to access relations for an event
        getRelationsForEvent: PropTypes.func,

        // whether to show reactions for an event
        showReactions: PropTypes.bool,
    };

    constructor() {
        super();

        this.state = {
            // previous positions the read marker has been in, so we can
            // display 'ghost' read markers that are animating away
            ghostReadMarkers: [],
            showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
        };

        // opaque readreceipt info for each userId; used by ReadReceiptMarker
        // to manage its animations
        this._readReceiptMap = {};

        // Track read receipts by event ID. For each _shown_ event ID, we store
        // the list of read receipts to display:
        //   [
        //       {
        //           userId: string,
        //           member: RoomMember,
        //           ts: number,
        //       },
        //   ]
        // This is recomputed on each render. It's only stored on the component
        // for ease of passing the data around since it's computed in one pass
        // over all events.
        this._readReceiptsByEvent = {};

        // Track read receipts by user ID. For each user ID we've ever shown a
        // a read receipt for, we store an object:
        //   {
        //       lastShownEventId: string,
        //       receipt: {
        //           userId: string,
        //           member: RoomMember,
        //           ts: number,
        //       },
        //   }
        // so that we can always keep receipts displayed by reverting back to
        // the last shown event for that user ID when needed. This may feel like
        // it duplicates the receipt storage in the room, but at this layer, we
        // are tracking _shown_ event IDs, which the JS SDK knows nothing about.
        // This is recomputed on each render, using the data from the previous
        // render as our fallback for any user IDs we can't match a receipt to a
        // displayed event in the current render cycle.
        this._readReceiptsByUserId = {};

        // Cache hidden events setting on mount since Settings is expensive to
        // query, and we check this in a hot code path.
        this._showHiddenEventsInTimeline =
            SettingsStore.getValue("showHiddenEventsInTimeline");

        this._isMounted = false;

        this._readMarkerNode = createRef();
        this._whoIsTyping = createRef();
        this._scrollPanel = createRef();

        this._showTypingNotificationsWatcherRef =
            SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
    }

    componentDidMount() {
        this._isMounted = true;
    }

    componentWillUnmount() {
        this._isMounted = false;
        SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
    }

    componentDidUpdate(prevProps, prevState) {
{'fraction_non_alphanumeric': 0.07985574446161772, 'fraction_numerical': 0.0035327886950761757, 'mean_word_length': 2.255390512697652, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1071783', 'n_tokens_mistral': 3493, 'n_tokens_neox': 3369, 'n_words': 1384}