86 lines
4.2 KiB
HTML
86 lines
4.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="nl">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>War Room · Foodlinkk</title>
|
||
|
|
<link rel="stylesheet" href="/static/css/palantir-theme.css?v=2" />
|
||
|
|
<link rel="stylesheet" href="/static/css/pulse-theme.css?v=2" />
|
||
|
|
<link rel="stylesheet" href="/static/css/agent-characters.css?v=4" />
|
||
|
|
<link rel="stylesheet" href="/static/css/agents-warroom.css?v=3" />
|
||
|
|
<script defer src="/static/js/alpine.min.js?v=2"></script>
|
||
|
|
</head>
|
||
|
|
<body class="wr-popup-body">
|
||
|
|
<div class="wr-popup-shell" x-data="warRoomPopup()" x-init="init()">
|
||
|
|
<div class="wr-layout">
|
||
|
|
<aside class="wr-roster">
|
||
|
|
<h3>Kanalen</h3>
|
||
|
|
<button type="button" class="wr-room-btn" :class="{active: room && room.kind==='warroom'}" @click="openWarroom()">
|
||
|
|
<span>⚔️</span><strong>#war-room</strong>
|
||
|
|
</button>
|
||
|
|
<h3 style="margin-top:0.85rem">Agents</h3>
|
||
|
|
<template x-for="s in souls" :key="'p-'+s.agent_key">
|
||
|
|
<button type="button" class="wr-agent-btn"
|
||
|
|
:class="{active: room && room.kind==='dm' && room.agent_key===s.agent_key}"
|
||
|
|
@click="openDm(s.agent_key)">
|
||
|
|
<div class="agent-char-wrap"
|
||
|
|
:data-agent-avatar="s.agent_key"
|
||
|
|
:data-agent-color="s.avatar_color || '#1e3a5f'"
|
||
|
|
x-init="$nextTick(() => window.AgentAvatars && AgentAvatars.paint($el, s.agent_key, s.avatar_color))"></div>
|
||
|
|
<div class="wr-agent-meta">
|
||
|
|
<strong x-text="s.display_name"></strong>
|
||
|
|
<small x-text="'@'+s.agent_key"></small>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
</aside>
|
||
|
|
<div class="wr-main">
|
||
|
|
<div class="wr-head">
|
||
|
|
<div>
|
||
|
|
<h2 x-text="room ? (room.title || 'War Room') : 'War Room'"></h2>
|
||
|
|
<small class="muted" x-show="status" x-text="status"></small>
|
||
|
|
</div>
|
||
|
|
<div class="wr-head-actions">
|
||
|
|
<a class="btn btn-sm" href="/agents?tab=warroom" target="_blank">In cockpit</a>
|
||
|
|
<button type="button" class="btn btn-sm btn-pulse" @click="room && openRoom(room.id)" :disabled="busy">↻</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="wr-log" x-ref="wrLog">
|
||
|
|
<p class="wr-empty" x-show="!messages.length">Nog geen berichten.</p>
|
||
|
|
<template x-for="m in messages" :key="m.id">
|
||
|
|
<div class="wr-bubble"
|
||
|
|
:class="{'is-user': m.sender_type==='user', 'is-agent': m.sender_type==='agent', 'is-system': m.sender_type==='system'}">
|
||
|
|
<div class="wr-avatar" x-show="m.sender_type!=='system'">
|
||
|
|
<template x-if="m.sender_type==='agent'">
|
||
|
|
<div class="agent-char-wrap"
|
||
|
|
:data-agent-avatar="m.agent_key"
|
||
|
|
x-init="$nextTick(() => window.AgentAvatars && AgentAvatars.paint($el, m.agent_key))"></div>
|
||
|
|
</template>
|
||
|
|
<template x-if="m.sender_type==='user' && (m.sender_avatar_url || me.avatar_url)">
|
||
|
|
<img :src="m.sender_avatar_url || me.avatar_url" alt="" />
|
||
|
|
</template>
|
||
|
|
<template x-if="m.sender_type==='user' && !(m.sender_avatar_url || me.avatar_url)">
|
||
|
|
<span class="wr-avatar-fallback" x-text="(m.username||me.username||'?').slice(0,2).toUpperCase()"></span>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div class="wr-bubble-body">
|
||
|
|
<div class="wr-bubble-meta"><span x-text="labelForMessage(m)"></span></div>
|
||
|
|
<div class="wr-bubble-text" x-text="m.content"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div class="wr-composer">
|
||
|
|
<textarea class="form-input" rows="2" x-model="draft" @keydown="onKey($event)"
|
||
|
|
placeholder="Bericht… @agent" :disabled="busy || !room"></textarea>
|
||
|
|
<button type="button" class="btn btn-pulse-green" @click="send()" :disabled="busy || !room || !draft.trim()">Stuur</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="/static/js/cockpit.js?v=3"></script>
|
||
|
|
<script src="/static/js/agent-avatars.js?v=4"></script>
|
||
|
|
<script src="/static/js/agents-warroom.js?v=4"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|