103 lines
3.4 KiB
Vue
103 lines
3.4 KiB
Vue
<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>
|