From ad79ba405b2d1ac96423f88f4e8a76c584b9d38a Mon Sep 17 00:00:00 2001
From: zwl <1051256694@qq.com>
Date: 星期一, 09 二月 2026 15:57:06 +0800
Subject: [PATCH] #
---
src/main/webapp/views/ai/diagnosis.html | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 103 insertions(+), 13 deletions(-)
diff --git a/src/main/webapp/views/ai/diagnosis.html b/src/main/webapp/views/ai/diagnosis.html
index e087e17..b424504 100644
--- a/src/main/webapp/views/ai/diagnosis.html
+++ b/src/main/webapp/views/ai/diagnosis.html
@@ -9,7 +9,7 @@
body { background: #f5f7fa; }
.container { max-width: 1100px; margin: 24px auto; }
.actions { display: flex; gap: 12px; align-items: center; }
- .output { height: 65vh; }
+ .output { height: 60vh; }
.markdown-body { font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.markdown-body p { margin: 4px 0; }
.markdown-body ul, .markdown-body ol { margin: 4px 0 4px 16px; padding: 0; }
@@ -27,6 +27,27 @@
.avatar { width: 24px; height: 24px; display: flex; align-items: center; margin-right: 8px; }
.time { font-size: 12px; color: #909399; text-align: right; margin-top: 6px; }
.output .el-card__body { height: 100%; padding: 0; }
+ .assistant-running { display: flex; align-items: center; gap: 8px; color: #909399; }
+ details.think-block {
+ border: 1px solid #e4e7ed;
+ border-radius: 4px;
+ padding: 8px;
+ margin: 8px 0;
+ background-color: #fcfcfc;
+ }
+ details.think-block summary {
+ cursor: pointer;
+ color: #909399;
+ font-size: 13px;
+ font-weight: bold;
+ outline: none;
+ }
+ details.think-block .content {
+ margin-top: 8px;
+ color: #606266;
+ font-size: 13px;
+ white-space: pre-wrap;
+ }
</style>
</head>
<body>
@@ -37,11 +58,16 @@
<span>WCS AI 鍔╂墜</span>
</div>
- <div class="actions">
+ <div class="actions" style="flex-wrap: wrap;">
<el-button type="primary" :loading="loading" :disabled="streaming" @click="start">涓�閿瘖鏂郴缁�</el-button>
<el-button type="warning" :disabled="!streaming" @click="stop">鍋滄</el-button>
- <el-button @click="clear">娓呯┖</el-button>
- <span class="status">{{ statusText }}</span>
+ <!-- <el-button @click="clear">娓呯┖褰撳墠鑱婂ぉ</el-button> -->
+ <span class="status" style="margin-right: 12px;">{{ statusText }}</span>
+ <el-select v-model="currentChatId" placeholder="閫夋嫨浼氳瘽" style="min-width:240px;" @change="switchChat" :disabled="streaming">
+ <el-option v-for="c in chats" :key="c.chatId" :label="(c.title||('浼氳瘽 '+c.chatId)) + '锛�'+(c.size||0)+'锛�'" :value="c.chatId" />
+ </el-select>
+ <el-button type="success" plain icon="el-icon-plus" @click="newChat" :disabled="streaming">鏂颁細璇�</el-button>
+ <el-button type="danger" plain icon="el-icon-delete" @click="deleteChat" :disabled="!currentChatId || streaming">鍒犻櫎浼氳瘽</el-button>
</div>
<el-divider></el-divider>
@@ -51,7 +77,11 @@
<div v-for="(m,i) in messages" :key="i" class="msg" :class="m.role">
<div class="avatar" v-html="m.role === 'assistant' ? assistantIcon : userIcon"></div>
<div class="bubble">
- <div v-if="m.role === 'assistant'" class="markdown-body" v-html="m.html"></div>
+ <div v-if="m.role === 'assistant' && m.html" class="markdown-body" v-html="m.html"></div>
+ <div v-else-if="m.role === 'assistant' && streaming && i === messages.length - 1" class="assistant-running">
+ <span v-html="assistantIcon"></span>
+ <span>AI鍔╂墜姝ｅ湪杩愯涓�</span>
+ </div>
<div v-else v-text="m.text"></div>
<div class="time">{{ m.ts }}</div>
</div>
@@ -69,8 +99,8 @@
<script type="text/javascript" src="../../static/vue/js/vue.min.js"></script>
<script type="text/javascript" src="../../static/vue/element/element.js"></script>
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/dompurify@2.4.3/dist/purify.min.js"></script>
+ <script src="../../static/js/marked.min.js"></script>
+ <script src="../../static/js/purify.min.js"></script>
<script>
marked.setOptions({
gfm: true,
@@ -102,7 +132,10 @@
renderIntervalMs: 120,
stepChars: 6,
userInput: '',
- autoScrollThreshold: 80
+ autoScrollThreshold: 80,
+ chats: [],
+ currentChatId: '',
+ resetting: false
};
},
computed: {
@@ -117,6 +150,53 @@
}
},
methods: {
+ renderMarkdown: function(md, streaming) {
+ if (!md) return '';
+ var src = md.replace(/\\n/g, '\n');
+ var openAttr = streaming ? ' open' : '';
+ src = src.replace(/<think>/g, '<details class="think-block"' + openAttr + '><summary>AI娣卞害鎬濊��</summary><div class="content">');
+ src = src.replace(/<\/think>/g, '</div></details>');
+ if (streaming && src.indexOf('<details class="think-block"') >= 0 && src.indexOf('</div></details>') < 0) {
+ src += '</div></details>';
+ }
+ return DOMPurify.sanitize(marked.parse(src));
+ },
+ loadChats: function() {
+ var self = this;
+ fetch(baseUrl + '/ai/diagnose/chats', { headers: { 'token': localStorage.getItem('token') } })
+ .then(function(r){ return r.json(); })
+ .then(function(arr){ if (Array.isArray(arr)) { self.chats = arr; } });
+ },
+ switchChat: function() {
+ var self = this;
+ if (!self.currentChatId) { self.clear(); return; }
+ fetch(baseUrl + '/ai/diagnose/chats/' + encodeURIComponent(self.currentChatId) + '/history', { headers: { 'token': localStorage.getItem('token') } })
+ .then(function(r){ return r.json(); })
+ .then(function(arr){
+ if (!Array.isArray(arr)) return;
+ var msgs = [];
+ for (var i=0;i<arr.length;i++) {
+ var m = arr[i];
+ if (m.role === 'assistant') msgs.push({ role: 'assistant', md: m.content || '', html: self.renderMarkdown(m.content || '', false), ts: self.nowStr() });
+ else msgs.push({ role: 'user', text: m.content || '', ts: self.nowStr() });
+ }
+ self.messages = msgs;
+ self.$nextTick(function(){ self.scrollToBottom(true); });
+ });
+ },
+ newChat: function() {
+ var id = Date.now() + '_' + Math.random().toString(36).substr(2,8);
+ this.currentChatId = id;
+ this.resetting = true;
+ this.clear();
+ },
+ deleteChat: function() {
+ var self = this;
+ if (!self.currentChatId) return;
+ fetch(baseUrl + '/ai/diagnose/chats/' + encodeURIComponent(self.currentChatId), { method: 'DELETE', headers: { 'token': localStorage.getItem('token') } })
+ .then(function(r){ return r.json(); })
+ .then(function(ok){ if (ok === true) { self.currentChatId = ''; self.clear(); self.loadChats(); self.newChat(); } });
+ },
shouldAutoScroll: function() {
var el = this.$refs.chat;
if (!el) return false;
@@ -150,6 +230,8 @@
this.messages.push({ role: 'assistant', md: '', html: '', ts: this.nowStr() });
this.scrollToBottom(true);
var url = baseUrl + '/ai/diagnose/askStream?prompt=' + encodeURIComponent(msg);
+ if (this.currentChatId) url += '&chatId=' + encodeURIComponent(this.currentChatId);
+ if (this.resetting) url += '&reset=true';
this.source = new EventSource(url);
var self = this;
this.source.onopen = function() {
@@ -169,6 +251,7 @@
self.stop();
};
this.userInput = '';
+ this.resetting = false;
},
start: function() {
if (this.streaming) return;
@@ -222,8 +305,7 @@
self.lastRenderTs = now;
var last = self.messages.length > 0 ? self.messages[self.messages.length - 1] : null;
if (last && last.role === 'assistant') {
- var renderSource = (last.md || '').replace(/\\n/g, '\n');
- last.html = DOMPurify.sanitize(marked.parse(renderSource));
+ last.html = self.renderMarkdown(last.md || '', true);
self.$nextTick(function() { self.scrollToBottom(true); });
}
}
@@ -234,24 +316,32 @@
this.source.close();
this.source = null;
}
+ var last = this.messages.length > 0 ? this.messages[this.messages.length - 1] : null;
+ if (last && last.role === 'assistant' && this.pendingText && this.pendingText.length > 0) {
+ last.md = (last.md || '') + this.pendingText;
+ this.pendingText = '';
+ }
this.streaming = false;
this.loading = false;
if (this.typingTimer) {
clearInterval(this.typingTimer);
this.typingTimer = null;
}
- var last = this.messages.length > 0 ? this.messages[this.messages.length - 1] : null;
if (last && last.role === 'assistant') {
- var renderSource = (last.md || '').replace(/\\n/g, '\n');
- last.html = DOMPurify.sanitize(marked.parse(renderSource));
+ last.html = this.renderMarkdown(last.md || '', false);
}
this.$nextTick(function() { this.scrollToBottom(true); }.bind(this));
+ this.loadChats();
},
clear: function() {
this.messages = [];
this.pendingText = '';
}
}
+ ,mounted: function() {
+ this.loadChats();
+ this.newChat();
+ }
});
</script>
</body>
--
Gitblit v1.9.1