feat: Sidebar draft group (#38225)

dougfabris · web-flow · commit fac64728505b · 2026-04-30T13:26:53.000-03:00
diff --git a/.changeset/red-maps-wink.md b/.changeset/red-maps-wink.md
@@ -0,0 +1,8 @@
+---
+'@rocket.chat/ui-client': minor
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Adds a new "Drafts" group to the sidebar, providing quick access to all rooms with unfinished messages.
+> This feature is available under the `Drafts in sidebar` feature preview and needs to be enabled in settings to be tested.
diff --git a/apps/meteor/app/api/server/v1/rooms.ts b/apps/meteor/app/api/server/v1/rooms.ts
@@ -64,6 +64,7 @@ import { createDiscussion } from '../../../discussion/server/methods/createDiscu
 import { FileUpload } from '../../../file-upload/server';
 import { sendFileMessage } from '../../../file-upload/server/methods/sendFileMessage';
 import { syncRolePrioritiesForRoomIfRequired } from '../../../lib/server/functions/syncRolePrioritiesForRoomIfRequired';
+import { notifyOnSubscriptionChanged } from '../../../lib/server/lib/notifyListener';
 import { executeArchiveRoom } from '../../../lib/server/methods/archiveRoom';
 import { cleanRoomHistoryMethod } from '../../../lib/server/methods/cleanRoomHistory';
 import { executeGetRoomRoles } from '../../../lib/server/methods/getRoomRoles';
@@ -414,6 +415,54 @@ const roomsSaveNotificationEndpoint = API.v1.post(
 	},
 );
 
