From 47ec443728909e447e1d588cae61cd44311643ce Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 19 Aug 2025 02:03:43 +0400
Subject: [PATCH] refac: temp chat button location

---
 src/lib/components/chat/ModelSelector.svelte  |  4 --
 src/lib/components/chat/Navbar.svelte         | 51 +++++++++++++------
 .../icons/AdjustmentsHorizontal.svelte        |  4 +-
 .../components/icons/ChatBubbleDotted.svelte  | 20 ++++++++
 .../icons/ChatBubbleDottedChecked.svelte      | 21 ++++++++
 5 files changed, 80 insertions(+), 20 deletions(-)
 create mode 100644 src/lib/components/icons/ChatBubbleDotted.svelte
 create mode 100644 src/lib/components/icons/ChatBubbleDottedChecked.svelte

diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte
index b215ad589..f247ce118 100644
--- a/src/lib/components/chat/ModelSelector.svelte
+++ b/src/lib/components/chat/ModelSelector.svelte
@@ -58,10 +58,6 @@
 							label: model.name,
 							model: model
 						}))}
-						showTemporaryChatControl={$user?.role === 'user'
-							? ($user?.permissions?.chat?.temporary ?? true) &&
-								!($user?.permissions?.chat?.temporary_enforced ?? false)
-							: true}
 						{pinModelHandler}
 						bind:value={selectedModel}
 					/>
diff --git a/src/lib/components/chat/Navbar.svelte b/src/lib/components/chat/Navbar.svelte
index b44ced62d..7012583ae 100644
--- a/src/lib/components/chat/Navbar.svelte
+++ b/src/lib/components/chat/Navbar.svelte
@@ -30,6 +30,12 @@
 	import Banner from '../common/Banner.svelte';
 	import Sidebar from '../icons/Sidebar.svelte';
 
+	import ChatBubbleDotted from '../icons/ChatBubbleDotted.svelte';
+	import ChatBubbleDottedChecked from '../icons/ChatBubbleDottedChecked.svelte';
+
+	import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
+	import { goto } from '$app/navigation';
+
 	const i18n = getContext('i18n');
 
 	export let initNewChat: Function;
@@ -98,6 +104,34 @@
 
 				<div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400">
 					<!-- <div class="md:hidden flex self-center w-[1px] h-5 mx-2 bg-gray-300 dark:bg-stone-700" /> -->
+
+					{#if !chat?.id && ($user?.role === 'user' ? ($user?.permissions?.chat?.temporary ?? true) && !($user?.permissions?.chat?.temporary_enforced ?? false) : true)}
+						<Tooltip content={$i18n.t(`Temporary Chat`)}>
+							<button
+								class="flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
+								id="temporary-chat-button"
+								on:click={async () => {
+									temporaryChatEnabled.set(!$temporaryChatEnabled);
+									await goto('/');
+									// add 'temporary-chat=true' to the URL
+									if ($temporaryChatEnabled) {
+										window.history.replaceState(null, '', '?temporary-chat=true');
+									} else {
+										window.history.replaceState(null, '', location.pathname);
+									}
+								}}
+							>
+								<div class=" m-auto self-center">
+									{#if $temporaryChatEnabled}
+										<ChatBubbleDottedChecked className=" size-4.5" strokeWidth="1.5" />
+									{:else}
+										<ChatBubbleDotted className=" size-4.5" strokeWidth="1.5" />
+									{/if}
+								</div>
+							</button>
+						</Tooltip>
+					{/if}
+
 					{#if shareEnabled && chat && (chat.id || $temporaryChatEnabled)}
 						<Menu
 							{chat}
@@ -114,20 +148,7 @@
 								id="chat-context-menu-button"
 							>
 								<div class=" m-auto self-center">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="size-5"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
-										/>
-									</svg>
+									<EllipsisHorizontal className=" size-5" strokeWidth="1.5" />
 								</div>
 							</button>
 						</Menu>
@@ -143,7 +164,7 @@
 								aria-label="Controls"
 							>
 								<div class=" m-auto self-center">
-									<AdjustmentsHorizontal className=" size-5" strokeWidth="0.5" />
+									<AdjustmentsHorizontal className=" size-5" strokeWidth="1" />
 								</div>
 							</button>
 						</Tooltip>
diff --git a/src/lib/components/icons/AdjustmentsHorizontal.svelte b/src/lib/components/icons/AdjustmentsHorizontal.svelte
index 4cc509e84..d45b87b6e 100644
--- a/src/lib/components/icons/AdjustmentsHorizontal.svelte
+++ b/src/lib/components/icons/AdjustmentsHorizontal.svelte
@@ -12,6 +12,8 @@
 	stroke-width={strokeWidth}
 >
 	<path
-		d="M18.75 12.75h1.5a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM12 6a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 6ZM12 18a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 18ZM3.75 6.75h1.5a.75.75 0 1 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM5.25 18.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 0 1.5ZM3 12a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 12ZM9 3.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM12.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM9 15.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"
 	/>
 </svg>
diff --git a/src/lib/components/icons/ChatBubbleDotted.svelte b/src/lib/components/icons/ChatBubbleDotted.svelte
new file mode 100644
index 000000000..fb2d18e7c
--- /dev/null
+++ b/src/lib/components/icons/ChatBubbleDotted.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.8214 2.48697 15.5291 3.33782 17L2.5 21.5L7 20.6622C8.47087 21.513 10.1786 22 12 22Z"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-dasharray="2.5 3.5"
+	></path>
+</svg>
diff --git a/src/lib/components/icons/ChatBubbleDottedChecked.svelte b/src/lib/components/icons/ChatBubbleDottedChecked.svelte
new file mode 100644
index 000000000..6a4e1c8e1
--- /dev/null
+++ b/src/lib/components/icons/ChatBubbleDottedChecked.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path d="M8 12L11 15L16 10" stroke-linecap="round" stroke-linejoin="round"></path>
+	<path
+		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.8214 2.48697 15.5291 3.33782 17L2.5 21.5L7 20.6622C8.47087 21.513 10.1786 22 12 22Z"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-dasharray="2.5 3.5"
+	></path>
+</svg>