refac: styling

src/lib/components/chat/MessageInput.svelte

@@ -480,16 +480,16 @@
 								];
 							}}
 						/>
-					{:else if prompt.charAt(0) === '@'}
-						<Models
-							bind:this={modelsElement}
-							bind:prompt
-							bind:user
-							bind:chatInputPlaceholder
-							{messages}
-						/>
 					{/if}
 
+					<Models
+						bind:this={modelsElement}
+						bind:prompt
+						bind:user
+						bind:chatInputPlaceholder
+						{messages}
+					/>
+
 					<!-- {#if messages.length == 0 && suggestionPrompts.length !== 0}
 						<Suggestions {suggestionPrompts} {submitPrompt} />
 					{/if} -->

src/lib/components/chat/MessageInput/Models.svelte

@@ -13,16 +13,13 @@
 	export let chatInputPlaceholder = '';
 	export let messages = [];
 
+	let selectedModel = null;
+
 	let selectedIdx = 0;
 	let filteredModels = [];
 
 	$: filteredModels = $models
-		.filter(
-			(p) =>
-				p.name !== 'hr' &&
-				!p.external &&
-				p.name.includes(prompt.split(' ')?.at(0)?.substring(1) ?? '')
-		)
+		.filter((p) => p.name.includes(prompt.split(' ')?.at(0)?.substring(1) ?? ''))
 		.sort((a, b) => a.name.localeCompare(b.name));
 
 	$: if (prompt) {
@@ -38,6 +35,13 @@
 	};
 
 	const confirmSelect = async (model) => {
+		prompt = '';
+		selectedModel = model;
+
+		console.log(selectedModel);
+	};
+
+	const confirmSelectCollaborativeChat = async (model) => {
 		// dispatch('select', model);
 		prompt = '';
 		user = JSON.parse(JSON.stringify(model.name));
@@ -127,40 +131,50 @@
 	};
 </script>
 
-{#if filteredModels.length > 0}
-	<div class="md:px-2 mb-3 text-left w-full absolute bottom-0 left-0 right-0">
-		<div class="flex w-full px-2">
-			<div class=" bg-gray-100 dark:bg-gray-700 w-10 rounded-l-xl text-center">
-				<div class=" text-lg font-semibold mt-2">@</div>
-			</div>
+{#if prompt.charAt(0) === '@'}
+	{#if filteredModels.length > 0}
+		<div class="md:px-2 mb-3 text-left w-full absolute bottom-0 left-0 right-0">
+			<div class="flex w-full px-2">
+				<div class=" bg-gray-100 dark:bg-gray-700 w-10 rounded-l-xl text-center">
+					<div class=" text-lg font-semibold mt-2">@</div>
+				</div>
 
-			<div class="max-h-60 flex flex-col w-full rounded-r-xl bg-white">
-				<div class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5">
-					{#each filteredModels as model, modelIdx}
-						<button
-							class=" px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
-								? ' bg-gray-100 selected-command-option-button'
-								: ''}"
-							type="button"
-							on:click={() => {
-								confirmSelect(model);
-							}}
-							on:mousemove={() => {
-								selectedIdx = modelIdx;
-							}}
-							on:focus={() => {}}
-						>
-							<div class=" font-medium text-black line-clamp-1">
-								{model.name}
-							</div>
-
-							<!-- <div class=" text-xs text-gray-600 line-clamp-1">
+				<div class="max-h-60 flex flex-col w-full rounded-r-xl bg-white">
+					<div class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5">
+						{#each filteredModels as model, modelIdx}
+							<button
+								class=" px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
+									? ' bg-gray-100 selected-command-option-button'
+									: ''}"
+								type="button"
+								on:click={() => {
+									confirmSelect(model);
+								}}
+								on:mousemove={() => {
+									selectedIdx = modelIdx;
+								}}
+								on:focus={() => {}}
+							>
+								<div class=" font-medium text-black line-clamp-1">
+									{model.name}
+								</div>
+
+								<!-- <div class=" text-xs text-gray-600 line-clamp-1">
 								{doc.title}
 							</div> -->
-						</button>
-					{/each}
+							</button>
+						{/each}
+					</div>
 				</div>
 			</div>
 		</div>
+	{/if}
+{/if}
+
+{#if selectedModel !== null}
+	<div class="md:px-2 mb-3 text-left w-full absolute bottom-0 left-0 right-0">
+		<div>
+			{JSON.stringify(selectedModel)}
+		</div>
 	</div>
 {/if}

src/lib/components/chat/Messages/Placeholder.svelte

@@ -3,6 +3,7 @@
 	import { user } from '$lib/stores';
 	import { onMount, getContext } from 'svelte';
 	import Suggestions from '../MessageInput/Suggestions.svelte';
+	import Bolt from '$lib/components/icons/Bolt.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -25,7 +26,7 @@
 
 {#if models.length > 0}
 	<div class="m-auto w-full max-w-3xl px-8 pb-24">
-		<div class="flex justify-start">
+		<!-- <div class="flex justify-start">
 			<div class="flex -space-x-4 mb-0.5">
 				{#each models as model, modelIdx}
 					<button
@@ -53,9 +54,9 @@
 					</button>
 				{/each}
 			</div>
-		</div>
+		</div> -->
 		<div
-			class=" mt-2 mb-4 text-2xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
+			class=" mt-2 mb-4 text-3xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
 		>
 			<div>
 				{#if modelfile}
@@ -83,6 +84,10 @@
 		</div>
 
 		<div class=" w-full">
+			<div class="mb-2 flex gap-1 text-sm font-medium items-center dark:text-gray-600">
+				<Bolt />
+				Suggested
+			</div>
 			<Suggestions {suggestionPrompts} {submitPrompt} />
 		</div>
 	</div>

src/lib/components/icons/Bolt.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-3';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
+	/>
+</svg>

src/lib/components/layout/Navbar.svelte

@@ -29,7 +29,7 @@
 <nav id="nav" class=" sticky py-2.5 top-0 flex flex-row justify-center z-30">
 	<div
 		class=" flex {$settings?.fullScreenMode ?? null ? 'max-w-full' : 'max-w-3xl'} 
-		 w-full mx-auto px-3"
+		 w-full mx-auto px-5"
 	>
 		<div class="flex items-center w-full max-w-full">
 			<div class="flex-1 overflow-hidden max-w-full">