mirror of
https://github.com/open-webui/open-webui
synced 2025-06-26 18:26:48 +00:00
refac: styling
This commit is contained in:
Timothy J. Baek
parent
4685f523b6
commit
f3527df644
@ -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")
|
||||
)
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
80
src/lib/components/chat/MessageInput/InputMenu.svelte
Normal file
80
src/lib/components/chat/MessageInput/InputMenu.svelte
Normal file
@ -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>
|
||||
@ -10,6 +10,7 @@
|
||||
|
||||
<DropdownMenu.Root
|
||||
bind:open={show}
|
||||
closeFocus={false}
|
||||
onOpenChange={(state) => {
|
||||
dispatch('change', state);
|
||||
}}
|
||||
|
||||
14
src/lib/components/icons/DocumentArrowUpSolid.svelte
Normal file
14
src/lib/components/icons/DocumentArrowUpSolid.svelte
Normal file
@ -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>
|
||||
9
src/lib/components/icons/GlobeAltSolid.svelte
Normal file
9
src/lib/components/icons/GlobeAltSolid.svelte
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user