refac

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

@@ -102,17 +102,19 @@
 
 {#if filteredItems.length > 0 || prompt.split(' ')?.at(0)?.substring(1).startsWith('http')}
 	<div class="pl-1 pr-12 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="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>
 
-			<div class="max-h-60 flex flex-col w-full rounded-r-xl bg-white dark:bg-gray-850 dark:text-gray-100 ">
-				<div class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5">
+			<div
+				class="max-h-60 flex flex-col w-full rounded-r-xl bg-white dark:bg-gray-900 dark:text-gray-100"
+			>
+				<div class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5 scrollbar-hidden">
 					{#each filteredItems as doc, docIdx}
 						<button
 							class=" px-3 py-1.5 rounded-xl w-full text-left {docIdx === selectedIdx
-								? ' bg-gray-100 dark:bg-gray-600 dark:text-gray-100 selected-command-option-button'
+								? ' bg-gray-50 dark:bg-gray-850 dark:text-gray-100 selected-command-option-button'
 								: ''}"
 							type="button"
 							on:click={() => {
@@ -130,7 +132,9 @@
 									{doc?.title ?? `#${doc.name}`}
 								</div>
 
-								<div class=" text-xs text-gray-600 dark:text-gray-100 line-clamp-1">{$i18n.t('Collection')}</div>
+								<div class=" text-xs text-gray-600 dark:text-gray-100 line-clamp-1">
+									{$i18n.t('Collection')}
+								</div>
 							{:else}
 								<div class=" font-medium text-black dark:text-gray-100 line-clamp-1">
 									#{doc.name} ({doc.filename})

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

@@ -134,17 +134,19 @@
 {#if prompt.charAt(0) === '@'}
 	{#if filteredModels.length > 0}
 		<div class="pl-1 pr-12 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="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>
 
-				<div class="max-h-60 flex flex-col w-full rounded-r-xl bg-white dark:bg-gray-850">
-					<div class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5">
+				<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}
 							<button
 								class=" px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
-									? ' bg-gray-100 dark:bg-gray-600 selected-command-option-button'
+									? '  bg-gray-50 dark:bg-gray-850  selected-command-option-button'
 									: ''}"
 								type="button"
 								on:click={() => {

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

@@ -89,17 +89,19 @@
 
 {#if filteredPromptCommands.length > 0}
 	<div class="pl-1 pr-12 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="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>
 
-			<div class="max-h-60 flex flex-col w-full rounded-r-xl bg-white dark:bg-gray-850">
-				<div class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5">
+			<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 filteredPromptCommands as command, commandIdx}
 						<button
 							class=" px-3 py-1.5 rounded-xl w-full text-left {commandIdx === selectedCommandIdx
-								? ' bg-gray-100 dark:bg-gray-600 selected-command-option-button'
+								? '  bg-gray-50 dark:bg-gray-850 selected-command-option-button'
 								: ''}"
 							type="button"
 							on:click={() => {
@@ -122,7 +124,7 @@
 				</div>
 
 				<div
-					class=" px-2 pb-1 text-xs text-gray-600 dark:text-gray-100 bg-white dark:bg-gray-850 rounded-br-xl flex items-center space-x-1"
+					class=" px-2 pb-1 text-xs text-gray-600 dark:text-gray-100 bg-white dark:bg-gray-900 rounded-br-xl flex items-center space-x-1"
 				>
 					<div>
 						<svg