v2.2.0

.storybook/preview.js

@@ -15,7 +15,7 @@ const preview = {
       values: [
         {
           name: "discord-dark",
-          value: "#424549",
+          value: "#313338",
         },
       ],
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widgetbot/message-renderer",
-  "version": "v2.1.0",
+  "version": "v2.2.0",
   "description": "",
   "module": "dist/message-renderer.mjs",
   "files": [

src/ChatTag/index.tsx

@@ -30,7 +30,7 @@ function isVerifiedBot(flags?: number) {
 }
 
 interface TagProps {
-  author: APIUser;
+  author: APIUser | "automod";
   crossPost: boolean;
   referenceGuild: string | undefined;
 }
@@ -40,14 +40,18 @@ function ChatTag({ author, crossPost, referenceGuild }: TagProps) {
 
   const { chatBadge: ChatBadge } = useConfig();
 
-  if (ChatBadge !== undefined) {
+  if (author !== "automod" && ChatBadge !== undefined) {
     const chatBadgeResult = ChatBadge({ user: author, TagWrapper: Styles.Tag });
     if (chatBadgeResult !== null) return chatBadgeResult;
   }
 
-  if (!author.bot) return null;
+  if (author !== "automod" && !author.bot) return null;
 
-  if (author.system || referenceGuild === "667560445975986187")
+  if (
+    author === "automod" ||
+    author.system ||
+    referenceGuild === "667560445975986187"
+  )
     return (
       <Styles.Tag className="verified system">
         {verified} {t("chatTag.system")}

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 { ChatMessage } from "../types";
 
 interface EditedProps {
   editedAt: string;
@@ -57,7 +58,10 @@ interface MessageAccessoriesProps {
   children?: ReactNode;
 }
 
-function MessageAccessories({ children, active }: MessageAccessoriesProps) {
+export function MessageAccessories({
+  children,
+  active,
+}: MessageAccessoriesProps) {
   if (!active || !children || Children.count(children) === 0) return <></>;
 
   return <Styles.MessageAccessories>{children}</Styles.MessageAccessories>;
@@ -66,7 +70,7 @@ function MessageAccessories({ children, active }: MessageAccessoriesProps) {
 interface ContentCoreProps {
   children: ReactNode;
   showTooltip: boolean;
-  referencedMessage: APIMessage | null;
+  referencedMessage: ChatMessage | null;
 }
 
 function ContentCore(props: ContentCoreProps) {
@@ -94,7 +98,7 @@ function ContentCore(props: ContentCoreProps) {
 }
 
 interface ContentProps {
-  message: APIMessage;
+  message: ChatMessage;
   isReplyContent?: boolean;
   noThreadButton?: boolean;
 }
@@ -197,12 +201,18 @@ 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}
         >
-          <Styles.ContentContainer isReplyContent={props.isReplyContent}>
+          <Styles.ContentContainer
+            isReplyContent={props.isReplyContent}
+            didFailToSend={props.message.failedToSend}
+          >
             {props.message.content.length > 0 ? (
               <>
                 {props.message.webhook_id !== undefined ? (
@@ -226,7 +236,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,
@@ -57,6 +62,11 @@ export const ContentContainer = styled.withConfig({
   lineHeight: "1.375rem",
 
   variants: {
+    didFailToSend: {
+      true: {
+        color: theme.colors.danger,
+      },
+    },
     isReplyContent: {
       true: {
         overflow: "hidden",

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 { ChatMessage } from "../../types";
 
 interface ActionRowProps {
   actionRow: APIActionRowComponent<APIMessageActionRowComponent>;
-  message: APIMessage;
+  message: ChatMessage;
 }
 
 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 { ChatMessage } from "../../types";
 
 const buttonStyleMap: Record<
   ButtonStyle,
@@ -33,7 +33,7 @@ type ButtonComponentWithURL = APIButtonComponentWithURL & {
 
 interface ButtonComponentProps {
   button: ButtonComponentWithCustomId | ButtonComponentWithURL;
-  message: APIMessage;
+  message: ChatMessage;
 }
 
 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 { ChatMessage } from "../../types";
 
 interface ComponentProps {
   component: APIMessageActionRowComponent;
-  message: APIMessage;
+  message: ChatMessage;
 }
 
 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 { ChatMessage } from "../../types";
 
 interface ComponentsProps {
-  components: APIMessage["components"];
-  message: APIMessage;
+  components: ChatMessage["components"];
+  message: ChatMessage;
 }
 
 function Components({ components, message }: ComponentsProps) {

src/Message/MessageAuthor.tsx

@@ -8,11 +8,33 @@ import * as Styles from "./style/author";
 import type { APIRole, APIUser, Snowflake } from "discord-api-types/v10";
 import { useConfig } from "../core/ConfigContext";
 import getDisplayName from "../utils/getDisplayName";
+import { useTranslation } from "react-i18next";
+
+interface AutomodAuthorProps {
+  isAvatarAnimated?: boolean;
+}
+
+export function AutomodAuthor({ isAvatarAnimated }: AutomodAuthorProps) {
+  const {
+    automodAvatar: { still: avatarStill, animated: avatarAnimated },
+  } = useConfig();
+  const { t } = useTranslation();
+
+  const automodAvatar = isAvatarAnimated ? avatarAnimated : avatarStill;
+
+  return (
+    <Styles.MessageAuthor>
+      <Styles.Avatar data={automodAvatar} draggable={false} type="image/png" />
+      <Styles.Username automod>{t("AutomodAction.username")}</Styles.Username>
+      <ChatTag author="automod" crossPost={false} referenceGuild={undefined} />
+    </Styles.MessageAuthor>
+  );
+}
 
 interface MessageAuthorProps
   extends ComponentProps<typeof Styles.MessageAuthor> {
   author: APIUser;
-  avatarAnimated?: boolean;
+  isAvatarAnimated?: boolean;
   onlyShowUsername?: boolean;
   crossPost?: boolean;
   referenceGuild?: Snowflake;
@@ -22,7 +44,6 @@ interface MessageAuthorProps
 function MessageAuthor({
   onlyShowUsername,
   author,
-  avatarAnimated,
   crossPost,
   referenceGuild,
   guildId,
@@ -33,11 +54,8 @@ function MessageAuthor({
   const member = guildId ? resolveMember(author, guildId) : null;
   const isGuildMember = member !== null;
 
-  const avatarUrl =
-    avatarUrlOverride?.(author) ??
-    getAvatar(author, {
-      animated: avatarAnimated ?? false,
-    });
+  const { stillAvatarUrl, animatedAvatarUrl } =
+    avatarUrlOverride?.(author) ?? getAvatar(author);
 
   const displayName = isGuildMember
     ? member.nick ?? getDisplayName(author)
@@ -98,15 +116,40 @@ function MessageAuthor({
       {...props}
       onClick={() => userOnClick?.(author)}
     >
-      <Styles.Avatar data={avatarUrl} draggable={false} type="image/png">
-        <Styles.AvatarFallback
-          src={getAvatar(author, {
-            animated: false,
-            forceDefault: true,
-          })}
-          alt="avatar"
-        />
-      </Styles.Avatar>
+      <Styles.AnimatedAvatarTrigger
+        data-is-animated={animatedAvatarUrl !== undefined}
+      >
+        <Styles.StillAvatar
+          data={stillAvatarUrl}
+          draggable={false}
+          type="image/png"
+        >
+          <Styles.AvatarFallback
+            src={
+              getAvatar(author, {
+                forceDefault: true,
+              }).stillAvatarUrl
+            }
+            alt="avatar"
+          />
+        </Styles.StillAvatar>
+        {animatedAvatarUrl && (
+          <Styles.AnimatedAvatar
+            data={animatedAvatarUrl}
+            draggable={false}
+            type="image/gif"
+          >
+            <Styles.AvatarFallback
+              src={
+                getAvatar(author, {
+                  forceDefault: true,
+                }).stillAvatarUrl
+              }
+              alt="avatar"
+            />
+          </Styles.AnimatedAvatar>
+        )}
+      </Styles.AnimatedAvatarTrigger>
       <Styles.Username style={{ color: dominantRoleColor }}>
         {displayName}
       </Styles.Username>