refac: styling

src/lib/components/chat/MessageInput.svelte

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

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,7 +131,8 @@
 	};
 </script>
 
-{#if filteredModels.length > 0}
+{#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">
@@ -163,4 +168,13 @@
 				</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">