OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Chat Effects & Commands in thread context (#7138)

pull/21833/head
Germain 2021-11-18 12:47:11 +00:00 committed by GitHub
parent e549438e2a
commit 256c468c15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 108 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/SlashCommands.tsx
View File

@ -57,6 +57,7 @@ import SlashCommandHelpDialog from "./components/views/dialogs/SlashCommandHelpD
import { logger } from "matrix-js-sdk/src/logger";
import { shouldShowComponent } from "./customisations/helpers/UIComponents";
import { TimelineRenderingType } from './contexts/RoomContext';
// XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816
interface HTMLInputEvent extends Event {
@ -102,6 +103,7 @@ interface ICommandOpts {
category: string;
hideCompletionAfterSpace?: boolean;
isEnabled?(): boolean;
renderingTypes?: TimelineRenderingType[];
}
export class Command {
@ -112,7 +114,8 @@ export class Command {
runFn: undefined | RunFn;
category: string;
hideCompletionAfterSpace: boolean;
_isEnabled?: () => boolean;
private _isEnabled?: () => boolean;
public renderingTypes?: TimelineRenderingType[];
constructor(opts: ICommandOpts) {
this.command = opts.command;
@ -123,6 +126,7 @@ export class Command {
this.category = opts.category || CommandCategories.other;
this.hideCompletionAfterSpace = opts.hideCompletionAfterSpace || false;
this._isEnabled = opts.isEnabled;
this.renderingTypes = opts.renderingTypes;
}
getCommand() {
@ -143,7 +147,7 @@ export class Command {
return _t('Usage') + ': ' + this.getCommandWithArgs();
}
isEnabled() {
isEnabled(): boolean {
return this._isEnabled ? this._isEnabled() : true;
}
}
@ -271,6 +275,7 @@ export const Commands = [
return reject(this.getUsage());
},
category: CommandCategories.admin,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'nick',
@ -283,6 +288,7 @@ export const Commands = [
return reject(this.getUsage());
},
category: CommandCategories.actions,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'myroomnick',
@ -302,6 +308,7 @@ export const Commands = [
return reject(this.getUsage());
},
category: CommandCategories.actions,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'roomavatar',
@ -319,6 +326,7 @@ export const Commands = [
}));
},
category: CommandCategories.actions,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'myroomavatar',
@ -345,6 +353,7 @@ export const Commands = [
}));
},
category: CommandCategories.actions,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'myavatar',
@ -362,6 +371,7 @@ export const Commands = [
}));
},
category: CommandCategories.actions,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'topic',
@ -387,6 +397,7 @@ export const Commands = [
return success();
},
category: CommandCategories.admin,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'roomname',
@ -399,6 +410,7 @@ export const Commands = [
return reject(this.getUsage());
},
category: CommandCategories.admin,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'invite',
@ -462,6 +474,7 @@ export const Commands = [
return reject(this.getUsage());
},
category: CommandCategories.actions,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'join',
@ -577,6 +590,7 @@ export const Commands = [
return reject(this.getUsage());
},
category: CommandCategories.actions,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'part',
@ -620,6 +634,7 @@ export const Commands = [
return success(leaveRoomBehaviour(targetRoomId));
},
category: CommandCategories.actions,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'kick',
@ -635,6 +650,7 @@ export const Commands = [
return reject(this.getUsage());
},
category: CommandCategories.admin,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'ban',
@ -650,6 +666,7 @@ export const Commands = [
return reject(this.getUsage());
},
category: CommandCategories.admin,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'unban',
@ -666,6 +683,7 @@ export const Commands = [
return reject(this.getUsage());
},
category: CommandCategories.admin,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'ignore',
@ -755,6 +773,7 @@ export const Commands = [
return reject(this.getUsage());
},
category: CommandCategories.admin,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'deop',
@ -776,6 +795,7 @@ export const Commands = [
return reject(this.getUsage());
},
category: CommandCategories.admin,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'devtools',
@ -838,6 +858,7 @@ export const Commands = [
}
},
category: CommandCategories.admin,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'verify',
@ -903,6 +924,7 @@ export const Commands = [
return reject(this.getUsage());
},
category: CommandCategories.advanced,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: 'discardsession',
@ -916,6 +938,7 @@ export const Commands = [
return success();
},
category: CommandCategories.advanced,
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: "rainbow",
@ -1053,6 +1076,7 @@ export const Commands = [
call.setRemoteOnHold(true);
return success();
},
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: "unholdcall",
@ -1066,6 +1090,7 @@ export const Commands = [
call.setRemoteOnHold(false);
return success();
},
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: "converttodm",
@ -1075,6 +1100,7 @@ export const Commands = [
const room = MatrixClientPeg.get().getRoom(roomId);
return success(guessAndSetDMRoom(room, true));
},
renderingTypes: [TimelineRenderingType.Room],
}),
new Command({
command: "converttoroom",
@ -1084,6 +1110,7 @@ export const Commands = [
const room = MatrixClientPeg.get().getRoom(roomId);
return success(guessAndSetDMRoom(room, false));
},
renderingTypes: [TimelineRenderingType.Room],
}),
// Command definitions for autocompletion ONLY:
@ -1117,6 +1144,7 @@ export const Commands = [
})());
},
category: CommandCategories.effects,
renderingTypes: [TimelineRenderingType.Room],
});
}),
];

