|
@@ -1,15 +1,13 @@
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import { ref, reactive, nextTick, watch, onMounted, onBeforeUnmount, computed } from 'vue'
|
|
import { ref, reactive, nextTick, watch, onMounted, onBeforeUnmount, computed } from 'vue'
|
|
|
import { useAgui } from './useAgui.js'
|
|
import { useAgui } from './useAgui.js'
|
|
|
|
|
+import { GATEWAY_URL, AGENTS } from './config.js'
|
|
|
|
|
|
|
|
const { messages, running, error, send, newChat } = useAgui()
|
|
const { messages, running, error, send, newChat } = useAgui()
|
|
|
|
|
|
|
|
-const agents = reactive([
|
|
|
|
|
- { name: 'DemoAgentAGUI', url: '/agent-api/DemoAgentAGUI' },
|
|
|
|
|
- { name: 'DemoAgentAGUI (直连)', url: 'http://127.0.0.1:9999/DemoAgentAGUI' }
|
|
|
|
|
-])
|
|
|
|
|
|
|
+const agents = reactive(AGENTS)
|
|
|
|
|
|
|
|
-const currentUrl = ref(agents[0]?.url || '')
|
|
|
|
|
|
|
+const currentId = ref(agents[0]?.id || '')
|
|
|
const input = ref('')
|
|
const input = ref('')
|
|
|
const listEl = ref(null)
|
|
const listEl = ref(null)
|
|
|
const textareaEl = ref(null)
|
|
const textareaEl = ref(null)
|
|
@@ -18,15 +16,21 @@ const textareaEl = ref(null)
|
|
|
const agentMenuOpen = ref(false)
|
|
const agentMenuOpen = ref(false)
|
|
|
const agentSelectorEl = ref(null)
|
|
const agentSelectorEl = ref(null)
|
|
|
const currentAgent = computed(
|
|
const currentAgent = computed(
|
|
|
- () => agents.find((a) => a.url === currentUrl.value) || agents[0]
|
|
|
|
|
|
|
+ () => agents.find((a) => a.id === currentId.value) || agents[0]
|
|
|
)
|
|
)
|
|
|
|
|
+// 实际请求地址 = 网关地址 + 智能体 ID
|
|
|
|
|
+const currentUrl = computed(() => {
|
|
|
|
|
+ const a = currentAgent.value
|
|
|
|
|
+ if (!a) return ''
|
|
|
|
|
+ return `${GATEWAY_URL.replace(/\/+$/, '')}/${a.id}`
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
function toggleAgentMenu() {
|
|
function toggleAgentMenu() {
|
|
|
agentMenuOpen.value = !agentMenuOpen.value
|
|
agentMenuOpen.value = !agentMenuOpen.value
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function selectAgent(a) {
|
|
function selectAgent(a) {
|
|
|
- currentUrl.value = a.url
|
|
|
|
|
|
|
+ currentId.value = a.id
|
|
|
agentMenuOpen.value = false
|
|
agentMenuOpen.value = false
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -104,7 +108,7 @@ watch(
|
|
|
<!-- 顶栏 -->
|
|
<!-- 顶栏 -->
|
|
|
<header class="topbar">
|
|
<header class="topbar">
|
|
|
<div class="topbar-title">
|
|
<div class="topbar-title">
|
|
|
- {{ currentAgent?.name || '智能体对话' }}
|
|
|
|
|
|
|
+ {{ currentAgent?.desc || '智能体对话' }}
|
|
|
</div>
|
|
</div>
|
|
|
<div class="topbar-status" :class="{ active: running }">
|
|
<div class="topbar-status" :class="{ active: running }">
|
|
|
<span class="status-dot"></span>
|
|
<span class="status-dot"></span>
|
|
@@ -131,7 +135,7 @@ watch(
|
|
|
<div v-else-if="m.role === 'assistant'" class="msg-row assistant">
|
|
<div v-else-if="m.role === 'assistant'" class="msg-row assistant">
|
|
|
<div class="avatar assistant-avatar">AI</div>
|
|
<div class="avatar assistant-avatar">AI</div>
|
|
|
<div class="assistant-content">
|
|
<div class="assistant-content">
|
|
|
- <div class="assistant-name">{{ currentAgent?.name || '智能体' }}</div>
|
|
|
|
|
|
|
+ <div class="assistant-name">{{ currentAgent?.desc || '智能体' }}</div>
|
|
|
<div class="assistant-text">
|
|
<div class="assistant-text">
|
|
|
{{ m.content }}<span v-if="running && !m.content" class="cursor">▋</span>
|
|
{{ m.content }}<span v-if="running && !m.content" class="cursor">▋</span>
|
|
|
</div>
|
|
</div>
|
|
@@ -185,7 +189,7 @@ watch(
|
|
|
@click="toggleAgentMenu"
|
|
@click="toggleAgentMenu"
|
|
|
>
|
|
>
|
|
|
<span class="agent-dot"></span>
|
|
<span class="agent-dot"></span>
|
|
|
- <span class="agent-selector-name">{{ currentAgent?.name }}</span>
|
|
|
|
|
|
|
+ <span class="agent-selector-name">{{ currentAgent?.desc }}</span>
|
|
|
<svg class="chevron" width="12" height="12" viewBox="0 0 24 24" fill="none">
|
|
<svg class="chevron" width="12" height="12" viewBox="0 0 24 24" fill="none">
|
|
|
<path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
</svg>
|
|
</svg>
|
|
@@ -195,15 +199,15 @@ watch(
|
|
|
<div class="agent-menu-title">选择智能体</div>
|
|
<div class="agent-menu-title">选择智能体</div>
|
|
|
<button
|
|
<button
|
|
|
v-for="a in agents"
|
|
v-for="a in agents"
|
|
|
- :key="a.url"
|
|
|
|
|
|
|
+ :key="a.id"
|
|
|
type="button"
|
|
type="button"
|
|
|
class="agent-menu-item"
|
|
class="agent-menu-item"
|
|
|
- :class="{ active: currentUrl === a.url }"
|
|
|
|
|
|
|
+ :class="{ active: currentId === a.id }"
|
|
|
@click="selectAgent(a)"
|
|
@click="selectAgent(a)"
|
|
|
>
|
|
>
|
|
|
<span class="agent-dot"></span>
|
|
<span class="agent-dot"></span>
|
|
|
- <span class="agent-menu-name">{{ a.name }}</span>
|
|
|
|
|
- <svg v-if="currentUrl === a.url" class="check" width="14" height="14" viewBox="0 0 24 24" fill="none">
|
|
|
|
|
|
|
+ <span class="agent-menu-name">{{ a.desc }}</span>
|
|
|
|
|
+ <svg v-if="currentId === a.id" class="check" width="14" height="14" viewBox="0 0 24 24" fill="none">
|
|
|
<path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
</svg>
|
|
</svg>
|
|
|
</button>
|
|
</button>
|