feat: automod messages

.storybook/preview.js

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

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

@@ -57,7 +57,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>;

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,7 @@ interface MessageAuthorProps
 function MessageAuthor({
   onlyShowUsername,
   author,
-  avatarAnimated,
+  isAvatarAnimated,
   crossPost,
   referenceGuild,
   guildId,
@@ -36,7 +58,7 @@ function MessageAuthor({
   const avatarUrl =
     avatarUrlOverride?.(author) ??
     getAvatar(author, {
-      animated: avatarAnimated ?? false,
+      animated: isAvatarAnimated ?? false,
     });
 
   const displayName = isGuildMember

src/Message/index.tsx

@@ -18,6 +18,7 @@ import RecipientRemove from "./variants/RecipientRemove";
 import ThreadCreated from "./variants/ThreadCreated";
 import { useConfig } from "../core/ConfigContext";
 import ThreadStarterMessage from "./variants/ThreadStarterMessage";
+import AutomodAction from "./variants/AutomodAction";
 
 export interface MessageProps {
   isFirstMessage?: boolean;
@@ -144,6 +145,10 @@ function MessageTypeSwitch(props: Omit<MessageProps, "showButtons">) {
           createdAt={props.message.timestamp}
         />
       );
+    case MessageType.AutoModerationAction:
+      return (
+        <AutomodAction message={props.message} isHovered={props.isHovered} />
+      );
     default: {
       // todo: lock behind a debug mode
       const errorMessage: APIMessage = {

src/Message/style/author.ts

@@ -33,6 +33,15 @@ export const Username = styled.withConfig({
   verticalAlign: "baseline",
   whiteSpace: "nowrap",
   lineHeight: `1.375rem`,
+
+  variants: {
+    automod: {
+      true: {
+        color: theme.colors.automodUsername,
+        fontWeight: 600,
+      },
+    },
+  },
 });
 
 export const Avatar = styled.withConfig({

src/Message/style/message.ts

@@ -93,6 +93,73 @@ export const MessageHeaderBase = styled.withConfig({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
+  flexWrap: "wrap",
+});
+
+export const AutomodHeaderText = styled.withConfig({
+  displayName: "automod-header-text",
+  componentId: commonComponentId,
+})("span", {
+  marginLeft: theme.space.small,
+  color: theme.colors.primaryOpacity100,
+});
+
+export const AutomodMessageInQuestion = styled.withConfig({
+  displayName: "automod-message-in-question",
+  componentId: commonComponentId,
+})("div", {
+  padding: theme.space.xl,
+  backgroundColor: theme.colors.backgroundSecondary,
+  borderRadius: 8,
+  position: "relative",
+  paddingLeft: 72,
+  marginTop: theme.space.small,
+});
+
+export const AutomodMessageContent = styled.withConfig({
+  displayName: "automod-message-content",
+  componentId: commonComponentId,
+})("div", {
+  color: theme.colors.primaryOpacity80,
+  whiteSpace: "break-spaces",
+  fontSize: theme.fontSizes.l,
+});
+
+export const AutomodMatchInfoContainer = styled.withConfig({
+  displayName: "automod-match-info-container",
+  componentId: commonComponentId,
+})("span", {
+  display: "flex",
+  flexDirection: "row",
+  color: theme.colors.textMuted,
+  fontSize: theme.fontSizes.s,
+});
+
+export const AutomodMatchInfo = styled.withConfig({
+  displayName: "automod-match-info",
+  componentId: commonComponentId,
+})("span", {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+
+  "&:not(:last-child)::after": {
+    marginLeft: theme.space.large,
+    marginRight: theme.space.large,
+    content: "",
+    display: "inline-block",
+    width: 4,
+    height: 4,
+    backgroundColor: theme.colors.automodDot,
+    borderRadius: "100%",
+  },
+});
+
+export const AutomodFlaggedKeyword = styled.withConfig({
+  displayName: "automod-flagged-keyword",
+  componentId: commonComponentId,
+})("span", {
+  backgroundColor: theme.colors.automodMatchedWord,
 });
 
 export namespace MessageContainerStyle {
@@ -239,7 +306,7 @@ export const MiniUserName = styled.withConfig({
   overflow: "hidden",
   maxWidth: "25vw",
   textOverflow: "ellipsis",
-  color: theme.colors.primaryOpacity100
+  color: theme.colors.primaryOpacity100,
 });
 
 export const SystemMessage = styled.withConfig({