+ {@html $i18n.t('Insert a value for {{variable}}', { variable })}
+
+
+ {/each}
+
+
+
+
+
+
+
+
From 7d547148d7681421145ba27275e01f16a53bd07a Mon Sep 17 00:00:00 2001
From: Classic298 <27028174+Classic298@users.noreply.github.com>
Date: Mon, 16 Jun 2025 21:04:26 +0200
Subject: [PATCH 5/5] Add feature to display prompt in modal and better
formatting and description
Add feature to display prompt in modal and better formatting and description
---
src/lib/components/chat/MessageInput.svelte | 3 +-
.../components/chat/VariableInputModal.svelte | 30 ++++++++++++++++++-
2 files changed, 31 insertions(+), 2 deletions(-)
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 2b2637b3b..cabb35d61 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -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 @@
{
const submittedValues = e.detail;
diff --git a/src/lib/components/chat/VariableInputModal.svelte b/src/lib/components/chat/VariableInputModal.svelte
index 32ee72cea..2de2d6222 100644
--- a/src/lib/components/chat/VariableInputModal.svelte
+++ b/src/lib/components/chat/VariableInputModal.svelte
@@ -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, '>');
+
+ if (variables && variables.length > 0) {
+ variables.forEach((variable) => {
+ const regex = new RegExp(`{{\\s*${variable}\\s*}}`, 'g');
+ escapedPrompt = escapedPrompt.replace(regex, `{{${variable}}}`);
+ });
+ }
+ return escapedPrompt;
+ })();
+
$: {
const newValues = {};
for (const variable of variables) {
@@ -62,6 +80,16 @@
{@html subtitle}
{/if}
+ {#if promptRawContent}
+
+ {@html formattedPromptDisplay}
+
+ {/if}
+
+
{$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.')}