mirror of
https://gitee.com/JavaLionLi/plus-ui.git
synced 2026-09-17 01:04:40 +08:00
snail-ai测试版本提交
This commit is contained in:
parent
eff5fcaa8d
commit
9b77c13337
@ -50,6 +50,13 @@ export const registerCurrentSnailUser = (): AxiosPromise<SnailOpenApiUser> => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const fetchChatMode = (): AxiosPromise<{ mode?: 'stream' | 'sync' }> => {
|
||||||
|
return request({
|
||||||
|
url: '/snail-ai/chat/mode',
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
export const fetchAgentChat = (
|
export const fetchAgentChat = (
|
||||||
agentId: number,
|
agentId: number,
|
||||||
data: AgentChatRequest,
|
data: AgentChatRequest,
|
||||||
@ -131,3 +138,11 @@ export const fetchAgentChat = (
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const fetchAgentChatSync = (agentId: number, data: AgentChatRequest): AxiosPromise<any> => {
|
||||||
|
return request({
|
||||||
|
url: `/snail-ai/agent/${agentId}/chat/sync`,
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|||||||
@ -13,6 +13,33 @@ const currentAgent = ref<AgentItem | null>(null);
|
|||||||
const currentConversationId = ref('');
|
const currentConversationId = ref('');
|
||||||
const currentNickname = ref('');
|
const currentNickname = ref('');
|
||||||
|
|
||||||
|
function normalizeConversationList(payload: any): ConversationSummaryItem[] {
|
||||||
|
const container = payload?.data ?? payload;
|
||||||
|
const source =
|
||||||
|
(Array.isArray(container) && container) ||
|
||||||
|
(Array.isArray(container?.rows) && container.rows) ||
|
||||||
|
(Array.isArray(container?.list) && container.list) ||
|
||||||
|
(Array.isArray(container?.records) && container.records) ||
|
||||||
|
(Array.isArray(payload?.rows) && payload.rows) ||
|
||||||
|
(Array.isArray(payload?.list) && payload.list) ||
|
||||||
|
(Array.isArray(payload?.records) && payload.records) ||
|
||||||
|
[];
|
||||||
|
|
||||||
|
return source
|
||||||
|
.map((item: any) => ({
|
||||||
|
conversationId: String(item?.conversationId ?? item?.id ?? ''),
|
||||||
|
title: String(item?.title ?? item?.name ?? ''),
|
||||||
|
lastMessageDt: item?.lastMessageDt ?? item?.updateTime ?? item?.updateDt,
|
||||||
|
createDt: item?.createDt ?? item?.createTime
|
||||||
|
}))
|
||||||
|
.filter((item: ConversationSummaryItem) => !!item.conversationId)
|
||||||
|
.sort((a: ConversationSummaryItem, b: ConversationSummaryItem) => {
|
||||||
|
const ta = new Date(a.lastMessageDt || a.createDt || 0).getTime();
|
||||||
|
const tb = new Date(b.lastMessageDt || b.createDt || 0).getTime();
|
||||||
|
return tb - ta;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
async function loadAgents() {
|
async function loadAgents() {
|
||||||
const { data: user } = await registerCurrentSnailUser();
|
const { data: user } = await registerCurrentSnailUser();
|
||||||
currentNickname.value = user?.nickname || '';
|
currentNickname.value = user?.nickname || '';
|
||||||
@ -24,8 +51,7 @@ async function loadAgents() {
|
|||||||
async function loadConversations(agentId: number) {
|
async function loadConversations(agentId: number) {
|
||||||
try {
|
try {
|
||||||
const { data } = await fetchAgentConversations(agentId, { page: 1, size: 50 });
|
const { data } = await fetchAgentConversations(agentId, { page: 1, size: 50 });
|
||||||
const list = Array.isArray(data?.data) ? data.data : [];
|
conversations.value = normalizeConversationList(data);
|
||||||
conversations.value = list;
|
|
||||||
} catch {
|
} catch {
|
||||||
conversations.value = [];
|
conversations.value = [];
|
||||||
}
|
}
|
||||||
@ -78,9 +104,10 @@ onMounted(() => {
|
|||||||
.ai-chat-page {
|
.ai-chat-page {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: calc(100vh - 84px);
|
||||||
min-height: calc(100vh - 84px);
|
min-height: 0;
|
||||||
background: #f5f6f8;
|
background: #f5f6f8;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-header {
|
.chat-header {
|
||||||
@ -112,5 +139,6 @@ onMounted(() => {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -21,19 +21,14 @@ function submit() {
|
|||||||
<template>
|
<template>
|
||||||
<div class="chat-input-wrap">
|
<div class="chat-input-wrap">
|
||||||
<div class="chat-input-box">
|
<div class="chat-input-box">
|
||||||
<el-input
|
<div class="input-row">
|
||||||
v-model="content"
|
<el-input
|
||||||
type="textarea"
|
v-model="content"
|
||||||
:autosize="{ minRows: 1, maxRows: 4 }"
|
type="textarea"
|
||||||
placeholder="给智能体发消息"
|
:autosize="{ minRows: 1, maxRows: 4 }"
|
||||||
@keydown.enter.exact.prevent="submit"
|
placeholder="给智能体发消息"
|
||||||
/>
|
@keydown.enter.exact.prevent="submit"
|
||||||
<div class="tool-row">
|
/>
|
||||||
<div class="left-tools">
|
|
||||||
<el-button size="small" round>深度规划</el-button>
|
|
||||||
<el-button size="small" type="primary" round>联网</el-button>
|
|
||||||
<el-button size="small" round>工具</el-button>
|
|
||||||
</div>
|
|
||||||
<el-button type="primary" circle :disabled="sending" @click="submit">
|
<el-button type="primary" circle :disabled="sending" @click="submit">
|
||||||
<el-icon><Promotion /></el-icon>
|
<el-icon><Promotion /></el-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
@ -56,15 +51,13 @@ function submit() {
|
|||||||
padding: 12px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-row {
|
.input-row {
|
||||||
margin-top: 10px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
align-items: flex-end;
|
||||||
align-items: center;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-tools {
|
.input-row :deep(.el-textarea) {
|
||||||
display: flex;
|
flex: 1;
|
||||||
gap: 8px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref, watch } from 'vue';
|
import { computed, ref, watch } from 'vue';
|
||||||
import { createConversation, fetchAgentChat, fetchConversationMessages } from '@/api/ai/agent';
|
import { createConversation, fetchAgentChat, fetchAgentChatSync, fetchChatMode, fetchConversationMessages } from '@/api/ai/agent';
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
import ChatInput from './chat-input.vue';
|
import ChatInput from './chat-input.vue';
|
||||||
|
|
||||||
@ -28,35 +28,152 @@ interface ChatMessage {
|
|||||||
|
|
||||||
const messages = ref<ChatMessage[]>([]);
|
const messages = ref<ChatMessage[]>([]);
|
||||||
const sending = ref(false);
|
const sending = ref(false);
|
||||||
|
const sendMode = ref<'stream' | 'sync'>('stream');
|
||||||
|
let sendingTimer: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
|
||||||
const showWelcome = computed(() => !!props.agent && !props.conversationId && !messages.value.length);
|
const showWelcome = computed(() => !!props.agent && !props.conversationId && !messages.value.length);
|
||||||
const displayQuestions = computed(() => {
|
const displayQuestions = computed(() => {
|
||||||
return (props.agent?.presetQuestions || []).filter(Boolean);
|
return (props.agent?.presetQuestions || []).filter(Boolean);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function normalizeMessageList(payload: any): ChatMessage[] {
|
||||||
|
const container = payload?.data ?? payload;
|
||||||
|
const source =
|
||||||
|
(Array.isArray(container) && container) ||
|
||||||
|
(Array.isArray(container?.rows) && container.rows) ||
|
||||||
|
(Array.isArray(container?.list) && container.list) ||
|
||||||
|
(Array.isArray(container?.records) && container.records) ||
|
||||||
|
(Array.isArray(payload?.rows) && payload.rows) ||
|
||||||
|
(Array.isArray(payload?.list) && payload.list) ||
|
||||||
|
(Array.isArray(payload?.records) && payload.records) ||
|
||||||
|
[];
|
||||||
|
|
||||||
|
return source
|
||||||
|
.map((item: any) => {
|
||||||
|
const role = String(item?.role || item?.messageType || item?.senderType || '').toLowerCase();
|
||||||
|
return {
|
||||||
|
role: role === 'user' ? 'user' : 'assistant',
|
||||||
|
content: String(item?.content ?? item?.message ?? item?.text ?? '')
|
||||||
|
} as ChatMessage;
|
||||||
|
})
|
||||||
|
.filter(item => !!item.content);
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeStreamChunk(chunk: string): string {
|
||||||
|
const text = String(chunk ?? '');
|
||||||
|
if (!text.trim()) return '';
|
||||||
|
|
||||||
|
const tryParseJsonContent = (raw: string): string | null => {
|
||||||
|
try {
|
||||||
|
const obj = JSON.parse(raw);
|
||||||
|
if (obj && typeof obj === 'object' && typeof obj.content === 'string') {
|
||||||
|
return obj.content;
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const single = tryParseJsonContent(text);
|
||||||
|
if (single !== null) return single;
|
||||||
|
|
||||||
|
const normalized = text.replace(/}\s*{/g, '}\n{');
|
||||||
|
const lines = normalized
|
||||||
|
.split('\n')
|
||||||
|
.map(line => line.trim())
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
|
if (!lines.length) return text;
|
||||||
|
let merged = '';
|
||||||
|
for (const line of lines) {
|
||||||
|
const parsed = tryParseJsonContent(line);
|
||||||
|
if (parsed === null) return text;
|
||||||
|
merged += parsed;
|
||||||
|
}
|
||||||
|
return merged;
|
||||||
|
}
|
||||||
|
|
||||||
|
function extractSyncReply(payload: any): string {
|
||||||
|
const container = payload?.data ?? payload;
|
||||||
|
const normalizeChunkedJsonText = (raw: string): string => {
|
||||||
|
const text = String(raw || '').trim();
|
||||||
|
if (!text) return '';
|
||||||
|
if (!text.includes('\n') && !(text.startsWith('{') && text.endsWith('}'))) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
|
const lines = text.split('\n').map(line => line.trim()).filter(Boolean);
|
||||||
|
if (!lines.length) return text;
|
||||||
|
|
||||||
|
let merged = '';
|
||||||
|
for (const line of lines) {
|
||||||
|
try {
|
||||||
|
const item = JSON.parse(line);
|
||||||
|
if (item?.type === 'text' || typeof item?.content === 'string') {
|
||||||
|
merged += String(item.content ?? '');
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return merged || text;
|
||||||
|
};
|
||||||
|
|
||||||
|
const candidates = [
|
||||||
|
container?.content,
|
||||||
|
container?.text,
|
||||||
|
container?.message,
|
||||||
|
container?.answer,
|
||||||
|
container?.reply,
|
||||||
|
container?.outputText,
|
||||||
|
container?.result
|
||||||
|
];
|
||||||
|
const hit = candidates.find(item => typeof item === 'string' && item.trim());
|
||||||
|
if (hit) return normalizeChunkedJsonText(String(hit));
|
||||||
|
if (Array.isArray(container?.messages)) {
|
||||||
|
const list = normalizeMessageList(container.messages).filter(item => item.role === 'assistant');
|
||||||
|
return list[list.length - 1]?.content || '';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadSendMode() {
|
||||||
|
try {
|
||||||
|
const { data } = await fetchChatMode();
|
||||||
|
sendMode.value = data?.mode === 'sync' ? 'sync' : 'stream';
|
||||||
|
} catch {
|
||||||
|
sendMode.value = 'stream';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function loadMessages() {
|
async function loadMessages() {
|
||||||
if (!props.agent || !props.conversationId) {
|
if (!props.agent || !props.conversationId) {
|
||||||
messages.value = [];
|
messages.value = [];
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const { data } = await fetchConversationMessages(props.agent.id, props.conversationId);
|
const { data } = await fetchConversationMessages(props.agent.id, props.conversationId);
|
||||||
if (Array.isArray(data)) {
|
messages.value = normalizeMessageList(data);
|
||||||
messages.value = data.map(item => ({
|
|
||||||
role: String(item.role).toLowerCase() === 'user' ? 'user' : 'assistant',
|
|
||||||
content: item.content || ''
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onSend(content: string) {
|
async function onSend(content: string) {
|
||||||
if (!props.agent || !content.trim() || sending.value) return;
|
if (!props.agent || !content.trim() || sending.value) return;
|
||||||
sending.value = true;
|
sending.value = true;
|
||||||
|
if (sendingTimer) clearTimeout(sendingTimer);
|
||||||
|
sendingTimer = setTimeout(() => {
|
||||||
|
if (sending.value) {
|
||||||
|
sending.value = false;
|
||||||
|
ElMessage.warning('响应超时,已恢复发送按钮,请重试');
|
||||||
|
}
|
||||||
|
}, 60000);
|
||||||
let targetConversationId = props.conversationId;
|
let targetConversationId = props.conversationId;
|
||||||
if (!targetConversationId) {
|
if (!targetConversationId) {
|
||||||
messages.value = [];
|
messages.value = [];
|
||||||
const { data } = await createConversation(props.agent.id, { title: content.slice(0, 20) });
|
const { data } = await createConversation(props.agent.id, { title: content.slice(0, 20) });
|
||||||
if (!data?.conversationId) {
|
if (!data?.conversationId) {
|
||||||
sending.value = false;
|
sending.value = false;
|
||||||
|
if (sendingTimer) {
|
||||||
|
clearTimeout(sendingTimer);
|
||||||
|
sendingTimer = null;
|
||||||
|
}
|
||||||
ElMessage.error('创建会话失败,请稍后重试');
|
ElMessage.error('创建会话失败,请稍后重试');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -65,41 +182,77 @@ async function onSend(content: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
messages.value.push({ role: 'user', content });
|
messages.value.push({ role: 'user', content });
|
||||||
messages.value.push({ role: 'assistant', content: '' });
|
if (sendMode.value === 'sync') {
|
||||||
const assistantIndex = messages.value.length - 1;
|
try {
|
||||||
|
const { data } = await fetchAgentChatSync(props.agent.id, {
|
||||||
fetchAgentChat(
|
conversationId: targetConversationId,
|
||||||
props.agent.id,
|
content,
|
||||||
{
|
webSearchEnabled: props.agent.webSearchEnabled
|
||||||
conversationId: targetConversationId,
|
});
|
||||||
content,
|
const reply = extractSyncReply(data) || '(后端已返回空消息)';
|
||||||
webSearchEnabled: props.agent.webSearchEnabled
|
messages.value.push({ role: 'assistant', content: reply });
|
||||||
},
|
} catch (error: any) {
|
||||||
{
|
ElMessage.error(error?.message || '对话失败,请稍后重试');
|
||||||
onMessage(chunk) {
|
} finally {
|
||||||
const msg = messages.value[assistantIndex];
|
sending.value = false;
|
||||||
if (msg) msg.content += chunk;
|
if (sendingTimer) {
|
||||||
},
|
clearTimeout(sendingTimer);
|
||||||
onThinking() {},
|
sendingTimer = null;
|
||||||
onDone() {
|
|
||||||
const msg = messages.value[assistantIndex];
|
|
||||||
if (msg && !msg.content.trim()) {
|
|
||||||
msg.content = '(后端已返回空消息)';
|
|
||||||
}
|
|
||||||
sending.value = false;
|
|
||||||
},
|
|
||||||
onError(error) {
|
|
||||||
messages.value.splice(assistantIndex, 1);
|
|
||||||
sending.value = false;
|
|
||||||
ElMessage.error(error.message || '对话失败,请稍后重试');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
messages.value.push({ role: 'assistant', content: '' });
|
||||||
|
const assistantIndex = messages.value.length - 1;
|
||||||
|
fetchAgentChat(
|
||||||
|
props.agent.id,
|
||||||
|
{
|
||||||
|
conversationId: targetConversationId,
|
||||||
|
content,
|
||||||
|
webSearchEnabled: props.agent.webSearchEnabled
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onMessage(chunk) {
|
||||||
|
const msg = messages.value[assistantIndex];
|
||||||
|
if (msg) msg.content += normalizeStreamChunk(chunk);
|
||||||
|
},
|
||||||
|
onThinking() {},
|
||||||
|
onDone() {
|
||||||
|
const msg = messages.value[assistantIndex];
|
||||||
|
if (msg && !msg.content.trim()) {
|
||||||
|
msg.content = '(后端已返回空消息)';
|
||||||
|
}
|
||||||
|
sending.value = false;
|
||||||
|
if (sendingTimer) {
|
||||||
|
clearTimeout(sendingTimer);
|
||||||
|
sendingTimer = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError(error) {
|
||||||
|
messages.value.splice(assistantIndex, 1);
|
||||||
|
sending.value = false;
|
||||||
|
if (sendingTimer) {
|
||||||
|
clearTimeout(sendingTimer);
|
||||||
|
sendingTimer = null;
|
||||||
|
}
|
||||||
|
ElMessage.error(error.message || '对话失败,请稍后重试');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => [props.agent?.id, props.conversationId] as const,
|
() => [props.agent?.id, props.conversationId] as const,
|
||||||
async ([agentId, convId]) => {
|
async ([agentId, convId]) => {
|
||||||
|
if (sending.value && convId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
sending.value = false;
|
||||||
|
if (sendingTimer) {
|
||||||
|
clearTimeout(sendingTimer);
|
||||||
|
sendingTimer = null;
|
||||||
|
}
|
||||||
if (agentId && convId) {
|
if (agentId && convId) {
|
||||||
await loadMessages();
|
await loadMessages();
|
||||||
} else if (agentId && !convId) {
|
} else if (agentId && !convId) {
|
||||||
@ -108,6 +261,8 @@ watch(
|
|||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
|
loadSendMode();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -154,6 +309,8 @@ watch(
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-state {
|
.empty-state {
|
||||||
@ -167,10 +324,11 @@ watch(
|
|||||||
.chat-scroll {
|
.chat-scroll {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 16px 18px 0;
|
padding: 16px 18px 0;
|
||||||
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-content {
|
.chat-content {
|
||||||
max-width: 980px;
|
max-width: 920px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -54,7 +54,6 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
|
|||||||
|
|
||||||
<div class="sidebar-block">
|
<div class="sidebar-block">
|
||||||
<div class="block-title">对话记录</div>
|
<div class="block-title">对话记录</div>
|
||||||
<div class="sub-title">昨日</div>
|
|
||||||
<div
|
<div
|
||||||
v-for="conv in conversations"
|
v-for="conv in conversations"
|
||||||
:key="conv.conversationId"
|
:key="conv.conversationId"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user