mirror of
https://github.com/open-webui/open-webui
synced 2025-05-23 14:24:22 +00:00
134 lines
4.9 KiB
Svelte
134 lines
4.9 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from 'svelte';
|
|
import { toast } from 'svelte-sonner';
|
|
|
|
import { WEBUI_NAME, chatId, modelfiles, settings, showSettings } from '$lib/stores';
|
|
|
|
import { slide } from 'svelte/transition';
|
|
import ShareChatModal from '../chat/ShareChatModal.svelte';
|
|
import ModelSelector from '../chat/ModelSelector.svelte';
|
|
import Tooltip from '../common/Tooltip.svelte';
|
|
import Menu from './Navbar/Menu.svelte';
|
|
import { page } from '$app/stores';
|
|
|
|
const i18n = getContext('i18n');
|
|
|
|
export let initNewChat: Function;
|
|
export let title: string = $WEBUI_NAME;
|
|
export let shareEnabled: boolean = false;
|
|
|
|
export let chat;
|
|
export let selectedModels;
|
|
|
|
export let showModelSelector = true;
|
|
|
|
let showShareChatModal = false;
|
|
let showDownloadChatModal = false;
|
|
</script>
|
|
|
|
<ShareChatModal bind:show={showShareChatModal} chatId={$chatId} />
|
|
<nav id="nav" class=" sticky py-2.5 top-0 flex flex-row justify-center z-30">
|
|
<div class=" flex max-w-full w-full mx-auto px-5 pt-0.5 md:px-[1.3rem]">
|
|
<div class="flex items-center w-full max-w-full">
|
|
<div class="flex-1 overflow-hidden max-w-full">
|
|
{#if showModelSelector}
|
|
<ModelSelector bind:selectedModels showSetDefault={!shareEnabled} />
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="self-start flex flex-none items-center">
|
|
<div class="flex self-center w-[1px] h-5 mx-2 bg-gray-300 dark:bg-stone-700" />
|
|
|
|
{#if !shareEnabled}
|
|
<Tooltip content={$i18n.t('Settings')}>
|
|
<button
|
|
class="cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-full transition"
|
|
id="open-settings-button"
|
|
on:click={async () => {
|
|
await showSettings.set(!$showSettings);
|
|
}}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</Tooltip>
|
|
{:else}
|
|
<Menu
|
|
{chat}
|
|
{shareEnabled}
|
|
shareHandler={() => {
|
|
showShareChatModal = !showShareChatModal;
|
|
}}
|
|
downloadHandler={() => {
|
|
showDownloadChatModal = !showDownloadChatModal;
|
|
}}
|
|
>
|
|
<button
|
|
class="cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-full transition"
|
|
>
|
|
<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>
|
|
</div>
|
|
</button>
|
|
</Menu>
|
|
{/if}
|
|
<Tooltip content={$i18n.t('New Chat')}>
|
|
<button
|
|
id="new-chat-button"
|
|
class=" cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-full transition"
|
|
on:click={() => {
|
|
initNewChat();
|
|
}}
|
|
>
|
|
<div class=" m-auto self-center">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
|
|
/>
|
|
<path
|
|
d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|