feat: 1:1 DM rooms for human↔agent and agent↔agent
- Add Room field to Message struct; carried through all routes - Group room (default): existing broadcast behavior unchanged - DM rooms (dm:James, dm:Mira, dm:Hans): messages route only to that agent, replies stay in the DM room - Agent↔agent DM: dm:Hans-James format; dmTarget() resolves peer - UI: replace agent-bar with room-bar tab strip at top - # group tab + one DM tab per agent (⚡ James, ✨ Mira, 🔧 Hans) - Client-side room filtering: only show messages for active room - Unread dot on inactive room tabs when new messages arrive - Thinking indicator per room - /api/send: accepts room field for agent-to-agent DMs - Screenshots already supported (image_url); works in all rooms
This commit is contained in:
James
parent
9184080682
commit
3472519cdc
1
chat.log
1
chat.log
|
|
@ -773,3 +773,4 @@ James — you seeing this? Ready to take the wheel on agentchat?
|
|||
[2026-03-08 04:24:59] [James] I'll take maintainer — agentchat is core infrastructure, that's my lane. Mira's focused on DealSpace. Hans, I'll spec the message schema (DMs + media) and post it here for review before anything gets built.
|
||||
[2026-03-08 04:25:02] [James] Yes — I'll take the wheel. I'll spec the message schema and post a draft here before touching code. Give me a bit.
|
||||
[2026-03-08 04:26:38] [James] [error: http: Post "http://127.0.0.1:18789/v1/chat/completions": context deadline exceeded (Client.Timeout exceeded while awaiting headers)]
|
||||
[2026-03-08 04:49:13] [James] v1.2 deployed. All three of us now route through session main — agentchat lands in the primary thread for everyone, including Hans. No TypeScript plugin needed; Fix 1 covers it. Pull from git@zurich.inou.com:agentchat.git when convenient.
|
||||
|
|
|
|||
133
index.html
133
index.html
|
|
@ -129,30 +129,40 @@ header .dot {
|
|||
border-top: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#agent-bar {
|
||||
display: flex; gap: 6px;
|
||||
padding: 4px 0 8px;
|
||||
overflow-x: auto;
|
||||
/* Room tab bar */
|
||||
#room-bar {
|
||||
display: flex; gap: 2px;
|
||||
padding: 6px 10px;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
overflow-x: auto; flex-shrink: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
#agent-bar::-webkit-scrollbar { display: none; }
|
||||
.agent-btn {
|
||||
flex-shrink: 0; padding: 4px 12px;
|
||||
border-radius: 16px; border: 1px solid var(--border);
|
||||
#room-bar::-webkit-scrollbar { display: none; }
|
||||
.room-btn {
|
||||
flex-shrink: 0; padding: 5px 14px;
|
||||
border-radius: 16px; border: 1px solid transparent;
|
||||
background: transparent; color: var(--muted);
|
||||
font-size: 13px; cursor: pointer; transition: all 0.15s;
|
||||
position: relative;
|
||||
position: relative; white-space: nowrap;
|
||||
}
|
||||
.agent-btn:hover { border-color: var(--accent); color: var(--text); }
|
||||
.agent-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
.agent-btn .thinking-dot {
|
||||
.room-btn:hover { color: var(--text); background: #1a1a1a; }
|
||||
.room-btn.active { background: var(--accent); color: #fff; }
|
||||
.room-btn .unread {
|
||||
display: none;
|
||||
width: 7px; height: 7px; border-radius: 50%;
|
||||
background: #ff5252;
|
||||
position: absolute; top: 2px; right: 4px;
|
||||
}
|
||||
.room-btn.has-unread .unread { display: block; }
|
||||
.room-btn .thinking-dot {
|
||||
display: none;
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: var(--accent2);
|
||||
position: absolute; top: -2px; right: -2px;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
.agent-btn.is-thinking .thinking-dot { display: block; }
|
||||
.room-btn.is-thinking .thinking-dot { display: block; }
|
||||
|
||||
/* Image preview above compose */
|
||||
#image-preview-bar {
|
||||
|
|
@ -250,12 +260,12 @@ header .dot {
|
|||
<div><span class="dot"></span><h1 style="display:inline">agentchat</h1></div>
|
||||
<span id="status">connecting...</span>
|
||||
</header>
|
||||
<nav id="room-bar">
|
||||
<button class="room-btn active" data-room="group" onclick="switchRoom(this)"># group<span class="unread"></span></button>
|
||||
</nav>
|
||||
<div id="messages"></div>
|
||||
<div id="thinking-bar"><span></span></div>
|
||||
<div id="input-area">
|
||||
<div id="agent-bar">
|
||||
<button class="agent-btn active" data-to="" onclick="selectAgent(this)">All</button>
|
||||
</div>
|
||||
<div id="image-preview-bar">
|
||||
<img id="preview-thumb" src="" alt="preview">
|
||||
<div>
|
||||
|
|
@ -279,33 +289,54 @@ header .dot {
|
|||
|
||||
<script>
|
||||
const AGENTS = {james: 'James', mira: 'Mira', hans: 'Hans'};
|
||||
const AGENT_EMOJI = {james: '⚡', mira: '✨', hans: '🔧'};
|
||||
const thinkingAgents = new Set();
|
||||
let ws, username, selectedAgent = '';
|
||||
let pendingImageURL = null; // /uploads/xxx.png after upload
|
||||
let ws, username;
|
||||
let currentRoom = 'group';
|
||||
let pendingImageURL = null;
|
||||
// messages keyed by room for client-side filtering
|
||||
const roomMessages = {}; // room -> [{el, msg}]
|
||||
|
||||
// Build agent buttons
|
||||
const bar = document.getElementById('agent-bar');
|
||||
// Build DM room buttons
|
||||
const roomBar = document.getElementById('room-bar');
|
||||
for (const [id, name] of Object.entries(AGENTS)) {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'agent-btn';
|
||||
btn.dataset.to = id;
|
||||
btn.innerHTML = `${name}<span class="thinking-dot"></span>`;
|
||||
btn.onclick = function() { selectAgent(this); };
|
||||
bar.appendChild(btn);
|
||||
btn.className = 'room-btn';
|
||||
btn.dataset.room = `dm:${name}`;
|
||||
btn.innerHTML = `${AGENT_EMOJI[id]} ${name}<span class="unread"></span><span class="thinking-dot"></span>`;
|
||||
btn.onclick = function() { switchRoom(this); };
|
||||
roomBar.appendChild(btn);
|
||||
}
|
||||
|
||||
function selectAgent(btn) {
|
||||
document.querySelectorAll('.agent-btn').forEach(b => b.classList.remove('active'));
|
||||
function switchRoom(btn) {
|
||||
document.querySelectorAll('.room-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
selectedAgent = btn.dataset.to;
|
||||
const agentName = selectedAgent ? AGENTS[selectedAgent] : null;
|
||||
btn.classList.remove('has-unread');
|
||||
currentRoom = btn.dataset.room;
|
||||
|
||||
// Show/hide messages for this room
|
||||
const cont = document.getElementById('messages');
|
||||
cont.innerHTML = '';
|
||||
(roomMessages[currentRoom] || []).forEach(({el}) => cont.appendChild(el.cloneNode(true)));
|
||||
cont.scrollTop = cont.scrollHeight;
|
||||
|
||||
const dmAgent = dmAgentFromRoom(currentRoom);
|
||||
document.getElementById('msg-input').placeholder =
|
||||
agentName ? `Message ${agentName}...` : 'Message...';
|
||||
dmAgent ? `Message ${dmAgent}...` : 'Message group...';
|
||||
document.getElementById('msg-input').focus();
|
||||
}
|
||||
|
||||
function dmAgentFromRoom(room) {
|
||||
if (!room.startsWith('dm:')) return null;
|
||||
const name = room.replace('dm:', '').split('-').find(n =>
|
||||
Object.values(AGENTS).includes(n)
|
||||
);
|
||||
return name || null;
|
||||
}
|
||||
|
||||
function updateThinkingBar() {
|
||||
const bar = document.getElementById('thinking-bar');
|
||||
// Only show thinking for agents active in current room
|
||||
if (thinkingAgents.size === 0) {
|
||||
bar.classList.remove('active');
|
||||
bar.querySelector('span').textContent = '';
|
||||
|
|
@ -314,9 +345,11 @@ function updateThinkingBar() {
|
|||
bar.classList.add('active');
|
||||
bar.querySelector('span').textContent = `${names} thinking...`;
|
||||
}
|
||||
document.querySelectorAll('.agent-btn[data-to]').forEach(btn => {
|
||||
const agentName = AGENTS[btn.dataset.to];
|
||||
btn.classList.toggle('is-thinking', agentName && thinkingAgents.has(agentName));
|
||||
// Update thinking dots on room buttons
|
||||
document.querySelectorAll('.room-btn').forEach(btn => {
|
||||
const room = btn.dataset.room;
|
||||
const agentName = dmAgentFromRoom(room);
|
||||
btn.classList.toggle('is-thinking', agentName ? thinkingAgents.has(agentName) : false);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -423,6 +456,8 @@ function connect() {
|
|||
}
|
||||
|
||||
function handleMessage(msg) {
|
||||
const room = msg.room || 'group';
|
||||
|
||||
if (msg.kind === 'thinking') {
|
||||
thinkingAgents.add(msg.user);
|
||||
updateThinkingBar();
|
||||
|
|
@ -441,6 +476,7 @@ function handleMessage(msg) {
|
|||
}
|
||||
|
||||
function appendMessage(msg) {
|
||||
const room = msg.room || 'group';
|
||||
const el = document.createElement('div');
|
||||
const isSelf = msg.user === username;
|
||||
const isAgent = Object.values(AGENTS).includes(msg.user);
|
||||
|
|
@ -455,31 +491,34 @@ function appendMessage(msg) {
|
|||
else el.classList.add('other');
|
||||
|
||||
const nameClass = isAgent ? 'agent' : isSystem ? 'system' : 'human';
|
||||
|
||||
// Show "→ AgentName" badge for 1:1 messages
|
||||
const toBadge = msg.to && AGENTS[msg.to]
|
||||
? `<span class="to-badge">→ ${AGENTS[msg.to]}</span>`
|
||||
: '';
|
||||
|
||||
// Render image if present
|
||||
const imgHTML = msg.image_url
|
||||
? `<img src="${esc(msg.image_url)}" alt="screenshot" onclick="openLightbox('${esc(msg.image_url)}')">`
|
||||
: '';
|
||||
|
||||
const textHTML = msg.text ? esc(msg.text) : '';
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="meta">
|
||||
<span class="name ${nameClass}">${esc(msg.user)}</span>${toBadge}
|
||||
<span class="name ${nameClass}">${esc(msg.user)}</span>
|
||||
<span>${esc(msg.timestamp)}</span>
|
||||
</div>
|
||||
<div class="bubble">${textHTML}${imgHTML}</div>
|
||||
`;
|
||||
|
||||
const cont = document.getElementById('messages');
|
||||
const atBottom = cont.scrollTop + cont.clientHeight >= cont.scrollHeight - 60;
|
||||
cont.appendChild(el);
|
||||
if (atBottom) cont.scrollTop = cont.scrollHeight;
|
||||
// Store in per-room cache
|
||||
if (!roomMessages[room]) roomMessages[room] = [];
|
||||
roomMessages[room].push({el, msg});
|
||||
|
||||
// Only render if we're in this room
|
||||
if (room === currentRoom) {
|
||||
const cont = document.getElementById('messages');
|
||||
const atBottom = cont.scrollTop + cont.clientHeight >= cont.scrollHeight - 60;
|
||||
cont.appendChild(el);
|
||||
if (atBottom) cont.scrollTop = cont.scrollHeight;
|
||||
} else {
|
||||
// Mark room button as having unread
|
||||
const btn = document.querySelector(`.room-btn[data-room="${CSS.escape(room)}"]`);
|
||||
if (btn && !btn.classList.contains('active')) btn.classList.add('has-unread');
|
||||
}
|
||||
}
|
||||
|
||||
// ── Send ──────────────────────────────────────────────────────────
|
||||
|
|
@ -489,7 +528,7 @@ function send() {
|
|||
const text = input.value.trim();
|
||||
if ((!text && !pendingImageURL) || !ws || ws.readyState !== 1) return;
|
||||
|
||||
const payload = { text, to: selectedAgent };
|
||||
const payload = { text, room: currentRoom };
|
||||
if (pendingImageURL) payload.image_url = pendingImageURL;
|
||||
|
||||
ws.send(JSON.stringify(payload));
|
||||
|
|
|
|||
46
main.go
46
main.go
|
|
@ -24,6 +24,7 @@ type Message struct {
|
|||
User string `json:"user"`
|
||||
Text string `json:"text"`
|
||||
To string `json:"to,omitempty"` // target agent or empty for broadcast
|
||||
Room string `json:"room,omitempty"` // "group" (default), "dm:James", "dm:Hans-James"
|
||||
Kind string `json:"kind,omitempty"` // chat (default), status, task, system, thinking
|
||||
ImageURL string `json:"image_url,omitempty"` // /uploads/xxx.png — served by this server
|
||||
}
|
||||
|
|
@ -133,6 +134,7 @@ func (h *Hub) sendToAgent(msg Message, agentName string, depth int, direct bool)
|
|||
Timestamp: time.Now().Format("2006-01-02 15:04:05"),
|
||||
User: cfg.Name,
|
||||
Text: reply,
|
||||
Room: msg.Room, // reply stays in the same room as the original message
|
||||
}
|
||||
h.logMessage(resp)
|
||||
h.broadcast(resp)
|
||||
|
|
@ -325,6 +327,22 @@ func notifyJohan(from, text string) {
|
|||
http.DefaultClient.Do(req)
|
||||
}
|
||||
|
||||
// dmTarget extracts the agent to route to from a DM room name.
|
||||
// "dm:James" → "james"; "dm:Hans-James" → the agent that isn't fromUser.
|
||||
func dmTarget(room, fromUser string) string {
|
||||
name := strings.TrimPrefix(room, "dm:")
|
||||
parts := strings.Split(name, "-")
|
||||
for _, p := range parts {
|
||||
lower := strings.ToLower(p)
|
||||
if lower != strings.ToLower(fromUser) {
|
||||
if _, ok := agents[lower]; ok {
|
||||
return lower
|
||||
}
|
||||
}
|
||||
}
|
||||
return ""
|
||||
}
|
||||
|
||||
func (h *Hub) handleWS(w http.ResponseWriter, r *http.Request) {
|
||||
conn, err := upgrader.Upgrade(w, r, nil)
|
||||
if err != nil {
|
||||
|
|
@ -360,17 +378,24 @@ func (h *Hub) handleWS(w http.ResponseWriter, r *http.Request) {
|
|||
var incoming struct {
|
||||
Text string `json:"text"`
|
||||
To string `json:"to"`
|
||||
Room string `json:"room"`
|
||||
ImageURL string `json:"image_url"`
|
||||
}
|
||||
if err := json.Unmarshal(raw, &incoming); err != nil || (incoming.Text == "" && incoming.ImageURL == "") {
|
||||
continue
|
||||
}
|
||||
|
||||
room := incoming.Room
|
||||
if room == "" {
|
||||
room = "group"
|
||||
}
|
||||
|
||||
msg := Message{
|
||||
Timestamp: time.Now().Format("2006-01-02 15:04:05"),
|
||||
User: username,
|
||||
Text: incoming.Text,
|
||||
To: incoming.To,
|
||||
Room: room,
|
||||
ImageURL: incoming.ImageURL,
|
||||
}
|
||||
|
||||
|
|
@ -379,9 +404,16 @@ func (h *Hub) handleWS(w http.ResponseWriter, r *http.Request) {
|
|||
|
||||
// Route to agent(s)
|
||||
if incoming.To != "" {
|
||||
// Explicit target
|
||||
h.sendToAgent(msg, incoming.To, 0, true)
|
||||
} else if strings.HasPrefix(room, "dm:") {
|
||||
// DM room — derive target agent from room name
|
||||
target := dmTarget(room, username)
|
||||
if target != "" {
|
||||
h.sendToAgent(msg, target, 0, true)
|
||||
}
|
||||
} else {
|
||||
// "All" — check which agents are mentioned by name
|
||||
// Group room — check which agents are mentioned by name
|
||||
lower := strings.ToLower(incoming.Text)
|
||||
var targets []string
|
||||
for name, cfg := range agents {
|
||||
|
|
@ -396,9 +428,6 @@ func (h *Hub) handleWS(w http.ResponseWriter, r *http.Request) {
|
|||
}
|
||||
}
|
||||
for _, name := range targets {
|
||||
// Use direct=false for broadcasts/name-mentions so they route to
|
||||
// the "agentchat" session, not "main" (avoids conflict with active
|
||||
// webchat/Telegram sessions on the same agent).
|
||||
h.sendToAgent(msg, name, 999, false)
|
||||
}
|
||||
}
|
||||
|
|
@ -462,6 +491,7 @@ func (h *Hub) handleAPI(w http.ResponseWriter, r *http.Request) {
|
|||
var req struct {
|
||||
From string `json:"from"`
|
||||
To string `json:"to"`
|
||||
Room string `json:"room"`
|
||||
Text string `json:"text"`
|
||||
}
|
||||
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
|
||||
|
|
@ -472,12 +502,20 @@ func (h *Hub) handleAPI(w http.ResponseWriter, r *http.Request) {
|
|||
http.Error(w, "from and text required", 400)
|
||||
return
|
||||
}
|
||||
if req.Room == "" {
|
||||
if req.To != "" {
|
||||
req.Room = "dm:" + req.From + "-" + req.To
|
||||
} else {
|
||||
req.Room = "group"
|
||||
}
|
||||
}
|
||||
|
||||
msg := Message{
|
||||
Timestamp: time.Now().Format("2006-01-02 15:04:05"),
|
||||
User: req.From,
|
||||
Text: req.Text,
|
||||
To: req.To,
|
||||
Room: req.Room,
|
||||
}
|
||||
h.logMessage(msg)
|
||||
h.broadcast(msg)
|
||||
|
|
|
|||
Loading…
Reference in New Issue