From 7bcb43000823298711db8769831f4fd38ba7af64 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 10 Nov 2024 19:11:06 -0800
Subject: [PATCH] enh: web search indicator

---
 .../components/admin/UserChatsModal.svelte    |  2 +-
 src/lib/components/chat/MessageInput.svelte   | 90 +++++++++++++------
 2 files changed, 65 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/admin/UserChatsModal.svelte b/src/lib/components/admin/UserChatsModal.svelte
index 535dee074..9f39af0ff 100644
--- a/src/lib/components/admin/UserChatsModal.svelte
+++ b/src/lib/components/admin/UserChatsModal.svelte
@@ -75,7 +75,7 @@
 				{#if chats.length > 0}
 					<div class="text-left text-sm w-full mb-4 max-h-[22rem] overflow-y-scroll">
 						<div class="relative overflow-x-auto">
-							<table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto">
+							<table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-fixed">
 								<thead
 									class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 dark:border-gray-800"
 								>
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 6dd6ff258..2767b296e 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -289,35 +289,71 @@
 			</div>
 
 			<div class="w-full relative">
-				{#if atSelectedModel !== undefined}
+				{#if atSelectedModel !== undefined || webSearchEnabled}
 					<div
-						class="px-3 py-1 text-left w-full flex justify-between items-center absolute bottom-0 left-0 right-0 bg-gradient-to-t from-white dark:from-gray-900 z-10"
+						class="px-3 py-1 text-left w-full flex flex-col absolute bottom-0 left-0 right-0 bg-gradient-to-t from-white dark:from-gray-900 z-10"
 					>
-						<div class="flex items-center gap-2 text-sm dark:text-gray-500">
-							<img
-								crossorigin="anonymous"
-								alt="model profile"
-								class="size-4 max-w-[28px] object-cover rounded-full"
-								src={$models.find((model) => model.id === atSelectedModel.id)?.info?.meta
-									?.profile_image_url ??
-									($i18n.language === 'dg-DG'
-										? `/doge.png`
-										: `${WEBUI_BASE_URL}/static/favicon.png`)}
-							/>
-							<div>
-								Talking to <span class=" font-medium">{atSelectedModel.name}</span>
+						{#if atSelectedModel !== undefined}
+							<div class="flex items-center justify-between w-full">
+								<div class="flex items-center gap-2 text-sm dark:text-gray-500">
+									<img
+										crossorigin="anonymous"
+										alt="model profile"
+										class="size-3.5 max-w-[28px] object-cover rounded-full"
+										src={$models.find((model) => model.id === atSelectedModel.id)?.info?.meta
+											?.profile_image_url ??
+											($i18n.language === 'dg-DG'
+												? `/doge.png`
+												: `${WEBUI_BASE_URL}/static/favicon.png`)}
+									/>
+									<div>
+										Talking to <span class=" font-medium">{atSelectedModel.name}</span>
+									</div>
+								</div>
+								<div>
+									<button
+										class="flex items-center dark:text-gray-500"
+										on:click={() => {
+											atSelectedModel = undefined;
+										}}
+									>
+										<XMark />
+									</button>
+								</div>
 							</div>
-						</div>
-						<div>
-							<button
-								class="flex items-center"
-								on:click={() => {
-									atSelectedModel = undefined;
-								}}
-							>
-								<XMark />
-							</button>
-						</div>
+						{/if}
+
+						{#if webSearchEnabled}
+							<div class="flex items-center justify-between w-full">
+								<div class="flex items-center gap-2 text-sm dark:text-gray-500">
+									<div>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 16 16"
+											fill="currentColor"
+											class="size-3.5"
+										>
+											<path
+												fill-rule="evenodd"
+												d="M3.757 4.5c.18.217.376.42.586.608.153-.61.354-1.175.596-1.678A5.53 5.53 0 0 0 3.757 4.5ZM8 1a6.994 6.994 0 0 0-7 7 7 7 0 1 0 7-7Zm0 1.5c-.476 0-1.091.386-1.633 1.427-.293.564-.531 1.267-.683 2.063A5.48 5.48 0 0 0 8 6.5a5.48 5.48 0 0 0 2.316-.51c-.152-.796-.39-1.499-.683-2.063C9.09 2.886 8.476 2.5 8 2.5Zm3.657 2.608a8.823 8.823 0 0 0-.596-1.678c.444.298.842.659 1.182 1.07-.18.217-.376.42-.586.608Zm-1.166 2.436A6.983 6.983 0 0 1 8 8a6.983 6.983 0 0 1-2.49-.456 10.703 10.703 0 0 0 .202 2.6c.72.231 1.49.356 2.288.356.798 0 1.568-.125 2.29-.356a10.705 10.705 0 0 0 .2-2.6Zm1.433 1.85a12.652 12.652 0 0 0 .018-2.609c.405-.276.78-.594 1.117-.947a5.48 5.48 0 0 1 .44 2.262 7.536 7.536 0 0 1-1.575 1.293Zm-2.172 2.435a9.046 9.046 0 0 1-3.504 0c.039.084.078.166.12.244C6.907 13.114 7.523 13.5 8 13.5s1.091-.386 1.633-1.427c.04-.078.08-.16.12-.244Zm1.31.74a8.5 8.5 0 0 0 .492-1.298c.457-.197.893-.43 1.307-.696a5.526 5.526 0 0 1-1.8 1.995Zm-6.123 0a8.507 8.507 0 0 1-.493-1.298 8.985 8.985 0 0 1-1.307-.696 5.526 5.526 0 0 0 1.8 1.995ZM2.5 8.1c.463.5.993.935 1.575 1.293a12.652 12.652 0 0 1-.018-2.608 7.037 7.037 0 0 1-1.117-.947 5.48 5.48 0 0 0-.44 2.262Z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									</div>
+									<div>{$i18n.t('Search the web')}</div>
+								</div>
+								<div>
+									<button
+										class="flex items-center dark:text-gray-500"
+										on:click={() => {
+											webSearchEnabled = false;
+										}}
+									>
+										<XMark />
+									</button>
+								</div>
+							</div>
+						{/if}
 					</div>
 				{/if}
 
@@ -659,6 +695,7 @@
 												if (e.key === 'Escape') {
 													console.log('Escape');
 													atSelectedModel = undefined;
+													webSearchEnabled = false;
 												}
 											}}
 											on:paste={async (e) => {
@@ -826,6 +863,7 @@
 											if (e.key === 'Escape') {
 												console.log('Escape');
 												atSelectedModel = undefined;
+												webSearchEnabled = false;
 											}
 										}}
 										rows="1"