Site Builder

Editing: dynamicPromptinator.js

writable 0666

/* Dynamic Promptinator – local‑AI edition – v2025‑08‑23
 * ------------------------------------------------------------------
 *  Base: SOCIAL build (v2025‑08‑16)
 *  Additions
 *    •  “⚡ Local AI” button appears when:
 *         – a prompt exists
 *         – the OpenAI toolbar (model selector) is on the page
 *    •  Button posts ONLY the prompt to  ?ajax=1  (handled by ai_chat)
 *    •  Shows spinner + seconds counter while waiting
 *    •  Drops HTML reply into a textarea under the Promptinator block
 *      (double‑click the textarea to copy)
 *  The original functionality, tokens, pencil toolbar, Short‑code
 *  helper, etc. all remain unchanged.
 * ------------------------------------------------------------------ */

export default class Promptinator {

/* === static helpers / flags ==================================== */
static _lastMeta=[]; static _lastState=[]; static _hasE=false;
static _escAttr=s=>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;
  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; };

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;
      }

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; }

if(lab in prof){ set(prof[lab]); }

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]];
        }
      }
    });
  }

let attempts=0;
  const watch=setInterval(()=>{
    if(!hasProf&&window.profileData){
      prof=window.profileData; hasProf=true; applyProfile(state,meta); render(); clearInterval(watch);
    }
    if(++attempts>20) clearInterval(watch);
  },150);

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

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>`:'';

const extBtns = showAI?`
      <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>`:'';

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, full=template.replace(RX,()=>{
        const v=state[i++]; return Array.isArray(v)?v.join(', '):v;
      });
      const enc=encodeURIComponent(full);
      promptText.querySelector('.chatgpt')    .href='https://chat.openai.com/?prompt='+enc;
      promptText.querySelector('.perplexity') .href='https://www.perplexity.ai/search?q='+enc;
      promptText.querySelector('.copilot')    .href='https://copilot.microsoft.com/?q='+enc;
    }

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

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

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(t); spin.style.display='none'; lb.disabled=false;
          if(j.error){ alert(j.error); return; }
          out.value=j.html;
          out.scrollIntoView({behavior:'smooth',block:'nearest'});
        })
        .catch(err=>{
          clearInterval(t); spin.style.display='none'; lb.disabled=false;
          alert(err);
        });
      };
    }

document.dispatchEvent(new CustomEvent('promptinator:updated',{
      detail:{hasPrompt:!noPrompt}
    }));
  } /* render */

/* ------ DOM scaffold -----------------------------------------*/
  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');

/* ------ editing toggle & toolbar hook -------------------------*/
  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 */

/* ---------- popup (unchanged from SOCIAL build) ---------------- */
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: dynamicPromptinator.js

Site Builder