From f3527df6447e9ca7cb82460f6ee4fcb79ac2678e Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 27 May 2024 13:22:24 -0700
Subject: [PATCH] refac: styling

---
 backend/config.py                             |  2 +-
 src/lib/components/chat/Chat.svelte           |  7 +-
 src/lib/components/chat/MessageInput.svelte   | 42 +++++-----
 .../chat/MessageInput/InputMenu.svelte        | 80 +++++++++++++++++++
 src/lib/components/common/Dropdown.svelte     |  1 +
 .../icons/DocumentArrowUpSolid.svelte         | 14 ++++
 src/lib/components/icons/GlobeAltSolid.svelte |  9 +++
 7 files changed, 132 insertions(+), 23 deletions(-)
 create mode 100644 src/lib/components/chat/MessageInput/InputMenu.svelte
 create mode 100644 src/lib/components/icons/DocumentArrowUpSolid.svelte
 create mode 100644 src/lib/components/icons/GlobeAltSolid.svelte

diff --git a/backend/config.py b/backend/config.py
index 202c75b90..dfdeee732 100644
--- a/backend/config.py
+++ b/backend/config.py
@@ -783,7 +783,7 @@ RAG_WEB_SEARCH_ENABLED = (
     or SERPER_API_KEY != ""
 )
 
-RAG_WEB_SEARCH_RESULT_COUNT = int(os.getenv("RAG_WEB_SEARCH_RESULT_COUNT", "10"))
+RAG_WEB_SEARCH_RESULT_COUNT = int(os.getenv("RAG_WEB_SEARCH_RESULT_COUNT", "3"))
 RAG_WEB_SEARCH_CONCURRENT_REQUESTS = int(
     os.getenv("RAG_WEB_SEARCH_CONCURRENT_REQUESTS", "10")
 )
diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index d237cc58c..fd6673ea4 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -65,7 +65,7 @@
 	let selectedModels = [''];
 	let atSelectedModel: Model | undefined;
 
-	let useWebSearch = false;
+	let webSearchEnabled = false;
 
 	let chat = null;
 	let tags = [];
@@ -406,7 +406,7 @@
 					}
 					responseMessage.userContext = userContext;
 
