1948 lines
73 KiB
JavaScript
1948 lines
73 KiB
JavaScript
|
|
import {
|
|
initNDKPage,
|
|
getPubkey, injectHeaderAvatar,
|
|
disconnect,
|
|
getVersion,
|
|
updateVersionDisplay,
|
|
getUserSettings,
|
|
patchUserSettings,
|
|
onUserSettings,
|
|
subscribe,
|
|
publishEvent,
|
|
fetchCachedProfile
|
|
} from './js/init-ndk.mjs';
|
|
import { HamburgerMorphing } from './hamburger_morphing/hamburger.mjs';
|
|
import {
|
|
initFooterRelayStatus,
|
|
updateFooterRelayStatus,
|
|
initSidenavRelaySection,
|
|
updateSidenavRelaySection,
|
|
setRelayActivityState
|
|
} from './js/relay-ui.mjs';
|
|
import { initBlossomSection, updateBlossomSection } from './js/blossom-ui.mjs';
|
|
|
|
import { initAiSectionWithLocalConfig } from './js/ai-ui.mjs';
|
|
import { uploadToServer, getDefaultBlossomServer } from './js/blossom-api.mjs';
|
|
const AI_CONFIG_KEY = 'ai_chat_openai_config_v1';
|
|
|
|
let updateIntervalId = null;
|
|
let currentPubkey = null;
|
|
let hamburgerInstance = null;
|
|
let isNavOpen = false;
|
|
let logoutHamburger = null;
|
|
let themeToggleHamburger = null;
|
|
let isDarkMode = false;
|
|
|
|
const DEFAULT_TV_SYSTEM_PROMPT = 'You are a web page generator. You must respond to ALL requests with a complete, valid HTML page. Your response must be ONLY the HTML — no markdown, no explanation, no code fences. The page should be self-contained with inline CSS and JavaScript as needed.';
|
|
const DEFAULT_SKILL_TEMPLATE = `system:
|
|
${DEFAULT_TV_SYSTEM_PROMPT}
|
|
|
|
user:
|
|
{{message}}`;
|
|
|
|
let isSending = false;
|
|
let skills = [];
|
|
let skillFilterMode = 'all';
|
|
let selectedSkillKey = null;
|
|
let skillSubscription = null;
|
|
let skillSubId = null;
|
|
let renderedPages = [];
|
|
let selectedRenderedPageId = null;
|
|
const authorProfiles = new Map();
|
|
const profileLookupInFlight = new Set();
|
|
let aiConfig = {
|
|
provider: 'ppq.ai',
|
|
api_key: '',
|
|
credit_id: '',
|
|
model: 'claude-haiku-4.5',
|
|
base_url: 'https://api.ppq.ai',
|
|
max_tokens: 512,
|
|
temperature: 0.7,
|
|
providers: [
|
|
{ name: 'ppq.ai', url: 'https://api.ppq.ai' },
|
|
{ name: 'Routstr', url: 'https://api.routstr.com' }
|
|
],
|
|
favorites: []
|
|
};
|
|
|
|
let fetchedModels = [];
|
|
let fetchModels = async () => {};
|
|
let activeInvoicePollId = 0;
|
|
let previewPopoutWindow = null;
|
|
|
|
const divSideNav = document.getElementById('divSideNav');
|
|
const divSideNavBody = document.getElementById('divSideNavBody');
|
|
const divFooterCenter = document.getElementById('divFooterCenter');
|
|
const divFooterRight = document.getElementById('divFooterRight');
|
|
const divFooterBalance = document.getElementById('divFooterBalance');
|
|
|
|
const divAiConversationsList = document.getElementById('divAiConversationsList');
|
|
const divAiMessages = document.getElementById('divAiMessages');
|
|
const divAiStatus = document.getElementById('divAiStatus');
|
|
const divAiProviderBalanceHeader = document.getElementById('divAiProviderBalanceHeader');
|
|
const iframeAiTv = document.getElementById('iframeAiTv');
|
|
const divAiViewerLoading = document.getElementById('divAiViewerLoading');
|
|
|
|
const selAiProvider = document.getElementById('selAiProvider');
|
|
const selAiModel = document.getElementById('selAiModel');
|
|
const taAiPrompt = document.getElementById('taAiPrompt');
|
|
const taAiSystemPrompt = document.getElementById('taAiSystemPrompt');
|
|
const divAiInputArea = document.getElementById('divAiInputArea');
|
|
const btnAiRun = document.getElementById('btnAiRun');
|
|
const btnAiSaveSkill = document.getElementById('btnAiSaveSkill');
|
|
const btnSkillFilterAll = document.getElementById('btnSkillFilterAll');
|
|
const btnSkillFilterMy = document.getElementById('btnSkillFilterMy');
|
|
const btnSkillNew = document.getElementById('btnSkillNew');
|
|
const btnSkillDelete = document.getElementById('btnSkillDelete');
|
|
const btnSkillRefresh = document.getElementById('btnSkillRefresh');
|
|
const inpSkillSlug = document.getElementById('inpSkillSlug');
|
|
const inpSkillDescription = document.getElementById('inpSkillDescription');
|
|
const taSkillTemplate = document.getElementById('taSkillTemplate');
|
|
const inpSkillTemperature = document.getElementById('inpSkillTemperature');
|
|
const inpSkillMaxTokens = document.getElementById('inpSkillMaxTokens');
|
|
const inpSkillSeed = document.getElementById('inpSkillSeed');
|
|
const btnAiSaveRenderedPage = document.getElementById('btnAiSaveRenderedPage');
|
|
const btnAiPopoutPreview = document.getElementById('btnAiPopoutPreviewOverlay');
|
|
const lnkAiLaunchRenderedPage = document.getElementById('lnkAiLaunchRenderedPage');
|
|
|
|
const selCfgProvider = document.getElementById('selCfgProvider');
|
|
const inpCfgBaseUrl = document.getElementById('inpCfgBaseUrl');
|
|
const inpCfgApiKey = document.getElementById('inpCfgApiKey');
|
|
const inpCfgCreditId = document.getElementById('inpCfgCreditId');
|
|
const divPpqCreditIdGroup = document.getElementById('divPpqCreditIdGroup');
|
|
const selCfgModel = document.getElementById('selCfgModel');
|
|
const inpCfgModelFilter = document.getElementById('inpCfgModelFilter');
|
|
const btnCfgFav = document.getElementById('btnCfgFav');
|
|
const ddAiModel = document.getElementById('ddAiModel');
|
|
const btnAiModelDropdown = document.getElementById('btnAiModelDropdown');
|
|
const inpAiModelFilter = document.getElementById('inpAiModelFilter');
|
|
const divAiModelOptions = document.getElementById('divAiModelOptions');
|
|
const ddCfgModel = document.getElementById('ddCfgModel');
|
|
const btnCfgModelDropdown = document.getElementById('btnCfgModelDropdown');
|
|
const divCfgModelOptions = document.getElementById('divCfgModelOptions');
|
|
const inpCfgMaxTokens = document.getElementById('inpCfgMaxTokens');
|
|
const inpCfgTemperature = document.getElementById('inpCfgTemperature');
|
|
const btnCfgSave = document.getElementById('btnCfgSave');
|
|
const btnCfgCopyApiKey = document.getElementById('btnCfgCopyApiKey');
|
|
|
|
const btnRoutstrGetBalance = document.getElementById('btnRoutstrGetBalance');
|
|
const divRoutstrBalanceState = document.getElementById('divRoutstrBalanceState');
|
|
const inpRoutstrDepositSats = document.getElementById('inpRoutstrDepositSats');
|
|
const btnRoutstrCreateInvoice = document.getElementById('btnRoutstrCreateInvoice');
|
|
const inpRoutstrDepositCashu = document.getElementById('inpRoutstrDepositCashu');
|
|
const btnRoutstrImportCashu = document.getElementById('btnRoutstrImportCashu');
|
|
const inpRoutstrTopupSats = document.getElementById('inpRoutstrTopupSats');
|
|
const btnRoutstrTopupInvoice = document.getElementById('btnRoutstrTopupInvoice');
|
|
const inpRoutstrTopupCashu = document.getElementById('inpRoutstrTopupCashu');
|
|
const btnRoutstrTopupCashu = document.getElementById('btnRoutstrTopupCashu');
|
|
const btnRoutstrRefund = document.getElementById('btnRoutstrRefund');
|
|
const taRoutstrRefundToken = document.getElementById('taRoutstrRefundToken');
|
|
const divRoutstrDepositInvoiceMeta = document.getElementById('divRoutstrDepositInvoiceMeta');
|
|
const divRoutstrDepositInvoiceStatus = document.getElementById('divRoutstrDepositInvoiceStatus');
|
|
const divRoutstrDepositInvoiceQr = document.getElementById('divRoutstrDepositInvoiceQr');
|
|
const taRoutstrDepositInvoiceBolt11 = document.getElementById('taRoutstrDepositInvoiceBolt11');
|
|
const divRoutstrTopupInvoiceMeta = document.getElementById('divRoutstrTopupInvoiceMeta');
|
|
const divRoutstrTopupInvoiceStatus = document.getElementById('divRoutstrTopupInvoiceStatus');
|
|
const divRoutstrTopupInvoiceQr = document.getElementById('divRoutstrTopupInvoiceQr');
|
|
const taRoutstrTopupInvoiceBolt11 = document.getElementById('taRoutstrTopupInvoiceBolt11');
|
|
const divRoutstrOpsStatus = document.getElementById('divRoutstrOpsStatus');
|
|
const divRoutstrOnlySections = document.getElementById('divRoutstrOnlySections');
|
|
|
|
const markedLib = window.marked;
|
|
if (markedLib && markedLib.setOptions) {
|
|
markedLib.setOptions({
|
|
breaks: true,
|
|
gfm: true
|
|
});
|
|
}
|
|
|
|
function uid() {
|
|
return `${Date.now()}_${Math.random().toString(16).slice(2)}`;
|
|
}
|
|
|
|
function nowTs() {
|
|
return Date.now();
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
const span = document.createElement('span');
|
|
span.textContent = String(value || '');
|
|
return span.innerHTML;
|
|
}
|
|
|
|
function extractHtmlFromResponse(rawContent) {
|
|
let html = String(rawContent || '').trim();
|
|
const fencePattern = /^```(?:html)?\s*\n?([\s\S]*?)\n?\s*```$/i;
|
|
const match = html.match(fencePattern);
|
|
if (match && match[1]) html = match[1].trim();
|
|
|
|
const lower = html.toLowerCase();
|
|
if (!lower.includes('<html') && !lower.includes('<!doctype')) {
|
|
const escaped = escapeHtml(html).replaceAll('\n', '<br/>');
|
|
html = `<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>HTML TV Page</title></head><body style="font-family: Arial, sans-serif; padding: 16px;">${escaped}</body></html>`;
|
|
}
|
|
return html;
|
|
}
|
|
|
|
function extractPageTitleFromHtml(html, fallback = 'Untitled page') {
|
|
const raw = String(html || '');
|
|
const titleMatch = raw.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
|
|
if (titleMatch && titleMatch[1]) {
|
|
const text = String(titleMatch[1]).replace(/\s+/g, ' ').trim();
|
|
if (text) return text.slice(0, 72);
|
|
}
|
|
return fallback;
|
|
}
|
|
|
|
function setStatus(text) {
|
|
divAiStatus.textContent = String(text || '');
|
|
}
|
|
|
|
function setViewerLoading(isActive) {
|
|
if (!divAiViewerLoading) return;
|
|
divAiViewerLoading.classList.toggle('active', Boolean(isActive));
|
|
}
|
|
|
|
function syncPopoutPreview(html) {
|
|
if (!previewPopoutWindow || previewPopoutWindow.closed) return;
|
|
try {
|
|
previewPopoutWindow.document.open();
|
|
previewPopoutWindow.document.write(String(html || ''));
|
|
previewPopoutWindow.document.close();
|
|
} catch (error) {
|
|
console.warn('[html-tv.html] failed to sync popout preview:', error);
|
|
}
|
|
}
|
|
|
|
function popoutPreviewWindow() {
|
|
const html = String(iframeAiTv?.srcdoc || '').trim();
|
|
if (!html) {
|
|
setStatus('No preview content available yet. Run a skill first.');
|
|
return;
|
|
}
|
|
|
|
const features = 'popup=yes,width=1200,height=900,menubar=no,toolbar=no,location=no,status=no,resizable=yes,scrollbars=yes';
|
|
const popup = window.open('', 'skillsTvPreview', features);
|
|
if (!popup) {
|
|
setStatus('Popup blocked by browser. Allow popups for this site and try again.');
|
|
return;
|
|
}
|
|
|
|
previewPopoutWindow = popup;
|
|
syncPopoutPreview(html);
|
|
popup.focus();
|
|
setStatus('Preview popped out to a separate window.');
|
|
}
|
|
|
|
function renderViewerHtml(html) {
|
|
if (!iframeAiTv) return;
|
|
const nextHtml = String(html || '');
|
|
iframeAiTv.srcdoc = nextHtml;
|
|
syncPopoutPreview(nextHtml);
|
|
}
|
|
|
|
function getEmptyViewerHtml(text = 'Run & Save Skill to generate a page...') {
|
|
return `<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>HTML TV</title><style>body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;color:#777;background:#fff;padding:24px;text-align:center;}</style></head><body>${escapeHtml(text)}</body></html>`;
|
|
}
|
|
|
|
function skillKey(pubkey, slug) {
|
|
return `${String(pubkey || '').trim()}:${String(slug || '').trim()}`;
|
|
}
|
|
|
|
function normalizeSlug(raw) {
|
|
return String(raw || '')
|
|
.trim()
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9-_]+/g, '-')
|
|
.replace(/^-+|-+$/g, '')
|
|
.slice(0, 64);
|
|
}
|
|
|
|
function getTagValue(tags, name) {
|
|
const tag = (Array.isArray(tags) ? tags : []).find((t) => Array.isArray(t) && t[0] === name);
|
|
return tag && tag[1] ? String(tag[1]) : '';
|
|
}
|
|
|
|
function hasTagValue(tags, name, value) {
|
|
return (Array.isArray(tags) ? tags : []).some((t) => Array.isArray(t) && t[0] === name && t[1] === value);
|
|
}
|
|
|
|
function shortPubkey(pubkey) {
|
|
const value = String(pubkey || '');
|
|
if (value.length <= 14) return value;
|
|
return `${value.slice(0, 6)}...${value.slice(-5)}`;
|
|
}
|
|
|
|
function getAuthorProfile(pubkey) {
|
|
const profile = authorProfiles.get(String(pubkey || '')) || null;
|
|
if (!profile) return { name: shortPubkey(pubkey), picture: '' };
|
|
const preferredName = String(profile.display_name || profile.name || '').trim();
|
|
return {
|
|
name: preferredName || shortPubkey(pubkey),
|
|
picture: String(profile.picture || '').trim()
|
|
};
|
|
}
|
|
|
|
async function lookupAuthorProfile(pubkey) {
|
|
const author = String(pubkey || '').trim();
|
|
if (!author || authorProfiles.has(author) || profileLookupInFlight.has(author)) return;
|
|
profileLookupInFlight.add(author);
|
|
try {
|
|
const profile = await fetchCachedProfile(author);
|
|
if (profile && typeof profile === 'object') {
|
|
authorProfiles.set(author, profile);
|
|
renderSkillsList();
|
|
}
|
|
} catch (_error) {
|
|
// ignore
|
|
} finally {
|
|
profileLookupInFlight.delete(author);
|
|
}
|
|
}
|
|
|
|
function parseSkillEvent(evt) {
|
|
if (!evt || evt.kind !== 31123) return null;
|
|
if (!hasTagValue(evt.tags, 'm', 'text/html')) return null;
|
|
const slug = normalizeSlug(getTagValue(evt.tags, 'd'));
|
|
if (!slug) return null;
|
|
|
|
const skill = {
|
|
key: skillKey(evt.pubkey, slug),
|
|
slug,
|
|
description: getTagValue(evt.tags, 'description') || slug,
|
|
template: '',
|
|
temperature: 0,
|
|
max_tokens: 4000,
|
|
llm: 'default',
|
|
seed: 0,
|
|
author: String(evt.pubkey || ''),
|
|
created_at: Number(evt.created_at || 0),
|
|
valid: true,
|
|
error: '',
|
|
raw: evt
|
|
};
|
|
|
|
try {
|
|
const rawContent = String(evt.content || '').trim();
|
|
const parsed = rawContent ? JSON.parse(rawContent) : {};
|
|
const content = parsed && typeof parsed === 'object' ? parsed : {};
|
|
console.log('[html-tv.html] parseSkillEvent:content-json', {
|
|
slug,
|
|
rawContent,
|
|
parsedContent: content
|
|
});
|
|
|
|
skill.description = String(skill.description || content?.description || slug).trim();
|
|
skill.template = String(content?.template || '').trim();
|
|
skill.temperature = Number.isFinite(Number(content?.temperature)) ? Number(content.temperature) : 0;
|
|
skill.max_tokens = Number.isFinite(Number(content?.max_tokens)) ? Math.max(100, Math.floor(Number(content.max_tokens))) : 4000;
|
|
skill.llm = String(content?.llm || 'default').trim() || 'default';
|
|
skill.seed = Number.isFinite(Number(content?.seed)) ? Math.floor(Number(content.seed)) : 0;
|
|
|
|
if (!skill.template) {
|
|
const fallbackTemplate = rawContent;
|
|
if (fallbackTemplate.includes('system:') || fallbackTemplate.includes('{{message}}')) {
|
|
skill.template = fallbackTemplate;
|
|
}
|
|
}
|
|
|
|
if (!Number.isFinite(Number(content?.temperature))) {
|
|
const tempTag = Number(getTagValue(evt.tags, 'temperature'));
|
|
if (Number.isFinite(tempTag)) skill.temperature = tempTag;
|
|
}
|
|
|
|
if (!Number.isFinite(Number(content?.max_tokens))) {
|
|
const tokensTag = Number(getTagValue(evt.tags, 'max_tokens'));
|
|
if (Number.isFinite(tokensTag)) skill.max_tokens = Math.max(100, Math.floor(tokensTag));
|
|
}
|
|
|
|
if (!String(content?.llm || '').trim()) {
|
|
const llmTag = String(getTagValue(evt.tags, 'llm') || '').trim();
|
|
if (llmTag) skill.llm = llmTag;
|
|
}
|
|
|
|
if (!Number.isFinite(Number(content?.seed))) {
|
|
const seedTag = Number(getTagValue(evt.tags, 'seed'));
|
|
if (Number.isFinite(seedTag)) skill.seed = Math.floor(seedTag);
|
|
}
|
|
|
|
if (!skill.template) {
|
|
skill.valid = false;
|
|
skill.error = 'Invalid skill format';
|
|
}
|
|
} catch (_error) {
|
|
const rawContent = String(evt.content || '').trim();
|
|
if (rawContent.includes('system:') || rawContent.includes('{{message}}')) {
|
|
skill.template = rawContent;
|
|
skill.valid = true;
|
|
skill.error = '';
|
|
} else {
|
|
skill.valid = false;
|
|
skill.error = 'Invalid skill format';
|
|
}
|
|
}
|
|
|
|
return skill;
|
|
}
|
|
|
|
function splitSkillTemplate(template) {
|
|
const raw = String(template || '').trim();
|
|
const marker = '\nuser:\n';
|
|
const idx = raw.indexOf(marker);
|
|
if (idx === -1) {
|
|
return {
|
|
system: raw.replace(/^system:\n/, '').trim(),
|
|
userTemplate: ''
|
|
};
|
|
}
|
|
return {
|
|
system: raw.substring(0, idx).replace(/^system:\n/, '').trim(),
|
|
userTemplate: raw.substring(idx + marker.length).trim()
|
|
};
|
|
}
|
|
|
|
function parseSkillTemplate(template, userInput) {
|
|
const parts = splitSkillTemplate(template);
|
|
const system = String(parts.system || '').trim();
|
|
const userTemplate = String(parts.userTemplate || '').trim();
|
|
const user = userTemplate
|
|
? userTemplate.replaceAll('{{message}}', String(userInput || '').trim()).trim()
|
|
: String(userInput || '').trim();
|
|
return { system, user };
|
|
}
|
|
|
|
function buildStoredTemplateWithUserInput(template, userInput) {
|
|
const parts = splitSkillTemplate(template);
|
|
const system = String(parts.system || '').trim();
|
|
const userTemplate = String(parts.userTemplate || '{{message}}').trim();
|
|
const resolvedUser = userTemplate.replaceAll('{{message}}', String(userInput || '').trim()).trim();
|
|
return `system:\n${system}\n\nuser:\n${resolvedUser}`.trim();
|
|
}
|
|
|
|
function hydrateEditorFromStoredTemplate(storedTemplate) {
|
|
const raw = String(storedTemplate || '').trim();
|
|
const marker = '\nuser:\n';
|
|
const idx = raw.indexOf(marker);
|
|
if (idx === -1) {
|
|
return {
|
|
template: raw || DEFAULT_SKILL_TEMPLATE,
|
|
message: ''
|
|
};
|
|
}
|
|
const system = raw.substring(0, idx).replace(/^system:\n/, '').trim();
|
|
const message = raw.substring(idx + marker.length).trim();
|
|
return {
|
|
template: `system:\n${system}\n\nuser:\n{{message}}`,
|
|
message
|
|
};
|
|
}
|
|
|
|
function buildSkillEvent(slug, description, template, temperature, maxTokens, llm = 'default', seed = null) {
|
|
return {
|
|
kind: 31123,
|
|
content: JSON.stringify({
|
|
description,
|
|
context_mode: 'full',
|
|
llm: String(llm || 'default').trim() || 'default',
|
|
tools: false,
|
|
max_tokens: maxTokens,
|
|
temperature,
|
|
seed: Number.isFinite(Number(seed)) ? Math.floor(Number(seed)) : null,
|
|
template
|
|
}),
|
|
tags: [
|
|
['d', slug],
|
|
['m', 'text/html'],
|
|
['scope', 'public'],
|
|
['description', description]
|
|
],
|
|
created_at: Math.floor(Date.now() / 1000)
|
|
};
|
|
}
|
|
|
|
function getSelectedSkill() {
|
|
return skills.find((s) => s.key === selectedSkillKey) || null;
|
|
}
|
|
|
|
function applySkillFilterUi() {
|
|
if (btnSkillFilterAll) btnSkillFilterAll.classList.toggle('active', skillFilterMode === 'all');
|
|
if (btnSkillFilterMy) btnSkillFilterMy.classList.toggle('active', skillFilterMode === 'my');
|
|
}
|
|
|
|
function renderRenderedPageActions() {
|
|
const page = renderedPages.find((p) => p.id === selectedRenderedPageId) || null;
|
|
if (btnAiSaveRenderedPage) btnAiSaveRenderedPage.disabled = !page;
|
|
if (!lnkAiLaunchRenderedPage) return;
|
|
if (page && page.blossomUrl) {
|
|
lnkAiLaunchRenderedPage.href = page.blossomUrl;
|
|
lnkAiLaunchRenderedPage.style.display = '';
|
|
} else {
|
|
lnkAiLaunchRenderedPage.href = '#';
|
|
lnkAiLaunchRenderedPage.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function renderSkillsList() {
|
|
const scoped = skills
|
|
.filter((skill) => (skillFilterMode === 'my' ? Boolean(currentPubkey && skill.author === currentPubkey) : true))
|
|
.sort((a, b) => a.slug.localeCompare(b.slug));
|
|
|
|
if (scoped.length === 0) {
|
|
divAiConversationsList.innerHTML = '<div class="aiConversationPreview">No skills found.</div>';
|
|
if (btnSkillDelete) btnSkillDelete.disabled = true;
|
|
applySkillFilterUi();
|
|
return;
|
|
}
|
|
|
|
const html = scoped.map((skill) => {
|
|
const author = getAuthorProfile(skill.author);
|
|
const avatar = author.picture
|
|
? `<img class="avatar avatar--md avatar--square divPostAvatar skillAuthorAvatar" src="${escapeHtml(author.picture)}" alt="${escapeHtml(author.name)}" loading="lazy" />`
|
|
: '<div class="avatar avatar--md avatar--square" style="border:1px solid var(--muted-color);"></div>';
|
|
const active = skill.key === selectedSkillKey ? 'active' : '';
|
|
return `
|
|
<div class="aiConversationItem ${active}" data-skill-key="${escapeHtml(skill.key)}">
|
|
<div class="aiConversationHeader">
|
|
<div class="aiConversationTitle">${escapeHtml(skill.slug)}</div>
|
|
${avatar}
|
|
</div>
|
|
<div class="aiConversationPreview">${escapeHtml(skill.description || '')}</div>
|
|
<div class="aiConversationPreview">${escapeHtml(author.name)}</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
divAiConversationsList.innerHTML = html;
|
|
Array.from(divAiConversationsList.querySelectorAll('.aiConversationItem[data-skill-key]')).forEach((el) => {
|
|
el.addEventListener('click', () => {
|
|
const key = String(el.getAttribute('data-skill-key') || '');
|
|
selectedSkillKey = key;
|
|
const skill = getSelectedSkill();
|
|
if (skill) {
|
|
const hydrated = hydrateEditorFromStoredTemplate(skill.template || DEFAULT_SKILL_TEMPLATE);
|
|
inpSkillSlug.value = skill.slug;
|
|
inpSkillDescription.value = skill.description;
|
|
taSkillTemplate.value = hydrated.template || DEFAULT_SKILL_TEMPLATE;
|
|
taAiPrompt.value = hydrated.message || '';
|
|
inpSkillTemperature.value = String(skill.temperature ?? 0);
|
|
inpSkillMaxTokens.value = String(skill.max_tokens ?? 4000);
|
|
if (inpSkillSeed) inpSkillSeed.value = Number.isFinite(Number(skill.seed)) ? String(Math.floor(Number(skill.seed))) : '0';
|
|
if (skill.llm && skill.llm !== 'default') selectModel(skill.llm);
|
|
const rawContent = String(skill?.raw?.content || '').trim();
|
|
let parsedContent = null;
|
|
try {
|
|
parsedContent = rawContent ? JSON.parse(rawContent) : null;
|
|
} catch (_error) {
|
|
parsedContent = null;
|
|
}
|
|
console.log('[html-tv.html] skill:selected', {
|
|
slug: skill.slug,
|
|
hasTemplate: Boolean(skill.template),
|
|
temperature: skill.temperature,
|
|
max_tokens: skill.max_tokens,
|
|
seed: skill.seed,
|
|
llm: skill.llm,
|
|
rawContent,
|
|
parsedContent,
|
|
hydrated,
|
|
selectedFormState: {
|
|
slug: String(inpSkillSlug?.value || ''),
|
|
description: String(inpSkillDescription?.value || ''),
|
|
template: String(taSkillTemplate?.value || ''),
|
|
message: String(taAiPrompt?.value || ''),
|
|
temperature: String(inpSkillTemperature?.value || ''),
|
|
max_tokens: String(inpSkillMaxTokens?.value || ''),
|
|
seed: String(inpSkillSeed?.value || ''),
|
|
llm: String(selAiModel?.value || '')
|
|
}
|
|
});
|
|
}
|
|
renderSkillsList();
|
|
});
|
|
});
|
|
|
|
applySkillFilterUi();
|
|
const selected = getSelectedSkill();
|
|
if (btnSkillDelete) btnSkillDelete.disabled = !selected || !currentPubkey || selected.author !== currentPubkey;
|
|
|
|
for (const skill of scoped) {
|
|
lookupAuthorProfile(skill.author);
|
|
}
|
|
}
|
|
|
|
function upsertSkillFromEvent(evt) {
|
|
const parsed = parseSkillEvent(evt);
|
|
if (!parsed) return;
|
|
const idx = skills.findIndex((s) => s.key === parsed.key);
|
|
if (idx >= 0) {
|
|
const prevTs = Number(skills[idx]?.created_at || 0);
|
|
const nextTs = Number(parsed.created_at || 0);
|
|
if (nextTs >= prevTs) skills[idx] = parsed;
|
|
} else {
|
|
skills.push(parsed);
|
|
}
|
|
if (!selectedSkillKey) selectedSkillKey = parsed.key;
|
|
if (!skills.some((x) => x.key === selectedSkillKey)) selectedSkillKey = skills[0]?.key || null;
|
|
renderSkillsList();
|
|
}
|
|
|
|
function clearSkillSubscription() {
|
|
if (skillSubscription && typeof skillSubscription.close === 'function') skillSubscription.close();
|
|
skillSubscription = null;
|
|
skillSubId = null;
|
|
}
|
|
|
|
function refreshSkills() {
|
|
clearSkillSubscription();
|
|
skills = [];
|
|
selectedSkillKey = null;
|
|
renderSkillsList();
|
|
setStatus('Loading skills...');
|
|
|
|
const filter = {
|
|
kinds: [31123],
|
|
'#m': ['text/html'],
|
|
limit: 200
|
|
};
|
|
if (skillFilterMode === 'my' && currentPubkey) {
|
|
filter.authors = [currentPubkey];
|
|
}
|
|
|
|
skillSubscription = subscribe(filter, {
|
|
closeOnEose: false,
|
|
cacheUsage: 'CACHE_FIRST'
|
|
});
|
|
skillSubId = skillSubscription?.subId || null;
|
|
}
|
|
|
|
function renderCurrentConversation() {
|
|
renderRenderedPageActions();
|
|
}
|
|
|
|
function renderConversationList() {
|
|
renderSkillsList();
|
|
}
|
|
|
|
function loadConversations() {
|
|
renderedPages = [];
|
|
selectedRenderedPageId = null;
|
|
if (inpSkillSlug) inpSkillSlug.value = 'html-page-generator';
|
|
if (inpSkillDescription) inpSkillDescription.value = 'Generate a complete HTML page from user input';
|
|
if (taSkillTemplate) taSkillTemplate.value = DEFAULT_SKILL_TEMPLATE;
|
|
if (inpSkillTemperature) inpSkillTemperature.value = '0';
|
|
if (inpSkillMaxTokens) inpSkillMaxTokens.value = '4000';
|
|
if (inpSkillSeed) inpSkillSeed.value = '0';
|
|
if (taAiSystemPrompt) taAiSystemPrompt.value = DEFAULT_TV_SYSTEM_PROMPT;
|
|
renderViewerHtml(getEmptyViewerHtml('Select a skill or create one, then run it.'));
|
|
renderRenderedPageActions();
|
|
refreshSkills();
|
|
}
|
|
|
|
function createNewSkill() {
|
|
if (inpSkillSlug) inpSkillSlug.value = '';
|
|
if (inpSkillDescription) inpSkillDescription.value = '';
|
|
if (taSkillTemplate) taSkillTemplate.value = DEFAULT_SKILL_TEMPLATE;
|
|
if (taAiPrompt) taAiPrompt.value = '';
|
|
if (inpSkillTemperature) inpSkillTemperature.value = '0';
|
|
if (inpSkillMaxTokens) inpSkillMaxTokens.value = '4000';
|
|
if (inpSkillSeed) inpSkillSeed.value = '0';
|
|
selectedSkillKey = null;
|
|
renderViewerHtml(getEmptyViewerHtml('New skill template ready. Enter a prompt and run.'));
|
|
renderRenderedPageActions();
|
|
renderSkillsList();
|
|
if (inpSkillSlug) inpSkillSlug.focus();
|
|
setStatus('New skill template ready.');
|
|
}
|
|
|
|
function updateConversation() {}
|
|
|
|
function addMessage(role, content, options = {}) {
|
|
return {
|
|
id: uid(), role, content: String(content || ''), ...options
|
|
};
|
|
}
|
|
|
|
async function saveAssistantPageToBlossom(pageId) {
|
|
const page = renderedPages.find((p) => p.id === pageId);
|
|
if (!page) return;
|
|
|
|
const defaultServer = getDefaultBlossomServer();
|
|
if (!defaultServer) {
|
|
setStatus('No Blossom server configured. Add one in the sidebar first.');
|
|
return;
|
|
}
|
|
|
|
const pageHtml = String(page.html || '');
|
|
const safeTitle = extractPageTitleFromHtml(pageHtml, 'html-tv-page')
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9-_]+/g, '-')
|
|
.replace(/^-+|-+$/g, '')
|
|
.slice(0, 48) || 'html-tv-page';
|
|
|
|
const file = new File([pageHtml], `${safeTitle}.html`, { type: 'text/html;charset=utf-8' });
|
|
try {
|
|
setStatus(`Saving page to Blossom (${defaultServer})...`);
|
|
const result = await uploadToServer(file, defaultServer);
|
|
const base = String(result?.serverUrl || defaultServer).replace(/\/+$/, '');
|
|
const sha = String(result?.sha256 || '').trim();
|
|
if (!sha) throw new Error('Upload completed but no sha256 returned.');
|
|
const blossomUrl = `${base}/${sha}`;
|
|
page.blossomUrl = blossomUrl;
|
|
renderRenderedPageActions();
|
|
setStatus(`Saved to Blossom: ${blossomUrl}`);
|
|
} catch (error) {
|
|
setStatus(`Blossom save failed: ${String(error?.message || error)}`);
|
|
}
|
|
}
|
|
|
|
async function deleteSelectedSkill() {
|
|
const skill = getSelectedSkill();
|
|
if (!skill) return setStatus('Select a skill first.');
|
|
if (!currentPubkey || skill.author !== currentPubkey) return setStatus('You can only delete your own skills.');
|
|
if (!confirm(`Delete skill "${skill.slug}"?`)) return;
|
|
|
|
const delEvent = {
|
|
kind: 5,
|
|
content: '',
|
|
tags: [['a', `31123:${currentPubkey}:${skill.slug}`]],
|
|
created_at: Math.floor(Date.now() / 1000)
|
|
};
|
|
if (skill?.raw?.id) delEvent.tags.push(['e', skill.raw.id]);
|
|
|
|
try {
|
|
await publishEvent(delEvent);
|
|
skills = skills.filter((x) => x.key !== skill.key);
|
|
selectedSkillKey = skills[0]?.key || null;
|
|
renderSkillsList();
|
|
setStatus(`Deleted skill: ${skill.slug}`);
|
|
} catch (error) {
|
|
setStatus(`Delete failed: ${String(error?.message || error)}`);
|
|
}
|
|
}
|
|
|
|
function normalizeBaseUrl(baseUrlRaw) {
|
|
const raw = String(baseUrlRaw || '').trim().replace(/\/+$/, '');
|
|
if (!raw) return '';
|
|
return raw;
|
|
}
|
|
|
|
function getChatCompletionsUrl(baseUrlRaw) {
|
|
const base = normalizeBaseUrl(baseUrlRaw);
|
|
if (!base) return '';
|
|
if (base.endsWith('/v1')) return `${base}/chat/completions`;
|
|
return `${base}/v1/chat/completions`;
|
|
}
|
|
|
|
function loadAiConfig() {
|
|
try {
|
|
const raw = localStorage.getItem(AI_CONFIG_KEY);
|
|
const parsed = raw ? JSON.parse(raw) : null;
|
|
if (parsed && typeof parsed === 'object') {
|
|
aiConfig = {
|
|
...aiConfig,
|
|
...parsed,
|
|
max_tokens: Number(parsed.max_tokens ?? aiConfig.max_tokens),
|
|
temperature: Number(parsed.temperature ?? aiConfig.temperature)
|
|
};
|
|
}
|
|
} catch (_error) {
|
|
// keep defaults
|
|
}
|
|
}
|
|
|
|
function normalizeAiConfig(input = {}) {
|
|
return {
|
|
provider: String(input?.provider || 'ppq.ai').trim(),
|
|
api_key: String(input?.api_key || '').trim(),
|
|
credit_id: String(input?.credit_id || input?.creditId || '').trim(),
|
|
model: String(input?.model || '').trim(),
|
|
base_url: String(input?.base_url || '').trim(),
|
|
max_tokens: Math.max(1, Math.floor(Number(input?.max_tokens ?? 512))),
|
|
temperature: Number(input?.temperature ?? 0.7),
|
|
providers: Array.isArray(input?.providers) ? input.providers : aiConfig.providers,
|
|
favorites: Array.isArray(input?.favorites) ? input.favorites : []
|
|
};
|
|
}
|
|
|
|
function mergeProvidersPreservingSecrets(existingProviders = [], incomingProviders = []) {
|
|
const existingByName = new Map(
|
|
(Array.isArray(existingProviders) ? existingProviders : [])
|
|
.map((p) => [String(p?.name || '').trim(), p])
|
|
.filter(([name]) => Boolean(name))
|
|
);
|
|
|
|
return (Array.isArray(incomingProviders) ? incomingProviders : []).map((p) => {
|
|
const name = String(p?.name || '').trim();
|
|
const existing = existingByName.get(name) || {};
|
|
return {
|
|
...p,
|
|
api_key: String(p?.api_key || p?.apiKey || existing?.api_key || existing?.apiKey || '').trim(),
|
|
credit_id: String(p?.credit_id || p?.creditId || existing?.credit_id || existing?.creditId || '').trim(),
|
|
model: String(p?.model || existing?.model || '').trim(),
|
|
max_tokens: Number(p?.max_tokens ?? p?.maxTokens ?? existing?.max_tokens ?? existing?.maxTokens ?? 512),
|
|
temperature: Number(p?.temperature ?? existing?.temperature ?? 0.7)
|
|
};
|
|
});
|
|
}
|
|
|
|
function mergeAiConfigFromSettings(currentConfig, settingsAiRaw = {}) {
|
|
const incoming = normalizeAiConfig(settingsAiRaw);
|
|
return {
|
|
...currentConfig,
|
|
...incoming,
|
|
api_key: incoming.api_key || String(currentConfig?.api_key || '').trim(),
|
|
credit_id: incoming.credit_id || String(currentConfig?.credit_id || '').trim(),
|
|
providers: mergeProvidersPreservingSecrets(currentConfig?.providers || [], incoming.providers || [])
|
|
};
|
|
}
|
|
|
|
function saveAiConfigLocal() {
|
|
localStorage.setItem(AI_CONFIG_KEY, JSON.stringify(aiConfig));
|
|
}
|
|
|
|
async function saveAiConfigToUserSettings() {
|
|
const normalized = normalizeAiConfig(aiConfig);
|
|
aiConfig = {
|
|
...aiConfig,
|
|
...normalized
|
|
};
|
|
await patchUserSettings({ ai: normalized });
|
|
}
|
|
|
|
function getProviderEntries() {
|
|
return (aiConfig.providers || [])
|
|
.map((p) => ({
|
|
name: String(p?.name || '').trim(),
|
|
url: String(p?.url || '').trim(),
|
|
api_key: String(p?.api_key || p?.apiKey || '').trim(),
|
|
credit_id: String(p?.credit_id || p?.creditId || '').trim(),
|
|
model: String(p?.model || '').trim(),
|
|
max_tokens: Number(p?.max_tokens ?? p?.maxTokens ?? NaN),
|
|
temperature: Number(p?.temperature ?? NaN)
|
|
}))
|
|
.filter((p) => p.name && p.url);
|
|
}
|
|
|
|
function setDropdownOpen(dropdownEl, open) {
|
|
if (!dropdownEl) return;
|
|
dropdownEl.classList.toggle('open', Boolean(open));
|
|
}
|
|
|
|
function closeAllCustomDropdowns() {
|
|
setDropdownOpen(ddAiModel, false);
|
|
setDropdownOpen(ddCfgModel, false);
|
|
}
|
|
|
|
function syncSelectedProviderProfile() {
|
|
const selectedName = String(aiConfig.provider || '').trim();
|
|
if (!selectedName || selectedName === 'custom') return;
|
|
|
|
const currentProviders = Array.isArray(aiConfig.providers) ? [...aiConfig.providers] : [];
|
|
const existingIndex = currentProviders.findIndex((p) => String(p?.name || '').trim() === selectedName);
|
|
const nextEntry = {
|
|
...(existingIndex >= 0 ? currentProviders[existingIndex] : {}),
|
|
name: selectedName,
|
|
url: String(aiConfig.base_url || '').trim(),
|
|
api_key: String(aiConfig.api_key || '').trim(),
|
|
credit_id: String(aiConfig.credit_id || '').trim(),
|
|
model: String(aiConfig.model || '').trim(),
|
|
max_tokens: Math.max(1, Math.floor(Number(aiConfig.max_tokens || 512))),
|
|
temperature: Number(aiConfig.temperature ?? 0.7)
|
|
};
|
|
|
|
if (existingIndex >= 0) {
|
|
currentProviders[existingIndex] = nextEntry;
|
|
} else {
|
|
currentProviders.push(nextEntry);
|
|
}
|
|
|
|
aiConfig.providers = currentProviders;
|
|
}
|
|
|
|
function selectProvider(providerName) {
|
|
const selectedName = String(providerName || '').trim();
|
|
if (!selectedName || selectedName === 'custom') return;
|
|
const next = getProviderEntries().find((p) => p.name === selectedName);
|
|
if (!next) return;
|
|
|
|
aiConfig.provider = next.name;
|
|
aiConfig.base_url = next.url;
|
|
aiConfig.api_key = String(next.api_key || '').trim();
|
|
aiConfig.credit_id = String(next.credit_id || '').trim();
|
|
aiConfig.model = String(next.model || '').trim();
|
|
aiConfig.max_tokens = Number.isFinite(next.max_tokens) && next.max_tokens > 0 ? Math.floor(next.max_tokens) : 512;
|
|
aiConfig.temperature = Number.isFinite(next.temperature) ? next.temperature : 0.7;
|
|
|
|
inpCfgBaseUrl.value = aiConfig.base_url;
|
|
inpCfgApiKey.value = aiConfig.api_key;
|
|
if (inpCfgCreditId) inpCfgCreditId.value = String(aiConfig.credit_id || '');
|
|
inpCfgMaxTokens.value = String(aiConfig.max_tokens);
|
|
inpCfgTemperature.value = String(aiConfig.temperature);
|
|
selCfgProvider.value = next.name;
|
|
selAiProvider.value = next.name;
|
|
|
|
saveAiConfigLocal();
|
|
saveAiConfigToUserSettings().catch((error) => {
|
|
console.warn('[html-tv.html] failed to persist provider to user-settings:', error);
|
|
});
|
|
|
|
fetchModels();
|
|
applyAiConfigToHeader();
|
|
updateProviderSections();
|
|
getRoutstrBalance().catch((error) => {
|
|
console.warn('[html-tv.html] provider change balance refresh failed:', error);
|
|
});
|
|
}
|
|
|
|
function renderProviderDropdown() {
|
|
const providers = getProviderEntries();
|
|
|
|
selCfgProvider.innerHTML =
|
|
providers.map(p => `<option value="${escapeHtml(p.name)}" ${p.name === aiConfig.provider ? 'selected' : ''}>${escapeHtml(p.name)}</option>`).join('') +
|
|
'<option value="custom">Custom...</option>';
|
|
|
|
selAiProvider.innerHTML = providers
|
|
.map(p => `<option value="${escapeHtml(p.name)}" ${p.name === aiConfig.provider ? 'selected' : ''}>${escapeHtml(p.name)}</option>`)
|
|
.join('');
|
|
|
|
if (aiConfig.provider) selAiProvider.value = aiConfig.provider;
|
|
}
|
|
|
|
function getOrderedModels(filterText = '') {
|
|
const favorites = aiConfig.favorites || [];
|
|
const terms = String(filterText || '')
|
|
.trim()
|
|
.toLowerCase()
|
|
.split(/\s+/)
|
|
.filter(Boolean);
|
|
const base = (fetchedModels || [])
|
|
.map((m) => ({ id: String(m?.id || '').trim() }))
|
|
.filter((m) => m.id);
|
|
|
|
let filtered = base;
|
|
if (terms.length > 0) {
|
|
filtered = filtered.filter((m) => {
|
|
const id = m.id.toLowerCase();
|
|
return terms.every((term) => id.includes(term));
|
|
});
|
|
}
|
|
filtered.sort((a, b) => a.id.localeCompare(b.id));
|
|
|
|
const fav = filtered.filter((m) => favorites.includes(m.id));
|
|
const other = filtered.filter((m) => !favorites.includes(m.id));
|
|
return { fav, other };
|
|
}
|
|
|
|
function renderModelList(containerEl, filterValue = '') {
|
|
if (!containerEl) return;
|
|
const { fav, other } = getOrderedModels(filterValue);
|
|
const currentModel = String(aiConfig.model || '').trim();
|
|
const rows = [];
|
|
|
|
for (const m of fav) {
|
|
rows.push(`<div class="aiDropdownOption favorite ${m.id === currentModel ? 'active' : ''}" data-model-id="${escapeHtml(m.id)}">${escapeHtml(m.id)}</div>`);
|
|
}
|
|
for (const m of other) {
|
|
rows.push(`<div class="aiDropdownOption ${m.id === currentModel ? 'active' : ''}" data-model-id="${escapeHtml(m.id)}">${escapeHtml(m.id)}</div>`);
|
|
}
|
|
|
|
containerEl.innerHTML = rows.join('') || '<div class="aiDropdownHint">No models match filter.</div>';
|
|
}
|
|
|
|
function selectModel(nextModel) {
|
|
const model = String(nextModel || '').trim();
|
|
if (!model) return;
|
|
aiConfig.model = model;
|
|
selAiModel.value = model;
|
|
selCfgModel.value = model;
|
|
syncSelectedProviderProfile();
|
|
saveAiConfigLocal();
|
|
saveAiConfigToUserSettings().catch((error) => {
|
|
console.warn('[html-tv.html] failed to persist model to user-settings:', error);
|
|
});
|
|
applyAiConfigToHeader();
|
|
}
|
|
|
|
function updateFavButton() {
|
|
const current = String(selCfgModel?.value || '').trim();
|
|
const isFav = (aiConfig.favorites || []).includes(current);
|
|
if (btnCfgFav) {
|
|
btnCfgFav.textContent = isFav ? '★' : '☆';
|
|
btnCfgFav.style.color = isFav ? 'var(--accent-color)' : 'var(--muted-color)';
|
|
}
|
|
}
|
|
|
|
function bindModelOptionClicks() {
|
|
const bind = (container) => {
|
|
if (!container) return;
|
|
Array.from(container.querySelectorAll('.aiDropdownOption[data-model-id]')).forEach((el) => {
|
|
el.addEventListener('click', () => {
|
|
const next = String(el.getAttribute('data-model-id') || '').trim();
|
|
selectModel(next);
|
|
closeAllCustomDropdowns();
|
|
});
|
|
});
|
|
};
|
|
bind(divAiModelOptions);
|
|
bind(divCfgModelOptions);
|
|
}
|
|
|
|
function renderModelDropdown() {
|
|
const { fav, other } = getOrderedModels('');
|
|
const currentModel = String(aiConfig.model || '').trim();
|
|
let html = '';
|
|
|
|
if (fav.length > 0) {
|
|
html += '<optgroup label="Favorites">';
|
|
html += fav.map(m => `<option value="${escapeHtml(m.id)}" ${m.id === currentModel ? 'selected' : ''}>★ ${escapeHtml(m.id)}</option>`).join('');
|
|
html += '</optgroup>';
|
|
}
|
|
|
|
if (other.length > 0) {
|
|
html += '<optgroup label="All Models">';
|
|
html += other.map(m => `<option value="${escapeHtml(m.id)}" ${m.id === currentModel ? 'selected' : ''}>${escapeHtml(m.id)}</option>`).join('');
|
|
html += '</optgroup>';
|
|
}
|
|
|
|
if (!html && currentModel) {
|
|
html = `<option value="${escapeHtml(currentModel)}" selected>${escapeHtml(currentModel)}</option>`;
|
|
}
|
|
|
|
selCfgModel.innerHTML = html;
|
|
selAiModel.innerHTML = html;
|
|
if (currentModel) {
|
|
selCfgModel.value = currentModel;
|
|
selAiModel.value = currentModel;
|
|
}
|
|
|
|
renderModelList(divAiModelOptions, inpAiModelFilter?.value || '');
|
|
renderModelList(divCfgModelOptions, inpCfgModelFilter?.value || '');
|
|
bindModelOptionClicks();
|
|
|
|
if (btnAiModelDropdown) btnAiModelDropdown.textContent = currentModel || 'Model';
|
|
if (btnCfgModelDropdown) btnCfgModelDropdown.textContent = currentModel || 'Model';
|
|
updateFavButton();
|
|
}
|
|
|
|
function renderAiConfigForm() {
|
|
renderProviderDropdown();
|
|
|
|
inpCfgBaseUrl.value = String(aiConfig.base_url || '');
|
|
inpCfgApiKey.value = String(aiConfig.api_key || '');
|
|
if (inpCfgCreditId) inpCfgCreditId.value = String(aiConfig.credit_id || '');
|
|
updateProviderSections();
|
|
// model dropdown handled by fetchModels
|
|
inpCfgMaxTokens.value = String(aiConfig.max_tokens || 512);
|
|
inpCfgTemperature.value = String(aiConfig.temperature ?? 0.7);
|
|
}
|
|
|
|
function applyAiConfigToHeader() {
|
|
renderProviderDropdown();
|
|
renderModelDropdown();
|
|
}
|
|
|
|
function getRoutstrBaseUrl() {
|
|
return normalizeBaseUrl(inpCfgBaseUrl?.value || aiConfig.base_url || '');
|
|
}
|
|
|
|
function getAuthToken() {
|
|
return String(inpCfgApiKey?.value || aiConfig.api_key || '').trim();
|
|
}
|
|
|
|
function updateProviderSections() {
|
|
const provider = String(selCfgProvider?.value || aiConfig.provider || '').trim().toLowerCase();
|
|
const isPpq = provider === 'ppq.ai';
|
|
const isRoutstr = provider === 'routstr';
|
|
if (divPpqCreditIdGroup) divPpqCreditIdGroup.style.display = isPpq ? '' : 'none';
|
|
if (divRoutstrOnlySections) divRoutstrOnlySections.style.display = isRoutstr ? '' : 'none';
|
|
}
|
|
|
|
function setRoutstrOpsStatus(text) {
|
|
if (divRoutstrOpsStatus) divRoutstrOpsStatus.textContent = String(text || '');
|
|
}
|
|
|
|
function setRoutstrBalanceState(text) {
|
|
if (divRoutstrBalanceState) divRoutstrBalanceState.textContent = String(text || '');
|
|
}
|
|
|
|
function setHeaderProviderBalance(text) {
|
|
if (divAiProviderBalanceHeader) divAiProviderBalanceHeader.textContent = String(text || '--');
|
|
}
|
|
|
|
function getInvoiceElements(kind = 'deposit') {
|
|
if (kind === 'topup') {
|
|
return {
|
|
meta: divRoutstrTopupInvoiceMeta,
|
|
status: divRoutstrTopupInvoiceStatus,
|
|
qr: divRoutstrTopupInvoiceQr,
|
|
bolt11: taRoutstrTopupInvoiceBolt11,
|
|
emptyText: 'No top-up invoice generated yet.'
|
|
};
|
|
}
|
|
return {
|
|
meta: divRoutstrDepositInvoiceMeta,
|
|
status: divRoutstrDepositInvoiceStatus,
|
|
qr: divRoutstrDepositInvoiceQr,
|
|
bolt11: taRoutstrDepositInvoiceBolt11,
|
|
emptyText: 'No deposit invoice generated yet.'
|
|
};
|
|
}
|
|
|
|
function setInvoiceStatus(kind, text) {
|
|
const ui = getInvoiceElements(kind);
|
|
if (ui.status) ui.status.textContent = String(text || '');
|
|
}
|
|
|
|
function updateInvoiceDisplay(kind, { title = '', bolt11 = '', amountSats = null, expiresAt = null, invoiceId = '' } = {}) {
|
|
const ui = getInvoiceElements(kind);
|
|
if (ui.meta) {
|
|
const lines = [];
|
|
if (title) lines.push(title);
|
|
if (invoiceId) lines.push(`invoice_id: ${invoiceId}`);
|
|
if (typeof amountSats === 'number' && Number.isFinite(amountSats)) lines.push(`amount_sats: ${amountSats}`);
|
|
if (expiresAt) {
|
|
const expiryMs = Number(expiresAt) * 1000;
|
|
if (Number.isFinite(expiryMs)) lines.push(`expires: ${new Date(expiryMs).toLocaleString()}`);
|
|
}
|
|
ui.meta.textContent = lines.join('\n') || ui.emptyText;
|
|
}
|
|
|
|
if (ui.bolt11) {
|
|
ui.bolt11.value = String(bolt11 || '');
|
|
}
|
|
|
|
if (ui.qr) {
|
|
ui.qr.innerHTML = '';
|
|
const value = String(bolt11 || '').trim();
|
|
if (!value) return;
|
|
if (typeof QRCode !== 'function') {
|
|
ui.qr.textContent = 'QR rendering unavailable';
|
|
return;
|
|
}
|
|
try {
|
|
const svg = QRCode({ msg: value, dim: 220, pad: 1, ecl: 'L' });
|
|
svg.removeAttributeNS(null, 'width');
|
|
svg.removeAttributeNS(null, 'height');
|
|
svg.style.width = '100%';
|
|
svg.style.maxWidth = '220px';
|
|
svg.style.height = 'auto';
|
|
ui.qr.appendChild(svg);
|
|
} catch (error) {
|
|
ui.qr.textContent = `QR error: ${String(error?.message || error)}`;
|
|
}
|
|
}
|
|
}
|
|
|
|
async function parseJsonSafe(response) {
|
|
const text = await response.text();
|
|
if (!text) return {};
|
|
try {
|
|
return JSON.parse(text);
|
|
} catch (_error) {
|
|
return { raw: text };
|
|
}
|
|
}
|
|
|
|
function safeStringify(value) {
|
|
try {
|
|
return JSON.stringify(value);
|
|
} catch (_error) {
|
|
return String(value);
|
|
}
|
|
}
|
|
|
|
function toErrorDetails(data) {
|
|
if (!data || typeof data !== 'object') return '';
|
|
if (typeof data?.detail === 'string') return data.detail;
|
|
if (data?.detail && typeof data.detail === 'object') return safeStringify(data.detail);
|
|
if (typeof data?.error?.message === 'string') return data.error.message;
|
|
if (data?.error && typeof data.error === 'object') return safeStringify(data.error);
|
|
if (typeof data?.message === 'string') return data.message;
|
|
if (typeof data?.raw === 'string') return data.raw;
|
|
return safeStringify(data);
|
|
}
|
|
|
|
function buildHttpError(actionLabel, endpoint, response, data) {
|
|
const details = toErrorDetails(data) || 'No response body';
|
|
const requestId = response?.headers?.get('x-request-id') || response?.headers?.get('request-id') || '';
|
|
const requestIdLine = requestId ? `\nrequest_id: ${requestId}` : '';
|
|
return new Error(
|
|
`${actionLabel} failed\n` +
|
|
`HTTP ${response?.status || 0} ${response?.statusText || ''}\n` +
|
|
`endpoint: ${endpoint}${requestIdLine}\n` +
|
|
`details: ${details}`
|
|
);
|
|
}
|
|
|
|
function sleep(ms) {
|
|
return new Promise((resolve) => setTimeout(resolve, ms));
|
|
}
|
|
|
|
async function pollLightningInvoiceStatus(baseUrl, invoiceId, purposeLabel = 'invoice', invoiceKind = 'deposit') {
|
|
const pollId = ++activeInvoicePollId;
|
|
const safeInvoiceId = encodeURIComponent(String(invoiceId || '').trim());
|
|
if (!safeInvoiceId) return;
|
|
|
|
const statusEndpoint = `${baseUrl}/v1/balance/lightning/invoice/${safeInvoiceId}/status`;
|
|
const maxPolls = 60;
|
|
|
|
for (let i = 1; i <= maxPolls; i += 1) {
|
|
if (pollId !== activeInvoicePollId) return;
|
|
|
|
try {
|
|
const response = await fetch(statusEndpoint);
|
|
const data = await parseJsonSafe(response);
|
|
|
|
if (!response.ok) {
|
|
if (i === 1 || i % 6 === 0) {
|
|
setInvoiceStatus(invoiceKind, `Waiting for ${purposeLabel} status... ${i}/${maxPolls}\n${toErrorDetails(data) || `HTTP ${response.status}`}`);
|
|
}
|
|
await sleep(5000);
|
|
continue;
|
|
}
|
|
|
|
const status = String(data?.status || '').toLowerCase();
|
|
if (status === 'paid') {
|
|
const apiKey = String(data?.api_key || '').trim();
|
|
if (apiKey && apiKey.startsWith('sk-')) {
|
|
inpCfgApiKey.value = apiKey;
|
|
aiConfig.api_key = apiKey;
|
|
saveAiConfigLocal();
|
|
saveAiConfigToUserSettings().catch((e) => console.warn('[html-tv.html] failed to persist paid invoice key:', e));
|
|
}
|
|
setInvoiceStatus(invoiceKind, `${purposeLabel} paid. ${apiKey ? 'API key loaded into config.' : ''}`.trim());
|
|
await getRoutstrBalance();
|
|
return;
|
|
}
|
|
|
|
if (status === 'expired') {
|
|
setInvoiceStatus(invoiceKind, `${purposeLabel} expired before payment.`);
|
|
return;
|
|
}
|
|
|
|
setInvoiceStatus(invoiceKind, `Waiting for ${purposeLabel} payment... ${i}/${maxPolls} (status: ${status || 'pending'})`);
|
|
} catch (error) {
|
|
if (i === 1 || i % 6 === 0) {
|
|
setInvoiceStatus(invoiceKind, `Status poll retry ${i}/${maxPolls}: ${String(error?.message || error)}`);
|
|
}
|
|
}
|
|
|
|
await sleep(5000);
|
|
}
|
|
|
|
setInvoiceStatus(invoiceKind, `Stopped polling ${purposeLabel} after timeout.`);
|
|
}
|
|
|
|
async function getRoutstrBalance() {
|
|
const baseUrl = getRoutstrBaseUrl();
|
|
const apiKey = getAuthToken();
|
|
const provider = String(selCfgProvider?.value || aiConfig.provider || '').trim().toLowerCase();
|
|
if (!baseUrl) {
|
|
setRoutstrBalanceState('Missing Base URL.');
|
|
setHeaderProviderBalance('--');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
if (provider === 'ppq.ai') {
|
|
const creditId = String(inpCfgCreditId?.value || aiConfig.credit_id || '').trim();
|
|
if (!creditId) {
|
|
setRoutstrBalanceState('Missing Credit ID for ppq.ai.');
|
|
setHeaderProviderBalance('--');
|
|
return;
|
|
}
|
|
|
|
const endpoint = `${baseUrl}/credits/balance`;
|
|
const response = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ credit_id: creditId })
|
|
});
|
|
const data = await parseJsonSafe(response);
|
|
|
|
if (!response.ok) {
|
|
const details = toErrorDetails(data) || 'No response body';
|
|
setRoutstrBalanceState(
|
|
`Balance check failed\n` +
|
|
`HTTP ${response.status} ${response.statusText}\n` +
|
|
`endpoint: ${endpoint}\n` +
|
|
`details: ${details}`
|
|
);
|
|
return;
|
|
}
|
|
|
|
const balance = Number(data?.balance);
|
|
const lines = [
|
|
`Balance: ${Number.isFinite(balance) ? balance : '--'} credits`,
|
|
`credit_id: ${creditId}`,
|
|
`Raw: ${safeStringify(data)}`
|
|
];
|
|
setRoutstrBalanceState(lines.join('\n'));
|
|
setHeaderProviderBalance(Number.isFinite(balance) ? `$${balance.toFixed(2)}` : '$--');
|
|
return;
|
|
}
|
|
|
|
if (!apiKey) {
|
|
setRoutstrBalanceState('Missing API Key / Cashu token.');
|
|
setHeaderProviderBalance('--');
|
|
return;
|
|
}
|
|
|
|
const endpoint = `${baseUrl}/v1/balance/info`;
|
|
const requestHeaders = {
|
|
Authorization: `Bearer ${apiKey}`
|
|
};
|
|
|
|
const response = await fetch(endpoint, {
|
|
method: 'GET',
|
|
headers: requestHeaders
|
|
});
|
|
const data = await parseJsonSafe(response);
|
|
|
|
if (!response.ok) {
|
|
const details = toErrorDetails(data) || 'No response body';
|
|
setRoutstrBalanceState(
|
|
`Balance check failed\n` +
|
|
`HTTP ${response.status} ${response.statusText}\n` +
|
|
`endpoint: ${endpoint}\n` +
|
|
`details: ${details}`
|
|
);
|
|
return;
|
|
}
|
|
|
|
const balance = Number(data?.balance);
|
|
const reserved = Number(data?.reserved);
|
|
const currency = String(data?.currency || 'sat').trim();
|
|
const lines = [
|
|
`Balance: ${Number.isFinite(balance) ? balance : '--'} ${currency}`
|
|
];
|
|
if (Number.isFinite(reserved)) lines.push(`Reserved: ${reserved} ${currency}`);
|
|
lines.push(`Raw: ${safeStringify(data)}`);
|
|
|
|
setRoutstrBalanceState(lines.join('\n'));
|
|
setHeaderProviderBalance(Number.isFinite(balance) ? `${Math.floor(balance)} sats` : '-- sats');
|
|
} catch (error) {
|
|
setRoutstrBalanceState(`Balance check failed: ${String(error?.message || error)}`);
|
|
setHeaderProviderBalance('--');
|
|
}
|
|
}
|
|
|
|
async function callOpenAICompatibleChat(messages, overrides = {}) {
|
|
const endpoint = getChatCompletionsUrl(aiConfig.base_url || '');
|
|
const apiKey = String(aiConfig.api_key || '').trim();
|
|
const modelOverride = String(overrides?.llm || '').trim();
|
|
const model = modelOverride && modelOverride !== 'default'
|
|
? modelOverride
|
|
: String(aiConfig.model || '').trim();
|
|
const maxTokens = Math.max(1, Math.floor(Number(overrides?.max_tokens ?? aiConfig.max_tokens ?? 512)));
|
|
const temperature = Number(overrides?.temperature ?? aiConfig.temperature ?? 0.7);
|
|
const seed = Number.isFinite(Number(overrides?.seed)) ? Math.floor(Number(overrides.seed)) : null;
|
|
|
|
if (!endpoint) throw new Error('Missing base URL in sidebar config');
|
|
if (!apiKey) throw new Error('Missing API key in sidebar config');
|
|
if (!model) throw new Error('Missing model in sidebar config');
|
|
|
|
const requestHeaders = {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${apiKey}`
|
|
};
|
|
const requestBody = {
|
|
model,
|
|
messages,
|
|
max_tokens: maxTokens,
|
|
temperature,
|
|
stream: false
|
|
};
|
|
if (Number.isFinite(seed)) requestBody.seed = seed;
|
|
|
|
console.log('[html-tv.html] chat request', {
|
|
endpoint,
|
|
method: 'POST',
|
|
headers: requestHeaders,
|
|
body: requestBody
|
|
});
|
|
|
|
const response = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: requestHeaders,
|
|
body: JSON.stringify(requestBody)
|
|
});
|
|
|
|
const data = await parseJsonSafe(response);
|
|
if (!response.ok) {
|
|
const headersObj = {};
|
|
response.headers.forEach((value, key) => {
|
|
headersObj[key] = value;
|
|
});
|
|
const requestId = response.headers.get('x-request-id') || response.headers.get('request-id') || '';
|
|
const details = toErrorDetails(data) || 'No response body';
|
|
const bodyDump = safeStringify(data);
|
|
|
|
console.error('[html-tv.html] chat request failed', {
|
|
request: {
|
|
endpoint,
|
|
method: 'POST',
|
|
headers: requestHeaders,
|
|
body: requestBody
|
|
},
|
|
response: {
|
|
status: response.status,
|
|
statusText: response.statusText,
|
|
requestId,
|
|
headers: headersObj,
|
|
body: data
|
|
}
|
|
});
|
|
|
|
throw new Error(
|
|
`HTTP ${response.status} ${response.statusText}\n` +
|
|
`endpoint: ${endpoint}\n` +
|
|
`${requestId ? `request_id: ${requestId}\n` : ''}` +
|
|
`details: ${details}\n` +
|
|
`response_headers: ${safeStringify(headersObj)}\n` +
|
|
`response_body: ${bodyDump}`
|
|
);
|
|
}
|
|
|
|
const text = String(data?.choices?.[0]?.message?.content || '').trim();
|
|
return { content: text || '(empty response)' };
|
|
}
|
|
|
|
function setSendingState(value) {
|
|
isSending = Boolean(value);
|
|
if (btnAiRun) btnAiRun.disabled = isSending;
|
|
if (btnAiSaveSkill) btnAiSaveSkill.disabled = isSending;
|
|
taAiPrompt.disabled = isSending;
|
|
setViewerLoading(isSending);
|
|
}
|
|
|
|
async function saveSkillOnly() {
|
|
const slug = normalizeSlug(inpSkillSlug?.value || '');
|
|
const description = String(inpSkillDescription?.value || '').trim();
|
|
const template = String(taSkillTemplate?.value || '').trim();
|
|
const userInput = String(taAiPrompt?.value || '').trim();
|
|
const temperature = Number(inpSkillTemperature?.value || 0);
|
|
const maxTokens = Math.max(100, Math.floor(Number(inpSkillMaxTokens?.value || 4000)));
|
|
const llm = String(selAiModel?.value || aiConfig.model || 'default').trim() || 'default';
|
|
const seedRaw = String(inpSkillSeed?.value ?? '0').trim();
|
|
const seed = Number.isFinite(Number(seedRaw)) ? Math.floor(Number(seedRaw)) : 0;
|
|
|
|
if (!slug) return setStatus('Skill slug is required.');
|
|
if (!description) return setStatus('Skill description is required.');
|
|
if (!template) return setStatus('Skill template is required.');
|
|
if (!userInput) return setStatus('User input is required.');
|
|
|
|
const templateToSave = buildStoredTemplateWithUserInput(template, userInput);
|
|
const skillEvent = buildSkillEvent(slug, description, templateToSave, temperature, maxTokens, llm, seed);
|
|
await publishEvent(skillEvent);
|
|
upsertSkillFromEvent({ ...skillEvent, pubkey: currentPubkey || '', tags: skillEvent.tags });
|
|
setStatus(`Saved skill: ${slug}`);
|
|
}
|
|
|
|
async function sendPrompt() {
|
|
if (isSending) return;
|
|
|
|
const slug = normalizeSlug(inpSkillSlug?.value || '');
|
|
const description = String(inpSkillDescription?.value || '').trim();
|
|
const template = String(taSkillTemplate?.value || '').trim();
|
|
const userInput = String(taAiPrompt?.value || '').trim();
|
|
const temperature = Number(inpSkillTemperature?.value || 0);
|
|
const maxTokens = Math.max(100, Math.floor(Number(inpSkillMaxTokens?.value || 4000)));
|
|
const llm = String(selAiModel?.value || aiConfig.model || 'default').trim() || 'default';
|
|
const seedRaw = String(inpSkillSeed?.value ?? '0').trim();
|
|
const seed = Number.isFinite(Number(seedRaw)) ? Math.floor(Number(seedRaw)) : 0;
|
|
|
|
console.log('[html-tv.html] sendPrompt:start', { slug, hasDescription: Boolean(description), hasTemplate: Boolean(template), hasUserInput: Boolean(userInput), temperature, maxTokens, llm, seed });
|
|
|
|
if (!slug) {
|
|
console.warn('[html-tv.html] sendPrompt:blocked missing slug');
|
|
return setStatus('Skill slug is required.');
|
|
}
|
|
if (!description) {
|
|
console.warn('[html-tv.html] sendPrompt:blocked missing description');
|
|
return setStatus('Skill description is required.');
|
|
}
|
|
if (!template) {
|
|
console.warn('[html-tv.html] sendPrompt:blocked missing template');
|
|
return setStatus('Skill template is required.');
|
|
}
|
|
if (!userInput) {
|
|
console.warn('[html-tv.html] sendPrompt:blocked missing user input');
|
|
return setStatus('User input is required.');
|
|
}
|
|
|
|
const parsed = parseSkillTemplate(template, userInput);
|
|
const assistant = addMessage('assistant', '', { typing: true });
|
|
|
|
setSendingState(true);
|
|
setStatus('Running skill and rendering page...');
|
|
console.log('[html-tv.html] sendPrompt:calling-llm');
|
|
|
|
try {
|
|
const result = await callOpenAICompatibleChat(
|
|
[
|
|
{ role: 'system', content: parsed.system || DEFAULT_TV_SYSTEM_PROMPT },
|
|
{ role: 'user', content: parsed.user || userInput }
|
|
],
|
|
{
|
|
temperature,
|
|
max_tokens: maxTokens,
|
|
llm,
|
|
seed
|
|
}
|
|
);
|
|
|
|
const normalizedHtml = extractHtmlFromResponse(String(result?.content || ''));
|
|
renderViewerHtml(normalizedHtml);
|
|
|
|
const page = {
|
|
id: assistant.id,
|
|
html: normalizedHtml,
|
|
createdAt: nowTs(),
|
|
title: extractPageTitleFromHtml(normalizedHtml, slug),
|
|
blossomUrl: ''
|
|
};
|
|
renderedPages.push(page);
|
|
selectedRenderedPageId = page.id;
|
|
renderRenderedPageActions();
|
|
|
|
setStatus(`Rendered skill: ${slug}`);
|
|
} catch (error) {
|
|
console.error('[html-tv.html] sendPrompt:error', error);
|
|
setStatus(`Request failed: ${String(error?.message || error || 'Unknown error')}`);
|
|
} finally {
|
|
setSendingState(false);
|
|
getRoutstrBalance().catch((error) => {
|
|
console.warn('[html-tv.html] post-message balance refresh failed:', error);
|
|
});
|
|
}
|
|
}
|
|
|
|
function openNav() {
|
|
divSideNav.style.zIndex = 3;
|
|
divSideNav.style.width = 'clamp(400px, 50vw, 600px)';
|
|
isNavOpen = true;
|
|
if (hamburgerInstance) hamburgerInstance.animateTo('arrow_left');
|
|
|
|
if (!logoutHamburger) {
|
|
logoutHamburger = new HamburgerMorphing('#logoutHamburgerContainer', {
|
|
size: 24,
|
|
foreground: 'var(--primary-color)',
|
|
background: 'var(--secondary-color)',
|
|
hover: 'var(--accent-color)'
|
|
});
|
|
logoutHamburger.animateTo('x');
|
|
}
|
|
|
|
if (!themeToggleHamburger) {
|
|
themeToggleHamburger = new HamburgerMorphing('#themeToggleHamburgerContainer', {
|
|
size: 24,
|
|
foreground: 'var(--primary-color)',
|
|
background: 'var(--secondary-color)',
|
|
hover: 'var(--accent-color)'
|
|
});
|
|
const savedTheme = localStorage.getItem('theme');
|
|
isDarkMode = savedTheme === 'dark' || document.body.classList.contains('dark-mode');
|
|
themeToggleHamburger.animateTo(isDarkMode ? 'moon' : 'circle');
|
|
}
|
|
}
|
|
|
|
function closeNav() {
|
|
divSideNav.style.width = '0vw';
|
|
divSideNav.style.zIndex = -1;
|
|
isNavOpen = false;
|
|
if (hamburgerInstance) hamburgerInstance.animateTo('burger');
|
|
}
|
|
|
|
function toggleNav() {
|
|
if (isNavOpen) closeNav();
|
|
else openNav();
|
|
}
|
|
|
|
const UpdateFooter = async () => {
|
|
try {
|
|
await updateFooterRelayStatus();
|
|
await updateSidenavRelaySection();
|
|
await updateBlossomSection();
|
|
divFooterCenter.innerHTML = '';
|
|
divFooterRight.innerHTML = currentPubkey ? `${currentPubkey.slice(0, 8)}...` : '';
|
|
} catch (error) {
|
|
console.error('[html-tv.html] footer update failed:', error);
|
|
}
|
|
};
|
|
|
|
const Logout = async () => {
|
|
if (updateIntervalId) {
|
|
clearInterval(updateIntervalId);
|
|
updateIntervalId = null;
|
|
}
|
|
|
|
disconnect();
|
|
|
|
if (window.NOSTR_LOGIN_LITE && window.NOSTR_LOGIN_LITE.logout) {
|
|
await window.NOSTR_LOGIN_LITE.logout();
|
|
}
|
|
|
|
localStorage.clear();
|
|
sessionStorage.clear();
|
|
|
|
if (window.indexedDB) {
|
|
const databases = await window.indexedDB.databases();
|
|
for (const db of databases) {
|
|
if (db.name) window.indexedDB.deleteDatabase(db.name);
|
|
}
|
|
}
|
|
|
|
location.reload(true);
|
|
};
|
|
|
|
function bindUiEvents() {
|
|
if (btnSkillFilterAll) {
|
|
btnSkillFilterAll.addEventListener('click', () => {
|
|
skillFilterMode = 'all';
|
|
refreshSkills();
|
|
});
|
|
}
|
|
if (btnSkillFilterMy) {
|
|
btnSkillFilterMy.addEventListener('click', () => {
|
|
skillFilterMode = 'my';
|
|
refreshSkills();
|
|
});
|
|
}
|
|
if (btnSkillRefresh) {
|
|
btnSkillRefresh.addEventListener('click', () => refreshSkills());
|
|
}
|
|
if (btnSkillNew) {
|
|
btnSkillNew.addEventListener('click', () => createNewSkill());
|
|
}
|
|
if (btnSkillDelete) {
|
|
btnSkillDelete.addEventListener('click', () => {
|
|
deleteSelectedSkill();
|
|
});
|
|
}
|
|
|
|
if (btnAiSaveRenderedPage) {
|
|
btnAiSaveRenderedPage.addEventListener('click', async () => {
|
|
if (!selectedRenderedPageId) return;
|
|
await saveAssistantPageToBlossom(selectedRenderedPageId);
|
|
});
|
|
}
|
|
|
|
if (btnAiPopoutPreview) {
|
|
btnAiPopoutPreview.addEventListener('click', () => {
|
|
popoutPreviewWindow();
|
|
});
|
|
}
|
|
|
|
if (lnkAiLaunchRenderedPage) {
|
|
lnkAiLaunchRenderedPage.addEventListener('click', (event) => {
|
|
if (!selectedRenderedPageId) event.preventDefault();
|
|
});
|
|
}
|
|
|
|
if (btnAiRun) {
|
|
btnAiRun.addEventListener('click', () => {
|
|
console.log('[html-tv.html] ui:Run Skill clicked');
|
|
sendPrompt();
|
|
});
|
|
}
|
|
|
|
if (btnAiSaveSkill) {
|
|
btnAiSaveSkill.addEventListener('click', async () => {
|
|
console.log('[html-tv.html] ui:Save Skill clicked');
|
|
try {
|
|
await saveSkillOnly();
|
|
} catch (error) {
|
|
console.error('[html-tv.html] saveSkillOnly:error', error);
|
|
setStatus(`Save failed: ${String(error?.message || error || 'Unknown error')}`);
|
|
}
|
|
});
|
|
}
|
|
|
|
selAiModel.addEventListener('change', () => {
|
|
selectModel(selAiModel.value || '');
|
|
});
|
|
|
|
btnCfgSave.addEventListener('click', async () => {
|
|
aiConfig.provider = String(selCfgProvider.value || '').trim();
|
|
aiConfig.base_url = String(inpCfgBaseUrl.value || '').trim();
|
|
aiConfig.api_key = String(inpCfgApiKey.value || '').trim();
|
|
aiConfig.credit_id = String(inpCfgCreditId?.value || '').trim();
|
|
aiConfig.model = String(selCfgModel.value || '').trim();
|
|
aiConfig.max_tokens = Math.max(1, Math.floor(Number(inpCfgMaxTokens.value || 512)));
|
|
aiConfig.temperature = Number(inpCfgTemperature.value || 0.7);
|
|
syncSelectedProviderProfile();
|
|
|
|
saveAiConfigLocal();
|
|
try {
|
|
await saveAiConfigToUserSettings();
|
|
setStatus('AI endpoint config saved to user-settings.');
|
|
} catch (error) {
|
|
console.warn('[html-tv.html] failed to persist AI config to user-settings:', error);
|
|
setStatus('AI endpoint config saved locally (user-settings sync failed).');
|
|
}
|
|
applyAiConfigToHeader();
|
|
});
|
|
|
|
fetchModels = async () => {
|
|
const baseUrl = normalizeBaseUrl(inpCfgBaseUrl.value || aiConfig.base_url);
|
|
const apiKey = inpCfgApiKey.value || aiConfig.api_key;
|
|
if (!baseUrl || !apiKey) {
|
|
fetchedModels = [];
|
|
renderModelDropdown();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${baseUrl}/v1/models`, {
|
|
headers: {
|
|
Authorization: `Bearer ${apiKey}`
|
|
}
|
|
});
|
|
if (!response.ok) throw new Error('Failed to fetch models');
|
|
const data = await response.json();
|
|
fetchedModels = data.data || [];
|
|
renderModelDropdown();
|
|
} catch (error) {
|
|
console.warn('[html-tv.html] fetchModels failed:', error);
|
|
fetchedModels = [];
|
|
renderModelDropdown();
|
|
}
|
|
};
|
|
|
|
if (inpAiModelFilter) inpAiModelFilter.addEventListener('input', renderModelDropdown);
|
|
if (inpCfgModelFilter) inpCfgModelFilter.addEventListener('input', renderModelDropdown);
|
|
selCfgModel.addEventListener('change', () => selectModel(selCfgModel.value || ''));
|
|
|
|
btnCfgFav.addEventListener('click', () => {
|
|
const current = selCfgModel.value;
|
|
if (!current) return;
|
|
|
|
let favs = [...(aiConfig.favorites || [])];
|
|
if (favs.includes(current)) {
|
|
favs = favs.filter(f => f !== current);
|
|
} else {
|
|
favs.push(current);
|
|
}
|
|
aiConfig.favorites = favs;
|
|
syncSelectedProviderProfile();
|
|
renderModelDropdown();
|
|
saveAiConfigLocal();
|
|
saveAiConfigToUserSettings().catch(e => console.warn('[html-tv.html] failed to save favorites:', e));
|
|
});
|
|
|
|
if (btnAiModelDropdown) {
|
|
btnAiModelDropdown.addEventListener('click', (event) => {
|
|
event.stopPropagation();
|
|
const willOpen = !ddAiModel.classList.contains('open');
|
|
closeAllCustomDropdowns();
|
|
setDropdownOpen(ddAiModel, willOpen);
|
|
if (willOpen && inpAiModelFilter) {
|
|
inpAiModelFilter.value = '';
|
|
renderModelDropdown();
|
|
inpAiModelFilter.focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (btnCfgModelDropdown) {
|
|
btnCfgModelDropdown.addEventListener('click', (event) => {
|
|
event.stopPropagation();
|
|
const willOpen = !ddCfgModel.classList.contains('open');
|
|
closeAllCustomDropdowns();
|
|
setDropdownOpen(ddCfgModel, willOpen);
|
|
if (willOpen && inpCfgModelFilter) {
|
|
inpCfgModelFilter.value = '';
|
|
renderModelDropdown();
|
|
inpCfgModelFilter.focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('click', () => {
|
|
closeAllCustomDropdowns();
|
|
});
|
|
|
|
if (btnCfgCopyApiKey) {
|
|
btnCfgCopyApiKey.addEventListener('click', async () => {
|
|
const value = String(inpCfgApiKey.value || '').trim();
|
|
if (!value) {
|
|
setStatus('Nothing to copy from API Key / Cashu Token field.');
|
|
return;
|
|
}
|
|
try {
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
await navigator.clipboard.writeText(value);
|
|
} else {
|
|
inpCfgApiKey.focus();
|
|
inpCfgApiKey.select();
|
|
const ok = document.execCommand('copy');
|
|
if (!ok) throw new Error('Copy command failed');
|
|
}
|
|
setStatus('Copied API Key / Cashu Token to clipboard.');
|
|
} catch (error) {
|
|
setStatus(`Copy failed: ${String(error?.message || error)}`);
|
|
}
|
|
});
|
|
}
|
|
|
|
selCfgProvider.addEventListener('change', () => {
|
|
const val = selCfgProvider.value;
|
|
if (val === 'custom') {
|
|
aiConfig.provider = 'custom';
|
|
saveAiConfigLocal();
|
|
renderProviderDropdown();
|
|
updateProviderSections();
|
|
return;
|
|
}
|
|
selectProvider(val);
|
|
});
|
|
|
|
selAiProvider.addEventListener('change', () => {
|
|
const val = selAiProvider.value;
|
|
selectProvider(val);
|
|
});
|
|
|
|
inpCfgBaseUrl.addEventListener('blur', fetchModels);
|
|
inpCfgApiKey.addEventListener('blur', fetchModels);
|
|
|
|
setTimeout(fetchModels, 1000);
|
|
|
|
const themeToggleButton = document.getElementById('themeToggleButton');
|
|
const logoutButton = document.getElementById('logoutButton');
|
|
const divSvgHam = document.getElementById('divSvgHam');
|
|
|
|
if (divSvgHam) divSvgHam.addEventListener('click', toggleNav);
|
|
|
|
if (themeToggleButton) {
|
|
themeToggleButton.addEventListener('click', () => {
|
|
isDarkMode = !isDarkMode;
|
|
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
|
|
localStorage.setItem('sidenavWasOpen', isNavOpen ? 'true' : 'false');
|
|
window.location.reload();
|
|
});
|
|
}
|
|
|
|
if (logoutButton) {
|
|
logoutButton.addEventListener('click', async () => {
|
|
try {
|
|
await Logout();
|
|
} catch (error) {
|
|
console.error('[html-tv.html] Logout failed:', error);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function initHamburgerMenu() {
|
|
hamburgerInstance = new HamburgerMorphing('#divSvgHam', {
|
|
foreground: 'var(--primary-color)',
|
|
background: 'var(--secondary-color)',
|
|
hover: 'var(--accent-color)'
|
|
});
|
|
hamburgerInstance.animateTo('burger');
|
|
}
|
|
|
|
function bindSkillEventListeners() {
|
|
window.addEventListener('ndkEvent', (event) => {
|
|
const evt = event?.detail;
|
|
if (!evt || evt.kind !== 31123) return;
|
|
upsertSkillFromEvent(evt);
|
|
});
|
|
|
|
window.addEventListener('ndkEose', (event) => {
|
|
const eoseSubId = event?.detail?.subId || null;
|
|
if (skillSubId && eoseSubId && eoseSubId !== skillSubId) return;
|
|
setStatus(skills.length > 0 ? '' : 'No skills found.');
|
|
});
|
|
}
|
|
|
|
function bindRelayActivityListeners() {
|
|
window.addEventListener('ndkRelayActivity', (event) => {
|
|
const { relayUrl, activity } = event.detail || {};
|
|
if (relayUrl && activity) setRelayActivityState(relayUrl, activity);
|
|
});
|
|
|
|
window.addEventListener('message', (event) => {
|
|
if (event.data && event.data.type === 'relayActivity') {
|
|
const { relayUrl, activity } = event.data;
|
|
if (relayUrl && activity) setRelayActivityState(relayUrl, activity);
|
|
}
|
|
});
|
|
}
|
|
|
|
(async function main() {
|
|
const versionInfo = await getVersion();
|
|
console.log(`[html-tv.html ${versionInfo.VERSION}] Loading...`);
|
|
await updateVersionDisplay();
|
|
|
|
try {
|
|
initHamburgerMenu();
|
|
bindUiEvents();
|
|
bindSkillEventListeners();
|
|
|
|
await initNDKPage();
|
|
currentPubkey = await getPubkey();
|
|
await injectHeaderAvatar(currentPubkey);
|
|
|
|
initFooterRelayStatus();
|
|
initSidenavRelaySection();
|
|
await initBlossomSection();
|
|
initAiSectionWithLocalConfig();
|
|
await UpdateFooter();
|
|
|
|
loadAiConfig();
|
|
try {
|
|
const settings = await getUserSettings();
|
|
aiConfig = mergeAiConfigFromSettings(aiConfig, settings?.ai || {});
|
|
saveAiConfigLocal();
|
|
} catch (error) {
|
|
console.warn('[html-tv.html] getUserSettings failed, using local AI config:', error);
|
|
}
|
|
|
|
onUserSettings((settings) => {
|
|
try {
|
|
aiConfig = mergeAiConfigFromSettings(aiConfig, settings?.ai || {});
|
|
if (!aiConfig.provider && aiConfig.base_url) aiConfig.provider = aiConfig.base_url;
|
|
if (!aiConfig.base_url && aiConfig.provider) aiConfig.base_url = aiConfig.provider;
|
|
saveAiConfigLocal();
|
|
renderAiConfigForm();
|
|
fetchModels();
|
|
applyAiConfigToHeader();
|
|
} catch (error) {
|
|
console.warn('[html-tv.html] failed to apply user-settings update:', error);
|
|
}
|
|
});
|
|
|
|
renderAiConfigForm();
|
|
applyAiConfigToHeader();
|
|
updateProviderSections();
|
|
|
|
loadConversations();
|
|
renderConversationList();
|
|
renderCurrentConversation();
|
|
renderRenderedPageActions();
|
|
|
|
bindRelayActivityListeners();
|
|
getRoutstrBalance().catch((error) => {
|
|
console.warn('[html-tv.html] initial Routstr balance fetch failed:', error);
|
|
});
|
|
|
|
const sidenavWasOpen = localStorage.getItem('sidenavWasOpen');
|
|
if (sidenavWasOpen === 'true') {
|
|
localStorage.removeItem('sidenavWasOpen');
|
|
openNav();
|
|
}
|
|
|
|
updateIntervalId = setInterval(UpdateFooter, 1000);
|
|
await updateVersionDisplay();
|
|
} catch (error) {
|
|
console.error('[html-tv.html] initialization failed:', error);
|
|
setStatus(`Initialization failed: ${error?.message || error}`);
|
|
await updateVersionDisplay();
|
|
}
|
|
})();
|
|
|