1111 lines
50 KiB
Vue
1111 lines
50 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
|
|
import { chatRoomsAPI, providersAPI, agentsAPI } from '../utils/api.js'
|
|
import { parallelStreamManager } from '../utils/parallelStreamManager.js'
|
|
import { useParallelStreamStore } from '../utils/parallelStreamStore.js'
|
|
import MessageBubble from '../components/MessageBubble.vue'
|
|
import ParallelMessages from '../components/ParallelMessages.vue'
|
|
|
|
const store = useParallelStreamStore()
|
|
|
|
// ============ Sidebar tab state ============
|
|
const sidebarTab = ref('rooms') // 'agents' | 'rooms' | 'roomAgents'
|
|
|
|
// ============ Agent pool state ============
|
|
const agentPool = ref([])
|
|
const agentPoolLoading = ref(false)
|
|
const showAgentModal = ref(false) // 控制弹窗显示
|
|
const editingAgent = ref(null) // null | 'new' | agent object
|
|
const agentForm = ref({})
|
|
const agentSaving = ref(false)
|
|
|
|
// Computed models from selected provider
|
|
const availableModels = computed(() => {
|
|
const providerList = Array.isArray(providers.value) ? providers.value : []
|
|
if (!agentForm.value.provider_id) {
|
|
return providerList.flatMap(p => (p.models || [p.default_model]).map(m => `${p.name}: ${m}`))
|
|
} else {
|
|
const p = providerList.find(p => p.id === agentForm.value.provider_id)
|
|
if (p) return (p.models || [p.default_model]).map(m => `${p.name}: ${m}`)
|
|
}
|
|
return []
|
|
})
|
|
|
|
// Model display value for dropdown
|
|
const modelDisplayValue = computed({
|
|
get() {
|
|
if (!agentForm.value.model) return ''
|
|
const found = availableModels.value.find(m => m.endsWith(`: ${agentForm.value.model}`))
|
|
return found || agentForm.value.model
|
|
},
|
|
set(val) {
|
|
agentForm.value.model = val.includes(': ') ? val.split(': ')[1] : val
|
|
}
|
|
})
|
|
|
|
// ============ Room list state ============
|
|
const rooms = ref([])
|
|
const roomsLoading = ref(false)
|
|
const providers = ref([])
|
|
const showCreate = ref(false)
|
|
const creating = ref(false)
|
|
const newRoom = ref({ title: '', task: '', max_rounds: 5, agent_ids: [] })
|
|
const showAddToRoom = ref(false)
|
|
|
|
// ============ Selected room state ============
|
|
const selectedId = ref(null)
|
|
const room = ref(null)
|
|
const messages = ref([])
|
|
const messagesLoading = ref(false)
|
|
const streaming = ref(false)
|
|
const streamingMessages = ref({}) // Track in-progress streaming messages
|
|
const error = ref('')
|
|
const messagesContainer = ref(null)
|
|
const isNearBottom = ref(true) // 是否接近底部
|
|
|
|
// Room agent editing
|
|
const editingRoomAgent = ref(null)
|
|
const roomAgentForm = ref({})
|
|
const roomAgentSaving = ref(false)
|
|
|
|
let abortController = null
|
|
|
|
const statusMap = {
|
|
idle: { label: '就绪', class: 'status-idle' },
|
|
running: { label: '进行中', class: 'status-running' },
|
|
paused: { label: '已暂停', class: 'status-paused' },
|
|
completed: { label: '已完成', class: 'status-completed' },
|
|
error: { label: '错误', class: 'status-error' }
|
|
}
|
|
|
|
const roomAgents = computed(() => room.value?.agents || [])
|
|
const canEditRoom = computed(() => room.value?.status !== 'running' && !streaming.value)
|
|
|
|
// New: execution mode
|
|
const executionMode = computed(() => room.value?.execution_mode || 'sequential')
|
|
const isParallelMode = computed(() => executionMode.value === 'parallel')
|
|
|
|
// Group messages by round number for better visual organization
|
|
const groupedMessages = computed(() => {
|
|
const groups = []
|
|
let currentGroup = []
|
|
let currentRound = null
|
|
|
|
for (const msg of messages.value) {
|
|
const round = msg.round_number || 0
|
|
if (round !== currentRound) {
|
|
if (currentGroup.length > 0) {
|
|
groups.push(currentGroup)
|
|
}
|
|
currentGroup = [msg]
|
|
currentRound = round
|
|
} else {
|
|
currentGroup.push(msg)
|
|
}
|
|
}
|
|
if (currentGroup.length > 0) {
|
|
groups.push(currentGroup)
|
|
}
|
|
return groups
|
|
})
|
|
|
|
// ============ Agent Pool ============
|
|
|
|
async function loadAgentPool() {
|
|
agentPoolLoading.value = true
|
|
try {
|
|
const res = await agentsAPI.list()
|
|
agentPool.value = res.data || []
|
|
} catch (e) {
|
|
console.error('Failed to load agents:', e)
|
|
} finally {
|
|
agentPoolLoading.value = false
|
|
}
|
|
}
|
|
|
|
function onProviderChange() {
|
|
const p = providers.value.find(p => p.id === agentForm.value.provider_id)
|
|
agentForm.value.model = p ? p.default_model : ''
|
|
}
|
|
|
|
function startCreateAgent() {
|
|
// 先重置状态，再设置新值
|
|
showAgentModal.value = false
|
|
editingAgent.value = null
|
|
|
|
nextTick(() => {
|
|
agentForm.value = {
|
|
name: '', role: '', provider_id: null, model: '',
|
|
system_prompt: 'You are a helpful AI assistant.', color: randomColor()
|
|
}
|
|
editingAgent.value = 'new'
|
|
showAgentModal.value = true
|
|
})
|
|
}
|
|
|
|
function startEditAgent(agent) {
|
|
showAgentModal.value = false
|
|
editingAgent.value = null
|
|
|
|
nextTick(() => {
|
|
agentForm.value = { ...agent }
|
|
editingAgent.value = agent
|
|
showAgentModal.value = true
|
|
})
|
|
}
|
|
|
|
function cancelAgentEdit() {
|
|
showAgentModal.value = false
|
|
nextTick(() => {
|
|
editingAgent.value = null
|
|
agentForm.value = {}
|
|
})
|
|
}
|
|
|
|
async function saveAgent() {
|
|
if (!agentForm.value.name) return
|
|
agentSaving.value = true
|
|
try {
|
|
if (editingAgent.value === 'new') {
|
|
await agentsAPI.create(agentForm.value)
|
|
} else {
|
|
await agentsAPI.update(editingAgent.value.id, agentForm.value)
|
|
}
|
|
cancelAgentEdit()
|
|
await loadAgentPool()
|
|
} catch (e) {
|
|
console.error('Failed to save agent:', e)
|
|
} finally {
|
|
agentSaving.value = false
|
|
}
|
|
}
|
|
|
|
async function deleteAgentFromPool(agent) {
|
|
if (!confirm(`删除 Agent「${agent.name}」？它将仅从 Agent 池中移除，已加入房间的副本不受影响。`)) return
|
|
try {
|
|
await agentsAPI.delete(agent.id)
|
|
cancelAgentEdit()
|
|
await loadAgentPool()
|
|
} catch (e) {
|
|
console.error('Failed to delete agent:', e)
|
|
}
|
|
}
|
|
|
|
// ============ Room list ============
|
|
|
|
async function loadRooms() {
|
|
roomsLoading.value = true
|
|
try {
|
|
const res = await chatRoomsAPI.list()
|
|
rooms.value = res.data?.items || []
|
|
} catch (e) {
|
|
console.error('Failed to load rooms:', e)
|
|
} finally {
|
|
roomsLoading.value = false
|
|
}
|
|
}
|
|
|
|
async function loadProviders() {
|
|
try {
|
|
const res = await providersAPI.list()
|
|
providers.value = res.data?.providers || []
|
|
} catch (e) {
|
|
console.error('Failed to load providers:', e)
|
|
}
|
|
}
|
|
|
|
async function createRoom() {
|
|
if (!newRoom.value.title || !newRoom.value.task) return
|
|
creating.value = true
|
|
try {
|
|
// Build agents list from selected agent_ids
|
|
const agents = newRoom.value.agent_ids
|
|
.map(id => agentPool.value.find(a => a.id === id))
|
|
.filter(Boolean)
|
|
.map(a => ({ agent_id: a.id }))
|
|
|
|
const res = await chatRoomsAPI.create({
|
|
title: newRoom.value.title,
|
|
task: newRoom.value.task,
|
|
max_rounds: newRoom.value.max_rounds,
|
|
agents
|
|
})
|
|
showCreate.value = false
|
|
resetNewRoom()
|
|
await loadRooms()
|
|
const created = res.data
|
|
if (created?.id) selectRoom(created.id)
|
|
} catch (e) {
|
|
console.error('Failed to create room:', e)
|
|
} finally {
|
|
creating.value = false
|
|
}
|
|
}
|
|
|
|
function resetNewRoom() {
|
|
newRoom.value = { title: '', task: '', max_rounds: 5, agent_ids: [] }
|
|
}
|
|
|
|
function toggleAgentInNewRoom(agentId) {
|
|
const idx = newRoom.value.agent_ids.indexOf(agentId)
|
|
if (idx >= 0) {
|
|
newRoom.value.agent_ids.splice(idx, 1)
|
|
} else {
|
|
newRoom.value.agent_ids.push(agentId)
|
|
}
|
|
}
|
|
|
|
async function deleteRoom(id) {
|
|
if (!confirm('确定删除此聊天室？')) return
|
|
try {
|
|
await chatRoomsAPI.delete(id)
|
|
if (selectedId.value === id) {
|
|
selectedId.value = null
|
|
room.value = null
|
|
messages.value = []
|
|
}
|
|
await loadRooms()
|
|
} catch (e) {
|
|
console.error('Failed to delete room:', e)
|
|
}
|
|
}
|
|
|
|
// ============ Select room ============
|
|
|
|
async function selectRoom(id) {
|
|
if (streaming.value) {
|
|
if (abortController) abortController.abort()
|
|
streaming.value = false
|
|
}
|
|
streamingMessages.value = {}
|
|
selectedId.value = id
|
|
sidebarTab.value = 'roomAgents'
|
|
error.value = ''
|
|
editingRoomAgent.value = null
|
|
messagesLoading.value = true
|
|
try {
|
|
const [roomRes, msgRes] = await Promise.all([
|
|
chatRoomsAPI.get(id),
|
|
chatRoomsAPI.getMessages(id)
|
|
])
|
|
room.value = roomRes.data
|
|
messages.value = msgRes.data?.messages || []
|
|
if (msgRes.data?.room) room.value = msgRes.data.room
|
|
await nextTick()
|
|
forceScrollToBottom() // 选择聊天室时强制滚动到底部
|
|
} catch (e) {
|
|
console.error('Failed to load room:', e)
|
|
error.value = '加载失败'
|
|
} finally {
|
|
messagesLoading.value = false
|
|
}
|
|
}
|
|
|
|
function scrollToBottom() {
|
|
if (!isNearBottom.value) return
|
|
if (messagesContainer.value) {
|
|
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
|
|
}
|
|
}
|
|
|
|
// 智能滚动：检测是否接近底部
|
|
function checkNearBottom() {
|
|
if (!messagesContainer.value) return
|
|
const { scrollTop, scrollHeight, clientHeight } = messagesContainer.value
|
|
const distanceFromBottom = scrollHeight - scrollTop - clientHeight
|
|
isNearBottom.value = distanceFromBottom <= 100
|
|
}
|
|
|
|
// 滚动事件处理
|
|
function handleScroll() {
|
|
checkNearBottom()
|
|
}
|
|
|
|
// 强制滚动到底部（启动聊天室时使用）
|
|
function forceScrollToBottom() {
|
|
nextTick(() => {
|
|
if (messagesContainer.value) {
|
|
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
|
|
isNearBottom.value = true
|
|
}
|
|
})
|
|
}
|
|
|
|
// ============ SSE Streaming ============
|
|
|
|
async function startRoom() {
|
|
if (!selectedId.value || streaming.value) return
|
|
streaming.value = true
|
|
error.value = ''
|
|
|
|
const token = localStorage.getItem('access_token')
|
|
|
|
if (isParallelMode.value) {
|
|
// Parallel mode
|
|
try {
|
|
await parallelStreamManager.startParallelRoom(selectedId.value, token)
|
|
} catch (e) {
|
|
if (e.name !== 'AbortError') error.value = e.message
|
|
} finally {
|
|
streaming.value = false
|
|
if (selectedId.value) {
|
|
const res = await chatRoomsAPI.get(selectedId.value)
|
|
room.value = res.data
|
|
await loadRooms()
|
|
}
|
|
}
|
|
} else {
|
|
// Sequential mode (original logic)
|
|
abortController = new AbortController()
|
|
try {
|
|
const url = chatRoomsAPI.start(selectedId.value)
|
|
const response = await fetch(url, {
|
|
method: 'POST',
|
|
headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
|
|
signal: abortController.signal
|
|
})
|
|
if (!response.ok) {
|
|
const err = await response.json().catch(() => ({}))
|
|
throw new Error(err.message || `HTTP ${response.status}`)
|
|
}
|
|
const reader = response.body.getReader()
|
|
const decoder = new TextDecoder()
|
|
let buffer = ''
|
|
while (true) {
|
|
const { done, value } = await reader.read()
|
|
if (value) buffer += decoder.decode(value, { stream: true })
|
|
if (done) break
|
|
const lines = buffer.split('\n')
|
|
buffer = lines.pop() || ''
|
|
let currentEvent = ''
|
|
for (const line of lines) {
|
|
if (line.startsWith('event: ')) currentEvent = line.slice(7).trim()
|
|
else if (line.startsWith('data: ')) {
|
|
try { handleSSEEvent(currentEvent, JSON.parse(line.slice(6))) } catch (e) {}
|
|
}
|
|
}
|
|
}
|
|
} catch (e) {
|
|
if (e.name !== 'AbortError') error.value = e.message
|
|
} finally {
|
|
streaming.value = false
|
|
abortController = null
|
|
if (selectedId.value) {
|
|
const res = await chatRoomsAPI.get(selectedId.value)
|
|
room.value = res.data
|
|
await loadRooms()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleSSEEvent(event, data) {
|
|
switch (event) {
|
|
// Streaming events
|
|
case 'message_start': {
|
|
streamingMessages.value[data.id] = {
|
|
id: data.id,
|
|
room_id: data.room_id,
|
|
role: data.role,
|
|
sender_name: data.sender_name,
|
|
sender_color: data.sender_color,
|
|
round_number: data.round_number,
|
|
content: '',
|
|
text: '',
|
|
process_steps: [{ id: 'step-0', index: 0, type: 'text', content: '' }],
|
|
streaming: true
|
|
}
|
|
break
|
|
}
|
|
case 'message_chunk': {
|
|
const msg = streamingMessages.value[data.id]
|
|
if (msg) {
|
|
msg.content += data.content
|
|
msg.text += data.content
|
|
msg.process_steps[0].content = data.accumulated
|
|
}
|
|
break
|
|
}
|
|
case 'message_end': {
|
|
const msg = streamingMessages.value[data.id]
|
|
if (msg) {
|
|
msg.streaming = false
|
|
msg.token_count = data.token_count
|
|
// Move from streaming to complete messages
|
|
delete streamingMessages.value[data.id]
|
|
messages.value.push(msg)
|
|
forceScrollToBottom() // 聊天室消息结束时强制滚动
|
|
}
|
|
break
|
|
}
|
|
// Legacy complete message event
|
|
case 'message': {
|
|
// Remove any streaming version of this message
|
|
delete streamingMessages.value[data.id]
|
|
// Add complete message
|
|
messages.value.push(data)
|
|
forceScrollToBottom() // 聊天室消息结束时强制滚动
|
|
break
|
|
}
|
|
case 'room_started': room.value = { ...room.value, status: 'running' }; break
|
|
case 'room_completed': room.value = { ...room.value, status: 'completed' }; break
|
|
case 'room_paused': room.value = { ...room.value, status: 'paused' }; break
|
|
case 'round_start': room.value = { ...room.value, current_round: data.round }; break
|
|
case 'agent_error': error.value = `Agent ${data.agent} 出错: ${data.error}`; break
|
|
case 'error': error.value = data.content || '未知错误'; break
|
|
}
|
|
}
|
|
|
|
async function stopRoom() {
|
|
try {
|
|
if (abortController) { abortController.abort(); abortController = null }
|
|
await chatRoomsAPI.stop(selectedId.value)
|
|
room.value = { ...room.value, status: 'paused' }
|
|
streaming.value = false
|
|
streamingMessages.value = {}
|
|
} catch (e) { console.error('Failed to stop room:', e) }
|
|
}
|
|
|
|
async function resetRoom() {
|
|
if (!confirm('确定重置？将清除所有消息')) return
|
|
try {
|
|
await chatRoomsAPI.reset(selectedId.value)
|
|
messages.value = []
|
|
streamingMessages.value = {}
|
|
const res = await chatRoomsAPI.get(selectedId.value)
|
|
room.value = res.data
|
|
} catch (e) { console.error('Failed to reset room:', e) }
|
|
}
|
|
|
|
async function updateExecutionMode() {
|
|
if (!room.value || !canEditRoom.value) return
|
|
try {
|
|
await chatRoomsAPI.update(room.value.id, { execution_mode: room.value.execution_mode })
|
|
} catch (e) {
|
|
console.error('Failed to update execution mode:', e)
|
|
}
|
|
}
|
|
|
|
// ============ Room Agent Management ============
|
|
|
|
async function addAgentToRoom(agentFromPool) {
|
|
if (!canEditRoom.value) return
|
|
try {
|
|
await chatRoomsAPI.addAgent(selectedId.value, { agent_id: agentFromPool.id })
|
|
const res = await chatRoomsAPI.get(selectedId.value)
|
|
room.value = res.data
|
|
} catch (e) {
|
|
console.error('Failed to add agent:', e)
|
|
}
|
|
}
|
|
|
|
function startEditRoomAgent(agent) {
|
|
editingRoomAgent.value = agent
|
|
roomAgentForm.value = { ...agent }
|
|
}
|
|
|
|
function cancelRoomAgentEdit() {
|
|
editingRoomAgent.value = null
|
|
roomAgentForm.value = {}
|
|
}
|
|
|
|
async function saveRoomAgent() {
|
|
roomAgentSaving.value = true
|
|
try {
|
|
await chatRoomsAPI.updateAgent(selectedId.value, editingRoomAgent.value.id, roomAgentForm.value)
|
|
cancelRoomAgentEdit()
|
|
const res = await chatRoomsAPI.get(selectedId.value)
|
|
room.value = res.data
|
|
} catch (e) {
|
|
console.error('Failed to save room agent:', e)
|
|
} finally {
|
|
roomAgentSaving.value = false
|
|
}
|
|
}
|
|
|
|
async function deleteRoomAgent(agent) {
|
|
if (!confirm(`从房间移除 Agent「${agent.name}」？`)) return
|
|
try {
|
|
await chatRoomsAPI.deleteAgent(selectedId.value, agent.id)
|
|
cancelRoomAgentEdit()
|
|
const res = await chatRoomsAPI.get(selectedId.value)
|
|
room.value = res.data
|
|
} catch (e) {
|
|
console.error('Failed to remove agent:', e)
|
|
}
|
|
}
|
|
|
|
function randomColor() {
|
|
const colors = ['#2563eb', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16']
|
|
return colors[Math.floor(Math.random() * colors.length)]
|
|
}
|
|
|
|
watch(messages, () => { nextTick(scrollToBottom) }, { deep: true })
|
|
|
|
// 启动聊天室时强制滚动
|
|
watch(streaming, (val) => {
|
|
if (val) forceScrollToBottom()
|
|
})
|
|
|
|
onMounted(() => {
|
|
loadAgentPool()
|
|
loadRooms()
|
|
loadProviders()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (abortController) abortController.abort()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-container chat-rooms">
|
|
<div class="rooms-layout">
|
|
<!-- Left sidebar -->
|
|
<aside class="rooms-sidebar">
|
|
<!-- Tab bar -->
|
|
<div class="sidebar-tabs">
|
|
<button class="tab-btn" :class="{ active: sidebarTab === 'rooms' }" @click="sidebarTab = 'rooms'">
|
|
💬 聊天室
|
|
</button>
|
|
<button class="tab-btn" :class="{ active: sidebarTab === 'agents' }" @click="sidebarTab = 'agents'">
|
|
🤖 Agent 池
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Agent Pool tab -->
|
|
<div v-if="sidebarTab === 'agents'" class="sidebar-tab-content">
|
|
<div class="sidebar-header">
|
|
<button class="btn-new-conv" @click="startCreateAgent">+ 新建 Agent</button>
|
|
</div>
|
|
<div v-if="agentPoolLoading" class="sidebar-loading"><div class="spinner-small"></div></div>
|
|
<div v-else-if="agentPool.length === 0" class="sidebar-empty">暂无 Agent</div>
|
|
<div v-else class="pool-list">
|
|
<div v-for="agent in agentPool" :key="agent.id"
|
|
class="pool-item"
|
|
@click="startEditAgent(agent)"
|
|
>
|
|
<span class="agent-dot" :style="{ background: agent.color }">{{ agent.name.charAt(0) }}</span>
|
|
<div class="agent-info">
|
|
<span class="agent-name" :style="{ color: agent.color }">{{ agent.name }}</span>
|
|
<span v-if="agent.role" class="agent-role">{{ agent.role }}</span>
|
|
<span class="agent-model">{{ agent.model || 'default' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Room list tab -->
|
|
<div v-if="sidebarTab === 'rooms'" class="sidebar-tab-content">
|
|
<div class="sidebar-header">
|
|
<button class="btn-new-conv" @click="showCreate = true">+ 新建聊天室</button>
|
|
</div>
|
|
<div v-if="roomsLoading" class="sidebar-loading"><div class="spinner-small"></div></div>
|
|
<div v-else-if="rooms.length === 0" class="sidebar-empty">暂无聊天室</div>
|
|
<div v-else class="room-list">
|
|
<div v-for="r in rooms" :key="r.id" class="room-item" :class="{ active: selectedId === r.id }" @click="selectRoom(r.id)">
|
|
<div class="room-item-header">
|
|
<span class="room-item-title">{{ r.title }}</span>
|
|
<span class="status-dot" :class="statusMap[r.status]?.class" :title="statusMap[r.status]?.label"></span>
|
|
</div>
|
|
<div class="room-item-meta">
|
|
<span class="meta-text">
|
|
<span v-for="a in (r.agents || []).slice(0, 4)" :key="a.id" class="mini-dot" :style="{ background: a.color }" :title="a.name"></span>
|
|
{{ r.agents?.length || 0 }} Agents
|
|
</span>
|
|
<span class="meta-text">{{ r.current_round }}/{{ r.max_rounds }}</span>
|
|
<div class="room-item-actions" @click.stop>
|
|
<button @click="deleteRoom(r.id)" class="btn-icon-sm" title="删除">
|
|
<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Room agents tab (shown when a room is selected) -->
|
|
<div v-if="sidebarTab === 'roomAgents' && room" class="sidebar-tab-content">
|
|
<div class="sidebar-header sidebar-header-row">
|
|
<button class="btn-back" @click="sidebarTab = 'rooms'; selectedId = null; room = null">←</button>
|
|
<span class="sidebar-title">{{ room.title }}</span>
|
|
<button v-if="canEditRoom" class="btn-add-agent-sm" @click="showAddToRoom = true" title="添加 Agent">+</button>
|
|
</div>
|
|
<div class="room-agent-list">
|
|
<div v-for="agent in roomAgents" :key="agent.id"
|
|
class="agent-row"
|
|
:class="{ editing: editingRoomAgent?.id === agent.id }"
|
|
@click="startEditRoomAgent(agent)"
|
|
>
|
|
<span class="agent-dot" :style="{ background: agent.color }">{{ agent.name.charAt(0) }}</span>
|
|
<div class="agent-info">
|
|
<span class="agent-name" :style="{ color: agent.color }">{{ agent.name }}</span>
|
|
<span v-if="agent.role" class="agent-role">{{ agent.role }}</span>
|
|
<span class="agent-model">{{ agent.model || 'default' }}</span>
|
|
</div>
|
|
<button v-if="canEditRoom" class="btn-del-agent" @click.stop="deleteRoomAgent(agent)">
|
|
<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><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div v-if="roomAgents.length === 0" class="no-agents">
|
|
<p>暂无 Agent</p>
|
|
</div>
|
|
</div>
|
|
<!-- Room agent edit form -->
|
|
<div v-if="editingRoomAgent" class="agent-form">
|
|
<div class="agent-form-header">
|
|
<span>编辑房间 Agent</span>
|
|
<button class="btn-close-xs" @click="cancelRoomAgentEdit">×</button>
|
|
</div>
|
|
<div class="agent-form-body">
|
|
<div class="form-row"><input v-model="roomAgentForm.name" placeholder="名称" class="fi" /><input type="color" v-model="roomAgentForm.color" class="fi-color" /></div>
|
|
<div class="form-row">
|
|
<select v-model="roomAgentForm.provider_id" class="fi">
|
|
<option :value="null">默认 Provider</option>
|
|
<option v-for="p in providers" :key="p.id" :value="p.id">{{ p.name }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row"><input v-model="roomAgentForm.model" placeholder="模型" class="fi" /></div>
|
|
<div class="form-row"><textarea v-model="roomAgentForm.system_prompt" rows="2" placeholder="系统提示词" class="fi"></textarea></div>
|
|
<div class="form-row" style="justify-content: flex-end; gap: 0.4rem;">
|
|
<button class="btn-xs btn-secondary" @click="cancelRoomAgentEdit">取消</button>
|
|
<button class="btn-xs btn-primary" @click="saveRoomAgent" :disabled="!roomAgentForm.name || roomAgentSaving">{{ roomAgentSaving ? '...' : '保存' }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-room-info">
|
|
<div class="info-item"><span class="info-label">任务</span><p class="info-value">{{ room.task }}</p></div>
|
|
<div class="info-item"><span class="info-label">轮次</span><p class="info-value">{{ room.max_rounds }}</p></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Right content -->
|
|
<main class="rooms-content">
|
|
<div v-if="!room" class="empty-content">
|
|
<div class="empty-icon">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
</svg>
|
|
</div>
|
|
<p>选择一个聊天室或创建新的</p>
|
|
</div>
|
|
|
|
<div v-else class="room-detail">
|
|
<div class="room-toolbar">
|
|
<div class="toolbar-info">
|
|
<h3>{{ room.title }}</h3>
|
|
<div class="toolbar-badges">
|
|
<span class="status-badge" :class="statusMap[room.status]?.class">{{ statusMap[room.status]?.label }}</span>
|
|
<span class="round-badge" v-if="room.current_round > 0">R{{ room.current_round }}/{{ room.max_rounds }}</span>
|
|
<span v-if="isParallelMode" class="mode-badge parallel">⚡ Parallel</span>
|
|
<span v-else class="mode-badge sequential">📋 Sequential</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="canEditRoom" class="mode-selector">
|
|
<select v-model="room.execution_mode" @change="updateExecutionMode" class="mode-select">
|
|
<option value="sequential">📋 Sequential</option>
|
|
<option value="parallel">⚡ Parallel</option>
|
|
</select>
|
|
</div>
|
|
<div class="toolbar-actions">
|
|
<button v-if="!streaming && room.status !== 'running'" class="btn-ctrl btn-start" @click="startRoom">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
|
|
{{ room.status === 'paused' ? '继续' : '开始' }}
|
|
</button>
|
|
<button v-if="streaming || room.status === 'running'" class="btn-ctrl btn-stop" @click="stopRoom">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
|
|
停止
|
|
</button>
|
|
<button v-if="room.status !== 'running' && messages.length > 0" class="btn-ctrl btn-reset" @click="resetRoom">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
|
|
重置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div v-if="error" class="error-bar">{{ error }}<button @click="error = ''">×</button></div>
|
|
<div class="chat-messages" ref="messagesContainer" @scroll="handleScroll">
|
|
<!-- Parallel mode streaming view -->
|
|
<ParallelMessages
|
|
v-if="isParallelMode && streaming"
|
|
:room-id="selectedId"
|
|
mode="parallel"
|
|
/>
|
|
<!-- Sequential mode or completed messages -->
|
|
<template v-else>
|
|
<div v-if="messagesLoading" class="loading-messages"><div class="spinner-small"></div><span>加载中...</span></div>
|
|
<div v-else-if="messages.length === 0 && Object.keys(streamingMessages).length === 0" class="chat-empty"><p>点击「开始」启动多 Agent 对话</p></div>
|
|
<div v-else>
|
|
<div v-for="(roundMsgs, rIdx) in groupedMessages" :key="rIdx">
|
|
<div class="round-divider" v-if="rIdx > 0">
|
|
<span class="round-divider-line"></span>
|
|
<span class="round-divider-label">第 {{ roundMsgs[0].round_number }} 轮</span>
|
|
<span class="round-divider-line"></span>
|
|
</div>
|
|
<div class="round-group">
|
|
<div class="round-header" v-if="roundMsgs[0].round_number">
|
|
<span class="round-header-icon">💬</span>
|
|
<span class="round-header-text">第 {{ roundMsgs[0].round_number }} 轮对话</span>
|
|
</div>
|
|
<MessageBubble v-for="msg in roundMsgs" :key="msg.id" :message="msg" :deletable="false" />
|
|
</div>
|
|
</div>
|
|
<!-- Streaming messages -->
|
|
<template v-if="Object.keys(streamingMessages).length > 0">
|
|
<div class="round-divider" v-if="messages.length > 0">
|
|
<span class="round-divider-line"></span>
|
|
<span class="round-divider-label">进行中...</span>
|
|
<span class="round-divider-line"></span>
|
|
</div>
|
|
<div class="round-group">
|
|
<MessageBubble
|
|
v-for="(msg, idx) in Object.values(streamingMessages)"
|
|
:key="msg.id + '-' + idx"
|
|
:message="msg"
|
|
:deletable="false"
|
|
class="streaming-message"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Create room modal -->
|
|
<div v-if="showCreate" class="modal-overlay" @click.self="showCreate = false">
|
|
<div class="modal">
|
|
<div class="modal-head"><h3>新建聊天室</h3><button class="btn-close" @click="showCreate = false">×</button></div>
|
|
<div class="modal-body">
|
|
<div class="fg"><label>标题</label><input v-model="newRoom.title" placeholder="项目架构设计讨论" /></div>
|
|
<div class="fg"><label>任务描述</label><textarea v-model="newRoom.task" rows="3" placeholder="描述需要 Agent 讨论的问题..."></textarea></div>
|
|
<div class="fg"><label>最大轮次</label><input v-model.number="newRoom.max_rounds" type="number" min="1" max="20" /></div>
|
|
<div class="agents-select">
|
|
<label class="agents-select-label">选择 Agent</label>
|
|
<div v-if="agentPool.length === 0" class="no-agents-hint">请先在左侧 Agent 池中创建 Agent</div>
|
|
<div v-else class="agents-checkboxes">
|
|
<label v-for="a in agentPool" :key="a.id" class="agent-checkbox" :class="{ checked: newRoom.agent_ids.includes(a.id) }">
|
|
<input type="checkbox" :value="a.id" v-model="newRoom.agent_ids" />
|
|
<span class="agent-dot" :style="{ background: a.color }">{{ a.name.charAt(0) }}</span>
|
|
<span class="agent-checkbox-name" :style="{ color: a.color }">{{ a.name }}</span>
|
|
<span class="agent-checkbox-model">{{ a.model || 'default' }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-foot">
|
|
<button class="btn-secondary" @click="showCreate = false">取消</button>
|
|
<button class="btn-primary" @click="createRoom" :disabled="!newRoom.title || !newRoom.task || newRoom.agent_ids.length === 0 || creating">{{ creating ? '创建中...' : '创建' }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add agent to room modal -->
|
|
<div v-if="showAddToRoom" class="modal-overlay" @click.self="showAddToRoom = false">
|
|
<div class="modal">
|
|
<div class="modal-head"><h3>添加 Agent 到房间</h3><button class="btn-close" @click="showAddToRoom = false">×</button></div>
|
|
<div class="modal-body">
|
|
<div v-if="agentPool.length === 0" class="no-agents-hint">请先在左侧 Agent 池中创建 Agent</div>
|
|
<div v-else class="agents-checkboxes">
|
|
<div v-for="a in agentPool" :key="a.id" class="agent-pick-row" @click="addAgentToRoom(a); showAddToRoom = false">
|
|
<span class="agent-dot" :style="{ background: a.color }">{{ a.name.charAt(0) }}</span>
|
|
<span class="agent-checkbox-name" :style="{ color: a.color }">{{ a.name }}</span>
|
|
<span class="agent-checkbox-model">{{ a.model || 'default' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agent create/edit modal -->
|
|
<div v-if="showAgentModal" class="modal-overlay" @click.self="cancelAgentEdit">
|
|
<div class="modal">
|
|
<div class="modal-head"><h3>{{ editingAgent === 'new' ? '新建 Agent' : '编辑 Agent' }}</h3><button class="btn-close" @click="cancelAgentEdit">×</button></div>
|
|
<div class="modal-body">
|
|
<div class="fg"><label>名称</label><input v-model="agentForm.name" placeholder="如: 架构师" /></div>
|
|
<div class="fg"><label>角色</label><input v-model="agentForm.role" placeholder="如: 架构师、开发者、审查员" /></div>
|
|
<div class="fg-row">
|
|
<div class="fg" style="flex: 1;">
|
|
<label>Provider</label>
|
|
<select v-model="agentForm.provider_id" @change="onProviderChange">
|
|
<option :value="null">默认 Provider</option>
|
|
<option v-for="p in providers" :key="p.id" :value="p.id">{{ p.name }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="fg fg-color">
|
|
<label>颜色</label>
|
|
<div class="color-picker-wrap">
|
|
<input type="color" v-model="agentForm.color" class="color-input" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fg">
|
|
<label>模型</label>
|
|
<select v-model="modelDisplayValue">
|
|
<option value="">自动选择</option>
|
|
<option v-for="m in availableModels" :key="m" :value="m">{{ m }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="fg"><label>系统提示词</label><textarea v-model="agentForm.system_prompt" rows="3" placeholder="定义 Agent 的角色和行为..."></textarea></div>
|
|
</div>
|
|
<div class="modal-foot">
|
|
<button v-if="editingAgent !== 'new'" class="btn-danger" @click="deleteAgentFromPool(editingAgent)">删除</button>
|
|
<div style="flex: 1;"></div>
|
|
<button class="btn-secondary" @click="cancelAgentEdit">取消</button>
|
|
<button class="btn-primary" @click="saveAgent" :disabled="!agentForm.name || agentSaving">{{ agentSaving ? '保存中...' : '保存' }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Layout */
|
|
.page-container { padding: 0 !important; overflow: hidden; height: 100% !important; min-height: 0; display: flex; flex-direction: column; }
|
|
.chat-rooms { height: 100% !important; }
|
|
.rooms-layout { display: flex; gap: 1rem; height: 100%; flex: 1; min-height: 0; }
|
|
|
|
/* ===== Left Sidebar ===== */
|
|
.rooms-sidebar { width: 22%; min-width: 240px; max-width: 320px; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
|
|
|
|
/* Tab bar */
|
|
.sidebar-tabs { display: flex; border-bottom: 1px solid var(--border-light); flex-shrink: 0; background: var(--bg-secondary); }
|
|
.tab-btn { flex: 1; min-width: 0; padding: 0.6rem 0.4rem; background: none; border: none; border-bottom: 2px solid transparent; font-size: 0.72rem; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.tab-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
|
|
.tab-btn.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); background: var(--accent-primary-light); }
|
|
.tab-room-btn { flex: 1 1 auto; min-width: 0; max-width: 100px; }
|
|
|
|
/* Tab content */
|
|
.sidebar-tab-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
|
|
|
|
/* Shared section styles */
|
|
.sidebar-section { display: flex; flex-direction: column; overflow: hidden; border-bottom: 1px solid var(--border-light); }
|
|
.sidebar-section:last-child { border-bottom: none; }
|
|
|
|
/* Pool & room list scrollable */
|
|
.pool-list, .room-list, .room-agent-list { flex: 1; overflow-y: auto; }
|
|
.pool-list { padding: 0.3rem 0.5rem; }
|
|
.room-agent-list { padding: 0.3rem 0.5rem; }
|
|
|
|
.sidebar-header { padding: 0.75rem; border-bottom: 1px solid var(--border-light); }
|
|
.sidebar-header-row { display: flex; justify-content: space-between; align-items: center; }
|
|
.btn-back { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1rem; padding: 0 0.3rem 0 0; line-height: 1; }
|
|
.btn-back:hover { color: var(--accent-primary); }
|
|
.sidebar-title { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.btn-new-conv { width: 100%; padding: 0.5rem; background: var(--accent-primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: all 0.2s; }
|
|
.btn-new-conv:hover { background: var(--accent-primary-hover); }
|
|
.btn-add-agent-sm { width: 26px; height: 26px; background: var(--accent-primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
|
|
.btn-add-agent-sm:hover { background: var(--accent-primary-hover); }
|
|
|
|
.sidebar-loading, .sidebar-empty { display: flex; align-items: center; justify-content: center; padding: 1.5rem; color: var(--text-secondary); font-size: 0.8rem; }
|
|
|
|
/* Agent pool list */
|
|
.pool-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
|
|
.pool-item:hover, .pool-item.editing { background: var(--bg-secondary); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
|
|
.room-item { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: all 0.15s; }
|
|
.room-item:hover { background: var(--bg-hover); }
|
|
.room-item.active { background: var(--accent-primary-light); border-left: 3px solid var(--accent-primary); }
|
|
.room-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.2rem; }
|
|
.room-item-title { font-size: 0.78rem; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
|
|
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
|
.status-idle { background: var(--text-secondary); }
|
|
.status-running { background: #22c55e; animation: pulse 1.5s ease-in-out infinite; }
|
|
.status-paused { background: #f59e0b; }
|
|
.status-completed { background: #3b82f6; }
|
|
.status-error { background: #ef4444; }
|
|
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
|
.room-item-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.7rem; color: var(--text-secondary); }
|
|
.meta-text { display: flex; align-items: center; gap: 3px; }
|
|
.mini-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
|
|
.room-item-actions { margin-left: auto; }
|
|
.btn-icon-sm { background: transparent; border: none; cursor: pointer; padding: 2px; border-radius: 3px; color: var(--text-secondary); transition: all 0.15s; display: flex; align-items: center; }
|
|
.btn-icon-sm:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
|
|
|
|
/* Shared agent row */
|
|
.agent-row, .pool-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
|
|
.agent-row:hover, .agent-row.editing { background: var(--bg-secondary); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
|
|
.agent-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: white; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.2s ease; }
|
|
.agent-row:hover .agent-dot, .pool-item:hover .agent-dot { transform: scale(1.1); }
|
|
.agent-info { flex: 1; min-width: 0; }
|
|
.agent-name { font-size: 0.8rem; font-weight: 600; display: block; }
|
|
.agent-role { font-size: 0.65rem; color: var(--text-secondary); display: block; margin-top: 1px; }
|
|
.agent-model { font-size: 0.6rem; color: var(--text-secondary); display: block; margin-top: 1px; opacity: 0.7; }
|
|
.btn-del-agent { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 2px; opacity: 0; transition: all 0.15s; }
|
|
.agent-row:hover .btn-del-agent { opacity: 1; }
|
|
.btn-del-agent:hover { color: #ef4444; }
|
|
.no-agents { text-align: center; padding: 0.8rem 0; color: var(--text-secondary); font-size: 0.75rem; }
|
|
.no-agents p { margin: 0; }
|
|
|
|
/* Room agent list */
|
|
|
|
/* Sidebar inline form */
|
|
.btn-close-xs { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--text-secondary); padding: 0; line-height: 1; transition: color 0.15s; }
|
|
.btn-close-xs:hover { color: var(--text-primary); }
|
|
.form-row { margin-bottom: 0.5rem; display: flex; gap: 0.4rem; }
|
|
.fi { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.8rem; transition: all 0.2s ease; }
|
|
.fi:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
|
|
.fi-color { width: 32px !important; height: 32px; padding: 2px !important; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
|
|
textarea.fi { resize: vertical; min-height: 50px; }
|
|
|
|
/* Sidebar room info */
|
|
.sidebar-room-info { border-top: 1px solid var(--border-light); padding: 0.5rem 0.6rem; flex-shrink: 0; }
|
|
.info-item { margin-bottom: 0.2rem; }
|
|
.info-label { font-size: 0.6rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.info-value { font-size: 0.75rem; color: var(--text-primary); margin: 0.1rem 0 0; line-height: 1.4; }
|
|
|
|
/* ===== Right Content ===== */
|
|
.rooms-content { flex: 1; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
|
|
.empty-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); }
|
|
.empty-content .empty-icon { opacity: 0.4; margin-bottom: 0.75rem; }
|
|
.empty-content p { font-size: 0.9rem; }
|
|
|
|
.room-detail { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
|
|
.room-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border-light); flex-shrink: 0; }
|
|
.toolbar-info { flex: 1; min-width: 0; }
|
|
.toolbar-info h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.toolbar-badges { display: flex; gap: 0.5rem; align-items: center; margin-top: 2px; }
|
|
.status-badge { font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 8px; font-weight: 600; }
|
|
.round-badge { font-size: 0.65rem; color: var(--text-secondary); }
|
|
|
|
.mode-badge { font-size: 0.6rem; padding: 0.1rem 0.4rem; border-radius: 8px; font-weight: 600; }
|
|
.mode-badge.parallel { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
|
|
.mode-badge.sequential { background: rgba(107, 114, 128, 0.1); color: #6b7280; }
|
|
|
|
.mode-selector { margin-left: auto; }
|
|
.mode-select { padding: 0.25rem 0.5rem; font-size: 0.75rem; border: 1px solid var(--border-light); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); }
|
|
|
|
.toolbar-actions { display: flex; gap: 0.4rem; align-items: center; }
|
|
.btn-ctrl { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.75rem; border: none; border-radius: 6px; font-size: 0.8rem; cursor: pointer; font-weight: 500; }
|
|
.btn-start { background: #22c55e; color: white; }
|
|
.btn-start:hover { background: #16a34a; }
|
|
.btn-stop { background: #ef4444; color: white; }
|
|
.btn-stop:hover { background: #dc2626; }
|
|
.btn-reset { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-light); }
|
|
.btn-reset:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
|
|
|
|
.error-bar { padding: 0.5rem 1rem; background: rgba(239,68,68,0.1); color: #ef4444; font-size: 0.8rem; display: flex; justify-content: space-between; align-items: center; }
|
|
.error-bar button { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 1.2rem; }
|
|
|
|
.chat-messages { flex: 1; overflow-y: auto; padding: 0.75rem; }
|
|
.chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.85rem; }
|
|
.loading-messages { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: var(--text-secondary); font-size: 0.85rem; }
|
|
.spinner-small { width: 24px; height: 24px; border: 3px solid var(--border-light); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 0.5rem; }
|
|
.spinner-sm { width: 16px; height: 16px; border: 2px solid var(--border-light); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.streaming-hint { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; color: var(--text-secondary); font-size: 0.8rem; }
|
|
|
|
/* Round group styling */
|
|
.round-group { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
|
|
.round-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
margin-bottom: 0.25rem;
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
}
|
|
.round-header-icon { font-size: 0.85rem; }
|
|
.round-header-text { opacity: 0.8; }
|
|
|
|
.round-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin: 1.25rem 0;
|
|
padding: 0 0.5rem;
|
|
}
|
|
.round-divider-line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--border-light), transparent);
|
|
}
|
|
.round-divider-label {
|
|
font-size: 0.7rem;
|
|
color: var(--text-tertiary);
|
|
background: var(--bg-secondary);
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border-light);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Streaming message animation */
|
|
.streaming-message {
|
|
opacity: 0.85;
|
|
animation: streamingPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes streamingPulse {
|
|
0%, 100% { opacity: 0.85; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
.streaming-message :deep(.avatar) {
|
|
animation: avatarPulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes avatarPulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
}
|
|
|
|
/* ===== Buttons ===== */
|
|
.btn-xs { padding: 0.2rem 0.5rem; font-size: 0.7rem; border-radius: 4px; border: none; cursor: pointer; }
|
|
.btn-xs.btn-primary { background: var(--accent-primary); color: white; }
|
|
.btn-xs.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.btn-xs.btn-secondary { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-light); }
|
|
.btn-xs.btn-danger { background: var(--danger-bg, rgba(239,68,68,0.1)); color: #ef4444; }
|
|
.btn-primary { padding: 0.5rem 1rem; background: var(--accent-primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
|
|
.btn-primary:hover { background: var(--accent-primary-hover); }
|
|
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.btn-secondary { padding: 0.5rem 1rem; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-light); border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
|
|
.btn-danger { padding: 0.5rem 1rem; background: var(--danger-bg, rgba(239,68,68,0.1)); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
|
|
.btn-danger:hover { background: rgba(239,68,68,0.2); }
|
|
|
|
/* ===== Modal ===== */
|
|
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
|
|
.modal { background: var(--bg-primary); border-radius: 16px; width: 480px; max-width: 95vw; max-height: 85vh; overflow-y: auto; }
|
|
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-light); }
|
|
.modal-head h3 { margin: 0; font-size: 1rem; }
|
|
.btn-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-secondary); padding: 0; line-height: 1; }
|
|
.modal-body { padding: 1.25rem; }
|
|
.modal-foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border-light); }
|
|
|
|
.fg { margin-bottom: 1.25rem; }
|
|
.fg label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.fg input, .fg textarea, .fg select { width: 100%; padding: 0.6rem 0.875rem; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.875rem; box-sizing: border-box; transition: all 0.2s ease; }
|
|
.fg input:focus, .fg textarea:focus, .fg select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
|
|
.fg textarea { resize: vertical; min-height: 80px; }
|
|
.fg-row { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }
|
|
.fg-color { width: 70px; flex-shrink: 0; }
|
|
.fg-color label { margin-bottom: 0.4rem; display: block; }
|
|
.color-picker-wrap { position: relative; display: flex; align-items: center; justify-content: center; height: 42px; padding: 4px 10px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-secondary); transition: all 0.2s ease; }
|
|
.color-picker-wrap:hover { border-color: var(--accent-primary); }
|
|
.color-input { width: 32px !important; height: 32px !important; padding: 0 !important; border: none !important; border-radius: 6px; cursor: pointer; background: none; flex-shrink: 0; }
|
|
|
|
/* Agent selection in create room modal */
|
|
.agents-select { margin-top: 0.5rem; }
|
|
.agents-select-label { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 0.5rem; }
|
|
.no-agents-hint { color: var(--text-secondary); font-size: 0.8rem; padding: 0.5rem 0; }
|
|
.agents-checkboxes { display: flex; flex-direction: column; gap: 0.4rem; max-height: 200px; overflow-y: auto; padding: 0.25rem; }
|
|
.agent-checkbox { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
|
|
.agent-checkbox:hover { background: var(--bg-secondary); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
|
|
.agent-checkbox.checked { background: var(--accent-primary-light); border-color: var(--accent-primary); }
|
|
.agent-checkbox input { display: none; }
|
|
.agent-checkbox-name { font-size: 0.85rem; font-weight: 600; }
|
|
.agent-checkbox-model { font-size: 0.7rem; color: var(--text-secondary); margin-left: auto; }
|
|
|
|
/* Agent pick row in add-to-room modal */
|
|
.agent-pick-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
|
|
.agent-pick-row:hover { background: var(--bg-secondary); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
|
|
</style>
|