| | |
|---|
| | | .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; } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | |
|---|
| | | <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> |
|---|
| | | <!-- <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" /> |
|---|
| | |
|---|
| | | <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> |
|---|
| | |
|---|
| | | <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, |
|---|
| | |
|---|
| | | 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'); |
|---|
| | | var renderSource = (last.md || '').replace(/\n/g, '\n'); |
|---|
| | | last.html = DOMPurify.sanitize(marked.parse(renderSource)); |
|---|
| | | } |
|---|
| | | this.$nextTick(function() { this.scrollToBottom(true); }.bind(this)); |
|---|
