diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx
index 095db5da..7c008cb6 100644
--- a/src/components/common/messaging/Message.tsx
+++ b/src/components/common/messaging/Message.tsx
@@ -24,6 +24,7 @@ import MessageBase, {
import Attachment from "./attachments/Attachment";
import { MessageReply } from "./attachments/MessageReply";
import Embed from "./embed/Embed";
+import EmbedInvite from "./embed/EmbedInvite";
interface Props {
attachContext?: boolean;
@@ -36,6 +37,7 @@ interface Props {
hideReply?: boolean;
}
+
const Message = observer(
({
highlight,
@@ -142,6 +144,22 @@ const Message = observer(
)}
{replacement ?? }
+ {(() => {
+ if (content.includes(".revolt.chat/invite/") || content.includes("rvlt.gg/")) {
+ const inviteRegex = /(?:(?:app|nightly)\.revolt\.chat\/invite|rvlt.gg)\/([A-Za-z0-9]*)/g;
+ if (inviteRegex.test(content)) {
+ let results = [];
+ let match;
+ inviteRegex.lastIndex = 0;
+ while ((match = inviteRegex.exec(content)) !== null) {
+ if (!results.includes(match[1])) {
+ results.push(match[1]);
+ }
+ }
+ return results.map(code => );
+ }
+ }
+ })()}
{queued?.error && (
)}
diff --git a/src/components/common/messaging/embed/EmbedInvite.tsx b/src/components/common/messaging/embed/EmbedInvite.tsx
new file mode 100644
index 00000000..48bc59c2
--- /dev/null
+++ b/src/components/common/messaging/embed/EmbedInvite.tsx
@@ -0,0 +1,141 @@
+import styled from "styled-components";
+
+import { autorun } from "mobx";
+import { useHistory } from "react-router-dom";
+
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { defer } from "../../../../lib/defer";
+
+import { dispatch } from "../../../../redux";
+
+import { useClient } from "../../../../context/revoltjs/RevoltClient";
+
+import {
+ AppContext,
+ ClientStatus,
+ StatusContext,
+} from "../../../../context/revoltjs/RevoltClient";
+import { takeError } from "../../../../context/revoltjs/util";
+
+import ServerIcon from "../../../../components/common/ServerIcon";
+import Button from "../../../../components/ui/Button";
+import Overline from "../../../ui/Overline";
+import Preloader from "../../../ui/Preloader";
+
+
+const EmbedInviteBase = styled.div`
+ width: 400px;
+ height: 80px;
+ background-color: var(--secondary-background);
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+ padding: 0 12px;
+ margin-top: 2px;
+`;
+const EmbedInviteDetails = styled.div`
+ flex-grow: 1;
+ padding-left: 12px;
+`;
+const EmbedInviteName = styled.div`
+ font-weight: bold;
+`;
+const EmbedInviteMemberCount = styled.div`
+ font-size: 0.8em;
+`;
+
+
+export default function EmbedInvite(props) {
+ const history = useHistory();
+ const client = useContext(AppContext);
+ const status = useContext(StatusContext);
+ const code = props.code;
+ const [processing, setProcessing] = useState(false);
+ const [error, setError] = useState(undefined);
+ const [invite, setInvite] = useState(
+ undefined,
+ );
+
+ useEffect(() => {
+ if (
+ typeof invite === "undefined" &&
+ (status === ClientStatus.ONLINE || status === ClientStatus.READY)
+ ) {
+ client
+ .fetchInvite(code)
+ .then((data) => setInvite(data))
+ .catch((err) => setError(takeError(err)));
+ }
+ }, [client, code, invite, status]);
+
+ if (typeof invite === "undefined") {
+ return
+ {error ? (
+
+ ) : (
+
+ )}
+
+ }
+
+ return
+
+
+
+ {invite.server_name}
+
+
+ {invite.member_count} members
+
+
+
+
+}