diff --git a/components/Message.vue b/components/Message.vue
index 82bc151..71f0e9c 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -40,7 +40,7 @@
-
+
{{ author?.display_name || author?.username }}
@@ -75,6 +75,7 @@ import { parse } from 'marked';
import type { MessageProps } from '~/types/props';
import MessageMedia from './MessageMedia.vue';
import MessageReply from './UserInterface/MessageReply.vue';
+import generateIrcColor from '~/utils/generateIrcColor';
const props = defineProps();
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index c91efe8..9a8f17f 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -7,6 +7,7 @@
:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me"
:message="message" :is-reply="message.reply_to"
+ :author-color="`${generateIrcColor(message.user.uuid)}`"
:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
diff --git a/package.json b/package.json
index 5d7d19e..42347b1 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
"pinia-plugin-persistedstate": "^4.2.0",
"typescript": "^5.8.3",
"vue": "^3.5.13",
- "vue-router": "^4.5.1"
+ "vue-router": "^4.5.1",
+ "xxhash-wasm": "^1.1.0"
},
"packageManager": "pnpm@10.11.0",
"license": "MIT",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a8cf2c..6b461e5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ importers:
vue-router:
specifier: ^4.5.1
version: 4.5.1(vue@3.5.13(typescript@5.8.3))
+ xxhash-wasm:
+ specifier: ^1.1.0
+ version: 1.1.0
devDependencies:
'@iconify-json/lucide':
specifier: ^1.2.44
@@ -4744,6 +4747,9 @@ packages:
engines: {node: '>= 0.10.0'}
hasBin: true
+ xxhash-wasm@1.1.0:
+ resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}
+
y18n@5.0.8:
resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
engines: {node: '>=10'}
@@ -10146,6 +10152,8 @@ snapshots:
cssfilter: 0.0.10
optional: true
+ xxhash-wasm@1.1.0: {}
+
y18n@5.0.8: {}
yallist@3.1.1: {}
diff --git a/types/props.ts b/types/props.ts
index aa6ff0c..fe2b049 100644
--- a/types/props.ts
+++ b/types/props.ts
@@ -9,6 +9,7 @@ export interface MessageProps {
format: "12" | "24",
type: "normal" | "grouped",
marginBottom: boolean,
+ authorColor: string,
last: boolean,
messageId: string,
replyingTo?: boolean,
diff --git a/utils/generateIrcColor.ts b/utils/generateIrcColor.ts
new file mode 100644
index 0000000..24d4946
--- /dev/null
+++ b/utils/generateIrcColor.ts
@@ -0,0 +1,15 @@
+import xxhash from "xxhash-wasm"
+
+let h64: CallableFunction;
+(async () => {
+ h64 = (await xxhash()).h64;
+})();
+
+export default (seed: string): string => {
+ const lightness = 50
+
+ // this should probably be cached eventually
+ const idHash = h64(seed)
+
+ return `hsl(${idHash % 360n}, 100%, ${lightness}%)`
+}
\ No newline at end of file