Site Builder

Editing: dynamicPromptinator11.js

writable 0666

/* Dynamic Promptinator – local‑AI edition – v2025‑08‑24
 * ------------------------------------------------------------
 *  + Keeps original SOCIAL Promptinator features
 *  + Adds purple‑pill styling back to all .ai‑btn buttons
 *  + Adds ⚡ Local AI button (only if OpenAI key present)
 *  + Result panel appears below card, copy‑HTML button included
 * ------------------------------------------------------------ */

export default class Promptinator {

/* ============ helpers / flags ================================= */
static _lastMeta=[]; static _lastState=[]; static _hasE=false;
static _btnCSS=false;                       /* injected once      */
static _escAttr=s=>String(s)
  .replace(/&/g,'&amp;').replace(/"/g,'&quot;')
  .replace(/</g,'&lt;').replace(/>/g,'&gt;');

/* ============ public initialiser ============================== */
static init({ mount, defaultPrompt }){

/* ---------- bootstrap -------------------------------------- */
  const prompt   = mount.dataset.prompt || defaultPrompt || mount.textContent.trim();
  let   template = prompt;
  const RX=/\[(?:([A-DEIH]?)-)?([^~|\-\]]*)(?:-([^~\]]*))?(?:~([^~]+)~)?\]/ig;

const state={}, meta=[];
  const allowEdit =(mount.dataset.edit  ?? mount.getAttribute('edit')  ?? '1')!=='0';
  const allowThink=(mount.dataset.think ?? (mount.hasAttribute('think')?mount.getAttribute('think'):'1'))!=='0';

/* ---------- profile helpers -------------------------------- */
  let prof=window.profileData||null, hasProf=!!prof;
  const nonEmpty=v=>v!==null&&v!==undefined&&String(v).trim()!=='';
  const pick=(path,f='')=>path.split('.').reduce((o,k)=>o&&o[k],prof)??f;

function applyProfile(st,mt){
    if(!hasProf) return;
    mt.forEach((m,i)=>{
      const lab=(m.lab||'').toLowerCase().trim();
      const set=v=>{ if(nonEmpty(v)) st[i]=v; };

/* standard profile keys ---------------------------------- */
      switch(lab){
        case 'handle':case '@handle':   set(prof.handle);                    return;
        case 'slug':                    set(prof.slug);                      return;
        case 'name':case 'full_name':   set(prof.name||prof.display_name);   return;
        case 'display_name':            set(prof.display_name);              return;
        case 'slogan':                  set(prof.slogan);                    return;
        case 'description':             set(prof.description);               return;
        case 'address':case 'street_address': set(prof.address);             return;
        case 'city':                    set(prof.city);                      return;
        case 'state':                   set(prof.state);                     return;
        case 'zip':case 'zip_code':     set(prof.zip);                       return;
        case 'lat':                     set(prof.lat);                       return;
        case 'lon':                     set(prof.lon);                       return;
        case 'phone':                   set(prof.phone);                     return;
        case 'website':                 set(prof.website);                   return;
        case 'email':                   set(prof.email);                     return;
        case 'premium':                 set(prof.premium?'Yes':'No');        return;
      }
      /* channel shortcuts -------------------------------------- */
      const ch={youtube:'channels.video.youtube',rumble:'channels.video.rumble',
        odysee:'channels.video.odysee',spotify:'channels.podcast.spotify',
        apple:'channels.podcast.apple',rss:'channels.podcast.rss',
        twitter:'channels.social.twitter',tiktok:'channels.social.tiktok',
        instagram:'channels.social.instagram',facebook:'channels.social.facebook',
        linkedin:'channels.social.linkedin',patreon:'channels.social.patreon'};
      if(lab in ch){ set(pick(ch[lab])); return; }

/* direct key match --------------------------------------- */
      if(lab in prof){ set(prof[lab]); }

/* dynamic C‑token defaults ------------------------------- */
      if(m.cmd==='C'){
        if(/service/.test(lab)&&Array.isArray(prof.tags)){
          m.opts=prof.tags;
          if(!st[i]?.length&&prof.tags.length) st[i]=[prof.tags[0]];
        }
        if(/location/.test(lab)&&Array.isArray(prof.location_tags)){
          m.opts=prof.location_tags;
          if(!st[i]?.length&&prof.location_tags.length) st[i]=[prof.location_tags[0]];
        }
      }
    });
  }

/* wait for late profile injection --------------------------- */
  let tries=0;
  const watch=setInterval(()=>{
    if(!hasProf&&window.profileData){
      prof=window.profileData; hasProf=true; applyProfile(state,meta); render(); clearInterval(watch);
    }
    if(++tries>20) clearInterval(watch);
  },150);

/* ---------- renderer --------------------------------------- */
  function render(){
    Promptinator._injectBtnCSS();          /* ensure .ai‑btn style loaded */

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.length?opts.slice(0,1):[]))
          : (def||opts[0]||lab);
      }
      meta.push({cmd:cmd||'A',lab,opts,def}); idx++; return'';
    });

