diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte index b52929437f..4223345660 100644 --- a/src/lib/components/chat/ModelSelector.svelte +++ b/src/lib/components/chat/ModelSelector.svelte @@ -1,9 +1,12 @@ -
+
{#each selectedModels as selectedModel, selectedModelIdx}
-
+
{#if selectedModelIdx === 0} - +
+ + + +
{:else} - - {/if} - - {#if selectedModelIdx === 0} - +
+ + + +
{/if}
{/each}
-
+
diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte index e7e2aa6a43..2d73e22486 100644 --- a/src/lib/components/chat/ModelSelector/Selector.svelte +++ b/src/lib/components/chat/ModelSelector/Selector.svelte @@ -181,20 +181,20 @@ searchValue = ''; window.setTimeout(() => document.getElementById('model-search-input')?.focus(), 0); }} - selected={items.find((item) => item.value === value)} + selected={items.find((item) => item.value === value) ?? ''} onSelectedChange={(selectedItem) => { value = selectedItem.value; }} > @@ -214,7 +214,7 @@
{/if} -
+
{#each filteredItems as item} + import { getContext } from 'svelte'; + import Modal from '../common/Modal.svelte'; + + import Tags from '../common/Tags.svelte'; + + const i18n = getContext('i18n'); + + export let tags; + export let deleteTag: Function; + export let addTag: Function; + + export let show = false; + + + +
+ +
+ diff --git a/src/lib/components/common/Tags.svelte b/src/lib/components/common/Tags.svelte index 426678fb59..c8e12063f5 100644 --- a/src/lib/components/common/Tags.svelte +++ b/src/lib/components/common/Tags.svelte @@ -8,7 +8,7 @@ export let addTag: Function; -
+
{ @@ -17,6 +17,7 @@ /> { addTag(e.detail); }} diff --git a/src/lib/components/common/Tags/TagInput.svelte b/src/lib/components/common/Tags/TagInput.svelte index c4374e6066..ae4bb3086d 100644 --- a/src/lib/components/common/Tags/TagInput.svelte +++ b/src/lib/components/common/Tags/TagInput.svelte @@ -5,6 +5,7 @@ const i18n = getContext('i18n'); + export let label = ''; let showTagInput = false; let tagName = ''; @@ -34,7 +35,7 @@ { @@ -71,4 +72,8 @@
+ + {#if label && !showTagInput} + {label} + {/if}
diff --git a/src/lib/components/common/Tags/TagList.svelte b/src/lib/components/common/Tags/TagList.svelte index 66a0b060ab..09773a2dc4 100644 --- a/src/lib/components/common/Tags/TagList.svelte +++ b/src/lib/components/common/Tags/TagList.svelte @@ -7,7 +7,7 @@ {#each tags as tag}
{tag.name} diff --git a/src/lib/components/common/Tooltip.svelte b/src/lib/components/common/Tooltip.svelte index cd6cbed8a0..92a909b228 100644 --- a/src/lib/components/common/Tooltip.svelte +++ b/src/lib/components/common/Tooltip.svelte @@ -29,6 +29,6 @@ }); -
+
diff --git a/src/lib/components/icons/ChevronUpDown.svelte b/src/lib/components/icons/ChevronUpDown.svelte new file mode 100644 index 0000000000..7f23435a2d --- /dev/null +++ b/src/lib/components/icons/ChevronUpDown.svelte @@ -0,0 +1,19 @@ + + + + + diff --git a/src/lib/components/icons/EllipsisVertical.svelte b/src/lib/components/icons/EllipsisVertical.svelte new file mode 100644 index 0000000000..7ccbea2947 --- /dev/null +++ b/src/lib/components/icons/EllipsisVertical.svelte @@ -0,0 +1,19 @@ + + + + + diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte index 3a5fd2da4b..a986896185 100644 --- a/src/lib/components/layout/Navbar.svelte +++ b/src/lib/components/layout/Navbar.svelte @@ -4,11 +4,21 @@ import fileSaver from 'file-saver'; const { saveAs } = fileSaver; + import { Separator } from 'bits-ui'; import { getChatById } from '$lib/apis/chats'; - import { WEBUI_NAME, chatId, modelfiles, settings } from '$lib/stores'; + import { WEBUI_NAME, chatId, modelfiles, settings, showSettings } from '$lib/stores'; + + import { slide } from 'svelte/transition'; import ShareChatModal from '../chat/ShareChatModal.svelte'; import TagInput from '../common/Tags/TagInput.svelte'; - import Tags from '../common/Tags.svelte'; + import ModelSelector from '../chat/ModelSelector.svelte'; + import Tooltip from '../common/Tooltip.svelte'; + + import EllipsisVertical from '../icons/EllipsisVertical.svelte'; + import ChevronDown from '../icons/ChevronDown.svelte'; + import ChevronUpDown from '../icons/ChevronUpDown.svelte'; + import Menu from './Navbar/Menu.svelte'; + import TagChatModal from '../chat/TagChatModal.svelte'; const i18n = getContext('i18n'); @@ -16,14 +26,16 @@ export let title: string = $WEBUI_NAME; export let shareEnabled: boolean = false; + export let selectedModels; + export let tags = []; export let addTag: Function; export let deleteTag: Function; - let showShareChatModal = false; + export let showModelSelector = false; - let tagName = ''; - let showTagInput = false; + let showShareChatModal = false; + let showTagChatModal = false; const shareChat = async () => { const chat = (await getChatById(localStorage.token, $chatId)).chat; @@ -69,70 +81,154 @@ +