From feaf434d4e8ede0fe1a5397afac9fb20b0cc18c5 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 4 Apr 2025 09:11:54 -0600
Subject: [PATCH] refac: input prompt

---
 src/lib/components/chat/MessageInput.svelte   | 10 +++++--
 .../chat/MessageInput/Commands/Prompts.svelte | 17 +++++++-----
 .../chat/MessageInput/VoiceRecording.svelte   |  2 +-
 src/lib/components/chat/Messages.svelte       | 15 +----------
 src/lib/components/chat/Placeholder.svelte    | 26 +++++++++----------
 src/lib/utils/index.ts                        |  6 ++---
 6 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 9251ba4e4..045fe0a3d 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/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);
diff --git a/src/lib/components/chat/MessageInput/Commands/Prompts.svelte b/src/lib/components/chat/MessageInput/Commands/Prompts.svelte
index 26cf1d368..1ac6ae193 100644
--- a/src/lib/components/chat/MessageInput/Commands/Prompts.svelte
+++ b/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.style.height =
-				Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
+			chatInputContainerElement.scrollTop = chatInputContainerElement.scrollHeight;
 		}
 
 		await tick();
 		if (chatInputElement) {
 			chatInputElement.focus();
 			chatInputElement.dispatchEvent(new Event('input'));
+
+			chatInputElement.scrollTop = chatInputElement.scrollHeight;
 		}
 	};
 </script>
diff --git a/src/lib/components/chat/MessageInput/VoiceRecording.svelte b/src/lib/components/chat/MessageInput/VoiceRecording.svelte
index 7a30fb74d..a5b781247 100644
--- a/src/lib/components/chat/MessageInput/VoiceRecording.svelte
+++ b/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';
 
diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index b55a27b40..160d7eb37 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/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();
 			}}
 		/>
diff --git a/src/lib/components/chat/Placeholder.svelte b/src/lib/components/chat/Placeholder.svelte
index be700ab00..545d43c44 100644
--- a/src/lib/components/chat/Placeholder.svelte
+++ b/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.style.height =
-				Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
+			chatInputContainerElement.scrollTop = chatInputContainerElement.scrollHeight;
 		}
 
 		await tick();
@@ -86,21 +84,21 @@
 	}
 
 	$: models = selectedModels.map((id) => $_models.find((m) => m.id === id));
-	
+
 	onMount(() => {});
 </script>
 
 <div class="m-auto w-full max-w-6xl px-2 @2xl:px-20 translate-y-6 py-24 text-center">
 	{#if $temporaryChatEnabled}
-	<Tooltip
-		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"
-		placement="top"
-	>
-		<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')}
-		</div>
-	</Tooltip>
+		<Tooltip
+			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"
+			placement="top"
+		>
+			<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')}
+			</div>
+		</Tooltip>
 	{/if}
 
 	<div
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index eef687a2a..5e70d17bb 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -361,14 +361,14 @@ export const compareVersion = (latest, current) => {
 			}) < 0;
 };
 
-export const findWordIndices = (text) => {
-	const regex = /\[([^\]]+)\]/g;
+export const extractCurlyBraceWords = (text) => {
+	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
 		});