/* one‑time profile fill */
    if(!render._haveProfile){ applyProfile(state,meta); render._haveProfile=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(nonEmpty);
        if(!list.length&&meta[idx].opts.length) list.push(meta[idx].opts[0]);
        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 h-dot" data-i="${idx}" data-label="${lab}" title="Hidden instruction">•</span>`;
      }else{
        out=`<span class="token" data-i="${idx}" data-label="${lab}">[${nonEmpty(val)?val:'+'}]</span>`;
      }
      idx++; return out;
    });

const hasE = meta.some(m=>m.cmd==='E'); Promptinator._hasE=hasE;
    const noPrompt = template.trim()==='';
    const showAI = allowThink && !hasE && !noPrompt;

const helper = noPrompt&&allowEdit
      ? '<div class="promptinator-helper">💡 Click the pencil (✏️) to add a prompt.</div>'
      : '';

/* external AI buttons ------------------------------------- */
    const extBtns = `
      <a class="ai-btn chatgpt"   target="_blank">🧠 ChatGPT</a>
      <a class="ai-btn perplexity"target="_blank">🔎 Perplexity</a>
      <a class="ai-btn copilot"   target="_blank">🤖 Copilot</a>`;

/* show Local AI only when bar (modelSel) exists (= key saved) */
    const hasKey = !!document.getElementById('modelSel');
    const localBtn = (showAI && hasKey)
        ? '<button type="button" class="ai-btn localai">⚡ Local AI</button>' : '';

const aiBtns = showAI
      ? `<div class="ai-buttons" style="margin-top:1em;display:flex;flex-wrap:wrap;gap:.6em;">${extBtns}${localBtn}</div>`
      : '';

promptText.innerHTML=(noPrompt?'':html.replace(/\n/g,'<br>'))+helper+aiBtns;
    editor.classList.toggle('promptinator--empty',noPrompt);

if(showAI){
      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);
    }

/* -------- Local AI click handler ------------------------- */
    const lb=promptText.querySelector('.localai');
    if(lb){
      lb.onclick=()=>{
        /* build flattened prompt */
        let i=0;
        const full=template.replace(RX,()=>{const v=state[i++]; return Array.isArray(v)?v.join(', '):v;});

/* make / reuse result panel */
        const shell=mount.closest('.pi-shell')||mount;
        let panel=document.getElementById('localResultBox');
        if(!panel){
          panel=document.createElement('div'); panel.id='localResultBox';
          panel.style.cssText='max-width:clamp(280px,90vw,720px);margin:1.8rem auto;padding:1.4rem;'+
                              'background:#fff;border:3.5px solid #ffb63b;border-radius:27px;'+
                              'box-shadow:0 8px 26px rgba(0,0,0,.06);';
          panel.innerHTML=`
             <h3 style="margin-top:0">Local AI Answer</h3>
             <div class="outZone" style="font-size:1.05rem;line-height:1.4;"></div>
             <button class="copyHtml"
                     style="margin-top:1rem;background:#004cff;color:#fff;border:none;border-radius:8px;
                            padding:.55rem 1.2rem;font-weight:600;cursor:pointer">
               Copy HTML
             </button>
             <span class="spinner" style="display:none;margin-left:.7rem;gap:.4em;
                    align-items:center;font-size:.9rem;">
               <svg viewBox="0 0 24 24" style="width:18px;height:18px;animation:rot 1s linear infinite">
                 <circle cx="12" cy="12" r="10" stroke="currentColor"
                         stroke-width="4" fill="none"></circle></svg>
               <span>0</span>s
             </span>`;
          shell.parentNode.insertBefore(panel,shell.nextSibling);
        }
        const out   = panel.querySelector('.outZone'),
              copy  = panel.querySelector('.copyHtml'),
              spin  = panel.querySelector('.spinner');

/* spinner */
        lb.disabled=true; spin.style.display='inline-flex';
        let secs=0; spin.lastElementChild.textContent='0';
        const tick=setInterval(()=>spin.lastElementChild.textContent=++secs,1000);

/* AJAX to same PHP (tools page already handles ?ajax=1) */
        fetch(location.pathname+'?ajax=1',{
          method:'POST',
          headers:{'Content-Type':'application/x-www-form-urlencoded'},
          body:'prompt='+encodeURIComponent(full)
        })
        .then(r=>r.json())
        .then(j=>{
          clearInterval(tick); spin.style.display='none'; lb.disabled=false;
          if(j.error){alert(j.error);return;}
          const res=(j.html||'').trim();
          out.innerHTML = res.startsWith('<') ? res
                        : '<pre style="white-space:pre-wrap;">'+
                          Promptinator._escAttr(res)+'</pre>';
        })
        .catch(err=>{
          clearInterval(tick); spin.style.display='none'; lb.disabled=false;
          alert(err);
        });

copy.onclick=()=>navigator.clipboard.writeText(out.innerHTML)
          .then(()=>{copy.textContent='✔ Copied';
                     setTimeout(()=>copy.textContent='Copy HTML',1200);});

panel.scrollIntoView({behavior:'smooth',block:'center'});
      };
    }
  }/* render */

