feat: optimistic messages

src/Content/index.tsx

@@ -3,7 +3,7 @@ import React, { Children, memo, useMemo } from "react";
 import Moment from "moment/moment";
 import Message from "../Message";
 import * as Styles from "./style";
-import type { APIEmbedImage, APIMessage } from "discord-api-types/v10";
+import type { APIEmbedImage } from "discord-api-types/v10";
 import { MessageFlags } from "discord-api-types/v10";
 import Tooltip from "../Tooltip";
 import SvgFromUrl from "../SvgFromUrl";
@@ -16,6 +16,7 @@ import ThreadButton from "./Thread/ThreadButton";
 import Components from "../Message/Components";
 import getDisplayName from "../utils/getDisplayName";
 import { useTranslation } from "react-i18next";
+import type { DiscordMessage } from "../types";
 
 interface EditedProps {
   editedAt: string;
@@ -69,7 +70,7 @@ export function MessageAccessories({
 interface ContentCoreProps {
   children: ReactNode;
   showTooltip: boolean;
-  referencedMessage: APIMessage | null;
+  referencedMessage: DiscordMessage | null;
 }
 
 function ContentCore(props: ContentCoreProps) {
@@ -97,7 +98,7 @@ function ContentCore(props: ContentCoreProps) {
 }
 
 interface ContentProps {
-  message: APIMessage;
+  message: DiscordMessage;
   isReplyContent?: boolean;
   noThreadButton?: boolean;
 }
@@ -200,7 +201,10 @@ function Content(props: ContentProps) {
 
   return (
     <>
-      <Styles.Base isReplyContent={props.isReplyContent}>
+      <Styles.MessageContent
+        isReplyContent={props.isReplyContent}
+        isOptimistic={props.message.optimistic}
+      >
         <ContentCore
           referencedMessage={props.message}
           showTooltip={props.isReplyContent ?? false}
@@ -229,7 +233,7 @@ function Content(props: ContentProps) {
           </Styles.ContentContainer>
         </ContentCore>
         {props.isReplyContent && <ReplyIcon message={props.message} />}
-      </Styles.Base>
+      </Styles.MessageContent>
       {!props.isReplyContent && (
         <MessageAccessories
           active={

src/Content/style.ts

@@ -8,14 +8,19 @@ import { CodeBlock } from "../markdown/render/elements/code/style";
 import SvgFromUrl from "../SvgFromUrl";
 import { Heading } from "../markdown/render/elements";
 
-export const Base = styled.withConfig({
+export const MessageContent = styled.withConfig({
   displayName: "message-content",
   componentId: commonComponentId,
 })("span", {
   color: theme.colors.primaryOpacity20,
   whiteSpace: "break-spaces",
   fontSize: theme.fontSizes.l,
   variants: {
+    isOptimistic: {
+      true: {
+        opacity: 0.5,
+      },
+    },
     isReplyContent: {
       true: {
         fontSize: theme.fontSizes.m,

src/Message/Components/ActionRow.tsx

@@ -1,15 +1,15 @@
 import type {
   APIActionRowComponent,
-  APIMessage,
   APIMessageActionRowComponent,
 } from "discord-api-types/v10";
 import * as Styles from "./style";
 import React from "react";
 import Component from "./Component";
+import type { DiscordMessage } from "../../types";
 
 interface ActionRowProps {
   actionRow: APIActionRowComponent<APIMessageActionRowComponent>;
-  message: APIMessage;
+  message: DiscordMessage;
 }
 
 function ActionRow({ actionRow, message }: ActionRowProps) {

src/Message/Components/ButtonComponent.tsx

@@ -1,7 +1,6 @@
 import type {
   APIButtonComponentWithCustomId,
   APIButtonComponentWithURL,
-  APIMessage,
 } from "discord-api-types/v10";
 import * as Styles from "./style";
 import type { ComponentProps } from "react";
@@ -11,6 +10,7 @@ import { ButtonStyle } from "discord-api-types/v10";
 import Emoji from "../../Emoji";
 import { useConfig } from "../../core/ConfigContext";
 import ExternalLink from "../../ExternalLink";
+import type { DiscordMessage } from "../../types";
 
 const buttonStyleMap: Record<
   ButtonStyle,
@@ -33,7 +33,7 @@ type ButtonComponentWithURL = APIButtonComponentWithURL & {
 
 interface ButtonComponentProps {
   button: ButtonComponentWithCustomId | ButtonComponentWithURL;
-  message: APIMessage;
+  message: DiscordMessage;
 }
 
 function ButtonComponent({ button, message }: ButtonComponentProps) {

src/Message/Components/Component.tsx

@@ -1,14 +1,12 @@
-import type {
-  APIMessage,
-  APIMessageActionRowComponent,
-} from "discord-api-types/v10";
+import type { APIMessageActionRowComponent } from "discord-api-types/v10";
 import { ComponentType } from "discord-api-types/v10";
 import ButtonComponent from "./ButtonComponent";
 import React from "react";
+import type { DiscordMessage } from "../../types";
 
 interface ComponentProps {
   component: APIMessageActionRowComponent;
-  message: APIMessage;
+  message: DiscordMessage;
 }
 
 function Component({ component, message }: ComponentProps) {

src/Message/Components/index.tsx

@@ -1,11 +1,11 @@
-import type { APIMessage } from "discord-api-types/v10";
 import ActionRow from "./ActionRow";
 import React from "react";
 import * as Styles from "./style";
+import type { DiscordMessage } from "../../types";
 
 interface ComponentsProps {
-  components: APIMessage["components"];
-  message: APIMessage;
+  components: DiscordMessage["components"];
+  message: DiscordMessage;
 }
 
 function Components({ components, message }: ComponentsProps) {

src/Message/index.tsx

@@ -1,7 +1,7 @@
 import NormalMessage from "./variants/NormalMessage";
 import React, { memo } from "react";
 import MessageContainer from "./MessageContainer";
-import type { APIChannel, APIMessage } from "discord-api-types/v10";
+import type { APIChannel } from "discord-api-types/v10";
 import { MessageType } from "discord-api-types/v10";
 import GuildMemberJoin from "./variants/GuildMemberJoin";
 import GuildDiscoveryRequalified from "./variants/GuildDiscoveryRequalified";
@@ -19,10 +19,11 @@ import ThreadCreated from "./variants/ThreadCreated";
 import { MessageTypeResponse, useConfig } from "../core/ConfigContext";
 import ThreadStarterMessage from "./variants/ThreadStarterMessage";
 import AutomodAction from "./variants/AutomodAction";
+import type { DiscordMessage } from "../types";
 
 export interface MessageProps {
   isFirstMessage?: boolean;
-  message: APIMessage;
+  message: DiscordMessage;
   isHovered?: boolean;
   showButtons?: boolean;
   thread?: boolean;
@@ -155,7 +156,7 @@ function MessageTypeSwitch(props: Omit<MessageProps, "showButtons">) {
     default: {
       switch (unknownMessageTypeResponse) {
         case MessageTypeResponse.InAppError: {
-          const errorMessage: APIMessage = {
+          const errorMessage: DiscordMessage = {
             ...props.message,
             type: MessageType.Default,
             content: `Unknown message type \`${

src/Message/variants/AutomodAction.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import type { APIMessage, APIReaction, Snowflake } from "discord-api-types/v10";
+import type { APIReaction, Snowflake } from "discord-api-types/v10";
 import * as Styles from "../style/message";
 import MessageAuthor, { AutomodAuthor } from "../MessageAuthor";
 import LargeTimestamp from "../LargeTimestamp";
@@ -9,6 +9,7 @@ import { useConfig } from "../../core/ConfigContext";
 import { error } from "../../utils/error";
 import { MessageAccessories } from "../../Content";
 import Reactions from "../Reactions";
+import type { DiscordMessage } from "../../types";
 
 type QuarantineUserAction =
   | "quarantine_user"
@@ -115,7 +116,7 @@ function hasReactions(
 }
 
 interface AutomodActionProps {
-  message: APIMessage;
+  message: DiscordMessage;
   isHovered?: boolean;
 }
 

src/Message/variants/BoostTierUpgrade.tsx

@@ -3,17 +3,18 @@ import React, { useMemo } from "react";
 import LargeTimestamp from "../LargeTimestamp";
 import * as Styles from "../style/message";
 import { SystemMessageIconSize } from "../style/message";
-import type { APIMessage, Snowflake } from "discord-api-types/v10";
+import type { Snowflake } from "discord-api-types/v10";
 import { MessageType } from "discord-api-types/v10";
 import { useConfig } from "../../core/ConfigContext";
 import { Trans, useTranslation } from "react-i18next";
+import type { DiscordMessage } from "../../types";
 
 interface BoostTierUpgradeProps {
-  createdAt: APIMessage["timestamp"];
+  createdAt: DiscordMessage["timestamp"];
   content: string;
   channelId: Snowflake;
   type: MessageType;
-  author: APIMessage["author"];
+  author: DiscordMessage["author"];
 }
 
 function BoostTierUpgrade({

src/Message/variants/ChannelFollowAdd.tsx

@@ -3,15 +3,15 @@ import LargeTimestamp from "../LargeTimestamp";
 import React from "react";
 import * as Styles from "../style/message";
 import { SystemMessageIconSize } from "../style/message";
-import type { APIMessage } from "discord-api-types/v10";
 import { useConfig } from "../../core/ConfigContext";
 import { Trans, useTranslation } from "react-i18next";
+import type { DiscordMessage } from "../../types";
 
 interface ChannelFollowAddProps {
   content: string;
-  author: APIMessage["author"];
-  channelId: APIMessage["channel_id"];
-  createdAt: APIMessage["timestamp"];
+  author: DiscordMessage["author"];
+  channelId: DiscordMessage["channel_id"];
+  createdAt: DiscordMessage["timestamp"];
 }
 
 function ChannelFollowAdd(props: ChannelFollowAddProps) {

src/Message/variants/ChannelNameChange.tsx

@@ -3,15 +3,15 @@ import LargeTimestamp from "../LargeTimestamp";
 import React from "react";
 import * as Styles from "../style/message";
 import { SystemMessageIconSize } from "../style/message";
-import type { APIMessage } from "discord-api-types/v10";
 import { useConfig } from "../../core/ConfigContext";
 import { Trans, useTranslation } from "react-i18next";
+import type { DiscordMessage } from "../../types";
 
 interface ChannelNameChangeProps {
   content: string;
-  createdAt: APIMessage["timestamp"];
-  channelId: APIMessage["channel_id"];
-  author: APIMessage["author"];
+  createdAt: DiscordMessage["timestamp"];
+  channelId: DiscordMessage["channel_id"];
+  author: DiscordMessage["author"];
 }
 
 function ChannelNameChange(props: ChannelNameChangeProps) {

src/Message/variants/ChannelPinnedMessage.tsx

@@ -3,14 +3,14 @@ import React from "react";
 import LargeTimestamp from "../LargeTimestamp";
 import * as Styles from "../style/message";
 import { SystemMessageIconSize } from "../style/message";
-import type { APIMessage } from "discord-api-types/v10";
 import { useConfig } from "../../core/ConfigContext";
 import { Trans, useTranslation } from "react-i18next";
+import type { DiscordMessage } from "../../types";
 
 interface ChannelPinnedMessageProps {
-  author: APIMessage["author"];
-  createdAt: APIMessage["timestamp"];
-  channelId: APIMessage["channel_id"];
+  author: DiscordMessage["author"];
+  createdAt: DiscordMessage["timestamp"];
+  channelId: DiscordMessage["channel_id"];
 }
 
 function ChannelPinnedMessage(props: ChannelPinnedMessageProps) {

src/Message/variants/GuildBoost.tsx

@@ -3,15 +3,15 @@ import LargeTimestamp from "../LargeTimestamp";
 import React from "react";
 import * as Styles from "../style/message";
 import { SystemMessageIconSize } from "../style/message";
-import type { APIMessage } from "discord-api-types/v10";
 import { useConfig } from "../../core/ConfigContext";
 import { Trans, useTranslation } from "react-i18next";
+import type { DiscordMessage } from "../../types";
 
 interface GuildBoostProps {
-  createdAt: APIMessage["timestamp"];
-  author: APIMessage["author"];
+  createdAt: DiscordMessage["timestamp"];
+  author: DiscordMessage["author"];
   content: string;
-  channelId: APIMessage["channel_id"];
+  channelId: DiscordMessage["channel_id"];
 }
 
 function GuildBoost(props: GuildBoostProps) {

src/Message/variants/GuildDiscoveryDisqualified.tsx

@@ -2,11 +2,11 @@ import LargeTimestamp from "../LargeTimestamp";
 import React from "react";
 import * as Styles from "../style/message";
 import { SystemMessageIconSize } from "../style/message";
-import type { APIMessage } from "discord-api-types/v10";
 import { Trans, useTranslation } from "react-i18next";
+import type { DiscordMessage } from "../../types";
 
 interface GuildDiscoveryDisqualifiedProps {
-  createdAt: APIMessage["timestamp"];
+  createdAt: DiscordMessage["timestamp"];
 }
 
 function GuildDiscoveryDisqualified(props: GuildDiscoveryDisqualifiedProps) {

src/Message/variants/GuildDiscoveryGracePeriodFinalWarning.tsx

@@ -2,11 +2,11 @@ import LargeTimestamp from "../LargeTimestamp";
 import React from "react";
 import * as Styles from "../style/message";
 import { SystemMessageIconSize } from "../style/message";
-import type { APIMessage } from "discord-api-types/v10";
 import { Trans, useTranslation } from "react-i18next";
+import type { DiscordMessage } from "../../types";
 
 interface GuildDiscoveryGracePeriodFinalWarningProps {
-  createdAt: APIMessage["timestamp"];
+  createdAt: DiscordMessage["timestamp"];
 }
 
 function GuildDiscoveryGracePeriodFinalWarning(

src/Message/variants/GuildDiscoveryGracePeriodInitialWarning.tsx

@@ -2,11 +2,11 @@ import LargeTimestamp from "../LargeTimestamp";
 import React from "react";
 import * as Styles from "../style/message";
 import { SystemMessageIconSize } from "../style/message";
-import type { APIMessage } from "discord-api-types/v10";
 import { Trans, useTranslation } from "react-i18next";
+import type { DiscordMessage } from "../../types";
 
 interface GuildDiscoveryGracePeriodInitialWarningProps {
-  createdAt: APIMessage["timestamp"];
+  createdAt: DiscordMessage["timestamp"];
 }
 
 function GuildDiscoveryGracePeriodInitialWarning(

src/Message/variants/GuildDiscoveryRequalified.tsx

@@ -2,11 +2,11 @@ import LargeTimestamp from "../LargeTimestamp";
 import React from "react";
 import * as Styles from "../style/message";
 import { SystemMessageIconSize } from "../style/message";
-import type { APIMessage } from "discord-api-types/v10";
 import { Trans, useTranslation } from "react-i18next";
+import type { DiscordMessage } from "../../types";
 
 interface GuildDiscoveryRequalifiedProps {
-  createdAt: APIMessage["timestamp"];
+  createdAt: DiscordMessage["timestamp"];
 }
 
 function GuildDiscoveryRequalified(props: GuildDiscoveryRequalifiedProps) {

src/Message/variants/GuildMemberJoin.tsx

@@ -3,15 +3,15 @@ import LargeTimestamp from "../LargeTimestamp";
 import React from "react";
 import * as Styles from "../style/message";
 import { SystemMessageIconSize } from "../style/message";
-import type { APIMessage } from "discord-api-types/v10";
 import { useConfig } from "../../core/ConfigContext";
 import { Trans, useTranslation } from "react-i18next";
 import { GuildMemberJoin as GuildMemberJoinI18n } from "../../i18n/locales/en/translation.json";
+import type { DiscordMessage } from "../../types";
 
 interface GuildMemberJoinProps {
-  createdAt: APIMessage["timestamp"];
-  author: APIMessage["author"];
-  channelId: APIMessage["channel_id"];
+  createdAt: DiscordMessage["timestamp"];
+  author: DiscordMessage["author"];
+  channelId: DiscordMessage["channel_id"];
 }
 
 function GuildMemberJoin(props: GuildMemberJoinProps) {