Update version

Closes #936

.github/workflows/main.yml

@@ -18,8 +18,7 @@ jobs:
       - name: Install .NET
         uses: actions/setup-dotnet@v2
         with:
-          # Fixed version, workaround for https://github.com/dotnet/core/issues/7176
-          dotnet-version: 6.0.100
+          dotnet-version: 6.0.x
 
       - name: Run tests
         # Tests need access to secrets, so we can't run them against PRs because of limited trust
@@ -50,8 +49,7 @@ jobs:
       - name: Install .NET
         uses: actions/setup-dotnet@v2
         with:
-          # Fixed version, workaround for https://github.com/dotnet/core/issues/7176
-          dotnet-version: 6.0.100
+          dotnet-version: 6.0.x
 
       - name: Publish (CLI)
         run: dotnet publish DiscordChatExporter.Cli/ -o DiscordChatExporter.Cli/bin/Publish/ --configuration Release
@@ -151,4 +149,4 @@ jobs:
           payload: |
             {
               "content": "**DiscordChatExporter** new version released!\nVersion: `${{ steps.get_version.outputs.tag }}`\nChangelog: <https://github.com/Tyrrrz/DiscordChatExporter/blob/${{ steps.get_version.outputs.tag }}/Changelog.md>"
-            }
+            }

.gitignore

@@ -5,6 +5,7 @@
 *.sln.docstates
 .idea/
 .vs/
+.vscode/
 
 # Build results
 [Dd]ebug/

Changelog.md

@@ -1,3 +1,16 @@
+### v2.36.1 (24-Sep-2022)
+
+- Added a check which will trigger an error if the provided bot account does not have the message content intent enabled. Note, however, that this check is based on heuristics which may result in false negatives.
+- Fixed an issue where certain transient HTTP errors were not retried.
+- Fixed an issue which caused the export process to fail with the `IndexOutOfRangeException` exception on certain automated messages.
+- Fixed an issue which caused the export process to fail on unrecognized embed types.
+
+### v2.36 (16-Sep-2022)
+
+- [HTML] Added support for rendering GIFV embeds. They will now render as videos that automatically play when you hover your mouse over them. (Thanks [@gan-of-culture](https://github.com/gan-of-culture))
+- [HTML] Added support for rendering system notification messages, such as when a user joins a server or when a messages gets pinned. Previously, such messages were rendered as regular text messages, but now they look similar to how they're presented in the Discord client. (Thanks [@gan-of-culture](https://github.com/gan-of-culture))
+- [CLI] Improved the wording of the error message that's shown when exporting multiple channels and the provided output path is ambiguous. It now mentions that you can resolve the ambiguity by adding a slash at the end of the path.
+
 ### v2.35.2 (08-Sep-2022)
 
 - Updated usage guide to mention the need to enable "Message Content Intent" to use a bot as a medium for exporting messages.
@@ -434,4 +447,4 @@ Please note that CSV export is most likely not going to receive future updates a
 - Added support for user and role mentions.
 - Added support for channel mentions.
 - Fixed text in pre blocks not being wrapped correctly.
-- Added workaround for non-default message types.
+- Added workaround for non-default message types.

Directory.Build.props

@@ -2,7 +2,7 @@
 
   <PropertyGroup>
     <TargetFramework>net6.0</TargetFramework>
-    <Version>2.35.2</Version>
+    <Version>2.36.1</Version>
     <Company>Tyrrrz</Company>
     <Copyright>Copyright (c) Oleksii Holub</Copyright>
     <LangVersion>preview</LangVersion>

DiscordChatExporter.Cli.Tests/Specs/HtmlWriting/EmbedSpecs.cs

@@ -54,8 +54,9 @@ public class EmbedSpecs : IClassFixture<ExportWrapperFixture>
         message
             .QuerySelectorAll("img")
             .Select(e => e.GetAttribute("src"))
+            .Where(s => s?.EndsWith("i.redd.it/f8w05ja8s4e61.png") ?? false)
             .Should()
-            .Contain("https://i.redd.it/f8w05ja8s4e61.png");
+            .ContainSingle();
     }
 
     [Fact]
@@ -74,6 +75,38 @@ public class EmbedSpecs : IClassFixture<ExportWrapperFixture>
         content.Should().BeNullOrEmpty();
     }
 
