Created
February 5, 2026 22:09
-
-
Save justinabrahms/817e725816782f5ffe42dd737684d319 to your computer and use it in GitHub Desktop.
Autoship Support Slack Bot Demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Autoship Bot - DM Flow</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: #1a1d21; | |
| color: #d1d2d3; | |
| line-height: 1.46668; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .slack-container { | |
| display: flex; | |
| height: 100vh; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: 260px; | |
| background: #19171d; | |
| border-right: 1px solid #35373b; | |
| } | |
| .workspace-header { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid #35373b; | |
| } | |
| .workspace-name { | |
| font-weight: 900; | |
| font-size: 18px; | |
| color: #fff; | |
| } | |
| .section-header { | |
| padding: 12px 16px 4px; | |
| font-size: 13px; | |
| color: #8e8e8e; | |
| } | |
| .dm-item { | |
| padding: 6px 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| } | |
| .dm-item:hover { | |
| background: #27242c; | |
| } | |
| .dm-item.active { | |
| background: #1164a3; | |
| } | |
| .dm-avatar { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 4px; | |
| } | |
| .dm-name { | |
| font-size: 15px; | |
| } | |
| .online-dot { | |
| width: 8px; | |
| height: 8px; | |
| background: #2eb67d; | |
| border-radius: 50%; | |
| margin-left: auto; | |
| } | |
| /* Main area */ | |
| .main-area { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| background: #1a1d21; | |
| } | |
| .dm-header { | |
| padding: 12px 20px; | |
| border-bottom: 1px solid #35373b; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .dm-header-avatar { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 4px; | |
| } | |
| .dm-header-name { | |
| font-weight: 700; | |
| font-size: 16px; | |
| color: #fff; | |
| } | |
| .dm-header-status { | |
| font-size: 13px; | |
| color: #8e8e8e; | |
| } | |
| .messages-container { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| } | |
| /* Message styles */ | |
| .message { | |
| display: flex; | |
| gap: 8px; | |
| padding: 8px 0; | |
| } | |
| .message-avatar { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 4px; | |
| flex-shrink: 0; | |
| } | |
| .message-content { | |
| flex: 1; | |
| } | |
| .message-header { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 8px; | |
| margin-bottom: 4px; | |
| } | |
| .sender-name { | |
| font-weight: 700; | |
| color: #d1d2d3; | |
| font-size: 15px; | |
| } | |
| .app-badge { | |
| background: rgba(29, 155, 209, 0.15); | |
| color: #1d9bd1; | |
| font-size: 10px; | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| font-weight: 700; | |
| } | |
| .timestamp { | |
| font-size: 12px; | |
| color: #616061; | |
| } | |
| .message-text { | |
| font-size: 15px; | |
| color: #d1d2d3; | |
| } | |
| /* Thread indicator */ | |
| .thread-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 8px; | |
| padding: 8px; | |
| background: #222529; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 13px; | |
| color: #1d9bd1; | |
| } | |
| .thread-indicator:hover { | |
| background: #2a2d31; | |
| } | |
| .thread-parent { | |
| cursor: pointer; | |
| } | |
| .thread-parent:hover { | |
| background: #222529; | |
| } | |
| .thread-parent.active { | |
| background: #222529; | |
| margin: 0 -20px; | |
| padding: 8px 20px; | |
| } | |
| .thread-parent.active .thread-indicator { | |
| background: #36c5f0; | |
| color: #1d1c1d; | |
| } | |
| .thread-content { | |
| display: none; | |
| } | |
| .thread-content.active { | |
| display: block; | |
| } | |
| .thread-avatars { | |
| display: flex; | |
| } | |
| .thread-avatars img { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 4px; | |
| border: 2px solid #222529; | |
| margin-left: -8px; | |
| } | |
| .thread-avatars img:first-child { | |
| margin-left: 0; | |
| } | |
| /* Thread panel */ | |
| .thread-panel { | |
| width: 420px; | |
| background: #222529; | |
| border-left: 1px solid #35373b; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .thread-header { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid #35373b; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .thread-title { | |
| font-weight: 700; | |
| font-size: 15px; | |
| color: #fff; | |
| } | |
| .thread-close { | |
| color: #8e8e8e; | |
| cursor: pointer; | |
| font-size: 18px; | |
| } | |
| .thread-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 16px; | |
| } | |
| .thread-input-area { | |
| padding: 12px; | |
| border-top: 1px solid #35373b; | |
| } | |
| .thread-input { | |
| width: 100%; | |
| background: #1a1d21; | |
| border: 1px solid #35373b; | |
| border-radius: 8px; | |
| padding: 10px 12px; | |
| color: #d1d2d3; | |
| font-size: 14px; | |
| font-family: inherit; | |
| resize: none; | |
| } | |
| .thread-input:focus { | |
| outline: none; | |
| border-color: #1164a3; | |
| } | |
| /* Block Kit in thread */ | |
| .block-divider { | |
| height: 1px; | |
| background: #35373b; | |
| margin: 12px 0; | |
| } | |
| .block-fields { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4px 16px; | |
| margin: 8px 0; | |
| } | |
| .field-label { | |
| font-weight: 700; | |
| font-size: 14px; | |
| } | |
| .field-value { | |
| font-size: 14px; | |
| } | |
| .attachment { | |
| border-left: 4px solid #2eb67d; | |
| padding-left: 12px; | |
| margin: 8px 0; | |
| } | |
| .attachment.warning { | |
| border-left-color: #ecb22e; | |
| } | |
| .attachment.info { | |
| border-left-color: #36c5f0; | |
| } | |
| .attachment-title { | |
| font-weight: 700; | |
| font-size: 14px; | |
| margin-bottom: 4px; | |
| } | |
| .block-context { | |
| font-size: 12px; | |
| color: #9a9b9d; | |
| margin: 4px 0; | |
| } | |
| .block-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin: 12px 0; | |
| } | |
| .slack-btn { | |
| padding: 6px 10px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| border: 1px solid transparent; | |
| font-family: inherit; | |
| } | |
| .slack-btn-primary { | |
| background: #007a5a; | |
| color: #fff; | |
| } | |
| .slack-btn-default { | |
| background: #fff; | |
| color: #1d1c1d; | |
| border-color: #1d1c1d; | |
| } | |
| .slack-btn-danger { | |
| background: #e01e5a; | |
| color: #fff; | |
| } | |
| .slack-select { | |
| padding: 6px 24px 6px 10px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| border: 1px solid #1d1c1d; | |
| background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%231d1c1d' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat right 8px center; | |
| color: #1d1c1d; | |
| font-family: inherit; | |
| appearance: none; | |
| } | |
| .mrkdwn-bold { | |
| font-weight: 700; | |
| } | |
| .mrkdwn-code { | |
| background: #1d1c1d; | |
| padding: 2px 4px; | |
| border-radius: 3px; | |
| font-family: Monaco, Menlo, monospace; | |
| font-size: 12px; | |
| color: #e01e5a; | |
| } | |
| /* Slash command styling */ | |
| .slash-command { | |
| background: #f8f8f8; | |
| color: #e01e5a; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-family: Monaco, Menlo, monospace; | |
| font-size: 14px; | |
| } | |
| /* Input prompt from bot */ | |
| .input-prompt { | |
| background: #2a2d31; | |
| border-radius: 8px; | |
| padding: 12px; | |
| margin: 8px 0; | |
| } | |
| .input-prompt label { | |
| display: block; | |
| font-size: 13px; | |
| color: #d1d2d3; | |
| margin-bottom: 8px; | |
| } | |
| .input-prompt input { | |
| width: 100%; | |
| padding: 8px 10px; | |
| border-radius: 4px; | |
| border: 1px solid #565856; | |
| background: #1a1d21; | |
| color: #fff; | |
| font-size: 14px; | |
| font-family: inherit; | |
| } | |
| .main-input-area { | |
| padding: 16px 20px; | |
| border-top: 1px solid #35373b; | |
| } | |
| .main-input { | |
| width: 100%; | |
| background: #222529; | |
| border: 1px solid #35373b; | |
| border-radius: 8px; | |
| padding: 12px; | |
| color: #d1d2d3; | |
| font-size: 15px; | |
| font-family: inherit; | |
| resize: none; | |
| } | |
| .main-input:focus { | |
| outline: none; | |
| border-color: #1164a3; | |
| } | |
| .product-line { | |
| font-size: 13px; | |
| padding: 4px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slack-container"> | |
| <!-- Sidebar --> | |
| <div class="sidebar"> | |
| <div class="workspace-header"> | |
| <div class="workspace-name">Thrive Support</div> | |
| </div> | |
| <div class="section-header">Direct Messages</div> | |
| <div class="dm-item active"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="dm-avatar" alt=""> | |
| <span class="dm-name">Autoship Bot</span> | |
| <span class="online-dot"></span> | |
| </div> | |
| <div class="dm-item"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=marco" class="dm-avatar" alt=""> | |
| <span class="dm-name">Marco S.</span> | |
| </div> | |
| <div class="dm-item"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=lisa" class="dm-avatar" alt=""> | |
| <span class="dm-name">Lisa T.</span> | |
| </div> | |
| </div> | |
| <!-- Main DM area --> | |
| <div class="main-area"> | |
| <div class="dm-header"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="dm-header-avatar" alt=""> | |
| <div> | |
| <div class="dm-header-name">Autoship Bot</div> | |
| <div class="dm-header-status">Online</div> | |
| </div> | |
| </div> | |
| <div class="messages-container"> | |
| <!-- Old thread from earlier --> | |
| <div class="message thread-parent" data-thread="james"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">Yesterday at 3:45 PM</span> | |
| </div> | |
| <div class="message-text"> | |
| <span class="mrkdwn-bold">James Cooper</span> · (555) 987-6543 | |
| </div> | |
| <div class="thread-indicator"> | |
| <div class="thread-avatars"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" alt=""> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" alt=""> | |
| </div> | |
| <span>4 replies</span> | |
| <span style="color: #8e8e8e;">Last reply yesterday</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Another old thread --> | |
| <div class="message thread-parent" data-thread="maria"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">Yesterday at 11:20 AM</span> | |
| </div> | |
| <div class="message-text"> | |
| <span class="mrkdwn-bold">Maria Garcia</span> · maria.g@gmail.com | |
| </div> | |
| <div class="thread-indicator"> | |
| <div class="thread-avatars"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" alt=""> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" alt=""> | |
| </div> | |
| <span>7 replies</span> | |
| <span style="color: #8e8e8e;">Last reply yesterday</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Current active thread parent --> | |
| <div class="message thread-parent active" data-thread="sarah" style="background: #222529; margin: 0 -20px; padding: 8px 20px;"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">2:34 PM</span> | |
| </div> | |
| <div class="message-text"> | |
| <span class="mrkdwn-bold">Sarah Mitchell</span> · (555) 123-4567 | |
| </div> | |
| <div class="thread-indicator" style="background: #36c5f0; color: #1d1c1d;"> | |
| <div class="thread-avatars"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" alt=""> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" alt=""> | |
| </div> | |
| <span style="font-weight: 700;">12 replies</span> | |
| <span>View thread →</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="main-input-area"> | |
| <textarea class="main-input" rows="1" placeholder="Message Autoship Bot (try /new-call)">/new-call</textarea> | |
| </div> | |
| </div> | |
| <!-- Thread panel --> | |
| <div class="thread-panel"> | |
| <div class="thread-header"> | |
| <span class="thread-title">Thread</span> | |
| <span class="thread-close">×</span> | |
| </div> | |
| <div class="thread-messages"> | |
| <!-- JAMES THREAD --> | |
| <div class="thread-content" data-thread="james"> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">Yesterday 3:45 PM</span> | |
| </div> | |
| <div class="message-text"> | |
| <span class="mrkdwn-bold">James Cooper</span> · (555) 987-6543 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="block-divider"></div> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">3:45 PM</span> | |
| </div> | |
| <div class="message-text"> | |
| <span class="slash-command">/new-call</span> (555) 987-6543 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">3:45 PM</span> | |
| </div> | |
| <div class="attachment warning"> | |
| <div class="attachment-title">Member Found - Autoship Inactive</div> | |
| <div class="block-fields"> | |
| <div><span class="field-label">Name:</span> James Cooper</div> | |
| <div><span class="field-label">Since:</span> June 2021</div> | |
| <div><span class="field-label">Status:</span> <span style="color: #e01e5a;">Cancelled</span></div> | |
| <div><span class="field-label">Cancelled:</span> Jan 5, 2025</div> | |
| </div> | |
| </div> | |
| <div class="block-actions"> | |
| <button class="slack-btn slack-btn-primary">Reactivate Autoship</button> | |
| <button class="slack-btn slack-btn-default">View Order History</button> | |
| <button class="slack-btn slack-btn-danger" style="margin-left: auto;">End Call</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">3:47 PM</span> | |
| </div> | |
| <div class="message-text"> | |
| Customer just wanted to check if his autoship was still active. Informed him it was cancelled in January. He said that's fine, doesn't want to reactivate. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">3:47 PM</span> | |
| </div> | |
| <div class="message-text" style="color: #9a9b9d; font-style: italic;"> | |
| Clicked: End Call | |
| </div> | |
| </div> | |
| </div> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">3:47 PM</span> | |
| </div> | |
| <div class="attachment info"> | |
| <div class="attachment-title">Call Summary</div> | |
| <div style="font-size: 13px;"> | |
| <span class="mrkdwn-bold">Actions taken:</span> None<br><br> | |
| <span class="mrkdwn-bold">Duration:</span> 2 min | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MARIA THREAD --> | |
| <div class="thread-content" data-thread="maria"> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">Yesterday 11:20 AM</span> | |
| </div> | |
| <div class="message-text"> | |
| <span class="mrkdwn-bold">Maria Garcia</span> · maria.g@gmail.com | |
| </div> | |
| </div> | |
| </div> | |
| <div class="block-divider"></div> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">11:20 AM</span> | |
| </div> | |
| <div class="message-text"> | |
| <span class="slash-command">/new-call</span> maria.g@gmail.com | |
| </div> | |
| </div> | |
| </div> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">11:20 AM</span> | |
| </div> | |
| <div class="attachment"> | |
| <div class="attachment-title">Member Found</div> | |
| <div class="block-fields"> | |
| <div><span class="field-label">Name:</span> Maria Garcia</div> | |
| <div><span class="field-label">Since:</span> Sept 2023</div> | |
| <div><span class="field-label">Status:</span> <span style="color: #2eb67d;">Active</span></div> | |
| <div><span class="field-label">Frequency:</span> Every 2 weeks</div> | |
| <div><span class="field-label">Next Ship:</span> Feb 8, 2025</div> | |
| <div><span class="field-label">Items:</span> 8 products</div> | |
| </div> | |
| </div> | |
| <div class="block-divider"></div> | |
| <div style="font-size: 13px; margin-bottom: 4px;"><span class="mrkdwn-bold">Current Items</span></div> | |
| <div class="product-line">• Organic Eggs, 12ct <span class="mrkdwn-code">334455</span> × 2 · Fresh</div> | |
| <div class="product-line">• Grass-Fed Ground Beef <span class="mrkdwn-code">556677</span> × 1 · Frozen</div> | |
| <div class="product-line">• Avocado Oil, 16oz <span class="mrkdwn-code">778899</span> × 1 · Pantry</div> | |
| <div class="product-line">• +5 more items...</div> | |
| <div class="block-actions"> | |
| <button class="slack-btn slack-btn-primary">Skip Next</button> | |
| <button class="slack-btn slack-btn-default">Ship Now</button> | |
| <button class="slack-btn slack-btn-default">Reschedule</button> | |
| <select class="slack-select"> | |
| <option>More...</option> | |
| </select> | |
| <button class="slack-btn slack-btn-danger" style="margin-left: auto;">End Call</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">11:22 AM</span> | |
| </div> | |
| <div class="message-text"> | |
| Customer wants to increase frequency to weekly | |
| </div> | |
| </div> | |
| </div> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">11:22 AM</span> | |
| </div> | |
| <div class="message-text"> | |
| <span class="slash-command">/change-frequency</span> weekly | |
| </div> | |
| </div> | |
| </div> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">11:22 AM</span> | |
| </div> | |
| <div class="attachment" style="border-left-color: #2eb67d;"> | |
| <div class="attachment-title">✓ Frequency Updated</div> | |
| <div style="font-size: 13px;">Changed from <span class="mrkdwn-bold">every 2 weeks</span> to <span class="mrkdwn-bold">weekly</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">11:24 AM</span> | |
| </div> | |
| <div class="message-text" style="color: #9a9b9d; font-style: italic;"> | |
| Clicked: End Call | |
| </div> | |
| </div> | |
| </div> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">11:24 AM</span> | |
| </div> | |
| <div class="attachment info"> | |
| <div class="attachment-title">Call Summary</div> | |
| <div style="font-size: 13px;"> | |
| <span class="mrkdwn-bold">Actions taken:</span><br> | |
| • Changed frequency to weekly<br><br> | |
| <span class="mrkdwn-bold">Duration:</span> 4 min | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SARAH THREAD --> | |
| <div class="thread-content active" data-thread="sarah"> | |
| <!-- Thread parent --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">2:34 PM</span> | |
| </div> | |
| <div class="message-text"> | |
| <span class="mrkdwn-bold">Sarah Mitchell</span> · (555) 123-4567 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="block-divider"></div> | |
| <!-- Agent triggered /new-call --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">2:34 PM</span> | |
| </div> | |
| <div class="message-text"> | |
| <span class="slash-command">/new-call</span> (555) 123-4567 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bot responds with member info --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">2:34 PM</span> | |
| </div> | |
| <div class="attachment"> | |
| <div class="attachment-title">Member Found</div> | |
| <div class="block-fields"> | |
| <div><span class="field-label">Name:</span> Sarah Mitchell</div> | |
| <div><span class="field-label">Since:</span> March 2022</div> | |
| <div><span class="field-label">Status:</span> <span style="color: #2eb67d;">Active</span></div> | |
| <div><span class="field-label">Frequency:</span> Every 4 weeks</div> | |
| <div><span class="field-label">Next Ship:</span> Feb 15, 2025</div> | |
| <div><span class="field-label">Items:</span> 5 products</div> | |
| </div> | |
| </div> | |
| <div class="block-divider"></div> | |
| <div style="font-size: 13px; margin-bottom: 4px;"><span class="mrkdwn-bold">Current Items</span></div> | |
| <div class="product-line">• Organic Almond Butter, 16oz <span class="mrkdwn-code">847563</span> × 2 · Pantry</div> | |
| <div class="product-line">• Organic Baby Spinach, 5oz <span class="mrkdwn-code">293847</span> × 3 · Fresh</div> | |
| <div class="product-line">• Free Range Chicken Breast <span class="mrkdwn-code">938271</span> × 2 · Frozen</div> | |
| <div class="product-line">• Frozen Blueberries, 10oz <span class="mrkdwn-code">102938</span> × 1 · Frozen</div> | |
| <div class="product-line">• Oat Milk, Original, 32oz <span class="mrkdwn-code">847291</span> × 2 · Pantry</div> | |
| <div class="block-divider"></div> | |
| <div style="font-size: 13px; margin-bottom: 4px;"><span class="mrkdwn-bold">Recent Activity</span></div> | |
| <div class="block-context">Feb 3 — Added Oat Milk (qty: 2)</div> | |
| <div class="block-context">Jan 28 — Changed frequency 2wk → 4wk</div> | |
| <div class="block-context">Jan 15 — Order shipped · $72.30</div> | |
| <div class="block-actions"> | |
| <button class="slack-btn slack-btn-primary">Skip Next</button> | |
| <button class="slack-btn slack-btn-default">Ship Now</button> | |
| <button class="slack-btn slack-btn-default">Reschedule</button> | |
| <select class="slack-select"> | |
| <option>More...</option> | |
| </select> | |
| <button class="slack-btn slack-btn-danger" style="margin-left: auto;">End Call</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="block-divider"></div> | |
| <!-- Agent asks about removing item --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">2:35 PM</span> | |
| </div> | |
| <div class="message-text"> | |
| Customer wants to skip next month and remove almond butter | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Agent clicks Skip --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">2:35 PM</span> | |
| </div> | |
| <div class="message-text" style="color: #9a9b9d; font-style: italic;"> | |
| Clicked: Skip Next | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bot confirms skip --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">2:35 PM</span> | |
| </div> | |
| <div class="attachment" style="border-left-color: #2eb67d;"> | |
| <div class="attachment-title">✓ Shipment Skipped</div> | |
| <div style="font-size: 13px;">Feb 15 skipped. Next shipment: <span class="mrkdwn-bold">Mar 15, 2025</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Agent removes item --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">2:36 PM</span> | |
| </div> | |
| <div class="message-text"> | |
| <span class="slash-command">/remove-item</span> 847563 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bot confirms removal --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">2:36 PM</span> | |
| </div> | |
| <div class="attachment" style="border-left-color: #2eb67d;"> | |
| <div class="attachment-title">✓ Item Removed</div> | |
| <div style="font-size: 13px;">Removed <span class="mrkdwn-bold">Organic Almond Butter, 16oz</span> from autoship</div> | |
| </div> | |
| <div class="block-context">4 items remaining · Est. $62.15</div> | |
| </div> | |
| </div> | |
| <!-- Agent asks about a refund --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">2:37 PM</span> | |
| </div> | |
| <div class="message-text"> | |
| Customer also asking about a partial refund on last order - some items arrived damaged | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bot shows order and links to Magento --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">2:37 PM</span> | |
| </div> | |
| <div class="attachment warning"> | |
| <div class="attachment-title">Last Order: #100284756</div> | |
| <div style="font-size: 13px;"> | |
| <span class="mrkdwn-bold">Shipped:</span> Jan 15, 2025<br> | |
| <span class="mrkdwn-bold">Total:</span> $72.30<br> | |
| <span class="mrkdwn-bold">Items:</span> 4 products | |
| </div> | |
| </div> | |
| <div style="font-size: 13px; margin: 8px 0; padding: 10px; background: #2a2d31; border-radius: 6px;"> | |
| <div style="margin-bottom: 8px;">Refunds require Magento admin:</div> | |
| <a href="https://admin.thrivemarket.com/sales/order/view/order_id/100284756" | |
| style="color: #1d9bd1; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;"> | |
| <span style="font-size: 16px;">↗</span> | |
| Open Order #100284756 in Magento | |
| </a> | |
| </div> | |
| <div class="block-context">Tip: Use "Damaged Item" reason code for faster approval</div> | |
| </div> | |
| </div> | |
| <!-- Agent confirms refund done --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">2:38 PM</span> | |
| </div> | |
| <div class="message-text"> | |
| Processed $12.50 refund for damaged spinach in Magento | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Agent closes call --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=julie-happy&mood=happy" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Julie</span> | |
| <span class="timestamp">2:39 PM</span> | |
| </div> | |
| <div class="message-text" style="color: #9a9b9d; font-style: italic;"> | |
| Clicked: End Call | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bot summary --> | |
| <div class="message"> | |
| <img src="https://api.dicebear.com/7.x/bottts/svg?seed=autoship&backgroundColor=e01e5a" class="message-avatar" alt=""> | |
| <div class="message-content"> | |
| <div class="message-header"> | |
| <span class="sender-name">Autoship Bot</span> | |
| <span class="app-badge">APP</span> | |
| <span class="timestamp">2:39 PM</span> | |
| </div> | |
| <div class="attachment info"> | |
| <div class="attachment-title">Call Summary</div> | |
| <div style="font-size: 13px;"> | |
| <span class="mrkdwn-bold">Actions taken:</span><br> | |
| • Skipped Feb 15 shipment<br> | |
| • Removed Organic Almond Butter (SKU 847563)<br> | |
| • Refund $12.50 processed (<a href="https://admin.thrivemarket.com/sales/order/view/order_id/100284756" style="color: #1d9bd1;">via Magento</a>)<br><br> | |
| <span class="mrkdwn-bold">Duration:</span> 5 min | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div><!-- end sarah thread --> | |
| </div> | |
| <div class="thread-input-area"> | |
| <textarea class="thread-input" rows="1" placeholder="Reply..."></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.querySelectorAll('.thread-parent').forEach(parent => { | |
| parent.addEventListener('click', () => { | |
| const threadId = parent.dataset.thread; | |
| // Update active state on thread parents | |
| document.querySelectorAll('.thread-parent').forEach(p => { | |
| p.classList.remove('active'); | |
| p.style.background = ''; | |
| p.style.margin = ''; | |
| p.style.padding = ''; | |
| const indicator = p.querySelector('.thread-indicator'); | |
| if (indicator) { | |
| indicator.style.background = ''; | |
| indicator.style.color = ''; | |
| } | |
| }); | |
| parent.classList.add('active'); | |
| parent.style.background = '#222529'; | |
| parent.style.margin = '0 -20px'; | |
| parent.style.padding = '8px 20px'; | |
| const activeIndicator = parent.querySelector('.thread-indicator'); | |
| if (activeIndicator) { | |
| activeIndicator.style.background = '#36c5f0'; | |
| activeIndicator.style.color = '#1d1c1d'; | |
| } | |
| // Show the corresponding thread content | |
| document.querySelectorAll('.thread-content').forEach(content => { | |
| content.classList.remove('active'); | |
| }); | |
| const threadContent = document.querySelector(`.thread-content[data-thread="${threadId}"]`); | |
| if (threadContent) { | |
| threadContent.classList.add('active'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment