TypingIndicator — FiveCord

index.tsx

Download

Source

src/plugins/typingIndicator/index.tsx

1/*

2 * FiveCord — a Discord client mod

4 * SPDX-License-Identifier: GPL-3.0-or-later

5 */

7import "./style.css";

9import { isPluginEnabled } from "@api/PluginManager";

10import { definePluginSettings } from "@api/Settings";

11import ErrorBoundary from "@components/ErrorBoundary";

12import TypingTweaksPlugin, { buildSeveralUsers } from "@plugins/typingTweaks";

13import { Devs } from "@utils/constants";

14import { getIntlMessage } from "@utils/discord";

15import definePlugin, { OptionType } from "@utils/types";

16import { findComponentByCodeLazy } from "@webpack";

import { GuildMemberStore, RelationshipStore, SelectedChannelStore, Tooltip, TypingStore, UserGuildSettingsStore, UserStore, UserSummaryItem, useStateFromStores } from "@webpack/common";

19const ThreeDots = findComponentByCodeLazy("Math.min(1,Math.max(", "dotRadius:");

21const enum IndicatorMode {

22 Dots = 1 << 0,

23 Avatars = 1 << 1

24}

26function getDisplayName(guildId: string, userId: string) {

27 const user = UserStore.getUser(userId);

28 return GuildMemberStore.getNick(guildId, userId) ?? (user as any).globalName ?? user.username;

29}

31function TypingIndicator({ channelId, guildId }: { channelId: string; guildId: string; }) {

32 const typingUsers: Record<string, number> = useStateFromStores(

33 [TypingStore],

34 () => ({ ...TypingStore.getTypingUsers(channelId) }),

35 null,

36 (old, current) => {

37 const oldKeys = Object.keys(old);

38 const currentKeys = Object.keys(current);

40 return oldKeys.length === currentKeys.length && currentKeys.every(key => old[key] != null);

41 }

42 );

43 const currentChannelId = useStateFromStores([SelectedChannelStore], () => SelectedChannelStore.getChannelId());

45 if (!settings.store.includeMutedChannels) {

46 const isChannelMuted = UserGuildSettingsStore.isChannelMuted(guildId, channelId);

47 if (isChannelMuted) return null;

48 }

50 if (!settings.store.includeCurrentChannel) {

51 if (currentChannelId === channelId) return null;

52 }

54 const myId = UserStore.getCurrentUser()?.id;

56 const typingUsersArray = Object.keys(typingUsers).filter(id =>

57 id !== myId && !(RelationshipStore.isBlocked(id) && !settings.store.includeBlockedUsers)

58 );

59 const [a, b, c] = typingUsersArray;

60 let tooltipText: string;

62 switch (typingUsersArray.length) {

63 case 0: break;

64 case 1: {

65 tooltipText = getIntlMessage("ONE_USER_TYPING", { a: getDisplayName(guildId, a) });

66 break;

67 }

68 case 2: {

            tooltipText = getIntlMessage("TWO_USERS_TYPING", { a: getDisplayName(guildId, a), b: getDisplayName(guildId, b) });

70 break;

71 }

72 case 3: {

            tooltipText = getIntlMessage("THREE_USERS_TYPING", { a: getDisplayName(guildId, a), b: getDisplayName(guildId, b), c: getDisplayName(guildId, c) });

74 break;

75 }

76 default: {

77 tooltipText = isPluginEnabled(TypingTweaksPlugin.name)

                ? buildSeveralUsers({ users: [a, b].map(UserStore.getUser), count: typingUsersArray.length - 2, guildId })

79 : getIntlMessage("SEVERAL_USERS_TYPING");

80 break;

81 }

82 }

84 if (typingUsersArray.length > 0) {

85 return (

86 <Tooltip text={tooltipText!}>

87 {props => (

88 <div className="vc-typing-indicator" {...props}>

89 {((settings.store.indicatorMode & IndicatorMode.Avatars) === IndicatorMode.Avatars) && (

90 <div

91 onClick={e => {

92 e.stopPropagation();

93 e.preventDefault();

94 }}

95 onKeyPress={e => e.stopPropagation()}

96 >

97 <UserSummaryItem

98 users={typingUsersArray.map(id => UserStore.getUser(id))}

99 guildId={guildId}

100 renderIcon={false}

101 max={3}

102 showDefaultAvatarsForNullUsers

103 showUserPopout

104 size={16}

105 className="vc-typing-indicator-avatars"

106 />

107 </div>

108 )}

109 {((settings.store.indicatorMode & IndicatorMode.Dots) === IndicatorMode.Dots) && (

110 <div className="vc-typing-indicator-dots">

111 <ThreeDots dotRadius={3} themed={true} />

112 </div>

113 )}

114 </div>

115 )}

116 </Tooltip>

117 );

118 }

119

120 return null;

121}

