feat: group chat session lifecycle, typing recovery, mention highlighting (#186)
* 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 <noreply@anthropic.com> * docs: add context-engine design document for group chat compression Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * fix: install missing socket.io dep and type ack params Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * chore: bump version to 0.4.5 and move @multiavatar to devDependencies Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Zhicheng Han <zhicheng.han@mathematik.uni-goettingen.de>
This commit is contained in:
ekko
@@ -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<typeof io> | null = null
|
||||
|
||||
export function connectGroupChat(opts?: { userId?: string; userName?: string; description?: string }): ReturnType<typeof io> {
|
||||
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<typeof io> | 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<void> {
|
||||
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<void> {
|
||||
return request(`/api/hermes/group-chat/rooms/${roomId}/agents/${agentId}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
}
|
||||
|
||||
export async function deleteRoom(roomId: string): Promise<void> {
|
||||
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',
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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, '<span class="mention-highlight">@$1</span>')
|
||||
}
|
||||
return html
|
||||
})
|
||||
|
||||
function handleMarkdownClick(event: MouseEvent): void {
|
||||
void handleCodeBlockCopyClick(event)
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { NInput, NButton, NSpace, NInputNumber, NCollapse, NCollapseItem } from 'naive-ui'
|
||||
|
||||
type InputLikeInstance = {
|
||||
focus: () => void
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
const emit = defineEmits<{
|
||||
submit: [name: string, inviteCode: string, userName: string, description: string, compression: { triggerTokens: number; maxHistoryTokens: number; tailMessageCount: number }]
|
||||
cancel: []
|
||||
}>()
|
||||
|
||||
const roomName = ref('')
|
||||
const inviteCode = ref('')
|
||||
const userName = ref('')
|
||||
const description = ref('')
|
||||
const roomInput = ref<InputLikeInstance | null>(null)
|
||||
|
||||
const compression = ref({
|
||||
triggerTokens: 100000,
|
||||
maxHistoryTokens: 32000,
|
||||
tailMessageCount: 20,
|
||||
})
|
||||
|
||||
function generateCode(): string {
|
||||
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'
|
||||
let code = ''
|
||||
for (let i = 0; i < 6; i++) {
|
||||
code += chars[Math.floor(Math.random() * chars.length)]
|
||||
}
|
||||
return code
|
||||
}
|
||||
|
||||
function handleCreate() {
|
||||
const name = roomName.value.trim()
|
||||
const code = inviteCode.value.trim() || generateCode()
|
||||
const user = userName.value.trim()
|
||||
if (!name || !user) return
|
||||
emit('submit', name, code, user, description.value.trim(), { ...compression.value })
|
||||
}
|
||||
|
||||
function focusRoomInput() {
|
||||
nextTick(() => roomInput.value?.focus())
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="create-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ t('groupChat.yourName') }}</label>
|
||||
<NInput
|
||||
v-model:value="userName"
|
||||
:placeholder="t('groupChat.yourNamePlaceholder')"
|
||||
@keyup.enter="focusRoomInput"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ t('groupChat.yourDescription') }}</label>
|
||||
<NInput
|
||||
v-model:value="description"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
:placeholder="t('groupChat.yourDescriptionPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ t('groupChat.roomName') }}</label>
|
||||
<NInput
|
||||
ref="roomInput"
|
||||
v-model:value="roomName"
|
||||
:placeholder="t('groupChat.roomNamePlaceholder')"
|
||||
@keyup.enter="handleCreate"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ t('groupChat.inviteCode') }}</label>
|
||||
<div class="code-row">
|
||||
<NInput
|
||||
v-model:value="inviteCode"
|
||||
:placeholder="t('groupChat.autoGenerate')"
|
||||
/>
|
||||
<NButton size="small" @click="inviteCode = generateCode()">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
|
||||
</svg>
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NCollapse class="compression-collapse">
|
||||
<NCollapseItem :title="t('groupChat.compressionSettings')" name="compression">
|
||||
<div class="compression-fields">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ t('groupChat.triggerTokens') }}</label>
|
||||
<NInputNumber v-model:value="compression.triggerTokens" :min="1000" :step="1000" style="width: 100%" />
|
||||
<p class="form-hint">{{ t('groupChat.triggerTokensDesc') }}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ t('groupChat.maxHistoryTokens') }}</label>
|
||||
<NInputNumber v-model:value="compression.maxHistoryTokens" :min="1000" :step="1000" style="width: 100%" />
|
||||
<p class="form-hint">{{ t('groupChat.maxHistoryTokensDesc') }}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ t('groupChat.tailMessageCount') }}</label>
|
||||
<NInputNumber v-model:value="compression.tailMessageCount" :min="1" :step="5" style="width: 100%" />
|
||||
<p class="form-hint">{{ t('groupChat.tailMessageCountDesc') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</NCollapseItem>
|
||||
</NCollapse>
|
||||
|
||||
<div class="modal-actions">
|
||||
<NSpace justify="end">
|
||||
<NButton @click="emit('cancel')">{{ t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" :disabled="!roomName.trim() || !userName.trim()" @click="handleCreate">{{ t('common.create') }}</NButton>
|
||||
</NSpace>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/styles/variables" as *;
|
||||
|
||||
.create-form {
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: $text-secondary;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.code-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.compression-collapse {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.compression-fields {
|
||||
padding-top: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,321 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { NButton, NDropdown } from 'naive-ui'
|
||||
import { useGroupChatStore } from '@/stores/hermes/group-chat'
|
||||
import type { DropdownOption } from 'naive-ui'
|
||||
|
||||
const { t } = useI18n()
|
||||
const emit = defineEmits<{ send: [content: string] }>()
|
||||
const store = useGroupChatStore()
|
||||
|
||||
const inputText = ref('')
|
||||
const textareaRef = ref<HTMLTextAreaElement>()
|
||||
const isComposing = ref(false)
|
||||
|
||||
// ─── Mention State ───────────────────────────────────────
|
||||
|
||||
const mentionActive = ref(false)
|
||||
const mentionQuery = ref('')
|
||||
const mentionStartIndex = ref(-1)
|
||||
const dropdownX = ref(0)
|
||||
const dropdownY = ref(0)
|
||||
const activeIndex = ref(0)
|
||||
|
||||
const filteredAgents = computed(() => {
|
||||
const query = mentionQuery.value.toLowerCase()
|
||||
return store.agents.filter(a => a.name.toLowerCase().includes(query))
|
||||
})
|
||||
|
||||
const dropdownOptions = computed<DropdownOption[]>(() => {
|
||||
return filteredAgents.value.map((a, i) => ({
|
||||
label: `${a.name} (${a.profile})`,
|
||||
key: a.name,
|
||||
index: i,
|
||||
}))
|
||||
})
|
||||
|
||||
const canSend = computed(() => !!inputText.value.trim())
|
||||
|
||||
// ─── Mention Logic ───────────────────────────────────────
|
||||
|
||||
function updateMentionState() {
|
||||
const el = textareaRef.value
|
||||
if (!el) { mentionActive.value = false; return }
|
||||
|
||||
const text = inputText.value
|
||||
const cursorPos = el.selectionStart
|
||||
|
||||
// Find the last @ before the cursor
|
||||
let atPos = -1
|
||||
for (let i = cursorPos - 1; i >= 0; i--) {
|
||||
if (text[i] === '@') { atPos = i; break }
|
||||
if (text[i] === ' ' || text[i] === '\n') break
|
||||
}
|
||||
|
||||
if (atPos === -1) {
|
||||
mentionActive.value = false
|
||||
return
|
||||
}
|
||||
|
||||
// Make sure the @ is not part of a word (preceded by space or start of line)
|
||||
if (atPos > 0 && text[atPos - 1] !== ' ' && text[atPos - 1] !== '\n') {
|
||||
mentionActive.value = false
|
||||
return
|
||||
}
|
||||
|
||||
const query = text.slice(atPos + 1, cursorPos)
|
||||
if (query.includes(' ')) {
|
||||
mentionActive.value = false
|
||||
return
|
||||
}
|
||||
|
||||
mentionQuery.value = query
|
||||
mentionStartIndex.value = atPos
|
||||
activeIndex.value = 0
|
||||
|
||||
// Calculate dropdown position using mirror span
|
||||
const mirror = document.createElement('span')
|
||||
const style = getComputedStyle(el)
|
||||
const props = ['fontFamily', 'fontSize', 'fontWeight', 'letterSpacing', 'textTransform', 'wordSpacing', 'textIndent', 'border', 'padding', 'boxSizing', 'lineHeight']
|
||||
props.forEach(p => { (mirror.style as any)[p] = style[p as any] })
|
||||
mirror.style.position = 'absolute'
|
||||
mirror.style.visibility = 'hidden'
|
||||
mirror.style.whiteSpace = 'nowrap'
|
||||
mirror.textContent = text.slice(0, atPos + 1)
|
||||
|
||||
const rect = el.getBoundingClientRect()
|
||||
document.body.appendChild(mirror)
|
||||
const mirrorRect = mirror.getBoundingClientRect()
|
||||
document.body.removeChild(mirror)
|
||||
|
||||
dropdownX.value = rect.left + mirrorRect.width - el.scrollLeft
|
||||
// Estimate Y based on newlines before @ and line height
|
||||
const linesBeforeAt = text.slice(0, atPos + 1).split('\n').length - 1
|
||||
const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.2
|
||||
dropdownY.value = rect.top + linesBeforeAt * lineHeight - el.scrollTop + lineHeight + 4
|
||||
|
||||
mentionActive.value = filteredAgents.value.length > 0
|
||||
}
|
||||
|
||||
function selectMention(name: string) {
|
||||
const el = textareaRef.value
|
||||
if (!el || mentionStartIndex.value === -1) return
|
||||
|
||||
const before = inputText.value.slice(0, mentionStartIndex.value)
|
||||
const after = inputText.value.slice(el.selectionStart)
|
||||
inputText.value = `${before}@${name} ${after}`
|
||||
mentionActive.value = false
|
||||
|
||||
nextTick(() => {
|
||||
if (el) {
|
||||
const newPos = before.length + name.length + 2
|
||||
el.setSelectionRange(newPos, newPos)
|
||||
el.focus()
|
||||
el.style.height = 'auto'
|
||||
el.style.height = Math.min(el.scrollHeight, 100) + 'px'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Event Handlers ──────────────────────────────────────
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
// Mention navigation
|
||||
if (mentionActive.value && filteredAgents.value.length > 0) {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
activeIndex.value = (activeIndex.value + 1) % filteredAgents.value.length
|
||||
return
|
||||
}
|
||||
if (e.key === 'ArrowUp') {
|
||||
e.preventDefault()
|
||||
activeIndex.value = (activeIndex.value - 1 + filteredAgents.value.length) % filteredAgents.value.length
|
||||
return
|
||||
}
|
||||
if (e.key === 'Enter' || e.key === 'Tab') {
|
||||
e.preventDefault()
|
||||
selectMention(filteredAgents.value[activeIndex.value].name)
|
||||
return
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault()
|
||||
mentionActive.value = false
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (e.key !== 'Enter' || e.shiftKey) return
|
||||
if (isComposing.value || e.isComposing || e.keyCode === 229) return
|
||||
e.preventDefault()
|
||||
handleSend()
|
||||
}
|
||||
|
||||
function handleSend() {
|
||||
const content = inputText.value.trim()
|
||||
if (!content) return
|
||||
|
||||
emit('send', content)
|
||||
inputText.value = ''
|
||||
mentionActive.value = false
|
||||
|
||||
nextTick(() => {
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.style.height = 'auto'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleInput(e: Event) {
|
||||
store.emitTyping()
|
||||
const el = e.target as HTMLTextAreaElement
|
||||
el.style.height = 'auto'
|
||||
el.style.height = Math.min(el.scrollHeight, 100) + 'px'
|
||||
|
||||
if (!isComposing.value) {
|
||||
updateMentionState()
|
||||
}
|
||||
}
|
||||
|
||||
function handleDropdownSelect(key: string) {
|
||||
selectMention(key)
|
||||
}
|
||||
|
||||
function handleDropdownClickOutside() {
|
||||
mentionActive.value = false
|
||||
}
|
||||
|
||||
function handleCompositionStart() {
|
||||
isComposing.value = true
|
||||
}
|
||||
|
||||
function handleCompositionEnd() {
|
||||
requestAnimationFrame(() => {
|
||||
isComposing.value = false
|
||||
updateMentionState()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-input-area">
|
||||
<div class="input-wrapper">
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
v-model="inputText"
|
||||
class="input-textarea"
|
||||
:placeholder="t('groupChat.inputPlaceholder')"
|
||||
rows="1"
|
||||
@keydown="handleKeydown"
|
||||
@compositionstart="handleCompositionStart"
|
||||
@compositionend="handleCompositionEnd"
|
||||
@input="handleInput"
|
||||
/>
|
||||
<div class="input-actions">
|
||||
<NButton
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="!canSend"
|
||||
@click="handleSend"
|
||||
>
|
||||
<template #icon>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||||
</template>
|
||||
{{ t('chat.send') }}
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
<NDropdown
|
||||
placement="top-start"
|
||||
trigger="manual"
|
||||
:x="dropdownX"
|
||||
:y="dropdownY"
|
||||
:options="dropdownOptions"
|
||||
:show="mentionActive"
|
||||
:render-icon="() => null"
|
||||
@select="handleDropdownSelect"
|
||||
@clickoutside="handleDropdownClickOutside"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/styles/variables" as *;
|
||||
|
||||
.chat-input-area {
|
||||
padding: 20px 20px 16px;
|
||||
border-top: 1px solid $border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.typing-dots {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: $text-muted;
|
||||
animation: typing-bounce 1.2s infinite;
|
||||
|
||||
&:nth-child(2) { animation-delay: 0.2s; }
|
||||
&:nth-child(3) { animation-delay: 0.4s; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing-bounce {
|
||||
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
|
||||
30% { transform: translateY(-3px); opacity: 1; }
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background-color: $bg-input;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $radius-md;
|
||||
padding: 10px 12px;
|
||||
transition: border-color $transition-fast, background-color $transition-fast;
|
||||
|
||||
&:focus-within {
|
||||
border-color: $accent-primary;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
background-color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.input-textarea {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: $text-primary;
|
||||
font-family: $font-ui;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
resize: none;
|
||||
max-height: 100px;
|
||||
min-height: 20px;
|
||||
overflow-y: auto;
|
||||
|
||||
&::placeholder {
|
||||
color: $text-muted;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,896 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useMessage, NInput, NButton, NSpace, NSelect, NPopover, NPopconfirm, NInputNumber } from 'naive-ui'
|
||||
import multiavatar from '@multiavatar/multiavatar'
|
||||
import { useGroupChatStore } from '@/stores/hermes/group-chat'
|
||||
import { useProfilesStore } from '@/stores/hermes/profiles'
|
||||
import { updateRoomConfig, forceCompress } from '@/api/hermes/group-chat'
|
||||
import GroupMessageList from './GroupMessageList.vue'
|
||||
import GroupChatInput from './GroupChatInput.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
const store = useGroupChatStore()
|
||||
const profilesStore = useProfilesStore()
|
||||
|
||||
const showSidebar = ref(true)
|
||||
const showCreateModal = ref(false)
|
||||
const showAddAgentModal = ref(false)
|
||||
const showCompressionModal = ref(false)
|
||||
const compressionConfig = ref({ triggerTokens: 100000, maxHistoryTokens: 32000, tailMessageCount: 20 })
|
||||
const isCompressing = ref(false)
|
||||
const selectedProfile = ref<string | null>(null)
|
||||
const agentName = ref('')
|
||||
const agentDescription = ref('')
|
||||
|
||||
const profileOptions = computed(() =>
|
||||
profilesStore.profiles.map(p => ({ label: p.name, value: p.name }))
|
||||
)
|
||||
|
||||
const avatarCache = new Map<string, string>()
|
||||
|
||||
function agentAvatarUrl(name: string): string {
|
||||
if (avatarCache.has(name)) return avatarCache.get(name)!
|
||||
const uri = multiavatar(name)
|
||||
avatarCache.set(name, uri)
|
||||
return uri
|
||||
}
|
||||
|
||||
const hasRoom = computed(() => !!store.currentRoomId)
|
||||
|
||||
function formatTokens(tokens: number): string {
|
||||
if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}k tokens`
|
||||
return `${tokens} tokens`
|
||||
}
|
||||
|
||||
function toggleSidebar() {
|
||||
showSidebar.value = !showSidebar.value
|
||||
}
|
||||
|
||||
async function handleCreateRoom(name: string, inviteCode: string, userName: string, description: string, compression: { triggerTokens: number; maxHistoryTokens: number; tailMessageCount: number }) {
|
||||
try {
|
||||
store.setUserInfo(userName, description)
|
||||
const res = await store.createNewRoom(name, inviteCode, undefined, compression)
|
||||
showCreateModal.value = false
|
||||
message.success(t('groupChat.roomCreated'))
|
||||
await store.joinRoom(res.room.id)
|
||||
} catch {
|
||||
message.error(t('common.saveFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteRoom(roomId: string) {
|
||||
try {
|
||||
await store.deleteRoom(roomId)
|
||||
message.success(t('groupChat.roomDeleted'))
|
||||
} catch {
|
||||
message.error(t('common.saveFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSelectRoom(roomId: string) {
|
||||
try {
|
||||
await store.joinRoom(roomId)
|
||||
} catch {
|
||||
message.error(t('groupChat.joinFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSendMessage(content: string) {
|
||||
try {
|
||||
await store.sendMessage(content)
|
||||
} catch (err: any) {
|
||||
message.error(err.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAddAgent() {
|
||||
await profilesStore.fetchProfiles()
|
||||
showAddAgentModal.value = true
|
||||
}
|
||||
|
||||
async function confirmAddAgent() {
|
||||
if (!selectedProfile.value || !store.currentRoomId) return
|
||||
try {
|
||||
await store.addAgentToRoom(store.currentRoomId, {
|
||||
profile: selectedProfile.value,
|
||||
name: agentName.value.trim() || undefined,
|
||||
description: agentDescription.value.trim() || undefined,
|
||||
})
|
||||
showAddAgentModal.value = false
|
||||
selectedProfile.value = null
|
||||
agentName.value = ''
|
||||
agentDescription.value = ''
|
||||
message.success(t('groupChat.agentAdded'))
|
||||
} catch (err: any) {
|
||||
if (err.message?.includes('already')) {
|
||||
message.warning(t('groupChat.agentAlreadyInRoom'))
|
||||
} else {
|
||||
message.error(t('common.saveFailed'))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleOpenCompressionConfig() {
|
||||
const room = store.rooms.find(r => r.id === store.currentRoomId)
|
||||
if (room) {
|
||||
compressionConfig.value = {
|
||||
triggerTokens: room.triggerTokens ?? 100000,
|
||||
maxHistoryTokens: room.maxHistoryTokens ?? 32000,
|
||||
tailMessageCount: room.tailMessageCount ?? 20,
|
||||
}
|
||||
}
|
||||
showCompressionModal.value = true
|
||||
}
|
||||
|
||||
async function handleSaveCompressionConfig() {
|
||||
if (!store.currentRoomId) return
|
||||
try {
|
||||
const res = await updateRoomConfig(store.currentRoomId, { ...compressionConfig.value })
|
||||
const idx = store.rooms.findIndex(r => r.id === store.currentRoomId)
|
||||
if (idx >= 0 && res.room) store.rooms[idx] = res.room
|
||||
showCompressionModal.value = false
|
||||
message.success(t('groupChat.compressionSaved'))
|
||||
} catch {
|
||||
message.error(t('common.saveFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
async function handleForceCompress() {
|
||||
if (!store.currentRoomId || isCompressing.value) return
|
||||
if (store.contextStatuses.size > 0) {
|
||||
message.warning(t('groupChat.compressingInProgress'))
|
||||
return
|
||||
}
|
||||
isCompressing.value = true
|
||||
try {
|
||||
await forceCompress(store.currentRoomId)
|
||||
message.success(t('groupChat.compressionSaved'))
|
||||
} catch {
|
||||
message.error(t('common.saveFailed'))
|
||||
} finally {
|
||||
isCompressing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemoveAgent(agentId: string) {
|
||||
if (!store.currentRoomId) return
|
||||
try {
|
||||
await store.removeAgentFromRoom(store.currentRoomId, agentId)
|
||||
} catch {
|
||||
message.error(t('common.deleteFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-scroll on new messages
|
||||
const messageListRef = ref()
|
||||
watch(() => store.sortedMessages.length, async () => {
|
||||
await nextTick()
|
||||
messageListRef.value?.scrollToBottom()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="group-chat-panel">
|
||||
<!-- Room sidebar -->
|
||||
<div v-if="showSidebar" class="room-sidebar">
|
||||
<div class="sidebar-header">
|
||||
<span class="sidebar-title">{{ t('groupChat.title') }}</span>
|
||||
<div class="sidebar-actions">
|
||||
<button class="icon-btn" :title="t('groupChat.createRoom')" @click="showCreateModal = true">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-list">
|
||||
<div
|
||||
v-for="room in store.rooms"
|
||||
:key="room.id"
|
||||
class="room-item"
|
||||
:class="{ active: store.currentRoomId === room.id }"
|
||||
@click="handleSelectRoom(room.id)"
|
||||
>
|
||||
<svg class="room-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
</svg>
|
||||
<div class="room-info">
|
||||
<span class="room-name">{{ room.name || room.id }}</span>
|
||||
<span v-if="room.inviteCode" class="room-code">{{ room.inviteCode }}</span>
|
||||
<span class="room-tokens">{{ formatTokens(room.totalTokens || 0) }}</span>
|
||||
</div>
|
||||
<NPopconfirm @positive-click="handleDeleteRoom(room.id)">
|
||||
<template #trigger>
|
||||
<button class="room-delete-btn" @click.stop>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</template>
|
||||
{{ t('groupChat.deleteRoomConfirm') }}
|
||||
</NPopconfirm>
|
||||
</div>
|
||||
<div v-if="store.rooms.length === 0" class="empty-rooms">
|
||||
{{ t('groupChat.noRooms') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main chat area -->
|
||||
<div class="chat-main">
|
||||
<div class="chat-header">
|
||||
<button class="icon-btn" @click="toggleSidebar">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><line x1="9" y1="3" x2="9" y2="21" />
|
||||
</svg>
|
||||
</button>
|
||||
<span class="room-title-text">{{ store.roomName || (store.currentRoomId || t('groupChat.title')) }}</span>
|
||||
<div class="header-info">
|
||||
<!-- Stacked avatars (user + agents) -->
|
||||
<NPopover v-if="store.agents.length" trigger="click" placement="bottom-end" :width="220">
|
||||
<template #trigger>
|
||||
<div class="avatar-stack-inner">
|
||||
<!-- User avatar first -->
|
||||
<span class="avatar-stack-item" :style="{ zIndex: store.agents.length + 1 }">
|
||||
<span class="agent-avatar" v-html="agentAvatarUrl(store.userName || store.userId)" />
|
||||
</span>
|
||||
<span
|
||||
v-for="(agent, index) in store.agents.slice(-4)"
|
||||
:key="agent.id"
|
||||
class="avatar-stack-item"
|
||||
:style="{ zIndex: store.agents.length - index }"
|
||||
>
|
||||
<span class="agent-avatar" v-html="agentAvatarUrl(agent.name)" />
|
||||
</span>
|
||||
<span v-if="store.agents.length > 4" class="avatar-stack-more">+{{ store.agents.length - 4 }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="agent-popover">
|
||||
<div class="agent-popover-item" style="margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--n-border-color, #efeff5);">
|
||||
<span class="agent-avatar" v-html="agentAvatarUrl(store.userName || store.userId)" />
|
||||
<div class="agent-popover-info">
|
||||
<span class="agent-popover-name">{{ store.userName || 'You' }}</span>
|
||||
<span class="agent-popover-profile">{{ t('groupChat.you') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agent-popover-title">{{ t('groupChat.agents') }} ({{ store.agents.length }})</div>
|
||||
<div v-for="agent in store.agents" :key="agent.id" class="agent-popover-item">
|
||||
<span class="agent-avatar" v-html="agentAvatarUrl(agent.name)" />
|
||||
<div class="agent-popover-info">
|
||||
<span class="agent-popover-name">{{ agent.name }}</span>
|
||||
<span class="agent-popover-profile">{{ agent.profile }}</span>
|
||||
</div>
|
||||
<button class="agent-popover-remove" @click="handleRemoveAgent(agent.id)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</NPopover>
|
||||
<!-- Only user avatar, no agents -->
|
||||
<div v-else-if="store.userName" class="avatar-stack-inner">
|
||||
<span class="avatar-stack-item">
|
||||
<span class="agent-avatar" v-html="agentAvatarUrl(store.userName || store.userId)" />
|
||||
</span>
|
||||
</div>
|
||||
<button class="icon-btn" :title="t('groupChat.addAgent')" @click="handleAddAgent">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</button>
|
||||
<button class="icon-btn" :title="t('groupChat.compressionConfig')" @click="handleOpenCompressionConfig">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 4.6a1.65 1.65 0 0 0 1.51 1V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1.51 1z"/></svg>
|
||||
</button>
|
||||
<span v-if="store.members.length" class="member-count">
|
||||
{{ store.members.length }} {{ t('groupChat.members') }}
|
||||
</span>
|
||||
<span class="connection-dot" :class="{ connected: store.connected, disconnected: !store.connected }"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="hasRoom">
|
||||
<GroupMessageList ref="messageListRef" />
|
||||
<div v-if="store.contextStatuses.size > 0 || (store.typingText && store.contextStatuses.size === 0)" class="status-bar">
|
||||
<div v-if="store.contextStatuses.size > 0" class="context-status-list">
|
||||
<div v-for="[name, status] in store.contextStatuses" :key="name" class="context-status">
|
||||
<span class="typing-dots">
|
||||
<span /><span /><span />
|
||||
</span>
|
||||
<span v-if="status.status === 'compressing'">
|
||||
@{{ status.agentName }} {{ t('groupChat.agentCompressing') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
@{{ status.agentName }} {{ t('groupChat.agentReplying') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="store.typingText" class="typing-indicator">
|
||||
<span class="typing-dots">
|
||||
<span /><span /><span />
|
||||
</span>
|
||||
{{ store.typingText }}
|
||||
</div>
|
||||
</div>
|
||||
<GroupChatInput @send="handleSendMessage" />
|
||||
</template>
|
||||
|
||||
<div v-else class="no-room">
|
||||
<div class="no-room-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p>{{ t('groupChat.selectOrCreate') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create room modal -->
|
||||
<Teleport to="body">
|
||||
<div v-if="showCreateModal" class="modal-backdrop" @click.self="showCreateModal = false">
|
||||
<div class="modal">
|
||||
<h3>{{ t('groupChat.createRoom') }}</h3>
|
||||
<CreateRoomForm @submit="handleCreateRoom" @cancel="showCreateModal = false" />
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="showAddAgentModal" class="modal-backdrop" @click.self="showAddAgentModal = false">
|
||||
<div class="modal">
|
||||
<h3>{{ t('groupChat.addAgent') }}</h3>
|
||||
<div class="form-group">
|
||||
<NSelect
|
||||
v-model:value="selectedProfile"
|
||||
:options="profileOptions"
|
||||
:placeholder="t('groupChat.selectProfile')"
|
||||
filterable
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ t('groupChat.agentName') }}</label>
|
||||
<NInput
|
||||
v-model:value="agentName"
|
||||
:placeholder="t('groupChat.agentNamePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ t('groupChat.agentDesc') }}</label>
|
||||
<NInput
|
||||
v-model:value="agentDescription"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
:placeholder="t('groupChat.agentDescPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<NSpace justify="end">
|
||||
<NButton @click="showAddAgentModal = false">{{ t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" :disabled="!selectedProfile" @click="confirmAddAgent">{{ t('common.add') }}</NButton>
|
||||
</NSpace>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showCompressionModal" class="modal-backdrop" @click.self="showCompressionModal = false">
|
||||
<div class="modal">
|
||||
<h3>{{ t('groupChat.compressionConfig') }}</h3>
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ t('groupChat.triggerTokens') }}</label>
|
||||
<NInputNumber v-model:value="compressionConfig.triggerTokens" :min="1000" :step="10000" style="width: 100%" />
|
||||
<p class="form-hint">{{ t('groupChat.triggerTokensDesc') }}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ t('groupChat.maxHistoryTokens') }}</label>
|
||||
<NInputNumber v-model:value="compressionConfig.maxHistoryTokens" :min="1000" :step="1000" style="width: 100%" />
|
||||
<p class="form-hint">{{ t('groupChat.maxHistoryTokensDesc') }}</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ t('groupChat.tailMessageCount') }}</label>
|
||||
<NInputNumber v-model:value="compressionConfig.tailMessageCount" :min="1" :step="5" style="width: 100%" />
|
||||
<p class="form-hint">{{ t('groupChat.tailMessageCountDesc') }}</p>
|
||||
</div>
|
||||
<div style="margin-top: 8px">
|
||||
<NButton
|
||||
block
|
||||
:disabled="isCompressing || store.contextStatuses.size > 0"
|
||||
:loading="isCompressing"
|
||||
@click="handleForceCompress"
|
||||
>
|
||||
{{ isCompressing ? t('groupChat.compressingInProgress') : t('groupChat.compressNow') }}
|
||||
</NButton>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<NSpace justify="end">
|
||||
<NButton @click="showCompressionModal = false">{{ t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" @click="handleSaveCompressionConfig">{{ t('common.save') }}</NButton>
|
||||
</NSpace>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import CreateRoomForm from './CreateRoomForm.vue'
|
||||
|
||||
export default defineComponent({ components: { CreateRoomForm } })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/styles/variables" as *;
|
||||
|
||||
.group-chat-panel {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ─── Status Bar ──────────────────────────────────────────
|
||||
|
||||
.status-bar {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 20px;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.context-status-list {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.context-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
color: $text-secondary;
|
||||
background-color: $bg-card-hover;
|
||||
border-radius: $radius-sm;
|
||||
|
||||
.dark & {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.typing-dots {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: $text-muted;
|
||||
animation: typing-bounce 1.2s infinite;
|
||||
|
||||
&:nth-child(2) { animation-delay: 0.2s; }
|
||||
&:nth-child(3) { animation-delay: 0.4s; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing-bounce {
|
||||
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
|
||||
30% { transform: translateY(-3px); opacity: 1; }
|
||||
}
|
||||
|
||||
// ─── Room Sidebar ────────────────────────────────────────
|
||||
|
||||
.room-sidebar {
|
||||
width: 220px;
|
||||
flex-shrink: 0;
|
||||
background-color: $bg-sidebar;
|
||||
border-right: 1px solid $border-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.sidebar-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.room-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.room-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border-radius: $radius-sm;
|
||||
cursor: pointer;
|
||||
transition: background-color $transition-fast;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--accent-primary-rgb), 0.06);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(var(--accent-primary-rgb), 0.12);
|
||||
}
|
||||
|
||||
.room-icon {
|
||||
color: $text-muted;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.room-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.room-name {
|
||||
font-size: 13px;
|
||||
color: $text-primary;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.room-code {
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
font-family: $font-code;
|
||||
}
|
||||
|
||||
.room-tokens {
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.room-delete-btn {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: $text-muted;
|
||||
cursor: pointer;
|
||||
border-radius: $radius-sm;
|
||||
opacity: 0;
|
||||
transition: opacity $transition-fast, color $transition-fast, background-color $transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: $error;
|
||||
background-color: rgba(var(--error-rgb), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .room-delete-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-rooms {
|
||||
padding: 20px 12px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
// ─── Chat Main ──────────────────────────────────────────
|
||||
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 21px 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
.room-title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.member-count {
|
||||
font-size: 12px;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Header Avatar Stack ──────────────────────────────
|
||||
|
||||
.avatar-stack {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-stack-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-stack-item {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $bg-card;
|
||||
margin-left: -12px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $bg-secondary;
|
||||
transition: transform $transition-fast;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
z-index: 100 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-stack-more {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $bg-card;
|
||||
margin-left: -12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $bg-secondary;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.agent-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
:deep(svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Agent Popover ─────────────────────────────────────
|
||||
|
||||
.agent-popover {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.agent-popover-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $text-muted;
|
||||
padding: 0 0 8px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.agent-popover-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 4px;
|
||||
border-radius: $radius-sm;
|
||||
transition: background-color $transition-fast;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--accent-primary-rgb), 0.06);
|
||||
}
|
||||
|
||||
.agent-popover-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.agent-popover-name {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: $text-primary;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.agent-popover-profile {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.agent-popover-remove {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: $radius-sm;
|
||||
color: $text-muted;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: all $transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: $error;
|
||||
background-color: rgba(200, 50, 50, 0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── No Room State ────────────────────────────────────────
|
||||
|
||||
.no-room {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
color: $text-muted;
|
||||
|
||||
.no-room-icon {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Shared ──────────────────────────────────────────────
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: $radius-sm;
|
||||
color: $text-secondary;
|
||||
cursor: pointer;
|
||||
transition: all $transition-fast;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--accent-primary-rgb), 0.08);
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: $bg-card;
|
||||
border-radius: $radius-lg;
|
||||
padding: 24px;
|
||||
width: 400px;
|
||||
max-width: 90vw;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
// ─── Connection Dot ──────────────────────────────────────
|
||||
|
||||
.connection-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.connected {
|
||||
background-color: $success;
|
||||
box-shadow: 0 0 6px rgba(var(--success-rgb), 0.5);
|
||||
}
|
||||
|
||||
&.disconnected {
|
||||
background-color: $error;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Mobile ──────────────────────────────────────────────
|
||||
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
.room-sidebar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import multiavatar from '@multiavatar/multiavatar'
|
||||
import MarkdownRenderer from '../chat/MarkdownRenderer.vue'
|
||||
import type { ChatMessage, RoomAgent } from '@/api/hermes/group-chat'
|
||||
|
||||
const props = defineProps<{
|
||||
message: ChatMessage
|
||||
agents: RoomAgent[]
|
||||
currentUserId?: string
|
||||
}>()
|
||||
|
||||
const isAgent = computed(() => {
|
||||
return props.agents.some(a => a.agentId === props.message.senderId)
|
||||
})
|
||||
|
||||
const isSelf = computed(() => {
|
||||
return !!props.currentUserId && props.message.senderId === props.currentUserId
|
||||
})
|
||||
|
||||
const agentInfo = computed(() => {
|
||||
return props.agents.find(a => a.agentId === props.message.senderId)
|
||||
})
|
||||
|
||||
const timeStr = computed(() => {
|
||||
const d = new Date(props.message.timestamp)
|
||||
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
})
|
||||
|
||||
const avatarSvg = computed(() => {
|
||||
return multiavatar(props.message.senderName || props.message.senderId)
|
||||
})
|
||||
|
||||
const mentionNames = computed(() => props.agents.map(a => a.name).filter(Boolean))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="group-message" :class="{ agent: isAgent, self: isSelf }">
|
||||
<!-- Avatar -->
|
||||
<div class="avatar">
|
||||
<span v-html="avatarSvg" />
|
||||
</div>
|
||||
|
||||
<div class="msg-body">
|
||||
<div class="msg-header">
|
||||
<span class="sender-name">{{ message.senderName }}</span>
|
||||
<span v-if="isAgent && agentInfo?.description" class="agent-desc">{{ agentInfo.description }}</span>
|
||||
<span class="msg-time">{{ timeStr }}</span>
|
||||
</div>
|
||||
<div class="msg-content" :class="{ 'agent-content': isAgent }">
|
||||
<MarkdownRenderer :content="message.content" :mention-names="mentionNames" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/styles/variables" as *;
|
||||
|
||||
.group-message {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 2px 0;
|
||||
|
||||
&.agent,
|
||||
&.self {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.msg-body {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.msg-header {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
&.agent .msg-content.agent-content {
|
||||
background-color: rgba(var(--accent-primary-rgb), 0.06);
|
||||
}
|
||||
|
||||
&.self .msg-content {
|
||||
background-color: rgba(var(--accent-primary-rgb), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
|
||||
:deep(svg) {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.msg-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
.sender-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.agent-desc {
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
color: $text-primary;
|
||||
border-radius: 10px;
|
||||
background-color: $msg-user-bg;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
:deep(.mention-highlight) {
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick } from 'vue'
|
||||
import { useGroupChatStore } from '@/stores/hermes/group-chat'
|
||||
import GroupMessageItem from './GroupMessageItem.vue'
|
||||
|
||||
const store = useGroupChatStore()
|
||||
const listRef = ref<HTMLDivElement>()
|
||||
const isNearBottom = ref(true)
|
||||
|
||||
function checkNearBottom(): void {
|
||||
if (!listRef.value) return
|
||||
const { scrollTop, scrollHeight, clientHeight } = listRef.value
|
||||
isNearBottom.value = scrollHeight - scrollTop - clientHeight < 200
|
||||
}
|
||||
|
||||
function scrollToBottom(): void {
|
||||
if (!listRef.value) return
|
||||
listRef.value.scrollTop = listRef.value.scrollHeight
|
||||
}
|
||||
|
||||
function handleScroll(): void {
|
||||
checkNearBottom()
|
||||
}
|
||||
|
||||
watch(() => store.messages.length, async () => {
|
||||
await nextTick()
|
||||
if (isNearBottom.value) {
|
||||
scrollToBottom()
|
||||
}
|
||||
})
|
||||
|
||||
defineExpose({ scrollToBottom })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="listRef" class="message-list" @scroll="handleScroll">
|
||||
<div v-if="store.sortedMessages.length === 0" class="empty-state">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
</svg>
|
||||
<p>No messages yet</p>
|
||||
</div>
|
||||
<GroupMessageItem
|
||||
v-for="msg in store.sortedMessages"
|
||||
:key="msg.id"
|
||||
:message="msg"
|
||||
:agents="store.agents"
|
||||
:current-user-id="store.userId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/styles/variables" as *;
|
||||
|
||||
.message-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: $text-muted;
|
||||
opacity: 0.4;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -65,21 +65,39 @@ function openChangelog() {
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<!-- Chat (standalone) -->
|
||||
<button class="nav-item" :class="{ active: selectedKey === 'hermes.chat' }" @click="handleNav('hermes.chat')">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
</svg>
|
||||
<span>{{ t("sidebar.chat") }}</span>
|
||||
</button>
|
||||
|
||||
<button class="nav-item" @click="openSessionSearch">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="7" />
|
||||
<path d="m20 20-3.5-3.5" />
|
||||
</svg>
|
||||
<span>{{ t("sidebar.search") }}</span>
|
||||
</button>
|
||||
<!-- Conversation -->
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-label" @click="toggleGroup('conversation')">
|
||||
<span>{{ t("sidebar.groupConversation") }}</span>
|
||||
<svg class="nav-group-arrow" :class="{ collapsed: isGroupCollapsed('conversation') }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</div>
|
||||
<div v-show="!isGroupCollapsed('conversation')">
|
||||
<button class="nav-item" :class="{ active: selectedKey === 'hermes.chat' }" @click="handleNav('hermes.chat')">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
</svg>
|
||||
<span>{{ t("sidebar.chat") }}</span>
|
||||
</button>
|
||||
<button class="nav-item" :class="{ active: selectedKey === 'hermes.groupChat' }" @click="handleNav('hermes.groupChat')">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
<span>{{ t("sidebar.groupChat") }}<span class="beta-tag">(beta)</span></span>
|
||||
</button>
|
||||
<button class="nav-item" @click="openSessionSearch">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="7" />
|
||||
<path d="m20 20-3.5-3.5" />
|
||||
</svg>
|
||||
<span>{{ t("sidebar.search") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent -->
|
||||
<div class="nav-group">
|
||||
@@ -430,6 +448,12 @@ function openChangelog() {
|
||||
background-color: rgba(var(--accent-primary-rgb), 0.12);
|
||||
color: $accent-primary;
|
||||
}
|
||||
|
||||
.beta-tag {
|
||||
font-size: 10px;
|
||||
color: $text-muted;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
|
||||
@@ -17,7 +17,7 @@ export const changelog: ChangelogEntry[] = [
|
||||
},
|
||||
{
|
||||
version: '0.4.2',
|
||||
date: '2026-03-20',
|
||||
date: '2026-04-22',
|
||||
changes: ['changelog.new_0_4_2_1', 'changelog.new_0_4_2_2', 'changelog.new_0_4_2_3', 'changelog.new_0_4_2_4', 'changelog.new_0_4_2_5'],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -48,6 +48,7 @@ export default {
|
||||
update: 'Aktualisieren',
|
||||
create: 'Erstellen',
|
||||
saveFailed: 'Speichern fehlgeschlagen',
|
||||
deleteFailed: 'Loschen fehlgeschlagen',
|
||||
ok: 'OK',
|
||||
copied: 'Kopiert',
|
||||
copy: 'Kopieren',
|
||||
@@ -76,6 +77,8 @@ export default {
|
||||
channels: 'Kanale',
|
||||
terminal: 'Terminal',
|
||||
files: 'Dateien',
|
||||
groupChat: 'Gruppenchat',
|
||||
groupConversation: 'Konversation',
|
||||
settings: 'Einstellungen',
|
||||
connected: 'Verbunden',
|
||||
disconnected: 'Getrennt',
|
||||
@@ -579,6 +582,55 @@ export default {
|
||||
saveFile: 'Speichern',
|
||||
},
|
||||
|
||||
// Gruppenchat
|
||||
groupChat: {
|
||||
title: 'Gruppenchat',
|
||||
createRoom: 'Raum erstellen',
|
||||
joinByCode: 'Mit Code beitreten',
|
||||
roomName: 'Raumname',
|
||||
roomNamePlaceholder: 'Raumnamen eingeben',
|
||||
inviteCode: 'Einladungscode',
|
||||
autoGenerate: 'Automatisch generieren',
|
||||
noRooms: 'Noch keine Raume',
|
||||
selectOrCreate: 'Wahlen oder erstellen Sie einen Raum, um zu chatten',
|
||||
agents: 'Agenten',
|
||||
addAgent: 'Agent hinzufugen',
|
||||
selectProfile: 'Wahlen Sie ein Profil',
|
||||
agentAdded: 'Agent hinzugefugt',
|
||||
agentAlreadyInRoom: 'Agent ist bereits in diesem Raum',
|
||||
noAgents: 'Keine Agenten in diesem Raum',
|
||||
members: 'Mitglieder',
|
||||
roomCreated: 'Raum erstellt',
|
||||
roomDeleted: 'Raum gelöscht',
|
||||
deleteRoomConfirm: 'Diesen Raum löschen?',
|
||||
you: 'Du',
|
||||
joined: 'Raum beigetreten',
|
||||
joinFailed: 'Beitreten fehlgeschlagen',
|
||||
inputPlaceholder: 'Nachricht eingeben... (Enter zum Senden)',
|
||||
enterCode: 'Einladungscode eingeben',
|
||||
yourName: 'Dein Name',
|
||||
yourNamePlaceholder: 'Gib deinen Anzeigenamen ein',
|
||||
yourDescription: 'Beschreibung (optional)',
|
||||
yourDescriptionPlaceholder: 'Erzahl anderen wer du bist...',
|
||||
agentName: 'Agent-Name',
|
||||
agentNamePlaceholder: 'Benutzerdefinierter Name (leer = Profilname)',
|
||||
agentDesc: 'Agent-Beschreibung',
|
||||
agentDescPlaceholder: 'Beschreiben Sie, was dieser Agent tut...',
|
||||
agentReplying: 'antwortet...',
|
||||
agentCompressing: 'komprimiert Kontext...',
|
||||
compressionSettings: 'Komprimierungseinstellungen',
|
||||
triggerTokens: 'Trigger-Token',
|
||||
triggerTokensDesc: 'Token-Schwelle für Kontextkomprimierung',
|
||||
maxHistoryTokens: 'Max. Verlaufs-Token',
|
||||
maxHistoryTokensDesc: 'Maximale Token für komprimierten Kontext',
|
||||
tailMessageCount: 'Nachrichten am Ende',
|
||||
tailMessageCountDesc: 'Anzahl der letzten Nachrichten, die unverändert bleiben',
|
||||
compressionConfig: 'Komprimierungskonfig',
|
||||
compressNow: 'Jetzt komprimieren',
|
||||
compressingInProgress: 'Komprimierung läuft, bitte warten',
|
||||
compressionSaved: 'Konfiguration gespeichert',
|
||||
},
|
||||
|
||||
// Download
|
||||
download: {
|
||||
downloading: 'Wird heruntergeladen...',
|
||||
|
||||
@@ -48,6 +48,7 @@ export default {
|
||||
update: 'Update',
|
||||
create: 'Create',
|
||||
saveFailed: 'Save failed',
|
||||
deleteFailed: 'Delete failed',
|
||||
ok: 'OK',
|
||||
copied: 'Copied',
|
||||
copy: 'Copy',
|
||||
@@ -79,6 +80,7 @@ export default {
|
||||
channels: 'Channels',
|
||||
gateways: 'Gateways',
|
||||
terminal: 'Terminal',
|
||||
groupChat: 'Group Chat',
|
||||
files: 'Files',
|
||||
groupConversation: 'Conversation',
|
||||
groupPlatform: 'Platform',
|
||||
@@ -535,6 +537,55 @@ export default {
|
||||
processExited: 'Process exited with code {code}',
|
||||
},
|
||||
|
||||
// Group Chat
|
||||
groupChat: {
|
||||
title: 'Group Chat',
|
||||
createRoom: 'Create Room',
|
||||
joinByCode: 'Join by Code',
|
||||
roomName: 'Room Name',
|
||||
roomNamePlaceholder: 'Enter room name',
|
||||
inviteCode: 'Invite Code',
|
||||
autoGenerate: 'Auto-generate',
|
||||
noRooms: 'No rooms yet',
|
||||
selectOrCreate: 'Select or create a room to start chatting',
|
||||
agents: 'Agents',
|
||||
addAgent: 'Add Agent',
|
||||
selectProfile: 'Select a profile',
|
||||
agentAdded: 'Agent added',
|
||||
agentAlreadyInRoom: 'Agent already in this room',
|
||||
noAgents: 'No agents in this room',
|
||||
members: 'members',
|
||||
roomCreated: 'Room created',
|
||||
roomDeleted: 'Room deleted',
|
||||
deleteRoomConfirm: 'Delete this room?',
|
||||
you: 'You',
|
||||
joined: 'Joined room',
|
||||
joinFailed: 'Failed to join room',
|
||||
inputPlaceholder: 'Type a message... (Enter to send)',
|
||||
enterCode: 'Enter invite code',
|
||||
yourName: 'Your Name',
|
||||
yourNamePlaceholder: 'Enter your display name',
|
||||
yourDescription: 'Description (optional)',
|
||||
yourDescriptionPlaceholder: 'Tell others who you are...',
|
||||
agentName: 'Agent Name',
|
||||
agentNamePlaceholder: 'Custom name (leave empty to use profile name)',
|
||||
agentDesc: 'Agent Description',
|
||||
agentDescPlaceholder: 'Describe what this agent does...',
|
||||
agentReplying: 'is replying...',
|
||||
agentCompressing: 'is compressing context...',
|
||||
compressionSettings: 'Compression Settings',
|
||||
triggerTokens: 'Trigger Tokens',
|
||||
triggerTokensDesc: 'Token threshold to trigger context compression',
|
||||
maxHistoryTokens: 'Max History Tokens',
|
||||
maxHistoryTokensDesc: 'Maximum tokens for compressed context sent to LLM',
|
||||
tailMessageCount: 'Tail Message Count',
|
||||
tailMessageCountDesc: 'Number of recent messages to keep verbatim after compression',
|
||||
compressionConfig: 'Compression Config',
|
||||
compressionSaved: 'Compression config saved',
|
||||
compressNow: 'Compress Now',
|
||||
compressingInProgress: 'Compression in progress, please wait',
|
||||
},
|
||||
|
||||
// Usage
|
||||
usage: {
|
||||
title: 'Usage Statistics',
|
||||
|
||||
@@ -48,6 +48,7 @@ export default {
|
||||
update: 'Actualizar',
|
||||
create: 'Crear',
|
||||
saveFailed: 'Error al guardar',
|
||||
deleteFailed: 'Error al eliminar',
|
||||
ok: 'OK',
|
||||
copied: 'Copiado',
|
||||
copy: 'Copiar',
|
||||
@@ -76,6 +77,8 @@ export default {
|
||||
channels: 'Canales',
|
||||
terminal: 'Terminal',
|
||||
files: 'Archivos',
|
||||
groupChat: 'Chat grupal',
|
||||
groupConversation: 'Conversación',
|
||||
settings: 'Configuracion',
|
||||
connected: 'Conectado',
|
||||
disconnected: 'Desconectado',
|
||||
@@ -579,6 +582,55 @@ export default {
|
||||
saveFile: 'Guardar',
|
||||
},
|
||||
|
||||
// Chat grupal
|
||||
groupChat: {
|
||||
title: 'Chat grupal',
|
||||
createRoom: 'Crear sala',
|
||||
joinByCode: 'Unirse con codigo',
|
||||
roomName: 'Nombre de la sala',
|
||||
roomNamePlaceholder: 'Ingrese el nombre de la sala',
|
||||
inviteCode: 'Codigo de invitacion',
|
||||
autoGenerate: 'Generar automaticamente',
|
||||
noRooms: 'Aun no hay salas',
|
||||
selectOrCreate: 'Seleccione o cree una sala para comenzar a chatear',
|
||||
agents: 'Agentes',
|
||||
addAgent: 'Agregar agente',
|
||||
selectProfile: 'Seleccione un perfil',
|
||||
agentAdded: 'Agente agregado',
|
||||
agentAlreadyInRoom: 'El agente ya esta en esta sala',
|
||||
noAgents: 'No hay agentes en esta sala',
|
||||
members: 'Miembros',
|
||||
roomCreated: 'Sala creada',
|
||||
roomDeleted: 'Sala eliminada',
|
||||
deleteRoomConfirm: '¿Eliminar esta sala?',
|
||||
you: 'Tú',
|
||||
joined: 'Se unio a la sala',
|
||||
joinFailed: 'Error al unirse a la sala',
|
||||
inputPlaceholder: 'Escriba un mensaje... (Enter para enviar)',
|
||||
enterCode: 'Ingrese el codigo de invitacion',
|
||||
yourName: 'Tu nombre',
|
||||
yourNamePlaceholder: 'Ingresa tu nombre para mostrar',
|
||||
yourDescription: 'Descripcion (opcional)',
|
||||
yourDescriptionPlaceholder: 'Cuentales a los demas quien eres...',
|
||||
agentName: 'Nombre del agente',
|
||||
agentNamePlaceholder: 'Nombre personalizado (vacío = nombre del perfil)',
|
||||
agentDesc: 'Descripción del agente',
|
||||
agentDescPlaceholder: 'Describe lo que hace este agente...',
|
||||
agentReplying: 'está respondiendo...',
|
||||
agentCompressing: 'está comprimiendo contexto...',
|
||||
compressionSettings: 'Configuración de compresión',
|
||||
triggerTokens: 'Tokens de activación',
|
||||
triggerTokensDesc: 'Umbral de tokens para activar la compresión',
|
||||
maxHistoryTokens: 'Tokens máximos de historial',
|
||||
maxHistoryTokensDesc: 'Máximo de tokens para el contexto comprimido',
|
||||
tailMessageCount: 'Mensajes recientes',
|
||||
tailMessageCountDesc: 'Número de mensajes recientes a conservar sin comprimir',
|
||||
compressionConfig: 'Config. de compresión',
|
||||
compressNow: 'Comprimir ahora',
|
||||
compressingInProgress: 'Compresión en progreso',
|
||||
compressionSaved: 'Configuración guardada',
|
||||
},
|
||||
|
||||
// Descarga
|
||||
download: {
|
||||
downloading: 'Descargando...',
|
||||
|
||||
@@ -48,6 +48,7 @@ export default {
|
||||
update: 'Mettre a jour',
|
||||
create: 'Creer',
|
||||
saveFailed: 'Echec de l\'enregistrement',
|
||||
deleteFailed: 'Echec de la suppression',
|
||||
ok: 'OK',
|
||||
copied: 'Copie',
|
||||
copy: 'Copier',
|
||||
@@ -76,6 +77,8 @@ export default {
|
||||
channels: 'Canaux',
|
||||
terminal: 'Terminal',
|
||||
files: 'Fichiers',
|
||||
groupChat: 'Chat de groupe',
|
||||
groupConversation: 'Conversation',
|
||||
settings: 'Parametres',
|
||||
connected: 'Connecte',
|
||||
disconnected: 'Deconnecte',
|
||||
@@ -579,6 +582,55 @@ export default {
|
||||
saveFile: 'Enregistrer',
|
||||
},
|
||||
|
||||
// Chat de groupe
|
||||
groupChat: {
|
||||
title: 'Chat de groupe',
|
||||
createRoom: 'Creer un salon',
|
||||
joinByCode: 'Rejoindre avec un code',
|
||||
roomName: 'Nom du salon',
|
||||
roomNamePlaceholder: 'Entrez le nom du salon',
|
||||
inviteCode: "Code d'invitation",
|
||||
autoGenerate: 'Generer automatiquement',
|
||||
noRooms: 'Aucun salon pour le moment',
|
||||
selectOrCreate: 'Selectionnez ou creez un salon pour commencer a discuter',
|
||||
agents: 'Agents',
|
||||
addAgent: 'Ajouter un agent',
|
||||
selectProfile: 'Selectionnez un profil',
|
||||
agentAdded: 'Agent ajoute',
|
||||
agentAlreadyInRoom: "L'agent est deja dans ce salon",
|
||||
noAgents: 'Aucun agent dans ce salon',
|
||||
members: 'Membres',
|
||||
roomCreated: 'Salon cree',
|
||||
roomDeleted: 'Salon supprime',
|
||||
deleteRoomConfirm: 'Supprimer ce salon ?',
|
||||
you: 'Vous',
|
||||
joined: 'Vous avez rejoint le salon',
|
||||
joinFailed: 'Echec de la connexion au salon',
|
||||
inputPlaceholder: 'Tapez un message... (Entree pour envoyer)',
|
||||
enterCode: "Entrez le code d'invitation",
|
||||
yourName: 'Votre nom',
|
||||
yourNamePlaceholder: "Entrez votre nom d'affichage",
|
||||
yourDescription: 'Description (facultatif)',
|
||||
yourDescriptionPlaceholder: 'Decrivez-vous aux autres...',
|
||||
agentName: 'Nom de l\'agent',
|
||||
agentNamePlaceholder: 'Nom personnalise (vide = nom du profil)',
|
||||
agentDesc: 'Description de l\'agent',
|
||||
agentDescPlaceholder: 'Decrivez le role de cet agent...',
|
||||
agentReplying: 'est en train de répondre...',
|
||||
agentCompressing: 'compresse le contexte...',
|
||||
compressionSettings: 'Paramètres de compression',
|
||||
triggerTokens: 'Seuil de tokens',
|
||||
triggerTokensDesc: 'Seuil de tokens pour déclencher la compression',
|
||||
maxHistoryTokens: 'Max tokens historique',
|
||||
maxHistoryTokensDesc: 'Maximum de tokens pour le contexte compressé',
|
||||
tailMessageCount: 'Messages récents',
|
||||
tailMessageCountDesc: 'Nombre de messages récents à conserver',
|
||||
compressionConfig: 'Config. compression',
|
||||
compressNow: 'Comprimer maintenant',
|
||||
compressingInProgress: 'Compression en cours',
|
||||
compressionSaved: 'Configuration enregistrée',
|
||||
},
|
||||
|
||||
// Telechargement
|
||||
download: {
|
||||
downloading: 'Telechargement...',
|
||||
|
||||
@@ -48,6 +48,7 @@ export default {
|
||||
update: '更新',
|
||||
create: '作成',
|
||||
saveFailed: '保存に失敗しました',
|
||||
deleteFailed: '削除に失敗しました',
|
||||
ok: 'OK',
|
||||
copied: 'コピーしました',
|
||||
copy: 'コピー',
|
||||
@@ -76,6 +77,8 @@ export default {
|
||||
channels: 'チャンネル',
|
||||
terminal: 'ターミナル',
|
||||
files: 'ファイル',
|
||||
groupChat: 'グループチャット',
|
||||
groupConversation: '会話',
|
||||
settings: '設定',
|
||||
connected: '接続済み',
|
||||
disconnected: '未接続',
|
||||
@@ -579,6 +582,55 @@ export default {
|
||||
saveFile: '保存',
|
||||
},
|
||||
|
||||
// グループチャット
|
||||
groupChat: {
|
||||
title: 'グループチャット',
|
||||
createRoom: 'ルームを作成',
|
||||
joinByCode: 'コードで参加',
|
||||
roomName: 'ルーム名',
|
||||
roomNamePlaceholder: 'ルーム名を入力',
|
||||
inviteCode: '招待コード',
|
||||
autoGenerate: '自動生成',
|
||||
noRooms: 'ルームがありません',
|
||||
selectOrCreate: 'ルームを選択または作成してチャットを開始',
|
||||
agents: 'エージェント',
|
||||
addAgent: 'エージェントを追加',
|
||||
selectProfile: 'プロファイルを選択',
|
||||
agentAdded: 'エージェントが追加されました',
|
||||
agentAlreadyInRoom: 'このエージェントは既にルームにいます',
|
||||
noAgents: 'このルームにエージェントはいません',
|
||||
members: 'メンバー',
|
||||
roomCreated: 'ルームが作成されました',
|
||||
roomDeleted: 'ルームを削除しました',
|
||||
deleteRoomConfirm: 'このルームを削除しますか？',
|
||||
you: 'あなた',
|
||||
joined: 'ルームに参加しました',
|
||||
joinFailed: 'ルームへの参加に失敗しました',
|
||||
inputPlaceholder: 'メッセージを入力... (Enterで送信)',
|
||||
enterCode: '招待コードを入力',
|
||||
yourName: 'あなたの名前',
|
||||
yourNamePlaceholder: '表示名を入力',
|
||||
yourDescription: '自己紹介（任意）',
|
||||
yourDescriptionPlaceholder: '自分について教えてください...',
|
||||
agentName: 'エージェント名',
|
||||
agentNamePlaceholder: 'カスタム名（空欄ならプロファイル名）',
|
||||
agentDesc: 'エージェントの説明',
|
||||
agentDescPlaceholder: 'このエージェントの役割を説明...',
|
||||
agentReplying: 'が返信中...',
|
||||
agentCompressing: 'がコンテキストを圧縮中...',
|
||||
compressionSettings: '圧縮設定',
|
||||
triggerTokens: '圧縮トリガートークン数',
|
||||
triggerTokensDesc: 'このトークン数を超えるとコンテキスト圧縮がトリガーされます',
|
||||
maxHistoryTokens: '最大履歴トークン数',
|
||||
maxHistoryTokensDesc: '圧縮後のLLM送信最大トークン数',
|
||||
tailMessageCount: '末尾メッセージ数',
|
||||
tailMessageCountDesc: '圧縮後にそのまま保持する最近のメッセージ数',
|
||||
compressionConfig: '圧縮設定',
|
||||
compressNow: '今すぐ圧縮',
|
||||
compressingInProgress: '圧縮中です、お待ちください',
|
||||
compressionSaved: '圧縮設定を保存しました',
|
||||
},
|
||||
|
||||
// ダウンロード
|
||||
download: {
|
||||
downloading: 'ダウンロード中...',
|
||||
|
||||
@@ -48,6 +48,7 @@ export default {
|
||||
update: '업데이트',
|
||||
create: '생성',
|
||||
saveFailed: '저장 실패',
|
||||
deleteFailed: '삭제 실패',
|
||||
ok: '확인',
|
||||
copied: '복사됨',
|
||||
copy: '복사',
|
||||
@@ -76,6 +77,8 @@ export default {
|
||||
channels: '채널',
|
||||
terminal: '터미널',
|
||||
files: '파일',
|
||||
groupChat: '그룹 채팅',
|
||||
groupConversation: '대화',
|
||||
settings: '설정',
|
||||
connected: '연결됨',
|
||||
disconnected: '연결 끊김',
|
||||
@@ -579,6 +582,55 @@ export default {
|
||||
saveFile: '저장',
|
||||
},
|
||||
|
||||
// 그룹 채팅
|
||||
groupChat: {
|
||||
title: '그룹 채팅',
|
||||
createRoom: '방 만들기',
|
||||
joinByCode: '코드로 참여',
|
||||
roomName: '방 이름',
|
||||
roomNamePlaceholder: '방 이름을 입력하세요',
|
||||
inviteCode: '초대 코드',
|
||||
autoGenerate: '자동 생성',
|
||||
noRooms: '아직 방이 없습니다',
|
||||
selectOrCreate: '방을 선택하거나 만들어 채팅을 시작하세요',
|
||||
agents: '에이전트',
|
||||
addAgent: '에이전트 추가',
|
||||
selectProfile: '프로필 선택',
|
||||
agentAdded: '에이전트가 추가되었습니다',
|
||||
agentAlreadyInRoom: '해당 에이전트가 이미 방에 있습니다',
|
||||
noAgents: '이 방에 에이전트가 없습니다',
|
||||
members: '멤버',
|
||||
roomCreated: '방이 생성되었습니다',
|
||||
roomDeleted: '방이 삭제되었습니다',
|
||||
deleteRoomConfirm: '이 방을 삭제하시겠습니까?',
|
||||
you: '나',
|
||||
joined: '방에 참여했습니다',
|
||||
joinFailed: '방 참여에 실패했습니다',
|
||||
inputPlaceholder: '메시지를 입력하세요... (Enter로 전송)',
|
||||
enterCode: '초대 코드를 입력하세요',
|
||||
yourName: '이름',
|
||||
yourNamePlaceholder: '표시 이름을 입력하세요',
|
||||
yourDescription: '설명 (선택)',
|
||||
yourDescriptionPlaceholder: '자신을 소개해 주세요...',
|
||||
agentName: '에이전트 이름',
|
||||
agentNamePlaceholder: '사용자 지정 이름 (빈칸=프로필 이름)',
|
||||
agentDesc: '에이전트 설명',
|
||||
agentDescPlaceholder: '이 에이전트가 하는 일을 설명...',
|
||||
agentReplying: '이(가) 응답 중...',
|
||||
agentCompressing: '이(가) 컨텍스트 압축 중...',
|
||||
compressionSettings: '압축 설정',
|
||||
triggerTokens: '압축 트리거 토큰',
|
||||
triggerTokensDesc: '이 토큰 수를 초과하면 컨텍스트 압축이 시작됩니다',
|
||||
maxHistoryTokens: '최대 기록 토큰',
|
||||
maxHistoryTokensDesc: '압축된 컨텍스트의 최대 토큰 수',
|
||||
tailMessageCount: '최근 메시지 수',
|
||||
tailMessageCountDesc: '압축 후 그대로 유지할 최근 메시지 수',
|
||||
compressionConfig: '압축 설정',
|
||||
compressNow: '지금 압축',
|
||||
compressingInProgress: '압축 진행 중',
|
||||
compressionSaved: '압축 설정이 저장되었습니다',
|
||||
},
|
||||
|
||||
// 다운로드
|
||||
download: {
|
||||
downloading: '다운로드 중...',
|
||||
|
||||
@@ -48,6 +48,7 @@ export default {
|
||||
update: 'Atualizar',
|
||||
create: 'Criar',
|
||||
saveFailed: 'Falha ao salvar',
|
||||
deleteFailed: 'Falha ao excluir',
|
||||
ok: 'OK',
|
||||
copied: 'Copiado',
|
||||
copy: 'Copiar',
|
||||
@@ -76,6 +77,8 @@ export default {
|
||||
channels: 'Canais',
|
||||
terminal: 'Terminal',
|
||||
files: 'Arquivos',
|
||||
groupChat: 'Chat em grupo',
|
||||
groupConversation: 'Conversa',
|
||||
settings: 'Configuracoes',
|
||||
connected: 'Conectado',
|
||||
disconnected: 'Desconectado',
|
||||
@@ -579,6 +582,55 @@ export default {
|
||||
saveFile: 'Salvar',
|
||||
},
|
||||
|
||||
// Chat em grupo
|
||||
groupChat: {
|
||||
title: 'Chat em grupo',
|
||||
createRoom: 'Criar sala',
|
||||
joinByCode: 'Entrar com codigo',
|
||||
roomName: 'Nome da sala',
|
||||
roomNamePlaceholder: 'Digite o nome da sala',
|
||||
inviteCode: 'Codigo de convite',
|
||||
autoGenerate: 'Gerar automaticamente',
|
||||
noRooms: 'Nenhuma sala ainda',
|
||||
selectOrCreate: 'Selecione ou crie uma sala para comecar a conversar',
|
||||
agents: 'Agentes',
|
||||
addAgent: 'Adicionar agente',
|
||||
selectProfile: 'Selecione um perfil',
|
||||
agentAdded: 'Agente adicionado',
|
||||
agentAlreadyInRoom: 'O agente ja esta nesta sala',
|
||||
noAgents: 'Nenhum agente nesta sala',
|
||||
members: 'Membros',
|
||||
roomCreated: 'Sala criada',
|
||||
roomDeleted: 'Sala excluída',
|
||||
deleteRoomConfirm: 'Excluir esta sala?',
|
||||
you: 'Você',
|
||||
joined: 'Entrou na sala',
|
||||
joinFailed: 'Falha ao entrar na sala',
|
||||
inputPlaceholder: 'Digite uma mensagem... (Enter para enviar)',
|
||||
enterCode: 'Digite o codigo de convite',
|
||||
yourName: 'Seu nome',
|
||||
yourNamePlaceholder: 'Digite seu nome de exibicao',
|
||||
yourDescription: 'Descricao (opcional)',
|
||||
yourDescriptionPlaceholder: 'Conte aos outros quem voce e...',
|
||||
agentName: 'Nome do agente',
|
||||
agentNamePlaceholder: 'Nome personalizado (vazio = nome do perfil)',
|
||||
agentDesc: 'Descrição do agente',
|
||||
agentDescPlaceholder: 'Descreva o que este agente faz...',
|
||||
agentReplying: 'está respondendo...',
|
||||
agentCompressing: 'está compactando contexto...',
|
||||
compressionSettings: 'Configuração de compactação',
|
||||
triggerTokens: 'Tokens de acionamento',
|
||||
triggerTokensDesc: 'Limite de tokens para acionar a compactação',
|
||||
maxHistoryTokens: 'Máx. tokens de histórico',
|
||||
maxHistoryTokensDesc: 'Máximo de tokens para o contexto compactado',
|
||||
tailMessageCount: 'Mensagens recentes',
|
||||
tailMessageCountDesc: 'Número de mensagens recentes a manter',
|
||||
compressionConfig: 'Config. de compactação',
|
||||
compressNow: 'Compactar agora',
|
||||
compressingInProgress: 'Compactação em andamento',
|
||||
compressionSaved: 'Configuração salva',
|
||||
},
|
||||
|
||||
// Download
|
||||
download: {
|
||||
downloading: 'Baixando...',
|
||||
|
||||
@@ -46,6 +46,7 @@ export default {
|
||||
save: '保存',
|
||||
saved: '已保存',
|
||||
saveFailed: '保存失败',
|
||||
deleteFailed: '删除失败',
|
||||
ok: '确定',
|
||||
copied: '已复制',
|
||||
copy: '复制',
|
||||
@@ -79,6 +80,7 @@ export default {
|
||||
channels: '频道',
|
||||
gateways: '网关',
|
||||
terminal: '终端',
|
||||
groupChat: '群聊',
|
||||
files: '文件',
|
||||
groupConversation: '对话',
|
||||
groupPlatform: '平台',
|
||||
@@ -537,6 +539,55 @@ export default {
|
||||
processExited: '进程已退出，代码 {code}',
|
||||
},
|
||||
|
||||
// 群聊
|
||||
groupChat: {
|
||||
title: '群聊',
|
||||
createRoom: '创建房间',
|
||||
joinByCode: '通过邀请码加入',
|
||||
roomName: '房间名称',
|
||||
roomNamePlaceholder: '输入房间名称',
|
||||
inviteCode: '邀请码',
|
||||
autoGenerate: '自动生成',
|
||||
noRooms: '暂无房间',
|
||||
selectOrCreate: '选择或创建一个房间开始聊天',
|
||||
agents: '智能体',
|
||||
addAgent: '添加智能体',
|
||||
selectProfile: '选择一个配置',
|
||||
agentAdded: '智能体已添加',
|
||||
agentAlreadyInRoom: '该智能体已在房间中',
|
||||
noAgents: '当前房间暂无智能体',
|
||||
members: '成员',
|
||||
roomCreated: '房间已创建',
|
||||
roomDeleted: '房间已删除',
|
||||
deleteRoomConfirm: '确定删除这个房间吗？',
|
||||
you: '你',
|
||||
joined: '已加入房间',
|
||||
joinFailed: '加入房间失败',
|
||||
inputPlaceholder: '输入消息... (Enter 发送)',
|
||||
enterCode: '输入邀请码',
|
||||
yourName: '你的名称',
|
||||
yourNamePlaceholder: '输入你的群聊昵称',
|
||||
yourDescription: '自我描述（选填）',
|
||||
yourDescriptionPlaceholder: '介绍一下你自己...',
|
||||
agentName: 'Agent 名称',
|
||||
agentNamePlaceholder: '自定义名称（留空则使用 profile 名称）',
|
||||
agentDesc: 'Agent 描述',
|
||||
agentDescPlaceholder: '描述这个 agent 的作用...',
|
||||
agentReplying: '正在回复...',
|
||||
agentCompressing: '正在压缩上下文...',
|
||||
compressionSettings: '压缩设置',
|
||||
triggerTokens: '触发压缩 Token 数',
|
||||
triggerTokensDesc: '消息 token 数超过此值时触发上下文压缩',
|
||||
maxHistoryTokens: '最大历史 Token 数',
|
||||
maxHistoryTokensDesc: '压缩后发送给 LLM 的最大 token 数',
|
||||
tailMessageCount: '保留最近消息数',
|
||||
tailMessageCountDesc: '压缩后保留最近的原始消息条数',
|
||||
compressionConfig: '压缩配置',
|
||||
compressionSaved: '压缩配置已保存',
|
||||
compressNow: '立即压缩',
|
||||
compressingInProgress: '正在压缩中，请稍后',
|
||||
},
|
||||
|
||||
// 用量统计
|
||||
usage: {
|
||||
title: '用量统计',
|
||||
|
||||
@@ -70,6 +70,11 @@ const router = createRouter({
|
||||
name: 'hermes.terminal',
|
||||
component: () => import('@/views/hermes/TerminalView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/hermes/group-chat',
|
||||
name: 'hermes.groupChat',
|
||||
component: () => import('@/views/hermes/GroupChatView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/hermes/files',
|
||||
name: 'hermes.files',
|
||||
|
||||
@@ -492,7 +492,16 @@ export const useChatStore = defineStore('chat', () => {
|
||||
// that was just created and whose first run is still in-flight. Without
|
||||
// this, refreshing mid-run would wipe the session and fall back to
|
||||
// sessions[0], which is exactly what the user reported.
|
||||
const localOnly = sessions.value.filter(s => !freshIds.has(s.id))
|
||||
// Sessions without an active in-flight run are considered deleted and
|
||||
// cleaned up along with their cached messages.
|
||||
const localOnly = sessions.value.filter(s => {
|
||||
if (freshIds.has(s.id)) return false
|
||||
if (readInFlight(s.id)) return true
|
||||
// Session no longer exists on server and no active run — clean up cache
|
||||
removeItemWithLegacy(msgsCacheKey(s.id), legacyMsgsCacheKey(s.id))
|
||||
removeItemWithLegacy(inFlightKey(s.id), legacyInFlightKey(s.id))
|
||||
return false
|
||||
})
|
||||
sessions.value = [...localOnly, ...fresh]
|
||||
persistSessionsList()
|
||||
|
||||
|
||||
@@ -0,0 +1,365 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import {
|
||||
connectGroupChat,
|
||||
disconnectGroupChat,
|
||||
getSocket,
|
||||
getStoredUserId,
|
||||
getStoredUserName,
|
||||
type RoomInfo,
|
||||
type RoomAgent,
|
||||
type ChatMessage,
|
||||
type MemberInfo,
|
||||
createRoom,
|
||||
listRooms,
|
||||
getRoomDetail,
|
||||
joinRoomByCode,
|
||||
addAgent,
|
||||
listAgents,
|
||||
removeAgent,
|
||||
deleteRoom as deleteRoomApi,
|
||||
} from '@/api/hermes/group-chat'
|
||||
|
||||
export const useGroupChatStore = defineStore('groupChat', () => {
|
||||
// ─── State ─────────────────────────────────────────────
|
||||
const connected = ref(false)
|
||||
const currentRoomId = ref<string | null>(null)
|
||||
const rooms = ref<RoomInfo[]>([])
|
||||
const messages = ref<ChatMessage[]>([])
|
||||
const members = ref<MemberInfo[]>([])
|
||||
const agents = ref<RoomAgent[]>([])
|
||||
const roomName = ref('')
|
||||
const isJoining = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const typingUsers = ref<Map<string, { name: string; timer: ReturnType<typeof setTimeout> }>>(new Map())
|
||||
const contextStatuses = ref<Map<string, { agentName: string; status: string }>>(new Map())
|
||||
|
||||
// Computed: returns first active status for backward compat
|
||||
const contextStatus = computed(() => {
|
||||
for (const [, status] of contextStatuses.value) {
|
||||
return status
|
||||
}
|
||||
return null
|
||||
})
|
||||
const userId = ref(getStoredUserId())
|
||||
const userName = ref(getStoredUserName() || '')
|
||||
|
||||
// ─── Computed ───────────────────────────────────────────
|
||||
const sortedMessages = computed(() => {
|
||||
return [...messages.value].sort((a, b) => a.timestamp - b.timestamp)
|
||||
})
|
||||
|
||||
const memberNames = computed(() => {
|
||||
return members.value.map(m => m.name)
|
||||
})
|
||||
|
||||
const typingNames = computed(() => {
|
||||
return Array.from(typingUsers.value.values()).map(u => u.name)
|
||||
})
|
||||
|
||||
const typingText = computed(() => {
|
||||
const names = typingNames.value
|
||||
if (names.length === 0) return ''
|
||||
if (names.length === 1) return `${names[0]} is typing...`
|
||||
if (names.length === 2) return `${names[0]} and ${names[1]} are typing...`
|
||||
return `${names[0]} and ${names.length - 1} others are typing...`
|
||||
})
|
||||
|
||||
// ─── Connection ────────────────────────────────────────
|
||||
function connect() {
|
||||
const socket = connectGroupChat({
|
||||
userId: userId.value,
|
||||
userName: userName.value || undefined,
|
||||
})
|
||||
console.log('[GroupChat] connecting...', { userId: userId.value, userName: userName.value })
|
||||
|
||||
socket.on('connect', () => {
|
||||
console.log('[GroupChat] connected, socket id:', socket.id)
|
||||
connected.value = true
|
||||
error.value = null
|
||||
})
|
||||
|
||||
socket.on('disconnect', (reason) => {
|
||||
console.log('[GroupChat] disconnected:', reason)
|
||||
connected.value = false
|
||||
})
|
||||
|
||||
socket.on('connect_error', (err: Error) => {
|
||||
console.error('[GroupChat] connect_error:', err.message)
|
||||
error.value = err.message
|
||||
connected.value = false
|
||||
})
|
||||
|
||||
socket.on('message', (msg: ChatMessage) => {
|
||||
if (msg.roomId === currentRoomId.value) {
|
||||
messages.value.push(msg)
|
||||
}
|
||||
})
|
||||
|
||||
socket.on('member_joined', (data: { roomId: string; members: MemberInfo[] }) => {
|
||||
if (data.roomId === currentRoomId.value) {
|
||||
members.value = data.members
|
||||
}
|
||||
})
|
||||
|
||||
socket.on('member_left', (data: { roomId: string; members: MemberInfo[] }) => {
|
||||
if (data.roomId === currentRoomId.value) {
|
||||
members.value = data.members
|
||||
}
|
||||
})
|
||||
|
||||
socket.on('typing', (data: { roomId: string; userId: string; userName: string }) => {
|
||||
if (data.roomId === currentRoomId.value && !typingUsers.value.has(data.userId)) {
|
||||
const timer = setTimeout(() => typingUsers.value.delete(data.userId), 5000)
|
||||
typingUsers.value.set(data.userId, { name: data.userName, timer })
|
||||
}
|
||||
})
|
||||
|
||||
socket.on('stop_typing', (data: { roomId: string; userId: string }) => {
|
||||
if (data.roomId === currentRoomId.value && typingUsers.value.has(data.userId)) {
|
||||
const entry = typingUsers.value.get(data.userId)!
|
||||
clearTimeout(entry.timer)
|
||||
typingUsers.value.delete(data.userId)
|
||||
}
|
||||
})
|
||||
|
||||
socket.on('context_status', (data: { roomId: string; agentName: string; status: string }) => {
|
||||
if (data.roomId === currentRoomId.value) {
|
||||
if (data.status === 'ready') {
|
||||
contextStatuses.value.delete(data.agentName)
|
||||
} else {
|
||||
contextStatuses.value.set(data.agentName, { agentName: data.agentName, status: data.status })
|
||||
}
|
||||
// Trigger reactivity
|
||||
contextStatuses.value = new Map(contextStatuses.value)
|
||||
}
|
||||
})
|
||||
|
||||
socket.on('room_updated', (data: { roomId: string; totalTokens: number }) => {
|
||||
const room = rooms.value.find(r => r.id === data.roomId)
|
||||
if (room) room.totalTokens = data.totalTokens
|
||||
})
|
||||
}
|
||||
|
||||
function disconnect() {
|
||||
disconnectGroupChat()
|
||||
connected.value = false
|
||||
currentRoomId.value = null
|
||||
messages.value = []
|
||||
members.value = []
|
||||
agents.value = []
|
||||
roomName.value = ''
|
||||
typingUsers.value.clear()
|
||||
contextStatuses.value.clear()
|
||||
}
|
||||
|
||||
function setUserInfo(name: string, description: string) {
|
||||
userName.value = name
|
||||
localStorage.setItem('gc_user_name', name)
|
||||
localStorage.setItem('gc_user_description', description)
|
||||
}
|
||||
|
||||
// ─── Room Actions ──────────────────────────────────────
|
||||
async function joinRoom(roomId: string) {
|
||||
isJoining.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const res = await getRoomDetail(roomId)
|
||||
currentRoomId.value = res.room.id
|
||||
roomName.value = res.room.name
|
||||
messages.value = res.messages
|
||||
agents.value = res.agents
|
||||
members.value = res.members || []
|
||||
} catch (err: any) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
} finally {
|
||||
isJoining.value = false
|
||||
}
|
||||
|
||||
// Join via socket for real-time updates
|
||||
const socket = getSocket()
|
||||
if (socket) {
|
||||
await new Promise<void>((resolve) => {
|
||||
socket.emit('join', { roomId, name: userName.value || undefined }, (res: any) => {
|
||||
if (!res?.error) {
|
||||
members.value = res.members || []
|
||||
if (res.agents) agents.value = res.agents
|
||||
|
||||
// Restore typing state from server
|
||||
if (res.typingUsers) {
|
||||
for (const u of res.typingUsers) {
|
||||
if (!typingUsers.value.has(u.userId)) {
|
||||
const timer = setTimeout(() => typingUsers.value.delete(u.userId), 5000)
|
||||
typingUsers.value.set(u.userId, { name: u.userName, timer })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Restore context statuses from server
|
||||
if (res.contextStatuses) {
|
||||
contextStatuses.value = new Map(
|
||||
res.contextStatuses.map((s: any) => [s.agentName, s])
|
||||
)
|
||||
}
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function sendMessage(content: string) {
|
||||
const socket = getSocket()
|
||||
if (!socket || !currentRoomId.value) return
|
||||
emitStopTyping()
|
||||
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
socket!.emit('message', { roomId: currentRoomId.value, content }, (res: { id?: string; error?: string }) => {
|
||||
if (res.error) {
|
||||
reject(new Error(res.error))
|
||||
return
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
async function loadRooms() {
|
||||
try {
|
||||
const res = await listRooms()
|
||||
rooms.value = res.rooms
|
||||
} catch (err: any) {
|
||||
error.value = err.message
|
||||
}
|
||||
}
|
||||
|
||||
async function createNewRoom(name: string, inviteCode: string, agentList?: { profile: string; name?: string; description?: string; invited?: boolean }[], compression?: { triggerTokens: number; maxHistoryTokens: number; tailMessageCount: number }) {
|
||||
try {
|
||||
const res = await createRoom({
|
||||
name,
|
||||
inviteCode,
|
||||
agents: agentList,
|
||||
compression: compression || { triggerTokens: 100000, maxHistoryTokens: 32000, tailMessageCount: 20 },
|
||||
})
|
||||
rooms.value.push(res.room)
|
||||
return res
|
||||
} catch (err: any) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
async function joinByCode(code: string) {
|
||||
try {
|
||||
const res = await joinRoomByCode(code)
|
||||
await joinRoom(res.room.id)
|
||||
return res.room
|
||||
} catch (err: any) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRoom(roomId: string) {
|
||||
try {
|
||||
await deleteRoomApi(roomId)
|
||||
rooms.value = rooms.value.filter(r => r.id !== roomId)
|
||||
if (currentRoomId.value === roomId) {
|
||||
currentRoomId.value = null
|
||||
messages.value = []
|
||||
members.value = []
|
||||
agents.value = []
|
||||
roomName.value = ''
|
||||
}
|
||||
} catch (err: any) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Agent Actions ─────────────────────────────────────
|
||||
async function loadAgents(roomId: string) {
|
||||
try {
|
||||
const res = await listAgents(roomId)
|
||||
agents.value = res.agents
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
async function addAgentToRoom(roomId: string, data: { profile: string; name?: string; description?: string; invited?: boolean }) {
|
||||
try {
|
||||
const res = await addAgent(roomId, data)
|
||||
agents.value.push(res.agent)
|
||||
return res.agent
|
||||
} catch (err: any) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
async function removeAgentFromRoom(roomId: string, agentId: string) {
|
||||
try {
|
||||
await removeAgent(roomId, agentId)
|
||||
agents.value = agents.value.filter(a => a.id !== agentId)
|
||||
} catch (err: any) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Typing ────────────────────────────────────────────
|
||||
let _typingTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function emitTyping() {
|
||||
const socket = getSocket()
|
||||
if (!socket || !currentRoomId.value) return
|
||||
socket.emit('typing', { roomId: currentRoomId.value })
|
||||
if (_typingTimer) clearTimeout(_typingTimer)
|
||||
_typingTimer = setTimeout(() => emitStopTyping(), 4000)
|
||||
}
|
||||
|
||||
function emitStopTyping() {
|
||||
const socket = getSocket()
|
||||
if (!socket || !currentRoomId.value) return
|
||||
socket.emit('stop_typing', { roomId: currentRoomId.value })
|
||||
if (_typingTimer) { clearTimeout(_typingTimer); _typingTimer = null }
|
||||
}
|
||||
|
||||
return {
|
||||
// State
|
||||
connected,
|
||||
currentRoomId,
|
||||
rooms,
|
||||
messages,
|
||||
members,
|
||||
agents,
|
||||
roomName,
|
||||
isJoining,
|
||||
error,
|
||||
contextStatus,
|
||||
contextStatuses,
|
||||
userId,
|
||||
userName,
|
||||
// Computed
|
||||
sortedMessages,
|
||||
memberNames,
|
||||
typingNames,
|
||||
typingText,
|
||||
// Actions
|
||||
connect,
|
||||
disconnect,
|
||||
setUserInfo,
|
||||
joinRoom,
|
||||
sendMessage,
|
||||
loadRooms,
|
||||
emitTyping,
|
||||
emitStopTyping,
|
||||
createNewRoom,
|
||||
joinByCode,
|
||||
deleteRoom,
|
||||
loadAgents,
|
||||
addAgentToRoom,
|
||||
removeAgentFromRoom,
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import GroupChatPanel from '@/components/hermes/group-chat/GroupChatPanel.vue'
|
||||
import { useGroupChatStore } from '@/stores/hermes/group-chat'
|
||||
|
||||
const store = useGroupChatStore()
|
||||
|
||||
onMounted(() => {
|
||||
store.connect()
|
||||
store.loadRooms()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
store.disconnect()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="group-chat-view">
|
||||
<GroupChatPanel />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.group-chat-view {
|
||||
height: calc(100 * var(--vh));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user