Site Builder

Editing: businessPromptinator-light-no-toolbar.js

writable 0666

/* Promptinator – 2025‑07‑24  (business edition + H‑token + flexible flags + pencil toggle)
   ----------------------------------------------------------------------------- */

export default class Promptinator {

/* ─────────── static helpers ─────────── */
  static _lastMeta  = [];
  static _lastState = [];
  static _hasE      = false;
  static _escAttr (s = '') {
    return String(s)
      .replace(/&/g,'&amp;').replace(/"/g,'&quot;')
      .replace(/</g,'&lt;').replace(/>/g,'&gt;');
  }

/* ─────────── init ─────────── */
  static init ({ mount, defaultPrompt }) {

const prompt   = mount.dataset.prompt || defaultPrompt || mount.textContent.trim();
    let   template = prompt;

/* now recognises H */
    const RX = /\[(?:([A-DEIH]?)-)?([^~|\-\]]*)(?:-([^~\]]*))?(?:~([^~]+)~)?\]/ig;

const state = {}, meta = [];

/* accept edit/think OR data‑edit/data‑think */
    const valEdit  = mount.dataset.edit  ?? mount.getAttribute('edit')  ?? '1';
    const valThink = mount.dataset.think ?? (mount.hasAttribute('think')
                      ? mount.getAttribute('think') : '1');
    const allowEdit  = valEdit  !== '0' && valEdit  !== 'false';
    const allowThink = valThink !== '0' && valThink !== 'false';

/* ---------- business helpers (unchanged) ---------- */
    const biz     = window.businessData || null;
    let phParam   = new URLSearchParams(window.location.search).get('ph');
    if (!phParam) {
      const segs = window.location.pathname.split('/').filter(Boolean);
      phParam = segs.find(s=>/^\d{10}$/.test(s)) || null;
    }
    const isBiz = biz && phParam && biz.phone && biz.phone === phParam;

/* ---------- renderer ---------- */
    function render () {

meta.length=0; let idx=0;

template.replace(RX,(_,cmd='',lab='',ops='',def='')=>{
        lab=lab.trim(); const opts=ops.split('|').filter(Boolean);
        if(!(idx in state)){
          state[idx]=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}); idx++; return'';
      });

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

idx=0;
      const html = template.replace(RX,(_,cmd='',lab='')=>{
        lab=lab.trim(); const val=state[idx]; let out;
        if(cmd==='C'){
          const list=(Array.isArray(val)?val:[val]).filter(Boolean); if(!list.length)list.push('+');
          out=list.map(v=>`<span class="token" data-i="${idx}" data-label="${lab}">[${v}]</span>`).join(', ');
        }else if(cmd==='E'){
          out=`<button class="token e-btn" data-i="${idx}" data-label="${lab}">${/^\S+@\S+\.\S+$/.test(val)?'Send':'Submit'}</button>`;
        }else if(cmd==='H'){
          out=`<span class="token hidden-dot" title="${Promptinator._escAttr(lab)}" data-i="${idx}" data-label="${lab}" aria-hidden="true">•</span>`;
        }else{
          out=`<span class="token" data-i="${idx}" data-label="${lab}">[${val}]</span>`;
        }
        idx++; return out;
      });

const hasE = meta.some(m=>m.cmd==='E');
      Promptinator._hasE = hasE;

const aiButtons = (allowThink&&!hasE)?`
        <div class="ai-buttons" style="margin-top:1em;display:flex;flex-wrap:wrap;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&&!hasE){
        let i=0; const full=template.replace(RX,()=>{const v=state[i++];return Array.isArray(v)?v.join(', '):v;});
        promptText.querySelector('.chatgpt').href='https://chat.openai.com/?prompt='+encodeURIComponent(full);
        promptText.querySelector('.perplexity').href='https://www.perplexity.ai/search?q='+encodeURIComponent(full);
        promptText.querySelector('.copilot').href='https://copilot.microsoft.com/?q='+encodeURIComponent(full);
      }
    } /* render */

/* ---------- editor / pencil toggle (unchanged) ---------- */
    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'),
            form=editor.querySelector('#edit-form'),
            ta=form.querySelector('textarea');
      link.onclick=()=>{
        const closed=getComputedStyle(form).display==='none';
        if(closed){form.style.display='';ta.value=template;ta.focus();}
        else{form.style.display='none';}
      };
      form.onsubmit=e=>{
        e.preventDefault();
        template=ta.value.trim();
        Object.keys(state).forEach(k=>delete state[k]);
        render._bizApplied=false; render(); form.style.display='none';
      };
    }

/* one‑time CSS for hidden dot */
    if(!Promptinator._dotCSS){
      const st=document.createElement('style');
      st.textContent='.hidden-dot{cursor:pointer;padding:0 .2em;}';
      document.head.append(st); Promptinator._dotCSS=true;
    }

render();

mount.addEventListener('click',e=>{
      if(!e.target.matches('.token'))return;
      const i=+e.target.dataset.i, info=meta[i], val=state[i];
      if(info.cmd==='E'){Promptinator._lastMeta=meta.slice();Promptinator._lastState=Object.assign([],state);}
      Promptinator._popup(info,Array.isArray(val)?val.join(', '):val,v=>{
        state[i]=info.cmd==='C'?v.split(',').map(s=>s.trim()).filter(Boolean):v;
        render();
      });
    });
  } /* init */

/* ─────────── popup (token editor) ─────────── */
  static _popup(meta,cur,done){

const prettify=s=>s.replace(/[-_]/g,' ').replace(/\b\w/g,c=>c.toUpperCase());
    const nice=meta.lab&&meta.lab.trim()?prettify(meta.lab):
      (cur||{A:'Text Input',B:'Choice',C:'Options',D:'Dropdown',E:'Send',I:'URL Picker',H:'Hidden'}[meta.cmd]||'Input');

const showPH = Promptinator._hasE && cur === meta.def;
    const phAttr = showPH ? ` placeholder="${Promptinator._escAttr(cur)}"` : '';
    const valAttr= showPH ? '' : Promptinator._escAttr(cur);

let inner='';

switch(meta.cmd){

/* A and new H share the same editor */
      case 'A':
      case 'H':
        inner=`<label>${nice}
                 <textarea style="width:100%;font-size:1rem;" rows="4"${phAttr}>${valAttr}</textarea>
               </label>
               <div style="text-align:right;margin-top:.7em;"><button type="button">Done</button></div>`;
        break;

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

case 'C':{/* unchanged checkbox list, retains biz tag injection */ let opts=meta.opts;
        const labLow=(meta.lab||'').toLowerCase();
        if(window.businessData){
          if(labLow.startsWith('service')&&Array.isArray(window.businessData.tags))opts=window.businessData.tags;
          if(labLow.startsWith('location')&&Array.isArray(window.businessData.location_tags))opts=window.businessData.location_tags;
        }
        inner=`<fieldset><legend>${nice}</legend>`+
          opts.map(o=>`<label><input type="checkbox" value="${o}" ${cur.split(', ').includes(o)?'checked':''}> ${o}</label>`).join('')+
          `</fieldset><div style="text-align:right;margin-top:.7em;"><button type="button">Done</button></div>`; break;}

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

case 'I':
        inner=`<label>${nice}<select>`+
          (showPH?`<option disabled selected>${Promptinator._escAttr(cur)}</option>`:'')+
          meta.opts.map(u=>`<option${u===cur?' selected':''}>${u}</option>`).join('')+
          `</select></label>
         <iframe hidden style="width:100%;height:300px;border:1px solid #ccc;margin-top:.6em;"></iframe>
         <div style="text-align:right;margin-top:.7em;"><button type="button">Use site</button></div>`; break;

case 'E':{/* unchanged */ const isEmail=/^\S+@\S+\.\S+$/.test(cur);
        inner=`<div style="padding:1em 0;text-align:center;font-size:1.1rem;font-weight:600;">${nice}</div>
               <div style="text-align:right;margin-top:.7em;"><button type="button">${isEmail?'Send':'Submit'}</button></div>`; break;}

default:
        inner=`<label>${nice}<input type="text" style="width:100%;font-size:1rem;"${phAttr} value="${valAttr}"></label>
               <div style="text-align:right;margin-top:.7em;"><button type="button">Done</button></div>`;
    }

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

/* --- per‑command behaviour (A/H share code) --- */
    const commit=v=>{done(v);dlg.close();};

if(meta.cmd==='A'||meta.cmd==='H'){
      const ta=pb.querySelector('textarea'); ta.focus();
      pb.querySelector('button').onclick=()=>commit(ta.value);
      return;
    }
    if(meta.cmd==='B'){pb.onclick=e=>{if(e.target.name==='r')commit(e.target.value);};return;}
    if(meta.cmd==='C'){pb.querySelector('button').onclick=()=>commit([...pb.querySelectorAll('input:checked')].map(i=>i.value).join(', ')||cur);return;}
    if(meta.cmd==='D'){pb.querySelector('select').onchange=e=>commit(e.target.value);return;}
    if(meta.cmd==='I'){const sel=pb.querySelector('select'),fr=pb.querySelector('iframe');sel.onchange=()=>{fr.hidden=false;fr.src=sel.value;};pb.querySelector('button').onclick=()=>commit(sel.value||cur);return;}

if(meta.cmd==='E'){/* unchanged email / form handling */ const btn=pb.querySelector('button'),isEmail=/^\S+@\S+\.\S+$/.test(cur);
      if(isEmail){
        const body=Promptinator._lastMeta.map((m,i)=>`${prettify(m.lab)}: ${Promptinator._lastState[i]}`).join('\n');
        btn.onclick=()=>{window.location.href=`mailto:${cur}?subject=${encodeURIComponent(nice)}&body=${encodeURIComponent(body)}`;dlg.close();};
      }else{
        const form=document.createElement('form'); form.method='post'; form.action=cur;
        const t=document.createElement('input'); t.type='hidden'; t.name='_formTitle'; t.value=nice; form.append(t);
        Promptinator._lastMeta.forEach((m,i)=>{const inp=document.createElement('input');inp.type='hidden';inp.name=prettify(m.lab).replace(/\s+/g,'-').toLowerCase();inp.value=Promptinator._lastState[i];form.append(inp);});
        pb.append(form); btn.onclick=()=>{form.submit();dlg.close();};
      } return;
    }

/* default single‑line */
    const inp=pb.querySelector('input'); inp.focus();
    pb.querySelector('button').onclick=()=>commit(inp.value);
    inp.onkeydown=e=>{if(e.key==='Enter')commit(inp.value);};
  } /* popup */
}

Site Builder

Editing: businessPromptinator-light-no-toolbar.js

Site Builder