refac: input prompt

src/lib/components/chat/MessageInput.svelte

@@ -21,7 +21,12 @@
 		TTSWorker
 	} from '$lib/stores';
 
-	import { blobToFile, compressImage, createMessagesList, findWordIndices } from '$lib/utils';
+	import {
+		blobToFile,
+		compressImage,
+		createMessagesList,
+		extractCurlyBraceWords
+	} from '$lib/utils';
 	import { transcribeAudio } from '$lib/apis/audio';
 	import { uploadFile } from '$lib/apis/files';
 	import { generateAutoCompletion } from '$lib/apis';
@@ -631,6 +636,7 @@
 									{#if $settings?.richTextInput ?? true}
 										<div
 											class="scrollbar-hidden text-left bg-transparent dark:text-gray-100 outline-hidden w-full pt-3 px-1 resize-none h-fit max-h-80 overflow-auto"
+											id="chat-input-container"
 										>
 											<RichTextInput
 												bind:this={chatInputElement}
@@ -977,7 +983,7 @@
 												}
 
 												if (e.key === 'Tab') {
-													const words = findWordIndices(prompt);
+													const words = extractCurlyBraceWords(prompt);
 
 													if (words.length > 0) {
 														const word = words.at(0);

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { prompts, settings, user } from '$lib/stores';
 	import {
-		findWordIndices,
+		extractCurlyBraceWords,
 		getUserPosition,
 		getFormattedDate,
 		getFormattedTime,
@@ -127,29 +127,32 @@
 		const lastWord = lastLineWords.pop();
 
 		if ($settings?.richTextInput ?? true) {
-			lastLineWords.push(`${text.replace(/</g, '&lt;').replace(/>/g, '&gt;')}`);
+			lastLineWords.push(
+				`${text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replaceAll('\n', '<br/>')}`
+			);
+
 			lines.push(lastLineWords.join(' '));
+			prompt = lines.join('<br/>');
 		} else {
 			lastLineWords.push(text);
 			lines.push(lastLineWords.join(' '));
+			prompt = lines.join('\n');
 		}
 
-		prompt = lines.join('\n');
-
 		const chatInputContainerElement = document.getElementById('chat-input-container');
 		const chatInputElement = document.getElementById('chat-input');
 
 		await tick();
 		if (chatInputContainerElement) {
-			chatInputContainerElement.style.height = '';
+			chatInputContainerElement.scrollTop = chatInputContainerElement.scrollHeight;
-			chatInputContainerElement.style.height =
-				Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
 		}
 
 		await tick();
 		if (chatInputElement) {
 			chatInputElement.focus();
 			chatInputElement.dispatchEvent(new Event('input'));
+
+			chatInputElement.scrollTop = chatInputElement.scrollHeight;
 		}
 	};
 </script>

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

@@ -2,7 +2,7 @@
 	import { toast } from 'svelte-sonner';
 	import { createEventDispatcher, tick, getContext, onMount, onDestroy } from 'svelte';
 	import { config, settings } from '$lib/stores';
-	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
+	import { blobToFile, calculateSHA256, extractCurlyBraceWords } from '$lib/utils';
 
 	import { transcribeAudio } from '$lib/apis/audio';
 

src/lib/components/chat/Messages.svelte

@@ -14,7 +14,7 @@
 
 	import { toast } from 'svelte-sonner';
 	import { getChatList, updateChatById } from '$lib/apis/chats';
-	import { copyToClipboard, findWordIndices } from '$lib/utils';
+	import { copyToClipboard, extractCurlyBraceWords } from '$lib/utils';
 
 	import Message from './Messages/Message.svelte';
 	import Loader from '../common/Loader.svelte';
@@ -406,19 +406,6 @@
 				}
 
 				prompt = text;
-
-				await tick();
-
-				const chatInputContainerElement = document.getElementById('chat-input-container');
-				if (chatInputContainerElement) {
-					prompt = p;
-
-					chatInputContainerElement.style.height = '';
-					chatInputContainerElement.style.height =
-						Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
-					chatInputContainerElement.focus();
-				}
-
 				await tick();
 			}}
 		/>

src/lib/components/chat/Placeholder.svelte

@@ -8,7 +8,7 @@
 	const dispatch = createEventDispatcher();
 
 	import { config, user, models as _models, temporaryChatEnabled } from '$lib/stores';
-	import { sanitizeResponseContent, findWordIndices } from '$lib/utils';
+	import { sanitizeResponseContent, extractCurlyBraceWords } from '$lib/utils';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	import Suggestions from './Suggestions.svelte';
@@ -65,9 +65,7 @@
 		const chatInputElement = document.getElementById('chat-input');
 
 		if (chatInputContainerElement) {
-			chatInputContainerElement.style.height = '';
+			chatInputContainerElement.scrollTop = chatInputContainerElement.scrollHeight;
-			chatInputContainerElement.style.height =
-				Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
 		}
 
 		await tick();
@@ -92,15 +90,15 @@
 
 <div class="m-auto w-full max-w-6xl px-2 @2xl:px-20 translate-y-6 py-24 text-center">
 	{#if $temporaryChatEnabled}
-	<Tooltip
+		<Tooltip
-		content={$i18n.t('This chat won’t appear in history and your messages will not be saved.')}
+			content={$i18n.t('This chat won’t appear in history and your messages will not be saved.')}
-		className="w-full flex justify-center mb-0.5"
+			className="w-full flex justify-center mb-0.5"
-		placement="top"
+			placement="top"
-	>
+		>
-		<div class="flex items-center gap-2 text-gray-500 font-medium text-lg my-2 w-fit">
+			<div class="flex items-center gap-2 text-gray-500 font-medium text-lg my-2 w-fit">
-			<EyeSlash strokeWidth="2.5" className="size-5" />{$i18n.t('Temporary Chat')}
+				<EyeSlash strokeWidth="2.5" className="size-5" />{$i18n.t('Temporary Chat')}
-		</div>
+			</div>
-	</Tooltip>
+		</Tooltip>
 	{/if}
 
 	<div

src/lib/utils/index.ts

@@ -361,14 +361,14 @@ export const compareVersion = (latest, current) => {
 			}) < 0;
 };
 
-export const findWordIndices = (text) => {
+export const extractCurlyBraceWords = (text) => {
-	const regex = /\[([^\]]+)\]/g;
+	const regex = /\{\{([^}]+)\}\}/g;
 	const matches = [];
 	let match;
 
 	while ((match = regex.exec(text)) !== null) {
 		matches.push({
-			word: match[1],
+			word: match[1].trim(),
 			startIndex: match.index,
 			endIndex: regex.lastIndex - 1
 		});