fix: replace download with inline copy-paste setup guide, fix CSP for WASM + Nostr relays
- Replace file download with collapsible inline guide + COPY ALL button - Guide content has bot_id/secret pre-filled from credentials - JoinBoutPage: "COPY GUIDE + CREDENTIALS" eagerly loads guide content - BotProfilePage: webhook/polling guide selector with copy after secret regen - CSP: add wasm-unsafe-eval to scriptSrc (fixes Kokoro TTS WASM) - CSP: add wss://relay.damus.io, wss://relay.nostr.band, wss://nos.lol to connectSrc Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
cef9f4188f
commit
60dd6893be
@@ -106,12 +106,16 @@ const webhookTestResult = ref<{ reachable: boolean; validResponse: boolean; late
|
||||
const webhookError = ref('')
|
||||
const webhookSuccess = ref('')
|
||||
|
||||
// Setup guide download
|
||||
// Setup guide
|
||||
const showSetupGuide = ref(false)
|
||||
const isRegenerating = ref(false)
|
||||
const regeneratedSecret = ref('')
|
||||
const regeneratedBotId = ref('')
|
||||
const regenError = ref('')
|
||||
const guideContent = ref('')
|
||||
const guideLoading = ref(false)
|
||||
const guideCopied = ref(false)
|
||||
const guideMode = ref<'webhook' | 'polling'>('webhook')
|
||||
|
||||
const ARCHETYPES = [
|
||||
'standard', 'lobster', 'sheep', 'cyborg', 'blob', 'tank', 'dog', 'cat',
|
||||
@@ -290,26 +294,28 @@ async function handleRegenerateSecret() {
|
||||
isRegenerating.value = false
|
||||
}
|
||||
|
||||
async function downloadGuide(mode: 'webhook' | 'polling') {
|
||||
async function loadGuide(mode: 'webhook' | 'polling') {
|
||||
guideMode.value = mode
|
||||
guideLoading.value = true
|
||||
guideContent.value = ''
|
||||
guideCopied.value = false
|
||||
const path = mode === 'polling' ? '/docs/BOTFIGHTS-POLLING.md' : '/docs/BOTFIGHTS-WEBHOOK.md'
|
||||
const fileName = mode === 'polling' ? 'BOTFIGHTS-POLLING.md' : 'BOTFIGHTS-WEBHOOK.md'
|
||||
try {
|
||||
const res = await fetch(path)
|
||||
let content = await res.text()
|
||||
content = content.replace(/YOUR_BOT_ID/g, regeneratedBotId.value)
|
||||
content = content.replace(/YOUR_BOT_SECRET/g, regeneratedSecret.value)
|
||||
const blob = new Blob([content], { type: 'text/markdown' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = fileName
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
guideContent.value = content
|
||||
} catch {
|
||||
window.open(path, '_blank')
|
||||
guideContent.value = '# Failed to load setup guide'
|
||||
}
|
||||
guideLoading.value = false
|
||||
}
|
||||
|
||||
function copyGuide() {
|
||||
navigator.clipboard.writeText(guideContent.value)
|
||||
guideCopied.value = true
|
||||
setTimeout(() => { guideCopied.value = false }, 2000)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -835,11 +841,11 @@ const tierClass = (t: number) => `tier-${t}`
|
||||
|
||||
<div v-if="showSetupGuide" class="mt-3 border border-border bg-surface-raised/60 p-4 space-y-3">
|
||||
<p class="font-mono text-[10px] text-text-muted leading-relaxed">
|
||||
Download the setup guide with your credentials embedded.
|
||||
Get the setup guide with your credentials embedded.
|
||||
This requires regenerating your bot secret (your old secret will stop working).
|
||||
</p>
|
||||
|
||||
<!-- Already regenerated — show credentials + download -->
|
||||
<!-- Already regenerated — show credentials + guide content -->
|
||||
<template v-if="regeneratedSecret">
|
||||
<div class="p-2.5 border border-neon-green/30 bg-neon-green/5">
|
||||
<p class="font-display font-bold text-[10px] tracking-wider text-neon-green mb-2">NEW SECRET GENERATED</p>
|
||||
@@ -850,24 +856,53 @@ const tierClass = (t: number) => `tier-${t}`
|
||||
<p class="font-mono text-[9px] text-ko mt-2">Save this now. It will not be shown again after you leave this page.</p>
|
||||
</div>
|
||||
|
||||
<!-- Guide type selector -->
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="flex-1 py-2 bg-neon-purple/10 border border-neon-purple/40 text-neon-purple
|
||||
font-display font-bold text-[10px] tracking-wider
|
||||
hover:bg-neon-purple/20 transition-all"
|
||||
@click="downloadGuide('webhook')"
|
||||
class="flex-1 py-1.5 border font-display font-bold text-[10px] tracking-wider transition-all"
|
||||
:class="guideMode === 'webhook'
|
||||
? 'border-neon-cyan/50 text-neon-cyan bg-neon-cyan/10'
|
||||
: 'border-border text-text-muted hover:border-neon-cyan/30'"
|
||||
@click="loadGuide('webhook')"
|
||||
>
|
||||
WEBHOOK GUIDE
|
||||
WEBHOOK
|
||||
</button>
|
||||
<button
|
||||
class="flex-1 py-2 bg-neon-cyan/10 border border-neon-cyan/40 text-neon-cyan
|
||||
font-display font-bold text-[10px] tracking-wider
|
||||
hover:bg-neon-cyan/20 transition-all"
|
||||
@click="downloadGuide('polling')"
|
||||
class="flex-1 py-1.5 border font-display font-bold text-[10px] tracking-wider transition-all"
|
||||
:class="guideMode === 'polling'
|
||||
? 'border-neon-purple/50 text-neon-purple bg-neon-purple/10'
|
||||
: 'border-border text-text-muted hover:border-neon-purple/30'"
|
||||
@click="loadGuide('polling')"
|
||||
>
|
||||
POLLING GUIDE
|
||||
POLLING
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Guide content -->
|
||||
<div v-if="guideContent" class="border border-border bg-black/40 overflow-hidden">
|
||||
<div class="flex items-center justify-between px-3 py-2 border-b border-border/50 bg-surface-raised/30">
|
||||
<span class="font-display font-bold text-[9px] tracking-wider text-text-muted">
|
||||
{{ guideMode === 'polling' ? 'BOTFIGHTS-POLLING.md' : 'BOTFIGHTS-WEBHOOK.md' }}
|
||||
</span>
|
||||
<button
|
||||
class="font-display font-bold text-[9px] tracking-wider px-2 py-0.5 border transition-all"
|
||||
:class="guideCopied
|
||||
? 'border-neon-green/40 text-neon-green'
|
||||
: 'border-border text-text-muted hover:border-neon-cyan/40 hover:text-neon-cyan'"
|
||||
@click="copyGuide"
|
||||
>
|
||||
{{ guideCopied ? 'COPIED' : 'COPY ALL' }}
|
||||
</button>
|
||||
</div>
|
||||
<pre class="p-3 font-mono text-[10px] text-text-secondary leading-relaxed
|
||||
overflow-x-auto max-h-60 overflow-y-auto whitespace-pre-wrap break-words select-all">{{ guideContent }}</pre>
|
||||
</div>
|
||||
<div v-else-if="guideLoading" class="p-4 text-center">
|
||||
<p class="font-mono text-[10px] text-text-muted animate-pulse">Loading...</p>
|
||||
</div>
|
||||
<p v-else class="font-mono text-[10px] text-text-muted text-center">
|
||||
Choose webhook or polling above to view the setup guide.
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<!-- Not yet regenerated — show button -->
|
||||
@@ -882,7 +917,7 @@ const tierClass = (t: number) => `tier-${t}`
|
||||
@click="handleRegenerateSecret"
|
||||
>
|
||||
<span v-if="isRegenerating" class="w-3 h-3 border-2 border-neon-yellow/30 border-t-neon-yellow rounded-full animate-spin" />
|
||||
{{ isRegenerating ? 'REGENERATING...' : 'REGENERATE SECRET & DOWNLOAD' }}
|
||||
{{ isRegenerating ? 'REGENERATING...' : 'REGENERATE SECRET' }}
|
||||
</button>
|
||||
<p class="font-mono text-[9px] text-text-muted">
|
||||
Your current bot secret will be invalidated and replaced with a new one.
|
||||
|
||||
Reference in New Issue
Block a user