No OneTemporary
Actions

Size

37 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
	index c75f09d111..9ec73dc444 100644
	--- a/src/components/chat_message/chat_message.js
	+++ b/src/components/chat_message/chat_message.js
	@@ -1,115 +1,119 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import Attachment from 'src/components/attachment/attachment.vue'
	import ChatMessageDate from 'src/components/chat_message_date/chat_message_date.vue'
	import Gallery from 'src/components/gallery/gallery.vue'
	import LinkPreview from 'src/components/link-preview/link-preview.vue'
	import Popover from 'src/components/popover/popover.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserPopover from 'src/components/user_popover/user_popover.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faEllipsisH, faTimes, faCircleNotch } from '@fortawesome/free-solid-svg-icons'

	library.add(faTimes, faEllipsisH, faCircleNotch)

	const ChatMessage = {
	name: 'ChatMessage',
	props: ['edited', 'noHeading', 'chatItem', 'hoveredMessageChain'],
	emits: ['hover'],
	components: {
	Popover,
	Attachment,
	StatusContent,
	UserAvatar,
	Gallery,
	LinkPreview,
	ChatMessageDate,
	UserPopover,
	},
	computed: {
	// Returns HH:MM (hours and minutes) in local time.
	createdAt() {
	const time = this.chatItem.data.created_at
	return time.toLocaleTimeString('en', {
	hour: '2-digit',
	minute: '2-digit',
	hour12: false,
	})
	},
	+ isStatus() {
	+ // ChatMessage only has account_id while Status has full user data
	+ return !!this.message.user
	+ },
	author() {
	const accountId = this.message.account_id \|\| this.message.user.id

	return this.$store.getters.findUser(accountId)
	},
	isCurrentUser() {
	return this.author.id === this.currentUser.id
	},
	message() {
	return this.isMessage ? this.chatItem.data : null
	},
	isMessage() {
	return this.chatItem.type === 'message'
	},
	messageForStatusContent() {
	return {
	summary: '',
	emojis: this.message.emojis,
	raw_html: this.message.content \|\| this.message.raw_html \|\| '',
	text: this.message.content \|\| '',
	attachments: this.message.attachments,
	}
	},
	hasAttachment() {
	return this.message.attachments.length > 0
	},
	...mapPiniaState(useInterfaceStore, {
	betterShadow: (store) => store.browserSupport.cssFilter,
	}),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	restrictedNicknames: (state) => useInstanceStore().restrictedNicknames,
	}),
	popoverMarginStyle() {
	if (this.isCurrentUser) {
	return {}
	} else {
	return { left: 50 }
	}
	},
	...mapPiniaState(useMergedConfigStore, ['mergedConfig', 'findUser']),
	},
	data() {
	return {
	hovered: false,
	menuOpened: false,
	}
	},
	methods: {
	onHover(bool) {
	this.$emit('hover', {
	isHovered: bool,
	messageChainId: this.chatItem.messageChainId,
	})
	},
	async deleteMessage() {
	const confirmed = window.confirm(this.$t('chats.delete_confirm'))
	if (confirmed) {
	- await this.$store.dispatch('deleteChatMessage', {
	+ await this.$emit('delete', {
	messageId: this.chatItem.data.id,
	chatId: this.chatItem.data.chat_id,
	})
	}
	this.hovered = false
	this.menuOpened = false
	},
	},
	}

	export default ChatMessage
	diff --git a/src/components/chat_message_list/chat_message_list.js b/src/components/chat_message_list/chat_message_list.js
	index 168896e335..71199608d7 100644
	--- a/src/components/chat_message_list/chat_message_list.js
	+++ b/src/components/chat_message_list/chat_message_list.js
	@@ -1,110 +1,114 @@
	import { orderBy, throttle, uniqueId } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'

	import ChatMessage from 'src/components/chat_message/chat_message.vue'

	const ChatMessageList = {
	components: {
	ChatMessage,
	},
	props: {
	messages: Array,
	pendingMessages: {
	type: Array,
	required: false,
	default: [],
	},
	headerDate: Boolean,
	},
	data() {
	return {
	hoveredMessageChainId: undefined,
	}
	},
	+ emits: ['messageDelete'],
	computed: {
	chatItems() {
	const messages = [
	...orderBy(this.messages, ['pending', 'id'], ['asc', 'asc']),
	...this.pendingMessages.map((m) => ({ ...m, pending: true })),
	]
	return messages
	.reduceRight((acc, message, index) => {
	const date = new Date(message.created_at)

	const olderMessage = messages[index - 1]
	const newerMessage = messages[index + 1]
	const newerItem = acc[acc.length - 1]

	const diff = olderMessage
	? message.created_at - olderMessage.created_at
	: null

	const MAX_DIFF = 1000 * 60 * 5 // 5 minutes

	const dateDiffs = (() => {
	if (olderMessage) {
	const newerDate = new Date(message.created_at)
	const olderDate = new Date(olderMessage.created_at)

	newerDate.setHours(0, 0, 0, 0)
	olderDate.setHours(0, 0, 0, 0)

	return newerDate.toISOString() !== olderDate.toISOString()
	} else {
	return true
	}
	})()

	const chatItem = {
	type: 'message',
	data: message,
	date,
	id: message.id,
	isTail: true,
	isHead: true,
	}

	if (newerItem == null) {
	chatItem.messageChainId = uniqueId()
	} else {
	if (newerItem.type === 'date') {
	chatItem.messageChainId = uniqueId()
	} else if (newerItem.type === 'message') {
	if (newerItem.data.account_id !== message.account_id) {
	chatItem.messageChainId = uniqueId()
	} else {
	chatItem.messageChainId = newerItem.messageChainId
	chatItem.isTail = false
	newerItem.isHead = false
	}
	}
	}

	if (diff > MAX_DIFF \|\| (!olderMessage && this.headerDate)) {
	return [
	...acc,
	chatItem,
	{
	type: 'date',
	date,
	isDate: dateDiffs,
	isTime: diff > MAX_DIFF && !dateDiffs,
	id: date.getTime().toString(),
	},
	]
	} else {
	return [...acc, chatItem]
	}
	}, [])
	.reverse()
	},
	},
	methods: {
	onMessageHover({ isHovered, messageChainId }) {
	this.hoveredMessageChainId = isHovered ? messageChainId : undefined
	},
	+ onMessageDelete({ messageId, chatId }) {
	+ this.$emit('messageDelete', { messageId, chatId })
	+ },
	},
	}

	export default ChatMessageList
	diff --git a/src/components/chat_message_list/chat_message_list.vue b/src/components/chat_message_list/chat_message_list.vue
	index b1fcd6dd62..4fc52155c3 100644
	--- a/src/components/chat_message_list/chat_message_list.vue
	+++ b/src/components/chat_message_list/chat_message_list.vue
	@@ -1,14 +1,15 @@
	<template>
	<div class="ChatMessageList">
	<ChatMessage
	v-for="chatItem in chatItems"
	:key="chatItem.id"
	:chat-item="chatItem"
	:hovered-message-chain="chatItem.messageChainId === hoveredMessageChainId"
	@hover="onMessageHover"
	+ @delete="onMessageDelete"
	/>
	</div>
	</template>

	<script src="./chat_message_list.js"></script>
	<style src="./chat_message_list.scss" lang="scss" />
	diff --git a/src/components/chat_view/chat_view.js b/src/components/chat_view/chat_view.js
	index 7eb87660ca..2df1a0c5ea 100644
	--- a/src/components/chat_view/chat_view.js
	+++ b/src/components/chat_view/chat_view.js
	@@ -1,475 +1,504 @@
	import { throttle } from 'lodash'
	import { nextTick } from 'vue'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'

	import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
	import ChatTitle from 'src/components/chat_title/chat_title.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	-import chatService from '../../services/chat_service/chat_service.js'
	import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
	import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
	import {
	getNewTopPosition,
	getScrollPosition,
	isBottomedOut,
	isScrollable,
	} from './chat_layout_utils.js'

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	import {
	chatMessages,
	getOrCreateChat,
	readChat,
	sendChatMessage,
	+ deleteChatMessage,
	} from 'src/api/chats.js'
	import { WSConnectionStatus } from 'src/api/websocket.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faChevronDown, faChevronLeft } from '@fortawesome/free-solid-svg-icons'

	library.add(faChevronDown, faChevronLeft)

	const BOTTOMED_OUT_OFFSET = 10
	const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
	const SAFE_RESIZE_TIME_OFFSET = 100
	const MARK_AS_READ_DELAY = 1500
	const MAX_RETRIES = 10

	const isConfirmation = (storage, message) => {
	if (!message.idempotency_key) return
	return storage.idempotencyKeyIndex[message.idempotency_key]
	}

	const Chat = {
	components: {
	ChatMessageList,
	ChatTitle,
	PostStatusForm,
	},
	data() {
	return {
	// Main info
	chat: null,
	messages: [],
	messagesIndex: {},
	pendingMessages: [],
	pendingMessagesIndex: {},
	minId: undefined,
	maxId: undefined,

	// Unread stuff
	newMessageCount: 0,
	lastReadMessageId: null,
	lastScrollPosition: {},
	jumpToBottomButtonVisible: false,

	// Internal network stuff
	fetcher: null,
	errorLoadingChat: false,
	messageRetriers: {},
	idempotencyKeyIndex: {},
	}
	},
	created() {
	this.startFetching()
	window.addEventListener('resize', this.handleResize)
	},
	mounted() {
	window.addEventListener('scroll', this.handleScroll)
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	}

	this.$nextTick(() => {
	this.handleResize()
	})
	},
	unmounted() {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('resize', this.handleResize)
	if (typeof document.hidden !== 'undefined')
	document.removeEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	},
	computed: {
	recipient() {
	return this.chat?.account
	},
	recipientId() {
	return this.$route.params.recipient_id
	},
	formPlaceholder() {
	if (this.recipient) {
	return this.$t('chats.message_user', {
	nickname: this.recipient.screen_name_ui,
	})
	} else {
	return ''
	}
	},
	streamingEnabled() {
	return (
	this.mergedConfig.useStreamingApi &&
	this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	)
	},
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	...mapState({
	mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
	currentUser: (state) => state.users.currentUser,
	}),
	},
	watch: {
	messages() {
	// We don't want to scroll to the bottom on a new message when the user is viewing older messages.
	// Therefore we need to know whether the scroll position was at the bottom before the DOM update.
	const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
	this.$nextTick(() => {
	if (bottomedOutBeforeUpdate) {
	this.scrollDown()
	}
	})
	},
	$route: function () {
	this.startFetching()
	},
	mastoUserSocketStatus(newValue) {
	if (newValue === WSConnectionStatus.JOINED) {
	this.fetchChat({ isFirstFetch: true })
	}
	},
	},
	methods: {
	onFilesDropped() {
	this.$nextTick(() => {
	this.handleResize()
	})
	},
	handleVisibilityChange() {
	this.$nextTick(() => {
	if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) {
	this.scrollDown({ forceRead: true })
	}
	})
	},
	// "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
	handleResize(opts = {}) {
	const { delayed = false } = opts

	if (delayed) {
	setTimeout(() => {
	this.handleResize({ ...opts, delayed: false })
	}, SAFE_RESIZE_TIME_OFFSET)
	return
	}

	this.$nextTick(() => {
	const { offsetHeight = undefined } = getScrollPosition()
	const diff = offsetHeight - this.lastScrollPosition.offsetHeight
	if (diff !== 0 && !this.bottomedOut()) {
	this.$nextTick(() => {
	window.scrollBy({ top: -Math.trunc(diff) })
	})
	}
	this.lastScrollPosition = getScrollPosition()
	})
	},
	scrollDown(options = {}) {
	const { behavior = 'auto', forceRead = false } = options
	this.$nextTick(() => {
	window.scrollTo({
	top: document.documentElement.scrollHeight,
	behavior,
	})
	})
	if (forceRead) {
	this.readChat()
	}
	},
	async readChat() {
	if (!this.maxId \|\| document.hidden) {
	return
	}
	const lastReadId = this.maxId
	const isNewMessage = this.lastReadMessageId !== lastReadId

	if (!isNewMessage) return

	await readChat({
	id: this.chat.id,
	lastReadId,
	credentials: useOAuthStore().token,
	})

	this.$store.commit('readChat', { id: this.chat.id, lastId: lastReadId })
	},
	bottomedOut(offset) {
	return isBottomedOut(offset)
	},
	reachedTop() {
	return window.scrollY <= 0
	},
	cullOlderCheck() {
	window.setTimeout(() => {
	if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	const maxIndex = this.messages.length
	const minIndex = maxIndex - 50
	if (maxIndex <= 50) return

	this.messages = sortBy(this.messages, ['id'])
	this.minId = this.messages[minIndex].id

	for (const message of this.messages) {
	if (message.id < this.minId) {
	delete this.messagesIndex[message.id]
	delete this.idempotencyKeyIndex[message.idempotency_key]
	}
	}

	this.messages = this.messages.slice(minIndex, maxIndex)
	}
	}, 5000)
	},
	handleScroll: throttle(function () {
	if (!this.chat) {
	return
	}
	this.lastScrollPosition = getScrollPosition()

	if (this.reachedTop()) {
	this.fetchChat({ maxId: this.minId })
	} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.jumpToBottomButtonVisible = false
	this.cullOlderCheck()
	if (this.newMessageCount > 0) {
	// Use a delay before marking as read to prevent situation where new messages
	// arrive just as you're leaving the view and messages that you didn't actually
	// get to see get marked as read.
	window.setTimeout(() => {
	// Don't mark as read if the element doesn't exist, user has left chat view
	if (this.$el) this.readChat()
	}, MARK_AS_READ_DELAY)
	}
	} else {
	this.jumpToBottomButtonVisible = true
	}
	}, 200),
	handleScrollUp(positionBeforeLoading) {
	const positionAfterLoading = getScrollPosition()

	window.scrollTo({
	top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
	})
	},
	clear() {
	this.messages = this.messages.filter((m) => m.error)
	this.messagesIndex = this.messages.reduce(
	(acc, m) => ({
	...acc,
	[m.id]: m,
	}),
	{},
	)
	this.newMessageCount = 0
	this.lastReadMessageId = null
	this.minId = undefined
	this.maxId = undefined
	},
	async fetchChat({ isFirstFetch = false, fetchLatest = false, maxId }) {
	if (fetchLatest && this.streamingEnabled) {
	return
	}

	const { data: messages } = await chatMessages({
	id: this.chat.id,
	maxId,
	sinceId: fetchLatest ? this.maxId : null,
	credentials: useOAuthStore().token,
	})

	// Clear the current chat in case we're recovering from a ws connection loss.
	if (isFirstFetch) {
	this.clear()
	}

	const positionBeforeUpdate = getScrollPosition()
	this.addMessages({ messages })

	await nextTick()

	const fetchOlderMessages = !!maxId
	if (fetchOlderMessages) {
	this.handleScrollUp(positionBeforeUpdate)
	}

	// In vertical screens, the first batch of fetched messages may not always take the
	// full height of the scrollable container.
	// If this is the case, we want to fetch the messages until the scrollable container
	// is fully populated so that the user has the ability to scroll up and load the history.
	if (!isScrollable() && messages.length > 0) {
	this.fetchChat({
	maxId: this.minId,
	})
	}
	},
	async startFetching() {
	try {
	const { data } = await getOrCreateChat({
	accountId: this.recipientId,
	credentials: useOAuthStore().token,
	})
	this.chat = data
	} catch (e) {
	console.error('Error creating or getting a chat', e)
	this.errorLoadingChat = true
	}

	if (this.chat) {
	this.$nextTick(() => {
	this.scrollDown({ forceRead: true })
	})
	this.doStartFetching()
	}
	},
	doStartFetching() {
	this.fetcher = promiseInterval(
	() => this.fetchChat({ fetchLatest: true }),
	5000,
	)
	this.fetchChat({ isFirstFetch: true })
	},
	+ async deleteChatMessage({ chatId, messageId }) {
	+ await deleteChatMessage({
	+ chatId,
	+ messageId,
	+ credentials: useOAuthStore().token,
	+ })
	+
	+ this.messages = this.messages.filter((m) => m.id !== messageId)
	+ delete this.messagesIndex[messageId]
	+
	+ if (this.maxId === messageId) {
	+ const lastMessage = maxBy(this.messages, 'id')
	+ this.maxId = lastMessage.id
	+ }
	+
	+ if (this.minId === messageId) {
	+ const firstMessage = minBy(this.messages, 'id')
	+ this.minId = firstMessage.id
	+ }
	+ },
	addMessages({ messages: newMessages }) {
	for (let i = 0; i < newMessages.length; i++) {
	const message = newMessages[i]

	// Sanity check
	if (message.chat_id !== this.chat.id) {
	console.warn(`Chat message doesn't belong to current chat (id: ${this.chat.id})!!`, message)
	return
	}

	// Clear any known pending messages
	if (message.idempotency_key) {
	if (this.pendingMessagesIndex[message.idempotencyKeyIndex]) {
	delete this.pendingMessagesIndex[message.idempotencyKeyIndex]
	this.pendingMessages = this.pendingMessages.filter(({ idempotency_key }) => idempotency_key !== message.idempotency_key)
	}
	}

	if (!this.minId \|\| (!message.pending && message.id < this.minId)) {
	this.minId = message.id
	}

	if (!this.maxId \|\| message.id > this.maxId) {
	this.maxId = message.id
	}

	if (!this.messagesIndex[message.id] && !isConfirmation(this, message)) {
	if (this.lastSeenMessageId < message.id) {
	this.newMessageCount++
	}
	this.messagesIndex[message.id] = message
	this.messages.push(this.messagesIndex[message.id])
	this.idempotencyKeyIndex[message.idempotency_key] = true
	}
	}
	},
	handleAttachmentPosting() {
	this.$nextTick(() => {
	this.handleResize()
	// When the posting form size changes because of a media attachment, we need an extra resize
	// to account for the potential delay in the DOM update.
	this.scrollDown({ forceRead: true })
	})
	},
	async sendMessage({ status, media, idempotencyKey }) {
	const params = {
	id: this.chat.id,
	content: status,
	idempotencyKey,
	}

	if (media[0]) {
	params.mediaId = media[0].id
	}

	const fakeMessage = buildFakeMessage({
	attachments: media,
	chatId: this.chat.id,
	content: status,
	userId: this.currentUser.id,
	idempotencyKey,
	})

	this.pendingMessages.push(fakeMessage)
	this.pendingMessagesIndex[idempotencyKey] = fakeMessage

	this.handleAttachmentPosting()

	return this.doSendMessage({
	params,
	retriesLeft: MAX_RETRIES,
	})
	},
	async doSendMessage({ params, pendingId, retriesLeft = MAX_RETRIES }) {
	if (retriesLeft <= 0) return

	try {
	const { data } = await sendChatMessage({
	...params,
	credentials: useOAuthStore().token,
	})

	this.addMessages({
	messages: [{ ...data }],
	})
	} catch (error) {
	- if (error.name !== 'StatusCodeError') throw error
	+ if (error.name !== 'StatusCodeError' \|\| error.message === 'Failed to fetch') throw error
	console.error('Error sending message', error)

	this.handleMessageError({
	chatId: this.chat.id,
	+ idempotencyKey: params.idempotencyKey,
	isRetry: retriesLeft !== MAX_RETRIES,
	})

	if (
	(error.statusCode >= 500 && error.statusCode < 600) \|\|
	error.message === 'Failed to fetch'
	) {
	this.messageRetriers[fakeMessage.id] = setTimeout(
	() => {
	this.doSendMessage({
	params,
	fakeMessage,
	retriesLeft: retriesLeft - 1,
	})
	},
	1000 * 2 ** (MAX_RETRIES - retriesLeft),
	)
	}
	}
	},
	+ handleMessageError(idempotencyKey, isRetry) {
	+ const fakeMessage = this.pendingMessagesIndex[idempotencyKey]
	+
	+ if (fakeMessage) {
	+ fakeMessage.error = true
	+ fakeMessage.pending = false
	+ }
	+ },
	goBack() {
	this.$router.push({
	name: 'chats',
	params: { username: this.currentUser.screen_name },
	})
	},
	},
	}

	export default Chat
	diff --git a/src/components/chat_view/chat_view.vue b/src/components/chat_view/chat_view.vue
	index 5285bb1d82..0255347a9d 100644
	--- a/src/components/chat_view/chat_view.vue
	+++ b/src/components/chat_view/chat_view.vue
	@@ -1,81 +1,82 @@
	<template>
	<div class="chat-view">
	<div class="chat-view-inner">
	<div
	ref="inner"
	class="panel-default panel chat-view-body"
	>
	<div
	ref="header"
	class="panel-heading -sticky chat-view-heading"
	>
	<button
	class="button-unstyled go-back-button"
	@click="goBack"
	>
	<FAIcon
	size="lg"
	icon="chevron-left"
	/>
	</button>
	<div class="title text-center">
	<ChatTitle
	:user="recipient"
	:with-avatar="true"
	/>
	</div>
	</div>
	<ChatMessageList
	header-date
	:messages="messages"
	:pending-messages="pendingMessages"
	+ @message-delete="deleteChatMessage"
	/>
	<div
	ref="footer"
	class="panel-body footer"
	>
	<div
	class="jump-to-bottom-button"
	:class="{ 'visible': jumpToBottomButtonVisible }"
	@click="scrollDown({ behavior: 'smooth' })"
	>
	<span>
	<FAIcon icon="chevron-down" />
	<div
	v-if="newMessageCount"
	class="badge -notification unread-chat-count unread-message-count"
	>
	{{ newMessageCount }}
	</div>
	</span>
	</div>
	<PostStatusForm
	:disable-subject="true"
	:disable-scope-selector="true"
	:disable-notice="true"
	:disable-lock-warning="true"
	:disable-polls="true"
	:disable-quotes="true"
	:disable-sensitivity-checkbox="true"
	:disable-submit="errorLoadingChat \|\| !chat"
	:disable-preview="true"
	:disable-draft="true"
	:optimistic-posting="true"
	:post-handler="sendMessage"
	:submit-on-enter="!mobileLayout"
	:preserve-focus="!mobileLayout"
	:auto-focus="!mobileLayout"
	:placeholder="formPlaceholder"
	:file-limit="1"
	max-height="160"
	emoji-picker-placement="top"
	@resize="handleResize"
	/>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./chat_view.js"></script>
	<style src="./chat_view.scss" lang="scss" />
	diff --git a/src/modules/chats.js b/src/modules/chats.js
	index 9bd85dccd4..1b03a85c5f 100644
	--- a/src/modules/chats.js
	+++ b/src/modules/chats.js
	@@ -1,173 +1,141 @@
	import { find, omitBy, orderBy, sumBy } from 'lodash'
	import { reactive } from 'vue'

	-import chatService from '../services/chat_service/chat_service.js'
	import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'
	import { promiseInterval } from '../services/promise_interval/promise_interval.js'

	import { useOAuthStore } from 'src/stores/oauth.js'

	import { chats, deleteChatMessage } from 'src/api/chats.js'

	const emptyChatList = () => ({
	data: [],
	idStore: {},
	})

	const defaultState = {
	chatList: emptyChatList(),
	chatListFetcher: null,
	- fetcher: undefined,
	- currentChatId: null,
	- lastReadMessageId: null,
	}

	const getChatById = (state, id) => {
	return find(state.chatList.data, { id })
	}

	const sortedChatList = (state) => {
	return orderBy(state.chatList.data, ['updated_at'], ['desc'])
	}

	const unreadChatCount = (state) => {
	return sumBy(state.chatList.data, 'unread')
	}

	const chatsModule = {
	state: { ...defaultState },
	getters: {
	sortedChatList,
	unreadChatCount,
	},
	actions: {
	// Chat list
	startFetchingChats({ dispatch, commit }) {
	const fetcher = () => dispatch('fetchChats', { latest: true })
	commit('setChatListFetcher', {
	fetcher: () => promiseInterval(fetcher, 5000),
	})
	},
	stopFetchingChats({ commit }) {
	commit('setChatListFetcher', { fetcher: undefined })
	},
	fetchChats({ dispatch, rootState }) {
	return chats({
	credentials: useOAuthStore().token,
	}).then(({ data }) => {
	dispatch('addNewChats', { chats: data })
	return chats
	})
	},
	addNewChats(store, { chats }) {
	const { commit, dispatch, rootGetters } = store
	const newChatMessageSideEffects = (chat) => {
	maybeShowChatNotification(store, chat)
	}
	commit(
	'addNewUsers',
	chats.map((k) => k.account).filter((k) => k),
	)
	commit('addNewChats', {
	dispatch,
	chats,
	rootGetters,
	newChatMessageSideEffects,
	})
	},
	-
	- // Opened Chats
	- addOpenedChat({ commit, dispatch }, { chat }) {
	- commit('addOpenedChat', { dispatch, chat })
	- dispatch('addNewUsers', [chat.account])
	- },
	- addChatMessages({ commit }, value) {
	- commit('addChatMessages', { commit, ...value })
	- },
	- deleteChatMessage({ rootState, commit }, value) {
	- deleteChatMessage({
	- ...value,
	- credentials: useOAuthStore().token,
	- })
	- commit('deleteChatMessage', { commit, ...value })
	- },
	- resetChats({ commit, dispatch }) {
	- commit('resetChats', { commit })
	- },
	- clearOpenedChats({ commit }) {
	- commit('clearOpenedChats', { commit })
	- },
	- handleMessageError({ commit }, value) {
	- commit('handleMessageError', { commit, ...value })
	- },
	},
	mutations: {
	setChatListFetcher(state, { fetcher }) {
	const prevFetcher = state.chatListFetcher
	if (prevFetcher) {
	prevFetcher.stop()
	}
	state.chatListFetcher = fetcher && fetcher()
	},
	- setCurrentChatId(state, { chatId }) {
	- state.currentChatId = chatId
	- },
	addNewChats(state, { chats, newChatMessageSideEffects }) {
	chats.forEach((updatedChat) => {
	const chat = getChatById(state, updatedChat.id)

	if (chat) {
	const isNewMessage =
	(chat.lastMessage && chat.lastMessage.id) !==
	(updatedChat.lastMessage && updatedChat.lastMessage.id)
	chat.lastMessage = updatedChat.lastMessage
	chat.unread = updatedChat.unread
	chat.updated_at = updatedChat.updated_at
	if (isNewMessage && chat.unread) {
	newChatMessageSideEffects(updatedChat)
	}
	} else {
	state.chatList.data.push(updatedChat)
	state.chatList.idStore[updatedChat.id] = updatedChat
	}
	})
	},
	updateChat(state, { chat: updatedChat }) {
	const chat = getChatById(state, updatedChat.id)
	if (chat) {
	chat.lastMessage = updatedChat.lastMessage
	chat.unread = updatedChat.unread
	chat.updated_at = updatedChat.updated_at
	}
	if (!chat) {
	state.chatList.data.unshift(updatedChat)
	}
	state.chatList.idStore[updatedChat.id] = updatedChat
	},
	deleteChat(state, { id }) {
	state.chats.data = state.chats.data.filter(
	(conversation) => conversation.last_status.id !== id,
	)
	state.chats.idStore = omitBy(
	state.chats.idStore,
	(conversation) => conversation.last_status.id === id,
	)
	},
	resetChats(state, { commit }) {
	state.chatList = emptyChatList()
	state.currentChatId = null
	commit('setChatListFetcher', { fetcher: undefined })
	},
	setChatsLoading(state, { value }) {
	state.chats.loading = value
	},
	readChat(state, { id, lastReadId }) {
	const chat = getChatById(state, id)
	if (chat) {
	chat.unread = 0
	}
	},
	},
	}

	export default chatsModule
	diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js
	deleted file mode 100644
	index 50d069b26b..0000000000
	--- a/src/services/chat_service/chat_service.js
	+++ /dev/null
	@@ -1,61 +0,0 @@
	-import { maxBy, minBy, orderBy, sortBy, uniqueId } from 'lodash'
	-
	-const deleteMessage = (storage, messageId) => {
	- if (!storage) {
	- return
	- }
	- storage.messages = storage.messages.filter((m) => m.id !== messageId)
	- delete storage.idIndex[messageId]
	-
	- if (storage.maxId === messageId) {
	- const lastMessage = maxBy(storage.messages, 'id')
	- storage.maxId = lastMessage.id
	- }
	-
	- if (storage.minId === messageId) {
	- const firstMessage = minBy(storage.messages, 'id')
	- storage.minId = firstMessage.id
	- }
	-}
	-
	-const handleMessageError = (storage, fakeId, isRetry) => {
	- if (!storage) {
	- return
	- }
	- const fakeMessage = storage.idIndex[fakeId]
	- if (fakeMessage) {
	- fakeMessage.error = true
	- fakeMessage.pending = false
	- if (!isRetry) {
	- // Ensure the failed message doesn't stay at the bottom of the list.
	- const lastPersistedMessage = orderBy(
	- storage.messages,
	- ['pending', 'id'],
	- ['asc', 'desc'],
	- )[0]
	- if (lastPersistedMessage) {
	- const oldId = fakeMessage.id
	- fakeMessage.id = `${lastPersistedMessage.id}-${new Date().getTime()}`
	- storage.idIndex[fakeMessage.id] = fakeMessage
	- delete storage.idIndex[oldId]
	- }
	- }
	- }
	-}
	-
	-
	-const resetNewMessageCount = (storage) => {
	- if (!storage) {
	- return
	- }
	- storage.newMessageCount = 0
	- storage.lastSeenMessageId = storage.maxId
	-}
	-
	-const ChatService = {
	- deleteMessage,
	- resetNewMessageCount,
	- handleMessageError,
	-}
	-
	-export default ChatService
	diff --git a/test/unit/specs/services/chat_service/chat_service.spec.js b/test/unit/specs/services/chat_service/chat_service.spec.js
	index 1cf5aa780b..35b7aafcbb 100644
	--- a/test/unit/specs/services/chat_service/chat_service.spec.js
	+++ b/test/unit/specs/services/chat_service/chat_service.spec.js
	@@ -1,122 +1,120 @@
	-import chatService from '../../../../../src/services/chat_service/chat_service.js'
	-
	const message1 = {
	id: '9wLkdcmQXD21Oy8lEX',
	idempotency_key: '1',
	created_at: new Date('2020-06-22T18:45:53.000Z'),
	}

	const message2 = {
	id: '9wLkdp6ihaOVdNj8Wu',
	idempotency_key: '2',
	account_id: '9vmRb29zLQReckr5ay',
	created_at: new Date('2020-06-22T18:45:56.000Z'),
	}

	const message3 = {
	id: '9wLke9zL4Dy4OZR2RM',
	idempotency_key: '3',
	account_id: '9vmRb29zLQReckr5ay',
	created_at: new Date('2020-07-22T18:45:59.000Z'),
	}

	describe('chatService', () => {
	describe('.add', () => {
	it("Doesn't add duplicates", () => {
	const chat = chatService.empty()
	chatService.add(chat, { messages: [message1] })
	chatService.add(chat, { messages: [message1] })
	expect(chat.messages.length).to.eql(1)

	chatService.add(chat, { messages: [message2] })
	expect(chat.messages.length).to.eql(2)
	})

	it('Updates minId and lastMessage and newMessageCount', () => {
	const chat = chatService.empty()

	chatService.add(chat, { messages: [message1] })
	expect(chat.maxId).to.eql(message1.id)
	expect(chat.minId).to.eql(message1.id)
	expect(chat.newMessageCount).to.eql(1)

	chatService.add(chat, { messages: [message2] })
	expect(chat.maxId).to.eql(message2.id)
	expect(chat.minId).to.eql(message1.id)
	expect(chat.newMessageCount).to.eql(2)

	chatService.resetNewMessageCount(chat)
	expect(chat.newMessageCount).to.eql(0)
	expect(chat.lastSeenMessageId).to.eql(message2.id)

	// Add message with higher id
	chatService.add(chat, { messages: [message3] })
	expect(chat.newMessageCount).to.eql(1)
	})
	})

	describe('.delete', () => {
	it('Updates minId and lastMessage', () => {
	const chat = chatService.empty()

	chatService.add(chat, { messages: [message1] })
	chatService.add(chat, { messages: [message2] })
	chatService.add(chat, { messages: [message3] })

	expect(chat.maxId).to.eql(message3.id)
	expect(chat.minId).to.eql(message1.id)

	chatService.deleteMessage(chat, message3.id)
	expect(chat.maxId).to.eql(message2.id)
	expect(chat.minId).to.eql(message1.id)

	chatService.deleteMessage(chat, message1.id)
	expect(chat.maxId).to.eql(message2.id)
	expect(chat.minId).to.eql(message2.id)
	})
	})

	describe('.getView', () => {
	it('Inserts date separators', () => {
	const chat = chatService.empty()

	chatService.add(chat, { messages: [message1] })
	chatService.add(chat, { messages: [message2] })
	chatService.add(chat, { messages: [message3] })

	const view = chatService.getView(chat)
	expect(view.map((i) => i.type)).to.eql([
	'date',
	'message',
	'message',
	'date',
	'message',
	])
	})
	})

	describe('.cullOlderMessages', () => {
	it('keeps 50 newest messages and idIndex matches', () => {
	const chat = chatService.empty()

	for (let i = 100; i > 0; i--) {
	// Use decimal values with toFixed to hack together constant length predictable strings
	chatService.add(chat, {
	messages: [
	{
	...message1,
	id: 'a' + (i / 1000).toFixed(3),
	idempotency_key: i,
	},
	],
	})
	}
	chatService.cullOlderMessages(chat)
	expect(chat.messages.length).to.eql(50)
	expect(chat.messages[0].id).to.eql('a0.051')
	expect(chat.minId).to.eql('a0.051')
	expect(chat.messages[49].id).to.eql('a0.100')
	expect(Object.keys(chat.idIndex).length).to.eql(50)
	})
	})
	})

File Metadata

Mime Type: text/x-diff
Expires: Tue, Oct 13, 9:18 AM (1 d, 21 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1786694
Default Alt Text: (37 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions