Site Builder

Editing: promptfinator.js

writable 0666

export default class Promptinator {
  static init({ mount, defaultPrompt }) {
    const prompt = mount.dataset.prompt || defaultPrompt || mount.textContent.trim();
    let template = prompt;
    const RX = /\[(?:([A-DI]?)-)?([^~|\-\]]*)(?:-([^~\]]+))?(?:~([^~]+)~)?\]/ig;
    const state = {}, meta = [];

const allowEdit = mount.getAttribute('edit') !== '0' && mount.getAttribute('edit') !== 'false';
    const allowThink = !mount.hasAttribute('think') ||
      (mount.getAttribute('think') !== '0' && mount.getAttribute('think') !== 'false');

tokenIndex = 0;
      // Render tokens: always include data-label
      const html = template.replace(RX, (_, cmd = '', lab = '', ops = '', def = '') => {
        lab = lab.trim();
        const val = state[tokenIndex];
        let tokenHtml;
        if (cmd === 'C') {
          tokenHtml = (Array.isArray(val) ? val : [val])
            .map(v => `<span class="token" data-i="${tokenIndex}" data-label="${lab}">[${v}]</span>`).join(', ');
        } else {
          tokenHtml = `<span class="token" data-i="${tokenIndex}" data-label="${lab}">[${val}]</span>`;
        }
        tokenIndex++;
        return tokenHtml;
      });

let aiButtons = allowThink
        ? `<div class="ai-buttons" style="margin-top:1em;display:flex;gap:.6em;">
              <a href="#" class="ai-btn chatgpt"   target="_blank" style="display:inline-flex;align-items:center;gap:.3em;background:#5c3bff;color:#fff;font-weight:600;border-radius:7px;padding:.4em 1.2em;text-decoration:none;">
                <span style="font-size:1.1em;">🧠</span> ChatGPT
              </a>
              <a href="#" class="ai-btn perplexity" target="_blank" style="display:inline-flex;align-items:center;gap:.3em;background:#22a8e5;color:#fff;font-weight:600;border-radius:7px;padding:.4em 1.2em;text-decoration:none;">
                <span style="font-size:1.1em;">🔎</span> Perplexity
              </a>
              <a href="#" class="ai-btn copilot"    target="_blank" style="display:inline-flex;align-items:center;gap:.3em;background:#10c775;color:#fff;font-weight:600;border-radius:7px;padding:.4em 1.2em;text-decoration:none;">
                <span style="font-size:1.1em;">🤖</span> Copilot
              </a>
           </div>`
        : '';
      promptText.innerHTML = html.replace(/\n/g, '<br>') + aiButtons;

// Update AI button links if shown
      if (allowThink) {
        let idx = 0;
        const output = template.replace(RX, (_, cmd = '', lab, ops = '', def = '') => {
          const v = state[idx++];
          return Array.isArray(v) ? v.join(', ') : v;
        });
        const url = {
          chatgpt:    'https://chat.openai.com/?prompt=',
          perplexity: 'https://www.perplexity.ai/search?q=',
          copilot:    'https://copilot.microsoft.com/?q='
        };
        promptText.querySelector('.chatgpt').href    = url.chatgpt + encodeURIComponent(output);
        promptText.querySelector('.perplexity').href = url.perplexity + encodeURIComponent(output);
        promptText.querySelector('.copilot').href    = url.copilot + encodeURIComponent(output);
      }
    }

// --- Editor box, INLINE before prompt ---
    const editor = document.createElement('div');
    let editIcon = allowEdit
      ? `<span id="edit-link" title="Edit prompt"
            style="cursor:pointer;font-size:1em;color:#5c3bff;display:inline-flex;align-items:center;margin-right:.25em;">
            <span style="font-size:1.05em;vertical-align:middle;line-height:1;display:inline-block;">✏️</span>
         </span>`
      : '';
    let formBox = allowEdit
      ? `<form id="edit-form" style="display:none;margin-top:.6em;">
            <textarea style="width:100%;font-family:monospace;min-height:90px;"></textarea>
            <div style="text-align:right;margin-top:.7em;"><button type="submit">Save & Update</button></div>
         </form>`
      : '';
    editor.innerHTML = `
      <div style="display:flex;align-items:baseline;gap:.5em;">
        ${editIcon}
        <div class="prompt-text" style="flex:1 1 auto;"></div>
      </div>
      ${formBox}
    `;
    mount.innerHTML = '';
    mount.append(editor);

// --- Initial render ---
    render();

// --- Token click to popup ---
    mount.addEventListener('click', e => {
      if (!e.target.matches('.token')) return;
      const label = e.target.getAttribute('data-label');
      const idx = Number(e.target.dataset.i);

// First: try to find meta entry by label (more robust if labels repeat)
      let info = null;
      if (label) {
        info = meta.find((m, i) => m.lab === label && i === idx) || meta[idx];
      } else {
        info = meta[idx];
      }
      const val = state[idx];
      Promptinator._popup(info, Array.isArray(val) ? val.join(', ') : val, v => {
        state[idx] = info.cmd === 'C'
          ? v.split(',').map(s=>s.trim()).filter(Boolean)
          : v;
        render();
      });
    });
  }

static _popup(meta, cur, done) {
    let dlg = document.getElementById('promptinator-dlg');
    if (!dlg) {
      dlg = document.createElement('dialog');
      dlg.id = 'promptinator-dlg';
      document.body.append(dlg);
      dlg.addEventListener('click', e => { if (e.target === dlg) dlg.close(); });
      dlg.addEventListener('cancel', e => { e.preventDefault(); dlg.close(); });
    }

// Always show the correct label, fallback if missing
    const pretty = (meta.lab && meta.lab.trim())
      ? meta.lab.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
      : (cur || ({
          A: 'Text Input',
          B: 'Choice',
          C: 'Options',
          D: 'Dropdown',
          I: 'URL Picker'
        }[meta.cmd] || 'Input'));

dlg.innerHTML = `<div class="popup-body">${inner}</div>`;
    dlg.showModal();

const commit = v => { done(v); dlg.close(); };
    const pb = dlg.querySelector('.popup-body');

if (meta.cmd === 'A') {
      const ta = pb.querySelector('textarea');
      ta.focus();
      ta.addEventListener('blur', e => commit(e.target.value));
      return;
    }
    if (meta.cmd === 'B') pb.onclick = e => { if (e.target.name === 'r') commit(e.target.value); };
    if (meta.cmd === 'C') pb.querySelector('button').onclick = () => {
      const vals = [...pb.querySelectorAll('input:checked')].map(i => i.value);
      commit(vals.join(', ') || cur);
    };
    if (meta.cmd === 'D') pb.querySelector('select').onchange = e => commit(e.target.value);
    if (meta.cmd === 'I') {
      const sel = pb.querySelector('select');
      const fr  = pb.querySelector('iframe');
      sel.onchange = () => { fr.hidden = false; fr.src = sel.value; };
      pb.querySelector('button').onclick = () => commit(sel.value || cur);
    }
    if (!/[A-DI]/.test(meta.cmd)) {
      const inp = pb.querySelector('input');
      inp.focus();
      inp.onblur = e => commit(inp.value);
      inp.onkeydown = e => { if (e.key === 'Enter') commit(inp.value); };
    }
  }
}

Site Builder

Editing: promptfinator.js

Site Builder