diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 467e419e7043bc74b1544ee227685a0ddbe2f8ba..0e16cea3d461e7a9cb27d16b9258adfad93fcc4c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"emoji-picker-element": "^1.21.3",
"jquery": "^3.7.1",
+ "svelte-gravatar": "^1.0.3",
"svelte-i18n": "^4.0.0",
"svelte-material-icons": "^3.0.5",
"svelte-select": "^5.8.3"
@@ -33,7 +34,6 @@
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
- "jquery": "^3.7.1",
"jwt-decode": "^4.0.0",
"less": "^4.2.0",
"postcss": "^8.4.35",
@@ -1863,6 +1863,14 @@
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
+ "node_modules/charenc": {
+ "version": "0.0.2",
+ "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+ "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
+ "engines": {
+ "node": "*"
+ }
+ },
"node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -2013,6 +2021,14 @@
"node": ">= 8"
}
},
+ "node_modules/crypt": {
+ "version": "0.0.2",
+ "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+ "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
+ "engines": {
+ "node": "*"
+ }
+ },
"node_modules/css-selector-tokenizer": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
@@ -3069,6 +3085,11 @@
"node": ">=8"
}
},
+ "node_modules/is-buffer": {
+ "version": "1.1.6",
+ "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+ "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+ },
"node_modules/is-builtin-module": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
@@ -3206,8 +3227,7 @@
"node_modules/jquery": {
"version": "3.7.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
- "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
- "dev": true
+ "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
},
"node_modules/js-yaml": {
"version": "4.1.0",
@@ -3408,6 +3428,16 @@
"semver": "bin/semver"
}
},
+ "node_modules/md5": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+ "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+ "dependencies": {
+ "charenc": "0.0.2",
+ "crypt": "0.0.2",
+ "is-buffer": "~1.1.6"
+ }
+ },
"node_modules/mdn-data": {
"version": "2.0.30",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -4665,6 +4695,27 @@
"@floating-ui/dom": "^1.5.3"
}
},
+ "node_modules/svelte-gravatar": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/svelte-gravatar/-/svelte-gravatar-1.0.3.tgz",
+ "integrity": "sha512-CNxIV2lAuiqwdaPrGAM/BFj5U1dNNQXzeyh+HVi/48BODFXoDy0L1CMqYyvM+aKiF4ideZUBwT0S9/C1BeL5oA==",
+ "dependencies": {
+ "md5": "^2.2.1",
+ "svelte": "^3.16.0",
+ "svelte-waypoint": "^0.1.3"
+ },
+ "peerDependencies": {
+ "svelte": "*"
+ }
+ },
+ "node_modules/svelte-gravatar/node_modules/svelte": {
+ "version": "3.59.2",
+ "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.59.2.tgz",
+ "integrity": "sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==",
+ "engines": {
+ "node": ">= 8"
+ }
+ },
"node_modules/svelte-hero-icons": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/svelte-hero-icons/-/svelte-hero-icons-5.1.0.tgz",
@@ -5207,6 +5258,11 @@
"svelte-floating-ui": "1.5.8"
}
},
+ "node_modules/svelte-waypoint": {
+ "version": "0.1.4",
+ "resolved": "https://registry.npmjs.org/svelte-waypoint/-/svelte-waypoint-0.1.4.tgz",
+ "integrity": "sha512-UEqoXZjJeKj2sWlAIsBOFjxjMn+KP8aFCc/zjdmZi1cCOE59z6T2C+I6ZaAf8EmNQqNzfZVB/Lci4Ci9spzXAw=="
+ },
"node_modules/sveltekit-i18n": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/sveltekit-i18n/-/sveltekit-i18n-2.4.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index af45da805b582ed6997adde6d8383c45dc341d7d..06f92529c194f86f11720db8694479a86c0565e5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -48,6 +48,7 @@
"dependencies": {
"emoji-picker-element": "^1.21.3",
"jquery": "^3.7.1",
+ "svelte-gravatar": "^1.0.3",
"svelte-i18n": "^4.0.0",
"svelte-material-icons": "^3.0.5",
"svelte-select": "^5.8.3"
diff --git a/frontend/src/lib/components/sessions/message.svelte b/frontend/src/lib/components/sessions/message.svelte
index 4cb6d9227173ef3e65cd1c2ab754bf12931add17..348dde6a774a4ba41d9039de07f9517fbbd990ec 100644
--- a/frontend/src/lib/components/sessions/message.svelte
+++ b/frontend/src/lib/components/sessions/message.svelte
@@ -1,8 +1,9 @@
<script lang="ts">
import type Message from '$lib/types/message';
import { displayTime } from '$lib/utils/date';
- import { AcademicCap, Check, Icon, Sparkles, User } from 'svelte-hero-icons';
+ import { Check, Icon } from 'svelte-hero-icons';
import { user } from '$lib/types/user';
+ import Gravatar from 'svelte-gravatar';
export let message: Message;
@@ -19,14 +20,13 @@
</script>
<div class="chat" class:chat-start={!isSender} class:chat-end={isSender}>
- <div class="rounded-full p-3 mx-2 bg-gray-200 chat-image" title={message.user.nickname}>
- {#if message.user.type == 0}
- <Icon src={Sparkles} class="w-6 m-auto" />
- {:else if message.user.type == 1}
- <Icon src={AcademicCap} class="w-6 m-auto" />
- {:else}
- <Icon src={User} class="w-6 m-auto" />
- {/if}
+ <div class="rounded-full mx-2 chat-image size-12" title={message.user.nickname}>
+ <Gravatar
+ email={message.user.email}
+ size={64}
+ title={message.user.nickname}
+ class="rounded-full"
+ />
</div>
<div class="chat-bubble whitespace-pre-wrap" class:chat-bubble-primary={!isSender}>
{message.content}
diff --git a/frontend/src/routes/session/+page.svelte b/frontend/src/routes/session/+page.svelte
index dd110f559dc1bfb59d694eda0d7c7e6c03a68601..cdc89480fbce27ada5f3afd4156218ab923e6651 100644
--- a/frontend/src/routes/session/+page.svelte
+++ b/frontend/src/routes/session/+page.svelte
@@ -6,7 +6,7 @@
import { getBaseURL } from '$lib/utils/login';
import { onMount } from 'svelte';
import { user } from '$lib/types/user';
- import { AcademicCap, Icon, Sparkles, User } from 'svelte-hero-icons';
+ import Gravatar from 'svelte-gravatar';
export let data;
let session: Session | null = null;
@@ -40,13 +40,14 @@
: 'marker:text-red-500'} marker:text-3xl"
>
<div class="inline-flex space-x-2">
- {#if sessionUser.type == 0}
- <Icon src={Sparkles} class="w-5" />
- {:else if sessionUser.type == 1}
- <Icon src={AcademicCap} class="w-5" />
- {:else}
- <Icon src={User} class="w-5" />
- {/if}
+ <div class="rounded-full mx-2 chat-image size-6" title={sessionUser.nickname}>
+ <Gravatar
+ email={sessionUser.email}
+ size={64}
+ title={sessionUser.nickname}
+ class="rounded-full"
+ />
+ </div>
<span class:font-bold={sessionUser === $user}>{sessionUser.nickname}</span>
</div>