AI Chat
<style>
*{box-sizing:border-box;margin:0;padding:0;}
body{background:#060E1A;font-family:"DM Sans",sans-serif;}
:root{--red:#E03030;--red-b:#FF4444;--blue:#2E9BFF;--ice:#A8D4FF;--white:#F0F6FF;--muted:#5A7A9A;--green:#1D9E75;--card:#101828;--border:rgba(255,255,255,0.07);}
.cs{width:100%;height:100vh;background:#0b0f1a;border:none;display:flex;flex-direction:column;}
.ch{padding:16px 20px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0;}
.ca{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,var(--red),#7a0000);display:flex;align-items:center;justify-content:center;font-family:Georgia,sans-serif;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;position:relative;}
.ca::after{content:"";position:absolute;bottom:1px;right:1px;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid var(--card);}
.chi h3{font-size:14px;font-weight:600;color:var(--white);margin:0 0 2px;}
.chi p{font-size:11px;color:var(--muted);margin:0;}
.con{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:20px;background:rgba(29,158,117,.12);border:1px solid rgba(29,158,117,.3);color:var(--green);}
.cm{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth;}
.cm::-webkit-scrollbar{width:4px;}.cm::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.mg{display:flex;gap:8px;max-width:90%;animation:fu .2s ease;}
@keyframes fu{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.mg.u{margin-left:auto;flex-direction:row-reverse;}
.mv{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;margin-top:2px;}
.mg.b .mv{background:radial-gradient(circle,var(--red),#7a0000);color:#fff;}
.mg.u .mv{background:rgba(46,155,255,.15);border:1px solid rgba(46,155,255,.25);color:var(--blue);}
.mb{padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.6;}
.mg.b .mb{background:var(--card);border:1px solid var(--border);color:var(--white);border-bottom-left-radius:4px;}
.mg.u .mb{background:rgba(46,155,255,.1);border:1px solid rgba(46,155,255,.2);color:var(--ice);border-bottom-right-radius:4px;}
.ty{display:flex;gap:5px;align-items:center;padding:12px 14px;}
.ty span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bl 1.2s infinite;}
.ty span:nth-child(2){animation-delay:.2s;}.ty span:nth-child(3){animation-delay:.4s;}
@keyframes bl{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.kc{display:flex;flex-wrap:wrap;gap:6px;padding:0 20px 12px;}
.kp{font-size:11px;font-weight:500;padding:6px 12px;border-radius:20px;border:1px solid rgba(224,48,48,.35);background:rgba(224,48,48,.06);color:#ffaaaa;cursor:pointer;transition:all .15s;white-space:nowrap;}
.kp:hover{background:rgba(224,48,48,.15);border-color:var(--red);color:#fff;}
.cc{background:linear-gradient(135deg,rgba(224,48,48,.1),rgba(26,107,204,.1));border:1px solid rgba(224,48,48,.25);border-radius:10px;padding:16px;margin-top:4px;}
.cc h4{font-size:18px;font-weight:700;color:var(--white);margin:0 0 6px;}
.cc p{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 14px;}
.cb{display:block;text-align:center;background:var(--red);color:#fff;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:11px 20px;border-radius:6px;border:none;width:100%;cursor:pointer;}
.cb:hover{background:var(--red-b);}
.cs2{font-size:10px;color:var(--muted);text-align:center;margin-top:8px;}
.ls{background:rgba(29,158,117,.06);border:1px solid rgba(29,158,117,.2);border-radius:8px;padding:12px;margin-bottom:10px;font-size:11px;}
.lr{display:flex;gap:8px;margin-bottom:5px;color:var(--ice);}.lr:last-child{margin-bottom:0;}
.ll{color:var(--muted);min-width:70px;flex-shrink:0;}
.ci{padding:12px 16px;background:var(--card);border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0;}
.ct{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-family:"DM Sans",sans-serif;font-size:13px;color:var(--white);outline:none;resize:none;}
.ct::placeholder{color:var(--muted);}.ct:focus{border-color:rgba(46,155,255,.35);}
.sb{width:38px;height:38px;border-radius:8px;background:var(--red);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;align-self:flex-end;}
.sb:hover{background:var(--red-b);}.sb:disabled{background:rgba(224,48,48,.3);cursor:not-allowed;}
.sb svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.cpw{text-align:center;font-size:9px;color:rgba(255,255,255,.15);padding:6px;letter-spacing:.05em;}
</style>
<div class="cs">
<div class="ch">
<div class="ca">MS</div>
<div class="chi"><h3>MSmith AI Assistant</h3><p>AI Services Strategy</p></div>
<div class="con">Online</div>
</div>
<div class="cm" id="cm"></div>
<div class="kc" id="kc"></div>
<div class="ci">
<textarea class="ct" id="ct" placeholder="Type your message..." rows="1"></textarea>
<button class="sb" id="sb" onclick="doSend()">
<svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
</button>
</div>
<div class="cpw">Powered by Claude AI · MSmith Solutions LLC</div>
</div>
<script>
(function(){
var W='https://msmith-ai-proxy.marcus-cd5.workers.dev';
var BK='https://calendar.google.com/calendar/appointments/schedules/AcZssZ1id8_3CgQHHDF7IL_BodB5HYrJam26TDtc5yEgukf9g0raAz4er2wsL0v__NlbajO8Vb0ALaAv';
var SY='You are Marcus Smith assistant for MSmith Solutions Atlanta AI company. Qualify leads: 1)Ask business type 2)Ask pain point 3)Ask name and contact 4)Recommend 2-3 services 5)Say Marcus has availability this week and output exactly [SHOW_CTA]. Keep replies 2-4 sentences. One question at a time. Pricing from $500/mo. Services: AI Receptionist, Dispatcher, Documentation, Lead Follow-Up, Chatbot, Workflow Automation. Verticals: Restaurants, Field Service, Churches, Barbershops, Clinics, Trucking, Local Businesses.';
var H=[],L={},done=false;
var CM=document.getElementById('cm'),KC=document.getElementById('kc'),CT=document.getElementById('ct'),SB=document.getElementById('sb');
function sc(){CM.scrollTop=CM.scrollHeight;}
function ex(s){return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/
/g,'<br>').replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>');}
function am(r,t,raw){var d=document.createElement('div');d.className='mg '+r;d.innerHTML='<div class="mv">'+(r==='b'?'MS':'You')+'</div><div class="mb">'+(raw?t:ex(t))+'</div>';CM.appendChild(d);sc();}
function ty(){var d=document.createElement('div');d.className='mg b';d.id='mty';d.innerHTML='<div class="mv">MS</div><div class="mb"><div class="ty"><span></span><span></span><span></span></div></div>';CM.appendChild(d);sc();return d;}
function chips(o){KC.innerHTML='';o.forEach(function(x){var b=document.createElement('button');b.className='kp';b.textContent=x;b.onclick=function(){chips([]);go(x);};KC.appendChild(b);});}
function cta(){done=true;var rows=Object.entries({Business:L.biz,Challenge:L.pain,Name:L.name,Contact:L.contact}).filter(function(e){return e[1];}).map(function(e){return '<div class="lr"><span class="ll">'+e[0]+'</span><span>'+e[1]+'</span></div>';}).join('');var d=document.createElement('div');d.className='mg b';d.innerHTML='<div class="mv">MS</div><div class="mb">'+(rows?'<div class="ls">'+rows+'</div>':'')+'<div class="cc"><h4>Book Your Free Call</h4><p>Marcus will walk you through exactly which AI tools will help your business most.</p><a href="'+BK+'" target="_blank" class="cb">Schedule Free Call</a><div class="cs2">Free · No commitment · Available this week</div></div></div>';CM.appendChild(d);sc();}
function xl(t){var lo=t.toLowerCase();if(!L.biz){var v=['restaurant','hvac','plumbing','church','barbershop','salon','clinic','trucking','field service','local'];for(var i=0;i<v.length;i++){if(lo.indexOf(v[i])>-1){L.biz=t.trim();break;}}}if(!L.name){var m=t.match(/(?:i'm|my name is|call me|i am) ([A-Z][a-z]+ ?[A-Z]?[a-z]*)/i);if(m)L.name=m[1];}var em=t.match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/);if(em&&!L.contact)L.contact=em[0];var ph=t.match(/\(?\d{3}\)?[\s-]?\d{3}[\s-]?\d{4}/);if(ph&&!L.contact)L.contact=ph[0];if(!L.pain&&lo.length>10){var pw=['miss','call','follow','manual','paper','dispatch','slow','no-show','booking','invoice'];for(var j=0;j<pw.length;j++){if(lo.indexOf(pw[j])>-1){L.pain=t.trim().slice(0,80);break;}}}}
async function go(t){if(!t.trim())return;CT.value='';CT.style.height='auto';am('u',t);xl(t);H.push({role:'user',content:t});var tv=ty();SB.disabled=true;
try{
var r=await fetch(W,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model:'claude-sonnet-4-20250514',max_tokens:400,system:SY,messages:H})});
var data=await r.json();tv.remove();
var rep=(data.content&&data.content[0]&&data.content[0].text)||'Sorry, try again.';
H.push({role:'assistant',content:rep});
if(rep.indexOf('[SHOW_CTA]')>-1){var cl=rep.replace('[SHOW_CTA]','').trim();if(cl)am('b',cl);setTimeout(cta,400);}
else{am('b',rep);var lo=rep.toLowerCase();
if(lo.indexOf('type of business')>-1||lo.indexOf('what kind')>-1)chips(['Restaurant','Field Service','Barbershop','Clinic','Trucking','Church','Local Business']);
else if(lo.indexOf('challenge')>-1||lo.indexOf('pain')>-1)chips(['Missing calls','Slow follow-up','Manual paperwork','No-shows','Dispatch chaos','Full automation']);
else if(lo.indexOf('book')>-1||lo.indexOf('schedule')>-1)chips(['Yes book a call','Tell me more']);
else chips([]);}
}catch(e){tv.remove();am('b','Connection issue. Call Marcus at (469) 216-5142');}
SB.disabled=false;CT.focus();}
function doSend(){go(CT.value);}
window.doSend=doSend;
CT.addEventListener('input',function(){this.style.height='auto';this.style.height=Math.min(this.scrollHeight,100)+'px';});
CT.addEventListener('keydown',function(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();doSend();}});
setTimeout(function(){var t=ty();setTimeout(function(){t.remove();am('b',"Hey! I'm Marcus's AI assistant.\n\nI help businesses find the right AI automations to save time and money. Takes 2 minutes.\n\nWhat type of business do you run?");chips(['Restaurant','Field Service','Barbershop','Clinic','Trucking','Church','Local Business']);},1200);},600);
})();
</script>