From 7954b0c49782486711e5cbaedfe8b34600023394 Mon Sep 17 00:00:00 2001
From: Jake Shore <jakeshore@Jakes-Mac-mini.local>
Date: Fri, 13 Feb 2026 20:54:42 -0500
Subject: [PATCH] Add rich app embeds in chat demo

---
 zendesk-v2/index.html | 114 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 107 insertions(+), 7 deletions(-)

diff --git a/zendesk-v2/index.html b/zendesk-v2/index.html
index 0d4668e..caa92f2 100644
--- a/zendesk-v2/index.html
+++ b/zendesk-v2/index.html
@@ -221,7 +221,7 @@
               </div>
 
               <!-- 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 -->
                 <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">
@@ -240,7 +240,7 @@
 
                 <!-- Chat panel -->
                 <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="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">
@@ -752,11 +752,111 @@
 
     // --- CHAT DEMO (scroll-triggered, like CRESync) ---
     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 = [
       { 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:'user', text:'Yes, 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:'Found 3 urgent enterprise tickets:', embed: ticketAppEmbed },
+      { type:'user', text:'Draft a reply for #4821 and escalate #4819 to tier 2' },
+      { type:'ai', text:'Done! Here\'s what I did:', embed: draftAppEmbed }
     ];
     function createMessage(msg){
       const div = document.createElement('div');
@@ -765,8 +865,8 @@
       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>`;
       } 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>` : '';
-        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>`;
+        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 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;
     }