message.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. import "./message-body.js";
  2. import './dropdown.js';
  3. import './message-actions.js';
  4. import MessageVersionsModal from '../modals/message-versions.js';
  5. import dayjs from 'dayjs';
  6. import filesize from "filesize";
  7. import tpl_chat_message from '../templates/chat_message.js';
  8. import tpl_spinner from '../templates/spinner.js';
  9. import { CustomElement } from './element.js';
  10. import { __ } from '@converse/headless/i18n';
  11. import { _converse, api, converse } from "@converse/headless/converse-core";
  12. import { html } from 'lit-element';
  13. import { renderAvatar } from './../templates/directives/avatar';
  14. const { Strophe } = converse.env;
  15. const u = converse.env.utils;
  16. const i18n_show = __('Show more');
  17. const i18n_show_less = __('Show less');
  18. const i18n_uploading = __('Uploading file:');
  19. class Message extends CustomElement {
  20. static get properties () {
  21. return {
  22. chatview: { type: Object},
  23. correcting: { type: Boolean },
  24. editable: { type: Boolean },
  25. edited: { type: String },
  26. error: { type: String },
  27. error_text: { type: String },
  28. from: { type: String },
  29. has_mentions: { type: Boolean },
  30. hats: { type: Array },
  31. is_delayed: { type: Boolean },
  32. is_encrypted: { type: Boolean },
  33. is_first_unread: { type: Boolean },
  34. is_me_message: { type: Boolean },
  35. is_only_emojis: { type: Boolean },
  36. is_retracted: { type: Boolean },
  37. is_spoiler: { type: Boolean },
  38. is_spoiler_visible: { type: Boolean },
  39. message_type: { type: String },
  40. model: { type: Object },
  41. moderated_by: { type: String },
  42. moderation_reason: { type: String },
  43. msgid: { type: String },
  44. occupant_affiliation: { type: String },
  45. occupant_role: { type: String },
  46. oob_url: { type: String },
  47. progress: { type: Number },
  48. reason: { type: String },
  49. received: { type: String },
  50. retractable: { type: Boolean },
  51. retry_event_id: { type: String },
  52. sender: { type: String },
  53. show_spinner: { type: Boolean },
  54. spoiler_hint: { type: String },
  55. subject: { type: String },
  56. time: { type: String },
  57. username: { type: String }
  58. }
  59. }
  60. render () {
  61. const format = api.settings.get('time_format');
  62. this.pretty_time = dayjs(this.time).format(format);
  63. if (this.show_spinner) {
  64. return tpl_spinner();
  65. } else if (this.model.get('file') && !this.model.get('oob_url')) {
  66. return this.renderFileProgress();
  67. } else if (['error', 'info'].includes(this.message_type)) {
  68. return this.renderInfoMessage();
  69. } else {
  70. return this.renderChatMessage();
  71. }
  72. }
  73. updated () {
  74. // XXX: This is ugly but tests rely on this event.
  75. // For "normal" chat messages the event is fired in
  76. // src/templates/directives/body.js
  77. if (
  78. this.show_spinner ||
  79. (this.model.get('file') && !this.model.get('oob_url')) ||
  80. (['error', 'info'].includes(this.message_type))
  81. ) {
  82. this.model.collection?.trigger('rendered', this.model);
  83. }
  84. }
  85. renderInfoMessage () {
  86. const isodate = dayjs(this.model.get('time')).toISOString();
  87. const i18n_retry = __('Retry');
  88. return html`
  89. <div class="message chat-info chat-${this.message_type}"
  90. data-isodate="${isodate}"
  91. data-type="${this.data_name}"
  92. data-value="${this.data_value}">
  93. <div class="chat-info__message">
  94. ${ this.model.getMessageText() }
  95. </div>
  96. ${ this.reason ? html`<q class="reason">${this.reason}</q>` : `` }
  97. ${ this.error_text ? html`<q class="reason">${this.error_text}</q>` : `` }
  98. ${ this.retry_event_id ? html`<a class="retry" @click=${this.onRetryClicked}>${i18n_retry}</a>` : '' }
  99. </div>
  100. `;
  101. }
  102. renderFileProgress () {
  103. const filename = this.model.file.name;
  104. const size = filesize(this.model.file.size);
  105. return html`
  106. <div class="message chat-msg">
  107. ${ renderAvatar(this.getAvatarData()) }
  108. <div class="chat-msg__content">
  109. <span class="chat-msg__text">${i18n_uploading} <strong>${filename}</strong>, ${size}</span>
  110. <progress value="${this.progress}"/>
  111. </div>
  112. </div>`;
  113. }
  114. renderChatMessage () {
  115. return tpl_chat_message(this);
  116. }
  117. shouldShowAvatar () {
  118. return api.settings.get('show_message_avatar') && !this.is_me_message && this.type !== 'headline';
  119. }
  120. getAvatarData () {
  121. const image_type = this.model.vcard?.get('image_type') || _converse.DEFAULT_IMAGE_TYPE;
  122. const image_data = this.model.vcard?.get('image') || _converse.DEFAULT_IMAGE;
  123. const image = "data:" + image_type + ";base64," + image_data;
  124. return {
  125. 'classes': 'chat-msg__avatar',
  126. 'height': 36,
  127. 'width': 36,
  128. image,
  129. };
  130. }
  131. async onRetryClicked () {
  132. this.show_spinner = true;
  133. await api.trigger(this.retry_event_id, {'synchronous': true});
  134. this.model.destroy();
  135. this.parentElement.removeChild(this);
  136. }
  137. isFollowup () {
  138. const messages = this.model.collection.models;
  139. const idx = messages.indexOf(this.model);
  140. const prev_model = idx ? messages[idx-1] : null;
  141. if (prev_model === null) {
  142. return false;
  143. }
  144. const date = dayjs(this.time);
  145. return this.from === prev_model.get('from') &&
  146. !this.is_me_message &&
  147. !prev_model.isMeCommand() &&
  148. this.message_type !== 'info' &&
  149. prev_model.get('type') !== 'info' &&
  150. date.isBefore(dayjs(prev_model.get('time')).add(10, 'minutes')) &&
  151. this.is_encrypted === prev_model.get('is_encrypted');
  152. }
  153. getExtraMessageClasses () {
  154. const extra_classes = [
  155. this.isFollowup() ? 'chat-msg--followup' : null,
  156. this.is_delayed ? 'delayed' : null,
  157. this.is_me_message ? 'chat-msg--action' : null,
  158. this.is_retracted ? 'chat-msg--retracted' : null,
  159. this.message_type,
  160. this.shouldShowAvatar() ? 'chat-msg--with-avatar' : null,
  161. ].map(c => c);
  162. if (this.message_type === 'groupchat') {
  163. this.occupant_role && extra_classes.push(this.occupant_role);
  164. this.occupant_affiliation && extra_classes.push(this.occupant_affiliation);
  165. if (this.sender === 'them' && this.has_mentions) {
  166. extra_classes.push('mentioned');
  167. }
  168. }
  169. this.correcting && extra_classes.push('correcting');
  170. return extra_classes.filter(c => c).join(" ");
  171. }
  172. getRetractionText () {
  173. if (this.message_type === 'groupchat' && this.moderated_by) {
  174. const retracted_by_mod = this.moderated_by;
  175. const chatbox = this.model.collection.chatbox;
  176. if (!this.model.mod) {
  177. this.model.mod =
  178. chatbox.occupants.findOccupant({'jid': retracted_by_mod}) ||
  179. chatbox.occupants.findOccupant({'nick': Strophe.getResourceFromJid(retracted_by_mod)});
  180. }
  181. const modname = this.model.mod ? this.model.mod.getDisplayName() : 'A moderator';
  182. return __('%1$s has removed this message', modname);
  183. } else {
  184. return __('%1$s has removed this message', this.model.getDisplayName());
  185. }
  186. }
  187. renderRetraction () {
  188. const retraction_text = this.is_retracted ? this.getRetractionText() : null;
  189. return html`
  190. <div>${retraction_text}</div>
  191. ${ this.moderation_reason ? html`<q class="chat-msg--retracted__reason">${this.moderation_reason}</q>` : '' }
  192. `;
  193. }
  194. renderMessageText () {
  195. const tpl_spoiler_hint = html`
  196. <div class="chat-msg__spoiler-hint">
  197. <span class="spoiler-hint">${this.spoiler_hint}</span>
  198. <a class="badge badge-info spoiler-toggle" href="#" @click=${this.toggleSpoilerMessage}>
  199. <i class="fa ${this.is_spoiler_visible ? 'fa-eye-slash' : 'fa-eye'}"></i>
  200. ${ this.is_spoiler_visible ? i18n_show_less : i18n_show }
  201. </a>
  202. </div>
  203. `;
  204. return html`
  205. ${ this.is_spoiler ? tpl_spoiler_hint : '' }
  206. ${ this.subject ? html`<div class="chat-msg__subject">${this.subject}</div>` : '' }
  207. <converse-chat-message-body
  208. .model="${this.model}"
  209. ?is_me_message="${this.is_me_message}"
  210. ?is_only_emojis="${this.is_only_emojis}"
  211. ?is_spoiler="${this.is_spoiler}"
  212. ?is_spoiler_visible="${this.is_spoiler_visible}"
  213. text="${this.model.getMessageText()}"></converse-chat-message-body>
  214. ${ this.oob_url ? html`<div class="chat-msg__media">${u.getOOBURLMarkup(_converse, this.oob_url)}</div>` : '' }
  215. <div class="chat-msg__error">${ this.error_text || this.error }</div>
  216. `;
  217. }
  218. renderAvatarByline () {
  219. return html`
  220. ${ this.hats.map(h => html`<span class="badge badge-secondary">${h.title}</span>`) }
  221. <time timestamp="${this.time}" class="chat-msg__time">${this.pretty_time}</time>
  222. `;
  223. }
  224. showMessageVersionsModal (ev) {
  225. ev.preventDefault();
  226. if (this.message_versions_modal === undefined) {
  227. this.message_versions_modal = new MessageVersionsModal({'model': this.model});
  228. }
  229. this.message_versions_modal.show(ev);
  230. }
  231. toggleSpoilerMessage (ev) {
  232. ev?.preventDefault();
  233. this.model.save({'is_spoiler_visible': !this.model.get('is_spoiler_visible')});
  234. }
  235. }
  236. customElements.define('converse-chat-message', Message);