+const saveDraftBodySchema = ajv.compile<{ rid: IRoom['_id']; draft: string }>({
+	type: 'object',
+	properties: {
+		rid: { type: 'string', minLength: 1 },
+		draft: { type: 'string' },
+	},
+	required: ['rid', 'draft'],
+	additionalProperties: false,
+});
+
+const saveDraftResponseSchema = ajv.compile<void>({
+	type: 'object',
+	properties: {
+		success: { type: 'boolean', enum: [true] },
+	},
+	required: ['success'],
+	additionalProperties: false,
+});
+
+const roomsSaveDraftEndpoint = API.v1.post(
+	'rooms.saveDraft',
+	{
+		authRequired: true,
+		body: saveDraftBodySchema,
+		response: {
+			200: saveDraftResponseSchema,
+			400: validateBadRequestErrorResponse,
+			401: validateUnauthorizedErrorResponse,
+		},
+	},
+	async function action() {
+		const { rid, draft } = this.bodyParams;
+
+		if (draft.length > (settings.get<number>('Message_MaxAllowedSize') ?? 0)) {
+			return API.v1.failure('error-message-size-exceeded');
+		}
+
+		const subscription = await Subscriptions.updateDraftByRoomIdAndUserId(rid, this.userId, draft || undefined);
+		if (!subscription) {
+			throw new Meteor.Error('error-invalid-subscription', 'Invalid subscription');
+		}
+
+		void notifyOnSubscriptionChanged(subscription);
+
+		return API.v1.success();
+	},
+);
+
 API.v1.post(
 	'rooms.cleanHistory',
 	{
@@ -1630,7 +1679,8 @@ export const roomEndpoints = API.v1
 	);
 type RoomEndpoints = ExtractRoutesFromAPI<typeof roomEndpoints> &
 	ExtractRoutesFromAPI<typeof roomDeleteEndpoint> &
-	ExtractRoutesFromAPI<typeof roomsSaveNotificationEndpoint>;
+	ExtractRoutesFromAPI<typeof roomsSaveNotificationEndpoint> &
+	ExtractRoutesFromAPI<typeof roomsSaveDraftEndpoint>;
 
 declare module '@rocket.chat/rest-typings' {
 	// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-empty-interface
diff --git a/apps/meteor/app/ui-message/client/messageBox/createComposerAPI.ts b/apps/meteor/app/ui-message/client/messageBox/createComposerAPI.ts
@@ -1,6 +1,5 @@
 import type { IMessage } from '@rocket.chat/core-typings';
 import { Emitter } from '@rocket.chat/emitter';
-import { Accounts } from 'meteor/accounts-base';
 import { Tracker } from 'meteor/tracker';
 import type { RefObject } from 'react';
 
@@ -13,7 +12,8 @@ import { withDebouncing } from '../../../../lib/utils/highOrderFunctions';
 
 export const createComposerAPI = (
 	input: HTMLTextAreaElement,
-	storageID: string,
+	persistDraft: (value: string) => void,
+	initialDraft: string,
 	quoteChainLimit: number,
 	composerRef: RefObject<HTMLElement>,
 	{ rid, tmid }: { rid: string; tmid?: string },
@@ -40,20 +40,13 @@ export const createComposerAPI = (
 	let _quotedMessages: IMessage[] = [];
 
 	const persist = withDebouncing({ wait: 300 })(() => {
-		if (input.value) {
-			Accounts.storageLocation.setItem(storageID, input.value);
-			return;
-		}
-
-		Accounts.storageLocation.removeItem(storageID);
+		persistDraft(input.value);
 	});
 
 	const notifyQuotedMessagesUpdate = (): void => {
 		emitter.emit('quotedMessagesUpdate');
 	};
 
-	input.addEventListener('input', persist);
-
 	const setText = (
 		text: string,
 		{
@@ -282,10 +275,12 @@ export const createComposerAPI = (
 
 	const insertNewLine = (): void => insertText('\n');
 
-	setText(Accounts.storageLocation.getItem(storageID) ?? '', {
+	setText(initialDraft, {
 		skipFocus: true,
 	});
 
+	input.addEventListener('input', persist);
+
 	// Gets the text that is connected to the cursor and replaces it with the given text
 	const replaceText = (text: string, selection: { readonly start: number; readonly end: number }): void => {
 		const { selectionStart, selectionEnd } = input;
diff --git a/apps/meteor/client/sidebar/hooks/useRoomList.ts b/apps/meteor/client/sidebar/hooks/useRoomList.ts
@@ -1,5 +1,6 @@
 import type { ILivechatInquiryRecord } from '@rocket.chat/core-typings';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { useFeaturePreview } from '@rocket.chat/ui-client';
 import type { SubscriptionWithRoom, TranslationKey } from '@rocket.chat/ui-contexts';
 import { useUserPreference, useUserSubscriptions, useSetting } from '@rocket.chat/ui-contexts';
 import { useVideoConfIncomingCalls } from '@rocket.chat/ui-video-conf';
@@ -19,6 +20,7 @@ const order = [
 	'Open_Livechats',
 	'On_Hold_Chats',
 	'Unread',
+	'Drafts',
 	'Favorites',
 	'Teams',
 	'Discussions',
@@ -40,6 +42,7 @@ export const useRoomList = ({ collapsedGroups }: { collapsedGroups?: string[] })
 	const showOmnichannel = useOmnichannelEnabled();
 	const sidebarGroupByType = useUserPreference('sidebarGroupByType');
 	const favoritesEnabled = useUserPreference('sidebarShowFavorites');
+	const sidebarDrafts = useFeaturePreview('sidebarDrafts');
 	const sidebarOrder = useUserPreference<typeof order>('sidebarSectionsOrder') ?? order;
 	const isDiscussionEnabled = useSetting('Discussion_enabled');
 	const sidebarShowUnread = useUserPreference('sidebarShowUnread');
@@ -58,6 +61,7 @@ export const useRoomList = ({ collapsedGroups }: { collapsedGroups?: string[] })
 		useMemo(() => {
 			const isCollapsed = (groupTitle: string) => collapsedGroups?.includes(groupTitle);
 
+			const drafts = new Set();
 			const incomingCall = new Set();
 			const favorite = new Set();
 			const team = new Set();
@@ -82,6 +86,10 @@ export const useRoomList = ({ collapsedGroups }: { collapsedGroups?: string[] })
 					return unread.add(room);
 				}
 
+				if (sidebarDrafts && room.draft) {
+					return drafts.add(room);
+				}
+
 				if (favoritesEnabled && room.f) {
 					return favorite.add(room);
 				}
@@ -122,6 +130,8 @@ export const useRoomList = ({ collapsedGroups }: { collapsedGroups?: string[] })
 
 			sidebarShowUnread && unread.size && groups.set('Unread', unread);
 
+			sidebarDrafts && drafts.size && groups.set('Drafts', drafts);
+
 			favoritesEnabled && favorite.size && groups.set('Favorites', favorite);
 
 			sidebarGroupByType && team.size && groups.set('Teams', team);
@@ -193,6 +203,7 @@ export const useRoomList = ({ collapsedGroups }: { collapsedGroups?: string[] })
 			rooms,
 			showOmnichannel,
 			inquiries.enabled,
+			sidebarDrafts,
 			queue,
 			sidebarShowUnread,
 			favoritesEnabled,
diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
@@ -37,14 +37,15 @@ import VideoMessageRecorder from '../../../composer/VideoMessageRecorder';
 import { useFileUpload } from '../../body/hooks/useFileUpload';
 import { useChat } from '../../contexts/ChatContext';
 import { useComposerPopupOptions } from '../../contexts/ComposerPopupContext';
-import { useRoom } from '../../contexts/RoomContext';
+import { useRoom, useRoomSubscription } from '../../contexts/RoomContext';
 import ComposerBoxPopup from '../ComposerBoxPopup';
 import ComposerBoxPopupPreview from '../ComposerBoxPopupPreview';
 import ComposerUserActionIndicator from '../ComposerUserActionIndicator';
 import { useAutoGrow } from '../RoomComposer/hooks/useAutoGrow';
 import { useComposerBoxPopup } from '../hooks/useComposerBoxPopup';
 import { useEnablePopupPreview } from '../hooks/useEnablePopupPreview';
 import { useMessageComposerMergedRefs } from '../hooks/useMessageComposerMergedRefs';
+import { useDraft } from './hooks/useDraft';
 import { useMessageBoxAutoFocus } from './hooks/useMessageBoxAutoFocus';
 import { useMessageBoxPlaceholder } from './hooks/useMessageBoxPlaceholder';
 
@@ -127,20 +128,24 @@ const MessageBox = ({
 	const textareaRef = useRef(null);
 	const messageComposerRef = useRef<HTMLElement>(null);
 
-	const storageID = `messagebox_${room._id}${tmid ? `-${tmid}` : ''}`;
+	const subscription = useRoomSubscription();
+	const { initialValue, persistLocal, flushDraft } = useDraft(room._id, tmid ? undefined : subscription?.draft, tmid);
 
 	const callbackRef = useCallback(
 		(node: HTMLTextAreaElement) => {
 			if (node === null && chat.composer) {
+				flushDraft();
 				return chat.setComposerAPI();
 			}
 
 			if (chat.composer) {
 				return;
 			}
-			chat.setComposerAPI(createComposerAPI(node, storageID, quoteChainLimit, messageComposerRef, { rid: room._id, tmid }));
+			chat.setComposerAPI(
+				createComposerAPI(node, persistLocal, initialValue, quoteChainLimit, messageComposerRef, { rid: room._id, tmid }),
+			);
 		},
-		[chat, storageID, quoteChainLimit, room._id, tmid],
+		[chat, flushDraft, initialValue, persistLocal, quoteChainLimit, room._id, tmid],
 	);
 
 	const isTouchDevice = useMediaQuery('(pointer: coarse)');
diff --git a/apps/meteor/client/views/room/composer/messageBox/hooks/useDraft.ts b/apps/meteor/client/views/room/composer/messageBox/hooks/useDraft.ts
@@ -0,0 +1,34 @@
+import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useCallback, useRef } from 'react';
+
+export const useDraft = (rid: string, serverDraft?: string, tmid?: string) => {
+	const storageKey = `messagebox_${rid}${tmid ? `-${tmid}` : ''}`;
+	const [localDraft, setLocalDraft] = useLocalStorage<string>(storageKey, '');
+	const saveDraft = useEndpoint('POST', '/v1/rooms.saveDraft');
+	const initialValueRef = useRef(serverDraft || localDraft);
+	const draftRef = useRef<string | null>(null);
+
+	const persistLocal = useCallback(
+		(value: string) => {
+			draftRef.current = value;
+			setLocalDraft(value);
+		},
+		[setLocalDraft],
+	);
+
+	const flushDraft = useCallback(() => {
+		if (draftRef.current === null || tmid) {
+			return;
+		}
+
+		void saveDraft({ rid, draft: draftRef.current });
+		draftRef.current = null;
+	}, [saveDraft, rid, tmid]);
+
+	return {
+		initialValue: initialValueRef.current,
+		persistLocal,
+		flushDraft,
+	};
+};
diff --git a/apps/meteor/lib/publishFields.ts b/apps/meteor/lib/publishFields.ts
@@ -39,6 +39,7 @@ export const subscriptionFields = {
 	E2EKey: 1,
 	E2ESuggestedKey: 1,
 	oldRoomKeys: 1,
+	draft: 1,
 	tunread: 1,
 	tunreadGroup: 1,
 	tunreadUser: 1,
diff --git a/apps/meteor/public/images/featurePreview/sidebar-drafts.png b/apps/meteor/public/images/featurePreview/sidebar-drafts.png
diff --git a/apps/meteor/server/settings/accounts.ts b/apps/meteor/server/settings/accounts.ts
@@ -750,6 +750,7 @@ export const createAccountSettings = () =>
 				'Open_Livechats',
 				'On_Hold_Chats',
 				'Unread',
+				'Drafts',
 				'Favorites',
 				'Teams',
 				'Discussions',
diff --git a/packages/core-typings/src/ISubscription.ts b/packages/core-typings/src/ISubscription.ts
@@ -65,6 +65,8 @@ export interface ISubscription extends IRocketChatRecord {
 
 	department?: unknown;
 
+	draft?: string;
+
 	desktopPrefOrigin?: 'subscription' | 'user';
 	mobilePrefOrigin?: 'subscription' | 'user';
 	emailPrefOrigin?: 'subscription' | 'user';
diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
@@ -1888,6 +1888,9 @@
   "Download_Snippet": "Download",
   "Download_file": "Download file",
   "Downloading_file_from_external_URL": "Downloading file from external URL",
+  "Drafts": "Drafts",
+  "Drafts_in_sidebar": "Drafts in sidebar",
+  "Drafts_in_sidebar_description": "Quick access to all your rooms with unfinished messages.",
   "Drop_to_upload_file": "Drop to upload file",
   "Dry_run": "Dry run",
   "Dry_run_description": "Will only send one email, to the same address as in From. The email must belong to a valid user.",
diff --git a/packages/model-typings/src/models/ISubscriptionsModel.ts b/packages/model-typings/src/models/ISubscriptionsModel.ts
@@ -153,6 +153,7 @@ export interface ISubscriptionsModel extends IBaseModel<ISubscription> {
 	updateHideUnreadStatusById(_id: string, hideUnreadStatus: boolean): Promise<UpdateResult>;
 	updateAudioNotificationValueById(_id: string, audioNotificationValue: string): Promise<UpdateResult>;
 	updateAutoTranslateLanguageById(_id: string, autoTranslateLanguage: string): Promise<UpdateResult>;
+	updateDraftByRoomIdAndUserId(rid: IRoom['_id'], uid: IUser['_id'], draft: string | undefined): Promise<null | WithId<ISubscription>>;
 
 	removeByVisitorToken(token: string): Promise<DeleteResult>;
 	findByToken(token: string, options?: FindOptions): FindCursor<ISubscription>;
diff --git a/packages/models/src/models/Subscriptions.ts b/packages/models/src/models/Subscriptions.ts
@@ -716,6 +716,13 @@ export class SubscriptionsRaw extends BaseRaw<ISubscription> implements ISubscri
 		return this.updateOne(query, update);
 	}
 
+	updateDraftByRoomIdAndUserId(rid: string, uid: string, draft: string | undefined): Promise<null | WithId<ISubscription>> {
+		const query = { rid, 'u._id': uid };
+		const update = draft ? { $set: { draft } } : { $unset: { draft: 1 as const } };
+
+		return this.findOneAndUpdate(query, update, { returnDocument: 'after' });
+	}
+
 	updateAllAutoTranslateLanguagesByUserId(userId: IUser['_id'], language: string): Promise<UpdateResult | Document> {
 		const query = {
 			'u._id': userId,
diff --git a/packages/ui-client/src/hooks/useFeaturePreviewList.ts b/packages/ui-client/src/hooks/useFeaturePreviewList.ts
@@ -1,6 +1,6 @@
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 
-export type FeaturesAvailable = 'secondarySidebar' | 'expandableMessageComposer';
+export type FeaturesAvailable = 'secondarySidebar' | 'sidebarDrafts';
 
 export type FeaturePreviewProps = {
 	name: FeaturesAvailable;
@@ -28,6 +28,15 @@ export const defaultFeaturesPreview: FeaturePreviewProps[] = [
 		value: false,
 		enabled: true,
 	},
+	{
+		name: 'sidebarDrafts',
+		i18n: 'Drafts_in_sidebar',
+		description: 'Drafts_in_sidebar_description',
+		group: 'Navigation',
+		imageUrl: 'images/featurePreview/sidebar-drafts.png',
+		value: false,
+		enabled: true,
+	},
 ];
 
 export const enabledDefaultFeatures = defaultFeaturesPreview.filter((feature) => feature.enabled);
