fix: various rich text input issues

#15140

src/lib/components/chat/MessageInput/Commands/Knowledge.svelte

@@ -6,16 +6,15 @@
 	import relativeTime from 'dayjs/plugin/relativeTime';
 	dayjs.extend(relativeTime);
 
-	import { createEventDispatcher, tick, getContext, onMount, onDestroy } from 'svelte';
+	import { tick, getContext, onMount, onDestroy } from 'svelte';
 	import { removeLastWordFromString, isValidHttpUrl } from '$lib/utils';
 	import { knowledge } from '$lib/stores';
 
 	const i18n = getContext('i18n');
 
-	export let prompt = '';
 	export let command = '';
+	export let onSelect = (e) => {};
 
-	const dispatch = createEventDispatcher();
 	let selectedIdx = 0;
 
 	let items = [];
@@ -60,37 +59,12 @@
 			}, 100);
 		}
 	};
-	const confirmSelect = async (item) => {
-		dispatch('select', item);
 
-		prompt = removeLastWordFromString(prompt, command);
-		const chatInputElement = document.getElementById('chat-input');
-
-		await tick();
-		chatInputElement?.focus();
-		await tick();
-	};
-
-	const confirmSelectWeb = async (url) => {
-		dispatch('url', url);
-
-		prompt = removeLastWordFromString(prompt, command);
-		const chatInputElement = document.getElementById('chat-input');
-
-		await tick();
-		chatInputElement?.focus();
-		await tick();
-	};
-
-	const confirmSelectYoutube = async (url) => {
-		dispatch('youtube', url);
-
-		prompt = removeLastWordFromString(prompt, command);
-		const chatInputElement = document.getElementById('chat-input');
-
-		await tick();
-		chatInputElement?.focus();
-		await tick();
+	const confirmSelect = async (type, data) => {
+		onSelect({
+			type: type,
+			data: data
+		});
 	};
 
 	const decodeString = (str: string) => {
@@ -189,7 +163,7 @@
 	});
 </script>
 
-{#if filteredItems.length > 0 || prompt.split(' ')?.at(0)?.substring(1).startsWith('http')}
+{#if filteredItems.length > 0 || command?.substring(1).startsWith('http')}
 	<div
 		id="commands-container"
 		class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
@@ -210,7 +184,7 @@
 							type="button"
 							on:click={() => {
 								console.log(item);
-								confirmSelect(item);
+								confirmSelect('knowledge', item);
 							}}
 							on:mousemove={() => {
 								selectedIdx = idx;
@@ -298,18 +272,15 @@
 							</div> -->
 					{/each}
 
-					{#if prompt
-						.split(' ')
-						.some((s) => s.substring(1).startsWith('https://www.youtube.com') || s
-									.substring(1)
-									.startsWith('https://youtu.be'))}
+					{#if command.substring(1).startsWith('https://www.youtube.com') || command
+							.substring(1)
+							.startsWith('https://youtu.be')}
 						<button
 							class="px-3 py-1.5 rounded-xl w-full text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 selected-command-option-button"
 							type="button"
 							on:click={() => {
-								const url = prompt.split(' ')?.at(0)?.substring(1);
-								if (isValidHttpUrl(url)) {
-									confirmSelectYoutube(url);
+								if (isValidHttpUrl(command.substring(1))) {
+									confirmSelect('youtube', command.substring(1));
 								} else {
 									toast.error(
 										$i18n.t(
@@ -320,19 +291,18 @@
 							}}
 						>
 							<div class=" font-medium text-black dark:text-gray-100 line-clamp-1">
-								{prompt.split(' ')?.at(0)?.substring(1)}
+								{command.substring(1)}
 							</div>
 
 							<div class=" text-xs text-gray-600 line-clamp-1">{$i18n.t('Youtube')}</div>
 						</button>
-					{:else if prompt.split(' ')?.at(0)?.substring(1).startsWith('http')}
+					{:else if command.substring(1).startsWith('http')}
 						<button
 							class="px-3 py-1.5 rounded-xl w-full text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 selected-command-option-button"
 							type="button"
 							on:click={() => {
-								const url = prompt.split(' ')?.at(0)?.substring(1);
-								if (isValidHttpUrl(url)) {
-									confirmSelectWeb(url);
+								if (isValidHttpUrl(command.substring(1))) {
+									confirmSelect('web', command.substring(1));
 								} else {
 									toast.error(
 										$i18n.t(
@@ -343,7 +313,7 @@
 							}}
 						>
 							<div class=" font-medium text-black dark:text-gray-100 line-clamp-1">
-								{prompt.split(' ')?.at(0)?.substring(1)}
+								{command}
 							</div>
 
 							<div class=" text-xs text-gray-600 line-clamp-1">{$i18n.t('Web')}</div>