122

123const settings = definePluginSettings({

124 includeCurrentChannel: {

125 type: OptionType.BOOLEAN,

126 description: "Whether to show the typing indicator for the currently selected channel",

127 default: true

128 },

129 includeMutedChannels: {

130 type: OptionType.BOOLEAN,

131 description: "Whether to show the typing indicator for muted channels.",

132 default: false

133 },

134 includeBlockedUsers: {

135 type: OptionType.BOOLEAN,

136 description: "Whether to show the typing indicator for blocked users.",

137 default: false

138 },

139 indicatorMode: {

140 type: OptionType.SELECT,

141 description: "How should the indicator be displayed?",

142 options: [

143 { label: "Avatars and animated dots", value: IndicatorMode.Dots | IndicatorMode.Avatars, default: true },

144 { label: "Animated dots", value: IndicatorMode.Dots },

145 { label: "Avatars", value: IndicatorMode.Avatars },

146 ],

147 }

148});

149

150export default definePlugin({

151 name: "TypingIndicator",

152 description: "Adds an indicator if someone is typing on a channel.",

153 tags: ["Notifications", "Appearance", "Servers"],

154 authors: [Devs.Nuckyz, Devs.fawn, Devs.Sqaaakoi],

155 settings,

156

157 patches: [

158 // Normal channel

159 {

160 find: "UNREAD_IMPORTANT:",

161 replacement: {

162 match: /\.Children\.count.+?:null(?<=,channel:(\i).+?)/,

163 replace: "$&,$self.TypingIndicator($1.id,$1.getGuildId())"

164 }

165 },

166 // Theads

167 {

168 // This is the thread "spine" that shows in the left

169 find: "M0 15H2c0 1.6569",

170 replacement: {

171 match: /mentionsCount:\i.+?null(?<=channel:(\i).+?)/,

172 replace: "$&,$self.TypingIndicator($1.id,$1.getGuildId())"

173 }

174 }

175 ],

176

177 TypingIndicator: (channelId: string, guildId: string) => (

178 <ErrorBoundary noop>

179 <TypingIndicator channelId={channelId} guildId={guildId} />

180 </ErrorBoundary>

181 ),

182});

183

