diff --git a/src/lib/components/chat/MessageInput/Commands/Knowledge.svelte b/src/lib/components/chat/MessageInput/Commands/Knowledge.svelte index d12faf14e..edce2b7e9 100644 --- a/src/lib/components/chat/MessageInput/Commands/Knowledge.svelte +++ b/src/lib/components/chat/MessageInput/Commands/Knowledge.svelte @@ -117,11 +117,11 @@ {#if filteredItems.length > 0 || prompt.split(' ')?.at(0)?.substring(1).startsWith('http')} <div id="commands-container" - class="pl-1 pr-12 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10" + class="pl-2 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10" > <div class="flex w-full dark:border dark:border-gray-850 rounded-lg"> <div class=" bg-gray-50 dark:bg-gray-850 w-10 rounded-l-lg text-center"> - <div class=" text-lg font-semibold mt-2">#</div> + <div class=" text-lg font-medium mt-2">#</div> </div> <div diff --git a/src/lib/components/chat/MessageInput/Commands/Models.svelte b/src/lib/components/chat/MessageInput/Commands/Models.svelte index 4b660a62c..768c51421 100644 --- a/src/lib/components/chat/MessageInput/Commands/Models.svelte +++ b/src/lib/components/chat/MessageInput/Commands/Models.svelte @@ -1,4 +1,6 @@ <script lang="ts"> + import Fuse from 'fuse.js'; + import { createEventDispatcher, onMount } from 'svelte'; import { tick, getContext } from 'svelte'; @@ -11,13 +13,31 @@ export let command = ''; let selectedIdx = 0; - let filteredModels = []; + let filteredItems = []; - $: filteredModels = $models - .filter((p) => - p.name.toLowerCase().includes(command.toLowerCase().split(' ')?.at(0)?.substring(1) ?? '') - ) - .sort((a, b) => a.name.localeCompare(b.name)); + let fuse = new Fuse( + $models + .filter((model) => !model?.info?.meta?.hidden) + .map((model) => { + const _item = { + ...model, + modelName: model?.name, + tags: model?.info?.meta?.tags?.map((tag) => tag.name).join(' '), + desc: model?.info?.meta?.description + }; + return _item; + }), + { + keys: ['value', 'tags', 'modelName'], + threshold: 0.3 + } + ); + + $: filteredItems = command.slice(1) + ? fuse.search(command).map((e) => { + return e.item; + }) + : $models.filter((model) => !model?.info?.meta?.hidden); $: if (command) { selectedIdx = 0; @@ -28,7 +48,7 @@ }; export const selectDown = () => { - selectedIdx = Math.min(selectedIdx + 1, filteredModels.length - 1); + selectedIdx = Math.min(selectedIdx + 1, filteredItems.length - 1); }; const confirmSelect = async (model) => { @@ -45,21 +65,21 @@ }); </script> -{#if filteredModels.length > 0} +{#if filteredItems.length > 0} <div id="commands-container" - class="pl-1 pr-12 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10" + class="pl-2 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10" > <div class="flex w-full dark:border dark:border-gray-850 rounded-lg"> <div class=" bg-gray-50 dark:bg-gray-850 w-10 rounded-l-lg text-center"> - <div class=" text-lg font-semibold mt-2">@</div> + <div class=" text-lg font-medium mt-2">@</div> </div> <div class="max-h-60 flex flex-col w-full rounded-r-lg bg-white dark:bg-gray-900 dark:text-gray-100" > <div class="m-1 overflow-y-auto p-1 rounded-r-lg space-y-0.5 scrollbar-hidden"> - {#each filteredModels as model, modelIdx} + {#each filteredItems as model, modelIdx} <button class="px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx ? 'bg-gray-50 dark:bg-gray-850 selected-command-option-button' diff --git a/src/lib/components/chat/MessageInput/Commands/Prompts.svelte b/src/lib/components/chat/MessageInput/Commands/Prompts.svelte index 8e8052575..2a4b46d5d 100644 --- a/src/lib/components/chat/MessageInput/Commands/Prompts.svelte +++ b/src/lib/components/chat/MessageInput/Commands/Prompts.svelte @@ -132,11 +132,11 @@ {#if filteredPrompts.length > 0} <div id="commands-container" - class="pl-1 pr-12 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10" + class="pl-2 pr-14 mb-3 text-left w-full absolute bottom-0 left-0 right-0 z-10" > <div class="flex w-full dark:border dark:border-gray-850 rounded-lg"> <div class=" bg-gray-50 dark:bg-gray-850 w-10 rounded-l-lg text-center"> - <div class=" text-lg font-semibold mt-2">/</div> + <div class=" text-lg font-medium mt-2">/</div> </div> <div