refac

src/lib/components/chat/Controls/Controls.svelte

@@ -31,6 +31,10 @@
 
 	const compactSectionButtonClass =
 		'w-full py-1 text-xs font-normal text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition cursor-pointer select-none';
+	const systemPromptTextareaClass =
+		'w-full resize-vertical rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
+	const compactSystemPromptTextareaClass =
+		'w-full resize-vertical appearance-none bg-transparent py-1 text-xs outline-hidden focus:bg-transparent disabled:bg-transparent';
 </script>
 
 <div class=" dark:text-white">
@@ -114,7 +118,9 @@
 					<div class="pt-1 pb-1" slot="content">
 						<textarea
 							bind:value={params.system}
-							class="w-full resize-vertical appearance-none bg-transparent py-1 text-xs outline-hidden focus:bg-transparent disabled:bg-transparent"
+							class={($settings?.highContrastMode ?? false)
+								? systemPromptTextareaClass
+								: compactSystemPromptTextareaClass}
 							rows="3"
 							placeholder={$i18n.t('Enter system prompt')}
 						/>

src/lib/components/chat/Settings/General.svelte

@@ -24,6 +24,11 @@
 
 	let showAdvanced = false;
 
+	const systemPromptTextareaClass =
+		'w-full resize-vertical rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
+	const compactSystemPromptTextareaClass =
+		'w-full resize-vertical appearance-none bg-transparent text-sm outline-hidden focus:bg-transparent disabled:bg-transparent dark:text-gray-300';
+
 	const toggleNotification = async () => {
 		const permission = await Notification.requestPermission();
 
@@ -306,7 +311,9 @@
 				</div>
 				<Textarea
 					bind:value={system}
-					className="w-full resize-vertical appearance-none bg-transparent text-sm outline-hidden focus:bg-transparent disabled:bg-transparent dark:text-gray-300"
+					className={($settings?.highContrastMode ?? false)
+						? systemPromptTextareaClass
+						: compactSystemPromptTextareaClass}
 					rows="4"
 					placeholder={$i18n.t('Enter system prompt here')}
 				/>