Implement chat history caching and enhance message rendering in Step5Interaction component

- Added chat history caching to preserve conversation records for report agents and selected agents.
- Introduced a method to save and restore chat history based on the selected target.
- Improved message rendering by cleaning up unnecessary <br> tags and ensuring proper list formatting with CSS.
- Automatically save chat history upon sending messages for better user experience.
This commit is contained in:
666ghj 2025-12-16 20:03:17 +08:00
parent 78c8c43699
commit cc094e48ce

View file

@ -433,6 +433,7 @@ const showToolsDetail = ref(true)
// Chat State
const chatInput = ref('')
const chatHistory = ref([])
const chatHistoryCache = ref({}) // : { 'report_agent': [], 'agent_0': [], 'agent_1': [], ... }
const isSending = ref(false)
const chatMessages = ref(null)
const chatInputRef = ref(null)
@ -482,13 +483,29 @@ const selectChatTarget = (target) => {
}
}
//
const saveChatHistory = () => {
if (chatHistory.value.length === 0) return
if (chatTarget.value === 'report_agent') {
chatHistoryCache.value['report_agent'] = [...chatHistory.value]
} else if (selectedAgentIndex.value !== null) {
chatHistoryCache.value[`agent_${selectedAgentIndex.value}`] = [...chatHistory.value]
}
}
const selectReportAgentChat = () => {
//
saveChatHistory()
activeTab.value = 'chat'
chatTarget.value = 'report_agent'
selectedAgent.value = null
selectedAgentIndex.value = null
showAgentDropdown.value = false
chatHistory.value = []
// Report Agent
chatHistory.value = chatHistoryCache.value['report_agent'] || []
}
const selectSurveyTab = () => {
@ -507,11 +524,16 @@ const toggleAgentDropdown = () => {
}
const selectAgent = (agent, idx) => {
//
saveChatHistory()
selectedAgent.value = agent
selectedAgentIndex.value = idx
chatTarget.value = 'agent'
showAgentDropdown.value = false
chatHistory.value = [] // Reset chat history for new agent
// Agent
chatHistory.value = chatHistoryCache.value[`agent_${idx}`] || []
addLog(`选择对话对象: ${agent.username}`)
}
@ -577,8 +599,12 @@ const renderMarkdown = (content) => {
html = html.replace(/<p class="md-p">(<ul|<ol|<blockquote|<pre|<hr)/g, '$1')
html = html.replace(/(<\/ul>|<\/ol>|<\/blockquote>|<\/pre>)<\/p>/g, '$1')
// <br>
html = html.replace(/<br>(<ul|<ol)/g, '$1')
html = html.replace(/(<\/ul>|<\/ol>)<br>/g, '$1')
html = html.replace(/<br>\s*(<ul|<ol)/g, '$1')
html = html.replace(/(<\/ul>|<\/ol>)\s*<br>/g, '$1')
// <br>
html = html.replace(/(<br>\s*){2,}/g, '<br>')
// <br>
html = html.replace(/(<\/ol>|<\/ul>)<br>(<p|<div)/g, '$1$2')
return html
}
@ -616,6 +642,8 @@ const sendMessage = async () => {
} finally {
isSending.value = false
scrollToBottom()
//
saveChatHistory()
}
}
@ -1922,6 +1950,42 @@ watch(() => props.simulationId, (newId) => {
margin-bottom: 0;
}
/* 修复有序列表编号 - 使用 CSS 计数器让多个 ol 连续编号 */
.message-text {
counter-reset: list-counter;
}
.message-text :deep(.md-ol) {
list-style: none;
padding-left: 0;
margin: 8px 0;
}
.message-text :deep(.md-oli) {
counter-increment: list-counter;
display: flex;
gap: 8px;
margin: 4px 0;
}
.message-text :deep(.md-oli)::before {
content: counter(list-counter) ".";
font-weight: 600;
color: #374151;
min-width: 20px;
flex-shrink: 0;
}
/* 无序列表样式 */
.message-text :deep(.md-ul) {
padding-left: 20px;
margin: 8px 0;
}
.message-text :deep(.md-li) {
margin: 4px 0;
}
/* Typing Indicator */
.typing-indicator {
display: flex;