I can send multiple messages with my avatar showing only once
+ That's how Discord handles multiple messages from the same author as wellJust keep in mind that Discord does some funky stuff like with time between messages, this library doesn't automatically
+ change what is displayed!
+
+
+
With subsequent messages in compact mode
+
+ I can send multiple messages with my avatar showing only once
+ That's how Discord handles multiple messages from the same author as wellWith subsequent messages
change what is displayed!
+
Markdown Styling
diff --git a/packages/core/src/components/discord-message/DiscordMessage.ts b/packages/core/src/components/discord-message/DiscordMessage.ts
index 54a63fbb9..485295b98 100644
--- a/packages/core/src/components/discord-message/DiscordMessage.ts
+++ b/packages/core/src/components/discord-message/DiscordMessage.ts
@@ -2,6 +2,7 @@ import { consume } from '@lit/context';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
+import { createRef, ref, type Ref } from 'lit/directives/ref.js';
import { when } from 'lit/directives/when.js';
import { avatars, profiles } from '../../config.js';
import type { DiscordMessageProps, Profile, LightTheme, DiscordTimestamp } from '../../types.js';
@@ -35,10 +36,12 @@ export class DiscordMessage extends LitElement implements DiscordMessageProps, L
padding-right: 48px;
margin-top: inherit;
margin-bottom: inherit;
+ line-height: 16px;
}
.discord-message-inner {
display: flex;
+ align-items: center;
position: relative;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
@@ -46,6 +49,7 @@ export class DiscordMessage extends LitElement implements DiscordMessageProps, L
}
:host([message-body-only]) {
+ min-height: 24px !important;
margin-top: 0px !important;
padding-top: 0.125rem !important;
padding-bottom: 0.0625rem !important;
@@ -244,6 +248,8 @@ export class DiscordMessage extends LitElement implements DiscordMessageProps, L
}
`;
+ protected messageBodyOnlyTimeRef: Ref = createRef();
+
/**
* The id of the profile data to use.
*/
@@ -337,6 +343,12 @@ export class DiscordMessage extends LitElement implements DiscordMessageProps, L
})
public accessor timestamp: DiscordTimestamp = new Date();
+ /**
+ * The timestamp to use for the message time if {@link DiscordMessage.messageBodyOnly} is `true`.
+ */
+ @property({ type: String, attribute: 'message-body-only-time' })
+ public accessor messageBodyOnlyTime: DiscordTimestamp | null = null;
+
/**
* Whether to use 24-hour format for the timestamp.
*/
@@ -373,8 +385,17 @@ export class DiscordMessage extends LitElement implements DiscordMessageProps, L
);
}
- private resolveAvatar(avatar: string | undefined): string {
- return avatar === undefined ? avatars.default : avatars[avatar] ?? avatar ?? avatars.default;
+ protected handleMessageEnter() {
+ if (this.messageBodyOnly && this.messageBodyOnlyTimeRef.value && this.messageBodyOnlyTime) {
+ const computedTimestamp = handleTimestamp(this.messageBodyOnlyTime, true, this.twentyFour);
+ this.messageBodyOnlyTimeRef.value.textContent = computedTimestamp ?? '';
+ }
+ }
+
+ protected handleMessageLeave() {
+ if (this.messageBodyOnlyTimeRef.value) {
+ this.messageBodyOnlyTimeRef.value.textContent = '';
+ }
}
protected override render() {
@@ -392,19 +413,24 @@ export class DiscordMessage extends LitElement implements DiscordMessageProps, L
const profileData: Profile = ((this.profile !== undefined && Reflect.get(profiles, this.profile)) as Profile) || {};
const profile: Profile = { ...defaultData, ...profileData, avatar: this.resolveAvatar(profileData.avatar ?? this.avatar) };
- const computedTimestamp = handleTimestamp(this.timestamp, this.compactMode, this.twentyFour);
+ const computedTimestamp = handleTimestamp(this.timestamp, this.compactMode, this.twentyFour) ?? undefined;
return html`
-