-					if (useWebSearch) {
+					if (webSearchEnabled) {
 						await getWebSearchResultsAsFiles(model.id, parentId, responseMessageId);
 					}
 
@@ -1159,12 +1159,11 @@
 		bind:files
 		bind:prompt
 		bind:autoScroll
-		bind:useWebSearch
+		bind:webSearchEnabled
 		bind:atSelectedModel
 		{selectedModels}
 		{messages}
 		{submitPrompt}
 		{stopResponse}
-		webSearchAvailable={$config?.features.enable_web_search ?? false}
 	/>
 {/if}
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 310f370e7..443923ea2 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import { onMount, tick, getContext } from 'svelte';
-	import { type Model, mobile, settings, showSidebar, models } from '$lib/stores';
+	import { type Model, mobile, settings, showSidebar, models, config } from '$lib/stores';
 	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
 
 	import {
@@ -20,6 +20,8 @@
 	import Models from './MessageInput/Models.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
+	import InputMenu from './MessageInput/InputMenu.svelte';
+	import { t } from 'i18next';
 
 	const i18n = getContext('i18n');
 
@@ -47,9 +49,7 @@
 	export let files = [];
 
 	export let speechRecognitionEnabled = true;
-
-	export let webSearchAvailable = false;
-	export let useWebSearch = false;
+	export let webSearchEnabled = false;
 
 	export let prompt = '';
 	export let messages = [];
@@ -779,13 +779,19 @@
 
 						<div class=" flex">
 							<div class=" ml-1 flex items-center">
-								<Tooltip content={$i18n.t('Upload files')}>
+								<InputMenu
+									bind:webSearchEnabled
+									uploadFilesHandler={() => {
+										filesInputElement.click();
+									}}
+									onClose={async () => {
+										await tick();
+										chatTextAreaElement?.focus();
+									}}
+								>
 									<button
-										class="bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5"
+										class="bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5 outline-none focus:outline-none"
 										type="button"
-										on:click={() => {
-											filesInputElement.click();
-										}}
 									>
 										<svg
 											xmlns="http://www.w3.org/2000/svg"
@@ -798,7 +804,7 @@
 											/>
 										</svg>
 									</button>
-								</Tooltip>
+								</InputMenu>
 							</div>
 
 							<textarea
@@ -969,19 +975,19 @@
 
 							<div class="self-end mb-2 flex space-x-1 mr-1">
 								{#if messages.length == 0 || messages.at(-1).done == true}
-									{#if webSearchAvailable}
+									<!-- {#if $config?.features.enable_web_search ?? false}
 										<Tooltip
-											content={useWebSearch
+											content={webSearchEnabled
 												? $i18n.t('Web Search Enabled')
 												: $i18n.t('Web Search Disabled')}
 										>
-											{#if useWebSearch}
+											{#if webSearchEnabled}
 												<button
 													id="toggle-websearch-button"
 													class=" text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full p-1.5 mr-0.5 self-center"
 													type="button"
 													on:click={() => {
-														useWebSearch = !useWebSearch;
+														webSearchEnabled = !webSearchEnabled;
 													}}
 												>
 													<svg
@@ -998,15 +1004,15 @@
 											{:else}
 												<button
 													id="toggle-websearch-button"
-													class=" {useWebSearch
+													class=" {webSearchEnabled
 														? 'text-gray-600 dark:text-gray-300'
 														: 'text-gray-300 dark:text-gray-600 disabled'} hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full p-1.5 mr-0.5 self-center"
 													type="button"
 													on:click={() => {
-														useWebSearch = !useWebSearch;
+														webSearchEnabled = !webSearchEnabled;
 													}}
 												>
-													{#if useWebSearch}
+													{#if webSearchEnabled}
 														<svg
 															xmlns="http://www.w3.org/2000/svg"
 															viewBox="0 0 24 24"
@@ -1036,7 +1042,7 @@
 												</button>
 											{/if}
 										</Tooltip>
-									{/if}
+									{/if} -->
 
 									<Tooltip content={$i18n.t('Record voice')}>
 										{#if speechRecognitionEnabled}
diff --git a/src/lib/components/chat/MessageInput/InputMenu.svelte b/src/lib/components/chat/MessageInput/InputMenu.svelte
new file mode 100644
index 000000000..a0c8e5d1f
--- /dev/null
+++ b/src/lib/components/chat/MessageInput/InputMenu.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { flyAndScale } from '$lib/utils/transitions';
+	import { getContext } from 'svelte';
+
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
+	import Pencil from '$lib/components/icons/Pencil.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Tags from '$lib/components/chat/Tags.svelte';
+	import Share from '$lib/components/icons/Share.svelte';
+	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
+	import DocumentArrowUpSolid from '$lib/components/icons/DocumentArrowUpSolid.svelte';
+	import Switch from '$lib/components/common/Switch.svelte';
+	import GlobeAltSolid from '$lib/components/icons/GlobeAltSolid.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let uploadFilesHandler: Function;
+	export let webSearchEnabled: boolean;
+
+	export let onClose: Function;
+
+	let show = false;
+</script>
+
+<Dropdown
+	bind:show
+	on:change={(e) => {
+		if (e.detail === false) {
+			onClose();
+		}
+	}}
+>
+	<Tooltip content={$i18n.t('More')}>
+		<slot />
+	</Tooltip>
+
+	<div slot="content">
+		<DropdownMenu.Content
+			class="w-full max-w-[190px] rounded-xl px-1 py-1  border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow"
+			sideOffset={15}
+			alignOffset={-8}
+			side="top"
+			align="start"
+			transition={flyAndScale}
+		>
+			<div class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl">
+				<div class="flex-1 flex items-center gap-2">
+					<GlobeAltSolid />
+					<div class="flex items-center">{$i18n.t('Web Search')}</div>
+				</div>
+
+				<Switch bind:state={webSearchEnabled} />
+			</div>
+
+			<hr class="border-gray-100 dark:border-gray-800 my-1" />
+
+			<DropdownMenu.Item
+				class="flex gap-2 items-center px-3 py-2 text-sm  font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-xl"
+				on:click={() => {
+					uploadFilesHandler();
+				}}
+			>
+				<DocumentArrowUpSolid />
+				<div class="flex items-center">{$i18n.t('Upload Files')}</div>
+			</DropdownMenu.Item>
+
+			<!-- <DropdownMenu.Item
+				class="flex gap-2 items-center px-3 py-2 text-sm  font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-xl"
+				on:click={() => {
+					shareHandler();
+				}}
+			>
+				<DocumentArrowUpSolid />
+				<div class="flex items-center">{$i18n.t('Upload Files')}</div>
+			</DropdownMenu.Item> -->
+		</DropdownMenu.Content>
+	</div>
+</Dropdown>
diff --git a/src/lib/components/common/Dropdown.svelte b/src/lib/components/common/Dropdown.svelte
index eaceeb3e2..4beb1d26c 100644
--- a/src/lib/components/common/Dropdown.svelte
+++ b/src/lib/components/common/Dropdown.svelte
@@ -10,6 +10,7 @@
 
 <DropdownMenu.Root
 	bind:open={show}
+	closeFocus={false}
 	onOpenChange={(state) => {
 		dispatch('change', state);
 	}}
diff --git a/src/lib/components/icons/DocumentArrowUpSolid.svelte b/src/lib/components/icons/DocumentArrowUpSolid.svelte
new file mode 100644
index 000000000..2690f5537
--- /dev/null
+++ b/src/lib/components/icons/DocumentArrowUpSolid.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let className = 'size-4';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class={className}>
+	<path
+		fill-rule="evenodd"
+		d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6.905 9.97a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72V18a.75.75 0 0 0 1.5 0v-4.19l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z"
+		clip-rule="evenodd"
+	/>
+	<path
+		d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"
+	/>
+</svg>
diff --git a/src/lib/components/icons/GlobeAltSolid.svelte b/src/lib/components/icons/GlobeAltSolid.svelte
new file mode 100644
index 000000000..7054d311f
--- /dev/null
+++ b/src/lib/components/icons/GlobeAltSolid.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let className = 'size-4';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class={className}>
+	<path
+		d="M21.721 12.752a9.711 9.711 0 0 0-.945-5.003 12.754 12.754 0 0 1-4.339 2.708 18.991 18.991 0 0 1-.214 4.772 17.165 17.165 0 0 0 5.498-2.477ZM14.634 15.55a17.324 17.324 0 0 0 .332-4.647c-.952.227-1.945.347-2.966.347-1.021 0-2.014-.12-2.966-.347a17.515 17.515 0 0 0 .332 4.647 17.385 17.385 0 0 0 5.268 0ZM9.772 17.119a18.963 18.963 0 0 0 4.456 0A17.182 17.182 0 0 1 12 21.724a17.18 17.18 0 0 1-2.228-4.605ZM7.777 15.23a18.87 18.87 0 0 1-.214-4.774 12.753 12.753 0 0 1-4.34-2.708 9.711 9.711 0 0 0-.944 5.004 17.165 17.165 0 0 0 5.498 2.477ZM21.356 14.752a9.765 9.765 0 0 1-7.478 6.817 18.64 18.64 0 0 0 1.988-4.718 18.627 18.627 0 0 0 5.49-2.098ZM2.644 14.752c1.682.971 3.53 1.688 5.49 2.099a18.64 18.64 0 0 0 1.988 4.718 9.765 9.765 0 0 1-7.478-6.816ZM13.878 2.43a9.755 9.755 0 0 1 6.116 3.986 11.267 11.267 0 0 1-3.746 2.504 18.63 18.63 0 0 0-2.37-6.49ZM12 2.276a17.152 17.152 0 0 1 2.805 7.121c-.897.23-1.837.353-2.805.353-.968 0-1.908-.122-2.805-.353A17.151 17.151 0 0 1 12 2.276ZM10.122 2.43a18.629 18.629 0 0 0-2.37 6.49 11.266 11.266 0 0 1-3.746-2.504 9.754 9.754 0 0 1 6.116-3.985Z"
+	/>
+</svg>