OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-23 02:16:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac: input prompt

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-04-04 09:11:54 -06:00
parent 77fa11098a
commit feaf434d4e
6 changed files with 35 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/chat/MessageInput.svelte
View File

@ -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);

17
src/lib/components/chat/MessageInput/Commands/Prompts.svelte
View File

@ -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>

2
src/lib/components/chat/MessageInput/VoiceRecording.svelte
View File

@ -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';

15
src/lib/components/chat/Messages.svelte
View File

@ -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();
}}
/>

26
src/lib/components/chat/Placeholder.svelte
View File

@ -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

6
src/lib/utils/index.ts
View File

@ -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
});