/* ---- scaffold / editor toggle (unchanged) ------------------ */
  const editor=document.createElement('div'); editor.className='Promptinator';
  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');

/* edit pencil logic ------------------------------------------ */
  if(allowEdit){
    const link=editor.querySelector('#edit-link'),
          form=editor.querySelector('#edit-form'),
          ta=form?.querySelector('textarea');
    link&&link.addEventListener('click',()=>{
      const open=getComputedStyle(form).display==='none';
      if(open){
        form.style.display=''; ta.value=template; ta.focus();
        Promptinator.enhanceTextarea?.(ta);
      }else{
        form.style.display='none';
        template=ta.value.trim(); Object.keys(state).forEach(k=>delete state[k]);
        render._haveProfile=false; render();
      }
    });
    form&&form.addEventListener('submit',e=>{
      e.preventDefault(); template=ta.value.trim();
      Object.keys(state).forEach(k=>delete state[k]);
      render._haveProfile=false; render(); form.style.display='none';
    });
  }

render(); /* first paint */

/* token click → popup ---------------------------------------- */
  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 */

/* ========= one‑time injection of ai‑btn css ==================== */
static _injectBtnCSS(){
  if(Promptinator._btnCSS)return;
  const st=document.createElement('style');
  st.textContent=`
    .ai-btn{
      display:inline-flex;align-items:center;gap:.3em;
      background:#5c3bff;color:#fff !important;font-weight:600;
      border:none;border-radius:7px;padding:.4em 1.2em;
      text-decoration:none;cursor:pointer;font-size:.92rem}
    .ai-btn:hover{background:#482ce0}
    @keyframes rot{to{transform:rotate(360deg)}}`;
  document.head.appendChild(st);
  Promptinator._btnCSS=true;
}

