snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx

@@ -0,0 +1,222 @@
+import type { IMessage, IRoom, IUser } from '@rocket.chat/core-typings';
+import { Icon, Box } from '@rocket.chat/fuselage';
+import {
+	Field,
+	FieldGroup,
+	ToggleSwitch,
+	TextInput,
+	TextAreaInput,
+	FieldHint,
+	FieldLabel,
+	FieldRow,
+	FieldError,
+} from '@rocket.chat/fuselage-forms';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useTranslation, useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+
+import { useEncryptedRoomDescription } from '../../navbar/NavBarPagesGroup/actions/useEncryptedRoomDescription';
+import { useGoToRoom } from '../../views/room/hooks/useGoToRoom';
+import RoomAutoComplete from '../RoomAutoComplete';
+import UserAutoCompleteMultiple from '../UserAutoCompleteMultiple';
+import DefaultParentRoomField from './DefaultParentRoomField';
+
+type CreateDiscussionFormValues = {
+	name: string;
+	parentRoom: IRoom['_id'];
+	encrypted: boolean;
+	usernames: Array<IUser['username']>;
+	firstMessage: string;
+	topic: string;
+};
+
+export type CreateDiscussionProps = {
+	parentMessageId?: IMessage['_id'];
+	encryptedParentRoom?: boolean;
+	onClose: () => void;
+	onSuccess?: (rid: string) => void | Promise<void>;
+	defaultParentRoom?: IRoom['_id'];
+	nameSuggestion?: string;
+};
+
+const CreateDiscussion = ({
+	onClose,
+	onSuccess,
+	defaultParentRoom,
+	parentMessageId,
+	nameSuggestion,
+	encryptedParentRoom = false,
+}: CreateDiscussionProps) => {
+	const t = useTranslation();
+
+	const [encryptedDisabled, setEncryptedDisabled] = useState(encryptedParentRoom);
+
+	const {
+		formState: { errors },
+		handleSubmit,
+		control,
+		watch,
+		setValue,
+	} = useForm({
+		defaultValues: {
+			name: nameSuggestion || '',
+			parentRoom: '',
+			encrypted: encryptedParentRoom,
+			usernames: [],
+			firstMessage: '',
+			topic: '',
+		},
+	});
+
+	const onParentRoomChange = useStableCallback((room: IRoom | undefined) => {
+		if (!room) {
+			return;
+		}
+		setValue('encrypted', room.encrypted === true);
+		setEncryptedDisabled(room.encrypted === true);
+	});
+
+	const { encrypted } = watch();
+
+	const createDiscussion = useEndpoint('POST', '/v1/rooms.createDiscussion');
+
+	const goToRoom = useGoToRoom();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const createDiscussionMutation = useMutation({
+		mutationFn: createDiscussion,
+		onSuccess: ({ discussion }) => {
+			goToRoom(discussion._id);
+			void onSuccess?.(discussion._id);
+			onClose();
+		},
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+	});
+
+	const handleCreate = async ({ name, parentRoom, encrypted, usernames, firstMessage, topic }: CreateDiscussionFormValues) => {
+		createDiscussionMutation.mutate({
+			prid: defaultParentRoom || parentRoom,
+			t_name: name,
+			users: usernames,
+			reply: encrypted ? undefined : firstMessage,
+			topic,
+			...(parentMessageId && { pmid: parentMessageId }),
+		});
+	};
+
+	const getEncryptedHint = useEncryptedRoomDescription('discussion');
+
+	return (
+		<GenericModal
+			variant='warning'
+			icon={null}
+			title={t('Discussion_title')}
+			onCancel={onClose}
+			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}
+			confirmText={t('Create')}
+			cancelText={t('Cancel')}
+			confirmLoading={createDiscussionMutation.isPending}
+		>
+			<Box marginBlockEnd={24}>{t('Discussion_description')}</Box>
+			<FieldGroup>
+				<Field>
+					<FieldLabel required>{t('Discussion_target_channel')}</FieldLabel>
+					<FieldRow>
+						{defaultParentRoom && (
+							<Controller
+								control={control}
+								name='parentRoom'
+								render={() => <DefaultParentRoomField defaultParentRoom={defaultParentRoom} />}
+							/>
+						)}
+						{!defaultParentRoom && (
+							<Controller
+								control={control}
+								name='parentRoom'
+								rules={{ required: t('Required_field', { field: t('Discussion_target_channel') }) }}
+								render={({ field }) => (
+									<RoomAutoComplete
+										{...field}
+										error={Boolean(errors.parentRoom?.message)}
+										placeholder={t('Search_options')}
+										disabled={Boolean(defaultParentRoom)}
+										aria-required='true'
+										setSelectedRoom={onParentRoomChange}
+										renderRoomIcon={({ encrypted }) => (encrypted ? <Icon name='key' /> : null)}
+									/>
+								)}
+							/>
+						)}
+					</FieldRow>
+					{errors.parentRoom && <FieldError>{errors.parentRoom.message}</FieldError>}
+				</Field>
+				<Field>
+					<FieldLabel required>{t('Name')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='name'
+							control={control}
+							rules={{ required: t('Required_field', { field: t('Name') }) }}
+							render={({ field }) => (
+								<TextInput {...field} aria-required='true' endAddon={<Icon name='baloons' size='x20' />} error={errors.name?.message} />
+							)}
+						/>
+					</FieldRow>
+					{errors.name && <FieldError>{errors.name.message}</FieldError>}
+				</Field>
+				<Field>
+					<FieldLabel>{t('Topic')}</FieldLabel>
+					<FieldRow>
+						<Controller name='topic' control={control} render={({ field }) => <TextInput {...field} error={errors.topic?.message} />} />
+					</FieldRow>
+					<FieldRow>
+						<FieldHint>{t('Displayed_next_to_name')}</FieldHint>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Members')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							control={control}
+							name='usernames'
+							render={({ field }) => <UserAutoCompleteMultiple {...field} placeholder={t('Add_people')} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Discussion_first_message_title')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							control={control}
+							name='firstMessage'
+							render={({ field }) => <TextAreaInput {...field} rows={5} disabled={encrypted} />}
+						/>
+					</FieldRow>
+					{encrypted ? (
+						<FieldHint>{t('Discussion_first_message_disabled_due_to_e2e')}</FieldHint>
+					) : (
+						<FieldHint>{t('First_message_hint')}</FieldHint>
+					)}
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Encrypted')}</FieldLabel>
+						<Controller
+							control={control}
+							name='encrypted'
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} disabled={encryptedDisabled} />}
+						/>
+					</FieldRow>
+					<FieldHint>{getEncryptedHint({ isPrivate: true, encrypted })}</FieldHint>
+				</Field>
+			</FieldGroup>
+		</GenericModal>
+	);
+};
+
+export default CreateDiscussion;