Caller generation overhaul, Devon intern, frontend redesign
Caller system: structured JSON backgrounds, voice-personality matching (68 profiles), thematic inter-caller awareness, adaptive call shapes, show pacing, returning caller memory with relationships/arcs, post-call quality signals, 95 comedy writer entries. Devon the Intern: persistent show character with tool-calling LLM (web search, Wikipedia, headlines, webpage fetch), auto-monitoring, 6 API endpoints, full frontend UI. Frontend: wrap-up nudge button, caller info panel with shape/energy/emotion badges, keyboard shortcuts (1-0/H/W/M/D), pinned SFX, visual polish, Devon panel. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -12,6 +12,7 @@
|
||||
--text-muted: #9a8b78;
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
--transition: 0.2s ease;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -169,6 +170,7 @@ section {
|
||||
padding: 16px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid rgba(232, 121, 29, 0.08);
|
||||
transition: border-color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
section h2 {
|
||||
@@ -197,6 +199,30 @@ section h2 {
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.energy-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.shape-badge {
|
||||
font-size: 0.6rem;
|
||||
background: rgba(232, 121, 29, 0.25);
|
||||
color: var(--accent);
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.caller-btn:hover {
|
||||
@@ -217,8 +243,15 @@ section h2 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* Call action buttons row */
|
||||
.call-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.hangup-btn {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
background: var(--accent-red);
|
||||
color: white;
|
||||
border: none;
|
||||
@@ -229,6 +262,103 @@ section h2 {
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.wrapup-btn {
|
||||
flex: 1;
|
||||
background: #7a6020;
|
||||
color: #f0d060;
|
||||
border: 2px solid #d4a030;
|
||||
padding: 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.wrapup-btn:hover:not(:disabled) {
|
||||
background: #d4a030;
|
||||
color: #1a1209;
|
||||
}
|
||||
|
||||
.wrapup-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.wrapup-btn.active {
|
||||
background: #d4a030;
|
||||
color: #1a1209;
|
||||
animation: wrapup-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes wrapup-pulse {
|
||||
0%, 100% { box-shadow: 0 0 8px rgba(212, 160, 48, 0.4); }
|
||||
50% { box-shadow: 0 0 16px rgba(212, 160, 48, 0.8); }
|
||||
}
|
||||
|
||||
/* Caller info panel */
|
||||
.caller-info-panel {
|
||||
background: var(--bg-light);
|
||||
border: 1px solid rgba(232, 121, 29, 0.15);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 10px 12px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.caller-info-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.info-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-badge.shape {
|
||||
background: rgba(232, 121, 29, 0.2);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.info-badge.energy {
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.info-badge.emotion {
|
||||
background: rgba(154, 139, 120, 0.2);
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.caller-signature {
|
||||
font-size: 0.8rem;
|
||||
color: var(--accent);
|
||||
margin-bottom: 4px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.caller-situation {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.caller-background-full {
|
||||
margin-top: 8px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.caller-background-full summary {
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.hangup-btn:hover {
|
||||
background: #e03030;
|
||||
}
|
||||
@@ -399,10 +529,11 @@ section h2 {
|
||||
}
|
||||
}
|
||||
|
||||
.soundboard {
|
||||
.soundboard-pinned {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 8px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sound-btn {
|
||||
@@ -416,6 +547,43 @@ section h2 {
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.sound-btn.pinned {
|
||||
padding: 18px 12px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.sound-btn.pin-cheer {
|
||||
border-color: #5a8a3c;
|
||||
color: #7abf52;
|
||||
}
|
||||
.sound-btn.pin-cheer:hover {
|
||||
background: #5a8a3c;
|
||||
border-color: #5a8a3c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sound-btn.pin-applause {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
.sound-btn.pin-applause:hover {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sound-btn.pin-boo {
|
||||
border-color: var(--accent-red);
|
||||
color: #e85050;
|
||||
}
|
||||
.sound-btn.pin-boo:hover {
|
||||
background: var(--accent-red);
|
||||
border-color: var(--accent-red);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sound-btn:hover {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
@@ -426,6 +594,57 @@ section h2 {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.soundboard-toggle {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: 1px solid rgba(232, 121, 29, 0.1);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-muted);
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.soundboard-toggle:hover {
|
||||
color: var(--text);
|
||||
border-color: rgba(232, 121, 29, 0.3);
|
||||
}
|
||||
|
||||
.toggle-arrow {
|
||||
font-size: 0.7rem;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.soundboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Keyboard shortcut labels */
|
||||
.shortcut-label {
|
||||
display: inline-block;
|
||||
font-size: 0.6rem;
|
||||
color: var(--text-muted);
|
||||
background: rgba(232, 121, 29, 0.08);
|
||||
border: 1px solid rgba(232, 121, 29, 0.12);
|
||||
border-radius: 3px;
|
||||
padding: 1px 4px;
|
||||
margin-left: 6px;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
vertical-align: middle;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.caller-btn .shortcut-label {
|
||||
display: block;
|
||||
margin: 3px auto 0;
|
||||
margin-left: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
position: fixed;
|
||||
@@ -776,3 +995,213 @@ section h2 {
|
||||
.email-preview { font-size: 0.8rem; color: var(--text-muted); line-height: 1.3; }
|
||||
.email-item .vm-actions { margin-top: 0.25rem; }
|
||||
.email-body-expanded { margin-top: 0.4rem; padding: 0.5rem; background: rgba(232, 121, 29, 0.08); border-radius: var(--radius-sm); font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; max-height: 200px; overflow-y: auto; }
|
||||
|
||||
/* === Visual Polish === */
|
||||
|
||||
/* 1. Thinking pulse on chat when waiting for AI */
|
||||
@keyframes thinking-pulse {
|
||||
0%, 100% { border-color: rgba(232, 121, 29, 0.06); }
|
||||
50% { border-color: rgba(232, 121, 29, 0.3); }
|
||||
}
|
||||
|
||||
.chat-log.thinking {
|
||||
animation: thinking-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 3 & 5. Active call section glow + chat highlight when call is live */
|
||||
.callers-section.call-active {
|
||||
border-color: rgba(232, 121, 29, 0.35);
|
||||
box-shadow: 0 0 16px rgba(232, 121, 29, 0.1);
|
||||
}
|
||||
|
||||
.chat-section.call-active {
|
||||
border-color: rgba(232, 121, 29, 0.25);
|
||||
box-shadow: 0 0 12px rgba(232, 121, 29, 0.06);
|
||||
}
|
||||
|
||||
/* 7. Compact media row — Music / Ads / Idents side by side */
|
||||
.media-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.media-row {
|
||||
grid-template-columns: 1fr;
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
|
||||
.media-row .music-section {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.media-row .music-section h2 {
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.media-row .music-section select {
|
||||
padding: 6px 8px;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.media-row .music-controls {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.media-row .music-controls button {
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Devon (Intern) */
|
||||
.message.devon {
|
||||
border-left: 3px solid #4ab5a0;
|
||||
padding-left: 0.5rem;
|
||||
background: rgba(74, 181, 160, 0.06);
|
||||
}
|
||||
|
||||
.message.devon strong {
|
||||
color: #4ab5a0;
|
||||
}
|
||||
|
||||
.devon-bar {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.devon-ask-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.devon-input {
|
||||
flex: 1;
|
||||
padding: 8px 10px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
border: 1px solid rgba(74, 181, 160, 0.2);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.devon-input:focus {
|
||||
outline: none;
|
||||
border-color: #4ab5a0;
|
||||
}
|
||||
|
||||
.devon-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.devon-ask-btn {
|
||||
background: #4ab5a0;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 8px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
transition: background 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.devon-ask-btn:hover {
|
||||
background: #5cc5b0;
|
||||
}
|
||||
|
||||
.devon-interject-btn {
|
||||
background: var(--bg);
|
||||
color: #4ab5a0;
|
||||
border: 1px solid rgba(74, 181, 160, 0.25);
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.devon-interject-btn:hover {
|
||||
border-color: #4ab5a0;
|
||||
background: rgba(74, 181, 160, 0.1);
|
||||
}
|
||||
|
||||
.devon-monitor-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.devon-monitor-label input[type="checkbox"] {
|
||||
accent-color: #4ab5a0;
|
||||
}
|
||||
|
||||
.devon-suggestion {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(74, 181, 160, 0.08);
|
||||
border: 1px solid rgba(74, 181, 160, 0.25);
|
||||
border-radius: var(--radius-sm);
|
||||
animation: devon-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.devon-suggestion.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@keyframes devon-pulse {
|
||||
0%, 100% { border-color: rgba(74, 181, 160, 0.25); }
|
||||
50% { border-color: rgba(74, 181, 160, 0.6); }
|
||||
}
|
||||
|
||||
.devon-suggestion-text {
|
||||
flex: 1;
|
||||
font-size: 0.85rem;
|
||||
color: #4ab5a0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.devon-play-btn {
|
||||
background: #4ab5a0;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.devon-play-btn:hover {
|
||||
background: #5cc5b0;
|
||||
}
|
||||
|
||||
.devon-dismiss-btn {
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
border: 1px solid rgba(232, 121, 29, 0.15);
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.devon-dismiss-btn:hover {
|
||||
color: var(--text);
|
||||
border-color: rgba(232, 121, 29, 0.3);
|
||||
}
|
||||
|
||||
@@ -50,11 +50,23 @@
|
||||
</label>
|
||||
</div>
|
||||
<div id="call-status" class="call-status">No active call</div>
|
||||
<details id="caller-background-details" class="caller-background hidden">
|
||||
<summary>Caller Background</summary>
|
||||
<div id="caller-background"></div>
|
||||
</details>
|
||||
<button id="hangup-btn" class="hangup-btn" disabled>Hang Up</button>
|
||||
<div id="caller-info-panel" class="caller-info-panel hidden">
|
||||
<div class="caller-info-row">
|
||||
<span id="caller-shape-badge" class="info-badge shape"></span>
|
||||
<span id="caller-energy-badge" class="info-badge energy"></span>
|
||||
<span id="caller-emotion" class="info-badge emotion"></span>
|
||||
</div>
|
||||
<div id="caller-signature" class="caller-signature"></div>
|
||||
<div id="caller-situation" class="caller-situation"></div>
|
||||
<details id="caller-background-details" class="caller-background-full">
|
||||
<summary>Full Background</summary>
|
||||
<div id="caller-background"></div>
|
||||
</details>
|
||||
</div>
|
||||
<div class="call-actions">
|
||||
<button id="wrapup-btn" class="wrapup-btn" disabled>Wrap It Up <span class="shortcut-label">W</span></button>
|
||||
<button id="hangup-btn" class="hangup-btn" disabled>Hang Up <span class="shortcut-label">H</span></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call Queue -->
|
||||
@@ -84,6 +96,21 @@
|
||||
<!-- Chat -->
|
||||
<section class="chat-section">
|
||||
<div id="chat" class="chat-log"></div>
|
||||
<div class="devon-bar">
|
||||
<div class="devon-ask-row">
|
||||
<input type="text" id="devon-input" placeholder="Ask Devon..." class="devon-input">
|
||||
<button id="devon-ask-btn" class="devon-ask-btn">Ask <span class="shortcut-label">D</span></button>
|
||||
<button id="devon-interject-btn" class="devon-interject-btn" title="Devon interjects on current conversation">Interject</button>
|
||||
<label class="devon-monitor-label" title="Devon auto-monitors conversations">
|
||||
<input type="checkbox" id="devon-monitor" checked> Monitor
|
||||
</label>
|
||||
</div>
|
||||
<div id="devon-suggestion" class="devon-suggestion hidden">
|
||||
<span class="devon-suggestion-text">Devon has something</span>
|
||||
<button id="devon-play-btn" class="devon-play-btn">Play</button>
|
||||
<button id="devon-dismiss-btn" class="devon-dismiss-btn">Dismiss</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="talk-controls">
|
||||
<button id="talk-btn" class="talk-btn">Hold to Talk</button>
|
||||
<button id="type-btn" class="type-btn">Type</button>
|
||||
@@ -91,36 +118,36 @@
|
||||
<div id="status" class="status hidden"></div>
|
||||
</section>
|
||||
|
||||
<!-- Music -->
|
||||
<section class="music-section">
|
||||
<h2>Music</h2>
|
||||
<select id="track-select"></select>
|
||||
<div class="music-controls">
|
||||
<button id="play-btn">Play</button>
|
||||
<button id="stop-btn">Stop</button>
|
||||
<input type="range" id="volume" min="0" max="100" value="30">
|
||||
</div>
|
||||
</section>
|
||||
<!-- Music / Ads / Idents -->
|
||||
<div class="media-row">
|
||||
<section class="music-section">
|
||||
<h2>Music</h2>
|
||||
<select id="track-select"></select>
|
||||
<div class="music-controls">
|
||||
<button id="play-btn">Play <span class="shortcut-label">M</span></button>
|
||||
<button id="stop-btn">Stop</button>
|
||||
<input type="range" id="volume" min="0" max="100" value="30">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Ads -->
|
||||
<section class="music-section">
|
||||
<h2>Ads</h2>
|
||||
<select id="ad-select"></select>
|
||||
<div class="music-controls">
|
||||
<button id="ad-play-btn">Play Ad</button>
|
||||
<button id="ad-stop-btn">Stop</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="music-section">
|
||||
<h2>Ads</h2>
|
||||
<select id="ad-select"></select>
|
||||
<div class="music-controls">
|
||||
<button id="ad-play-btn">Play Ad</button>
|
||||
<button id="ad-stop-btn">Stop</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Idents -->
|
||||
<section class="music-section">
|
||||
<h2>Idents</h2>
|
||||
<select id="ident-select"></select>
|
||||
<div class="music-controls">
|
||||
<button id="ident-play-btn">Play Ident</button>
|
||||
<button id="ident-stop-btn">Stop</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="music-section">
|
||||
<h2>Idents</h2>
|
||||
<select id="ident-select"></select>
|
||||
<div class="music-controls">
|
||||
<button id="ident-play-btn">Play Ident</button>
|
||||
<button id="ident-stop-btn">Stop</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Sound Effects -->
|
||||
<section class="sounds-section">
|
||||
@@ -251,6 +278,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/app.js?v=18"></script>
|
||||
<script src="/js/app.js?v=20"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -14,6 +14,8 @@ let lastLogCount = 0;
|
||||
// Track lists
|
||||
let tracks = [];
|
||||
let sounds = [];
|
||||
let isMusicPlaying = false;
|
||||
let soundboardExpanded = false;
|
||||
|
||||
|
||||
// --- Helpers ---
|
||||
@@ -165,6 +167,49 @@ function initEventListeners() {
|
||||
stopRecording();
|
||||
});
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', e => {
|
||||
if (_isTyping()) return;
|
||||
// Don't fire shortcuts when a modal is open (except Escape to close it)
|
||||
const modalOpen = document.querySelector('.modal:not(.hidden)');
|
||||
if (e.key === 'Escape') {
|
||||
if (modalOpen) {
|
||||
modalOpen.classList.add('hidden');
|
||||
e.preventDefault();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (modalOpen) return;
|
||||
|
||||
const key = e.key.toLowerCase();
|
||||
// 1-9, 0: Start call with caller in that slot
|
||||
if (/^[0-9]$/.test(key)) {
|
||||
e.preventDefault();
|
||||
const idx = key === '0' ? 9 : parseInt(key) - 1;
|
||||
const btns = document.querySelectorAll('.caller-btn');
|
||||
if (btns[idx]) btns[idx].click();
|
||||
return;
|
||||
}
|
||||
switch (key) {
|
||||
case 'h':
|
||||
e.preventDefault();
|
||||
hangup();
|
||||
break;
|
||||
case 'w':
|
||||
e.preventDefault();
|
||||
wrapUp();
|
||||
break;
|
||||
case 'm':
|
||||
e.preventDefault();
|
||||
toggleMusic();
|
||||
break;
|
||||
case 'd':
|
||||
e.preventDefault();
|
||||
document.getElementById('devon-input')?.focus();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Type button
|
||||
document.getElementById('type-btn')?.addEventListener('click', () => {
|
||||
document.getElementById('type-modal')?.classList.remove('hidden');
|
||||
@@ -194,6 +239,31 @@ function initEventListeners() {
|
||||
document.getElementById('ident-play-btn')?.addEventListener('click', playIdent);
|
||||
document.getElementById('ident-stop-btn')?.addEventListener('click', stopIdent);
|
||||
|
||||
// Devon (Intern)
|
||||
document.getElementById('devon-ask-btn')?.addEventListener('click', () => {
|
||||
const input = document.getElementById('devon-input');
|
||||
if (input?.value.trim()) {
|
||||
askDevon(input.value.trim());
|
||||
input.value = '';
|
||||
}
|
||||
});
|
||||
document.getElementById('devon-input')?.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
const input = e.target;
|
||||
if (input.value.trim()) {
|
||||
askDevon(input.value.trim());
|
||||
input.value = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
document.getElementById('devon-interject-btn')?.addEventListener('click', interjectDevon);
|
||||
document.getElementById('devon-monitor')?.addEventListener('change', e => {
|
||||
toggleInternMonitor(e.target.checked);
|
||||
});
|
||||
document.getElementById('devon-play-btn')?.addEventListener('click', playDevonSuggestion);
|
||||
document.getElementById('devon-dismiss-btn')?.addEventListener('click', dismissDevonSuggestion);
|
||||
|
||||
// Settings
|
||||
document.getElementById('settings-btn')?.addEventListener('click', async () => {
|
||||
document.getElementById('settings-modal')?.classList.remove('hidden');
|
||||
@@ -209,6 +279,9 @@ function initEventListeners() {
|
||||
});
|
||||
document.getElementById('refresh-ollama')?.addEventListener('click', refreshOllamaModels);
|
||||
|
||||
// Wrap-up button
|
||||
document.getElementById('wrapup-btn')?.addEventListener('click', wrapUp);
|
||||
|
||||
// Real caller hangup
|
||||
document.getElementById('hangup-real-btn')?.addEventListener('click', async () => {
|
||||
await fetch('/api/hangup/real', { method: 'POST' });
|
||||
@@ -413,12 +486,34 @@ async function loadCallers() {
|
||||
if (!grid) return;
|
||||
grid.innerHTML = '';
|
||||
|
||||
data.callers.forEach(caller => {
|
||||
data.callers.forEach((caller, idx) => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'caller-btn';
|
||||
if (caller.returning) btn.classList.add('returning');
|
||||
btn.textContent = caller.returning ? `\u2605 ${caller.name}` : caller.name;
|
||||
btn.dataset.key = caller.key;
|
||||
|
||||
let html = '';
|
||||
if (caller.energy_level) {
|
||||
const energyColors = { low: '#4a7ab5', medium: '#5a8a3c', high: '#e8791d', very_high: '#cc2222' };
|
||||
const color = energyColors[caller.energy_level] || '#9a8b78';
|
||||
html += `<span class="energy-dot" style="background:${color}" title="${caller.energy_level} energy"></span>`;
|
||||
}
|
||||
html += caller.returning ? `<span class="caller-name">\u2605 ${caller.name}</span>` : `<span class="caller-name">${caller.name}</span>`;
|
||||
if (caller.call_shape && caller.call_shape !== 'standard') {
|
||||
const shapeLabels = {
|
||||
escalating_reveal: 'ER', am_i_the_asshole: 'AITA', confrontation: 'VS',
|
||||
celebration: '\u{1F389}', quick_hit: 'QH', bait_and_switch: 'B&S',
|
||||
the_hangup: 'HU', reactive: 'RE'
|
||||
};
|
||||
const label = shapeLabels[caller.call_shape] || caller.call_shape.substring(0, 2).toUpperCase();
|
||||
html += `<span class="shape-badge" title="${caller.call_shape.replace(/_/g, ' ')}">${label}</span>`;
|
||||
}
|
||||
// Shortcut label: 1-9 for first 9, 0 for 10th
|
||||
if (idx < 10) {
|
||||
const shortcutKey = idx === 9 ? '0' : String(idx + 1);
|
||||
html += `<span class="shortcut-label">${shortcutKey}</span>`;
|
||||
}
|
||||
btn.innerHTML = html;
|
||||
btn.addEventListener('click', () => startCall(caller.key, caller.name));
|
||||
grid.appendChild(btn);
|
||||
});
|
||||
@@ -443,6 +538,8 @@ async function startCall(key, name) {
|
||||
const data = await res.json();
|
||||
|
||||
currentCaller = { key, name };
|
||||
document.querySelector('.callers-section')?.classList.add('call-active');
|
||||
document.querySelector('.chat-section')?.classList.add('call-active');
|
||||
|
||||
// Check if real caller is active (three-way scenario)
|
||||
const realCallerActive = document.getElementById('real-caller-info') &&
|
||||
@@ -455,6 +552,8 @@ async function startCall(key, name) {
|
||||
}
|
||||
|
||||
document.getElementById('hangup-btn').disabled = false;
|
||||
const wrapupBtn = document.getElementById('wrapup-btn');
|
||||
if (wrapupBtn) { wrapupBtn.disabled = false; wrapupBtn.classList.remove('active'); }
|
||||
|
||||
// Show AI caller in active call indicator
|
||||
const aiInfo = document.getElementById('ai-caller-info');
|
||||
@@ -462,13 +561,25 @@ async function startCall(key, name) {
|
||||
if (aiInfo) aiInfo.classList.remove('hidden');
|
||||
if (aiName) aiName.textContent = name;
|
||||
|
||||
// Show caller background in disclosure triangle
|
||||
const bgDetails = document.getElementById('caller-background-details');
|
||||
const bgEl = document.getElementById('caller-background');
|
||||
if (bgDetails && bgEl && data.background) {
|
||||
bgEl.textContent = data.background;
|
||||
bgDetails.classList.remove('hidden');
|
||||
// Show caller info panel with structured data
|
||||
const infoPanel = document.getElementById('caller-info-panel');
|
||||
if (infoPanel && data.caller_info) {
|
||||
const ci = data.caller_info;
|
||||
const energyColors = { low: '#4a7ab5', medium: '#5a8a3c', high: '#e8791d', very_high: '#cc2222' };
|
||||
const shapeBadge = document.getElementById('caller-shape-badge');
|
||||
const energyBadge = document.getElementById('caller-energy-badge');
|
||||
const emotionBadge = document.getElementById('caller-emotion');
|
||||
const signature = document.getElementById('caller-signature');
|
||||
const situation = document.getElementById('caller-situation');
|
||||
if (shapeBadge) shapeBadge.textContent = (ci.call_shape || 'standard').replace(/_/g, ' ');
|
||||
if (energyBadge) { energyBadge.textContent = (ci.energy_level || '').replace('_', ' '); energyBadge.style.background = energyColors[ci.energy_level] || '#9a8b78'; }
|
||||
if (emotionBadge) emotionBadge.textContent = ci.emotional_state || '';
|
||||
if (signature) signature.textContent = ci.signature_detail ? `"${ci.signature_detail}"` : '';
|
||||
if (situation) situation.textContent = ci.situation_summary || '';
|
||||
infoPanel.classList.remove('hidden');
|
||||
}
|
||||
const bgEl = document.getElementById('caller-background');
|
||||
if (bgEl && data.background) bgEl.textContent = data.background;
|
||||
|
||||
document.querySelectorAll('.caller-btn').forEach(btn => {
|
||||
btn.classList.toggle('active', btn.dataset.key === key);
|
||||
@@ -512,12 +623,17 @@ async function hangup() {
|
||||
currentCaller = null;
|
||||
isProcessing = false;
|
||||
hideStatus();
|
||||
document.querySelector('.callers-section')?.classList.remove('call-active');
|
||||
document.querySelector('.chat-section')?.classList.remove('call-active');
|
||||
|
||||
document.getElementById('call-status').textContent = 'No active call';
|
||||
document.getElementById('hangup-btn').disabled = true;
|
||||
const wrapBtn = document.getElementById('wrapup-btn');
|
||||
if (wrapBtn) { wrapBtn.disabled = true; wrapBtn.classList.remove('active'); }
|
||||
document.querySelectorAll('.caller-btn').forEach(btn => btn.classList.remove('active'));
|
||||
|
||||
// Hide caller background
|
||||
// Hide caller info panel and background
|
||||
document.getElementById('caller-info-panel')?.classList.add('hidden');
|
||||
const bgDetails2 = document.getElementById('caller-background-details');
|
||||
if (bgDetails2) bgDetails2.classList.add('hidden');
|
||||
|
||||
@@ -527,6 +643,26 @@ async function hangup() {
|
||||
}
|
||||
|
||||
|
||||
async function wrapUp() {
|
||||
if (!currentCaller) return;
|
||||
try {
|
||||
await fetch('/api/wrap-up', { method: 'POST' });
|
||||
const wrapupBtn = document.getElementById('wrapup-btn');
|
||||
if (wrapupBtn) wrapupBtn.classList.add('active');
|
||||
log(`Wrapping up ${currentCaller.name}...`);
|
||||
} catch (err) {
|
||||
console.error('wrapUp error:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleMusic() {
|
||||
if (isMusicPlaying) {
|
||||
stopMusic();
|
||||
} else {
|
||||
playMusic();
|
||||
}
|
||||
}
|
||||
|
||||
// --- Server-Side Recording ---
|
||||
async function startRecording() {
|
||||
if (!currentCaller || isProcessing) return;
|
||||
@@ -722,11 +858,13 @@ async function playMusic() {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ track, action: 'play' })
|
||||
});
|
||||
isMusicPlaying = true;
|
||||
}
|
||||
|
||||
|
||||
async function stopMusic() {
|
||||
await fetch('/api/music/stop', { method: 'POST' });
|
||||
isMusicPlaying = false;
|
||||
}
|
||||
|
||||
|
||||
@@ -845,14 +983,60 @@ async function loadSounds() {
|
||||
if (!board) return;
|
||||
board.innerHTML = '';
|
||||
|
||||
const pinnedNames = ['cheer', 'applause', 'boo'];
|
||||
const pinned = [];
|
||||
const rest = [];
|
||||
|
||||
sounds.forEach(sound => {
|
||||
const lower = (sound.name || sound.file || '').toLowerCase();
|
||||
if (pinnedNames.some(p => lower.includes(p))) {
|
||||
pinned.push(sound);
|
||||
} else {
|
||||
rest.push(sound);
|
||||
}
|
||||
});
|
||||
|
||||
// Pinned buttons — always visible
|
||||
const pinnedRow = document.createElement('div');
|
||||
pinnedRow.className = 'soundboard-pinned';
|
||||
pinned.forEach(sound => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'sound-btn';
|
||||
btn.className = 'sound-btn pinned';
|
||||
const lower = (sound.name || sound.file || '').toLowerCase();
|
||||
if (lower.includes('cheer')) btn.classList.add('pin-cheer');
|
||||
else if (lower.includes('applause')) btn.classList.add('pin-applause');
|
||||
else if (lower.includes('boo')) btn.classList.add('pin-boo');
|
||||
btn.textContent = sound.name;
|
||||
btn.addEventListener('click', () => playSFX(sound.file));
|
||||
board.appendChild(btn);
|
||||
pinnedRow.appendChild(btn);
|
||||
});
|
||||
console.log('Loaded', sounds.length, 'sounds');
|
||||
board.appendChild(pinnedRow);
|
||||
|
||||
// Collapsible section for remaining sounds
|
||||
if (rest.length > 0) {
|
||||
const toggle = document.createElement('button');
|
||||
toggle.className = 'soundboard-toggle';
|
||||
toggle.innerHTML = 'More Sounds <span class="toggle-arrow">▼</span>';
|
||||
toggle.addEventListener('click', () => {
|
||||
soundboardExpanded = !soundboardExpanded;
|
||||
grid.classList.toggle('hidden', !soundboardExpanded);
|
||||
toggle.querySelector('.toggle-arrow').innerHTML = soundboardExpanded ? '▲' : '▼';
|
||||
});
|
||||
board.appendChild(toggle);
|
||||
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'soundboard-grid hidden';
|
||||
rest.forEach(sound => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'sound-btn';
|
||||
btn.textContent = sound.name;
|
||||
btn.addEventListener('click', () => playSFX(sound.file));
|
||||
grid.appendChild(btn);
|
||||
});
|
||||
board.appendChild(grid);
|
||||
}
|
||||
|
||||
console.log('Loaded', sounds.length, 'sounds', `(${pinned.length} pinned)`);
|
||||
} catch (err) {
|
||||
console.error('loadSounds error:', err);
|
||||
}
|
||||
@@ -972,6 +1156,8 @@ function addMessage(sender, text) {
|
||||
className += ' host';
|
||||
} else if (sender === 'System') {
|
||||
className += ' system';
|
||||
} else if (sender === 'DEVON') {
|
||||
className += ' devon';
|
||||
} else if (sender.includes('(caller)') || sender.includes('Caller #')) {
|
||||
className += ' real-caller';
|
||||
} else {
|
||||
@@ -1008,12 +1194,14 @@ function showStatus(text) {
|
||||
status.textContent = text;
|
||||
status.classList.remove('hidden');
|
||||
}
|
||||
document.getElementById('chat')?.classList.add('thinking');
|
||||
}
|
||||
|
||||
|
||||
function hideStatus() {
|
||||
const status = document.getElementById('status');
|
||||
if (status) status.classList.add('hidden');
|
||||
document.getElementById('chat')?.classList.remove('thinking');
|
||||
}
|
||||
|
||||
|
||||
@@ -1298,9 +1486,17 @@ async function fetchConversationUpdates() {
|
||||
} else if (msg.type === 'caller_queued') {
|
||||
// Queue poll will pick this up, just ensure it refreshes
|
||||
fetchQueue();
|
||||
} else if (msg.type === 'intern_response') {
|
||||
addMessage('DEVON', msg.text);
|
||||
} else if (msg.type === 'intern_suggestion') {
|
||||
showDevonSuggestion(msg.text);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Check for intern suggestion in polling response
|
||||
if (data.intern_suggestion) {
|
||||
showDevonSuggestion(data.intern_suggestion.text);
|
||||
}
|
||||
} catch (err) {}
|
||||
}
|
||||
|
||||
@@ -1512,3 +1708,83 @@ async function deleteEmail(id) {
|
||||
log('Failed to delete email: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// --- Devon (Intern) ---
|
||||
|
||||
async function askDevon(question) {
|
||||
addMessage('You', `Devon, ${question}`);
|
||||
log(`[Devon] Looking up: ${question}`);
|
||||
try {
|
||||
const res = await safeFetch('/api/intern/ask', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ question }),
|
||||
});
|
||||
if (res.text) {
|
||||
addMessage('DEVON', res.text);
|
||||
log(`[Devon] Responded (tools: ${(res.sources || []).join(', ') || 'none'})`);
|
||||
} else {
|
||||
log('[Devon] No response');
|
||||
}
|
||||
} catch (err) {
|
||||
log('[Devon] Error: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function interjectDevon() {
|
||||
log('[Devon] Checking for interjection...');
|
||||
try {
|
||||
const res = await safeFetch('/api/intern/interject', { method: 'POST' });
|
||||
if (res.text) {
|
||||
addMessage('DEVON', res.text);
|
||||
log('[Devon] Interjected');
|
||||
} else {
|
||||
log('[Devon] Nothing to add');
|
||||
}
|
||||
} catch (err) {
|
||||
log('[Devon] Interject error: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleInternMonitor(enabled) {
|
||||
try {
|
||||
await safeFetch('/api/intern/monitor', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ enabled }),
|
||||
});
|
||||
log(`[Devon] Monitor ${enabled ? 'on' : 'off'}`);
|
||||
} catch (err) {
|
||||
log('[Devon] Monitor toggle error: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function showDevonSuggestion(text) {
|
||||
const el = document.getElementById('devon-suggestion');
|
||||
const textEl = el?.querySelector('.devon-suggestion-text');
|
||||
if (el && textEl) {
|
||||
textEl.textContent = text ? `Devon: "${text.substring(0, 60)}${text.length > 60 ? '...' : ''}"` : 'Devon has something';
|
||||
el.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
async function playDevonSuggestion() {
|
||||
try {
|
||||
const res = await safeFetch('/api/intern/suggestion/play', { method: 'POST' });
|
||||
if (res.text) {
|
||||
addMessage('DEVON', res.text);
|
||||
}
|
||||
document.getElementById('devon-suggestion')?.classList.add('hidden');
|
||||
log('[Devon] Played suggestion');
|
||||
} catch (err) {
|
||||
log('[Devon] Play suggestion error: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function dismissDevonSuggestion() {
|
||||
try {
|
||||
await safeFetch('/api/intern/suggestion/dismiss', { method: 'POST' });
|
||||
document.getElementById('devon-suggestion')?.classList.add('hidden');
|
||||
} catch (err) {}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user