Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 19x 19x 19x 2x 47x 19x 24x 19x 25x 35x 35x 19x 19x 5x 19x 2x 2x 1x 1x 35x 47x 6x 2x 2x | <script setup>
import { computed, ref } from 'vue';
const props = defineProps({
body: { type: String, required: true },
variables: { type: Array, required: true },
useLabel: { type: String, default: 'Use prompt' },
busy: { type: Boolean, default: false },
});
const emit = defineEmits(['use']);
// Mirrors App\Services\PromptRenderer::VARIABLE_PATTERN (see SPECS.md §6).
const VARIABLE_PATTERN = /\{\{\s*([A-Za-z0-9_-]+)\s*\}\}/g;
const PLACEHOLDER = '{{variables}}';
const wrap = (name) => '{{' + name + '}}';
const values = ref(
Object.fromEntries(props.variables.map((name) => [name, '']))
);
const preview = computed(() =>
props.body.replace(VARIABLE_PATTERN, (match, name) => {
const value = values.value[name];
return typeof value === 'string' && value !== '' ? value : match;
})
);
const copied = ref(false);
// Must run in script scope: inside the template `values` is auto-unwrapped,
// so `{ ...values.value }` there would spread `undefined`.
const emitUse = () => {
emit('use', { ...values.value });
};
const copyPreview = async () => {
try {
await navigator.clipboard.writeText(preview.value);
copied.value = true;
setTimeout(() => (copied.value = false), 1500);
} catch {
// Clipboard unavailable (e.g. insecure context) — ignore.
}
};
</script>
<template>
<div class="space-y-4 rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
<div>
<h2 class="text-sm font-semibold text-slate-900">Fill in variables</h2>
<p v-if="variables.length === 0" class="mt-1 text-xs text-slate-500">
This prompt has no <code class="rounded bg-slate-100 px-1 py-0.5">{{ PLACEHOLDER }}</code>.
</p>
<div v-else class="mt-3 space-y-3">
<div v-for="name in variables" :key="name">
<label
:for="`var-${name}`"
class="mb-1 block font-mono text-xs text-slate-600"
>
{{ wrap(name) }}
</label>
<textarea
:id="`var-${name}`"
v-model="values[name]"
rows="2"
class="w-full rounded-md border border-slate-300 px-3 py-2 font-mono text-sm shadow-sm focus:border-slate-500 focus:outline-none"
/>
</div>
</div>
</div>
<div>
<div class="mb-1 flex items-center justify-between">
<h2 class="text-sm font-semibold text-slate-900">Live preview</h2>
<button
type="button"
class="text-xs text-slate-500 hover:text-slate-800 hover:underline"
@click="copyPreview"
>
{{ copied ? '✓ Copied' : 'Copy preview' }}
</button>
</div>
<pre
class="max-h-72 overflow-auto whitespace-pre-wrap rounded-md bg-slate-50 p-3 font-mono text-xs leading-relaxed text-slate-700"
>{{ preview }}</pre>
</div>
<button
type="button"
class="w-full rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-50"
:disabled="busy"
@click="emitUse"
>
{{ useLabel }}
</button>
</div>
</template>
|