From b61138e67629c473c01a45f88e2943d286211304 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 3 Feb 2025 19:54:20 -0800
Subject: [PATCH] refac: message input

---
 src/lib/components/chat/MessageInput.svelte   | 77 ++++++++++++++-----
 .../chat/MessageInput/InputMenu.svelte        | 64 ---------------
 src/lib/components/icons/CommandLine.svelte   | 19 +++++
 src/lib/components/icons/Photo.svelte         | 21 +++++
 4 files changed, 99 insertions(+), 82 deletions(-)
 create mode 100644 src/lib/components/icons/CommandLine.svelte
 create mode 100644 src/lib/components/icons/Photo.svelte

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index b277479bf..ef12211d5 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -22,24 +22,27 @@
 	import { blobToFile, compressImage, createMessagesList, findWordIndices } from '$lib/utils';
 	import { transcribeAudio } from '$lib/apis/audio';
 	import { uploadFile } from '$lib/apis/files';
-	import { getTools } from '$lib/apis/tools';
+	import { generateAutoCompletion } from '$lib/apis';
+	import { deleteFileById } from '$lib/apis/files';
 
 	import { WEBUI_BASE_URL, WEBUI_API_BASE_URL, PASTED_TEXT_CHARACTER_LIMIT } from '$lib/constants';
 
-	import Tooltip from '../common/Tooltip.svelte';
 	import InputMenu from './MessageInput/InputMenu.svelte';
-	import Headphone from '../icons/Headphone.svelte';
 	import VoiceRecording from './MessageInput/VoiceRecording.svelte';
-	import FileItem from '../common/FileItem.svelte';
 	import FilesOverlay from './MessageInput/FilesOverlay.svelte';
 	import Commands from './MessageInput/Commands.svelte';
-	import XMark from '../icons/XMark.svelte';
+
 	import RichTextInput from '../common/RichTextInput.svelte';
-	import { generateAutoCompletion } from '$lib/apis';
-	import { error, text } from '@sveltejs/kit';
+	import Tooltip from '../common/Tooltip.svelte';
+	import FileItem from '../common/FileItem.svelte';
 	import Image from '../common/Image.svelte';
-	import { deleteFileById } from '$lib/apis/files';
+
+	import XMark from '../icons/XMark.svelte';
+	import Headphone from '../icons/Headphone.svelte';
 	import GlobeAlt from '../icons/GlobeAlt.svelte';
+	import PhotoSolid from '../icons/PhotoSolid.svelte';
+	import Photo from '../icons/Photo.svelte';
+	import CommandLine from '../icons/CommandLine.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -1112,19 +1115,57 @@
 											</button>
 										</InputMenu>
 
-										{#if $config?.features?.enable_web_search}
-											<Tooltip content={$i18n.t('Search the internet')} placement="top">
+										{#if $_user}
+											{#if $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)}
+												<Tooltip content={$i18n.t('Search the internet')} placement="top">
+													<button
+														on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
+														type="button"
+														class="px-1.5 sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {webSearchEnabled
+															? 'bg-blue-100 dark:bg-blue-500/20 text-blue-500 dark:text-blue-400'
+															: 'bg-transparent text-gray-600 dark:text-gray-400 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}"
+													>
+														<GlobeAlt className="size-5" strokeWidth="1.75" />
+														<span
+															class="hidden sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
+															>{$i18n.t('Web Search')}</span
+														>
+													</button>
+												</Tooltip>
+											{/if}
+
+											{#if $config?.features?.enable_image_generation && ($_user.role === 'admin' || $_user?.permissions?.features?.image_generation)}
+												<Tooltip content={$i18n.t('Image generation')} placement="top">
+													<button
+														on:click|preventDefault={() =>
+															(imageGenerationEnabled = !imageGenerationEnabled)}
+														type="button"
+														class="px-1.5 sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {imageGenerationEnabled
+															? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400'
+															: 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}"
+													>
+														<Photo className="size-5" strokeWidth="1.75" />
+														<span
+															class="hidden sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
+															>{$i18n.t('Image')}</span
+														>
+													</button>
+												</Tooltip>
+											{/if}
+
+											<Tooltip content={$i18n.t('Code Intepreter')} placement="top">
 												<button
-													on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
+													on:click|preventDefault={() =>
+														(codeInterpreterEnabled = !codeInterpreterEnabled)}
 													type="button"
-													class="px-1.5 sm:px-2.5 py-1.5 flex items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none gap-1 max-w-full overflow-hidden {webSearchEnabled
-														? 'bg-blue-100 text-blue-500 border-slate-300'
-														: 'bg-transparent text-gray-600 border-gray-200 hover:bg-gray-100'}"
+													class="px-1.5 sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {codeInterpreterEnabled
+														? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400'
+														: 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}"
 												>
-													<GlobeAlt className="size-5" strokeWidth="1.75" />
+													<CommandLine className="size-5" strokeWidth="1.75" />
 													<span
 														class="hidden sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
-														>{$i18n.t('Web Search')}</span
+														>{$i18n.t('Code Intepreter')}</span
 													>
 												</button>
 											</Tooltip>
@@ -1187,7 +1228,7 @@
 													<Tooltip content={$i18n.t('Call')}>
 														<button
 															class=" {webSearchEnabled
-																? 'bg-blue-500 text-white hover:bg-blue-400 dark:bg-blue-100 dark:text-blue-900 dark:hover:bg-blue-50'
+																? 'bg-blue-500 text-white hover:bg-blue-400 '
 																: 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100'} transition rounded-full p-1.5 self-center"
 															type="button"
 															on:click={async () => {
@@ -1242,7 +1283,7 @@
 															id="send-message-button"
 															class="{prompt !== ''
 																? webSearchEnabled
-																	? 'bg-blue-500 text-white hover:bg-blue-400 dark:bg-blue-100 dark:text-blue-900 dark:hover:bg-blue-50'
+																	? 'bg-blue-500 text-white hover:bg-blue-400 '
 																	: 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
 																: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 self-center"
 															type="submit"
diff --git a/src/lib/components/chat/MessageInput/InputMenu.svelte b/src/lib/components/chat/MessageInput/InputMenu.svelte
index cb0aa11dc..faa14a9a7 100644
--- a/src/lib/components/chat/MessageInput/InputMenu.svelte
+++ b/src/lib/components/chat/MessageInput/InputMenu.svelte
@@ -25,8 +25,6 @@
 
 	export let selectedToolIds: string[] = [];
 
-	export let webSearchEnabled: boolean;
-	export let imageGenerationEnabled: boolean;
 	export let codeInterpreterEnabled: boolean;
 
 	export let onClose: Function;
@@ -34,18 +32,6 @@
 	let tools = {};
 	let show = false;
 
-	let showImageGeneration = false;
-
-	$: showImageGeneration =
-		$config?.features?.enable_image_generation &&
-		($user.role === 'admin' || $user?.permissions?.features?.image_generation);
-
-	let showWebSearch = false;
-
-	$: showWebSearch =
-		$config?.features?.enable_web_search &&
-		($user.role === 'admin' || $user?.permissions?.features?.web_search);
-
 	$: if (show) {
 		init();
 	}
@@ -134,56 +120,6 @@
 				<hr class="border-black/5 dark:border-white/5 my-1" />
 			{/if}
 
-			{#if showImageGeneration}
-				<button
-					class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
-					on:click={() => {
-						imageGenerationEnabled = !imageGenerationEnabled;
-					}}
-				>
-					<div class="flex-1 flex items-center gap-2">
-						<PhotoSolid />
-						<div class=" line-clamp-1">{$i18n.t('Image')}</div>
-					</div>
-
-					<Switch state={imageGenerationEnabled} />
-				</button>
-			{/if}
-
-			<button
-				class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
-				on:click={() => {
-					codeInterpreterEnabled = !codeInterpreterEnabled;
-				}}
-			>
-				<div class="flex-1 flex items-center gap-2">
-					<CommandLineSolid />
-					<div class=" line-clamp-1">{$i18n.t('Code Intepreter')}</div>
-				</div>
-
-				<Switch state={codeInterpreterEnabled} />
-			</button>
-
-			{#if showWebSearch}
-				<button
-					class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
-					on:click={() => {
-						webSearchEnabled = !webSearchEnabled;
-					}}
-				>
-					<div class="flex-1 flex items-center gap-2">
-						<GlobeAltSolid />
-						<div class=" line-clamp-1">{$i18n.t('Web Search')}</div>
-					</div>
-
-					<Switch state={webSearchEnabled} />
-				</button>
-			{/if}
-
-			{#if showImageGeneration || showWebSearch}
-				<hr class="border-black/5 dark:border-white/5 my-1" />
-			{/if}
-
 			{#if !$mobile}
 				<Tooltip
 					content={!fileUploadEnabled ? $i18n.t('You do not have permission to upload files') : ''}
diff --git a/src/lib/components/icons/CommandLine.svelte b/src/lib/components/icons/CommandLine.svelte
new file mode 100644
index 000000000..2d9d1512e
--- /dev/null
+++ b/src/lib/components/icons/CommandLine.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'w-4 h-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
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"
+	/>
+</svg>
diff --git a/src/lib/components/icons/Photo.svelte b/src/lib/components/icons/Photo.svelte
new file mode 100644
index 000000000..2933ba633
--- /dev/null
+++ b/src/lib/components/icons/Photo.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	stroke-width={strokeWidth}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="m3 16 5-7 6 6.5m6.5 2.5L16 13l-4.286 6M14 10h.01M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"
+	/>
+</svg>