MessageLinkTooltip

index.tsx

Download

Source

src/plugins/messageLinkTooltip/index.tsx

1/*

2 * FiveCord — a Discord client mod

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

5 */

7import "./style.css";

9import ErrorBoundary from "@components/ErrorBoundary";

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

11import { proxyLazy } from "@utils/lazy";

12import definePlugin from "@utils/types";

13import { findComponentByCodeLazy } from "@webpack";

import { ChannelStore, Forms, MessageStore, RestAPI, Tooltip, useEffect, useState, useStateFromStores } from "@webpack/common";

15import type { ComponentType, HTMLAttributes } from "react";

17declare enum SpinnerTypes {

18 WANDERING_CUBES = "wanderingCubes",

19 CHASING_DOTS = "chasingDots",

20 PULSING_ELLIPSIS = "pulsingEllipsis",

21 SPINNING_CIRCLE = "spinningCircle",

22 SPINNING_CIRCLE_SIMPLE = "spinningCircleSimple",

23 LOW_MOTION = "lowMotion",

24}

26type Spinner = ComponentType<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {

27 type?: SpinnerTypes;

28 animated?: boolean;

29 className?: string;

30 itemClassName?: string;

31 "aria-label"?: string;

32}> & {

33 Type: typeof SpinnerTypes;

34};

36const { Spinner } = proxyLazy(() => Forms as any as {

37 Spinner: Spinner,

38 SpinnerTypes: typeof SpinnerTypes;

39});

41const ChannelMessage = findComponentByCodeLazy("renderSimpleAccessories)") as ComponentType<any>;

43export default definePlugin({

44 name: "MessageLinkTooltip",

45 description: "Like MessageLinkEmbed but without taking space",

46 authors: [Devs.FiveCord],

48 patches: [

49 {

50 find: ',className:"channelMention",children:[',

51 replacement: {

52 match: /(?<=\.jsxs\)\()(\i\.default)/,

53 replace: "$self.wrapComponent(arguments[0], $1)"

54 }

55 }

56 ],

58 wrapComponent({ messageId, channelId }, Component: ComponentType) {

59 return props => {

60 if (messageId === undefined) return <Component {...props} />;

61 return <Tooltip

62 tooltipClassName="c98-message-link-tooltip"

63 text={

64 <ErrorBoundary>

65 <MessagePreview

66 channelId={channelId}

67 messageId={messageId}

68 />

69 </ErrorBoundary>

70 }

71 >

72 {({ onMouseEnter, onMouseLeave }) =>

73 <Component

74 {...props}

75 onMouseEnter={onMouseEnter}

76 onMouseLeave={onMouseLeave}

77 />

78 }

79 </Tooltip>;

80 };

81 }

82});

84function MessagePreview({ channelId, messageId }) {

85 const channel = ChannelStore.getChannel(channelId);

86 const message = useMessage(channelId, messageId);

87 // TODO handle load failure

88 if (!message) {

89 return <Spinner type={Spinner.Type.PULSING_ELLIPSIS} />;

90 }

92 return <ChannelMessage

93 id={`message-link-tooltip-${messageId}`}

94 message={message}

95 channel={channel}

96 subscribeToComponentDispatch={false}

97 />;

98}

100function useMessage(channelId, messageId) {

101 const cachedMessage = useStateFromStores(

102 // @ts-ignore

103 [MessageStore],

104 () => MessageStore.getMessage(channelId, messageId)

105 );

106 const [message, setMessage] = useState(cachedMessage);

107 useEffect(() => {

108 if (message == null)

109 (async () => {

110 const res = await RestAPI.get({

111 url: `/channels/${channelId}/messages`,

112 query: {

113 limit: 1,

114 around: messageId,

115 },

116 retries: 2,

117 });

118 const rawMessage = res.body[0];

119 const message = MessageStore.getMessages(channelId)

120 .receiveMessage(rawMessage)

121 .get(messageId);

122 setMessage(message);

123 })();

124 });

125 return message;

126}

127

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

import "./style.css";

import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
import { proxyLazy } from "@utils/lazy";
import definePlugin from "@utils/types";
import { findComponentByCodeLazy } from "@webpack";
import { ChannelStore, Forms, MessageStore, RestAPI, Tooltip, useEffect, useState, useStateFromStores } from "@webpack/common";
import type { ComponentType, HTMLAttributes } from "react";

declare enum SpinnerTypes {
    WANDERING_CUBES = "wanderingCubes",
    CHASING_DOTS = "chasingDots",
    PULSING_ELLIPSIS = "pulsingEllipsis",
    SPINNING_CIRCLE = "spinningCircle",
    SPINNING_CIRCLE_SIMPLE = "spinningCircleSimple",
    LOW_MOTION = "lowMotion",
}

type Spinner = ComponentType<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
    type?: SpinnerTypes;
    animated?: boolean;
    className?: string;
    itemClassName?: string;
    "aria-label"?: string;
}> & {
    Type: typeof SpinnerTypes;
};

const { Spinner } = proxyLazy(() => Forms as any as {
    Spinner: Spinner,
    SpinnerTypes: typeof SpinnerTypes;
});

const ChannelMessage = findComponentByCodeLazy("renderSimpleAccessories)") as ComponentType<any>;

export default definePlugin({
    name: "MessageLinkTooltip",
    description: "Like MessageLinkEmbed but without taking space",
    authors: [Devs.FiveCord],

    patches: [
        {
            find: ',className:"channelMention",children:[',
            replacement: {
                match: /(?<=\.jsxs\)\()(\i\.default)/,
                replace: "$self.wrapComponent(arguments[0], $1)"
            }
        }
    ],

    wrapComponent({ messageId, channelId }, Component: ComponentType) {
        return props => {
            if (messageId === undefined) return <Component {...props} />;
            return <Tooltip
                tooltipClassName="c98-message-link-tooltip"
                text={
                    <ErrorBoundary>
                        <MessagePreview
                            channelId={channelId}
                            messageId={messageId}
                        />
                    </ErrorBoundary>
                }
            >
                {({ onMouseEnter, onMouseLeave }) =>
                    <Component
                        {...props}
                        onMouseEnter={onMouseEnter}
                        onMouseLeave={onMouseLeave}
                    />
                }
            </Tooltip>;
        };
    }
});

function MessagePreview({ channelId, messageId }) {
    const channel = ChannelStore.getChannel(channelId);
    const message = useMessage(channelId, messageId);
    // TODO handle load failure
    if (!message) {
        return <Spinner type={Spinner.Type.PULSING_ELLIPSIS} />;
    }

    return <ChannelMessage
        id={`message-link-tooltip-${messageId}`}
        message={message}
        channel={channel}
        subscribeToComponentDispatch={false}
    />;
}

function useMessage(channelId, messageId) {
    const cachedMessage = useStateFromStores(
        // @ts-ignore
        [MessageStore],
        () => MessageStore.getMessage(channelId, messageId)
    );
    const [message, setMessage] = useState(cachedMessage);
    useEffect(() => {
        if (message == null)
            (async () => {
                const res = await RestAPI.get({
                    url: `/channels/${channelId}/messages`,
                    query: {
                        limit: 1,
                        around: messageId,
                    },
                    retries: 2,
                });
                const rawMessage = res.body[0];
                const message = MessageStore.getMessages(channelId)
                    .receiveMessage(rawMessage)
                    .get(messageId);
                setMessage(message);
            })();
    });
    return message;
}

Source

FiveCord for Windows