refac

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

@@ -5,6 +5,7 @@
 	import { WEBUI_API_BASE_URL } from '$lib/constants';
 
 	import XMark from '$lib/components/icons/XMark.svelte';
+	import Textarea from '$lib/components/common/Textarea.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -111,15 +112,12 @@
 								</div>
 							</Tooltip>
 							{#if document.metadata?.parameters}
-								<div class="text-sm font-medium dark:text-gray-300 mt-2">
+								<div class="text-sm font-medium dark:text-gray-300 mt-2 mb-0.5">
 									{$i18n.t('Parameters')}
 								</div>
-								<pre
-									class="text-sm dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-2 rounded-md overflow-auto max-h-40">{JSON.stringify(
-										document.metadata.parameters,
-										null,
-										2
-									)}</pre>
+
+								<Textarea readonly value={JSON.stringify(document.metadata.parameters, null, 2)}
+								></Textarea>
 							{/if}
 							{#if showRelevance}
 								<div class="text-sm font-medium dark:text-gray-300 mt-2">

src/lib/components/common/Textarea.svelte

@@ -7,6 +7,7 @@
 	export let minSize = null;
 	export let maxSize = null;
 	export let required = false;
+	export let readonly = false;
 	export let className =
 		'w-full rounded-lg px-3.5 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden  h-full';
 
@@ -54,6 +55,7 @@
 	style="field-sizing: content;"
 	{rows}
 	{required}
+	{readonly}
 	on:input={(e) => {
 		resize();
 	}}