diff --git a/src/lib/components/chat/ModelSelector/ModelItem.svelte b/src/lib/components/chat/ModelSelector/ModelItem.svelte index 405902fc26..bdb83d49c4 100644 --- a/src/lib/components/chat/ModelSelector/ModelItem.svelte +++ b/src/lib/components/chat/ModelSelector/ModelItem.svelte @@ -14,6 +14,8 @@ import ModelItemMenu from './ModelItemMenu.svelte'; import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte'; import { toast } from 'svelte-sonner'; + import Tag from '$lib/components/icons/Tag.svelte'; + import Label from '$lib/components/icons/Label.svelte'; const i18n = getContext('i18n'); @@ -55,7 +57,7 @@ }} >
- {#if (item?.model?.tags ?? []).length > 0} +
@@ -136,6 +138,26 @@ + {#if (item?.model?.tags ?? []).length > 0} + {#key item.model.id} + +
+ {#each item.model?.tags.sort((a, b) => a.name.localeCompare(b.name)) as tag} + +
+ {tag.name} +
+
+ {/each} +
+ +
+ +
+
+ {/key} + {/if} + {#if item.model?.direct}
diff --git a/src/lib/components/common/Tooltip.svelte b/src/lib/components/common/Tooltip.svelte index d83830d17a..83506237fb 100644 --- a/src/lib/components/common/Tooltip.svelte +++ b/src/lib/components/common/Tooltip.svelte @@ -5,6 +5,8 @@ import tippy from 'tippy.js'; + export let elementId = ''; + export let placement = 'top'; export let content = `I'm a tooltip!`; export let touch = true; @@ -17,20 +19,30 @@ let tooltipElement; let tooltipInstance; - $: if (tooltipElement && content) { - if (tooltipInstance) { - tooltipInstance.setContent(DOMPurify.sanitize(content)); + $: if (tooltipElement && (content || elementId)) { + let tooltipContent = null; + + if (elementId) { + tooltipContent = document.getElementById(`${elementId}`); } else { - tooltipInstance = tippy(tooltipElement, { - content: DOMPurify.sanitize(content), - placement: placement, - allowHTML: allowHTML, - touch: touch, - ...(theme !== '' ? { theme } : { theme: 'dark' }), - arrow: false, - offset: offset, - ...tippyOptions - }); + tooltipContent = DOMPurify.sanitize(content); + } + + if (tooltipInstance) { + tooltipInstance.setContent(tooltipContent); + } else { + if (content) { + tooltipInstance = tippy(tooltipElement, { + content: tooltipContent, + placement: placement, + allowHTML: allowHTML, + touch: touch, + ...(theme !== '' ? { theme } : { theme: 'dark' }), + arrow: false, + offset: offset, + ...tippyOptions + }); + } } } else if (tooltipInstance && content === '') { if (tooltipInstance) { @@ -48,3 +60,5 @@
+ + diff --git a/src/lib/components/icons/Label.svelte b/src/lib/components/icons/Label.svelte new file mode 100644 index 0000000000..dde0461336 --- /dev/null +++ b/src/lib/components/icons/Label.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/components/icons/Tag.svelte b/src/lib/components/icons/Tag.svelte new file mode 100644 index 0000000000..2eca7f85b2 --- /dev/null +++ b/src/lib/components/icons/Tag.svelte @@ -0,0 +1,19 @@ + + + + + + + + +