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

Add feature to display prompt in modal and better formatting and description

Browse Source 
Add feature to display prompt in modal and better formatting and description
This commit is contained in:
Classic298 2025-06-16 21:04:26 +02:00 committed by GitHub
parent 86125ebf21
commit 7d547148d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -468,7 +468,7 @@
return [...new Set(matches)].filter(v => !RESERVED_VARIABLES.includes(v.toUpperCase()));
};
const variableModalSubtitle = $i18n.t('Your prompt uses variables as placeholders. You may replace individual variables with values here:');
const variableModalSubtitle = $i18n.t('Your prompt uses the highlighted variables as placeholders');
onMount(async () => {
loaded = true;
@ -516,6 +516,7 @@
<VariableInputModal
bind:show={showVariableInputModal}
variables={activePromptVariables}
promptRawContent={prompt}
subtitle={variableModalSubtitle}
on:submit={(e) => {
const submittedValues = e.detail;

30
src/lib/components/chat/VariableInputModal.svelte
View File

@ -9,9 +9,27 @@
export let show = false;
export let variables: string[] = [];
export let subtitle: string = '';
export let promptRawContent = '';
let variableValues: { [key: string]: string } = {};
$: formattedPromptDisplay = (() => {
if (!promptRawContent) {
return '';
}
// Escape HTML tags in promptRawContent
let escapedPrompt = promptRawContent.replace(/</g, '&lt;').replace(/>/g, '&gt;');
if (variables && variables.length > 0) {
variables.forEach((variable) => {
const regex = new RegExp(`{{\\s*${variable}\\s*}}`, 'g');
escapedPrompt = escapedPrompt.replace(regex, `<strong>{{${variable}}}</strong>`);
});
}
return escapedPrompt;
})();
$: {
const newValues = {};
for (const variable of variables) {
@ -62,6 +80,16 @@
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1 px-5">{@html subtitle}</p>
{/if}
{#if promptRawContent}
<div
class="max-h-56 overflow-y-auto bg-gray-50 dark:bg-gray-800 p-2 rounded-md my-3 text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-words mx-5"
>
{@html formattedPromptDisplay}
</div>
{/if}
<p class="text-sm text-gray-600 dark:text-gray-400 mt-3 px-5">{$i18n.t('You may replace the placeholder variables with values below. Note that if you do not enter a value, the placeholder will be removed from the text.')}</p>
<div class="p-5 max-h-[60vh] overflow-y-auto">
{#each variables as variable (variable)}
<div class="flex flex-col mb-4">
@ -70,7 +98,7 @@
</div>
<Textarea
id="variable-{variable}"
className="w-full bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700 rounded-md p-2 text-sm dark:text-gray-100 focus:ring-blue-500 focus:border-blue-500 mt-1"
class="w-full bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700 rounded-md p-2 text-sm dark:text-gray-100 focus:ring-blue-500 focus:border-blue-500 mt-1"
placeholder={$i18n.t('Enter value here')}
bind:value={variableValues[variable]}
rows={2}