From ba7226454245968f85668c6204a68bb037a9aa93 Mon Sep 17 00:00:00 2001 From: ekko <152005280+EKKOLearnAI@users.noreply.github.com> Date: Fri, 24 Apr 2026 20:41:14 +0800 Subject: [PATCH] feat: group chat session lifecycle, typing recovery, mention highlighting (#186) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: restore group chat system with Socket.IO and SQLite persistence - GroupChatServer: Socket.IO server with room management, message history, typing indicators - SQLite storage for rooms, messages, and agent configuration - AgentClients: manages AI agent connections via socket.io-client, forwards @mentions to Hermes gateway - REST API: room CRUD, agent management, invite codes - Agent auto-restoration on server restart - Tests for all REST endpoints Co-Authored-By: Claude Opus 4.6 * docs: add context-engine design document for group chat compression Co-Authored-By: Claude Opus 4.6 * fix: handle special-character session search * fix: keep unicode dotted session search on quoted FTS path * feat: add context engine and group chat frontend UI - Context engine: three-zone compression (head/tail/summary) with LLM summarization, incremental updates, TTL cache, and graceful degradation - Frontend: group chat page with Socket.IO client, room sidebar, message list, agent/member display, create/join-by-code modals - Integration: wire context engine into agent-clients before /v1/runs - Refactor ChatStorage to use global DB (getDb/ensureTable) with gc_ prefix - Add i18n keys for group chat to all 8 locales - Add sidebar nav entry and router for group chat page Co-Authored-By: Claude Opus 4.6 * fix: remove leftover main branch code from merge conflict resolution The `isNumericQuery`, `hasUnsafeChars`, and `runLikeContentSearch` functions no longer exist — they were replaced by HEAD's `shouldUseLiteralContentSearch` and `runLiteralContentSearch`. This dead code block caused a TypeScript compile error after the merge. Co-Authored-By: Claude Opus 4.6 * fix: install missing socket.io dep and type ack params Co-Authored-By: Claude Opus 4.6 * fix: enable WebSocket proxy and fix socket.io transport for group chat - Add ws: true to Vite proxy config so WebSocket upgrade requests are forwarded to the backend - Allow both polling and websocket transports on server and client (polling as fallback when WebSocket upgrade fails through proxy) Co-Authored-By: Claude Opus 4.6 * fix: separate socket.io path from REST routes for group chat socket.io was mounted at /api/hermes/group-chat which intercepted all REST requests to /api/hermes/group-chat/rooms etc, returning "Transport unknown". Changed socket.io path to /api/hermes/group-chat/ws to avoid conflicts. Co-Authored-By: Claude Opus 4.6 * feat: improve group chat UI, agent management, and socket.io reliability - Redesign GroupChatPanel with Naive UI, stacked agent avatars, and popover management - Match GroupChatInput style with single chat input, add IME composition handling - Add agent add/remove per room with profile selection and duplicate prevention - Use @multiavatar for SVG avatar generation with caching - Decouple joinRoom from socket.io, use REST API for data loading - Switch socket.io to default path with /group-chat namespace to avoid proxy conflicts - Restore agent connections after server is listening - Add getRoomDetail REST endpoint and duplicate agent prevention (409) Co-Authored-By: Claude Opus 4.6 * feat: server-side @mention routing with context compression status and queue - Move @mention detection from agent socket listeners to server-side processMentions() - Add per-room processing lock to block mention dispatch during compression - Queue mentions during processing, drain only the latest when ready - Emit context_status events (compressing/replying/ready) to room via Socket.IO - Frontend displays compression status indicator above input - Token-based compression trigger (100k threshold) with CJK-aware estimation - Fix compressor type errors (countTokens parameter type) Co-Authored-By: Claude Opus 4.6 * feat: improve group chat profile handling and session sync Refine group chat room/session behavior with per-room compression controls, sidebar updates, and better stale session cleanup so multi-profile group chat state stays consistent. Co-Authored-By: Claude Opus 4.6 * feat: group chat improvements — session lifecycle, typing recovery, mention highlighting - Fix cross-profile session deletion with deferred delete queue - Move saveSessionProfile to after gateway response confirmation - Replace all console.log with logger in group-chat modules - Add server-side typing/context_status state tracking for room rejoin - Fix @ mention popup position to follow cursor - Add @ mention highlighting (blue) in chat message content - Fix mention regex to match all occurrences after HTML tags - Enable esbuild minify and treeShaking - Move @multiavatar/multiavatar to devDependencies - Add i18n keys for group chat features - Update tests for new functionality Co-Authored-By: Claude Opus 4.6 * chore: bump version to 0.4.5 and move @multiavatar to devDependencies Co-Authored-By: Claude Opus 4.6 --------- Co-authored-by: Claude Opus 4.6 Co-authored-by: Zhicheng Han --- package.json | 9 +- packages/client/src/api/hermes/group-chat.ts | 188 +++ .../hermes/chat/MarkdownRenderer.vue | 18 +- .../hermes/group-chat/CreateRoomForm.vue | 160 ++ .../hermes/group-chat/GroupChatInput.vue | 321 ++++ .../hermes/group-chat/GroupChatPanel.vue | 896 +++++++++++ .../hermes/group-chat/GroupMessageItem.vue | 149 ++ .../hermes/group-chat/GroupMessageList.vue | 79 + .../src/components/layout/AppSidebar.vue | 54 +- packages/client/src/data/changelog.ts | 2 +- packages/client/src/i18n/locales/de.ts | 52 + packages/client/src/i18n/locales/en.ts | 51 + packages/client/src/i18n/locales/es.ts | 52 + packages/client/src/i18n/locales/fr.ts | 52 + packages/client/src/i18n/locales/ja.ts | 52 + packages/client/src/i18n/locales/ko.ts | 52 + packages/client/src/i18n/locales/pt.ts | 52 + packages/client/src/i18n/locales/zh.ts | 51 + packages/client/src/router/index.ts | 5 + packages/client/src/stores/hermes/chat.ts | 11 +- .../client/src/stores/hermes/group-chat.ts | 365 +++++ .../client/src/views/hermes/GroupChatView.vue | 30 + .../server/src/controllers/hermes/profiles.ts | 13 +- .../server/src/controllers/hermes/sessions.ts | 94 +- packages/server/src/db/hermes/sessions-db.ts | 110 +- packages/server/src/index.ts | 22 +- .../server/src/routes/hermes/group-chat.ts | 270 ++++ packages/server/src/routes/hermes/terminal.ts | 1 - packages/server/src/routes/index.ts | 2 + .../hermes/context-engine/compressor.ts | 357 +++++ .../hermes/context-engine/gateway-client.ts | 117 ++ .../services/hermes/context-engine/index.ts | 13 + .../services/hermes/context-engine/prompt.ts | 82 + .../hermes/context-engine/summary-cache.ts | 49 + .../services/hermes/context-engine/types.ts | 111 ++ .../hermes/group-chat/agent-clients.ts | 669 +++++++++ .../src/services/hermes/group-chat/index.ts | 866 +++++++++++ packages/server/src/services/logger.ts | 4 +- packages/server/src/services/shutdown.ts | 9 +- scripts/build-server.mjs | 6 +- tests/client/chat-store.test.ts | 2 + tests/client/markdown-rendering.test.ts | 9 + tests/client/message-item-highlight.test.ts | 9 + tests/server/context-engine.test.ts | 455 ++++++ tests/server/group-chat.test.ts | 1327 +++++++++++++++++ tests/server/sessions-db.test.ts | 429 +++++- vite.config.ts | 4 + 47 files changed, 7590 insertions(+), 141 deletions(-) create mode 100644 packages/client/src/api/hermes/group-chat.ts create mode 100644 packages/client/src/components/hermes/group-chat/CreateRoomForm.vue create mode 100644 packages/client/src/components/hermes/group-chat/GroupChatInput.vue create mode 100644 packages/client/src/components/hermes/group-chat/GroupChatPanel.vue create mode 100644 packages/client/src/components/hermes/group-chat/GroupMessageItem.vue create mode 100644 packages/client/src/components/hermes/group-chat/GroupMessageList.vue create mode 100644 packages/client/src/stores/hermes/group-chat.ts create mode 100644 packages/client/src/views/hermes/GroupChatView.vue create mode 100644 packages/server/src/routes/hermes/group-chat.ts create mode 100644 packages/server/src/services/hermes/context-engine/compressor.ts create mode 100644 packages/server/src/services/hermes/context-engine/gateway-client.ts create mode 100644 packages/server/src/services/hermes/context-engine/index.ts create mode 100644 packages/server/src/services/hermes/context-engine/prompt.ts create mode 100644 packages/server/src/services/hermes/context-engine/summary-cache.ts create mode 100644 packages/server/src/services/hermes/context-engine/types.ts create mode 100644 packages/server/src/services/hermes/group-chat/agent-clients.ts create mode 100644 packages/server/src/services/hermes/group-chat/index.ts create mode 100644 tests/server/context-engine.test.ts create mode 100644 tests/server/group-chat.test.ts diff --git a/package.json b/package.json index 234144b..da8f011 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hermes-web-ui", - "version": "0.4.4", + "version": "0.4.5", "description": "Self-hosted AI chat dashboard for Hermes Agent — multi-model (Claude, GPT, Gemini, DeepSeek) web UI with Telegram, Discord, Slack, WhatsApp integration", "repository": { "type": "git", @@ -61,13 +61,18 @@ "dist/" ], "dependencies": { - "node-pty": "^1.1.0" + "eventsource": "^4.1.0", + "node-pty": "^1.1.0", + "socket.io": "^4.8.3", + "socket.io-client": "^4.8.3" }, "devDependencies": { + "@multiavatar/multiavatar": "^1.0.7", "@koa/bodyparser": "^5.0.0", "@koa/cors": "^5.0.0", "@koa/router": "^15.4.0", "@pinia/testing": "^1.0.3", + "@types/eventsource": "^1.1.15", "@types/js-yaml": "^4.0.9", "@types/koa": "^2.15.0", "@types/koa__cors": "^5.0.0", diff --git a/packages/client/src/api/hermes/group-chat.ts b/packages/client/src/api/hermes/group-chat.ts new file mode 100644 index 0000000..7f8377c --- /dev/null +++ b/packages/client/src/api/hermes/group-chat.ts @@ -0,0 +1,188 @@ +import { io } from 'socket.io-client' +import { request, getApiKey } from '../client' + +// ─── Types ────────────────────────────────────────────────── + +export interface RoomInfo { + id: string + name: string + inviteCode: string | null + triggerTokens?: number + maxHistoryTokens?: number + tailMessageCount?: number + totalTokens?: number +} + +export interface RoomAgent { + id: string + roomId: string + agentId: string + profile: string + name: string + description: string + invited: number +} + +export interface ChatMessage { + id: string + roomId: string + senderId: string + senderName: string + content: string + timestamp: number +} + +export interface MemberInfo { + id: string + userId: string + name: string + description: string + joinedAt: number +} + +export interface JoinResult { + roomId: string + roomName: string + members: MemberInfo[] + messages: ChatMessage[] + rooms: string[] +} + +// ─── Socket.IO Client ────────────────────────────────────── + +let socket: ReturnType | null = null + +export function connectGroupChat(opts?: { userId?: string; userName?: string; description?: string }): ReturnType { + if (socket?.connected) return socket + + const token = getApiKey() + const userId = opts?.userId || localStorage.getItem('gc_user_id') || generateUUID() + localStorage.setItem('gc_user_id', userId) + + socket = io('/group-chat', { + auth: { + token: token || undefined, + userId, + name: opts?.userName || localStorage.getItem('gc_user_name') || undefined, + description: opts?.description || localStorage.getItem('gc_user_description') || undefined, + }, + transports: ['websocket'], + reconnection: true, + reconnectionAttempts: Infinity, + reconnectionDelay: 1000, + reconnectionDelayMax: 30000, + }) + + return socket +} + +export function getStoredUserId(): string { + let id = localStorage.getItem('gc_user_id') + if (!id) { + id = generateUUID() + localStorage.setItem('gc_user_id', id) + } + return id +} + +export function getStoredUserName(): string | null { + return localStorage.getItem('gc_user_name') +} + +function generateUUID(): string { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => { + const r = Math.random() * 16 | 0 + const v = c === 'x' ? r : (r & 0x3 | 0x8) + return v.toString(16) + }) +} + +export function getSocket(): ReturnType | null { + return socket?.connected ? socket : null +} + +export function disconnectGroupChat(): void { + if (socket) { + socket.disconnect() + socket = null + } +} + +// ─── REST API ─────────────────────────────────────────────── + +export async function createRoom(data: { + name: string + inviteCode: string + agents?: { profile: string; name?: string; description?: string; invited?: boolean }[] + compression?: { triggerTokens?: number; maxHistoryTokens?: number; tailMessageCount?: number } +}): Promise<{ room: RoomInfo; agents: RoomAgent[] }> { + return request('/api/hermes/group-chat/rooms', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data), + }) +} + +export async function listRooms(): Promise<{ rooms: RoomInfo[] }> { + return request('/api/hermes/group-chat/rooms') +} + +export async function getRoomDetail(roomId: string): Promise<{ room: RoomInfo; messages: ChatMessage[]; agents: RoomAgent[]; members: MemberInfo[] }> { + return request(`/api/hermes/group-chat/rooms/${roomId}`) +} + +export async function joinRoomByCode(code: string): Promise<{ room: RoomInfo }> { + return request(`/api/hermes/group-chat/rooms/join/${code}`) +} + +export async function updateInviteCode(roomId: string, inviteCode: string): Promise { + return request(`/api/hermes/group-chat/rooms/${roomId}/invite-code`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ inviteCode }), + }) +} + +export async function addAgent(roomId: string, data: { + profile: string + name?: string + description?: string + invited?: boolean +}): Promise<{ agent: RoomAgent }> { + return request(`/api/hermes/group-chat/rooms/${roomId}/agents`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data), + }) +} + +export async function listAgents(roomId: string): Promise<{ agents: RoomAgent[] }> { + return request(`/api/hermes/group-chat/rooms/${roomId}/agents`) +} + +export async function removeAgent(roomId: string, agentId: string): Promise { + return request(`/api/hermes/group-chat/rooms/${roomId}/agents/${agentId}`, { + method: 'DELETE', + }) +} + +export async function deleteRoom(roomId: string): Promise { + return request(`/api/hermes/group-chat/rooms/${roomId}`, { + method: 'DELETE', + }) +} + +export async function updateRoomConfig(roomId: string, config: { triggerTokens?: number; maxHistoryTokens?: number; tailMessageCount?: number }): Promise<{ room: RoomInfo }> { + return request(`/api/hermes/group-chat/rooms/${roomId}/config`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(config), + }) +} + +export async function forceCompress(roomId: string): Promise<{ success: boolean; summary: string }> { + return request(`/api/hermes/group-chat/rooms/${roomId}/compress`, { + method: 'POST', + }) +} + diff --git a/packages/client/src/components/hermes/chat/MarkdownRenderer.vue b/packages/client/src/components/hermes/chat/MarkdownRenderer.vue index a04f441..5c62604 100644 --- a/packages/client/src/components/hermes/chat/MarkdownRenderer.vue +++ b/packages/client/src/components/hermes/chat/MarkdownRenderer.vue @@ -6,7 +6,13 @@ import MarkdownIt from 'markdown-it' import { handleCodeBlockCopyClick, renderHighlightedCodeBlock } from './highlight' import { downloadFile } from '@/api/hermes/download' -const props = defineProps<{ content: string }>() +const props = withDefaults(defineProps<{ + content: string + mentionNames?: string[] +}>(), { + mentionNames: () => [], +}) + const { t } = useI18n() const message = useMessage() @@ -19,7 +25,15 @@ const md: MarkdownIt = new MarkdownIt({ }, }) -const renderedHtml = computed(() => md.render(props.content)) +const renderedHtml = computed(() => { + let html = md.render(props.content) + if (props.mentionNames && props.mentionNames.length > 0) { + const escaped = props.mentionNames.map(n => n.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')) + const re = new RegExp(`(?<=[\\s>]|^)@(${escaped.join('|')})(?=\\s|$)`, 'gi') + html = html.replace(re, '@$1') + } + return html +}) function handleMarkdownClick(event: MouseEvent): void { void handleCodeBlockCopyClick(event) diff --git a/packages/client/src/components/hermes/group-chat/CreateRoomForm.vue b/packages/client/src/components/hermes/group-chat/CreateRoomForm.vue new file mode 100644 index 0000000..7a52703 --- /dev/null +++ b/packages/client/src/components/hermes/group-chat/CreateRoomForm.vue @@ -0,0 +1,160 @@ + + + + + diff --git a/packages/client/src/components/hermes/group-chat/GroupChatInput.vue b/packages/client/src/components/hermes/group-chat/GroupChatInput.vue new file mode 100644 index 0000000..684c7ae --- /dev/null +++ b/packages/client/src/components/hermes/group-chat/GroupChatInput.vue @@ -0,0 +1,321 @@ + + +