/* ---------- full popup implementation (unchanged) ------------- */
static _popup(meta,cur,done){

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

case 'C':{
        let opts=meta.opts;
        const labLow=(meta.lab||'').toLowerCase();
        if(window.profileData){
          if(labLow.startsWith('service')&&Array.isArray(window.profileData.tags)) opts=window.profileData.tags;
          if(labLow.startsWith('location')&&Array.isArray(window.profileData.location_tags)) opts=window.profileData.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 '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':
        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 '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>${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':{
        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');

if(meta.cmd==='C'){
      pb.querySelector('button').onclick=()=>{
        const vals=[...pb.querySelectorAll('input:checked')].map(i=>i.value);
        done(vals.join(', ')||cur); dlg.close();
      };
      return;
    }

if(meta.cmd==='E'){
      const btn=pb.querySelector('button');
      const isEmail=/^\S+@\S+\.\S+$/.test(cur);

if(isEmail){
        const body=Promptinator._lastMeta.map((m,i)=>`${pretty(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=pretty(m.lab).replace(/\s+/g,'-').toLowerCase(); inp.value=Promptinator._lastState[i]; form.append(inp);
        });
        pb.append(form);
        btn.onclick=()=>{ form.submit(); dlg.close(); };
      }
      return;
    }

if(meta.cmd==='A'||meta.cmd==='H'){
      const ta=pb.querySelector('textarea'); ta.focus();
      pb.querySelector('button').onclick=()=>{ done(ta.value); dlg.close(); };
      return;
    }

if(meta.cmd==='B'){
      pb.onclick=e=>{ if(e.target.name==='r'){ done(e.target.value); dlg.close(); } };
      return;
    }

if(meta.cmd==='D'){
      pb.querySelector('select').onchange=e=>{ done(e.target.value); dlg.close(); };
      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=()=>{ done(sel.value||cur); dlg.close(); };
      return;
    }

/* ===================================================================
   EMBEDDED PENCIL TOOLBAR
   =================================================================== */
const HELP_URL='https://promptinator.ai/shortcode-help.php';

const SNIPPETS={name:'[name]',slogan:'[slogan]',description:'[description]',address:'[address]',city:'[city]',
  state:'[state]',zip:'[zip]',phone:'[phone]',website:'[website]',email:'[email]',
  c_service:'[C-service-]',c_location:'[C-location-]',
  h_hidden:'[H-hidden-~Internal GPT instructions here~]',
  plain_input:'[-labelfield-~Input~]',textarea_a:'[A-labelfield-~Textarea~]',radio_b:'[B-labelfield-|Choice 1|Choice 2|~Choice 2~]',
  checkbox_c:'[C-labelfield-|Opt A|Opt B|~Opt A~]',dropdown_num_d:'[D-labelfield-10~3~]',
  dropdown_txt_d:'[D-labelfield-|Opt A|Opt B|Opt C|~Opt B~]',
  url_picker_i:'[I-labelfield-|https://site1.com|site2.com|~Pick a site~]',
  email_submit_e:'[E-labelfield-~you@site.com~]',form_post_e:'[E-labelfield-~https://example.com/endpoint~]'};

const MENU=[['name','Name'],['slogan','Slogan'],['description','Description'],['address','Street address'],
  ['city','City'],['state','State'],['zip','ZIP code'],['phone','Phone number'],['website','Website URL'],
  ['email','Email address'],['c_service','Services (C)'],['c_location','Locations (C)'],
  ['h_hidden','Hidden instructions (H)'],
  ['plain_input','Plain input'],['textarea_a','Textarea (A)'],['radio_b','Radio buttons (B)'],
  ['checkbox_c','Checkbox group (C)'],['dropdown_num_d','Dropdown numeric (D)'],['dropdown_txt_d','Dropdown text (D)'],
  ['url_picker_i','URL picker + preview (I)'],['email_submit_e','Email submit (E)'],['form_post_e','Form‑POST submit (E)']];

function enhanceTextarea(ta){
  if(!ta||ta.dataset.scMenu)return;
  ta.dataset.scMenu='yes';

const m=ta.value.match(/-label(\d+)(?=[-~|])/g);
  ta.dataset.labelCount = m ? String(Math.max(...m.map(s=>+s.replace(/\D/g,'')))+1) : '0';

const help=document.createElement('a');
  help.className='promptinator-help';
  help.textContent='Help';
  help.href=HELP_URL;
  help.title='Open shortcode helper';
  help.onclick=e=>{
    e.preventDefault();
    window.open(HELP_URL,'promptinatorHelp','popup=yes,width=520,height=720,scrollbars=yes,resizable=yes');
  };

const bar=document.createElement('div');
  bar.className='promptinator-bar';
  bar.append(sel,help);
  ta.parentNode.insertBefore(bar,ta);
}

/* one‑time CSS injection */
(function(){
  const css=`
    .promptinator-bar{display:flex;align-items:center;gap:.55em;margin-bottom:.35em;}
    .promptinator-select{flex:1 1 auto;padding:.3em .55em;}
    .promptinator-help{flex:0 0 auto;font-size:.9rem;color:#176edc;text-decoration:underline;cursor:pointer;}
    .promptinator-bar+textarea{width:100%;box-sizing:border-box;}
    .Promptinator.promptinator--empty .ai-buttons{display:none!important;}
    .promptinator-helper{margin-top:1em;font-size:.9em;color:#555;background:#fff9c4;text-align:center;padding:.5em .8em;border-radius:5px;}
    .token.h-dot{cursor:pointer;font-weight:bold;font-size:1.2em;}
    @keyframes rot{to{transform:rotate(360deg);}}
  `;
  const st=document.createElement('style');
  st.appendChild(document.createTextNode(css));
  document.head.appendChild(st);
})();

Promptinator.enhanceTextarea = enhanceTextarea;
export { enhanceTextarea };

Site Builder

Editing: dynamicPromptinator11.js

Site Builder