Site Builder

Editing: promptinator.js

writable 0666

/* Promptinator – 2025-07 (business-aware, full features retained) */
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 = {};   // tokenIndex → current value
    const meta  = [];

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

// Business logic: inject correct checkbox lists
    const biz     = window.businessData || null;
    const phParam = new URLSearchParams(window.location.search).get('ph');
    const isBiz   = biz && phParam && biz.phone && biz.phone === phParam;

function render() {
      meta.length = 0;
      let tokenIndex = 0;

template.replace(RX, (_, cmd = '', lab = '', ops = '', def = '') => {
        lab = lab.trim();
        const opts = ops.split('|').filter(Boolean);
        if (!(tokenIndex in state)) {
          state[tokenIndex] = cmd === 'C'
            ? (def ? def.split(',').map(v => v.trim()) : opts.slice(0, 1))
            : (def || opts[0] || lab);
        }
        meta.push({ cmd: cmd || 'A', lab, opts, def });
        tokenIndex++;
        return '';
      });

if (!render._bizApplied) { applyBiz(state, meta); render._bizApplied = true; }

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

const aiButtons = allowThink ? `
        <div class="ai-buttons" style="margin-top:1em;display:flex;gap:.6em;">
          <a 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;">🧠 ChatGPT</a>
          <a 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;">🔎 Perplexity</a>
          <a 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;">🤖 Copilot</a>
        </div>` : '';

promptText.innerHTML = html.replace(/\n/g, '<br>') + aiButtons;

if (allowThink) {
        let i = 0;
        const fullPrompt = template.replace(RX, () => {
          const v = state[i++];
          return Array.isArray(v) ? v.join(', ') : v;
        });
        promptText.querySelector('.chatgpt').href    = 'https://chat.openai.com/?prompt='   + encodeURIComponent(fullPrompt);
        promptText.querySelector('.perplexity').href = 'https://www.perplexity.ai/search?q=' + encodeURIComponent(fullPrompt);
        promptText.querySelector('.copilot').href    = 'https://copilot.microsoft.com/?q='   + encodeURIComponent(fullPrompt);
      }
    }

const editor = document.createElement('div');
    editor.innerHTML = `
      <div style="display:flex;align-items:baseline;gap:.5em;">
        ${allowEdit ? '<span id="edit-link" style="cursor:pointer">✏️</span>' : ''}
        <div class="prompt-text" style="flex:1 1 auto;"></div>
      </div>
      ${allowEdit ? `<form id="edit-form" style="display:none;margin-top:.6em;">
                       <textarea style="width:100%;min-height:90px;font-family:monospace;"></textarea>
                       <div style="text-align:right;margin-top:.7em;"><button type="submit">Save & Update</button></div>
                     </form>` : ''}`;
    mount.innerHTML = '';
    mount.append(editor);
    const promptText = editor.querySelector('.prompt-text');

if (allowEdit) {
      const link = editor.querySelector('#edit-link');
      const form = editor.querySelector('#edit-form');
      const ta   = form.querySelector('textarea');
      link.onclick = () => { form.style.display = form.style.display ? '' : 'none'; ta.value = template; };
      form.onsubmit = e => {
        e.preventDefault();
        template = ta.value.trim();
        Object.keys(state).forEach(k => delete state[k]);
        render._bizApplied = false;
        render();
      };
    }

render();

mount.addEventListener('click', e => {
      if (!e.target.matches('.token')) return;

const idx   = Number(e.target.dataset.i);
      const info  = meta[idx];
      const value = state[idx];
      Promptinator._popup(
        info,
        Array.isArray(value) ? value.join(', ') : value,
        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(); });
    }

const niceLabel = 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');

let inner = '';
    switch (meta.cmd) {
      case 'A':
        inner = `<label>${niceLabel}<textarea style="width:100%;font-size:1rem;" rows="4">${cur}</textarea></label>`;
        break;

case 'B':
        inner = `<fieldset><legend>${niceLabel}</legend>` +
          meta.opts.map(o =>
            `<label><input type="radio" name="r" value="${o}" ${o === cur ? 'checked' : ''}> ${o}</label>`
          ).join('') +
          `</fieldset>`;
        break;

case 'C':
        inner = `<fieldset><legend>${niceLabel}</legend>` +
          meta.opts.map(o =>
            `<label><input type="checkbox" value="${o}" ${cur.split(', ').includes(o) ? 'checked' : ''}> ${o}</label>`
          ).join('') +
          `</fieldset><button>Done</button>`;
        break;

case 'D': {
        let opts = meta.opts;
        if (opts.length === 1 && /^\d+$/.test(opts[0])) {
          opts = Array.from({ length: +opts[0] }, (_, i) => String(i + 1));
        }
        inner = `<label>${niceLabel}<select>` +
          opts.map(o => `<option${o === cur ? ' selected' : ''}>${o}</option>`).join('') +
          `</select></label>`;
        break;
      }

case 'I':
        inner = `<label>${niceLabel}
                   <select><option disabled selected>${cur}</option>` +
                 meta.opts.map(u => `<option>${u}</option>`).join('') +
                 `</select>
                 </label>
                 <iframe hidden></iframe>
                 <button>Use site</button>`;
        break;

default:
        inner = `<label>${niceLabel}<input type="text" style="width:100%;font-size:1rem;" value="${cur}"></label>`;
    }

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

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

if (meta.cmd === 'A') {
      const ta = pb.querySelector('textarea');
      ta.focus();
      ta.onblur = 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     = () => commit(inp.value);
      inp.onkeydown  = e => { if (e.key === 'Enter') commit(inp.value); };
    }
  }
}

Site Builder

Editing: promptinator.js

Site Builder