refac: styling

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

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
+	let fuse = new Fuse(
-		.filter((p) =>
+		$models
-			p.name.toLowerCase().includes(command.toLowerCase().split(' ')?.at(0)?.substring(1) ?? '')
+			.filter((model) => !model?.info?.meta?.hidden)
-		)
+			.map((model) => {
-		.sort((a, b) => a.name.localeCompare(b.name));
+				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'

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