14
src/autocomplete/AutocompleteProvider.tsx
View File

@ -17,6 +17,7 @@ limitations under the License.
*/
import React from 'react';
import { TimelineRenderingType } from '../contexts/RoomContext';
import type { ICompletion, ISelectionRange } from './Autocompleter';
export interface ICommand {
@ -27,11 +28,19 @@ export interface ICommand {
};
}
export interface IAutocompleteOptions {
commandRegex?: RegExp;
forcedCommandRegex?: RegExp;
renderingType?: TimelineRenderingType;
}
export default abstract class AutocompleteProvider {
commandRegex: RegExp;
forcedCommandRegex: RegExp;
protected constructor(commandRegex?: RegExp, forcedCommandRegex?: RegExp) {
protected renderingType: TimelineRenderingType = TimelineRenderingType.Room;
protected constructor({ commandRegex, forcedCommandRegex, renderingType }: IAutocompleteOptions) {
if (commandRegex) {
if (!commandRegex.global) {
throw new Error('commandRegex must have global flag set');
@ -44,6 +53,9 @@ export default abstract class AutocompleteProvider {
}
this.forcedCommandRegex = forcedCommandRegex;
}
if (renderingType) {
this.renderingType = renderingType;
}
}
destroy() {

5
src/autocomplete/Autocompleter.ts
View File

@ -28,6 +28,7 @@ import { timeout } from "../utils/promise";
import AutocompleteProvider, { ICommand } from "./AutocompleteProvider";
import SpaceProvider from "./SpaceProvider";
import SpaceStore from "../stores/spaces/SpaceStore";
import { TimelineRenderingType } from '../contexts/RoomContext';
export interface ISelectionRange {
beginning?: boolean; // whether the selection is in the first block of the editor or not
@ -75,10 +76,10 @@ export default class Autocompleter {
room: Room;
providers: AutocompleteProvider[];
constructor(room: Room) {
constructor(room: Room, renderingType: TimelineRenderingType = TimelineRenderingType.Room) {
this.room = room;
this.providers = PROVIDERS.map((Prov) => {
return new Prov(room);
return new Prov(room, renderingType);
});
}

14
src/autocomplete/CommandProvider.tsx
View File

@ -24,17 +24,20 @@ import QueryMatcher from './QueryMatcher';
import { TextualCompletion } from './Components';
import { ICompletion, ISelectionRange } from "./Autocompleter";
import { Command, Commands, CommandMap } from '../SlashCommands';
import { Room } from 'matrix-js-sdk/src/models/room';
import { TimelineRenderingType } from '../contexts/RoomContext';
const COMMAND_RE = /(^\/\w*)(?: .*)?/g;
export default class CommandProvider extends AutocompleteProvider {
matcher: QueryMatcher<Command>;
constructor() {
super(COMMAND_RE);
constructor(room: Room, renderingType?: TimelineRenderingType) {
super({ commandRegex: COMMAND_RE, renderingType });
this.matcher = new QueryMatcher(Commands, {
keys: ['command', 'args', 'description'],
funcs: [({ aliases }) => aliases.join(" ")], // aliases
context: renderingType,
});
}
@ -47,7 +50,7 @@ export default class CommandProvider extends AutocompleteProvider {
const { command, range } = this.getCurrentCommand(query, selection);
if (!command) return [];
let matches = [];
let matches: Command[] = [];
// check if the full match differs from the first word (i.e. returns false if the command has args)
if (command[0] !== command[1]) {
// The input looks like a command with arguments, perform exact match
@ -68,7 +71,10 @@ export default class CommandProvider extends AutocompleteProvider {
}
}
return matches.filter(cmd => cmd.isEnabled()).map((result) => {
return matches.filter(cmd => {
const display = !cmd.renderingTypes || cmd.renderingTypes.includes(this.renderingType);
return cmd.isEnabled() && display;
}).map((result) => {
let completion = result.getCommand() + ' ';
const usedAlias = result.aliases.find(alias => `/${alias}` === command[1]);
// If the command (or an alias) is the same as the one they entered, we don't want to discard their arguments

6
src/autocomplete/CommunityProvider.tsx
View File

@ -28,6 +28,8 @@ import { ICompletion, ISelectionRange } from "./Autocompleter";
import FlairStore from "../stores/FlairStore";
import { mediaFromMxc } from "../customisations/Media";
import BaseAvatar from '../components/views/avatars/BaseAvatar';
import { Room } from 'matrix-js-sdk/src/models/room';
import { TimelineRenderingType } from '../contexts/RoomContext';
const COMMUNITY_REGEX = /\B\+\S*/g;
@ -43,8 +45,8 @@ function score(query, space) {
export default class CommunityProvider extends AutocompleteProvider {
matcher: QueryMatcher<Group>;
constructor() {
super(COMMUNITY_REGEX);
constructor(room: Room, renderingType?: TimelineRenderingType) {
super({ commandRegex: COMMUNITY_REGEX, renderingType });
this.matcher = new QueryMatcher([], {
keys: ['groupId', 'name', 'shortDescription'],
});

6
src/autocomplete/EmojiProvider.tsx
View File

@ -28,6 +28,8 @@ import SettingsStore from "../settings/SettingsStore";
import { EMOJI, IEmoji } from '../emoji';
import EMOTICON_REGEX from 'emojibase-regex/emoticon';
import { Room } from 'matrix-js-sdk/src/models/room';
import { TimelineRenderingType } from '../contexts/RoomContext';
const LIMIT = 20;
@ -64,8 +66,8 @@ export default class EmojiProvider extends AutocompleteProvider {
matcher: QueryMatcher<ISortedEmoji>;
nameMatcher: QueryMatcher<ISortedEmoji>;
constructor() {
super(EMOJI_REGEX);
constructor(room: Room, renderingType?: TimelineRenderingType) {
super({ commandRegex: EMOJI_REGEX, renderingType });
this.matcher = new QueryMatcher<ISortedEmoji>(SORTED_EMOJI, {
keys: [],
funcs: [o => o.emoji.shortcodes.map(s => `:${s}:`)],

8
src/autocomplete/NotifProvider.tsx
View File

@ -23,15 +23,13 @@ import { MatrixClientPeg } from '../MatrixClientPeg';
import { PillCompletion } from './Components';
import { ICompletion, ISelectionRange } from "./Autocompleter";
import RoomAvatar from '../components/views/avatars/RoomAvatar';
import { TimelineRenderingType } from '../contexts/RoomContext';
const AT_ROOM_REGEX = /@\S*/g;
export default class NotifProvider extends AutocompleteProvider {
room: Room;
constructor(room) {
super(AT_ROOM_REGEX);
this.room = room;
constructor(public room: Room, renderingType?: TimelineRenderingType) {
super({ commandRegex: AT_ROOM_REGEX, renderingType });
}
async getCompletions(

2
src/autocomplete/QueryMatcher.ts
View File

@ -18,6 +18,7 @@ limitations under the License.
import { at, uniq } from 'lodash';
import { removeHiddenChars } from "matrix-js-sdk/src/utils";
import { TimelineRenderingType } from '../contexts/RoomContext';
interface IOptions<T extends {}> {
keys: Array<string | keyof T>;
@ -25,6 +26,7 @@ interface IOptions<T extends {}> {
shouldMatchWordsOnly?: boolean;
// whether to apply unhomoglyph and strip diacritics to fuzz up the search. Defaults to true
fuzzy?: boolean;
context?: TimelineRenderingType;
}
/**

5
src/autocomplete/RoomProvider.tsx
View File

@ -29,6 +29,7 @@ import { makeRoomPermalink } from "../utils/permalinks/Permalinks";
import { ICompletion, ISelectionRange } from "./Autocompleter";
import RoomAvatar from '../components/views/avatars/RoomAvatar';
import SpaceStore from "../stores/spaces/SpaceStore";
import { TimelineRenderingType } from "../contexts/RoomContext";
const ROOM_REGEX = /\B#\S*/g;
@ -48,8 +49,8 @@ function matcherObject(room: Room, displayedAlias: string, matchName = "") {
export default class RoomProvider extends AutocompleteProvider {
protected matcher: QueryMatcher<Room>;
constructor() {
super(ROOM_REGEX);
constructor(room: Room, renderingType?: TimelineRenderingType) {
super({ commandRegex: ROOM_REGEX, renderingType });
this.matcher = new QueryMatcher([], {
keys: ['displayedAlias', 'matchName'],
});

9
src/autocomplete/UserProvider.tsx
View File

@ -33,6 +33,7 @@ import { EventTimeline } from "matrix-js-sdk/src/models/event-timeline";
import { makeUserPermalink } from "../utils/permalinks/Permalinks";
import { ICompletion, ISelectionRange } from "./Autocompleter";
import MemberAvatar from '../components/views/avatars/MemberAvatar';
import { TimelineRenderingType } from '../contexts/RoomContext';
const USER_REGEX = /\B@\S*/g;
@ -50,8 +51,12 @@ export default class UserProvider extends AutocompleteProvider {
users: RoomMember[];
room: Room;
constructor(room: Room) {
super(USER_REGEX, FORCED_USER_REGEX);
constructor(room: Room, renderingType?: TimelineRenderingType) {
super({
commandRegex: USER_REGEX,
forcedCommandRegex: FORCED_USER_REGEX,
renderingType,
});
this.room = room;
this.matcher = new QueryMatcher([], {
keys: ['name'],

6
src/components/structures/RoomView.tsx
View File

@ -957,7 +957,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
CHAT_EFFECTS.forEach(effect => {
if (containsEmoji(ev.getContent(), effect.emojis) || ev.getContent().msgtype === effect.msgType) {
dis.dispatch({ action: `effects.${effect.command}` });
// For initial threads launch, chat effects are disabled
// see #19731
if (!SettingsStore.getValue("feature_thread") || !ev.isThreadRelation) {
dis.dispatch({ action: `effects.${effect.command}` });
}
}
});
};

6
src/components/views/rooms/Autocomplete.tsx
View File

@ -24,6 +24,7 @@ import { Room } from 'matrix-js-sdk/src/models/room';
import SettingsStore from "../../../settings/SettingsStore";
import Autocompleter from '../../../autocomplete/Autocompleter';
import { replaceableComponent } from "../../../utils/replaceableComponent";
import RoomContext from '../../../contexts/RoomContext';
const MAX_PROVIDER_MATCHES = 20;
@ -57,11 +58,11 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
debounceCompletionsRequest: number;
private containerRef = createRef<HTMLDivElement>();
public static contextType = RoomContext;
constructor(props) {
super(props);
this.autocompleter = new Autocompleter(props.room);
this.state = {
// list of completionResults, each containing completions
completions: [],
@ -82,6 +83,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
}
componentDidMount() {
this.autocompleter = new Autocompleter(this.props.room, this.context.timelineRenderingType);
this.applyNewProps();
}

7
src/components/views/rooms/SendMessageComposer.tsx
View File

@ -492,7 +492,12 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
dis.dispatch({ action: "message_sent" });
CHAT_EFFECTS.forEach((effect) => {
if (containsEmoji(content, effect.emojis)) {
dis.dispatch({ action: `effects.${effect.command}` });
// For initial threads launch, chat effects are disabled
// see #19731
const isNotThread = this.props.relation?.rel_type !== RelationType.Thread;
if (!SettingsStore.getValue("feature_thread") || !isNotThread) {
dis.dispatch({ action: `effects.${effect.command}` });
}
}
});
if (SettingsStore.getValue("Performance.addSendMessageTimingMetadata")) {

5
src/effects/utils.ts
View File

@ -14,11 +14,14 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
import { IContent } from "matrix-js-sdk/src/models/event";
/**
* Checks a message if it contains one of the provided emojis
* @param {Object} content The message
* @param {Array<string>} emojis The list of emojis to check for
*/
export const containsEmoji = (content: { msgtype: string, body: string }, emojis: Array<string>): boolean => {
export const containsEmoji = (content: IContent, emojis: Array<string>): boolean => {
return emojis.some((emoji) => content.body && content.body.includes(emoji));
};

14
src/stores/widgets/StopGapWidgetDriver.ts
View File

@ -38,15 +38,16 @@ import WidgetCapabilitiesPromptDialog from "../../components/views/dialogs/Widge
import { WidgetPermissionCustomisations } from "../../customisations/WidgetPermissions";
import { OIDCState, WidgetPermissionStore } from "./WidgetPermissionStore";
import { WidgetType } from "../../widgets/WidgetType";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { EventType, RelationType } from "matrix-js-sdk/src/@types/event";
import { CHAT_EFFECTS } from "../../effects";
import { containsEmoji } from "../../effects/utils";
import dis from "../../dispatcher/dispatcher";
import { tryTransformPermalinkToLocalHref } from "../../utils/permalinks/Permalinks";
import { IEvent, MatrixEvent } from "matrix-js-sdk/src/models/event";
import { IContent, IEvent, MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { logger } from "matrix-js-sdk/src/logger";
import SettingsStore from "../../settings/SettingsStore";
// TODO: Purge this from the universe
@ -141,7 +142,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
public async sendEvent(
eventType: string,
content: any,
content: IContent,
stateKey: string = null,
targetRoomId: string = null,
): Promise<ISendEventDetails> {
@ -164,7 +165,12 @@ export class StopGapWidgetDriver extends WidgetDriver {
if (eventType === EventType.RoomMessage) {
CHAT_EFFECTS.forEach((effect) => {
if (containsEmoji(content, effect.emojis)) {
dis.dispatch({ action: `effects.${effect.command}` });
// For initial threads launch, chat effects are disabled
// see #19731
const isNotThread = content["m.relates_to"].rel_type !== RelationType.Thread;
if (!SettingsStore.getValue("feature_thread") || !isNotThread) {
dis.dispatch({ action: `effects.${effect.command}` });
}
}
});
}