diff --git a/src/lib/components/playground/Chat.svelte b/src/lib/components/playground/Chat.svelte
index f87667cd8..37ffc5b9d 100644
--- a/src/lib/components/playground/Chat.svelte
+++ b/src/lib/components/playground/Chat.svelte
@@ -155,7 +155,6 @@
 			});
 			messages = messages;
 			message = '';
-			role = role === 'user' ? 'assistant' : 'user';
 			await tick();
 			scrollToBottom();
 		}
@@ -163,6 +162,8 @@
 
 	const submitHandler = async () => {
 		if (selectedModelId) {
+			await addHandler();
+
 			loading = true;
 			await chatCompletionHandler();
 
@@ -338,6 +339,7 @@
 									class="px-3.5 py-1.5 text-sm font-medium disabled:bg-gray-50 dark:disabled:hover:bg-gray-850 disabled:cursor-not-allowed bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg"
 									on:click={() => {
 										addHandler();
+										role = role === 'user' ? 'assistant' : 'user';
 									}}
 								>
 									{$i18n.t('Add')}
diff --git a/src/lib/components/playground/Chat/Messages.svelte b/src/lib/components/playground/Chat/Messages.svelte
index 4fd4e212e..69574632f 100644
--- a/src/lib/components/playground/Chat/Messages.svelte
+++ b/src/lib/components/playground/Chat/Messages.svelte
@@ -17,12 +17,11 @@
 	{#each messages as message, idx}
 		<div class="flex gap-2 group">
 			<div class="flex items-start pt-1">
-				<button
-					class="px-2 py-1 text-sm font-semibold uppercase min-w-[6rem] text-left dark:group-hover:bg-gray-800 rounded-lg transition"
-					on:click={() => {
-						message.role = message.role === 'user' ? 'assistant' : 'user';
-					}}>{$i18n.t(message.role)}</button
+				<div
+					class="px-2 py-1 text-sm font-semibold uppercase min-w-[6rem] text-left rounded-lg transition"
 				>
+					{$i18n.t(message.role)}
+				</div>
 			</div>
 
 			<div class="flex-1">