Your NameandClaude Sonnet 5
93b856aec8
派了Ch1-2/3-4/5-6/7/8/9/10-11共7个agent对全部11章重新深度测试。后端问题已核实追加进
docs/IM-后端问题清单-2026-09-04.md（新增6-9条，发给用户）；本次是前端问题的修复。
**REASON_MESSAGES系统性补全（最高优先级，多个agent独立发现同一个缺口）**
im-api.js的REASON_MESSAGES表新增22个条目，最重要的是PERMISSION_DENIED——后端
server/im_http.go里403响应统一用这个reason（30余处调用），但表里原来只有一个从未
被后端实际发送过的死条目FORBIDDEN，导致全站几乎每一个403从工程一开始就在展示原始
英文"permission denied"。一并补上VERSION_CONFLICT/MALFORMED_REQUEST（Ch9 agent实测
命中）、NOT_FOUND、VERIFICATION_RATE_LIMITED（动态文案，同TOO_MANY_ATTEMPTS模式）等。
新增translateReason()导出函数并用于send-message.jsx的sendFavorite——favorites/forward
等几个批量接口恒定200、真实成败包在items[].reason里，imRequest的自动翻译够不到这种
per-item场景，之前直接显示原始reason字符串。tinode-web.jsx同理补了CTRL_ERROR_TEXT_CN
（原生WS {ctrl}协议错误，同样绕开REASON_MESSAGES）并修了原表从未真正匹配过的bug——
CommError会把状态码拼进message变成"authentication failed (401)"，原表按裸文本精确
匹配，看着正常纯粹是因为401/403兜底文案凑巧一样，一旦命中"unknown authentication
scheme"这类会被兜底文案误导、"policy violation"这类会直接漏出英文。uploadLargeFile/
createChatUploader/createFileDownloader同样绕开REASON_MESSAGES（走原生{ctrl}协议），
补了UPLOAD_CTRL_TEXT_CN小词典。已用真实账号端到端验证：favorites/forward到P2P目标
触发的PERMISSION_DENIED现在正确显示"没有权限执行此操作"；draft接口版本冲突正确显示
"内容已被修改，请刷新后重试"。
**编辑消息时打开附件面板会静默覆盖被编辑消息（Ch3-4 agent发现，数据损坏级别）**
sendMessage对editing状态一律用head.replace，但onAttachFile/onAttachImage/onAttachAudio
原来只在forwardMessage时置空，编辑态没有同款门禁——编辑一条消息不改文字、点"+"选张图片
或名片，会直接把附件内容替换掉被编辑消息的原文，无任何确认。messages-view.jsx新增
editingMessage门禁，和forwardMessage一样把三个attach回调置空（等价于隐藏整个"+"按钮）。
已用真实浏览器验证：编辑态下"+"按钮消失，取消编辑后正常恢复。
**草稿防抖单一共享定时器丢字（Ch1-2、Ch3-4两个agent独立发现）**
handleComposerChange用单个this.draftSaveTimer，话题A打字触发600ms保存后300ms内切到
话题B，会把A的定时器clearTimeout掉，那次输入永久丢失；version也在定时器触发时才重新
读state，此时可能已经在别的话题上，退化成硬编码0——叠加后端draft接口对version=0"无条件
跳过乐观锁"的行为（已记入后端清单新增6），可能静默覆盖别的标签页写入的更新草稿。改为
按话题分开的定时器map，version在调用的当下（保证仍在该话题）同步捕获进闭包。
**呼叫状态机两处真实bug（Ch8 agent此前发现，本次重新核实live代码后确认+修复）**
1. 通话中导航离开messages-view.jsx整个组件树（切到工作台/个人设置，或移动端切回会话
列表）时，没有任何hangup清理——componentSetup已有的"切换话题时正确挂断"逻辑只在
componentDidUpdate里，组件真正卸载时不会触发。CallPanel自己的componentWillUnmount
只做本地清理，不通知对方也不重置tinode-web.jsx顶层callState，导致下次切回通话话题
时remount出一个callState卡在CALL_STATE_IN_PROGRESS的"僵尸"面板——start()走"我们刚
接听"分支直接return，从不调getUserMedia，本地媒体永久拿不到。补了对称的
componentWillUnmount挂断逻辑。
2. this.callTimeoutTimer声明后从未被真正setTimeout赋值——呼出无人接听或accept信令
（fire-and-forget的{note}包）被丢会永久卡在"呼叫中"。补了armCallRingTimeout()，
60秒未接通按跟手动取消完全一样的路径挂断（不发明新的通话结果语义），在收到对方
accept信号的两处分支都正确清timer。
**其余前端修复（按文件）**
- messages-view.jsx: @提醒mentionedUsers只在切话题时清空，同一话题内后续消息里字面
文本"@张三"会被静默解析成真实提醒（发送后清空）；jumpToMessage点开已撤回/删除的
搜索结果原来只console.error静默失败，补了用户可见的错误提示；批量收藏对
favorites/batch共享Idempotency-Key导致的静默丢失（已知后端问题）不再照单全收
"收藏成功"，改为发送后重新拉取真实收藏列表核对每条是否真的落地。
- audio-recorder.jsx: getUserMedia权限弹窗未决出结果时组件被卸载，补_unmounted
标记避免在死实例上继续跑mediaRecorder.start()。
- send-message.jsx: disabled变为true时（对方拉黑/被禁言等实时ACS变化）没有强制结束
正在进行的按住录音，可能remount出无用户手势的"自动录音"；mouseup/touchend覆盖不到
拖出窗口/切换标签页/权限弹窗抢焦点的释放场景，补了blur/visibilitychange兜底。
- tinode-web.jsx: messages-menu视图和messages-home共用MessageCenterView实例无key，
从messages-home以非整体刷新方式切到messages-menu时菜单打不开，补key={view}。
- message-center-view.jsx: 实名认证驳回提醒的dismiss key只按用户+状态区分，同一状态
的两次独立驳回会互相误压制，改按submission_id区分。
- contact-management-view.jsx: Profile/Settings靠getUserProfile刷新拉黑状态，但该
接口对被拉黑对象直接403，导致"之前会话就已拉黑"的场景完全感知不到——叠加
getConversationContext兜底（该接口对拉黑目标正确返回200+relationship）。
- group-management-view.jsx: AdminList显示群主/管理员姓名漏了group_nickname兜底；
JoinRequests从聊天页横幅进入时返回按钮硬编码回group-settings（应回聊天本身），
从Governance进入时返回group-settings而非group-governance（与AdminList/Muted不一致）。
- workplace-collaboration-view.jsx: OrganizationDirectory/DeptNode的部门树加载失败
被无条件当成"暂无数据"渲染，补loadError区分+重试链接。
- personal-settings-view.jsx: CacheClear对navigator.storage/caches整个不存在的情况
只有react出了范围的.catch()覆盖不到的同步抛错，加了特性检测+try/catch；
YouthModeVerify触发TOO_MANY_ATTEMPTS锁定后确定按钮没有禁用/倒计时，会继续发出
注定失败的请求。
- security-support-view.jsx: 意见反馈category字段在config未加载完成前可为空但没有
提交前校验，会打到后端400。
- use-cached-data.js: bootstrap等首次拉取失败且无缓存兜底时永久停在undefined，加了
一次3秒后重试（仅在完全没有缓存值时触发，已有缓存值维持原"显示旧数据"行为不变）。
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2489 lines
102 KiB
React
2489 lines
102 KiB
React
// Panel with a chat.
|
||
|
||
import React, { Suspense } from 'react';
|
||
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
|
||
|
||
import { Drafty, Tinode, TheCard } from 'tinode-sdk';
|
||
|
||
const CallPanel = React.lazy(_ => import('../widgets/call-panel.jsx'));
|
||
import ChatMessage from '../widgets/chat-message.jsx';
|
||
import ContactBadges from '../widgets/contact-badges.jsx';
|
||
const DocPreview = React.lazy(_ => import('../widgets/doc-preview.jsx'));
|
||
import ErrorPanel from '../widgets/error-panel.jsx';
|
||
import GroupSubs from '../widgets/group-subs.jsx';
|
||
const ImagePreview = React.lazy(_ => import('../widgets/image-preview.jsx'));
|
||
import Invitation from '../widgets/invitation.jsx';
|
||
import LetterTile from '../widgets/letter-tile.jsx';
|
||
import LoadSpinner from '../widgets/load-spinner.jsx';
|
||
import LogoView from './logo-view.jsx';
|
||
import MetaMessage from '../widgets/meta-message.jsx';
|
||
import PinnedMessages from '../widgets/pinned-messages.jsx';
|
||
import { RiskConfirmDialog } from './security-support-view.jsx';
|
||
import SendMessage from '../widgets/send-message.jsx';
|
||
const TheCardPreview = React.lazy(_ => import('../widgets/the-card-preview.jsx'));
|
||
const VideoPreview = React.lazy(_ => import('../widgets/video-preview.jsx'));
|
||
|
||
import { DEFAULT_P2P_ACCESS_MODE, EDIT_PREVIEW_LENGTH, IMAGE_PREVIEW_DIM, IMMEDIATE_P2P_SUBSCRIPTION,
|
||
DRAFTY_FR_MIME_TYPE_LEGACY, KEYPRESS_DELAY, MESSAGES_PAGE, MAX_EXTERN_ATTACHMENT_SIZE, MAX_IMAGE_DIM,
|
||
MAX_INBAND_ATTACHMENT_SIZE, READ_DELAY, QUOTED_REPLY_LENGTH, VIDEO_PREVIEW_DIM } from '../config.js';
|
||
import { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS } from '../constants.js';
|
||
import { blobToBase64, fileToBase64, imageScaled, importVCard, makeImageUrl } from '../lib/blob-helpers.js';
|
||
import { topicDisplayName } from '../lib/utils.js';
|
||
import { checkURL, confirmRiskChallenge, createChatUploader, favoriteMessages, getBootstrap, getConversationContext,
|
||
getFavorites, getGroupJoinRequests, getGroupMembers, getLatestGroupAnnouncement, getTopicDraft, recallMessage,
|
||
updateTopicDraft } from '../lib/im-api.js';
|
||
import HashNavigation from '../lib/navigation.js';
|
||
import { bytesToHumanSize, relativeDateFormat, shortDateFormat } from '../lib/strformat.js';
|
||
|
||
// Run timer with this frequency (ms) for checking notification queue.
|
||
const NOTIFICATION_EXEC_INTERVAL = 300;
|
||
// Scroll distance before [go to latest message] button is shown.
|
||
const SHOW_GO_TO_LAST_DIST = 100;
|
||
// Sctoll distance from the top when fetching the page of earlier messages is triggered.
|
||
const FETCH_PAGE_TRIGGER = 40;
|
||
|
||
const messages = defineMessages({
|
||
// 已存在于 src/i18n/*.json（zh: "消息已删除"），这里只是注册引用，不是新增待翻译串
|
||
message_deleted: {
|
||
id: 'message_deleted',
|
||
defaultMessage: 'message deleted',
|
||
description: 'Placeholder shown in the timeline where a message was recalled or deleted',
|
||
},
|
||
online_now: {
|
||
id: 'online_now',
|
||
defaultMessage: 'online now',
|
||
description: 'Indicator that the user or topic is currently online',
|
||
},
|
||
last_seen: {
|
||
id: 'last_seen_timestamp',
|
||
defaultMessage: 'Last seen: {timestamp}',
|
||
description: 'Label for the timestamp of when the user or topic was last online'
|
||
},
|
||
not_found: {
|
||
id: 'title_not_found',
|
||
defaultMessage: 'Not found',
|
||
description: 'Title shown when topic is not found'
|
||
},
|
||
channel: {
|
||
id: 'channel',
|
||
defaultMessage: 'channel',
|
||
description: 'Subtitle shown for channels in MessagesView instead of last seen'
|
||
},
|
||
file_attachment_too_large: {
|
||
id: 'file_attachment_too_large',
|
||
defaultMessage: 'The file size {size} exceeds the {limit} limit.',
|
||
description: 'Error message when attachment is too large'
|
||
},
|
||
invalid_content: {
|
||
id: 'invalid_content',
|
||
defaultMessage: 'invalid content',
|
||
description: 'Shown when the message is unreadable'
|
||
},
|
||
editing_message: {
|
||
id: 'editing_message',
|
||
defaultMessage: 'Editing',
|
||
description: 'Title over message editing preview'
|
||
},
|
||
drag_file: {
|
||
id: 'drag_file',
|
||
defaultMessage: 'Drag file here',
|
||
description: 'Prompt on the file drag-n-drop overlay banner'
|
||
},
|
||
self_topic_name: {
|
||
id: 'self_topic_name',
|
||
defaultMessage: 'Saved messages',
|
||
description: 'Name of self topic for UI'
|
||
},
|
||
subscriber_count: {
|
||
id: 'subscriber_count',
|
||
defaultMessage: '{count, plural, ' +
|
||
'one {{count, number} subscriber} ' +
|
||
'two {{count, number} subscribers} ' +
|
||
'three {{count, number} subscribers} ' +
|
||
'few {{count, number} subscribers} ' +
|
||
'many {{count, number} subscribers} ' +
|
||
'other {{count, number} subscribers}}',
|
||
description: 'Count of channel subscribers'
|
||
},
|
||
member_count: {
|
||
id: 'member_count',
|
||
defaultMessage: '{count, plural, ' +
|
||
'one {{count, number} member} ' +
|
||
'two {{count, number} members} ' +
|
||
'three {{count, number} members} ' +
|
||
'few {{count, number} members} ' +
|
||
'many {{count, number} members} ' +
|
||
'other {{count, number} members}}',
|
||
description: 'Count of group topic members'
|
||
},
|
||
cannot_parse_vcard: {
|
||
id: 'cannot_parse_vcard',
|
||
defaultMessage: 'Cannot parse vCard file.',
|
||
description: 'Error message when vCard file cannot be parsed'
|
||
}
|
||
});
|
||
|
||
// Checks if the access permissions are granted but not yet accepted.
|
||
function isUnconfirmed(acs) {
|
||
if (acs) {
|
||
const ex = acs.getExcessive() || '';
|
||
return acs.isJoiner('given') && (ex.includes('R') || ex.includes('W'));
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function isPeerRestricted(acs) {
|
||
if (acs) {
|
||
const ms = acs.getMissing() || '';
|
||
return acs.isJoiner('want') && (ms.includes('R') || ms.includes('W'));
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function shouldPresentCallPanel(callState) {
|
||
// Show call panel if either:
|
||
// - call is outgoing (and the client is waiting for the other side to pick up) or,
|
||
// - call is already in progress.
|
||
return callState == CALL_STATE_OUTGOING_INITATED || callState == CALL_STATE_IN_PROGRESS;
|
||
}
|
||
|
||
class MessagesView extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
|
||
this.state = MessagesView.getDerivedStateFromProps(props, {});
|
||
// Not topic-specific, fetched once in componentDidMount -- unlike the rest of state this
|
||
// is intentionally not touched by getDerivedStateFromProps on topic change.
|
||
this.state.messagePolicy = null;
|
||
this.state.toast = null;
|
||
this.state.riskDialog = null;
|
||
this.mentionedUsers = [];
|
||
|
||
this.componentSetup = this.componentSetup.bind(this);
|
||
this.leave = this.leave.bind(this);
|
||
this.sendMessage = this.sendMessage.bind(this);
|
||
this.handleRiskConfirm = this.handleRiskConfirm.bind(this);
|
||
this.handleRiskCancel = this.handleRiskCancel.bind(this);
|
||
this.retrySend = this.retrySend.bind(this);
|
||
this.sendImageAttachment = this.sendImageAttachment.bind(this);
|
||
this.sendVideoAttachment = this.sendVideoAttachment.bind(this);
|
||
this.sendFileAttachment = this.sendFileAttachment.bind(this);
|
||
this.sendAudioAttachment = this.sendAudioAttachment.bind(this);
|
||
this.sendTheCardAttachment = this.sendTheCardAttachment.bind(this);
|
||
this.sendKeyPress = this.sendKeyPress.bind(this);
|
||
this.subscribe = this.subscribe.bind(this);
|
||
this.handleScrollReference = this.handleScrollReference.bind(this);
|
||
this.mountDnDEvents = this.mountDnDEvents.bind(this);
|
||
this.handleScrollEvent = this.handleScrollEvent.bind(this);
|
||
this.handleDescChange = this.handleDescChange.bind(this);
|
||
this.handleSubsUpdated = this.handleSubsUpdated.bind(this);
|
||
this.handleMessageUpdate = this.handleMessageUpdate.bind(this);
|
||
this.handleAuxUpdate = this.handleAuxUpdate.bind(this);
|
||
this.handleAllMessagesReceived = this.handleAllMessagesReceived.bind(this);
|
||
this.handleInfoReceipt = this.handleInfoReceipt.bind(this);
|
||
this.handleExpandMedia = this.handleExpandMedia.bind(this);
|
||
this.handleClosePreview = this.handleClosePreview.bind(this);
|
||
this.handleCallPanelToggle = this.handleCallPanelToggle.bind(this);
|
||
this.handleFormResponse = this.handleFormResponse.bind(this);
|
||
this.handleContextClick = this.handleContextClick.bind(this);
|
||
this.handleShowMessageContextMenu = this.handleShowMessageContextMenu.bind(this);
|
||
this.handleNewChatAcceptance = this.handleNewChatAcceptance.bind(this);
|
||
this.handleEnablePeer = this.handleEnablePeer.bind(this);
|
||
this.loadRelationshipContext = this.loadRelationshipContext.bind(this);
|
||
this.loadGroupContext = this.loadGroupContext.bind(this);
|
||
this.loadDraft = this.loadDraft.bind(this);
|
||
this.handleComposerChange = this.handleComposerChange.bind(this);
|
||
this.clearDraft = this.clearDraft.bind(this);
|
||
this.mentionSearch = this.mentionSearch.bind(this);
|
||
this.mentionSelected = this.mentionSelected.bind(this);
|
||
this.handleShowAnnouncement = this.handleShowAnnouncement.bind(this);
|
||
this.handleShowJoinRequests = this.handleShowJoinRequests.bind(this);
|
||
this.handleSendFriendVerification = this.handleSendFriendVerification.bind(this);
|
||
this.handleBatchDelete = this.handleBatchDelete.bind(this);
|
||
this.handleBatchFavorite = this.handleBatchFavorite.bind(this);
|
||
this.handleAttachFile = this.handleAttachFile.bind(this);
|
||
this.handleAttachImageOrVideo = this.handleAttachImageOrVideo.bind(this);
|
||
this.handleCancelUpload = this.handleCancelUpload.bind(this);
|
||
this.postReadNotification = this.postReadNotification.bind(this);
|
||
this.clearNotificationQueue = this.clearNotificationQueue.bind(this);
|
||
this.goToLatestMessage = this.goToLatestMessage.bind(this);
|
||
this.handleFileDrop = this.handleFileDrop.bind(this);
|
||
|
||
this.handlePickReply = this.handlePickReply.bind(this);
|
||
this.handleEditMessage = this.handleEditMessage.bind(this);
|
||
this.handleCancelReply = this.handleCancelReply.bind(this);
|
||
this.handleQuoteClick = this.handleQuoteClick.bind(this);
|
||
this.jumpToMessage = this.jumpToMessage.bind(this);
|
||
this.handleUnpinMessage = this.handleUnpinMessage.bind(this);
|
||
this.handleCallHangup = this.handleCallHangup.bind(this);
|
||
|
||
this.isDragEnabled = this.isDragEnabled.bind(this);
|
||
this.handleDragStart = this.handleDragStart.bind(this);
|
||
this.handleDragIn = this.handleDragIn.bind(this);
|
||
this.handleDragOut = this.handleDragOut.bind(this);
|
||
this.handleDrag = this.handleDrag.bind(this);
|
||
this.handleDrop = this.handleDrop.bind(this);
|
||
|
||
this.chatMessageRefs = [];
|
||
this.getOrCreateMessageRef = this.getOrCreateMessageRef.bind(this);
|
||
this.getVisibleMessageRange = this.getVisibleMessageRange.bind(this);
|
||
|
||
// Keeps track of the drag event.
|
||
// Need a counter b/c the browser's 'drag' events may fire multiple times
|
||
// when the user takes the mouse pointer over the container:
|
||
// for the component itself and for all nested/child elements.
|
||
this.dragCounter = 0;
|
||
this.dndRef = null;
|
||
|
||
this.readNotificationQueue = [];
|
||
this.readNotificationTimer = null;
|
||
|
||
this.keyPressTimer = null;
|
||
}
|
||
|
||
getOrCreateMessageRef(seqId) {
|
||
if (this.chatMessageRefs[seqId]) {
|
||
return this.chatMessageRefs[seqId];
|
||
}
|
||
const ref = React.createRef();
|
||
this.chatMessageRefs[seqId] = ref;
|
||
return ref;
|
||
}
|
||
|
||
getVisibleMessageRange(holderRect) {
|
||
let min = Number.MAX_SAFE_INTEGER, max = -1;
|
||
let visibilityStatus = false;
|
||
this.chatMessageRefs.every((ref, seq) => {
|
||
if (ref.current) {
|
||
const { top, bottom, height } = ref.current.getBoundingClientRect();
|
||
const visible = top <= holderRect.top ? holderRect.top - top <= height : bottom - holderRect.bottom <= height;
|
||
if (visible) {
|
||
visibilityStatus = true;
|
||
min = Math.min(min, seq);
|
||
max = Math.max(max, seq);
|
||
} else if (visibilityStatus) {
|
||
// The remaining elements are no longer visible, no need to iterate them.
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
});
|
||
|
||
return max >= min ? {min: min, max: max} : {min: 0, max: 0};
|
||
}
|
||
|
||
componentDidMount() {
|
||
if (this.messagesScroller) {
|
||
this.messagesScroller.addEventListener('scroll', this.handleScrollEvent);
|
||
}
|
||
|
||
// Drag and drop events
|
||
this.mountDnDEvents(this.dndRef);
|
||
|
||
this.componentSetup({}, {});
|
||
|
||
getBootstrap().then(data => {
|
||
this.setState({messagePolicy: data.message_policy || null});
|
||
}).catch(_ => {});
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
// componentSetup below has an identical guard for switching from one topic to another during an
|
||
// active call -- but componentDidUpdate/componentSetup never runs on an actual unmount (leaving
|
||
// the messaging section entirely for another chapter, or on mobile switching to the conversation
|
||
// list while displayMobile). Without this, CallPanel's own componentWillUnmount only tears down
|
||
// local media: it never notifies the peer or resets tinode-web.jsx's top-level callState/
|
||
// callTopic, which then stay stuck at CALL_STATE_IN_PROGRESS. Navigating back to the call's topic
|
||
// later remounts a "zombie" CallPanel -- its start() sees that stale CALL_STATE_IN_PROGRESS and
|
||
// takes the "we just accepted" branch, which never calls getUserMedia(): no local media, every
|
||
// control disabled, only hang-up works.
|
||
if (this.state.rtcPanel) {
|
||
this.handleCallHangup(this.state.topic, this.props.callSeq);
|
||
}
|
||
if (this.messagesScroller) {
|
||
this.messagesScroller.removeEventListener('scroll', this.handleScrollEvent);
|
||
}
|
||
window.clearTimeout(this.toastTimer);
|
||
|
||
// Flush all notifications.
|
||
this.clearNotificationQueue();
|
||
|
||
// Drag and drop events
|
||
if (this.dndRef) {
|
||
this.dndRef.removeEventListener('dragstart', this.handleDragStart);
|
||
this.dndRef.removeEventListener('dragenter', this.handleDragIn);
|
||
this.dndRef.removeEventListener('dragleave', this.handleDragOut);
|
||
this.dndRef.removeEventListener('dragover', this.handleDrag);
|
||
this.dndRef.removeEventListener('drop', this.handleDrop);
|
||
}
|
||
}
|
||
|
||
componentDidUpdate(prevProps, prevState) {
|
||
// Scroll last message into view on component update e.g. on message received
|
||
// or vertical shrinking.
|
||
if (this.messagesScroller &&
|
||
(prevState.topic != this.state.topic || prevState.maxSeqId != this.state.maxSeqId ||
|
||
prevState.minSeqId != this.state.minSeqId)) {
|
||
// New message.
|
||
if (this.state.scrollPosition < SHOW_GO_TO_LAST_DIST) {
|
||
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight -
|
||
this.state.scrollPosition - this.messagesScroller.offsetHeight;
|
||
}
|
||
}
|
||
|
||
if (!this.props.applicationVisible) {
|
||
// If application is not visible, flush all unsent 'read' notifications.
|
||
this.clearNotificationQueue();
|
||
} else {
|
||
// Otherwise assume there are unread messages.
|
||
this.postReadNotification(0);
|
||
}
|
||
|
||
// Ch.7: jump to a message found via chat-history search (content-library-view.jsx's History),
|
||
// passed in as a ?jumpseq= hash param rather than a normal prop since the navigation that gets us
|
||
// here also has to change the *topic*, which content-library-view.jsx has no direct way to do.
|
||
if (this.props.jumpToSeq && this.props.jumpToSeq != prevProps.jumpToSeq) {
|
||
this.jumpToMessage(parseInt(this.props.jumpToSeq, 10));
|
||
}
|
||
|
||
this.componentSetup(prevProps, prevState);
|
||
}
|
||
|
||
componentSetup(prevProps, prevState) {
|
||
const topic = this.props.tinode ? this.props.tinode.getTopic(this.state.topic) : undefined;
|
||
if (this.state.topic != prevState.topic) {
|
||
if (prevState.topic && !Tinode.isNewGroupTopicName(prevState.topic)) {
|
||
this.leave(prevState.topic);
|
||
if (prevState.rtcPanel) {
|
||
this.handleCallHangup(prevState.topic, prevProps.callSeq);
|
||
}
|
||
}
|
||
|
||
if (topic) {
|
||
topic.onData = this.handleMessageUpdate;
|
||
topic.onAllMessagesReceived = this.handleAllMessagesReceived;
|
||
topic.onInfo = this.handleInfoReceipt;
|
||
topic.onMetaDesc = this.handleDescChange;
|
||
topic.onSubsUpdated = this.handleSubsUpdated;
|
||
topic.onPres = this.handleSubsUpdated;
|
||
topic.onAuxUpdated = this.handleAuxUpdate;
|
||
}
|
||
|
||
this.mentionedUsers = [];
|
||
this.loadRelationshipContext(topic);
|
||
this.loadGroupContext(topic);
|
||
this.loadDraft(topic);
|
||
}
|
||
|
||
if (topic) {
|
||
if ((this.state.topic != prevState.topic) || (this.props.myUserId && !prevProps.myUserId)) {
|
||
// Don't immediately subscribe to a new p2p topic, wait for the first message.
|
||
const newTopic = (this.props.newTopicParams && this.props.newTopicParams._topicName == this.props.topic);
|
||
if (topic.isP2PType() && newTopic && !IMMEDIATE_P2P_SUBSCRIPTION) {
|
||
topic.getMeta(topic.startMetaQuery().withDesc().build());
|
||
} else if (this.props.myUserId) {
|
||
this.subscribe(topic);
|
||
}
|
||
} else if (topic.isSubscribed() && this.state.isReader && !prevState.isReader) {
|
||
// If reader status has changed and data became available.
|
||
topic.getMeta(topic.startMetaQuery().withLaterData().build());
|
||
} else if (!topic.isSubscribed() && this.props.ready && !prevProps.ready) {
|
||
// Connection restored (e.g. wake from sleep): resubscribe to the currently open topic.
|
||
this.subscribe(topic);
|
||
}
|
||
}
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState) {
|
||
let nextState = {};
|
||
if (!nextProps.topic) {
|
||
// Default state: no topic.
|
||
nextState = {
|
||
minSeqId: -1,
|
||
maxSeqId: -1,
|
||
latestClearId: -1,
|
||
onlineSubs: [],
|
||
topic: null,
|
||
title: '',
|
||
avatar: null,
|
||
isVerified: false,
|
||
isStaff: false,
|
||
isDangerous: false,
|
||
deleted: false,
|
||
docPreview: null,
|
||
imagePreview: null,
|
||
imagePostview: null,
|
||
videoPreview: null,
|
||
videoPostview: null,
|
||
rtcPanel: null,
|
||
minimizedCallPanel: false,
|
||
typingIndicator: false,
|
||
scrollPosition: 0,
|
||
fetchingMessages: false,
|
||
peerMessagingDisabled: false,
|
||
channel: false,
|
||
reply: null,
|
||
contentToEdit: null,
|
||
showGoToLastButton: false,
|
||
dragging: false,
|
||
pins: [],
|
||
pinsLoaded: false,
|
||
selectedPin: 0,
|
||
subsVersion: 0,
|
||
relationshipContext: null,
|
||
groupRoles: null,
|
||
myGroupRole: null,
|
||
groupAnnouncement: null,
|
||
pendingJoinRequests: 0,
|
||
draftText: null,
|
||
draftVersion: 0
|
||
};
|
||
} else if (nextProps.topic != prevState.topic) {
|
||
const topic = nextProps.tinode.getTopic(nextProps.topic);
|
||
|
||
nextState = {
|
||
topic: nextProps.topic,
|
||
deleted: topic._deleted,
|
||
docPreview: null,
|
||
imagePreview: null,
|
||
imagePostview: null,
|
||
videoPreview: null,
|
||
videoPostview: null,
|
||
rtcPanel: null,
|
||
minimizedCallPanel: false,
|
||
typingIndicator: false,
|
||
scrollPosition: 0,
|
||
fetchingMessages: false,
|
||
showGoToLastButton: false,
|
||
contentToEdit: null,
|
||
dragging: false,
|
||
selectedPin: 0,
|
||
relationshipContext: null,
|
||
groupRoles: null,
|
||
myGroupRole: null,
|
||
groupAnnouncement: null,
|
||
pendingJoinRequests: 0,
|
||
draftText: null,
|
||
draftVersion: 0,
|
||
// MessagesView isn't remounted on topic switch (no `key={topic}` at the call site in
|
||
// tinode-web.jsx), so a pending risk-check dialog from the conversation just left would
|
||
// otherwise survive the switch -- confirming it would then send the old topic's message
|
||
// into whichever topic is now open, since doSend()'s `this.props.sendMessage` resolves the
|
||
// topic to send to at call time, not at the time the dialog was raised.
|
||
riskDialog: null
|
||
};
|
||
|
||
if (nextProps.forwardMessage) {
|
||
if (nextProps.forwardMessage.content) {
|
||
const content = nextProps.forwardMessage.content;
|
||
const size = content?.length || (content?.size || 0);
|
||
nextState.docPreview = {
|
||
object: content,
|
||
type: nextProps.forwardMessage.type,
|
||
size: size
|
||
};
|
||
} else {
|
||
// We are forwarding a message. Show preview.
|
||
nextState.reply = {
|
||
content: nextProps.forwardMessage.preview,
|
||
seq: null
|
||
};
|
||
}
|
||
} else {
|
||
nextState.reply = null;
|
||
}
|
||
|
||
if (topic) {
|
||
// Topic exists.
|
||
const subs = [];
|
||
|
||
if (nextProps.connected) {
|
||
topic.subscribers((sub) => {
|
||
if (sub.online && sub.user != nextProps.myUserId) {
|
||
subs.push(sub);
|
||
}
|
||
});
|
||
}
|
||
|
||
Object.assign(nextState, {
|
||
onlineSubs: subs
|
||
});
|
||
|
||
if (topic.isSelfType()) {
|
||
Object.assign(nextState, {
|
||
title: nextProps.intl.formatMessage(messages.self_topic_name),
|
||
avatar: true
|
||
});
|
||
} else if (topic.public) {
|
||
Object.assign(nextState, {
|
||
title: topicDisplayName(topic.name, topic.public, ''),
|
||
avatar: makeImageUrl(topic.public.photo)
|
||
});
|
||
} else {
|
||
Object.assign(nextState, {
|
||
title: '',
|
||
avatar: null
|
||
});
|
||
}
|
||
|
||
const peer = topic.p2pPeerDesc();
|
||
if (peer) {
|
||
Object.assign(nextState, {
|
||
peerMessagingDisabled: isPeerRestricted(peer.acs)
|
||
});
|
||
} else if (prevState.peerMessagingDisabled) {
|
||
Object.assign(nextState, {
|
||
peerMessagingDisabled: false
|
||
});
|
||
}
|
||
Object.assign(nextState, {
|
||
minSeqId: topic.minMsgSeq(),
|
||
maxSeqId: topic.maxMsgSeq(),
|
||
latestClearId: topic.maxClearId(),
|
||
channel: topic.isChannelType(),
|
||
pins: (topic.aux('pins') || []).slice(),
|
||
pinsLoaded: false
|
||
});
|
||
|
||
if (nextProps.callTopic == topic.name && shouldPresentCallPanel(nextProps.callState)) {
|
||
nextState.rtcPanel = nextProps.callTopic;
|
||
}
|
||
} else {
|
||
// Invalid topic.
|
||
Object.assign(nextState, {
|
||
minSeqId: -1,
|
||
maxSeqId: -1,
|
||
latestClearId: -1,
|
||
onlineSubs: [],
|
||
title: '',
|
||
avatar: null,
|
||
peerMessagingDisabled: false,
|
||
channel: false,
|
||
pins: [],
|
||
pinsLoaded: false
|
||
});
|
||
}
|
||
} else {
|
||
// We are still in same topic. Show the call panel if necessary.
|
||
if (nextProps.callTopic == prevState.topic && !prevState.rtcPanel &&
|
||
shouldPresentCallPanel(nextProps.callState)) {
|
||
nextState.rtcPanel = nextProps.callTopic;
|
||
}
|
||
}
|
||
|
||
if (nextProps.acs) {
|
||
if (nextProps.acs.isWriter() != prevState.isWriter) {
|
||
nextState.isWriter = !prevState.isWriter;
|
||
}
|
||
if (nextProps.acs.isReader() != prevState.isReader) {
|
||
nextState.isReader = !prevState.isReader;
|
||
}
|
||
if (nextProps.acs.isAdmin() != prevState.isAdmin) {
|
||
nextState.isAdmin = !prevState.isAdmin;
|
||
}
|
||
if (!nextProps.acs.isReader('given') != prevState.readingBlocked) {
|
||
nextState.readingBlocked = !prevState.readingBlocked;
|
||
}
|
||
if (nextProps.acs.isSharer() != prevState.isSharer) {
|
||
nextState.isSharer = !prevState.isSharer;
|
||
}
|
||
} else {
|
||
if (prevState.isWriter) {
|
||
nextState.isWriter = false;
|
||
}
|
||
if (prevState.isReader) {
|
||
nextState.isReader = false;
|
||
}
|
||
if (prevState.isAdmin) {
|
||
nextState.isAdmin = false;
|
||
}
|
||
if (!prevState.readingBlocked) {
|
||
nextState.readingBlocked = true;
|
||
}
|
||
if (prevState.isSharer) {
|
||
nextState.isSharer = false;
|
||
}
|
||
}
|
||
|
||
if (isUnconfirmed(nextProps.acs) == !prevState.unconformed) {
|
||
nextState.unconfirmed = !prevState.unconformed;
|
||
}
|
||
|
||
// Clear subscribers online when there is no connection.
|
||
if (!nextProps.connected && prevState.onlineSubs && prevState.onlineSubs.length > 0) {
|
||
nextState.onlineSubs = [];
|
||
}
|
||
|
||
return nextState;
|
||
}
|
||
|
||
subscribe(topic) {
|
||
if (topic.isSubscribed() || !this.props.ready) {
|
||
return;
|
||
}
|
||
|
||
// Is this a new topic?
|
||
const newTopic = (this.props.newTopicParams && this.props.newTopicParams._topicName == this.props.topic);
|
||
// Don't request the tags. They are useless unless the user
|
||
// is the owner and is editing the topic.
|
||
let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub().withAux();
|
||
if (this.state.isReader || newTopic) {
|
||
// Reading is either permitted or we don't know because it's a new topic. Ask for messages.
|
||
getQuery = getQuery.withLaterData(MESSAGES_PAGE);
|
||
if (this.state.isReader) {
|
||
getQuery = getQuery.withLaterDel();
|
||
}
|
||
// And show "loading" spinner.
|
||
this.setState({ fetchingMessages: true });
|
||
}
|
||
|
||
const setQuery = newTopic ? this.props.newTopicParams : undefined;
|
||
topic.subscribe(getQuery.build(), setQuery)
|
||
.then(ctrl => {
|
||
if (ctrl.code == 303) {
|
||
// Redirect to another topic requested.
|
||
HashNavigation.navigateTo(HashNavigation.setUrlTopic('', ctrl.params.topic));
|
||
return;
|
||
}
|
||
if (this.state.topic != ctrl.topic) {
|
||
this.setState({topic: ctrl.topic});
|
||
}
|
||
if (this.state.deleted) {
|
||
this.setState({deleted: false});
|
||
}
|
||
this.props.onNewTopicCreated(this.props.topic, ctrl.topic);
|
||
// If there are unsent messages (except hard-failed and video call messages),
|
||
// try sending them now. Hard-failed and unsent video call messages will be dropped.
|
||
let discard = [];
|
||
topic.queuedMessages(pub => {
|
||
if (pub._sending) {
|
||
return;
|
||
}
|
||
if (pub._fatal || (pub.head && pub.head.webrtc)) {
|
||
// Filter out unsent failed & video call messages.
|
||
discard.push(pub.seq);
|
||
return;
|
||
}
|
||
if (topic.isSubscribed()) {
|
||
this.retrySend(pub);
|
||
}
|
||
});
|
||
if (discard.length > 0) {
|
||
topic.delMessagesList(discard, true);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.error("Failed subscription to", this.state.topic, err);
|
||
this.props.onError(err.message, 'err');
|
||
const blankState = MessagesView.getDerivedStateFromProps({}, {});
|
||
blankState.title = this.props.intl.formatMessage(messages.not_found);
|
||
this.setState(blankState);
|
||
});
|
||
}
|
||
|
||
leave(oldTopicName) {
|
||
if (!oldTopicName || !this.props.tinode.isTopicCached(oldTopicName)) {
|
||
return;
|
||
}
|
||
|
||
const oldTopic = this.props.tinode.getTopic(oldTopicName);
|
||
if (oldTopic && oldTopic.isSubscribed()) {
|
||
oldTopic.leave(false)
|
||
.catch(_ => { /* do nothing here */ })
|
||
.finally(_ => {
|
||
// We don't care if the request succeeded or failed.
|
||
// The topic is dead regardless.
|
||
this.setState({fetchingMessages: false});
|
||
oldTopic.onData = undefined;
|
||
oldTopic.onAllMessagesReceived = undefined;
|
||
oldTopic.onInfo = undefined;
|
||
oldTopic.onMetaDesc = undefined;
|
||
oldTopic.onSubsUpdated = undefined;
|
||
oldTopic.onPres = undefined;
|
||
oldTopic.onAuxUpdated = undefined;
|
||
});
|
||
}
|
||
}
|
||
|
||
// Don't use React.createRef as the ref.current is not available in componentDidMount in this component.
|
||
handleScrollReference(node) {
|
||
if (node) {
|
||
node.addEventListener('scroll', this.handleScrollEvent);
|
||
this.messagesScroller = node;
|
||
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight -
|
||
this.state.scrollPosition - this.messagesScroller.offsetHeight;
|
||
}
|
||
}
|
||
|
||
// Get older messages and show/hide [go to latest message] button.
|
||
handleScrollEvent(event) {
|
||
const pos = event.target.scrollHeight - event.target.scrollTop - event.target.offsetHeight;
|
||
this.setState({
|
||
scrollPosition: pos,
|
||
// Show [go to latest message] if far enough from bottom and scrolling down.
|
||
showGoToLastButton: (pos > SHOW_GO_TO_LAST_DIST) && (pos < this.state.scrollPosition),
|
||
});
|
||
|
||
if (this.state.fetchingMessages || this.processingScrollEvent) {
|
||
return;
|
||
}
|
||
|
||
if (event.target.scrollTop <= FETCH_PAGE_TRIGGER) {
|
||
const topic = this.props.tinode.getTopic(this.state.topic);
|
||
if (topic && topic.isSubscribed()) {
|
||
this.processingScrollEvent = true;
|
||
const {min, max} = this.getVisibleMessageRange(event.target.getBoundingClientRect());
|
||
const gaps = topic.msgHasMoreMessages(min, max, false);
|
||
if (gaps.length > 0) {
|
||
this.setState({fetchingMessages: true}, _ => {
|
||
topic.getMessagesPage(MESSAGES_PAGE, gaps, min, max)
|
||
.catch(err => this.props.onError(err.message, 'err'))
|
||
.finally(_ => this.setState({fetchingMessages: false}));
|
||
});
|
||
}
|
||
}
|
||
}
|
||
this.processingScrollEvent = false;
|
||
}
|
||
|
||
/* Mount drag and drop events */
|
||
mountDnDEvents(dnd) {
|
||
if (dnd) {
|
||
dnd.addEventListener('dragstart', this.handleDragStart);
|
||
dnd.addEventListener('dragenter', this.handleDragIn);
|
||
dnd.addEventListener('dragleave', this.handleDragOut);
|
||
dnd.addEventListener('dragover', this.handleDrag);
|
||
dnd.addEventListener('drop', this.handleDrop);
|
||
this.dndRef = dnd;
|
||
}
|
||
}
|
||
|
||
goToLatestMessage() {
|
||
this.setState({scrollPosition: 0});
|
||
if (this.messagesScroller) {
|
||
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.messagesScroller.offsetHeight;
|
||
}
|
||
}
|
||
|
||
handleDescChange(desc) {
|
||
if (Tinode.isSelfTopicName(this.props.topic)) {
|
||
this.setState({
|
||
title: this.props.intl.formatMessage(messages.self_topic_name),
|
||
avatar: true
|
||
});
|
||
} else if (desc.public) {
|
||
this.setState({
|
||
title: topicDisplayName(this.props.topic, desc.public, ''),
|
||
avatar: makeImageUrl(desc.public.photo)
|
||
});
|
||
} else {
|
||
this.setState({
|
||
title: '',
|
||
avatar: null
|
||
});
|
||
}
|
||
|
||
if (desc.acs) {
|
||
this.setState({
|
||
isWriter: desc.acs.isWriter(),
|
||
isReader: desc.acs.isReader(),
|
||
isAdmin: desc.acs.isAdmin(),
|
||
readingBlocked: !desc.acs.isReader('given'),
|
||
unconfirmed: isUnconfirmed(desc.acs),
|
||
});
|
||
}
|
||
}
|
||
|
||
postReadNotification(seq) {
|
||
// Ignore notifications if the app is invisible or topic is not yet available.
|
||
if (!this.props.applicationVisible || !this.state.topic) {
|
||
return;
|
||
}
|
||
|
||
// Set up the timer if it's not running already.
|
||
if (!this.readNotificationTimer) {
|
||
this.readNotificationTimer = setInterval(_ => {
|
||
if (this.readNotificationQueue.length == 0) {
|
||
// Shut down the timer if the queue is empty.
|
||
clearInterval(this.readNotificationTimer);
|
||
this.readNotificationTimer = null;
|
||
return;
|
||
}
|
||
|
||
let seq = -1;
|
||
while (this.readNotificationQueue.length > 0) {
|
||
const n = this.readNotificationQueue[0];
|
||
if (n.topicName != this.state.topic) {
|
||
// Topic has changed. Drop the notification.
|
||
this.readNotificationQueue.shift();
|
||
continue;
|
||
}
|
||
|
||
const now = new Date();
|
||
if (n.sendAt <= now) {
|
||
// Remove expired notification from queue.
|
||
this.readNotificationQueue.shift();
|
||
if (n.seq == 0 || Tinode.isServerAssignedSeq(n.seq)) {
|
||
seq = Math.max(seq, n.seq);
|
||
}
|
||
} else {
|
||
break;
|
||
}
|
||
}
|
||
|
||
// Send only one notification for the whole batch of messages.
|
||
if (seq >= 0) {
|
||
const topic = this.props.tinode.getTopic(this.state.topic);
|
||
if (topic) {
|
||
try {
|
||
topic.noteRead(seq);
|
||
} catch (err) {
|
||
console.error("Failed to send read notification", err);
|
||
}
|
||
}
|
||
}
|
||
}, NOTIFICATION_EXEC_INTERVAL);
|
||
}
|
||
|
||
const now = new Date();
|
||
this.readNotificationQueue.push({
|
||
topicName: this.state.topic,
|
||
seq: seq,
|
||
sendAt: now.setMilliseconds(now.getMilliseconds() + READ_DELAY)
|
||
});
|
||
}
|
||
|
||
// Clear notification queue and timer.
|
||
clearNotificationQueue() {
|
||
this.readNotificationQueue = [];
|
||
if (this.readNotificationTimer) {
|
||
clearInterval(this.readNotificationTimer);
|
||
this.readNotificationTimer = null;
|
||
}
|
||
}
|
||
|
||
handleSubsUpdated() {
|
||
if (this.state.topic) {
|
||
const subs = [];
|
||
const topic = this.props.tinode.getTopic(this.state.topic);
|
||
topic.subscribers(sub => {
|
||
if (sub.online && sub.user != this.props.myUserId) {
|
||
subs.push(sub);
|
||
}
|
||
});
|
||
const newState = {onlineSubs: subs, subsVersion: this.state.subsVersion + 1};
|
||
const peer = topic.p2pPeerDesc();
|
||
if (peer) {
|
||
Object.assign(newState, {
|
||
peerMessagingDisabled: isPeerRestricted(peer.acs)
|
||
});
|
||
} else if (this.state.peerMessagingDisabled) {
|
||
Object.assign(newState, {
|
||
peerMessagingDisabled: false
|
||
});
|
||
}
|
||
this.setState(newState);
|
||
}
|
||
}
|
||
|
||
// The 'msg' could be false-ish if some message ranges were deleted.
|
||
handleMessageUpdate(msg) {
|
||
if (!this.state.topic) {
|
||
return;
|
||
}
|
||
const topic = this.props.tinode.getTopic(this.state.topic);
|
||
if (!msg) {
|
||
// msg could be null if one or more messages were deleted.
|
||
// Updating state to force redraw.
|
||
this.setState({latestClearId: topic.maxClearId()});
|
||
return;
|
||
}
|
||
|
||
clearTimeout(this.keyPressTimer)
|
||
this.setState({maxSeqId: topic.maxMsgSeq(), minSeqId: topic.minMsgSeq(), typingIndicator: false}, _ => {
|
||
// Scroll to the bottom if the message is added to the end of the message
|
||
// list if already at the bottom, otherwise show [go to latest] button.
|
||
// Implemented as a callback to be sure the scroll height has been updated.
|
||
if (topic.isNewMessage(msg.seq)) {
|
||
if (this.state.scrollPosition > SHOW_GO_TO_LAST_DIST) {
|
||
this.setState({showGoToLastButton: true});
|
||
} else {
|
||
this.goToLatestMessage();
|
||
}
|
||
} else {
|
||
if (this.messagesScroller) {
|
||
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition -
|
||
this.messagesScroller.offsetHeight;
|
||
}
|
||
}
|
||
});
|
||
|
||
// Aknowledge messages except own messages. They are
|
||
// automatically assumed to be read and recived.
|
||
const status = topic.msgStatus(msg, true);
|
||
if (status >= Tinode.MESSAGE_STATUS_SENT && msg.from != this.props.myUserId) {
|
||
this.postReadNotification(msg.seq);
|
||
}
|
||
}
|
||
|
||
handleAllMessagesReceived(count) {
|
||
this.setState({fetchingMessages: false});
|
||
if (!count) {
|
||
// All messages received. Nothing left to receive.
|
||
const topic = this.props.tinode.getTopic(this.state.topic);
|
||
if (topic) {
|
||
// Send read notification for the absolute last message.
|
||
this.postReadNotification(topic.seq);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Load pinned message too (if any);
|
||
if (!this.state.pinsLoaded) {
|
||
// This needs to be guarded to avoid an infinite loop.
|
||
// The loop may happen if some pinned messages are deleted.
|
||
const topic = this.props.tinode.getTopic(this.state.topic);
|
||
this.setState({pinsLoaded: true}, _ => {
|
||
topic.getPinnedMessages();
|
||
});
|
||
} else {
|
||
this.setState({pinsLoaded: false});
|
||
}
|
||
}
|
||
|
||
handleAuxUpdate(aux) {
|
||
const pins = (aux['pins'] || []).slice();
|
||
let selectedPin = this.state.selectedPin;
|
||
if (pins.length > this.state.pins.length) {
|
||
// New pins added, show the latest.
|
||
selectedPin = 0;
|
||
} else if (selectedPin >= pins.length) {
|
||
selectedPin = Math.max(0, pins.length - 1);
|
||
}
|
||
this.setState({pins: pins, selectedPin: selectedPin});
|
||
}
|
||
|
||
handleInfoReceipt(info) {
|
||
switch (info.what) {
|
||
case 'kp': {
|
||
clearTimeout(this.keyPressTimer);
|
||
this.keyPressTimer = setTimeout(_ => this.setState({typingIndicator: false}), KEYPRESS_DELAY + 1000);
|
||
if (!this.state.typingIndicator) {
|
||
this.setState({typingIndicator: true});
|
||
}
|
||
break;
|
||
}
|
||
case 'read':
|
||
case 'recv':
|
||
// Redraw due to changed recv/read status.
|
||
this.forceUpdate();
|
||
break;
|
||
default:
|
||
console.info("Other change in topic: ", info.what);
|
||
}
|
||
}
|
||
|
||
handleExpandMedia(content) {
|
||
if (!content) {
|
||
return;
|
||
}
|
||
|
||
if (content.video) {
|
||
this.setState({videoPostview: content});
|
||
} else {
|
||
this.setState({imagePostview: content});
|
||
}
|
||
}
|
||
|
||
handleClosePreview() {
|
||
if (this.state.imagePreview && this.state.imagePreview.url) {
|
||
URL.revokeObjectURL(this.state.imagePreview.url);
|
||
}
|
||
if (this.state.videoPreview && this.state.videoPreview.url) {
|
||
URL.revokeObjectURL(this.state.videoPreview.url);
|
||
}
|
||
this.setState({
|
||
imagePostview: null,
|
||
imagePreview: null,
|
||
docPreview: null,
|
||
videoPreview: null,
|
||
videoPostview: null,
|
||
});
|
||
this.props.onCancelForwardMessage();
|
||
}
|
||
|
||
handleFormResponse(action, text, data) {
|
||
if (action == 'pub') {
|
||
this.sendMessage(Drafty.attachJSON(Drafty.parse(text), data));
|
||
} else if (action == 'url') {
|
||
const url = new URL(data.ref);
|
||
const params = url.searchParams;
|
||
for (let key in data.resp) {
|
||
if (data.resp.hasOwnProperty(key)) {
|
||
params.set(key, data.resp[key]);
|
||
}
|
||
}
|
||
['name', 'seq'].forEach(key => {
|
||
if (data[key]) {
|
||
params.set(key, data[key]);
|
||
}
|
||
});
|
||
params.set('uid', this.props.myUserId);
|
||
params.set('topic', this.state.topic);
|
||
url.search = params;
|
||
window.open(url, '_blank');
|
||
} else {
|
||
console.info("Unknown action in form", action);
|
||
}
|
||
}
|
||
|
||
handleContextClick(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
this.props.showContextMenu({ topicName: this.state.topic, y: e.pageY, x: e.pageX });
|
||
}
|
||
|
||
handleShowMessageContextMenu(params, messageSpecificMenuItems) {
|
||
if (params.userFrom == 'chan') {
|
||
params.userFrom = this.state.topic;
|
||
params.userName = this.state.title;
|
||
}
|
||
params.topicName = this.state.topic;
|
||
let menuItems = messageSpecificMenuItems || [];
|
||
const topic = this.props.tinode.getTopic(params.topicName);
|
||
if (topic) {
|
||
// Edit (Ch.4): chat-message.jsx already gated 'menu_item_edit' on writer + non-attachment
|
||
// content, but has no access to the server-configured edit window (that's session-level state
|
||
// living here, not a per-message prop) -- unlike recall just below, this was never actually
|
||
// filtered by age, so an edit attempt on a message well past the window would only fail at
|
||
// send time instead of never showing the option. Same window-check shape as recall's, just
|
||
// removing the item after the fact instead of adding it, since base eligibility already ran.
|
||
const editWindow = this.state.messagePolicy ? this.state.messagePolicy.edit_window_seconds : 0;
|
||
if (menuItems.includes('menu_item_edit') && !(editWindow > 0 && params.timestamp &&
|
||
params.timestamp.getTime() > (new Date().getTime() - editWindow * 1000))) {
|
||
menuItems = menuItems.filter(item => item !== 'menu_item_edit');
|
||
}
|
||
menuItems.push('menu_item_copy', 'menu_item_favorite');
|
||
// Recall (Ch.4): own message, real seq, and still inside the server-configured window.
|
||
// Distinct from delete -- see context-menu.jsx recallOwnMessage for why both exist.
|
||
const recallWindow = this.state.messagePolicy ? this.state.messagePolicy.recall_window_seconds : 0;
|
||
if (params.userFrom == this.props.myUserId && params.seq > 0 && recallWindow > 0 && params.timestamp &&
|
||
params.timestamp.getTime() > (new Date().getTime() - recallWindow * 1000)) {
|
||
menuItems.push('menu_item_recall');
|
||
}
|
||
// Self -> (1) always hard-delete with [Delete] title.
|
||
// P2P -> (1) hard-delete if allowed and not too old, (2) always soft-delete.
|
||
// Group -> (1) hard-delete if allowed and not too old or owner, (2) always soft-delete.
|
||
if (topic.isSelfType()) {
|
||
// Hard-delete with plain [Delete] title.
|
||
menuItems.push('message_delete_generic');
|
||
} else {
|
||
if (!topic.isChannelType()) {
|
||
// P2P or normal group: always allow to soft-delete.
|
||
menuItems.push('message_delete');
|
||
}
|
||
|
||
const acs = topic.getAccessMode();
|
||
if (acs && acs.isDeleter()) {
|
||
// Owner can always hard-delete regardless of age.
|
||
let canDelete = acs.isOwner();
|
||
if (!canDelete) {
|
||
// Not owner: check message age if configured on the server.
|
||
const maxDelAge = this.props.tinode.getServerParam(Tinode.MSG_DELETE_AGE, 0) | 0;
|
||
// Make sure the message is not too old. This check is here just to make the UI
|
||
// more user-friendly. The server will enforce the limit regardless of this.
|
||
canDelete = maxDelAge == 0 || (maxDelAge > 0 && params.timestamp ?
|
||
params.timestamp.getTime() > (new Date().getTime() - maxDelAge * 1000) : false);
|
||
}
|
||
if (canDelete) {
|
||
// [Delete for All] title.
|
||
menuItems.push('message_delete_hard');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
menuItems.push('menu_item_select');
|
||
this.props.showContextMenu(params, menuItems);
|
||
}
|
||
|
||
handleNewChatAcceptance(action) {
|
||
this.props.onNewChat(this.state.topic, action);
|
||
}
|
||
|
||
handleEnablePeer(e) {
|
||
e.preventDefault();
|
||
this.props.onChangePermissions(this.state.topic, DEFAULT_P2P_ACCESS_MODE, this.state.topic);
|
||
}
|
||
|
||
// Fetch the real friend/block/pending relationship state for a 1:1 topic so the UI can explain
|
||
// (instead of silently disabling) why sending is restricted. Best-effort: a failed fetch just
|
||
// leaves relationshipContext null and the existing isWriter-based disable stays in effect.
|
||
loadRelationshipContext(topic) {
|
||
if (!topic || !topic.isP2PType()) {
|
||
return;
|
||
}
|
||
const topicName = topic.name;
|
||
getConversationContext(topicName).then(data => {
|
||
if (this.state.topic == topicName) {
|
||
this.setState({relationshipContext: data});
|
||
}
|
||
}).catch(_ => {});
|
||
}
|
||
|
||
// Ch.6: role badges (docs/images/群标识.png) and the announcement/join-request banners at the top of a
|
||
// group chat (docs/images/群公告状态.png, 新邀请进群申请.png) all need data no P2P topic has -- fetch it
|
||
// once per group-topic-load, same best-effort pattern as loadRelationshipContext above. Every `topic`
|
||
// field these Ch.6 endpoints return is a real grp-prefixed native Tinode name (verified against the Go
|
||
// source), so there's no Ch.5-style translation needed anywhere here.
|
||
loadGroupContext(topic) {
|
||
if (!topic || !topic.isGroupType() || topic.isChannelType()) {
|
||
return;
|
||
}
|
||
const topicName = topic.name;
|
||
getGroupMembers(topicName).then(data => {
|
||
if (this.state.topic != topicName) {
|
||
return;
|
||
}
|
||
const roles = {};
|
||
(data.items || []).forEach(m => { roles[m.user_id] = m.role; });
|
||
this.setState({groupRoles: roles, myGroupRole: roles[this.props.myUserId] || null});
|
||
// Pending join requests can only be resolved by an admin/owner -- only they can act on the banner,
|
||
// and only they pass requireIMGroupMember's IsAdmin() check on the list endpoint itself.
|
||
if (roles[this.props.myUserId] == 'owner' || roles[this.props.myUserId] == 'admin') {
|
||
getGroupJoinRequests(topicName, 'pending').then(reqData => {
|
||
if (this.state.topic == topicName) {
|
||
this.setState({pendingJoinRequests: (reqData.items || []).length});
|
||
}
|
||
}).catch(_ => {});
|
||
}
|
||
}).catch(_ => {});
|
||
getLatestGroupAnnouncement(topicName).then(data => {
|
||
if (this.state.topic == topicName) {
|
||
this.setState({groupAnnouncement: (data && data.content) ? data : null});
|
||
}
|
||
}).catch(_ => {});
|
||
}
|
||
|
||
// 4.2-4.3 @提醒：只对群话题开放（私聊提@没有意义，也没有可选的"其他成员"）。返回给
|
||
// send-message.jsx 的选择器渲染，真正的 uid 解析在 mentionSelected 里记下来，供发送时
|
||
// applyMentionResolution 使用。
|
||
mentionSearch(query) {
|
||
const topic = this.props.tinode ? this.props.tinode.getTopic(this.state.topic) : null;
|
||
if (!topic || !topic.isGroupType()) {
|
||
return Promise.resolve([]);
|
||
}
|
||
return getGroupMembers(this.state.topic, {mentionable: true, query}).then(data => data.items || []);
|
||
}
|
||
|
||
mentionSelected(uid, name) {
|
||
this.mentionedUsers = (this.mentionedUsers || []).filter(m => m.name !== name);
|
||
this.mentionedUsers.push({uid, name});
|
||
}
|
||
|
||
// 4.1 跨话题草稿：话题一切换就去问服务端这个会话有没有存过草稿。原生话题名（P2P 用对方
|
||
// user_id）直接可用，接口内部自己会做订阅存在性校验，不需要额外归一化。
|
||
loadDraft(topic) {
|
||
if (!topic) {
|
||
return;
|
||
}
|
||
const topicName = topic.name;
|
||
getTopicDraft(topicName).then(data => {
|
||
if (this.state.topic != topicName) {
|
||
return;
|
||
}
|
||
this.setState({draftText: data.content || '', draftVersion: data.version || 0});
|
||
}).catch(_ => {});
|
||
}
|
||
|
||
// 输入框每次变化都会调这个（不在这里节流——防抖延迟统一放这一处，跟日报/月报草稿已有的
|
||
// 600ms 防抖是同一个数值，方便以后统一调整）。编辑已有消息、转发预填内容这两种情况下
|
||
// SendMessage 的文本框也会触发 onChange，但那些不是"新写的草稿"，不应该覆盖真正的草稿。
|
||
//
|
||
// 定时器按话题分开存（this.draftSaveTimers 是个 map），不能像原来那样用单个共享句柄——
|
||
// 那样话题A打字触发的600ms保存，会在300ms后切到话题B打字时被 clearTimeout 直接取消掉，
|
||
// A刚打的字就再也不会发给服务器了。
|
||
//
|
||
// version 在这里（调用的当下，this.state.topic 必然还是 topicName，因为 onMessageChange
|
||
// 只有当前激活话题的 SendMessage 实例会触发）同步捕获进闭包，不能等定时器触发时才去读
|
||
// this.state.draftVersion——那时用户很可能已经切到别的话题，届时重新读到的要么是无关话题
|
||
// 的版本号，要么在判断不匹配时退化成硬编码的 0。后端 PUT .../draft 对 version=0 是"无条件
|
||
// 跳过乐观锁校验直接覆盖"而不是"仅当草稿真的不存在时才创建"（见
|
||
// docs/IM-后端问题清单-2026-09-04.md），这个 0 一旦被真的发出去，可能无声覆盖掉这段时间里
|
||
// 别的标签页/设备写入的更新草稿。
|
||
handleComposerChange(text) {
|
||
if (this.state.reply && this.state.reply.editing) {
|
||
return;
|
||
}
|
||
if (this.props.forwardMessage) {
|
||
return;
|
||
}
|
||
const topicName = this.state.topic;
|
||
if (!topicName) {
|
||
return;
|
||
}
|
||
const version = this.state.draftVersion || 0;
|
||
this.draftSaveTimers = this.draftSaveTimers || {};
|
||
if (this.draftSaveTimers[topicName]) {
|
||
window.clearTimeout(this.draftSaveTimers[topicName]);
|
||
}
|
||
this.draftSaveTimers[topicName] = window.setTimeout(() => {
|
||
delete this.draftSaveTimers[topicName];
|
||
updateTopicDraft(topicName, text, [], version).then(d => {
|
||
if (this.state.topic == topicName) {
|
||
this.setState({draftVersion: d.version});
|
||
}
|
||
}).catch(_ => {});
|
||
}, 600);
|
||
}
|
||
|
||
// 消息真的发出去之后，把服务端存的草稿清空——不然重新打开这个会话会看到已经发送过的旧文字。
|
||
// 单纯等下一次防抖自然把空字符串存上去也能达到同样效果，但那样在"发送后立刻切走"这个真实
|
||
// 会发生的场景里会有一个几百毫秒的窗口，草稿还是旧内容，不如发送成功后立刻清。
|
||
// knownVersion 由调用方（sendMessage）在发送发起的那一刻同步捕获传入，原因同上——避免在
|
||
// 发送成功回调触发时（用户很可能已经切换话题）重新派生出不可靠的版本号。
|
||
clearDraft(topicName, knownVersion) {
|
||
if (this.draftSaveTimers && this.draftSaveTimers[topicName]) {
|
||
window.clearTimeout(this.draftSaveTimers[topicName]);
|
||
delete this.draftSaveTimers[topicName];
|
||
}
|
||
const version = knownVersion != null ? knownVersion :
|
||
(this.state.topic == topicName) ? (this.state.draftVersion || 0) : 0;
|
||
updateTopicDraft(topicName, '', [], version).then(d => {
|
||
if (this.state.topic == topicName) {
|
||
this.setState({draftText: '', draftVersion: d.version});
|
||
}
|
||
}).catch(_ => {});
|
||
}
|
||
|
||
// Note: setUrlSidePanel only overwrites path[0] -- called with window.location.hash while a topic is
|
||
// open (path[1] is the open topic), it leaves that segment in place, producing e.g.
|
||
// "#group-announcement-detail/grpXXX?topic=grpXXX". handleHashRoute then re-parses path[1] as a topic
|
||
// selector on every hashchange, fighting with the sidepanel that's trying to open and leaving the
|
||
// whole view blank. Build the target hash from an empty path instead of the current one.
|
||
handleShowAnnouncement(e) {
|
||
e.preventDefault();
|
||
// `from=chat` lets Announcement (group-management-view.jsx) tell this entry point apart from
|
||
// the one via group-settings -- both land on the identical path[0]/topic hash otherwise, so
|
||
// without it the "back" button can't know whether to return to group-settings or to this chat.
|
||
let hash = HashNavigation.addUrlParam(HashNavigation.setUrlSidePanel('', 'group-announcement-detail'), 'topic', this.state.topic);
|
||
hash = HashNavigation.addUrlParam(hash, 'from', 'chat');
|
||
HashNavigation.navigateTo(hash);
|
||
}
|
||
|
||
handleShowJoinRequests(e) {
|
||
e.preventDefault();
|
||
// `from=chat` mirrors handleShowAnnouncement above -- lets JoinRequests (group-management-view.jsx)
|
||
// return to this chat instead of always landing on group-governance.
|
||
let hash = HashNavigation.addUrlParam(HashNavigation.setUrlSidePanel('', 'group-join-requests'), 'topic', this.state.topic);
|
||
hash = HashNavigation.addUrlParam(hash, 'from', 'chat');
|
||
HashNavigation.navigateTo(hash);
|
||
}
|
||
|
||
handleSendFriendVerification(e) {
|
||
e.preventDefault();
|
||
// Same stray-path[1] hazard as handleShowAnnouncement above (build from an empty base, not the
|
||
// current hash, since a topic is open) -- this one additionally never set `uid`, which the
|
||
// friend-verification page needs (contact-management-view.jsx's Verification reads hashParams.uid)
|
||
// to know who the verification is for; for a P2P topic that's simply the topic name itself.
|
||
HashNavigation.navigateTo(HashNavigation.addUrlParam(
|
||
HashNavigation.setUrlSidePanel('', 'friend-verification'), 'uid', this.state.topic));
|
||
}
|
||
|
||
showToast(text) {
|
||
this.setState({toast: text});
|
||
window.clearTimeout(this.toastTimer);
|
||
// Matches div.toast.show's own fadein(0.5s) + hold(2.5s) + fadeout(0.5s) animation length,
|
||
// so the class is removed right as the CSS fadeout finishes instead of cutting it short.
|
||
this.toastTimer = window.setTimeout(() => this.setState({toast: null}), 3500);
|
||
}
|
||
|
||
handleBatchDelete() {
|
||
const topic = this.props.tinode.getTopic(this.state.topic);
|
||
if (!topic || !this.props.selectedSeqs.length) {
|
||
return;
|
||
}
|
||
topic.delMessagesList(this.props.selectedSeqs.slice(), true).then(_ => {
|
||
this.props.onExitSelectMode();
|
||
}).catch(err => {
|
||
this.props.onError(err.message, 'err');
|
||
});
|
||
}
|
||
|
||
// Per docs/images/多选-选中对话内容-收藏成功.png the selection stays visible behind the toast --
|
||
// unlike delete, favoriting doesn't remove the messages, so there's no reason to exit select mode.
|
||
handleBatchFavorite() {
|
||
if (!this.props.selectedSeqs.length) {
|
||
return;
|
||
}
|
||
const topicName = this.state.topic;
|
||
const seqs = this.props.selectedSeqs.slice();
|
||
favoriteMessages(seqs.map(seq => ({topic: topicName, seq}))).then(() => {
|
||
// `result.failed` can't be trusted here: the batch-create endpoint reuses one request-level
|
||
// Idempotency-Key across every message in the batch (docs/IM-后端问题清单-2026-09-04.md,
|
||
// 新增1), so every item after the first silently no-ops via ON DUPLICATE KEY UPDATE and gets
|
||
// folded into `existing_count` -- indistinguishable, from this response alone, from a message
|
||
// that really was already favorited. Re-reading the actual favorites list and checking which
|
||
// of the messages we just asked for really landed sidesteps that ambiguity entirely.
|
||
return getFavorites({type: 'all', limit: 100}).then(data => {
|
||
const items = (data && data.items) || [];
|
||
const landed = new Set(items
|
||
.filter(it => it.source && it.source.topic == topicName)
|
||
.map(it => String(it.source.seq)));
|
||
const missing = seqs.filter(seq => !landed.has(String(seq)));
|
||
if (missing.length === seqs.length) {
|
||
this.props.onError('收藏失败', 'err');
|
||
} else if (missing.length) {
|
||
this.showToast(`已收藏 ${seqs.length - missing.length}/${seqs.length} 条`);
|
||
} else {
|
||
this.showToast('收藏成功');
|
||
}
|
||
});
|
||
}).catch(err => {
|
||
this.props.onError(err.message, 'err');
|
||
});
|
||
}
|
||
|
||
sendKeyPress(audio) {
|
||
const topic = this.props.tinode.getTopic(this.state.topic);
|
||
if (!topic.isSubscribed()) {
|
||
return;
|
||
}
|
||
if (audio) {
|
||
// Doc's default for the "user is recording voice" indicator is OFF unless product opts in
|
||
// (a non-persisted {note what:"kpa"} broadcast to every other group member) -- this was firing
|
||
// unconditionally on every recording, contradicting that documented default. No product signal
|
||
// to turn it on yet, so this is a deliberate no-op rather than a removed feature: re-enable by
|
||
// restoring `topic.noteRecording(true);` here if/when that's confirmed wanted.
|
||
return;
|
||
}
|
||
topic.noteKeyPress();
|
||
}
|
||
|
||
// sendMessage sends the message with an optional subscription to topic first.
|
||
// typeHint (Ch.7): the backend's imMessageType() classifier -- which drives every type-filtered list
|
||
// in this chapter (favorites tabs, chat-history search/media tabs) -- only recognizes a flat
|
||
// content.file_id/content.url key or an explicit head['x-im-type'] hint; it never walks a real
|
||
// Drafty entity array. Since every attachment this app actually sends uses the standard ent[]
|
||
// format (Drafty.attachFile/insertImage/insertVideo), none of them carry a flat file_id, so without
|
||
// this hint every image/video/file/voice message silently classifies as plain "text" server-side.
|
||
// Mutates a parsed Drafty document in place, upgrading any auto-detected "@name" MN entity whose
|
||
// raw matched text equals a name the user actually picked from the mention dropdown into a real,
|
||
// uid-bearing mention. Entities that don't match anything tracked (a literal "@word" the user just
|
||
// typed, or an edited/mismatched name) are left with their raw text value -- Tinode's own renderer
|
||
// already falls back to displaying that gracefully, this only upgrades the ones it safely can.
|
||
applyMentionResolution(parsed) {
|
||
if (!parsed || !Array.isArray(parsed.ent) || !this.mentionedUsers || !this.mentionedUsers.length) {
|
||
return;
|
||
}
|
||
parsed.ent.forEach(e => {
|
||
if (e.tp === 'MN' && e.data && typeof e.data.val === 'string') {
|
||
const match = this.mentionedUsers.find(m => m.name === e.data.val);
|
||
if (match) {
|
||
e.data.val = match.uid;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
sendMessage(msg, uploadCompletionPromise, uploader, typeHint) {
|
||
// Captured before the reply/edit branches below possibly rewrite `msg` into a Drafty object
|
||
// (Drafty.append(...) for a reply-with-quote) -- the URL risk check further down keys off
|
||
// `typeof msg == 'string'`, so without this a plain-text reply containing a link would silently
|
||
// skip the check entirely (a fresh, non-reply message with the same text does get checked).
|
||
const originalText = typeof msg === 'string' ? msg : null;
|
||
let head;
|
||
if (!msg && this.props.forwardMessage) {
|
||
// We are forwarding a message.
|
||
msg = this.props.forwardMessage.msg;
|
||
head = this.props.forwardMessage.head;
|
||
this.handleCancelReply();
|
||
} else if (this.state.reply) {
|
||
if (this.state.reply.editing) {
|
||
if (msg == this.state.contentToEdit) {
|
||
// Message unchanged.
|
||
this.handleCancelReply();
|
||
return;
|
||
}
|
||
// Editing an existing message.
|
||
head = {replace: ':' + this.state.reply.seq};
|
||
} else if (this.state.reply.content) {
|
||
// Replying to a message in this topic.
|
||
// Turn it into Drafty so we can make a quoted Drafty object later.
|
||
head = {reply: '' + this.state.reply.seq};
|
||
if (typeof msg == 'string') {
|
||
msg = Drafty.parse(msg);
|
||
this.applyMentionResolution(msg);
|
||
}
|
||
msg = Drafty.append(Drafty.sanitizeEntities(this.state.reply.content), msg);
|
||
}
|
||
this.handleCancelReply();
|
||
} else if (typeof msg == 'string' && this.mentionedUsers && this.mentionedUsers.length) {
|
||
// 4.2-4.3 @提醒：Drafty.parse 本来就会把纯文本里的"@word"自动识别成 MN 实体，但
|
||
// data.val 存的是匹配到的原始文字（tinode.dev.js 的 ENTITY_TYPES 表，pack: val =>
|
||
// ({val: val.slice(1)})），不是 uid——那是纯文本解析器，不可能凭空知道 uid。真正的 uid
|
||
// 只在用户从选择器里点选时才知道，记在 this.mentionedUsers 里；这里按显示名回填，把
|
||
// 自动识别出的占位符换成真的 uid。没有任何选过的提醒时完全不碰 msg，维持字符串原样，
|
||
// 交给 SDK 自己在更底层 parse（跟这次改动之前完全一样的行为，不引入任何差异）。
|
||
const parsed = Drafty.parse(msg);
|
||
this.applyMentionResolution(parsed);
|
||
msg = parsed;
|
||
}
|
||
// Was only cleared on topic switch -- picking someone from the @提醒 picker once left them
|
||
// resolvable for every later message in the same topic too, so literal text "@张三" typed by
|
||
// hand, pasted, or quoted from someone else in a LATER, unrelated message would silently turn
|
||
// into a real mention of whoever was last picked under that name. A retry of a failed send
|
||
// (retrySend) reuses the already-resolved Drafty content stored on the failed pub, not this
|
||
// array, so clearing it here doesn't affect retries.
|
||
this.mentionedUsers = [];
|
||
if (typeHint) {
|
||
head = {...(head || {}), 'x-im-type': typeHint};
|
||
}
|
||
|
||
const topicForDraft = this.state.topic;
|
||
// Captured now, not re-read inside the .then() below -- by the time send actually resolves
|
||
// the user may have switched topics, and clearDraft falling back to a hardcoded 0 runs into
|
||
// the same backend version=0-skips-the-lock issue explained in handleComposerChange above.
|
||
const draftVersionAtSend = this.state.draftVersion || 0;
|
||
const doSend = () => {
|
||
const result = this.props.sendMessage(msg, uploadCompletionPromise, uploader, head);
|
||
// Only a plain-text compose (not a reply/edit/forward, all of which pass a Drafty object or
|
||
// reuse contentToEdit rather than the persisted draft) has a server-side draft worth clearing.
|
||
if (originalText != null && result && typeof result.then == 'function' && topicForDraft) {
|
||
result.then(() => this.clearDraft(topicForDraft, draftVersionAtSend));
|
||
}
|
||
return result;
|
||
};
|
||
|
||
// Pre-send URL risk check (POST /security/urls/check) -- the only Ch.11 "anti-fraud" mechanism
|
||
// with a real backend behind it. Only plain-text composed messages are checked (not forwards,
|
||
// uploads, or already-Drafty content) since that's the one path a URL could plausibly be typed in.
|
||
// Returns a promise resolving to `false` when the message was NOT sent (blocked/cancelled) so
|
||
// send-message.jsx can leave the composer text intact instead of optimistically clearing it --
|
||
// without this, a blocked message's text would just vanish with no failed-message trace to retry.
|
||
const urlMatch = originalText && originalText.match(/https?:\/\/\S+/);
|
||
if (urlMatch) {
|
||
return checkURL(urlMatch[0], 'message_compose').then(result => {
|
||
if (result.decision === 'allow') {
|
||
return doSend();
|
||
}
|
||
return new Promise(resolve => {
|
||
// riskDialog is a single slot -- if an earlier risk check is still awaiting the user's
|
||
// decision (two messages sent in quick succession, both flagged), overwriting it here
|
||
// would leave that first promise permanently unresolved and its message silently dropped
|
||
// with send-message.jsx never told to stop holding it as unsent. Resolving it `false` first
|
||
// means it's treated the same as the user cancelling it -- lost, but not hung forever.
|
||
if (this.state.riskDialog) this.state.riskDialog.resolve(false);
|
||
this.setState({riskDialog: {blocked: result.decision === 'block', challengeId: result.risk_challenge_id, send: doSend, resolve}});
|
||
});
|
||
}).catch(_ => doSend()); // Don't let a risk-check failure block sending altogether.
|
||
}
|
||
|
||
return doSend();
|
||
}
|
||
|
||
handleRiskConfirm() {
|
||
const dialog = this.state.riskDialog;
|
||
if (!dialog) return;
|
||
this.setState({riskDialog: null});
|
||
const finish = () => dialog.resolve(dialog.send());
|
||
if (dialog.challengeId) {
|
||
confirmRiskChallenge(dialog.challengeId, 'continue').then(finish).catch(finish);
|
||
} else {
|
||
finish();
|
||
}
|
||
}
|
||
|
||
handleRiskCancel() {
|
||
const dialog = this.state.riskDialog;
|
||
if (!dialog) return;
|
||
this.setState({riskDialog: null});
|
||
if (dialog.challengeId && !dialog.blocked) {
|
||
confirmRiskChallenge(dialog.challengeId, 'cancel').catch(_ => {});
|
||
}
|
||
dialog.resolve(false);
|
||
}
|
||
|
||
// Retry sending a message.
|
||
retrySend(pub) {
|
||
this.props.sendMessage(pub.content, undefined, undefined, pub.head)
|
||
.then(_ => {
|
||
// All good. Remove the original message draft from the cache.
|
||
const topic = this.props.tinode.getTopic(this.state.topic);
|
||
topic.delMessagesList([pub.seq], true);
|
||
});
|
||
}
|
||
|
||
// sendFileAttachment sends the file as Drafty message:
|
||
// - if file is too large, upload it and send a s link.
|
||
// - if file is small enough, just send it in-band.
|
||
sendFileAttachment(file) {
|
||
// Server-provided limit reduced for base64 encoding and overhead.
|
||
const maxInbandAttachmentSize = (this.props.tinode.getServerParam('maxMessageSize',
|
||
MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024) | 0;
|
||
|
||
if (TheCard.isFileSupported(file.type, file.name) || file.type == TheCard.contentType) {
|
||
// This is a vCard file, try to convert and send as TheCard.
|
||
if (this.sendTheCardAttachment(file, maxInbandAttachmentSize)) {
|
||
// Successfully sent as TheCard.
|
||
return;
|
||
}
|
||
// Sending as TheCard failed, fall through to sending as generic file attachment.
|
||
}
|
||
|
||
// If the attachment is a JSON file, then use 'application/octet-stream' instead of 'application/json'.
|
||
// This is a temporary workaround for the collision with the 'application/json' MIME type of form responses.
|
||
// Remove this code in 2026 or so.
|
||
const jsonMimeConverter = (fileType) => fileType === DRAFTY_FR_MIME_TYPE_LEGACY ? 'application/octet-stream' : fileType;
|
||
|
||
if (file.size > maxInbandAttachmentSize) {
|
||
// Too large to send inband - uploading out of band and sending as a link.
|
||
const uploader = createChatUploader(this.props.tinode);
|
||
if (!uploader) {
|
||
this.props.onError(this.props.intl.formatMessage(messages.cannot_initiate_upload));
|
||
return;
|
||
}
|
||
const uploadCompletionPromise = uploader.upload(file);
|
||
const msg = Drafty.attachFile(null, {
|
||
mime: jsonMimeConverter(file.type),
|
||
filename: file.name,
|
||
size: file.size,
|
||
urlPromise: uploadCompletionPromise
|
||
});
|
||
// Pass data and the uploader to the TinodeWeb.
|
||
this.sendMessage(msg, uploadCompletionPromise, uploader, 'file');
|
||
} else {
|
||
// Small enough to send inband.
|
||
fileToBase64(file)
|
||
.then(b64 => this.sendMessage(Drafty.attachFile(null, {
|
||
mime: jsonMimeConverter(b64.mime),
|
||
data: b64.bits,
|
||
filename: b64.name,
|
||
size: file.size
|
||
}), undefined, undefined, 'file'))
|
||
.catch(err => this.props.onError(err.message, 'err'));
|
||
}
|
||
}
|
||
|
||
// Convert attached vCard to TheCard and send.
|
||
sendTheCardAttachment(file, maxInbandAttachmentSize) {
|
||
if (file.size > maxInbandAttachmentSize) {
|
||
// Cannot convert to TheCard, send as a generic file attachment instead.
|
||
return false;
|
||
}
|
||
|
||
if (file.type == TheCard.contentType) {
|
||
// Already TheCard, no need to convert.
|
||
this.sendMessage(Drafty.appendTheCard(null, file.object));
|
||
return true;
|
||
}
|
||
|
||
importVCard(file)
|
||
.then(card => {
|
||
this.sendMessage(Drafty.appendTheCard(null, card));
|
||
})
|
||
.catch(err => {
|
||
this.props.onError(this.props.intl.formatMessage(messages.cannot_parse_vcard, {error: err.message}), 'err');
|
||
});
|
||
return true;
|
||
}
|
||
|
||
// handleAttachFile method is called when [Attach file] button is clicked: launch attachment preview.
|
||
handleAttachFile(file) {
|
||
const maxExternAttachmentSize = this.props.tinode.getServerParam('maxFileUploadSize', MAX_EXTERN_ATTACHMENT_SIZE);
|
||
|
||
if (file.size > maxExternAttachmentSize) {
|
||
// Too large.
|
||
this.props.onError(this.props.intl.formatMessage(messages.file_attachment_too_large,
|
||
{size: bytesToHumanSize(file.size), limit: bytesToHumanSize(maxExternAttachmentSize)}), 'err');
|
||
} else {
|
||
this.setState({
|
||
docPreview: {
|
||
file: file,
|
||
name: file.name,
|
||
size: file.size,
|
||
type: file.type
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
handleCallHangup(topic, seq) {
|
||
this.props.onVideoCallClosed();
|
||
this.setState({
|
||
rtcPanel: null
|
||
});
|
||
this.props.onCallHangup(topic, seq);
|
||
}
|
||
|
||
handleCallPanelToggle() {
|
||
this.setState({minimizedCallPanel: !this.state.minimizedCallPanel});
|
||
}
|
||
|
||
// sendImageAttachment sends the image bits as Drafty message.
|
||
sendImageAttachment(caption, blob) {
|
||
const mime = this.state.imagePreview.mime;
|
||
const width = this.state.imagePreview.width;
|
||
const height = this.state.imagePreview.height;
|
||
const fname = this.state.imagePreview.filename;
|
||
|
||
// Server-provided limit reduced for base64 encoding and overhead.
|
||
const maxInbandAttachmentSize = (this.props.tinode.getServerParam('maxMessageSize',
|
||
MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024) | 0;
|
||
|
||
if (blob.size > maxInbandAttachmentSize) {
|
||
// Too large to send inband - uploading out of band and sending as a link.
|
||
const uploader = createChatUploader(this.props.tinode);
|
||
if (!uploader) {
|
||
this.props.onError(this.props.intl.formatMessage(messages.cannot_initiate_upload));
|
||
return;
|
||
}
|
||
const uploadCompletionPromise = uploader.upload(blob);
|
||
|
||
// Make small preview to show while uploading.
|
||
imageScaled(blob, IMAGE_PREVIEW_DIM, IMAGE_PREVIEW_DIM, -1, false)
|
||
// Convert tiny image into base64 for serialization and previewing.
|
||
.then(scaled => blobToBase64(scaled.blob))
|
||
.then(b64 => {
|
||
let msg = Drafty.insertImage(null, 0, {
|
||
mime: mime,
|
||
_tempPreview: b64.bits, // This preview will not be serialized.
|
||
bits: b64.bits, // Image thumbnail.
|
||
width: width,
|
||
height: height,
|
||
filename: fname,
|
||
size: blob.size,
|
||
urlPromise: uploadCompletionPromise
|
||
});
|
||
if (caption) {
|
||
msg = Drafty.appendLineBreak(msg);
|
||
msg = Drafty.append(msg, Drafty.parse(caption));
|
||
}
|
||
// Pass data and the uploader to the TinodeWeb.
|
||
this.sendMessage(msg, uploadCompletionPromise, uploader, 'image');
|
||
})
|
||
.catch(err => this.props.onError(err, 'err'));
|
||
return;
|
||
}
|
||
|
||
// Send the image inband if it's not too big. The image has been scaled already
|
||
// in image preview.
|
||
blobToBase64(blob)
|
||
.then(b64 => {
|
||
let msg = Drafty.insertImage(null, 0, {
|
||
mime: b64.mime,
|
||
bits: b64.bits,
|
||
width: width,
|
||
height: height,
|
||
filename: fname,
|
||
size: blob.size
|
||
});
|
||
if (caption) {
|
||
msg = Drafty.appendLineBreak(msg);
|
||
msg = Drafty.append(msg, Drafty.parse(caption));
|
||
}
|
||
this.sendMessage(msg, undefined, undefined, 'image');
|
||
});
|
||
}
|
||
|
||
// sendVideoAttachment sends the video bits as Drafty message.
|
||
sendVideoAttachment(caption, videoBlob, previewBlob, params) {
|
||
const width = params.width;
|
||
const height = params.height;
|
||
|
||
// Server-provided limit reduced for base64 encoding and overhead.
|
||
const maxInbandAttachmentSize = (this.props.tinode.getServerParam('maxMessageSize',
|
||
MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024) | 0;
|
||
|
||
const uploads = [];
|
||
let uploader;
|
||
if ((videoBlob.size + previewBlob.size) > maxInbandAttachmentSize) {
|
||
// One or both are too large to send inband. Uploading out of band and sending as a link.
|
||
uploader = createChatUploader(this.props.tinode);
|
||
if (!uploader) {
|
||
this.props.onError(this.props.intl.formatMessage(messages.cannot_initiate_upload));
|
||
return;
|
||
}
|
||
|
||
uploads[0] = videoBlob.size > maxInbandAttachmentSize * 0.675 ? uploader.upload(videoBlob) : null;
|
||
uploads[1] = previewBlob.size > maxInbandAttachmentSize * 0.275 ? uploader.upload(previewBlob) : null;
|
||
}
|
||
|
||
if (uploads.length == 0) {
|
||
// Both video and preview are small enough to send inband.
|
||
Promise.all([blobToBase64(videoBlob), blobToBase64(previewBlob)])
|
||
.then(b64s => {
|
||
const [v64, i64] = b64s;
|
||
let msg = Drafty.insertVideo(null, 0, {
|
||
mime: v64.mime,
|
||
bits: v64.bits,
|
||
preview: i64.bits,
|
||
premime: i64.mime,
|
||
width: width,
|
||
height: height,
|
||
duration: params.duration,
|
||
filename: params.name,
|
||
size: videoBlob.size
|
||
});
|
||
if (caption) {
|
||
msg = Drafty.appendLineBreak(msg);
|
||
msg = Drafty.append(msg, Drafty.parse(caption));
|
||
}
|
||
this.sendMessage(msg, undefined, undefined, 'video');
|
||
});
|
||
return;
|
||
}
|
||
|
||
const uploadCompletionPromise = Promise.all(uploads);
|
||
|
||
const b64conv = [];
|
||
// Small video converted to base64.
|
||
b64conv[0] = uploads[0] ? null : blobToBase64(videoBlob);
|
||
// Full-size preview fits inline.
|
||
b64conv[1] = uploads[1] ? null : imageScaled(previewBlob, MAX_IMAGE_DIM, MAX_IMAGE_DIM, -1, false)
|
||
.then(scaled => blobToBase64(scaled.blob));
|
||
// Small preview to show while uploading.
|
||
b64conv[2] = imageScaled(previewBlob, VIDEO_PREVIEW_DIM, VIDEO_PREVIEW_DIM, -1, false)
|
||
.then(scaled => blobToBase64(scaled.blob));
|
||
// Convert tiny image into base64 for serialization and previewing.
|
||
Promise.all(b64conv)
|
||
.then(b64s => {
|
||
const [video, img, preview] = b64s;
|
||
let msg = Drafty.insertVideo(null, 0, {
|
||
mime: params.mime,
|
||
bits: video ? video.bits : null,
|
||
_tempPreview: preview.bits,
|
||
preview: img ? img.bits : preview.bits,
|
||
premime: img ? img.mime : preview.mime,
|
||
width: width,
|
||
height: height,
|
||
duration: params.duration,
|
||
filename: params.name,
|
||
size: videoBlob.size,
|
||
urlPromise: uploadCompletionPromise
|
||
});
|
||
|
||
if (caption) {
|
||
msg = Drafty.appendLineBreak(msg);
|
||
msg = Drafty.append(msg, Drafty.parse(caption));
|
||
}
|
||
// Pass data and the uploader to the TinodeWeb.
|
||
this.sendMessage(msg, uploadCompletionPromise, uploader, 'video');
|
||
})
|
||
.catch(err => this.props.onError(err.message, 'err'));
|
||
}
|
||
|
||
// handleAttachImageOrVideo method is called when [Attach image or video] button is clicked: launch image or video preview.
|
||
handleAttachImageOrVideo(file) {
|
||
const maxExternAttachmentSize = this.props.tinode.getServerParam('maxFileUploadSize', MAX_EXTERN_ATTACHMENT_SIZE);
|
||
|
||
if (file.type.startsWith('video/')) {
|
||
this.setState({videoPreview: {
|
||
url: URL.createObjectURL(file),
|
||
blob: file,
|
||
filename: file.name,
|
||
size: file.size,
|
||
mime: file.type
|
||
}});
|
||
return;
|
||
}
|
||
|
||
// Get image dimensions and size, optionally scale it down.
|
||
imageScaled(file, MAX_IMAGE_DIM, MAX_IMAGE_DIM, maxExternAttachmentSize, false)
|
||
.then(scaled => {
|
||
this.setState({imagePreview: {
|
||
url: URL.createObjectURL(scaled.blob),
|
||
blob: scaled.blob,
|
||
filename: scaled.name,
|
||
width: scaled.width,
|
||
height: scaled.height,
|
||
size: scaled.blob.size,
|
||
mime: scaled.mime
|
||
}});
|
||
}).catch(err => {
|
||
this.props.onError(err.message, 'err');
|
||
});
|
||
}
|
||
|
||
// handleFileDrop is called when the user drags & drops a file upon the message view.
|
||
handleFileDrop(files) {
|
||
if (!files || files.length == 0) {
|
||
return;
|
||
}
|
||
const file = files[0];
|
||
if (file.type && file.type.startsWith('image/')) {
|
||
this.handleAttachImageOrVideo(file);
|
||
} else {
|
||
this.handleAttachFile(file);
|
||
}
|
||
}
|
||
|
||
// sendAudioAttachment sends audio bits inband as Drafty message (no preview).
|
||
sendAudioAttachment(url, preview, duration) {
|
||
fetch(url)
|
||
.then(result => result.blob())
|
||
.then(blob => {
|
||
// Server-provided limit reduced for base64 encoding and overhead.
|
||
const maxInbandAttachmentSize = this.props.tinode.getServerParam('maxMessageSize', MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024;
|
||
if (blob.size > maxInbandAttachmentSize) {
|
||
// Too large to send inband - uploading out of band and sending as a link.
|
||
const uploader = createChatUploader(this.props.tinode);
|
||
if (!uploader) {
|
||
this.props.onError(this.props.intl.formatMessage(messages.cannot_initiate_upload));
|
||
return;
|
||
}
|
||
const uploadCompletionPromise = uploader.upload(blob);
|
||
const msg = Drafty.appendAudio(null, {
|
||
mime: blob.type,
|
||
size: blob.size,
|
||
duration: duration,
|
||
preview: preview,
|
||
urlPromise: uploadCompletionPromise
|
||
});
|
||
// Pass data and the uploader to the TinodeWeb.
|
||
this.sendMessage(msg, uploadCompletionPromise, uploader, 'voice');
|
||
} else {
|
||
// Small enough to send inband.
|
||
blobToBase64(blob)
|
||
.then(b64 => {
|
||
this.sendMessage(Drafty.appendAudio(null, {
|
||
mime: b64.mime,
|
||
bits: b64.bits,
|
||
size: blob.size,
|
||
duration: duration,
|
||
preview: preview,
|
||
}), undefined, undefined, 'voice')
|
||
})
|
||
}
|
||
})
|
||
.catch(err => {this.props.onError(err.message, 'err')});;
|
||
}
|
||
|
||
handleCancelUpload(seq, uploader) {
|
||
const topic = this.props.tinode.getTopic(this.state.topic);
|
||
const found = topic.findMessage(seq);
|
||
if (found) {
|
||
found._cancelled = true;
|
||
}
|
||
uploader.cancel();
|
||
}
|
||
|
||
// seq: seq ID of the source message
|
||
// context: message content.
|
||
// senderId: UID of the sender of the source message.
|
||
// senderName: full name of the sender of the original message.
|
||
handlePickReply(seq, content, senderId, senderName) {
|
||
if (!seq || !content) {
|
||
this.setState({reply: null});
|
||
return;
|
||
}
|
||
|
||
content = typeof content == 'string' ? Drafty.init(content) : content;
|
||
if (Drafty.isValid(content)) {
|
||
content = Drafty.replyContent(content, QUOTED_REPLY_LENGTH);
|
||
} else {
|
||
// /!\ invalid content.
|
||
content = Drafty.append(Drafty.init('\u26A0 '),
|
||
Drafty.wrapInto(this.props.intl.formatMessage(messages.invalid_content), 'EM'));
|
||
}
|
||
|
||
this.setState({
|
||
reply: {
|
||
content: Drafty.quote(senderName, senderId, content),
|
||
seq: seq
|
||
}
|
||
});
|
||
this.props.onCancelForwardMessage();
|
||
}
|
||
|
||
// seq: seq ID of the message to edit.
|
||
// context: message content.
|
||
handleEditMessage(seq, content) {
|
||
if (!seq || !content) {
|
||
this.setState({reply: null});
|
||
return;
|
||
}
|
||
|
||
content = typeof content == 'string' ? Drafty.init(content) : content;
|
||
const editable = Drafty.toMarkdown(content);
|
||
if (Drafty.isValid(content)) {
|
||
content = Drafty.replyContent(content, EDIT_PREVIEW_LENGTH);
|
||
} else {
|
||
// /!\ invalid content.
|
||
content = Drafty.append(Drafty.init('\u26A0 '),
|
||
Drafty.wrapInto(this.props.intl.formatMessage(messages.invalid_content), 'EM'));
|
||
}
|
||
|
||
this.setState({
|
||
reply: {
|
||
content: Drafty.quote(this.props.intl.formatMessage(messages.editing_message), null, content),
|
||
seq: seq,
|
||
editing: true
|
||
},
|
||
contentToEdit: editable
|
||
});
|
||
this.props.onCancelForwardMessage();
|
||
}
|
||
|
||
|
||
handleCancelReply() {
|
||
this.setState({reply: null, contentToEdit: null});
|
||
this.props.onCancelForwardMessage();
|
||
}
|
||
|
||
handleQuoteClick(replyToSeq) {
|
||
const ref = this.getOrCreateMessageRef(replyToSeq);
|
||
if (ref && ref.current) {
|
||
ref.current.scrollIntoView({block: "center", behavior: "smooth"});
|
||
ref.current.classList.add('flash');
|
||
setTimeout(_ => {ref.current.classList.remove('flash')} , 1000);
|
||
} else {
|
||
// Most commonly hit when the target message was deleted/recalled after being found by
|
||
// Ch.7 chat-history search but before this click -- <MetaMessage deleted> never gets a ref
|
||
// (see jumpToMessage below), so without this the click did nothing visible at all.
|
||
console.error("Unresolved message ref", replyToSeq);
|
||
if (this.props.onError) {
|
||
this.props.onError('该消息已被删除或撤回', 'err');
|
||
}
|
||
}
|
||
}
|
||
|
||
// Ch.7 chat-history search result -> jump to the message in the real conversation. handleQuoteClick
|
||
// only scrolls to a message already present in this topic's locally-cached message list (used
|
||
// elsewhere for quoted-reply/pinned-message jumps, where that's always true); a search result can
|
||
// point at a message far outside whatever window happens to be loaded, so fetch a window around it
|
||
// first via the native SDK (not the REST search API -- handleQuoteClick reads refs off the SDK's own
|
||
// local topic cache, so the data has to land there, which only getMeta does).
|
||
jumpToMessage(seq) {
|
||
const topic = this.props.tinode && this.props.topic ? this.props.tinode.getTopic(this.props.topic) : null;
|
||
if (!topic || !seq || isNaN(seq)) {
|
||
return;
|
||
}
|
||
HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'jumpseq'));
|
||
const jump = () => window.setTimeout(() => this.handleQuoteClick(seq), 150);
|
||
if (topic.findMessage(seq)) {
|
||
jump();
|
||
} else {
|
||
topic.getMeta(topic.startMetaQuery().withData(Math.max(1, seq - 20), seq + 21, 41).build())
|
||
.then(jump).catch(err => this.props.onError(err.message, 'err'));
|
||
}
|
||
}
|
||
|
||
handleUnpinMessage(seq) {
|
||
const topic = this.props.tinode.getTopic(this.state.topic);
|
||
topic.pinMessage(seq, false);
|
||
}
|
||
|
||
isDragEnabled() {
|
||
return this.state.isWriter && !this.state.unconfirmed && !this.props.forwardMessage && !this.state.peerMessagingDisabled;
|
||
}
|
||
|
||
handleDragStart(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
e.dataTransfer.clearData();
|
||
}
|
||
|
||
handleDragIn(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
this.dragCounter++;
|
||
if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
|
||
this.setState({dragging: true});
|
||
}
|
||
}
|
||
|
||
handleDragOut(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
this.dragCounter--;
|
||
if (this.dragCounter <= 0) {
|
||
this.setState({dragging: false});
|
||
}
|
||
}
|
||
|
||
handleDrag(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
|
||
handleDrop(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
this.setState({dragging: false});
|
||
if (this.isDragEnabled() && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||
this.handleFileDrop(e.dataTransfer.files);
|
||
this.dragCounter = 0;
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const {formatMessage} = this.props.intl;
|
||
|
||
// P2P call is an overlay, not a separate component because it cannot be
|
||
// re-mounted between full screen/minimized.
|
||
const overlay = this.state.rtcPanel &&
|
||
<Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
|
||
description="Message shown when component is loading"/></div>}>
|
||
<CallPanel
|
||
topic={this.state.topic}
|
||
seq={this.props.callSeq}
|
||
callState={this.props.callState}
|
||
callAudioOnly={this.props.callAudioOnly}
|
||
tinode={this.props.tinode}
|
||
title={this.state.title}
|
||
avatar={this.state.avatar || true}
|
||
minimized={this.state.minimizedCallPanel}
|
||
onError={this.props.onError}
|
||
onHangup={this.handleCallHangup}
|
||
onToggleMinimize={this.handleCallPanelToggle}
|
||
onInvite={this.props.onCallInvite}
|
||
onSendOffer={this.props.onCallSendOffer}
|
||
onIceCandidate={this.props.onCallIceCandidate}
|
||
onSendAnswer={this.props.onCallSendAnswer} />
|
||
</Suspense>;
|
||
|
||
const riskDialog = this.state.riskDialog &&
|
||
<RiskConfirmDialog blocked={this.state.riskDialog.blocked}
|
||
onConfirm={this.handleRiskConfirm} onCancel={this.handleRiskCancel} />;
|
||
|
||
let component;
|
||
if (!this.state.topic) {
|
||
component = <LogoView
|
||
serverVersion={this.props.serverVersion}
|
||
serverAddress={this.props.serverAddress} />;
|
||
|
||
} else {
|
||
let component2;
|
||
if (this.state.imagePreview) {
|
||
// Preview image before sending.
|
||
component2 = (
|
||
<Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
|
||
description="Message shown when component is loading"/></div>}>
|
||
<ImagePreview
|
||
content={this.state.imagePreview}
|
||
tinode={this.props.tinode}
|
||
reply={this.state.reply}
|
||
onCancelReply={this.handleCancelReply}
|
||
onClose={this.handleClosePreview}
|
||
onSendMessage={this.sendImageAttachment} />
|
||
</Suspense>
|
||
);
|
||
} else if (this.state.videoPreview) {
|
||
// Preview video.
|
||
component2 = <Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
|
||
description="Message shown when component is loading"/></div>}>
|
||
<VideoPreview
|
||
content={this.state.videoPreview}
|
||
tinode={this.props.tinode}
|
||
reply={this.state.reply}
|
||
onError={this.props.onError}
|
||
onCancelReply={this.handleCancelReply}
|
||
onClose={this.handleClosePreview}
|
||
onSendMessage={this.sendVideoAttachment} />
|
||
</Suspense>;
|
||
|
||
} else if (this.state.imagePostview) {
|
||
// Expand received image.
|
||
component2 = <Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
|
||
description="Message shown when component is loading"/></div>}>
|
||
<ImagePreview
|
||
content={this.state.imagePostview}
|
||
onClose={this.handleClosePreview} />
|
||
</Suspense>;
|
||
|
||
} else if (this.state.videoPostview) {
|
||
// Play received video.
|
||
component2 = <Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
|
||
description="Message shown when component is loading"/></div>}>
|
||
<VideoPreview
|
||
content={this.state.videoPostview}
|
||
tinode={this.props.tinode}
|
||
onError={this.props.onError}
|
||
onClose={this.handleClosePreview} />
|
||
</Suspense>;
|
||
|
||
} else if (this.state.docPreview) {
|
||
// Preview attachment before sending.
|
||
if (TheCard.isFileSupported(this.state.docPreview.type, this.state.docPreview.name) ||
|
||
this.state.docPreview.type == TheCard.contentType) {
|
||
component2 = <Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
|
||
description="Message shown when component is loading"/></div>}>
|
||
<TheCardPreview
|
||
content={this.state.docPreview}
|
||
tinode={this.props.tinode}
|
||
reply={this.state.reply}
|
||
onCancelReply={this.handleCancelReply}
|
||
onClose={this.handleClosePreview}
|
||
onSendMessage={this.sendFileAttachment} />
|
||
</Suspense>;
|
||
} else {
|
||
component2 = <Suspense fallback={<div><FormattedMessage id="loading_note" defaultMessage="Loading..."
|
||
description="Message shown when component is loading"/></div>}>
|
||
<DocPreview
|
||
content={this.state.docPreview}
|
||
tinode={this.props.tinode}
|
||
reply={this.state.reply}
|
||
onCancelReply={this.handleCancelReply}
|
||
onClose={this.handleClosePreview}
|
||
onSendMessage={this.sendFileAttachment} />
|
||
</Suspense>;
|
||
}
|
||
} else {
|
||
const topic = this.props.tinode.getTopic(this.state.topic);
|
||
const isChannel = topic.isChannelType() || topic.chan;
|
||
const groupTopic = topic.isGroupType() && !isChannel;
|
||
const icon_badges = [];
|
||
if (topic.trusted) {
|
||
if (topic.trusted.verified) {
|
||
icon_badges.push({icon: 'verified', color: 'badge-inv'});
|
||
}
|
||
if (topic.trusted.staff) {
|
||
icon_badges.push({icon: 'staff', color: 'badge-inv'});
|
||
}
|
||
if (topic.trusted.danger) {
|
||
icon_badges.push({icon: 'dangerous', color: 'badge-inv'});
|
||
}
|
||
}
|
||
|
||
const pinnedMessages = [];
|
||
this.state.pins.forEach(seq => pinnedMessages.push(topic.latestMsgVersion(seq) || topic.findMessage(seq)));
|
||
|
||
const messageNodes = [];
|
||
let previousFrom = null;
|
||
let prevDate = null;
|
||
let chatBoxClass = null;
|
||
topic.messages((msg, prev, next, i) => {
|
||
let nextFrom = next ? (next.from || 'chan') : null;
|
||
|
||
let sequence = 'single';
|
||
let thisFrom = msg.from || 'chan';
|
||
if (thisFrom == previousFrom) {
|
||
if (thisFrom == nextFrom) {
|
||
sequence = 'middle';
|
||
} else {
|
||
sequence = 'last';
|
||
}
|
||
} else if (thisFrom == nextFrom) {
|
||
sequence = 'first';
|
||
}
|
||
previousFrom = thisFrom;
|
||
|
||
const isReply = !(thisFrom == this.props.myUserId);
|
||
const deliveryStatus = topic.msgStatus(msg, true);
|
||
|
||
let userFrom = thisFrom, userName, userAvatar;
|
||
const user = topic.userDesc(thisFrom);
|
||
if (user && user.public) {
|
||
userName = user.public.fn;
|
||
userAvatar = makeImageUrl(user.public.photo);
|
||
}
|
||
chatBoxClass = groupTopic ? 'chat-box group' : 'chat-box';
|
||
|
||
// Ref for this chat message.
|
||
const ref = this.getOrCreateMessageRef(msg.seq);
|
||
let replyToSeq = msg.head ? parseInt(msg.head.reply) : null;
|
||
if (!replyToSeq || isNaN(replyToSeq)) {
|
||
replyToSeq = null;
|
||
}
|
||
|
||
if (msg.hi) {
|
||
// Deleted message.
|
||
messageNodes.push(
|
||
<MetaMessage
|
||
deleted={true}
|
||
deletedText={this.props.intl.formatMessage(messages.message_deleted)}
|
||
key={msg.seq} />
|
||
);
|
||
} else {
|
||
const thisDate = new Date(msg.ts);
|
||
// This message was sent on a different date than the previous.
|
||
if (!prevDate || prevDate.toDateString() != thisDate.toDateString()) {
|
||
messageNodes.push(
|
||
<MetaMessage
|
||
date={relativeDateFormat(msg.ts)}
|
||
locale={this.props.intl.locale}
|
||
key={'date-' + msg.seq} />
|
||
);
|
||
prevDate = thisDate;
|
||
}
|
||
messageNodes.push(
|
||
<ChatMessage
|
||
tinode={this.props.tinode}
|
||
topic={this.state.topic}
|
||
content={msg.content}
|
||
mimeType={msg.head && msg.head.mime}
|
||
head={msg.head}
|
||
replyToSeq={replyToSeq}
|
||
edited={msg.head && !msg.head.webrtc && msg.head.replace}
|
||
timestamp={msg.ts}
|
||
response={isReply}
|
||
seq={msg.seq}
|
||
isGroup={groupTopic}
|
||
isChan={this.state.channel}
|
||
userFrom={userFrom}
|
||
userName={userName}
|
||
userAvatar={userAvatar}
|
||
senderRole={groupTopic && this.state.groupRoles ? this.state.groupRoles[thisFrom] : null}
|
||
sequence={sequence}
|
||
received={deliveryStatus}
|
||
uploader={msg._uploader}
|
||
userIsWriter={this.state.isWriter}
|
||
userIsAdmin={this.state.isAdmin}
|
||
relationship={this.state.relationshipContext ? this.state.relationshipContext.relationship : null}
|
||
onSendFriendVerification={this.handleSendFriendVerification}
|
||
selectMode={this.props.selectMode}
|
||
selected={this.props.selectedSeqs && this.props.selectedSeqs.includes(msg.seq)}
|
||
onToggleSelect={this.props.onToggleMessageSelect}
|
||
pinned={this.state.pins.includes(msg.seq)}
|
||
viewportWidth={this.props.viewportWidth} // Used by `formatter`.
|
||
showContextMenu={this.handleShowMessageContextMenu}
|
||
onExpandMedia={this.handleExpandMedia}
|
||
onFormResponse={this.handleFormResponse}
|
||
onCancelUpload={this.handleCancelUpload}
|
||
pickReply={this.handlePickReply}
|
||
editMessage={this.handleEditMessage}
|
||
onQuoteClick={this.handleQuoteClick}
|
||
onAcceptCall={this.props.onAcceptCall}
|
||
onError={this.props.onError}
|
||
ref={ref}
|
||
key={msg.seq} />
|
||
);
|
||
}
|
||
});
|
||
|
||
let lastSeen = null;
|
||
if (isChannel) {
|
||
if (topic.subcnt) {
|
||
lastSeen = formatMessage(messages.subscriber_count, {count: topic.subcnt});
|
||
}
|
||
} else {
|
||
const cont = this.props.tinode.getMeTopic().getContact(this.state.topic);
|
||
if (cont) {
|
||
if (Tinode.isP2PTopicName(cont.topic)) {
|
||
if (cont.online) {
|
||
lastSeen = formatMessage(messages.online_now);
|
||
} else if (cont.seen) {
|
||
lastSeen = formatMessage(messages.last_seen,
|
||
{timestamp: shortDateFormat(cont.seen.when, this.props.intl.locale)});
|
||
// TODO: also handle user agent in c.seen.ua
|
||
}
|
||
} else if (Tinode.isGroupTopicName(cont.topic)) {
|
||
if (topic.subcnt) {
|
||
lastSeen = formatMessage(messages.member_count, {count: topic.subcnt});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
const avatar = this.state.avatar || true;
|
||
const online = this.state.deleted || topic.isSelfType() ? null :
|
||
this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline';
|
||
|
||
const titleClass = 'panel-title' + (this.state.deleted ? ' deleted' : '');
|
||
const darkModeClass = this.props.colorSchema == 'dark' ? 'dark' : '';
|
||
// sendMessage() unconditionally sends whatever content it's given with head={replace:...}
|
||
// while this.state.reply.editing is set (see sendMessage above) -- it has no way to tell
|
||
// "the user is still editing the original text" apart from "the user just picked a photo/
|
||
// file/card/favorite from the attachment panel while that edit was still open". Gating the
|
||
// attach entry points closed here (same mechanism already used for forwardMessage below) is
|
||
// simpler and safer than trying to teach sendMessage to distinguish those cases after the fact.
|
||
const editingMessage = !!(this.state.reply && this.state.reply.editing);
|
||
|
||
let messagesComponent = (
|
||
<>
|
||
{this.state.groupAnnouncement ?
|
||
<a href="#" id="group-announcement-banner" onClick={this.handleShowAnnouncement}>
|
||
<i className="material-icons">campaign</i>
|
||
<span>{this.state.groupAnnouncement.content}</span>
|
||
<i className="material-icons">chevron_right</i>
|
||
</a> : null}
|
||
{this.state.pendingJoinRequests > 0 ?
|
||
<a href="#" id="group-join-request-banner" onClick={this.handleShowJoinRequests}>
|
||
<i className="material-icons">person_add_alt</i>
|
||
<span>新邀请进群申请（{this.state.pendingJoinRequests}）</span>
|
||
<i className="material-icons">chevron_right</i>
|
||
</a> : null}
|
||
<div id="messages-container" className={darkModeClass}>
|
||
<button id="go-to-latest" className={'action-button' + (this.state.showGoToLastButton ? '' : ' hidden')}
|
||
onClick={this.goToLatestMessage}>
|
||
<i className="material-icons">arrow_downward</i>
|
||
</button>
|
||
<div id="messages-panel" ref={this.handleScrollReference}>
|
||
<ul id="scroller" className={chatBoxClass}>
|
||
{messageNodes}
|
||
</ul>
|
||
</div>
|
||
{!this.state.isReader ?
|
||
<div id="write-only-background">
|
||
{this.state.readingBlocked ?
|
||
<div id="write-only-note">
|
||
<FormattedMessage id="messages_not_readable" defaultMessage="no access to messages"
|
||
description="Message shown in topic without the read access" />
|
||
</div>
|
||
: null }
|
||
</div>
|
||
: null }
|
||
<div className={'toast' + (this.state.toast ? ' show' : '')}>
|
||
<i className="material-icons">check</i> {this.state.toast}
|
||
</div>
|
||
</div>
|
||
{this.state.peerMessagingDisabled && !this.state.unconfirmed ?
|
||
<div id="peer-messaging-disabled-note">
|
||
<i className="material-icons secondary">block</i> <FormattedMessage
|
||
id="peers_messaging_disabled" defaultMessage="Peer's messaging is disabled."
|
||
description="Shown when the p2p peer's messaging is disabled" /> <a href="#"
|
||
onClick={this.handleEnablePeer}><FormattedMessage id="enable_peers_messaging"
|
||
defaultMessage="Enable" description="Call to action to enable peer's messaging" /></a>.
|
||
</div> : null}
|
||
{!this.state.unconfirmed && this.state.relationshipContext &&
|
||
this.state.relationshipContext.relationship == 'pending_inbound' ?
|
||
<div id="relationship-status-note">以上是打招呼的消息</div> : null}
|
||
{!this.state.unconfirmed && this.state.relationshipContext &&
|
||
this.state.relationshipContext.relationship == 'pending_outbound' ?
|
||
<div id="relationship-status-note">好友申请正在等待处理</div> : null}
|
||
{!this.state.unconfirmed && this.state.relationshipContext &&
|
||
this.state.relationshipContext.relationship == 'none' ?
|
||
<div id="relationship-status-note">你们还不是好友，发送消息前需先验证 <a href="#"
|
||
onClick={this.handleSendFriendVerification}>发送朋友验证</a></div> : null}
|
||
{this.props.selectMode ?
|
||
<div id="batch-action-bar">
|
||
<div id="batch-action-count">已选 {this.props.selectedSeqs.length} 个</div>
|
||
<div id="batch-action-buttons">
|
||
<a href="#" onClick={e => { e.preventDefault(); this.props.selectedSeqs.length && this.props.onShowBatchForward(); }}
|
||
className={this.props.selectedSeqs.length ? '' : 'disabled'}>
|
||
<i className="material-icons">forward</i>转发
|
||
</a>
|
||
<a href="#" onClick={e => { e.preventDefault(); this.handleBatchFavorite(); }}
|
||
className={this.props.selectedSeqs.length ? '' : 'disabled'}>
|
||
<i className="material-icons">star_border</i>收藏
|
||
</a>
|
||
<a href="#" onClick={e => { e.preventDefault(); this.handleBatchDelete(); }}
|
||
className={this.props.selectedSeqs.length ? '' : 'disabled'}>
|
||
<i className="material-icons">delete_outline</i>删除
|
||
</a>
|
||
</div>
|
||
<a href="#" id="batch-action-cancel" onClick={e => { e.preventDefault(); this.props.onExitSelectMode(); }}>取消</a>
|
||
</div>
|
||
: this.state.unconfirmed ?
|
||
<Invitation onAction={this.handleNewChatAcceptance} />
|
||
:
|
||
<SendMessage
|
||
tinode={this.props.tinode}
|
||
topicName={this.state.topic}
|
||
noInput={!!this.props.forwardMessage}
|
||
// relationshipContext.can_send is deliberately NOT part of this -- per the reference
|
||
// screenshots (个人对话-拉黑状态／已读状态.png etc.), every non-friend relationship
|
||
// state (pending/none/blocked) keeps the composer typable; the restriction shows up as
|
||
// a per-message failure reason (chat-message.jsx, keyed off `relationship`) after a
|
||
// real send attempt, not as a preemptively grayed-out input. can_send has no other
|
||
// reader in the codebase -- this was the only place it was gating anything, and doing
|
||
// so here made every failure-reason branch for those relationships unreachable, since
|
||
// the composer never let you attempt a send in the first place. isWriter/deleted are
|
||
// the real Tinode ACS-level restrictions and are unaffected by this.
|
||
disabled={!this.state.isWriter || this.state.deleted}
|
||
reply={this.state.reply}
|
||
initMessage={this.state.contentToEdit != null ? this.state.contentToEdit : this.state.draftText}
|
||
sendOnEnter={this.props.sendOnEnter}
|
||
onKeyPress={this.sendKeyPress}
|
||
onRecordingProgress={this.sendKeyPress}
|
||
onMessageChange={this.props.forwardMessage ? null : this.handleComposerChange}
|
||
onMentionSearch={(this.props.forwardMessage || !groupTopic) ? null : this.mentionSearch}
|
||
onMentionSelected={this.mentionSelected}
|
||
onSendMessage={this.sendMessage}
|
||
onAttachFile={(this.props.forwardMessage || editingMessage) ? null : this.handleAttachFile}
|
||
onAttachImage={(this.props.forwardMessage || editingMessage) ? null : this.handleAttachImageOrVideo}
|
||
onAttachAudio={(this.props.forwardMessage || editingMessage) ? null : this.sendAudioAttachment}
|
||
canStartCall={!this.props.forwardMessage && this.props.canStartCall}
|
||
onStartAudioCall={this.props.onStartAudioCall}
|
||
onStartVideoCall={this.props.onStartVideoCall}
|
||
onError={this.props.onError}
|
||
onQuoteClick={this.handleQuoteClick}
|
||
onCancelReply={this.handleCancelReply} />}
|
||
</>
|
||
);
|
||
|
||
component2 = (
|
||
<>
|
||
<div id="topic-caption-panel" className="caption-panel">
|
||
{this.props.displayMobile ?
|
||
<a href="#" id="hide-message-view" onClick={(e) => {e.preventDefault(); this.leave(this.state.topic); this.props.onHideMessagesView();}}>
|
||
<i className="material-icons">arrow_back</i>
|
||
</a>
|
||
:
|
||
null}
|
||
<div className="avatar-box">
|
||
<LetterTile
|
||
authorizeURL={this.props.tinode.authorizeURL}
|
||
avatar={avatar}
|
||
topic={this.state.topic}
|
||
title={this.state.title}
|
||
deleted={this.state.deleted} />
|
||
{!isChannel ? <span className={online} /> : null}
|
||
</div>
|
||
<div id="topic-title-group">
|
||
<div id="topic-title" className={titleClass}>{
|
||
this.state.title ||
|
||
<i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
|
||
description="Title shown when the topic has no name" /></i>
|
||
}<ContactBadges badges={icon_badges} /></div>
|
||
<div id="topic-last-seen">{lastSeen}</div>
|
||
</div>
|
||
<div style={{marginLeft: 'auto'}}/>
|
||
{!this.props.displayMobile && this.state.pins.length > 0 ?
|
||
<PinnedMessages
|
||
tinode={this.props.tinode}
|
||
pins={this.state.pins}
|
||
messages={pinnedMessages}
|
||
selected={this.state.selectedPin}
|
||
isAdmin={this.state.isAdmin}
|
||
setSelected={index => this.setState({selectedPin: index})}
|
||
onSelected={this.handleQuoteClick}
|
||
onCancel={this.handleUnpinMessage} />
|
||
: null}
|
||
{groupTopic ?
|
||
<GroupSubs
|
||
tinode={this.props.tinode}
|
||
subscribers={this.state.onlineSubs} /> :
|
||
null
|
||
}
|
||
<div>
|
||
<a href="#" onClick={this.handleContextClick}>
|
||
<i className="material-icons">more_vert</i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
{this.props.displayMobile ?
|
||
<>
|
||
{this.state.pins.length > 0 ?
|
||
<PinnedMessages
|
||
tinode={this.props.tinode}
|
||
pins={this.state.pins}
|
||
messages={pinnedMessages}
|
||
selected={this.state.selectedPin}
|
||
isAdmin={this.state.isAdmin}
|
||
setSelected={index => this.setState({selectedPin: index})}
|
||
onSelected={this.handleQuoteClick}
|
||
onCancel={this.handleUnpinMessage} />
|
||
: null
|
||
}
|
||
<ErrorPanel
|
||
level={this.props.errorLevel}
|
||
text={this.props.errorText}
|
||
onClearError={this.props.onError} />
|
||
</>
|
||
: null}
|
||
<LoadSpinner show={this.state.fetchingMessages} />
|
||
{messagesComponent}
|
||
{this.state.dragging && this.isDragEnabled() ?
|
||
<div className="drag-n-drop">{formatMessage(messages.drag_file)}</div>
|
||
: null}
|
||
</>
|
||
);
|
||
}
|
||
component = <div id="topic-view" ref={this.mountDnDEvents}>{component2}{overlay}{riskDialog}</div>
|
||
}
|
||
return component;
|
||
}
|
||
};
|
||
|
||
export default injectIntl(MessagesView);
|