jake/mcpengine-demos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add rich app embeds in chat demo

Browse Source
This commit is contained in:
Jake Shore 2026-02-13 20:54:42 -05:00
parent 0775ac6c26
commit 7954b0c497
1 changed files with 107 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
zendesk-v2/index.html
View File

@ -221,7 +221,7 @@
</div> </div>
<!-- App interface --> <!-- App interface -->
<div class="flex h-[280px] sm:h-[380px] md:h-[450px] lg:h-[550px]"> <div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
<!-- Sidebar --> <!-- Sidebar -->
<div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4"> <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400"> <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400">
@ -240,7 +240,7 @@
<!-- Chat panel --> <!-- Chat panel -->
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-hidden" id="chat-demo"></div> <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
<div class="p-2 sm:p-3 lg:p-4 border-t border-white/5"> <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
<div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4"> <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
<input type="text" placeholder="Ask about your Zendesk tickets..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0"> <input type="text" placeholder="Ask about your Zendesk tickets..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
@ -752,11 +752,111 @@
// --- CHAT DEMO (scroll-triggered, like CRESync) --- // --- CHAT DEMO (scroll-triggered, like CRESync) ---
const chatDemo = document.getElementById('chat-demo'); const chatDemo = document.getElementById('chat-demo');
const ticketAppEmbed = `
<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;">
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);">
<div style="display:flex;align-items:center;gap:8px;">
<div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div>
<span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Urgent Enterprise Tickets</span>
</div>
<span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">3 results</span>
</div>
<div style="padding:0;">
<div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.03)'" onmouseout="this.style.background='transparent'">
<div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;">
<span style="font-size:10px;font-weight:800;color:#ef4444;">!</span>
</div>
<div style="flex:1;min-width:0;">
<div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;">
<span style="font-size:12px;font-weight:600;color:#e4e4e7;">#4821</span>
<span style="font-size:10px;color:rgba(255,255,255,0.4);">Login Issue — SSO Failure</span>
</div>
<div style="display:flex;align-items:center;gap:6px;">
<span style="font-size:10px;color:rgba(255,255,255,0.3);">Sarah Chen · Acme Corp</span>
<span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">SLA 28m</span>
</div>
</div>
<span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Urgent</span>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.03)'" onmouseout="this.style.background='transparent'">
<div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;">
<span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span>
</div>
<div style="flex:1;min-width:0;">
<div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;">
<span style="font-size:12px;font-weight:600;color:#e4e4e7;">#4819</span>
<span style="font-size:10px;color:rgba(255,255,255,0.4);">API Rate Limiting</span>
</div>
<div style="display:flex;align-items:center;gap:6px;">
<span style="font-size:10px;color:rgba(255,255,255,0.3);">James Park · TechFlow Inc</span>
<span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">SLA 1h 12m</span>
</div>
</div>
<span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">High</span>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 14px;transition:background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.03)'" onmouseout="this.style.background='transparent'">
<div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;">
<span style="font-size:10px;font-weight:800;color:#ef4444;">!</span>
</div>
<div style="flex:1;min-width:0;">
<div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;">
<span style="font-size:12px;font-weight:600;color:#e4e4e7;">#4815</span>
<span style="font-size:10px;color:rgba(255,255,255,0.4);">Data Export Timeout</span>
</div>
<div style="display:flex;align-items:center;gap:6px;">
<span style="font-size:10px;color:rgba(255,255,255,0.3);">Maria Lopez · GlobalShip</span>
<span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">SLA 45m</span>
</div>
</div>
<span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Urgent</span>
</div>
</div>
<div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;">
<span style="font-size:10px;color:rgba(255,255,255,0.25);">Ticket #4821 is closest to SLA breach</span>
<span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in Zendesk →</span>
</div>
</div>`;
const draftAppEmbed = `
<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;">
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);">
<div style="display:flex;align-items:center;gap:8px;">
<div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div>
<span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Actions Completed</span>
</div>
<span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 of 2</span>
</div>
<div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
<div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;">
<span style="font-size:11px;color:#22c55e;">✓</span>
</div>
<span style="font-size:12px;font-weight:600;color:#e4e4e7;">Reply drafted for #4821</span>
</div>
<div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;font-style:italic;">
"Hi Sarah, I've looked into the SSO failure you reported. Our team identified a certificate rotation issue affecting your IdP connection. I've refreshed the SAML metadata on our end — could you try logging in again? If the issue persists..."
</div>
</div>
<div style="padding:10px 14px;">
<div style="display:flex;align-items:center;gap:8px;">
<div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;">
<span style="font-size:11px;color:#22c55e;">✓</span>
</div>
<span style="font-size:12px;font-weight:600;color:#e4e4e7;">#4819 escalated to Tier 2</span>
</div>
<div style="margin-top:6px;margin-left:28px;display:flex;gap:6px;flex-wrap:wrap;">
<span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Tier 2</span>
<span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Context attached</span>
<span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Priority: High</span>
</div>
</div>
</div>`;
const messages = [ const messages = [
{ type:'user', text:'Show me all urgent tickets from enterprise customers' }, { type:'user', text:'Show me all urgent tickets from enterprise customers' },
{ type:'ai', text:'Found 3 urgent enterprise tickets. Ticket #4821 (Login Issue, Sarah Chen) is closest to SLA breach — 28 minutes remaining. Want me to draft a response?', action:'Zendesk: search_tickets → 3 results' }, { type:'ai', text:'Found 3 urgent enterprise tickets:', embed: ticketAppEmbed },
{ type:'user', text:'Yes, draft a reply for #4821 and escalate #4819 to tier 2' }, { type:'user', text:'Draft a reply for #4821 and escalate #4819 to tier 2' },
{ type:'ai', text:'Done! Reply drafted for #4821 using their account history and knowledge base. #4819 escalated to Tier 2 with full context attached.', action:'2 actions completed → View in Zendesk' } { type:'ai', text:'Done! Here\'s what I did:', embed: draftAppEmbed }
]; ];
function createMessage(msg){ function createMessage(msg){
const div = document.createElement('div'); const div = document.createElement('div');
@ -765,8 +865,8 @@
if(msg.type==='user'){ if(msg.type==='user'){
div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`; div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
} else { } else {
const actionHtml = msg.action ? `<div class="glass rounded-lg sm:rounded-xl px-2 sm:px-3 lg:px-4 py-1.5 sm:py-2 flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-brand-400 mt-1.5 sm:mt-2"><i data-lucide="check-circle" class="w-3 h-3 sm:w-4 sm:h-4"></i><span>${msg.action}</span></div>` : ''; const embedHtml = msg.embed || '';
div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-md"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p></div>${actionHtml}</div>`; div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
} }
return div; return div;
} }