+    [Fact]
+    public async Task Message_containing_a_gifv_link_is_rendered_with_a_video_embed()
+    {
+        // Act
+        var message = await _exportWrapper.GetMessageAsHtmlAsync(
+            ChannelIds.EmbedTestCases,
+            Snowflake.Parse("1019234520349814794")
+        );
+
+        // Assert
+        message
+            .QuerySelectorAll("source")
+            .Select(e => e.GetAttribute("src"))
+            .Where(s => s?.EndsWith("media.tenor.com/DDAJeW6BQKkAAAPo/tooncasm-test-copy.mp4") ?? false)
+            .Should()
+            .ContainSingle();
+    }
+
+    [Fact]
+    public async Task Message_containing_a_gifv_link_and_nothing_else_is_rendered_without_text_content()
+    {
+        // Act
+        var message = await _exportWrapper.GetMessageAsHtmlAsync(
+            ChannelIds.EmbedTestCases,
+            Snowflake.Parse("1019234520349814794")
+        );
+
+        // Assert
+        var content = message.QuerySelector(".chatlog__content")?.Text();
+        content.Should().BeNullOrEmpty();
+    }
+
     [Fact]
     public async Task Message_containing_a_Spotify_track_link_is_rendered_with_a_track_embed()
     {

DiscordChatExporter.Cli/Commands/Base/ExportCommandBase.cs

@@ -121,7 +121,8 @@ public abstract class ExportCommandBase : TokenCommandBase
         if (!isValidOutputPath)
         {
             throw new CommandException(
-                "Attempted to export multiple channels, but the output path is neither a directory nor a template."
+                "Attempted to export multiple channels, but the output path is neither a directory nor a template. " +
+                "If the provided output path is meant to be treated as a directory, make sure it ends with a slash."
             );
         }
 

DiscordChatExporter.Core/Discord/Data/Embeds/Embed.cs

@@ -11,6 +11,7 @@ namespace DiscordChatExporter.Core.Discord.Data.Embeds;
 // https://discord.com/developers/docs/resources/channel#embed-object
 public partial record Embed(
     string? Title,
+    EmbedKind Kind,
     string? Url,
     DateTimeOffset? Timestamp,
     Color? Color,
@@ -19,11 +20,9 @@ public partial record Embed(
     IReadOnlyList<EmbedField> Fields,
     EmbedImage? Thumbnail,
     IReadOnlyList<EmbedImage> Images,
+    EmbedVideo? Video,
     EmbedFooter? Footer)
 {
-    public PlainImageEmbedProjection? TryGetPlainImage() =>
-        PlainImageEmbedProjection.TryResolve(this);
-
     public SpotifyTrackEmbedProjection? TryGetSpotifyTrack() =>
         SpotifyTrackEmbedProjection.TryResolve(this);
 
@@ -36,9 +35,20 @@ public partial record Embed
     public static Embed Parse(JsonElement json)
     {
         var title = json.GetPropertyOrNull("title")?.GetStringOrNull();
+
+        var kind =
+            json.GetPropertyOrNull("type")?.GetStringOrNull()?.ParseEnumOrNull<EmbedKind>() ??
+            EmbedKind.Rich;
+
         var url = json.GetPropertyOrNull("url")?.GetNonWhiteSpaceStringOrNull();
         var timestamp = json.GetPropertyOrNull("timestamp")?.GetDateTimeOffset();
-        var color = json.GetPropertyOrNull("color")?.GetInt32OrNull()?.Pipe(System.Drawing.Color.FromArgb).ResetAlpha();
+
+        var color = json
+            .GetPropertyOrNull("color")?
+            .GetInt32OrNull()?
+            .Pipe(System.Drawing.Color.FromArgb)
+            .ResetAlpha();
+
         var author = json.GetPropertyOrNull("author")?.Pipe(EmbedAuthor.Parse);
         var description = json.GetPropertyOrNull("description")?.GetStringOrNull();
 
@@ -59,10 +69,13 @@ public partial record Embed
             json.GetPropertyOrNull("image")?.Pipe(EmbedImage.Parse).Enumerate().ToArray() ??
             Array.Empty<EmbedImage>();
 
+        var video = json.GetPropertyOrNull("video")?.Pipe(EmbedVideo.Parse);
+
         var footer = json.GetPropertyOrNull("footer")?.Pipe(EmbedFooter.Parse);
 
         return new Embed(
             title,
+            kind,
             url,
             timestamp,
             color,
@@ -71,6 +84,7 @@ public partial record Embed
             fields,
             thumbnail,
             images,
+            video,
             footer
         );
     }

DiscordChatExporter.Core/Discord/Data/Embeds/EmbedKind.cs

@@ -0,0 +1,11 @@
+namespace DiscordChatExporter.Core.Discord.Data.Embeds;
+
+// https://discord.com/developers/docs/resources/channel#embed-object-embed-types
+public enum EmbedKind
+{
+    Rich,
+    Image,
+    Video,
+    Gifv,
+    Link
+}

DiscordChatExporter.Core/Discord/Data/Embeds/EmbedVideo.cs

@@ -0,0 +1,22 @@
+using JsonExtensions.Reading;
+using System.Text.Json;
+
+namespace DiscordChatExporter.Core.Discord.Data.Embeds;
+
+// https://discord.com/developers/docs/resources/channel#embed-object-embed-video-structure
+public record EmbedVideo(
+    string? Url,
+    string? ProxyUrl,
+    int? Width,
+    int? Height)
+{
+    public static EmbedVideo Parse(JsonElement json)
+    {
+        var url = json.GetPropertyOrNull("url")?.GetNonWhiteSpaceStringOrNull();
+        var proxyUrl = json.GetPropertyOrNull("proxy_url")?.GetNonWhiteSpaceStringOrNull();
+        var width = json.GetPropertyOrNull("width")?.GetInt32OrNull();
+        var height = json.GetPropertyOrNull("height")?.GetInt32OrNull();
+
+        return new EmbedVideo(url, proxyUrl, width, height);
+    }
+}

DiscordChatExporter.Core/Discord/Data/Embeds/PlainImageEmbedProjection.cs

@@ -1,33 +0,0 @@
-using System.IO;
-using System.Linq;
-using System.Text.RegularExpressions;
-using DiscordChatExporter.Core.Utils;
-
-namespace DiscordChatExporter.Core.Discord.Data.Embeds;
-
-public record PlainImageEmbedProjection(string Url)
-{
-    public static PlainImageEmbedProjection? TryResolve(Embed embed)
-    {
-        if (string.IsNullOrWhiteSpace(embed.Url))
-            return null;
-
-        // Has to be an embed without any data (except URL and image)
-        if (!string.IsNullOrWhiteSpace(embed.Title) ||
-            embed.Timestamp is not null ||
-            embed.Author is not null ||
-            !string.IsNullOrWhiteSpace(embed.Description) ||
-            embed.Fields.Any() ||
-            embed.Footer is not null)
-        {
-            return null;
-        }
-
-        // Has to be an image file
-        var fileName = Regex.Match(embed.Url, @".+/([^?]*)").Groups[1].Value;
-        if (string.IsNullOrWhiteSpace(fileName) || !FileFormat.IsImage(Path.GetExtension(fileName)))
-            return null;
-
-        return new PlainImageEmbedProjection(embed.Url);
-    }
-}

DiscordChatExporter.Core/Discord/Data/Embeds/SpotifyTrackEmbedProjection.cs

@@ -21,6 +21,9 @@ public partial record SpotifyTrackEmbedProjection
 
     public static SpotifyTrackEmbedProjection? TryResolve(Embed embed)
     {
+        if (embed.Kind != EmbedKind.Link)
+            return null;
+
         if (string.IsNullOrWhiteSpace(embed.Url))
             return null;
 

DiscordChatExporter.Core/Discord/Data/Embeds/YouTubeVideoEmbedProjection.cs

@@ -42,6 +42,9 @@ public partial record YouTubeVideoEmbedProjection
 
     public static YouTubeVideoEmbedProjection? TryResolve(Embed embed)
     {
+        if (embed.Kind != EmbedKind.Video)
+            return null;
+
         if (string.IsNullOrWhiteSpace(embed.Url))
             return null;
 

DiscordChatExporter.Core/Discord/Data/Message.cs

@@ -10,7 +10,7 @@ using JsonExtensions.Reading;
 namespace DiscordChatExporter.Core.Discord.Data;
 
 // https://discord.com/developers/docs/resources/channel#message-object
-public record Message(
+public partial record Message(
     Snowflake Id,
     MessageKind Kind,
     User Author,
@@ -26,6 +26,16 @@ public record Message(
     IReadOnlyList<User> MentionedUsers,
     MessageReference? Reference,
     Message? ReferencedMessage) : IHasId
+{
+    public bool IsEmpty =>
+        Kind == MessageKind.Default &&
+        string.IsNullOrEmpty(Content) &&
+        !Attachments.Any() &&
+        !Embeds.Any() &&
+        !Stickers.Any();
+}
+
+public partial record Message
 {
     private static IReadOnlyList<Embed> NormalizeEmbeds(IReadOnlyList<Embed> embeds)
     {
@@ -44,7 +54,7 @@ public record Message(
         {
             var embed = embeds[i];
 
-            if (embed.Url?.Contains("://twitter.com/") == true)
+            if (embed.Url?.Contains("://twitter.com/", StringComparison.OrdinalIgnoreCase) == true)
             {
                 // Find embeds with the same URL that only contain a single image and nothing else
                 var trailingEmbeds = embeds
@@ -107,6 +117,7 @@ public record Message(
             MessageKind.ChannelNameChange => "Changed the channel name.",
             MessageKind.ChannelIconChange => "Changed the channel icon.",
             MessageKind.ChannelPinnedMessage => "Pinned a message.",
+            MessageKind.ThreadCreated => "Started a thread.",
             MessageKind.GuildMemberJoin => "Joined the server.",
             _ => json.GetPropertyOrNull("content")?.GetStringOrNull() ?? ""
         };

DiscordChatExporter.Core/Discord/Data/MessageKind.cs

@@ -11,5 +11,11 @@ public enum MessageKind
     ChannelIconChange = 5,
     ChannelPinnedMessage = 6,
     GuildMemberJoin = 7,
+    ThreadCreated = 18,
     Reply = 19
+}
+
+public static class MessageKindExtensions
+{
+    public static bool IsSystemNotification(this MessageKind c) => (int)c is >= 1 and <= 18;
 }

DiscordChatExporter.Core/Discord/DiscordClient.cs

@@ -22,65 +22,67 @@ public class DiscordClient
     private readonly string _token;
     private readonly Uri _baseUri = new("https://discord.com/api/v9/", UriKind.Absolute);
 
-    private TokenKind _tokenKind = TokenKind.Unknown;
+    private TokenKind? _resolvedTokenKind;
 
     public DiscordClient(string token) => _token = token;
 
     private async ValueTask<HttpResponseMessage> GetResponseAsync(
         string url,
-        bool isBot,
+        TokenKind tokenKind,
         CancellationToken cancellationToken = default)
     {
-        using var request = new HttpRequestMessage(HttpMethod.Get, new Uri(_baseUri, url));
+        return await Http.ResponseResiliencePolicy.ExecuteAsync(async innerCancellationToken =>
+        {
+            using var request = new HttpRequestMessage(HttpMethod.Get, new Uri(_baseUri, url));
 
-        // Don't validate because token can have invalid characters
-        // https://github.com/Tyrrrz/DiscordChatExporter/issues/828
-        request.Headers.TryAddWithoutValidation(
-            "Authorization",
-            isBot ? $"Bot {_token}" : _token
-        );
+            // Don't validate because token can have invalid characters
+            // https://github.com/Tyrrrz/DiscordChatExporter/issues/828
+            request.Headers.TryAddWithoutValidation(
+                "Authorization",
+                tokenKind == TokenKind.Bot
+                    ? $"Bot {_token}"
+                    : _token
+            );
 
-        return await Http.Client.SendAsync(
-            request,
-            HttpCompletionOption.ResponseHeadersRead,
+            return await Http.Client.SendAsync(
+                request,
+                HttpCompletionOption.ResponseHeadersRead,
+                innerCancellationToken
+            );
+        }, cancellationToken);
+    }
+
+    private async ValueTask<TokenKind> GetTokenKindAsync(CancellationToken cancellationToken = default)
+    {
+        // Try authenticating as a user
+        using var userResponse = await GetResponseAsync(
+            "users/@me",
+            TokenKind.User,
             cancellationToken
         );
+
+        if (userResponse.StatusCode != HttpStatusCode.Unauthorized)
+            return TokenKind.User;
+
+        // Try authenticating as a bot
+        using var botResponse = await GetResponseAsync(
+            "users/@me",
+            TokenKind.Bot,
+            cancellationToken
+        );
+
+        if (botResponse.StatusCode != HttpStatusCode.Unauthorized)
+            return TokenKind.Bot;
+
+        throw DiscordChatExporterException.Unauthorized();
     }
 
     private async ValueTask<HttpResponseMessage> GetResponseAsync(
         string url,
         CancellationToken cancellationToken = default)
     {
-        return await Http.ResponseResiliencePolicy.ExecuteAsync(async innerCancellationToken =>
-        {
-            if (_tokenKind == TokenKind.User)
-                return await GetResponseAsync(url, false, innerCancellationToken);
-
-            if (_tokenKind == TokenKind.Bot)
-                return await GetResponseAsync(url, true, innerCancellationToken);
-
-            // Try to authenticate as user
-            var userResponse = await GetResponseAsync(url, false, innerCancellationToken);
-            if (userResponse.StatusCode != HttpStatusCode.Unauthorized)
-            {
-                _tokenKind = TokenKind.User;
-                return userResponse;
-            }
-
-            userResponse.Dispose();
-
-            // Otherwise, try to authenticate as bot
-            var botResponse = await GetResponseAsync(url, true, innerCancellationToken);
-            if (botResponse.StatusCode != HttpStatusCode.Unauthorized)
-            {
-                _tokenKind = TokenKind.Bot;
-                return botResponse;
-            }
-
-            // The token is probably invalid altogether.
-            // Return the last response anyway, upstream should handle the error.
-            return botResponse;
-        }, cancellationToken);
+        var tokenKind = _resolvedTokenKind ??= await GetTokenKindAsync(cancellationToken);
+        return await GetResponseAsync(url, tokenKind, cancellationToken);
     }
 
     private async ValueTask<JsonElement> GetJsonResponseAsync(
@@ -321,6 +323,11 @@ public class DiscordClient
                 if (message.Timestamp > lastMessage.Timestamp)
                     yield break;
 
+                // Make sure the messages are not empty when exporting via a bot
+                // https://github.com/Tyrrrz/DiscordChatExporter/issues/918
+                if (_resolvedTokenKind == TokenKind.Bot && message.IsEmpty && !message.Author.IsBot)
+                    throw DiscordChatExporterException.MessageContentIntentMissing();
+
                 // Report progress based on the duration of exported messages divided by total
                 if (progress is not null)
                 {

DiscordChatExporter.Core/Discord/TokenKind.cs

@@ -2,7 +2,6 @@
 
 public enum TokenKind
 {
-    Unknown,
     User,
     Bot
 }

DiscordChatExporter.Core/DiscordChatExporter.Core.csproj

@@ -7,7 +7,7 @@
   <ItemGroup>
     <PackageReference Include="Gress" Version="2.0.1" />
     <PackageReference Include="JsonExtensions" Version="1.2.0" />
-    <PackageReference Include="MiniRazor.CodeGen" Version="2.2.1" />
+    <PackageReference Include="MiniRazor.CodeGen" Version="2.2.2" />
     <PackageReference Include="Polly" Version="7.2.3" />
     <PackageReference Include="Superpower" Version="3.0.0" />
     <PackageReference Include="WebMarkupMin.Core" Version="2.12.0" />

DiscordChatExporter.Core/Exceptions/DiscordChatExporterException.cs

@@ -41,4 +41,7 @@ Failed to perform an HTTP request.
 
     internal static DiscordChatExporterException ChannelIsEmpty() =>
         new("No messages found for the specified period.");
+
+    internal static DiscordChatExporterException MessageContentIntentMissing() =>
+        new("Failed to retrieve message content because the bot doesn't have the Message Content Intent enabled.");
 }

DiscordChatExporter.Core/Exporting/ExportContext.cs

@@ -42,7 +42,7 @@ internal class ExportContext
     {
         "unix" => date.ToUnixTimeSeconds().ToString(),
         "unixms" => date.ToUnixTimeMilliseconds().ToString(),
-        var dateFormat => date.ToLocalString(dateFormat)
+        var format => date.ToLocalString(format)
     };
 
     public Member? TryGetMember(Snowflake id) => Members.FirstOrDefault(m => m.Id == id);

DiscordChatExporter.Core/Exporting/Writers/Html/MessageExtensions.cs

@@ -0,0 +1,22 @@
+using System;
+using DiscordChatExporter.Core.Discord.Data;
+using DiscordChatExporter.Core.Discord.Data.Embeds;
+
+namespace DiscordChatExporter.Core.Exporting.Writers.Html;
+
+internal static class MessageExtensions
+{
+    // Message content is hidden if it's a link to an embedded media
+    // https://github.com/Tyrrrz/DiscordChatExporter/issues/682
+    public static bool IsContentHidden(this Message message)
+    {
+        if (message.Embeds.Count != 1)
+            return false;
+
+        var embed = message.Embeds[0];
+
+        return
+            string.Equals(message.Content.Trim(), embed.Url, StringComparison.OrdinalIgnoreCase) &&
+            embed.Kind is EmbedKind.Image or EmbedKind.Gifv;
+    }
+}

DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml

@@ -10,8 +10,6 @@
 @inherits MiniRazor.TemplateBase<MessageGroupTemplateContext>
 
 @{
-    var firstMessage = Model.Messages.First();
-
     ValueTask<string> ResolveUrlAsync(string url) => Model.ExportContext.ResolveMediaUrlAsync(url);
 
     string FormatDate(DateTimeOffset date) => Model.ExportContext.FormatDate(date);
@@ -20,6 +18,8 @@
 
     string FormatEmbedMarkdown(string markdown) => Model.FormatMarkdown(markdown, false);
 
+    var firstMessage = Model.Messages.First();
+
     var userMember = Model.ExportContext.TryGetMember(firstMessage.Author.Id);
 
     var userColor = Model.ExportContext.TryGetUserColor(firstMessage.Author.Id);
@@ -48,438 +48,478 @@
 {
     var isFirst = i == 0;
 
-    // Hide message content if it only contains a link to an image which is embedded, and nothing else
-    var isContentHidden =
-        message.Embeds.Count == 1 &&
-        message.Content.Trim() == PlainImageEmbedProjection.TryResolve(message.Embeds.Single())?.Url;
-
-    var isReferencedContentHidden =
-        message.ReferencedMessage is not null &&
-        message.ReferencedMessage.Embeds.Count == 1 &&
-        message.ReferencedMessage.Content.Trim() == PlainImageEmbedProjection.TryResolve(message.ReferencedMessage.Embeds.Single())?.Url;
-
     <div id="chatlog__message-container-@message.Id" class="chatlog__message-container @(message.IsPinned ? "chatlog__message-container--pinned" : null)" data-message-id="@message.Id">
         <div class="chatlog__message">
-            @{/* Left side */}
-            <div class="chatlog__message-aside">
-                @if (isFirst)
-                {
-                    // Reference symbol
-                    if (message.Reference is not null)
-                    {
-                        <div class="chatlog__reference-symbol"></div>
-                    }
+            @{/* System notification */}
+            @if (message.Kind.IsSystemNotification())
+            {
+                // System notifications are grouped even if the message author is different.
+                // That's why we have to update the user values with the author of the current message.
+                userMember = Model.ExportContext.TryGetMember(message.Author.Id);
+                userColor = Model.ExportContext.TryGetUserColor(message.Author.Id);
+                userNick = message.Author.IsBot
+                    ? message.Author.Name
+                    : userMember?.Nick ?? message.Author.Name;
 
-                    // Avatar
-                    <img class="chatlog__avatar" src="@await ResolveUrlAsync(message.Author.AvatarUrl)" alt="Avatar" loading="lazy">
-                }
-                else
-                {
-                    <div class="chatlog__short-timestamp" title="@FormatDate(message.Timestamp)">@message.Timestamp.ToLocalString("t")</div>
-                }
-            </div>
+                <div class="chatlog__message-aside">
+                    <svg class="chatlog__system-notification-icon"><use href="#@message.Kind.ToString().ToDashCase().ToLowerInvariant()-icon"></use></svg>
+                </div>
 
-            @{/* Right side */}
-            <div class="chatlog__message-primary">
-                @if (isFirst)
-                {
-                    // Reference
-                    if (message.Reference is not null)
-                    {
-                        <div class="chatlog__reference">
-                            @if (message.ReferencedMessage is not null)
-                            {
-                                <img class="chatlog__reference-avatar" src="@await ResolveUrlAsync(message.ReferencedMessage.Author.AvatarUrl)" alt="Avatar" loading="lazy">
-                                <div class="chatlog__reference-author" style="@(referencedUserColor is not null ? $"color: rgb({referencedUserColor.Value.R}, {referencedUserColor.Value.G}, {referencedUserColor.Value.B})" : null)" title="@message.ReferencedMessage.Author.FullName">@referencedUserNick</div>
-                                <div class="chatlog__reference-content">
-                                    <span class="chatlog__reference-link" onclick="scrollToMessage(event, '@message.ReferencedMessage.Id')">
-                                        @if (!string.IsNullOrWhiteSpace(message.ReferencedMessage.Content) && !isReferencedContentHidden)
-                                        {
-                                            <!--wmm:ignore-->@Raw(FormatEmbedMarkdown(message.ReferencedMessage.Content))<!--/wmm:ignore-->
-                                        }
-                                        else if (message.ReferencedMessage.Attachments.Any() || message.ReferencedMessage.Embeds.Any())
-                                        {
-                                            <em>Click to see attachment</em>
-                                            <span>🖼️</span>
-                                        }
-                                        else
-                                        {
-                                            <em>Click to see original message</em>
-                                        }
-                                    </span>
+                <div class="chatlog__message-primary">
+                    @{/* Author name */}
+                    <span class="chatlog__system-notification-author" style="@(userColor is not null ? $"color: rgb({userColor.Value.R}, {userColor.Value.G}, {userColor.Value.B})" : null)" title="@message.Author.FullName" data-user-id="@message.Author.Id">@userNick</span>
 
-                                    @if (message.ReferencedMessage.EditedTimestamp is not null)
-                                    {
-                                        <span class="chatlog__reference-edited-timestamp" title="@FormatDate(message.ReferencedMessage.EditedTimestamp.Value)">(edited)</span>
-                                    }
-                                </div>
-                            }
-                            else
-                            {
-                                <div class="chatlog__reference-unknown">
-                                    Original message was deleted or could not be loaded.
-                                </div>
-                            }
-                        </div>
-                    }
-
-                    // Header
-                    <div class="chatlog__header">
-                        @{/* Author name */}
-                        <span class="chatlog__author" style="@(userColor is not null ? $"color: rgb({userColor.Value.R}, {userColor.Value.G}, {userColor.Value.B})" : null)" title="@message.Author.FullName" data-user-id="@message.Author.Id">@userNick</span>
-
-                        @{/* Bot label */}
-                        @if (message.Author.IsBot)
+                    @{/* System notification content */}
+                    <span class="chatlog__system-notification-content">
+                        @if (message.Kind == MessageKind.ChannelPinnedMessage && message.Reference is not null)
                         {
-                            <span class="chatlog__bot-label">BOT</span>
-                        }
-
-                        @{/* Timestamp */}
-                        <span class="chatlog__timestamp"><a href="#chatlog__message-container-@message.Id">@FormatDate(message.Timestamp)</a></span>
-                    </div>
-                }
-
-                @{/* Content */}
-                @if (!string.IsNullOrWhiteSpace(message.Content) || message.EditedTimestamp is not null)
-                {
-                    <div class="chatlog__content chatlog__markdown">
-                        @{/* Text */}
-                        @if (!isContentHidden)
-                        {
-                            <span class="chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatMarkdown(message.Content))<!--/wmm:ignore--></span>
-                        }
-
-                        @{/* Edited timestamp */}
-                        @if (message.EditedTimestamp is not null)
-                        {
-                            <span class="chatlog__edited-timestamp" title="@FormatDate(message.EditedTimestamp.Value)">(edited)</span>
-                        }
-                    </div>
-                }
-
-                @{/* Attachments */}
-                @foreach (var attachment in message.Attachments)
-                {
-                    <div class="chatlog__attachment @(attachment.IsSpoiler ? "chatlog__attachment--hidden" : null)" onclick="@(attachment.IsSpoiler ? "showSpoiler(event, this)" : null)">
-                        @{/* Spoiler caption */}
-                        @if (attachment.IsSpoiler)
-                        {
-                            <div class="chatlog__attachment-spoiler-caption">SPOILER</div>
-                        }
-
-                        @{/* Attachment preview */}
-                        @if (attachment.IsImage)
-                        {
-                            <a href="@await ResolveUrlAsync(attachment.Url)">
-                                <img class="chatlog__attachment-media" src="@await ResolveUrlAsync(attachment.Url)" alt="@(attachment.Description ?? "Image attachment")" title="Image: @attachment.FileName (@attachment.FileSize)" loading="lazy">
-                            </a>
-                        }
-                        else if (attachment.IsVideo)
-                        {
-                            <video class="chatlog__attachment-media" controls>
-                                <source src="@await ResolveUrlAsync(attachment.Url)" alt="@(attachment.Description ?? "Video attachment")" title="Video: @attachment.FileName (@attachment.FileSize)">
-                            </video>
-                        }
-                        else if (attachment.IsAudio)
-                        {
-                            <audio class="chatlog__attachment-media" controls>
-                                <source src="@await ResolveUrlAsync(attachment.Url)" alt="@(attachment.Description ?? "Audio attachment")" title="Audio: @attachment.FileName (@attachment.FileSize)">
-                            </audio>
+                            <span> pinned</span>
+                            <a class="chatlog__system-notification-link" href="#chatlog__message-container-@message.Reference.MessageId"> a message</a>
+                            <span> to this channel.</span>
                         }
                         else
                         {
-                            <div class="chatlog__attachment-generic">
-                                <svg class="chatlog__attachment-generic-icon">
-                                    <use href="#attachment-icon"/>
-                                </svg>
-                                <div class="chatlog__attachment-generic-name">
-                                    <a href="@await ResolveUrlAsync(attachment.Url)">
-                                        @attachment.FileName
-                                    </a>
-                                </div>
-                                <div class="chatlog__attachment-generic-size">
-                                    @attachment.FileSize
-                                </div>
+                            <span>@message.Content.ToLowerInvariant()</span>
+                        }
+                    </span>
+
+                    @{/* Timestamp */}
+                    <span class="chatlog__system-notification-timestamp">
+                        <a href="#chatlog__message-container-@message.Id">@FormatDate(message.Timestamp)</a>
+                    </span>
+                </div>
+            }
+            // Regular message
+            else
+            {
+                <div class="chatlog__message-aside">
+                    @if (isFirst)
+                    {
+                        // Reference symbol
+                        if (message.Reference is not null)
+                        {
+                            <div class="chatlog__reference-symbol"></div>
+                        }
+
+                        // Avatar
+                        <img class="chatlog__avatar" src="@await ResolveUrlAsync(message.Author.AvatarUrl)" alt="Avatar" loading="lazy">
+                    }
+                    else
+                    {
+                        <div class="chatlog__short-timestamp" title="@FormatDate(message.Timestamp)">@message.Timestamp.ToLocalString("t")</div>
+                    }
+                </div>
+
+                <div class="chatlog__message-primary">
+                    @if (isFirst)
+                    {
+                        // Reference
+                        if (message.Reference is not null)
+                        {
+                            <div class="chatlog__reference">
+                                @if (message.ReferencedMessage is not null)
+                                {
+                                    <img class="chatlog__reference-avatar" src="@await ResolveUrlAsync(message.ReferencedMessage.Author.AvatarUrl)" alt="Avatar" loading="lazy">
+                                    <div class="chatlog__reference-author" style="@(referencedUserColor is not null ? $"color: rgb({referencedUserColor.Value.R}, {referencedUserColor.Value.G}, {referencedUserColor.Value.B})" : null)" title="@message.ReferencedMessage.Author.FullName">@referencedUserNick</div>
+                                    <div class="chatlog__reference-content">
+                                        <span class="chatlog__reference-link" onclick="scrollToMessage(event, '@message.ReferencedMessage.Id')">
+                                            @if (!string.IsNullOrWhiteSpace(message.ReferencedMessage.Content) && !message.ReferencedMessage.IsContentHidden())
+                                            {
+                                                <!--wmm:ignore-->@Raw(FormatEmbedMarkdown(message.ReferencedMessage.Content))<!--/wmm:ignore-->
+                                            }
+                                            else if (message.ReferencedMessage.Attachments.Any() || message.ReferencedMessage.Embeds.Any())
+                                            {
+                                                <em>Click to see attachment</em>
+                                                <span>🖼️</span>
+                                            }
+                                            else
+                                            {
+                                                <em>Click to see original message</em>
+                                            }
+                                        </span>
+
+                                        @if (message.ReferencedMessage.EditedTimestamp is not null)
+                                        {
+                                            <span class="chatlog__reference-edited-timestamp" title="@FormatDate(message.ReferencedMessage.EditedTimestamp.Value)">(edited)</span>
+                                        }
+                                    </div>
+                                }
+                                else
+                                {
+                                    <div class="chatlog__reference-unknown">
+                                        Original message was deleted or could not be loaded.
+                                    </div>
+                                }
                             </div>
                         }
-                    </div>
-                }
 
-                @{/* Embeds */}
-                @foreach (var embed in message.Embeds)
-                {
-                    // Plain image embed
-                    if (embed.TryGetPlainImage() is { } plainImageEmbed)
-                    {
-                        <div class="chatlog__embed">
-                            <a href="@await ResolveUrlAsync(plainImageEmbed.Url)">
-                                <img class="chatlog__embed-plainimage" src="@await ResolveUrlAsync(plainImageEmbed.Url)" alt="Embedded image" loading="lazy">
-                            </a>
-                        </div>
-                    }
-                    // Spotify embed
-                    else if (embed.TryGetSpotifyTrack() is { } spotifyTrackEmbed)
-                    {
-                        <div class="chatlog__embed">
-                            <div class="chatlog__embed-spotify-container">
-                                <iframe class="chatlog__embed-spotify" src="@spotifyTrackEmbed.Url" width="400" height="80" allowtransparency="true" allow="encrypted-media"></iframe>
-                            </div>
-                        </div>
-                    }
-                    // YouTube embed
-                    else if (embed.TryGetYouTubeVideo() is { } youTubeVideoEmbed)
-                    {
-                        <div class="chatlog__embed">
-                            @{/* Color pill */}
-                            @if (embed.Color is not null)
+                        // Header
+                        <div class="chatlog__header">
+                            @{/* Author name */}
+                            <span class="chatlog__author" style="@(userColor is not null ? $"color: rgb({userColor.Value.R}, {userColor.Value.G}, {userColor.Value.B})" : null)" title="@message.Author.FullName" data-user-id="@message.Author.Id">@userNick</span>
+
+                            @{/* Bot label */}
+                            @if (message.Author.IsBot)
                             {
-                                <div class="chatlog__embed-color-pill" style="background-color: rgba(@embed.Color.Value.R, @embed.Color.Value.G, @embed.Color.Value.B, @embed.Color.Value.A)"></div>
+                                <span class="chatlog__bot-label">BOT</span>
+                            }
+
+                            @{/* Timestamp */}
+                            <span class="chatlog__timestamp"><a href="#chatlog__message-container-@message.Id">@FormatDate(message.Timestamp)</a></span>
+                        </div>
+                    }
+
+                    @{/* Content */}
+                    @if ((!string.IsNullOrWhiteSpace(message.Content) && !message.IsContentHidden()) || message.EditedTimestamp is not null)
+                    {
+                        <div class="chatlog__content chatlog__markdown">
+                            @{/* Text */}
+                            @if (!string.IsNullOrWhiteSpace(message.Content) && !message.IsContentHidden())
+                            {
+                                <span class="chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatMarkdown(message.Content))<!--/wmm:ignore--></span>
+                            }
+
+                            @{/* Edited timestamp */}
+                            @if (message.EditedTimestamp is not null)
+                            {
+                                <span class="chatlog__edited-timestamp" title="@FormatDate(message.EditedTimestamp.Value)">(edited)</span>
+                            }
+                        </div>
+                    }
+
+                    @{/* Attachments */}
+                    @foreach (var attachment in message.Attachments)
+                    {
+                        <div class="chatlog__attachment @(attachment.IsSpoiler ? "chatlog__attachment--hidden" : null)" onclick="@(attachment.IsSpoiler ? "showSpoiler(event, this)" : null)">
+                            @{/* Spoiler caption */}
+                            @if (attachment.IsSpoiler)
+                            {
+                                <div class="chatlog__attachment-spoiler-caption">SPOILER</div>
+                            }
+
+                            @{/* Attachment preview */}
+                            @if (attachment.IsImage)
+                            {
+                                <a href="@await ResolveUrlAsync(attachment.Url)">
+                                    <img class="chatlog__attachment-media" src="@await ResolveUrlAsync(attachment.Url)" alt="@(attachment.Description ?? "Image attachment")" title="Image: @attachment.FileName (@attachment.FileSize)" loading="lazy">
+                                </a>
+                            }
+                            else if (attachment.IsVideo)
+                            {
+                                <video class="chatlog__attachment-media" controls>
+                                    <source src="@await ResolveUrlAsync(attachment.Url)" alt="@(attachment.Description ?? "Video attachment")" title="Video: @attachment.FileName (@attachment.FileSize)">
+                                </video>
+                            }
+                            else if (attachment.IsAudio)
+                            {
+                                <audio class="chatlog__attachment-media" controls>
+                                    <source src="@await ResolveUrlAsync(attachment.Url)" alt="@(attachment.Description ?? "Audio attachment")" title="Audio: @attachment.FileName (@attachment.FileSize)">
+                                </audio>
                             }
                             else
                             {
-                                <div class="chatlog__embed-color-pill chatlog__embed-color-pill--default"></div>
+                                <div class="chatlog__attachment-generic">
+                                    <svg class="chatlog__attachment-generic-icon">
+                                        <use href="#attachment-icon"/>
+                                    </svg>
+                                    <div class="chatlog__attachment-generic-name">
+                                        <a href="@await ResolveUrlAsync(attachment.Url)">
+                                            @attachment.FileName
+                                        </a>
+                                    </div>
+                                    <div class="chatlog__attachment-generic-size">
+                                        @attachment.FileSize
+                                    </div>
+                                </div>
                             }
+                        </div>
+                    }
 
-                            <div class="chatlog__embed-content-container">
-                                <div class="chatlog__embed-content">
-                                    <div class="chatlog__embed-text">
-                                        @{/* Embed author */}
-                                        @if (embed.Author is not null)
-                                        {
-                                            <div class="chatlog__embed-author-container">
-                                                @if (!string.IsNullOrWhiteSpace(embed.Author.IconUrl))
-                                                {
-                                                    <img class="chatlog__embed-author-icon" src="@await ResolveUrlAsync(embed.Author.IconProxyUrl ?? embed.Author.IconUrl)" alt="Author icon" loading="lazy" onerror="this.style.visibility='hidden'">
-                                                }
+                    @{/* Embeds */}
+                    @foreach (var embed in message.Embeds)
+                    {
+                        // Spotify embed
+                        if (embed.TryGetSpotifyTrack() is { } spotifyTrackEmbed)
+                        {
+                            <div class="chatlog__embed">
+                                <div class="chatlog__embed-spotify-container">
+                                    <iframe class="chatlog__embed-spotify" src="@spotifyTrackEmbed.Url" width="400" height="80" allowtransparency="true" allow="encrypted-media"></iframe>
+                                </div>
+                            </div>
+                        }
+                        // YouTube embed
+                        else if (embed.TryGetYouTubeVideo() is { } youTubeVideoEmbed)
+                        {
+                            <div class="chatlog__embed">
+                                @{/* Color pill */}
+                                @if (embed.Color is not null)
+                                {
+                                    <div class="chatlog__embed-color-pill" style="background-color: rgba(@embed.Color.Value.R, @embed.Color.Value.G, @embed.Color.Value.B, @embed.Color.Value.A)"></div>
+                                }
+                                else
+                                {
+                                    <div class="chatlog__embed-color-pill chatlog__embed-color-pill--default"></div>
+                                }
 
-                                                @if (!string.IsNullOrWhiteSpace(embed.Author.Name))
-                                                {
-                                                    if (!string.IsNullOrWhiteSpace(embed.Author.Url))
+                                <div class="chatlog__embed-content-container">
+                                    <div class="chatlog__embed-content">
+                                        <div class="chatlog__embed-text">
+                                            @{/* Embed author */}
+                                            @if (embed.Author is not null)
+                                            {
+                                                <div class="chatlog__embed-author-container">
+                                                    @if (!string.IsNullOrWhiteSpace(embed.Author.IconUrl))
                                                     {
-                                                        <a class="chatlog__embed-author-link" href="@embed.Author.Url">
+                                                        <img class="chatlog__embed-author-icon" src="@await ResolveUrlAsync(embed.Author.IconProxyUrl ?? embed.Author.IconUrl)" alt="Author icon" loading="lazy" onerror="this.style.visibility='hidden'">
+                                                    }
+
+                                                    @if (!string.IsNullOrWhiteSpace(embed.Author.Name))
+                                                    {
+                                                        if (!string.IsNullOrWhiteSpace(embed.Author.Url))
+                                                        {
+                                                            <a class="chatlog__embed-author-link" href="@embed.Author.Url">
+                                                                <div class="chatlog__embed-author">@embed.Author.Name</div>
+                                                            </a>
+                                                        }
+                                                        else
+                                                        {
                                                             <div class="chatlog__embed-author">@embed.Author.Name</div>
+                                                        }
+                                                    }
+                                                </div>
+                                            }
+
+                                            @{/* Embed title */}
+                                            @if (!string.IsNullOrWhiteSpace(embed.Title))
+                                            {
+                                                <div class="chatlog__embed-title">
+                                                    @if (!string.IsNullOrWhiteSpace(embed.Url))
+                                                    {
+                                                        <a class="chatlog__embed-title-link" href="@embed.Url">
+                                                            <div class="chatlog__markdown chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatEmbedMarkdown(embed.Title))<!--/wmm:ignore--></div>
                                                         </a>
                                                     }
                                                     else
                                                     {
-                                                        <div class="chatlog__embed-author">@embed.Author.Name</div>
-                                                    }
-                                                }
-                                            </div>
-                                        }
-
-                                        @{/* Embed title */}
-                                        @if (!string.IsNullOrWhiteSpace(embed.Title))
-                                        {
-                                            <div class="chatlog__embed-title">
-                                                @if (!string.IsNullOrWhiteSpace(embed.Url))
-                                                {
-                                                    <a class="chatlog__embed-title-link" href="@embed.Url">
                                                         <div class="chatlog__markdown chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatEmbedMarkdown(embed.Title))<!--/wmm:ignore--></div>
-                                                    </a>
-                                                }
-                                                else
-                                                {
-                                                    <div class="chatlog__markdown chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatEmbedMarkdown(embed.Title))<!--/wmm:ignore--></div>
-                                                }
-                                            </div>
-                                        }
+                                                    }
+                                                </div>
+                                            }
 
-                                        @{/* Video player */}
-                                        <div class="chatlog__embed-youtube-container">
-                                            <iframe class="chatlog__embed-youtube" src="@youTubeVideoEmbed.Url" width="400" height="225"></iframe>
+                                            @{/* Video player */}
+                                            <div class="chatlog__embed-youtube-container">
+                                                <iframe class="chatlog__embed-youtube" src="@youTubeVideoEmbed.Url" width="400" height="225"></iframe>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    }
-                    // Generic embed
-                    else
-                    {
-                        <div class="chatlog__embed">
-                            @{/* Color pill */}
-                            @if (embed.Color is not null)
-                            {
-                                <div class="chatlog__embed-color-pill" style="background-color: rgba(@embed.Color.Value.R, @embed.Color.Value.G, @embed.Color.Value.B, @embed.Color.Value.A)"></div>
-                            }
-                            else
-                            {
-                                <div class="chatlog__embed-color-pill chatlog__embed-color-pill--default"></div>
-                            }
+                        }
+                        // Generic image embed
+                        else if (embed.Kind == EmbedKind.Image && !string.IsNullOrWhiteSpace(embed.Url))
+                        {
+                            <div class="chatlog__embed">
+                                <a href="@await ResolveUrlAsync(embed.Url)">
+                                    <img class="chatlog__embed-generic-image" src="@await ResolveUrlAsync(embed.Url)" alt="Embedded image" loading="lazy">
+                                </a>
+                            </div>
+                        }
+                        // Generic gifv embed
+                        else if (embed.Kind == EmbedKind.Gifv && !string.IsNullOrWhiteSpace(embed.Video?.Url))
+                        {
+                            <div class="chatlog__embed">
+                                <video class="chatlog__embed-generic-gifv" loop width="@embed.Video.Width" height="@embed.Video.Height" onmouseover="this.play()" onmouseout="this.pause()">
+                                    <source src="@await ResolveUrlAsync(embed.Video.ProxyUrl ?? embed.Video.Url)" alt="Embedded video">
+                                </video>
+                            </div>
+                        }
+                        // Rich embed
+                        else
+                        {
+                            <div class="chatlog__embed">
+                                @{/* Color pill */}
+                                @if (embed.Color is not null)
+                                {
+                                    <div class="chatlog__embed-color-pill" style="background-color: rgba(@embed.Color.Value.R, @embed.Color.Value.G, @embed.Color.Value.B, @embed.Color.Value.A)"></div>
+                                }
+                                else
+                                {
+                                    <div class="chatlog__embed-color-pill chatlog__embed-color-pill--default"></div>
+                                }
 
-                            <div class="chatlog__embed-content-container">
-                                <div class="chatlog__embed-content">
-                                    <div class="chatlog__embed-text">
-                                        @{/* Embed author */}
-                                        @if (embed.Author is not null)
-                                        {
-                                            <div class="chatlog__embed-author-container">
-                                                @if (!string.IsNullOrWhiteSpace(embed.Author.IconUrl))
-                                                {
-                                                    <img class="chatlog__embed-author-icon" src="@await ResolveUrlAsync(embed.Author.IconProxyUrl ?? embed.Author.IconUrl)" alt="Author icon" loading="lazy" onerror="this.style.visibility='hidden'">
-                                                }
-
-                                                @if (!string.IsNullOrWhiteSpace(embed.Author.Name))
-                                                {
-                                                    if (!string.IsNullOrWhiteSpace(embed.Author.Url))
+                                <div class="chatlog__embed-content-container">
+                                    <div class="chatlog__embed-content">
+                                        <div class="chatlog__embed-text">
+                                            @{/* Embed author */}
+                                            @if (embed.Author is not null)
+                                            {
+                                                <div class="chatlog__embed-author-container">
+                                                    @if (!string.IsNullOrWhiteSpace(embed.Author.IconUrl))
                                                     {
-                                                        <a class="chatlog__embed-author-link" href="@embed.Author.Url">
+                                                        <img class="chatlog__embed-author-icon" src="@await ResolveUrlAsync(embed.Author.IconProxyUrl ?? embed.Author.IconUrl)" alt="Author icon" loading="lazy" onerror="this.style.visibility='hidden'">
+                                                    }
+
+                                                    @if (!string.IsNullOrWhiteSpace(embed.Author.Name))
+                                                    {
+                                                        if (!string.IsNullOrWhiteSpace(embed.Author.Url))
+                                                        {
+                                                            <a class="chatlog__embed-author-link" href="@embed.Author.Url">
+                                                                <div class="chatlog__embed-author">@embed.Author.Name</div>
+                                                            </a>
+                                                        }
+                                                        else
+                                                        {
                                                             <div class="chatlog__embed-author">@embed.Author.Name</div>
+                                                        }
+                                                    }
+                                                </div>
+                                            }
+
+                                            @{/* Embed title */}
+                                            @if (!string.IsNullOrWhiteSpace(embed.Title))
+                                            {
+                                                <div class="chatlog__embed-title">
+                                                    @if (!string.IsNullOrWhiteSpace(embed.Url))
+                                                    {
+                                                        <a class="chatlog__embed-title-link" href="@embed.Url">
+                                                            <div class="chatlog__markdown chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatEmbedMarkdown(embed.Title))<!--/wmm:ignore--></div>
                                                         </a>
                                                     }
                                                     else
                                                     {
-                                                        <div class="chatlog__embed-author">@embed.Author.Name</div>
-                                                    }
-                                                }
-                                            </div>
-                                        }
-
-                                        @{/* Embed title */}
-                                        @if (!string.IsNullOrWhiteSpace(embed.Title))
-                                        {
-                                            <div class="chatlog__embed-title">
-                                                @if (!string.IsNullOrWhiteSpace(embed.Url))
-                                                {
-                                                    <a class="chatlog__embed-title-link" href="@embed.Url">
                                                         <div class="chatlog__markdown chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatEmbedMarkdown(embed.Title))<!--/wmm:ignore--></div>
-                                                    </a>
-                                                }
-                                                else
-                                                {
-                                                    <div class="chatlog__markdown chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatEmbedMarkdown(embed.Title))<!--/wmm:ignore--></div>
-                                                }
-                                            </div>
-                                        }
+                                                    }
+                                                </div>
+                                            }
 
-                                        @{/* Embed description */}
-                                        @if (!string.IsNullOrWhiteSpace(embed.Description))
+                                            @{/* Embed description */}
+                                            @if (!string.IsNullOrWhiteSpace(embed.Description))
+                                            {
+                                                <div class="chatlog__embed-description">
+                                                    <div class="chatlog__markdown chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatEmbedMarkdown(embed.Description))<!--/wmm:ignore--></div>
+                                                </div>
+                                            }
+
+                                            @{/* Embed fields */}
+                                            @if (embed.Fields.Any())
+                                            {
+                                                <div class="chatlog__embed-fields">
+                                                    @foreach (var field in embed.Fields)
+                                                    {
+                                                        <div class="chatlog__embed-field @(field.IsInline ? "chatlog__embed-field--inline" : null)">
+                                                            @if (!string.IsNullOrWhiteSpace(field.Name))
+                                                            {
+                                                                <div class="chatlog__embed-field-name">
+                                                                    <div class="chatlog__markdown chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatEmbedMarkdown(field.Name))<!--/wmm:ignore--></div>
+                                                                </div>
+                                                            }
+
+                                                            @if (!string.IsNullOrWhiteSpace(field.Value))
+                                                            {
+                                                                <div class="chatlog__embed-field-value">
+                                                                    <div class="chatlog__markdown chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatEmbedMarkdown(field.Value))<!--/wmm:ignore--></div>
+                                                                </div>
+                                                            }
+                                                        </div>
+                                                    }
+                                                </div>
+                                            }
+                                        </div>
+
+                                        @{/* Embed content */}
+                                        @if (embed.Thumbnail is not null && !string.IsNullOrWhiteSpace(embed.Thumbnail.Url))
                                         {
-                                            <div class="chatlog__embed-description">
-                                                <div class="chatlog__markdown chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatEmbedMarkdown(embed.Description))<!--/wmm:ignore--></div>
-                                            </div>
-                                        }
-
-                                        @{/* Embed fields */}
-                                        @if (embed.Fields.Any())
-                                        {
-                                            <div class="chatlog__embed-fields">
-                                                @foreach (var field in embed.Fields)
-                                                {
-                                                    <div class="chatlog__embed-field @(field.IsInline ? "chatlog__embed-field--inline" : null)">
-                                                        @if (!string.IsNullOrWhiteSpace(field.Name))
-                                                        {
-                                                            <div class="chatlog__embed-field-name">
-                                                                <div class="chatlog__markdown chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatEmbedMarkdown(field.Name))<!--/wmm:ignore--></div>
-                                                            </div>
-                                                        }
-
-                                                        @if (!string.IsNullOrWhiteSpace(field.Value))
-                                                        {
-                                                            <div class="chatlog__embed-field-value">
-                                                                <div class="chatlog__markdown chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatEmbedMarkdown(field.Value))<!--/wmm:ignore--></div>
-                                                            </div>
-                                                        }
-                                                    </div>
-                                                }
+                                            <div class="chatlog__embed-thumbnail-container">
+                                                <a class="chatlog__embed-thumbnail-link" href="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)">
+                                                    <img class="chatlog__embed-thumbnail" src="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)" alt="Thumbnail" loading="lazy">
+                                                </a>
                                             </div>
                                         }
                                     </div>
 
-                                    @{/* Embed content */}
-                                    @if (embed.Thumbnail is not null && !string.IsNullOrWhiteSpace(embed.Thumbnail.Url))
+                                    @{/* Embed images */}
+                                    @if (embed.Images.Any())
                                     {
-                                        <div class="chatlog__embed-thumbnail-container">
-                                            <a class="chatlog__embed-thumbnail-link" href="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)">
-                                                <img class="chatlog__embed-thumbnail" src="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)" alt="Thumbnail" loading="lazy">
-                                            </a>
+                                        <div class="chatlog__embed-images @(embed.Images.Count == 1 ? "chatlog__embed-images--single" : null)">
+                                            @foreach (var image in embed.Images)
+                                            {
+                                                if (!string.IsNullOrWhiteSpace(image.Url))
+                                                {
+                                                    <div class="chatlog__embed-image-container">
+                                                        <a class="chatlog__embed-image-link" href="@await ResolveUrlAsync(image.ProxyUrl ?? image.Url)">
+                                                            <img class="chatlog__embed-image" src="@await ResolveUrlAsync(image.ProxyUrl ?? image.Url)" alt="Image" loading="lazy">
+                                                        </a>
+                                                    </div>
+                                                }
+                                            }
+                                        </div>
+                                    }
+
+                                    @{/* Embed footer & icon */}
+                                    @if (embed.Footer is not null || embed.Timestamp is not null)
+                                    {
+                                        <div class="chatlog__embed-footer">
+                                            @{/* Footer icon */}
+                                            @if (!string.IsNullOrWhiteSpace(embed.Footer?.IconUrl))
+                                            {
+                                                <img class="chatlog__embed-footer-icon" src="@await ResolveUrlAsync(embed.Footer.IconProxyUrl ?? embed.Footer.IconUrl)" alt="Footer icon" loading="lazy">
+                                            }
+
+                                            <span class="chatlog__embed-footer-text">
+                                                @{/* Footer text */}
+                                                @if (!string.IsNullOrWhiteSpace(embed.Footer?.Text))
+                                                {
+                                                    @embed.Footer.Text
+                                                }
+
+                                                @if (!string.IsNullOrWhiteSpace(embed.Footer?.Text) && embed.Timestamp is not null)
+                                                {
+                                                    @(" • ")
+                                                }
+
+                                                @{/* Embed timestamp */}
+                                                @if (embed.Timestamp is not null)
+                                                {
+                                                    @FormatDate(embed.Timestamp.Value)
+                                                }
+                                            </span>
                                         </div>
                                     }
                                 </div>
-
-                                @{/* Embed images */}
-                                @if (embed.Images.Any())
-                                {
-                                    <div class="chatlog__embed-images @(embed.Images.Count == 1 ? "chatlog__embed-images--single" : null)">
-                                        @foreach (var image in embed.Images)
-                                        {
-                                            if (!string.IsNullOrWhiteSpace(image.Url))
-                                            {
-                                                <div class="chatlog__embed-image-container">
-                                                    <a class="chatlog__embed-image-link" href="@await ResolveUrlAsync(image.ProxyUrl ?? image.Url)">
-                                                        <img class="chatlog__embed-image" src="@await ResolveUrlAsync(image.ProxyUrl ?? image.Url)" alt="Image" loading="lazy">
-                                                    </a>
-                                                </div>
-                                            }
-                                        }
-                                    </div>
-                                }
-
-                                @{/* Embed footer & icon */}
-                                @if (embed.Footer is not null || embed.Timestamp is not null)
-                                {
-                                    <div class="chatlog__embed-footer">
-                                        @{/* Footer icon */}
-                                        @if (!string.IsNullOrWhiteSpace(embed.Footer?.IconUrl))
-                                        {
-                                            <img class="chatlog__embed-footer-icon" src="@await ResolveUrlAsync(embed.Footer.IconProxyUrl ?? embed.Footer.IconUrl)" alt="Footer icon" loading="lazy">
-                                        }
-
-                                        <span class="chatlog__embed-footer-text">
-                                            @{/* Footer text */}
-                                            @if (!string.IsNullOrWhiteSpace(embed.Footer?.Text))
-                                            {
-                                                @embed.Footer.Text
-                                            }
-
-                                            @if (!string.IsNullOrWhiteSpace(embed.Footer?.Text) && embed.Timestamp is not null)
-                                            {
-                                                @(" • ")
-                                            }
-
-                                            @{/* Embed timestamp */}
-                                            @if (embed.Timestamp is not null)
-                                            {
-                                                @FormatDate(embed.Timestamp.Value)
-                                            }
-                                        </span>
-                                    </div>
-                                }
                             </div>
+                        }
+                    }
+
+                    @{/* Stickers */}
+                    @foreach (var sticker in message.Stickers)
+                    {
+                        <div class="chatlog__sticker" title="@sticker.Name">
+                            @if (sticker.Format is StickerFormat.Png or StickerFormat.PngAnimated)
+                            {
+                                <img class="chatlog__sticker--media" src="@await ResolveUrlAsync(sticker.SourceUrl)" alt="Sticker">
+                            }
+                            else if (sticker.Format == StickerFormat.Lottie)
+                            {
+                                <div class="chatlog__sticker--media" data-source="@await ResolveUrlAsync(sticker.SourceUrl)"></div>
+                            }
                         </div>
                     }
-                }
 
-                @{/* Stickers */}
-                @foreach (var sticker in message.Stickers)
-                {
-                    <div class="chatlog__sticker" title="@sticker.Name">
-                        @if (sticker.Format is StickerFormat.Png or StickerFormat.PngAnimated)
-                        {
-                            <img class="chatlog__sticker--media" src="@await ResolveUrlAsync(sticker.SourceUrl)" alt="Sticker">
-                        }
-                        else if (sticker.Format == StickerFormat.Lottie)
-                        {
-                            <div class="chatlog__sticker--media" data-source="@await ResolveUrlAsync(sticker.SourceUrl)"></div>
-                        }
-                    </div>
-                }
-
-                @{/* Message reactions */}
-                @if (message.Reactions.Any())
-                {
-                    <div class="chatlog__reactions">
-                        @foreach (var reaction in message.Reactions)
-                        {
-                            <div class="chatlog__reaction" title="@reaction.Emoji.Code">
-                                <img class="chatlog__emoji chatlog__emoji--small" alt="@reaction.Emoji.Name" src="@await ResolveUrlAsync(reaction.Emoji.ImageUrl)" loading="lazy">
-                                <span class="chatlog__reaction-count">@reaction.Count</span>
-                            </div>
-                        }
-                    </div>
-                }
-            </div>
+                    @{/* Message reactions */}
+                    @if (message.Reactions.Any())
+                    {
+                        <div class="chatlog__reactions">
+                            @foreach (var reaction in message.Reactions)
+                            {
+                                <div class="chatlog__reaction" title="@reaction.Emoji.Code">
+                                    <img class="chatlog__emoji chatlog__emoji--small" alt="@reaction.Emoji.Name" src="@await ResolveUrlAsync(reaction.Emoji.ImageUrl)" loading="lazy">
+                                    <span class="chatlog__reaction-count">@reaction.Count</span>
+                                </div>
+                            }
+                        </div>
+                    }
+                </div>
+            }
         </div>
     </div>
 }

DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml

@@ -69,6 +69,7 @@
             font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
             font-size: 17px;
             font-weight: @Themed("400", "500");
+            scroll-behavior: smooth;
         }
 
         a {
@@ -254,6 +255,38 @@
             unicode-bidi: bidi-override;
         }
 
+        .chatlog__system-notification-icon {
+            width: 18px;
+            height: 18px;
+        }
+
+        .chatlog__system-notification-author {
+            font-weight: @Themed("500", "600");
+            color: @Themed("#ffffff", "#2f3136");
+        }
+
+        .chatlog__system-notification-content {
+            color: @Themed("#96989d", "#5e6772")
+        }
+
+        .chatlog__system-notification-link {
+            font-weight: 500;
+            color: @Themed("#ffffff", "#2f3136");
+        }
+
+        .chatlog__system-notification-timestamp {
+            margin-left: 0.3rem;
+            color: @Themed("#a3a6aa", "#5e6772");
+            font-size: 0.75rem;
+            font-weight: 500;
+            direction: ltr;
+            unicode-bidi: bidi-override;
+        }
+
+        .chatlog__system-notification-timestamp a {
+            color: inherit;
+        }
+
         .chatlog__header {
             margin-bottom: 0.1rem;
         }
@@ -286,7 +319,7 @@
         }
 
         .chatlog__timestamp a {
-            color: @Themed("#a3a6aa", "#5e6772");
+            color: inherit;
         }
 
         .chatlog__content {
@@ -540,7 +573,14 @@
             font-weight: 500;
         }
 
-        .chatlog__embed-plainimage {
+        .chatlog__embed-generic-image {
+            max-width: 45vw;
+            max-height: 500px;
+            vertical-align: top;
+            border-radius: 3px;
+        }
+
+        .chatlog__embed-generic-gifv {
             max-width: 45vw;
             max-height: 500px;
             vertical-align: top;
@@ -779,13 +819,24 @@
     </script>
 
     @{/* Icons */}
-    <svg style="display: none">
-        <symbol id="attachment-icon" viewBox="0 0 720 960">
-            <path fill="#f4f5fb" d="M50,935a25,25,0,0,1-25-25V50A25,25,0,0,1,50,25H519.6L695,201.32V910a25,25,0,0,1-25,25Z"/>
-            <path fill="#7789c4" d="M509.21,50,670,211.63V910H50V50H509.21M530,0H50A50,50,0,0,0,0,50V910a50,50,0,0,0,50,50H670a50,50,0,0,0,50-50h0V191Z"/>
-            <path fill="#f4f5fb" d="M530,215a25,25,0,0,1-25-25V50a25,25,0,0,1,16.23-23.41L693.41,198.77A25,25,0,0,1,670,215Z"/>
-            <path fill="#7789c4" d="M530,70.71,649.29,190H530V70.71M530,0a50,50,0,0,0-50,50V190a50,50,0,0,0,50,50H670a50,50,0,0,0,50-50Z"/>
-        </symbol>
+    <svg style="display: none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+            <symbol id="attachment-icon" viewBox="0 0 720 960">
+                <path fill="#f4f5fb" d="M50,935a25,25,0,0,1-25-25V50A25,25,0,0,1,50,25H519.6L695,201.32V910a25,25,0,0,1-25,25Z" />
+                <path fill="#7789c4" d="M509.21,50,670,211.63V910H50V50H509.21M530,0H50A50,50,0,0,0,0,50V910a50,50,0,0,0,50,50H670a50,50,0,0,0,50-50h0V191Z" />
+                <path fill="#f4f5fb" d="M530,215a25,25,0,0,1-25-25V50a25,25,0,0,1,16.23-23.41L693.41,198.77A25,25,0,0,1,670,215Z" />
+                <path fill="#7789c4" d="M530,70.71,649.29,190H530V70.71M530,0a50,50,0,0,0-50,50V190a50,50,0,0,0,50,50H670a50,50,0,0,0,50-50Z" />
+            </symbol>
+            <symbol id="channel-pinned-message-icon" viewBox="0 0 18 18">
+                <path fill="#b9bbbe" d="m16.908 8.39684-8.29587-8.295827-1.18584 1.184157 1.18584 1.18584-4.14834 4.1475v.00167l-1.18583-1.18583-1.185 1.18583 3.55583 3.55502-4.740831 4.74 1.185001 1.185 4.74083-4.74 3.55581 3.555 1.185-1.185-1.185-1.185 4.1475-4.14836h.0009l1.185 1.185z" />
+            </symbol>
+            <symbol id="call-icon" viewBox="0 0 18 18">
+                <path fill="#3ba55c" fill-rule="evenodd" d="M17.7163041 15.36645368c-.0190957.02699568-1.9039523 2.6680735-2.9957762 2.63320406-3.0676659-.09785935-6.6733809-3.07188394-9.15694343-5.548738C3.08002193 9.9740657.09772497 6.3791404 0 3.3061316v-.024746C0 2.2060575 2.61386252.3152347 2.64082114.2972376c.7110335-.4971705 1.4917101-.3149497 1.80959713.1372281.19320342.2744561 2.19712724 3.2811005 2.42290565 3.6489167.09884826.1608492.14714912.3554431.14714912.5702838 0 .2744561-.07975258.5770327-.23701117.8751101-.1527655.2902036-.65262318 1.1664385-.89862055 1.594995.2673396.3768148.94804468 1.26429792 2.351016 2.66357424 1.39173858 1.39027775 2.28923588 2.07641807 2.67002628 2.34187563.4302146-.2452108 1.3086162-.74238132 1.5972981-.89423205.5447887-.28682915 1.0907006-.31944893 1.4568885-.08661115.3459689.2182151 3.3383754 2.21027167 3.6225641 2.41611376.2695862.19234426.4144887.5399137.4144887.91672846 0 .2969525-.089862.61190215-.2808189.88523346" />
+            </symbol>
+            <symbol id="guild-member-join-icon" viewBox="0 0 18 18">
+                <path fill="#3ba55c" d="m0 8h14.2l-3.6-3.6 1.4-1.4 6 6-6 6-1.4-1.4 3.6-3.6h-14.2" />
+            </symbol>
+        </defs>
     </svg>
 </head>
 <body>

DiscordChatExporter.Core/Exporting/Writers/HtmlMessageWriter.cs

@@ -25,17 +25,46 @@ internal class HtmlMessageWriter : MessageWriter
         _themeName = themeName;
     }
 
-    private bool CanJoinGroup(Message message) =>
-        // First message in the group can always join
-        _messageGroup.LastOrDefault() is not { } lastMessage ||
-        // Must be from the same author
-        lastMessage.Author.Id == message.Author.Id &&
-        // Author's name must not have changed between messages
-        string.Equals(lastMessage.Author.FullName, message.Author.FullName, StringComparison.Ordinal) &&
-        // Duration between messages must be 7 minutes or less
-        (message.Timestamp - lastMessage.Timestamp).Duration().TotalMinutes <= 7 &&
-        // Other message must not be a reply
-        message.Reference is null;
+    private bool CanJoinGroup(Message message)
+    {
+        // If the group is empty, any message can join it
+        if (_messageGroup.LastOrDefault() is not { } lastMessage)
+            return true;
+
+        // Reply messages cannot join existing groups because they need to appear first
+        if (message.Kind == MessageKind.Reply)
+            return false;
+
+        // Grouping for system notifications
+        if (message.Kind.IsSystemNotification())
+        {
+            // Can only be grouped with other system notifications
+            if (!lastMessage.Kind.IsSystemNotification())
+                return false;
+        }
+        // Grouping for normal messages
+        else
+        {
+            // Can only be grouped with other normal messages
+            if (lastMessage.Kind.IsSystemNotification())
+                return false;
+
+            // Messages must be within 7 minutes of each other
+            if ((message.Timestamp - lastMessage.Timestamp).Duration().TotalMinutes > 7)
+                return false;
+
+            // Messages must be from the same author
+            if (message.Author.Id != lastMessage.Author.Id)
+                return false;
+
+            // If the user changed their name after the last message, their new messages
+            // cannot join an existing group.
+            if (!string.Equals(message.Author.FullName, lastMessage.Author.FullName, StringComparison.Ordinal))
+                return false;
+        }
+
+        return true;
+    }
 
     // Use <!--wmm:ignore--> to preserve blocks of code inside the templates
     private string Minify(string html) => _minifier
@@ -77,7 +106,7 @@ internal class HtmlMessageWriter : MessageWriter
         await base.WriteMessageAsync(message, cancellationToken);
 
         // If the message can be grouped, buffer it for now
-        if (CanJoinGroup( message))
+        if (CanJoinGroup(message))
         {
             _messageGroup.Add(message);
         }

DiscordChatExporter.Core/Utils/Extensions/StringExtensions.cs

@@ -1,5 +1,7 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using System.Text;
+using System.Text.RegularExpressions;
 
 namespace DiscordChatExporter.Core.Utils.Extensions;
 
@@ -25,6 +27,14 @@ public static class StringExtensions
         }
     }
 
+    public static string ToDashCase(this string str) =>
+        Regex.Replace(str, @"(\p{Ll})(\p{Lu})", "$1-$2");
+
+    public static T? ParseEnumOrNull<T>(this string str, bool ignoreCase = true) where T : struct, Enum =>
+        Enum.TryParse<T>(str, ignoreCase, out var result)
+            ? result
+            : null;
+
     public static StringBuilder AppendIfNotEmpty(this StringBuilder builder, char value) =>
         builder.Length > 0
             ? builder.Append(value)

DiscordChatExporter.Core/Utils/Http.cs

@@ -3,6 +3,7 @@ using System.Linq;
 using System.Net;
 using System.Net.Http;
 using System.Net.Sockets;
+using System.Security.Authentication;
 using System.Threading.Tasks;
 using DiscordChatExporter.Core.Utils.Extensions;
 using Polly;
@@ -21,7 +22,7 @@ public static class Http
 
     private static bool IsRetryableException(Exception exception) =>
         exception.GetSelfAndChildren().Any(ex =>
-            ex is TimeoutException or SocketException ||
+            ex is TimeoutException or SocketException or AuthenticationException ||
             ex is HttpRequestException hrex && IsRetryableStatusCode(hrex.TryGetStatusCode() ?? HttpStatusCode.OK)
         );
 

Readme.md

@@ -65,6 +65,7 @@ The following table lists all available download options:
           <li>🟠 <a href="https://github.com/Tyrrrz/DiscordChatExporter/actions/workflows/main.yml">CI build</a> (<code>DiscordChatExporter.CLI.zip</code>)</li>
           <li>🐋 <a href="https://hub.docker.com/r/tyrrrz/discordchatexporter">Docker</a> (<code>tyrrrz/discordchatexporter</code>)</li>
           <li>📦 <a href="https://aur.archlinux.org/packages/discord-chat-exporter-cli">AUR</a> (<code>discord-chat-exporter-cli</code>)</li>
+          <li>📦 <a href="https://search.nixos.org/packages?query=discordchatexporter-cli">Nix</a> (<code>discordchatexporter-cli</code>)</li>
         </ul>
       </td>
       <td>
@@ -79,15 +80,19 @@ The following table lists all available download options:
 </table>
 
 > **Note**:
-> **DiscordChatExporter**'s AUR package is maintained by the community.
+> AUR and Nix packages linked above are maintained by the community.
+> If you have any issues with them, please contact the corresponding maintainers.
 
 > **Warning**:
-> To run **DiscordChatExporter** on macOS or Linux, you will need to additionally install **.NET Runtime v6**:
+> To run **DiscordChatExporter** on macOS and Linux, you need to make sure that **.NET Runtime v6** is installed.
+> You can download it here:
+>
 > - [.NET Runtime v6 for **macOS x64**](https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-6.0.6-macos-x64-installer)
 > - [.NET Runtime v6 for **macOS Arm64**](https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-6.0.6-macos-arm64-installer)
 > - [.NET Runtime v6 for **Linux**](https://docs.microsoft.com/en-us/dotnet/core/install/linux) (find the correct download for your distro)
 >
-> This is not required if you installed **DiscordChatExporter** using a package manager, or if you plan to run **DiscordChatExporter** via Docker.
+> This should not be necessary if you install **DiscordChatExporter** using a package manager, as it should take care of the dependencies for you.
+> This is also not necessary if you are running **DiscordChatExporter** via Docker, because the image already contains the runtime.
 
 ## Features
 
@@ -102,4 +107,4 @@ The following table lists all available download options:
 ## Screenshots
 
 ![channel list](.assets/list.png)
-![rendered output](.assets/output.png)
+![rendered output](.assets/output.png)