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:
parent
78c8c43699
commit
cc094e48ce
1 changed files with 68 additions and 4 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue