refac: styling

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

@@ -89,16 +89,16 @@
 
 {#if filteredItems.length > 0 || prompt.split(' ')?.at(0)?.substring(1).startsWith('http')}
 	<div class="md:px-2 mb-3 text-left w-full absolute bottom-0 left-0 right-0">
-		<div class="flex w-full rounded-lg border border-gray-100 dark:border-gray-700">
-			<div class=" bg-gray-100 dark:bg-gray-700 w-10 rounded-l-lg text-center">
+		<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-lg">
-				<div class=" overflow-y-auto bg-white p-2 rounded-tr-lg space-y-0.5">
+			<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 filteredItems as doc, docIdx}
 						<button
-							class=" px-3 py-1.5 rounded-lg w-full text-left {docIdx === selectedIdx
+							class=" px-3 py-1.5 rounded-xl w-full text-left {docIdx === selectedIdx
 								? ' bg-gray-100 selected-command-option-button'
 								: ''}"
 							type="button"
@@ -132,7 +132,7 @@
 
 					{#if prompt.split(' ')?.at(0)?.substring(1).startsWith('http')}
 						<button
-							class="px-3 py-1.5 rounded-lg w-full text-left bg-gray-100 selected-command-option-button"
+							class="px-3 py-1.5 rounded-xl w-full text-left bg-gray-100 selected-command-option-button"
 							type="button"
 							on:click={() => {
 								const url = prompt.split(' ')?.at(0)?.substring(1);

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

@@ -121,16 +121,16 @@
 
 {#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 rounded-lg border border-gray-100 dark:border-gray-700">
-			<div class=" bg-gray-100 dark:bg-gray-700 w-10 rounded-l-lg text-center">
+		<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-lg">
-				<div class=" overflow-y-auto bg-white p-2 rounded-tr-lg space-y-0.5">
+			<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-lg w-full text-left {modelIdx === selectedIdx
+							class=" px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
 								? ' bg-gray-100 selected-command-option-button'
 								: ''}"
 							type="button"

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

@@ -60,16 +60,16 @@
 
 {#if filteredPromptCommands.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 rounded-lg border border-gray-100 dark:border-gray-700">
-			<div class=" bg-gray-100 dark:bg-gray-700 w-10 rounded-l-lg text-center">
+		<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-lg">
-				<div class=" overflow-y-auto bg-white p-2 rounded-tr-lg space-y-0.5">
+			<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 filteredPromptCommands as command, commandIdx}
 						<button
-							class=" px-3 py-1.5 rounded-lg w-full text-left {commandIdx === selectedCommandIdx
+							class=" px-3 py-1.5 rounded-xl w-full text-left {commandIdx === selectedCommandIdx
 								? ' bg-gray-100 selected-command-option-button'
 								: ''}"
 							type="button"
@@ -93,7 +93,7 @@
 				</div>
 
 				<div
-					class=" px-2 pb-1 text-xs text-gray-600 bg-white rounded-br-lg flex items-center space-x-1"
+					class=" px-2 pb-1 text-xs text-gray-600 bg-white rounded-br-xl flex items-center space-x-1"
 				>
 					<div>
 						<svg

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

@@ -48,7 +48,7 @@
 				{/each}
 			</div>
 		</div>
-		<div class=" mt-2 text-2xl text-gray-800 dark:text-gray-100 font-semibold">
+		<div class=" mt-2 mb-5 text-2xl text-gray-800 dark:text-gray-100 font-semibold">
 			{#if modelfile}
 				<span class=" capitalize">
 					{modelfile.title}