/*
 * FiveCord — a Discord client mod
 * Copyright (c) 2025 FiveCord
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

import "./style.css";

import { isPluginEnabled } from "@api/PluginManager";
import { definePluginSettings } from "@api/Settings";
import ErrorBoundary from "@components/ErrorBoundary";
import TypingTweaksPlugin, { buildSeveralUsers } from "@plugins/typingTweaks";
import { Devs } from "@utils/constants";
import { getIntlMessage } from "@utils/discord";
import definePlugin, { OptionType } from "@utils/types";
import { findComponentByCodeLazy } from "@webpack";
import { GuildMemberStore, RelationshipStore, SelectedChannelStore, Tooltip, TypingStore, UserGuildSettingsStore, UserStore, UserSummaryItem, useStateFromStores } from "@webpack/common";

const ThreeDots = findComponentByCodeLazy("Math.min(1,Math.max(", "dotRadius:");

const enum IndicatorMode {
    Dots = 1 << 0,
    Avatars = 1 << 1
}

function getDisplayName(guildId: string, userId: string) {
    const user = UserStore.getUser(userId);
    return GuildMemberStore.getNick(guildId, userId) ?? (user as any).globalName ?? user.username;
}

function TypingIndicator({ channelId, guildId }: { channelId: string; guildId: string; }) {
    const typingUsers: Record<string, number> = useStateFromStores(
        [TypingStore],
        () => ({ ...TypingStore.getTypingUsers(channelId) }),
        null,
        (old, current) => {
            const oldKeys = Object.keys(old);
            const currentKeys = Object.keys(current);

            return oldKeys.length === currentKeys.length && currentKeys.every(key => old[key] != null);
        }
    );
    const currentChannelId = useStateFromStores([SelectedChannelStore], () => SelectedChannelStore.getChannelId());

    if (!settings.store.includeMutedChannels) {
        const isChannelMuted = UserGuildSettingsStore.isChannelMuted(guildId, channelId);
        if (isChannelMuted) return null;
    }

    if (!settings.store.includeCurrentChannel) {
        if (currentChannelId === channelId) return null;
    }

    const myId = UserStore.getCurrentUser()?.id;

    const typingUsersArray = Object.keys(typingUsers).filter(id =>
        id !== myId && !(RelationshipStore.isBlocked(id) && !settings.store.includeBlockedUsers)
    );
    const [a, b, c] = typingUsersArray;
    let tooltipText: string;

    switch (typingUsersArray.length) {
        case 0: break;
        case 1: {
            tooltipText = getIntlMessage("ONE_USER_TYPING", { a: getDisplayName(guildId, a) });
            break;
        }
        case 2: {
            tooltipText = getIntlMessage("TWO_USERS_TYPING", { a: getDisplayName(guildId, a), b: getDisplayName(guildId, b) });
            break;
        }
        case 3: {
            tooltipText = getIntlMessage("THREE_USERS_TYPING", { a: getDisplayName(guildId, a), b: getDisplayName(guildId, b), c: getDisplayName(guildId, c) });
            break;
        }
        default: {
            tooltipText = isPluginEnabled(TypingTweaksPlugin.name)
                ? buildSeveralUsers({ users: [a, b].map(UserStore.getUser), count: typingUsersArray.length - 2, guildId })
                : getIntlMessage("SEVERAL_USERS_TYPING");
            break;
        }
    }

    if (typingUsersArray.length > 0) {
        return (
            <Tooltip text={tooltipText!}>
                {props => (
                    <div className="vc-typing-indicator" {...props}>
                        {((settings.store.indicatorMode & IndicatorMode.Avatars) === IndicatorMode.Avatars) && (
                            <div
                                onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                }}
                                onKeyPress={e => e.stopPropagation()}
                            >
                                <UserSummaryItem
                                    users={typingUsersArray.map(id => UserStore.getUser(id))}
                                    guildId={guildId}
                                    renderIcon={false}
                                    max={3}
                                    showDefaultAvatarsForNullUsers
                                    showUserPopout
                                    size={16}
                                    className="vc-typing-indicator-avatars"
                                />
                            </div>
                        )}
                        {((settings.store.indicatorMode & IndicatorMode.Dots) === IndicatorMode.Dots) && (
                            <div className="vc-typing-indicator-dots">
                                <ThreeDots dotRadius={3} themed={true} />
                            </div>
                        )}
                    </div>
                )}
            </Tooltip>
        );
    }

    return null;
}

const settings = definePluginSettings({
    includeCurrentChannel: {
        type: OptionType.BOOLEAN,
        description: "Whether to show the typing indicator for the currently selected channel",
        default: true
    },
    includeMutedChannels: {
        type: OptionType.BOOLEAN,
        description: "Whether to show the typing indicator for muted channels.",
        default: false
    },
    includeBlockedUsers: {
        type: OptionType.BOOLEAN,
        description: "Whether to show the typing indicator for blocked users.",
        default: false
    },
    indicatorMode: {
        type: OptionType.SELECT,
        description: "How should the indicator be displayed?",
        options: [
            { label: "Avatars and animated dots", value: IndicatorMode.Dots | IndicatorMode.Avatars, default: true },
            { label: "Animated dots", value: IndicatorMode.Dots },
            { label: "Avatars", value: IndicatorMode.Avatars },
        ],
    }
});

export default definePlugin({
    name: "TypingIndicator",
    description: "Adds an indicator if someone is typing on a channel.",
    tags: ["Notifications", "Appearance", "Servers"],
    authors: [Devs.Nuckyz, Devs.fawn, Devs.Sqaaakoi],
    settings,

    patches: [
        // Normal channel
        {
            find: "UNREAD_IMPORTANT:",
            replacement: {
                match: /\.Children\.count.+?:null(?<=,channel:(\i).+?)/,
                replace: "$&,$self.TypingIndicator($1.id,$1.getGuildId())"
            }
        },
        // Theads
        {
            // This is the thread "spine" that shows in the left
            find: "M0 15H2c0 1.6569",
            replacement: {
                match: /mentionsCount:\i.+?null(?<=channel:(\i).+?)/,
                replace: "$&,$self.TypingIndicator($1.id,$1.getGuildId())"
            }
        }
    ],

    TypingIndicator: (channelId: string, guildId: string) => (
        <ErrorBoundary noop>
            <TypingIndicator channelId={channelId} guildId={guildId} />
        </ErrorBoundary>
    ),
});

Source

FiveCord for Windows