├── .gitignore
├── .vscode
    └── settings.json
├── README.md
├── pom.xml
└── src
    └── main
        ├── java
            └── me
            │   └── ryzeon
            │       └── transcripts
            │           ├── DiscordHtmlTranscripts.java
            │           ├── Formatter.java
            │           └── utils
            │               └── format
            │                   ├── IFormatHelper.java
            │                   └── impl
            │                       ├── AudioFormat.java
            │                       ├── ImageFormat.java
            │                       └── VideoFormat.java
        └── resources
            └── template.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | 
3 | target
4 | 
5 | src/test/java/Example.java


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "java.configuration.updateBuildConfiguration": "automatic"
3 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Discord (JDA) HTML Transcripts
 2 | [![](https://jitpack.io/v/Ryzeon/discord-html-transcripts.svg)](https://jitpack.io/#Ryzeon/discord-html-transcripts)
 3 | 
 4 | Discord HTML Transcripts is a node.js module (recode on JDA) to generate nice looking HTML transcripts. Processes discord markdown like **bold**, *italics*, ~~strikethroughs~~, and more. Nicely formats attachments and embeds. Built in XSS protection, preventing users from inserting html tags. 
 5 | 
 6 | **This module is designed to work with [JDA](https://github.com/DV8FromTheWorld/JDA).**
 7 | 
 8 | HTML Template stolen from [DiscordChatExporter](https://github.com/Tyrrrz/DiscordChatExporter).
 9 | 
10 | ## Installation
11 | 
12 | ```xml
13 | <repositories>
14 |     <repository>
15 | 	<id>jitpack.io</id>
16 | 	<url>https://jitpack.io</url>
17 |     </repository>
18 | </repositories>
19 | ```
20 | 
21 | ```xml
22 | <dependency>
23 |     <groupId>com.github.Ryzeon</groupId>
24 |     <artifactId>discord-html-transcripts</artifactId>
25 |     <version>Tag</version>
26 | </dependency>
27 | ```
28 | 
29 | ## Example Output
30 | ![output](https://img.derock.dev/5f5q0a.png)
31 | 
32 | ## Usage
33 | ### Example usage using the built-in message fetcher.
34 | ```java
35 | DiscordHtmlTranscripts transcript = DiscordHtmlTranscripts.getInstance();
36 | textChannel.sendFiles(transcript.createTranscript(textChannel)).queue()
37 | ```
38 | 
39 | ### Or if you prefer, you can pass in your own messages.
40 | ```java
41 | DiscordHtmlTranscripts transcript = DiscordHtmlTranscripts.getInstance();
42 | transcript.generateFromMessages(messages); // return to InputStream
43 | ```
44 | 
45 | ### You can also put the transcript into a variable
46 | ```java
47 | DiscordHtmlTranscripts transcripts = new DiscordHtmlTranscripts();
48 | try {
49 |    testChannel.sendFiles(transcripts.createTranscript(testChannel, "test.html")).queue();
50 | } catch (IOException e) {
51 |    throw new RuntimeException(e);
52 | }
53 | ```
54 | 
55 | 
56 | 


--------------------------------------------------------------------------------
/pom.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project xmlns="http://maven.apache.org/POM/4.0.0"
 3 |          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 4 |          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 5 |     <modelVersion>4.0.0</modelVersion>
 6 | 
 7 |     <groupId>me.ryzeon.html</groupId>
 8 |     <artifactId>discord-html-transcripts</artifactId>
 9 |     <version>2.0-SNAPSHOT</version>
10 |     <build>
11 |         <plugins>
12 |             <plugin>
13 |                 <groupId>org.apache.maven.plugins</groupId>
14 |                 <artifactId>maven-compiler-plugin</artifactId>
15 |                 <configuration>
16 |                     <source>17</source>
17 |                     <target>17</target>
18 |                 </configuration>
19 |             </plugin>
20 |             <plugin>
21 |                 <artifactId>maven-assembly-plugin</artifactId>
22 |                 <configuration>
23 |                     <archive>
24 |                         <manifest>
25 |                             <mainClass>me.ryzeon.html.DiscordHtmlTranscripts</mainClass>
26 |                         </manifest>
27 |                     </archive>
28 |                     <descriptorRefs>
29 |                         <descriptorRef>jar-with-dependencies</descriptorRef>
30 |                     </descriptorRefs>
31 |                 </configuration>
32 |                 <executions>
33 |                     <execution>
34 |                         <id>make-assembly</id>
35 |                         <phase>package</phase>
36 |                         <goals>
37 |                             <goal>single</goal>
38 |                         </goals>
39 |                     </execution>
40 |                 </executions>
41 |             </plugin>
42 |         </plugins>
43 |     </build>
44 | 
45 |     <properties>
46 |         <java.version>17</java.version>
47 |         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
48 |     </properties>
49 | 
50 |     <dependencies>
51 |         <!-- Lombok -->
52 |         <dependency>
53 |             <groupId>org.projectlombok</groupId>
54 |             <artifactId>lombok</artifactId>
55 |             <version>1.18.30</version>
56 |             <scope>provided</scope>
57 |         </dependency>
58 |         <!--- JDA -->
59 |         <dependency>
60 |             <groupId>net.dv8tion</groupId>
61 |             <artifactId>JDA</artifactId>
62 |             <version>5.0.0</version>
63 |         </dependency>
64 |         <!--- Jsoup -->
65 |         <dependency>
66 |             <!-- jsoup HTML parser library @ https://jsoup.org/ -->
67 |             <groupId>org.jsoup</groupId>
68 |             <artifactId>jsoup</artifactId>
69 |             <version>1.15.3</version>
70 |         </dependency>
71 |     </dependencies>
72 | </project>


--------------------------------------------------------------------------------
/src/main/java/me/ryzeon/transcripts/DiscordHtmlTranscripts.java:
--------------------------------------------------------------------------------
  1 | package me.ryzeon.transcripts;
  2 | 
  3 | import kotlin.text.Charsets;
  4 | import me.ryzeon.transcripts.utils.format.IFormatHelper;
  5 | import me.ryzeon.transcripts.utils.format.impl.AudioFormat;
  6 | import me.ryzeon.transcripts.utils.format.impl.ImageFormat;
  7 | import me.ryzeon.transcripts.utils.format.impl.VideoFormat;
  8 | import net.dv8tion.jda.api.entities.*;
  9 | import net.dv8tion.jda.api.entities.channel.middleman.GuildChannel;
 10 | import net.dv8tion.jda.api.entities.channel.middleman.GuildMessageChannel;
 11 | import net.dv8tion.jda.api.utils.FileUpload;
 12 | import org.jsoup.Jsoup;
 13 | import org.jsoup.nodes.Document;
 14 | import org.jsoup.nodes.Element;
 15 | 
 16 | import java.io.ByteArrayInputStream;
 17 | import java.io.IOException;
 18 | import java.io.InputStream;
 19 | import java.time.format.DateTimeFormatter;
 20 | import java.util.*;
 21 | import java.util.stream.Collectors;
 22 | 
 23 | 
 24 | /**
 25 |  * Created by Ryzeon
 26 |  * Contributors: Zemux1613, Inkception, IncbomDev
 27 |  * Project: discord-html-transcripts
 28 |  * Date: 1/3/2023 @ 10:50
 29 |  */
 30 | public class DiscordHtmlTranscripts {
 31 | 
 32 |     private static DiscordHtmlTranscripts instance;
 33 |     private final IFormatHelper
 34 |             imageFormats = new ImageFormat(),
 35 |             videoFormats = new VideoFormat(),
 36 |             audioFormats = new AudioFormat();
 37 | 
 38 |     /**
 39 |      * Get the instance of the DiscordHtmlTranscripts
 40 |      *
 41 |      * @return a singleton instance of the DiscordHtmlTranscripts
 42 |      */
 43 |     public static DiscordHtmlTranscripts getInstance() {
 44 |         if (instance == null) {
 45 |             instance = new DiscordHtmlTranscripts();
 46 |         }
 47 |         return instance;
 48 |     }
 49 | 
 50 |     private void handleFooter(Document document, MessageEmbed embed, Element embedContentContainer) {
 51 |         Element embedFooter = document.createElement("div");
 52 |         embedFooter.addClass("chatlog__embed-footer");
 53 | 
 54 | 
 55 |         if (Objects.requireNonNull(embed.getFooter()).getIconUrl() != null) {
 56 |             Element embedFooterIcon = document.createElement("img");
 57 |             embedFooterIcon.addClass("chatlog__embed-footer-icon");
 58 |             embedFooterIcon.attr("src", embed.getFooter().getIconUrl());
 59 |             embedFooterIcon.attr("alt", "Footer icon");
 60 |             embedFooterIcon.attr("loading", "lazy");
 61 | 
 62 |             embedFooter.appendChild(embedFooterIcon);
 63 |         }
 64 | 
 65 |         Element embedFooterText = document.createElement("span");
 66 |         embedFooterText.addClass("chatlog__embed-footer-text");
 67 |         embedFooterText.text(embed.getTimestamp() != null
 68 |                 ? embed.getFooter().getText() + " • " + embed.getTimestamp()
 69 |                 .format(DateTimeFormatter.ofPattern("HH:mm:ss"))
 70 |                 : embed.getFooter().getText());
 71 | 
 72 |         embedFooter.appendChild(embedFooterText);
 73 | 
 74 |         embedContentContainer.appendChild(embedFooter);
 75 |     }
 76 | 
 77 |     private void handleEmbedImage(Document document, MessageEmbed embed, Element embedContentContainer) {
 78 |         Element embedImage = document.createElement("div");
 79 |         embedImage.addClass("chatlog__embed-image-container");
 80 | 
 81 |         Element embedImageLink = document.createElement("a");
 82 |         embedImageLink.addClass("chatlog__embed-image-link");
 83 |         embedImageLink.attr("href", embed.getImage().getUrl());
 84 | 
 85 |         Element embedImageImage = document.createElement("img");
 86 |         embedImageImage.addClass("chatlog__embed-image");
 87 |         embedImageImage.attr("src", embed.getImage().getUrl());
 88 |         embedImageImage.attr("alt", "Image");
 89 |         embedImageImage.attr("loading", "lazy");
 90 | 
 91 |         embedImageLink.appendChild(embedImageImage);
 92 |         embedImage.appendChild(embedImageLink);
 93 | 
 94 |         embedContentContainer.appendChild(embedImage);
 95 |     }
 96 | 
 97 |     private void handleEmbedThumbnail(Document document, MessageEmbed embed, Element embedContent) {
 98 |         Element embedThumbnail = document.createElement("div");
 99 |         embedThumbnail.addClass("chatlog__embed-thumbnail-container");
100 | 
101 |         Element embedThumbnailLink = document.createElement("a");
102 |         embedThumbnailLink.addClass("chatlog__embed-thumbnail-link");
103 |         embedThumbnailLink.attr("href", embed.getThumbnail().getUrl());
104 | 
105 |         Element embedThumbnailImage = document.createElement("img");
106 |         embedThumbnailImage.addClass("chatlog__embed-thumbnail");
107 |         embedThumbnailImage.attr("src", embed.getThumbnail().getUrl());
108 |         embedThumbnailImage.attr("alt", "Thumbnail");
109 |         embedThumbnailImage.attr("loading", "lazy");
110 | 
111 |         embedThumbnailLink.appendChild(embedThumbnailImage);
112 |         embedThumbnail.appendChild(embedThumbnailLink);
113 | 
114 |         embedContent.appendChild(embedThumbnail);
115 |     }
116 | 
117 |     private void handleEmbedFields(Document document, MessageEmbed embed, Element embedText) {
118 |         Element embedFields = document.createElement("div");
119 |         embedFields.addClass("chatlog__embed-fields");
120 | 
121 |         for (MessageEmbed.Field field : embed.getFields()) {
122 |             Element embedField = document.createElement("div");
123 |             embedField.addClass("chatlog__embed-field");
124 | 
125 |             // Field nmae
126 |             Element embedFieldName = document.createElement("div");
127 |             embedFieldName.addClass("chatlog__embed-field-name");
128 | 
129 |             Element embedFieldNameMarkdown = document.createElement("div");
130 |             embedFieldNameMarkdown.addClass("markdown preserve-whitespace");
131 |             embedFieldNameMarkdown.html(field.getName());
132 | 
133 |             embedFieldName.appendChild(embedFieldNameMarkdown);
134 |             embedField.appendChild(embedFieldName);
135 | 
136 | 
137 |             // Field value
138 |             Element embedFieldValue = document.createElement("div");
139 |             embedFieldValue.addClass("chatlog__embed-field-value");
140 | 
141 |             Element embedFieldValueMarkdown = document.createElement("div");
142 |             embedFieldValueMarkdown.addClass("markdown preserve-whitespace");
143 |             embedFieldValueMarkdown
144 |                     .html(Formatter.format(field.getValue()));
145 | 
146 |             embedFieldValue.appendChild(embedFieldValueMarkdown);
147 |             embedField.appendChild(embedFieldValue);
148 | 
149 |             embedFields.appendChild(embedField);
150 |         }
151 | 
152 |         embedText.appendChild(embedFields);
153 |     }
154 | 
155 |     private void handleEmbedDescription(Document document, MessageEmbed embed, Element embedText) {
156 |         Element embedDescription = document.createElement("div");
157 |         embedDescription.addClass("chatlog__embed-description");
158 | 
159 |         Element embedDescriptionMarkdown = document.createElement("div");
160 |         embedDescriptionMarkdown.addClass("markdown preserve-whitespace");
161 |         embedDescriptionMarkdown
162 |                 .html(Formatter.format(embed.getDescription()));
163 | 
164 |         embedDescription.appendChild(embedDescriptionMarkdown);
165 |         embedText.appendChild(embedDescription);
166 |     }
167 | 
168 |     private void handleEmbedTitle(Document document, MessageEmbed embed, Element embedText) {
169 |         Element embedTitle = document.createElement("div");
170 |         embedTitle.addClass("chatlog__embed-title");
171 | 
172 |         if (embed.getUrl() != null) {
173 |             Element embedTitleLink = document.createElement("a");
174 |             embedTitleLink.addClass("chatlog__embed-title-link");
175 |             embedTitleLink.attr("href", embed.getUrl());
176 | 
177 |             Element embedTitleMarkdown = document.createElement("div");
178 |             embedTitleMarkdown.addClass("markdown preserve-whitespace")
179 |                     .html(Formatter.format(embed.getTitle()));
180 | 
181 |             embedTitleLink.appendChild(embedTitleMarkdown);
182 |             embedTitle.appendChild(embedTitleLink);
183 |         } else {
184 |             Element embedTitleMarkdown = document.createElement("div");
185 |             embedTitleMarkdown.addClass("markdown preserve-whitespace")
186 |                     .html(Formatter.format(embed.getTitle()));
187 | 
188 |             embedTitle.appendChild(embedTitleMarkdown);
189 |         }
190 |         embedText.appendChild(embedTitle);
191 |     }
192 | 
193 |     private void handleEmbedAuthor(Document document, MessageEmbed embed, Element embedText) {
194 |         Element embedAuthor = document.createElement("div");
195 |         embedAuthor.addClass("chatlog__embed-author");
196 | 
197 |         if (embed.getAuthor().getIconUrl() != null) {
198 |             Element embedAuthorIcon = document.createElement("img");
199 |             embedAuthorIcon.addClass("chatlog__embed-author-icon");
200 |             embedAuthorIcon.attr("src", embed.getAuthor().getIconUrl());
201 |             embedAuthorIcon.attr("alt", "Author icon");
202 |             embedAuthorIcon.attr("loading", "lazy");
203 | 
204 |             embedAuthor.appendChild(embedAuthorIcon);
205 |         }
206 | 
207 |         Element embedAuthorName = document.createElement("span");
208 |         embedAuthorName.addClass("chatlog__embed-author-name");
209 | 
210 |         if (embed.getAuthor().getUrl() != null) {
211 |             Element embedAuthorNameLink = document.createElement("a");
212 |             embedAuthorNameLink.addClass("chatlog__embed-author-name-link");
213 |             embedAuthorNameLink.attr("href", embed.getAuthor().getUrl());
214 |             embedAuthorNameLink.text(embed.getAuthor().getName());
215 | 
216 |             embedAuthorName.appendChild(embedAuthorNameLink);
217 |         } else {
218 |             embedAuthorName.text(embed.getAuthor().getName());
219 |         }
220 | 
221 |         embedAuthor.appendChild(embedAuthorName);
222 |         embedText.appendChild(embedAuthor);
223 |     }
224 | 
225 |     private void handleUnknownAttachmentTypes(Document document, Message.Attachment attach, Element attachmentsDiv) {
226 |         Element attachmentGeneric = document.createElement("div");
227 |         attachmentGeneric.addClass("chatlog__attachment-generic");
228 | 
229 |         Element attachmentGenericIcon = document.createElement("svg");
230 |         attachmentGenericIcon.addClass("chatlog__attachment-generic-icon");
231 | 
232 |         Element attachmentGenericIconUse = document.createElement("use");
233 |         attachmentGenericIconUse.attr("xlink:href", "#icon-attachment");
234 | 
235 |         attachmentGenericIcon.appendChild(attachmentGenericIconUse);
236 |         attachmentGeneric.appendChild(attachmentGenericIcon);
237 | 
238 |         Element attachmentGenericName = document.createElement("div");
239 |         attachmentGenericName.addClass("chatlog__attachment-generic-name");
240 | 
241 |         Element attachmentGenericNameLink = document.createElement("a");
242 |         attachmentGenericNameLink.attr("href", attach.getUrl());
243 |         attachmentGenericNameLink.text(attach.getFileName());
244 | 
245 |         attachmentGenericName.appendChild(attachmentGenericNameLink);
246 |         attachmentGeneric.appendChild(attachmentGenericName);
247 | 
248 |         Element attachmentGenericSize = document.createElement("div");
249 |         attachmentGenericSize.addClass("chatlog__attachment-generic-size");
250 | 
251 |         attachmentGenericSize.text(Formatter.formatBytes(attach.getSize()));
252 |         attachmentGeneric.appendChild(attachmentGenericSize);
253 | 
254 |         attachmentsDiv.appendChild(attachmentGeneric);
255 |     }
256 | 
257 |     private void handleAudios(Document document, Message.Attachment attach, Element attachmentsDiv) {
258 |         Element attachmentAudio = document.createElement("audio");
259 |         attachmentAudio.addClass("chatlog__attachment-media");
260 |         attachmentAudio.attr("src", attach.getUrl());
261 |         attachmentAudio.attr("alt", "Audio attachment");
262 |         attachmentAudio.attr("controls", true);
263 |         attachmentAudio.attr("title",
264 |                 "Audio: " + attach.getFileName() + Formatter.formatBytes(attach.getSize()));
265 | 
266 |         attachmentsDiv.appendChild(attachmentAudio);
267 |     }
268 | 
269 |     private void handleVideos(Document document, Message.Attachment attach, Element attachmentsDiv) {
270 |         Element attachmentVideo = document.createElement("video");
271 |         attachmentVideo.addClass("chatlog__attachment-media");
272 |         attachmentVideo.attr("src", attach.getUrl());
273 |         attachmentVideo.attr("alt", "Video attachment");
274 |         attachmentVideo.attr("controls", true);
275 |         attachmentVideo.attr("title",
276 |                 "Video: " + attach.getFileName() + Formatter.formatBytes(attach.getSize()));
277 | 
278 |         attachmentsDiv.appendChild(attachmentVideo);
279 |     }
280 | 
281 |     private void handleImages(Document document, Message.Attachment attach, Element attachmentsDiv) {
282 |         Element attachmentLink = document.createElement("a");
283 | 
284 |         Element attachmentImage = document.createElement("img");
285 |         attachmentImage.addClass("chatlog__attachment-media");
286 |         attachmentImage.attr("src", attach.getUrl());
287 |         attachmentImage.attr("alt", "Image attachment");
288 |         attachmentImage.attr("loading", "lazy");
289 |         attachmentImage.attr("title",
290 |                 "Image: " + attach.getFileName() + Formatter.formatBytes(attach.getSize()));
291 | 
292 |         attachmentLink.appendChild(attachmentImage);
293 |         attachmentsDiv.appendChild(attachmentLink);
294 |     }
295 | 
296 |     private void handleMessageReferences(GuildChannel channel, Document document, Message message, Element messageGroup) {
297 |         // message.reference?.messageId
298 |         // create symbol
299 |         Element referenceSymbol = document.createElement("div");
300 |         referenceSymbol.addClass("chatlog__reference-symbol");
301 | 
302 |         // create reference
303 |         Element reference = document.createElement("div");
304 |         reference.addClass("chatlog__reference");
305 | 
306 |         var referenceMessage = message.getReferencedMessage();
307 |         User author = referenceMessage.getAuthor();
308 |         Member member = channel.getGuild().getMember(author);
309 |         var color = Formatter.toHex(Objects.requireNonNull(member.getColor()));
310 | 
311 |         //        System.out.println("REFERENCE MSG " + referenceMessage.getContentDisplay());
312 |         reference.html("<img class=\"chatlog__reference-avatar\" src=\""
313 |                 + author.getAvatarUrl() + "\" alt=\"Avatar\" loading=\"lazy\">" +
314 |                 "<span class=\"chatlog__reference-name\" title=\"" + author.getName()
315 |                 + "\" style=\"color: " + color + "\">" + author.getName() + "\"</span>" +
316 |                 "<div class=\"chatlog__reference-content\">" +
317 |                 " <span class=\"chatlog__reference-link\" onclick=\"scrollToMessage(event, '"
318 |                 + referenceMessage.getId() + "')\">" +
319 |                 "<em>" +
320 |                 referenceMessage.getContentDisplay() != null
321 |                 ? referenceMessage.getContentDisplay().length() > 42
322 |                 ? referenceMessage.getContentDisplay().substring(0, 42)
323 |                 + "..."
324 |                 : referenceMessage.getContentDisplay()
325 |                 : "Click to see attachment" +
326 |                 "</em>" +
327 |                 "</span>" +
328 |                 "</div>");
329 | 
330 |         messageGroup.appendChild(referenceSymbol);
331 |         messageGroup.appendChild(reference);
332 |     }
333 | 
334 |     public FileUpload createTranscript(GuildMessageChannel channel) throws IOException {
335 |         return createTranscript(channel, null);
336 |     }
337 | 
338 |     public FileUpload createTranscript(GuildMessageChannel channel, String fileName) throws IOException {
339 |         return FileUpload.fromData(generateFromMessages(channel.getIterableHistory().stream().collect(Collectors.toList())),
340 |                 fileName != null ? fileName : "transcript.html");
341 |     }
342 | 
343 |     public InputStream generateFromMessages(Collection<Message> messages) throws IOException {
344 |         InputStream htmlTemplate = findFile();
345 |         if (messages.isEmpty()) {
346 |             throw new IllegalArgumentException("No messages to generate a transcript from");
347 |         }
348 | 
349 |         GuildChannel channel = messages.iterator().next().getChannel().asGuildMessageChannel();
350 | 
351 |         Document document = Jsoup.parse(htmlTemplate, "UTF-8", "template.html");
352 |         document.outputSettings().indentAmount(0).prettyPrint(true);
353 |         document.getElementsByClass("preamble__guild-icon").first().attr("src", channel.getGuild().getIconUrl()); // set guild icon
354 | 
355 |         document.getElementById("transcriptTitle").text("#" + channel.getName() + " | " + messages.size() + " messages"); // set title
356 |         document.getElementById("guildname").text(channel.getGuild().getName()); // set guild name
357 |         document.getElementById("ticketname").text("#" + channel.getName()); // set channel name
358 | 
359 |         Element chatLog = document.getElementById("chatlog"); // chat log
360 |         for (Message message : messages.stream()
361 |                 .sorted(Comparator.comparing(ISnowflake::getTimeCreated))
362 |                 .toList()) {
363 | 
364 |             if (message.getAuthor().isBot()) {
365 |                 continue;
366 |             }
367 |             // create message group
368 |             Element messageGroup = document.createElement("div");
369 |             messageGroup.addClass("chatlog__message-group");
370 | 
371 |             // message reference
372 |             if (message.getReferencedMessage() != null) { // preguntar si es eso
373 |                 handleMessageReferences(channel, document, message, messageGroup);
374 |             }
375 | 
376 |             var author = message.getAuthor();
377 | 
378 |             Element authorElement = document.createElement("div");
379 |             authorElement.addClass("chatlog__author-avatar-container");
380 | 
381 |             Element authorAvatar = document.createElement("img");
382 |             authorAvatar.addClass("chatlog__author-avatar");
383 |             authorAvatar.attr("alt", "Avatar");
384 |             authorAvatar.attr("loading", "lazy");
385 | 
386 |             Element authorName = document.createElement("span");
387 |             authorName.addClass("chatlog__author-name");
388 | 
389 |             if (author != null) {
390 |                 authorName.attr("title", Objects.requireNonNull(author.getGlobalName()));
391 |                 authorName.text(author.getName());
392 |                 authorName.attr("data-user-id", author.getId());
393 |                 authorAvatar.attr("src", Objects.requireNonNull(author.getEffectiveAvatarUrl()));
394 |             } else {
395 |                 // Handle the case when author is null (e.g., when the message is from a bot)
396 |                 authorName.attr("title", "Bot");
397 |                 authorName.text("Bot");
398 |                 authorName.attr("data-user-id", "Bot");
399 |                 authorAvatar.attr("src", "default_bot_avatar_url"); // replace with your default bot avatar URL
400 |             }
401 | 
402 |             authorElement.appendChild(authorAvatar);
403 |             messageGroup.appendChild(authorElement);
404 | 
405 |             // message content
406 |             Element content = document.createElement("div");
407 |             content.addClass("chatlog__messages");
408 | 
409 |             content.appendChild(authorName);
410 | 
411 |             if (author != null && author.isBot()) {
412 |                 Element botTag = document.createElement("span");
413 |                 botTag.addClass("chatlog__bot-tag").text("BOT");
414 |                 content.appendChild(botTag);
415 |             }
416 | 
417 |             // timestamp
418 |             Element timestamp = document.createElement("span");
419 |             timestamp.addClass("chatlog__timestamp");
420 |             timestamp
421 |                     .text(message.getTimeCreated().format(DateTimeFormatter.ofPattern("HH:mm:ss")));
422 | 
423 |             content.appendChild(timestamp);
424 | 
425 |             Element messageContent = document.createElement("div");
426 |             messageContent.addClass("chatlog__message");
427 |             messageContent.attr("data-message-id", message.getId());
428 |             messageContent.attr("id", "message-" + message.getId());
429 |             messageContent.attr("title", "Message sent: " + message.getTimeCreated().format(DateTimeFormatter.ofPattern("HH:mm:ss")));
430 | 
431 |             if (!message.getContentDisplay().isEmpty()) {
432 |                 Element messageContentContent = document.createElement("div");
433 |                 messageContentContent.addClass("chatlog__content");
434 | 
435 |                 Element messageContentContentMarkdown = document.createElement("div");
436 |                 messageContentContentMarkdown.addClass("markdown");
437 | 
438 |                 Element messageContentContentMarkdownSpan = document.createElement("span");
439 |                 messageContentContentMarkdownSpan.addClass("preserve-whitespace");
440 |                 messageContentContentMarkdownSpan.html(Formatter.format(message.getContentDisplay()));
441 | 
442 |                 messageContentContentMarkdown.appendChild(messageContentContentMarkdownSpan);
443 |                 messageContentContent.appendChild(messageContentContentMarkdown);
444 |                 messageContent.appendChild(messageContentContent);
445 |             }
446 | 
447 |             // messsage attachments
448 |             if (!message.getAttachments().isEmpty()) {
449 |                 for (Message.Attachment attach : message.getAttachments()) {
450 |                     Element attachmentsDiv = document.createElement("div");
451 |                     attachmentsDiv.addClass("chatlog__attachment");
452 | 
453 |                     var attachmentType = attach.getFileExtension();
454 |                     if (imageFormats.isFormat(attachmentType)) {
455 |                         handleImages(document, attach, attachmentsDiv);
456 |                     } else if (videoFormats.isFormat(attachmentType)) {
457 |                         handleVideos(document, attach, attachmentsDiv);
458 |                     } else if (audioFormats.isFormat(attachmentType)) {
459 |                         handleAudios(document, attach, attachmentsDiv);
460 |                     } else {
461 |                         handleUnknownAttachmentTypes(document, attach, attachmentsDiv);
462 |                     }
463 | 
464 |                     messageContent.appendChild(attachmentsDiv);
465 |                 }
466 |             }
467 | 
468 |             content.appendChild(messageContent);
469 | 
470 |             if (!message.getEmbeds().isEmpty()) {
471 |                 for (MessageEmbed embed : message.getEmbeds()) {
472 |                     if (embed == null) {
473 |                         continue;
474 |                     }
475 |                     Element embedDiv = document.createElement("div");
476 |                     embedDiv.addClass("chatlog__embed");
477 | 
478 |                     // embed color
479 |                     Element embedColorPill = document.createElement("div");
480 | 
481 |                     if (embed.getColor() == null) {
482 |                         embedColorPill.addClass("chatlog__embed-color-pill chatlog__embed-color-pill--default");
483 |                     } else {
484 |                         embedColorPill.addClass("chatlog__embed-color-pill");
485 |                         embedColorPill.attr("style",
486 |                                 "background-color: #" + Formatter.toHex(embed.getColor()));
487 |                     }
488 |                     embedDiv.appendChild(embedColorPill);
489 | 
490 |                     Element embedContentContainer = document.createElement("div");
491 |                     embedContentContainer.addClass("chatlog__embed-content-container");
492 | 
493 |                     Element embedContent = document.createElement("div");
494 |                     embedContent.addClass("chatlog__embed-content");
495 | 
496 |                     Element embedText = document.createElement("div");
497 |                     embedText.addClass("chatlog__embed-text");
498 | 
499 |                     // embed author
500 |                     if (embed.getAuthor() != null && embed.getAuthor().getName() != null) {
501 |                         handleEmbedAuthor(document, embed, embedText);
502 |                     }
503 | 
504 |                     // embed title
505 |                     if (embed.getTitle() != null) {
506 |                         handleEmbedTitle(document, embed, embedText);
507 |                     }
508 | 
509 |                     // embed description
510 |                     if (embed.getDescription() != null) {
511 |                         handleEmbedDescription(document, embed, embedText);
512 |                     }
513 | 
514 |                     // embed fields
515 |                     if (!embed.getFields().isEmpty()) {
516 |                         handleEmbedFields(document, embed, embedText);
517 |                     }
518 | 
519 |                     embedContent.appendChild(embedText);
520 | 
521 |                     // embed thumbnail
522 |                     if (embed.getThumbnail() != null) {
523 |                         handleEmbedThumbnail(document, embed, embedContent);
524 |                     }
525 | 
526 |                     embedContentContainer.appendChild(embedContent);
527 | 
528 |                     // embed image
529 |                     if (embed.getImage() != null) {
530 |                         handleEmbedImage(document, embed, embedContentContainer);
531 |                     }
532 | 
533 |                     // embed footer
534 |                     if (embed.getFooter() != null) {
535 |                         handleFooter(document, embed, embedContentContainer);
536 |                     }
537 | 
538 |                     embedDiv.appendChild(embedContentContainer);
539 |                     content.appendChild(embedDiv);
540 |                 }
541 |             }
542 | 
543 |             messageGroup.appendChild(content);
544 |             assert chatLog != null;
545 |             chatLog.appendChild(messageGroup);
546 |         }
547 |         return new ByteArrayInputStream(document.outerHtml().getBytes(Charsets.UTF_8));
548 |     }
549 | 
550 |     private InputStream findFile() {
551 |         InputStream inputStream = getClass().getClassLoader().getResourceAsStream("template.html");
552 |         if (inputStream == null) {
553 |             throw new IllegalArgumentException("file is not found: " + "template.html");
554 |         }
555 |         return inputStream;
556 |     }
557 | }


--------------------------------------------------------------------------------
/src/main/java/me/ryzeon/transcripts/Formatter.java:
--------------------------------------------------------------------------------
  1 | package me.ryzeon.transcripts;
  2 | 
  3 | import lombok.experimental.UtilityClass;
  4 | 
  5 | import java.awt.*;
  6 | import java.util.regex.Matcher;
  7 | import java.util.regex.Pattern;
  8 | 
  9 | /**
 10 |  * Created by Ryzeon
 11 |  * Project: discord-html-transcripts
 12 |  * Date: 2/12/21 @ 00:32
 13 |  * Twitter: @Ryzeon_ 😎
 14 |  * Github: github.ryzeon.me
 15 |  */
 16 | @UtilityClass
 17 | public class Formatter {
 18 | 
 19 |     private final Pattern STRONG = Pattern.compile("\\*\\*(.+?)\\*\\*");
 20 |     private final Pattern EM = Pattern.compile("\\*(.+?)\\*");
 21 |     private final Pattern S = Pattern.compile("~~(.+?)~~");
 22 |     private final Pattern U = Pattern.compile("__(.+?)__");
 23 |     private final Pattern CODE = Pattern.compile("```(.+?)```");
 24 |     private final Pattern CODE_1 = Pattern.compile("`(.+?)`");
 25 |     private final Pattern QUOTE = Pattern.compile("^>{1,3} (.*)$");
 26 |     private final Pattern LINK = Pattern.compile("\\[([^\\[]+)\\](\\((www|http:|https:)+[^\\s]+[\\w]\\))");
 27 |     private final Pattern NEW_LINE = Pattern.compile("\\n");
 28 | 
 29 |     public String formatBytes(long bytes) {
 30 |         int unit = 1024;
 31 |         if (bytes < unit)
 32 |             return bytes + " B";
 33 |         int exp = (int) (Math.log(bytes) / Math.log(unit));
 34 |         String pre = String.valueOf("KMGTPE".charAt(exp - 1));
 35 |         return String.format("%.1f %sB", bytes / Math.pow(unit, exp), pre);
 36 |     }
 37 | 
 38 |     public String format(String originalText) {
 39 |         Matcher matcher = STRONG.matcher(originalText);
 40 |         String newText = originalText;
 41 |         while (matcher.find()) {
 42 |             String group = matcher.group();
 43 |             newText = newText.replace(group,
 44 |                     "<strong>" + group.replace("**", "") + "</strong>");
 45 |         }
 46 |         matcher = EM.matcher(newText);
 47 |         while (matcher.find()) {
 48 |             String group = matcher.group();
 49 |             newText = newText.replace(group,
 50 |                     "<em>" + group.replace("*", "") + "</em>");
 51 |         }
 52 |         matcher = S.matcher(newText);
 53 |         while (matcher.find()) {
 54 |             String group = matcher.group();
 55 |             newText = newText.replace(group,
 56 |                     "<s>" + group.replace("~~", "") + "</s>");
 57 |         }
 58 |         matcher = U.matcher(newText);
 59 |         while (matcher.find()) {
 60 |             String group = matcher.group();
 61 |             newText = newText.replace(group,
 62 |                     "<u>" + group.replace("__", "") + "</u>");
 63 |         }
 64 |         matcher = QUOTE.matcher(newText);
 65 |         while (matcher.find()) {
 66 |             String group = matcher.group();
 67 |             newText = newText.replace(group,
 68 |                     "<span class=\"quote\">" + group.replaceFirst(">>>", "").replaceFirst(">", "") + "</span>");
 69 |         }
 70 |         matcher = LINK.matcher(newText);
 71 |         while (matcher.find()) {
 72 |             String group = matcher.group(1);
 73 |             String link = matcher.group(2);
 74 |             String raw = "[" + group + "]" + link;
 75 | 
 76 |             newText = newText.replace(raw, "<a href=\"" + link.replace("(", "").replace(")", "") + "\">" + group + "</a>");
 77 |         }
 78 | 
 79 |         matcher = CODE.matcher(newText);
 80 |         boolean findCode = false;
 81 |         while (matcher.find()) {
 82 |             String group = matcher.group();
 83 |             newText = newText.replace(group,
 84 |                     "<div class=\"pre pre--multiline nohighlight\">"
 85 |                             + group.replace("```", "").substring(3, -3) + "</div>");
 86 |             findCode = true;
 87 |         }
 88 |         if (!findCode) {
 89 |             matcher = CODE_1.matcher(newText);
 90 |             while (matcher.find()) {
 91 |                 String group = matcher.group();
 92 |                 newText = newText.replace(group,
 93 |                         "<span class=\"pre pre--inline\">" + group.replace("`", "") + "</span>");
 94 |             }
 95 |         }
 96 |         matcher = NEW_LINE.matcher(newText);
 97 |         while (matcher.find()) {
 98 |             newText = newText.replace(matcher.group(), "<br />");
 99 |         }
100 |         return newText;
101 |     }
102 | 
103 |     public String toHex(Color color) {
104 |         String hex = Integer.toHexString(color.getRGB() & 0xffffff);
105 |         while (hex.length() < 6) {
106 |             hex = "0" + hex;
107 |         }
108 |         return hex;
109 |     }
110 | }
111 | 


--------------------------------------------------------------------------------
/src/main/java/me/ryzeon/transcripts/utils/format/IFormatHelper.java:
--------------------------------------------------------------------------------
 1 | package me.ryzeon.transcripts.utils.format;
 2 | 
 3 | import java.util.List;
 4 | import java.util.function.Predicate;
 5 | 
 6 | public interface IFormatHelper {
 7 | 
 8 |     List<String> formats();
 9 | 
10 |     default boolean isFormat(String format) {
11 |         return formats().stream().anyMatch(Predicate.isEqual(format));
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/main/java/me/ryzeon/transcripts/utils/format/impl/AudioFormat.java:
--------------------------------------------------------------------------------
 1 | package me.ryzeon.transcripts.utils.format.impl;
 2 | 
 3 | import me.ryzeon.transcripts.utils.format.IFormatHelper;
 4 | 
 5 | import java.util.Arrays;
 6 | import java.util.List;
 7 | 
 8 | public class AudioFormat implements IFormatHelper {
 9 | 
10 |     final List<String> formats = Arrays.asList("mp3", "wav", "ogg", "flac");
11 | 
12 |     @Override
13 |     public List<String> formats() {
14 |         return formats;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/main/java/me/ryzeon/transcripts/utils/format/impl/ImageFormat.java:
--------------------------------------------------------------------------------
 1 | package me.ryzeon.transcripts.utils.format.impl;
 2 | 
 3 | import me.ryzeon.transcripts.utils.format.IFormatHelper;
 4 | 
 5 | import java.util.Arrays;
 6 | import java.util.List;
 7 | import java.util.function.Predicate;
 8 | 
 9 | public class ImageFormat implements IFormatHelper {
10 | 
11 |     final List<String> formats = Arrays.asList("png", "jpg", "jpeg", "gif");
12 |     @Override
13 |     public List<String> formats() {
14 |         return formats;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/main/java/me/ryzeon/transcripts/utils/format/impl/VideoFormat.java:
--------------------------------------------------------------------------------
 1 | package me.ryzeon.transcripts.utils.format.impl;
 2 | 
 3 | import me.ryzeon.transcripts.utils.format.IFormatHelper;
 4 | 
 5 | import java.util.Arrays;
 6 | import java.util.List;
 7 | 
 8 | public class VideoFormat implements IFormatHelper {
 9 |     final List<String> formats = Arrays.asList("mp4", "webm", "mkv", "avi", "mov", "flv", "wmv", "mpg", "mpeg");
10 |     @Override
11 |     public List<String> formats() {
12 |         return formats;
13 |     }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/main/resources/template.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <title id="transcriptTitle">Here title</title>
  6 |     <meta charset="utf-8">
  7 |     <meta name="viewport" content="width=device-width">
  8 | 
  9 |     <style>
 10 |         @font-face {
 11 |             font-family: Whitney;
 12 |             src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-300.woff);
 13 |             font-weight: 300;
 14 |         }
 15 | 
 16 |         @font-face {
 17 |             font-family: Whitney;
 18 |             src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-400.woff);
 19 |             font-weight: 400;
 20 |         }
 21 | 
 22 |         @font-face {
 23 |             font-family: Whitney;
 24 |             src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-500.woff);
 25 |             font-weight: 500;
 26 |         }
 27 | 
 28 |         @font-face {
 29 |             font-family: Whitney;
 30 |             src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-600.woff);
 31 |             font-weight: 600;
 32 |         }
 33 | 
 34 |         @font-face {
 35 |             font-family: Whitney;
 36 |             src: url(https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/whitney-700.woff);
 37 |             font-weight: 700;
 38 |         }
 39 | 
 40 |         body {
 41 |             background-color: #36393e;
 42 |             color: #dcddde;
 43 |             font-family: "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif;
 44 |             font-size: 17px;
 45 |             font-weight: 400;
 46 |         }
 47 | 
 48 | 		br {
 49 | 			display: block;
 50 | 			margin: 1px 0;
 51 | 		}
 52 | 
 53 |         a {
 54 |             color: #00aff4;
 55 |             text-decoration: none;
 56 |         }
 57 | 
 58 |         a:hover {
 59 |             text-decoration: underline;
 60 |         }
 61 | 
 62 |         img {
 63 |             object-fit: contain;
 64 |         }
 65 | 
 66 |         .markdown {
 67 |             max-width: 100%;
 68 |             line-height: 1.2;
 69 |         }
 70 | 
 71 |         .spoiler-text {
 72 |             background-color: rgba(255, 255, 255, 0.1);
 73 |             border-radius: 3px;
 74 |         }
 75 | 
 76 |         .spoiler-text--hidden {
 77 |             cursor: pointer;
 78 |             background-color: #202225;
 79 |             color: rgba(0, 0, 0, 0);
 80 |         }
 81 | 
 82 |         .spoiler-text--hidden:hover {
 83 |             background-color: rgba(32, 34, 37, 0.8);
 84 |         }
 85 | 
 86 |         .spoiler-text--hidden::selection {
 87 |             color: rgba(0, 0, 0, 0);
 88 |         }
 89 | 
 90 |         .quote {
 91 |             display: flex;
 92 |             margin: 0.05em 0;
 93 |         }
 94 | 
 95 |         .quote::before {
 96 |             content: "";
 97 |             margin-right: 0.5em;
 98 |             border: 2px solid #4f545c;
 99 |             border-radius: 3px;
100 |         }
101 | 
102 |         .pre {
103 |             background-color: #2f3136;
104 |             font-family: "Consolas", "Courier New", Courier, monospace;
105 |         }
106 | 
107 |         .pre--multiline {
108 |             margin-top: 0.25em;
109 |             padding: 0.5em;
110 |             border: 2px solid #282b30;
111 |             border-radius: 5px;
112 |             color: #b9bbbe;
113 |         }
114 | 
115 |         .pre--multiline.hljs {
116 |             background-color: #2f3136;
117 |             color: #b9bbbe;
118 |         }
119 | 
120 |         .pre--inline {
121 |             padding: 2px;
122 |             border-radius: 3px;
123 |             font-size: 0.85em;
124 |         }
125 | 
126 |         .mention {
127 |             border-radius: 3px;
128 |             padding: 0 2px;
129 |             color: #7289da;
130 |             background-color: rgba(114, 137, 218, .1);
131 |             font-weight: 500;
132 |         }
133 | 
134 |         .timestamp {
135 |             border-radius: 3px;
136 |             padding: 0 2px;
137 |             background-color: rgba(255, 255, 255, 0.06);
138 |         }
139 | 
140 |         .emoji {
141 |             width: 1.325em;
142 |             height: 1.325em;
143 |             margin: 0 0.06em;
144 |             vertical-align: -0.4em;
145 |         }
146 | 
147 |         .emoji--small {
148 |             width: 1em;
149 |             height: 1em;
150 |         }
151 | 
152 |         .emoji--large {
153 |             width: 2.8em;
154 |             height: 2.8em;
155 |         }
156 | 
157 |         .preamble {
158 |             display: grid;
159 |             margin: 0 0.3em 0.6em 0.3em;
160 |             max-width: 100%;
161 |             grid-template-columns: auto 1fr;
162 |         }
163 | 
164 |         .preamble__guild-icon-container {
165 |             grid-column: 1;
166 |         }
167 | 
168 |         .preamble__guild-icon {
169 |             max-width: 88px;
170 |             max-height: 88px;
171 |             border-radius: 50%;
172 |         }
173 | 
174 |         .preamble__entries-container {
175 |             grid-column: 2;
176 |             margin-left: 0.6em;
177 |         }
178 | 
179 |         .preamble__entry {
180 |             font-size: 1.4em;
181 |             color: #ffffff;
182 |         }
183 | 
184 |         .preamble__entry--small {
185 |             font-size: 1em;
186 |         }
187 | 
188 |         .chatlog {
189 |             max-width: 100%;
190 |         }
191 | 
192 |         .chatlog__message-group {
193 |             display: grid;
194 |             margin: 0 0.6em;
195 |             padding: 0.9em 0;
196 |             border-top: 1px solid rgba(255, 255, 255, 0.1);
197 |             grid-template-columns: auto 1fr;
198 |         }
199 | 
200 |         .chatlog__reference-symbol {
201 |             grid-column: 1;
202 |             margin: 8px 4px 4px 18px;
203 |             border-left: 2px solid #4f545c;
204 |             border-top: 2px solid #4f545c;
205 |             border-radius: 8px 0 0 0;
206 |         }
207 | 
208 |         .chatlog__reference {
209 |             display: flex;
210 |             grid-column: 2;
211 |             margin-bottom: 0.25em;
212 |             font-size: 0.875em;
213 |             white-space: nowrap;
214 |             overflow: hidden;
215 |             text-overflow: ellipsis;
216 |             align-items: center;
217 |             color: #b5b6b8;
218 |         }
219 | 
220 |         .chatlog__reference-avatar {
221 |             border-radius: 50%;
222 |             width: 16px;
223 |             height: 16px;
224 |             margin-right: 0.25em;
225 |         }
226 | 
227 |         .chatlog__reference-name {
228 |             margin-right: 0.3em;
229 |             font-weight: 600;
230 |         }
231 | 
232 |         .chatlog__reference-content {
233 |             overflow: hidden;
234 |             text-overflow: ellipsis;
235 |         }
236 | 
237 |         .chatlog__reference-content a:hover {
238 |             text-decoration: none;
239 |         }
240 | 
241 |         .chatlog__reference-link {
242 |             cursor: pointer;
243 |             color: #b5b6b8;
244 |         }
245 | 
246 |         .chatlog__reference-link * {
247 |             display: inline;
248 |             pointer-events: none;
249 |         }
250 | 
251 |         .chatlog__reference-link:hover {
252 |             color: #ffffff;
253 |         }
254 | 
255 |         .chatlog__reference-link:hover *:not(.spoiler-text) {
256 |             color: #ffffff;
257 |         }
258 | 
259 |         .chatlog__reference-edited-timestamp {
260 |             margin-left: 0.25em;
261 |             font-size: 0.8em;
262 |             color: rgba(255, 255, 255, 0.2);
263 |         }
264 | 
265 |         .chatlog__author-avatar-container {
266 |             grid-column: 1;
267 |             width: 40px;
268 |             height: 40px;
269 |             margin-right: 16px;
270 |         }
271 | 
272 |         .chatlog__author-avatar {
273 |             border-radius: 50%;
274 |             width: 40px;
275 |             height: 40px;
276 |         }
277 | 
278 |         .chatlog__messages {
279 |             grid-column: 2;
280 |             min-width: 50%;
281 |         }
282 | 
283 |         .chatlog__author-name {
284 |             font-weight: 500;
285 |             color: #ffffff;
286 |         }
287 | 
288 |         .chatlog__timestamp {
289 |             margin-left: 0.3em;
290 |             font-size: 0.75em;
291 |             color: rgba(255, 255, 255, 0.2);
292 |         }
293 | 
294 |         .chatlog__message {
295 |             padding: 0.1em 0.3em;
296 |             margin: 0 -0.3em;
297 |             background-color: transparent;
298 |             transition: background-color 1s ease;
299 |         }
300 | 
301 |         .chatlog__message--highlighted {
302 |             background-color: rgba(114, 137, 218, 0.2);
303 |         }
304 | 
305 |         .chatlog__message--pinned {
306 |             background-color: rgba(249, 168, 37, 0.05);
307 |         }
308 | 
309 |         .chatlog__content {
310 |             font-size: 0.95em;
311 |             word-wrap: break-word;
312 |         }
313 | 
314 |         .chatlog__edited-timestamp {
315 |             margin-left: 0.15em;
316 |             font-size: 0.8em;
317 |         }
318 | 
319 |         .chatlog__attachment {
320 |             display: inline-block;
321 |             position: relative;
322 |             margin-top: 0.3em;
323 |             border-radius: 3px;
324 |             overflow: hidden;
325 |         }
326 | 
327 |         .chatlog__attachment--hidden {
328 |             cursor: pointer;
329 |             box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
330 |         }
331 | 
332 |         .chatlog__attachment--hidden * {
333 |             pointer-events: none;
334 |         }
335 | 
336 |         .chatlog__attachment-spoiler-caption {
337 |             display: none;
338 |             z-index: 999;
339 |             position: absolute;
340 |             left: 50%;
341 |             top: 50%;
342 |             transform: translate(-50%, -50%);
343 |             padding: 0.4em 0.8em;
344 |             background-color: rgba(0, 0, 0, 0.9);
345 |             border-radius: 20px;
346 |             color: #dcddde;
347 |             font-size: 0.9em;
348 |             font-weight: 600;
349 |             letter-spacing: 0.05em;
350 |         }
351 | 
352 |         .chatlog__attachment--hidden .chatlog__attachment-spoiler-caption {
353 |             display: block;
354 |         }
355 | 
356 |         .chatlog__attachment--hidden:hover .chatlog__attachment-spoiler-caption {
357 |             color: #fff;
358 |         }
359 | 
360 |         .chatlog__attachment-media {
361 |             vertical-align: top;
362 |             max-width: 45vw;
363 |             max-height: 500px;
364 |             border-radius: 3px;
365 |         }
366 | 
367 |         .chatlog__attachment--hidden .chatlog__attachment-media {
368 |             filter: blur(44px);
369 |         }
370 | 
371 |         .chatlog__attachment-generic {
372 |             width: 100%;
373 |             max-width: 520px;
374 |             height: 40px;
375 |             padding: 10px;
376 |             background-color: #2f3136;
377 |             border: 1px solid #292b2f;
378 |             border-radius: 3px;
379 |             overflow: hidden;
380 |         }
381 | 
382 |         .chatlog__attachment--hidden .chatlog__attachment-generic {
383 |             filter: blur(44px);
384 |         }
385 | 
386 |         .chatlog__attachment-generic-icon {
387 |             float: left;
388 |             width: 30px;
389 |             height: 100%;
390 |             margin-right: 10px;
391 |         }
392 | 
393 |         .chatlog__attachment-generic-size {
394 |             color: #72767d;
395 |             font-size: 12px;
396 |         }
397 | 
398 |         .chatlog__attachment-generic-name {
399 |             overflow: hidden;
400 |             white-space: nowrap;
401 |             text-overflow: ellipsis;
402 |         }
403 | 
404 |         .chatlog__edited-timestamp {
405 |             color: rgba(255, 255, 255, 0.2);
406 |         }
407 | 
408 |         .chatlog__embed {
409 |             display: flex;
410 |             margin-top: 0.3em;
411 |             max-width: 520px;
412 | 			margin-bottom: 0.9rem;
413 |         }
414 | 
415 |         .chatlog__embed-color-pill {
416 |             flex-shrink: 0;
417 |             width: 0.25em;
418 |             border-top-left-radius: 3px;
419 |             border-bottom-left-radius: 3px;
420 |         }
421 | 
422 |         .chatlog__embed-color-pill--default {
423 |             background-color: #202225;
424 |         }
425 | 
426 |         .chatlog__embed-content-container {
427 |             display: flex;
428 |             flex-direction: column;
429 |             padding: 0.5em 0.6em;
430 |             background-color: #2f3136;
431 |             border: 1px solid rgba(46, 48, 54, 0.6);
432 |             border-top-right-radius: 3px;
433 |             border-bottom-right-radius: 3px;
434 |         }
435 | 
436 |         .chatlog__embed-content {
437 |             display: flex;
438 |             width: 100%;
439 |         }
440 | 
441 |         .chatlog__embed-text {
442 |             flex: 1;
443 |         }
444 | 
445 |         .chatlog__embed-author {
446 |             display: flex;
447 |             margin-bottom: 0.1em;
448 | 			margin-top: 0.1em;
449 |             align-items: center;
450 |         }
451 | 
452 |         .chatlog__embed-author-icon {
453 |             margin-right: 0.5em;
454 |             width: 26px;
455 |             height: 26px;
456 |             border-radius: 50%;
457 |         }
458 | 
459 |         .chatlog__embed-author-name {
460 |             font-size: 0.875em;
461 |             font-weight: 600;
462 |             color: #ffffff
463 |         }
464 | 
465 |         .chatlog__embed-author-name-link {
466 |             color: #ffffff;
467 |         }
468 | 
469 |         .chatlog__embed-title {
470 | 			padding-top: 0.4em;
471 |             font-size: 0.980em;
472 |             font-weight: 600;
473 |             color: #ffffff;
474 |         }
475 | 
476 |         .chatlog__embed-description {
477 |             font-weight: 400;
478 |             font-size: 0.85em;
479 | 			padding-top: 0.6em;
480 |             color: #dcddde;
481 |         }
482 | 
483 |         .chatlog__embed-fields {
484 |             display: flex;
485 |             flex-wrap: wrap;
486 |             gap: 0 0.5em;
487 |         }
488 | 
489 |         .chatlog__embed-field {
490 |             flex: 0;
491 |             min-width: 100%;
492 |             max-width: 506px;
493 |             padding-top: 0.6em;
494 |             font-size: 0.875em;
495 |         }
496 | 
497 |         .chatlog__embed-field--inline {
498 |             flex: 1;
499 |             flex-basis: auto;
500 |             min-width: 150px;
501 |         }
502 | 
503 |         .chatlog__embed-field-name {
504 |             margin-bottom: 0.2em;
505 |             font-weight: 600;
506 |             color: #ffffff;
507 |         }
508 | 
509 |         .chatlog__embed-field-value {
510 |             font-weight: 500;
511 |             color: #dcddde;
512 |         }
513 | 
514 |         .chatlog__embed-thumbnail {
515 |             margin-left: 1.2em;
516 | 			margin-top: 0.3em;
517 |             max-width: 80px;
518 |             max-height: 80px;
519 |             border-radius: 3px;
520 |         }
521 | 
522 |         .chatlog__embed-image-container {
523 |             margin-top: 0.6em;
524 |         }
525 | 
526 |         .chatlog__embed-image {
527 |             max-width: 500px;
528 |             max-height: 400px;
529 |             border-radius: 3px;
530 |         }
531 | 
532 |         .chatlog__embed-footer {
533 |             margin-top: 0.6em;
534 |             color: #dcddde;
535 |         }
536 | 
537 |         .chatlog__embed-footer-icon {
538 |             margin-right: 0.2em;
539 |             width: 20px;
540 |             height: 20px;
541 |             border-radius: 50%;
542 |             vertical-align: middle;
543 |         }
544 | 
545 |         .chatlog__embed-footer-text {
546 |             vertical-align: middle;
547 |             font-size: 0.75em;
548 |             font-weight: 500;
549 |         }
550 | 
551 |         .chatlog__embed-plainimage {
552 |             vertical-align: top;
553 |             max-width: 45vw;
554 |             max-height: 500px;
555 |             border-radius: 3px;
556 |         }
557 | 
558 |         .chatlog__embed-spotify {
559 |             border: 0;
560 |         }
561 | 
562 |         .chatlog__embed-youtube-container {
563 |             margin-top: 0.6em;
564 |         }
565 | 
566 |         .chatlog__embed-youtube {
567 |             border: 0;
568 |             border-radius: 3px;
569 |         }
570 | 
571 |         .chatlog__reactions {
572 |             display: flex;
573 |         }
574 | 
575 |         .chatlog__reaction {
576 |             display: flex;
577 |             align-items: center;
578 |             margin: 0.35em 0.1em 0.1em 0.1em;
579 |             padding: 0.2em 0.35em;
580 |             background-color: rgba(255, 255, 255, 0.05);
581 |             border-radius: 3px;
582 |         }
583 | 
584 |         .chatlog__reaction-count {
585 |             min-width: 9px;
586 |             margin-left: 0.35em;
587 |             font-size: 0.875em;
588 |             color: rgba(255, 255, 255, 0.3);
589 |         }
590 | 
591 |         .chatlog__bot-tag {
592 |             position: relative;
593 |             top: -.1em;
594 |             margin-left: 0.3em;
595 |             padding: 0.05em 0.3em;
596 |             border-radius: 3px;
597 |             line-height: 1.3;
598 |             background-color: #5865F2;
599 |             color: #ffffff;
600 |             font-size: 0.625em;
601 |             font-weight: 500;
602 |         }
603 | 
604 |         .postamble {
605 |             margin: 1.4em 0.3em 0.6em 0.3em;
606 |             padding: 1em;
607 |             border-top: 1px solid rgba(255, 255, 255, 0.1);
608 |         }
609 | 
610 |         .postamble__entry {
611 |             color: #ffffff;
612 |         }
613 | 
614 |         .img.emoji {
615 |             pointer-events: none;
616 |         }
617 |     </style>
618 | 
619 |     <link rel="stylesheet"
620 |         href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/solarized-dark.min.css">
621 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
622 |     <script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>
623 |     <script>
624 |         document.addEventListener('DOMContentLoaded', () => {
625 |             document.querySelectorAll('.pre--multiline').forEach(block => hljs.highlightBlock(block));
626 |         });
627 |     </script>
628 | 
629 | 
630 |     <!-- Script to render emojis as Twemojis -->
631 |     <script>
632 |         window.onload = function() {
633 |             twemoji.parse(document.body);
634 |         }
635 |     </script>
636 | 
637 |     <script>
638 |         function scrollToMessage(event, id) {
639 |             var element = document.getElementById('message-' + id);
640 | 
641 |             if (element) {
642 |                 event.preventDefault();
643 | 
644 |                 element.classList.add('chatlog__message--highlighted');
645 | 
646 |                 window.scrollTo({
647 |                     top: element.getBoundingClientRect().top - document.body.getBoundingClientRect().top - (window.innerHeight / 2),
648 |                     behavior: 'smooth'
649 |                 });
650 | 
651 |                 window.setTimeout(function () {
652 |                     element.classList.remove('chatlog__message--highlighted');
653 |                 }, 2000);
654 |             }
655 |         }
656 | 
657 |         function showSpoiler(event, element) {
658 |             if (element && element.classList.contains('spoiler-text--hidden')) {
659 |                 event.preventDefault();
660 |                 element.classList.remove('spoiler-text--hidden');
661 |             }
662 |             if (element && element.classList.contains('chatlog__attachment--hidden')) {
663 |                 event.preventDefault();
664 |                 element.classList.remove('chatlog__attachment--hidden');
665 |             }
666 |         }
667 |     </script>
668 | 
669 |     <svg style="display: none">
670 |         <symbol id="icon-attachment" viewBox="0 0 720 960">
671 |             <path fill="#f4f5fb"
672 |                   d="M50,935a25,25,0,0,1-25-25V50A25,25,0,0,1,50,25H519.6L695,201.32V910a25,25,0,0,1-25,25Z"/>
673 |             <path fill="#7789c4"
674 |                   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"/>
675 |             <path fill="#f4f5fb"
676 |                   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"/>
677 |             <path fill="#7789c4"
678 |                   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"/>
679 |         </symbol>
680 |     </svg>
681 | </head>
682 | 
683 | <body>
684 | 
685 |     <div class="preamble">
686 |         <div class="preamble__guild-icon-container">
687 |             <img class="preamble__guild-icon " src="https://cdn.discordapp.com/icons/509504839869399064/8513e7314b64acad768ca9679544a74a.png"
688 |                 alt="Guild icon" loading="lazy">
689 |         </div>
690 |         <div class="preamble__entries-container">
691 |             <div class="preamble__entry" id="guildname">Guild Name Here</div>
692 |             <div class="preamble__entry" id="ticketname">Channel Name Here</div>
693 |         </div>
694 |     </div>
695 | 
696 | <div class="chatlog" id="chatlog">
697 | 
698 | </div>
699 | 
700 | </body>
701 | 
702 | </html>


--------------------------------------------------------------------------------