From e1d4c87ff07ff4a5c3ea4f94650098e6084a555e Mon Sep 17 00:00:00 2001
From: Jannik Streidl <jannik.stdl@gmail.com>
Date: Tue, 6 Feb 2024 11:22:34 +0100
Subject: [PATCH] Added the option to show the username in the chat in settings
 -> interface

---
 .../chat/Messages/UserMessage.svelte          | 18 ++++++++----
 .../components/chat/Settings/Interface.svelte | 28 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index a1993648..d9705c46 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -4,7 +4,7 @@
 	import { tick } from 'svelte';
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
-	import { modelfiles } from '$lib/stores';
+	import { modelfiles, settings, user as userStore } from '$lib/stores';
 
 	export let user;
 	export let message;
@@ -58,11 +58,19 @@
 					{#if $modelfiles.map((modelfile) => modelfile.tagName).includes(message.user)}
 						{$modelfiles.find((modelfile) => modelfile.tagName === message.user)?.title}
 					{:else}
-						You <span class=" text-gray-500 text-sm font-medium">{message?.user ?? ''}</span>
+						{#if $settings.showUsername}
+							{$userStore.name}
+						{:else}
+							You <span class=" text-gray-500 text-sm font-medium">{message?.user ?? ''}</span>
+						{/if}
+					{/if}
+					{:else}
+						{#if $settings.showUsername}
+							{$userStore.name}
+						{:else}
+							You
+						{/if}
 					{/if}
-				{:else}
-					You
-				{/if}
 
 				{#if message.timestamp}
 					<span class=" invisible group-hover:visible text-gray-400 text-xs font-medium">
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index 4c142a38..a30e5eac 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -16,6 +16,13 @@
 
 	// Interface
 	let promptSuggestions = [];
+	let showUsername = false;
+
+	const toggleShowUsername = async () => {
+		showUsername = !showUsername;
+		saveSettings({ showUsername: showUsername });
+	};
+
 
 	const toggleSpeechAutoSend = async () => {
 		speechAutoSend = !speechAutoSend;
@@ -64,7 +71,7 @@
 		titleAutoGenerate = settings.titleAutoGenerate ?? true;
 		speechAutoSend = settings.speechAutoSend ?? false;
 		responseAutoCopy = settings.responseAutoCopy ?? false;
-
+		showUsername = settings.showUsername ?? false;
 		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
 	});
 </script>
@@ -139,6 +146,25 @@
 					</button>
 				</div>
 			</div>
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs font-medium">Display the username instead of "You" in the Chat</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						on:click={() => {
+							toggleShowUsername();
+						}}
+						type="button"
+					>
+						{#if showUsername === true}
+							<span class="ml-2 self-center">On</span>
+						{:else}
+							<span class="ml-2 self-center">Off</span>
+						{/if}
+					</button>
+				</div>
+			</div>
 		</div>
 
 		<hr class=" dark:border-gray-700" />